@ai-matrx/design-system 0.86.330 → 0.86.331

package/dist/data-table/index.js

@@ -5,7 +5,7 @@ import {
 import {
   DEFAULT_TABLE_PAGE_SIZES,
   GenericTablePagination
-} from "../chunk-WSRAFZ4T.js";
+} from "../chunk-FD6V6JBN.js";
 import {
   useScrollPagination
 } from "../chunk-VOFK23MG.js";
@@ -145,7 +145,7 @@ import {
   ConfirmDialog,
   EmptyState,
   Tile
-} from "../chunk-HQMMOSTX.js";
+} from "../chunk-PPB52S7F.js";
 import "../chunk-K4XCB576.js";
 import {
   ErrorBox
@@ -171,7 +171,7 @@ import {
   MacLookLayer,
   useMacLookAttributes,
   withMacLookDefaults
-} from "../chunk-LZWULPW5.js";
+} from "../chunk-TBDMTCRW.js";
 import "../chunk-JSXNITMG.js";
 import "../chunk-TH6DDCWF.js";
 import "../chunk-IMQ3RX35.js";
@@ -215,7 +215,7 @@ import {
   searchValueVariants,
   stringifyCellValue,
   tokenFromColumnName
-} from "../chunk-Z24A3H3K.js";
+} from "../chunk-MVGMI6UZ.js";
 import {
   TIME_RANGE_PRESETS,
   TIME_RANGE_PRESET_VALUES,
@@ -238,7 +238,7 @@ import {
 } from "../chunk-4PCLJAW2.js";
 import {
   PropertyRow
-} from "../chunk-LUOO4DWY.js";
+} from "../chunk-CJCUD62M.js";
 import "../chunk-KPZX2M2C.js";
 import "../chunk-WFBPCMPF.js";
 import {
@@ -256,7 +256,7 @@ import {
   RecordId,
   shortUuid,
   useTableNotice
-} from "../chunk-RUKQPOMT.js";
+} from "../chunk-W3QSRJ3O.js";
 import {
   Tooltip,
   TooltipContent,
@@ -271,7 +271,7 @@ import {
   SegmentedControl,
   Select as Select2,
   Tabs
-} from "../chunk-6P7E4SI5.js";
+} from "../chunk-5IKQ6RU4.js";
 import "../chunk-BKCJUFD3.js";
 import "../chunk-BD77DHUO.js";
 import "../chunk-MOZRIHJF.js";

package/dist/data-table/pagination.cjs

@@ -1108,10 +1108,15 @@ function Select({
   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] = React9.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",
       {
@@ -1125,22 +1130,42 @@ function Select({
         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)(React9.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)(React9.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)) })
+    ] })
   ] });
 }
 var Chip = React9.forwardRef(