@uncinc/uncinc-react-kitchen-sink 2.4.0 → 2.4.1

package/dist/hooks/useTrapFocus.ts

@@ -1,80 +0,0 @@
-import { RefObject, useEffect } from 'react';
-
-export interface UseTrapFocusOptions<T extends HTMLElement> {
-  ref: RefObject<T>;
-  isActive?: boolean;
-}
-
-/**
- * Helper to trap focus within a certain component,
- * which is useful for canvas menu lists or modals
- */
-export default function useTrapFocus<T extends HTMLElement>(
-  options: UseTrapFocusOptions<T>,
-) {
-  const {
-    ref,
-    isActive = false,
-  } = options;
-
-  useEffect(() => {
-    function onKeyDown(e: KeyboardEvent) {
-      if (ref.current && isActive) {
-        const { first, last } = getFocusableElements(ref.current);
-        const isTabPressed = e.key === 'Tab';
-
-        if (!isTabPressed) {
-          return;
-        }
-
-        if (e.shiftKey && document.activeElement === first) {
-          if (last) last.focus();
-          e.preventDefault();
-          return;
-        }
-
-        if (!e.shiftKey && document.activeElement === last) {
-          if (first) first.focus();
-          e.preventDefault();
-        }
-      }
-    }
-
-    if (ref.current) {
-      ref.current.addEventListener('keydown', onKeyDown);
-    }
-
-    return () => {
-      if (ref.current) {
-        ref.current.removeEventListener('keydown', onKeyDown);
-      }
-    };
-  }, [ref, isActive]);
-
-  function getFocusableElements(element: Element) {
-    const focusableElementTags = [
-      'a[href]',
-      'area[href]',
-      'button',
-      'input',
-      'textarea',
-      'select',
-      'details',
-      '[tabindex]:not([tabindex="-1"])',
-    ];
-
-    const focusableElements = [
-      ...element.querySelectorAll(focusableElementTags.join(', ')),
-    ].filter(
-      (el) => !el.hasAttribute('disabled') && !el.hasAttribute('aria-hidden'),
-    ) as HTMLElement[];
-
-    return {
-      focusableElements,
-      first: focusableElements.length ? focusableElements[0] : null,
-      last: focusableElements.length
-        ? focusableElements[focusableElements.length - 1]
-        : null,
-    } as const;
-  }
-}