import {isMac as $28AnR$isMac, isVirtualClick as $28AnR$isVirtualClick, getOwnerWindow as $28AnR$getOwnerWindow, getOwnerDocument as $28AnR$getOwnerDocument} from "@react-aria/utils"; import {useState as $28AnR$useState, useEffect as $28AnR$useEffect} from "react"; import {useIsSSR as $28AnR$useIsSSR} from "@react-aria/ssr"; /* * Copyright 2020 Adobe. All rights reserved. * This file is licensed to you under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. You may obtain a copy * of the License at http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software distributed under * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS * OF ANY KIND, either express or implied. See the License for the specific language * governing permissions and limitations under the License. */ // Portions of the code in this file are based on code from react. // Original licensing for the following can be found in the // NOTICE file in the root directory of this source tree. // See https://github.com/facebook/react/tree/cc7c1aece46a6b69b41958d731e0fd27c94bfc6c/packages/react-interactions let $507fabe10e71c6fb$var$currentModality = null; let $507fabe10e71c6fb$var$changeHandlers = new Set(); let $507fabe10e71c6fb$export$d90243b58daecda7 = new Map(); // We use a map here to support setting event listeners across multiple document objects. let $507fabe10e71c6fb$var$hasEventBeforeFocus = false; let $507fabe10e71c6fb$var$hasBlurredWindowRecently = false; // Only Tab or Esc keys will make focus visible on text input elements const $507fabe10e71c6fb$var$FOCUS_VISIBLE_INPUT_KEYS = { Tab: true, Escape: true }; function $507fabe10e71c6fb$var$triggerChangeHandlers(modality, e) { for (let handler of $507fabe10e71c6fb$var$changeHandlers)handler(modality, e); } /** * Helper function to determine if a KeyboardEvent is unmodified and could make keyboard focus styles visible. */ function $507fabe10e71c6fb$var$isValidKey(e) { // Control and Shift keys trigger when navigating back to the tab with keyboard. return !(e.metaKey || !(0, $28AnR$isMac)() && e.altKey || e.ctrlKey || e.key === 'Control' || e.key === 'Shift' || e.key === 'Meta'); } function $507fabe10e71c6fb$var$handleKeyboardEvent(e) { $507fabe10e71c6fb$var$hasEventBeforeFocus = true; if ($507fabe10e71c6fb$var$isValidKey(e)) { $507fabe10e71c6fb$var$currentModality = 'keyboard'; $507fabe10e71c6fb$var$triggerChangeHandlers('keyboard', e); } } function $507fabe10e71c6fb$var$handlePointerEvent(e) { $507fabe10e71c6fb$var$currentModality = 'pointer'; if (e.type === 'mousedown' || e.type === 'pointerdown') { $507fabe10e71c6fb$var$hasEventBeforeFocus = true; $507fabe10e71c6fb$var$triggerChangeHandlers('pointer', e); } } function $507fabe10e71c6fb$var$handleClickEvent(e) { if ((0, $28AnR$isVirtualClick)(e)) { $507fabe10e71c6fb$var$hasEventBeforeFocus = true; $507fabe10e71c6fb$var$currentModality = 'virtual'; } } function $507fabe10e71c6fb$var$handleFocusEvent(e) { // Firefox fires two extra focus events when the user first clicks into an iframe: // first on the window, then on the document. We ignore these events so they don't // cause keyboard focus rings to appear. if (e.target === window || e.target === document) return; // If a focus event occurs without a preceding keyboard or pointer event, switch to virtual modality. // This occurs, for example, when navigating a form with the next/previous buttons on iOS. if (!$507fabe10e71c6fb$var$hasEventBeforeFocus && !$507fabe10e71c6fb$var$hasBlurredWindowRecently) { $507fabe10e71c6fb$var$currentModality = 'virtual'; $507fabe10e71c6fb$var$triggerChangeHandlers('virtual', e); } $507fabe10e71c6fb$var$hasEventBeforeFocus = false; $507fabe10e71c6fb$var$hasBlurredWindowRecently = false; } function $507fabe10e71c6fb$var$handleWindowBlur() { // When the window is blurred, reset state. This is necessary when tabbing out of the window, // for example, since a subsequent focus event won't be fired. $507fabe10e71c6fb$var$hasEventBeforeFocus = false; $507fabe10e71c6fb$var$hasBlurredWindowRecently = true; } /** * Setup global event listeners to control when keyboard focus style should be visible. */ function $507fabe10e71c6fb$var$setupGlobalFocusEvents(element) { if (typeof window === 'undefined' || $507fabe10e71c6fb$export$d90243b58daecda7.get((0, $28AnR$getOwnerWindow)(element))) return; const windowObject = (0, $28AnR$getOwnerWindow)(element); const documentObject = (0, $28AnR$getOwnerDocument)(element); // Programmatic focus() calls shouldn't affect the current input modality. // However, we need to detect other cases when a focus event occurs without // a preceding user event (e.g. screen reader focus). Overriding the focus // method on HTMLElement.prototype is a bit hacky, but works. let focus = windowObject.HTMLElement.prototype.focus; windowObject.HTMLElement.prototype.focus = function() { $507fabe10e71c6fb$var$hasEventBeforeFocus = true; focus.apply(this, arguments); }; documentObject.addEventListener('keydown', $507fabe10e71c6fb$var$handleKeyboardEvent, true); documentObject.addEventListener('keyup', $507fabe10e71c6fb$var$handleKeyboardEvent, true); documentObject.addEventListener('click', $507fabe10e71c6fb$var$handleClickEvent, true); // Register focus events on the window so they are sure to happen // before React's event listeners (registered on the document). windowObject.addEventListener('focus', $507fabe10e71c6fb$var$handleFocusEvent, true); windowObject.addEventListener('blur', $507fabe10e71c6fb$var$handleWindowBlur, false); if (typeof PointerEvent !== 'undefined') { documentObject.addEventListener('pointerdown', $507fabe10e71c6fb$var$handlePointerEvent, true); documentObject.addEventListener('pointermove', $507fabe10e71c6fb$var$handlePointerEvent, true); documentObject.addEventListener('pointerup', $507fabe10e71c6fb$var$handlePointerEvent, true); } else { documentObject.addEventListener('mousedown', $507fabe10e71c6fb$var$handlePointerEvent, true); documentObject.addEventListener('mousemove', $507fabe10e71c6fb$var$handlePointerEvent, true); documentObject.addEventListener('mouseup', $507fabe10e71c6fb$var$handlePointerEvent, true); } // Add unmount handler windowObject.addEventListener('beforeunload', ()=>{ $507fabe10e71c6fb$var$tearDownWindowFocusTracking(element); }, { once: true }); $507fabe10e71c6fb$export$d90243b58daecda7.set(windowObject, { focus: focus }); } const $507fabe10e71c6fb$var$tearDownWindowFocusTracking = (element, loadListener)=>{ const windowObject = (0, $28AnR$getOwnerWindow)(element); const documentObject = (0, $28AnR$getOwnerDocument)(element); if (loadListener) documentObject.removeEventListener('DOMContentLoaded', loadListener); if (!$507fabe10e71c6fb$export$d90243b58daecda7.has(windowObject)) return; windowObject.HTMLElement.prototype.focus = $507fabe10e71c6fb$export$d90243b58daecda7.get(windowObject).focus; documentObject.removeEventListener('keydown', $507fabe10e71c6fb$var$handleKeyboardEvent, true); documentObject.removeEventListener('keyup', $507fabe10e71c6fb$var$handleKeyboardEvent, true); documentObject.removeEventListener('click', $507fabe10e71c6fb$var$handleClickEvent, true); windowObject.removeEventListener('focus', $507fabe10e71c6fb$var$handleFocusEvent, true); windowObject.removeEventListener('blur', $507fabe10e71c6fb$var$handleWindowBlur, false); if (typeof PointerEvent !== 'undefined') { documentObject.removeEventListener('pointerdown', $507fabe10e71c6fb$var$handlePointerEvent, true); documentObject.removeEventListener('pointermove', $507fabe10e71c6fb$var$handlePointerEvent, true); documentObject.removeEventListener('pointerup', $507fabe10e71c6fb$var$handlePointerEvent, true); } else { documentObject.removeEventListener('mousedown', $507fabe10e71c6fb$var$handlePointerEvent, true); documentObject.removeEventListener('mousemove', $507fabe10e71c6fb$var$handlePointerEvent, true); documentObject.removeEventListener('mouseup', $507fabe10e71c6fb$var$handlePointerEvent, true); } $507fabe10e71c6fb$export$d90243b58daecda7.delete(windowObject); }; function $507fabe10e71c6fb$export$2f1888112f558a7d(element) { const documentObject = (0, $28AnR$getOwnerDocument)(element); let loadListener; if (documentObject.readyState !== 'loading') $507fabe10e71c6fb$var$setupGlobalFocusEvents(element); else { loadListener = ()=>{ $507fabe10e71c6fb$var$setupGlobalFocusEvents(element); }; documentObject.addEventListener('DOMContentLoaded', loadListener); } return ()=>$507fabe10e71c6fb$var$tearDownWindowFocusTracking(element, loadListener); } // Server-side rendering does not have the document object defined // eslint-disable-next-line no-restricted-globals if (typeof document !== 'undefined') $507fabe10e71c6fb$export$2f1888112f558a7d(); function $507fabe10e71c6fb$export$b9b3dfddab17db27() { return $507fabe10e71c6fb$var$currentModality !== 'pointer'; } function $507fabe10e71c6fb$export$630ff653c5ada6a9() { return $507fabe10e71c6fb$var$currentModality; } function $507fabe10e71c6fb$export$8397ddfc504fdb9a(modality) { $507fabe10e71c6fb$var$currentModality = modality; $507fabe10e71c6fb$var$triggerChangeHandlers(modality, null); } function $507fabe10e71c6fb$export$98e20ec92f614cfe() { $507fabe10e71c6fb$var$setupGlobalFocusEvents(); let [modality, setModality] = (0, $28AnR$useState)($507fabe10e71c6fb$var$currentModality); (0, $28AnR$useEffect)(()=>{ let handler = ()=>{ setModality($507fabe10e71c6fb$var$currentModality); }; $507fabe10e71c6fb$var$changeHandlers.add(handler); return ()=>{ $507fabe10e71c6fb$var$changeHandlers.delete(handler); }; }, []); return (0, $28AnR$useIsSSR)() ? null : modality; } const $507fabe10e71c6fb$var$nonTextInputTypes = new Set([ 'checkbox', 'radio', 'range', 'color', 'file', 'image', 'button', 'submit', 'reset' ]); /** * If this is attached to text input component, return if the event is a focus event (Tab/Escape keys pressed) so that * focus visible style can be properly set. */ function $507fabe10e71c6fb$var$isKeyboardFocusEvent(isTextInput, modality, e) { var _e_target; const IHTMLInputElement = typeof window !== 'undefined' ? (0, $28AnR$getOwnerWindow)(e === null || e === void 0 ? void 0 : e.target).HTMLInputElement : HTMLInputElement; const IHTMLTextAreaElement = typeof window !== 'undefined' ? (0, $28AnR$getOwnerWindow)(e === null || e === void 0 ? void 0 : e.target).HTMLTextAreaElement : HTMLTextAreaElement; const IHTMLElement = typeof window !== 'undefined' ? (0, $28AnR$getOwnerWindow)(e === null || e === void 0 ? void 0 : e.target).HTMLElement : HTMLElement; const IKeyboardEvent = typeof window !== 'undefined' ? (0, $28AnR$getOwnerWindow)(e === null || e === void 0 ? void 0 : e.target).KeyboardEvent : KeyboardEvent; isTextInput = isTextInput || (e === null || e === void 0 ? void 0 : e.target) instanceof IHTMLInputElement && !$507fabe10e71c6fb$var$nonTextInputTypes.has(e === null || e === void 0 ? void 0 : (_e_target = e.target) === null || _e_target === void 0 ? void 0 : _e_target.type) || (e === null || e === void 0 ? void 0 : e.target) instanceof IHTMLTextAreaElement || (e === null || e === void 0 ? void 0 : e.target) instanceof IHTMLElement && (e === null || e === void 0 ? void 0 : e.target.isContentEditable); return !(isTextInput && modality === 'keyboard' && e instanceof IKeyboardEvent && !$507fabe10e71c6fb$var$FOCUS_VISIBLE_INPUT_KEYS[e.key]); } function $507fabe10e71c6fb$export$ffd9e5021c1fb2d6(props = {}) { let { isTextInput: isTextInput, autoFocus: autoFocus } = props; let [isFocusVisibleState, setFocusVisible] = (0, $28AnR$useState)(autoFocus || $507fabe10e71c6fb$export$b9b3dfddab17db27()); $507fabe10e71c6fb$export$ec71b4b83ac08ec3((isFocusVisible)=>{ setFocusVisible(isFocusVisible); }, [ isTextInput ], { isTextInput: isTextInput }); return { isFocusVisible: isFocusVisibleState }; } function $507fabe10e71c6fb$export$ec71b4b83ac08ec3(fn, deps, opts) { $507fabe10e71c6fb$var$setupGlobalFocusEvents(); (0, $28AnR$useEffect)(()=>{ let handler = (modality, e)=>{ if (!$507fabe10e71c6fb$var$isKeyboardFocusEvent(!!(opts === null || opts === void 0 ? void 0 : opts.isTextInput), modality, e)) return; fn($507fabe10e71c6fb$export$b9b3dfddab17db27()); }; $507fabe10e71c6fb$var$changeHandlers.add(handler); return ()=>{ $507fabe10e71c6fb$var$changeHandlers.delete(handler); }; // eslint-disable-next-line react-hooks/exhaustive-deps }, deps); } export {$507fabe10e71c6fb$export$d90243b58daecda7 as hasSetupGlobalListeners, $507fabe10e71c6fb$export$2f1888112f558a7d as addWindowFocusTracking, $507fabe10e71c6fb$export$b9b3dfddab17db27 as isFocusVisible, $507fabe10e71c6fb$export$630ff653c5ada6a9 as getInteractionModality, $507fabe10e71c6fb$export$8397ddfc504fdb9a as setInteractionModality, $507fabe10e71c6fb$export$98e20ec92f614cfe as useInteractionModality, $507fabe10e71c6fb$export$ffd9e5021c1fb2d6 as useFocusVisible, $507fabe10e71c6fb$export$ec71b4b83ac08ec3 as useFocusVisibleListener}; //# sourceMappingURL=useFocusVisible.module.js.map