@rufous/ui 0.3.17 → 0.3.18

package/dist/main.cjs

@@ -4697,7 +4697,11 @@ function DataGrid({
   onRowDoubleClick,
   onCellDoubleClick,
   headerActions,
-  toolbarContent
+  toolbarContent,
+  searchableColumns,
+  onSearchChange,
+  onFiltersChange,
+  hideTopExport = false
 }) {
   const sxClass = useSx(sx);
   const [editingCell, setEditingCell] = (0, import_react23.useState)(null);
@@ -4802,6 +4806,9 @@ function DataGrid({
       return next;
     });
   }, [initialColumnsProp]);
+  (0, import_react23.useEffect)(() => {
+    onFiltersChange?.(advancedFilters);
+  }, [advancedFilters, onFiltersChange]);
   const handleSort = (fieldKey, dir) => {
     if (dir !== void 0) {
       setSortField(fieldKey);
@@ -4851,10 +4858,10 @@ function DataGrid({
   };
   const filteredData = (0, import_react23.useMemo)(() => {
     return data.filter((item) => {
-      const matchesGlobal = !filterText || resolvedColumns.some((col) => {
-        if (col.hidden) return false;
-        return getDisplayValue(item, col).toLowerCase().includes(filterText.toLowerCase());
-      });
+      const searchCols = searchableColumns ? resolvedColumns.filter((col) => searchableColumns.includes(String(col.field))) : resolvedColumns.filter((col) => !col.hidden);
+      const matchesGlobal = !filterText || searchCols.some(
+        (col) => getDisplayValue(item, col).toLowerCase().includes(filterText.toLowerCase())
+      );
       const evalFilter = (f) => {
         if (!f.value && f.operator !== "is empty" && f.operator !== "is not empty") return true;
         const col = resolvedColumns.find((c) => String(c.field) === f.column || String(c.key) === f.column);
@@ -4962,7 +4969,11 @@ function DataGrid({
       }
       return matchesGlobal && matchesAdvanced;
     });
-  }, [data, filterText, advancedFilters, resolvedColumns]);
+  }, [data, filterText, advancedFilters, resolvedColumns, searchableColumns]);
+  (0, import_react23.useEffect)(() => {
+    if (!onSearchChange || !filterText) return;
+    if (filteredData.length === 0) onSearchChange(filterText);
+  }, [filteredData, filterText, onSearchChange]);
   const sortedData = (0, import_react23.useMemo)(() => {
     if (!sortField || !sortDirection) return filteredData;
     const col = resolvedColumns.find((c) => c.field === sortField);
@@ -4993,11 +5004,16 @@ function DataGrid({
       (item) => exportableCols.map((c) => {
         const field = String(c.field);
         const raw = item[field];
-        let val = c.valueGetter ? c.valueGetter({ value: raw, row: item, field }) : raw;
-        if (c.valueFormatter) {
-          val = c.valueFormatter({ value: val, row: item, field });
+        let str;
+        if (c.exportValue) {
+          str = c.exportValue(raw, item).replace(/"/g, '""');
+        } else {
+          let val = c.valueGetter ? c.valueGetter({ value: raw, row: item, field }) : raw;
+          if (c.valueFormatter) {
+            val = c.valueFormatter({ value: val, row: item, field });
+          }
+          str = val === null || val === void 0 ? "" : String(val).replace(/"/g, '""');
         }
-        const str = val === null || val === void 0 ? "" : String(val).replace(/"/g, '""');
         return `"${str}"`;
       }).join(",")
     );
@@ -5090,7 +5106,7 @@ function DataGrid({
       onClick: () => setShowManageColumns(true)
     },
     /* @__PURE__ */ import_react23.default.createElement(import_lucide_react2.Columns, { size: 16 })
-  )), /* @__PURE__ */ import_react23.default.createElement("button", { className: "dg-action-btn", onClick: handleExport }, /* @__PURE__ */ import_react23.default.createElement(import_lucide_react2.Download, { size: 14 }), " Export CSV"), headerActions && /* @__PURE__ */ import_react23.default.createElement("div", { className: `dg-header-slot ${alignClass(headerActions.align)}` }, headerActions.content))), /* @__PURE__ */ import_react23.default.createElement("div", { className: `dg-toolbar ${alignClass(toolbarContent?.align)}` }, toolbarContent?.content || ""), /* @__PURE__ */ import_react23.default.createElement("div", { className: `dg-table-wrap${paginatedData.length === 0 && !loading ? " dg-table-wrap--empty" : ""}` }, loading && /* @__PURE__ */ import_react23.default.createElement("div", { className: "dg-loading-overlay" }, /* @__PURE__ */ import_react23.default.createElement("div", { className: "dg-loading-spinner" })), /* @__PURE__ */ import_react23.default.createElement("table", { className: "dg-table" }, /* @__PURE__ */ import_react23.default.createElement("thead", null, /* @__PURE__ */ import_react23.default.createElement("tr", null, visibleColumns.map((col, idx) => {
+  )), !hideTopExport && /* @__PURE__ */ import_react23.default.createElement("button", { className: "dg-action-btn", onClick: handleExport }, /* @__PURE__ */ import_react23.default.createElement(import_lucide_react2.Download, { size: 14 }), " Export CSV"), headerActions && /* @__PURE__ */ import_react23.default.createElement("div", { className: `dg-header-slot ${alignClass(headerActions.align)}` }, headerActions.content))), /* @__PURE__ */ import_react23.default.createElement("div", { className: `dg-toolbar ${alignClass(toolbarContent?.align)}` }, toolbarContent?.content || ""), /* @__PURE__ */ import_react23.default.createElement("div", { className: `dg-table-wrap${paginatedData.length === 0 && !loading ? " dg-table-wrap--empty" : ""}` }, loading && /* @__PURE__ */ import_react23.default.createElement("div", { className: "dg-loading-overlay" }, /* @__PURE__ */ import_react23.default.createElement("div", { className: "dg-loading-spinner" })), /* @__PURE__ */ import_react23.default.createElement("table", { className: "dg-table" }, /* @__PURE__ */ import_react23.default.createElement("thead", null, /* @__PURE__ */ import_react23.default.createElement("tr", null, visibleColumns.map((col, idx) => {
     const colField = String(col.field);
     const width = columnWidths[colField] || 200;
     const leftOffset = getLeftOffset(col, idx);
@@ -5111,9 +5127,8 @@ function DataGrid({
           onClick: () => col.sortable !== false && handleSort(col.field || "")
         },
         col.headerName,
-        isSorted && sortDirection === "asc" && /* @__PURE__ */ import_react23.default.createElement(import_lucide_react2.ChevronUp, { size: 12 }),
-        isSorted && sortDirection === "desc" && /* @__PURE__ */ import_react23.default.createElement(import_lucide_react2.ChevronDown, { size: 12 })
-      ), /* @__PURE__ */ import_react23.default.createElement("div", { className: `dg-th-actions${isFiltered ? " dg-th-actions--filtered" : ""}` }, isFiltered && /* @__PURE__ */ import_react23.default.createElement(import_lucide_react2.Filter, { size: 11, style: { color: "var(--primary-color)" } }), !col.disableColumnMenu && /* @__PURE__ */ import_react23.default.createElement(
+        col.sortable !== false && /* @__PURE__ */ import_react23.default.createElement("span", { className: `dg-sort-icon${isSorted ? " dg-sort-icon--active" : ""}` }, isSorted && sortDirection === "asc" && /* @__PURE__ */ import_react23.default.createElement(import_lucide_react2.ChevronUp, { size: 14 }), isSorted && sortDirection === "desc" && /* @__PURE__ */ import_react23.default.createElement(import_lucide_react2.ChevronDown, { size: 14 }), !isSorted && /* @__PURE__ */ import_react23.default.createElement(import_lucide_react2.ChevronsUpDown, { size: 14 }))
+      ), /* @__PURE__ */ import_react23.default.createElement("div", { className: `dg-th-actions${isFiltered ? " dg-th-actions--filtered" : ""}` }, isFiltered && /* @__PURE__ */ import_react23.default.createElement("button", { className: "dg-th-filter-btn", onClick: () => setShowAdvancedFilter(true) }, /* @__PURE__ */ import_react23.default.createElement(import_lucide_react2.Filter, { size: 11 })), !col.disableColumnMenu && /* @__PURE__ */ import_react23.default.createElement(
         "button",
         {
           className: "dg-th-menu-btn",
@@ -5205,7 +5220,7 @@ function DataGrid({
       },
       action.icon
     )))));
-  })()))))), paginatedData.length === 0 && /* @__PURE__ */ import_react23.default.createElement("div", { className: "dg-empty-state" }, /* @__PURE__ */ import_react23.default.createElement("svg", { className: "dg-empty-icon", viewBox: "0 0 200 160", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ import_react23.default.createElement("rect", { x: "20", y: "30", width: "160", height: "100", rx: "8", fill: "var(--hover-color)", stroke: "var(--border-color)", strokeWidth: "1.5" }), /* @__PURE__ */ import_react23.default.createElement("rect", { x: "20", y: "30", width: "160", height: "28", rx: "8", fill: "var(--border-color)", opacity: "0.5" }), /* @__PURE__ */ import_react23.default.createElement("rect", { x: "20", y: "50", width: "160", height: "8", rx: "0", fill: "var(--border-color)", opacity: "0.5" }), /* @__PURE__ */ import_react23.default.createElement("line", { x1: "72", y1: "30", x2: "72", y2: "130", stroke: "var(--border-color)", strokeWidth: "1" }), /* @__PURE__ */ import_react23.default.createElement("line", { x1: "128", y1: "30", x2: "128", y2: "130", stroke: "var(--border-color)", strokeWidth: "1" }), /* @__PURE__ */ import_react23.default.createElement("line", { x1: "20", y1: "78", x2: "180", y2: "78", stroke: "var(--border-color)", strokeWidth: "1" }), /* @__PURE__ */ import_react23.default.createElement("line", { x1: "20", y1: "104", x2: "180", y2: "104", stroke: "var(--border-color)", strokeWidth: "1" }), /* @__PURE__ */ import_react23.default.createElement("rect", { x: "32", y: "87", width: "28", height: "6", rx: "3", fill: "var(--border-color)", opacity: "0.4" }), /* @__PURE__ */ import_react23.default.createElement("rect", { x: "84", y: "87", width: "28", height: "6", rx: "3", fill: "var(--border-color)", opacity: "0.4" }), /* @__PURE__ */ import_react23.default.createElement("rect", { x: "140", y: "87", width: "28", height: "6", rx: "3", fill: "var(--border-color)", opacity: "0.4" }), /* @__PURE__ */ import_react23.default.createElement("rect", { x: "32", y: "113", width: "20", height: "6", rx: "3", fill: "var(--border-color)", opacity: "0.3" }), /* @__PURE__ */ import_react23.default.createElement("rect", { x: "84", y: "113", width: "32", height: "6", rx: "3", fill: "var(--border-color)", opacity: "0.3" }), /* @__PURE__ */ import_react23.default.createElement("rect", { x: "140", y: "113", width: "20", height: "6", rx: "3", fill: "var(--border-color)", opacity: "0.3" }), /* @__PURE__ */ import_react23.default.createElement("circle", { cx: "148", cy: "108", r: "26", fill: "var(--surface-color)", stroke: "var(--border-color)", strokeWidth: "1.5" }), /* @__PURE__ */ import_react23.default.createElement("circle", { cx: "145", cy: "105", r: "10", stroke: "var(--text-secondary)", strokeWidth: "2.5", opacity: "0.5" }), /* @__PURE__ */ import_react23.default.createElement("line", { x1: "152", y1: "113", x2: "161", y2: "122", stroke: "var(--text-secondary)", strokeWidth: "2.5", strokeLinecap: "round", opacity: "0.5" }), /* @__PURE__ */ import_react23.default.createElement("line", { x1: "141", y1: "101", x2: "149", y2: "109", stroke: "var(--text-secondary)", strokeWidth: "2", strokeLinecap: "round", opacity: "0.5" }), /* @__PURE__ */ import_react23.default.createElement("line", { x1: "149", y1: "101", x2: "141", y2: "109", stroke: "var(--text-secondary)", strokeWidth: "2", strokeLinecap: "round", opacity: "0.5" })), /* @__PURE__ */ import_react23.default.createElement("p", { className: "dg-empty-title" }, "No data found"), /* @__PURE__ */ import_react23.default.createElement("p", { className: "dg-empty-subtitle" }, filterText || hasActiveFilters ? "Try adjusting your search or filters" : "No records to display"))), pagination && /* @__PURE__ */ import_react23.default.createElement("div", { className: "dg-pagination" }, /* @__PURE__ */ import_react23.default.createElement("div", { className: "dg-page-info" }, /* @__PURE__ */ import_react23.default.createElement("div", { className: "dg-per-page" }, /* @__PURE__ */ import_react23.default.createElement("span", null, "Rows per page:"), /* @__PURE__ */ import_react23.default.createElement(
+  })()))))), paginatedData.length === 0 && /* @__PURE__ */ import_react23.default.createElement("div", { className: "dg-empty-state" }, /* @__PURE__ */ import_react23.default.createElement("svg", { className: "dg-empty-icon", viewBox: "0 0 200 160", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ import_react23.default.createElement("rect", { x: "20", y: "30", width: "160", height: "100", rx: "8", fill: "var(--hover-color)", stroke: "var(--border-color)", strokeWidth: "1.5" }), /* @__PURE__ */ import_react23.default.createElement("rect", { x: "20", y: "30", width: "160", height: "28", rx: "8", fill: "var(--border-color)", opacity: "0.5" }), /* @__PURE__ */ import_react23.default.createElement("rect", { x: "20", y: "50", width: "160", height: "8", rx: "0", fill: "var(--border-color)", opacity: "0.5" }), /* @__PURE__ */ import_react23.default.createElement("line", { x1: "72", y1: "30", x2: "72", y2: "130", stroke: "var(--border-color)", strokeWidth: "1" }), /* @__PURE__ */ import_react23.default.createElement("line", { x1: "128", y1: "30", x2: "128", y2: "130", stroke: "var(--border-color)", strokeWidth: "1" }), /* @__PURE__ */ import_react23.default.createElement("line", { x1: "20", y1: "78", x2: "180", y2: "78", stroke: "var(--border-color)", strokeWidth: "1" }), /* @__PURE__ */ import_react23.default.createElement("line", { x1: "20", y1: "104", x2: "180", y2: "104", stroke: "var(--border-color)", strokeWidth: "1" }), /* @__PURE__ */ import_react23.default.createElement("rect", { x: "32", y: "87", width: "28", height: "6", rx: "3", fill: "var(--border-color)", opacity: "0.4" }), /* @__PURE__ */ import_react23.default.createElement("rect", { x: "84", y: "87", width: "28", height: "6", rx: "3", fill: "var(--border-color)", opacity: "0.4" }), /* @__PURE__ */ import_react23.default.createElement("rect", { x: "140", y: "87", width: "28", height: "6", rx: "3", fill: "var(--border-color)", opacity: "0.4" }), /* @__PURE__ */ import_react23.default.createElement("rect", { x: "32", y: "113", width: "20", height: "6", rx: "3", fill: "var(--border-color)", opacity: "0.3" }), /* @__PURE__ */ import_react23.default.createElement("rect", { x: "84", y: "113", width: "32", height: "6", rx: "3", fill: "var(--border-color)", opacity: "0.3" }), /* @__PURE__ */ import_react23.default.createElement("rect", { x: "140", y: "113", width: "20", height: "6", rx: "3", fill: "var(--border-color)", opacity: "0.3" }), /* @__PURE__ */ import_react23.default.createElement("circle", { cx: "148", cy: "108", r: "26", fill: "var(--surface-color)", stroke: "var(--border-color)", strokeWidth: "1.5" }), /* @__PURE__ */ import_react23.default.createElement("circle", { cx: "145", cy: "105", r: "10", stroke: "var(--text-secondary)", strokeWidth: "2.5", opacity: "0.5" }), /* @__PURE__ */ import_react23.default.createElement("line", { x1: "152", y1: "113", x2: "161", y2: "122", stroke: "var(--text-secondary)", strokeWidth: "2.5", strokeLinecap: "round", opacity: "0.5" }), /* @__PURE__ */ import_react23.default.createElement("line", { x1: "141", y1: "101", x2: "149", y2: "109", stroke: "var(--text-secondary)", strokeWidth: "2", strokeLinecap: "round", opacity: "0.5" }), /* @__PURE__ */ import_react23.default.createElement("line", { x1: "149", y1: "101", x2: "141", y2: "109", stroke: "var(--text-secondary)", strokeWidth: "2", strokeLinecap: "round", opacity: "0.5" })), /* @__PURE__ */ import_react23.default.createElement("p", { className: "dg-empty-title" }, "No data found"), /* @__PURE__ */ import_react23.default.createElement("p", { className: "dg-empty-subtitle" }, filterText || hasActiveFilters ? "Try adjusting your search or filters" : "No records to display"))), pagination && /* @__PURE__ */ import_react23.default.createElement("div", { className: "dg-pagination" }, /* @__PURE__ */ import_react23.default.createElement("div", { className: "dg-page-info" }, /* @__PURE__ */ import_react23.default.createElement(Tooltip, { title: "Export CSV", placement: "top" }, /* @__PURE__ */ import_react23.default.createElement("button", { className: "dg-icon-btn", onClick: handleExport }, /* @__PURE__ */ import_react23.default.createElement(import_lucide_react2.Download, { size: 14 }))), /* @__PURE__ */ import_react23.default.createElement("div", { className: "dg-per-page" }, /* @__PURE__ */ import_react23.default.createElement("span", null, "Rows per page:"), /* @__PURE__ */ import_react23.default.createElement(
     FilterSelect,
     {
       placement: "top",
@@ -9520,6 +9535,7 @@ function SmartSelect({
   value,
   onChange,
   onSearchChange,
+  debounceMs = 300,
   getOptionLabel,
   getOptionValue,
   getOptionSubLabel,
@@ -9544,6 +9560,10 @@ function SmartSelect({
   style,
   sx
 }) {
+  const debounceTimer = (0, import_react51.useRef)(null);
+  (0, import_react51.useEffect)(() => () => {
+    if (debounceTimer.current) clearTimeout(debounceTimer.current);
+  }, []);
   const getValue = (0, import_react51.useCallback)(
     (o) => getOptionValue ? getOptionValue(o) : String(getOptionLabel(o)),
     [getOptionValue, getOptionLabel]
@@ -9570,6 +9590,7 @@ function SmartSelect({
   }, [multiple, value, getValue]);
   const handleInputChange = (0, import_react51.useCallback)((_, inputValue) => {
     if (!onSearchChange) return;
+    if (debounceTimer.current) clearTimeout(debounceTimer.current);
     if (!inputValue) {
       onSearchChange("");
       return;
@@ -9577,10 +9598,15 @@ function SmartSelect({
     const hasLocalMatch = flatOptionsList.some(
       (opt) => getOptionLabel(opt).toLowerCase().includes(inputValue.toLowerCase()) || (getOptionSubLabel?.(opt) ?? "").toLowerCase().includes(inputValue.toLowerCase())
     );
-    if (!hasLocalMatch) {
+    if (hasLocalMatch) return;
+    if (debounceMs <= 0) {
       onSearchChange(inputValue);
+    } else {
+      debounceTimer.current = setTimeout(() => {
+        onSearchChange(inputValue);
+      }, debounceMs);
     }
-  }, [onSearchChange, flatOptionsList, getOptionLabel, getOptionSubLabel]);
+  }, [onSearchChange, debounceMs, flatOptionsList, getOptionLabel, getOptionSubLabel]);
   const handleChange = (0, import_react51.useCallback)((_, newValue) => {
     if (!multiple || !allowChildNodesSelection || !getOptionChildren) {
       onChange?.(newValue);

package/dist/main.css

@@ -507,6 +507,21 @@
 .dg-th-label.no-sort {
   cursor: default;
 }
+.dg-sort-icon {
+  display: flex;
+  align-items: center;
+  opacity: 0;
+  transition: opacity 0.15s;
+  flex-shrink: 0;
+  color: var(--text-secondary);
+}
+.dg-sort-icon--active {
+  opacity: 1;
+  color: var(--primary-color);
+}
+.dg-thead-cell:hover .dg-sort-icon {
+  opacity: 1;
+}
 .dg-th-actions {
   display: flex;
   align-items: center;
@@ -534,6 +549,20 @@
   background: var(--border-color);
   color: var(--text-color);
 }
+.dg-th-filter-btn {
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 3px;
+  border-radius: 4px;
+  color: var(--primary-color);
+  display: flex;
+  align-items: center;
+  transition: background 0.15s;
+}
+.dg-th-filter-btn:hover {
+  background: rgba(164, 27, 6, 0.08);
+}
 .dg-resizer {
   width: 4px;
   height: 16px;

package/dist/main.d.cts

@@ -850,6 +850,12 @@ interface Column<T> {
         row: T;
         field: string;
     }) => string;
+    /**
+     * Override the value written to CSV export for this column.
+     * Receives the raw field value and the full row item.
+     * Takes precedence over valueGetter / valueFormatter for export purposes.
+     */
+    exportValue?: (value: any, item: T) => string;
     width?: string | number;
     minWidth?: string | number;
     maxWidth?: string | number;
@@ -875,6 +881,12 @@ interface Column<T> {
     disableColumnMenu?: boolean;
     isExportable?: boolean;
 }
+interface FilterState {
+    column: string;
+    operator: string;
+    value: string;
+    logic: 'AND' | 'OR';
+}
 interface Action<T> {
     label: string;
     icon: React__default.ReactNode;
@@ -932,11 +944,25 @@ interface DataGridProps<T> {
     headerActions?: DataGridToolbarSlot;
     /** Extra content rendered in a second row below the header */
     toolbarContent?: DataGridToolbarSlot;
+    /**
+     * Limit global search to these column field names.
+     * When omitted, all visible columns are searched.
+     */
+    searchableColumns?: string[];
+    /**
+     * Called when the search query finds no local results.
+     * Use this to trigger a server-side search.
+     */
+    onSearchChange?: (query: string) => void;
+    /** Called whenever the applied advanced filters change. */
+    onFiltersChange?: (filters: FilterState[]) => void;
+    /** Hide the "Export CSV" button in the header toolbar. */
+    hideTopExport?: boolean;
 }
 
 declare function DataGrid<T extends {
     id: string | number;
-}>({ columns: initialColumnsProp, data, actions, loading, pagination, paginationMode, rowCount, paginationModel, onPaginationModelChange, pageSize: initialPageSize, pageSizeOptions, title, className, sx, onRowDoubleClick, onCellDoubleClick, headerActions, toolbarContent, }: DataGridProps<T>): React__default.JSX.Element;
+}>({ columns: initialColumnsProp, data, actions, loading, pagination, paginationMode, rowCount, paginationModel, onPaginationModelChange, pageSize: initialPageSize, pageSizeOptions, title, className, sx, onRowDoubleClick, onCellDoubleClick, headerActions, toolbarContent, searchableColumns, onSearchChange, onFiltersChange, hideTopExport, }: DataGridProps<T>): React__default.JSX.Element;
 
 type SelectOption = {
     value: string | number;
@@ -1886,6 +1912,11 @@ interface SmartSelectProps<T = any> {
      * use this to trigger an API / server search.
      */
     onSearchChange?: (query: string) => void;
+    /**
+     * Debounce delay in ms before `onSearchChange` fires.
+     * Defaults to 300 ms. Pass 0 to disable debouncing.
+     */
+    debounceMs?: number;
     /** Primary display label for an option (required) */
     getOptionLabel: (option: T) => string;
     /** Unique key for an option — defaults to the label string */
@@ -1939,7 +1970,7 @@ interface SmartSelectProps<T = any> {
     style?: CSSProperties;
     sx?: SxProp;
 }
-declare function SmartSelect<T = any>({ options, value, onChange, onSearchChange, getOptionLabel, getOptionValue, getOptionSubLabel, getOptionChildren, multiple, allowChildNodesSelection, loading, loadingText, filterOptions: filterOptionsProp, renderOption: renderOptionProp, limitTags, label, placeholder, variant, size, disabled, error, helperText, fullWidth, required, className, style, sx, }: SmartSelectProps<T>): React__default.JSX.Element;
+declare function SmartSelect<T = any>({ options, value, onChange, onSearchChange, debounceMs, getOptionLabel, getOptionValue, getOptionSubLabel, getOptionChildren, multiple, allowChildNodesSelection, loading, loadingText, filterOptions: filterOptionsProp, renderOption: renderOptionProp, limitTags, label, placeholder, variant, size, disabled, error, helperText, fullWidth, required, className, style, sx, }: SmartSelectProps<T>): React__default.JSX.Element;
 
 type ToolbarButton = 'undo' | 'redo' | 'ai' | 'paragraph' | 'fontsize' | 'font' | 'color' | 'bold' | 'italic' | 'strike' | 'link' | 'lineheight' | 'ul' | 'ol' | 'align' | 'indent' | 'outdent' | 'table' | 'image' | 'video' | 'cut' | 'copy' | 'paste' | 'specialchars' | 'code' | 'fullscreen' | 'tts' | 'stt' | 'translate' | 'todo' | '|';
 type EditorVariant = 'default' | 'basic';

package/dist/main.d.ts

@@ -850,6 +850,12 @@ interface Column<T> {
         row: T;
         field: string;
     }) => string;
+    /**
+     * Override the value written to CSV export for this column.
+     * Receives the raw field value and the full row item.
+     * Takes precedence over valueGetter / valueFormatter for export purposes.
+     */
+    exportValue?: (value: any, item: T) => string;
     width?: string | number;
     minWidth?: string | number;
     maxWidth?: string | number;
@@ -875,6 +881,12 @@ interface Column<T> {
     disableColumnMenu?: boolean;
     isExportable?: boolean;
 }
+interface FilterState {
+    column: string;
+    operator: string;
+    value: string;
+    logic: 'AND' | 'OR';
+}
 interface Action<T> {
     label: string;
     icon: React__default.ReactNode;
@@ -932,11 +944,25 @@ interface DataGridProps<T> {
     headerActions?: DataGridToolbarSlot;
     /** Extra content rendered in a second row below the header */
     toolbarContent?: DataGridToolbarSlot;
+    /**
+     * Limit global search to these column field names.
+     * When omitted, all visible columns are searched.
+     */
+    searchableColumns?: string[];
+    /**
+     * Called when the search query finds no local results.
+     * Use this to trigger a server-side search.
+     */
+    onSearchChange?: (query: string) => void;
+    /** Called whenever the applied advanced filters change. */
+    onFiltersChange?: (filters: FilterState[]) => void;
+    /** Hide the "Export CSV" button in the header toolbar. */
+    hideTopExport?: boolean;
 }
 
 declare function DataGrid<T extends {
     id: string | number;
-}>({ columns: initialColumnsProp, data, actions, loading, pagination, paginationMode, rowCount, paginationModel, onPaginationModelChange, pageSize: initialPageSize, pageSizeOptions, title, className, sx, onRowDoubleClick, onCellDoubleClick, headerActions, toolbarContent, }: DataGridProps<T>): React__default.JSX.Element;
+}>({ columns: initialColumnsProp, data, actions, loading, pagination, paginationMode, rowCount, paginationModel, onPaginationModelChange, pageSize: initialPageSize, pageSizeOptions, title, className, sx, onRowDoubleClick, onCellDoubleClick, headerActions, toolbarContent, searchableColumns, onSearchChange, onFiltersChange, hideTopExport, }: DataGridProps<T>): React__default.JSX.Element;
 
 type SelectOption = {
     value: string | number;
@@ -1886,6 +1912,11 @@ interface SmartSelectProps<T = any> {
      * use this to trigger an API / server search.
      */
     onSearchChange?: (query: string) => void;
+    /**
+     * Debounce delay in ms before `onSearchChange` fires.
+     * Defaults to 300 ms. Pass 0 to disable debouncing.
+     */
+    debounceMs?: number;
     /** Primary display label for an option (required) */
     getOptionLabel: (option: T) => string;
     /** Unique key for an option — defaults to the label string */
@@ -1939,7 +1970,7 @@ interface SmartSelectProps<T = any> {
     style?: CSSProperties;
     sx?: SxProp;
 }
-declare function SmartSelect<T = any>({ options, value, onChange, onSearchChange, getOptionLabel, getOptionValue, getOptionSubLabel, getOptionChildren, multiple, allowChildNodesSelection, loading, loadingText, filterOptions: filterOptionsProp, renderOption: renderOptionProp, limitTags, label, placeholder, variant, size, disabled, error, helperText, fullWidth, required, className, style, sx, }: SmartSelectProps<T>): React__default.JSX.Element;
+declare function SmartSelect<T = any>({ options, value, onChange, onSearchChange, debounceMs, getOptionLabel, getOptionValue, getOptionSubLabel, getOptionChildren, multiple, allowChildNodesSelection, loading, loadingText, filterOptions: filterOptionsProp, renderOption: renderOptionProp, limitTags, label, placeholder, variant, size, disabled, error, helperText, fullWidth, required, className, style, sx, }: SmartSelectProps<T>): React__default.JSX.Element;
 
 type ToolbarButton = 'undo' | 'redo' | 'ai' | 'paragraph' | 'fontsize' | 'font' | 'color' | 'bold' | 'italic' | 'strike' | 'link' | 'lineheight' | 'ul' | 'ol' | 'align' | 'indent' | 'outdent' | 'table' | 'image' | 'video' | 'cut' | 'copy' | 'paste' | 'specialchars' | 'code' | 'fullscreen' | 'tts' | 'stt' | 'translate' | 'todo' | '|';
 type EditorVariant = 'default' | 'basic';

package/dist/main.js

@@ -4471,7 +4471,8 @@ import {
   ArrowUp,
   ArrowDown,
   Trash2,
-  Plus
+  Plus,
+  ChevronsUpDown
 } from "lucide-react";
 function FilterSelect({
   value,
@@ -4566,7 +4567,11 @@ function DataGrid({
   onRowDoubleClick,
   onCellDoubleClick,
   headerActions,
-  toolbarContent
+  toolbarContent,
+  searchableColumns,
+  onSearchChange,
+  onFiltersChange,
+  hideTopExport = false
 }) {
   const sxClass = useSx(sx);
   const [editingCell, setEditingCell] = useState9(null);
@@ -4671,6 +4676,9 @@ function DataGrid({
       return next;
     });
   }, [initialColumnsProp]);
+  useEffect9(() => {
+    onFiltersChange?.(advancedFilters);
+  }, [advancedFilters, onFiltersChange]);
   const handleSort = (fieldKey, dir) => {
     if (dir !== void 0) {
       setSortField(fieldKey);
@@ -4720,10 +4728,10 @@ function DataGrid({
   };
   const filteredData = useMemo2(() => {
     return data.filter((item) => {
-      const matchesGlobal = !filterText || resolvedColumns.some((col) => {
-        if (col.hidden) return false;
-        return getDisplayValue(item, col).toLowerCase().includes(filterText.toLowerCase());
-      });
+      const searchCols = searchableColumns ? resolvedColumns.filter((col) => searchableColumns.includes(String(col.field))) : resolvedColumns.filter((col) => !col.hidden);
+      const matchesGlobal = !filterText || searchCols.some(
+        (col) => getDisplayValue(item, col).toLowerCase().includes(filterText.toLowerCase())
+      );
       const evalFilter = (f) => {
         if (!f.value && f.operator !== "is empty" && f.operator !== "is not empty") return true;
         const col = resolvedColumns.find((c) => String(c.field) === f.column || String(c.key) === f.column);
@@ -4831,7 +4839,11 @@ function DataGrid({
       }
       return matchesGlobal && matchesAdvanced;
     });
-  }, [data, filterText, advancedFilters, resolvedColumns]);
+  }, [data, filterText, advancedFilters, resolvedColumns, searchableColumns]);
+  useEffect9(() => {
+    if (!onSearchChange || !filterText) return;
+    if (filteredData.length === 0) onSearchChange(filterText);
+  }, [filteredData, filterText, onSearchChange]);
   const sortedData = useMemo2(() => {
     if (!sortField || !sortDirection) return filteredData;
     const col = resolvedColumns.find((c) => c.field === sortField);
@@ -4862,11 +4874,16 @@ function DataGrid({
       (item) => exportableCols.map((c) => {
         const field = String(c.field);
         const raw = item[field];
-        let val = c.valueGetter ? c.valueGetter({ value: raw, row: item, field }) : raw;
-        if (c.valueFormatter) {
-          val = c.valueFormatter({ value: val, row: item, field });
+        let str;
+        if (c.exportValue) {
+          str = c.exportValue(raw, item).replace(/"/g, '""');
+        } else {
+          let val = c.valueGetter ? c.valueGetter({ value: raw, row: item, field }) : raw;
+          if (c.valueFormatter) {
+            val = c.valueFormatter({ value: val, row: item, field });
+          }
+          str = val === null || val === void 0 ? "" : String(val).replace(/"/g, '""');
         }
-        const str = val === null || val === void 0 ? "" : String(val).replace(/"/g, '""');
         return `"${str}"`;
       }).join(",")
     );
@@ -4959,7 +4976,7 @@ function DataGrid({
       onClick: () => setShowManageColumns(true)
     },
     /* @__PURE__ */ React75.createElement(Columns, { size: 16 })
-  )), /* @__PURE__ */ React75.createElement("button", { className: "dg-action-btn", onClick: handleExport }, /* @__PURE__ */ React75.createElement(Download, { size: 14 }), " Export CSV"), headerActions && /* @__PURE__ */ React75.createElement("div", { className: `dg-header-slot ${alignClass(headerActions.align)}` }, headerActions.content))), /* @__PURE__ */ React75.createElement("div", { className: `dg-toolbar ${alignClass(toolbarContent?.align)}` }, toolbarContent?.content || ""), /* @__PURE__ */ React75.createElement("div", { className: `dg-table-wrap${paginatedData.length === 0 && !loading ? " dg-table-wrap--empty" : ""}` }, loading && /* @__PURE__ */ React75.createElement("div", { className: "dg-loading-overlay" }, /* @__PURE__ */ React75.createElement("div", { className: "dg-loading-spinner" })), /* @__PURE__ */ React75.createElement("table", { className: "dg-table" }, /* @__PURE__ */ React75.createElement("thead", null, /* @__PURE__ */ React75.createElement("tr", null, visibleColumns.map((col, idx) => {
+  )), !hideTopExport && /* @__PURE__ */ React75.createElement("button", { className: "dg-action-btn", onClick: handleExport }, /* @__PURE__ */ React75.createElement(Download, { size: 14 }), " Export CSV"), headerActions && /* @__PURE__ */ React75.createElement("div", { className: `dg-header-slot ${alignClass(headerActions.align)}` }, headerActions.content))), /* @__PURE__ */ React75.createElement("div", { className: `dg-toolbar ${alignClass(toolbarContent?.align)}` }, toolbarContent?.content || ""), /* @__PURE__ */ React75.createElement("div", { className: `dg-table-wrap${paginatedData.length === 0 && !loading ? " dg-table-wrap--empty" : ""}` }, loading && /* @__PURE__ */ React75.createElement("div", { className: "dg-loading-overlay" }, /* @__PURE__ */ React75.createElement("div", { className: "dg-loading-spinner" })), /* @__PURE__ */ React75.createElement("table", { className: "dg-table" }, /* @__PURE__ */ React75.createElement("thead", null, /* @__PURE__ */ React75.createElement("tr", null, visibleColumns.map((col, idx) => {
     const colField = String(col.field);
     const width = columnWidths[colField] || 200;
     const leftOffset = getLeftOffset(col, idx);
@@ -4980,9 +4997,8 @@ function DataGrid({
           onClick: () => col.sortable !== false && handleSort(col.field || "")
         },
         col.headerName,
-        isSorted && sortDirection === "asc" && /* @__PURE__ */ React75.createElement(ChevronUp, { size: 12 }),
-        isSorted && sortDirection === "desc" && /* @__PURE__ */ React75.createElement(ChevronDown, { size: 12 })
-      ), /* @__PURE__ */ React75.createElement("div", { className: `dg-th-actions${isFiltered ? " dg-th-actions--filtered" : ""}` }, isFiltered && /* @__PURE__ */ React75.createElement(Filter, { size: 11, style: { color: "var(--primary-color)" } }), !col.disableColumnMenu && /* @__PURE__ */ React75.createElement(
+        col.sortable !== false && /* @__PURE__ */ React75.createElement("span", { className: `dg-sort-icon${isSorted ? " dg-sort-icon--active" : ""}` }, isSorted && sortDirection === "asc" && /* @__PURE__ */ React75.createElement(ChevronUp, { size: 14 }), isSorted && sortDirection === "desc" && /* @__PURE__ */ React75.createElement(ChevronDown, { size: 14 }), !isSorted && /* @__PURE__ */ React75.createElement(ChevronsUpDown, { size: 14 }))
+      ), /* @__PURE__ */ React75.createElement("div", { className: `dg-th-actions${isFiltered ? " dg-th-actions--filtered" : ""}` }, isFiltered && /* @__PURE__ */ React75.createElement("button", { className: "dg-th-filter-btn", onClick: () => setShowAdvancedFilter(true) }, /* @__PURE__ */ React75.createElement(Filter, { size: 11 })), !col.disableColumnMenu && /* @__PURE__ */ React75.createElement(
         "button",
         {
           className: "dg-th-menu-btn",
@@ -5074,7 +5090,7 @@ function DataGrid({
       },
       action.icon
     )))));
-  })()))))), paginatedData.length === 0 && /* @__PURE__ */ React75.createElement("div", { className: "dg-empty-state" }, /* @__PURE__ */ React75.createElement("svg", { className: "dg-empty-icon", viewBox: "0 0 200 160", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React75.createElement("rect", { x: "20", y: "30", width: "160", height: "100", rx: "8", fill: "var(--hover-color)", stroke: "var(--border-color)", strokeWidth: "1.5" }), /* @__PURE__ */ React75.createElement("rect", { x: "20", y: "30", width: "160", height: "28", rx: "8", fill: "var(--border-color)", opacity: "0.5" }), /* @__PURE__ */ React75.createElement("rect", { x: "20", y: "50", width: "160", height: "8", rx: "0", fill: "var(--border-color)", opacity: "0.5" }), /* @__PURE__ */ React75.createElement("line", { x1: "72", y1: "30", x2: "72", y2: "130", stroke: "var(--border-color)", strokeWidth: "1" }), /* @__PURE__ */ React75.createElement("line", { x1: "128", y1: "30", x2: "128", y2: "130", stroke: "var(--border-color)", strokeWidth: "1" }), /* @__PURE__ */ React75.createElement("line", { x1: "20", y1: "78", x2: "180", y2: "78", stroke: "var(--border-color)", strokeWidth: "1" }), /* @__PURE__ */ React75.createElement("line", { x1: "20", y1: "104", x2: "180", y2: "104", stroke: "var(--border-color)", strokeWidth: "1" }), /* @__PURE__ */ React75.createElement("rect", { x: "32", y: "87", width: "28", height: "6", rx: "3", fill: "var(--border-color)", opacity: "0.4" }), /* @__PURE__ */ React75.createElement("rect", { x: "84", y: "87", width: "28", height: "6", rx: "3", fill: "var(--border-color)", opacity: "0.4" }), /* @__PURE__ */ React75.createElement("rect", { x: "140", y: "87", width: "28", height: "6", rx: "3", fill: "var(--border-color)", opacity: "0.4" }), /* @__PURE__ */ React75.createElement("rect", { x: "32", y: "113", width: "20", height: "6", rx: "3", fill: "var(--border-color)", opacity: "0.3" }), /* @__PURE__ */ React75.createElement("rect", { x: "84", y: "113", width: "32", height: "6", rx: "3", fill: "var(--border-color)", opacity: "0.3" }), /* @__PURE__ */ React75.createElement("rect", { x: "140", y: "113", width: "20", height: "6", rx: "3", fill: "var(--border-color)", opacity: "0.3" }), /* @__PURE__ */ React75.createElement("circle", { cx: "148", cy: "108", r: "26", fill: "var(--surface-color)", stroke: "var(--border-color)", strokeWidth: "1.5" }), /* @__PURE__ */ React75.createElement("circle", { cx: "145", cy: "105", r: "10", stroke: "var(--text-secondary)", strokeWidth: "2.5", opacity: "0.5" }), /* @__PURE__ */ React75.createElement("line", { x1: "152", y1: "113", x2: "161", y2: "122", stroke: "var(--text-secondary)", strokeWidth: "2.5", strokeLinecap: "round", opacity: "0.5" }), /* @__PURE__ */ React75.createElement("line", { x1: "141", y1: "101", x2: "149", y2: "109", stroke: "var(--text-secondary)", strokeWidth: "2", strokeLinecap: "round", opacity: "0.5" }), /* @__PURE__ */ React75.createElement("line", { x1: "149", y1: "101", x2: "141", y2: "109", stroke: "var(--text-secondary)", strokeWidth: "2", strokeLinecap: "round", opacity: "0.5" })), /* @__PURE__ */ React75.createElement("p", { className: "dg-empty-title" }, "No data found"), /* @__PURE__ */ React75.createElement("p", { className: "dg-empty-subtitle" }, filterText || hasActiveFilters ? "Try adjusting your search or filters" : "No records to display"))), pagination && /* @__PURE__ */ React75.createElement("div", { className: "dg-pagination" }, /* @__PURE__ */ React75.createElement("div", { className: "dg-page-info" }, /* @__PURE__ */ React75.createElement("div", { className: "dg-per-page" }, /* @__PURE__ */ React75.createElement("span", null, "Rows per page:"), /* @__PURE__ */ React75.createElement(
+  })()))))), paginatedData.length === 0 && /* @__PURE__ */ React75.createElement("div", { className: "dg-empty-state" }, /* @__PURE__ */ React75.createElement("svg", { className: "dg-empty-icon", viewBox: "0 0 200 160", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React75.createElement("rect", { x: "20", y: "30", width: "160", height: "100", rx: "8", fill: "var(--hover-color)", stroke: "var(--border-color)", strokeWidth: "1.5" }), /* @__PURE__ */ React75.createElement("rect", { x: "20", y: "30", width: "160", height: "28", rx: "8", fill: "var(--border-color)", opacity: "0.5" }), /* @__PURE__ */ React75.createElement("rect", { x: "20", y: "50", width: "160", height: "8", rx: "0", fill: "var(--border-color)", opacity: "0.5" }), /* @__PURE__ */ React75.createElement("line", { x1: "72", y1: "30", x2: "72", y2: "130", stroke: "var(--border-color)", strokeWidth: "1" }), /* @__PURE__ */ React75.createElement("line", { x1: "128", y1: "30", x2: "128", y2: "130", stroke: "var(--border-color)", strokeWidth: "1" }), /* @__PURE__ */ React75.createElement("line", { x1: "20", y1: "78", x2: "180", y2: "78", stroke: "var(--border-color)", strokeWidth: "1" }), /* @__PURE__ */ React75.createElement("line", { x1: "20", y1: "104", x2: "180", y2: "104", stroke: "var(--border-color)", strokeWidth: "1" }), /* @__PURE__ */ React75.createElement("rect", { x: "32", y: "87", width: "28", height: "6", rx: "3", fill: "var(--border-color)", opacity: "0.4" }), /* @__PURE__ */ React75.createElement("rect", { x: "84", y: "87", width: "28", height: "6", rx: "3", fill: "var(--border-color)", opacity: "0.4" }), /* @__PURE__ */ React75.createElement("rect", { x: "140", y: "87", width: "28", height: "6", rx: "3", fill: "var(--border-color)", opacity: "0.4" }), /* @__PURE__ */ React75.createElement("rect", { x: "32", y: "113", width: "20", height: "6", rx: "3", fill: "var(--border-color)", opacity: "0.3" }), /* @__PURE__ */ React75.createElement("rect", { x: "84", y: "113", width: "32", height: "6", rx: "3", fill: "var(--border-color)", opacity: "0.3" }), /* @__PURE__ */ React75.createElement("rect", { x: "140", y: "113", width: "20", height: "6", rx: "3", fill: "var(--border-color)", opacity: "0.3" }), /* @__PURE__ */ React75.createElement("circle", { cx: "148", cy: "108", r: "26", fill: "var(--surface-color)", stroke: "var(--border-color)", strokeWidth: "1.5" }), /* @__PURE__ */ React75.createElement("circle", { cx: "145", cy: "105", r: "10", stroke: "var(--text-secondary)", strokeWidth: "2.5", opacity: "0.5" }), /* @__PURE__ */ React75.createElement("line", { x1: "152", y1: "113", x2: "161", y2: "122", stroke: "var(--text-secondary)", strokeWidth: "2.5", strokeLinecap: "round", opacity: "0.5" }), /* @__PURE__ */ React75.createElement("line", { x1: "141", y1: "101", x2: "149", y2: "109", stroke: "var(--text-secondary)", strokeWidth: "2", strokeLinecap: "round", opacity: "0.5" }), /* @__PURE__ */ React75.createElement("line", { x1: "149", y1: "101", x2: "141", y2: "109", stroke: "var(--text-secondary)", strokeWidth: "2", strokeLinecap: "round", opacity: "0.5" })), /* @__PURE__ */ React75.createElement("p", { className: "dg-empty-title" }, "No data found"), /* @__PURE__ */ React75.createElement("p", { className: "dg-empty-subtitle" }, filterText || hasActiveFilters ? "Try adjusting your search or filters" : "No records to display"))), pagination && /* @__PURE__ */ React75.createElement("div", { className: "dg-pagination" }, /* @__PURE__ */ React75.createElement("div", { className: "dg-page-info" }, /* @__PURE__ */ React75.createElement(Tooltip, { title: "Export CSV", placement: "top" }, /* @__PURE__ */ React75.createElement("button", { className: "dg-icon-btn", onClick: handleExport }, /* @__PURE__ */ React75.createElement(Download, { size: 14 }))), /* @__PURE__ */ React75.createElement("div", { className: "dg-per-page" }, /* @__PURE__ */ React75.createElement("span", null, "Rows per page:"), /* @__PURE__ */ React75.createElement(
     FilterSelect,
     {
       placement: "top",
@@ -9433,7 +9449,7 @@ function UserSelectionField({
 }
 
 // lib/SmartSelect/SmartSelect.tsx
-import React108, { useCallback as useCallback11, useMemo as useMemo3 } from "react";
+import React108, { useCallback as useCallback11, useEffect as useEffect21, useMemo as useMemo3, useRef as useRef25 } from "react";
 var CheckIcon3 = () => /* @__PURE__ */ React108.createElement("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ React108.createElement("polyline", { points: "20 6 9 17 4 12" }));
 function flattenTree(options, getChildren, depth = 0) {
   return options.flatMap((opt) => [
@@ -9458,6 +9474,7 @@ function SmartSelect({
   value,
   onChange,
   onSearchChange,
+  debounceMs = 300,
   getOptionLabel,
   getOptionValue,
   getOptionSubLabel,
@@ -9482,6 +9499,10 @@ function SmartSelect({
   style,
   sx
 }) {
+  const debounceTimer = useRef25(null);
+  useEffect21(() => () => {
+    if (debounceTimer.current) clearTimeout(debounceTimer.current);
+  }, []);
   const getValue = useCallback11(
     (o) => getOptionValue ? getOptionValue(o) : String(getOptionLabel(o)),
     [getOptionValue, getOptionLabel]
@@ -9508,6 +9529,7 @@ function SmartSelect({
   }, [multiple, value, getValue]);
   const handleInputChange = useCallback11((_, inputValue) => {
     if (!onSearchChange) return;
+    if (debounceTimer.current) clearTimeout(debounceTimer.current);
     if (!inputValue) {
       onSearchChange("");
       return;
@@ -9515,10 +9537,15 @@ function SmartSelect({
     const hasLocalMatch = flatOptionsList.some(
       (opt) => getOptionLabel(opt).toLowerCase().includes(inputValue.toLowerCase()) || (getOptionSubLabel?.(opt) ?? "").toLowerCase().includes(inputValue.toLowerCase())
     );
-    if (!hasLocalMatch) {
+    if (hasLocalMatch) return;
+    if (debounceMs <= 0) {
       onSearchChange(inputValue);
+    } else {
+      debounceTimer.current = setTimeout(() => {
+        onSearchChange(inputValue);
+      }, debounceMs);
     }
-  }, [onSearchChange, flatOptionsList, getOptionLabel, getOptionSubLabel]);
+  }, [onSearchChange, debounceMs, flatOptionsList, getOptionLabel, getOptionSubLabel]);
   const handleChange = useCallback11((_, newValue) => {
     if (!multiple || !allowChildNodesSelection || !getOptionChildren) {
       onChange?.(newValue);
@@ -9658,7 +9685,7 @@ function SmartSelect({
 }
 
 // lib/RufousTextEditor/RufousTextEditor.tsx
-import React119, { useMemo as useMemo5, useCallback as useCallback16, useState as useState35, useRef as useRef32, useEffect as useEffect29 } from "react";
+import React119, { useMemo as useMemo5, useCallback as useCallback16, useState as useState35, useRef as useRef33, useEffect as useEffect30 } from "react";
 import { createPortal as createPortal8 } from "react-dom";
 import { useEditor, EditorContent, EditorContext, FloatingMenu, BubbleMenu } from "@tiptap/react";
 import StarterKit from "@tiptap/starter-kit";
@@ -9684,7 +9711,7 @@ import { ReactRenderer } from "@tiptap/react";
 import tippy from "tippy.js";
 
 // lib/RufousTextEditor/MentionList.tsx
-import React109, { forwardRef as forwardRef11, useEffect as useEffect21, useImperativeHandle, useState as useState26 } from "react";
+import React109, { forwardRef as forwardRef11, useEffect as useEffect22, useImperativeHandle, useState as useState26 } from "react";
 var MentionList = forwardRef11((props, ref) => {
   const [selectedIndex, setSelectedIndex] = useState26(0);
   const selectItem = (index) => {
@@ -9693,7 +9720,7 @@ var MentionList = forwardRef11((props, ref) => {
       props.command({ id: item.id, label: item.shortName || item.name });
     }
   };
-  useEffect21(() => setSelectedIndex(0), [props.items]);
+  useEffect22(() => setSelectedIndex(0), [props.items]);
   useImperativeHandle(ref, () => ({
     onKeyDown: ({ event }) => {
       if (event.key === "ArrowUp") {
@@ -9780,11 +9807,11 @@ function createMentionSuggestion(users) {
 }
 
 // lib/RufousTextEditor/Toolbar.tsx
-import React115, { useState as useState31, useRef as useRef28, useEffect as useEffect25, useCallback as useCallback15 } from "react";
+import React115, { useState as useState31, useRef as useRef29, useEffect as useEffect26, useCallback as useCallback15 } from "react";
 import { createPortal as createPortal4 } from "react-dom";
 
 // lib/RufousTextEditor/TextToSpeech.tsx
-import React110, { useState as useState27, useEffect as useEffect22, useRef as useRef25, useCallback as useCallback12, forwardRef as forwardRef12, useImperativeHandle as useImperativeHandle2 } from "react";
+import React110, { useState as useState27, useEffect as useEffect23, useRef as useRef26, useCallback as useCallback12, forwardRef as forwardRef12, useImperativeHandle as useImperativeHandle2 } from "react";
 var TextToSpeech = forwardRef12(({ editor, onTextToSpeech }, ref) => {
   const [speaking, setSpeaking] = useState27(false);
   const [paused, setPaused] = useState27(false);
@@ -9792,9 +9819,9 @@ var TextToSpeech = forwardRef12(({ editor, onTextToSpeech }, ref) => {
   const [selectedVoice, setSelectedVoice] = useState27("");
   const [rate, setRate] = useState27(1);
   const [showPanel, setShowPanel] = useState27(false);
-  const utteranceRef = useRef25(null);
-  const panelRef = useRef25(null);
-  useEffect22(() => {
+  const utteranceRef = useRef26(null);
+  const panelRef = useRef26(null);
+  useEffect23(() => {
     const synth = window.speechSynthesis;
     const loadVoices = () => {
       const available = synth.getVoices();
@@ -9812,7 +9839,7 @@ var TextToSpeech = forwardRef12(({ editor, onTextToSpeech }, ref) => {
       synth.removeEventListener("voiceschanged", loadVoices);
     };
   }, [selectedVoice]);
-  useEffect22(() => {
+  useEffect23(() => {
     const handleClick = (e) => {
       if (panelRef.current && !panelRef.current.contains(e.target)) {
         setShowPanel(false);
@@ -9929,18 +9956,18 @@ var TextToSpeech = forwardRef12(({ editor, onTextToSpeech }, ref) => {
 var TextToSpeech_default = TextToSpeech;
 
 // lib/RufousTextEditor/SpeechToText.tsx
-import React111, { useState as useState28, useRef as useRef26, useCallback as useCallback13, useEffect as useEffect23, forwardRef as forwardRef13, useImperativeHandle as useImperativeHandle3 } from "react";
+import React111, { useState as useState28, useRef as useRef27, useCallback as useCallback13, useEffect as useEffect24, forwardRef as forwardRef13, useImperativeHandle as useImperativeHandle3 } from "react";
 var SpeechToText = forwardRef13(({ editor, onSpeechToText }, ref) => {
   const [listening, setListening] = useState28(false);
   const [showPanel, setShowPanel] = useState28(false);
   const [language, setLanguage] = useState28("en-US");
   const [interim, setInterim] = useState28("");
-  const recognitionRef = useRef26(null);
-  const panelRef = useRef26(null);
-  const isListeningRef = useRef26(false);
+  const recognitionRef = useRef27(null);
+  const panelRef = useRef27(null);
+  const isListeningRef = useRef27(false);
   const SpeechRecognitionAPI = typeof window !== "undefined" ? window.SpeechRecognition || window.webkitSpeechRecognition : null;
   const supported = !!SpeechRecognitionAPI;
-  useEffect23(() => {
+  useEffect24(() => {
     const handleClick = (e) => {
       if (panelRef.current && !panelRef.current.contains(e.target)) {
         setShowPanel(false);
@@ -10091,7 +10118,7 @@ var SpeechToText = forwardRef13(({ editor, onSpeechToText }, ref) => {
 var SpeechToText_default = SpeechToText;
 
 // lib/RufousTextEditor/AICommands.tsx
-import React112, { useState as useState29, useRef as useRef27, useEffect as useEffect24, useCallback as useCallback14 } from "react";
+import React112, { useState as useState29, useRef as useRef28, useEffect as useEffect25, useCallback as useCallback14 } from "react";
 import { createPortal as createPortal2 } from "react-dom";
 var AI_COMMANDS = [
   { id: "improve", label: "Improve writing", prompt: "Improve the following text to make it clearer, more engaging, and well-structured. Return only the improved text, no explanations." },
@@ -10147,8 +10174,8 @@ var AICommands = ({ editor, onAICommand }) => {
   const [originalText, setOriginalText] = useState29("");
   const [selectionRange, setSelectionRange] = useState29(null);
   const [previousResults, setPreviousResults] = useState29([]);
-  const panelRef = useRef27(null);
-  useEffect24(() => {
+  const panelRef = useRef28(null);
+  useEffect25(() => {
     const handleClick = (e) => {
       if (panelRef.current && !panelRef.current.contains(e.target)) {
         setOpen(false);
@@ -11346,9 +11373,9 @@ var SPECIAL_CHARS = [
 ];
 var Dropdown = ({ trigger, children, className = "", keepOpen = false }) => {
   const [open, setOpen] = useState31(false);
-  const ref = useRef28(null);
-  const menuRef = useRef28(null);
-  useEffect25(() => {
+  const ref = useRef29(null);
+  const menuRef = useRef29(null);
+  useEffect26(() => {
     const handleClick = (e) => {
       const target = e.target;
       const inTrigger = ref.current?.contains(target);
@@ -11360,7 +11387,7 @@ var Dropdown = ({ trigger, children, className = "", keepOpen = false }) => {
     document.addEventListener("mousedown", handleClick);
     return () => document.removeEventListener("mousedown", handleClick);
   }, []);
-  useEffect25(() => {
+  useEffect26(() => {
     if (!open || !menuRef.current || !ref.current) return;
     const menu = menuRef.current;
     const trigger2 = ref.current;
@@ -11477,7 +11504,7 @@ var ImagePanel = ({ editor, onClose, onImageUpload }) => {
   const [activeTab, setActiveTab] = useState31("upload");
   const [url, setUrl] = useState31("");
   const [isDragging, setIsDragging] = useState31(false);
-  const fileInputRef = useRef28(null);
+  const fileInputRef = useRef29(null);
   const getBase64 = (file) => {
     return new Promise((resolve, reject) => {
       const reader = new FileReader();
@@ -11655,10 +11682,10 @@ var ColorPickerPanel = ({ editor, onClose }) => {
 var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTextToSpeech, onClose, onImageUpload, visibleButtons, isFullscreen, onToggleFullscreen }) => {
   const [, setEditorState] = useState31(0);
   const [todoEnabled, setTodoEnabled] = useState31(false);
-  const ttsRef = useRef28(null);
-  const sttRef = useRef28(null);
+  const ttsRef = useRef29(null);
+  const sttRef = useRef29(null);
   const show = (id) => !visibleButtons || visibleButtons.has(id);
-  useEffect25(() => {
+  useEffect26(() => {
     if (!editor) return;
     const onTransaction = () => setEditorState((n) => n + 1);
     editor.on("transaction", onTransaction);
@@ -12281,7 +12308,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
 var Toolbar_default = Toolbar;
 
 // lib/RufousTextEditor/ImageToolbar.tsx
-import React116, { useState as useState32, useEffect as useEffect26, useRef as useRef29 } from "react";
+import React116, { useState as useState32, useEffect as useEffect27, useRef as useRef30 } from "react";
 import { createPortal as createPortal5 } from "react-dom";
 var ALIGNMENTS = [
   { value: "left", label: "Left", icon: "\u2630" },
@@ -12300,7 +12327,7 @@ var ImagePropertiesModal = ({ editor, node, onClose }) => {
   const [lockRatio, setLockRatio] = useState32(true);
   const [naturalWidth, setNaturalWidth] = useState32(0);
   const [naturalHeight, setNaturalHeight] = useState32(0);
-  useEffect26(() => {
+  useEffect27(() => {
     if (src) {
       const img = new window.Image();
       img.onload = () => {
@@ -12423,8 +12450,8 @@ var ImageToolbar = ({ editor }) => {
   const [showVAlign, setShowVAlign] = useState32(false);
   const [copyStatus, setCopyStatus] = useState32("");
   const [pos, setPos] = useState32(null);
-  const toolbarRef = useRef29(null);
-  useEffect26(() => {
+  const toolbarRef = useRef30(null);
+  useEffect27(() => {
     if (!editor) return;
     const update = () => {
       const { selection } = editor.state;
@@ -12560,7 +12587,7 @@ var ImageToolbar = ({ editor }) => {
 var ImageToolbar_default = ImageToolbar;
 
 // lib/RufousTextEditor/VideoToolbar.tsx
-import React117, { useState as useState33, useEffect as useEffect27, useRef as useRef30 } from "react";
+import React117, { useState as useState33, useEffect as useEffect28, useRef as useRef31 } from "react";
 import { createPortal as createPortal6 } from "react-dom";
 var ALIGNMENTS2 = [
   { value: "left", label: "Left", icon: "\u2630" },
@@ -12675,8 +12702,8 @@ var VideoToolbar = ({ editor }) => {
   const [showAlign, setShowAlign] = useState33(false);
   const [copyStatus, setCopyStatus] = useState33("");
   const [pos, setPos] = useState33(null);
-  const toolbarRef = useRef30(null);
-  useEffect27(() => {
+  const toolbarRef = useRef31(null);
+  useEffect28(() => {
     if (!editor) return;
     const update = () => {
       const { selection } = editor.state;
@@ -12800,7 +12827,7 @@ var VideoToolbar = ({ editor }) => {
 var VideoToolbar_default = VideoToolbar;
 
 // lib/RufousTextEditor/TableToolbar.tsx
-import React118, { useState as useState34, useEffect as useEffect28, useRef as useRef31 } from "react";
+import React118, { useState as useState34, useEffect as useEffect29, useRef as useRef32 } from "react";
 import { createPortal as createPortal7 } from "react-dom";
 var IconAddRowBefore = () => /* @__PURE__ */ React118.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ React118.createElement("path", { d: "M20 3H4c-.55 0-1 .45-1 1v16c0 .55.45 1 1 1h16c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1zm-1 8H5V5h14v6zm0 8H5v-6h14v6z" }), /* @__PURE__ */ React118.createElement("path", { d: "M9 6h2v1.5h1.5v2H11V11H9V9.5H7.5v-2H9z" }));
 var IconAddRowAfter = () => /* @__PURE__ */ React118.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ React118.createElement("path", { d: "M20 3H4c-.55 0-1 .45-1 1v16c0 .55.45 1 1 1h16c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1zm-1 8H5V5h14v6zm0 8H5v-6h14v6z" }), /* @__PURE__ */ React118.createElement("path", { d: "M9 14h2v1.5h1.5v2H11V19H9v-1.5H7.5v-2H9z" }));
@@ -12814,8 +12841,8 @@ var IconSplitCell = () => /* @__PURE__ */ React118.createElement("svg", { width:
 var IconToggleHeader = () => /* @__PURE__ */ React118.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ React118.createElement("path", { d: "M3 3h18v18H3V3zm2 2v4h14V5H5zm0 6v8h14v-8H5z" }), /* @__PURE__ */ React118.createElement("rect", { x: "5", y: "5", width: "14", height: "4", opacity: "0.4" }));
 var TableToolbar = ({ editor }) => {
   const [pos, setPos] = useState34(null);
-  const toolbarRef = useRef31(null);
-  useEffect28(() => {
+  const toolbarRef = useRef32(null);
+  useEffect29(() => {
     if (!editor) return;
     const update = () => {
       if (!editor.isActive("table")) {
@@ -13054,12 +13081,12 @@ var RufousTextEditor = ({
     return visible;
   }, [buttons, variant, hideButtons]);
   const mentionSuggestion = useMemo5(() => createMentionSuggestion(mentions), [mentions]);
-  const onChangeRef = useRef32(onChange);
-  const onBlurRef = useRef32(onBlur);
-  useEffect29(() => {
+  const onChangeRef = useRef33(onChange);
+  const onBlurRef = useRef33(onBlur);
+  useEffect30(() => {
     onChangeRef.current = onChange;
   }, [onChange]);
-  useEffect29(() => {
+  useEffect30(() => {
     onBlurRef.current = onBlur;
   }, [onBlur]);
   const isEditable = editable && !disabled;
@@ -13160,8 +13187,8 @@ var RufousTextEditor = ({
       onChangeRef.current?.(e.getHTML(), e.getJSON());
     }
   });
-  const wrapperRef = useRef32(null);
-  useEffect29(() => {
+  const wrapperRef = useRef33(null);
+  useEffect30(() => {
     if (!editor) return;
     let blurTimer = null;
     const handler = ({ event }) => {
@@ -13179,7 +13206,7 @@ var RufousTextEditor = ({
       if (blurTimer) clearTimeout(blurTimer);
     };
   }, [editor]);
-  const setLinkRef = useRef32(null);
+  const setLinkRef = useRef33(null);
   const [linkModalOpen, setLinkModalOpen] = useState35(false);
   const [linkUrl, setLinkUrl] = useState35("");
   const [linkText, setLinkText] = useState35("");
@@ -13224,10 +13251,10 @@ var RufousTextEditor = ({
     setLinkSelection({ from, to });
     setLinkModalOpen(true);
   }, [editor]);
-  useEffect29(() => {
+  useEffect30(() => {
     setLinkRef.current = setLink;
   }, [setLink]);
-  useEffect29(() => {
+  useEffect30(() => {
     if (!editor?.view) return;
     const handleKeyDown = (event) => {
       if ((event.ctrlKey || event.metaKey) && event.key === "k") {

package/package.json

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