twico-ui 1.20.2 → 1.21.1

package/dist/index.d.cts

@@ -1810,6 +1810,10 @@ interface DatatableProps<T = any> extends Omit<React.HTMLAttributes<HTMLDivEleme
   quickFilter?: string;
   /** Fires with the new quick-search string as the user types (and when a host sets it). */
   onQuickFilterChange?: (value: string) => void;
+  /** Custom node rendered in a **leading slot** of the toolbar row, before the built-in Columns/Filters
+   *  cluster (#286) — for host controls like an "Add row" button or bulk actions. Mirrors `CardGrid`'s
+   *  `toolbar` prop, so no internal-class/absolute-position hacks are needed. */
+  toolbarActions?: React.ReactNode;
   /**
    * Actions shown in the toolbar when one or more rows are selected (requires
    * `checkboxSelection`). Each handler receives the selected keys, the resolved

package/dist/index.d.ts

@@ -1810,6 +1810,10 @@ interface DatatableProps<T = any> extends Omit<React.HTMLAttributes<HTMLDivEleme
   quickFilter?: string;
   /** Fires with the new quick-search string as the user types (and when a host sets it). */
   onQuickFilterChange?: (value: string) => void;
+  /** Custom node rendered in a **leading slot** of the toolbar row, before the built-in Columns/Filters
+   *  cluster (#286) — for host controls like an "Add row" button or bulk actions. Mirrors `CardGrid`'s
+   *  `toolbar` prop, so no internal-class/absolute-position hacks are needed. */
+  toolbarActions?: React.ReactNode;
   /**
    * Actions shown in the toolbar when one or more rows are selected (requires
    * `checkboxSelection`). Each handler receives the selected keys, the resolved

package/dist/index.mjs

@@ -5467,7 +5467,7 @@ function ColorPicker({
           role: "dialog",
           "aria-modal": "true",
           "aria-label": "Color picker",
-          style: { position: "fixed", left: coords.left, right: "auto", top: coords.top, bottom: coords.bottom, zIndex: "var(--z-tooltip)" },
+          style: { position: "fixed", left: coords.left, right: "auto", top: coords.top, bottom: coords.bottom, zIndex: "var(--z-floating)" },
           children: [
             /* @__PURE__ */ jsxs(
               "div",
@@ -5945,7 +5945,7 @@ function Combobox({
             role: "listbox",
             ref: popRef,
             "data-placement": coords.flip ? "top" : "bottom",
-            style: { position: "fixed", left: coords.left, top: coords.top, bottom: coords.bottom, width: coords.width, right: "auto", zIndex: "var(--z-tooltip)" },
+            style: { position: "fixed", left: coords.left, top: coords.top, bottom: coords.bottom, width: coords.width, right: "auto", zIndex: "var(--z-floating)" },
             children: popInner
           }
         ),
@@ -6832,7 +6832,7 @@ function Select({
             ref: popRef,
             "data-state": popState,
             "data-placement": coords.flip ? "top" : "bottom",
-            style: { position: "fixed", left: coords.left, top: coords.top, bottom: coords.bottom, width: coords.width, minWidth: coords.minWidth, maxWidth: coords.maxWidth, right: "auto", zIndex: "var(--z-tooltip)" },
+            style: { position: "fixed", left: coords.left, top: coords.top, bottom: coords.bottom, width: coords.width, minWidth: coords.minWidth, maxWidth: coords.maxWidth, right: "auto", zIndex: "var(--z-floating)" },
             children: popInner
           }
         ),
@@ -7599,7 +7599,7 @@ function MultiSelect({
             className: "twc-pop twc-pop--portal",
             ref: popRef,
             "data-placement": coords.flip ? "top" : "bottom",
-            style: { position: "fixed", left: coords.left, top: coords.top, bottom: coords.bottom, width: coords.width, right: "auto", zIndex: "var(--z-tooltip)" },
+            style: { position: "fixed", left: coords.left, top: coords.top, bottom: coords.bottom, width: coords.width, right: "auto", zIndex: "var(--z-floating)" },
             children: popInner
           }
         ),
@@ -8107,6 +8107,8 @@ var DT_CSS = `
 /* Toolbar */
 .twc-dt__toolbar { position: relative; z-index: 10; display: flex; align-items: center; gap: 6px; padding: 8px 10px;
   border-bottom: var(--border-thin) solid var(--color-divider); flex-wrap: wrap; }
+/* #286: host-supplied leading toolbar slot \u2014 a flex cluster so multiple buttons align with the built-ins. */
+.twc-dt__toolbar-actions { display: inline-flex; align-items: center; gap: 6px; }
 /* z-index above the scroll area's sticky header (z:3) so a toolbar button's
    hover tooltip (a ::after that hangs below the bar) paints over the table
    instead of being covered by the header/first rows. */
@@ -8504,9 +8506,14 @@ th.twc-dt__rownum .twc-dt__th-inner { padding-inline: 8px; gap: 2px; justify-con
 
 /* Filter panel */
 .twc-dt__filters { width: 580px; max-width: calc(100vw - 32px); }
-.twc-dt__frow { display: flex; align-items: center; gap: 6px; padding: 5px 4px; }
-.twc-dt__f-col { width: 118px; flex: none; }
-.twc-dt__f-op { width: 118px; flex: none; }
+/* #289: wrap is a safety net \u2014 a beyond-cap label or the narrow responsive panel drops the value input
+   to its own line instead of clipping the remove button; no effect in the normal (capped) case. */
+.twc-dt__frow { display: flex; align-items: center; gap: 6px; padding: 5px 4px; flex-wrap: wrap; }
+/* #289: column-field auto-fits the widest header label \u2014 JS writes --twc-dt-fcol-w (measured, clamped),
+   the max-width is the hard backstop that keeps the value input above its 140px floor inside the 580px
+   panel even if the var is stale/too large. Fallback 118px = the previous fixed behavior. */
+.twc-dt__f-col { flex: none; width: var(--twc-dt-fcol-w, 118px); min-width: 118px; max-width: 210px; }
+.twc-dt__f-op { flex: none; width: var(--twc-dt-fop-w, 118px); min-width: 118px; max-width: 170px; }
 .twc-dt__f-val { flex: 1; min-width: 140px; }
 .twc-dt__frm-x { display: inline-grid; place-items: center; width: 30px; height: 38px; border: none; background: transparent; color: var(--color-text-subtle); border-radius: var(--radius-md); cursor: pointer; flex: none; align-self: flex-start; }
 .twc-dt__frm-x:hover { background: var(--color-danger-subtle); color: var(--color-danger-subtle-fg); }
@@ -8621,6 +8628,7 @@ var NUM_OPS = [
 ];
 var opsFor = (type) => type === "number" ? NUM_OPS : STR_OPS;
 var isMultiOp = (op) => op === "isAnyOf";
+var ALL_OP_LABELS = [...new Set([...STR_OPS, ...NUM_OPS].map((o) => o.label))];
 var filterTypeOf = (col) => {
   const ft = col && col.filterType;
   if (ft === "number" || ft === "string") return ft;
@@ -9061,6 +9069,7 @@ function Datatable({
   searchable = true,
   quickFilter,
   onQuickFilterChange,
+  toolbarActions,
   rowPinning = false,
   rowReorder = false,
   rowResize = false,
@@ -9292,6 +9301,8 @@ function Datatable({
     };
   }, []);
   const scrollRef = React51__default.useRef(null);
+  const filterPanelRef = React51__default.useRef(null);
+  const measureCanvas = React51__default.useRef(null);
   const [scrollTop, setScrollTop] = React51__default.useState(0);
   const [viewportH, setViewportH] = React51__default.useState(0);
   const [ovTip, setOvTip] = React51__default.useState(null);
@@ -10325,7 +10336,36 @@ function Datatable({
     ] });
   }
   const tableMinWidth = leadW + ordered.reduce((a, c) => a + widthOf(c), 0);
-  const filterableCols = cols.filter((c) => c.filterable);
+  const filterableCols = React51__default.useMemo(() => cols.filter((c) => c.filterable), [cols]);
+  React51__default.useEffect(() => {
+    const el = filterPanelRef.current;
+    if (panel !== "filters" || !el || typeof document === "undefined") return void 0;
+    const measure = () => {
+      if (!el.isConnected) return;
+      const trigger = el.querySelector(".twc-sel__trigger");
+      const cs = getComputedStyle(trigger || el);
+      const ctx = (measureCanvas.current || (measureCanvas.current = document.createElement("canvas"))).getContext("2d");
+      if (!ctx) return;
+      ctx.font = cs.font || `${cs.fontStyle} ${cs.fontWeight} ${cs.fontSize}/${cs.lineHeight} ${cs.fontFamily}`;
+      const pad2 = trigger ? (parseFloat(cs.paddingLeft) || 0) + (parseFloat(cs.paddingRight) || 0) : 24;
+      const chrome = pad2 + 8 + 16 + 4;
+      const widest = (labels) => labels.reduce((m, l) => Math.max(m, ctx.measureText(String(l)).width), 0);
+      const colCap = Math.max(118, Math.min(210, el.clientWidth - 118 - 30 - 140 - 3 * 6 - 2 * 4));
+      const colW = Math.min(colCap, Math.max(118, Math.ceil(widest(filterableCols.map((c) => c.headerName ?? c.field)) + chrome)));
+      const opW = Math.min(170, Math.max(118, Math.ceil(widest(ALL_OP_LABELS) + chrome)));
+      if (Number.isFinite(colW)) el.style.setProperty("--twc-dt-fcol-w", `${colW}px`);
+      if (Number.isFinite(opW)) el.style.setProperty("--twc-dt-fop-w", `${opW}px`);
+    };
+    measure();
+    document.fonts?.ready?.then?.(measure).catch?.(() => {
+    });
+    let ro;
+    if (typeof ResizeObserver !== "undefined") {
+      ro = new ResizeObserver(measure);
+      ro.observe(el);
+    }
+    return () => ro?.disconnect();
+  }, [panel, filterableCols, filters.length]);
   const orderIdxOf = (f) => {
     const i = order.indexOf(f);
     return i === -1 ? 9999 : i;
@@ -10643,6 +10683,7 @@ function Datatable({
   return /* @__PURE__ */ jsxs("div", { className: `twc-dt ${className}`, ref: rootRef, "data-density": density, "data-resizing": resizing || void 0, ...rest, children: [
     __twcStyles,
     /* @__PURE__ */ jsxs("div", { className: "twc-dt__toolbar", "data-compact": compact || void 0, children: [
+      toolbarActions != null ? /* @__PURE__ */ jsx("div", { className: "twc-dt__toolbar-actions", children: toolbarActions }) : null,
       (batchActions.length || hasBatchEditor) && selected.size > 0 ? /* @__PURE__ */ jsxs("div", { className: "twc-dt__batch", children: [
         /* @__PURE__ */ jsx("button", { type: "button", className: "twc-dt__batch-x", onClick: clearSelection, "aria-label": "Clear selection", children: /* @__PURE__ */ jsx(Svg, { d: I.x }) }),
         /* @__PURE__ */ jsxs("span", { className: "twc-dt__batch-count", children: [
@@ -11694,7 +11735,7 @@ function Datatable({
         ] })
       ] });
     })() : null,
-    panel === "filters" && panelPos ? /* @__PURE__ */ jsxs("div", { className: "twc-dt__pop twc-dt__filters", style: { top: panelPos.top, left: panelPos.left }, children: [
+    panel === "filters" && panelPos ? /* @__PURE__ */ jsxs("div", { ref: filterPanelRef, className: "twc-dt__pop twc-dt__filters", style: { top: panelPos.top, left: panelPos.left }, children: [
       /* @__PURE__ */ jsxs("div", { className: "twc-dt__panel-head", children: [
         /* @__PURE__ */ jsx("span", { className: "twc-dt__panel-title", children: "Filters" }),
         filters.length ? /* @__PURE__ */ jsx("button", { type: "button", className: "twc-dt__link", onClick: () => setFilters([]), children: "Clear all" }) : null
@@ -12567,7 +12608,7 @@ function DatePicker({
           role: "dialog",
           "aria-modal": "true",
           "aria-label": "Choose date",
-          style: { position: "fixed", left: coords.left, right: "auto", top: coords.top, bottom: coords.bottom, zIndex: "var(--z-tooltip)" },
+          style: { position: "fixed", left: coords.left, right: "auto", top: coords.top, bottom: coords.bottom, zIndex: "var(--z-floating)" },
           children: [
             /* @__PURE__ */ jsxs("div", { className: "twc-dp__head", children: [
               /* @__PURE__ */ jsx("button", { type: "button", className: "twc-dp__nav", "aria-label": mode === "years" ? "Previous decade" : mode === "months" ? "Previous year" : "Previous month", onClick: () => setView(mode === "years" ? new Date(y - 10, m, 1) : mode === "months" ? new Date(y - 1, m, 1) : new Date(y, m - 1, 1)), children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "m15 18-6-6 6-6" }) }) }),
@@ -13144,7 +13185,7 @@ function DateRangePicker({
           role: "dialog",
           "aria-modal": "true",
           "aria-label": "Choose date range",
-          style: { position: "fixed", left: coords.left, right: "auto", top: coords.top, bottom: coords.bottom, zIndex: "var(--z-tooltip)" },
+          style: { position: "fixed", left: coords.left, right: "auto", top: coords.top, bottom: coords.bottom, zIndex: "var(--z-floating)" },
           children: [
             presetItems.length ? /* @__PURE__ */ jsx("div", { className: "twc-drp__presets", children: presetItems.map((p, i) => /* @__PURE__ */ jsx("button", { type: "button", className: "twc-drp__preset", onClick: () => applyPreset(p), children: p.label }, i)) }) : null,
             /* @__PURE__ */ jsxs("div", { className: "twc-drp__cal", children: [
@@ -13673,7 +13714,7 @@ function TimePicker({
           role: "dialog",
           "aria-modal": "true",
           "aria-label": "Choose time",
-          style: { position: "fixed", left: coords.left, right: "auto", top: coords.top, bottom: coords.bottom, zIndex: "var(--z-tooltip)" },
+          style: { position: "fixed", left: coords.left, right: "auto", top: coords.top, bottom: coords.bottom, zIndex: "var(--z-floating)" },
           children: /* @__PURE__ */ jsx("div", { className: "twc-tp__cols", children: columns.map((col) => {
             const firstTab = col.items.find((it) => it.selected) || col.items.find((it) => !it.disabled);
             return /* @__PURE__ */ jsxs("div", { className: "twc-tp__col", role: "listbox", "aria-label": col.aria, "data-col": col.key, children: [