@rufous/ui 0.3.67 → 0.3.69

package/dist/main.cjs

@@ -11692,6 +11692,7 @@ function SmartSelect({
   filterOptions: filterOptionsProp,
   renderOption: renderOptionProp,
   limitTags,
+  showSelectedOnSearch = false,
   label,
   placeholder,
   variant = "outlined",
@@ -11950,6 +11951,7 @@ function SmartSelect({
       const filteredUnselected = unselected.filter(
         (opt) => getOptionLabel(opt).toLowerCase().includes(q2) || (getOptionSubLabel?.(opt) ?? "").toLowerCase().includes(q2)
       ).slice(0, searchThreshold);
+      if (!showSelectedOnSearch) return filteredUnselected;
       return [...selected, ...filteredUnselected];
     }
     const effectiveVal = strictSelection ? strictValidation.canonicalValue : value;
@@ -11971,7 +11973,7 @@ 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, strictSelection, strictValidation]);
+  }, [filterOptionsProp, multiple, selectedKeys, getValue, getOptionLabel, getOptionSubLabel, value, searchThreshold, strictSelection, strictValidation, showSelectedOnSearch]);
   return /* @__PURE__ */ import_react46.default.createElement(
     Autocomplete,
     {

package/dist/main.d.cts

@@ -2905,6 +2905,19 @@ interface SmartSelectProps<T = any> {
     }) => ReactNode;
     /** In multiple mode, cap how many tag chips are shown before "+N more" */
     limitTags?: number;
+    /**
+     * In multiple mode, controls whether already-selected options stay visible
+     * at the top of the dropdown while the user is actively searching.
+     *
+     * - **false** (default): selected options are hidden during search — only
+     *   matching results are shown. They reappear when a result is selected, the
+     *   search text is cleared, or the dropdown is reopened.
+     * - **true**: existing behaviour — selected options remain pinned at the top
+     *   with search results listed below them.
+     *
+     * Only applies to `multiple` selection mode. Default: **false**.
+     */
+    showSelectedOnSearch?: boolean;
     label?: string;
     placeholder?: string;
     variant?: 'outlined' | 'filled' | 'standard';
@@ -2918,7 +2931,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, 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;
+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, showSelectedOnSearch, 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

@@ -2905,6 +2905,19 @@ interface SmartSelectProps<T = any> {
     }) => ReactNode;
     /** In multiple mode, cap how many tag chips are shown before "+N more" */
     limitTags?: number;
+    /**
+     * In multiple mode, controls whether already-selected options stay visible
+     * at the top of the dropdown while the user is actively searching.
+     *
+     * - **false** (default): selected options are hidden during search — only
+     *   matching results are shown. They reappear when a result is selected, the
+     *   search text is cleared, or the dropdown is reopened.
+     * - **true**: existing behaviour — selected options remain pinned at the top
+     *   with search results listed below them.
+     *
+     * Only applies to `multiple` selection mode. Default: **false**.
+     */
+    showSelectedOnSearch?: boolean;
     label?: string;
     placeholder?: string;
     variant?: 'outlined' | 'filled' | 'standard';
@@ -2918,7 +2931,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, 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;
+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, showSelectedOnSearch, 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

@@ -11486,6 +11486,7 @@ function SmartSelect({
   filterOptions: filterOptionsProp,
   renderOption: renderOptionProp,
   limitTags,
+  showSelectedOnSearch = false,
   label,
   placeholder,
   variant = "outlined",
@@ -11744,6 +11745,7 @@ function SmartSelect({
       const filteredUnselected = unselected.filter(
         (opt) => getOptionLabel(opt).toLowerCase().includes(q2) || (getOptionSubLabel?.(opt) ?? "").toLowerCase().includes(q2)
       ).slice(0, searchThreshold);
+      if (!showSelectedOnSearch) return filteredUnselected;
       return [...selected, ...filteredUnselected];
     }
     const effectiveVal = strictSelection ? strictValidation.canonicalValue : value;
@@ -11765,7 +11767,7 @@ 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, strictSelection, strictValidation]);
+  }, [filterOptionsProp, multiple, selectedKeys, getValue, getOptionLabel, getOptionSubLabel, value, searchThreshold, strictSelection, strictValidation, showSelectedOnSearch]);
   return /* @__PURE__ */ React191.createElement(
     Autocomplete,
     {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rufous/ui",
   "private": false,
-  "version": "0.3.67",
+  "version": "0.3.69",
   "type": "module",
   "description": "Experimental: A lightweight React UI component library (Beta)",
   "style": "./dist/main.css",
@@ -92,4 +92,4 @@
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0"
   }
-}
+}