@rufous/ui 0.3.44 → 0.3.46

package/dist/main.cjs

@@ -5704,33 +5704,37 @@ function DataGrid({
   const showExportBtn = !tOpts.hideExport && !hideTopExport;
   const showTitle = !tOpts.hideTitle;
   const showRecordCount = !tOpts.hideRecordCount;
-  return /* @__PURE__ */ import_react17.default.createElement("div", { className: ["dg-root", sxClass, className].filter(Boolean).join(" ") }, !tOpts.hideHeader && /* @__PURE__ */ import_react17.default.createElement("div", { className: `dg-header${customToolbar ? " dg-header--custom" : ""}` }, !customToolbar && (showTitle || showRecordCount) && /* @__PURE__ */ import_react17.default.createElement("div", { className: "dg-header-info" }, showTitle && /* @__PURE__ */ import_react17.default.createElement("h2", null, title), showRecordCount && /* @__PURE__ */ import_react17.default.createElement("p", null, isServer ? totalRows : filteredData.length, " total records")), /* @__PURE__ */ import_react17.default.createElement("div", { className: "dg-header-actions" }, customToolbar ?? /* @__PURE__ */ import_react17.default.createElement(import_react17.default.Fragment, null, showSearch && /* @__PURE__ */ import_react17.default.createElement("div", { className: "dg-search-wrap" }, /* @__PURE__ */ import_react17.default.createElement(Search, { size: 15 }), /* @__PURE__ */ import_react17.default.createElement(
-    "input",
-    {
-      className: "dg-search",
-      placeholder: "Search\u2026",
-      value: filterText,
-      onChange: (e) => {
-        setFilterText(e.target.value);
-        setCurrentPage(1);
-        if (onPaginationModelChange) onPaginationModelChange({ page: 0, pageSize: activePageSize });
+  return /* @__PURE__ */ import_react17.default.createElement("div", { className: ["dg-root", sxClass, className].filter(Boolean).join(" ") }, !tOpts.hideHeader && /* @__PURE__ */ import_react17.default.createElement("div", { className: `dg-header${customToolbar ? " dg-header--custom" : ""}` }, !customToolbar && (showTitle || showRecordCount) && /* @__PURE__ */ import_react17.default.createElement("div", { className: "dg-header-info" }, showTitle && /* @__PURE__ */ import_react17.default.createElement("h2", null, title), showRecordCount && /* @__PURE__ */ import_react17.default.createElement("p", null, isServer ? totalRows : filteredData.length, " total records")), /* @__PURE__ */ import_react17.default.createElement("div", { className: "dg-header-actions" }, customToolbar ?? (() => {
+    const slots = !headerActions ? [] : Array.isArray(headerActions) ? headerActions : [headerActions];
+    const slotAt = (pos) => slots.filter((s2) => s2.position === pos || !s2.position && pos === "after-actions").map((s2, i) => /* @__PURE__ */ import_react17.default.createElement("div", { key: i, className: `dg-header-slot ${alignClass(s2.align)}` }, s2.content));
+    return /* @__PURE__ */ import_react17.default.createElement(import_react17.default.Fragment, null, slotAt("before-search"), showSearch && /* @__PURE__ */ import_react17.default.createElement("div", { className: "dg-search-wrap" }, /* @__PURE__ */ import_react17.default.createElement(Search, { size: 15 }), /* @__PURE__ */ import_react17.default.createElement(
+      "input",
+      {
+        className: "dg-search",
+        placeholder: "Search\u2026",
+        value: filterText,
+        onChange: (e) => {
+          setFilterText(e.target.value);
+          setCurrentPage(1);
+          if (onPaginationModelChange) onPaginationModelChange({ page: 0, pageSize: activePageSize });
+        }
       }
-    }
-  )), showFilterBtn && /* @__PURE__ */ import_react17.default.createElement(Tooltip, { title: "Filters", placement: "top" }, /* @__PURE__ */ import_react17.default.createElement(
-    "button",
-    {
-      className: `dg-icon-btn ${hasActiveFilters ? "active" : ""}`,
-      onClick: () => setShowAdvancedFilter(true)
-    },
-    /* @__PURE__ */ import_react17.default.createElement(Funnel, { size: 16 })
-  )), showColumnsBtn && /* @__PURE__ */ import_react17.default.createElement(Tooltip, { title: "Manage Columns", placement: "top" }, /* @__PURE__ */ import_react17.default.createElement(
-    "button",
-    {
-      className: "dg-icon-btn",
-      onClick: () => setShowManageColumns(true)
-    },
-    /* @__PURE__ */ import_react17.default.createElement(Columns2, { size: 16 })
-  )), showExportBtn && /* @__PURE__ */ import_react17.default.createElement("button", { className: "dg-action-btn", onClick: handleExport, disabled: loading }, /* @__PURE__ */ import_react17.default.createElement(Download, { size: 14 }), " Export CSV")), headerActions && /* @__PURE__ */ import_react17.default.createElement("div", { className: `dg-header-slot ${alignClass(headerActions.align)}` }, headerActions.content))), !tOpts.hideHeader && /* @__PURE__ */ import_react17.default.createElement("div", { className: `dg-toolbar ${alignClass(toolbarContent?.align)}` }, toolbarContent?.content || ""), isGroupingActive && /* @__PURE__ */ import_react17.default.createElement("div", { className: "dg-grouping-bar" }, /* @__PURE__ */ import_react17.default.createElement("span", { className: "dg-grouping-bar-label" }, "Grouped by"), activeGroupingModel.map((gField) => {
+    )), slotAt("after-search"), showFilterBtn && /* @__PURE__ */ import_react17.default.createElement(Tooltip, { title: "Filters", placement: "top" }, /* @__PURE__ */ import_react17.default.createElement(
+      "button",
+      {
+        className: `dg-icon-btn ${hasActiveFilters ? "active" : ""}`,
+        onClick: () => setShowAdvancedFilter(true)
+      },
+      /* @__PURE__ */ import_react17.default.createElement(Funnel, { size: 16 })
+    )), showColumnsBtn && /* @__PURE__ */ import_react17.default.createElement(Tooltip, { title: "Manage Columns", placement: "top" }, /* @__PURE__ */ import_react17.default.createElement(
+      "button",
+      {
+        className: "dg-icon-btn",
+        onClick: () => setShowManageColumns(true)
+      },
+      /* @__PURE__ */ import_react17.default.createElement(Columns2, { size: 16 })
+    )), showExportBtn && /* @__PURE__ */ import_react17.default.createElement("button", { className: "dg-action-btn", onClick: handleExport, disabled: loading }, /* @__PURE__ */ import_react17.default.createElement(Download, { size: 14 }), " Export CSV"), slotAt("after-actions"));
+  })())), !tOpts.hideHeader && /* @__PURE__ */ import_react17.default.createElement("div", { className: `dg-toolbar ${alignClass(toolbarContent?.align)}` }, toolbarContent?.content || ""), isGroupingActive && /* @__PURE__ */ import_react17.default.createElement("div", { className: "dg-grouping-bar" }, /* @__PURE__ */ import_react17.default.createElement("span", { className: "dg-grouping-bar-label" }, "Grouped by"), activeGroupingModel.map((gField) => {
     const col = resolvedColumns.find((c) => String(c.field) === gField || String(c.key) === gField);
     return /* @__PURE__ */ import_react17.default.createElement("div", { key: gField, className: "dg-group-chip" }, /* @__PURE__ */ import_react17.default.createElement(Layers, { size: 11 }), /* @__PURE__ */ import_react17.default.createElement("span", null, col?.header ?? col?.headerName ?? gField), !disableRowGrouping && /* @__PURE__ */ import_react17.default.createElement(
       "button",

package/dist/main.css

@@ -409,6 +409,30 @@
 .dg-search:focus {
   border-color: var(--primary-color);
 }
+.dg-toolbar-select {
+  padding: 8px 28px 8px 10px;
+  border: 1px solid var(--border-color);
+  border-radius: 8px;
+  background: var(--background-color);
+  color: var(--text-color);
+  font-size: 0.875rem;
+  font-family: inherit;
+  outline: none;
+  cursor: pointer;
+  transition: border-color 0.2s;
+  appearance: none;
+  -webkit-appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+}
+.dg-toolbar-select:focus {
+  border-color: var(--primary-color);
+}
+.dg-toolbar-select:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
 .dg-icon-btn {
   padding: 8px;
   border: 1px solid var(--border-color);

package/dist/main.d.cts

@@ -1258,6 +1258,13 @@ interface Action<T> {
 interface DataGridToolbarSlot {
     content: React__default.ReactNode;
     align?: 'left' | 'center' | 'right';
+    /**
+     * Where to inject the slot inside the toolbar action row.
+     * - `'before-search'`  — left of the search input
+     * - `'after-search'`   — right of search, left of Filter / Columns / Export
+     * - `'after-actions'`  — rightmost position, after Export button (default)
+     */
+    position?: 'before-search' | 'after-search' | 'after-actions';
 }
 /**
  * Granular visibility control for the built-in toolbar.
@@ -1360,7 +1367,16 @@ interface DataGridProps<T> {
         value: any;
     }) => void;
     /** Extra buttons/components rendered beside the Export button in the header row */
-    headerActions?: DataGridToolbarSlot;
+    /** One slot or an array of slots — each can have its own `position`.
+     *  This lets you place a select before the search AND an Add button after
+     *  Export in a single prop:
+     *  ```
+     *  headerActions={[
+     *    { position: 'before-search', content: <select className="dg-toolbar-select">…</select> },
+     *    { position: 'after-actions', content: <button>+ Add</button> },
+     *  ]}
+     *  ``` */
+    headerActions?: DataGridToolbarSlot | DataGridToolbarSlot[];
     /** Extra content rendered in a second row below the header */
     toolbarContent?: DataGridToolbarSlot;
     /**

package/dist/main.d.ts

@@ -1258,6 +1258,13 @@ interface Action<T> {
 interface DataGridToolbarSlot {
     content: React__default.ReactNode;
     align?: 'left' | 'center' | 'right';
+    /**
+     * Where to inject the slot inside the toolbar action row.
+     * - `'before-search'`  — left of the search input
+     * - `'after-search'`   — right of search, left of Filter / Columns / Export
+     * - `'after-actions'`  — rightmost position, after Export button (default)
+     */
+    position?: 'before-search' | 'after-search' | 'after-actions';
 }
 /**
  * Granular visibility control for the built-in toolbar.
@@ -1360,7 +1367,16 @@ interface DataGridProps<T> {
         value: any;
     }) => void;
     /** Extra buttons/components rendered beside the Export button in the header row */
-    headerActions?: DataGridToolbarSlot;
+    /** One slot or an array of slots — each can have its own `position`.
+     *  This lets you place a select before the search AND an Add button after
+     *  Export in a single prop:
+     *  ```
+     *  headerActions={[
+     *    { position: 'before-search', content: <select className="dg-toolbar-select">…</select> },
+     *    { position: 'after-actions', content: <button>+ Add</button> },
+     *  ]}
+     *  ``` */
+    headerActions?: DataGridToolbarSlot | DataGridToolbarSlot[];
     /** Extra content rendered in a second row below the header */
     toolbarContent?: DataGridToolbarSlot;
     /**

package/dist/main.js

@@ -5470,33 +5470,37 @@ function DataGrid({
   const showExportBtn = !tOpts.hideExport && !hideTopExport;
   const showTitle = !tOpts.hideTitle;
   const showRecordCount = !tOpts.hideRecordCount;
-  return /* @__PURE__ */ React123.createElement("div", { className: ["dg-root", sxClass, className].filter(Boolean).join(" ") }, !tOpts.hideHeader && /* @__PURE__ */ React123.createElement("div", { className: `dg-header${customToolbar ? " dg-header--custom" : ""}` }, !customToolbar && (showTitle || showRecordCount) && /* @__PURE__ */ React123.createElement("div", { className: "dg-header-info" }, showTitle && /* @__PURE__ */ React123.createElement("h2", null, title), showRecordCount && /* @__PURE__ */ React123.createElement("p", null, isServer ? totalRows : filteredData.length, " total records")), /* @__PURE__ */ React123.createElement("div", { className: "dg-header-actions" }, customToolbar ?? /* @__PURE__ */ React123.createElement(React123.Fragment, null, showSearch && /* @__PURE__ */ React123.createElement("div", { className: "dg-search-wrap" }, /* @__PURE__ */ React123.createElement(Search, { size: 15 }), /* @__PURE__ */ React123.createElement(
-    "input",
-    {
-      className: "dg-search",
-      placeholder: "Search\u2026",
-      value: filterText,
-      onChange: (e) => {
-        setFilterText(e.target.value);
-        setCurrentPage(1);
-        if (onPaginationModelChange) onPaginationModelChange({ page: 0, pageSize: activePageSize });
+  return /* @__PURE__ */ React123.createElement("div", { className: ["dg-root", sxClass, className].filter(Boolean).join(" ") }, !tOpts.hideHeader && /* @__PURE__ */ React123.createElement("div", { className: `dg-header${customToolbar ? " dg-header--custom" : ""}` }, !customToolbar && (showTitle || showRecordCount) && /* @__PURE__ */ React123.createElement("div", { className: "dg-header-info" }, showTitle && /* @__PURE__ */ React123.createElement("h2", null, title), showRecordCount && /* @__PURE__ */ React123.createElement("p", null, isServer ? totalRows : filteredData.length, " total records")), /* @__PURE__ */ React123.createElement("div", { className: "dg-header-actions" }, customToolbar ?? (() => {
+    const slots = !headerActions ? [] : Array.isArray(headerActions) ? headerActions : [headerActions];
+    const slotAt = (pos) => slots.filter((s2) => s2.position === pos || !s2.position && pos === "after-actions").map((s2, i) => /* @__PURE__ */ React123.createElement("div", { key: i, className: `dg-header-slot ${alignClass(s2.align)}` }, s2.content));
+    return /* @__PURE__ */ React123.createElement(React123.Fragment, null, slotAt("before-search"), showSearch && /* @__PURE__ */ React123.createElement("div", { className: "dg-search-wrap" }, /* @__PURE__ */ React123.createElement(Search, { size: 15 }), /* @__PURE__ */ React123.createElement(
+      "input",
+      {
+        className: "dg-search",
+        placeholder: "Search\u2026",
+        value: filterText,
+        onChange: (e) => {
+          setFilterText(e.target.value);
+          setCurrentPage(1);
+          if (onPaginationModelChange) onPaginationModelChange({ page: 0, pageSize: activePageSize });
+        }
       }
-    }
-  )), showFilterBtn && /* @__PURE__ */ React123.createElement(Tooltip, { title: "Filters", placement: "top" }, /* @__PURE__ */ React123.createElement(
-    "button",
-    {
-      className: `dg-icon-btn ${hasActiveFilters ? "active" : ""}`,
-      onClick: () => setShowAdvancedFilter(true)
-    },
-    /* @__PURE__ */ React123.createElement(Funnel, { size: 16 })
-  )), showColumnsBtn && /* @__PURE__ */ React123.createElement(Tooltip, { title: "Manage Columns", placement: "top" }, /* @__PURE__ */ React123.createElement(
-    "button",
-    {
-      className: "dg-icon-btn",
-      onClick: () => setShowManageColumns(true)
-    },
-    /* @__PURE__ */ React123.createElement(Columns2, { size: 16 })
-  )), showExportBtn && /* @__PURE__ */ React123.createElement("button", { className: "dg-action-btn", onClick: handleExport, disabled: loading }, /* @__PURE__ */ React123.createElement(Download, { size: 14 }), " Export CSV")), headerActions && /* @__PURE__ */ React123.createElement("div", { className: `dg-header-slot ${alignClass(headerActions.align)}` }, headerActions.content))), !tOpts.hideHeader && /* @__PURE__ */ React123.createElement("div", { className: `dg-toolbar ${alignClass(toolbarContent?.align)}` }, toolbarContent?.content || ""), isGroupingActive && /* @__PURE__ */ React123.createElement("div", { className: "dg-grouping-bar" }, /* @__PURE__ */ React123.createElement("span", { className: "dg-grouping-bar-label" }, "Grouped by"), activeGroupingModel.map((gField) => {
+    )), slotAt("after-search"), showFilterBtn && /* @__PURE__ */ React123.createElement(Tooltip, { title: "Filters", placement: "top" }, /* @__PURE__ */ React123.createElement(
+      "button",
+      {
+        className: `dg-icon-btn ${hasActiveFilters ? "active" : ""}`,
+        onClick: () => setShowAdvancedFilter(true)
+      },
+      /* @__PURE__ */ React123.createElement(Funnel, { size: 16 })
+    )), showColumnsBtn && /* @__PURE__ */ React123.createElement(Tooltip, { title: "Manage Columns", placement: "top" }, /* @__PURE__ */ React123.createElement(
+      "button",
+      {
+        className: "dg-icon-btn",
+        onClick: () => setShowManageColumns(true)
+      },
+      /* @__PURE__ */ React123.createElement(Columns2, { size: 16 })
+    )), showExportBtn && /* @__PURE__ */ React123.createElement("button", { className: "dg-action-btn", onClick: handleExport, disabled: loading }, /* @__PURE__ */ React123.createElement(Download, { size: 14 }), " Export CSV"), slotAt("after-actions"));
+  })())), !tOpts.hideHeader && /* @__PURE__ */ React123.createElement("div", { className: `dg-toolbar ${alignClass(toolbarContent?.align)}` }, toolbarContent?.content || ""), isGroupingActive && /* @__PURE__ */ React123.createElement("div", { className: "dg-grouping-bar" }, /* @__PURE__ */ React123.createElement("span", { className: "dg-grouping-bar-label" }, "Grouped by"), activeGroupingModel.map((gField) => {
     const col = resolvedColumns.find((c) => String(c.field) === gField || String(c.key) === gField);
     return /* @__PURE__ */ React123.createElement("div", { key: gField, className: "dg-group-chip" }, /* @__PURE__ */ React123.createElement(Layers, { size: 11 }), /* @__PURE__ */ React123.createElement("span", null, col?.header ?? col?.headerName ?? gField), !disableRowGrouping && /* @__PURE__ */ React123.createElement(
       "button",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rufous/ui",
   "private": false,
-  "version": "0.3.44",
+  "version": "0.3.46",
   "type": "module",
   "description": "Experimental: A lightweight React UI component library (Beta)",
   "style": "./dist/main.css",