gridsmith-ui 0.29.1 → 0.30.1

package/dist/{chunk-FUKSLQ77.js → chunk-SLRTSBCJ.js}

@@ -1,16 +1,16 @@
 "use client";
-import { ControlSizeContext, triggerType, Button, useShellPreferences, PREFERENCE_HOUSE_DEFAULTS } from './chunk-RJEUQ7RL.js';
+import { useShellPreferences, PREFERENCE_HOUSE_DEFAULTS } from './chunk-TYNDXMBV.js';
 import { useInputModality } from './chunk-7RKC5C7G.js';
 import { useReportedChange, useOptionalFormContext, FormChangeCtx } from './chunk-72SDAX54.js';
-import { RowsCtx } from './chunk-QM4SJKWV.js';
+import { ControlSizeContext, triggerType, RowsCtx, Button } from './chunk-ULCACQSA.js';
 import { useRevealFocus } from './chunk-HTXP5BMM.js';
-import { usePopupFocus, focusAfterRemoval, usePressMarks, focusInitial } from './chunk-ZI3OQDET.js';
-import { useTextOverflow, AutoTooltip } from './chunk-37WOC7F7.js';
+import { useFocusLeave, usePopupFocus, focusAfterRemoval, usePressMarks, focusInitial, focusAfterSelfRemoval } from './chunk-R5QXMNW7.js';
+import { useTextOverflow } from './chunk-IELIF4PJ.js';
+import { AutoTooltip } from './chunk-UDJOIVKQ.js';
+import { Icon, warnOnce } from './chunk-L6HWACK7.js';
 import { Slot } from './chunk-7Q46JXSK.js';
-import { Icon, warnOnce } from './chunk-MKFWHWBK.js';
-import { usePosition } from './chunk-HP7WUZPK.js';
-import { useLatest } from './chunk-WH2FUFAC.js';
-import { cn, ERROR_HAS_FOCUS_RING, FIELD_HAS_FOCUS_RING, ERROR_FOCUS_RING, FIELD_FOCUS_RING, FOCUS_RING, ERROR_ACTIVE_RING, ACTIVE_RING, ERROR_FOCUS_WITHIN_RING, FIELD_FOCUS_WITHIN_RING, GLASS_DROPDOWN } from './chunk-JTU7OBYJ.js';
+import { useLatest, usePosition } from './chunk-WIUGPZOH.js';
+import { cn, ERROR_HAS_FOCUS_RING, FIELD_HAS_FOCUS_RING, ERROR_FOCUS_RING, FIELD_FOCUS_RING, FOCUS_RING, ERROR_ACTIVE_RING, ACTIVE_RING, ERROR_FOCUS_WITHIN_RING, FIELD_FOCUS_WITHIN_RING, GLASS_DROPDOWN } from './chunk-YL5KD5RC.js';
 import { createContext, useContext, useRef, useCallback, useEffect, useId, useState, Children, isValidElement, useMemo, cloneElement, useLayoutEffect } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { createPortal } from 'react-dom';
@@ -281,6 +281,7 @@ function useFieldControl(own, options = {}) {
   const ids = [own["aria-describedby"], field?.describedBy, noteId].filter(Boolean).join(" ").split(/\s+/).filter(Boolean);
   return {
     id,
+    label: own["aria-label"],
     labelId: own["aria-labelledby"] ?? field?.labelId,
     describedBy: [...new Set(ids)].join(" ") || void 0,
     invalid,
@@ -303,40 +304,26 @@ function Field({ label, children, hint, error, required, labelAction, hideLabel
   const child = typeof children === "function" ? null : Children.only(children);
   const childProps = child && isValidElement(child) ? child.props : null;
   const latest = useLatest({ validate, childProps, id, mode, left, showing: !!checkError, form });
-  const check = useCallback(() => {
+  const check = () => {
     const { validate: fn, childProps: props, id: controlId } = latest.current;
     if (!fn) return void 0;
     const value = props && "value" in props ? props.value : props && "checked" in props ? props.checked : document.getElementById(controlId)?.value;
     const message = fn(value);
     return typeof message === "string" && message.length > 0 ? message : void 0;
-  }, [latest]);
-  const show = useCallback((message) => {
+  };
+  const show = (message) => {
     const { form: f, id: controlId } = latest.current;
     if (f) f.setError(controlId, message);
     else setLocalError(message);
-  }, [latest]);
+  };
   const register = form?.register;
   const checks = !!validate;
-  useEffect(() => register && checks ? register(id, check) : void 0, [register, checks, id, check]);
-  const leaving = useRef(null);
-  useEffect(() => () => {
-    if (leaving.current) clearTimeout(leaving.current);
-  }, []);
-  const onFocusCapture = () => {
-    if (leaving.current) {
-      clearTimeout(leaving.current);
-      leaving.current = null;
-    }
-  };
-  const onBlurCapture = () => {
-    if (!validate) return;
-    if (leaving.current) clearTimeout(leaving.current);
-    leaving.current = setTimeout(() => {
-      leaving.current = null;
-      setLeft(true);
-      if (latest.current.mode !== "onSubmit" || latest.current.showing) show(check());
-    }, 0);
-  };
+  const checkNow = useLatest(check);
+  useEffect(() => register && checks ? register(id, () => checkNow.current()) : void 0, [register, checks, id, checkNow]);
+  const leave = useFocusLeave(() => {
+    setLeft(true);
+    if (latest.current.mode !== "onSubmit" || latest.current.showing) show(check());
+  });
   const recheck = () => {
     if (!validate) return;
     setTimeout(() => {
@@ -379,7 +366,7 @@ function Field({ label, children, hint, error, required, labelAction, hideLabel
       "div",
       {
         className: cn("flex flex-col gap-ds-1.5 max-w-[var(--ds-form-max,none)]", className),
-        ...validate ? { onFocusCapture, onBlurCapture, onInputCapture: recheck } : {},
+        ...validate ? { ...leave, onInputCapture: recheck } : {},
         children: [
           hideLabel && !labelAction ? labelNode : /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-ds-2", children: [
             labelNode,
@@ -424,6 +411,7 @@ function Dropdown({
   const triggerId = control.id ?? generatedId;
   const labelSpanId = `${triggerId}-label`;
   const labelledBy = control.labelId ? `${control.labelId} ${triggerId}` : label && !ariaLabel ? `${labelSpanId} ${triggerId}` : void 0;
+  const listLabelledBy = control.labelId ?? (label && !ariaLabel ? labelSpanId : void 0);
   const invalid = control.invalid;
   const size = sizeProp ?? contextSize ?? "md";
   const [open, setOpen] = useState(false);
@@ -571,6 +559,8 @@ function Dropdown({
     groups.get(g).push(opt);
   }
   const hasGroups = Array.from(groups.keys()).some((k) => k !== "");
+  const drawn = hasGroups ? Array.from(groups.values()).flat() : filtered;
+  const stopId = (drawn.find((o) => selectedValues.includes(o.id)) ?? drawn[0])?.id;
   const handleSelect = (id) => {
     if (multiple) {
       const arr = selectedValues.includes(id) ? selectedValues.filter((v) => v !== id) : [...selectedValues, id];
@@ -667,12 +657,13 @@ function Dropdown({
                 className: cn("w-full bg-transparent text-[var(--ds-text-primary)] placeholder:text-[var(--ds-text-muted)] outline-none", size === "sm" ? "text-xs" : "text-sm")
               }
             ) }),
-            /* @__PURE__ */ jsx("div", { ref: setListbox, role: "listbox", className: "overflow-y-auto scroll-p-[4px]", style: { padding: "max(var(--ds-space-1), 4px)", maxHeight: "var(--ds-dropdown-max-height)" }, children: filtered.length === 0 ? /* @__PURE__ */ jsx("p", { className: cn("text-[var(--ds-text-muted)] text-center py-ds-4", size === "sm" ? "text-xs" : "text-sm"), children: "No options found" }) : hasGroups ? Array.from(groups.entries()).map(([group, opts]) => /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("div", { ref: setListbox, role: "listbox", "aria-labelledby": listLabelledBy, "aria-label": listLabelledBy ? void 0 : ariaLabel, "aria-multiselectable": multiple || void 0, className: "overflow-y-auto scroll-p-[4px]", style: { padding: "max(var(--ds-space-1), 4px)", maxHeight: "var(--ds-dropdown-max-height)" }, children: filtered.length === 0 ? /* @__PURE__ */ jsx("p", { className: cn("text-[var(--ds-text-muted)] text-center py-ds-4", size === "sm" ? "text-xs" : "text-sm"), children: "No options found" }) : hasGroups ? Array.from(groups.entries()).map(([group, opts]) => /* @__PURE__ */ jsxs("div", { children: [
               group && /* @__PURE__ */ jsx("p", { className: "text-2xs font-medium uppercase tracking-wider text-[var(--ds-text-muted)] px-ds-2 pt-ds-2 pb-ds-1", children: group }),
               opts.map((opt) => /* @__PURE__ */ jsx(
                 OptionButton,
                 {
                   opt,
+                  tabStop: opt.id === stopId,
                   isSelected: selectedValues.includes(opt.id),
                   multiple,
                   onSelect: handleSelect,
@@ -684,6 +675,7 @@ function Dropdown({
               OptionButton,
               {
                 opt,
+                tabStop: opt.id === stopId,
                 isSelected: selectedValues.includes(opt.id),
                 multiple,
                 onSelect: handleSelect,
@@ -704,7 +696,7 @@ function Dropdown({
           className: "inline-flex items-center gap-ds-1 text-xs rounded-[var(--ds-radius-sm)] bg-[var(--ds-bg-muted)] text-[var(--ds-text-secondary)] px-ds-1.5 py-ds-0.5",
           children: [
             opt.label,
-            /* @__PURE__ */ jsx(
+            /* @__PURE__ */ jsx(AutoTooltip, { content: `Remove ${opt.label}`, children: /* @__PURE__ */ jsx(
               "button",
               {
                 type: "button",
@@ -717,7 +709,7 @@ function Dropdown({
                 "aria-label": `Remove ${opt.label}`,
                 children: /* @__PURE__ */ jsx(Icon, { name: "close", size: 10 })
               }
-            )
+            ) })
           ]
         },
         v
@@ -727,6 +719,7 @@ function Dropdown({
 }
 function OptionButton({
   opt,
+  tabStop,
   isSelected,
   multiple,
   onSelect,
@@ -739,7 +732,7 @@ function OptionButton({
       role: "option",
       "data-option-id": opt.id,
       "aria-selected": isSelected,
-      tabIndex: -1,
+      tabIndex: tabStop ? 0 : -1,
       onClick: () => onSelect(opt.id),
       className: cn(
         "w-full text-left cursor-pointer rounded-[var(--ds-radius-sm)]",
@@ -785,7 +778,8 @@ function NumberInput({
   className,
   error = false,
   allowDecimals,
-  id
+  id,
+  "aria-label": ariaLabel
 }) {
   const onChange = useReportedChange(onChangeProp, value);
   useInputModality();
@@ -872,12 +866,23 @@ function NumberInput({
         e.preventDefault();
         decrement();
       }
+      const plain = !e.shiftKey && !e.ctrlKey && !e.metaKey && !e.altKey;
+      if (e.key === "Home" && plain && Number.isFinite(min)) {
+        e.preventDefault();
+        commitValue(min);
+      }
+      if (e.key === "End" && plain && Number.isFinite(max)) {
+        e.preventDefault();
+        commitValue(max);
+      }
     },
-    [increment, decrement]
+    [increment, decrement, commitValue, min, max]
   );
   const s = sizes[size];
   const atMin = value <= min;
   const atMax = value >= max;
+  const shown = focused ? draft : String(value);
+  const holdsNumber = Number.isFinite(parseFloat(shown)) && Number.isFinite(value);
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -934,9 +939,14 @@ function NumberInput({
               ref: inputRef,
               id,
               type: "text",
+              role: "spinbutton",
+              "aria-label": ariaLabel,
+              "aria-valuenow": holdsNumber ? value : void 0,
+              "aria-valuemin": Number.isFinite(min) ? min : void 0,
+              "aria-valuemax": Number.isFinite(max) ? max : void 0,
               inputMode: decimals ? "decimal" : "numeric",
               "aria-invalid": error || void 0,
-              value: focused ? draft : String(value),
+              value: shown,
               onChange: handleInput,
               onFocus: handleFocus,
               onBlur: handleBlur,
@@ -1094,11 +1104,13 @@ function contentTop(el) {
 }
 function LoadMore({ hasMore, onLoadMore, loadMoreLabel, currentPage, scroll, className }) {
   const marker = useRef(null);
+  const button = useRef(null);
   const load = useLatest(onLoadMore);
   const loadedAt = useRef(null);
+  const [held, setHeld] = useState(false);
   useEffect(() => {
     const el = marker.current;
-    if (!scroll || !hasMore || !el || typeof IntersectionObserver === "undefined") return;
+    if (!scroll || !hasMore || !el || held || typeof IntersectionObserver === "undefined") return;
     const observer = new IntersectionObserver((entries) => {
       if (!entries.some((e) => e.isIntersecting)) return;
       const at = contentTop(el);
@@ -1115,13 +1127,35 @@ function LoadMore({ hasMore, onLoadMore, loadMoreLabel, currentPage, scroll, cla
       observer.disconnect();
       window.removeEventListener("scroll", rearm, { capture: true });
     };
-  }, [scroll, hasMore, currentPage, load]);
+  }, [scroll, hasMore, currentPage, load, held]);
+  useEffect(() => {
+    const b = button.current;
+    if (b && document.activeElement === b) b.scrollIntoView?.({ block: "nearest" });
+  }, [currentPage]);
   if (!hasMore) return null;
   return /* @__PURE__ */ jsxs("div", { "data-ds-pager": "", "data-pagination-mode": scroll ? "infinite-scroll" : "load-more", className: cn("flex flex-col items-center", className), children: [
     scroll && /* @__PURE__ */ jsx("div", { ref: marker, "data-load-more-trigger": "", "aria-hidden": "true", className: "h-px w-full" }),
-    /* @__PURE__ */ jsx(Button, { type: "button", variant: "secondary", onClick: onLoadMore, children: loadMoreLabel ?? "Load more" })
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        ref: button,
+        type: "button",
+        variant: "secondary",
+        onClick: onLoadMore,
+        onFocus: (e) => setHeld(scroll && byKeyboard(e.currentTarget)),
+        onBlur: () => setHeld(false),
+        children: loadMoreLabel ?? "Load more"
+      }
+    )
   ] });
 }
+function byKeyboard(el) {
+  try {
+    return el.matches(":focus-visible");
+  } catch {
+    return true;
+  }
+}
 function PageNumbers({ currentPage, totalPages, onPageChange, pageSize: pageSizeProp, pageSizeOptions, onPageSizeChange, className }) {
   const pages = buildPageRange(currentPage, totalPages);
   const preferences = useShellPreferences();
@@ -1144,11 +1178,14 @@ function PageNumbers({ currentPage, totalPages, onPageChange, pageSize: pageSize
       ) })
     ] }),
     totalPages > 1 && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-ds-1", children: [
-      /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx(AutoTooltip, { content: "Previous page", children: /* @__PURE__ */ jsx(
         "button",
         {
           type: "button",
-          onClick: () => onPageChange(currentPage - 1),
+          onClick: (e) => {
+            focusAfterSelfRemoval(e.currentTarget);
+            onPageChange(currentPage - 1);
+          },
           disabled: currentPage <= 1,
           "aria-label": "Previous page",
           className: cn(
@@ -1163,7 +1200,7 @@ function PageNumbers({ currentPage, totalPages, onPageChange, pageSize: pageSize
           ),
           children: /* @__PURE__ */ jsx(Icon, { name: "chevron-right", size: 16, className: "rotate-180" })
         }
-      ),
+      ) }),
       pages.map(
         (p, i) => p === "..." ? /* @__PURE__ */ jsx(EllipsisJumper, { totalPages, onPageChange }, `ellipsis-${i}`) : /* @__PURE__ */ jsx(
           "button",
@@ -1184,11 +1221,14 @@ function PageNumbers({ currentPage, totalPages, onPageChange, pageSize: pageSize
           p
         )
       ),
-      /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx(AutoTooltip, { content: "Next page", children: /* @__PURE__ */ jsx(
         "button",
         {
           type: "button",
-          onClick: () => onPageChange(currentPage + 1),
+          onClick: (e) => {
+            focusAfterSelfRemoval(e.currentTarget);
+            onPageChange(currentPage + 1);
+          },
           disabled: currentPage >= totalPages,
           "aria-label": "Next page",
           className: cn(
@@ -1203,7 +1243,7 @@ function PageNumbers({ currentPage, totalPages, onPageChange, pageSize: pageSize
           ),
           children: /* @__PURE__ */ jsx(Icon, { name: "chevron-right", size: 16 })
         }
-      )
+      ) })
     ] })
   ] });
 }
@@ -1370,5 +1410,5 @@ function useWholeListCheck(component, length, pager) {
 }
 
 export { AddAnotherRowCtx, CHECK_FILL, Dropdown, Field, FilterRowContext, InlineFieldError, Input, Label, NumberInput, OutsideField, Pagination, Popover, SWITCH_KNOB_MOTION, SWITCH_KNOB_OFF, SWITCH_KNOB_ON, SWITCH_TRACK_OFF, SWITCH_TRACK_ON, Textarea, Toggle, pagerPart, useField, useFieldControl, usePagination, useWholeListCheck };
-//# sourceMappingURL=chunk-FUKSLQ77.js.map
-//# sourceMappingURL=chunk-FUKSLQ77.js.map
+//# sourceMappingURL=chunk-SLRTSBCJ.js.map
+//# sourceMappingURL=chunk-SLRTSBCJ.js.map