@versini/ui-hooks 5.3.0 → 5.3.2

package/dist/index.d.ts

@@ -55,39 +55,6 @@ export declare interface StorageProperties<T> {
  */
 export declare function useClickOutside<T extends HTMLElement = any>(handler: () => void, events?: string[] | null, nodes?: (HTMLElement | null)[]): RefObject<T | null>;
 
-/**
- * Custom hook for trapping focus within a container element. Implements W3C
- * WAI-ARIA dialog focus management patterns:
- * - Tab/Shift+Tab cycles through focusable elements within the container
- * - Focus is trapped and cannot escape to elements outside
- * - Initial focus is set based on the initialFocus option
- *
- * @see https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/
- *
- */
-export declare function useFocusTrap({ enabled, initialFocus, }: UseFocusTrapOptions): UseFocusTrapReturn;
-
-declare interface UseFocusTrapOptions {
-    /**
-     * Whether the focus trap is active.
-     */
-    enabled: boolean;
-    /**
-     * Which element to initially focus when the trap activates. Can be a number
-     * (tabbable index, 0 = first), a ref to an element, or -1 to disable initial
-     * focus.
-     * @default 0
-     */
-    initialFocus?: number | React.RefObject<HTMLElement | null>;
-}
-
-declare interface UseFocusTrapReturn {
-    /**
-     * Ref to attach to the container element that should trap focus.
-     */
-    containerRef: React.RefObject<HTMLDivElement | null>;
-}
-
 /**
  * Custom hook providing imperative haptic feedback for mobile devices. Uses
  * navigator.vibrate when available, falls back to iOS switch element trick for

package/dist/index.js

@@ -1,12 +1,12 @@
 /*!
-  @versini/ui-hooks v5.3.0
+  @versini/ui-hooks v5.3.2
   © 2025 gizmette.com
 */
 try {
   if (!window.__VERSINI_UI_HOOKS__) {
     window.__VERSINI_UI_HOOKS__ = {
-      version: "5.3.0",
-      buildTime: "12/14/2025 08:04 PM EST",
+      version: "5.3.2",
+      buildTime: "12/16/2025 01:48 PM EST",
       homepage: "https://www.npmjs.com/package/@versini/ui-hooks",
       license: "MIT",
     };
@@ -65,160 +65,6 @@ const DEFAULT_EVENTS = [
     return ref;
 }
 
-;// CONCATENATED MODULE: ./src/hooks/useFocusTrap.ts
-
-/**
- * Selector for all focusable elements within a container. Based on W3C WAI-ARIA
- * practices for dialog focus management.
- */ const FOCUSABLE_SELECTOR = [
-    'a[href]:not([disabled]):not([tabindex="-1"])',
-    'button:not([disabled]):not([tabindex="-1"])',
-    'textarea:not([disabled]):not([tabindex="-1"])',
-    'input:not([disabled]):not([tabindex="-1"])',
-    'select:not([disabled]):not([tabindex="-1"])',
-    '[tabindex]:not([tabindex="-1"]):not([disabled])',
-    'audio[controls]:not([tabindex="-1"])',
-    'video[controls]:not([tabindex="-1"])',
-    'details:not([tabindex="-1"])'
-].join(", ");
-/**
- * Custom hook for trapping focus within a container element. Implements W3C
- * WAI-ARIA dialog focus management patterns:
- * - Tab/Shift+Tab cycles through focusable elements within the container
- * - Focus is trapped and cannot escape to elements outside
- * - Initial focus is set based on the initialFocus option
- *
- * @see https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/
- *
- */ function useFocusTrap({ enabled, initialFocus = 0 }) {
-    const containerRef = useRef(null);
-    const previouslyFocusedRef = useRef(null);
-    /**
-	 * Get all focusable elements within the container.
-	 */ const getFocusableElements = useCallback(()=>{
-        /* c8 ignore next 3 - defensive check, containerRef is always set when enabled */ if (!containerRef.current) {
-            return [];
-        }
-        const elements = containerRef.current.querySelectorAll(FOCUSABLE_SELECTOR);
-        return Array.from(elements).filter((el)=>el.offsetParent !== null);
-    }, []);
-    /**
-	 * Focus a specific element by index, or the element referenced by a ref.
-	 */ const focusElement = useCallback((target)=>{
-        if (typeof target === "number") {
-            if (target === -1) {
-                // -1 means don't focus anything.
-                return;
-            }
-            const focusableElements = getFocusableElements();
-            if (focusableElements.length > 0) {
-                const index = Math.min(target, focusableElements.length - 1);
-                focusableElements[index]?.focus();
-            }
-        } else if (target?.current) {
-            target.current.focus();
-        }
-    }, [
-        getFocusableElements
-    ]);
-    /**
-	 * Handle keyboard events for focus trapping. Tab cycles forward, Shift+Tab
-	 * cycles backward.
-	 */ const handleKeyDown = useCallback((event)=>{
-        if (event.key !== "Tab" || !containerRef.current) {
-            return;
-        }
-        const activeElement = document.activeElement;
-        // If focus is in a nested dialog, let that dialog handle Tab.
-        if (activeElement && !containerRef.current.contains(activeElement) && activeElement.closest('[role="dialog"]')) {
-            return;
-        }
-        const focusableElements = getFocusableElements();
-        if (focusableElements.length === 0) {
-            event.preventDefault();
-            return;
-        }
-        const firstElement = focusableElements[0];
-        const lastElement = focusableElements[focusableElements.length - 1];
-        // Shift+Tab from first element -> go to last.
-        if (event.shiftKey && activeElement === firstElement) {
-            event.preventDefault();
-            lastElement?.focus();
-            return;
-        }
-        // Tab from last element -> go to first.
-        if (!event.shiftKey && activeElement === lastElement) {
-            event.preventDefault();
-            firstElement?.focus();
-            return;
-        }
-        /* c8 ignore next 9 - defensive check for focus escaping, hard to trigger in tests */ // If focus is outside the container, bring it back.
-        if (!containerRef.current.contains(activeElement)) {
-            event.preventDefault();
-            if (event.shiftKey) {
-                lastElement?.focus();
-            } else {
-                firstElement?.focus();
-            }
-        }
-    }, [
-        getFocusableElements
-    ]);
-    /**
-	 * Handle focus events to ensure focus stays within the container. This catches
-	 * focus that escapes via mouse clicks or other means.
-	 */ const handleFocusIn = useCallback((event)=>{
-        if (!containerRef.current || containerRef.current.contains(event.target)) {
-            return;
-        }
-        // Allow focus to go to nested dialogs (child panels).
-        const target = event.target;
-        if (target?.closest('[role="dialog"]')) {
-            return;
-        }
-        // Focus escaped the container, bring it back.
-        const focusableElements = getFocusableElements();
-        if (focusableElements.length > 0) {
-            focusableElements[0]?.focus();
-        }
-    }, [
-        getFocusableElements
-    ]);
-    // Set up focus trap when enabled.
-    useEffect(()=>{
-        if (!enabled) {
-            return;
-        }
-        // Store the currently focused element to restore later.
-        previouslyFocusedRef.current = document.activeElement;
-        // Set initial focus after a small delay to ensure the DOM is ready.
-        const focusTimer = setTimeout(()=>{
-            focusElement(initialFocus);
-        }, 0);
-        // Add event listeners for focus trapping.
-        document.addEventListener("keydown", handleKeyDown);
-        document.addEventListener("focusin", handleFocusIn);
-        return ()=>{
-            clearTimeout(focusTimer);
-            document.removeEventListener("keydown", handleKeyDown);
-            document.removeEventListener("focusin", handleFocusIn);
-            // Restore focus to the previously focused element if it's still in the DOM.
-            if (previouslyFocusedRef.current?.isConnected) {
-                previouslyFocusedRef.current.focus();
-            }
-        };
-    }, [
-        enabled,
-        initialFocus,
-        focusElement,
-        handleKeyDown,
-        handleFocusIn
-    ]);
-    return {
-        containerRef
-    };
-}
-
 ;// CONCATENATED MODULE: ./src/hooks/useHaptic.ts
 
 const HAPTIC_DURATION_MS = 50;
@@ -1109,5 +955,4 @@ function useWindowEvent(type, listener) {
 
 
 
-
-export { getHotkeyHandler, shouldFireEvent, useClickOutside, useFocusTrap, useHaptic, useHotkeys, useInViewport, useInterval, useIsMounted, useLocalStorage, useMergeRefs, useResizeObserver, useUncontrolled, useUniqueId, useViewportSize, useVisualViewportSize };
+export { getHotkeyHandler, shouldFireEvent, useClickOutside, useHaptic, useHotkeys, useInViewport, useInterval, useIsMounted, useLocalStorage, useMergeRefs, useResizeObserver, useUncontrolled, useUniqueId, useViewportSize, useVisualViewportSize };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@versini/ui-hooks",
-	"version": "5.3.0",
+	"version": "5.3.2",
 	"license": "MIT",
 	"author": "Arno Versini",
 	"publishConfig": {
@@ -36,5 +36,5 @@
 		"test:watch": "vitest",
 		"test": "vitest run"
 	},
-	"gitHead": "15f3028acf21328c70773147a6bedfbafaa3a2a4"
+	"gitHead": "ef4323fa1f14f9f2a5471d71f063519230762aec"
 }