@t007/utils 0.0.33 → 0.0.35

package/dist/hooks/react.cjs

@@ -38,12 +38,13 @@ var import_utils = require("sia-reactor/utils");
 // src/ts/core/dom.ts
 var import_utils2 = require("sia-reactor/utils");
 var import_utils3 = require("sia-reactor/utils");
-var INTERACTIVE_SELECTOR = ":is(button,[href],input:not([type='hidden']),select,textarea,details>summary,[contenteditable='true'],iframe,audio[controls],video[controls],[tabindex]):not([disabled],[tabindex='-1'],[data-focus-guard],[inert],[inert] *)";
+var import_sia_reactor = require("sia-reactor");
+var INTERACTIVE_SELECTOR = ":is(button,[href],input:not([type='hidden']),select,textarea,details>summary,[contenteditable],iframe,audio[controls],video[controls],[tabindex]):not([disabled],[tabindex='-1'],[data-focus-guard],[inert],[inert] *)";
 var isInteractive = (target) => target instanceof HTMLElement && target.matches(INTERACTIVE_SELECTOR);
 
 // src/ts/hooks/react/useScrollAssist.ts
-var import_sia_reactor = require("sia-reactor");
-function useScrollAssist(ref, { enabled = true, pxPerSecond = 80, assistClassName = "t007-scroll-assist", vertical = true, horizontal = true } = import_sia_reactor.NIL) {
+var import_sia_reactor2 = require("sia-reactor");
+function useScrollAssist(ref, { enabled = true, pxPerSecond = 80, assistClassName = "t007-scroll-assist", vertical = true, horizontal = true } = import_sia_reactor2.NIL) {
   const scrollId = (0, import_react.useRef)(null), last = (0, import_react.useRef)(performance.now()), assists = (0, import_react.useRef)({}), assistWidth = (0, import_react.useRef)(20), assistHeight = (0, import_react.useRef)(20);
   const update = (0, import_react.useCallback)(() => {
     const el = ref.current;
@@ -124,31 +125,30 @@ function useScrollAssist(ref, { enabled = true, pxPerSecond = 80, assistClassNam
 var import_react2 = require("react");
 
 // src/ts/hooks/vanilla/outsideClick.ts
-var import_sia_reactor2 = require("sia-reactor");
-function initOutsideClick(el, { enabled = false, onOutside = import_sia_reactor2.NOOP, outOnClick = true, outOnEscape = true, outOnFocusOut = false, allowBounds = false, allowInputs = false, root = window, scoped = true, capture = true } = import_sia_reactor2.NIL) {
-  const stacks = t007._outsiders_stacks ??= /* @__PURE__ */ new WeakMap(), existing = (t007._outsiders ??= /* @__PURE__ */ new WeakMap()).get(el);
+var import_sia_reactor3 = require("sia-reactor");
+function initOutsideClick(el, { enabled = false, onOutside = import_sia_reactor3.NOOP, outOnClick = true, outOnEscape = true, outOnFocusOut = false, allowBounds = false, allowInputs = false, root = window, scoped = true, capture = true } = import_sia_reactor3.NIL) {
+  const stack = t007._outsiders_stack ??= [], existing = (t007._outsiders ??= /* @__PURE__ */ new WeakMap()).get(el);
   if (!enabled || existing) return existing ? existing : void 0;
   scoped = scoped && root instanceof HTMLElement, root = scoped ? root : root === document ? document : window;
-  const stack = stacks.get(root) ?? [], onScopedOut = (e, t, p = e.touches?.[0] || e, rect = allowBounds ? el.getBoundingClientRect() : null) => {
+  const onScopedOut = (e, t, p = e.touches?.[0] || e, rect = allowBounds ? el.getBoundingClientRect() : null) => {
     if (stack.at(-1) !== el || (allowBounds ? p.clientX >= rect.left && p.clientX <= rect.right && p.clientY >= rect.top && p.clientY <= rect.bottom : el.contains(t))) return false;
     return (!scoped ? true : root.contains(t)) && onOutside(e);
   }, handleClick = ((e) => outOnClick && !(allowInputs && isInteractive(e.target)) && onScopedOut(e, e.target)), handleEscape = ((e) => outOnEscape && e.key === "Escape" && !e.ctrlKey && !e.shiftKey && !e.altKey && !e.metaKey && stack.at(-1) === el && onOutside(e)), handleFocusOut = (e) => outOnFocusOut && !el.contains(e.relatedTarget) && onScopedOut(e, e.relatedTarget);
   root.addEventListener("mousedown", handleClick, capture), root.addEventListener("touchstart", handleClick, { passive: true, capture });
   root.addEventListener("keydown", handleEscape, capture);
   el.addEventListener("focusout", handleFocusOut, capture);
-  if (!stack.includes(el)) stack.push(el), stacks.set(root, stack);
   const destroy = () => {
     root.removeEventListener("mousedown", handleClick, capture), root.removeEventListener("touchstart", handleClick, capture);
     root.removeEventListener("keydown", handleEscape, capture);
     el.removeEventListener("focusout", handleFocusOut, capture);
     t007._outsiders.delete(el), stack.splice(stack.indexOf(el), 1);
   };
-  return t007._outsiders.set(el, destroy), destroy;
+  return !stack.includes(el) && stack.push(el), t007._outsiders.set(el, destroy), destroy;
 }
 
 // src/ts/hooks/react/useOutsideClick.ts
-var import_sia_reactor3 = require("sia-reactor");
-function useOutsideClick(ref, config = import_sia_reactor3.NIL) {
+var import_sia_reactor4 = require("sia-reactor");
+function useOutsideClick(ref, config = import_sia_reactor4.NIL) {
   (0, import_react2.useEffect)(() => ref.current ? initOutsideClick(ref.current, config) : void 0, [ref, config.enabled, config.onOutside, config.outOnEscape, config.outOnClick, config.outOnFocusOut, config.allowBounds, config.allowInputs, config.root, config.scoped, config.capture]);
 }
 
@@ -200,7 +200,7 @@ var getGrid = (all, x = true, y = true, vY = true) => {
 };
 
 // src/ts/hooks/react/useArrowNavigation/consts.ts
-var import_sia_reactor4 = require("sia-reactor");
+var import_sia_reactor5 = require("sia-reactor");
 var H_NAV_KEYS = ["ArrowRight", "ArrowLeft", "Home", "End"];
 var V_NAV_KEYS = ["ArrowUp", "ArrowDown", "PageDown", "PageUp"];
 var NAV_KEYS = [...H_NAV_KEYS, ...V_NAV_KEYS];
@@ -218,16 +218,16 @@ var DEFAULT_CONFIG = {
   rtl: null,
   grid: {},
   activeClass: "focus-outlined",
-  inputSelector: "input,textarea,[contenteditable='true']",
+  inputSelector: "input,textarea,[contenteditable]",
   focusOptions: { preventScroll: false },
   scrollIntoView: { block: "nearest", inline: "nearest" },
-  onSelect: import_sia_reactor4.NOOP,
-  onFocusOut: import_sia_reactor4.NOOP
+  onSelect: import_sia_reactor5.NOOP,
+  onFocusOut: import_sia_reactor5.NOOP
 };
 
 // src/ts/hooks/react/useArrowNavigation/index.ts
 function useArrowNavigation(containerRef, config = {}) {
-  const { enabled: isEnabled, selector, focusOnHover, loop, virtual, typeahead, rovingTab, resetMs, activeClass, inputSelector, defaultTabbableIndex, baseTabIndex, grid, rtl: isRtl, focusOptions, scrollIntoView, onSelect, onFocusOut } = { ...DEFAULT_CONFIG, ...config }, [gridX, setGridX] = (0, import_react3.useState)(grid.x || 1), [gridY, setGridY] = (0, import_react3.useState)(grid.y || 1), [vGridY, setVGridY] = (0, import_react3.useState)(grid.vY || 1), [activeIndex, setActiveIndex] = (0, import_react3.useState)(-1), buffer = (0, import_react3.useRef)(""), timeout = (0, import_react3.useRef)(null), itemsRef = (0, import_react3.useRef)([]), enabled = isEnabled ?? virtual, roving = rovingTab ?? !virtual, rtl = (0, import_react3.useMemo)(() => isRtl ?? ("undefined" === typeof document ? false : getComputedStyle(containerRef.current || document.body).direction === "rtl"), [containerRef, isRtl]), mutationObserverRef = (0, import_react3.useRef)(null), shouldSnub = (0, import_react3.useCallback)(() => !enabled || !containerRef.current, [enabled, containerRef]), isItemDisabled = (0, import_react3.useCallback)((el) => !el ? true : el.hasAttribute("disabled") || el.hasAttribute("aria-disabled"), []), getItems = (0, import_react3.useCallback)(() => itemsRef.current = Array.from(containerRef.current?.querySelectorAll(selector) || []), [containerRef, selector]);
+  const { enabled: isEnabled, selector, focusOnHover, loop, virtual, typeahead, rovingTab, resetMs, activeClass, inputSelector, defaultTabbableIndex, baseTabIndex, grid, rtl: isRtl, focusOptions, scrollIntoView, onSelect, onFocusOut } = { ...DEFAULT_CONFIG, ...config }, [gridX, setGridX] = (0, import_react3.useState)(grid.x || 1), [gridY, setGridY] = (0, import_react3.useState)(grid.y || 1), [vGridY, setVGridY] = (0, import_react3.useState)(grid.vY || 1), [activeIndex, setActiveIndex] = (0, import_react3.useState)(-1), buffer = (0, import_react3.useRef)(""), timeout = (0, import_react3.useRef)(null), itemsRef = (0, import_react3.useRef)([]), enabled = isEnabled ?? virtual, roving = rovingTab ?? !virtual, rtl = (0, import_react3.useMemo)(() => isRtl ?? ("undefined" === typeof document ? false : getComputedStyle(containerRef.current || document.body).direction === "rtl"), [containerRef, isRtl]), mutationObserverRef = (0, import_react3.useRef)(null), shouldSnub = (0, import_react3.useCallback)(() => !enabled || !containerRef.current, [enabled, containerRef]), isItemDisabled = (0, import_react3.useCallback)((el) => !el || el.matches('[disabled],[aria-disabled="true"],[inert],:disabled'), []), getItems = (0, import_react3.useCallback)(() => itemsRef.current = Array.from(containerRef.current?.querySelectorAll(selector) || []), [containerRef, selector]);
   const getAbleIndex = (0, import_react3.useCallback)(
     (targetIndex, e = { key: "ArrowRight", ctrlKey: false }) => {
       if (shouldSnub()) return;
@@ -301,8 +301,9 @@ function useArrowNavigation(containerRef, config = {}) {
     },
     [shouldSnub, virtual, activeIndex, gridX, gridY, vGridY, loop, rtl, goToIndex, typeahead, typeAhead]
   );
-  const latest = (0, import_react3.useRef)({ getItems, updateDOM, activeIndex });
-  (0, import_react3.useEffect)(() => void (latest.current = { getItems, updateDOM, activeIndex }), [getItems, updateDOM, activeIndex]);
+  const latest = (0, import_react3.useRef)({ getItems, updateDOM, activeIndex, calcGrid: () => {
+  } });
+  (0, import_react3.useEffect)(() => void (latest.current = { ...latest.current, getItems, updateDOM, activeIndex }), [getItems, updateDOM, activeIndex]);
   (0, import_react3.useEffect)(() => void getItems(), [getItems, enabled]);
   (0, import_react3.useEffect)(() => void (!enabled && setActiveIndex(-1)), [enabled]);
   (0, import_react3.useEffect)(() => updateDOM(), [activeIndex, updateDOM]);
@@ -331,8 +332,7 @@ function useArrowNavigation(containerRef, config = {}) {
     const all = itemsRef.current;
     const handleHover = (e) => {
       if (!focusOnHover) return;
-      const el = e.currentTarget;
-      const i = itemsRef.current?.indexOf(el);
+      const el = e.currentTarget, i = itemsRef.current?.indexOf(el);
       if (i !== -1) goToIndex(i);
     };
     for (const el of all) el.addEventListener("mouseenter", handleHover);
@@ -340,23 +340,23 @@ function useArrowNavigation(containerRef, config = {}) {
       for (const el of all) el.removeEventListener("mouseenter", handleHover);
     };
   }, [enabled, focusOnHover, goToIndex]);
+  const sync = (0, import_react3.useCallback)(() => {
+    const { getItems: getItems2, updateDOM: updateDOM2, activeIndex: activeIndex2 } = latest.current;
+    const oldEl = itemsRef.current[activeIndex2];
+    getItems2();
+    const newEl = itemsRef.current[activeIndex2];
+    updateDOM2();
+    if (oldEl && newEl && oldEl === newEl) return;
+    setActiveIndex(-1);
+  }, []);
   (0, import_react3.useEffect)(() => {
     if (shouldSnub()) return;
-    const observer = mutationObserverRef.current = new MutationObserver(() => {
-      const { getItems: getItems2, updateDOM: updateDOM2, activeIndex: activeIndex2 } = latest.current;
-      const oldEl = itemsRef.current[activeIndex2];
-      getItems2();
-      const newEl = itemsRef.current[activeIndex2];
-      updateDOM2();
-      if (oldEl && newEl && oldEl === newEl) return;
-      setActiveIndex(-1);
-    });
+    const observer = mutationObserverRef.current = new MutationObserver(sync);
     observer.observe(containerRef.current, { childList: true, subtree: true });
     return () => observer.disconnect();
-  }, [shouldSnub, containerRef]);
+  }, [shouldSnub, containerRef, sync]);
   (0, import_react3.useEffect)(() => {
     if (shouldSnub()) return;
-    const all = itemsRef.current;
     const setGrid = (g) => {
       if (g.x) setGridX(g.x);
       if (g.y) setGridY(g.y);
@@ -364,26 +364,32 @@ function useArrowNavigation(containerRef, config = {}) {
     };
     setGrid(grid);
     if (grid.x && grid.y && grid.vY) return;
-    const calcGrid = () => setGrid(getGrid(all, !grid.x, !grid.y, !grid.vY));
-    calcGrid();
+    let ancestor = null;
     const resizeObserver = new ResizeObserver(() => calcGrid());
-    resizeObserver.observe(getCommonAncestor(all[0], all[1]) ?? containerRef.current);
+    const calcGrid = () => {
+      setGrid(getGrid(itemsRef.current, !grid.x, !grid.y, !grid.vY));
+      const next = itemsRef.current.length > 1 ? getCommonAncestor(itemsRef.current[0], itemsRef.current[1]) : containerRef.current;
+      if (next && next !== ancestor) ancestor && resizeObserver.unobserve(ancestor), ancestor = next, resizeObserver.observe(ancestor);
+    };
+    latest.current.calcGrid = calcGrid;
+    calcGrid();
     return () => resizeObserver.disconnect();
   }, [shouldSnub, containerRef, grid]);
   (0, import_react3.useEffect)(() => void (timeout.current && clearTimeout(timeout.current)), []);
-  return { gridX, gridY, vGridY, activeIndex, activeItem: (0, import_react3.useCallback)(() => itemsRef.current[activeIndex] ?? null, [activeIndex]), items: (0, import_react3.useCallback)(() => itemsRef.current, []), getAbleIndex, typeAhead, goToIndex, simulateKey };
+  return { gridX, gridY, vGridY, activeIndex, activeItem: (0, import_react3.useCallback)(() => itemsRef.current[activeIndex] ?? null, [activeIndex]), items: (0, import_react3.useCallback)(() => itemsRef.current, []), getAbleIndex, typeAhead, goToIndex, simulateKey, sync };
 }
 
 // src/ts/hooks/react/useFocusTrap.ts
 var import_react4 = require("react");
 
 // src/ts/hooks/vanilla/focusTrap.ts
-var import_sia_reactor5 = require("sia-reactor");
-function initFocusTrap(el, { enabled = false, initialSelector = "[data-autofocus]", ringClassName = "focus-outline", root = window, scoped = true, capture = true } = import_sia_reactor5.NIL) {
-  const stacks = t007._ftrappers_stacks ??= /* @__PURE__ */ new WeakMap(), existing = (t007._ftrappers ??= /* @__PURE__ */ new WeakMap()).get(el);
+var import_sia_reactor6 = require("sia-reactor");
+function initFocusTrap(el, { enabled = false, initialSelector = "[data-autofocus]", ringClassName = "focus-outline", root = window, scoped = true, capture = true } = import_sia_reactor6.NIL) {
+  const stack = t007._ftrappers_stack ??= [], existing = (t007._ftrappers ??= /* @__PURE__ */ new WeakMap()).get(el);
   if (!enabled || existing) return existing ? existing : void 0;
   scoped = scoped && root instanceof HTMLElement, root = scoped ? root : root === document ? document : window;
-  const stack = stacks.get(root) ?? [], focused = document.querySelector(":focus"), initial = el.querySelector(initialSelector), first = (0, import_utils2.createEl)("span", { tabIndex: 0 }, { focusGuard: "start" }, { position: "absolute", width: "0", height: "0", pointerEvents: "none" }), last = (0, import_utils2.createEl)("span", { tabIndex: 0 }, { focusGuard: "end" }, { position: "absolute", width: "0", height: "0", pointerEvents: "none" }), getFocusable = (c = el) => [...c.querySelectorAll(INTERACTIVE_SELECTOR)], resetFocus = (i = 0, els = getFocusable()) => els?.length ? els.at(i).focus() : (!el.hasAttribute("tabindex") && (el.tabIndex = -1), el.focus()), edgeFocus = (pre = false, rt = root) => {
+  let recovering = false;
+  const focused = document.querySelector(":focus"), initial = el.querySelector(initialSelector), first = (0, import_utils2.createEl)("span", { tabIndex: 0 }, { focusGuard: "start" }, { position: "absolute", width: "0", height: "0", pointerEvents: "none" }), last = (0, import_utils2.createEl)("span", { tabIndex: 0 }, { focusGuard: "end" }, { position: "absolute", width: "0", height: "0", pointerEvents: "none" }), getFocusable = (c = el) => [...c.querySelectorAll(INTERACTIVE_SELECTOR)], resetFocus = (i = 0, els = getFocusable()) => !recovering && (recovering = true, els?.length ? els.at(i).focus() : (!el.hasAttribute("tabindex") && (el.tabIndex = -1), el.focus()), recovering = false), edgeFocus = (pre = false, rt = root) => {
     if (!scoped) return resetFocus(pre ? -1 : 0);
     if (rt.hasAttribute("tabindex")) return rt.focus();
     const items = getFocusable();
@@ -393,28 +399,33 @@ function initFocusTrap(el, { enabled = false, initialSelector = "[data-autofocus
     while (p !== ceil && (!all.length || (pre ? rt.contains(all[0]) : rt.contains(all.at(-1))))) all = getFocusable(p = p.parentElement || ceil);
     for (let target, len = all.length, i = all.indexOf(items[pre ? 0 : items.length - 1]) + (pre ? -1 : 1); pre ? i >= 0 : i < len; pre ? i-- : i++) if (!rt.contains(target = all[i])) return target.focus();
     (pre ? first : last).blur();
-  }, handleFocusIn = () => {
+  }, handleFocusIn = (e) => {
     if (document.querySelector("dialog:modal") && !el.matches("dialog:modal")) return;
-    stack.at(-1) === el && (0, import_utils3.getActiveEl)(el.ownerDocument) !== root && !el.contains((0, import_utils3.getActiveEl)(el.ownerDocument)) && resetFocus();
+    stack.at(-1) === el && (0, import_utils3.getActiveEl)(el.ownerDocument) !== root && !el.contains((0, import_utils3.getActiveEl)(el.ownerDocument)) && !e.composedPath().includes(el) && resetFocus();
   }, handleInitialBlur = () => initial.classList.remove(ringClassName);
   first.addEventListener("focus", (e) => el.contains(e.relatedTarget) ? edgeFocus(true) : resetFocus(), capture), el.prepend(first);
   last.addEventListener("focus", (e) => el.contains(e.relatedTarget) ? edgeFocus() : resetFocus(-1), capture), el.append(last);
   root.addEventListener("focusin", handleFocusIn, capture);
   if (initial || !el.contains(focused)) !initial ? setTimeout(resetFocus) : setTimeout(() => (initial.classList.add(ringClassName), initial.focus(), initial.addEventListener("blur", handleInitialBlur, capture)));
-  if (!stack.includes(el)) stack.push(el), stacks.set(root, stack);
   const destroy = () => {
     focused?.isConnected && focused.focus(), first.remove(), last.remove();
     root.removeEventListener("focusin", handleFocusIn, capture);
     initial?.removeEventListener("blur", handleInitialBlur, capture);
     t007._ftrappers.delete(el), stack.splice(stack.indexOf(el), 1);
   };
-  return t007._ftrappers.set(el, destroy), destroy;
+  const handle = { destroy, sync: () => (el.prepend(first), el.append(last)) };
+  return !stack.includes(el) && stack.push(el), t007._ftrappers.set(el, handle), handle;
 }
 
 // src/ts/hooks/react/useFocusTrap.ts
-var import_sia_reactor6 = require("sia-reactor");
-function useFocusTrap(ref, config = import_sia_reactor6.NIL) {
-  (0, import_react4.useEffect)(() => ref.current ? initFocusTrap(ref.current, config) : void 0, [ref, config.enabled, config.initialSelector, config.ringClassName, config.root, config.scoped, config.capture]);
+var import_sia_reactor7 = require("sia-reactor");
+function useFocusTrap(ref, config = import_sia_reactor7.NIL) {
+  const handle = (0, import_react4.useRef)(void 0);
+  (0, import_react4.useEffect)(() => {
+    if (!ref.current) return;
+    return handle.current = initFocusTrap(ref.current, config), () => handle.current?.destroy();
+  }, [ref, config.enabled, config.initialSelector, config.ringClassName, config.root, config.scoped, config.capture]);
+  return { sync: () => handle.current?.sync() };
 }
 
 // src/ts/hooks/react/useHighlight.ts
@@ -434,8 +445,8 @@ function useHighlight(text, query, ignoreCase = true, options) {
 var import_react6 = require("react");
 
 // src/ts/hooks/vanilla/ripple.ts
-var import_sia_reactor7 = require("sia-reactor");
-function rippleHandler(e, { target, forceCenter = false, wrapperClassName = "t007-ripple-wrapper", className = "t007-ripple", holdClassName = "t007-ripple-hold", fadeClassName = "t007-ripple-fade" } = import_sia_reactor7.NIL) {
+var import_sia_reactor8 = require("sia-reactor");
+function rippleHandler(e, { target, forceCenter = false, wrapperClassName = "t007-ripple-wrapper", className = "t007-ripple", holdClassName = "t007-ripple-hold", fadeClassName = "t007-ripple-fade", maxDuration = 1e3 } = import_sia_reactor8.NIL) {
   const el = target || e.currentTarget;
   if (!el || e.target !== e.currentTarget && isInteractive(e.target) || el.hasAttribute("disabled") || e.pointerType === "mouse" && e.button !== 0) return;
   e.stopPropagation?.();
@@ -443,19 +454,22 @@ function rippleHandler(e, { target, forceCenter = false, wrapperClassName = "t00
   let canRelease = false;
   ripple.addEventListener("animationend", () => canRelease = true, { once: true });
   el.append(wrapper.appendChild(ripple).parentElement);
-  const release = () => {
-    if (!canRelease) return ripple.addEventListener("animationend", release, { once: true });
+  let released = false;
+  const release = (force) => {
+    if (released) return;
+    if (!canRelease && force !== true) return ripple.addEventListener("animationend", release, { once: true }), void setTimeout(release, maxDuration, true);
+    released = true;
     ripple.classList.replace(holdClassName, fadeClassName);
-    ripple.addEventListener("animationend", () => setTimeout(() => wrapper.remove()));
+    ripple.addEventListener("animationend", () => setTimeout(() => wrapper.remove())), setTimeout(() => wrapper.remove(), maxDuration);
     for (const evt of ["pointerup", "pointercancel"]) (el.ownerDocument?.defaultView || window).removeEventListener(evt, release);
   };
   for (const evt of ["pointerup", "pointercancel"]) (el.ownerDocument?.defaultView || window).addEventListener(evt, release);
 }
 
 // src/ts/hooks/react/useRipple.ts
-var import_sia_reactor8 = require("sia-reactor");
+var import_sia_reactor9 = require("sia-reactor");
 function useRipple() {
-  return (0, import_react6.useCallback)((e, config = import_sia_reactor8.NIL) => rippleHandler(e.nativeEvent, config), []);
+  return (0, import_react6.useCallback)((e, config = import_sia_reactor9.NIL) => rippleHandler(e.nativeEvent, config), []);
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/hooks/react.d.cts

@@ -1,11 +1,11 @@
 import { RefObject } from 'react';
-import { a as ScrollAssistConfig, C as Config, K as KeyEvent } from '../scrollAssist-y9wFmYgt.cjs';
-import { O as OutsideClickConfig, F as FocusTrapConfig, R as RippleConfig } from '../ripple-C5MfEErC.cjs';
-export { H as HighlightOptions, u as useHighlight } from '../useHighlight-DMpDCILK.cjs';
+import { a as ScrollAssistConfig, C as Config, K as KeyEvent, b as FocusTrapConfig } from '../scrollAssist-BNvPnsJq.cjs';
+import { O as OutsideClickConfig, R as RippleConfig } from '../ripple-D1kGErTn.cjs';
+export { H as HighlightOptions, u as useHighlight } from '../useHighlight-DYc_GF0R.cjs';
 
 /** Configuration options for the `useScrollAssist` hook. */
 interface UseScrollAssistConfig extends ScrollAssistConfig {
-    /** Enables or disables the scroll assist. Defaults to `true`. */
+    /** Enables or disables the scroll assist. @default  `true`. */
     enabled?: boolean;
 }
 /** React hook to add edge-scrolling assist to an element. It creates invisible "hot zones" at the edges of the element that, when hovered or dragged into, will scroll the element in that direction.
@@ -33,10 +33,13 @@ declare function useArrowNavigation(containerRef: React.RefObject<HTMLElement>,
     typeAhead: (key: string) => void;
     goToIndex: (targetIndex: number, e?: KeyEvent) => void;
     simulateKey: (e: KeyEvent) => void;
+    sync: () => void;
 };
 
-/** React hook  to keep focus trapped inside an element until disabled. */
-declare function useFocusTrap(ref: RefObject<HTMLElement>, config?: FocusTrapConfig): void;
+/** React hook to keep focus trapped inside an element until disabled. */
+declare function useFocusTrap(ref: RefObject<HTMLElement>, config?: FocusTrapConfig): {
+    sync: () => void | undefined;
+};
 
 /** React hook to render and control a material-style ripple animation on an element.
  * @returns Stable pointer handler for clickable UI surfaces.

package/dist/hooks/react.d.ts

@@ -1,11 +1,11 @@
 import { RefObject } from 'react';
-import { a as ScrollAssistConfig, C as Config, K as KeyEvent } from '../scrollAssist-y9wFmYgt.js';
-import { O as OutsideClickConfig, F as FocusTrapConfig, R as RippleConfig } from '../ripple-C5MfEErC.js';
-export { H as HighlightOptions, u as useHighlight } from '../useHighlight-DMpDCILK.js';
+import { a as ScrollAssistConfig, C as Config, K as KeyEvent, b as FocusTrapConfig } from '../scrollAssist-BNvPnsJq.js';
+import { O as OutsideClickConfig, R as RippleConfig } from '../ripple-D1kGErTn.js';
+export { H as HighlightOptions, u as useHighlight } from '../useHighlight-DYc_GF0R.js';
 
 /** Configuration options for the `useScrollAssist` hook. */
 interface UseScrollAssistConfig extends ScrollAssistConfig {
-    /** Enables or disables the scroll assist. Defaults to `true`. */
+    /** Enables or disables the scroll assist. @default  `true`. */
     enabled?: boolean;
 }
 /** React hook to add edge-scrolling assist to an element. It creates invisible "hot zones" at the edges of the element that, when hovered or dragged into, will scroll the element in that direction.
@@ -33,10 +33,13 @@ declare function useArrowNavigation(containerRef: React.RefObject<HTMLElement>,
     typeAhead: (key: string) => void;
     goToIndex: (targetIndex: number, e?: KeyEvent) => void;
     simulateKey: (e: KeyEvent) => void;
+    sync: () => void;
 };
 
-/** React hook  to keep focus trapped inside an element until disabled. */
-declare function useFocusTrap(ref: RefObject<HTMLElement>, config?: FocusTrapConfig): void;
+/** React hook to keep focus trapped inside an element until disabled. */
+declare function useFocusTrap(ref: RefObject<HTMLElement>, config?: FocusTrapConfig): {
+    sync: () => void | undefined;
+};
 
 /** React hook to render and control a material-style ripple animation on an element.
  * @returns Stable pointer handler for clickable UI surfaces.

package/dist/hooks/react.js

@@ -11,11 +11,11 @@ import {
   initFocusTrap,
   initOutsideClick,
   rippleHandler
-} from "../chunk-QJ72EQCJ.js";
+} from "../chunk-NX2LWYD6.js";
 import {
   INTERACTIVE_SELECTOR,
   getActiveEl
-} from "../chunk-4O76EZJ4.js";
+} from "../chunk-ZALPHCSJ.js";
 
 // src/ts/hooks/react/useScrollAssist.ts
 import { useEffect, useRef, useCallback } from "react";
@@ -107,7 +107,7 @@ function useOutsideClick(ref, config = NIL2) {
 // src/ts/hooks/react/useArrowNavigation/index.ts
 import { useEffect as useEffect3, useState, useCallback as useCallback2, useRef as useRef2, useMemo } from "react";
 function useArrowNavigation(containerRef, config = {}) {
-  const { enabled: isEnabled, selector, focusOnHover, loop, virtual, typeahead, rovingTab, resetMs, activeClass, inputSelector, defaultTabbableIndex, baseTabIndex, grid, rtl: isRtl, focusOptions, scrollIntoView, onSelect, onFocusOut } = { ...DEFAULT_CONFIG, ...config }, [gridX, setGridX] = useState(grid.x || 1), [gridY, setGridY] = useState(grid.y || 1), [vGridY, setVGridY] = useState(grid.vY || 1), [activeIndex, setActiveIndex] = useState(-1), buffer = useRef2(""), timeout = useRef2(null), itemsRef = useRef2([]), enabled = isEnabled ?? virtual, roving = rovingTab ?? !virtual, rtl = useMemo(() => isRtl ?? ("undefined" === typeof document ? false : getComputedStyle(containerRef.current || document.body).direction === "rtl"), [containerRef, isRtl]), mutationObserverRef = useRef2(null), shouldSnub = useCallback2(() => !enabled || !containerRef.current, [enabled, containerRef]), isItemDisabled = useCallback2((el) => !el ? true : el.hasAttribute("disabled") || el.hasAttribute("aria-disabled"), []), getItems = useCallback2(() => itemsRef.current = Array.from(containerRef.current?.querySelectorAll(selector) || []), [containerRef, selector]);
+  const { enabled: isEnabled, selector, focusOnHover, loop, virtual, typeahead, rovingTab, resetMs, activeClass, inputSelector, defaultTabbableIndex, baseTabIndex, grid, rtl: isRtl, focusOptions, scrollIntoView, onSelect, onFocusOut } = { ...DEFAULT_CONFIG, ...config }, [gridX, setGridX] = useState(grid.x || 1), [gridY, setGridY] = useState(grid.y || 1), [vGridY, setVGridY] = useState(grid.vY || 1), [activeIndex, setActiveIndex] = useState(-1), buffer = useRef2(""), timeout = useRef2(null), itemsRef = useRef2([]), enabled = isEnabled ?? virtual, roving = rovingTab ?? !virtual, rtl = useMemo(() => isRtl ?? ("undefined" === typeof document ? false : getComputedStyle(containerRef.current || document.body).direction === "rtl"), [containerRef, isRtl]), mutationObserverRef = useRef2(null), shouldSnub = useCallback2(() => !enabled || !containerRef.current, [enabled, containerRef]), isItemDisabled = useCallback2((el) => !el || el.matches('[disabled],[aria-disabled="true"],[inert],:disabled'), []), getItems = useCallback2(() => itemsRef.current = Array.from(containerRef.current?.querySelectorAll(selector) || []), [containerRef, selector]);
   const getAbleIndex = useCallback2(
     (targetIndex, e = { key: "ArrowRight", ctrlKey: false }) => {
       if (shouldSnub()) return;
@@ -181,8 +181,9 @@ function useArrowNavigation(containerRef, config = {}) {
     },
     [shouldSnub, virtual, activeIndex, gridX, gridY, vGridY, loop, rtl, goToIndex, typeahead, typeAhead]
   );
-  const latest = useRef2({ getItems, updateDOM, activeIndex });
-  useEffect3(() => void (latest.current = { getItems, updateDOM, activeIndex }), [getItems, updateDOM, activeIndex]);
+  const latest = useRef2({ getItems, updateDOM, activeIndex, calcGrid: () => {
+  } });
+  useEffect3(() => void (latest.current = { ...latest.current, getItems, updateDOM, activeIndex }), [getItems, updateDOM, activeIndex]);
   useEffect3(() => void getItems(), [getItems, enabled]);
   useEffect3(() => void (!enabled && setActiveIndex(-1)), [enabled]);
   useEffect3(() => updateDOM(), [activeIndex, updateDOM]);
@@ -211,8 +212,7 @@ function useArrowNavigation(containerRef, config = {}) {
     const all = itemsRef.current;
     const handleHover = (e) => {
       if (!focusOnHover) return;
-      const el = e.currentTarget;
-      const i = itemsRef.current?.indexOf(el);
+      const el = e.currentTarget, i = itemsRef.current?.indexOf(el);
       if (i !== -1) goToIndex(i);
     };
     for (const el of all) el.addEventListener("mouseenter", handleHover);
@@ -220,23 +220,23 @@ function useArrowNavigation(containerRef, config = {}) {
       for (const el of all) el.removeEventListener("mouseenter", handleHover);
     };
   }, [enabled, focusOnHover, goToIndex]);
+  const sync = useCallback2(() => {
+    const { getItems: getItems2, updateDOM: updateDOM2, activeIndex: activeIndex2 } = latest.current;
+    const oldEl = itemsRef.current[activeIndex2];
+    getItems2();
+    const newEl = itemsRef.current[activeIndex2];
+    updateDOM2();
+    if (oldEl && newEl && oldEl === newEl) return;
+    setActiveIndex(-1);
+  }, []);
   useEffect3(() => {
     if (shouldSnub()) return;
-    const observer = mutationObserverRef.current = new MutationObserver(() => {
-      const { getItems: getItems2, updateDOM: updateDOM2, activeIndex: activeIndex2 } = latest.current;
-      const oldEl = itemsRef.current[activeIndex2];
-      getItems2();
-      const newEl = itemsRef.current[activeIndex2];
-      updateDOM2();
-      if (oldEl && newEl && oldEl === newEl) return;
-      setActiveIndex(-1);
-    });
+    const observer = mutationObserverRef.current = new MutationObserver(sync);
     observer.observe(containerRef.current, { childList: true, subtree: true });
     return () => observer.disconnect();
-  }, [shouldSnub, containerRef]);
+  }, [shouldSnub, containerRef, sync]);
   useEffect3(() => {
     if (shouldSnub()) return;
-    const all = itemsRef.current;
     const setGrid = (g) => {
       if (g.x) setGridX(g.x);
       if (g.y) setGridY(g.y);
@@ -244,21 +244,31 @@ function useArrowNavigation(containerRef, config = {}) {
     };
     setGrid(grid);
     if (grid.x && grid.y && grid.vY) return;
-    const calcGrid = () => setGrid(getGrid(all, !grid.x, !grid.y, !grid.vY));
-    calcGrid();
+    let ancestor = null;
     const resizeObserver = new ResizeObserver(() => calcGrid());
-    resizeObserver.observe(getCommonAncestor(all[0], all[1]) ?? containerRef.current);
+    const calcGrid = () => {
+      setGrid(getGrid(itemsRef.current, !grid.x, !grid.y, !grid.vY));
+      const next = itemsRef.current.length > 1 ? getCommonAncestor(itemsRef.current[0], itemsRef.current[1]) : containerRef.current;
+      if (next && next !== ancestor) ancestor && resizeObserver.unobserve(ancestor), ancestor = next, resizeObserver.observe(ancestor);
+    };
+    latest.current.calcGrid = calcGrid;
+    calcGrid();
     return () => resizeObserver.disconnect();
   }, [shouldSnub, containerRef, grid]);
   useEffect3(() => void (timeout.current && clearTimeout(timeout.current)), []);
-  return { gridX, gridY, vGridY, activeIndex, activeItem: useCallback2(() => itemsRef.current[activeIndex] ?? null, [activeIndex]), items: useCallback2(() => itemsRef.current, []), getAbleIndex, typeAhead, goToIndex, simulateKey };
+  return { gridX, gridY, vGridY, activeIndex, activeItem: useCallback2(() => itemsRef.current[activeIndex] ?? null, [activeIndex]), items: useCallback2(() => itemsRef.current, []), getAbleIndex, typeAhead, goToIndex, simulateKey, sync };
 }
 
 // src/ts/hooks/react/useFocusTrap.ts
-import { useEffect as useEffect4 } from "react";
+import { useEffect as useEffect4, useRef as useRef3 } from "react";
 import { NIL as NIL3 } from "sia-reactor";
 function useFocusTrap(ref, config = NIL3) {
-  useEffect4(() => ref.current ? initFocusTrap(ref.current, config) : void 0, [ref, config.enabled, config.initialSelector, config.ringClassName, config.root, config.scoped, config.capture]);
+  const handle = useRef3(void 0);
+  useEffect4(() => {
+    if (!ref.current) return;
+    return handle.current = initFocusTrap(ref.current, config), () => handle.current?.destroy();
+  }, [ref, config.enabled, config.initialSelector, config.ringClassName, config.root, config.scoped, config.capture]);
+  return { sync: () => handle.current?.sync() };
 }
 
 // src/ts/hooks/react/useRipple.ts