UNPKG

5.22 kBJavaScriptView Raw
1import {useRef as $6dfIe$useRef, useCallback as $6dfIe$useCallback} from "react";
2import {useLayoutEffect as $6dfIe$useLayoutEffect, useEffectEvent as $6dfIe$useEffectEvent} from "@react-aria/utils";
3
4/*
5 * Copyright 2020 Adobe. All rights reserved.
6 * This file is licensed to you under the Apache License, Version 2.0 (the "License");
7 * you may not use this file except in compliance with the License. You may obtain a copy
8 * of the License at http://www.apache.org/licenses/LICENSE-2.0
9 *
10 * Unless required by applicable law or agreed to in writing, software distributed under
11 * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
12 * OF ANY KIND, either express or implied. See the License for the specific language
13 * governing permissions and limitations under the License.
14 */
15
16class $8a9cb279dc87e130$export$905e7fc544a71f36 {
17 isDefaultPrevented() {
18 return this.nativeEvent.defaultPrevented;
19 }
20 preventDefault() {
21 this.defaultPrevented = true;
22 this.nativeEvent.preventDefault();
23 }
24 stopPropagation() {
25 this.nativeEvent.stopPropagation();
26 this.isPropagationStopped = ()=>true;
27 }
28 isPropagationStopped() {
29 return false;
30 }
31 persist() {}
32 constructor(type, nativeEvent){
33 this.nativeEvent = nativeEvent;
34 this.target = nativeEvent.target;
35 this.currentTarget = nativeEvent.currentTarget;
36 this.relatedTarget = nativeEvent.relatedTarget;
37 this.bubbles = nativeEvent.bubbles;
38 this.cancelable = nativeEvent.cancelable;
39 this.defaultPrevented = nativeEvent.defaultPrevented;
40 this.eventPhase = nativeEvent.eventPhase;
41 this.isTrusted = nativeEvent.isTrusted;
42 this.timeStamp = nativeEvent.timeStamp;
43 this.type = type;
44 }
45}
46function $8a9cb279dc87e130$export$715c682d09d639cc(onBlur) {
47 let stateRef = (0, $6dfIe$useRef)({
48 isFocused: false,
49 observer: null
50 });
51 // Clean up MutationObserver on unmount. See below.
52 // eslint-disable-next-line arrow-body-style
53 (0, $6dfIe$useLayoutEffect)(()=>{
54 const state = stateRef.current;
55 return ()=>{
56 if (state.observer) {
57 state.observer.disconnect();
58 state.observer = null;
59 }
60 };
61 }, []);
62 let dispatchBlur = (0, $6dfIe$useEffectEvent)((e)=>{
63 onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
64 });
65 // This function is called during a React onFocus event.
66 return (0, $6dfIe$useCallback)((e)=>{
67 // React does not fire onBlur when an element is disabled. https://github.com/facebook/react/issues/9142
68 // Most browsers fire a native focusout event in this case, except for Firefox. In that case, we use a
69 // MutationObserver to watch for the disabled attribute, and dispatch these events ourselves.
70 // For browsers that do, focusout fires before the MutationObserver, so onBlur should not fire twice.
71 if (e.target instanceof HTMLButtonElement || e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement || e.target instanceof HTMLSelectElement) {
72 stateRef.current.isFocused = true;
73 let target = e.target;
74 let onBlurHandler = (e)=>{
75 stateRef.current.isFocused = false;
76 if (target.disabled) // For backward compatibility, dispatch a (fake) React synthetic event.
77 dispatchBlur(new $8a9cb279dc87e130$export$905e7fc544a71f36('blur', e));
78 // We no longer need the MutationObserver once the target is blurred.
79 if (stateRef.current.observer) {
80 stateRef.current.observer.disconnect();
81 stateRef.current.observer = null;
82 }
83 };
84 target.addEventListener('focusout', onBlurHandler, {
85 once: true
86 });
87 stateRef.current.observer = new MutationObserver(()=>{
88 if (stateRef.current.isFocused && target.disabled) {
89 var _stateRef_current_observer;
90 (_stateRef_current_observer = stateRef.current.observer) === null || _stateRef_current_observer === void 0 ? void 0 : _stateRef_current_observer.disconnect();
91 let relatedTargetEl = target === document.activeElement ? null : document.activeElement;
92 target.dispatchEvent(new FocusEvent('blur', {
93 relatedTarget: relatedTargetEl
94 }));
95 target.dispatchEvent(new FocusEvent('focusout', {
96 bubbles: true,
97 relatedTarget: relatedTargetEl
98 }));
99 }
100 });
101 stateRef.current.observer.observe(target, {
102 attributes: true,
103 attributeFilter: [
104 'disabled'
105 ]
106 });
107 }
108 }, [
109 dispatchBlur
110 ]);
111}
112
113
114export {$8a9cb279dc87e130$export$905e7fc544a71f36 as SyntheticFocusEvent, $8a9cb279dc87e130$export$715c682d09d639cc as useSyntheticBlurEvent};
115//# sourceMappingURL=utils.module.js.map