@rufous/ui 0.3.40 → 0.3.42

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,
@@ -5556,8 +5556,8 @@ function DataGrid({
   const totalRows = isServer ? rowCount ?? data.length : flatEntries ? flatEntries.length : filteredData.length;
   const totalPages = Math.max(1, Math.ceil(totalRows / activePageSize));
   const displayRows = (0, import_react25.useMemo)(() => {
-    if (isServer) return data.map((row) => ({ kind: "data", row, depth: 0 }));
     const source = flatEntries ?? sortedData.map((row) => ({ kind: "data", row, depth: 0 }));
+    if (isServer) return source;
     const start = (activePage - 1) * activePageSize;
     return source.slice(start, start + activePageSize);
   }, [isServer, data, flatEntries, sortedData, activePage, activePageSize]);
@@ -5702,7 +5702,7 @@ function DataGrid({
   const showExportBtn = !tOpts.hideExport && !hideTopExport;
   const showTitle = !tOpts.hideTitle;
   const showRecordCount = !tOpts.hideRecordCount;
-  return /* @__PURE__ */ import_react25.default.createElement("div", { className: ["dg-root", sxClass, className].filter(Boolean).join(" ") }, !tOpts.hideHeader && /* @__PURE__ */ import_react25.default.createElement("div", { className: `dg-header${customToolbar ? " dg-header--custom" : ""}` }, !customToolbar && (showTitle || showRecordCount) && /* @__PURE__ */ import_react25.default.createElement("div", { className: "dg-header-info" }, showTitle && /* @__PURE__ */ import_react25.default.createElement("h2", null, title), showRecordCount && /* @__PURE__ */ import_react25.default.createElement("p", null, filteredData.length, " total records")), /* @__PURE__ */ import_react25.default.createElement("div", { className: "dg-header-actions" }, customToolbar ?? /* @__PURE__ */ import_react25.default.createElement(import_react25.default.Fragment, null, showSearch && /* @__PURE__ */ import_react25.default.createElement("div", { className: "dg-search-wrap" }, /* @__PURE__ */ import_react25.default.createElement(Search, { size: 15 }), /* @__PURE__ */ import_react25.default.createElement(
+  return /* @__PURE__ */ import_react25.default.createElement("div", { className: ["dg-root", sxClass, className].filter(Boolean).join(" ") }, !tOpts.hideHeader && /* @__PURE__ */ import_react25.default.createElement("div", { className: `dg-header${customToolbar ? " dg-header--custom" : ""}` }, !customToolbar && (showTitle || showRecordCount) && /* @__PURE__ */ import_react25.default.createElement("div", { className: "dg-header-info" }, showTitle && /* @__PURE__ */ import_react25.default.createElement("h2", null, title), showRecordCount && /* @__PURE__ */ import_react25.default.createElement("p", null, isServer ? totalRows : filteredData.length, " total records")), /* @__PURE__ */ import_react25.default.createElement("div", { className: "dg-header-actions" }, customToolbar ?? /* @__PURE__ */ import_react25.default.createElement(import_react25.default.Fragment, null, showSearch && /* @__PURE__ */ import_react25.default.createElement("div", { className: "dg-search-wrap" }, /* @__PURE__ */ import_react25.default.createElement(Search, { size: 15 }), /* @__PURE__ */ import_react25.default.createElement(
     "input",
     {
       className: "dg-search",
@@ -10665,6 +10665,14 @@ 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,
@@ -10681,6 +10689,7 @@ function SmartSelect({
   getOptionChildren,
   multiple = false,
   allowChildNodesSelection = true,
+  strictSelection = false,
   loading = false,
   loadingText,
   filterOptions: filterOptionsProp,
@@ -10704,15 +10713,6 @@ function SmartSelect({
   (0, import_react54.useEffect)(() => () => {
     if (debounceTimer.current) clearTimeout(debounceTimer.current);
   }, []);
-  const [internalInput, setInternalInput] = (0, import_react54.useState)(
-    () => !multiple && value != null ? getOptionLabel(value) : ""
-  );
-  (0, import_react54.useEffect)(() => {
-    if (!isControlled && !multiple) {
-      setInternalInput(value != null ? getOptionLabel(value) : "");
-    }
-  }, [value, multiple, getOptionLabel, isControlled]);
-  const activeInput = isControlled ? inputValueProp : internalInput;
   const getValue = (0, import_react54.useCallback)(
     (o) => getOptionValue ? getOptionValue(o) : String(getOptionLabel(o)),
     [getOptionValue, getOptionLabel]
@@ -10722,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) {
@@ -10729,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));
@@ -10753,13 +10811,31 @@ 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]);
+  }, [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);
-    }
+    if (!isControlled) setInternalInput(val);
     onInputChange?.(val, resolvedReason);
     if (!onSearchChange) return;
     if (debounceTimer.current) clearTimeout(debounceTimer.current);
@@ -10781,9 +10857,7 @@ function SmartSelect({
     if (debounceMs <= 0) {
       onSearchChange(val, needed);
     } else {
-      debounceTimer.current = setTimeout(() => {
-        onSearchChange(val, needed);
-      }, debounceMs);
+      debounceTimer.current = setTimeout(() => onSearchChange(val, needed), debounceMs);
     }
   }, [isControlled, onInputChange, onSearchChange, debounceMs, searchThreshold, flatOptionsList, getOptionLabel, getOptionSubLabel]);
   const handleChange = (0, import_react54.useCallback)((_, newValue) => {
@@ -10863,6 +10937,14 @@ function SmartSelect({
   }, [depthMap, getValue, getOptionLabel, getOptionSubLabel, selectedKeys]);
   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)));
@@ -10873,11 +10955,12 @@ function SmartSelect({
       ).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];
+      const selectedFallback = inOpts ? [] : [effectiveVal];
       if (!inputVal || inputVal === selectedLabel) {
         return [
           ...selectedFallback,
@@ -10891,21 +10974,27 @@ function SmartSelect({
     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 ? isControlled ? inputValueProp : void 0 : activeInput,
+      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

@@ -2264,8 +2264,7 @@ interface SmartSelectProps<T = any> {
     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;
     /**
@@ -2275,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) */
@@ -2304,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 */
@@ -2338,7 +2353,7 @@ interface SmartSelectProps<T = any> {
     style?: CSSProperties;
     sx?: SxProp;
 }
-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;
+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

@@ -2264,8 +2264,7 @@ interface SmartSelectProps<T = any> {
     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;
     /**
@@ -2275,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) */
@@ -2304,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 */
@@ -2338,7 +2353,7 @@ interface SmartSelectProps<T = any> {
     style?: CSSProperties;
     sx?: SxProp;
 }
-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;
+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,
@@ -5370,8 +5370,8 @@ function DataGrid({
   const totalRows = isServer ? rowCount ?? data.length : flatEntries ? flatEntries.length : filteredData.length;
   const totalPages = Math.max(1, Math.ceil(totalRows / activePageSize));
   const displayRows = useMemo2(() => {
-    if (isServer) return data.map((row) => ({ kind: "data", row, depth: 0 }));
     const source = flatEntries ?? sortedData.map((row) => ({ kind: "data", row, depth: 0 }));
+    if (isServer) return source;
     const start = (activePage - 1) * activePageSize;
     return source.slice(start, start + activePageSize);
   }, [isServer, data, flatEntries, sortedData, activePage, activePageSize]);
@@ -5516,7 +5516,7 @@ function DataGrid({
   const showExportBtn = !tOpts.hideExport && !hideTopExport;
   const showTitle = !tOpts.hideTitle;
   const showRecordCount = !tOpts.hideRecordCount;
-  return /* @__PURE__ */ React75.createElement("div", { className: ["dg-root", sxClass, className].filter(Boolean).join(" ") }, !tOpts.hideHeader && /* @__PURE__ */ React75.createElement("div", { className: `dg-header${customToolbar ? " dg-header--custom" : ""}` }, !customToolbar && (showTitle || showRecordCount) && /* @__PURE__ */ React75.createElement("div", { className: "dg-header-info" }, showTitle && /* @__PURE__ */ React75.createElement("h2", null, title), showRecordCount && /* @__PURE__ */ React75.createElement("p", null, filteredData.length, " total records")), /* @__PURE__ */ React75.createElement("div", { className: "dg-header-actions" }, customToolbar ?? /* @__PURE__ */ React75.createElement(React75.Fragment, null, showSearch && /* @__PURE__ */ React75.createElement("div", { className: "dg-search-wrap" }, /* @__PURE__ */ React75.createElement(Search, { size: 15 }), /* @__PURE__ */ React75.createElement(
+  return /* @__PURE__ */ React75.createElement("div", { className: ["dg-root", sxClass, className].filter(Boolean).join(" ") }, !tOpts.hideHeader && /* @__PURE__ */ React75.createElement("div", { className: `dg-header${customToolbar ? " dg-header--custom" : ""}` }, !customToolbar && (showTitle || showRecordCount) && /* @__PURE__ */ React75.createElement("div", { className: "dg-header-info" }, showTitle && /* @__PURE__ */ React75.createElement("h2", null, title), showRecordCount && /* @__PURE__ */ React75.createElement("p", null, isServer ? totalRows : filteredData.length, " total records")), /* @__PURE__ */ React75.createElement("div", { className: "dg-header-actions" }, customToolbar ?? /* @__PURE__ */ React75.createElement(React75.Fragment, null, showSearch && /* @__PURE__ */ React75.createElement("div", { className: "dg-search-wrap" }, /* @__PURE__ */ React75.createElement(Search, { size: 15 }), /* @__PURE__ */ React75.createElement(
     "input",
     {
       className: "dg-search",
@@ -10548,6 +10548,14 @@ 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,
@@ -10564,6 +10572,7 @@ function SmartSelect({
   getOptionChildren,
   multiple = false,
   allowChildNodesSelection = true,
+  strictSelection = false,
   loading = false,
   loadingText,
   filterOptions: filterOptionsProp,
@@ -10587,15 +10596,6 @@ function SmartSelect({
   useEffect21(() => () => {
     if (debounceTimer.current) clearTimeout(debounceTimer.current);
   }, []);
-  const [internalInput, setInternalInput] = useState27(
-    () => !multiple && value != null ? getOptionLabel(value) : ""
-  );
-  useEffect21(() => {
-    if (!isControlled && !multiple) {
-      setInternalInput(value != null ? getOptionLabel(value) : "");
-    }
-  }, [value, multiple, getOptionLabel, isControlled]);
-  const activeInput = isControlled ? inputValueProp : internalInput;
   const getValue = useCallback12(
     (o) => getOptionValue ? getOptionValue(o) : String(getOptionLabel(o)),
     [getOptionValue, getOptionLabel]
@@ -10605,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) {
@@ -10612,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));
@@ -10636,13 +10694,31 @@ 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]);
+  }, [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);
-    }
+    if (!isControlled) setInternalInput(val);
     onInputChange?.(val, resolvedReason);
     if (!onSearchChange) return;
     if (debounceTimer.current) clearTimeout(debounceTimer.current);
@@ -10664,9 +10740,7 @@ function SmartSelect({
     if (debounceMs <= 0) {
       onSearchChange(val, needed);
     } else {
-      debounceTimer.current = setTimeout(() => {
-        onSearchChange(val, needed);
-      }, debounceMs);
+      debounceTimer.current = setTimeout(() => onSearchChange(val, needed), debounceMs);
     }
   }, [isControlled, onInputChange, onSearchChange, debounceMs, searchThreshold, flatOptionsList, getOptionLabel, getOptionSubLabel]);
   const handleChange = useCallback12((_, newValue) => {
@@ -10746,6 +10820,14 @@ function SmartSelect({
   }, [depthMap, getValue, getOptionLabel, getOptionSubLabel, selectedKeys]);
   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)));
@@ -10756,11 +10838,12 @@ function SmartSelect({
       ).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];
+      const selectedFallback = inOpts ? [] : [effectiveVal];
       if (!inputVal || inputVal === selectedLabel) {
         return [
           ...selectedFallback,
@@ -10774,21 +10857,27 @@ function SmartSelect({
     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 ? isControlled ? inputValueProp : void 0 : activeInput,
+      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.40",
+  "version": "0.3.42",
   "type": "module",
   "description": "Experimental: A lightweight React UI component library (Beta)",
   "style": "./dist/main.css",