@t007/utils 0.0.24 → 0.0.26

package/dist/hooks/react.js

@@ -0,0 +1,276 @@
+import {
+  useHighlight
+} from "../chunk-OGFBI6PS.js";
+import {
+  DEFAULT_CONFIG,
+  H_NAV_KEYS,
+  NAV_KEYS,
+  getCommonAncestor,
+  getGrid,
+  getTargetIndex,
+  initFocusTrap,
+  initOutsideClick,
+  rippleHandler
+} from "../chunk-AI5O3OGE.js";
+import {
+  INTERACTIVE_SELECTOR,
+  getActiveElement
+} from "../chunk-XVFFZZJA.js";
+
+// src/hooks/react/useScrollAssist.ts
+import { useEffect, useRef, useCallback } from "react";
+import { NIL } from "sia-reactor";
+function useScrollAssist(ref, { enabled = true, pxPerSecond = 80, assistClassName = "t007-scroll-assist", vertical = true, horizontal = true } = NIL) {
+  const scrollId = useRef(null), last = useRef(performance.now()), assists = useRef({}), assistWidth = useRef(20), assistHeight = useRef(20);
+  const update = useCallback(() => {
+    const el = ref.current;
+    if (!el) return;
+    const hasInteractive = !!el.querySelector(INTERACTIVE_SELECTOR);
+    if (horizontal) {
+      const w = assists.current.left?.offsetWidth || assistWidth.current;
+      const check = hasInteractive ? el.clientWidth < w * 2 : false;
+      assists.current.left.style.display = check ? "none" : el.scrollLeft > 0 ? "block" : "none";
+      assists.current.right.style.display = check ? "none" : el.scrollLeft + el.clientWidth < el.scrollWidth - 1 ? "block" : "none";
+      assistWidth.current = w;
+    }
+    if (vertical) {
+      const h = assists.current.up?.offsetHeight || assistHeight.current;
+      const check = hasInteractive ? el.clientHeight < h * 2 : false;
+      assists.current.up.style.display = check ? "none" : el.scrollTop > 0 ? "block" : "none";
+      assists.current.down.style.display = check ? "none" : el.scrollTop + el.clientHeight < el.scrollHeight - 1 ? "block" : "none";
+      assistHeight.current = h;
+    }
+  }, [ref, horizontal, vertical]);
+  const scroll = useCallback(
+    (dir) => {
+      const el = ref.current;
+      if (!el) return;
+      const loop = () => {
+        const now = performance.now(), dt = now - last.current;
+        last.current = now;
+        const d = pxPerSecond * dt / 1e3;
+        if (dir === "left") el.scrollLeft = Math.max(0, el.scrollLeft - d);
+        if (dir === "right") el.scrollLeft = Math.min(el.scrollWidth - el.clientWidth, el.scrollLeft + d);
+        if (dir === "up") el.scrollTop = Math.max(0, el.scrollTop - d);
+        if (dir === "down") el.scrollTop = Math.min(el.scrollHeight - el.clientHeight, el.scrollTop + d);
+        scrollId.current = requestAnimationFrame(loop);
+      };
+      last.current = performance.now();
+      loop();
+    },
+    [ref, pxPerSecond]
+  );
+  const stop = useCallback(() => void (cancelAnimationFrame(scrollId.current ?? 0), scrollId.current = null), []);
+  const createAssist = useCallback(
+    (dir) => {
+      const el = document.createElement("div");
+      el.className = assistClassName;
+      el.dataset.scrollDirection = dir;
+      el.style.display = "none";
+      for (const evt of ["pointerenter", "dragenter"]) el.addEventListener(evt, () => scroll(dir));
+      for (const evt of ["pointerleave", "pointerup", "pointercancel", "dragleave", "dragend"]) el.addEventListener(evt, stop);
+      return el;
+    },
+    [assistClassName, scroll, stop]
+  );
+  useEffect(() => {
+    if (!enabled) return;
+    const el = ref.current;
+    if (!el || !el.parentElement) return;
+    const parent = el.parentElement;
+    const dirs = [...horizontal ? ["left", "right"] : [], ...vertical ? ["up", "down"] : []];
+    for (const dir of dirs) {
+      const div = createAssist(dir);
+      assists.current[dir] = div;
+      (dir === "left" || dir === "up" ? parent.insertBefore : parent.appendChild).call(parent, div, el);
+    }
+    const observer = new ResizeObserver(update), mObserver = new MutationObserver(update);
+    update(), el.addEventListener("scroll", update);
+    observer.observe(el), mObserver.observe(el, { childList: true, subtree: true, characterData: true });
+    const allAssists = assists.current;
+    return () => {
+      stop(), el.removeEventListener("scroll", update);
+      observer.disconnect(), mObserver.disconnect();
+      for (const a of Object.values(allAssists)) a?.remove();
+    };
+  }, [ref, enabled, assistClassName, vertical, horizontal, createAssist, update, stop]);
+  return { update };
+}
+
+// src/hooks/react/useOutsideClick.ts
+import { useEffect as useEffect2 } from "react";
+import { NIL as NIL2 } from "sia-reactor";
+function useOutsideClick(ref, config = NIL2) {
+  useEffect2(() => ref.current ? initOutsideClick(ref.current, config) : void 0, [ref, config.enabled, config.onOutsideClick, config.clickOnEscape, config.clickOnClick, config.clickOnFocusOut, config.allowInputs, config.root, config.scoped, config.capture]);
+}
+
+// src/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 !== null ? isRtl : 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 getAbleIndex = useCallback2(
+    (targetIndex, e = { key: "ArrowRight", ctrlKey: false }) => {
+      if (shouldSnub()) return;
+      const all = itemsRef.current;
+      if (!all.length) return null;
+      let index = targetIndex;
+      let attempts = 0;
+      while (attempts < all.length) {
+        if (!isItemDisabled(all[index])) return index;
+        index = getTargetIndex({ key: e.key, currIndex: index, gridX, gridY, vGridY, length: all.length, loop, ctrlKey: e.ctrlKey, rtl });
+        attempts++;
+      }
+      return null;
+    },
+    [shouldSnub, isItemDisabled, gridX, gridY, vGridY, loop, rtl]
+  );
+  const goToIndex = useCallback2(
+    (targetIndex, e = { key: "ArrowRight" }) => {
+      if (shouldSnub()) return;
+      const all = itemsRef.current, index = getAbleIndex(targetIndex, e);
+      if (index === null) return;
+      setActiveIndex(index), onSelect(all[index], e);
+      if (virtual) {
+        all[index]?.scrollIntoView(scrollIntoView);
+        containerRef.current?.setAttribute("aria-activedescendant", all[index].id || "");
+      } else all[index]?.focus(focusOptions);
+    },
+    [shouldSnub, virtual, onSelect, scrollIntoView, focusOptions, getAbleIndex, containerRef]
+  );
+  const updateDOM = useCallback2(() => {
+    if (shouldSnub() || !virtual && !roving) return;
+    const all = itemsRef.current;
+    if (!all.length) return;
+    const tabbableIndex = defaultTabbableIndex !== null && !isItemDisabled(all[defaultTabbableIndex]) ? defaultTabbableIndex : getAbleIndex(0);
+    for (let i = 0, len = all.length; i < len; i++) {
+      const el = all[i], isActive = i === activeIndex;
+      if (roving) el.setAttribute("tabindex", i === activeIndex || activeIndex === -1 && i === tabbableIndex ? baseTabIndex : "-1");
+      else if (virtual && activeIndex > 0) el.setAttribute("tabindex", i > activeIndex ? baseTabIndex : "-1");
+      else el.setAttribute("tabindex", baseTabIndex);
+      if (virtual) el.setAttribute("aria-selected", String(isActive)), el.classList.toggle(activeClass, isActive);
+    }
+  }, [shouldSnub, activeIndex, virtual, activeClass, roving, defaultTabbableIndex, getAbleIndex, isItemDisabled, baseTabIndex]);
+  const typeAhead = useCallback2(
+    (key) => {
+      if (shouldSnub() || !typeahead) return;
+      const all = itemsRef.current;
+      buffer.current += key.toLowerCase();
+      if (timeout.current) clearTimeout(timeout.current);
+      timeout.current = setTimeout(() => buffer.current = "", resetMs);
+      const start = activeIndex >= 0 ? activeIndex + 1 : 0;
+      for (let i = 0; i < all.length; i++) {
+        const idx = (start + i) % all.length, label = (all[idx].getAttribute("data-label") || all[idx].innerText || "").trim().toLowerCase();
+        if (label.startsWith(buffer.current)) return goToIndex(idx);
+      }
+    },
+    [shouldSnub, typeahead, resetMs, goToIndex, activeIndex]
+  );
+  const simulateKey = useCallback2(
+    (e) => {
+      if (shouldSnub() || getActiveElement()?.matches("option")) return;
+      const all = itemsRef.current, { key } = e;
+      if (!all.length) return;
+      if (virtual && (key === " " || key === "Enter")) return all[activeIndex]?.click();
+      if (e.target?.matches(DEFAULT_CONFIG.inputSelector) && !virtual) return;
+      if (typeahead && key.length === 1 && /^[a-z0-9]$/i.test(key)) return typeAhead(key);
+      if (!NAV_KEYS.includes(key)) return;
+      if (!(e.currentTarget?.matches(DEFAULT_CONFIG.inputSelector) && gridX <= 1 && H_NAV_KEYS.includes(key))) e.preventDefault?.(), e.stopPropagation?.();
+      const currIndex = virtual ? activeIndex : all.indexOf(getActiveElement()), targetIndex = getTargetIndex({ currIndex, gridX, gridY, vGridY, length: all.length, loop, rtl, key, ctrlKey: e.ctrlKey });
+      goToIndex(targetIndex, e);
+    },
+    [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]);
+  useEffect3(() => void getItems(), [getItems, enabled]);
+  useEffect3(() => void (!enabled && setActiveIndex(-1)), [enabled]);
+  useEffect3(() => updateDOM(), [activeIndex, updateDOM]);
+  useEffect3(() => {
+    if (shouldSnub()) return;
+    const container = containerRef.current, handleKeyDown = simulateKey, interactiveEls = !virtual ? [container] : [container.querySelector(inputSelector)];
+    for (const el of interactiveEls) el?.addEventListener("keydown", handleKeyDown);
+    return () => {
+      for (const el of interactiveEls) el?.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [shouldSnub, containerRef, virtual, inputSelector, simulateKey]);
+  useEffect3(() => {
+    if (shouldSnub()) return;
+    const container = containerRef.current;
+    const handleFocusOut = (e) => {
+      if (!container.contains(e.relatedTarget)) return setActiveIndex(-1), onFocusOut(e);
+      const among = itemsRef.current.includes(e.relatedTarget);
+      if (!among && (defaultTabbableIndex ?? -1) >= 0) return setActiveIndex(-1);
+      if (virtual) setActiveIndex(-1);
+    };
+    container.addEventListener("focusout", handleFocusOut);
+    return () => container.removeEventListener("focusout", handleFocusOut);
+  }, [shouldSnub, containerRef, onFocusOut, defaultTabbableIndex, virtual]);
+  useEffect3(() => {
+    if (!enabled || !focusOnHover) return;
+    const all = itemsRef.current;
+    const handleHover = (e) => {
+      if (!focusOnHover) return;
+      const el = e.currentTarget;
+      const i = itemsRef.current?.indexOf(el);
+      if (i !== -1) goToIndex(i);
+    };
+    for (const el of all) el.addEventListener("mouseenter", handleHover);
+    return () => {
+      for (const el of all) el.removeEventListener("mouseenter", handleHover);
+    };
+  }, [enabled, focusOnHover, goToIndex]);
+  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);
+    });
+    observer.observe(containerRef.current, { childList: true, subtree: true });
+    return () => observer.disconnect();
+  }, [shouldSnub, containerRef]);
+  useEffect3(() => {
+    if (shouldSnub()) return;
+    const all = itemsRef.current;
+    const setGrid = (g) => {
+      if (g.x) setGridX(g.x);
+      if (g.y) setGridY(g.y);
+      if (g.vY) setVGridY(g.vY);
+    };
+    setGrid(grid);
+    if (grid.x && grid.y && grid.vY) return;
+    const calcGrid = () => setGrid(getGrid(all, !grid.x, !grid.y, !grid.vY));
+    calcGrid();
+    const resizeObserver = new ResizeObserver(() => calcGrid());
+    resizeObserver.observe(getCommonAncestor(all[0], all[1]) ?? containerRef.current);
+    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 };
+}
+
+// src/hooks/react/useFocusTrap.ts
+import { useEffect as useEffect4 } 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]);
+}
+
+// src/hooks/react/useRipple.ts
+import { useCallback as useCallback3 } from "react";
+import { NIL as NIL4 } from "sia-reactor";
+function useRipple() {
+  return useCallback3((e, config = NIL4) => rippleHandler(e.nativeEvent, config), []);
+}
+export {
+  useArrowNavigation,
+  useFocusTrap,
+  useHighlight,
+  useOutsideClick,
+  useRipple,
+  useScrollAssist
+};