@rufous/ui 0.3.46 → 0.3.48

package/dist/main.cjs

@@ -951,7 +951,7 @@ var notificationIcon_default = NotificationIcon;
 
 // lib/icons/refreshIcon.tsx
 var React42 = __toESM(require("react"), 1);
-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" }));
+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 }));
 var refreshIcon_default = RefreshIcon;
 
 // lib/icons/dollarIcon.tsx
@@ -1810,8 +1810,16 @@ var __iconNode14 = [
 ];
 var Funnel = createLucideIcon("funnel", __iconNode14);
 
-// node_modules/lucide-react/dist/esm/icons/layers.js
+// node_modules/lucide-react/dist/esm/icons/info.js
 var __iconNode15 = [
+  ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
+  ["path", { d: "M12 16v-4", key: "1dtifu" }],
+  ["path", { d: "M12 8h.01", key: "e9boi3" }]
+];
+var Info = createLucideIcon("info", __iconNode15);
+
+// node_modules/lucide-react/dist/esm/icons/layers.js
+var __iconNode16 = [
   [
     "path",
     {
@@ -1834,14 +1842,14 @@ var __iconNode15 = [
     }
   ]
 ];
-var Layers = createLucideIcon("layers", __iconNode15);
+var Layers = createLucideIcon("layers", __iconNode16);
 
 // node_modules/lucide-react/dist/esm/icons/minus.js
-var __iconNode16 = [["path", { d: "M5 12h14", key: "1ays0h" }]];
-var Minus = createLucideIcon("minus", __iconNode16);
+var __iconNode17 = [["path", { d: "M5 12h14", key: "1ays0h" }]];
+var Minus = createLucideIcon("minus", __iconNode17);
 
 // node_modules/lucide-react/dist/esm/icons/pin.js
-var __iconNode17 = [
+var __iconNode18 = [
   ["path", { d: "M12 17v5", key: "bb1du9" }],
   [
     "path",
@@ -1851,38 +1859,38 @@ var __iconNode17 = [
     }
   ]
 ];
-var Pin = createLucideIcon("pin", __iconNode17);
+var Pin = createLucideIcon("pin", __iconNode18);
 
 // node_modules/lucide-react/dist/esm/icons/plus.js
-var __iconNode18 = [
+var __iconNode19 = [
   ["path", { d: "M5 12h14", key: "1ays0h" }],
   ["path", { d: "M12 5v14", key: "s699le" }]
 ];
-var Plus = createLucideIcon("plus", __iconNode18);
+var Plus = createLucideIcon("plus", __iconNode19);
 
 // node_modules/lucide-react/dist/esm/icons/search.js
-var __iconNode19 = [
+var __iconNode20 = [
   ["path", { d: "m21 21-4.34-4.34", key: "14j7rj" }],
   ["circle", { cx: "11", cy: "11", r: "8", key: "4ej97u" }]
 ];
-var Search = createLucideIcon("search", __iconNode19);
+var Search = createLucideIcon("search", __iconNode20);
 
 // node_modules/lucide-react/dist/esm/icons/trash-2.js
-var __iconNode20 = [
+var __iconNode21 = [
   ["path", { d: "M10 11v6", key: "nco0om" }],
   ["path", { d: "M14 11v6", key: "outv1u" }],
   ["path", { d: "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6", key: "miytrc" }],
   ["path", { d: "M3 6h18", key: "d0wm0j" }],
   ["path", { d: "M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2", key: "e791ji" }]
 ];
-var Trash2 = createLucideIcon("trash-2", __iconNode20);
+var Trash2 = createLucideIcon("trash-2", __iconNode21);
 
 // node_modules/lucide-react/dist/esm/icons/x.js
-var __iconNode21 = [
+var __iconNode22 = [
   ["path", { d: "M18 6 6 18", key: "1bl5f8" }],
   ["path", { d: "m6 6 12 12", key: "d8bk6v" }]
 ];
-var X = createLucideIcon("x", __iconNode21);
+var X = createLucideIcon("x", __iconNode22);
 
 // lib/Dialogs/BaseDialog.tsx
 var DialogDepthContext = React113.createContext(0);
@@ -5707,10 +5715,10 @@ function DataGrid({
   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(
+    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(
       "input",
       {
-        className: "dg-search",
+        className: `dg-search${searchableColumns && searchableColumns.length ? " dg-search--with-info" : ""}`,
         placeholder: "Search\u2026",
         value: filterText,
         onChange: (e) => {
@@ -5719,7 +5727,14 @@ function DataGrid({
           if (onPaginationModelChange) onPaginationModelChange({ page: 0, pageSize: activePageSize });
         }
       }
-    )), slotAt("after-search"), showFilterBtn && /* @__PURE__ */ import_react17.default.createElement(Tooltip, { title: "Filters", placement: "top" }, /* @__PURE__ */ import_react17.default.createElement(
+    ), searchableColumns && searchableColumns.length > 0 && /* @__PURE__ */ import_react17.default.createElement("span", { className: "dg-search-info" }, /* @__PURE__ */ import_react17.default.createElement(
+      Tooltip,
+      {
+        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(", ")),
+        placement: "top"
+      },
+      /* @__PURE__ */ import_react17.default.createElement("span", { className: "dg-search-info__trigger", tabIndex: 0 }, /* @__PURE__ */ import_react17.default.createElement(Info, { size: 14 }))
+    ))), 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" : ""}`,
@@ -15310,6 +15325,7 @@ lucide-react/dist/esm/icons/ellipsis-vertical.js:
 lucide-react/dist/esm/icons/eye-off.js:
 lucide-react/dist/esm/icons/eye.js:
 lucide-react/dist/esm/icons/funnel.js:
+lucide-react/dist/esm/icons/info.js:
 lucide-react/dist/esm/icons/layers.js:
 lucide-react/dist/esm/icons/minus.js:
 lucide-react/dist/esm/icons/pin.js:

package/dist/main.css

@@ -387,7 +387,7 @@
 .dg-search-wrap {
   position: relative;
 }
-.dg-search-wrap svg {
+.dg-search-wrap > svg {
   position: absolute;
   left: 10px;
   top: 50%;
@@ -406,9 +406,35 @@
   width: 220px;
   transition: border-color 0.2s;
 }
+.dg-search--with-info {
+  padding-right: 32px;
+}
 .dg-search:focus {
   border-color: var(--primary-color);
 }
+.dg-search-info {
+  position: absolute;
+  right: 10px;
+  top: 50%;
+  transform: translateY(-50%);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 0;
+}
+.dg-search-info__trigger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--text-secondary);
+  cursor: help;
+  outline: none;
+  line-height: 0;
+}
+.dg-search-info__trigger:hover,
+.dg-search-info__trigger:focus-visible {
+  color: var(--text-color);
+}
 .dg-toolbar-select {
   padding: 8px 28px 8px 10px;
   border: 1px solid var(--border-color);

package/dist/main.js

@@ -690,7 +690,7 @@ var notificationIcon_default = NotificationIcon;
 
 // lib/icons/refreshIcon.tsx
 import * as React42 from "react";
-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" }));
+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 }));
 var refreshIcon_default = RefreshIcon;
 
 // lib/icons/dollarIcon.tsx
@@ -1549,8 +1549,16 @@ var __iconNode14 = [
 ];
 var Funnel = createLucideIcon("funnel", __iconNode14);
 
-// node_modules/lucide-react/dist/esm/icons/layers.js
+// node_modules/lucide-react/dist/esm/icons/info.js
 var __iconNode15 = [
+  ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
+  ["path", { d: "M12 16v-4", key: "1dtifu" }],
+  ["path", { d: "M12 8h.01", key: "e9boi3" }]
+];
+var Info = createLucideIcon("info", __iconNode15);
+
+// node_modules/lucide-react/dist/esm/icons/layers.js
+var __iconNode16 = [
   [
     "path",
     {
@@ -1573,14 +1581,14 @@ var __iconNode15 = [
     }
   ]
 ];
-var Layers = createLucideIcon("layers", __iconNode15);
+var Layers = createLucideIcon("layers", __iconNode16);
 
 // node_modules/lucide-react/dist/esm/icons/minus.js
-var __iconNode16 = [["path", { d: "M5 12h14", key: "1ays0h" }]];
-var Minus = createLucideIcon("minus", __iconNode16);
+var __iconNode17 = [["path", { d: "M5 12h14", key: "1ays0h" }]];
+var Minus = createLucideIcon("minus", __iconNode17);
 
 // node_modules/lucide-react/dist/esm/icons/pin.js
-var __iconNode17 = [
+var __iconNode18 = [
   ["path", { d: "M12 17v5", key: "bb1du9" }],
   [
     "path",
@@ -1590,38 +1598,38 @@ var __iconNode17 = [
     }
   ]
 ];
-var Pin = createLucideIcon("pin", __iconNode17);
+var Pin = createLucideIcon("pin", __iconNode18);
 
 // node_modules/lucide-react/dist/esm/icons/plus.js
-var __iconNode18 = [
+var __iconNode19 = [
   ["path", { d: "M5 12h14", key: "1ays0h" }],
   ["path", { d: "M12 5v14", key: "s699le" }]
 ];
-var Plus = createLucideIcon("plus", __iconNode18);
+var Plus = createLucideIcon("plus", __iconNode19);
 
 // node_modules/lucide-react/dist/esm/icons/search.js
-var __iconNode19 = [
+var __iconNode20 = [
   ["path", { d: "m21 21-4.34-4.34", key: "14j7rj" }],
   ["circle", { cx: "11", cy: "11", r: "8", key: "4ej97u" }]
 ];
-var Search = createLucideIcon("search", __iconNode19);
+var Search = createLucideIcon("search", __iconNode20);
 
 // node_modules/lucide-react/dist/esm/icons/trash-2.js
-var __iconNode20 = [
+var __iconNode21 = [
   ["path", { d: "M10 11v6", key: "nco0om" }],
   ["path", { d: "M14 11v6", key: "outv1u" }],
   ["path", { d: "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6", key: "miytrc" }],
   ["path", { d: "M3 6h18", key: "d0wm0j" }],
   ["path", { d: "M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2", key: "e791ji" }]
 ];
-var Trash2 = createLucideIcon("trash-2", __iconNode20);
+var Trash2 = createLucideIcon("trash-2", __iconNode21);
 
 // node_modules/lucide-react/dist/esm/icons/x.js
-var __iconNode21 = [
+var __iconNode22 = [
   ["path", { d: "M18 6 6 18", key: "1bl5f8" }],
   ["path", { d: "m6 6 12 12", key: "d8bk6v" }]
 ];
-var X = createLucideIcon("x", __iconNode21);
+var X = createLucideIcon("x", __iconNode22);
 
 // lib/Dialogs/BaseDialog.tsx
 var DialogDepthContext = React113.createContext(0);
@@ -5473,10 +5481,10 @@ function DataGrid({
   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(
+    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(
       "input",
       {
-        className: "dg-search",
+        className: `dg-search${searchableColumns && searchableColumns.length ? " dg-search--with-info" : ""}`,
         placeholder: "Search\u2026",
         value: filterText,
         onChange: (e) => {
@@ -5485,7 +5493,14 @@ function DataGrid({
           if (onPaginationModelChange) onPaginationModelChange({ page: 0, pageSize: activePageSize });
         }
       }
-    )), slotAt("after-search"), showFilterBtn && /* @__PURE__ */ React123.createElement(Tooltip, { title: "Filters", placement: "top" }, /* @__PURE__ */ React123.createElement(
+    ), searchableColumns && searchableColumns.length > 0 && /* @__PURE__ */ React123.createElement("span", { className: "dg-search-info" }, /* @__PURE__ */ React123.createElement(
+      Tooltip,
+      {
+        title: /* @__PURE__ */ React123.createElement("span", null, "Searching in:", " ", resolvedColumns.filter((col) => searchableColumns.includes(String(col.field))).map((col) => col.headerName || String(col.field)).join(", ")),
+        placement: "top"
+      },
+      /* @__PURE__ */ React123.createElement("span", { className: "dg-search-info__trigger", tabIndex: 0 }, /* @__PURE__ */ React123.createElement(Info, { size: 14 }))
+    ))), slotAt("after-search"), showFilterBtn && /* @__PURE__ */ React123.createElement(Tooltip, { title: "Filters", placement: "top" }, /* @__PURE__ */ React123.createElement(
       "button",
       {
         className: `dg-icon-btn ${hasActiveFilters ? "active" : ""}`,
@@ -15144,6 +15159,7 @@ lucide-react/dist/esm/icons/ellipsis-vertical.js:
 lucide-react/dist/esm/icons/eye-off.js:
 lucide-react/dist/esm/icons/eye.js:
 lucide-react/dist/esm/icons/funnel.js:
+lucide-react/dist/esm/icons/info.js:
 lucide-react/dist/esm/icons/layers.js:
 lucide-react/dist/esm/icons/minus.js:
 lucide-react/dist/esm/icons/pin.js:

package/package.json

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