@rufous/ui 0.3.39 → 0.3.41

package/dist/main.cjs

@@ -1422,14 +1422,14 @@ var SubmitButton = ({
       setLoading(false);
     }
   };
-  const handleClick = (e) => runProtected(e, onClick);
-  const handleDoubleClick = (e) => runProtected(e, onDoubleClick);
+  const handleClick = onClick ? (e) => runProtected(e, onClick) : void 0;
+  const handleDoubleClick = onDoubleClick ? (e) => runProtected(e, onDoubleClick) : void 0;
   const showLoader = loading || isLoading;
   return /* @__PURE__ */ React60.createElement(
     "button",
     {
       ...props,
-      type: onClick ? void 0 : type,
+      type,
       className: ["btn submit-btn", bgGradiant ? "submit-btn-gradiant" : "", sxClass, className].filter(Boolean).join(" "),
       disabled: props.disabled || showLoader,
       onClick: handleClick,
@@ -10665,10 +10665,20 @@ function buildLookup(options, getChildren, getValue, map = /* @__PURE__ */ new M
   }
   return map;
 }
+function safeLabel(getOptionLabel, option) {
+  try {
+    const l = getOptionLabel(option);
+    return typeof l === "string" ? l : "";
+  } catch {
+    return "";
+  }
+}
 function SmartSelect({
   options,
   value,
   onChange,
+  inputValue: inputValueProp,
+  onInputChange,
   onSearchChange,
   searchResults = [],
   debounceMs = 300,
@@ -10679,6 +10689,7 @@ function SmartSelect({
   getOptionChildren,
   multiple = false,
   allowChildNodesSelection = true,
+  strictSelection = false,
   loading = false,
   loadingText,
   filterOptions: filterOptionsProp,
@@ -10698,17 +10709,10 @@ 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)(
-    () => !multiple && value != null ? getOptionLabel(value) : ""
-  );
-  (0, import_react54.useEffect)(() => {
-    if (!multiple) {
-      setInputValue(value != null ? getOptionLabel(value) : "");
-    }
-  }, [value, multiple, getOptionLabel]);
   const getValue = (0, import_react54.useCallback)(
     (o) => getOptionValue ? getOptionValue(o) : String(getOptionLabel(o)),
     [getOptionValue, getOptionLabel]
@@ -10718,6 +10722,55 @@ function SmartSelect({
     return flattenTree(options, getOptionChildren);
   }, [options, getOptionChildren]);
   const flatOptionsList = (0, import_react54.useMemo)(() => flatItems.map((f) => f.option), [flatItems]);
+  const strictValidation = (0, import_react54.useMemo)(() => {
+    if (!strictSelection || multiple) return { valid: true, canonicalValue: value };
+    if (value == null || value === "") {
+      return { valid: false, displayText: "" };
+    }
+    const invalidDisplayText = (v) => {
+      const fromLabel = safeLabel(getOptionLabel, v).trim();
+      if (fromLabel) return fromLabel;
+      if (typeof v === "string" || typeof v === "number") return String(v);
+      return "";
+    };
+    try {
+      const key = getValue(value);
+      const canonicalOpt = flatOptionsList.find((o) => getValue(o) === key) ?? searchResults.find((o) => getValue(o) === key);
+      if (!canonicalOpt) {
+        return { valid: false, displayText: invalidDisplayText(value) };
+      }
+      if (typeof canonicalOpt === "object" && canonicalOpt !== null && typeof value === "object" && value !== null) {
+        const src = canonicalOpt;
+        const inc = value;
+        const fullMatch = Object.keys(src).every((k) => k in inc && inc[k] === src[k]);
+        if (!fullMatch) {
+          return { valid: false, displayText: invalidDisplayText(value) };
+        }
+      }
+      return { valid: true, canonicalValue: canonicalOpt };
+    } catch {
+      return { valid: false, displayText: invalidDisplayText(value) };
+    }
+  }, [strictSelection, multiple, value, getValue, flatOptionsList, searchResults, getOptionLabel]);
+  const [internalInput, setInternalInput] = (0, import_react54.useState)(
+    () => !multiple && value != null ? getOptionLabel(value) : ""
+  );
+  const strictValidationRef = (0, import_react54.useRef)(strictValidation);
+  strictValidationRef.current = strictValidation;
+  const lastSeededValue = (0, import_react54.useRef)(/* @__PURE__ */ Symbol("init"));
+  (0, import_react54.useEffect)(() => {
+    if (isControlled || multiple) return;
+    if (strictSelection && !strictValidationRef.current.valid) {
+      if (Object.is(value, lastSeededValue.current)) return;
+      lastSeededValue.current = value;
+      const sv = strictValidationRef.current;
+      setInternalInput(sv.displayText);
+      return;
+    }
+    lastSeededValue.current = value;
+    setInternalInput(value != null ? getOptionLabel(value) : "");
+  }, [value, multiple, getOptionLabel, isControlled, strictSelection]);
+  const activeInput = isControlled ? inputValueProp : internalInput;
   const displayOptions = (0, import_react54.useMemo)(() => {
     let base = flatOptionsList;
     if (searchResults.length) {
@@ -10725,17 +10778,26 @@ function SmartSelect({
       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];
-    }
-    if (multiple && Array.isArray(value) && value.length > 0) {
+    if (!multiple) {
+      if (strictSelection) {
+        const injectValue = strictValidation.valid ? strictValidation.canonicalValue : null;
+        if (injectValue != null) {
+          const key = getValue(injectValue);
+          if (!base.some((o) => getValue(o) === key)) base = [injectValue, ...base];
+        }
+      } else {
+        if (value != null) {
+          const key = getValue(value);
+          if (!base.some((o) => getValue(o) === key)) base = [value, ...base];
+        }
+      }
+    } else if (Array.isArray(value) && value.length > 0) {
       const baseKeys = new Set(base.map((o) => getValue(o)));
       const missing = value.filter((v) => !baseKeys.has(getValue(v)));
       if (missing.length > 0) base = [...base, ...missing];
     }
     return base;
-  }, [flatOptionsList, searchResults, getValue, value, multiple]);
+  }, [flatOptionsList, searchResults, getValue, value, multiple, strictSelection, strictValidation]);
   const depthMap = (0, import_react54.useMemo)(() => {
     const map = /* @__PURE__ */ new Map();
     flatItems.forEach(({ option, depth }) => map.set(getValue(option), depth));
@@ -10749,18 +10811,40 @@ function SmartSelect({
     if (multiple) {
       return new Set((Array.isArray(value) ? value : []).map((v) => getValue(v)));
     }
+    if (strictSelection) {
+      const sv = strictValidation;
+      if (!strictValidation.valid || sv.canonicalValue == null) return /* @__PURE__ */ new Set();
+      return /* @__PURE__ */ new Set([getValue(sv.canonicalValue)]);
+    }
     return value != null ? /* @__PURE__ */ new Set([getValue(value)]) : /* @__PURE__ */ new Set();
-  }, [multiple, value, getValue]);
-  const handleInputChange = (0, import_react54.useCallback)((_, inputValue2, reason) => {
-    setInputValue(inputValue2);
+  }, [multiple, value, getValue, strictSelection, strictValidation]);
+  let autocompleteValue;
+  let autocompleteInputValue;
+  if (strictSelection && !multiple) {
+    const sv = strictValidation;
+    if (!strictValidation.valid) {
+      autocompleteValue = null;
+      autocompleteInputValue = isControlled ? inputValueProp : internalInput;
+    } else {
+      autocompleteValue = sv.canonicalValue ?? null;
+      autocompleteInputValue = isControlled ? inputValueProp : activeInput;
+    }
+  } else {
+    autocompleteValue = value ?? (multiple ? [] : null);
+    autocompleteInputValue = multiple ? isControlled ? inputValueProp : void 0 : activeInput;
+  }
+  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 +10855,11 @@ 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);
-      }, debounceMs);
+      debounceTimer.current = setTimeout(() => 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,24 +10935,33 @@ 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 (strictSelection && !strictValidation.valid) {
+      const sv = strictValidation;
+      if (!inputVal || inputVal === sv.displayText) return opts;
+      const q2 = inputVal.toLowerCase();
+      return opts.filter(
+        (opt) => getOptionLabel(opt).toLowerCase().includes(q2) || (getOptionSubLabel?.(opt) ?? "").toLowerCase().includes(q2)
+      ).slice(0, searchThreshold);
+    }
     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);
       return [...selected, ...filteredUnselected];
     }
-    if (value != null) {
-      const selectedKey = getValue(value);
-      const selectedLabel = getOptionLabel(value);
+    const effectiveVal = strictSelection ? strictValidation.canonicalValue : value;
+    if (effectiveVal != null) {
+      const selectedKey = getValue(effectiveVal);
+      const selectedLabel = getOptionLabel(effectiveVal);
       const inOpts = opts.some((o) => getValue(o) === selectedKey);
-      const selectedFallback = inOpts ? [] : [value];
-      if (!inputValue2 || inputValue2 === selectedLabel) {
+      const selectedFallback = inOpts ? [] : [effectiveVal];
+      if (!inputVal || inputVal === selectedLabel) {
         return [
           ...selectedFallback,
           ...opts.filter((o) => getValue(o) === selectedKey),
@@ -10878,26 +10969,32 @@ 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);
-  }, [filterOptionsProp, multiple, selectedKeys, getValue, getOptionLabel, getOptionSubLabel, value, searchThreshold]);
+  }, [filterOptionsProp, multiple, selectedKeys, getValue, getOptionLabel, getOptionSubLabel, value, searchThreshold, strictSelection, strictValidation]);
   return /* @__PURE__ */ import_react54.default.createElement(
     Autocomplete,
     {
       options: displayOptions,
-      value: value ?? (multiple ? [] : null),
+      value: autocompleteValue,
       onChange: handleChange,
-      inputValue: multiple ? void 0 : inputValue,
+      inputValue: autocompleteInputValue,
       onInputChange: handleInputChange,
       multiple,
       limitTags,
       loading,
       loadingText: loadingText ?? /* @__PURE__ */ import_react54.default.createElement("span", { style: { fontSize: "0.875rem", color: "var(--text-secondary)" } }, "Loading\u2026"),
       getOptionLabel,
-      isOptionEqualToValue: (opt, val) => getValue(opt) === getValue(val),
+      isOptionEqualToValue: (opt, val) => {
+        try {
+          return getValue(opt) === getValue(val);
+        } catch {
+          return false;
+        }
+      },
       filterOptions: computedFilterOptions,
       renderOption: renderOptionProp ?? defaultRenderOption,
       label,

package/dist/main.d.cts

@@ -2240,10 +2240,31 @@ 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.
-     * Use this to trigger an API / server search and update `searchResults`.
+     * Receives the current query and how many more records are needed.
      */
     onSearchChange?: (query: string, needed: number) => void;
     /**
@@ -2253,14 +2274,14 @@ interface SmartSelectProps<T = any> {
      */
     searchResults?: T[];
     /**
-     * Debounce delay in ms before `onSearchChange` fires.
-     * Defaults to 300 ms. Pass 0 to disable debouncing.
+     * Debounce delay in ms before `onSearchChange` fires. Default: 300.
+     * Pass 0 to disable.
      */
     debounceMs?: number;
     /**
      * Max results to show when a query is active.
-     * If local matches are fewer than this, `onSearchChange` fires with how many more are needed.
-     * Defaults to 10. Pass 0 to always call the API.
+     * `onSearchChange` fires only when local matches < this threshold.
+     * Default: 10. Pass 0 to always call the API.
      */
     searchThreshold?: number;
     /** Primary display label for an option (required) */
@@ -2282,6 +2303,22 @@ interface SmartSelectProps<T = any> {
      * Only relevant when getOptionChildren is provided and multiple is true.
      */
     allowChildNodesSelection?: boolean;
+    /**
+     * When **true**, the incoming `value` is validated against the source options
+     * before being used. Three cases are handled strictly:
+     *
+     * - **Case 1 — Empty**: `value` is `null`, `undefined`, or `""` → treated as no selection.
+     * - **Case 2 — Missing**: value's key is not present in `options` or `searchResults`
+     *   → ignored; not injected into the dropdown list.
+     * - **Case 3 — Incomplete**: value's key exists in the source but the canonical source
+     *   option returns an empty label from `getOptionLabel` → not treated as selected.
+     *
+     * When invalid, `null` is passed to Autocomplete (nothing selected) and the raw text
+     * is shown in the input field. No `onChange` fires.
+     *
+     * Only applies to single-select mode. Default: **false**.
+     */
+    strictSelection?: boolean;
     /** Show a loading spinner in the dropdown */
     loading?: boolean;
     /** Content shown while loading */
@@ -2316,7 +2353,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, strictSelection, 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,10 +2240,31 @@ 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.
-     * Use this to trigger an API / server search and update `searchResults`.
+     * Receives the current query and how many more records are needed.
      */
     onSearchChange?: (query: string, needed: number) => void;
     /**
@@ -2253,14 +2274,14 @@ interface SmartSelectProps<T = any> {
      */
     searchResults?: T[];
     /**
-     * Debounce delay in ms before `onSearchChange` fires.
-     * Defaults to 300 ms. Pass 0 to disable debouncing.
+     * Debounce delay in ms before `onSearchChange` fires. Default: 300.
+     * Pass 0 to disable.
      */
     debounceMs?: number;
     /**
      * Max results to show when a query is active.
-     * If local matches are fewer than this, `onSearchChange` fires with how many more are needed.
-     * Defaults to 10. Pass 0 to always call the API.
+     * `onSearchChange` fires only when local matches < this threshold.
+     * Default: 10. Pass 0 to always call the API.
      */
     searchThreshold?: number;
     /** Primary display label for an option (required) */
@@ -2282,6 +2303,22 @@ interface SmartSelectProps<T = any> {
      * Only relevant when getOptionChildren is provided and multiple is true.
      */
     allowChildNodesSelection?: boolean;
+    /**
+     * When **true**, the incoming `value` is validated against the source options
+     * before being used. Three cases are handled strictly:
+     *
+     * - **Case 1 — Empty**: `value` is `null`, `undefined`, or `""` → treated as no selection.
+     * - **Case 2 — Missing**: value's key is not present in `options` or `searchResults`
+     *   → ignored; not injected into the dropdown list.
+     * - **Case 3 — Incomplete**: value's key exists in the source but the canonical source
+     *   option returns an empty label from `getOptionLabel` → not treated as selected.
+     *
+     * When invalid, `null` is passed to Autocomplete (nothing selected) and the raw text
+     * is shown in the input field. No `onChange` fires.
+     *
+     * Only applies to single-select mode. Default: **false**.
+     */
+    strictSelection?: boolean;
     /** Show a loading spinner in the dropdown */
     loading?: boolean;
     /** Content shown while loading */
@@ -2316,7 +2353,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, strictSelection, 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

@@ -1209,14 +1209,14 @@ var SubmitButton = ({
       setLoading(false);
     }
   };
-  const handleClick = (e) => runProtected(e, onClick);
-  const handleDoubleClick = (e) => runProtected(e, onDoubleClick);
+  const handleClick = onClick ? (e) => runProtected(e, onClick) : void 0;
+  const handleDoubleClick = onDoubleClick ? (e) => runProtected(e, onDoubleClick) : void 0;
   const showLoader = loading || isLoading;
   return /* @__PURE__ */ React60.createElement(
     "button",
     {
       ...props,
-      type: onClick ? void 0 : type,
+      type,
       className: ["btn submit-btn", bgGradiant ? "submit-btn-gradiant" : "", sxClass, className].filter(Boolean).join(" "),
       disabled: props.disabled || showLoader,
       onClick: handleClick,
@@ -10548,10 +10548,20 @@ function buildLookup(options, getChildren, getValue, map = /* @__PURE__ */ new M
   }
   return map;
 }
+function safeLabel(getOptionLabel, option) {
+  try {
+    const l = getOptionLabel(option);
+    return typeof l === "string" ? l : "";
+  } catch {
+    return "";
+  }
+}
 function SmartSelect({
   options,
   value,
   onChange,
+  inputValue: inputValueProp,
+  onInputChange,
   onSearchChange,
   searchResults = [],
   debounceMs = 300,
@@ -10562,6 +10572,7 @@ function SmartSelect({
   getOptionChildren,
   multiple = false,
   allowChildNodesSelection = true,
+  strictSelection = false,
   loading = false,
   loadingText,
   filterOptions: filterOptionsProp,
@@ -10581,17 +10592,10 @@ function SmartSelect({
   sx
 }) {
   const debounceTimer = useRef25(null);
+  const isControlled = inputValueProp !== void 0;
   useEffect21(() => () => {
     if (debounceTimer.current) clearTimeout(debounceTimer.current);
   }, []);
-  const [inputValue, setInputValue] = useState27(
-    () => !multiple && value != null ? getOptionLabel(value) : ""
-  );
-  useEffect21(() => {
-    if (!multiple) {
-      setInputValue(value != null ? getOptionLabel(value) : "");
-    }
-  }, [value, multiple, getOptionLabel]);
   const getValue = useCallback12(
     (o) => getOptionValue ? getOptionValue(o) : String(getOptionLabel(o)),
     [getOptionValue, getOptionLabel]
@@ -10601,6 +10605,55 @@ function SmartSelect({
     return flattenTree(options, getOptionChildren);
   }, [options, getOptionChildren]);
   const flatOptionsList = useMemo3(() => flatItems.map((f) => f.option), [flatItems]);
+  const strictValidation = useMemo3(() => {
+    if (!strictSelection || multiple) return { valid: true, canonicalValue: value };
+    if (value == null || value === "") {
+      return { valid: false, displayText: "" };
+    }
+    const invalidDisplayText = (v) => {
+      const fromLabel = safeLabel(getOptionLabel, v).trim();
+      if (fromLabel) return fromLabel;
+      if (typeof v === "string" || typeof v === "number") return String(v);
+      return "";
+    };
+    try {
+      const key = getValue(value);
+      const canonicalOpt = flatOptionsList.find((o) => getValue(o) === key) ?? searchResults.find((o) => getValue(o) === key);
+      if (!canonicalOpt) {
+        return { valid: false, displayText: invalidDisplayText(value) };
+      }
+      if (typeof canonicalOpt === "object" && canonicalOpt !== null && typeof value === "object" && value !== null) {
+        const src = canonicalOpt;
+        const inc = value;
+        const fullMatch = Object.keys(src).every((k) => k in inc && inc[k] === src[k]);
+        if (!fullMatch) {
+          return { valid: false, displayText: invalidDisplayText(value) };
+        }
+      }
+      return { valid: true, canonicalValue: canonicalOpt };
+    } catch {
+      return { valid: false, displayText: invalidDisplayText(value) };
+    }
+  }, [strictSelection, multiple, value, getValue, flatOptionsList, searchResults, getOptionLabel]);
+  const [internalInput, setInternalInput] = useState27(
+    () => !multiple && value != null ? getOptionLabel(value) : ""
+  );
+  const strictValidationRef = useRef25(strictValidation);
+  strictValidationRef.current = strictValidation;
+  const lastSeededValue = useRef25(/* @__PURE__ */ Symbol("init"));
+  useEffect21(() => {
+    if (isControlled || multiple) return;
+    if (strictSelection && !strictValidationRef.current.valid) {
+      if (Object.is(value, lastSeededValue.current)) return;
+      lastSeededValue.current = value;
+      const sv = strictValidationRef.current;
+      setInternalInput(sv.displayText);
+      return;
+    }
+    lastSeededValue.current = value;
+    setInternalInput(value != null ? getOptionLabel(value) : "");
+  }, [value, multiple, getOptionLabel, isControlled, strictSelection]);
+  const activeInput = isControlled ? inputValueProp : internalInput;
   const displayOptions = useMemo3(() => {
     let base = flatOptionsList;
     if (searchResults.length) {
@@ -10608,17 +10661,26 @@ function SmartSelect({
       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];
-    }
-    if (multiple && Array.isArray(value) && value.length > 0) {
+    if (!multiple) {
+      if (strictSelection) {
+        const injectValue = strictValidation.valid ? strictValidation.canonicalValue : null;
+        if (injectValue != null) {
+          const key = getValue(injectValue);
+          if (!base.some((o) => getValue(o) === key)) base = [injectValue, ...base];
+        }
+      } else {
+        if (value != null) {
+          const key = getValue(value);
+          if (!base.some((o) => getValue(o) === key)) base = [value, ...base];
+        }
+      }
+    } else if (Array.isArray(value) && value.length > 0) {
       const baseKeys = new Set(base.map((o) => getValue(o)));
       const missing = value.filter((v) => !baseKeys.has(getValue(v)));
       if (missing.length > 0) base = [...base, ...missing];
     }
     return base;
-  }, [flatOptionsList, searchResults, getValue, value, multiple]);
+  }, [flatOptionsList, searchResults, getValue, value, multiple, strictSelection, strictValidation]);
   const depthMap = useMemo3(() => {
     const map = /* @__PURE__ */ new Map();
     flatItems.forEach(({ option, depth }) => map.set(getValue(option), depth));
@@ -10632,18 +10694,40 @@ function SmartSelect({
     if (multiple) {
       return new Set((Array.isArray(value) ? value : []).map((v) => getValue(v)));
     }
+    if (strictSelection) {
+      const sv = strictValidation;
+      if (!strictValidation.valid || sv.canonicalValue == null) return /* @__PURE__ */ new Set();
+      return /* @__PURE__ */ new Set([getValue(sv.canonicalValue)]);
+    }
     return value != null ? /* @__PURE__ */ new Set([getValue(value)]) : /* @__PURE__ */ new Set();
-  }, [multiple, value, getValue]);
-  const handleInputChange = useCallback12((_, inputValue2, reason) => {
-    setInputValue(inputValue2);
+  }, [multiple, value, getValue, strictSelection, strictValidation]);
+  let autocompleteValue;
+  let autocompleteInputValue;
+  if (strictSelection && !multiple) {
+    const sv = strictValidation;
+    if (!strictValidation.valid) {
+      autocompleteValue = null;
+      autocompleteInputValue = isControlled ? inputValueProp : internalInput;
+    } else {
+      autocompleteValue = sv.canonicalValue ?? null;
+      autocompleteInputValue = isControlled ? inputValueProp : activeInput;
+    }
+  } else {
+    autocompleteValue = value ?? (multiple ? [] : null);
+    autocompleteInputValue = multiple ? isControlled ? inputValueProp : void 0 : activeInput;
+  }
+  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 +10738,11 @@ 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);
-      }, debounceMs);
+      debounceTimer.current = setTimeout(() => 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,24 +10818,33 @@ 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 (strictSelection && !strictValidation.valid) {
+      const sv = strictValidation;
+      if (!inputVal || inputVal === sv.displayText) return opts;
+      const q2 = inputVal.toLowerCase();
+      return opts.filter(
+        (opt) => getOptionLabel(opt).toLowerCase().includes(q2) || (getOptionSubLabel?.(opt) ?? "").toLowerCase().includes(q2)
+      ).slice(0, searchThreshold);
+    }
     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);
       return [...selected, ...filteredUnselected];
     }
-    if (value != null) {
-      const selectedKey = getValue(value);
-      const selectedLabel = getOptionLabel(value);
+    const effectiveVal = strictSelection ? strictValidation.canonicalValue : value;
+    if (effectiveVal != null) {
+      const selectedKey = getValue(effectiveVal);
+      const selectedLabel = getOptionLabel(effectiveVal);
       const inOpts = opts.some((o) => getValue(o) === selectedKey);
-      const selectedFallback = inOpts ? [] : [value];
-      if (!inputValue2 || inputValue2 === selectedLabel) {
+      const selectedFallback = inOpts ? [] : [effectiveVal];
+      if (!inputVal || inputVal === selectedLabel) {
         return [
           ...selectedFallback,
           ...opts.filter((o) => getValue(o) === selectedKey),
@@ -10761,26 +10852,32 @@ 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);
-  }, [filterOptionsProp, multiple, selectedKeys, getValue, getOptionLabel, getOptionSubLabel, value, searchThreshold]);
+  }, [filterOptionsProp, multiple, selectedKeys, getValue, getOptionLabel, getOptionSubLabel, value, searchThreshold, strictSelection, strictValidation]);
   return /* @__PURE__ */ React109.createElement(
     Autocomplete,
     {
       options: displayOptions,
-      value: value ?? (multiple ? [] : null),
+      value: autocompleteValue,
       onChange: handleChange,
-      inputValue: multiple ? void 0 : inputValue,
+      inputValue: autocompleteInputValue,
       onInputChange: handleInputChange,
       multiple,
       limitTags,
       loading,
       loadingText: loadingText ?? /* @__PURE__ */ React109.createElement("span", { style: { fontSize: "0.875rem", color: "var(--text-secondary)" } }, "Loading\u2026"),
       getOptionLabel,
-      isOptionEqualToValue: (opt, val) => getValue(opt) === getValue(val),
+      isOptionEqualToValue: (opt, val) => {
+        try {
+          return getValue(opt) === getValue(val);
+        } catch {
+          return false;
+        }
+      },
       filterOptions: computedFilterOptions,
       renderOption: renderOptionProp ?? defaultRenderOption,
       label,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rufous/ui",
   "private": false,
-  "version": "0.3.39",
+  "version": "0.3.41",
   "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",