up n_m

node_modules/@docusaurus/theme-common/lib/hooks/useKeyboardNavigation.js

@@ -0,0 +1,39 @@
+/**
+ * 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