twico-ui 1.20.2 → 1.21.0

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

@@ -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. */
@@ -9061,6 +9063,7 @@ function Datatable({
   searchable = true,
   quickFilter,
   onQuickFilterChange,
+  toolbarActions,
   rowPinning = false,
   rowReorder = false,
   rowResize = false,
@@ -10643,6 +10646,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: [