@rufous/ui 0.3.45 → 0.3.47

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/main.cjs +61 -41
  2. package/dist/main.css +27 -1
  3. package/dist/main.d.cts +10 -1
  4. package/dist/main.d.ts +10 -1
  5. package/dist/main.js +61 -41
  6. package/package.json +1 -1
package/dist/main.cjs CHANGED
@@ -951,7 +951,7 @@ var notificationIcon_default = NotificationIcon;
951
951
 
952
952
  // lib/icons/refreshIcon.tsx
953
953
  var React42 = __toESM(require("react"), 1);
954
- var RefreshIcon = ({ color = "currentColor", size = 24, ...props }) => /* @__PURE__ */ React42.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__ */ React42.createElement("path", { d: "M21 12a9 9 0 1 1-2.636-6.364" }), /* @__PURE__ */ React42.createElement("polyline", { points: "21 3 21 9 15 9" }));
954
+ var RefreshIcon = ({ color = "currentColor", size = 24, ...props }) => /* @__PURE__ */ React42.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 24 24", fill: "none", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", ...props }, /* @__PURE__ */ React42.createElement("path", { d: "M21 12a9 9 0 1 1-2.636-6.364", stroke: "currentColor" }), /* @__PURE__ */ React42.createElement("polyline", { points: "21 3 21 9 15 9", stroke: color }));
955
955
  var refreshIcon_default = RefreshIcon;
956
956
 
957
957
  // lib/icons/dollarIcon.tsx
@@ -1810,8 +1810,16 @@ var __iconNode14 = [
1810
1810
  ];
1811
1811
  var Funnel = createLucideIcon("funnel", __iconNode14);
1812
1812
 
1813
- // node_modules/lucide-react/dist/esm/icons/layers.js
1813
+ // node_modules/lucide-react/dist/esm/icons/info.js
1814
1814
  var __iconNode15 = [
1815
+ ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
1816
+ ["path", { d: "M12 16v-4", key: "1dtifu" }],
1817
+ ["path", { d: "M12 8h.01", key: "e9boi3" }]
1818
+ ];
1819
+ var Info = createLucideIcon("info", __iconNode15);
1820
+
1821
+ // node_modules/lucide-react/dist/esm/icons/layers.js
1822
+ var __iconNode16 = [
1815
1823
  [
1816
1824
  "path",
1817
1825
  {
@@ -1834,14 +1842,14 @@ var __iconNode15 = [
1834
1842
  }
1835
1843
  ]
1836
1844
  ];
1837
- var Layers = createLucideIcon("layers", __iconNode15);
1845
+ var Layers = createLucideIcon("layers", __iconNode16);
1838
1846
 
1839
1847
  // node_modules/lucide-react/dist/esm/icons/minus.js
1840
- var __iconNode16 = [["path", { d: "M5 12h14", key: "1ays0h" }]];
1841
- var Minus = createLucideIcon("minus", __iconNode16);
1848
+ var __iconNode17 = [["path", { d: "M5 12h14", key: "1ays0h" }]];
1849
+ var Minus = createLucideIcon("minus", __iconNode17);
1842
1850
 
1843
1851
  // node_modules/lucide-react/dist/esm/icons/pin.js
1844
- var __iconNode17 = [
1852
+ var __iconNode18 = [
1845
1853
  ["path", { d: "M12 17v5", key: "bb1du9" }],
1846
1854
  [
1847
1855
  "path",
@@ -1851,38 +1859,38 @@ var __iconNode17 = [
1851
1859
  }
1852
1860
  ]
1853
1861
  ];
1854
- var Pin = createLucideIcon("pin", __iconNode17);
1862
+ var Pin = createLucideIcon("pin", __iconNode18);
1855
1863
 
1856
1864
  // node_modules/lucide-react/dist/esm/icons/plus.js
1857
- var __iconNode18 = [
1865
+ var __iconNode19 = [
1858
1866
  ["path", { d: "M5 12h14", key: "1ays0h" }],
1859
1867
  ["path", { d: "M12 5v14", key: "s699le" }]
1860
1868
  ];
1861
- var Plus = createLucideIcon("plus", __iconNode18);
1869
+ var Plus = createLucideIcon("plus", __iconNode19);
1862
1870
 
1863
1871
  // node_modules/lucide-react/dist/esm/icons/search.js
1864
- var __iconNode19 = [
1872
+ var __iconNode20 = [
1865
1873
  ["path", { d: "m21 21-4.34-4.34", key: "14j7rj" }],
1866
1874
  ["circle", { cx: "11", cy: "11", r: "8", key: "4ej97u" }]
1867
1875
  ];
1868
- var Search = createLucideIcon("search", __iconNode19);
1876
+ var Search = createLucideIcon("search", __iconNode20);
1869
1877
 
1870
1878
  // node_modules/lucide-react/dist/esm/icons/trash-2.js
1871
- var __iconNode20 = [
1879
+ var __iconNode21 = [
1872
1880
  ["path", { d: "M10 11v6", key: "nco0om" }],
1873
1881
  ["path", { d: "M14 11v6", key: "outv1u" }],
1874
1882
  ["path", { d: "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6", key: "miytrc" }],
1875
1883
  ["path", { d: "M3 6h18", key: "d0wm0j" }],
1876
1884
  ["path", { d: "M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2", key: "e791ji" }]
1877
1885
  ];
1878
- var Trash2 = createLucideIcon("trash-2", __iconNode20);
1886
+ var Trash2 = createLucideIcon("trash-2", __iconNode21);
1879
1887
 
1880
1888
  // node_modules/lucide-react/dist/esm/icons/x.js
1881
- var __iconNode21 = [
1889
+ var __iconNode22 = [
1882
1890
  ["path", { d: "M18 6 6 18", key: "1bl5f8" }],
1883
1891
  ["path", { d: "m6 6 12 12", key: "d8bk6v" }]
1884
1892
  ];
1885
- var X = createLucideIcon("x", __iconNode21);
1893
+ var X = createLucideIcon("x", __iconNode22);
1886
1894
 
1887
1895
  // lib/Dialogs/BaseDialog.tsx
1888
1896
  var DialogDepthContext = React113.createContext(0);
@@ -5704,33 +5712,44 @@ function DataGrid({
5704
5712
  const showExportBtn = !tOpts.hideExport && !hideTopExport;
5705
5713
  const showTitle = !tOpts.hideTitle;
5706
5714
  const showRecordCount = !tOpts.hideRecordCount;
5707
- 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(
5708
- "input",
5709
- {
5710
- className: "dg-search",
5711
- placeholder: "Search\u2026",
5712
- value: filterText,
5713
- onChange: (e) => {
5714
- setFilterText(e.target.value);
5715
- setCurrentPage(1);
5716
- if (onPaginationModelChange) onPaginationModelChange({ page: 0, pageSize: activePageSize });
5715
+ 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 ?? (() => {
5716
+ const slots = !headerActions ? [] : Array.isArray(headerActions) ? headerActions : [headerActions];
5717
+ 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));
5718
+ 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, className: "dg-search-icon" }), /* @__PURE__ */ import_react17.default.createElement(
5719
+ "input",
5720
+ {
5721
+ className: `dg-search${searchableColumns && searchableColumns.length ? " dg-search--with-info" : ""}`,
5722
+ placeholder: "Search\u2026",
5723
+ value: filterText,
5724
+ onChange: (e) => {
5725
+ setFilterText(e.target.value);
5726
+ setCurrentPage(1);
5727
+ if (onPaginationModelChange) onPaginationModelChange({ page: 0, pageSize: activePageSize });
5728
+ }
5717
5729
  }
5718
- }
5719
- )), 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(
5720
- "button",
5721
- {
5722
- className: `dg-icon-btn ${hasActiveFilters ? "active" : ""}`,
5723
- onClick: () => setShowAdvancedFilter(true)
5724
- },
5725
- /* @__PURE__ */ import_react17.default.createElement(Funnel, { size: 16 })
5726
- )), showColumnsBtn && /* @__PURE__ */ import_react17.default.createElement(Tooltip, { title: "Manage Columns", placement: "top" }, /* @__PURE__ */ import_react17.default.createElement(
5727
- "button",
5728
- {
5729
- className: "dg-icon-btn",
5730
- onClick: () => setShowManageColumns(true)
5731
- },
5732
- /* @__PURE__ */ import_react17.default.createElement(Columns2, { size: 16 })
5733
- )), 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) => {
5730
+ ), searchableColumns && searchableColumns.length > 0 && /* @__PURE__ */ import_react17.default.createElement("span", { className: "dg-search-info" }, /* @__PURE__ */ import_react17.default.createElement(
5731
+ Tooltip,
5732
+ {
5733
+ title: /* @__PURE__ */ import_react17.default.createElement("span", null, "Searching in:", " ", resolvedColumns.filter((col) => searchableColumns.includes(String(col.field))).map((col) => col.headerName || String(col.field)).join(", ")),
5734
+ placement: "top"
5735
+ },
5736
+ /* @__PURE__ */ import_react17.default.createElement("span", { className: "dg-search-info__trigger", tabIndex: 0 }, /* @__PURE__ */ import_react17.default.createElement(Info, { size: 14 }))
5737
+ ))), slotAt("after-search"), showFilterBtn && /* @__PURE__ */ import_react17.default.createElement(Tooltip, { title: "Filters", placement: "top" }, /* @__PURE__ */ import_react17.default.createElement(
5738
+ "button",
5739
+ {
5740
+ className: `dg-icon-btn ${hasActiveFilters ? "active" : ""}`,
5741
+ onClick: () => setShowAdvancedFilter(true)
5742
+ },
5743
+ /* @__PURE__ */ import_react17.default.createElement(Funnel, { size: 16 })
5744
+ )), showColumnsBtn && /* @__PURE__ */ import_react17.default.createElement(Tooltip, { title: "Manage Columns", placement: "top" }, /* @__PURE__ */ import_react17.default.createElement(
5745
+ "button",
5746
+ {
5747
+ className: "dg-icon-btn",
5748
+ onClick: () => setShowManageColumns(true)
5749
+ },
5750
+ /* @__PURE__ */ import_react17.default.createElement(Columns2, { size: 16 })
5751
+ )), 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"));
5752
+ })())), !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) => {
5734
5753
  const col = resolvedColumns.find((c) => String(c.field) === gField || String(c.key) === gField);
5735
5754
  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(
5736
5755
  "button",
@@ -15306,6 +15325,7 @@ lucide-react/dist/esm/icons/ellipsis-vertical.js:
15306
15325
  lucide-react/dist/esm/icons/eye-off.js:
15307
15326
  lucide-react/dist/esm/icons/eye.js:
15308
15327
  lucide-react/dist/esm/icons/funnel.js:
15328
+ lucide-react/dist/esm/icons/info.js:
15309
15329
  lucide-react/dist/esm/icons/layers.js:
15310
15330
  lucide-react/dist/esm/icons/minus.js:
15311
15331
  lucide-react/dist/esm/icons/pin.js:
package/dist/main.css CHANGED
@@ -387,7 +387,7 @@
387
387
  .dg-search-wrap {
388
388
  position: relative;
389
389
  }
390
- .dg-search-wrap svg {
390
+ .dg-search-wrap > svg {
391
391
  position: absolute;
392
392
  left: 10px;
393
393
  top: 50%;
@@ -406,9 +406,35 @@
406
406
  width: 220px;
407
407
  transition: border-color 0.2s;
408
408
  }
409
+ .dg-search--with-info {
410
+ padding-right: 32px;
411
+ }
409
412
  .dg-search:focus {
410
413
  border-color: var(--primary-color);
411
414
  }
415
+ .dg-search-info {
416
+ position: absolute;
417
+ right: 10px;
418
+ top: 50%;
419
+ transform: translateY(-50%);
420
+ display: inline-flex;
421
+ align-items: center;
422
+ justify-content: center;
423
+ line-height: 0;
424
+ }
425
+ .dg-search-info__trigger {
426
+ display: inline-flex;
427
+ align-items: center;
428
+ justify-content: center;
429
+ color: var(--text-secondary);
430
+ cursor: help;
431
+ outline: none;
432
+ line-height: 0;
433
+ }
434
+ .dg-search-info__trigger:hover,
435
+ .dg-search-info__trigger:focus-visible {
436
+ color: var(--text-color);
437
+ }
412
438
  .dg-toolbar-select {
413
439
  padding: 8px 28px 8px 10px;
414
440
  border: 1px solid var(--border-color);
package/dist/main.d.cts CHANGED
@@ -1367,7 +1367,16 @@ interface DataGridProps<T> {
1367
1367
  value: any;
1368
1368
  }) => void;
1369
1369
  /** Extra buttons/components rendered beside the Export button in the header row */
1370
- headerActions?: DataGridToolbarSlot;
1370
+ /** One slot or an array of slots — each can have its own `position`.
1371
+ * This lets you place a select before the search AND an Add button after
1372
+ * Export in a single prop:
1373
+ * ```
1374
+ * headerActions={[
1375
+ * { position: 'before-search', content: <select className="dg-toolbar-select">…</select> },
1376
+ * { position: 'after-actions', content: <button>+ Add</button> },
1377
+ * ]}
1378
+ * ``` */
1379
+ headerActions?: DataGridToolbarSlot | DataGridToolbarSlot[];
1371
1380
  /** Extra content rendered in a second row below the header */
1372
1381
  toolbarContent?: DataGridToolbarSlot;
1373
1382
  /**
package/dist/main.d.ts CHANGED
@@ -1367,7 +1367,16 @@ interface DataGridProps<T> {
1367
1367
  value: any;
1368
1368
  }) => void;
1369
1369
  /** Extra buttons/components rendered beside the Export button in the header row */
1370
- headerActions?: DataGridToolbarSlot;
1370
+ /** One slot or an array of slots — each can have its own `position`.
1371
+ * This lets you place a select before the search AND an Add button after
1372
+ * Export in a single prop:
1373
+ * ```
1374
+ * headerActions={[
1375
+ * { position: 'before-search', content: <select className="dg-toolbar-select">…</select> },
1376
+ * { position: 'after-actions', content: <button>+ Add</button> },
1377
+ * ]}
1378
+ * ``` */
1379
+ headerActions?: DataGridToolbarSlot | DataGridToolbarSlot[];
1371
1380
  /** Extra content rendered in a second row below the header */
1372
1381
  toolbarContent?: DataGridToolbarSlot;
1373
1382
  /**
package/dist/main.js CHANGED
@@ -690,7 +690,7 @@ var notificationIcon_default = NotificationIcon;
690
690
 
691
691
  // lib/icons/refreshIcon.tsx
692
692
  import * as React42 from "react";
693
- var RefreshIcon = ({ color = "currentColor", size = 24, ...props }) => /* @__PURE__ */ React42.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__ */ React42.createElement("path", { d: "M21 12a9 9 0 1 1-2.636-6.364" }), /* @__PURE__ */ React42.createElement("polyline", { points: "21 3 21 9 15 9" }));
693
+ var RefreshIcon = ({ color = "currentColor", size = 24, ...props }) => /* @__PURE__ */ React42.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 24 24", fill: "none", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", ...props }, /* @__PURE__ */ React42.createElement("path", { d: "M21 12a9 9 0 1 1-2.636-6.364", stroke: "currentColor" }), /* @__PURE__ */ React42.createElement("polyline", { points: "21 3 21 9 15 9", stroke: color }));
694
694
  var refreshIcon_default = RefreshIcon;
695
695
 
696
696
  // lib/icons/dollarIcon.tsx
@@ -1549,8 +1549,16 @@ var __iconNode14 = [
1549
1549
  ];
1550
1550
  var Funnel = createLucideIcon("funnel", __iconNode14);
1551
1551
 
1552
- // node_modules/lucide-react/dist/esm/icons/layers.js
1552
+ // node_modules/lucide-react/dist/esm/icons/info.js
1553
1553
  var __iconNode15 = [
1554
+ ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
1555
+ ["path", { d: "M12 16v-4", key: "1dtifu" }],
1556
+ ["path", { d: "M12 8h.01", key: "e9boi3" }]
1557
+ ];
1558
+ var Info = createLucideIcon("info", __iconNode15);
1559
+
1560
+ // node_modules/lucide-react/dist/esm/icons/layers.js
1561
+ var __iconNode16 = [
1554
1562
  [
1555
1563
  "path",
1556
1564
  {
@@ -1573,14 +1581,14 @@ var __iconNode15 = [
1573
1581
  }
1574
1582
  ]
1575
1583
  ];
1576
- var Layers = createLucideIcon("layers", __iconNode15);
1584
+ var Layers = createLucideIcon("layers", __iconNode16);
1577
1585
 
1578
1586
  // node_modules/lucide-react/dist/esm/icons/minus.js
1579
- var __iconNode16 = [["path", { d: "M5 12h14", key: "1ays0h" }]];
1580
- var Minus = createLucideIcon("minus", __iconNode16);
1587
+ var __iconNode17 = [["path", { d: "M5 12h14", key: "1ays0h" }]];
1588
+ var Minus = createLucideIcon("minus", __iconNode17);
1581
1589
 
1582
1590
  // node_modules/lucide-react/dist/esm/icons/pin.js
1583
- var __iconNode17 = [
1591
+ var __iconNode18 = [
1584
1592
  ["path", { d: "M12 17v5", key: "bb1du9" }],
1585
1593
  [
1586
1594
  "path",
@@ -1590,38 +1598,38 @@ var __iconNode17 = [
1590
1598
  }
1591
1599
  ]
1592
1600
  ];
1593
- var Pin = createLucideIcon("pin", __iconNode17);
1601
+ var Pin = createLucideIcon("pin", __iconNode18);
1594
1602
 
1595
1603
  // node_modules/lucide-react/dist/esm/icons/plus.js
1596
- var __iconNode18 = [
1604
+ var __iconNode19 = [
1597
1605
  ["path", { d: "M5 12h14", key: "1ays0h" }],
1598
1606
  ["path", { d: "M12 5v14", key: "s699le" }]
1599
1607
  ];
1600
- var Plus = createLucideIcon("plus", __iconNode18);
1608
+ var Plus = createLucideIcon("plus", __iconNode19);
1601
1609
 
1602
1610
  // node_modules/lucide-react/dist/esm/icons/search.js
1603
- var __iconNode19 = [
1611
+ var __iconNode20 = [
1604
1612
  ["path", { d: "m21 21-4.34-4.34", key: "14j7rj" }],
1605
1613
  ["circle", { cx: "11", cy: "11", r: "8", key: "4ej97u" }]
1606
1614
  ];
1607
- var Search = createLucideIcon("search", __iconNode19);
1615
+ var Search = createLucideIcon("search", __iconNode20);
1608
1616
 
1609
1617
  // node_modules/lucide-react/dist/esm/icons/trash-2.js
1610
- var __iconNode20 = [
1618
+ var __iconNode21 = [
1611
1619
  ["path", { d: "M10 11v6", key: "nco0om" }],
1612
1620
  ["path", { d: "M14 11v6", key: "outv1u" }],
1613
1621
  ["path", { d: "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6", key: "miytrc" }],
1614
1622
  ["path", { d: "M3 6h18", key: "d0wm0j" }],
1615
1623
  ["path", { d: "M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2", key: "e791ji" }]
1616
1624
  ];
1617
- var Trash2 = createLucideIcon("trash-2", __iconNode20);
1625
+ var Trash2 = createLucideIcon("trash-2", __iconNode21);
1618
1626
 
1619
1627
  // node_modules/lucide-react/dist/esm/icons/x.js
1620
- var __iconNode21 = [
1628
+ var __iconNode22 = [
1621
1629
  ["path", { d: "M18 6 6 18", key: "1bl5f8" }],
1622
1630
  ["path", { d: "m6 6 12 12", key: "d8bk6v" }]
1623
1631
  ];
1624
- var X = createLucideIcon("x", __iconNode21);
1632
+ var X = createLucideIcon("x", __iconNode22);
1625
1633
 
1626
1634
  // lib/Dialogs/BaseDialog.tsx
1627
1635
  var DialogDepthContext = React113.createContext(0);
@@ -5470,33 +5478,44 @@ function DataGrid({
5470
5478
  const showExportBtn = !tOpts.hideExport && !hideTopExport;
5471
5479
  const showTitle = !tOpts.hideTitle;
5472
5480
  const showRecordCount = !tOpts.hideRecordCount;
5473
- 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(
5474
- "input",
5475
- {
5476
- className: "dg-search",
5477
- placeholder: "Search\u2026",
5478
- value: filterText,
5479
- onChange: (e) => {
5480
- setFilterText(e.target.value);
5481
- setCurrentPage(1);
5482
- if (onPaginationModelChange) onPaginationModelChange({ page: 0, pageSize: activePageSize });
5481
+ 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 ?? (() => {
5482
+ const slots = !headerActions ? [] : Array.isArray(headerActions) ? headerActions : [headerActions];
5483
+ 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));
5484
+ 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, className: "dg-search-icon" }), /* @__PURE__ */ React123.createElement(
5485
+ "input",
5486
+ {
5487
+ className: `dg-search${searchableColumns && searchableColumns.length ? " dg-search--with-info" : ""}`,
5488
+ placeholder: "Search\u2026",
5489
+ value: filterText,
5490
+ onChange: (e) => {
5491
+ setFilterText(e.target.value);
5492
+ setCurrentPage(1);
5493
+ if (onPaginationModelChange) onPaginationModelChange({ page: 0, pageSize: activePageSize });
5494
+ }
5483
5495
  }
5484
- }
5485
- )), 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(
5486
- "button",
5487
- {
5488
- className: `dg-icon-btn ${hasActiveFilters ? "active" : ""}`,
5489
- onClick: () => setShowAdvancedFilter(true)
5490
- },
5491
- /* @__PURE__ */ React123.createElement(Funnel, { size: 16 })
5492
- )), showColumnsBtn && /* @__PURE__ */ React123.createElement(Tooltip, { title: "Manage Columns", placement: "top" }, /* @__PURE__ */ React123.createElement(
5493
- "button",
5494
- {
5495
- className: "dg-icon-btn",
5496
- onClick: () => setShowManageColumns(true)
5497
- },
5498
- /* @__PURE__ */ React123.createElement(Columns2, { size: 16 })
5499
- )), 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) => {
5496
+ ), searchableColumns && searchableColumns.length > 0 && /* @__PURE__ */ React123.createElement("span", { className: "dg-search-info" }, /* @__PURE__ */ React123.createElement(
5497
+ Tooltip,
5498
+ {
5499
+ title: /* @__PURE__ */ React123.createElement("span", null, "Searching in:", " ", resolvedColumns.filter((col) => searchableColumns.includes(String(col.field))).map((col) => col.headerName || String(col.field)).join(", ")),
5500
+ placement: "top"
5501
+ },
5502
+ /* @__PURE__ */ React123.createElement("span", { className: "dg-search-info__trigger", tabIndex: 0 }, /* @__PURE__ */ React123.createElement(Info, { size: 14 }))
5503
+ ))), slotAt("after-search"), showFilterBtn && /* @__PURE__ */ React123.createElement(Tooltip, { title: "Filters", placement: "top" }, /* @__PURE__ */ React123.createElement(
5504
+ "button",
5505
+ {
5506
+ className: `dg-icon-btn ${hasActiveFilters ? "active" : ""}`,
5507
+ onClick: () => setShowAdvancedFilter(true)
5508
+ },
5509
+ /* @__PURE__ */ React123.createElement(Funnel, { size: 16 })
5510
+ )), showColumnsBtn && /* @__PURE__ */ React123.createElement(Tooltip, { title: "Manage Columns", placement: "top" }, /* @__PURE__ */ React123.createElement(
5511
+ "button",
5512
+ {
5513
+ className: "dg-icon-btn",
5514
+ onClick: () => setShowManageColumns(true)
5515
+ },
5516
+ /* @__PURE__ */ React123.createElement(Columns2, { size: 16 })
5517
+ )), showExportBtn && /* @__PURE__ */ React123.createElement("button", { className: "dg-action-btn", onClick: handleExport, disabled: loading }, /* @__PURE__ */ React123.createElement(Download, { size: 14 }), " Export CSV"), slotAt("after-actions"));
5518
+ })())), !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) => {
5500
5519
  const col = resolvedColumns.find((c) => String(c.field) === gField || String(c.key) === gField);
5501
5520
  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(
5502
5521
  "button",
@@ -15140,6 +15159,7 @@ lucide-react/dist/esm/icons/ellipsis-vertical.js:
15140
15159
  lucide-react/dist/esm/icons/eye-off.js:
15141
15160
  lucide-react/dist/esm/icons/eye.js:
15142
15161
  lucide-react/dist/esm/icons/funnel.js:
15162
+ lucide-react/dist/esm/icons/info.js:
15143
15163
  lucide-react/dist/esm/icons/layers.js:
15144
15164
  lucide-react/dist/esm/icons/minus.js:
15145
15165
  lucide-react/dist/esm/icons/pin.js:
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@rufous/ui",
3
3
  "private": false,
4
- "version": "0.3.45",
4
+ "version": "0.3.47",
5
5
  "type": "module",
6
6
  "description": "Experimental: A lightweight React UI component library (Beta)",
7
7
  "style": "./dist/main.css",