@pega/cosmos-react-core 9.0.0-build.9.8 → 9.0.0

package/lib/hooks/useAnimatedText.js

@@ -1,33 +1,42 @@
-import { useEffect, useState, useRef } from 'react';
+import { useEffect, useState, useRef, useMemo } from 'react';
 import tokenizeWithMarkdown from '../utils/markdownTokenizer';
-const useAnimatedText = ({ text, allContentReceived = false, enabled = true, tokenizeMarkdown = false }) => {
+import usePrevious from './usePrevious';
+const useAnimatedText = ({ text, allContentReceived = false, enabled = true, tokenizeMarkdown = false, cursorStartIndex }) => {
+    const initialTokens = 3;
+    const maxTokens = 20;
+    const phraseSize = 3;
     const [cursor, setCursor] = useState(0); // End pointer
     const [startingCursor, setStartingCursor] = useState(0); // animation starting point
-    const [prevText, setPrevText] = useState(text);
     const [isAnimationDone, setIsAnimationDone] = useState(false);
+    const currentSpeedRef = useRef(initialTokens);
     const allContentReceivedRef = useRef(allContentReceived);
     allContentReceivedRef.current = allContentReceived;
-    // Tokenize text based on markdown flag
-    const getTokens = (inputText) => {
-        if (tokenizeMarkdown) {
-            return tokenizeWithMarkdown(inputText);
+    const prevText = usePrevious(text);
+    const tokens = useMemo(() => {
+        return tokenizeWithMarkdown(text, { tokenizeMarkdown, phraseSize });
+    }, [text, tokenizeMarkdown]);
+    const visibleText = useMemo(() => {
+        return tokens.slice(0, cursor).join('');
+    }, [tokens, cursor]);
+    useEffect(() => {
+        if (cursorStartIndex) {
+            setStartingCursor(cursorStartIndex);
         }
-        return inputText.split('');
-    };
-    // A new chunk has arrived
-    if (prevText !== text) {
-        setPrevText(text);
-        setStartingCursor(text.startsWith(prevText) ? cursor : 0);
-        setIsAnimationDone(false);
-    }
+    }, []);
     useEffect(() => {
-        // If streaming is disabled just return the whole chunk back
-        if (!enabled) {
-            setCursor(getTokens(text).length);
+        if (prevText !== undefined && prevText !== text) {
+            setIsAnimationDone(false);
+            setStartingCursor(text.startsWith(prevText) ? cursor : 0);
+        }
+    }, [text, cursor, prevText]);
+    useEffect(() => {
+        // If streaming is disabled or all chunks received - return the whole content
+        if (!enabled || allContentReceivedRef.current) {
+            setCursor(tokens.length);
             setIsAnimationDone(true);
+            currentSpeedRef.current = Math.max(currentSpeedRef.current, maxTokens);
             return;
         }
-        const tokens = getTokens(text);
         const targetLength = tokens.length;
         const charactersToAnimate = targetLength - startingCursor;
         // If there are no more characters to animate
@@ -39,57 +48,68 @@ const useAnimatedText = ({ text, allContentReceived = false, enabled = true, tok
             }
             return;
         }
-        let intervalId;
-        let startTime;
+        let rafId = null;
+        let startTime = null;
         let isStopped = false;
-        let currentSpeed = 50; // Start with normal speed
         let lastCursor = startingCursor;
-        const processTextAnimation = () => {
+        const processTextAnimation = (currentTime) => {
             if (isStopped)
                 return;
-            const currentTime = performance.now();
-            if (!startTime) {
+            // Stop animation immediately when all content is received
+            if (allContentReceivedRef.current) {
+                setCursor(tokens.length);
+                setIsAnimationDone(true);
+                currentSpeedRef.current = Math.max(currentSpeedRef.current, maxTokens);
+                return;
+            }
+            // Initialize start time on first frame
+            if (startTime === null) {
                 startTime = currentTime;
             }
-            // When we have all content with us, speed up streaming animation
-            const targetSpeed = allContentReceivedRef.current ? 150 : 50;
             // Smoothly transition to target speed
-            const speedDiff = targetSpeed - currentSpeed;
-            currentSpeed += speedDiff * 0.1; // Smooth transition
+            const speedDiff = maxTokens - currentSpeedRef.current;
+            currentSpeedRef.current += speedDiff * 0.1; // Smooth transition
             const elapsed = currentTime - startTime;
             const timeStep = elapsed / 1000;
-            // Calculate how many characters we should have shown by now
-            const expectedCursor = Math.min(startingCursor + timeStep * currentSpeed, targetLength);
+            // Calculate how many tokens we should have shown by now
+            const expectedCursor = Math.min(startingCursor + timeStep * currentSpeedRef.current, targetLength);
             const newCursor = Math.min(Math.floor(expectedCursor), targetLength);
+            const safeCursor = Math.max(newCursor, lastCursor);
             // Skip update if the cursor is at the same token
-            if (newCursor !== lastCursor) {
-                setCursor(newCursor);
-                lastCursor = newCursor;
+            if (safeCursor !== lastCursor) {
+                setCursor(safeCursor);
+                lastCursor = safeCursor;
             }
             // End condition - stop when we reach the target
-            if (newCursor >= targetLength && allContentReceivedRef.current) {
+            if (safeCursor >= targetLength && allContentReceivedRef.current) {
                 setIsAnimationDone(true);
                 return;
             }
             // Continue animation if not done
-            if (newCursor < targetLength || !allContentReceivedRef.current) {
-                // Use adaptive timing based on content state and visibility
-                const interval = allContentReceivedRef.current ? 20 : 50; // Faster when complete
-                intervalId = setTimeout(processTextAnimation, interval);
+            if (safeCursor < targetLength || !allContentReceivedRef.current) {
+                rafId = requestAnimationFrame(processTextAnimation); // Schedule next frame
             }
         };
-        // Start the animation with initial delay
-        intervalId = setTimeout(processTextAnimation, 16);
+        // Start the animation
+        rafId = requestAnimationFrame(processTextAnimation);
         return () => {
             isStopped = true;
-            if (intervalId) {
-                clearTimeout(intervalId);
+            if (rafId) {
+                cancelAnimationFrame(rafId);
             }
         };
-    }, [startingCursor, text, tokenizeMarkdown]);
+    }, [startingCursor, tokens]);
+    if (allContentReceived) {
+        return {
+            text,
+            isAnimationDone: true,
+            animatedTillCursor: tokens.length
+        };
+    }
     return {
-        text: getTokens(text).slice(0, cursor).join(''),
-        isAnimationDone
+        text: visibleText,
+        isAnimationDone,
+        animatedTillCursor: cursor
     };
 };
 export default useAnimatedText;

package/lib/hooks/useAnimatedText.js.map

@@ -1 +1 @@
-{"version":3,"file":"useAnimatedText.js","sourceRoot":"","sources":["../../src/hooks/useAnimatedText.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAEpD,OAAO,oBAAoB,MAAM,4BAA4B,CAAC;AAE9D,MAAM,eAAe,GAAG,CAAC,EACvB,IAAI,EACJ,kBAAkB,GAAG,KAAK,EAC1B,OAAO,GAAG,IAAI,EACd,gBAAgB,GAAG,KAAK,EAMzB,EAAE,EAAE;IACH,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,cAAc;IACvD,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,2BAA2B;IAEpF,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;IAC/C,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE9D,MAAM,qBAAqB,GAAG,MAAM,CAAC,kBAAkB,CAAC,CAAC;IAEzD,qBAAqB,CAAC,OAAO,GAAG,kBAAkB,CAAC;IAEnD,uCAAuC;IACvC,MAAM,SAAS,GAAG,CAAC,SAAiB,EAAY,EAAE;QAChD,IAAI,gBAAgB,EAAE,CAAC;YACrB,OAAO,oBAAoB,CAAC,SAAS,CAAC,CAAC;QACzC,CAAC;QACD,OAAO,SAAS,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;IAC7B,CAAC,CAAC;IAEF,0BAA0B;IAC1B,IAAI,QAAQ,KAAK,IAAI,EAAE,CAAC;QACtB,WAAW,CAAC,IAAI,CAAC,CAAC;QAClB,iBAAiB,CAAC,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAC1D,kBAAkB,CAAC,KAAK,CAAC,CAAC;IAC5B,CAAC;IAED,SAAS,CAAC,GAAG,EAAE;QACb,4DAA4D;QAC5D,IAAI,CAAC,OAAO,EAAE,CAAC;YACb,SAAS,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,CAAC;YAClC,kBAAkB,CAAC,IAAI,CAAC,CAAC;YACzB,OAAO;QACT,CAAC;QAED,MAAM,MAAM,GAAG,SAAS,CAAC,IAAI,CAAC,CAAC;QAC/B,MAAM,YAAY,GAAG,MAAM,CAAC,MAAM,CAAC;QACnC,MAAM,mBAAmB,GAAG,YAAY,GAAG,cAAc,CAAC;QAE1D,6CAA6C;QAC7C,IAAI,mBAAmB,IAAI,CAAC,EAAE,CAAC;YAC7B,SAAS,CAAC,YAAY,CAAC,CAAC;YACxB,mFAAmF;YACnF,IAAI,qBAAqB,CAAC,OAAO,EAAE,CAAC;gBAClC,kBAAkB,CAAC,IAAI,CAAC,CAAC;YAC3B,CAAC;YACD,OAAO;QACT,CAAC;QAED,IAAI,UAAyC,CAAC;QAC9C,IAAI,SAAiB,CAAC;QACtB,IAAI,SAAS,GAAG,KAAK,CAAC;QACtB,IAAI,YAAY,GAAG,EAAE,CAAC,CAAC,0BAA0B;QACjD,IAAI,UAAU,GAAG,cAAc,CAAC;QAEhC,MAAM,oBAAoB,GAAG,GAAG,EAAE;YAChC,IAAI,SAAS;gBAAE,OAAO;YAEtB,MAAM,WAAW,GAAG,WAAW,CAAC,GAAG,EAAE,CAAC;YAEtC,IAAI,CAAC,SAAS,EAAE,CAAC;gBACf,SAAS,GAAG,WAAW,CAAC;YAC1B,CAAC;YAED,iEAAiE;YACjE,MAAM,WAAW,GAAG,qBAAqB,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC;YAE7D,sCAAsC;YACtC,MAAM,SAAS,GAAG,WAAW,GAAG,YAAY,CAAC;YAC7C,YAAY,IAAI,SAAS,GAAG,GAAG,CAAC,CAAC,oBAAoB;YAErD,MAAM,OAAO,GAAG,WAAW,GAAG,SAAS,CAAC;YACxC,MAAM,QAAQ,GAAG,OAAO,GAAG,IAAI,CAAC;YAEhC,4DAA4D;YAC5D,MAAM,cAAc,GAAG,IAAI,CAAC,GAAG,CAAC,cAAc,GAAG,QAAQ,GAAG,YAAY,EAAE,YAAY,CAAC,CAAC;YAExF,MAAM,SAAS,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,EAAE,YAAY,CAAC,CAAC;YAErE,iDAAiD;YACjD,IAAI,SAAS,KAAK,UAAU,EAAE,CAAC;gBAC7B,SAAS,CAAC,SAAS,CAAC,CAAC;gBACrB,UAAU,GAAG,SAAS,CAAC;YACzB,CAAC;YAED,gDAAgD;YAChD,IAAI,SAAS,IAAI,YAAY,IAAI,qBAAqB,CAAC,OAAO,EAAE,CAAC;gBAC/D,kBAAkB,CAAC,IAAI,CAAC,CAAC;gBACzB,OAAO;YACT,CAAC;YAED,iCAAiC;YACjC,IAAI,SAAS,GAAG,YAAY,IAAI,CAAC,qBAAqB,CAAC,OAAO,EAAE,CAAC;gBAC/D,4DAA4D;gBAC5D,MAAM,QAAQ,GAAG,qBAAqB,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,uBAAuB;gBACjF,UAAU,GAAG,UAAU,CAAC,oBAAoB,EAAE,QAAQ,CAAC,CAAC;YAC1D,CAAC;QACH,CAAC,CAAC;QAEF,yCAAyC;QACzC,UAAU,GAAG,UAAU,CAAC,oBAAoB,EAAE,EAAE,CAAC,CAAC;QAElD,OAAO,GAAG,EAAE;YACV,SAAS,GAAG,IAAI,CAAC;YACjB,IAAI,UAAU,EAAE,CAAC;gBACf,YAAY,CAAC,UAAU,CAAC,CAAC;YAC3B,CAAC;QACH,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,cAAc,EAAE,IAAI,EAAE,gBAAgB,CAAC,CAAC,CAAC;IAE7C,OAAO;QACL,IAAI,EAAE,SAAS,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC;QAC/C,eAAe;KAChB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,eAAe,CAAC","sourcesContent":["import { useEffect, useState, useRef } from 'react';\n\nimport tokenizeWithMarkdown from '../utils/markdownTokenizer';\n\nconst useAnimatedText = ({\n  text,\n  allContentReceived = false,\n  enabled = true,\n  tokenizeMarkdown = false\n}: {\n  text: string;\n  allContentReceived: boolean;\n  enabled?: boolean;\n  tokenizeMarkdown?: boolean;\n}) => {\n  const [cursor, setCursor] = useState(0); // End pointer\n  const [startingCursor, setStartingCursor] = useState(0); // animation starting point\n\n  const [prevText, setPrevText] = useState(text);\n  const [isAnimationDone, setIsAnimationDone] = useState(false);\n\n  const allContentReceivedRef = useRef(allContentReceived);\n\n  allContentReceivedRef.current = allContentReceived;\n\n  // Tokenize text based on markdown flag\n  const getTokens = (inputText: string): string[] => {\n    if (tokenizeMarkdown) {\n      return tokenizeWithMarkdown(inputText);\n    }\n    return inputText.split('');\n  };\n\n  // A new chunk has arrived\n  if (prevText !== text) {\n    setPrevText(text);\n    setStartingCursor(text.startsWith(prevText) ? cursor : 0);\n    setIsAnimationDone(false);\n  }\n\n  useEffect(() => {\n    // If streaming is disabled just return the whole chunk back\n    if (!enabled) {\n      setCursor(getTokens(text).length);\n      setIsAnimationDone(true);\n      return;\n    }\n\n    const tokens = getTokens(text);\n    const targetLength = tokens.length;\n    const charactersToAnimate = targetLength - startingCursor;\n\n    // If there are no more characters to animate\n    if (charactersToAnimate <= 0) {\n      setCursor(targetLength);\n      // Only set animation done if we have all content AND no more characters to animate\n      if (allContentReceivedRef.current) {\n        setIsAnimationDone(true);\n      }\n      return;\n    }\n\n    let intervalId: ReturnType<typeof setTimeout>;\n    let startTime: number;\n    let isStopped = false;\n    let currentSpeed = 50; // Start with normal speed\n    let lastCursor = startingCursor;\n\n    const processTextAnimation = () => {\n      if (isStopped) return;\n\n      const currentTime = performance.now();\n\n      if (!startTime) {\n        startTime = currentTime;\n      }\n\n      // When we have all content with us, speed up streaming animation\n      const targetSpeed = allContentReceivedRef.current ? 150 : 50;\n\n      // Smoothly transition to target speed\n      const speedDiff = targetSpeed - currentSpeed;\n      currentSpeed += speedDiff * 0.1; // Smooth transition\n\n      const elapsed = currentTime - startTime;\n      const timeStep = elapsed / 1000;\n\n      // Calculate how many characters we should have shown by now\n      const expectedCursor = Math.min(startingCursor + timeStep * currentSpeed, targetLength);\n\n      const newCursor = Math.min(Math.floor(expectedCursor), targetLength);\n\n      // Skip update if the cursor is at the same token\n      if (newCursor !== lastCursor) {\n        setCursor(newCursor);\n        lastCursor = newCursor;\n      }\n\n      // End condition - stop when we reach the target\n      if (newCursor >= targetLength && allContentReceivedRef.current) {\n        setIsAnimationDone(true);\n        return;\n      }\n\n      // Continue animation if not done\n      if (newCursor < targetLength || !allContentReceivedRef.current) {\n        // Use adaptive timing based on content state and visibility\n        const interval = allContentReceivedRef.current ? 20 : 50; // Faster when complete\n        intervalId = setTimeout(processTextAnimation, interval);\n      }\n    };\n\n    // Start the animation with initial delay\n    intervalId = setTimeout(processTextAnimation, 16);\n\n    return () => {\n      isStopped = true;\n      if (intervalId) {\n        clearTimeout(intervalId);\n      }\n    };\n  }, [startingCursor, text, tokenizeMarkdown]);\n\n  return {\n    text: getTokens(text).slice(0, cursor).join(''),\n    isAnimationDone\n  };\n};\n\nexport default useAnimatedText;\n"]}
+{"version":3,"file":"useAnimatedText.js","sourceRoot":"","sources":["../../src/hooks/useAnimatedText.ts"],"names":[],"mappings":"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","sourcesContent":["import { useEffect, useState, useRef, useMemo } from 'react';\n\nimport tokenizeWithMarkdown from '../utils/markdownTokenizer';\n\nimport usePrevious from './usePrevious';\n\nconst useAnimatedText = ({\n  text,\n  allContentReceived = false,\n  enabled = true,\n  tokenizeMarkdown = false,\n  cursorStartIndex\n}: {\n  text: string;\n  allContentReceived: boolean;\n  enabled?: boolean;\n  tokenizeMarkdown?: boolean;\n  cursorStartIndex?: number;\n}) => {\n  const initialTokens = 3;\n  const maxTokens = 20;\n  const phraseSize = 3;\n\n  const [cursor, setCursor] = useState(0); // End pointer\n  const [startingCursor, setStartingCursor] = useState(0); // animation starting point\n  const [isAnimationDone, setIsAnimationDone] = useState(false);\n\n  const currentSpeedRef = useRef(initialTokens);\n  const allContentReceivedRef = useRef(allContentReceived);\n  allContentReceivedRef.current = allContentReceived;\n\n  const prevText = usePrevious(text);\n\n  const tokens = useMemo(() => {\n    return tokenizeWithMarkdown(text, { tokenizeMarkdown, phraseSize });\n  }, [text, tokenizeMarkdown]);\n\n  const visibleText = useMemo(() => {\n    return tokens.slice(0, cursor).join('');\n  }, [tokens, cursor]);\n\n  useEffect(() => {\n    if (cursorStartIndex) {\n      setStartingCursor(cursorStartIndex);\n    }\n  }, []);\n\n  useEffect(() => {\n    if (prevText !== undefined && prevText !== text) {\n      setIsAnimationDone(false);\n      setStartingCursor(text.startsWith(prevText) ? cursor : 0);\n    }\n  }, [text, cursor, prevText]);\n\n  useEffect(() => {\n    // If streaming is disabled or all chunks received - return the whole content\n    if (!enabled || allContentReceivedRef.current) {\n      setCursor(tokens.length);\n      setIsAnimationDone(true);\n      currentSpeedRef.current = Math.max(currentSpeedRef.current, maxTokens);\n\n      return;\n    }\n\n    const targetLength = tokens.length;\n    const charactersToAnimate = targetLength - startingCursor;\n\n    // If there are no more characters to animate\n    if (charactersToAnimate <= 0) {\n      setCursor(targetLength);\n      // Only set animation done if we have all content AND no more characters to animate\n      if (allContentReceivedRef.current) {\n        setIsAnimationDone(true);\n      }\n      return;\n    }\n\n    let rafId: number | null = null;\n    let startTime: number | null = null;\n    let isStopped = false;\n    let lastCursor = startingCursor;\n\n    const processTextAnimation = (currentTime: number) => {\n      if (isStopped) return;\n\n      // Stop animation immediately when all content is received\n      if (allContentReceivedRef.current) {\n        setCursor(tokens.length);\n        setIsAnimationDone(true);\n        currentSpeedRef.current = Math.max(currentSpeedRef.current, maxTokens);\n        return;\n      }\n\n      // Initialize start time on first frame\n      if (startTime === null) {\n        startTime = currentTime;\n      }\n\n      // Smoothly transition to target speed\n      const speedDiff = maxTokens - currentSpeedRef.current;\n      currentSpeedRef.current += speedDiff * 0.1; // Smooth transition\n\n      const elapsed = currentTime - startTime;\n      const timeStep = elapsed / 1000;\n\n      // Calculate how many tokens we should have shown by now\n      const expectedCursor = Math.min(\n        startingCursor + timeStep * currentSpeedRef.current,\n        targetLength\n      );\n      const newCursor = Math.min(Math.floor(expectedCursor), targetLength);\n      const safeCursor = Math.max(newCursor, lastCursor);\n\n      // Skip update if the cursor is at the same token\n      if (safeCursor !== lastCursor) {\n        setCursor(safeCursor);\n        lastCursor = safeCursor;\n      }\n\n      // End condition - stop when we reach the target\n      if (safeCursor >= targetLength && allContentReceivedRef.current) {\n        setIsAnimationDone(true);\n        return;\n      }\n\n      // Continue animation if not done\n      if (safeCursor < targetLength || !allContentReceivedRef.current) {\n        rafId = requestAnimationFrame(processTextAnimation); // Schedule next frame\n      }\n    };\n\n    // Start the animation\n    rafId = requestAnimationFrame(processTextAnimation);\n\n    return () => {\n      isStopped = true;\n\n      if (rafId) {\n        cancelAnimationFrame(rafId);\n      }\n    };\n  }, [startingCursor, tokens]);\n\n  if (allContentReceived) {\n    return {\n      text,\n      isAnimationDone: true,\n      animatedTillCursor: tokens.length\n    };\n  }\n\n  return {\n    text: visibleText,\n    isAnimationDone,\n    animatedTillCursor: cursor\n  };\n};\n\nexport default useAnimatedText;\n"]}

package/lib/hooks/useArrows.d.ts

@@ -1,16 +1,36 @@
 import type { RefObject, DependencyList } from 'react';
-/**
- * @example useArrows(ref, { cycle, selector });
- * @param ref - A reference to the element that will be navigated through. [React RefObject](https://reactjs.org/docs/refs-and-the-dom.html)
- */
-declare const useArrows: (ref: RefObject<HTMLElement>, { cycle, selector, dir, allowTabFocus, updateTabIndex, initialFocusElement }?: {
+export type Direction = 'up-down' | 'left-right' | 'both';
+export interface UseArrowsOptions {
+    /**
+     * If true, the down or up arrow key will navigate to the first or last element if the element currently focused is the last or first index of the selected elements.
+     * @default true
+     */
     cycle?: boolean;
+    /** A query selector that will determine which elements to cycle through with the arrow keys. The selector will be used in conjunction with [querySelectorAll](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll#selectors). */
     selector?: string;
-    dir?: "up-down" | "left-right";
+    /**
+     * Which keys are used to navigate through the list. Use 'both' to bind up/left to previous and down/right to next.
+     * @default 'up-down'
+     * */
+    dir?: Direction;
+    /**
+     * Keeps one element focusable.
+     * @default true
+     * */
     allowTabFocus?: boolean;
+    /**
+     * Tab index will be updated to -1 for all elements except the one that is currently focused.
+     * @default true
+     * */
     updateTabIndex?: boolean;
+    /** When focus enters the ref, which element should receive focus first if available */
     initialFocusElement?: Element | null;
-}, 
+}
+/**
+ * @example useArrows(ref, { cycle, selector });
+ * @param ref - A reference to the element that will be navigated through. [React RefObject](https://reactjs.org/docs/refs-and-the-dom.html)
+ */
+declare const useArrows: (ref: RefObject<HTMLElement>, { cycle, selector, dir, allowTabFocus, updateTabIndex, initialFocusElement }?: UseArrowsOptions, 
 /** Pass this prop in the internal dependencies when list is dynamic */
 dependencies?: DependencyList) => void;
 export default useArrows;

package/lib/hooks/useArrows.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useArrows.d.ts","sourceRoot":"","sources":["../../src/hooks/useArrows.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAavD;;;GAGG;AACH,QAAA,MAAM,SAAS,GACb,KAAK,SAAS,CAAC,WAAW,CAAC,EAC3B,+EAWG;IACD,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,GAAG,CAAC,EAAE,SAAS,GAAG,YAAY,CAAC;IAC/B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,mBAAmB,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;CACjC;AACN,uEAAuE;AACvE,eAAc,cAAmB,SAyGlC,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"useArrows.d.ts","sourceRoot":"","sources":["../../src/hooks/useArrows.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAOvD,MAAM,MAAM,SAAS,GAAG,SAAS,GAAG,YAAY,GAAG,MAAM,CAAC;AAE1D,MAAM,WAAW,gBAAgB;IAC/B;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,wPAAwP;IACxP,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;SAGK;IACL,GAAG,CAAC,EAAE,SAAS,CAAC;IAChB;;;SAGK;IACL,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;SAGK;IACL,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,uFAAuF;IACvF,mBAAmB,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;CACtC;AA2BD;;;GAGG;AACH,QAAA,MAAM,SAAS,GACb,KAAK,SAAS,CAAC,WAAW,CAAC,EAC3B,+EAOG,gBAAqB;AACxB,uEAAuE;AACvE,eAAc,cAAmB,SAiIlC,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/lib/hooks/useArrows.js

@@ -1,28 +1,37 @@
-import { useEffect, useCallback } from 'react';
+import { useEffect, useCallback, useMemo } from 'react';
 import { documentIsAvailable, isInstance } from '../utils';
 import useFocusWithin from './useFocusWithin';
+import useDirection from './useDirection';
+const upDown = { ArrowDown: 'next', ArrowUp: 'prev' };
+const leftRight = { ArrowRight: 'next', ArrowLeft: 'prev' };
+const rtlLeftRight = { ArrowLeft: 'next', ArrowRight: 'prev' };
 const focusable = `
   a[href],
   button:enabled,
   input[type='checkbox']:enabled,
   input[type='radio']:enabled
 `;
+const getInitialFocusIndex = (el, selector, initialFocusElement) => {
+    const elements = Array.from(el.querySelectorAll(selector));
+    const index = elements.findIndex(focusEl => focusEl === initialFocusElement);
+    return index === -1 ? undefined : index;
+};
 /**
  * @example useArrows(ref, { cycle, selector });
  * @param ref - A reference to the element that will be navigated through. [React RefObject](https://reactjs.org/docs/refs-and-the-dom.html)
  */
-const useArrows = (ref, { 
-/** If true, the down or up arrow key will navigate to the first or last element if the element currently focused is the last or first index of the selected elements. */
-cycle = true, 
-/** A query selector that will determine which elements to cycle through with the arrow keys. The selector will be used in conjunction with [querySelectorAll](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll#selectors). */
-selector = focusable, 
-/** Which keys are used to navigate through the list */
-dir = 'up-down', allowTabFocus = true, updateTabIndex = true, 
-/** When focus enters the ref, which element should receive focus first if available */
-initialFocusElement } = {}, 
+const useArrows = (ref, { cycle = true, selector = focusable, dir = 'up-down', allowTabFocus = true, updateTabIndex = true, initialFocusElement } = {}, 
 /** Pass this prop in the internal dependencies when list is dynamic */
 dependencies = []) => {
-    const [NextKey, PrevKey] = dir === 'up-down' ? ['ArrowDown', 'ArrowUp'] : ['ArrowRight', 'ArrowLeft'];
+    const { rtl } = useDirection();
+    const configuredBindings = useMemo(() => {
+        const effectiveLeftRight = rtl ? rtlLeftRight : leftRight;
+        if (dir === 'up-down')
+            return upDown;
+        if (dir === 'left-right')
+            return effectiveLeftRight;
+        return { ...upDown, ...effectiveLeftRight };
+    }, [dir, rtl]);
     const setTabIndexes = useCallback((el, focused) => {
         // don't set tabindex -1 for first element, or the initialFocusElement, or an element with a checked input inside of it to be able to focus it
         const focusableElements = Array.from(el.querySelectorAll(selector));
@@ -44,7 +53,7 @@ dependencies = []) => {
                 }
             });
         }
-    }, [selector, initialFocusElement, ...dependencies]);
+    }, [selector, initialFocusElement, allowTabFocus, ...dependencies]);
     useFocusWithin([ref], focused => {
         if (ref.current && updateTabIndex)
             setTabIndexes(ref.current, focused);
@@ -53,8 +62,7 @@ dependencies = []) => {
         const el = ref.current;
         if (!el)
             return;
-        if (['Home', 'End', NextKey, PrevKey].includes(e.key))
-            e.preventDefault();
+        const pressedKeyRole = configuredBindings[e.key];
         if (!documentIsAvailable)
             return;
         const items = Array.from(el.querySelectorAll(selector)).filter((item) => isInstance(item, HTMLElement));
@@ -63,18 +71,25 @@ dependencies = []) => {
         const rootNode = el.getRootNode();
         if (!isInstance(rootNode, Document) && !isInstance(rootNode, ShadowRoot))
             return;
-        const focusIdx = items.indexOf(rootNode.activeElement);
+        // If focus is inside the container but on a non-selector element (e.g. a drag handle button),
+        // do not steal focus — the element is intentionally handling its own keyboard interaction.
+        if (el.contains(rootNode.activeElement) &&
+            !items.some(item => item === rootNode.activeElement))
+            return;
+        if (e.key === 'Home' || e.key === 'End' || pressedKeyRole)
+            e.preventDefault();
+        const focusIdx = items.findIndex(item => item === rootNode.activeElement);
         const lastIdx = items.length - 1;
         let newFocusIdx;
-        if (e.key === 'Home' || (e.key === NextKey && focusIdx === -1)) {
-            const focusableElements = Array.from(el.querySelectorAll(selector));
-            const focusIndex = focusableElements.findIndex(focusEl => focusEl === initialFocusElement);
-            newFocusIdx = focusIndex === -1 ? 0 : focusIndex;
+        if (e.key === 'Home' || (pressedKeyRole === 'next' && focusIdx === -1)) {
+            newFocusIdx = initialFocusElement
+                ? getInitialFocusIndex(el, selector, initialFocusElement) ?? 0
+                : 0;
         }
-        else if (e.key === 'End' || (e.key === PrevKey && focusIdx === -1)) {
-            const focusableElements = Array.from(el.querySelectorAll(selector));
-            const focusIndex = focusableElements.findIndex(focusEl => focusEl === initialFocusElement);
-            newFocusIdx = focusIndex === -1 ? lastIdx : focusIndex;
+        else if (e.key === 'End' || (pressedKeyRole === 'prev' && focusIdx === -1)) {
+            newFocusIdx = initialFocusElement
+                ? getInitialFocusIndex(el, selector, initialFocusElement) ?? lastIdx
+                : lastIdx;
         }
         else if (e.key === 'Enter') {
             if (updateTabIndex) {
@@ -82,7 +97,7 @@ dependencies = []) => {
             }
             return;
         }
-        else if (e.key === NextKey) {
+        else if (pressedKeyRole === 'next') {
             if (focusIdx === lastIdx) {
                 if (!cycle)
                     return;
@@ -92,7 +107,7 @@ dependencies = []) => {
                 newFocusIdx = focusIdx + 1;
             }
         }
-        else if (e.key === PrevKey) {
+        else if (pressedKeyRole === 'prev') {
             if (focusIdx === 0) {
                 if (!cycle)
                     return;
@@ -106,7 +121,16 @@ dependencies = []) => {
             return;
         }
         items[newFocusIdx].focus();
-    }, [ref.current, cycle, selector, initialFocusElement, ...dependencies]);
+    }, [
+        ref.current,
+        cycle,
+        selector,
+        initialFocusElement,
+        configuredBindings,
+        updateTabIndex,
+        setTabIndexes,
+        ...dependencies
+    ]);
     useEffect(() => {
         const el = ref.current;
         if (!el)

package/lib/hooks/useArrows.js.map

@@ -1 +1 @@
-{"version":3,"file":"useArrows.js","sourceRoot":"","sources":["../../src/hooks/useArrows.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAG/C,OAAO,EAAE,mBAAmB,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAE3D,OAAO,cAAc,MAAM,kBAAkB,CAAC;AAE9C,MAAM,SAAS,GAAG;;;;;CAKjB,CAAC;AAEF;;;GAGG;AACH,MAAM,SAAS,GAAG,CAChB,GAA2B,EAC3B;AACE,yKAAyK;AACzK,KAAK,GAAG,IAAI;AACZ,wPAAwP;AACxP,QAAQ,GAAG,SAAS;AACpB,uDAAuD;AACvD,GAAG,GAAG,SAAS,EACf,aAAa,GAAG,IAAI,EACpB,cAAc,GAAG,IAAI;AACrB,uFAAuF;AACvF,mBAAmB,KAQjB,EAAE;AACN,uEAAuE;AACvE,eAA+B,EAAE,EACjC,EAAE;IACF,MAAM,CAAC,OAAO,EAAE,OAAO,CAAC,GACtB,GAAG,KAAK,SAAS,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,YAAY,EAAE,WAAW,CAAC,CAAC;IAE7E,MAAM,aAAa,GAAG,WAAW,CAC/B,CAAC,EAAe,EAAE,OAAgB,EAAE,EAAE;QACpC,8IAA8I;QAC9I,MAAM,iBAAiB,GAAG,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAC,CAAC;QAEpE,IAAI,iBAAiB,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YACjC,IAAI,UAAU,GAAG,iBAAiB,CAAC,SAAS,CAAC,OAAO,CAAC,EAAE,CAAC,OAAO,KAAK,mBAAmB,CAAC,CAAC;YACzF,IAAI,UAAU,KAAK,CAAC,CAAC;gBAAE,UAAU,GAAG,CAAC,CAAC;YAErC,iBAAiB,CAAC,UAAU,CAAiB,CAAC,QAAQ;gBACrD,aAAa,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;YACrC,iBAAiB,CAAC,MAAM,CAAC,UAAU,EAAE,CAAC,CAAC,CAAC;YACxC,iBAAiB,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;gBAC/B,IAAI,UAAU,CAAC,IAAI,EAAE,WAAW,CAAC,EAAE,CAAC;oBAClC,MAAM,OAAO,GAAI,IAAyB,CAAC,OAAO,CAAC;oBACnD,IAAI,CAAC,OAAO;wBAAE,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC;oBACjC,MAAM,eAAe,GAAG,IAAI,CAAC,aAAa,CAAC,6BAA6B,CAAC,CAAC;oBAC1E,IAAI,eAAe;wBAAE,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC;gBACzC,CAAC;YACH,CAAC,CAAC,CAAC;QACL,CAAC;IACH,CAAC,EACD,CAAC,QAAQ,EAAE,mBAAmB,EAAE,GAAG,YAAY,CAAC,CACjD,CAAC;IAEF,cAAc,CAAC,CAAC,GAAG,CAAC,EAAE,OAAO,CAAC,EAAE;QAC9B,IAAI,GAAG,CAAC,OAAO,IAAI,cAAc;YAAE,aAAa,CAAC,GAAG,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;IACzE,CAAC,CAAC,CAAC;IAEH,MAAM,QAAQ,GAAG,WAAW,CAC1B,CAAC,CAAgB,EAAE,EAAE;QACnB,MAAM,EAAE,GAAG,GAAG,CAAC,OAAO,CAAC;QACvB,IAAI,CAAC,EAAE;YAAE,OAAO;QAChB,IAAI,CAAC,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC;YAAE,CAAC,CAAC,cAAc,EAAE,CAAC;QAE1E,IAAI,CAAC,mBAAmB;YAAE,OAAO;QAEjC,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,IAAI,EAAuB,EAAE,CAC3F,UAAU,CAAC,IAAI,EAAE,WAAW,CAAC,CAC9B,CAAC;QAEF,IAAI,CAAC,KAAK,CAAC,MAAM;YAAE,OAAO;QAE1B,MAAM,QAAQ,GAAG,EAAE,CAAC,WAAW,EAAE,CAAC;QAElC,IAAI,CAAC,UAAU,CAAC,QAAQ,EAAE,QAAQ,CAAC,IAAI,CAAC,UAAU,CAAC,QAAQ,EAAE,UAAU,CAAC;YAAE,OAAO;QAEjF,MAAM,QAAQ,GAAG,KAAK,CAAC,OAAO,CAAC,QAAQ,CAAC,aAA4B,CAAC,CAAC;QACtE,MAAM,OAAO,GAAG,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC;QACjC,IAAI,WAAW,CAAC;QAEhB,IAAI,CAAC,CAAC,GAAG,KAAK,MAAM,IAAI,CAAC,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,QAAQ,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC;YAC/D,MAAM,iBAAiB,GAAG,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAC,CAAC;YACpE,MAAM,UAAU,GAAG,iBAAiB,CAAC,SAAS,CAAC,OAAO,CAAC,EAAE,CAAC,OAAO,KAAK,mBAAmB,CAAC,CAAC;YAC3F,WAAW,GAAG,UAAU,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC;QACnD,CAAC;aAAM,IAAI,CAAC,CAAC,GAAG,KAAK,KAAK,IAAI,CAAC,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,QAAQ,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC;YACrE,MAAM,iBAAiB,GAAG,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAC,CAAC;YACpE,MAAM,UAAU,GAAG,iBAAiB,CAAC,SAAS,CAAC,OAAO,CAAC,EAAE,CAAC,OAAO,KAAK,mBAAmB,CAAC,CAAC;YAC3F,WAAW,GAAG,UAAU,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC;QACzD,CAAC;aAAM,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,EAAE,CAAC;YAC7B,IAAI,cAAc,EAAE,CAAC;gBACnB,aAAa,CAAC,EAAE,EAAE,IAAI,CAAC,CAAC;YAC1B,CAAC;YACD,OAAO;QACT,CAAC;aAAM,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,EAAE,CAAC;YAC7B,IAAI,QAAQ,KAAK,OAAO,EAAE,CAAC;gBACzB,IAAI,CAAC,KAAK;oBAAE,OAAO;gBACnB,WAAW,GAAG,CAAC,CAAC;YAClB,CAAC;iBAAM,CAAC;gBACN,WAAW,GAAG,QAAQ,GAAG,CAAC,CAAC;YAC7B,CAAC;QACH,CAAC;aAAM,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,EAAE,CAAC;YAC7B,IAAI,QAAQ,KAAK,CAAC,EAAE,CAAC;gBACnB,IAAI,CAAC,KAAK;oBAAE,OAAO;gBACnB,WAAW,GAAG,OAAO,CAAC;YACxB,CAAC;iBAAM,CAAC;gBACN,WAAW,GAAG,QAAQ,GAAG,CAAC,CAAC;YAC7B,CAAC;QACH,CAAC;aAAM,CAAC;YACN,OAAO;QACT,CAAC;QAED,KAAK,CAAC,WAAW,CAAC,CAAC,KAAK,EAAE,CAAC;IAC7B,CAAC,EACD,CAAC,GAAG,CAAC,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,mBAAmB,EAAE,GAAG,YAAY,CAAC,CACrE,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,EAAE,GAAG,GAAG,CAAC,OAAO,CAAC;QACvB,IAAI,CAAC,EAAE;YAAE,OAAO;QAChB,IAAI,cAAc;YAChB,UAAU,CAAC,GAAG,EAAE;gBACd,aAAa,CAAC,EAAE,EAAE,KAAK,CAAC,CAAC;YAC3B,CAAC,EAAE,CAAC,CAAC,CAAC;QACR,EAAE,CAAC,gBAAgB,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC;QAEzC,OAAO,GAAG,EAAE;YACV,EAAE,CAAC,mBAAmB,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC;QAC9C,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,GAAG,CAAC,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,mBAAmB,EAAE,GAAG,YAAY,CAAC,CAAC,CAAC;AAC9E,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["import { useEffect, useCallback } from 'react';\nimport type { RefObject, DependencyList } from 'react';\n\nimport { documentIsAvailable, isInstance } from '../utils';\n\nimport useFocusWithin from './useFocusWithin';\n\nconst focusable = `\n  a[href],\n  button:enabled,\n  input[type='checkbox']:enabled,\n  input[type='radio']:enabled\n`;\n\n/**\n * @example useArrows(ref, { cycle, selector });\n * @param ref - A reference to the element that will be navigated through. [React RefObject](https://reactjs.org/docs/refs-and-the-dom.html)\n */\nconst useArrows = (\n  ref: RefObject<HTMLElement>,\n  {\n    /** If true, the down or up arrow key will navigate to the first or last element if the element currently focused is the last or first index of the selected elements. */\n    cycle = true,\n    /** A query selector that will determine which elements to cycle through with the arrow keys. The selector will be used in conjunction with [querySelectorAll](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll#selectors). */\n    selector = focusable,\n    /** Which keys are used to navigate through the list */\n    dir = 'up-down',\n    allowTabFocus = true,\n    updateTabIndex = true,\n    /** When focus enters the ref, which element should receive focus first if available */\n    initialFocusElement\n  }: {\n    cycle?: boolean;\n    selector?: string;\n    dir?: 'up-down' | 'left-right';\n    allowTabFocus?: boolean;\n    updateTabIndex?: boolean;\n    initialFocusElement?: Element | null;\n  } = {},\n  /** Pass this prop in the internal dependencies when list is dynamic */\n  dependencies: DependencyList = []\n) => {\n  const [NextKey, PrevKey] =\n    dir === 'up-down' ? ['ArrowDown', 'ArrowUp'] : ['ArrowRight', 'ArrowLeft'];\n\n  const setTabIndexes = useCallback(\n    (el: HTMLElement, focused: boolean) => {\n      // don't set tabindex -1 for first element, or the initialFocusElement, or an element with a checked input inside of it to be able to focus it\n      const focusableElements = Array.from(el.querySelectorAll(selector));\n\n      if (focusableElements.length > 0) {\n        let focusIndex = focusableElements.findIndex(focusEl => focusEl === initialFocusElement);\n        if (focusIndex === -1) focusIndex = 0;\n\n        (focusableElements[focusIndex] as HTMLElement).tabIndex =\n          allowTabFocus && !focused ? 0 : -1;\n        focusableElements.splice(focusIndex, 1);\n        focusableElements.forEach(item => {\n          if (isInstance(item, HTMLElement)) {\n            const checked = (item as HTMLInputElement).checked;\n            if (!checked) item.tabIndex = -1;\n            const includesChecked = item.querySelector('input[type=\"radio\"]:checked');\n            if (includesChecked) item.tabIndex = 0;\n          }\n        });\n      }\n    },\n    [selector, initialFocusElement, ...dependencies]\n  );\n\n  useFocusWithin([ref], focused => {\n    if (ref.current && updateTabIndex) setTabIndexes(ref.current, focused);\n  });\n\n  const listener = useCallback(\n    (e: KeyboardEvent) => {\n      const el = ref.current;\n      if (!el) return;\n      if (['Home', 'End', NextKey, PrevKey].includes(e.key)) e.preventDefault();\n\n      if (!documentIsAvailable) return;\n\n      const items = Array.from(el.querySelectorAll(selector)).filter((item): item is HTMLElement =>\n        isInstance(item, HTMLElement)\n      );\n\n      if (!items.length) return;\n\n      const rootNode = el.getRootNode();\n\n      if (!isInstance(rootNode, Document) && !isInstance(rootNode, ShadowRoot)) return;\n\n      const focusIdx = items.indexOf(rootNode.activeElement as HTMLElement);\n      const lastIdx = items.length - 1;\n      let newFocusIdx;\n\n      if (e.key === 'Home' || (e.key === NextKey && focusIdx === -1)) {\n        const focusableElements = Array.from(el.querySelectorAll(selector));\n        const focusIndex = focusableElements.findIndex(focusEl => focusEl === initialFocusElement);\n        newFocusIdx = focusIndex === -1 ? 0 : focusIndex;\n      } else if (e.key === 'End' || (e.key === PrevKey && focusIdx === -1)) {\n        const focusableElements = Array.from(el.querySelectorAll(selector));\n        const focusIndex = focusableElements.findIndex(focusEl => focusEl === initialFocusElement);\n        newFocusIdx = focusIndex === -1 ? lastIdx : focusIndex;\n      } else if (e.key === 'Enter') {\n        if (updateTabIndex) {\n          setTabIndexes(el, true);\n        }\n        return;\n      } else if (e.key === NextKey) {\n        if (focusIdx === lastIdx) {\n          if (!cycle) return;\n          newFocusIdx = 0;\n        } else {\n          newFocusIdx = focusIdx + 1;\n        }\n      } else if (e.key === PrevKey) {\n        if (focusIdx === 0) {\n          if (!cycle) return;\n          newFocusIdx = lastIdx;\n        } else {\n          newFocusIdx = focusIdx - 1;\n        }\n      } else {\n        return;\n      }\n\n      items[newFocusIdx].focus();\n    },\n    [ref.current, cycle, selector, initialFocusElement, ...dependencies]\n  );\n\n  useEffect(() => {\n    const el = ref.current;\n    if (!el) return;\n    if (updateTabIndex)\n      setTimeout(() => {\n        setTabIndexes(el, false);\n      }, 0);\n    el.addEventListener('keydown', listener);\n\n    return () => {\n      el.removeEventListener('keydown', listener);\n    };\n  }, [ref.current, selector, listener, initialFocusElement, ...dependencies]);\n};\n\nexport default useArrows;\n"]}
+{"version":3,"file":"useArrows.js","sourceRoot":"","sources":["../../src/hooks/useArrows.ts"],"names":[],"mappings":"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","sourcesContent":["import { useEffect, useCallback, useMemo } from 'react';\nimport type { RefObject, DependencyList } from 'react';\n\nimport { documentIsAvailable, isInstance } from '../utils';\n\nimport useFocusWithin from './useFocusWithin';\nimport useDirection from './useDirection';\n\nexport type Direction = 'up-down' | 'left-right' | 'both';\n\nexport interface UseArrowsOptions {\n  /**\n   * If true, the down or up arrow key will navigate to the first or last element if the element currently focused is the last or first index of the selected elements.\n   * @default true\n   */\n  cycle?: boolean;\n  /** A query selector that will determine which elements to cycle through with the arrow keys. The selector will be used in conjunction with [querySelectorAll](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll#selectors). */\n  selector?: string;\n  /**\n   * Which keys are used to navigate through the list. Use 'both' to bind up/left to previous and down/right to next.\n   * @default 'up-down'\n   * */\n  dir?: Direction;\n  /**\n   * Keeps one element focusable.\n   * @default true\n   * */\n  allowTabFocus?: boolean;\n  /**\n   * Tab index will be updated to -1 for all elements except the one that is currently focused.\n   * @default true\n   * */\n  updateTabIndex?: boolean;\n  /** When focus enters the ref, which element should receive focus first if available */\n  initialFocusElement?: Element | null;\n}\n\ninterface KeyRoleBinding {\n  [key: string]: 'next' | 'prev';\n}\n\nconst upDown = { ArrowDown: 'next', ArrowUp: 'prev' } as const satisfies KeyRoleBinding;\nconst leftRight = { ArrowRight: 'next', ArrowLeft: 'prev' } as const satisfies KeyRoleBinding;\nconst rtlLeftRight = { ArrowLeft: 'next', ArrowRight: 'prev' } as const satisfies KeyRoleBinding;\n\nconst focusable = `\n  a[href],\n  button:enabled,\n  input[type='checkbox']:enabled,\n  input[type='radio']:enabled\n`;\n\nconst getInitialFocusIndex = (\n  el: HTMLElement,\n  selector: string,\n  initialFocusElement?: Element | null\n) => {\n  const elements = Array.from(el.querySelectorAll(selector));\n  const index = elements.findIndex(focusEl => focusEl === initialFocusElement);\n  return index === -1 ? undefined : index;\n};\n\n/**\n * @example useArrows(ref, { cycle, selector });\n * @param ref - A reference to the element that will be navigated through. [React RefObject](https://reactjs.org/docs/refs-and-the-dom.html)\n */\nconst useArrows = (\n  ref: RefObject<HTMLElement>,\n  {\n    cycle = true,\n    selector = focusable,\n    dir = 'up-down',\n    allowTabFocus = true,\n    updateTabIndex = true,\n    initialFocusElement\n  }: UseArrowsOptions = {},\n  /** Pass this prop in the internal dependencies when list is dynamic */\n  dependencies: DependencyList = []\n) => {\n  const { rtl } = useDirection();\n  const configuredBindings = useMemo<KeyRoleBinding>(() => {\n    const effectiveLeftRight = rtl ? rtlLeftRight : leftRight;\n    if (dir === 'up-down') return upDown;\n    if (dir === 'left-right') return effectiveLeftRight;\n    return { ...upDown, ...effectiveLeftRight };\n  }, [dir, rtl]);\n\n  const setTabIndexes = useCallback(\n    (el: HTMLElement, focused: boolean) => {\n      // don't set tabindex -1 for first element, or the initialFocusElement, or an element with a checked input inside of it to be able to focus it\n      const focusableElements = Array.from(el.querySelectorAll(selector));\n\n      if (focusableElements.length > 0) {\n        let focusIndex = focusableElements.findIndex(focusEl => focusEl === initialFocusElement);\n        if (focusIndex === -1) focusIndex = 0;\n\n        (focusableElements[focusIndex] as HTMLElement).tabIndex =\n          allowTabFocus && !focused ? 0 : -1;\n        focusableElements.splice(focusIndex, 1);\n        focusableElements.forEach(item => {\n          if (isInstance(item, HTMLElement)) {\n            const checked = (item as HTMLInputElement).checked;\n            if (!checked) item.tabIndex = -1;\n            const includesChecked = item.querySelector('input[type=\"radio\"]:checked');\n            if (includesChecked) item.tabIndex = 0;\n          }\n        });\n      }\n    },\n    [selector, initialFocusElement, allowTabFocus, ...dependencies]\n  );\n\n  useFocusWithin([ref], focused => {\n    if (ref.current && updateTabIndex) setTabIndexes(ref.current, focused);\n  });\n\n  const listener = useCallback(\n    (e: KeyboardEvent) => {\n      const el = ref.current;\n      if (!el) return;\n      const pressedKeyRole = configuredBindings[e.key];\n\n      if (!documentIsAvailable) return;\n\n      const items = Array.from(el.querySelectorAll(selector)).filter((item): item is HTMLElement =>\n        isInstance(item, HTMLElement)\n      );\n\n      if (!items.length) return;\n\n      const rootNode = el.getRootNode();\n\n      if (!isInstance(rootNode, Document) && !isInstance(rootNode, ShadowRoot)) return;\n\n      // If focus is inside the container but on a non-selector element (e.g. a drag handle button),\n      // do not steal focus — the element is intentionally handling its own keyboard interaction.\n      if (\n        el.contains(rootNode.activeElement) &&\n        !items.some(item => item === rootNode.activeElement)\n      )\n        return;\n\n      if (e.key === 'Home' || e.key === 'End' || pressedKeyRole) e.preventDefault();\n\n      const focusIdx = items.findIndex(item => item === rootNode.activeElement);\n      const lastIdx = items.length - 1;\n      let newFocusIdx;\n\n      if (e.key === 'Home' || (pressedKeyRole === 'next' && focusIdx === -1)) {\n        newFocusIdx = initialFocusElement\n          ? getInitialFocusIndex(el, selector, initialFocusElement) ?? 0\n          : 0;\n      } else if (e.key === 'End' || (pressedKeyRole === 'prev' && focusIdx === -1)) {\n        newFocusIdx = initialFocusElement\n          ? getInitialFocusIndex(el, selector, initialFocusElement) ?? lastIdx\n          : lastIdx;\n      } else if (e.key === 'Enter') {\n        if (updateTabIndex) {\n          setTabIndexes(el, true);\n        }\n        return;\n      } else if (pressedKeyRole === 'next') {\n        if (focusIdx === lastIdx) {\n          if (!cycle) return;\n          newFocusIdx = 0;\n        } else {\n          newFocusIdx = focusIdx + 1;\n        }\n      } else if (pressedKeyRole === 'prev') {\n        if (focusIdx === 0) {\n          if (!cycle) return;\n          newFocusIdx = lastIdx;\n        } else {\n          newFocusIdx = focusIdx - 1;\n        }\n      } else {\n        return;\n      }\n\n      items[newFocusIdx].focus();\n    },\n    [\n      ref.current,\n      cycle,\n      selector,\n      initialFocusElement,\n      configuredBindings,\n      updateTabIndex,\n      setTabIndexes,\n      ...dependencies\n    ]\n  );\n\n  useEffect(() => {\n    const el = ref.current;\n    if (!el) return;\n    if (updateTabIndex)\n      setTimeout(() => {\n        setTabIndexes(el, false);\n      }, 0);\n    el.addEventListener('keydown', listener);\n\n    return () => {\n      el.removeEventListener('keydown', listener);\n    };\n  }, [ref.current, selector, listener, initialFocusElement, ...dependencies]);\n};\n\nexport default useArrows;\n"]}

package/lib/hooks/useContentTabIndex.d.ts

@@ -0,0 +1,17 @@
+import type { RefObject, DependencyList } from 'react';
+/**
+ * Determines whether a content element should be keyboard-focusable by evaluating if it is
+ * scrollable and contains no other focusable elements. Returns a `tabIndex` value of `0` when
+ * the content is scrollable but has no focusable children, ensuring keyboard users can still
+ * access the scrollable region. Returns `undefined` otherwise.
+ * @example useContentTabIndex(dialogRef, dialogContentRef, [closeButtonRef])
+ * @example useContentTabIndex(modalRef, modalContentRef, [closeButtonRef], [isLoading])
+ * @param containerRef ref of the container element to search for focusables
+ * @param contentRef ref of the content element that may need to be focusable
+ * @param excludeRefs optional refs to elements that should be excluded from the focusable check (e.g., close button)
+ * @param dependencies optional list of variables that will trigger re-evaluation when they are updated (e.g., loading state, content ID)
+ * @returns contentTabIndex value (0 or undefined)
+ */
+declare const useContentTabIndex: (containerRef: RefObject<HTMLElement>, contentRef: RefObject<HTMLElement>, excludeRefs?: RefObject<HTMLElement>[], dependencies?: DependencyList) => number | undefined;
+export default useContentTabIndex;
+//# sourceMappingURL=useContentTabIndex.d.ts.map

package/lib/hooks/useContentTabIndex.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useContentTabIndex.d.ts","sourceRoot":"","sources":["../../src/hooks/useContentTabIndex.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAIvD;;;;;;;;;;;;GAYG;AACH,QAAA,MAAM,kBAAkB,GACtB,cAAc,SAAS,CAAC,WAAW,CAAC,EACpC,YAAY,SAAS,CAAC,WAAW,CAAC,EAClC,cAAc,SAAS,CAAC,WAAW,CAAC,EAAE,EACtC,eAAc,cAAmB,uBA+ClC,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/lib/hooks/useContentTabIndex.js

@@ -0,0 +1,48 @@
+import { useState, useEffect } from 'react';
+import { getFocusables, testElForOverflow } from '../utils';
+/**
+ * Determines whether a content element should be keyboard-focusable by evaluating if it is
+ * scrollable and contains no other focusable elements. Returns a `tabIndex` value of `0` when
+ * the content is scrollable but has no focusable children, ensuring keyboard users can still
+ * access the scrollable region. Returns `undefined` otherwise.
+ * @example useContentTabIndex(dialogRef, dialogContentRef, [closeButtonRef])
+ * @example useContentTabIndex(modalRef, modalContentRef, [closeButtonRef], [isLoading])
+ * @param containerRef ref of the container element to search for focusables
+ * @param contentRef ref of the content element that may need to be focusable
+ * @param excludeRefs optional refs to elements that should be excluded from the focusable check (e.g., close button)
+ * @param dependencies optional list of variables that will trigger re-evaluation when they are updated (e.g., loading state, content ID)
+ * @returns contentTabIndex value (0 or undefined)
+ */
+const useContentTabIndex = (containerRef, contentRef, excludeRefs, dependencies = []) => {
+    const [contentTabIndex, setContentTabIndex] = useState(undefined);
+    useEffect(() => {
+        if (!contentRef.current)
+            return;
+        const rafId = requestAnimationFrame(() => {
+            const content = contentRef.current;
+            if (!content) {
+                setContentTabIndex(undefined);
+                return;
+            }
+            if (content.clientHeight === 0 && content.clientWidth === 0) {
+                setContentTabIndex(undefined);
+                return;
+            }
+            const focusables = getFocusables(containerRef);
+            const contentHasFocusables = focusables.some(el => content.contains(el) && el !== content && !excludeRefs?.some(ref => ref.current === el));
+            const computedStyle = window.getComputedStyle(content);
+            const hasOverflowYStyle = computedStyle.overflowY === 'auto' || computedStyle.overflowY === 'scroll';
+            const hasOverflowXStyle = computedStyle.overflowX === 'auto' || computedStyle.overflowX === 'scroll';
+            const [hasHorizontalOverflow, hasVerticalOverflow] = testElForOverflow(content);
+            const isScrollable = (hasOverflowYStyle && hasVerticalOverflow) || (hasOverflowXStyle && hasHorizontalOverflow);
+            const newTabIndex = !contentHasFocusables && isScrollable ? 0 : undefined;
+            setContentTabIndex(newTabIndex);
+        });
+        return () => {
+            cancelAnimationFrame(rafId);
+        };
+    }, dependencies);
+    return contentTabIndex;
+};
+export default useContentTabIndex;
+//# sourceMappingURL=useContentTabIndex.js.map

package/lib/hooks/useContentTabIndex.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useContentTabIndex.js","sourceRoot":"","sources":["../../src/hooks/useContentTabIndex.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAG5C,OAAO,EAAE,aAAa,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAE5D;;;;;;;;;;;;GAYG;AACH,MAAM,kBAAkB,GAAG,CACzB,YAAoC,EACpC,UAAkC,EAClC,WAAsC,EACtC,eAA+B,EAAE,EACjC,EAAE;IACF,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAqB,SAAS,CAAC,CAAC;IAEtF,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,UAAU,CAAC,OAAO;YAAE,OAAO;QAEhC,MAAM,KAAK,GAAG,qBAAqB,CAAC,GAAG,EAAE;YACvC,MAAM,OAAO,GAAG,UAAU,CAAC,OAAO,CAAC;YACnC,IAAI,CAAC,OAAO,EAAE,CAAC;gBACb,kBAAkB,CAAC,SAAS,CAAC,CAAC;gBAC9B,OAAO;YACT,CAAC;YAED,IAAI,OAAO,CAAC,YAAY,KAAK,CAAC,IAAI,OAAO,CAAC,WAAW,KAAK,CAAC,EAAE,CAAC;gBAC5D,kBAAkB,CAAC,SAAS,CAAC,CAAC;gBAC9B,OAAO;YACT,CAAC;YAED,MAAM,UAAU,GAAG,aAAa,CAAC,YAAY,CAAC,CAAC;YAE/C,MAAM,oBAAoB,GAAG,UAAU,CAAC,IAAI,CAC1C,EAAE,CAAC,EAAE,CACH,OAAO,CAAC,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,KAAK,OAAO,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,OAAO,KAAK,EAAE,CAAC,CAC1F,CAAC;YAEF,MAAM,aAAa,GAAG,MAAM,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC;YACvD,MAAM,iBAAiB,GACrB,aAAa,CAAC,SAAS,KAAK,MAAM,IAAI,aAAa,CAAC,SAAS,KAAK,QAAQ,CAAC;YAC7E,MAAM,iBAAiB,GACrB,aAAa,CAAC,SAAS,KAAK,MAAM,IAAI,aAAa,CAAC,SAAS,KAAK,QAAQ,CAAC;YAE7E,MAAM,CAAC,qBAAqB,EAAE,mBAAmB,CAAC,GAAG,iBAAiB,CAAC,OAAO,CAAC,CAAC;YAEhF,MAAM,YAAY,GAChB,CAAC,iBAAiB,IAAI,mBAAmB,CAAC,IAAI,CAAC,iBAAiB,IAAI,qBAAqB,CAAC,CAAC;YAC7F,MAAM,WAAW,GAAG,CAAC,oBAAoB,IAAI,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;YAE1E,kBAAkB,CAAC,WAAW,CAAC,CAAC;QAClC,CAAC,CAAC,CAAC;QAEH,OAAO,GAAG,EAAE;YACV,oBAAoB,CAAC,KAAK,CAAC,CAAC;QAC9B,CAAC,CAAC;IACJ,CAAC,EAAE,YAAY,CAAC,CAAC;IAEjB,OAAO,eAAe,CAAC;AACzB,CAAC,CAAC;AAEF,eAAe,kBAAkB,CAAC","sourcesContent":["import { useState, useEffect } from 'react';\nimport type { RefObject, DependencyList } from 'react';\n\nimport { getFocusables, testElForOverflow } from '../utils';\n\n/**\n * Determines whether a content element should be keyboard-focusable by evaluating if it is\n * scrollable and contains no other focusable elements. Returns a `tabIndex` value of `0` when\n * the content is scrollable but has no focusable children, ensuring keyboard users can still\n * access the scrollable region. Returns `undefined` otherwise.\n * @example useContentTabIndex(dialogRef, dialogContentRef, [closeButtonRef])\n * @example useContentTabIndex(modalRef, modalContentRef, [closeButtonRef], [isLoading])\n * @param containerRef ref of the container element to search for focusables\n * @param contentRef ref of the content element that may need to be focusable\n * @param excludeRefs optional refs to elements that should be excluded from the focusable check (e.g., close button)\n * @param dependencies optional list of variables that will trigger re-evaluation when they are updated (e.g., loading state, content ID)\n * @returns contentTabIndex value (0 or undefined)\n */\nconst useContentTabIndex = (\n  containerRef: RefObject<HTMLElement>,\n  contentRef: RefObject<HTMLElement>,\n  excludeRefs?: RefObject<HTMLElement>[],\n  dependencies: DependencyList = []\n) => {\n  const [contentTabIndex, setContentTabIndex] = useState<number | undefined>(undefined);\n\n  useEffect(() => {\n    if (!contentRef.current) return;\n\n    const rafId = requestAnimationFrame(() => {\n      const content = contentRef.current;\n      if (!content) {\n        setContentTabIndex(undefined);\n        return;\n      }\n\n      if (content.clientHeight === 0 && content.clientWidth === 0) {\n        setContentTabIndex(undefined);\n        return;\n      }\n\n      const focusables = getFocusables(containerRef);\n\n      const contentHasFocusables = focusables.some(\n        el =>\n          content.contains(el) && el !== content && !excludeRefs?.some(ref => ref.current === el)\n      );\n\n      const computedStyle = window.getComputedStyle(content);\n      const hasOverflowYStyle =\n        computedStyle.overflowY === 'auto' || computedStyle.overflowY === 'scroll';\n      const hasOverflowXStyle =\n        computedStyle.overflowX === 'auto' || computedStyle.overflowX === 'scroll';\n\n      const [hasHorizontalOverflow, hasVerticalOverflow] = testElForOverflow(content);\n\n      const isScrollable =\n        (hasOverflowYStyle && hasVerticalOverflow) || (hasOverflowXStyle && hasHorizontalOverflow);\n      const newTabIndex = !contentHasFocusables && isScrollable ? 0 : undefined;\n\n      setContentTabIndex(newTabIndex);\n    });\n\n    return () => {\n      cancelAnimationFrame(rafId);\n    };\n  }, dependencies);\n\n  return contentTabIndex;\n};\n\nexport default useContentTabIndex;\n"]}

package/lib/hooks/useFocusTrap.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useFocusTrap.d.ts","sourceRoot":"","sources":["../../src/hooks/useFocusTrap.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAMvD;;;;;;GAMG;AACH,QAAA,MAAM,YAAY,GAChB,YAAY,SAAS,CAAC,WAAW,CAAC,GAAG,IAAI,EACzC,mBAAkB,OAAc,EAChC,eAAc,cAAmB,EACjC,qBAAoB,OAAc,SAmDnC,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"useFocusTrap.d.ts","sourceRoot":"","sources":["../../src/hooks/useFocusTrap.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAMvD;;;;;;GAMG;AACH,QAAA,MAAM,YAAY,GAChB,YAAY,SAAS,CAAC,WAAW,CAAC,GAAG,IAAI,EACzC,mBAAkB,OAAc,EAChC,eAAc,cAAmB,EACjC,qBAAoB,OAAc,SAoDnC,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/lib/hooks/useFocusTrap.js

@@ -13,6 +13,7 @@ const useFocusTrap = (elementRef, attachToDocument = true, dependencies = [], re
         if (!elementRef?.current)
             return;
         if (e.key === 'Tab') {
+            e.stopPropagation();
             const focusables = getFocusables(elementRef);
             const { 0: firstFocusable, [focusables.length - 1]: lastFocusable } = focusables;
             const activeEl = getActiveElement();

package/lib/hooks/useFocusTrap.js.map

@@ -1 +1 @@
-{"version":3,"file":"useFocusTrap.js","sourceRoot":"","sources":["../../src/hooks/useFocusTrap.ts"],"names":[],"mappings":"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","sourcesContent":["import { useCallback } from 'react';\nimport type { RefObject, DependencyList } from 'react';\n\nimport { getFocusables, getActiveElement } from '../utils';\n\nimport useEvent from './useEvent';\n\n/**\n * @example useFocusTrap(elementRef)\n * @param elementRef ref of the element in which focus needs to be retained\n * @param addToDocument boolean value to specify if event to be attached to document or to be taken from elementRef, defaults to true\n * @param dependencies  list of variables or functions that will initiate this hook when they are updated.\n * @param returnEscapedFocus boolean value to specify if focus that escapes the elementRef should be returned to the elementRef, defaults to true\n */\nconst useFocusTrap = (\n  elementRef: RefObject<HTMLElement> | null,\n  attachToDocument: boolean = true,\n  dependencies: DependencyList = [],\n  returnEscapedFocus: boolean = true\n) => {\n  const onKeydown = useCallback((e: KeyboardEvent) => {\n    if (!elementRef?.current) return;\n\n    if (e.key === 'Tab') {\n      const focusables = getFocusables(elementRef);\n      const { 0: firstFocusable, [focusables.length - 1]: lastFocusable } = focusables;\n      const activeEl = getActiveElement();\n\n      const requiresFocus =\n        activeEl === elementRef.current ||\n        !elementRef.current.contains(activeEl) ||\n        (elementRef.current.contains(activeEl) && !focusables.includes(activeEl as HTMLElement));\n\n      if (requiresFocus && returnEscapedFocus) {\n        e.preventDefault();\n\n        if (activeEl) {\n          const focusablesWithActiveEl = getFocusables(elementRef, { includeActiveEl: true });\n          const activeElIndex = focusablesWithActiveEl.findIndex(el => el === activeEl);\n\n          if (activeElIndex !== -1) {\n            if (e.shiftKey) {\n              const prevIndex =\n                (activeElIndex - 1 + focusablesWithActiveEl.length) % focusablesWithActiveEl.length;\n              focusablesWithActiveEl[prevIndex].focus();\n            } else {\n              focusablesWithActiveEl[(activeElIndex + 1) % focusablesWithActiveEl.length].focus();\n            }\n          } else if (e.shiftKey) {\n            lastFocusable?.focus();\n          } else {\n            firstFocusable?.focus();\n          }\n        } else if (e.shiftKey) {\n          lastFocusable?.focus();\n        } else {\n          firstFocusable?.focus();\n        }\n      } else if (e.shiftKey && activeEl === firstFocusable) {\n        e.preventDefault();\n        lastFocusable?.focus();\n      } else if (!e.shiftKey && activeEl === lastFocusable) {\n        e.preventDefault();\n        firstFocusable?.focus();\n      }\n    }\n  }, dependencies);\n\n  useEvent('keydown', onKeydown, { target: attachToDocument ? undefined : elementRef });\n};\n\nexport default useFocusTrap;\n"]}
+{"version":3,"file":"useFocusTrap.js","sourceRoot":"","sources":["../../src/hooks/useFocusTrap.ts"],"names":[],"mappings":"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","sourcesContent":["import { useCallback } from 'react';\nimport type { RefObject, DependencyList } from 'react';\n\nimport { getFocusables, getActiveElement } from '../utils';\n\nimport useEvent from './useEvent';\n\n/**\n * @example useFocusTrap(elementRef)\n * @param elementRef ref of the element in which focus needs to be retained\n * @param addToDocument boolean value to specify if event to be attached to document or to be taken from elementRef, defaults to true\n * @param dependencies  list of variables or functions that will initiate this hook when they are updated.\n * @param returnEscapedFocus boolean value to specify if focus that escapes the elementRef should be returned to the elementRef, defaults to true\n */\nconst useFocusTrap = (\n  elementRef: RefObject<HTMLElement> | null,\n  attachToDocument: boolean = true,\n  dependencies: DependencyList = [],\n  returnEscapedFocus: boolean = true\n) => {\n  const onKeydown = useCallback((e: KeyboardEvent) => {\n    if (!elementRef?.current) return;\n\n    if (e.key === 'Tab') {\n      e.stopPropagation();\n      const focusables = getFocusables(elementRef);\n      const { 0: firstFocusable, [focusables.length - 1]: lastFocusable } = focusables;\n      const activeEl = getActiveElement();\n\n      const requiresFocus =\n        activeEl === elementRef.current ||\n        !elementRef.current.contains(activeEl) ||\n        (elementRef.current.contains(activeEl) && !focusables.includes(activeEl as HTMLElement));\n\n      if (requiresFocus && returnEscapedFocus) {\n        e.preventDefault();\n\n        if (activeEl) {\n          const focusablesWithActiveEl = getFocusables(elementRef, { includeActiveEl: true });\n          const activeElIndex = focusablesWithActiveEl.findIndex(el => el === activeEl);\n\n          if (activeElIndex !== -1) {\n            if (e.shiftKey) {\n              const prevIndex =\n                (activeElIndex - 1 + focusablesWithActiveEl.length) % focusablesWithActiveEl.length;\n              focusablesWithActiveEl[prevIndex].focus();\n            } else {\n              focusablesWithActiveEl[(activeElIndex + 1) % focusablesWithActiveEl.length].focus();\n            }\n          } else if (e.shiftKey) {\n            lastFocusable?.focus();\n          } else {\n            firstFocusable?.focus();\n          }\n        } else if (e.shiftKey) {\n          lastFocusable?.focus();\n        } else {\n          firstFocusable?.focus();\n        }\n      } else if (e.shiftKey && activeEl === firstFocusable) {\n        e.preventDefault();\n        lastFocusable?.focus();\n      } else if (!e.shiftKey && activeEl === lastFocusable) {\n        e.preventDefault();\n        firstFocusable?.focus();\n      }\n    }\n  }, dependencies);\n\n  useEvent('keydown', onKeydown, { target: attachToDocument ? undefined : elementRef });\n};\n\nexport default useFocusTrap;\n"]}

package/lib/hooks/useFocusWithin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useFocusWithin.d.ts","sourceRoot":"","sources":["../../src/hooks/useFocusWithin.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAavC;;;;GAIG;AACH,QAAA,MAAM,cAAc,GAAI,CAAC,SAAS,WAAW,GAAG,WAAW,EACzD,KAAK,CAAC,CAAC,GAAG,IAAI,GAAG,SAAS,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC,EAAE,EACvC,gBAAgB,CAAC,SAAS,EAAE,OAAO,EAAE,OAAO,EAAE,CAAC,GAAG,OAAO,GAAG,IAAI,KAAK,IAAI,KACxE,OAyIF,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"useFocusWithin.d.ts","sourceRoot":"","sources":["../../src/hooks/useFocusWithin.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAavC;;;;GAIG;AACH,QAAA,MAAM,cAAc,GAAI,CAAC,SAAS,WAAW,GAAG,WAAW,EACzD,KAAK,CAAC,CAAC,GAAG,IAAI,GAAG,SAAS,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC,EAAE,EACvC,gBAAgB,CAAC,SAAS,EAAE,OAAO,EAAE,OAAO,EAAE,CAAC,GAAG,OAAO,GAAG,IAAI,KAAK,IAAI,KACxE,OA8IF,CAAC;AAEF,eAAe,cAAc,CAAC"}