@rufous/ui 0.3.43 → 0.3.45

package/dist/main.cjs

@@ -838,7 +838,7 @@ var subscribeIcon_default = SubscribeIcon;
 
 // lib/icons/suspendUserIcon.tsx
 var React30 = __toESM(require("react"), 1);
-var SuspendUserIcon = ({ color = "currentColor", size = 24, ...props }) => /* @__PURE__ */ React30.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", ...props }, /* @__PURE__ */ React30.createElement("circle", { cx: "9", cy: "7", r: "4" }), /* @__PURE__ */ React30.createElement("path", { d: "M3 21v-2a7 7 0 0 1 7-7h0" }), /* @__PURE__ */ React30.createElement("line", { x1: "15", y1: "14", x2: "21", y2: "20" }), /* @__PURE__ */ React30.createElement("line", { x1: "21", y1: "14", x2: "15", y2: "20" }));
+var SuspendUserIcon = (({ color = "#3a3a3a", ...props }) => /* @__PURE__ */ React30.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "25.8", height: "25.8", viewBox: "0 0 25.8 25.8", ...props }, /* @__PURE__ */ React30.createElement("g", { id: "Group_24703", "data-name": "Group 24703", transform: "translate(-1737.415 -376.95)" }, /* @__PURE__ */ React30.createElement("g", { id: "Group_24684", "data-name": "Group 24684", transform: "translate(1738.315 377.85)" }, /* @__PURE__ */ React30.createElement("ellipse", { id: "Ellipse_414", "data-name": "Ellipse 414", cx: "4.979", cy: "5.203", rx: "4.979", ry: "5.203", transform: "translate(3.506)", fill: "rgba(0,0,0,0)", stroke: color, strokeWidth: "1.8" }), /* @__PURE__ */ React30.createElement("path", { id: "Path_52609", "data-name": "Path 52609", d: "M128.5,212.538a8.719,8.719,0,0,1,14.56-6.69", transform: "translate(-128.5 -193.195)", fill: "rgba(0,0,0,0)", stroke: color, strokeWidth: "1.8" })), /* @__PURE__ */ React30.createElement("g", { id: "Group_24690", "data-name": "Group 24690", transform: "translate(1750.156 389.69)" }, /* @__PURE__ */ React30.createElement("g", { id: "Group_24741", "data-name": "Group 24741" }, /* @__PURE__ */ React30.createElement("ellipse", { id: "Ellipse_415", "data-name": "Ellipse 415", cx: "6.08", cy: "6.08", rx: "6.08", ry: "6.08", fill: "none", stroke: color, strokeWidth: "1.8", "stroke-dasharray": "470 154" }), /* @__PURE__ */ React30.createElement("line", { id: "Line_419", "data-name": "Line 419", x1: "7", y2: "9", transform: "translate(2.66 1.66)", fill: "none", stroke: color, strokeWidth: "1.8" }))))));
 var suspendUserIcon_default = SuspendUserIcon;
 
 // lib/icons/unsubscribeIcon.tsx
@@ -5217,6 +5217,7 @@ function DataGrid({
   const [sortField, setSortField] = (0, import_react17.useState)(null);
   const [sortDirection, setSortDirection] = (0, import_react17.useState)(null);
   const [filterText, setFilterText] = (0, import_react17.useState)("");
+  const prevFilterText = (0, import_react17.useRef)("");
   const [currentPage, setCurrentPage] = (0, import_react17.useState)(1);
   const activePage = paginationModel ? paginationModel.page + 1 : currentPage;
   const activePageSize = paginationModel ? paginationModel.pageSize : pageSize;
@@ -5506,7 +5507,15 @@ function DataGrid({
     });
   }, [data, filterText, advancedFilters, resolvedColumns, searchableColumns]);
   (0, import_react17.useEffect)(() => {
-    if (!onSearchChange || !filterText) return;
+    if (!onSearchChange) return;
+    if (!filterText) {
+      if (prevFilterText.current !== "") {
+        onSearchChange("");
+      }
+      prevFilterText.current = "";
+      return;
+    }
+    prevFilterText.current = filterText;
     if (filteredData.length === 0) onSearchChange(filterText);
   }, [filteredData, filterText, onSearchChange]);
   const sortedData = (0, import_react17.useMemo)(() => {
@@ -5695,7 +5704,7 @@ 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(
+  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, headerActions?.position === "before-search" && /* @__PURE__ */ import_react17.default.createElement("div", { className: `dg-header-slot ${alignClass(headerActions.align)}` }, headerActions.content), 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",
@@ -5707,7 +5716,7 @@ function DataGrid({
         if (onPaginationModelChange) onPaginationModelChange({ page: 0, pageSize: activePageSize });
       }
     }
-  )), showFilterBtn && /* @__PURE__ */ import_react17.default.createElement(Tooltip, { title: "Filters", placement: "top" }, /* @__PURE__ */ import_react17.default.createElement(
+  )), headerActions?.position === "after-search" && /* @__PURE__ */ import_react17.default.createElement("div", { className: `dg-header-slot ${alignClass(headerActions.align)}` }, headerActions.content), showFilterBtn && /* @__PURE__ */ import_react17.default.createElement(Tooltip, { title: "Filters", placement: "top" }, /* @__PURE__ */ import_react17.default.createElement(
     "button",
     {
       className: `dg-icon-btn ${hasActiveFilters ? "active" : ""}`,
@@ -5721,7 +5730,7 @@ function DataGrid({
       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) => {
+  )), 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 && (!headerActions.position || headerActions.position === "after-actions") && /* @__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) => {
     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

@@ -274,11 +274,10 @@ interface SubscribeIconProps extends React.SVGProps<SVGSVGElement> {
 }
 declare const SubscribeIcon: React.FC<SubscribeIconProps>;
 
-interface SuspendUserProps extends React.SVGProps<SVGSVGElement> {
+interface SuspendUserIconProps extends React.SVGProps<SVGSVGElement> {
     color?: string;
-    size?: number;
 }
-declare const SuspendUserIcon: React.FC<SuspendUserProps>;
+declare const SuspendUserIcon: React.FC<SuspendUserIconProps>;
 
 interface UnsubscribeIconProps extends React.SVGProps<SVGSVGElement> {
     color?: string;
@@ -1259,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.

package/dist/main.d.ts

@@ -274,11 +274,10 @@ interface SubscribeIconProps extends React.SVGProps<SVGSVGElement> {
 }
 declare const SubscribeIcon: React.FC<SubscribeIconProps>;
 
-interface SuspendUserProps extends React.SVGProps<SVGSVGElement> {
+interface SuspendUserIconProps extends React.SVGProps<SVGSVGElement> {
     color?: string;
-    size?: number;
 }
-declare const SuspendUserIcon: React.FC<SuspendUserProps>;
+declare const SuspendUserIcon: React.FC<SuspendUserIconProps>;
 
 interface UnsubscribeIconProps extends React.SVGProps<SVGSVGElement> {
     color?: string;
@@ -1259,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.

package/dist/main.js

@@ -577,7 +577,7 @@ var subscribeIcon_default = SubscribeIcon;
 
 // lib/icons/suspendUserIcon.tsx
 import * as React30 from "react";
-var SuspendUserIcon = ({ color = "currentColor", size = 24, ...props }) => /* @__PURE__ */ React30.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", ...props }, /* @__PURE__ */ React30.createElement("circle", { cx: "9", cy: "7", r: "4" }), /* @__PURE__ */ React30.createElement("path", { d: "M3 21v-2a7 7 0 0 1 7-7h0" }), /* @__PURE__ */ React30.createElement("line", { x1: "15", y1: "14", x2: "21", y2: "20" }), /* @__PURE__ */ React30.createElement("line", { x1: "21", y1: "14", x2: "15", y2: "20" }));
+var SuspendUserIcon = (({ color = "#3a3a3a", ...props }) => /* @__PURE__ */ React30.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "25.8", height: "25.8", viewBox: "0 0 25.8 25.8", ...props }, /* @__PURE__ */ React30.createElement("g", { id: "Group_24703", "data-name": "Group 24703", transform: "translate(-1737.415 -376.95)" }, /* @__PURE__ */ React30.createElement("g", { id: "Group_24684", "data-name": "Group 24684", transform: "translate(1738.315 377.85)" }, /* @__PURE__ */ React30.createElement("ellipse", { id: "Ellipse_414", "data-name": "Ellipse 414", cx: "4.979", cy: "5.203", rx: "4.979", ry: "5.203", transform: "translate(3.506)", fill: "rgba(0,0,0,0)", stroke: color, strokeWidth: "1.8" }), /* @__PURE__ */ React30.createElement("path", { id: "Path_52609", "data-name": "Path 52609", d: "M128.5,212.538a8.719,8.719,0,0,1,14.56-6.69", transform: "translate(-128.5 -193.195)", fill: "rgba(0,0,0,0)", stroke: color, strokeWidth: "1.8" })), /* @__PURE__ */ React30.createElement("g", { id: "Group_24690", "data-name": "Group 24690", transform: "translate(1750.156 389.69)" }, /* @__PURE__ */ React30.createElement("g", { id: "Group_24741", "data-name": "Group 24741" }, /* @__PURE__ */ React30.createElement("ellipse", { id: "Ellipse_415", "data-name": "Ellipse 415", cx: "6.08", cy: "6.08", rx: "6.08", ry: "6.08", fill: "none", stroke: color, strokeWidth: "1.8", "stroke-dasharray": "470 154" }), /* @__PURE__ */ React30.createElement("line", { id: "Line_419", "data-name": "Line 419", x1: "7", y2: "9", transform: "translate(2.66 1.66)", fill: "none", stroke: color, strokeWidth: "1.8" }))))));
 var suspendUserIcon_default = SuspendUserIcon;
 
 // lib/icons/unsubscribeIcon.tsx
@@ -4983,6 +4983,7 @@ function DataGrid({
   const [sortField, setSortField] = useState10(null);
   const [sortDirection, setSortDirection] = useState10(null);
   const [filterText, setFilterText] = useState10("");
+  const prevFilterText = useRef10("");
   const [currentPage, setCurrentPage] = useState10(1);
   const activePage = paginationModel ? paginationModel.page + 1 : currentPage;
   const activePageSize = paginationModel ? paginationModel.pageSize : pageSize;
@@ -5272,7 +5273,15 @@ function DataGrid({
     });
   }, [data, filterText, advancedFilters, resolvedColumns, searchableColumns]);
   useEffect9(() => {
-    if (!onSearchChange || !filterText) return;
+    if (!onSearchChange) return;
+    if (!filterText) {
+      if (prevFilterText.current !== "") {
+        onSearchChange("");
+      }
+      prevFilterText.current = "";
+      return;
+    }
+    prevFilterText.current = filterText;
     if (filteredData.length === 0) onSearchChange(filterText);
   }, [filteredData, filterText, onSearchChange]);
   const sortedData = useMemo2(() => {
@@ -5461,7 +5470,7 @@ 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(
+  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, headerActions?.position === "before-search" && /* @__PURE__ */ React123.createElement("div", { className: `dg-header-slot ${alignClass(headerActions.align)}` }, headerActions.content), showSearch && /* @__PURE__ */ React123.createElement("div", { className: "dg-search-wrap" }, /* @__PURE__ */ React123.createElement(Search, { size: 15 }), /* @__PURE__ */ React123.createElement(
     "input",
     {
       className: "dg-search",
@@ -5473,7 +5482,7 @@ function DataGrid({
         if (onPaginationModelChange) onPaginationModelChange({ page: 0, pageSize: activePageSize });
       }
     }
-  )), showFilterBtn && /* @__PURE__ */ React123.createElement(Tooltip, { title: "Filters", placement: "top" }, /* @__PURE__ */ React123.createElement(
+  )), headerActions?.position === "after-search" && /* @__PURE__ */ React123.createElement("div", { className: `dg-header-slot ${alignClass(headerActions.align)}` }, headerActions.content), showFilterBtn && /* @__PURE__ */ React123.createElement(Tooltip, { title: "Filters", placement: "top" }, /* @__PURE__ */ React123.createElement(
     "button",
     {
       className: `dg-icon-btn ${hasActiveFilters ? "active" : ""}`,
@@ -5487,7 +5496,7 @@ function DataGrid({
       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) => {
+  )), showExportBtn && /* @__PURE__ */ React123.createElement("button", { className: "dg-action-btn", onClick: handleExport, disabled: loading }, /* @__PURE__ */ React123.createElement(Download, { size: 14 }), " Export CSV"), headerActions && (!headerActions.position || headerActions.position === "after-actions") && /* @__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) => {
     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.43",
+  "version": "0.3.45",
   "type": "module",
   "description": "Experimental: A lightweight React UI component library (Beta)",
   "style": "./dist/main.css",