@rufous/ui 0.3.39 → 0.3.40

package/dist/main.cjs

@@ -10669,6 +10669,8 @@ function SmartSelect({
   options,
   value,
   onChange,
+  inputValue: inputValueProp,
+  onInputChange,
   onSearchChange,
   searchResults = [],
   debounceMs = 300,
@@ -10698,17 +10700,19 @@ function SmartSelect({
   sx
 }) {
   const debounceTimer = (0, import_react54.useRef)(null);
+  const isControlled = inputValueProp !== void 0;
   (0, import_react54.useEffect)(() => () => {
     if (debounceTimer.current) clearTimeout(debounceTimer.current);
   }, []);
-  const [inputValue, setInputValue] = (0, import_react54.useState)(
+  const [internalInput, setInternalInput] = (0, import_react54.useState)(
     () => !multiple && value != null ? getOptionLabel(value) : ""
   );
   (0, import_react54.useEffect)(() => {
-    if (!multiple) {
-      setInputValue(value != null ? getOptionLabel(value) : "");
+    if (!isControlled && !multiple) {
+      setInternalInput(value != null ? getOptionLabel(value) : "");
     }
-  }, [value, multiple, getOptionLabel]);
+  }, [value, multiple, getOptionLabel, isControlled]);
+  const activeInput = isControlled ? inputValueProp : internalInput;
   const getValue = (0, import_react54.useCallback)(
     (o) => getOptionValue ? getOptionValue(o) : String(getOptionLabel(o)),
     [getOptionValue, getOptionLabel]
@@ -10751,16 +10755,20 @@ function SmartSelect({
     }
     return value != null ? /* @__PURE__ */ new Set([getValue(value)]) : /* @__PURE__ */ new Set();
   }, [multiple, value, getValue]);
-  const handleInputChange = (0, import_react54.useCallback)((_, inputValue2, reason) => {
-    setInputValue(inputValue2);
+  const handleInputChange = (0, import_react54.useCallback)((_, val, reason) => {
+    const resolvedReason = reason ?? "input";
+    if (!isControlled) {
+      setInternalInput(val);
+    }
+    onInputChange?.(val, resolvedReason);
     if (!onSearchChange) return;
     if (debounceTimer.current) clearTimeout(debounceTimer.current);
-    if (reason !== "input") {
-      if (reason === "clear") onSearchChange("", 0);
+    if (resolvedReason !== "input") {
+      if (resolvedReason === "clear") onSearchChange("", 0);
       return;
     }
-    if (!inputValue2) return;
-    const q = inputValue2.toLowerCase();
+    if (!val) return;
+    const q = val.toLowerCase();
     let localCount = 0;
     for (const opt of flatOptionsList) {
       if (getOptionLabel(opt).toLowerCase().includes(q) || (getOptionSubLabel?.(opt) ?? "").toLowerCase().includes(q)) {
@@ -10771,13 +10779,13 @@ function SmartSelect({
     if (localCount >= searchThreshold) return;
     const needed = searchThreshold - localCount;
     if (debounceMs <= 0) {
-      onSearchChange(inputValue2, needed);
+      onSearchChange(val, needed);
     } else {
       debounceTimer.current = setTimeout(() => {
-        onSearchChange(inputValue2, needed);
+        onSearchChange(val, needed);
       }, debounceMs);
     }
-  }, [onSearchChange, debounceMs, searchThreshold, flatOptionsList, getOptionLabel, getOptionSubLabel]);
+  }, [isControlled, onInputChange, onSearchChange, debounceMs, searchThreshold, flatOptionsList, getOptionLabel, getOptionSubLabel]);
   const handleChange = (0, import_react54.useCallback)((_, newValue) => {
     if (!multiple || !allowChildNodesSelection || !getOptionChildren) {
       onChange?.(newValue);
@@ -10853,13 +10861,13 @@ function SmartSelect({
       /* @__PURE__ */ import_react54.default.createElement("span", { className: "rf-select__option-check", "aria-hidden": "true" }, /* @__PURE__ */ import_react54.default.createElement(CheckIcon3, null))
     );
   }, [depthMap, getValue, getOptionLabel, getOptionSubLabel, selectedKeys]);
-  const computedFilterOptions = (0, import_react54.useCallback)((opts, inputValue2) => {
-    if (filterOptionsProp) return filterOptionsProp(opts, inputValue2);
+  const computedFilterOptions = (0, import_react54.useCallback)((opts, inputVal) => {
+    if (filterOptionsProp) return filterOptionsProp(opts, inputVal);
     if (multiple) {
       const selected = opts.filter((o) => selectedKeys.has(getValue(o)));
       const unselected = opts.filter((o) => !selectedKeys.has(getValue(o)));
-      if (!inputValue2) return [...selected, ...unselected];
-      const q2 = inputValue2.toLowerCase();
+      if (!inputVal) return [...selected, ...unselected];
+      const q2 = inputVal.toLowerCase();
       const filteredUnselected = unselected.filter(
         (opt) => getOptionLabel(opt).toLowerCase().includes(q2) || (getOptionSubLabel?.(opt) ?? "").toLowerCase().includes(q2)
       ).slice(0, searchThreshold);
@@ -10870,7 +10878,7 @@ function SmartSelect({
       const selectedLabel = getOptionLabel(value);
       const inOpts = opts.some((o) => getValue(o) === selectedKey);
       const selectedFallback = inOpts ? [] : [value];
-      if (!inputValue2 || inputValue2 === selectedLabel) {
+      if (!inputVal || inputVal === selectedLabel) {
         return [
           ...selectedFallback,
           ...opts.filter((o) => getValue(o) === selectedKey),
@@ -10878,8 +10886,8 @@ function SmartSelect({
         ];
       }
     }
-    if (!inputValue2) return opts;
-    const q = inputValue2.toLowerCase();
+    if (!inputVal) return opts;
+    const q = inputVal.toLowerCase();
     return opts.filter(
       (opt) => getOptionLabel(opt).toLowerCase().includes(q) || (getOptionSubLabel?.(opt) ?? "").toLowerCase().includes(q)
     ).slice(0, searchThreshold);
@@ -10890,7 +10898,7 @@ function SmartSelect({
       options: displayOptions,
       value: value ?? (multiple ? [] : null),
       onChange: handleChange,
-      inputValue: multiple ? void 0 : inputValue,
+      inputValue: multiple ? isControlled ? inputValueProp : void 0 : activeInput,
       onInputChange: handleInputChange,
       multiple,
       limitTags,

package/dist/main.d.cts

@@ -2240,6 +2240,28 @@ interface SmartSelectProps<T = any> {
     value?: T | T[] | null;
     /** Called when selection changes */
     onChange?: (value: T | T[] | null) => void;
+    /**
+     * Controlled text shown in the search input.
+     * When provided the input is fully controlled — update it via `onInputChange`.
+     * When omitted SmartSelect manages the input text internally.
+     */
+    inputValue?: string;
+    /**
+     * Called whenever the input text changes.
+     * - `reason: 'input'`  — user typed
+     * - `reason: 'reset'`  — option selected or dropdown closed
+     * - `reason: 'clear'`  — field was cleared
+     *
+     * Pair with `inputValue` for full controlled mode:
+     * ```
+     * const [search, setSearch] = useState('');
+     * <SmartSelect
+     *   inputValue={search}
+     *   onInputChange={(val, reason) => { if (reason !== 'reset') setSearch(val); }}
+     * />
+     * ```
+     */
+    onInputChange?: (value: string, reason: 'input' | 'reset' | 'clear') => void;
     /**
      * Called when local matches fall below `searchThreshold`.
      * Receives the current query and how many more records are needed to fill the threshold.
@@ -2316,7 +2338,7 @@ interface SmartSelectProps<T = any> {
     style?: CSSProperties;
     sx?: SxProp;
 }
-declare function SmartSelect<T = any>({ options, value, onChange, onSearchChange, searchResults, debounceMs, searchThreshold, getOptionLabel, getOptionValue, getOptionSubLabel, getOptionChildren, multiple, allowChildNodesSelection, loading, loadingText, filterOptions: filterOptionsProp, renderOption: renderOptionProp, limitTags, label, placeholder, variant, size, disabled, error, helperText, fullWidth, required, className, style, sx, }: SmartSelectProps<T>): React__default.JSX.Element;
+declare function SmartSelect<T = any>({ options, value, onChange, inputValue: inputValueProp, onInputChange, onSearchChange, searchResults, debounceMs, searchThreshold, getOptionLabel, getOptionValue, getOptionSubLabel, getOptionChildren, multiple, allowChildNodesSelection, loading, loadingText, filterOptions: filterOptionsProp, renderOption: renderOptionProp, limitTags, label, placeholder, variant, size, disabled, error, helperText, fullWidth, required, className, style, sx, }: SmartSelectProps<T>): React__default.JSX.Element;
 
 type ToolbarButton = 'undo' | 'redo' | 'ai' | 'paragraph' | 'fontsize' | 'font' | 'color' | 'bold' | 'italic' | 'strike' | 'link' | 'lineheight' | 'ul' | 'ol' | 'align' | 'indent' | 'outdent' | 'table' | 'image' | 'video' | 'cut' | 'copy' | 'paste' | 'specialchars' | 'code' | 'fullscreen' | 'tts' | 'stt' | 'translate' | 'todo' | '|';
 type EditorVariant = 'default' | 'basic';

package/dist/main.d.ts

@@ -2240,6 +2240,28 @@ interface SmartSelectProps<T = any> {
     value?: T | T[] | null;
     /** Called when selection changes */
     onChange?: (value: T | T[] | null) => void;
+    /**
+     * Controlled text shown in the search input.
+     * When provided the input is fully controlled — update it via `onInputChange`.
+     * When omitted SmartSelect manages the input text internally.
+     */
+    inputValue?: string;
+    /**
+     * Called whenever the input text changes.
+     * - `reason: 'input'`  — user typed
+     * - `reason: 'reset'`  — option selected or dropdown closed
+     * - `reason: 'clear'`  — field was cleared
+     *
+     * Pair with `inputValue` for full controlled mode:
+     * ```
+     * const [search, setSearch] = useState('');
+     * <SmartSelect
+     *   inputValue={search}
+     *   onInputChange={(val, reason) => { if (reason !== 'reset') setSearch(val); }}
+     * />
+     * ```
+     */
+    onInputChange?: (value: string, reason: 'input' | 'reset' | 'clear') => void;
     /**
      * Called when local matches fall below `searchThreshold`.
      * Receives the current query and how many more records are needed to fill the threshold.
@@ -2316,7 +2338,7 @@ interface SmartSelectProps<T = any> {
     style?: CSSProperties;
     sx?: SxProp;
 }
-declare function SmartSelect<T = any>({ options, value, onChange, onSearchChange, searchResults, debounceMs, searchThreshold, getOptionLabel, getOptionValue, getOptionSubLabel, getOptionChildren, multiple, allowChildNodesSelection, loading, loadingText, filterOptions: filterOptionsProp, renderOption: renderOptionProp, limitTags, label, placeholder, variant, size, disabled, error, helperText, fullWidth, required, className, style, sx, }: SmartSelectProps<T>): React__default.JSX.Element;
+declare function SmartSelect<T = any>({ options, value, onChange, inputValue: inputValueProp, onInputChange, onSearchChange, searchResults, debounceMs, searchThreshold, getOptionLabel, getOptionValue, getOptionSubLabel, getOptionChildren, multiple, allowChildNodesSelection, loading, loadingText, filterOptions: filterOptionsProp, renderOption: renderOptionProp, limitTags, label, placeholder, variant, size, disabled, error, helperText, fullWidth, required, className, style, sx, }: SmartSelectProps<T>): React__default.JSX.Element;
 
 type ToolbarButton = 'undo' | 'redo' | 'ai' | 'paragraph' | 'fontsize' | 'font' | 'color' | 'bold' | 'italic' | 'strike' | 'link' | 'lineheight' | 'ul' | 'ol' | 'align' | 'indent' | 'outdent' | 'table' | 'image' | 'video' | 'cut' | 'copy' | 'paste' | 'specialchars' | 'code' | 'fullscreen' | 'tts' | 'stt' | 'translate' | 'todo' | '|';
 type EditorVariant = 'default' | 'basic';

package/dist/main.js

@@ -10552,6 +10552,8 @@ function SmartSelect({
   options,
   value,
   onChange,
+  inputValue: inputValueProp,
+  onInputChange,
   onSearchChange,
   searchResults = [],
   debounceMs = 300,
@@ -10581,17 +10583,19 @@ function SmartSelect({
   sx
 }) {
   const debounceTimer = useRef25(null);
+  const isControlled = inputValueProp !== void 0;
   useEffect21(() => () => {
     if (debounceTimer.current) clearTimeout(debounceTimer.current);
   }, []);
-  const [inputValue, setInputValue] = useState27(
+  const [internalInput, setInternalInput] = useState27(
     () => !multiple && value != null ? getOptionLabel(value) : ""
   );
   useEffect21(() => {
-    if (!multiple) {
-      setInputValue(value != null ? getOptionLabel(value) : "");
+    if (!isControlled && !multiple) {
+      setInternalInput(value != null ? getOptionLabel(value) : "");
     }
-  }, [value, multiple, getOptionLabel]);
+  }, [value, multiple, getOptionLabel, isControlled]);
+  const activeInput = isControlled ? inputValueProp : internalInput;
   const getValue = useCallback12(
     (o) => getOptionValue ? getOptionValue(o) : String(getOptionLabel(o)),
     [getOptionValue, getOptionLabel]
@@ -10634,16 +10638,20 @@ function SmartSelect({
     }
     return value != null ? /* @__PURE__ */ new Set([getValue(value)]) : /* @__PURE__ */ new Set();
   }, [multiple, value, getValue]);
-  const handleInputChange = useCallback12((_, inputValue2, reason) => {
-    setInputValue(inputValue2);
+  const handleInputChange = useCallback12((_, val, reason) => {
+    const resolvedReason = reason ?? "input";
+    if (!isControlled) {
+      setInternalInput(val);
+    }
+    onInputChange?.(val, resolvedReason);
     if (!onSearchChange) return;
     if (debounceTimer.current) clearTimeout(debounceTimer.current);
-    if (reason !== "input") {
-      if (reason === "clear") onSearchChange("", 0);
+    if (resolvedReason !== "input") {
+      if (resolvedReason === "clear") onSearchChange("", 0);
       return;
     }
-    if (!inputValue2) return;
-    const q = inputValue2.toLowerCase();
+    if (!val) return;
+    const q = val.toLowerCase();
     let localCount = 0;
     for (const opt of flatOptionsList) {
       if (getOptionLabel(opt).toLowerCase().includes(q) || (getOptionSubLabel?.(opt) ?? "").toLowerCase().includes(q)) {
@@ -10654,13 +10662,13 @@ function SmartSelect({
     if (localCount >= searchThreshold) return;
     const needed = searchThreshold - localCount;
     if (debounceMs <= 0) {
-      onSearchChange(inputValue2, needed);
+      onSearchChange(val, needed);
     } else {
       debounceTimer.current = setTimeout(() => {
-        onSearchChange(inputValue2, needed);
+        onSearchChange(val, needed);
       }, debounceMs);
     }
-  }, [onSearchChange, debounceMs, searchThreshold, flatOptionsList, getOptionLabel, getOptionSubLabel]);
+  }, [isControlled, onInputChange, onSearchChange, debounceMs, searchThreshold, flatOptionsList, getOptionLabel, getOptionSubLabel]);
   const handleChange = useCallback12((_, newValue) => {
     if (!multiple || !allowChildNodesSelection || !getOptionChildren) {
       onChange?.(newValue);
@@ -10736,13 +10744,13 @@ function SmartSelect({
       /* @__PURE__ */ React109.createElement("span", { className: "rf-select__option-check", "aria-hidden": "true" }, /* @__PURE__ */ React109.createElement(CheckIcon3, null))
     );
   }, [depthMap, getValue, getOptionLabel, getOptionSubLabel, selectedKeys]);
-  const computedFilterOptions = useCallback12((opts, inputValue2) => {
-    if (filterOptionsProp) return filterOptionsProp(opts, inputValue2);
+  const computedFilterOptions = useCallback12((opts, inputVal) => {
+    if (filterOptionsProp) return filterOptionsProp(opts, inputVal);
     if (multiple) {
       const selected = opts.filter((o) => selectedKeys.has(getValue(o)));
       const unselected = opts.filter((o) => !selectedKeys.has(getValue(o)));
-      if (!inputValue2) return [...selected, ...unselected];
-      const q2 = inputValue2.toLowerCase();
+      if (!inputVal) return [...selected, ...unselected];
+      const q2 = inputVal.toLowerCase();
       const filteredUnselected = unselected.filter(
         (opt) => getOptionLabel(opt).toLowerCase().includes(q2) || (getOptionSubLabel?.(opt) ?? "").toLowerCase().includes(q2)
       ).slice(0, searchThreshold);
@@ -10753,7 +10761,7 @@ function SmartSelect({
       const selectedLabel = getOptionLabel(value);
       const inOpts = opts.some((o) => getValue(o) === selectedKey);
       const selectedFallback = inOpts ? [] : [value];
-      if (!inputValue2 || inputValue2 === selectedLabel) {
+      if (!inputVal || inputVal === selectedLabel) {
         return [
           ...selectedFallback,
           ...opts.filter((o) => getValue(o) === selectedKey),
@@ -10761,8 +10769,8 @@ function SmartSelect({
         ];
       }
     }
-    if (!inputValue2) return opts;
-    const q = inputValue2.toLowerCase();
+    if (!inputVal) return opts;
+    const q = inputVal.toLowerCase();
     return opts.filter(
       (opt) => getOptionLabel(opt).toLowerCase().includes(q) || (getOptionSubLabel?.(opt) ?? "").toLowerCase().includes(q)
     ).slice(0, searchThreshold);
@@ -10773,7 +10781,7 @@ function SmartSelect({
       options: displayOptions,
       value: value ?? (multiple ? [] : null),
       onChange: handleChange,
-      inputValue: multiple ? void 0 : inputValue,
+      inputValue: multiple ? isControlled ? inputValueProp : void 0 : activeInput,
       onInputChange: handleInputChange,
       multiple,
       limitTags,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rufous/ui",
   "private": false,
-  "version": "0.3.39",
+  "version": "0.3.40",
   "type": "module",
   "description": "Experimental: A lightweight React UI component library (Beta)",
   "style": "./dist/main.css",
@@ -68,6 +68,8 @@
     "tippy.js": "^6.3.7"
   },
   "devDependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-router-dom": "^7.13.1",
     "@eslint/js": "^9.30.1",
     "@types/node": "^24.1.0",