@hsu-react/ui 0.0.13 → 0.0.15

package/src/components/Search/_hooks/useSearchExpand.ts

@@ -3,18 +3,18 @@ import { FormItemProps } from "../../FormItem";
 import { measureButtonGroupWidth } from "../_utils";
 
 /**
- * 基于宽度自适应控制展开/收起的Hook
- * @param containerRef 容器引用
- * @param buttonGroupRef 按钮组引用
- * @param itemClassName 搜索项的className
- * @param itemCount 搜索项总数
- * @param columnNum 列数
- * @param autoAdaptWidth 是否启用自适应宽度
- * @param defaultExpanded 默认是否展开
- * @param onExpandChange 展开状态变化回调
- * @param searchItems 搜索项配置数组（可选）
- * @param showAllSearchItems 是否显示所有搜索项
- * @returns 展开状态及控制方法
+ * Hook that controls expand/collapse adaptively based on width
+ * @param containerRef Container ref
+ * @param buttonGroupRef Button group ref
+ * @param itemClassName className of the search items
+ * @param itemCount Total number of search items
+ * @param columnNum Column count
+ * @param autoAdaptWidth Whether adaptive width is enabled
+ * @param defaultExpanded Whether expanded by default
+ * @param onExpandChange Callback when expand state changes
+ * @param searchItems Search item config array (optional)
+ * @param showAllSearchItems Whether to show all search items
+ * @returns Expand state and control methods
  */
 export function useSearchExpand(
   containerRef: React.RefObject<HTMLDivElement>,
@@ -43,41 +43,41 @@ export function useSearchExpand(
       if (!containerRef.current || !buttonGroupRef.current) return;
 
       const containerWidth = container.offsetWidth;
-      // 减去padding
+      // Subtract padding
       const availableWidth = containerWidth - 30; // 15px padding on each side
 
-      // 获取按钮组的实际宽度（计算所有子元素宽度总和）
+      // Get the actual width of the button group (sum of all child element widths)
       const buttonGroupWidth =
         measureButtonGroupWidth(buttonGroupRef.current) ?? 0;
 
-      // 获取所有搜索项元素
+      // Get all search item elements
       const items = container.querySelectorAll(`${itemClassName}`);
 
-      // 计算第一行能放下的搜索项数量
+      // Compute how many search items fit in the first row
       let count = 0;
       let usedWidth = 0;
-      const gap = 10; // 项之间的间距
+      const gap = 10; // Gap between items
 
-      // 计算默认单个项的宽度（容器宽度除以列数）
+      // Compute the default width of a single item (container width divided by column count)
       const defaultItemWidth =
         (availableWidth - (columnNum - 1) * gap) / columnNum -
         columnOffsetWidth;
 
-      // 遍历所有搜索项（包括未渲染的）
+      // Iterate over all search items (including unrendered ones)
       for (let i = 0; i < itemCount; i++) {
         let itemWidth = 0;
 
-        // 如果DOM中有这个item，使用实际宽度
+        // If this item exists in the DOM, use its actual width
         if (i < items.length) {
           const item = items[i] as HTMLElement;
           itemWidth = item.offsetWidth;
         } else if (searchItems && searchItems[i]?.width !== undefined) {
-          // 如果DOM中没有，但有设置宽度，使用设置的宽度
+          // If not in the DOM but a width is configured, use the configured width
           const configWidth = searchItems[i].width;
           if (typeof configWidth === "number") {
             itemWidth = configWidth;
           } else if (typeof configWidth === "string") {
-            // 处理百分比或像素值
+            // Handle percentage or pixel values
             if (configWidth.endsWith("%")) {
               const percent = parseFloat(configWidth) / 100;
               itemWidth = availableWidth * percent;
@@ -86,14 +86,14 @@ export function useSearchExpand(
             }
           }
         } else {
-          // 如果DOM中没有且没有设置宽度，使用默认计算宽度
+          // If not in the DOM and no width is configured, use the default computed width
           itemWidth = defaultItemWidth;
         }
 
-        // 计算加上当前项后的总宽度（包括gap）
+        // Compute the total width after adding the current item (including gap)
         const nextWidth = usedWidth + itemWidth + (i > 0 ? gap : 0);
 
-        // 检查是否还能放下按钮组（需要预留gap和按钮组宽度）
+        // Check whether the button group still fits (must reserve the gap and the button group width)
         if (nextWidth + gap + buttonGroupWidth <= availableWidth) {
           count++;
           usedWidth = nextWidth;
@@ -102,26 +102,26 @@ export function useSearchExpand(
         }
       }
 
-      // 至少显示1个搜索项
+      // Show at least 1 search item
       count = Math.max(1, count);
       setVisibleItemCount(count);
 
-      // 如果所有项都能显示，则不需要展开
+      // If all items can be displayed, expanding is not needed
       if (count >= itemCount) {
         setExpand(false);
       }
     };
 
     const resizeObserver = new ResizeObserver(() => {
-      // 使用 requestAnimationFrame 延迟到下一帧，确保DOM已更新
+      // Use requestAnimationFrame to defer to the next frame, ensuring the DOM has updated
       requestAnimationFrame(() => {
         calculateVisibleItems();
       });
     });
 
-    // MutationObserver 监听DOM变化
+    // MutationObserver watches for DOM changes
     const mutationObserver = new MutationObserver(() => {
-      // 使用 requestAnimationFrame 延迟到下一帧
+      // Use requestAnimationFrame to defer to the next frame
       requestAnimationFrame(() => {
         calculateVisibleItems();
       });
@@ -135,7 +135,7 @@ export function useSearchExpand(
       attributeFilter: ["class", "style"],
     });
 
-    // 监听窗口大小变化
+    // Listen for window resize
     const handleWindowResize = () => {
       requestAnimationFrame(() => {
         calculateVisibleItems();
@@ -143,7 +143,7 @@ export function useSearchExpand(
     };
     window.addEventListener("resize", handleWindowResize);
 
-    // 初始计算（延迟执行以确保DOM已渲染）
+    // Initial calculation (deferred to ensure the DOM has rendered)
     requestAnimationFrame(() => {
       calculateVisibleItems();
     });

package/src/components/Search/_hooks/useSearchForm.ts

@@ -8,7 +8,7 @@ interface UseSearchFormProps {
 }
 
 /**
- * 管理搜索表单数据
+ * Manages search form data
  */
 export function useSearchForm({ form, searchData }: UseSearchFormProps) {
   useEffect(() => {

package/src/components/Search/_hooks/useSearchItems.ts

@@ -2,11 +2,12 @@ import { useCallback, useMemo, useState } from "react";
 import { FormItemProps } from "../../FormItem";
 
 /**
- * 管理搜索项状态
+ * Manages search item state
  *
- * 通过 useMemo 直接从入参派生，仅把用户在 FilterDropdown 里手动切换的
- * visible 覆盖保存为 state；避免 useEffect 镜像 prop 时因为父组件传入
- * 新数组引用而反复 setState，从而触发 Maximum update depth 循环。
+ * Derives directly from the input via useMemo, storing only the visible
+ * overrides the user manually toggles in FilterDropdown as state; this avoids
+ * repeated setState when a useEffect mirrors the prop and the parent passes a
+ * new array reference, which would trigger a Maximum update depth loop.
  */
 export function useSearchItems(searchItems: FormItemProps[]) {
   const [visibilityOverrides, setVisibilityOverrides] = useState<

package/src/components/Search/_types/index.ts

@@ -4,7 +4,7 @@ import { FormItemProps } from "../../FormItem";
 import { ChakraButtonProps } from "../../Button";
 
 /**
- * Search 组件的基础属性接口
+ * Base props interface for the Search component
  */
 export interface BaseSearchProps {
   searchItems?: FormItemProps[];
@@ -14,19 +14,19 @@ export interface BaseSearchProps {
   className?: string;
   externalForm?: FormInstance;
   hasPermi?: string[];
-  /** 搜索项列数（不包括按钮组，总列数为 columnNum + 1） */
+  /** Search item column count (excluding the button group; total column count is columnNum + 1) */
   columnNum?: number;
   beforeButtonGroup?: ChakraButtonProps[];
   affterButtonGroup?: ChakraButtonProps[];
   searchData?: Record<string, unknown>;
   minLabelWidth?: boolean | number;
-  /** 默认是否展开 */
+  /** Whether expanded by default */
   defaultExpanded?: boolean;
-  /** 展开状态变化时的回调 */
+  /** Callback when the expand state changes */
   onExpandChange?: (expand: boolean) => void;
-  /** 是否启用基于宽度的自适应布局（默认显示一行包括按钮） */
+  /** Whether to enable width-based adaptive layout (by default shows one row including buttons) */
   autoAdaptWidth?: boolean;
-  /** 自适应布局的基准宽度（默认1200px） */
+  /** Base width for adaptive layout (default 1200px) */
   baseWidth?: number;
   onValuesChange?: (
     value: Record<string, unknown>,
@@ -34,20 +34,20 @@ export interface BaseSearchProps {
   ) => void;
   searchDisabled?: boolean;
   showAllSearchItems?: boolean;
-  /** 查询按钮文本 */
+  /** Search button text */
   searchText?: ReactNode;
-  /** 重置按钮文本 */
+  /** Reset button text */
   resetText?: ReactNode;
-  /** 列偏移宽度，用于调整列宽计算（默认 0） */
+  /** Column offset width, used to adjust column width calculation (default 0) */
   columnOffsetWidth?: number;
 }
 
 /**
- * 带筛选器的 Search 组件属性接口
+ * Props interface for the Search component with filter
  */
 export interface SearchPropsWithFilter extends BaseSearchProps {
-  /** 是否显示筛选器 */
+  /** Whether to show the filter */
   setFilter?: boolean;
-  /** FilterDropdown 勾选项变化时的回调 */
+  /** Callback when checked items change in FilterDropdown */
   onFilterChange?: (items: FormItemProps[]) => void;
 }

package/src/components/Search/_utils/calculateButtonGroupAndColumnWidth.ts

@@ -2,12 +2,12 @@ import { RefObject } from "react";
 import { measureButtonGroupWidth } from "./measureButtonGroupWidth";
 
 /**
- * 计算按钮组宽度和列宽
- * @param containerRef 容器引用
- * @param buttonGroupRef 按钮组引用
- * @param adaptiveColumnNum 自适应列数
- * @param columnOffsetWidth 列偏移宽度（默认 0）
- * @returns 按钮组宽度和列宽
+ * Computes the button group width and column width
+ * @param containerRef Container ref
+ * @param buttonGroupRef Button group ref
+ * @param adaptiveColumnNum Adaptive column count
+ * @param columnOffsetWidth Column offset width (default 0)
+ * @returns Button group width and column width
  */
 export function calculateButtonGroupAndColumnWidth(
   containerRef: RefObject<HTMLDivElement>,
@@ -23,13 +23,13 @@ export function calculateButtonGroupAndColumnWidth(
 
   if (containerRef.current && buttonGroupRef.current) {
     const containerWidth = containerRef.current.offsetWidth;
-    const availableWidth = containerWidth - 30; // 减去padding
-    const gap = 10; // 项之间的间距
+    const availableWidth = containerWidth - 30; // Subtract padding
+    const gap = 10; // Gap between items
 
-    // 计算按钮组宽度
+    // Compute the button group width
     buttonGroupWidth = measureButtonGroupWidth(buttonGroupRef.current);
 
-    // 计算列宽（单个搜索项的默认宽度）
+    // Compute the column width (default width of a single search item)
     if (adaptiveColumnNum > 0) {
       columnWidth =
         availableWidth -

package/src/components/Search/_utils/calculateVisibleItems.ts

@@ -2,15 +2,15 @@ import { FormItemProps } from "../../FormItem";
 import { shouldDisplayExtraItem } from "./shouldDisplayExtraItem";
 
 /**
- * 计算当前应该显示的搜索项
- * @param searchItems 所有搜索项
- * @param expand 是否展开
- * @param columnNum 列数
- * @param visibleItemCount 可见项数量（自适应宽度时使用）
- * @param autoAdaptWidth 是否启用自适应宽度
- * @param buttonGroupWidth 按钮组宽度（可选）
- * @param columnWidth 列宽（可选）
- * @returns 当前应该显示的搜索项
+ * Computes the search items that should currently be displayed
+ * @param searchItems All search items
+ * @param expand Whether expanded
+ * @param columnNum Column count
+ * @param visibleItemCount Visible item count (used with adaptive width)
+ * @param autoAdaptWidth Whether adaptive width is enabled
+ * @param buttonGroupWidth Button group width (optional)
+ * @param columnWidth Column width (optional)
+ * @returns The search items that should currently be displayed
  */
 export function calculateVisibleItems(
   searchItems: FormItemProps[],
@@ -25,14 +25,14 @@ export function calculateVisibleItems(
   const hasCustomWidth = searchItems.some((item) => item.width !== undefined);
 
   if (!expand) {
-    // 当有自定义宽度时，使用自适应计算
+    // When there are custom widths, use adaptive calculation
     if (hasCustomWidth && autoAdaptWidth) {
       if (visibleItems.length > visibleItemCount) {
         return visibleItems.slice(0, visibleItemCount);
       }
     } else if (!hasCustomWidth) {
-      // 没有自定义宽度时，使用 columnNum（实际搜索项数量）
-      // 判断按钮组宽度是否大于列宽，如果是，则显示 实际搜索项数量+1
+      // Without custom widths, use columnNum (actual search item count)
+      // If the button group is wider than a column, display actual search item count + 1
       const displayCount = shouldDisplayExtraItem(
         buttonGroupWidth,
         columnWidth,

package/src/components/Search/_utils/cleanSearchData.ts

@@ -1,7 +1,7 @@
 /**
- * 清理搜索数据，移除 undefined 值
- * @param data 原始搜索数据
- * @returns 清理后的搜索数据
+ * Cleans search data by removing undefined values
+ * @param data Raw search data
+ * @returns Cleaned search data
  */
 export function cleanSearchData<T = Record<string, unknown>>(
   data: Record<string, unknown>

package/src/components/Search/_utils/measureButtonGroupWidth.ts

@@ -1,7 +1,7 @@
 /**
- * 计算按钮组的实际宽度（所有子元素宽度总和 + 子元素间距）
- * @param buttonGroupEl 按钮组元素
- * @returns 按钮组宽度；无子元素时返回 undefined
+ * Computes the actual width of the button group (sum of all child element widths + gaps between children)
+ * @param buttonGroupEl Button group element
+ * @returns Button group width; undefined when there are no children
  */
 export function measureButtonGroupWidth(
   buttonGroupEl: HTMLElement | null
@@ -15,7 +15,7 @@ export function measureButtonGroupWidth(
   buttonChildren.forEach((child) => {
     totalWidth += (child as HTMLElement).offsetWidth;
   });
-  // 加上子元素之间的间距
+  // Add the gaps between child elements
   const childGap = 5;
   totalWidth += (buttonChildren.length - 1) * childGap;
 

package/src/components/Search/_utils/shouldDisplayExtraItem.ts

@@ -1,12 +1,12 @@
 /**
- * 判断收起状态下是否应多显示一个搜索项
+ * Determines whether one extra search item should be displayed in collapsed state
  *
- * 规则：按钮组宽度大于列宽（按钮组独占更宽空间，首行有富余）；
- * 或按钮组宽度小于列宽且可见项刚好比列数多 1（此时收起只会藏起 1 项，不如直接放下）。
- * @param buttonGroupWidth 按钮组宽度
- * @param columnWidth 列宽
- * @param columnNum 搜索项列数（不含按钮组）
- * @param visibleCount 可见搜索项总数
+ * Rules: the button group is wider than a column (the button group takes up more space on its own, leaving spare room in the first row);
+ * or the button group is narrower than a column and the visible items exceed the column count by exactly 1 (collapsing would only hide 1 item, so it's better to just fit it in).
+ * @param buttonGroupWidth Button group width
+ * @param columnWidth Column width
+ * @param columnNum Search item column count (excluding the button group)
+ * @param visibleCount Total number of visible search items
  */
 export function shouldDisplayExtraItem(
   buttonGroupWidth: number | undefined,

package/src/components/Search/index.module.scss

@@ -8,7 +8,7 @@
   width: 100%;
   padding: 14px 16px;
 
-  // CF 风格：描边白卡片（随外观切换），去投影
+  // CF style: outlined white card (follows appearance switching), no shadow
   background: var(--cf-surface);
 
   border-radius: 8px;

package/src/components/Search/index.tsx

@@ -21,12 +21,12 @@ interface SearchFC extends React.FC<SearchProps> {
   WithMore: typeof SearchWithMore;
 }
 
-// 导出所有可用的 Search 模式键名
+// Export all available Search mode key names
 export type SearchModeKeys =
   | "Default"
   | keyof Omit<SearchFC, keyof React.FC<SearchProps>>;
 
-// 导出 Search 模式映射类型
+// Export the Search mode props mapping type
 export type SearchModePropsMap = {
   Default: SearchProps;
   Card: React.ComponentProps<SearchFC["Card"]>;
@@ -37,8 +37,8 @@ export type SearchModePropsMap = {
 };
 
 /**
- * 基础 Search 组件
- * - 标准的搜索表单布局，自适应列数与展开/收起
+ * Base Search component
+ * - Standard search form layout with adaptive column count and expand/collapse
  */
 const Search: SearchFC = (props) => {
   return <SearchBase {...props} />;

package/src/components/SecondConf/index.module.scss

@@ -13,7 +13,7 @@
 
     .icon {
       font-size: 50px;
-      color: #ff9900;
+      color: var(--cf-warning);
     }
 
     .content {

package/src/components/Select/AutoCompleteSelect/index.module.scss

@@ -8,7 +8,7 @@
   height: 100%;
   padding: 0px 11px;
 
-  // CF 风格：随外观切换的描边输入控件
+  // CF style: outlined input control that follows appearance switching
   border: 1px solid var(--cf-border);
   border-radius: 6px;
 
@@ -49,7 +49,7 @@
   &.focused {
     border-color: var(--primary-color);
 
-    box-shadow: 0 0 0 2px rgba(19, 194, 194, 0.12);
+    box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary-color) 12%, transparent);
 
     outline: 0;
   }
@@ -76,20 +76,20 @@
   }
 
   &:has(:global(.ant-select-status-error)) {
-    border: 1px solid #ff4d4f;
+    border: 1px solid var(--cf-error);
 
     .prefix,
     .suffix {
-      color: #ff4d4f;
+      color: var(--cf-error);
     }
   }
 
   &.legacyHasErrorStatus {
-    border: 1px solid #ff4d4f;
+    border: 1px solid var(--cf-error);
 
     .prefix,
     .suffix {
-      color: #ff4d4f;
+      color: var(--cf-error);
     }
   }
 

package/src/components/Select/AutoCompleteSelect/index.tsx

@@ -1,5 +1,12 @@
 import { AutoComplete, AutoCompleteProps } from "antd";
-import React, { ReactNode, useEffect, useMemo, useRef, useState } from "react";
+import React, {
+  ReactNode,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 import classNames from "classnames";
 import styles from "./index.module.scss";
 import { generateRandomStr } from "hsu-utils";
@@ -52,11 +59,13 @@ const AutoCompleteSelect: React.FC<AutoCompleteSelectProps> = (props) => {
     popupMatchSelectWidth,
     popupMatchContentWidth,
     optionFontSize = 14,
+    value,
     ...antdAutoCompleteConfig
   } = props;
   const [focused, setFocused] = useState<boolean>(false);
   const autoCompleteRef = useRef<HTMLDivElement>(null);
   const [open, setOpen] = useState<boolean>(false);
+  const [searchText, setSearchText] = useState<string>("");
   const [legacyHasErrorStatus, setLegacyHasErrorStatus] =
     useState<boolean>(false);
   const [legacyHasArrowOrClear, setLegacyHasArrowOrClear] =
@@ -65,9 +74,17 @@ const AutoCompleteSelect: React.FC<AutoCompleteSelectProps> = (props) => {
 
   const cls = useMemo(() => generateRandomStr(10), []);
 
-  const { isComposing } = useSelectComposition({ onSearch });
+  const handleSearch = useCallback(
+    (searchValue: string) => {
+      setSearchText(searchValue);
+      onSearch?.(searchValue);
+    },
+    [onSearch],
+  );
 
-  useSelectPopupPosition(autoCompleteRef, open, cls);
+  // Always pass handleSearch so IME composition events stay observed
+  // (an in-progress pinyin input must not wipe out the option list)
+  const { isComposing } = useSelectComposition({ onSearch: handleSearch });
 
   const autoCompleteWidth = autoCompleteRef.current
     ? autoCompleteRef.current.offsetWidth
@@ -84,7 +101,7 @@ const AutoCompleteSelect: React.FC<AutoCompleteSelectProps> = (props) => {
       })
     : autoCompleteWidth;
 
-  // 转换 options 格式为 AutoComplete 需要的格式
+  // Convert options into the format AutoComplete requires
   const autoCompleteOptions = useMemo(() => {
     return options?.map((option) => {
       const { label, value, disabled, ...rest } = option;
@@ -97,30 +114,54 @@ const AutoCompleteSelect: React.FC<AutoCompleteSelectProps> = (props) => {
     });
   }, [options]);
 
-  // 处理 filterOption
-  const handleFilterOption = useMemo(() => {
-    // 如果提供了自定义 filterOption，优先使用
+  // Filter rule: prefer the custom filterOption, otherwise fall back to a
+  // case-insensitive substring match
+  const matchOption = useMemo(() => {
     if (customFilterOption) {
-      return (inputValue: string, option?: AutoCompleteOption) => {
-        return customFilterOption(inputValue, option);
-      };
+      return customFilterOption;
     }
 
-    // 默认过滤逻辑：不区分大小写的包含匹配
     return (inputValue: string, option?: AutoCompleteOption): boolean => {
-      if (!isComposing && option) {
-        const searchText = inputValue.toUpperCase();
-        const optionValue = (option.value ?? "").toString().toUpperCase();
-        const optionLabel = (option.label ?? option.value ?? "")
-          .toString()
-          .toUpperCase();
-        return (
-          optionValue.includes(searchText) || optionLabel.includes(searchText)
-        );
+      if (!option) {
+        return true;
       }
-      return true;
+      const keyword = inputValue.toUpperCase();
+      const optionValue = (option.value ?? "").toString().toUpperCase();
+      const optionLabel = (option.label ?? option.value ?? "")
+        .toString()
+        .toUpperCase();
+      return optionValue.includes(keyword) || optionLabel.includes(keyword);
     };
-  }, [customFilterOption, isComposing]);
+  }, [customFilterOption]);
+
+  // Text the filter runs against: the controlled value wins, otherwise use the
+  // internally tracked search keyword
+  const filterText = useMemo(() => {
+    if (value !== undefined && value !== null) {
+      return String(value);
+    }
+    return searchText;
+  }, [value, searchText]);
+
+  // Filter inside the component (antd's own filterOption is turned off) so we
+  // know whether any candidate survives, keeping controlled open in sync
+  const filteredOptions = useMemo(() => {
+    // Skip filtering while composing so an in-progress pinyin input does not
+    // empty the candidate list
+    if (isComposing || !filterText) {
+      return autoCompleteOptions;
+    }
+    return autoCompleteOptions.filter((option) =>
+      matchOption(filterText, option),
+    );
+  }, [autoCompleteOptions, filterText, isComposing, matchOption]);
+
+  // In combobox mode antd hides the popup by itself when there is no candidate
+  // and skips onDropdownVisibleChange, so fold "no candidate" into open to stop
+  // the controlled state from drifting and leaving an empty popup behind
+  const mergedOpen = open && filteredOptions.length > 0;
+
+  useSelectPopupPosition(autoCompleteRef, mergedOpen, cls);
 
   useEffect(() => {
     if (!legacyHasSelector) {
@@ -177,7 +218,7 @@ const AutoCompleteSelect: React.FC<AutoCompleteSelectProps> = (props) => {
     return () => {
       observer.disconnect();
     };
-  }, [legacyHasSelector, open]);
+  }, [legacyHasSelector, mergedOpen]);
 
   return (
     <div
@@ -197,19 +238,23 @@ const AutoCompleteSelect: React.FC<AutoCompleteSelectProps> = (props) => {
         {...{
           allowClear: true,
           ...antdAutoCompleteConfig,
+          value,
           onFocus: (e) => {
             setFocused(true);
             onFocus?.(e);
           },
           onBlur: (e) => {
             setFocused(false);
+            // antd skips onDropdownVisibleChange when there is no candidate,
+            // so collapse the controlled state manually on blur
+            setOpen(false);
             onBlur?.(e);
           },
-          options: autoCompleteOptions,
-          filterOption: handleFilterOption,
+          options: filteredOptions,
+          filterOption: false,
           onChange,
-          onSearch,
-          open,
+          onSearch: handleSearch,
+          open: mergedOpen,
           onDropdownVisibleChange: (visible) => {
             setOpen(visible);
             onDropdownVisibleChange?.(visible);

package/src/components/Select/IconSelect/index.module.scss

@@ -54,12 +54,12 @@
 
       font-size: 16px;
 
-      border: 1px solid #f0edea;
+      border: 1px solid var(--cf-border-weak);
 
       cursor: pointer;
 
       &.active {
-        background: #dddddd;
+        background: var(--cf-row-hover);
       }
     }
   }