twico-ui 1.12.0 → 1.14.0

package/dist/index.d.cts

@@ -1946,8 +1946,12 @@ interface DatatableColumn<T = any> {
   headerName?: string;
   /** Data type. "actions" renders per-row action buttons via getActions. @default "string" */
   type?: "string" | "number" | "actions";
-  /** Column width in px. @default 160 (120 for actions) */
-  width?: number;
+  /** Column width: a px number, or `"auto"` to size to the header's intrinsic width (chrome + label) so a short column fits without truncating or wasting the 160px default. @default 160 (120 for actions) */
+  width?: number | "auto";
+  /** Lower bound (px) for the resolved width, incl. `"auto"` and user resizes. */
+  minWidth?: number;
+  /** Upper bound (px) for the resolved width; `minWidth` wins if they conflict. */
+  maxWidth?: number;
   /** Cell alignment; currently affects the actions column's button justification. @default "right" for number/actions columns, else "left" */
   align?: "left" | "right";
   /** Allow sorting this column. @default true */
@@ -1966,6 +1970,8 @@ interface DatatableColumn<T = any> {
   resizable?: boolean;
   /** Allow drag / menu / keyboard reorder of this column (independent of the table-wide `disableColumnReorder`). @default true */
   reorderable?: boolean;
+  /** Offer the "Wrap text" / "Unwrap text" item in the ⋮ menu. Set `false` for a fixed single-token column (e.g. an ordinal) whose menu should show only Sort + Hide. @default true */
+  wrappable?: boolean;
   /** Summary-footer aggregation: a preset, or a function over the column's values. */
   aggregation?: "sum" | "avg" | "min" | "max" | "count" | ((values: any[], rows: T[]) => React.ReactNode);
   /** Format an aggregation result for the footer (falls back to valueFormatter). */
@@ -1983,6 +1989,11 @@ interface DatatableColumn<T = any> {
   wrapText?: boolean;
   /** Distinct values for the "is any of" multi-value filter (recommended in server mode). */
   valueOptions?: Array<string | { value: string; label: string }>;
+  /** Async loader for the "is any of" filter's options — searchable/lazy server-backed values (for a
+   *  large reference/master list). Called with the type-ahead query (debounced; `""` primes the list)
+   *  and takes precedence over `valueOptions` for the filter picker, which then loads server-side
+   *  (no local filtering) with a loading state. */
+  loadValueOptions?: (query: string) => Promise<Array<string | { value: string; label: string }>>;
   /** Format the raw value to a string/number for display. */
   valueFormatter?: (value: any, row: T) => React.ReactNode;
   /** Fully custom cell renderer (badges, avatars, etc.). */
@@ -2130,6 +2141,8 @@ interface CardGridProps<Row = any> extends Omit<React.HTMLAttributes<HTMLDivElem
   onSortChange?: (sort: CardGridSort | null) => void;
   /** Fields offered by the built-in sort control (renders it when provided). */
   sortOptions?: CardGridSortOption[];
+  /** Min width (px or CSS length) for the built-in sort control's trigger, so long option labels aren't clipped. Defaults to an estimate from the longest label. */
+  sortMinWidth?: string | number;
   /** Extra node rendered in the toolbar row (before the sort control). */
   toolbar?: React.ReactNode;
   /** Shown when there are no rows and not loading. @default "No results." */

package/dist/index.d.ts

@@ -1946,8 +1946,12 @@ interface DatatableColumn<T = any> {
   headerName?: string;
   /** Data type. "actions" renders per-row action buttons via getActions. @default "string" */
   type?: "string" | "number" | "actions";
-  /** Column width in px. @default 160 (120 for actions) */
-  width?: number;
+  /** Column width: a px number, or `"auto"` to size to the header's intrinsic width (chrome + label) so a short column fits without truncating or wasting the 160px default. @default 160 (120 for actions) */
+  width?: number | "auto";
+  /** Lower bound (px) for the resolved width, incl. `"auto"` and user resizes. */
+  minWidth?: number;
+  /** Upper bound (px) for the resolved width; `minWidth` wins if they conflict. */
+  maxWidth?: number;
   /** Cell alignment; currently affects the actions column's button justification. @default "right" for number/actions columns, else "left" */
   align?: "left" | "right";
   /** Allow sorting this column. @default true */
@@ -1966,6 +1970,8 @@ interface DatatableColumn<T = any> {
   resizable?: boolean;
   /** Allow drag / menu / keyboard reorder of this column (independent of the table-wide `disableColumnReorder`). @default true */
   reorderable?: boolean;
+  /** Offer the "Wrap text" / "Unwrap text" item in the ⋮ menu. Set `false` for a fixed single-token column (e.g. an ordinal) whose menu should show only Sort + Hide. @default true */
+  wrappable?: boolean;
   /** Summary-footer aggregation: a preset, or a function over the column's values. */
   aggregation?: "sum" | "avg" | "min" | "max" | "count" | ((values: any[], rows: T[]) => React.ReactNode);
   /** Format an aggregation result for the footer (falls back to valueFormatter). */
@@ -1983,6 +1989,11 @@ interface DatatableColumn<T = any> {
   wrapText?: boolean;
   /** Distinct values for the "is any of" multi-value filter (recommended in server mode). */
   valueOptions?: Array<string | { value: string; label: string }>;
+  /** Async loader for the "is any of" filter's options — searchable/lazy server-backed values (for a
+   *  large reference/master list). Called with the type-ahead query (debounced; `""` primes the list)
+   *  and takes precedence over `valueOptions` for the filter picker, which then loads server-side
+   *  (no local filtering) with a loading state. */
+  loadValueOptions?: (query: string) => Promise<Array<string | { value: string; label: string }>>;
   /** Format the raw value to a string/number for display. */
   valueFormatter?: (value: any, row: T) => React.ReactNode;
   /** Fully custom cell renderer (badges, avatars, etc.). */
@@ -2130,6 +2141,8 @@ interface CardGridProps<Row = any> extends Omit<React.HTMLAttributes<HTMLDivElem
   onSortChange?: (sort: CardGridSort | null) => void;
   /** Fields offered by the built-in sort control (renders it when provided). */
   sortOptions?: CardGridSortOption[];
+  /** Min width (px or CSS length) for the built-in sort control's trigger, so long option labels aren't clipped. Defaults to an estimate from the longest label. */
+  sortMinWidth?: string | number;
   /** Extra node rendered in the toolbar row (before the sort control). */
   toolbar?: React.ReactNode;
   /** Shown when there are no rows and not loading. @default "No results." */

package/dist/index.mjs

@@ -8625,6 +8625,53 @@ function Caret({ pos }) {
   const left = Math.max(12, Math.min(pos.anchorX - pos.left, pos.width - 20));
   return /* @__PURE__ */ jsx("span", { className: "twc-dt__caret", style: { left } });
 }
+function AsyncFilterValue({ col, value, onChange }) {
+  const [opts, setOpts] = React51__default.useState([]);
+  const [loading, setLoading] = React51__default.useState(false);
+  const reqRef = React51__default.useRef(0);
+  const debRef = React51__default.useRef();
+  const load = React51__default.useCallback((query) => {
+    const id = ++reqRef.current;
+    setLoading(true);
+    Promise.resolve(col.loadValueOptions(query)).then(
+      (res) => {
+        if (reqRef.current === id) {
+          setOpts((Array.isArray(res) ? res : []).map((o) => typeof o === "string" ? { value: o, label: o } : o));
+          setLoading(false);
+        }
+      },
+      () => {
+        if (reqRef.current === id) setLoading(false);
+      }
+    );
+  }, [col]);
+  React51__default.useEffect(() => {
+    load("");
+    return () => clearTimeout(debRef.current);
+  }, [load]);
+  const onInput = React51__default.useCallback((q) => {
+    clearTimeout(debRef.current);
+    debRef.current = setTimeout(() => load(q), 250);
+  }, [load]);
+  const selected = Array.isArray(value) ? value : [];
+  const merged = React51__default.useMemo(() => {
+    const seen2 = new Set(opts.map((o) => o.value));
+    return [...selected.filter((v) => !seen2.has(v)).map((v) => ({ value: v, label: String(v) })), ...opts];
+  }, [opts, selected]);
+  return /* @__PURE__ */ jsx(
+    MultiSelect,
+    {
+      portal: true,
+      placeholder: "Any of\u2026",
+      value: selected,
+      options: merged,
+      filter: false,
+      loading,
+      onInputChange: onInput,
+      onChange
+    }
+  );
+}
 function EditCell({ col, value, options, onChange, onCommit, onCommitValue, onCancel, onKeyDown }) {
   const ref = React51__default.useRef(null);
   const isSelect = col.editType === "select" || options && col.editType !== "text";
@@ -9003,7 +9050,19 @@ function Datatable({
     rowGroupingKeyRef.current = rowGroupingKey;
     setGroupBy(rowGrouping || []);
   }, [rowGroupingKey]);
-  const widthOf = (c) => widths[c.field] ?? c.width ?? 160;
+  const AUTO_CHROME = 74;
+  const autoWidth = (c) => {
+    const label = typeof c.headerName === "string" ? c.headerName : String(c.field ?? "");
+    return AUTO_CHROME + Math.ceil(label.length * 8);
+  };
+  const clampWidth = (w, c) => {
+    let x = w;
+    if (typeof c.maxWidth === "number") x = Math.min(x, c.maxWidth);
+    if (typeof c.minWidth === "number") x = Math.max(x, c.minWidth);
+    return Math.max(40, x);
+  };
+  const intrinsicWidth = (c) => c.width === "auto" ? autoWidth(c) : typeof c.width === "number" ? c.width : 160;
+  const widthOf = (c) => clampWidth(widths[c.field] ?? intrinsicWidth(c), c);
   const [colMenu, setColMenu] = React51__default.useState(null);
   const [menuPos, openMenu, closeMenu] = useFloating();
   const [panel, setPanel] = React51__default.useState(null);
@@ -10591,7 +10650,7 @@ function Datatable({
                           e.preventDefault();
                           e.stopPropagation();
                           const delta = e.key === "ArrowRight" ? 10 : -10;
-                          setWidths((m) => ({ ...m, [c.field]: Math.max(72, (m[c.field] ?? c.width ?? 160) + delta) }));
+                          setWidths((m) => ({ ...m, [c.field]: Math.max(72, (m[c.field] ?? intrinsicWidth(c)) + delta) }));
                         },
                         title: "Drag to resize \xB7 double-click to fit content"
                       }
@@ -10834,10 +10893,10 @@ function Datatable({
                 " ",
                 groupBy.includes(c.field) ? "Stop grouping" : "Group by this column"
               ] }) : null,
-              !disableColumnReorder && c.type !== "actions" && !pins.left.includes(c.field) && !pins.right.includes(c.field) ? (() => {
+              !disableColumnReorder && c.reorderable !== false && c.type !== "actions" && !pins.left.includes(c.field) && !pins.right.includes(c.field) && movableMidFields.length > 1 ? (() => {
                 const midIdx = movableMidFields.indexOf(c.field);
-                const atFirst = midIdx <= 0;
-                const atLast = midIdx === -1 || midIdx >= movableMidFields.length - 1;
+                const atFirst = midIdx === 0;
+                const atLast = midIdx === movableMidFields.length - 1;
                 return /* @__PURE__ */ jsxs(Fragment, { children: [
                   /* @__PURE__ */ jsxs("button", { type: "button", role: "menuitem", className: "twc-dt__mi", disabled: atFirst, "aria-disabled": atFirst || void 0, onClick: () => {
                     moveCol(c.field, -1);
@@ -10873,7 +10932,7 @@ function Datatable({
                   pins.right.includes(c.field) ? "Unpin" : "Pin to right"
                 ] })
               ] }) : null,
-              c.type !== "actions" ? /* @__PURE__ */ jsxs("button", { type: "button", role: "menuitem", className: "twc-dt__mi", "data-active": wrapped.has(c.field) || void 0, onClick: () => {
+              c.type !== "actions" && c.wrappable !== false ? /* @__PURE__ */ jsxs("button", { type: "button", role: "menuitem", className: "twc-dt__mi", "data-active": wrapped.has(c.field) || void 0, onClick: () => {
                 toggleWrap(c.field);
                 close();
               }, children: [
@@ -11261,7 +11320,14 @@ function Datatable({
               }))
             }
           ) }),
-          /* @__PURE__ */ jsx("div", { className: "twc-dt__f-val", children: op.noInput ? null : op.multi ? /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx("div", { className: "twc-dt__f-val", children: op.noInput ? null : op.multi ? col.loadValueOptions ? /* @__PURE__ */ jsx(
+            AsyncFilterValue,
+            {
+              col,
+              value: f.value,
+              onChange: (vals) => setFilters((arr) => arr.map((x) => x.id === f.id ? { ...x, value: vals } : x))
+            }
+          ) : /* @__PURE__ */ jsx(
             MultiSelect,
             {
               portal: true,
@@ -11377,7 +11443,7 @@ var CARDGRID_CSS = `
 .twc-cardgrid__toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
 .twc-cardgrid__search { flex: 1 1 200px; min-width: 160px; }
 .twc-cardgrid__spacer { flex: 1 1 auto; }
-.twc-cardgrid__sort { display: inline-flex; align-items: center; gap: var(--space-1); }
+.twc-cardgrid__sort { display: inline-flex; align-items: center; gap: var(--space-1); flex: none; }
 .twc-cardgrid__dir { display: inline-grid; place-items: center; width: 32px; height: 32px; border: var(--border-thin) solid var(--color-border); background: var(--color-surface); color: var(--color-text-muted); cursor: pointer; border-radius: var(--radius-md); transition: background-color var(--duration-fast), color var(--duration-fast); }
 .twc-cardgrid__dir:hover { background: var(--color-surface-sunken); color: var(--color-text); }
 .twc-cardgrid__dir svg { width: 16px; height: 16px; transition: transform var(--duration-fast) var(--ease-standard); }
@@ -11425,6 +11491,7 @@ function CardGrid({
   defaultSort = null,
   onSortChange,
   sortOptions,
+  sortMinWidth,
   // slots / states
   toolbar,
   emptyState = "No results.",
@@ -11496,6 +11563,8 @@ function CardGrid({
   const to = paginated ? Math.min((pageVal + 1) * sizeVal, total) : total;
   const rppOptions = Array.from(new Set([...pageSizeOptions || [], pageSize].filter((n) => n > 0))).sort((a, b) => a - b).map((n) => ({ value: String(n), label: String(n) }));
   const sortSelectOptions = sortOptions ? [{ value: "", label: "Sort by\u2026" }, ...sortOptions.map((o) => ({ value: o.field, label: o.label || o.field }))] : null;
+  const sortAutoWidth = sortSelectOptions ? Math.min(300, Math.max(120, Math.ceil(Math.max(...sortSelectOptions.map((o) => String(o.label).length)) * 7.2) + 46)) : void 0;
+  const sortWidth = sortMinWidth != null ? sortMinWidth : sortAutoWidth;
   const hasToolbar = searchable || sortSelectOptions || toolbar;
   return /* @__PURE__ */ jsxs("div", { className: `twc-cardgrid ${className}`, id: fieldId, ...rest, children: [
     styles,
@@ -11523,6 +11592,7 @@ function CardGrid({
             value: sortVal?.field || "",
             options: sortSelectOptions,
             placeholder: "Sort by\u2026",
+            style: { minWidth: sortWidth },
             "aria-label": "Sort by",
             onChange: (field) => commitSort(field ? { field, dir: sortVal?.dir || "asc" } : null)
           }