/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */
import { useEffect } from 'react';
import './styles.css';
export const keyboardFocusedClassName = 'navigation-with-keyboard';
/**
 * Side-effect that adds the `keyboardFocusedClassName` to the body element when
 * the keyboard has been pressed, or removes it when the mouse is clicked.
 *
 * The presence of this class name signals that the user may be using keyboard
 * for navigation, and the theme **must** add focus outline when this class name
 * is present. (And optionally not if it's absent, for design purposes)
 *
 * Inspired by https://hackernoon.com/removing-that-ugly-focus-ring-and-keeping-it-too-6c8727fefcd2
 */
export function useKeyboardNavigation() {
    useEffect(() => {
        function handleOutlineStyles(e) {
            if (e.type === 'keydown' && e.key === 'Tab') {
                document.body.classList.add(keyboardFocusedClassName);
            }
            if (e.type === 'mousedown') {
                document.body.classList.remove(keyboardFocusedClassName);
            }
        }
        document.addEventListener('keydown', handleOutlineStyles);
        document.addEventListener('mousedown', handleOutlineStyles);
        return () => {
            document.body.classList.remove(keyboardFocusedClassName);
            document.removeEventListener('keydown', handleOutlineStyles);
            document.removeEventListener('mousedown', handleOutlineStyles);
        };
    }, []);
}
//# sourceMappingURL=useKeyboardNavigation.js.map