@ansh-ui/react 0.2.0

package/dist/chunk-HO2YSF5O.js

@@ -0,0 +1,187 @@
+import { mergeRefs, mergeProps } from './chunk-H34OXXJU.js';
+import { forwardRef, isValidElement, cloneElement, Children, useEffect, useRef, useState } from 'react';
+import { prefersReducedMotion } from '@ansh-ui/core';
+import { jsx, Fragment } from 'react/jsx-runtime';
+
+var Slot = forwardRef(function Slot2({ children, ...slotProps }, forwardedRef) {
+  if (!isValidElement(children)) {
+    return null;
+  }
+  const child = children;
+  const childRef = child.props.ref ?? child.ref;
+  return cloneElement(child, {
+    ...mergeProps(slotProps, child.props),
+    ref: mergeRefs(forwardedRef, childRef)
+  });
+});
+function slotted(asChild, fallback) {
+  return asChild ? Slot : fallback;
+}
+function countElements(children) {
+  return Children.toArray(children).filter(isValidElement).length;
+}
+var FOCUSABLE_SELECTOR = [
+  "a[href]",
+  "button:not([disabled])",
+  'input:not([disabled]):not([type="hidden"])',
+  "select:not([disabled])",
+  "textarea:not([disabled])",
+  "audio[controls]",
+  "video[controls]",
+  '[contenteditable]:not([contenteditable="false"])',
+  '[tabindex]:not([tabindex="-1"])'
+].join(",");
+function isVisible(element) {
+  if (element.hasAttribute("inert")) return false;
+  if (element.offsetParent !== null) return true;
+  const rect = element.getBoundingClientRect();
+  return rect.width > 0 || rect.height > 0;
+}
+function getTabbable(container) {
+  if (!container) return [];
+  const nodes = Array.from(container.querySelectorAll(FOCUSABLE_SELECTOR));
+  return nodes.filter((node) => {
+    if (node.getAttribute("aria-hidden") === "true") return false;
+    if (node.closest("[inert]")) return false;
+    return isVisible(node);
+  });
+}
+function useFocusTrap(ref, active) {
+  useEffect(() => {
+    if (!active) return;
+    const container = ref.current;
+    if (!container) return;
+    const onKeyDown = (event) => {
+      if (event.key !== "Tab") return;
+      const tabbable = getTabbable(container);
+      if (tabbable.length === 0) {
+        event.preventDefault();
+        return;
+      }
+      const first = tabbable[0];
+      const last = tabbable[tabbable.length - 1];
+      const activeElement = document.activeElement;
+      if (event.shiftKey && (activeElement === first || activeElement === container)) {
+        event.preventDefault();
+        last.focus();
+      } else if (!event.shiftKey && activeElement === last) {
+        event.preventDefault();
+        first.focus();
+      }
+    };
+    container.addEventListener("keydown", onKeyDown);
+    return () => container.removeEventListener("keydown", onKeyDown);
+  }, [ref, active]);
+}
+function useFocusRestore(active) {
+  const previousRef = useRef(null);
+  useEffect(() => {
+    if (!active) return;
+    previousRef.current = document.activeElement;
+    return () => {
+      const previous = previousRef.current;
+      if (previous && previous.isConnected) previous.focus?.({ preventScroll: true });
+    };
+  }, [active]);
+}
+function useAutoFocus(ref, active, initialFocus) {
+  useEffect(() => {
+    if (!active) return;
+    const container = ref.current;
+    if (!container) return;
+    const frame = requestAnimationFrame(() => {
+      const explicit = initialFocus?.current;
+      if (explicit?.isConnected) {
+        explicit.focus({ preventScroll: true });
+        return;
+      }
+      const target = getTabbable(container)[0] ?? container;
+      target.focus({ preventScroll: true });
+    });
+    return () => cancelAnimationFrame(frame);
+  }, [ref, active, initialFocus]);
+}
+function useRovingFocus(options) {
+  const { itemsRef, active, onActiveChange, orientation = "horizontal", loop = true } = options;
+  return (event) => {
+    const items = (itemsRef.current ?? []).filter((item) => item !== null);
+    if (items.length === 0) return;
+    const horizontal = orientation === "horizontal" || orientation === "both";
+    const vertical = orientation === "vertical" || orientation === "both";
+    let next = active;
+    switch (event.key) {
+      case "ArrowRight":
+        if (!horizontal) return;
+        next = active + 1;
+        break;
+      case "ArrowLeft":
+        if (!horizontal) return;
+        next = active - 1;
+        break;
+      case "ArrowDown":
+        if (!vertical) return;
+        next = active + 1;
+        break;
+      case "ArrowUp":
+        if (!vertical) return;
+        next = active - 1;
+        break;
+      case "Home":
+        next = 0;
+        break;
+      case "End":
+        next = items.length - 1;
+        break;
+      default:
+        return;
+    }
+    event.preventDefault();
+    if (next < 0) next = loop ? items.length - 1 : 0;
+    if (next >= items.length) next = loop ? 0 : items.length - 1;
+    onActiveChange(next);
+    items[next]?.focus();
+  };
+}
+function usePresence(open, ref) {
+  const [mounted, setMounted] = useState(open);
+  const [state, setState] = useState(open ? "open" : "closed");
+  const timeoutRef = useRef(void 0);
+  useEffect(() => {
+    if (open) {
+      clearTimeout(timeoutRef.current);
+      setMounted(true);
+      const frame = requestAnimationFrame(() => setState("open"));
+      return () => cancelAnimationFrame(frame);
+    }
+    if (!mounted) return;
+    setState("closed");
+    const node = ref.current;
+    if (!node || prefersReducedMotion()) {
+      setMounted(false);
+      return;
+    }
+    const onEnd = (event) => {
+      if (event.target !== node) return;
+      setMounted(false);
+    };
+    node.addEventListener("animationend", onEnd);
+    node.addEventListener("transitionend", onEnd);
+    timeoutRef.current = setTimeout(() => setMounted(false), 400);
+    return () => {
+      node.removeEventListener("animationend", onEnd);
+      node.removeEventListener("transitionend", onEnd);
+      clearTimeout(timeoutRef.current);
+    };
+  }, [open, mounted, ref]);
+  return { mounted, state };
+}
+function Presence({ open, children }) {
+  const ref = useRef(null);
+  const { mounted, state } = usePresence(open, ref);
+  if (!mounted) return null;
+  return /* @__PURE__ */ jsx(Fragment, { children: children({ ref, state }) });
+}
+
+export { Presence, Slot, countElements, getTabbable, slotted, useAutoFocus, useFocusRestore, useFocusTrap, usePresence, useRovingFocus };
+//# sourceMappingURL=chunk-HO2YSF5O.js.map
+//# sourceMappingURL=chunk-HO2YSF5O.js.map

package/dist/chunk-HO2YSF5O.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/primitives/slot.tsx","../src/primitives/focus.ts","../src/primitives/presence.tsx"],"names":["Slot","useRef","useEffect"],"mappings":"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","file":"chunk-HO2YSF5O.js","sourcesContent":["import {\n  Children,\n  type ReactElement,\n  type ReactNode,\n  cloneElement,\n  forwardRef,\n  isValidElement,\n} from 'react'\nimport { mergeProps, mergeRefs } from './compose'\n\nexport interface SlotProps {\n  children?: ReactNode\n  [key: string]: unknown\n}\n\n/**\n * Render into the child element instead of rendering a wrapper.\n *\n * This is what powers `asChild`. Without it, a `<Tooltip.Trigger>` wrapping a `<Button>` emits a\n * `<span>` around the button — which breaks flex layouts, adds a node that inherits nothing, and\n * puts the trigger's ARIA attributes on the wrong element for assistive technology.\n *\n * ```tsx\n * <Tooltip.Trigger asChild>\n *   <Button>Save</Button>\n * </Tooltip.Trigger>\n * ```\n *\n * The button *is* the trigger: it carries `aria-describedby` and the handlers, and no extra DOM\n * node exists.\n */\nexport const Slot = forwardRef<HTMLElement, SlotProps>(function Slot(\n  { children, ...slotProps },\n  forwardedRef,\n) {\n  if (!isValidElement(children)) {\n    // A `Slot` with no element child renders nothing rather than throwing. Throwing here would\n    // turn a conditional child (`{loading ? null : <Button/>}`) into a crash.\n    return null\n  }\n\n  const child = children as ReactElement<Record<string, unknown>> & { ref?: React.Ref<HTMLElement> }\n\n  // React 19 exposes `ref` as a normal prop; React 18 keeps it on the element. Reading both keeps\n  // this working across the supported peer range without a version check.\n  const childRef = (child.props as { ref?: React.Ref<HTMLElement> }).ref ?? child.ref\n\n  return cloneElement(child, {\n    ...mergeProps(slotProps, child.props),\n    ref: mergeRefs(forwardedRef, childRef),\n  } as Record<string, unknown>)\n})\n\n/**\n * Pick between a host element and its child based on `asChild`.\n *\n * Every component in this library that accepts `asChild` uses this, so the behaviour is identical\n * across all of them rather than reimplemented with small differences.\n */\nexport function slotted(\n  asChild: boolean | undefined,\n  fallback: React.ElementType,\n): React.ElementType {\n  return asChild ? (Slot as unknown as React.ElementType) : fallback\n}\n\n/** Count element children, ignoring `null`/`false` from conditional rendering. */\nexport function countElements(children: ReactNode): number {\n  return Children.toArray(children).filter(isValidElement).length\n}\n","import { type RefObject, useEffect, useRef } from 'react'\n\n/**\n * Focus management for overlay surfaces.\n *\n * Three separate concerns that are usually conflated:\n *\n *  1. **Finding what can be focused.** Harder than it looks — `disabled`, `hidden`, `inert`,\n *     zero-size elements and negative tabindex all disqualify a node, and CSS-hidden ancestors\n *     disqualify their whole subtree.\n *  2. **Trapping.** Tab must cycle within the surface. Required by WCAG 2.4.3 for modals.\n *  3. **Restoring.** Focus must return to the trigger on close, or a keyboard user is dumped at the\n *     top of the document and has to navigate all the way back.\n */\n\nconst FOCUSABLE_SELECTOR = [\n  'a[href]',\n  'button:not([disabled])',\n  'input:not([disabled]):not([type=\"hidden\"])',\n  'select:not([disabled])',\n  'textarea:not([disabled])',\n  'audio[controls]',\n  'video[controls]',\n  '[contenteditable]:not([contenteditable=\"false\"])',\n  '[tabindex]:not([tabindex=\"-1\"])',\n].join(',')\n\n/** Is this element rendered and interactive right now? */\nfunction isVisible(element: HTMLElement): boolean {\n  // `offsetParent === null` catches `display: none` on the element or any ancestor, cheaply.\n  // `position: fixed` elements legitimately have a null offsetParent, so they are checked against\n  // their box instead.\n  if (element.hasAttribute('inert')) return false\n  if (element.offsetParent !== null) return true\n  const rect = element.getBoundingClientRect()\n  return rect.width > 0 || rect.height > 0\n}\n\n/** Every tabbable descendant, in tab order. */\nexport function getTabbable(container: HTMLElement | null): HTMLElement[] {\n  if (!container) return []\n  const nodes = Array.from(container.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR))\n  return nodes.filter((node) => {\n    if (node.getAttribute('aria-hidden') === 'true') return false\n    if (node.closest('[inert]')) return false\n    return isVisible(node)\n  })\n}\n\n/**\n * Trap Tab within a container while `active`.\n *\n * Implemented on `keydown` at the container rather than with sentinel elements at either end. The\n * sentinel approach adds two focusable nodes to the accessibility tree that screen readers can\n * land on and announce as blank; intercepting the key does not.\n */\nexport function useFocusTrap(ref: RefObject<HTMLElement | null>, active: boolean): void {\n  useEffect(() => {\n    if (!active) return\n    const container = ref.current\n    if (!container) return\n\n    const onKeyDown = (event: KeyboardEvent) => {\n      if (event.key !== 'Tab') return\n\n      const tabbable = getTabbable(container)\n      if (tabbable.length === 0) {\n        // Nothing to move to — keep focus on the surface rather than letting it escape.\n        event.preventDefault()\n        return\n      }\n\n      const first = tabbable[0]!\n      const last = tabbable[tabbable.length - 1]!\n      const activeElement = document.activeElement as HTMLElement | null\n\n      // Focus may sit on the container itself (given `tabIndex={-1}` for the initial focus), in\n      // which case neither branch below matches and the default Tab lands on `first` naturally.\n      if (event.shiftKey && (activeElement === first || activeElement === container)) {\n        event.preventDefault()\n        last.focus()\n      } else if (!event.shiftKey && activeElement === last) {\n        event.preventDefault()\n        first.focus()\n      }\n    }\n\n    container.addEventListener('keydown', onKeyDown)\n    return () => container.removeEventListener('keydown', onKeyDown)\n  }, [ref, active])\n}\n\n/**\n * Restore focus to whatever was focused before `active` became true.\n *\n * The element is captured on activation, not on mount, because a component can be mounted long\n * before it opens.\n */\nexport function useFocusRestore(active: boolean): void {\n  const previousRef = useRef<HTMLElement | null>(null)\n\n  useEffect(() => {\n    if (!active) return\n    previousRef.current = document.activeElement as HTMLElement | null\n\n    return () => {\n      const previous = previousRef.current\n      // Guard against restoring to a node that has since been removed from the document —\n      // focusing a detached element silently moves focus to `<body>`, losing the user's place.\n      if (previous && previous.isConnected) previous.focus?.({ preventScroll: true })\n    }\n  }, [active])\n}\n\n/**\n * Move focus into a surface when it opens.\n *\n * Prefers an explicitly marked element, then the first tabbable one, then the container itself.\n * The container fallback matters for a dialog whose only content is text: focus must land inside\n * it so a screen reader announces the dialog rather than continuing from the page behind.\n */\nexport function useAutoFocus(\n  ref: RefObject<HTMLElement | null>,\n  active: boolean,\n  initialFocus?: RefObject<HTMLElement | null>,\n): void {\n  useEffect(() => {\n    if (!active) return\n    const container = ref.current\n    if (!container) return\n\n    // After paint: the surface may still be animating in, and focusing a node with\n    // `visibility: hidden` is a no-op that silently leaves focus on the body.\n    const frame = requestAnimationFrame(() => {\n      const explicit = initialFocus?.current\n      if (explicit?.isConnected) {\n        explicit.focus({ preventScroll: true })\n        return\n      }\n      const target = getTabbable(container)[0] ?? container\n      target.focus({ preventScroll: true })\n    })\n\n    return () => cancelAnimationFrame(frame)\n  }, [ref, active, initialFocus])\n}\n\n/**\n * Roving tabindex for a composite widget (toolbar, tab list, menu).\n *\n * The ARIA authoring practice: a composite has exactly **one** tab stop, and arrow keys move\n * within it. Ten tabs that are each a tab stop means a keyboard user presses Tab ten times to get\n * past the tab bar — technically operable, practically hostile.\n */\nexport function useRovingFocus(options: {\n  /** Items in DOM order. */\n  itemsRef: RefObject<Array<HTMLElement | null>>\n  /** Index that currently owns the tab stop. */\n  active: number\n  onActiveChange: (index: number) => void\n  orientation?: 'horizontal' | 'vertical' | 'both'\n  loop?: boolean\n}): (event: React.KeyboardEvent) => void {\n  const { itemsRef, active, onActiveChange, orientation = 'horizontal', loop = true } = options\n\n  return (event: React.KeyboardEvent) => {\n    const items = (itemsRef.current ?? []).filter((item): item is HTMLElement => item !== null)\n    if (items.length === 0) return\n\n    const horizontal = orientation === 'horizontal' || orientation === 'both'\n    const vertical = orientation === 'vertical' || orientation === 'both'\n\n    let next = active\n    switch (event.key) {\n      case 'ArrowRight':\n        if (!horizontal) return\n        next = active + 1\n        break\n      case 'ArrowLeft':\n        if (!horizontal) return\n        next = active - 1\n        break\n      case 'ArrowDown':\n        if (!vertical) return\n        next = active + 1\n        break\n      case 'ArrowUp':\n        if (!vertical) return\n        next = active - 1\n        break\n      case 'Home':\n        next = 0\n        break\n      case 'End':\n        next = items.length - 1\n        break\n      default:\n        return\n    }\n\n    event.preventDefault()\n\n    if (next < 0) next = loop ? items.length - 1 : 0\n    if (next >= items.length) next = loop ? 0 : items.length - 1\n\n    onActiveChange(next)\n    items[next]?.focus()\n  }\n}\n","import { type ReactNode, type RefObject, useEffect, useRef, useState } from 'react'\nimport { prefersReducedMotion } from '@ansh-ui/core'\n\n/**\n * Keep an element mounted while it animates out.\n *\n * The problem: `{open && <Dialog />}` cannot animate on close, because React removes the node the\n * instant `open` flips. The fix is to keep rendering it and unmount when the exit animation\n * actually finishes.\n *\n * Finishing is detected from `animationend`/`transitionend` rather than a duration prop. A duration\n * prop has to be kept in sync with the CSS by hand, and it drifts the moment someone retimes the\n * animation in the stylesheet — leaving either a flash (unmount too early) or a surface that lingers\n * invisibly and swallows clicks (too late). The timeout below is only a safety net for the case\n * where no animation is declared at all and no event ever fires.\n */\nexport function usePresence(\n  open: boolean,\n  ref: RefObject<HTMLElement | null>,\n): { mounted: boolean; state: 'open' | 'closed' } {\n  const [mounted, setMounted] = useState(open)\n  const [state, setState] = useState<'open' | 'closed'>(open ? 'open' : 'closed')\n\n  const timeoutRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined)\n\n  useEffect(() => {\n    if (open) {\n      clearTimeout(timeoutRef.current)\n      setMounted(true)\n      // Next frame, so the element mounts in its closed state and *then* transitions. Setting\n      // both in the same commit means the browser never sees the start state and no transition\n      // runs — the classic \"enter animation doesn't play\" bug.\n      const frame = requestAnimationFrame(() => setState('open'))\n      return () => cancelAnimationFrame(frame)\n    }\n\n    if (!mounted) return\n\n    setState('closed')\n\n    const node = ref.current\n    if (!node || prefersReducedMotion()) {\n      setMounted(false)\n      return\n    }\n\n    // Only the element's *own* animations count. A child's animation ending would unmount the\n    // surface while it is still fading.\n    const onEnd = (event: AnimationEvent | TransitionEvent) => {\n      if (event.target !== node) return\n      setMounted(false)\n    }\n\n    node.addEventListener('animationend', onEnd)\n    node.addEventListener('transitionend', onEnd)\n\n    // Safety net: if no animation is declared, neither event ever fires and the surface would\n    // stay mounted forever, invisible and intercepting pointer events.\n    timeoutRef.current = setTimeout(() => setMounted(false), 400)\n\n    return () => {\n      node.removeEventListener('animationend', onEnd)\n      node.removeEventListener('transitionend', onEnd)\n      clearTimeout(timeoutRef.current)\n    }\n  }, [open, mounted, ref])\n\n  return { mounted, state }\n}\n\nexport interface PresenceProps {\n  open: boolean\n  children: (props: { ref: RefObject<HTMLElement | null>; state: 'open' | 'closed' }) => ReactNode\n}\n\n/**\n * Render-prop form of `usePresence`, for callers that would otherwise need to hoist a ref.\n *\n * ```tsx\n * <Presence open={open}>\n *   {({ ref, state }) => <div ref={ref} data-state={state} className=\"fade\" />}\n * </Presence>\n * ```\n */\nexport function Presence({ open, children }: PresenceProps) {\n  const ref = useRef<HTMLElement | null>(null)\n  const { mounted, state } = usePresence(open, ref)\n  if (!mounted) return null\n  return <>{children({ ref, state })}</>\n}\n"]}