@rc-component/select 1.5.1 → 1.6.0

package/es/BaseSelect/index.js

@@ -135,7 +135,7 @@ const BaseSelect = /*#__PURE__*/React.forwardRef((props, ref) => {
   // ============================== Open ==============================
   // Not trigger `open` when `notFoundContent` is empty
   const emptyListContent = !notFoundContent && emptyOptions;
-  const [mergedOpen, triggerOpen] = useOpen(defaultOpen || false, open, onPopupVisibleChange, nextOpen => disabled || emptyListContent ? false : nextOpen);
+  const [mergedOpen, triggerOpen, lockOptions] = useOpen(defaultOpen || false, open, onPopupVisibleChange, nextOpen => disabled || emptyListContent ? false : nextOpen);
 
   // ============================= Search =============================
   const tokenWithEnter = React.useMemo(() => (tokenSeparators || []).some(tokenSeparator => ['\n', '\r\n'].includes(tokenSeparator)), [tokenSeparators]);
@@ -379,8 +379,9 @@ const BaseSelect = /*#__PURE__*/React.forwardRef((props, ref) => {
     toggleOpen: triggerOpen,
     showScrollBar,
     styles,
-    classNames
-  }), [props, notFoundContent, triggerOpen, id, showSearch, multiple, mergedOpen, showScrollBar, styles, classNames]);
+    classNames,
+    lockOptions
+  }), [props, notFoundContent, triggerOpen, id, showSearch, multiple, mergedOpen, showScrollBar, styles, classNames, lockOptions]);
 
   // ==================================================================
   // ==                            Render                            ==

package/es/OptionList.js

@@ -34,7 +34,8 @@ const OptionList = (_, ref) => {
     toggleOpen,
     notFoundContent,
     onPopupScroll,
-    showScrollBar
+    showScrollBar,
+    lockOptions
   } = useBaseProps();
   const {
     maxCount,
@@ -54,7 +55,7 @@ const OptionList = (_, ref) => {
     styles: contextStyles
   } = React.useContext(SelectContext);
   const itemPrefixCls = `${prefixCls}-item`;
-  const memoFlattenOptions = useMemo(() => flattenOptions, [open, flattenOptions], (prev, next) => next[0] && prev[1] !== next[1]);
+  const memoFlattenOptions = useMemo(() => flattenOptions, [open, lockOptions], (prev, next) => next[0] && !next[1]);
 
   // =========================== List ===========================
   const listRef = React.useRef(null);

package/es/SelectInput/Content/SingleContent.js

@@ -37,51 +37,54 @@ const SingleContent = /*#__PURE__*/React.forwardRef(({
     }
     return showSearch ? searchValue : '';
   }, [combobox, activeValue, inputChanged, triggerOpen, searchValue, showSearch]);
-
-  // Extract option props, excluding label and value, and handle className/style merging
-  const optionProps = React.useMemo(() => {
-    const restProps = {
-      className: `${prefixCls}-content-value`,
-      style: {
-        visibility: mergedSearchValue ? 'hidden' : 'visible'
-      }
-    };
+  const [optionClassName, optionStyle, optionTitle, hasOptionStyle] = React.useMemo(() => {
+    let className;
+    let style;
+    let titleValue;
     if (displayValue && selectContext?.flattenOptions) {
       const option = selectContext.flattenOptions.find(opt => opt.value === displayValue.value);
       if (option?.data) {
-        const {
-          className,
-          style
-        } = option.data;
-        Object.assign(restProps, {
-          title: getTitle(option.data),
-          className: clsx(restProps.className, className),
-          style: {
-            ...restProps.style,
-            ...style
-          }
-        });
+        className = option.data.className;
+        style = option.data.style;
+        titleValue = getTitle(option.data);
       }
     }
-    if (displayValue && !restProps.title) {
-      restProps.title = getTitle(displayValue);
+    if (displayValue && !titleValue) {
+      titleValue = getTitle(displayValue);
     }
     if (rootTitle !== undefined) {
-      restProps.title = rootTitle;
+      titleValue = rootTitle;
     }
-    return restProps;
-  }, [displayValue, selectContext?.flattenOptions, prefixCls, mergedSearchValue, rootTitle]);
+    const nextHasStyle = !!className || !!style;
+    return [className, style, titleValue, nextHasStyle];
+  }, [displayValue, selectContext?.flattenOptions, rootTitle]);
   React.useEffect(() => {
     if (combobox) {
       setInputChanged(false);
     }
   }, [combobox, activeValue]);
+
+  // ========================== Render ==========================
+  // Render value
+  const renderValue = displayValue ? hasOptionStyle ? /*#__PURE__*/React.createElement("div", {
+    className: clsx(`${prefixCls}-content-value`, optionClassName),
+    style: {
+      ...(mergedSearchValue ? {
+        visibility: 'hidden'
+      } : {}),
+      ...optionStyle
+    },
+    title: optionTitle
+  }, displayValue.label) : displayValue.label : /*#__PURE__*/React.createElement(Placeholder, {
+    show: !mergedSearchValue
+  });
+
+  // Render
   return /*#__PURE__*/React.createElement("div", {
     className: clsx(`${prefixCls}-content`, classNames?.content),
-    style: styles?.content
-  }, displayValue ? /*#__PURE__*/React.createElement("div", optionProps, displayValue.label) : /*#__PURE__*/React.createElement(Placeholder, {
-    show: !mergedSearchValue
-  }), /*#__PURE__*/React.createElement(Input, _extends({
+    style: styles?.content,
+    title: hasOptionStyle ? undefined : optionTitle
+  }, renderValue, /*#__PURE__*/React.createElement(Input, _extends({
     ref: ref
   }, inputProps, {
     value: mergedSearchValue,

package/es/hooks/useBaseProps.d.ts

@@ -8,6 +8,7 @@ export interface BaseSelectContextProps extends BaseSelectProps {
     triggerOpen: boolean;
     multiple: boolean;
     toggleOpen: (open?: boolean) => void;
+    lockOptions: boolean;
 }
 export declare const BaseSelectContext: React.Context<BaseSelectContextProps>;
 export default function useBaseProps(): BaseSelectContextProps;

package/es/hooks/useOpen.d.ts

@@ -15,4 +15,4 @@ export type TriggerOpenType = (nextOpen?: boolean, config?: {
  * SSR handling: During SSR, `open` is always false to avoid Portal issues.
  * On client-side hydration, it syncs with the actual open state.
  */
-export default function useOpen(defaultOpen: boolean, propOpen: boolean, onOpen: (nextOpen: boolean) => void, postOpen: (nextOpen: boolean) => boolean): [boolean, TriggerOpenType];
+export default function useOpen(defaultOpen: boolean, propOpen: boolean, onOpen: (nextOpen: boolean) => void, postOpen: (nextOpen: boolean) => boolean): [open: boolean, toggleOpen: TriggerOpenType, lockOptions: boolean];

package/es/hooks/useOpen.js

@@ -37,6 +37,9 @@ export default function useOpen(defaultOpen, propOpen, onOpen, postOpen) {
   }, []);
   const [stateOpen, internalSetOpen] = useControlledState(defaultOpen, propOpen);
 
+  // Lock for options update
+  const [lock, setLock] = useState(false);
+
   // During SSR, always return false for open state
   const ssrSafeOpen = rendered ? stateOpen : false;
   const mergedOpen = postOpen(ssrSafeOpen);
@@ -54,6 +57,7 @@ export default function useOpen(defaultOpen, propOpen, onOpen, postOpen) {
     taskIdRef.current += 1;
     const id = taskIdRef.current;
     const nextOpenVal = typeof nextOpen === 'boolean' ? nextOpen : !mergedOpen;
+    setLock(!nextOpenVal);
     function triggerUpdate() {
       if (
       // Always check if id is match
@@ -61,6 +65,7 @@ export default function useOpen(defaultOpen, propOpen, onOpen, postOpen) {
       // Check if need to cancel
       !cancelFun?.()) {
         triggerEvent(nextOpenVal);
+        setLock(false);
       }
     }
 
@@ -73,5 +78,5 @@ export default function useOpen(defaultOpen, propOpen, onOpen, postOpen) {
       });
     }
   });
-  return [mergedOpen, toggleOpen];
+  return [mergedOpen, toggleOpen, lock];
 }

package/lib/BaseSelect/index.js

@@ -144,7 +144,7 @@ const BaseSelect = /*#__PURE__*/React.forwardRef((props, ref) => {
   // ============================== Open ==============================
   // Not trigger `open` when `notFoundContent` is empty
   const emptyListContent = !notFoundContent && emptyOptions;
-  const [mergedOpen, triggerOpen] = (0, _useOpen.default)(defaultOpen || false, open, onPopupVisibleChange, nextOpen => disabled || emptyListContent ? false : nextOpen);
+  const [mergedOpen, triggerOpen, lockOptions] = (0, _useOpen.default)(defaultOpen || false, open, onPopupVisibleChange, nextOpen => disabled || emptyListContent ? false : nextOpen);
 
   // ============================= Search =============================
   const tokenWithEnter = React.useMemo(() => (tokenSeparators || []).some(tokenSeparator => ['\n', '\r\n'].includes(tokenSeparator)), [tokenSeparators]);
@@ -388,8 +388,9 @@ const BaseSelect = /*#__PURE__*/React.forwardRef((props, ref) => {
     toggleOpen: triggerOpen,
     showScrollBar,
     styles,
-    classNames
-  }), [props, notFoundContent, triggerOpen, id, showSearch, multiple, mergedOpen, showScrollBar, styles, classNames]);
+    classNames,
+    lockOptions
+  }), [props, notFoundContent, triggerOpen, id, showSearch, multiple, mergedOpen, showScrollBar, styles, classNames, lockOptions]);
 
   // ==================================================================
   // ==                            Render                            ==

package/lib/OptionList.js

@@ -42,7 +42,8 @@ const OptionList = (_, ref) => {
     toggleOpen,
     notFoundContent,
     onPopupScroll,
-    showScrollBar
+    showScrollBar,
+    lockOptions
   } = (0, _useBaseProps.default)();
   const {
     maxCount,
@@ -62,7 +63,7 @@ const OptionList = (_, ref) => {
     styles: contextStyles
   } = React.useContext(_SelectContext.default);
   const itemPrefixCls = `${prefixCls}-item`;
-  const memoFlattenOptions = (0, _useMemo.default)(() => flattenOptions, [open, flattenOptions], (prev, next) => next[0] && prev[1] !== next[1]);
+  const memoFlattenOptions = (0, _useMemo.default)(() => flattenOptions, [open, lockOptions], (prev, next) => next[0] && !next[1]);
 
   // =========================== List ===========================
   const listRef = React.useRef(null);

package/lib/SelectInput/Content/SingleContent.js

@@ -46,51 +46,54 @@ const SingleContent = /*#__PURE__*/React.forwardRef(({
     }
     return showSearch ? searchValue : '';
   }, [combobox, activeValue, inputChanged, triggerOpen, searchValue, showSearch]);
-
-  // Extract option props, excluding label and value, and handle className/style merging
-  const optionProps = React.useMemo(() => {
-    const restProps = {
-      className: `${prefixCls}-content-value`,
-      style: {
-        visibility: mergedSearchValue ? 'hidden' : 'visible'
-      }
-    };
+  const [optionClassName, optionStyle, optionTitle, hasOptionStyle] = React.useMemo(() => {
+    let className;
+    let style;
+    let titleValue;
     if (displayValue && selectContext?.flattenOptions) {
       const option = selectContext.flattenOptions.find(opt => opt.value === displayValue.value);
       if (option?.data) {
-        const {
-          className,
-          style
-        } = option.data;
-        Object.assign(restProps, {
-          title: (0, _commonUtil.getTitle)(option.data),
-          className: (0, _clsx.clsx)(restProps.className, className),
-          style: {
-            ...restProps.style,
-            ...style
-          }
-        });
+        className = option.data.className;
+        style = option.data.style;
+        titleValue = (0, _commonUtil.getTitle)(option.data);
       }
     }
-    if (displayValue && !restProps.title) {
-      restProps.title = (0, _commonUtil.getTitle)(displayValue);
+    if (displayValue && !titleValue) {
+      titleValue = (0, _commonUtil.getTitle)(displayValue);
     }
     if (rootTitle !== undefined) {
-      restProps.title = rootTitle;
+      titleValue = rootTitle;
     }
-    return restProps;
-  }, [displayValue, selectContext?.flattenOptions, prefixCls, mergedSearchValue, rootTitle]);
+    const nextHasStyle = !!className || !!style;
+    return [className, style, titleValue, nextHasStyle];
+  }, [displayValue, selectContext?.flattenOptions, rootTitle]);
   React.useEffect(() => {
     if (combobox) {
       setInputChanged(false);
     }
   }, [combobox, activeValue]);
+
+  // ========================== Render ==========================
+  // Render value
+  const renderValue = displayValue ? hasOptionStyle ? /*#__PURE__*/React.createElement("div", {
+    className: (0, _clsx.clsx)(`${prefixCls}-content-value`, optionClassName),
+    style: {
+      ...(mergedSearchValue ? {
+        visibility: 'hidden'
+      } : {}),
+      ...optionStyle
+    },
+    title: optionTitle
+  }, displayValue.label) : displayValue.label : /*#__PURE__*/React.createElement(_Placeholder.default, {
+    show: !mergedSearchValue
+  });
+
+  // Render
   return /*#__PURE__*/React.createElement("div", {
     className: (0, _clsx.clsx)(`${prefixCls}-content`, classNames?.content),
-    style: styles?.content
-  }, displayValue ? /*#__PURE__*/React.createElement("div", optionProps, displayValue.label) : /*#__PURE__*/React.createElement(_Placeholder.default, {
-    show: !mergedSearchValue
-  }), /*#__PURE__*/React.createElement(_Input.default, _extends({
+    style: styles?.content,
+    title: hasOptionStyle ? undefined : optionTitle
+  }, renderValue, /*#__PURE__*/React.createElement(_Input.default, _extends({
     ref: ref
   }, inputProps, {
     value: mergedSearchValue,

package/lib/hooks/useBaseProps.d.ts

@@ -8,6 +8,7 @@ export interface BaseSelectContextProps extends BaseSelectProps {
     triggerOpen: boolean;
     multiple: boolean;
     toggleOpen: (open?: boolean) => void;
+    lockOptions: boolean;
 }
 export declare const BaseSelectContext: React.Context<BaseSelectContextProps>;
 export default function useBaseProps(): BaseSelectContextProps;

package/lib/hooks/useOpen.d.ts

@@ -15,4 +15,4 @@ export type TriggerOpenType = (nextOpen?: boolean, config?: {
  * SSR handling: During SSR, `open` is always false to avoid Portal issues.
  * On client-side hydration, it syncs with the actual open state.
  */
-export default function useOpen(defaultOpen: boolean, propOpen: boolean, onOpen: (nextOpen: boolean) => void, postOpen: (nextOpen: boolean) => boolean): [boolean, TriggerOpenType];
+export default function useOpen(defaultOpen: boolean, propOpen: boolean, onOpen: (nextOpen: boolean) => void, postOpen: (nextOpen: boolean) => boolean): [open: boolean, toggleOpen: TriggerOpenType, lockOptions: boolean];

package/lib/hooks/useOpen.js

@@ -44,6 +44,9 @@ function useOpen(defaultOpen, propOpen, onOpen, postOpen) {
   }, []);
   const [stateOpen, internalSetOpen] = (0, _util.useControlledState)(defaultOpen, propOpen);
 
+  // Lock for options update
+  const [lock, setLock] = (0, _react.useState)(false);
+
   // During SSR, always return false for open state
   const ssrSafeOpen = rendered ? stateOpen : false;
   const mergedOpen = postOpen(ssrSafeOpen);
@@ -61,6 +64,7 @@ function useOpen(defaultOpen, propOpen, onOpen, postOpen) {
     taskIdRef.current += 1;
     const id = taskIdRef.current;
     const nextOpenVal = typeof nextOpen === 'boolean' ? nextOpen : !mergedOpen;
+    setLock(!nextOpenVal);
     function triggerUpdate() {
       if (
       // Always check if id is match
@@ -68,6 +72,7 @@ function useOpen(defaultOpen, propOpen, onOpen, postOpen) {
       // Check if need to cancel
       !cancelFun?.()) {
         triggerEvent(nextOpenVal);
+        setLock(false);
       }
     }
 
@@ -80,5 +85,5 @@ function useOpen(defaultOpen, propOpen, onOpen, postOpen) {
       });
     }
   });
-  return [mergedOpen, toggleOpen];
+  return [mergedOpen, toggleOpen, lock];
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rc-component/select",
-  "version": "1.5.1",
+  "version": "1.6.0",
   "description": "React Select",
   "engines": {
     "node": ">=8.x"