gridsmith-ui 0.29.1 → 0.30.1

package/dist/{chunk-ZI3OQDET.js → chunk-R5QXMNW7.js}

@@ -1,10 +1,11 @@
 "use client";
-import { useLatest } from './chunk-WH2FUFAC.js';
+import { useLatest } from './chunk-WIUGPZOH.js';
 import { useRef, useInsertionEffect, useEffect, useCallback, useState, useMemo, useLayoutEffect } from 'react';
 import { flushSync } from 'react-dom';
 
 var FOCUSABLE = 'a[href], button:not(:disabled), input:not(:disabled), select:not(:disabled), textarea:not(:disabled), [tabindex]:not([tabindex="-1"]), [contenteditable]:not([contenteditable="false"])';
 var FIELD = "input, select, textarea, [contenteditable='true']";
+var CONTROL_ANCESTOR = 'a[href], button, summary, label, [role="button"], [role="link"], [role="option"], [role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"], [role="tab"], [role="treeitem"], [role="row"], [role="gridcell"], [role="checkbox"], [role="radio"], [role="switch"]';
 var SAFE_BUTTON = 'button:not([data-variant="destructive"])';
 var OVERLAY_CLOSE_ATTR = "data-overlay-close";
 function isRendered(el) {
@@ -54,10 +55,34 @@ function focusInitial(root, opts = {}) {
 function useFocusBeforeOpen(open) {
   const before = useRef(null);
   useInsertionEffect(() => {
-    if (open) before.current = document.activeElement;
+    trackFocus();
+    if (!open) return;
+    const active = document.activeElement;
+    before.current = !active || active === document.body ? justLost() ?? active : active;
   }, [open]);
   return before;
 }
+var lastFocused = null;
+var lastFocusedAt = 0;
+var lastActedAt = 0;
+var tracking = false;
+function trackFocus() {
+  if (tracking || typeof document === "undefined") return;
+  tracking = true;
+  document.addEventListener("focusin", (e) => {
+    lastFocused = e.target instanceof Element ? e.target : null;
+    lastFocusedAt = performance.now();
+  }, true);
+  const acted = () => {
+    lastActedAt = performance.now();
+  };
+  for (const type of ["keydown", "pointerdown", "click"]) document.addEventListener(type, acted, true);
+}
+function justLost() {
+  const recent = lastActedAt >= lastFocusedAt && performance.now() - lastActedAt < 1e3;
+  return lastFocused && !lastFocused.isConnected && recent ? lastFocused : null;
+}
+trackFocus();
 function pathAbove(to, from) {
   const up = to.replace(/\/+$/, "");
   return from.startsWith(`${up}/`) && from.replace(/\/+$/, "") !== up;
@@ -73,6 +98,59 @@ function deletedRow(before, now) {
   for (let j = k; j < (refilled ? last : now.length); j++) if (now[j] !== before[j + 1]) return -1;
   return k;
 }
+function focusForTheMoment(el) {
+  const own = el.getAttribute("tabindex");
+  if (own === null) el.setAttribute("tabindex", "-1");
+  el.focus();
+  if (document.activeElement !== el) {
+    if (own === null) el.removeAttribute("tabindex");
+    return false;
+  }
+  let ring = false;
+  try {
+    ring = el.matches(":focus-visible");
+  } catch {
+  }
+  const { outline, outlineOffset } = el.style;
+  if (ring) {
+    el.style.outline = "2px solid var(--ds-focus)";
+    el.style.outlineOffset = "2px";
+  }
+  el.addEventListener("blur", () => {
+    if (own === null) el.removeAttribute("tabindex");
+    if (ring) Object.assign(el.style, { outline, outlineOffset });
+  }, { once: true });
+  return true;
+}
+var HEADING = 'h1, h2, h3, h4, h5, h6, [role="heading"]';
+var LAST_RESORT_MS = 200;
+function placesOf(el) {
+  const places = [];
+  for (let c = el, box = el.parentElement; box && box !== document.body && box.parentElement && box.parentElement !== document.body; c = box, box = box.parentElement) {
+    places.push({ box, prev: c.previousElementSibling, next: c.nextElementSibling });
+  }
+  return places;
+}
+function landLastResort(places, closing) {
+  const at = places.findIndex((p) => p.box.isConnected);
+  if (at < 0) return false;
+  const { box, prev, next } = places[at];
+  const kids = Array.from(box.children);
+  const from = prev?.parentElement === box ? kids.indexOf(prev) + 1 : 0;
+  const to = next?.parentElement === box ? kids.indexOf(next) : kids.length;
+  const areas = [kids.slice(from, Math.max(from, to)), ...places.slice(at).map((p) => [p.box])];
+  const counts = (el) => !closing?.contains(el);
+  for (const area of areas) {
+    const stop = area.flatMap((a) => [...isTabStop(a) ? [a] : [], ...tabStops(a)]).find(counts);
+    if (stop) {
+      stop.focus();
+      if (document.activeElement === stop) return true;
+    }
+    const heading = area.flatMap((a) => [...a.matches(HEADING) ? [a] : [], ...a.querySelectorAll(HEADING)]).find((h) => h instanceof HTMLElement && isRendered(h) && counts(h));
+    if (heading && focusForTheMoment(heading)) return true;
+  }
+  return false;
+}
 function rememberFocus(el, { ignoreRoute = false } = {}) {
   const { href, pathname } = location;
   const row = el.closest(ROW);
@@ -85,6 +163,7 @@ function rememberFocus(el, { ignoreRoute = false } = {}) {
   const texts = rows.map((r) => r.textContent ?? "");
   const keyOf = (r) => r?.getAttribute("data-row-key") ?? null;
   const key = keyOf(row);
+  const places = placesOf(el);
   const pageChanged = () => {
     if (ignoreRoute) return false;
     if (location.pathname !== pathname) return !pathAbove(location.pathname, pathname);
@@ -117,16 +196,26 @@ function rememberFocus(el, { ignoreRoute = false } = {}) {
     return k >= 0 && k <= at ? list.children[Math.max(0, at - 1)] ?? void 0 : void 0;
   };
   const neighbour = () => inRow(byKey(keyOf(before)) ?? before) || inRow(byKey(keyOf(after)) ?? after) || !!list?.isConnected && land(tabStops(list)[0]);
+  const lastResort = () => {
+    setTimeout(() => {
+      const active = document.activeElement;
+      if (active && active !== document.body && active.isConnected || pageChanged()) return;
+      landLastResort(places);
+    }, LAST_RESORT_MS);
+    return false;
+  };
   let unwatch = null;
   const watch = () => {
     unwatch?.();
     if (!list || typeof MutationObserver === "undefined") return;
-    const observer = new MutationObserver(() => {
+    const observer = new MutationObserver((changes) => {
       if (el.isConnected) return;
       const active = document.activeElement;
       const dropped = !active || active === document.body || !active.isConnected;
       stop();
-      if (dropped && !pageChanged()) neighbour();
+      if (!dropped || pageChanged()) return;
+      const fromList = changes.some((c) => c.target === list || c.target === list.parentNode);
+      if (!(fromList && neighbour())) lastResort();
     });
     const onFocusIn = (e) => {
       if (e.target !== el) stop();
@@ -140,6 +229,7 @@ function rememberFocus(el, { ignoreRoute = false } = {}) {
     }
     observer.observe(list, { childList: true });
     if (list.parentNode) observer.observe(list.parentNode, { childList: true });
+    for (const { box } of places) observer.observe(box, { childList: true });
     document.addEventListener("focusin", onFocusIn, true);
     unwatch = stop;
   };
@@ -153,7 +243,89 @@ function rememberFocus(el, { ignoreRoute = false } = {}) {
         return true;
       }
       if (row && !row.isConnected && neighbour()) return true;
-      return land(fallback);
+      return land(fallback) || lastResort();
+    }
+  };
+}
+function useFocusKeptInList(listRef) {
+  useEffect(() => {
+    if (typeof MutationObserver === "undefined") return;
+    let held = null;
+    let observer = null;
+    const forget = () => {
+      held = null;
+      observer?.disconnect();
+      observer = null;
+    };
+    const onFocusIn = (e) => {
+      const list = listRef.current;
+      const t = e.target;
+      if (!list || !(t instanceof HTMLElement) || !list.contains(t)) {
+        if (held) forget();
+        return;
+      }
+      held = rememberFocus(t);
+      if (observer) return;
+      observer = new MutationObserver(() => {
+        const h = held;
+        if (!h || h.el.isConnected) return;
+        const active = document.activeElement;
+        forget();
+        if (!active || active === document.body || !active.isConnected) h.restore();
+      });
+      observer.observe(list, { childList: true, subtree: true });
+    };
+    const onFocusOut = (e) => {
+      if (!held || e.target !== held.el) return;
+      queueMicrotask(() => {
+        if (held?.el.isConnected && !listRef.current?.contains(document.activeElement)) forget();
+      });
+    };
+    document.addEventListener("focusin", onFocusIn, true);
+    document.addEventListener("focusout", onFocusOut, true);
+    return () => {
+      document.removeEventListener("focusin", onFocusIn, true);
+      document.removeEventListener("focusout", onFocusOut, true);
+      const h = held;
+      forget();
+      const active = document.activeElement;
+      if (h && !h.el.isConnected && (!active || active === document.body || !active.isConnected)) h.restore();
+    };
+  }, [listRef]);
+}
+var openers = /* @__PURE__ */ new WeakMap();
+function rememberOpener(active, root) {
+  let own = active instanceof HTMLElement && active !== document.body && active.isConnected ? rememberFocus(active) : null;
+  const controller = !own && root?.id ? document.querySelector(`[aria-controls~="${CSS.escape(root.id)}"]`) : null;
+  if (controller) own = rememberFocus(controller);
+  let around = null;
+  for (let n = active; n && !around; n = n.parentElement) {
+    const opener = openers.get(n);
+    if (opener) around = { root: n, opener };
+  }
+  const back = own ?? around?.opener;
+  if (!back) {
+    if (!root) return null;
+    const places = placesOf(root);
+    const { pathname } = location;
+    return {
+      el: null,
+      restore() {
+        setTimeout(() => {
+          const now = document.activeElement;
+          if (now && now !== document.body && now.isConnected && !root.contains(now) || location.pathname !== pathname) return;
+          landLastResort(places, root);
+        }, LAST_RESORT_MS);
+        return false;
+      }
+    };
+  }
+  if (root) openers.set(root, back);
+  return {
+    el: own?.el ?? null,
+    restore(fallback) {
+      if (own?.restore(fallback)) return true;
+      return !!around && !around.root.isConnected && around.opener.restore();
     }
   };
 }
@@ -162,8 +334,7 @@ function useReturnFocus(open, root) {
   const before = useFocusBeforeOpen(open);
   useEffect(() => {
     if (open) {
-      const active2 = before.current;
-      remembered.current = active2 instanceof HTMLElement && active2 !== document.body && active2.isConnected ? rememberFocus(active2) : null;
+      remembered.current = rememberOpener(before.current, root?.current);
       return;
     }
     const r = remembered.current;
@@ -190,6 +361,64 @@ function rovingTabStop(items, isChecked, isDisabled = () => false) {
 function focusAfterRemoval(items, index, fallback) {
   (items[index - 1] ?? items[index] ?? fallback)?.focus();
 }
+function mayStop(root) {
+  const disabled = (el) => (el instanceof HTMLButtonElement || el instanceof HTMLInputElement || el instanceof HTMLSelectElement || el instanceof HTMLTextAreaElement) && el.disabled;
+  return Array.from(root.querySelectorAll(`${FOCUSABLE}, button:disabled, input:disabled, select:disabled, textarea:disabled`)).filter((el) => disabled(el) ? !(el instanceof HTMLInputElement && el.type === "hidden") : isTabStop(el)).sort((a, b) => a.compareDocumentPosition(b) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1);
+}
+function focusAfterSelfRemoval(control, { item, group, to } = {}) {
+  const goes = item ?? control;
+  const within = group === void 0 ? goes.parentElement : group;
+  const stops = within ? mayStop(within).filter((el) => !goes.contains(el)) : [];
+  const before = stops.filter((el) => goes.compareDocumentPosition(el) & Node.DOCUMENT_POSITION_PRECEDING).reverse();
+  const after = stops.filter((el) => goes.compareDocumentPosition(el) & Node.DOCUMENT_POSITION_FOLLOWING);
+  const stopsOf = (el) => [...isTabStop(el) ? [el] : [], ...tabStops(el)];
+  const index = stopsOf(goes).indexOf(control);
+  const neighbour = (step) => {
+    for (let el = goes[step]; el; el = el[step]) {
+      const own = stopsOf(el);
+      if (own.length) return own[Math.max(0, Math.min(index, own.length - 1))];
+    }
+    return null;
+  };
+  const sameBefore = neighbour("previousElementSibling");
+  const sameAfter = neighbour("nextElementSibling");
+  const gone = () => !control.isConnected || control instanceof HTMLButtonElement && control.disabled;
+  const lost = () => {
+    const active = document.activeElement;
+    return !active || active === document.body || !active.isConnected || active === control;
+  };
+  const land = (el) => {
+    if (!el || !el.isConnected || !isTabStop(el)) return false;
+    el.focus();
+    return document.activeElement === el;
+  };
+  const landOnGroup = () => {
+    if (!within?.isConnected) return false;
+    if (!within.hasAttribute("tabindex") && within.tabIndex < 0) within.setAttribute("tabindex", "-1");
+    within.focus();
+    return document.activeElement === within;
+  };
+  const place = () => land(typeof to === "function" ? to() : to) || land(sameBefore) || before.some(land) || land(sameAfter) || after.some(land) || landOnGroup();
+  if (typeof MutationObserver === "undefined") return () => {
+  };
+  const observer = new MutationObserver(() => {
+    if (!gone()) return;
+    stop();
+    if (lost()) place();
+  });
+  const onFocusIn = (e) => {
+    if (e.target !== control) stop();
+  };
+  const timer = setTimeout(() => stop(), 1e4);
+  function stop() {
+    observer.disconnect();
+    clearTimeout(timer);
+    document.removeEventListener("focusin", onFocusIn, true);
+  }
+  observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ["disabled"] });
+  document.addEventListener("focusin", onFocusIn, true);
+  return stop;
+}
 var layers = [];
 function useOverlayLayer(open) {
   const [id] = useState(() => /* @__PURE__ */ Symbol("overlay-layer"));
@@ -243,6 +472,28 @@ function usePressMarks() {
     return { props: { onPointerDownCapture: mark, onMouseDownCapture: mark }, marked: (e) => marks.has(e) };
   }, [marks]);
 }
+function useFocusLeave(onLeave) {
+  const onLeaveRef = useLatest(onLeave);
+  const leaving = useRef(null);
+  useEffect(() => () => {
+    if (leaving.current) clearTimeout(leaving.current);
+  }, []);
+  return useMemo(() => ({
+    onFocusCapture: () => {
+      if (leaving.current) {
+        clearTimeout(leaving.current);
+        leaving.current = null;
+      }
+    },
+    onBlurCapture: () => {
+      if (leaving.current) clearTimeout(leaving.current);
+      leaving.current = setTimeout(() => {
+        leaving.current = null;
+        onLeaveRef.current();
+      }, 0);
+    }
+  }), [onLeaveRef]);
+}
 var openPopups = /* @__PURE__ */ new Map();
 function usePopupFocus(open, { trigger, panel, close, tabExits, onTabOut, marked }) {
   const isTop = useOverlayLayer(open);
@@ -261,6 +512,7 @@ function usePopupFocus(open, { trigger, panel, close, tabExits, onTabOut, marked
     const inPanel = active instanceof Node && !!panel.current?.contains(active);
     const opener = active instanceof HTMLElement && active !== document.body && !inPanel ? active : trigger.current;
     remembered.current = opener ? rememberFocus(opener) : null;
+    if (panel.current && remembered.current) openers.set(panel.current, remembered.current);
     lastPress.current = null;
   }, [open, trigger, panel, before]);
   useEffect(() => {
@@ -335,7 +587,19 @@ function usePopupFocus(open, { trigger, panel, close, tabExits, onTabOut, marked
     const r = remembered.current;
     remembered.current = null;
     const press = lastPress.current;
-    if (!r || press && !press.inside && !markedRef.current?.(press.e)) return;
+    if (!r) return;
+    if (press && !press.inside && !markedRef.current?.(press.e)) {
+      const modal = r.el.closest('[aria-modal="true"]');
+      const target = press.e.target;
+      if (modal && target instanceof Node && modal.contains(target)) {
+        setTimeout(() => {
+          const active2 = document.activeElement;
+          if (active2 && active2 !== document.body && active2.isConnected) return;
+          if (modal.isConnected) r.restore(trigger.current);
+        }, 0);
+      }
+      return;
+    }
     const active = document.activeElement;
     if (active !== r.el && active && active !== document.body && active.isConnected) return;
     r.restore(trigger.current);
@@ -428,12 +692,13 @@ function useGridKeyboard({ container, active, setActive, keyOf, move, onActivate
   return { onKeyDown, tabIndexOf, focusActive, focus };
 }
 var ALWAYS_TOP = () => true;
-function useFocusTrap(root, active, isTop = ALWAYS_TOP) {
+function useFocusTrap(root, active, isTop = ALWAYS_TOP, also) {
   useEffect(() => {
     if (!active) return;
     const onKeyDown = (e) => {
       if (e.key !== "Tab" || e.defaultPrevented || !root.current || !isTop()) return;
-      const focusable = tabStops(root.current);
+      const scope = [root.current, also?.current].filter((el) => !!el);
+      const focusable = scope.flatMap((el) => tabStops(el)).sort((a, b) => a.compareDocumentPosition(b) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1);
       if (focusable.length === 0) {
         e.preventDefault();
         return;
@@ -441,7 +706,7 @@ function useFocusTrap(root, active, isTop = ALWAYS_TOP) {
       const first = focusable[0];
       const last = focusable[focusable.length - 1];
       const current = document.activeElement;
-      const inside = current instanceof Node && root.current.contains(current);
+      const inside = current instanceof Node && scope.some((el) => el.contains(current));
       if (e.shiftKey) {
         if (!inside || current === first) {
           e.preventDefault();
@@ -454,7 +719,24 @@ function useFocusTrap(root, active, isTop = ALWAYS_TOP) {
     };
     document.addEventListener("keydown", onKeyDown);
     return () => document.removeEventListener("keydown", onKeyDown);
-  }, [root, active, isTop]);
+  }, [root, active, isTop, also]);
+}
+function inertOutside(keep, within) {
+  const made = [];
+  const visit = (el) => {
+    for (const child of Array.from(el.children)) {
+      if (keep.includes(child)) continue;
+      if (keep.some((k) => child.contains(k))) visit(child);
+      else if (!child.hasAttribute("inert")) {
+        child.setAttribute("inert", "");
+        made.push(child);
+      }
+    }
+  };
+  visit(within);
+  return () => {
+    for (const el of made) el.removeAttribute("inert");
+  };
 }
 function useNonModalDialog(root, active, onClose, isTop = ALWAYS_TOP) {
   const onCloseRef = useLatest(onClose);
@@ -478,6 +760,6 @@ function useNonModalDialog(root, active, onClose, isTop = ALWAYS_TOP) {
   }, [active, root, isTop, onCloseRef]);
 }
 
-export { FIELD, FOCUSABLE, OVERLAY_CLOSE_ATTR, ZOOM_KEYS, focusAfterRemoval, focusInitial, isTabStop, rememberFocus, rovingTabStop, tabStops, useCloseOnFocusOut, useFocusBeforeOpen, useFocusTrap, useGridKeyboard, useNonModalDialog, useOverlayLayer, usePopupFocus, usePressMarks, useReturnFocus };
-//# sourceMappingURL=chunk-ZI3OQDET.js.map
-//# sourceMappingURL=chunk-ZI3OQDET.js.map
+export { CONTROL_ANCESTOR, FIELD, FOCUSABLE, OVERLAY_CLOSE_ATTR, ZOOM_KEYS, focusAfterRemoval, focusAfterSelfRemoval, focusInitial, inertOutside, isTabStop, rememberFocus, rememberOpener, rovingTabStop, tabStops, useCloseOnFocusOut, useFocusBeforeOpen, useFocusKeptInList, useFocusLeave, useFocusTrap, useGridKeyboard, useNonModalDialog, useOverlayLayer, usePopupFocus, usePressMarks, useReturnFocus };
+//# sourceMappingURL=chunk-R5QXMNW7.js.map
+//# sourceMappingURL=chunk-R5QXMNW7.js.map