@rufous/ui 0.3.24 → 0.3.26

package/dist/main.cjs

@@ -1869,6 +1869,7 @@ var TextField = (0, import_react17.forwardRef)(({
   slotProps,
   InputProps,
   numberVariant,
+  step: stepProp,
   multiline = false,
   rows,
   maxRows,
@@ -2004,7 +2005,7 @@ var TextField = (0, import_react17.forwardRef)(({
       required,
       disabled,
       readOnly,
-      step: type === "number" && numberVariant ? STEP_BY_VARIANT[numberVariant] : void 0,
+      step: type === "number" ? stepProp ?? (numberVariant ? STEP_BY_VARIANT[numberVariant] : void 0) : void 0,
       min: type === "number" && numberVariant ? MIN_BY_VARIANT[numberVariant] : void 0,
       ...slotProps?.input,
       ...props,
@@ -5518,7 +5519,7 @@ function DataGrid({
         action.icon
       )))));
     })()));
-  }))), filteredData.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"))), customFooter ? /* @__PURE__ */ import_react23.default.createElement("div", { className: "dg-pagination dg-pagination--custom" }, customFooter) : pagination && !tOpts.hideFooter && /* @__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(
+  }))), filteredData.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"))), customFooter ? /* @__PURE__ */ import_react23.default.createElement("div", { className: "dg-pagination dg-pagination--custom" }, customFooter) : pagination && !tOpts.hideFooter && /* @__PURE__ */ import_react23.default.createElement("div", { className: "dg-pagination" }, /* @__PURE__ */ import_react23.default.createElement("div", { className: "dg-page-info" }, !tOpts.hideBottomExport && !tOpts.hideExport && /* @__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",
@@ -9332,21 +9333,24 @@ PhoneField.displayName = "PhoneField";
 var import_react49 = __toESM(require("react"), 1);
 var import_react_dom11 = __toESM(require("react-dom"), 1);
 var import_lucide_react3 = require("lucide-react");
+function nodeId(node) {
+  return node.id ?? node._id;
+}
 function collectDescendants(node) {
-  const ids = [String(node.id)];
+  const ids = [String(nodeId(node))];
   node.children?.forEach((c) => ids.push(...collectDescendants(c)));
   return ids;
 }
 function findNodeById(nodes, id) {
   for (const node of nodes) {
-    if (String(node.id) === id) return node;
+    if (String(nodeId(node)) === id) return node;
     const found = findNodeById(node.children ?? [], id);
     if (found) return found;
   }
   return null;
 }
 function getNodeState(node, selected) {
-  if (selected.has(String(node.id))) return "checked";
+  if (selected.has(String(nodeId(node)))) return "checked";
   if (!node.children?.length) return "unchecked";
   const states = node.children.map((c) => getNodeState(c, selected));
   if (states.every((s2) => s2 === "checked")) return "checked";
@@ -9368,7 +9372,7 @@ function getTopLevelSelected(nodes, selected) {
 function getAllSelected(nodes, selected) {
   const result = [];
   for (const node of nodes) {
-    if (selected.has(String(node.id))) result.push(node);
+    if (selected.has(String(nodeId(node)))) result.push(node);
     if (node.children?.length) result.push(...getAllSelected(node.children, selected));
   }
   return result;
@@ -9406,10 +9410,10 @@ function TreeNodeItem({
   onSelect,
   isFiltering
 }) {
-  const nodeId = String(node.id);
+  const nid = String(nodeId(node));
   const hasChildren = !!node.children?.length;
-  const isExpanded = isFiltering || expanded.has(nodeId);
-  const state = allowChildSelection ? getNodeState(node, selected) : selected.has(nodeId) ? "checked" : "unchecked";
+  const isExpanded = isFiltering || expanded.has(nid);
+  const state = allowChildSelection ? getNodeState(node, selected) : selected.has(nid) ? "checked" : "unchecked";
   return /* @__PURE__ */ import_react49.default.createElement("div", { className: "rf-tsn" }, /* @__PURE__ */ import_react49.default.createElement(
     "div",
     {
@@ -9424,7 +9428,7 @@ function TreeNodeItem({
         className: "rf-tsn__expand",
         onClick: (e) => {
           e.stopPropagation();
-          onToggleExpand(nodeId);
+          onToggleExpand(nid);
         }
       },
       isExpanded ? /* @__PURE__ */ import_react49.default.createElement(import_lucide_react3.ChevronDown, { size: 14 }) : /* @__PURE__ */ import_react49.default.createElement(import_lucide_react3.ChevronRight, { size: 14 })
@@ -9573,7 +9577,7 @@ function TreeSelect({
     };
   }, [open, computePosition3]);
   const handleSelect = (node) => {
-    const nodeId = String(node.id);
+    const nid = String(nodeId(node));
     if (isMultiple) {
       const newSet = new Set(selectedSet);
       if (allowChildSelection) {
@@ -9587,21 +9591,21 @@ function TreeSelect({
           onNodeSelect?.({ node });
         }
       } else {
-        if (newSet.has(nodeId)) {
-          newSet.delete(nodeId);
+        if (newSet.has(nid)) {
+          newSet.delete(nid);
           onNodeUnselect?.({ node });
         } else {
-          newSet.add(nodeId);
+          newSet.add(nid);
           onNodeSelect?.({ node });
         }
       }
-      onChange?.({ value: setToRecord(newSet) });
+      onChange?.({ value: setToRecord(newSet), node });
     } else {
-      if (selectedSet.has(nodeId)) {
-        onChange?.({ value: null });
+      if (selectedSet.has(nid)) {
+        onChange?.({ value: null, node: null });
         onNodeUnselect?.({ node });
       } else {
-        onChange?.({ value: node.id });
+        onChange?.({ value: nodeId(node), node });
         onNodeSelect?.({ node });
         closeDropdown();
       }
@@ -9616,7 +9620,7 @@ function TreeSelect({
   };
   const handleClear = (e) => {
     e.stopPropagation();
-    onChange?.({ value: isMultiple ? {} : null });
+    onChange?.({ value: isMultiple ? {} : null, node: null });
   };
   const handleRemoveTag = (e, node) => {
     e.stopPropagation();
@@ -9907,11 +9911,18 @@ function SmartSelect({
   }, [options, getOptionChildren]);
   const flatOptionsList = (0, import_react51.useMemo)(() => flatItems.map((f) => f.option), [flatItems]);
   const displayOptions = (0, import_react51.useMemo)(() => {
-    if (!searchResults.length) return flatOptionsList;
-    const localKeys = new Set(flatOptionsList.map((o) => getValue(o)));
-    const serverOnly = searchResults.filter((o) => !localKeys.has(getValue(o)));
-    return [...flatOptionsList, ...serverOnly];
-  }, [flatOptionsList, searchResults, getValue]);
+    let base = flatOptionsList;
+    if (searchResults.length) {
+      const localKeys = new Set(flatOptionsList.map((o) => getValue(o)));
+      const serverOnly = searchResults.filter((o) => !localKeys.has(getValue(o)));
+      base = [...flatOptionsList, ...serverOnly];
+    }
+    if (!multiple && value != null) {
+      const key = getValue(value);
+      if (!base.some((o) => getValue(o) === key)) base = [value, ...base];
+    }
+    return base;
+  }, [flatOptionsList, searchResults, getValue, value, multiple]);
   const depthMap = (0, import_react51.useMemo)(() => {
     const map = /* @__PURE__ */ new Map();
     flatItems.forEach(({ option, depth }) => map.set(getValue(option), depth));
@@ -9927,10 +9938,11 @@ function SmartSelect({
     }
     return value != null ? /* @__PURE__ */ new Set([getValue(value)]) : /* @__PURE__ */ new Set();
   }, [multiple, value, getValue]);
-  const handleInputChange = (0, import_react51.useCallback)((_, inputValue2) => {
+  const handleInputChange = (0, import_react51.useCallback)((_, inputValue2, reason) => {
     setInputValue(inputValue2);
     if (!onSearchChange) return;
     if (debounceTimer.current) clearTimeout(debounceTimer.current);
+    if (reason === "reset") return;
     if (!inputValue2) {
       onSearchChange("", 0);
       return;
@@ -10041,10 +10053,13 @@ function SmartSelect({
       return [...selected, ...filteredUnselected];
     }
     if (value != null) {
+      const selectedKey = getValue(value);
       const selectedLabel = getOptionLabel(value);
-      if (inputValue2 === selectedLabel) {
-        const selectedKey = getValue(value);
+      const inOpts = opts.some((o) => getValue(o) === selectedKey);
+      const selectedFallback = inOpts ? [] : [value];
+      if (!inputValue2 || inputValue2 === selectedLabel) {
         return [
+          ...selectedFallback,
           ...opts.filter((o) => getValue(o) === selectedKey),
           ...opts.filter((o) => getValue(o) !== selectedKey)
         ];

package/dist/main.css

@@ -6874,21 +6874,24 @@ pre {
   white-space: nowrap;
   color: var(--tf-text-color);
   z-index: 2;
+  flex-shrink: 0;
+  min-width: 36px;
+  box-sizing: border-box;
 }
 .rf-text-field__adornment--start {
-  margin-left: 8px;
-  margin-right: -6px;
+  padding-left: 10px;
+  padding-right: 4px;
 }
 .rf-text-field__adornment--end {
-  margin-right: 8px;
-  margin-left: -6px;
+  padding-right: 10px;
+  padding-left: 4px;
 }
 .rf-text-field--standard .rf-text-field__adornment--start {
-  margin-left: 0;
+  padding-left: 0;
   margin-top: 16px;
 }
 .rf-text-field--standard .rf-text-field__adornment--end {
-  margin-right: 0;
+  padding-right: 0;
   margin-top: 16px;
 }
 .rf-text-field--filled .rf-text-field__adornment--start,

package/dist/main.d.cts

@@ -537,6 +537,8 @@ interface TextFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'si
      * All number variants block `e`, `E`, `+`, `-`.
      */
     numberVariant?: NumberVariant;
+    /** Custom step for number inputs. Overrides the default step derived from numberVariant. */
+    step?: number;
     /** The color of the component */
     color?: 'primary' | 'secondary' | 'error' | 'success' | 'info' | 'warning';
     /** If true, the label is displayed in an error state. */
@@ -921,8 +923,10 @@ interface ToolbarOptions {
     hideFilter?: boolean;
     /** Hide the "Manage Columns" button. */
     hideColumns?: boolean;
-    /** Hide the "Export CSV" button. */
+    /** Hide the "Export CSV" button in the top toolbar. */
     hideExport?: boolean;
+    /** Hide the export icon button in the bottom pagination footer. */
+    hideBottomExport?: boolean;
     /** Hide the title text on the left side. */
     hideTitle?: boolean;
     /** Hide the record count below the title. */
@@ -1937,7 +1941,9 @@ interface PhoneFieldProps {
 declare const PhoneField: React__default.ForwardRefExoticComponent<PhoneFieldProps & React__default.RefAttributes<HTMLDivElement>>;
 
 interface TreeNode {
-    id: string | number;
+    id?: string | number;
+    /** MongoDB-style id — used as fallback when `id` is absent */
+    _id?: string | number;
     label: string;
     name?: string;
     children?: TreeNode[];
@@ -1950,9 +1956,10 @@ interface TreeSelectProps {
     options: TreeNode[];
     /** Controlled value. Single mode: id or null. Multiple mode: Record<id, boolean>. */
     value?: TreeSelectValue;
-    /** Called when selection changes */
+    /** Called when selection changes. In single mode, `node` is also included for convenience. */
     onChange?: (e: {
         value: TreeSelectValue;
+        node?: TreeNode | null;
     }) => void;
     /** Called when a node is selected */
     onNodeSelect?: (e: {

package/dist/main.d.ts

@@ -537,6 +537,8 @@ interface TextFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'si
      * All number variants block `e`, `E`, `+`, `-`.
      */
     numberVariant?: NumberVariant;
+    /** Custom step for number inputs. Overrides the default step derived from numberVariant. */
+    step?: number;
     /** The color of the component */
     color?: 'primary' | 'secondary' | 'error' | 'success' | 'info' | 'warning';
     /** If true, the label is displayed in an error state. */
@@ -921,8 +923,10 @@ interface ToolbarOptions {
     hideFilter?: boolean;
     /** Hide the "Manage Columns" button. */
     hideColumns?: boolean;
-    /** Hide the "Export CSV" button. */
+    /** Hide the "Export CSV" button in the top toolbar. */
     hideExport?: boolean;
+    /** Hide the export icon button in the bottom pagination footer. */
+    hideBottomExport?: boolean;
     /** Hide the title text on the left side. */
     hideTitle?: boolean;
     /** Hide the record count below the title. */
@@ -1937,7 +1941,9 @@ interface PhoneFieldProps {
 declare const PhoneField: React__default.ForwardRefExoticComponent<PhoneFieldProps & React__default.RefAttributes<HTMLDivElement>>;
 
 interface TreeNode {
-    id: string | number;
+    id?: string | number;
+    /** MongoDB-style id — used as fallback when `id` is absent */
+    _id?: string | number;
     label: string;
     name?: string;
     children?: TreeNode[];
@@ -1950,9 +1956,10 @@ interface TreeSelectProps {
     options: TreeNode[];
     /** Controlled value. Single mode: id or null. Multiple mode: Record<id, boolean>. */
     value?: TreeSelectValue;
-    /** Called when selection changes */
+    /** Called when selection changes. In single mode, `node` is also included for convenience. */
     onChange?: (e: {
         value: TreeSelectValue;
+        node?: TreeNode | null;
     }) => void;
     /** Called when a node is selected */
     onNodeSelect?: (e: {

package/dist/main.js

@@ -1687,6 +1687,7 @@ var TextField = forwardRef3(({
   slotProps,
   InputProps,
   numberVariant,
+  step: stepProp,
   multiline = false,
   rows,
   maxRows,
@@ -1822,7 +1823,7 @@ var TextField = forwardRef3(({
       required,
       disabled,
       readOnly,
-      step: type === "number" && numberVariant ? STEP_BY_VARIANT[numberVariant] : void 0,
+      step: type === "number" ? stepProp ?? (numberVariant ? STEP_BY_VARIANT[numberVariant] : void 0) : void 0,
       min: type === "number" && numberVariant ? MIN_BY_VARIANT[numberVariant] : void 0,
       ...slotProps?.input,
       ...props,
@@ -5374,7 +5375,7 @@ function DataGrid({
         action.icon
       )))));
     })()));
-  }))), filteredData.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"))), customFooter ? /* @__PURE__ */ React75.createElement("div", { className: "dg-pagination dg-pagination--custom" }, customFooter) : pagination && !tOpts.hideFooter && /* @__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(
+  }))), filteredData.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"))), customFooter ? /* @__PURE__ */ React75.createElement("div", { className: "dg-pagination dg-pagination--custom" }, customFooter) : pagination && !tOpts.hideFooter && /* @__PURE__ */ React75.createElement("div", { className: "dg-pagination" }, /* @__PURE__ */ React75.createElement("div", { className: "dg-page-info" }, !tOpts.hideBottomExport && !tOpts.hideExport && /* @__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",
@@ -9257,21 +9258,24 @@ import React106, {
 } from "react";
 import ReactDOM10 from "react-dom";
 import { ChevronDown as ChevronDown2, ChevronRight as ChevronRight2, X as X3, Search as Search2, Check, Minus } from "lucide-react";
+function nodeId(node) {
+  return node.id ?? node._id;
+}
 function collectDescendants(node) {
-  const ids = [String(node.id)];
+  const ids = [String(nodeId(node))];
   node.children?.forEach((c) => ids.push(...collectDescendants(c)));
   return ids;
 }
 function findNodeById(nodes, id) {
   for (const node of nodes) {
-    if (String(node.id) === id) return node;
+    if (String(nodeId(node)) === id) return node;
     const found = findNodeById(node.children ?? [], id);
     if (found) return found;
   }
   return null;
 }
 function getNodeState(node, selected) {
-  if (selected.has(String(node.id))) return "checked";
+  if (selected.has(String(nodeId(node)))) return "checked";
   if (!node.children?.length) return "unchecked";
   const states = node.children.map((c) => getNodeState(c, selected));
   if (states.every((s2) => s2 === "checked")) return "checked";
@@ -9293,7 +9297,7 @@ function getTopLevelSelected(nodes, selected) {
 function getAllSelected(nodes, selected) {
   const result = [];
   for (const node of nodes) {
-    if (selected.has(String(node.id))) result.push(node);
+    if (selected.has(String(nodeId(node)))) result.push(node);
     if (node.children?.length) result.push(...getAllSelected(node.children, selected));
   }
   return result;
@@ -9331,10 +9335,10 @@ function TreeNodeItem({
   onSelect,
   isFiltering
 }) {
-  const nodeId = String(node.id);
+  const nid = String(nodeId(node));
   const hasChildren = !!node.children?.length;
-  const isExpanded = isFiltering || expanded.has(nodeId);
-  const state = allowChildSelection ? getNodeState(node, selected) : selected.has(nodeId) ? "checked" : "unchecked";
+  const isExpanded = isFiltering || expanded.has(nid);
+  const state = allowChildSelection ? getNodeState(node, selected) : selected.has(nid) ? "checked" : "unchecked";
   return /* @__PURE__ */ React106.createElement("div", { className: "rf-tsn" }, /* @__PURE__ */ React106.createElement(
     "div",
     {
@@ -9349,7 +9353,7 @@ function TreeNodeItem({
         className: "rf-tsn__expand",
         onClick: (e) => {
           e.stopPropagation();
-          onToggleExpand(nodeId);
+          onToggleExpand(nid);
         }
       },
       isExpanded ? /* @__PURE__ */ React106.createElement(ChevronDown2, { size: 14 }) : /* @__PURE__ */ React106.createElement(ChevronRight2, { size: 14 })
@@ -9498,7 +9502,7 @@ function TreeSelect({
     };
   }, [open, computePosition3]);
   const handleSelect = (node) => {
-    const nodeId = String(node.id);
+    const nid = String(nodeId(node));
     if (isMultiple) {
       const newSet = new Set(selectedSet);
       if (allowChildSelection) {
@@ -9512,21 +9516,21 @@ function TreeSelect({
           onNodeSelect?.({ node });
         }
       } else {
-        if (newSet.has(nodeId)) {
-          newSet.delete(nodeId);
+        if (newSet.has(nid)) {
+          newSet.delete(nid);
           onNodeUnselect?.({ node });
         } else {
-          newSet.add(nodeId);
+          newSet.add(nid);
           onNodeSelect?.({ node });
         }
       }
-      onChange?.({ value: setToRecord(newSet) });
+      onChange?.({ value: setToRecord(newSet), node });
     } else {
-      if (selectedSet.has(nodeId)) {
-        onChange?.({ value: null });
+      if (selectedSet.has(nid)) {
+        onChange?.({ value: null, node: null });
         onNodeUnselect?.({ node });
       } else {
-        onChange?.({ value: node.id });
+        onChange?.({ value: nodeId(node), node });
         onNodeSelect?.({ node });
         closeDropdown();
       }
@@ -9541,7 +9545,7 @@ function TreeSelect({
   };
   const handleClear = (e) => {
     e.stopPropagation();
-    onChange?.({ value: isMultiple ? {} : null });
+    onChange?.({ value: isMultiple ? {} : null, node: null });
   };
   const handleRemoveTag = (e, node) => {
     e.stopPropagation();
@@ -9832,11 +9836,18 @@ function SmartSelect({
   }, [options, getOptionChildren]);
   const flatOptionsList = useMemo3(() => flatItems.map((f) => f.option), [flatItems]);
   const displayOptions = useMemo3(() => {
-    if (!searchResults.length) return flatOptionsList;
-    const localKeys = new Set(flatOptionsList.map((o) => getValue(o)));
-    const serverOnly = searchResults.filter((o) => !localKeys.has(getValue(o)));
-    return [...flatOptionsList, ...serverOnly];
-  }, [flatOptionsList, searchResults, getValue]);
+    let base = flatOptionsList;
+    if (searchResults.length) {
+      const localKeys = new Set(flatOptionsList.map((o) => getValue(o)));
+      const serverOnly = searchResults.filter((o) => !localKeys.has(getValue(o)));
+      base = [...flatOptionsList, ...serverOnly];
+    }
+    if (!multiple && value != null) {
+      const key = getValue(value);
+      if (!base.some((o) => getValue(o) === key)) base = [value, ...base];
+    }
+    return base;
+  }, [flatOptionsList, searchResults, getValue, value, multiple]);
   const depthMap = useMemo3(() => {
     const map = /* @__PURE__ */ new Map();
     flatItems.forEach(({ option, depth }) => map.set(getValue(option), depth));
@@ -9852,10 +9863,11 @@ function SmartSelect({
     }
     return value != null ? /* @__PURE__ */ new Set([getValue(value)]) : /* @__PURE__ */ new Set();
   }, [multiple, value, getValue]);
-  const handleInputChange = useCallback11((_, inputValue2) => {
+  const handleInputChange = useCallback11((_, inputValue2, reason) => {
     setInputValue(inputValue2);
     if (!onSearchChange) return;
     if (debounceTimer.current) clearTimeout(debounceTimer.current);
+    if (reason === "reset") return;
     if (!inputValue2) {
       onSearchChange("", 0);
       return;
@@ -9966,10 +9978,13 @@ function SmartSelect({
       return [...selected, ...filteredUnselected];
     }
     if (value != null) {
+      const selectedKey = getValue(value);
       const selectedLabel = getOptionLabel(value);
-      if (inputValue2 === selectedLabel) {
-        const selectedKey = getValue(value);
+      const inOpts = opts.some((o) => getValue(o) === selectedKey);
+      const selectedFallback = inOpts ? [] : [value];
+      if (!inputValue2 || inputValue2 === selectedLabel) {
         return [
+          ...selectedFallback,
           ...opts.filter((o) => getValue(o) === selectedKey),
           ...opts.filter((o) => getValue(o) !== selectedKey)
         ];

package/package.json

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