@ai-matrx/design-system 0.86.330 → 0.86.331

package/dist/data-table/data-row-window.js

@@ -1,7 +1,7 @@
 "use client";
 import {
   DataRowWindow
-} from "../chunk-LZWULPW5.js";
+} from "../chunk-TBDMTCRW.js";
 import "../chunk-JSXNITMG.js";
 import "../chunk-TH6DDCWF.js";
 import "../chunk-IMQ3RX35.js";
@@ -10,22 +10,22 @@ import "../chunk-DO6G4EKJ.js";
 import "../chunk-SNHCBHBE.js";
 import "../chunk-NDTDBBMM.js";
 import "../chunk-LEPD6TV7.js";
-import "../chunk-Z24A3H3K.js";
+import "../chunk-MVGMI6UZ.js";
 import "../chunk-UEQK6PFD.js";
 import "../chunk-PTYKILZE.js";
 import "../chunk-O4KANICE.js";
 import "../chunk-RPUC5MNH.js";
 import "../chunk-XTNAKJSH.js";
 import "../chunk-4PCLJAW2.js";
-import "../chunk-LUOO4DWY.js";
+import "../chunk-CJCUD62M.js";
 import "../chunk-KPZX2M2C.js";
 import "../chunk-WFBPCMPF.js";
 import "../chunk-7ZCD4AZS.js";
 import "../chunk-OPF265PU.js";
 import "../chunk-QFP4BUKZ.js";
-import "../chunk-RUKQPOMT.js";
+import "../chunk-W3QSRJ3O.js";
 import "../chunk-PIQJULQB.js";
-import "../chunk-6P7E4SI5.js";
+import "../chunk-5IKQ6RU4.js";
 import "../chunk-BKCJUFD3.js";
 import "../chunk-BD77DHUO.js";
 import "../chunk-MOZRIHJF.js";

package/dist/data-table/index.cjs

@@ -1693,10 +1693,15 @@ function Select2({
   className,
   style,
   "aria-label": ariaLabel,
-  variant = "field"
+  variant = "field",
+  searchAt
 }) {
   const current = options.find((o) => o.value === value);
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(DropdownMenu, { children: [
+  const [query, setQuery] = React10.useState("");
+  const searchable = searchAt !== void 0 && options.length >= searchAt;
+  const q = searchable ? query.trim().toLowerCase() : "";
+  const shown = q ? options.filter((o) => [o.label, o.hint, o.group].some((t) => t?.toLowerCase().includes(q))) : options;
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(DropdownMenu, { onOpenChange: (open) => !open && setQuery(""), children: [
     /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(DropdownMenuTrigger, { asChild: true, disabled, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
       "button",
       {
@@ -1710,22 +1715,42 @@ function Select2({
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "matrx-control-select-value", children: [
             icon,
-            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { children: current?.label ?? value })
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { children: current?.label ?? value }),
+            current?.hint ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text-muted-foreground", children: current.hint }) : null
           ] }),
           /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SelectChevron, {})
         ]
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(DropdownMenuContent, { align, className: "max-h-80 w-max min-w-[max(10rem,var(--radix-dropdown-menu-trigger-width))] max-w-[min(24rem,var(--radix-dropdown-menu-content-available-width))] overflow-y-auto", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(DropdownMenuRadioGroup, { value, onValueChange: (v) => onValueChange(v), children: options.map((o, i) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(React10.Fragment, { children: [
-      o.group && o.group !== options[i - 1]?.group ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
-        i > 0 ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(DropdownMenuSeparator, {}) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(DropdownMenuLabel, { children: o.group })
-      ] }) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(DropdownMenuRadioItem, { value: o.value, disabled: o.disabled === true, className: "text-[0.8125rem]", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "flex-1 truncate", children: o.label }),
-        o.meta ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "ml-3 text-[0.6875rem] text-muted-foreground", children: o.meta }) : null
-      ] })
-    ] }, o.value)) }) })
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(DropdownMenuContent, { align, className: "max-h-80 w-max min-w-[max(10rem,var(--radix-dropdown-menu-trigger-width))] max-w-[min(24rem,var(--radix-dropdown-menu-content-available-width))] overflow-y-auto", children: [
+      searchable ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "sticky top-0 z-10 bg-popover p-1", "data-select-search": "", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        SearchField,
+        {
+          className: "w-full",
+          value: query,
+          autoFocus: true,
+          "aria-label": `Search ${ariaLabel}`,
+          onChange: (e) => setQuery(e.target.value),
+          onKeyDown: (e) => {
+            if (e.key !== "ArrowDown" && e.key !== "ArrowUp" && e.key !== "Escape" && e.key !== "Tab") e.stopPropagation();
+          }
+        }
+      ) }) : null,
+      searchable && shown.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "px-2 py-1.5 text-[0.8125rem] text-muted-foreground", role: "status", children: "No match" }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(DropdownMenuRadioGroup, { value, onValueChange: (v) => onValueChange(v), children: shown.map((o, i) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(React10.Fragment, { children: [
+        o.group && o.group !== shown[i - 1]?.group ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+          i > 0 ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(DropdownMenuSeparator, {}) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(DropdownMenuLabel, { children: o.group })
+        ] }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(DropdownMenuRadioItem, { value: o.value, disabled: o.disabled === true, className: "text-[0.8125rem]", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "flex-1 truncate", children: [
+            o.label,
+            o.hint ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "ml-1.5 text-muted-foreground", children: o.hint }) : null
+          ] }),
+          o.meta ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "ml-3 text-[0.6875rem] text-muted-foreground", children: o.meta }) : null
+        ] })
+      ] }, o.value)) })
+    ] })
   ] });
 }
 function SegmentItems({