@geomak/ui 1.7.4 → 1.7.5

package/dist/index.cjs

@@ -1059,16 +1059,28 @@ function FadingBase({
   );
 }
 function List2({ items, onItemClick, activeKey }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { role: "listbox", children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      role: "option",
-      "aria-selected": activeKey === item.key,
-      className: `hover:bg-ice-dark dark:hover:bg-independence cursor-pointer p-3 border-b border-b-ice-dark dark:border-b-independence transition-all duration-300 ${activeKey === item.key ? "bg-ice-dark dark:bg-independence" : ""}`,
-      onClick: () => onItemClick(item),
-      children: item.label
-    },
-    item.key
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { role: "listbox", children: items.map((item) => (
+    // tabIndex + Enter/Space onKeyDown makes each option
+    // keyboard-activatable. Previously the items were only mouse-
+    // clickable — keyboard-only users couldn't select anything.
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        role: "option",
+        "aria-selected": activeKey === item.key,
+        tabIndex: 0,
+        className: `hover:bg-ice-dark dark:hover:bg-independence cursor-pointer p-3 border-b border-b-ice-dark dark:border-b-independence transition-all duration-300 focus:outline-none focus-visible:ring-2 focus-visible:ring-accent ${activeKey === item.key ? "bg-ice-dark dark:bg-independence" : ""}`,
+        onClick: () => onItemClick(item),
+        onKeyDown: (e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            onItemClick(item);
+          }
+        },
+        children: item.label
+      },
+      item.key
+    )
   )) });
 }
 function ScalableContainer({
@@ -1574,6 +1586,8 @@ function Dropdown({
   const [hoveredItem, setHoveredItem] = React9.useState(null);
   const [searchTerm, setSearchTerm] = React9.useState("");
   const [innerItems, setInnerItems] = React9.useState([]);
+  const errorId = React9.useId();
+  const hasError = errorMessage != null;
   React9.useEffect(() => {
     setInnerItems(items);
   }, [items]);
@@ -1626,10 +1640,18 @@ function Dropdown({
                 role: "combobox",
                 "aria-expanded": open,
                 "aria-haspopup": "listbox",
+                "aria-invalid": hasError || void 0,
+                "aria-describedby": hasError ? errorId : void 0,
                 style,
                 className: `flex items-center justify-between relative h-9 rounded-lg cursor-pointer select-none ${disabled ? "cursor-not-allowed bg-disabled" : "bg-white"}`,
                 tabIndex: disabled ? -1 : 0,
-                onKeyDown: (e) => e.key === "Enter" && !disabled && setOpen(true),
+                onKeyDown: (e) => {
+                  if (disabled) return;
+                  if (e.key === "Enter" || e.key === " " || e.key === "ArrowDown" || e.key === "ArrowUp") {
+                    e.preventDefault();
+                    setOpen(true);
+                  }
+                },
                 children: [
                   /* @__PURE__ */ jsxRuntime.jsx(
                     "div",
@@ -1671,34 +1693,49 @@ function Dropdown({
                       placeholder: "Search..."
                     }
                   ) }),
-                  /* @__PURE__ */ jsxRuntime.jsx("div", { role: "listbox", "aria-multiselectable": isMultiselect, className: "max-h-40 overflow-y-auto", children: innerItems.map((item, idx) => /* @__PURE__ */ jsxRuntime.jsxs(
-                    "div",
-                    {
-                      role: "option",
-                      "aria-selected": isSelected(item.key),
-                      "aria-rowindex": idx,
-                      className: `flex items-center justify-between p-2 hover:bg-prussian-blue hover:text-white transition-all duration-150 text-sm text-prussian-blue rounded-lg cursor-pointer ${selectedItems.includes(item.key) ? "bg-ice-dark" : ""}`,
-                      onClick: () => selectItem(item.key),
-                      onMouseEnter: () => setHoveredItem(item.key),
-                      onMouseLeave: () => setHoveredItem(null),
-                      children: [
-                        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-xs", children: [
-                          item.icon && /* @__PURE__ */ jsxRuntime.jsx("div", { children: item.icon }),
-                          item.label
-                        ] }),
-                        isSelected(item.key) && /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
-                          "path",
-                          {
-                            d: "M4 10l4.5 4.5L16 6",
-                            stroke: hoveredItem === item.key ? "#fff" : chunk255PCZIW_cjs.colors_default.PALETTE["prussian-blue"],
-                            strokeWidth: "2",
-                            strokeLinecap: "round",
-                            strokeLinejoin: "round"
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { role: "listbox", "aria-multiselectable": isMultiselect, className: "max-h-40 overflow-y-auto", children: innerItems.map((item) => (
+                    // aria-rowindex was previously set here but
+                    // it's invalid ARIA on role="option" (it
+                    // belongs on rows of a grid/treegrid). Dropped.
+                    // tabIndex={0} + Enter/Space handler makes the
+                    // option keyboard-activatable; the full
+                    // combobox roving-tabindex pattern is deferred
+                    // until the planned Phase-5 rewrite.
+                    /* @__PURE__ */ jsxRuntime.jsxs(
+                      "div",
+                      {
+                        role: "option",
+                        "aria-selected": isSelected(item.key),
+                        tabIndex: 0,
+                        className: `flex items-center justify-between p-2 hover:bg-prussian-blue hover:text-white transition-all duration-150 text-sm text-prussian-blue rounded-lg cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-accent ${selectedItems.includes(item.key) ? "bg-ice-dark" : ""}`,
+                        onClick: () => selectItem(item.key),
+                        onKeyDown: (e) => {
+                          if (e.key === "Enter" || e.key === " ") {
+                            e.preventDefault();
+                            selectItem(item.key);
                           }
-                        ) })
-                      ]
-                    },
-                    item.key
+                        },
+                        onMouseEnter: () => setHoveredItem(item.key),
+                        onMouseLeave: () => setHoveredItem(null),
+                        children: [
+                          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-xs", children: [
+                            item.icon && /* @__PURE__ */ jsxRuntime.jsx("div", { children: item.icon }),
+                            item.label
+                          ] }),
+                          isSelected(item.key) && /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
+                            "path",
+                            {
+                              d: "M4 10l4.5 4.5L16 6",
+                              stroke: hoveredItem === item.key ? "#fff" : chunk255PCZIW_cjs.colors_default.PALETTE["prussian-blue"],
+                              strokeWidth: "2",
+                              strokeLinecap: "round",
+                              strokeLinejoin: "round"
+                            }
+                          ) })
+                        ]
+                      },
+                      item.key
+                    )
                   )) })
                 ]
               }
@@ -1707,7 +1744,7 @@ function Dropdown({
         ]
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-center text-error dark:text-prussian-blue min-h-0", children: errorMessage })
+    hasError && /* @__PURE__ */ jsxRuntime.jsx("div", { id: errorId, className: "text-center text-error dark:text-prussian-blue min-h-0", children: errorMessage })
   ] });
 }
 var DEFAULT_PICKER = [
@@ -1877,10 +1914,11 @@ function Pagination({
         isMultiselect: false,
         value: displayPerPageKey,
         onChange: ({ target: { value } }) => {
-          const key = typeof value === "string" && /^\d+$/.test(value) ? Number(value) : value;
-          if (!serverSide) setPerPageKey(key);
-          const opt = picker.find((o) => o.key === key);
-          onPerPageChange(opt?.label ?? opt?.value ?? key);
+          if (Array.isArray(value)) return;
+          const numKey = typeof value === "number" ? value : Number(value);
+          if (!serverSide) setPerPageKey(numKey);
+          const opt = picker.find((o) => o.key === numKey);
+          onPerPageChange(opt?.label ?? opt?.value ?? numKey);
         }
       }
     )
@@ -2533,6 +2571,8 @@ function TextInput({
   errorMessage,
   labelColor
 }) {
+  const errorId = React9.useId();
+  const hasError = errorMessage != null;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex flex-col items-center justify-center", children: [
     /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
@@ -2563,7 +2603,9 @@ function TextInput({
               type: "text",
               name,
               id: htmlFor,
-              className: `${errorMessage !== void 0 ? "border border-error" : ""} focus:outline-oxford-blue-700-opaque p-2 h-9 w-60 outline-offset-2 text-prussian-blue mt-1 rounded-lg disabled:bg-disabled disabled:cursor-not-allowed transition-all`,
+              "aria-invalid": hasError || void 0,
+              "aria-describedby": hasError ? errorId : void 0,
+              className: `${hasError ? "border border-error" : ""} focus:outline-oxford-blue-700-opaque p-2 h-9 w-60 outline-offset-2 text-prussian-blue mt-1 rounded-lg disabled:bg-disabled disabled:cursor-not-allowed transition-all`,
               style: inputStyle ?? {},
               placeholder: placeholder ?? ""
             }
@@ -2571,7 +2613,7 @@ function TextInput({
         ]
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-center text-error dark:text-prussian-blue min-h-0", children: errorMessage })
+    hasError && /* @__PURE__ */ jsxRuntime.jsx("div", { id: errorId, className: "text-center text-error dark:text-prussian-blue min-h-0", children: errorMessage })
   ] });
 }
 function NumberInput({
@@ -2687,6 +2729,8 @@ function Password({
 }) {
   const [passwordVisible, setPasswordVisible] = React9.useState(false);
   const color = iconColor ?? chunk255PCZIW_cjs.colors_default.PALETTE["prussian-blue"];
+  const errorId = React9.useId();
+  const hasError = errorMessage != null;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex flex-col items-center justify-center", style: style ?? {}, children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex ${layout === "vertical" ? "flex-col" : "flex-row items-center gap-2"}`, children: [
       label && // Render <label> only when a label is provided. An empty
@@ -2713,7 +2757,9 @@ function Password({
             type: passwordVisible ? "text" : "password",
             name,
             id: htmlFor,
-            className: `${errorMessage !== void 0 ? "border border-error" : ""} focus:outline-oxford-blue-700-opaque p-2 h-9 w-52 outline-offset-2 text-prussian-blue mt-1 rounded-lg disabled:bg-disabled disabled:cursor-not-allowed transition-all`,
+            "aria-invalid": hasError || void 0,
+            "aria-describedby": hasError ? errorId : void 0,
+            className: `${hasError ? "border border-error" : ""} focus:outline-oxford-blue-700-opaque p-2 h-9 w-52 outline-offset-2 text-prussian-blue mt-1 rounded-lg disabled:bg-disabled disabled:cursor-not-allowed transition-all`,
             style: inputStyle ?? {},
             placeholder: placeholder ?? ""
           }
@@ -2743,7 +2789,7 @@ function Password({
         )
       ] })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-center text-error dark:text-prussian-blue min-h-0", children: errorMessage })
+    hasError && /* @__PURE__ */ jsxRuntime.jsx("div", { id: errorId, className: "text-center text-error dark:text-prussian-blue min-h-0", children: errorMessage })
   ] });
 }
 function Checkbox({
@@ -2910,23 +2956,36 @@ function AutoComplete({
               sideOffset: 4,
               onOpenAutoFocus: (e) => e.preventDefault(),
               className: "w-64 bg-ice dark:bg-midnight-green-eagle-900 rounded-lg mt-1 shadow-md z-50 overflow-y-auto max-h-36 animate-in fade-in-0 zoom-in-95",
-              children: foundItems.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full w-full flex flex-col items-center justify-center py-4 text-sm text-prussian-blue dark:text-white", children: emptyText }) : /* @__PURE__ */ jsxRuntime.jsx("div", { role: "listbox", children: foundItems.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(
-                "div",
-                {
-                  role: "option",
-                  className: "text-sm flex items-center gap-2 p-2 transition-all duration-150 hover:bg-ice-dark dark:hover:bg-prussian-blue cursor-pointer text-prussian-blue dark:text-white",
-                  onClick: () => handleSelect(item),
-                  children: [
-                    item.icon,
-                    /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
-                      item.label,
-                      " (",
-                      item.value,
-                      ")"
-                    ] })
-                  ]
-                },
-                item.key
+              children: foundItems.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full w-full flex flex-col items-center justify-center py-4 text-sm text-prussian-blue dark:text-white", children: emptyText }) : /* @__PURE__ */ jsxRuntime.jsx("div", { role: "listbox", children: foundItems.map((item) => (
+                // tabIndex + Enter/Space onKeyDown
+                // makes each option keyboard-activatable.
+                // Full roving-tabindex / arrow-key nav
+                // is deferred to the Phase-5 rewrite.
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  "div",
+                  {
+                    role: "option",
+                    tabIndex: 0,
+                    className: "text-sm flex items-center gap-2 p-2 transition-all duration-150 hover:bg-ice-dark dark:hover:bg-prussian-blue cursor-pointer text-prussian-blue dark:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-accent",
+                    onClick: () => handleSelect(item),
+                    onKeyDown: (e) => {
+                      if (e.key === "Enter" || e.key === " ") {
+                        e.preventDefault();
+                        handleSelect(item);
+                      }
+                    },
+                    children: [
+                      item.icon,
+                      /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+                        item.label,
+                        " (",
+                        item.value,
+                        ")"
+                      ] })
+                    ]
+                  },
+                  item.key
+                )
               )) })
             }
           ) })