x-ui-design 0.6.100 → 0.7.22

package/dist/esm/types/components/Select/Select.d.ts

@@ -2,7 +2,7 @@ import { ReactElement } from 'react';
 import { SelectProps } from '../../types/select';
 import './style.css';
 declare const Select: {
-    ({ prefixCls, prefixClsV3, id, searchValue, autoClearSearchValue, filterOption, optionFilterProp, children, options, listHeight, menuItemSelectedIcon, mode, value, defaultValue, maxCount, disabled, loading, placeholder, allowClear, filterable, defaultOpen, size, error, dropdownClassName, className, suffixIcon, searchIcon, style, showSearch, open, closeFromParent, showArrow, notFoundContent, noStyle, feedbackIcons, placement, removeIcon, maxTagCount, iconClickClear, onSearch, onSelect, onDeselect, onClear, onChange, onClose, tagRender, getPopupContainer, dropdownRender, onDropdownVisibleChange, iconClick, ref }: SelectProps): ReactElement;
+    ({ prefixCls, prefixClsV3, id, searchValue, autoClearSearchValue, filterOption, optionFilterProp, children, options, listHeight, menuItemSelectedIcon, mode, value, defaultValue, maxCount, disabled, loading, placeholder, allowClear, filterable, defaultOpen, size, error, dropdownClassName, className, suffixIcon, searchIcon, style, showSearch, open, closeFromParent, showArrow, notFoundContent, noStyle, feedbackIcons, placement, removeIcon, maxTagCount, iconClickClear, onSearch, onSelect, onDeselect, onClear, onChange, onClose, tagRender, getPopupContainer, dropdownRender, onDropdownVisibleChange, iconClick, ref, controlled }: SelectProps): ReactElement;
     displayName: string;
 };
 export default Select;

package/dist/esm/types/types/select.d.ts

@@ -51,6 +51,7 @@ export type SelectProps = DefaultProps & {
     maxTagCount?: number | 'responsive';
     ref?: ForwardedRef<HTMLDivElement>;
     closeFromParent?: boolean;
+    controlled?: boolean;
 };
 export interface OptionType {
     value: RuleType;

package/dist/index.esm.js

@@ -3507,7 +3507,8 @@ const Select = ({
   dropdownRender,
   onDropdownVisibleChange,
   iconClick,
-  ref
+  ref,
+  controlled
 }) => {
   const asTag = mode === 'tags';
   const asMultiple = mode === 'multiple';
@@ -3557,7 +3558,7 @@ const Select = ({
     }
   }, [autoClearSearchValue, prefixCls, prefixClsV3]);
   useEffect(() => {
-    setSelected(hasMode ? checkModeInitialValue : initialValue);
+    !controlled && setSelected(hasMode ? checkModeInitialValue : initialValue);
   }, [checkModeInitialValue, hasMode, initialValue]);
   const handleClickOutside = useCallback(event => {
     if (!selectRef.current) return;
@@ -3683,12 +3684,12 @@ const Select = ({
     }
     const updatedSelected = [...selected, newOptionValue];
     onChange?.(updatedSelected);
-    onSelect?.(updatedSelected);
+    !controlled && onSelect?.(updatedSelected);
     const input = selectRef.current?.querySelector('input');
     if (input) {
       input.value = '';
     }
-    setSelected(updatedSelected);
+    !controlled && setSelected(updatedSelected);
     handleClearInputValue();
   };
   const handleSelect = (e, optionValue, option) => {
@@ -3697,26 +3698,26 @@ const Select = ({
         return;
       }
       const newSelection = selected.includes(optionValue) ? selected.filter(item => item !== optionValue) : [...selected, optionValue];
-      setSelected(newSelection);
+      !controlled && setSelected(newSelection);
       onChange?.(newSelection, option);
       if (selected.includes(optionValue)) {
-        onDeselect?.(optionValue, option);
+        !controlled && onDeselect?.(optionValue, option);
       } else {
-        onSelect?.(optionValue, option);
+        !controlled && onSelect?.(optionValue, option);
       }
     } else {
       setIsOpen(defaultOpen);
-      setSelected(optionValue);
+      !controlled && setSelected(optionValue);
       onChange?.(optionValue, option);
-      onSelect?.(optionValue, option);
+      !controlled && onSelect?.(optionValue, option);
     }
     handleClearInputValue();
   };
   const handleClear = () => {
     const value = hasMode ? [] : '';
-    setSelected(value);
+    !controlled && setSelected(value);
     onChange?.('');
-    onSelect?.('');
+    !controlled && onSelect?.('');
     onClear?.();
     handleClearInputValue();
   };
@@ -3746,10 +3747,10 @@ const Select = ({
         if (hasMode && !e.target.value.trim().length) {
           const updatedSelected = hasMode ? selected.filter(item => item !== selected[selected.length - 1]) : e.target.value.trim();
           if (selected[selected.length - 1]) {
-            onDeselect?.(selected[selected.length - 1]);
+            !controlled && onDeselect?.(selected[selected.length - 1]);
           }
           onChange?.(updatedSelected);
-          setSelected(updatedSelected);
+          !controlled && setSelected(updatedSelected);
           setSearchFocused(false);
         }
       }