twico-ui 1.20.2 → 1.21.1

package/CHANGELOG.md

@@ -2,6 +2,21 @@
 
 All notable changes to Twico UI are documented here (newest first). This file is generated automatically on each release by [semantic-release](https://semantic-release.gitbook.io/) from [Conventional Commits](https://www.conventionalcommits.org/) — do not edit it by hand. The same notes appear on each [GitHub Release](https://github.com/EncryptionL/twico-ui/releases).
 
+## [1.21.1](https://github.com/EncryptionL/twico-ui/compare/v1.21.0...v1.21.1) (2026-07-29)
+
+
+### Bug Fixes
+
+* **datatable:** auto-fit filter panel field widths to the widest label ([29ca74c](https://github.com/EncryptionL/twico-ui/commit/29ca74cd89fde500ca024f574488a59feaa87ee0)), closes [#289](https://github.com/EncryptionL/twico-ui/issues/289)
+* **overlay:** stack tooltips below toasts, and dropdowns above ([7236003](https://github.com/EncryptionL/twico-ui/commit/7236003bbf97f73b7440abd89b39aa846b02edc1)), closes [#288](https://github.com/EncryptionL/twico-ui/issues/288)
+
+# [1.21.0](https://github.com/EncryptionL/twico-ui/compare/v1.20.2...v1.21.0) (2026-07-28)
+
+
+### Features
+
+* **datatable:** add toolbarActions slot for custom toolbar controls ([c1c3142](https://github.com/EncryptionL/twico-ui/commit/c1c3142787cb2a21811b16d6774f0e1f2c6045b9)), closes [#286](https://github.com/EncryptionL/twico-ui/issues/286)
+
 ## [1.20.2](https://github.com/EncryptionL/twico-ui/compare/v1.20.1...v1.20.2) (2026-07-24)
 
 

package/dist/index.cjs

@@ -5488,7 +5488,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__ */ jsxRuntime.jsxs(
               "div",
@@ -5966,7 +5966,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
           }
         ),
@@ -6853,7 +6853,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
           }
         ),
@@ -7620,7 +7620,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
           }
         ),
@@ -8128,6 +8128,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. */
@@ -8525,9 +8527,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); }
@@ -8642,6 +8649,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;
@@ -9082,6 +9090,7 @@ function Datatable({
   searchable = true,
   quickFilter,
   onQuickFilterChange,
+  toolbarActions,
   rowPinning = false,
   rowReorder = false,
   rowResize = false,
@@ -9313,6 +9322,8 @@ function Datatable({
     };
   }, []);
   const scrollRef = React51__namespace.default.useRef(null);
+  const filterPanelRef = React51__namespace.default.useRef(null);
+  const measureCanvas = React51__namespace.default.useRef(null);
   const [scrollTop, setScrollTop] = React51__namespace.default.useState(0);
   const [viewportH, setViewportH] = React51__namespace.default.useState(0);
   const [ovTip, setOvTip] = React51__namespace.default.useState(null);
@@ -10346,7 +10357,36 @@ function Datatable({
     ] });
   }
   const tableMinWidth = leadW + ordered.reduce((a, c) => a + widthOf(c), 0);
-  const filterableCols = cols.filter((c) => c.filterable);
+  const filterableCols = React51__namespace.default.useMemo(() => cols.filter((c) => c.filterable), [cols]);
+  React51__namespace.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;
@@ -10664,6 +10704,7 @@ function Datatable({
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `twc-dt ${className}`, ref: rootRef, "data-density": density, "data-resizing": resizing || void 0, ...rest, children: [
     __twcStyles,
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twc-dt__toolbar", "data-compact": compact || void 0, children: [
+      toolbarActions != null ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-dt__toolbar-actions", children: toolbarActions }) : null,
       (batchActions.length || hasBatchEditor) && selected.size > 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twc-dt__batch", children: [
         /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "twc-dt__batch-x", onClick: clearSelection, "aria-label": "Clear selection", children: /* @__PURE__ */ jsxRuntime.jsx(Svg, { d: I.x }) }),
         /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "twc-dt__batch-count", children: [
@@ -11715,7 +11756,7 @@ function Datatable({
         ] })
       ] });
     })() : null,
-    panel === "filters" && panelPos ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twc-dt__pop twc-dt__filters", style: { top: panelPos.top, left: panelPos.left }, children: [
+    panel === "filters" && panelPos ? /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: filterPanelRef, className: "twc-dt__pop twc-dt__filters", style: { top: panelPos.top, left: panelPos.left }, children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twc-dt__panel-head", children: [
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-dt__panel-title", children: "Filters" }),
         filters.length ? /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "twc-dt__link", onClick: () => setFilters([]), children: "Clear all" }) : null
@@ -12588,7 +12629,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__ */ jsxRuntime.jsxs("div", { className: "twc-dp__head", children: [
               /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m15 18-6-6 6-6" }) }) }),
@@ -13165,7 +13206,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__ */ jsxRuntime.jsx("div", { className: "twc-drp__presets", children: presetItems.map((p, i) => /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "twc-drp__preset", onClick: () => applyPreset(p), children: p.label }, i)) }) : null,
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twc-drp__cal", children: [
@@ -13694,7 +13735,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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "twc-tp__col", role: "listbox", "aria-label": col.aria, "data-col": col.key, children: [