@rufous/ui 0.3.26 → 0.3.27

package/dist/main.cjs

@@ -1841,12 +1841,6 @@ var STEP_BY_VARIANT = {
   "positive-integer": 1,
   "positive-decimal": 0.1
 };
-var MIN_BY_VARIANT = {
-  "integer": void 0,
-  "decimal": void 0,
-  "positive-integer": 0,
-  "positive-decimal": 0
-};
 var TextField = (0, import_react17.forwardRef)(({
   label,
   name,
@@ -1935,21 +1929,23 @@ var TextField = (0, import_react17.forwardRef)(({
       }
     }
   };
+  const stepBy = (delta) => {
+    if (!internalRef.current) return;
+    const step = Number(stepProp ?? (numberVariant ? STEP_BY_VARIANT[numberVariant] : 1));
+    const newVal = (parseFloat(internalRef.current.value) || 0) + delta * step;
+    const nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value")?.set;
+    nativeInputValueSetter?.call(internalRef.current, String(newVal));
+    triggerChange();
+  };
   const handleIncrement = (e) => {
     e.preventDefault();
     e.stopPropagation();
-    if (internalRef.current) {
-      internalRef.current.stepUp();
-      triggerChange();
-    }
+    stepBy(1);
   };
   const handleDecrement = (e) => {
     e.preventDefault();
     e.stopPropagation();
-    if (internalRef.current) {
-      internalRef.current.stepDown();
-      triggerChange();
-    }
+    stepBy(-1);
   };
   const handleKeyDown = (e) => {
     if (type === "number") {
@@ -1960,16 +1956,10 @@ var TextField = (0, import_react17.forwardRef)(({
       }
       if (e.key === "ArrowUp") {
         e.preventDefault();
-        if (internalRef.current) {
-          internalRef.current.stepUp();
-          triggerChange();
-        }
+        stepBy(1);
       } else if (e.key === "ArrowDown") {
         e.preventDefault();
-        if (internalRef.current) {
-          internalRef.current.stepDown();
-          triggerChange();
-        }
+        stepBy(-1);
       }
     }
     if (props.onKeyDown) props.onKeyDown(e);
@@ -1995,18 +1985,24 @@ var TextField = (0, import_react17.forwardRef)(({
     "input",
     {
       ref: internalRef,
-      type,
+      type: type === "number" ? "text" : type,
+      inputMode: type === "number" ? "numeric" : void 0,
       onKeyDown: handleKeyDown,
       className: "rf-text-field__input",
       placeholder: placeholder || (variant === "outlined" ? " " : void 0),
       name,
       id: inputId,
-      value,
+      value: (() => {
+        if (type !== "number" || value === void 0 || value === null || value === "") return value;
+        const str = String(value);
+        if (!str.includes("e") && !str.includes("E")) return str;
+        const num = Number(str);
+        if (isNaN(num)) return str;
+        return num.toLocaleString("en-US", { useGrouping: false, maximumFractionDigits: 20 });
+      })(),
       required,
       disabled,
       readOnly,
-      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,
       onChange: handleChange
@@ -2419,7 +2415,7 @@ function AutocompleteInner(props, _ref) {
     onClose?.();
     if (!justSelected && !freeSolo && !multiple && value == null) {
       setInputStr("");
-      onInputChange?.(null, "");
+      onInputChange?.(null, "", "reset");
     }
   }, [openProp, freeSolo, multiple, value, onInputChange, onClose]);
   (0, import_react19.useEffect)(() => {
@@ -2464,13 +2460,13 @@ function AutocompleteInner(props, _ref) {
       onChange?.(event, next, already ? "removeOption" : "selectOption");
       setInputStr("");
       setFilterQuery("");
-      onInputChange?.(event, "");
+      onInputChange?.(event, "", "reset");
       inputRef.current?.focus();
     } else {
       onChange?.(event, opt, "selectOption");
       setInputStr(getOptionLabel(opt));
       setFilterQuery("");
-      onInputChange?.(event, getOptionLabel(opt));
+      onInputChange?.(event, getOptionLabel(opt), "reset");
       closePopup(true);
     }
     setFocusedIdx(-1);
@@ -2480,7 +2476,7 @@ function AutocompleteInner(props, _ref) {
     onChange?.(e, multiple ? [] : null, "clear");
     setInputStr("");
     setFilterQuery("");
-    onInputChange?.(e, "");
+    onInputChange?.(e, "", "clear");
     inputRef.current?.focus();
   };
   const removeTag = (opt, e) => {
@@ -2492,7 +2488,7 @@ function AutocompleteInner(props, _ref) {
     const v = e.target.value;
     setInputStr(v);
     setFilterQuery(v);
-    onInputChange?.(e, v);
+    onInputChange?.(e, v, "input");
     if (!open) openPopup();
   };
   const handleKeyDown = (e) => {
@@ -2579,7 +2575,7 @@ function AutocompleteInner(props, _ref) {
     multiple && (renderTags ? renderTags(selectedValues, ({ index }) => ({
       key: index,
       onDelete: (e) => removeTag(selectedValues[index], e)
-    })) : /* @__PURE__ */ import_react19.default.createElement(import_react19.default.Fragment, null, visibleTags.map((opt, i) => /* @__PURE__ */ import_react19.default.createElement("span", { key: i, className: "rf-autocomplete__tag" }, /* @__PURE__ */ import_react19.default.createElement("span", { style: { overflow: "hidden", textOverflow: "ellipsis" } }, getOptionLabel(opt)), /* @__PURE__ */ import_react19.default.createElement(
+    })) : /* @__PURE__ */ import_react19.default.createElement(import_react19.default.Fragment, null, visibleTags.map((opt, i) => /* @__PURE__ */ import_react19.default.createElement("span", { key: i, className: "rf-autocomplete__tag" }, /* @__PURE__ */ import_react19.default.createElement("span", { style: { overflow: "hidden", textOverflow: "ellipsis" } }, getOptionLabel(opt)), !disabled && /* @__PURE__ */ import_react19.default.createElement(
       "button",
       {
         type: "button",
@@ -2632,7 +2628,7 @@ function AutocompleteInner(props, _ref) {
         "aria-label": "Clear"
       },
       /* @__PURE__ */ import_react19.default.createElement(CloseSmIcon, { size: 16 })
-    ), !freeSolo && /* @__PURE__ */ import_react19.default.createElement(
+    ), !freeSolo && !disabled && /* @__PURE__ */ import_react19.default.createElement(
       "button",
       {
         type: "button",
@@ -3807,16 +3803,15 @@ var DateField = ({
         }
       }
     ),
-    /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-text-field__adornment rf-text-field__adornment--end" }, /* @__PURE__ */ import_react21.default.createElement(
+    !disabled && /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-text-field__adornment rf-text-field__adornment--end" }, /* @__PURE__ */ import_react21.default.createElement(
       "button",
       {
         type: "button",
         className: "rf-date-field__icon-btn",
         tabIndex: -1,
-        disabled,
         onClick: (e) => {
           e.stopPropagation();
-          if (!disabled) setOpen((o) => !o);
+          setOpen((o) => !o);
         },
         "aria-label": "Pick date"
       },
@@ -4416,16 +4411,15 @@ var DateRangeField = ({
         }
       }
     ),
-    /* @__PURE__ */ import_react22.default.createElement("div", { className: "rf-text-field__adornment rf-text-field__adornment--end" }, /* @__PURE__ */ import_react22.default.createElement(
+    !disabled && /* @__PURE__ */ import_react22.default.createElement("div", { className: "rf-text-field__adornment rf-text-field__adornment--end" }, /* @__PURE__ */ import_react22.default.createElement(
       "button",
       {
         type: "button",
         className: "rf-date-field__icon-btn",
         tabIndex: -1,
-        disabled,
         onClick: (e) => {
           e.stopPropagation();
-          if (!disabled) setOpen((o) => !o);
+          setOpen((o) => !o);
         },
         "aria-label": "Pick date range"
       },
@@ -4619,7 +4613,59 @@ var RufousLogoLoader = ({ size = 80, sx, className }) => {
 
 // lib/DataGrid/DataGrid.tsx
 var import_react23 = __toESM(require("react"), 1);
+var import_react_dom5 = __toESM(require("react-dom"), 1);
 var import_lucide_react2 = require("lucide-react");
+function OverflowTooltip({ content }) {
+  const ref = (0, import_react23.useRef)(null);
+  const [pos, setPos] = (0, import_react23.useState)(null);
+  return /* @__PURE__ */ import_react23.default.createElement(import_react23.default.Fragment, null, /* @__PURE__ */ import_react23.default.createElement(
+    "span",
+    {
+      ref,
+      onMouseEnter: () => {
+        if (ref.current && ref.current.scrollWidth > ref.current.clientWidth) {
+          const r = ref.current.getBoundingClientRect();
+          setPos({ top: r.top, left: r.left + r.width / 2 });
+        }
+      },
+      onMouseLeave: () => setPos(null),
+      style: { display: "block", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }
+    },
+    content
+  ), pos && import_react_dom5.default.createPortal(
+    /* @__PURE__ */ import_react23.default.createElement("div", { style: {
+      position: "fixed",
+      top: pos.top - 4,
+      left: pos.left,
+      transform: "translate(-50%, -100%)",
+      background: "rgba(0,0,0,0.75)",
+      color: "#fff",
+      padding: "4px 8px",
+      borderRadius: 4,
+      fontSize: "0.75rem",
+      maxWidth: 320,
+      wordBreak: "break-word",
+      zIndex: 9999,
+      pointerEvents: "none",
+      whiteSpace: "normal"
+    } }, content),
+    document.body
+  ));
+}
+function formatCellValue(value, colType) {
+  if (value == null) return "";
+  if (colType === "number") {
+    const num = Number(value);
+    if (!isNaN(num)) {
+      const str = String(num);
+      if (str.includes("e") || str.includes("E")) {
+        return num.toLocaleString("en-US", { useGrouping: false, maximumFractionDigits: 20 });
+      }
+      return str;
+    }
+  }
+  return String(value);
+}
 function getAllGroupIds(rows, fields, getKey, depth = 0, parentId = "") {
   if (!fields.length || !rows.length) return [];
   const [field, ...rest] = fields;
@@ -5295,6 +5341,7 @@ function DataGrid({
       onChange: (e) => {
         setFilterText(e.target.value);
         setCurrentPage(1);
+        if (onPaginationModelChange) onPaginationModelChange({ page: 0, pageSize: activePageSize });
       }
     }
   )), showFilterBtn && /* @__PURE__ */ import_react23.default.createElement(Tooltip, { title: "Filters", placement: "top" }, /* @__PURE__ */ import_react23.default.createElement(
@@ -5502,7 +5549,7 @@ function DataGrid({
           const formattedValue = col.valueFormatter ? col.valueFormatter({ value, row: item, field }) : value;
           if (col.renderCell) return col.renderCell({ value, row: item, field });
           if (col.render) return col.render(value, item);
-          return String(formattedValue ?? "");
+          return /* @__PURE__ */ import_react23.default.createElement(OverflowTooltip, { content: formatCellValue(formattedValue, col.type) });
         })()
       );
     }), actions && /* @__PURE__ */ import_react23.default.createElement("td", { className: "dg-row-actions-cell" }, (() => {
@@ -5571,7 +5618,7 @@ function DataGrid({
         setActiveMenu(null);
       } }, /* @__PURE__ */ import_react23.default.createElement(import_lucide_react2.Layers, { size: 14 }), " Group by");
     })(),
-    /* @__PURE__ */ import_react23.default.createElement("button", { className: "dg-menu-item", onClick: () => toggleHide(activeMenu) }, /* @__PURE__ */ import_react23.default.createElement(import_lucide_react2.EyeOff, { size: 14 }), " Hide column"),
+    activeMenuCol?.hideable !== false && /* @__PURE__ */ import_react23.default.createElement("button", { className: "dg-menu-item", onClick: () => toggleHide(activeMenu) }, /* @__PURE__ */ import_react23.default.createElement(import_lucide_react2.EyeOff, { size: 14 }), " Hide column"),
     /* @__PURE__ */ import_react23.default.createElement("button", { className: "dg-menu-item", onClick: () => {
       setShowManageColumns(true);
       setActiveMenu(null);
@@ -5588,7 +5635,7 @@ function DataGrid({
   )), resolvedColumns.filter((c) => c.header.toLowerCase().includes(colSearch.toLowerCase())).map((col) => {
     const key = String(col.key);
     const isUnhideable = col.hideable === false;
-    return /* @__PURE__ */ import_react23.default.createElement("div", { key, className: `dg-col-row${isUnhideable ? " disabled" : ""}` }, /* @__PURE__ */ import_react23.default.createElement("div", { className: "dg-col-label" }, /* @__PURE__ */ import_react23.default.createElement("div", { className: "dg-col-dot", style: { background: col.hidden ? "var(--border-color)" : "var(--primary-color)" } }), col.header), !isUnhideable && /* @__PURE__ */ import_react23.default.createElement("button", { className: "dg-icon-btn", onClick: () => toggleHide(key) }, col.hidden ? /* @__PURE__ */ import_react23.default.createElement(import_lucide_react2.EyeOff, { size: 14 }) : /* @__PURE__ */ import_react23.default.createElement(import_lucide_react2.EyeOff, { size: 14, style: { opacity: 0.4 } })));
+    return /* @__PURE__ */ import_react23.default.createElement("div", { key, className: `dg-col-row${isUnhideable ? " disabled" : ""}` }, /* @__PURE__ */ import_react23.default.createElement("div", { className: "dg-col-label" }, /* @__PURE__ */ import_react23.default.createElement("div", { className: "dg-col-dot", style: { background: col.hidden ? "var(--border-color)" : "var(--primary-color)" } }), col.header), !isUnhideable && /* @__PURE__ */ import_react23.default.createElement("button", { className: "dg-icon-btn", onClick: () => toggleHide(key) }, col.hidden ? /* @__PURE__ */ import_react23.default.createElement(import_lucide_react2.EyeOff, { size: 14 }) : /* @__PURE__ */ import_react23.default.createElement(import_lucide_react2.Eye, { size: 14 })));
   })), /* @__PURE__ */ import_react23.default.createElement("div", { className: "dg-modal-footer" }, /* @__PURE__ */ import_react23.default.createElement("button", { className: "dg-action-btn", onClick: () => setColumnOverrides((prev) => {
     const next = { ...prev };
     resolvedColumns.forEach((c) => {
@@ -5648,7 +5695,9 @@ function DataGrid({
         value: f.value,
         onChange: (val) => setAdvancedFilters((p) => p.map((fi, i) => i === idx ? { ...fi, value: val } : fi)),
         variant: "compact",
-        fullWidth: true
+        fullWidth: true,
+        dateFormat: "DD/MM/YYYY",
+        placeholder: "DD/MM/YYYY"
       }
     )), !hideValue && col?.type === "status" && (() => {
       const opts = col.statusOptions || [...new Set(data.map((item) => String(item[col.field || col.key || ""])))].filter((v) => v && v !== "undefined" && v !== "null").sort();
@@ -5702,7 +5751,7 @@ function DataGrid({
 
 // lib/Select/Select.tsx
 var import_react24 = __toESM(require("react"), 1);
-var import_react_dom5 = __toESM(require("react-dom"), 1);
+var import_react_dom6 = __toESM(require("react-dom"), 1);
 var ChevronDownIcon2 = () => /* @__PURE__ */ import_react24.default.createElement("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ import_react24.default.createElement("polyline", { points: "6 9 12 15 18 9" }));
 var CheckIcon2 = () => /* @__PURE__ */ import_react24.default.createElement("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ import_react24.default.createElement("polyline", { points: "20 6 9 17 4 12" }));
 function normaliseOptions(options) {
@@ -5911,10 +5960,10 @@ var Select = import_react24.default.forwardRef(function Select2(props, ref) {
       renderDisplay(),
       label && /* @__PURE__ */ import_react24.default.createElement("label", { id: inputId, className: "rf-text-field__label" }, label, required && /* @__PURE__ */ import_react24.default.createElement("span", { className: "rf-text-field__asterisk" }, " *")),
       variant === "outlined" && /* @__PURE__ */ import_react24.default.createElement("fieldset", { className: "rf-text-field__notch" }, label ? /* @__PURE__ */ import_react24.default.createElement("legend", { className: "rf-text-field__legend" }, /* @__PURE__ */ import_react24.default.createElement("span", null, label, required ? " *" : "")) : /* @__PURE__ */ import_react24.default.createElement("legend", { className: "rf-text-field__legend--empty" })),
-      /* @__PURE__ */ import_react24.default.createElement("div", { className: "rf-select__arrow", "aria-hidden": "true" }, /* @__PURE__ */ import_react24.default.createElement(ChevronDownIcon2, null))
+      !disabled && /* @__PURE__ */ import_react24.default.createElement("div", { className: "rf-select__arrow", "aria-hidden": "true" }, /* @__PURE__ */ import_react24.default.createElement(ChevronDownIcon2, null))
     ),
     helperText && /* @__PURE__ */ import_react24.default.createElement("div", { className: `rf-text-field__helper-text${error ? " rf-text-field__helper-text--error" : ""}` }, helperText),
-    open && !disabled && import_react_dom5.default.createPortal(
+    open && !disabled && import_react_dom6.default.createPortal(
       /* @__PURE__ */ import_react24.default.createElement("div", { ref: popupRef, className: "rf-select__popup", role: "presentation", style: popupStyle }, /* @__PURE__ */ import_react24.default.createElement("ul", { ref: listRef, className: "rf-select__listbox", role: "listbox", "aria-multiselectable": multiple }, (() => {
         const renderOpt = (opt, selectableIdx) => {
           const selected = isSelected(opt.value);
@@ -8001,7 +8050,7 @@ Stepper.displayName = "Stepper";
 
 // lib/Menu/Menu.tsx
 var import_react40 = __toESM(require("react"), 1);
-var import_react_dom6 = __toESM(require("react-dom"), 1);
+var import_react_dom7 = __toESM(require("react-dom"), 1);
 var MenuDivider = () => /* @__PURE__ */ import_react40.default.createElement("hr", { className: "rf-menu-divider", "aria-hidden": "true" });
 MenuDivider.displayName = "MenuDivider";
 var MenuItem = ({
@@ -8154,13 +8203,13 @@ var Menu = ({
     },
     children
   ));
-  return import_react_dom6.default.createPortal(portal, document.body);
+  return import_react_dom7.default.createPortal(portal, document.body);
 };
 Menu.displayName = "Menu";
 
 // lib/Drawer/Drawer.tsx
 var import_react41 = __toESM(require("react"), 1);
-var import_react_dom7 = __toESM(require("react-dom"), 1);
+var import_react_dom8 = __toESM(require("react-dom"), 1);
 var Drawer = ({
   open,
   onClose,
@@ -8260,7 +8309,7 @@ var Drawer = ({
     },
     children
   ));
-  return import_react_dom7.default.createPortal(
+  return import_react_dom8.default.createPortal(
     /* @__PURE__ */ import_react41.default.createElement("div", { className: rootClasses, style }, drawerContent),
     document.body
   );
@@ -8269,7 +8318,7 @@ Drawer.displayName = "Drawer";
 
 // lib/Snackbar/Snackbar.tsx
 var import_react42 = __toESM(require("react"), 1);
-var import_react_dom8 = __toESM(require("react-dom"), 1);
+var import_react_dom9 = __toESM(require("react-dom"), 1);
 var SEVERITY_ICONS = {
   success: "\u2713",
   error: "\u2715",
@@ -8374,7 +8423,7 @@ var Snackbar = ({
       "\u2715"
     )
   ));
-  return import_react_dom8.default.createPortal(snackbarEl, document.body);
+  return import_react_dom9.default.createPortal(snackbarEl, document.body);
 };
 Snackbar.displayName = "Snackbar";
 
@@ -8428,7 +8477,7 @@ Link.displayName = "Link";
 
 // lib/Popper/Popper.tsx
 var import_react44 = __toESM(require("react"), 1);
-var import_react_dom9 = __toESM(require("react-dom"), 1);
+var import_react_dom10 = __toESM(require("react-dom"), 1);
 function computePopperPosition(anchorRect, popperRect, placement, offset2 = [0, 8]) {
   const [skid, dist] = offset2;
   let top = 0;
@@ -8571,13 +8620,13 @@ var Popper = ({
   if (disablePortal) {
     return /* @__PURE__ */ import_react44.default.createElement(import_react44.default.Fragment, null, popper);
   }
-  return import_react_dom9.default.createPortal(popper, document.body);
+  return import_react_dom10.default.createPortal(popper, document.body);
 };
 Popper.displayName = "Popper";
 
 // lib/Popover/Popover.tsx
 var import_react45 = __toESM(require("react"), 1);
-var import_react_dom10 = __toESM(require("react-dom"), 1);
+var import_react_dom11 = __toESM(require("react-dom"), 1);
 function getPoint(rect, v, h) {
   const x = h === "left" ? rect.left : h === "center" ? rect.left + rect.width / 2 : rect.right;
   const y = v === "top" ? rect.top : v === "center" ? rect.top + rect.height / 2 : rect.bottom;
@@ -8680,7 +8729,7 @@ var Popover = ({
   if (disablePortal) {
     return /* @__PURE__ */ import_react45.default.createElement("div", { className: `${rootClasses} rf-popover-inline`, style }, content);
   }
-  return import_react_dom10.default.createPortal(
+  return import_react_dom11.default.createPortal(
     /* @__PURE__ */ import_react45.default.createElement("div", { className: rootClasses, style }, content),
     document.body
   );
@@ -9331,7 +9380,7 @@ PhoneField.displayName = "PhoneField";
 
 // lib/TreeSelect/TreeSelect.tsx
 var import_react49 = __toESM(require("react"), 1);
-var import_react_dom11 = __toESM(require("react-dom"), 1);
+var import_react_dom12 = __toESM(require("react-dom"), 1);
 var import_lucide_react3 = require("lucide-react");
 function nodeId(node) {
   return node.id ?? node._id;
@@ -9641,11 +9690,13 @@ function TreeSelect({
     error ? "rf-text-field--error" : "",
     fullWidth ? "rf-text-field--full-width" : "",
     isFloating ? "rf-text-field--floating" : "",
+    label ? "rf-text-field--has-label" : "",
+    "rf-text-field--adorned-end",
     "rf-tree-select",
     sxClass,
     className
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ import_react49.default.createElement("div", { className: rootClasses, style }, label && /* @__PURE__ */ import_react49.default.createElement("label", { className: "rf-text-field__label" }, label, " ", required && /* @__PURE__ */ import_react49.default.createElement("span", { className: "rf-text-field__asterisk" }, "*")), /* @__PURE__ */ import_react49.default.createElement(
+  return /* @__PURE__ */ import_react49.default.createElement("div", { className: rootClasses, style }, /* @__PURE__ */ import_react49.default.createElement(
     "div",
     {
       ref: triggerRef,
@@ -9657,7 +9708,7 @@ function TreeSelect({
       onBlur: handleTriggerBlur,
       onKeyDown: handleKeyDown
     },
-    isMultiple ? /* @__PURE__ */ import_react49.default.createElement("div", { className: "rf-ts__chips" }, tagNodes.length > 0 ? tagNodes.map((node) => /* @__PURE__ */ import_react49.default.createElement("span", { key: node.id, className: "rf-ts__chip" }, node.label, /* @__PURE__ */ import_react49.default.createElement(
+    isMultiple ? /* @__PURE__ */ import_react49.default.createElement("div", { className: "rf-ts__chips" }, tagNodes.length > 0 ? tagNodes.map((node) => /* @__PURE__ */ import_react49.default.createElement("span", { key: node.id, className: "rf-ts__chip" }, node.label, !disabled && /* @__PURE__ */ import_react49.default.createElement(
       "button",
       {
         type: "button",
@@ -9666,8 +9717,8 @@ function TreeSelect({
         tabIndex: -1
       },
       /* @__PURE__ */ import_react49.default.createElement(import_lucide_react3.X, { size: 10 })
-    ))) : open ? /* @__PURE__ */ import_react49.default.createElement("span", { className: "rf-ts__placeholder" }, placeholder) : null) : /* @__PURE__ */ import_react49.default.createElement("div", { className: `rf-ts__display${!hasValue ? " rf-ts__display--placeholder" : ""}` }, hasValue ? tagNodes[0]?.label : open ? placeholder : "\xA0"),
-    /* @__PURE__ */ import_react49.default.createElement("div", { className: "rf-autocomplete__endgroup" }, clearable && hasValue && /* @__PURE__ */ import_react49.default.createElement(
+    ))) : isFloating || !label ? /* @__PURE__ */ import_react49.default.createElement("span", { className: "rf-ts__placeholder" }, placeholder) : null) : /* @__PURE__ */ import_react49.default.createElement("div", { className: `rf-ts__display${!hasValue ? " rf-ts__display--placeholder" : ""}` }, hasValue ? tagNodes[0]?.label : isFloating || !label ? placeholder : "\xA0"),
+    /* @__PURE__ */ import_react49.default.createElement("div", { className: "rf-autocomplete__endgroup" }, !disabled && clearable && hasValue && /* @__PURE__ */ import_react49.default.createElement(
       "button",
       {
         type: "button",
@@ -9676,7 +9727,7 @@ function TreeSelect({
         tabIndex: -1
       },
       /* @__PURE__ */ import_react49.default.createElement(import_lucide_react3.X, { size: 16 })
-    ), /* @__PURE__ */ import_react49.default.createElement(
+    ), !disabled && /* @__PURE__ */ import_react49.default.createElement(
       "button",
       {
         type: "button",
@@ -9689,10 +9740,11 @@ function TreeSelect({
       },
       /* @__PURE__ */ import_react49.default.createElement(import_lucide_react3.ChevronDown, { size: 18 })
     )),
+    label && /* @__PURE__ */ import_react49.default.createElement("label", { className: "rf-text-field__label" }, label, required && /* @__PURE__ */ import_react49.default.createElement("span", { className: "rf-text-field__asterisk" }, " *")),
     variant === "outlined" && /* @__PURE__ */ import_react49.default.createElement("fieldset", { "aria-hidden": true, className: "rf-text-field__notch" }, /* @__PURE__ */ import_react49.default.createElement("legend", { className: "rf-text-field__legend" }, label && /* @__PURE__ */ import_react49.default.createElement("span", null, label, required ? " *" : ""))),
     variant === "filled" && /* @__PURE__ */ import_react49.default.createElement(import_react49.default.Fragment, null, /* @__PURE__ */ import_react49.default.createElement("div", { className: "rf-text-field__filled-bg" }), /* @__PURE__ */ import_react49.default.createElement("div", { className: "rf-text-field__underline" })),
     variant === "standard" && /* @__PURE__ */ import_react49.default.createElement("div", { className: "rf-text-field__underline" })
-  ), helperText && /* @__PURE__ */ import_react49.default.createElement("p", { className: `rf-text-field__helper-text${error ? " rf-text-field__helper-text--error" : ""}` }, helperText), open && import_react_dom11.default.createPortal(
+  ), helperText && /* @__PURE__ */ import_react49.default.createElement("p", { className: `rf-text-field__helper-text${error ? " rf-text-field__helper-text--error" : ""}` }, helperText), open && import_react_dom12.default.createPortal(
     /* @__PURE__ */ import_react49.default.createElement(
       "div",
       {
@@ -9942,11 +9994,11 @@ function SmartSelect({
     setInputValue(inputValue2);
     if (!onSearchChange) return;
     if (debounceTimer.current) clearTimeout(debounceTimer.current);
-    if (reason === "reset") return;
-    if (!inputValue2) {
-      onSearchChange("", 0);
+    if (reason !== "input") {
+      if (reason === "clear") onSearchChange("", 0);
       return;
     }
+    if (!inputValue2) return;
     const q = inputValue2.toLowerCase();
     let localCount = 0;
     for (const opt of flatOptionsList) {
@@ -10105,7 +10157,7 @@ function SmartSelect({
 
 // lib/RufousTextEditor/RufousTextEditor.tsx
 var import_react62 = __toESM(require("react"), 1);
-var import_react_dom18 = require("react-dom");
+var import_react_dom19 = require("react-dom");
 var import_react63 = require("@tiptap/react");
 var import_starter_kit = __toESM(require("@tiptap/starter-kit"), 1);
 var import_extension_placeholder = __toESM(require("@tiptap/extension-placeholder"), 1);
@@ -10227,7 +10279,7 @@ function createMentionSuggestion(users) {
 
 // lib/RufousTextEditor/Toolbar.tsx
 var import_react58 = __toESM(require("react"), 1);
-var import_react_dom14 = require("react-dom");
+var import_react_dom15 = require("react-dom");
 
 // lib/RufousTextEditor/TextToSpeech.tsx
 var import_react54 = __toESM(require("react"), 1);
@@ -10538,7 +10590,7 @@ var SpeechToText_default = SpeechToText;
 
 // lib/RufousTextEditor/AICommands.tsx
 var import_react56 = __toESM(require("react"), 1);
-var import_react_dom12 = require("react-dom");
+var import_react_dom13 = require("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." },
   { id: "shorter", label: "Make shorter", prompt: "Make the following text shorter and more concise while keeping the key points. Return only the shortened text, no explanations." },
@@ -10694,7 +10746,7 @@ var AICommands = ({ editor, onAICommand }) => {
       onClick: () => handleCommandSelect(cmd)
     },
     cmd.label
-  ))), /* @__PURE__ */ import_react56.default.createElement("div", { className: "ai-commands-hint" }, editor.state.selection.empty ? "Will apply to all text" : "Will apply to selected text"))), showModal && (0, import_react_dom12.createPortal)(
+  ))), /* @__PURE__ */ import_react56.default.createElement("div", { className: "ai-commands-hint" }, editor.state.selection.empty ? "Will apply to all text" : "Will apply to selected text"))), showModal && (0, import_react_dom13.createPortal)(
     /* @__PURE__ */ import_react56.default.createElement("div", { className: "ai-modal-overlay", onMouseDown: handleCancel }, /* @__PURE__ */ import_react56.default.createElement("div", { className: "ai-modal", onMouseDown: (e) => e.stopPropagation() }, /* @__PURE__ */ import_react56.default.createElement("div", { className: "ai-modal-header" }, /* @__PURE__ */ import_react56.default.createElement("span", { className: "ai-modal-title" }, "AI Assistant"), /* @__PURE__ */ import_react56.default.createElement("button", { className: "ai-modal-close", onClick: handleCancel }, "\xD7")), /* @__PURE__ */ import_react56.default.createElement("div", { className: "ai-modal-prompt-section" }, /* @__PURE__ */ import_react56.default.createElement("label", { className: "ai-modal-label" }, "Prompt"), /* @__PURE__ */ import_react56.default.createElement("div", { className: "ai-modal-prompt-row" }, /* @__PURE__ */ import_react56.default.createElement(
       "textarea",
       {
@@ -10743,7 +10795,7 @@ var AICommands_default = AICommands;
 
 // lib/RufousTextEditor/TranslateModal.tsx
 var import_react57 = __toESM(require("react"), 1);
-var import_react_dom13 = require("react-dom");
+var import_react_dom14 = require("react-dom");
 var LANGUAGES = [
   { code: "af", name: "Afrikaans" },
   { code: "sq", name: "Albanian" },
@@ -10934,7 +10986,7 @@ var TranslateModal = ({ editor, onClose, onTranslate, initialSource, initialTarg
       setTranslating(false);
     }
   };
-  return (0, import_react_dom13.createPortal)(
+  return (0, import_react_dom14.createPortal)(
     /* @__PURE__ */ import_react57.default.createElement("div", { className: "modal-overlay", onClick: onClose }, /* @__PURE__ */ import_react57.default.createElement("div", { className: "modal-content translate-modal", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ import_react57.default.createElement("div", { className: "modal-header" }, /* @__PURE__ */ import_react57.default.createElement("h3", null, "Translate options"), /* @__PURE__ */ import_react57.default.createElement("button", { className: "modal-close", onClick: onClose }, "\xD7")), /* @__PURE__ */ import_react57.default.createElement("div", { className: "modal-body" }, /* @__PURE__ */ import_react57.default.createElement("div", { className: "translate-columns" }, /* @__PURE__ */ import_react57.default.createElement("div", { className: "translate-col" }, /* @__PURE__ */ import_react57.default.createElement("div", { className: "translate-filter" }, /* @__PURE__ */ import_react57.default.createElement(
       "input",
       {
@@ -11843,7 +11895,7 @@ var Dropdown = ({ trigger, children, className = "", keepOpen = false }) => {
     },
     trigger.label,
     /* @__PURE__ */ import_react58.default.createElement("span", { className: "dropdown-arrow" }, "\u25BE")
-  )), open && (0, import_react_dom14.createPortal)(
+  )), open && (0, import_react_dom15.createPortal)(
     /* @__PURE__ */ import_react58.default.createElement("div", { className: "rf-rte-wrapper rf-rte-dropdown-portal" }, /* @__PURE__ */ import_react58.default.createElement("div", { ref: menuRef, className: "dropdown-menu dropdown-menu-fixed", onClick: keepOpen ? void 0 : () => setOpen(false) }, typeof children === "function" ? children(() => setOpen(false)) : children)),
     document.body
   ));
@@ -12728,7 +12780,7 @@ var Toolbar_default = Toolbar;
 
 // lib/RufousTextEditor/ImageToolbar.tsx
 var import_react59 = __toESM(require("react"), 1);
-var import_react_dom15 = require("react-dom");
+var import_react_dom16 = require("react-dom");
 var ALIGNMENTS = [
   { value: "left", label: "Left", icon: "\u2630" },
   { value: "center", label: "Center", icon: "\u2261" },
@@ -12899,7 +12951,7 @@ var ImageToolbar = ({ editor }) => {
   }, [editor]);
   const node = editor?.state.selection.node;
   const isImage = node && node.type.name === "image";
-  if (!editor || !isImage || !pos) return showModal ? (0, import_react_dom15.createPortal)(
+  if (!editor || !isImage || !pos) return showModal ? (0, import_react_dom16.createPortal)(
     /* @__PURE__ */ import_react59.default.createElement(ImagePropertiesModal, { editor, node, onClose: () => setShowModal(false) }),
     document.body
   ) : null;
@@ -12976,7 +13028,7 @@ var ImageToolbar = ({ editor }) => {
     );
     setShowVAlign(false);
   };
-  return (0, import_react_dom15.createPortal)(
+  return (0, import_react_dom16.createPortal)(
     /* @__PURE__ */ import_react59.default.createElement(import_react59.default.Fragment, null, /* @__PURE__ */ import_react59.default.createElement(
       "div",
       {
@@ -13007,7 +13059,7 @@ var ImageToolbar_default = ImageToolbar;
 
 // lib/RufousTextEditor/VideoToolbar.tsx
 var import_react60 = __toESM(require("react"), 1);
-var import_react_dom16 = require("react-dom");
+var import_react_dom17 = require("react-dom");
 var ALIGNMENTS2 = [
   { value: "left", label: "Left", icon: "\u2630" },
   { value: "center", label: "Center", icon: "\u2261" },
@@ -13152,7 +13204,7 @@ var VideoToolbar = ({ editor }) => {
   const node = editor?.state.selection.node;
   const isVideo = node && VIDEO_TYPES.includes(node.type.name);
   const nodeType = node?.type.name;
-  if (!editor || !isVideo || !pos) return showModal ? (0, import_react_dom16.createPortal)(
+  if (!editor || !isVideo || !pos) return showModal ? (0, import_react_dom17.createPortal)(
     /* @__PURE__ */ import_react60.default.createElement(VideoPropertiesModal, { editor, node, nodeType, onClose: () => setShowModal(false) }),
     document.body
   ) : null;
@@ -13199,7 +13251,7 @@ var VideoToolbar = ({ editor }) => {
       })
     );
   };
-  return (0, import_react_dom16.createPortal)(
+  return (0, import_react_dom17.createPortal)(
     /* @__PURE__ */ import_react60.default.createElement(import_react60.default.Fragment, null, /* @__PURE__ */ import_react60.default.createElement(
       "div",
       {
@@ -13247,7 +13299,7 @@ var VideoToolbar_default = VideoToolbar;
 
 // lib/RufousTextEditor/TableToolbar.tsx
 var import_react61 = __toESM(require("react"), 1);
-var import_react_dom17 = require("react-dom");
+var import_react_dom18 = require("react-dom");
 var IconAddRowBefore = () => /* @__PURE__ */ import_react61.default.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ import_react61.default.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__ */ import_react61.default.createElement("path", { d: "M9 6h2v1.5h1.5v2H11V11H9V9.5H7.5v-2H9z" }));
 var IconAddRowAfter = () => /* @__PURE__ */ import_react61.default.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ import_react61.default.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__ */ import_react61.default.createElement("path", { d: "M9 14h2v1.5h1.5v2H11V19H9v-1.5H7.5v-2H9z" }));
 var IconAddColBefore = () => /* @__PURE__ */ import_react61.default.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ import_react61.default.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-9 16H5V5h6v14zm8 0h-6V5h6v14z" }), /* @__PURE__ */ import_react61.default.createElement("path", { d: "M6 10h1.5v2H6v1.5H4v-2h1.5V10H4V8h2z", transform: "translate(2,1)" }));
@@ -13304,7 +13356,7 @@ var TableToolbar = ({ editor }) => {
   const canMerge = editor.can().mergeCells();
   const canSplit = editor.can().splitCell();
   const prevent = (e) => e.preventDefault();
-  return (0, import_react_dom17.createPortal)(
+  return (0, import_react_dom18.createPortal)(
     /* @__PURE__ */ import_react61.default.createElement(
       "div",
       {
@@ -13911,7 +13963,7 @@ var RufousTextEditor = ({
         },
         "\u201C Quote"
       )
-    ), /* @__PURE__ */ import_react62.default.createElement("div", { className: "status-bar" }, /* @__PURE__ */ import_react62.default.createElement("div", { className: "status-bar-left" }, onSaveProp && /* @__PURE__ */ import_react62.default.createElement("button", { onClick: handleSave, className: "status-btn save-btn" }, "Save"), onExportProp && /* @__PURE__ */ import_react62.default.createElement("button", { onClick: handleExport, className: "status-btn export-btn" }, "Export")), /* @__PURE__ */ import_react62.default.createElement("div", { className: "status-bar-right" }, saveStatus && /* @__PURE__ */ import_react62.default.createElement("span", { className: "save-status" }, saveStatus), editor && /* @__PURE__ */ import_react62.default.createElement(import_react62.default.Fragment, null, /* @__PURE__ */ import_react62.default.createElement("span", { className: "word-count" }, "CHARS: ", editor.storage.characterCount?.characters?.() ?? editor.getText().length), /* @__PURE__ */ import_react62.default.createElement("span", { className: "word-count" }, "WORDS: ", editor.storage.characterCount?.words?.() ?? editor.getText().split(/\s+/).filter(Boolean).length)))), linkModalOpen && (0, import_react_dom18.createPortal)(
+    ), /* @__PURE__ */ import_react62.default.createElement("div", { className: "status-bar" }, /* @__PURE__ */ import_react62.default.createElement("div", { className: "status-bar-left" }, onSaveProp && /* @__PURE__ */ import_react62.default.createElement("button", { onClick: handleSave, className: "status-btn save-btn" }, "Save"), onExportProp && /* @__PURE__ */ import_react62.default.createElement("button", { onClick: handleExport, className: "status-btn export-btn" }, "Export")), /* @__PURE__ */ import_react62.default.createElement("div", { className: "status-bar-right" }, saveStatus && /* @__PURE__ */ import_react62.default.createElement("span", { className: "save-status" }, saveStatus), editor && /* @__PURE__ */ import_react62.default.createElement(import_react62.default.Fragment, null, /* @__PURE__ */ import_react62.default.createElement("span", { className: "word-count" }, "CHARS: ", editor.storage.characterCount?.characters?.() ?? editor.getText().length), /* @__PURE__ */ import_react62.default.createElement("span", { className: "word-count" }, "WORDS: ", editor.storage.characterCount?.words?.() ?? editor.getText().split(/\s+/).filter(Boolean).length)))), linkModalOpen && (0, import_react_dom19.createPortal)(
       /* @__PURE__ */ import_react62.default.createElement("div", { className: "link-modal-overlay", onClick: handleLinkCancel }, /* @__PURE__ */ import_react62.default.createElement("div", { className: "link-modal", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ import_react62.default.createElement("div", { className: "link-modal-body" }, /* @__PURE__ */ import_react62.default.createElement("div", { className: "link-modal-field" }, /* @__PURE__ */ import_react62.default.createElement("label", { className: "link-modal-label" }, "URL"), /* @__PURE__ */ import_react62.default.createElement(
         "input",
         {
@@ -13956,7 +14008,7 @@ var RufousTextEditor = ({
     )),
     helperText && /* @__PURE__ */ import_react62.default.createElement("div", { className: `rf-rte-helper-text ${error ? "rf-rte-helper-error" : ""}` }, helperText)
   );
-  return isFullscreen ? (0, import_react_dom18.createPortal)(wrapperJsx, document.body) : wrapperJsx;
+  return isFullscreen ? (0, import_react_dom19.createPortal)(wrapperJsx, document.body) : wrapperJsx;
 };
 var RufousTextContent = ({ content, className, style, sx }) => {
   const sxClass = useSx(sx);

package/dist/main.css

@@ -6944,6 +6944,12 @@ pre {
 .rf-text-field__input:focus::placeholder {
   opacity: 1;
 }
+.rf-text-field:not(.rf-text-field--has-label) .rf-text-field__input::placeholder {
+  opacity: 1;
+}
+.rf-text-field__legend--empty {
+  display: none;
+}
 .rf-text-field__helper-text {
   color: var(--tf-placeholder-color);
   font-size: 0.75rem;

package/dist/main.d.cts

@@ -714,8 +714,8 @@ interface AutocompleteProps<T = string> {
     onChange?: (event: React__default.SyntheticEvent, value: T | T[] | null, reason: 'selectOption' | 'removeOption' | 'clear' | 'freeSolo') => void;
     /** Controlled text in the input */
     inputValue?: string;
-    /** Called on every keystroke — receives the native event and the new input string */
-    onInputChange?: (event: React__default.SyntheticEvent | null, value: string) => void;
+    /** Called on every keystroke or when input resets — receives the native event, new input string, and reason */
+    onInputChange?: (event: React__default.SyntheticEvent | null, value: string, reason: 'input' | 'reset' | 'clear') => void;
     /** Return the string label for an option */
     getOptionLabel?: (option: T) => string;
     /** Decide equality between option and value (useful for objects) */

package/dist/main.d.ts

@@ -714,8 +714,8 @@ interface AutocompleteProps<T = string> {
     onChange?: (event: React__default.SyntheticEvent, value: T | T[] | null, reason: 'selectOption' | 'removeOption' | 'clear' | 'freeSolo') => void;
     /** Controlled text in the input */
     inputValue?: string;
-    /** Called on every keystroke — receives the native event and the new input string */
-    onInputChange?: (event: React__default.SyntheticEvent | null, value: string) => void;
+    /** Called on every keystroke or when input resets — receives the native event, new input string, and reason */
+    onInputChange?: (event: React__default.SyntheticEvent | null, value: string, reason: 'input' | 'reset' | 'clear') => void;
     /** Return the string label for an option */
     getOptionLabel?: (option: T) => string;
     /** Decide equality between option and value (useful for objects) */

package/dist/main.js

@@ -1659,12 +1659,6 @@ var STEP_BY_VARIANT = {
   "positive-integer": 1,
   "positive-decimal": 0.1
 };
-var MIN_BY_VARIANT = {
-  "integer": void 0,
-  "decimal": void 0,
-  "positive-integer": 0,
-  "positive-decimal": 0
-};
 var TextField = forwardRef3(({
   label,
   name,
@@ -1753,21 +1747,23 @@ var TextField = forwardRef3(({
       }
     }
   };
+  const stepBy = (delta) => {
+    if (!internalRef.current) return;
+    const step = Number(stepProp ?? (numberVariant ? STEP_BY_VARIANT[numberVariant] : 1));
+    const newVal = (parseFloat(internalRef.current.value) || 0) + delta * step;
+    const nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value")?.set;
+    nativeInputValueSetter?.call(internalRef.current, String(newVal));
+    triggerChange();
+  };
   const handleIncrement = (e) => {
     e.preventDefault();
     e.stopPropagation();
-    if (internalRef.current) {
-      internalRef.current.stepUp();
-      triggerChange();
-    }
+    stepBy(1);
   };
   const handleDecrement = (e) => {
     e.preventDefault();
     e.stopPropagation();
-    if (internalRef.current) {
-      internalRef.current.stepDown();
-      triggerChange();
-    }
+    stepBy(-1);
   };
   const handleKeyDown = (e) => {
     if (type === "number") {
@@ -1778,16 +1774,10 @@ var TextField = forwardRef3(({
       }
       if (e.key === "ArrowUp") {
         e.preventDefault();
-        if (internalRef.current) {
-          internalRef.current.stepUp();
-          triggerChange();
-        }
+        stepBy(1);
       } else if (e.key === "ArrowDown") {
         e.preventDefault();
-        if (internalRef.current) {
-          internalRef.current.stepDown();
-          triggerChange();
-        }
+        stepBy(-1);
       }
     }
     if (props.onKeyDown) props.onKeyDown(e);
@@ -1813,18 +1803,24 @@ var TextField = forwardRef3(({
     "input",
     {
       ref: internalRef,
-      type,
+      type: type === "number" ? "text" : type,
+      inputMode: type === "number" ? "numeric" : void 0,
       onKeyDown: handleKeyDown,
       className: "rf-text-field__input",
       placeholder: placeholder || (variant === "outlined" ? " " : void 0),
       name,
       id: inputId,
-      value,
+      value: (() => {
+        if (type !== "number" || value === void 0 || value === null || value === "") return value;
+        const str = String(value);
+        if (!str.includes("e") && !str.includes("E")) return str;
+        const num = Number(str);
+        if (isNaN(num)) return str;
+        return num.toLocaleString("en-US", { useGrouping: false, maximumFractionDigits: 20 });
+      })(),
       required,
       disabled,
       readOnly,
-      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,
       onChange: handleChange
@@ -2247,7 +2243,7 @@ function AutocompleteInner(props, _ref) {
     onClose?.();
     if (!justSelected && !freeSolo && !multiple && value == null) {
       setInputStr("");
-      onInputChange?.(null, "");
+      onInputChange?.(null, "", "reset");
     }
   }, [openProp, freeSolo, multiple, value, onInputChange, onClose]);
   useEffect5(() => {
@@ -2292,13 +2288,13 @@ function AutocompleteInner(props, _ref) {
       onChange?.(event, next, already ? "removeOption" : "selectOption");
       setInputStr("");
       setFilterQuery("");
-      onInputChange?.(event, "");
+      onInputChange?.(event, "", "reset");
       inputRef.current?.focus();
     } else {
       onChange?.(event, opt, "selectOption");
       setInputStr(getOptionLabel(opt));
       setFilterQuery("");
-      onInputChange?.(event, getOptionLabel(opt));
+      onInputChange?.(event, getOptionLabel(opt), "reset");
       closePopup(true);
     }
     setFocusedIdx(-1);
@@ -2308,7 +2304,7 @@ function AutocompleteInner(props, _ref) {
     onChange?.(e, multiple ? [] : null, "clear");
     setInputStr("");
     setFilterQuery("");
-    onInputChange?.(e, "");
+    onInputChange?.(e, "", "clear");
     inputRef.current?.focus();
   };
   const removeTag = (opt, e) => {
@@ -2320,7 +2316,7 @@ function AutocompleteInner(props, _ref) {
     const v = e.target.value;
     setInputStr(v);
     setFilterQuery(v);
-    onInputChange?.(e, v);
+    onInputChange?.(e, v, "input");
     if (!open) openPopup();
   };
   const handleKeyDown = (e) => {
@@ -2407,7 +2403,7 @@ function AutocompleteInner(props, _ref) {
     multiple && (renderTags ? renderTags(selectedValues, ({ index }) => ({
       key: index,
       onDelete: (e) => removeTag(selectedValues[index], e)
-    })) : /* @__PURE__ */ React70.createElement(React70.Fragment, null, visibleTags.map((opt, i) => /* @__PURE__ */ React70.createElement("span", { key: i, className: "rf-autocomplete__tag" }, /* @__PURE__ */ React70.createElement("span", { style: { overflow: "hidden", textOverflow: "ellipsis" } }, getOptionLabel(opt)), /* @__PURE__ */ React70.createElement(
+    })) : /* @__PURE__ */ React70.createElement(React70.Fragment, null, visibleTags.map((opt, i) => /* @__PURE__ */ React70.createElement("span", { key: i, className: "rf-autocomplete__tag" }, /* @__PURE__ */ React70.createElement("span", { style: { overflow: "hidden", textOverflow: "ellipsis" } }, getOptionLabel(opt)), !disabled && /* @__PURE__ */ React70.createElement(
       "button",
       {
         type: "button",
@@ -2460,7 +2456,7 @@ function AutocompleteInner(props, _ref) {
         "aria-label": "Clear"
       },
       /* @__PURE__ */ React70.createElement(CloseSmIcon, { size: 16 })
-    ), !freeSolo && /* @__PURE__ */ React70.createElement(
+    ), !freeSolo && !disabled && /* @__PURE__ */ React70.createElement(
       "button",
       {
         type: "button",
@@ -3640,16 +3636,15 @@ var DateField = ({
         }
       }
     ),
-    /* @__PURE__ */ React72.createElement("div", { className: "rf-text-field__adornment rf-text-field__adornment--end" }, /* @__PURE__ */ React72.createElement(
+    !disabled && /* @__PURE__ */ React72.createElement("div", { className: "rf-text-field__adornment rf-text-field__adornment--end" }, /* @__PURE__ */ React72.createElement(
       "button",
       {
         type: "button",
         className: "rf-date-field__icon-btn",
         tabIndex: -1,
-        disabled,
         onClick: (e) => {
           e.stopPropagation();
-          if (!disabled) setOpen((o) => !o);
+          setOpen((o) => !o);
         },
         "aria-label": "Pick date"
       },
@@ -4253,16 +4248,15 @@ var DateRangeField = ({
         }
       }
     ),
-    /* @__PURE__ */ React73.createElement("div", { className: "rf-text-field__adornment rf-text-field__adornment--end" }, /* @__PURE__ */ React73.createElement(
+    !disabled && /* @__PURE__ */ React73.createElement("div", { className: "rf-text-field__adornment rf-text-field__adornment--end" }, /* @__PURE__ */ React73.createElement(
       "button",
       {
         type: "button",
         className: "rf-date-field__icon-btn",
         tabIndex: -1,
-        disabled,
         onClick: (e) => {
           e.stopPropagation();
-          if (!disabled) setOpen((o) => !o);
+          setOpen((o) => !o);
         },
         "aria-label": "Pick date range"
       },
@@ -4456,6 +4450,7 @@ var RufousLogoLoader = ({ size = 80, sx, className }) => {
 
 // lib/DataGrid/DataGrid.tsx
 import React75, { useState as useState9, useMemo as useMemo2, useRef as useRef10, useEffect as useEffect9 } from "react";
+import ReactDOM4 from "react-dom";
 import {
   ChevronUp,
   ChevronDown,
@@ -4468,6 +4463,7 @@ import {
   X as X2,
   Pin,
   EyeOff,
+  Eye,
   Columns,
   ArrowUp,
   ArrowDown,
@@ -4476,6 +4472,57 @@ import {
   ChevronsUpDown,
   Layers
 } from "lucide-react";
+function OverflowTooltip({ content }) {
+  const ref = useRef10(null);
+  const [pos, setPos] = useState9(null);
+  return /* @__PURE__ */ React75.createElement(React75.Fragment, null, /* @__PURE__ */ React75.createElement(
+    "span",
+    {
+      ref,
+      onMouseEnter: () => {
+        if (ref.current && ref.current.scrollWidth > ref.current.clientWidth) {
+          const r = ref.current.getBoundingClientRect();
+          setPos({ top: r.top, left: r.left + r.width / 2 });
+        }
+      },
+      onMouseLeave: () => setPos(null),
+      style: { display: "block", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }
+    },
+    content
+  ), pos && ReactDOM4.createPortal(
+    /* @__PURE__ */ React75.createElement("div", { style: {
+      position: "fixed",
+      top: pos.top - 4,
+      left: pos.left,
+      transform: "translate(-50%, -100%)",
+      background: "rgba(0,0,0,0.75)",
+      color: "#fff",
+      padding: "4px 8px",
+      borderRadius: 4,
+      fontSize: "0.75rem",
+      maxWidth: 320,
+      wordBreak: "break-word",
+      zIndex: 9999,
+      pointerEvents: "none",
+      whiteSpace: "normal"
+    } }, content),
+    document.body
+  ));
+}
+function formatCellValue(value, colType) {
+  if (value == null) return "";
+  if (colType === "number") {
+    const num = Number(value);
+    if (!isNaN(num)) {
+      const str = String(num);
+      if (str.includes("e") || str.includes("E")) {
+        return num.toLocaleString("en-US", { useGrouping: false, maximumFractionDigits: 20 });
+      }
+      return str;
+    }
+  }
+  return String(value);
+}
 function getAllGroupIds(rows, fields, getKey, depth = 0, parentId = "") {
   if (!fields.length || !rows.length) return [];
   const [field, ...rest] = fields;
@@ -5151,6 +5198,7 @@ function DataGrid({
       onChange: (e) => {
         setFilterText(e.target.value);
         setCurrentPage(1);
+        if (onPaginationModelChange) onPaginationModelChange({ page: 0, pageSize: activePageSize });
       }
     }
   )), showFilterBtn && /* @__PURE__ */ React75.createElement(Tooltip, { title: "Filters", placement: "top" }, /* @__PURE__ */ React75.createElement(
@@ -5358,7 +5406,7 @@ function DataGrid({
           const formattedValue = col.valueFormatter ? col.valueFormatter({ value, row: item, field }) : value;
           if (col.renderCell) return col.renderCell({ value, row: item, field });
           if (col.render) return col.render(value, item);
-          return String(formattedValue ?? "");
+          return /* @__PURE__ */ React75.createElement(OverflowTooltip, { content: formatCellValue(formattedValue, col.type) });
         })()
       );
     }), actions && /* @__PURE__ */ React75.createElement("td", { className: "dg-row-actions-cell" }, (() => {
@@ -5427,7 +5475,7 @@ function DataGrid({
         setActiveMenu(null);
       } }, /* @__PURE__ */ React75.createElement(Layers, { size: 14 }), " Group by");
     })(),
-    /* @__PURE__ */ React75.createElement("button", { className: "dg-menu-item", onClick: () => toggleHide(activeMenu) }, /* @__PURE__ */ React75.createElement(EyeOff, { size: 14 }), " Hide column"),
+    activeMenuCol?.hideable !== false && /* @__PURE__ */ React75.createElement("button", { className: "dg-menu-item", onClick: () => toggleHide(activeMenu) }, /* @__PURE__ */ React75.createElement(EyeOff, { size: 14 }), " Hide column"),
     /* @__PURE__ */ React75.createElement("button", { className: "dg-menu-item", onClick: () => {
       setShowManageColumns(true);
       setActiveMenu(null);
@@ -5444,7 +5492,7 @@ function DataGrid({
   )), resolvedColumns.filter((c) => c.header.toLowerCase().includes(colSearch.toLowerCase())).map((col) => {
     const key = String(col.key);
     const isUnhideable = col.hideable === false;
-    return /* @__PURE__ */ React75.createElement("div", { key, className: `dg-col-row${isUnhideable ? " disabled" : ""}` }, /* @__PURE__ */ React75.createElement("div", { className: "dg-col-label" }, /* @__PURE__ */ React75.createElement("div", { className: "dg-col-dot", style: { background: col.hidden ? "var(--border-color)" : "var(--primary-color)" } }), col.header), !isUnhideable && /* @__PURE__ */ React75.createElement("button", { className: "dg-icon-btn", onClick: () => toggleHide(key) }, col.hidden ? /* @__PURE__ */ React75.createElement(EyeOff, { size: 14 }) : /* @__PURE__ */ React75.createElement(EyeOff, { size: 14, style: { opacity: 0.4 } })));
+    return /* @__PURE__ */ React75.createElement("div", { key, className: `dg-col-row${isUnhideable ? " disabled" : ""}` }, /* @__PURE__ */ React75.createElement("div", { className: "dg-col-label" }, /* @__PURE__ */ React75.createElement("div", { className: "dg-col-dot", style: { background: col.hidden ? "var(--border-color)" : "var(--primary-color)" } }), col.header), !isUnhideable && /* @__PURE__ */ React75.createElement("button", { className: "dg-icon-btn", onClick: () => toggleHide(key) }, col.hidden ? /* @__PURE__ */ React75.createElement(EyeOff, { size: 14 }) : /* @__PURE__ */ React75.createElement(Eye, { size: 14 })));
   })), /* @__PURE__ */ React75.createElement("div", { className: "dg-modal-footer" }, /* @__PURE__ */ React75.createElement("button", { className: "dg-action-btn", onClick: () => setColumnOverrides((prev) => {
     const next = { ...prev };
     resolvedColumns.forEach((c) => {
@@ -5504,7 +5552,9 @@ function DataGrid({
         value: f.value,
         onChange: (val) => setAdvancedFilters((p) => p.map((fi, i) => i === idx ? { ...fi, value: val } : fi)),
         variant: "compact",
-        fullWidth: true
+        fullWidth: true,
+        dateFormat: "DD/MM/YYYY",
+        placeholder: "DD/MM/YYYY"
       }
     )), !hideValue && col?.type === "status" && (() => {
       const opts = col.statusOptions || [...new Set(data.map((item) => String(item[col.field || col.key || ""])))].filter((v) => v && v !== "undefined" && v !== "null").sort();
@@ -5563,7 +5613,7 @@ import React76, {
   useEffect as useEffect10,
   useCallback as useCallback5
 } from "react";
-import ReactDOM4 from "react-dom";
+import ReactDOM5 from "react-dom";
 var ChevronDownIcon2 = () => /* @__PURE__ */ React76.createElement("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ React76.createElement("polyline", { points: "6 9 12 15 18 9" }));
 var CheckIcon2 = () => /* @__PURE__ */ React76.createElement("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ React76.createElement("polyline", { points: "20 6 9 17 4 12" }));
 function normaliseOptions(options) {
@@ -5772,10 +5822,10 @@ var Select = React76.forwardRef(function Select2(props, ref) {
       renderDisplay(),
       label && /* @__PURE__ */ React76.createElement("label", { id: inputId, className: "rf-text-field__label" }, label, required && /* @__PURE__ */ React76.createElement("span", { className: "rf-text-field__asterisk" }, " *")),
       variant === "outlined" && /* @__PURE__ */ React76.createElement("fieldset", { className: "rf-text-field__notch" }, label ? /* @__PURE__ */ React76.createElement("legend", { className: "rf-text-field__legend" }, /* @__PURE__ */ React76.createElement("span", null, label, required ? " *" : "")) : /* @__PURE__ */ React76.createElement("legend", { className: "rf-text-field__legend--empty" })),
-      /* @__PURE__ */ React76.createElement("div", { className: "rf-select__arrow", "aria-hidden": "true" }, /* @__PURE__ */ React76.createElement(ChevronDownIcon2, null))
+      !disabled && /* @__PURE__ */ React76.createElement("div", { className: "rf-select__arrow", "aria-hidden": "true" }, /* @__PURE__ */ React76.createElement(ChevronDownIcon2, null))
     ),
     helperText && /* @__PURE__ */ React76.createElement("div", { className: `rf-text-field__helper-text${error ? " rf-text-field__helper-text--error" : ""}` }, helperText),
-    open && !disabled && ReactDOM4.createPortal(
+    open && !disabled && ReactDOM5.createPortal(
       /* @__PURE__ */ React76.createElement("div", { ref: popupRef, className: "rf-select__popup", role: "presentation", style: popupStyle }, /* @__PURE__ */ React76.createElement("ul", { ref: listRef, className: "rf-select__listbox", role: "listbox", "aria-multiselectable": multiple }, (() => {
         const renderOpt = (opt, selectableIdx) => {
           const selected = isSelected(opt.value);
@@ -7892,7 +7942,7 @@ import React97, {
   useRef as useRef17,
   useState as useState17
 } from "react";
-import ReactDOM5 from "react-dom";
+import ReactDOM6 from "react-dom";
 var MenuDivider = () => /* @__PURE__ */ React97.createElement("hr", { className: "rf-menu-divider", "aria-hidden": "true" });
 MenuDivider.displayName = "MenuDivider";
 var MenuItem = ({
@@ -8045,7 +8095,7 @@ var Menu = ({
     },
     children
   ));
-  return ReactDOM5.createPortal(portal, document.body);
+  return ReactDOM6.createPortal(portal, document.body);
 };
 Menu.displayName = "Menu";
 
@@ -8054,7 +8104,7 @@ import React98, {
   useEffect as useEffect14,
   useState as useState18
 } from "react";
-import ReactDOM6 from "react-dom";
+import ReactDOM7 from "react-dom";
 var Drawer = ({
   open,
   onClose,
@@ -8154,7 +8204,7 @@ var Drawer = ({
     },
     children
   ));
-  return ReactDOM6.createPortal(
+  return ReactDOM7.createPortal(
     /* @__PURE__ */ React98.createElement("div", { className: rootClasses, style }, drawerContent),
     document.body
   );
@@ -8168,7 +8218,7 @@ import React99, {
   useRef as useRef18,
   useState as useState19
 } from "react";
-import ReactDOM7 from "react-dom";
+import ReactDOM8 from "react-dom";
 var SEVERITY_ICONS = {
   success: "\u2713",
   error: "\u2715",
@@ -8273,7 +8323,7 @@ var Snackbar = ({
       "\u2715"
     )
   ));
-  return ReactDOM7.createPortal(snackbarEl, document.body);
+  return ReactDOM8.createPortal(snackbarEl, document.body);
 };
 Snackbar.displayName = "Snackbar";
 
@@ -8332,7 +8382,7 @@ import React101, {
   useRef as useRef19,
   useState as useState20
 } from "react";
-import ReactDOM8 from "react-dom";
+import ReactDOM9 from "react-dom";
 function computePopperPosition(anchorRect, popperRect, placement, offset2 = [0, 8]) {
   const [skid, dist] = offset2;
   let top = 0;
@@ -8475,7 +8525,7 @@ var Popper = ({
   if (disablePortal) {
     return /* @__PURE__ */ React101.createElement(React101.Fragment, null, popper);
   }
-  return ReactDOM8.createPortal(popper, document.body);
+  return ReactDOM9.createPortal(popper, document.body);
 };
 Popper.displayName = "Popper";
 
@@ -8486,7 +8536,7 @@ import React102, {
   useRef as useRef20,
   useState as useState21
 } from "react";
-import ReactDOM9 from "react-dom";
+import ReactDOM10 from "react-dom";
 function getPoint(rect, v, h) {
   const x = h === "left" ? rect.left : h === "center" ? rect.left + rect.width / 2 : rect.right;
   const y = v === "top" ? rect.top : v === "center" ? rect.top + rect.height / 2 : rect.bottom;
@@ -8589,7 +8639,7 @@ var Popover = ({
   if (disablePortal) {
     return /* @__PURE__ */ React102.createElement("div", { className: `${rootClasses} rf-popover-inline`, style }, content);
   }
-  return ReactDOM9.createPortal(
+  return ReactDOM10.createPortal(
     /* @__PURE__ */ React102.createElement("div", { className: rootClasses, style }, content),
     document.body
   );
@@ -9256,7 +9306,7 @@ import React106, {
   useEffect as useEffect20,
   useCallback as useCallback10
 } from "react";
-import ReactDOM10 from "react-dom";
+import ReactDOM11 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;
@@ -9566,11 +9616,13 @@ function TreeSelect({
     error ? "rf-text-field--error" : "",
     fullWidth ? "rf-text-field--full-width" : "",
     isFloating ? "rf-text-field--floating" : "",
+    label ? "rf-text-field--has-label" : "",
+    "rf-text-field--adorned-end",
     "rf-tree-select",
     sxClass,
     className
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ React106.createElement("div", { className: rootClasses, style }, label && /* @__PURE__ */ React106.createElement("label", { className: "rf-text-field__label" }, label, " ", required && /* @__PURE__ */ React106.createElement("span", { className: "rf-text-field__asterisk" }, "*")), /* @__PURE__ */ React106.createElement(
+  return /* @__PURE__ */ React106.createElement("div", { className: rootClasses, style }, /* @__PURE__ */ React106.createElement(
     "div",
     {
       ref: triggerRef,
@@ -9582,7 +9634,7 @@ function TreeSelect({
       onBlur: handleTriggerBlur,
       onKeyDown: handleKeyDown
     },
-    isMultiple ? /* @__PURE__ */ React106.createElement("div", { className: "rf-ts__chips" }, tagNodes.length > 0 ? tagNodes.map((node) => /* @__PURE__ */ React106.createElement("span", { key: node.id, className: "rf-ts__chip" }, node.label, /* @__PURE__ */ React106.createElement(
+    isMultiple ? /* @__PURE__ */ React106.createElement("div", { className: "rf-ts__chips" }, tagNodes.length > 0 ? tagNodes.map((node) => /* @__PURE__ */ React106.createElement("span", { key: node.id, className: "rf-ts__chip" }, node.label, !disabled && /* @__PURE__ */ React106.createElement(
       "button",
       {
         type: "button",
@@ -9591,8 +9643,8 @@ function TreeSelect({
         tabIndex: -1
       },
       /* @__PURE__ */ React106.createElement(X3, { size: 10 })
-    ))) : open ? /* @__PURE__ */ React106.createElement("span", { className: "rf-ts__placeholder" }, placeholder) : null) : /* @__PURE__ */ React106.createElement("div", { className: `rf-ts__display${!hasValue ? " rf-ts__display--placeholder" : ""}` }, hasValue ? tagNodes[0]?.label : open ? placeholder : "\xA0"),
-    /* @__PURE__ */ React106.createElement("div", { className: "rf-autocomplete__endgroup" }, clearable && hasValue && /* @__PURE__ */ React106.createElement(
+    ))) : isFloating || !label ? /* @__PURE__ */ React106.createElement("span", { className: "rf-ts__placeholder" }, placeholder) : null) : /* @__PURE__ */ React106.createElement("div", { className: `rf-ts__display${!hasValue ? " rf-ts__display--placeholder" : ""}` }, hasValue ? tagNodes[0]?.label : isFloating || !label ? placeholder : "\xA0"),
+    /* @__PURE__ */ React106.createElement("div", { className: "rf-autocomplete__endgroup" }, !disabled && clearable && hasValue && /* @__PURE__ */ React106.createElement(
       "button",
       {
         type: "button",
@@ -9601,7 +9653,7 @@ function TreeSelect({
         tabIndex: -1
       },
       /* @__PURE__ */ React106.createElement(X3, { size: 16 })
-    ), /* @__PURE__ */ React106.createElement(
+    ), !disabled && /* @__PURE__ */ React106.createElement(
       "button",
       {
         type: "button",
@@ -9614,10 +9666,11 @@ function TreeSelect({
       },
       /* @__PURE__ */ React106.createElement(ChevronDown2, { size: 18 })
     )),
+    label && /* @__PURE__ */ React106.createElement("label", { className: "rf-text-field__label" }, label, required && /* @__PURE__ */ React106.createElement("span", { className: "rf-text-field__asterisk" }, " *")),
     variant === "outlined" && /* @__PURE__ */ React106.createElement("fieldset", { "aria-hidden": true, className: "rf-text-field__notch" }, /* @__PURE__ */ React106.createElement("legend", { className: "rf-text-field__legend" }, label && /* @__PURE__ */ React106.createElement("span", null, label, required ? " *" : ""))),
     variant === "filled" && /* @__PURE__ */ React106.createElement(React106.Fragment, null, /* @__PURE__ */ React106.createElement("div", { className: "rf-text-field__filled-bg" }), /* @__PURE__ */ React106.createElement("div", { className: "rf-text-field__underline" })),
     variant === "standard" && /* @__PURE__ */ React106.createElement("div", { className: "rf-text-field__underline" })
-  ), helperText && /* @__PURE__ */ React106.createElement("p", { className: `rf-text-field__helper-text${error ? " rf-text-field__helper-text--error" : ""}` }, helperText), open && ReactDOM10.createPortal(
+  ), helperText && /* @__PURE__ */ React106.createElement("p", { className: `rf-text-field__helper-text${error ? " rf-text-field__helper-text--error" : ""}` }, helperText), open && ReactDOM11.createPortal(
     /* @__PURE__ */ React106.createElement(
       "div",
       {
@@ -9867,11 +9920,11 @@ function SmartSelect({
     setInputValue(inputValue2);
     if (!onSearchChange) return;
     if (debounceTimer.current) clearTimeout(debounceTimer.current);
-    if (reason === "reset") return;
-    if (!inputValue2) {
-      onSearchChange("", 0);
+    if (reason !== "input") {
+      if (reason === "clear") onSearchChange("", 0);
       return;
     }
+    if (!inputValue2) return;
     const q = inputValue2.toLowerCase();
     let localCount = 0;
     for (const opt of flatOptionsList) {

package/package.json

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