@crab-dev/rc-select 0.0.5 → 0.1.0

package/declarations/_wake/src/token.d.ts

@@ -1,3 +1,3 @@
-export declare const vars: { readonly 'option.checkbox.width': string; readonly 'option.background-color-hover': string; readonly 'option.color-selected': string; readonly 'option.background-color-selected': string; readonly 'option.color-disabled': string; readonly 'option.highlight.background-color': string; readonly 'option.background-color-active': string; readonly 'option.height': string; readonly 'option.padding-block': string; readonly 'option.font-size': string; readonly 'option.line-height': string; readonly 'root.transition': string; readonly 'root.opacity-disabled': string; readonly 'root.touch.min-height': string; readonly 'root.outline-width-focus': string; readonly 'root.outline-offset-focus': string; readonly 'root.border-width': string; readonly 'root.border-style': string; readonly 'root.border-color': string; readonly 'root.border-color-hover': string; readonly 'root.border-color-focus': string; readonly 'root.border-color-error': string; readonly 'root.border-color-warning': string; readonly 'root.border-radius': string; readonly 'root.background-color': string; readonly 'root.background-color-disabled': string; readonly 'root.box-shadow': string; readonly 'root.box-shadow-focus': string; readonly 'root.validation.box-shadow-error': string; readonly 'root.validation.box-shadow-warning': string; readonly 'root.color-loading': string; readonly 'motion.interaction.transition': string; readonly 'motion.spatial.transition': string; readonly 'text.color': string; readonly 'text.color-placeholder': string; readonly 'text.color-disabled': string; readonly 'tag.background-color': string; readonly 'tag.color': string; readonly 'tag.close.color-hover': string; readonly 'clear.color': string; readonly 'clear.color-hover': string; readonly 'clear.width': string; readonly 'clear.height': string; readonly 'clear.touch.width': string; readonly 'clear.box-shadow-focus': string; readonly 'icon.width': string; readonly 'icon.color': string; readonly 'field.gap': string; readonly 'field.padding-inline': string; readonly 'field.label.top': string; readonly 'field.label.padding-inline': string; readonly 'field.label.font-size': string; readonly 'field.label.line-height': string; readonly 'field.label.color': string; readonly 'field.label.color-focus': string; readonly 'field.input.padding-top': string; readonly 'field.transition': string; readonly 'field.filled.background-color': string; readonly 'field.filled.background-color-hover': string; readonly 'field.indicator.border-color': string; readonly 'field.indicator.box-shadow-focus': string; readonly 'field.indicator.box-shadow-error': string; readonly 'field.indicator.box-shadow-warning': string; readonly 'field.color-error': string; readonly 'field.color-warning': string; readonly 'field.support.line-height': string; readonly 'group.color': string; readonly 'group.font-size': string; readonly 'size.large.height': string; readonly 'size.large.padding': string; readonly 'size.large.font-size': string; readonly 'size.large.line-height': string; readonly 'size.large.action.width': string; readonly 'size.middle.height': string; readonly 'size.middle.padding': string; readonly 'size.middle.font-size': string; readonly 'size.middle.line-height': string; readonly 'size.middle.action.width': string; readonly 'size.small.height': string; readonly 'size.small.padding': string; readonly 'size.small.font-size': string; readonly 'size.small.line-height': string; readonly 'size.small.action.width': string; readonly 'dropdown.margin': string; readonly 'dropdown.max-height': string; readonly 'dropdown.padding': string; readonly 'dropdown.option.padding': string; readonly 'dropdown.border-radius': string; };
-declare const token: { readonly 'option': { readonly 'checkbox': { readonly 'width': string; }; readonly 'background-color-hover': string; readonly 'color-selected': string; readonly 'background-color-selected': string; readonly 'color-disabled': string; readonly 'highlight': { readonly 'background-color': string; }; readonly 'background-color-active': string; readonly 'height': string; readonly 'padding-block': string; readonly 'font-size': string; readonly 'line-height': string; }; readonly 'root': { readonly 'transition': string; readonly 'opacity-disabled': string; readonly 'touch': { readonly 'min-height': string; }; readonly 'outline-width-focus': string; readonly 'outline-offset-focus': string; readonly 'border-width': string; readonly 'border-style': string; readonly 'border-color': string; readonly 'border-color-hover': string; readonly 'border-color-focus': string; readonly 'border-color-error': string; readonly 'border-color-warning': string; readonly 'border-radius': string; readonly 'background-color': string; readonly 'background-color-disabled': string; readonly 'box-shadow': string; readonly 'box-shadow-focus': string; readonly 'validation': { readonly 'box-shadow-error': string; readonly 'box-shadow-warning': string; }; readonly 'color-loading': string; }; readonly 'motion': { readonly 'interaction': { readonly 'transition': string; }; readonly 'spatial': { readonly 'transition': string; }; }; readonly 'text': { readonly 'color': string; readonly 'color-placeholder': string; readonly 'color-disabled': string; }; readonly 'tag': { readonly 'background-color': string; readonly 'color': string; readonly 'close': { readonly 'color-hover': string; }; }; readonly 'clear': { readonly 'color': string; readonly 'color-hover': string; readonly 'width': string; readonly 'height': string; readonly 'touch': { readonly 'width': string; }; readonly 'box-shadow-focus': string; }; readonly 'icon': { readonly 'width': string; readonly 'color': string; }; readonly 'field': { readonly 'gap': string; readonly 'padding-inline': string; readonly 'label': { readonly 'top': string; readonly 'padding-inline': string; readonly 'font-size': string; readonly 'line-height': string; readonly 'color': string; readonly 'color-focus': string; }; readonly 'input': { readonly 'padding-top': string; }; readonly 'transition': string; readonly 'filled': { readonly 'background-color': string; readonly 'background-color-hover': string; }; readonly 'indicator': { readonly 'border-color': string; readonly 'box-shadow-focus': string; readonly 'box-shadow-error': string; readonly 'box-shadow-warning': string; }; readonly 'color-error': string; readonly 'color-warning': string; readonly 'support': { readonly 'line-height': string; }; }; readonly 'group': { readonly 'color': string; readonly 'font-size': string; }; readonly 'size': { readonly 'large': { readonly 'height': string; readonly 'padding': string; readonly 'font-size': string; readonly 'line-height': string; readonly 'action': { readonly 'width': string; }; }; readonly 'middle': { readonly 'height': string; readonly 'padding': string; readonly 'font-size': string; readonly 'line-height': string; readonly 'action': { readonly 'width': string; }; }; readonly 'small': { readonly 'height': string; readonly 'padding': string; readonly 'font-size': string; readonly 'line-height': string; readonly 'action': { readonly 'width': string; }; }; }; readonly 'dropdown': { readonly 'margin': string; readonly 'max-height': string; readonly 'padding': string; readonly 'option': { readonly 'padding': string; }; readonly 'border-radius': string; }; };
+export declare const vars: { readonly 'option.checkbox.width': string; readonly 'option.background-color-hover': string; readonly 'option.color-selected': string; readonly 'option.background-color-selected': string; readonly 'option.border-radius': string; readonly 'option.color-disabled': string; readonly 'option.highlight.background-color': string; readonly 'option.background-color-active': string; readonly 'option.selection.background-color-hover': string; readonly 'option.selection.background-color-active': string; readonly 'option.activity.outline-color': string; readonly 'option.activity.outline-width': string; readonly 'option.activity.outline-offset': string; readonly 'option.height': string; readonly 'option.padding-block': string; readonly 'option.font-size': string; readonly 'option.line-height': string; readonly 'root.transition': string; readonly 'root.opacity-disabled': string; readonly 'root.touch.min-height': string; readonly 'root.outline-width-focus': string; readonly 'root.outline-offset-focus': string; readonly 'root.border-width': string; readonly 'root.border-style': string; readonly 'root.border-color': string; readonly 'root.border-color-hover': string; readonly 'root.border-color-focus': string; readonly 'root.border-color-error': string; readonly 'root.border-color-warning': string; readonly 'root.border-radius': string; readonly 'root.background-color': string; readonly 'root.background-color-disabled': string; readonly 'root.box-shadow': string; readonly 'root.box-shadow-focus': string; readonly 'root.validation.box-shadow-error': string; readonly 'root.validation.box-shadow-warning': string; readonly 'root.color-loading': string; readonly 'motion.interaction.transition': string; readonly 'motion.spatial.transition': string; readonly 'text.color': string; readonly 'text.color-placeholder': string; readonly 'text.color-disabled': string; readonly 'tag.background-color': string; readonly 'tag.color': string; readonly 'tag.close.color-hover': string; readonly 'clear.color': string; readonly 'clear.color-hover': string; readonly 'clear.width': string; readonly 'clear.height': string; readonly 'clear.touch.width': string; readonly 'clear.box-shadow-focus': string; readonly 'icon.width': string; readonly 'icon.color': string; readonly 'field.gap': string; readonly 'field.padding-inline': string; readonly 'field.min-height': string; readonly 'field.label.top': string; readonly 'field.label.padding-inline': string; readonly 'field.label.font-size': string; readonly 'field.label.line-height': string; readonly 'field.label.color': string; readonly 'field.label.color-focus': string; readonly 'field.input.padding-top': string; readonly 'field.transition': string; readonly 'field.filled.background-color': string; readonly 'field.filled.background-color-hover': string; readonly 'field.filled.min-height': string; readonly 'field.indicator.border-color': string; readonly 'field.indicator.box-shadow-focus': string; readonly 'field.indicator.box-shadow-error': string; readonly 'field.indicator.box-shadow-warning': string; readonly 'field.color-error': string; readonly 'field.color-warning': string; readonly 'field.support.line-height': string; readonly 'field.outline.border-width-focus': string; readonly 'group.color': string; readonly 'group.font-size': string; readonly 'size.large.height': string; readonly 'size.large.padding': string; readonly 'size.large.font-size': string; readonly 'size.large.line-height': string; readonly 'size.large.action.width': string; readonly 'size.medium.height': string; readonly 'size.medium.padding': string; readonly 'size.medium.font-size': string; readonly 'size.medium.line-height': string; readonly 'size.medium.action.width': string; readonly 'size.small.height': string; readonly 'size.small.padding': string; readonly 'size.small.font-size': string; readonly 'size.small.line-height': string; readonly 'size.small.action.width': string; readonly 'dropdown.margin': string; readonly 'dropdown.max-height': string; readonly 'dropdown.padding': string; readonly 'dropdown.option.padding': string; readonly 'dropdown.border-radius': string; };
+declare const token: { readonly 'option': { readonly 'checkbox': { readonly 'width': string; }; readonly 'background-color-hover': string; readonly 'color-selected': string; readonly 'background-color-selected': string; readonly 'border-radius': string; readonly 'color-disabled': string; readonly 'highlight': { readonly 'background-color': string; }; readonly 'background-color-active': string; readonly 'selection': { readonly 'background-color-hover': string; readonly 'background-color-active': string; }; readonly 'activity': { readonly 'outline-color': string; readonly 'outline-width': string; readonly 'outline-offset': string; }; readonly 'height': string; readonly 'padding-block': string; readonly 'font-size': string; readonly 'line-height': string; }; readonly 'root': { readonly 'transition': string; readonly 'opacity-disabled': string; readonly 'touch': { readonly 'min-height': string; }; readonly 'outline-width-focus': string; readonly 'outline-offset-focus': string; readonly 'border-width': string; readonly 'border-style': string; readonly 'border-color': string; readonly 'border-color-hover': string; readonly 'border-color-focus': string; readonly 'border-color-error': string; readonly 'border-color-warning': string; readonly 'border-radius': string; readonly 'background-color': string; readonly 'background-color-disabled': string; readonly 'box-shadow': string; readonly 'box-shadow-focus': string; readonly 'validation': { readonly 'box-shadow-error': string; readonly 'box-shadow-warning': string; }; readonly 'color-loading': string; }; readonly 'motion': { readonly 'interaction': { readonly 'transition': string; }; readonly 'spatial': { readonly 'transition': string; }; }; readonly 'text': { readonly 'color': string; readonly 'color-placeholder': string; readonly 'color-disabled': string; }; readonly 'tag': { readonly 'background-color': string; readonly 'color': string; readonly 'close': { readonly 'color-hover': string; }; }; readonly 'clear': { readonly 'color': string; readonly 'color-hover': string; readonly 'width': string; readonly 'height': string; readonly 'touch': { readonly 'width': string; }; readonly 'box-shadow-focus': string; }; readonly 'icon': { readonly 'width': string; readonly 'color': string; }; readonly 'field': { readonly 'gap': string; readonly 'padding-inline': string; readonly 'min-height': string; readonly 'label': { readonly 'top': string; readonly 'padding-inline': string; readonly 'font-size': string; readonly 'line-height': string; readonly 'color': string; readonly 'color-focus': string; }; readonly 'input': { readonly 'padding-top': string; }; readonly 'transition': string; readonly 'filled': { readonly 'background-color': string; readonly 'background-color-hover': string; readonly 'min-height': string; }; readonly 'indicator': { readonly 'border-color': string; readonly 'box-shadow-focus': string; readonly 'box-shadow-error': string; readonly 'box-shadow-warning': string; }; readonly 'color-error': string; readonly 'color-warning': string; readonly 'support': { readonly 'line-height': string; }; readonly 'outline': { readonly 'border-width-focus': string; }; }; readonly 'group': { readonly 'color': string; readonly 'font-size': string; }; readonly 'size': { readonly 'large': { readonly 'height': string; readonly 'padding': string; readonly 'font-size': string; readonly 'line-height': string; readonly 'action': { readonly 'width': string; }; }; readonly 'medium': { readonly 'height': string; readonly 'padding': string; readonly 'font-size': string; readonly 'line-height': string; readonly 'action': { readonly 'width': string; }; }; readonly 'small': { readonly 'height': string; readonly 'padding': string; readonly 'font-size': string; readonly 'line-height': string; readonly 'action': { readonly 'width': string; }; }; }; readonly 'dropdown': { readonly 'margin': string; readonly 'max-height': string; readonly 'padding': string; readonly 'option': { readonly 'padding': string; }; readonly 'border-radius': string; }; };
 export default token;

package/declarations/_wake/src/types.d.ts

@@ -1,4 +1,6 @@
-import type { HTMLAttributes, ReactNode, Ref } from "react";
+import type { HTMLAttributes, ReactNode, Ref, SyntheticEvent } from "react";
+import type { DropdownOpenChangeDetails } from '@crab-dev/rc-dropdown-container';
+import type { ControlledValueProps, ControlledOpenProps } from '@crab-dev/rc-hooks';
 export interface SelectOption {
     label: ReactNode;
     value: string;
@@ -15,7 +17,7 @@ export interface FlatOption {
     disabled?: boolean;
     isGroupLabel?: boolean;
 }
-interface BaseSelectProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange" | "defaultValue"> {
+interface BaseSelectProps extends Omit<HTMLAttributes<HTMLDivElement>, "defaultValue"> {
     // 字段外观，默认 outlined
     appearance?: "outlined" | "filled";
     // 可见的浮动字段标签
@@ -36,8 +38,8 @@ interface BaseSelectProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange
     disabled?: boolean;
     // 是否可搜索（显示输入框以过滤选项）
     searchable?: boolean;
-    // 组件尺寸；省略时继承 ConfigProvider，未配置时为 middle
-    size?: "large" | "middle" | "small";
+    // 组件尺寸；省略时继承 ConfigProvider，未配置时为 medium
+    size?: "large" | "medium" | "small";
     // 状态：用于显示错误或警告的边框样式
     status?: "error" | "warning";
     // 是否允许清除；有已选项且未禁用时，悬停字段或聚焦尾部按钮会将箭头切换为清除
@@ -57,25 +59,21 @@ interface BaseSelectProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange
     // 自定义选项渲染函数，提供当前选项及其选中状态
     optionRender?: (option: SelectOption, info: { selected: boolean }) => ReactNode;
     // 自定义 tag 渲染（多选时）
-    tagRender?: (option: SelectOption, onClose: () => void) => ReactNode;
+    tagRender?: (option: SelectOption, onClose: (event?: SyntheticEvent<HTMLElement>) => void) => ReactNode;
     // 自定义下拉菜单整体渲染（包裹原始菜单）
     dropdownRender?: (menu: ReactNode) => ReactNode;
-    // 下拉打开/关闭回调
-    onOpenChange?: (open: boolean) => void;
-    // 聚焦与失焦回调
-    onFocus?: () => void;
-    onBlur?: () => void;
 }
-export interface SingleSelectProps extends BaseSelectProps {
+export type SingleSelectProps = BaseSelectProps & ControlledValueProps<string | null, SelectChangeDetails> & ControlledOpenProps<DropdownOpenChangeDetails> & {
     multiple?: false;
-    value?: string | null;
-    defaultValue?: string | null;
-    onChange?: (value: string | null, option: SelectOption | undefined) => void;
-}
-export interface MultiSelectProps extends BaseSelectProps {
+};
+export type MultiSelectProps = BaseSelectProps & ControlledValueProps<string[], SelectChangeDetails> & ControlledOpenProps<DropdownOpenChangeDetails> & {
     multiple: true;
-    value?: string[];
-    defaultValue?: string[];
-    onChange?: (value: string[], options: SelectOption[]) => void;
-}
+};
 export type SelectProps = SingleSelectProps | MultiSelectProps;
+export interface SelectChangeDetails {
+    reason: 'select' | 'deselect' | 'clear' | 'remove';
+    options: readonly SelectOption[];
+    option?: SelectOption;
+    /** 由用户交互触发时保留原事件；自定义标签也可主动调用无事件的关闭命令。 */
+    event?: SyntheticEvent<HTMLElement>;
+}

package/declarations/index.d.ts

@@ -1,4 +1,4 @@
 import Select from './_wake/src/select.js';
-export type { SelectOption, SelectOptionGroup, SelectOptionOrGroup, SelectProps } from './_wake/src/types.js';
+export type { SelectOption, SelectOptionGroup, SelectOptionOrGroup, SelectProps, SelectChangeDetails } from './_wake/src/types.js';
 export default Select;
 export { vars as TokenVars } from './_wake/src/token.js';

package/esm/_wake/src/select.mjs

@@ -1,7 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useComponentSize } from "@crab-dev/rc-config-provider";
+import { useComponentSize, useLocale } from "@crab-dev/rc-config-provider";
 import RcDropdownContainer from "@crab-dev/rc-dropdown-container";
+import { useDropdownPositionReference } from "@crab-dev/rc-dropdown-container/internal";
+import semanticToken from "@crab-dev/rc-token-semantic";
 import { useId, useRef, useState } from "react";
+;
 import { useControllableValue } from "@crab-dev/rc-hooks";
 import useKeyboardNavigation from "./hooks/useKeyboardNavigation.mjs";
 import SelectInput from "./selectInput.mjs";
@@ -60,8 +63,13 @@ const filterOptions = (flatOptions, searchable, searchText) => {
 const firstEnabledIndex = (flatOptions) => flatOptions.findIndex((opt) => !opt.disabled && !opt.isGroupLabel);
 const fieldStyle = "rc-select-0f3ecf945b98";
 const supportingStyle = "rc-select-3bd2a27273ad";
-const Select = ({ ref, id, options, placeholder = "请选择", disabled = false, searchable = false, multiple = false, size: sizeProp, status, appearance = "outlined", label, supportingText, errorText, required, allowClear = false, loading = false, maxTagCount, autoFocus = false, notFoundContent, popupClassName, popupMatchSelectWidth = true, optionRender, tagRender, dropdownRender, value, defaultValue, onChange, onOpenChange, onFocus, onBlur, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, ...restProps }) => {
+function SelectField({ children }) {
+  const setPositionReference = useDropdownPositionReference();
+  return _jsx("div", { className: fieldStyle, ref: setPositionReference, children: children });
+}
+function Select({ ref, id, options, placeholder, disabled = false, searchable = false, multiple = false, size: sizeProp, status, appearance = "outlined", label, supportingText, errorText, required, allowClear = false, loading = false, maxTagCount, autoFocus = false, notFoundContent, popupClassName, popupMatchSelectWidth = true, optionRender, tagRender, dropdownRender, value, defaultValue, onValueChange, open, defaultOpen, onOpenChange, onFocus, onBlur, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, ...restProps }) {
   const size = useComponentSize(sizeProp);
+  const { messages } = useLocale();
   const listboxId = useId();
   const generatedId = useId();
   const inputId = id ?? generatedId;
@@ -72,14 +80,13 @@ const Select = ({ ref, id, options, placeholder = "请选择", disabled = false,
   const [searchText, setSearchText] = useState("");
   const [selectedValues, setSelectedValues] = useControllableValue({ value: value !== undefined ? asArray(value) : undefined, defaultValue: asArray(defaultValue) });
   const [triggerWidth, setTriggerWidth] = useState(0);
-  const onOpenChangeRef = useRef(onOpenChange);
-  onOpenChangeRef.current = onOpenChange;
+  const controlRef = useRef(null);
   const allPlainOptions = flattenPlainOptions(options);
   const selectedOptions = allPlainOptions.filter((opt) => selectedValues.includes(opt.value));
   const flatOptions = flattenOptions(options);
   const filteredOptions = filterOptions(flatOptions, searchable, searchText);
   const { highlightIndex, highlightedOption, moveHighlight, resetHighlight, setHighlightIndex } = useKeyboardNavigation({ filteredOptions, open: true });
-  const emitOpenChange = (nextOpen) => {
+  const syncOpenState = (nextOpen) => {
     if (nextOpen) {
       if (!multiple && selectedValues.length > 0) {
         const selectedIndex = filteredOptions.findIndex((opt) => opt.value === selectedValues[0]);
@@ -89,47 +96,56 @@ const Select = ({ ref, id, options, placeholder = "请选择", disabled = false,
       setSearchText("");
       resetHighlight();
     }
-    onOpenChangeRef.current?.(nextOpen);
   };
-  const updateValue = (nextValues) => {
+  const emitOpenChange = (nextOpen, details) => {
+    onOpenChange?.(nextOpen, details);
+  };
+  const openProps = open === undefined ? { defaultOpen } : { open };
+  const updateValue = (nextValues, reason, event) => {
+    if (disabled) return;
+    if (nextValues.length === selectedValues.length && nextValues.every((item, index) => item === selectedValues[index])) return;
     setSelectedValues(nextValues);
     if (multiple) {
       const nextOptions = allPlainOptions.filter((opt) => nextValues.includes(opt.value));
-      onChange?.(nextValues, nextOptions);
+      onValueChange?.(nextValues, { reason, options: nextOptions, event });
       return;
     }
     const nextValue = nextValues[0] ?? null;
     const nextOption = allPlainOptions.find((opt) => opt.value === nextValue);
-    onChange?.(nextValue, nextOption);
+    onValueChange?.(nextValue, { reason, option: nextOption, options: nextOption ? [nextOption] : [], event });
   };
-  const handleOptionSelect = (option) => {
-    if (option.disabled || option.isGroupLabel) {
+  const handleOptionSelect = (option, event) => {
+    if (disabled || option.disabled || option.isGroupLabel) {
       return;
     }
     if (multiple) {
       const exists = selectedValues.includes(option.value);
       const nextValues = exists ? selectedValues.filter((v) => v !== option.value) : [...selectedValues, option.value];
-      updateValue(nextValues);
+      updateValue(nextValues, exists ? "deselect" : "select", event);
       return;
     }
-    updateValue([option.value]);
+    controlRef.current?.focus();
+    updateValue([option.value], "select", event);
   };
-  const handleClear = () => {
-    updateValue([]);
+  const handleClear = (event) => {
+    if (disabled) return;
+    updateValue([], "clear", event);
     setSearchText("");
   };
-  const handleRemoveTag = (val) => {
-    updateValue(selectedValues.filter((v) => v !== val));
+  const handleRemoveTag = (val, event) => {
+    updateValue(selectedValues.filter((v) => v !== val), "remove", event);
   };
   const handleTriggerWidthChange = (width) => {
     setTriggerWidth(width);
   };
   const handleSearchTextChange = (text) => {
+    if (disabled) return;
     setSearchText(text);
     const nextFiltered = filterOptions(flatOptions, searchable, text);
     setHighlightIndex(firstEnabledIndex(nextFiltered));
   };
   const floatingStyle = popupMatchSelectWidth ? { width: triggerWidth } : { minWidth: triggerWidth };
-  return _jsx(RcDropdownContainer, { size: size, ...restProps, className: className, overlay: _jsx(SelectOverlay, { multiple: multiple, loading: loading, filteredOptions: filteredOptions, selectedValues: selectedValues, triggerWidth: triggerWidth, highlightIndex: highlightIndex, listboxId: listboxId, notFoundContent: notFoundContent, popupClassName: popupClassName, optionRender: optionRender, dropdownRender: dropdownRender, onOptionSelect: handleOptionSelect, onOpenChange: emitOpenChange, onHighlightChange: setHighlightIndex }), floatingContainerProps: { style: floatingStyle }, children: _jsxs("div", { className: fieldStyle, children: [_jsx(SelectInput, { ref: ref, id: inputId, ariaLabel: ariaLabel, ariaLabelledBy: ariaLabelledBy ?? (label ? labelId : undefined), ariaDescribedBy: [ariaDescribedBy, description ? descriptionId : undefined].filter(Boolean).join(" ") || undefined, disabled: disabled, searchable: searchable, multiple: multiple, size: size, status: fieldStatus, appearance: appearance, label: label, labelId: labelId, required: required, allowClear: allowClear, loading: loading, maxTagCount: maxTagCount, autoFocus: autoFocus, placeholder: placeholder, selectedOptions: selectedOptions, searchText: searchText, highlightIndex: highlightIndex, highlightedOption: highlightedOption, listboxId: listboxId, tagRender: tagRender, onSearchTextChange: handleSearchTextChange, onOpenChange: emitOpenChange, onWidthChange: handleTriggerWidthChange, onMoveHighlight: moveHighlight, onSelectHighlighted: handleOptionSelect, onClear: handleClear, onRemoveTag: handleRemoveTag, onFocus: onFocus, onBlur: onBlur }), description && _jsx("div", { id: descriptionId, className: supportingStyle, "data-status": fieldStatus, children: description })] }) });
-};
+  return _jsx(RcDropdownContainer, { ...openProps, onOpenChange: emitOpenChange, size: size, ...restProps, className: className, overlay: _jsx(SelectOverlay, { size: size, multiple: multiple, disabled: disabled, loading: loading, filteredOptions: filteredOptions, selectedValues: selectedValues, triggerWidth: triggerWidth, highlightIndex: highlightIndex, listboxId: listboxId, notFoundContent: notFoundContent, popupClassName: popupClassName, optionRender: optionRender, dropdownRender: dropdownRender, onOptionSelect: handleOptionSelect, onHighlightChange: setHighlightIndex }), floatingContainerProps: { style: floatingStyle }, children: _jsxs(SelectField, { children: [_jsx(SelectInput, { ref: ref, controlRef: controlRef, id: inputId, ariaLabel: ariaLabel, ariaLabelledBy: ariaLabelledBy ?? (label ? labelId : undefined), ariaDescribedBy: [ariaDescribedBy, description ? descriptionId : undefined].filter(Boolean).join(" ") || undefined, disabled: disabled, searchable: searchable, multiple: multiple, size: size, status: fieldStatus, appearance: appearance, label: label, labelId: labelId, required: required, allowClear: allowClear, loading: loading, maxTagCount: maxTagCount, autoFocus: autoFocus, placeholder: placeholder ?? messages.select.placeholder, selectedOptions: selectedOptions, searchText: searchText, highlightIndex: highlightIndex, highlightedOption: highlightedOption, listboxId: listboxId, tagRender: tagRender, onSearchTextChange: handleSearchTextChange, onOpenStateChange: syncOpenState, onWidthChange: handleTriggerWidthChange, onMoveHighlight: moveHighlight, onSelectHighlighted: handleOptionSelect, onClear: handleClear, onRemoveTag: handleRemoveTag, onFocus: onFocus, onBlur: onBlur }), description && _jsx("div", { id: descriptionId, className: supportingStyle, "data-status": fieldStatus, role: errorText ? "alert" : undefined, children: description })] }) });
+}
+;
 export default Select;

package/esm/_wake/src/selectInput.mjs

@@ -1,13 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useDropdownContext } from "@crab-dev/rc-dropdown-container";
 import RcLineEdit from "@crab-dev/rc-line-edit";
-import Button, { TokenVars as buttonVars } from "@crab-dev/rc-button";
-import { SpinIndicator, TokenVars as spinVars } from "@crab-dev/rc-spin";
+import Button from "@crab-dev/rc-button";
+import { SpinIndicator } from "@crab-dev/rc-spin";
 import Tag from "@crab-dev/rc-tag";
 import { cx } from "@crab-dev/css";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useLocale } from "@crab-dev/rc-config-provider";
+import { useCallback, useEffect, useEffectEvent, useRef, useState } from "react";
 import token, { vars } from "./token.mjs";
 ;
+import { controlStyle, fieldControlStyle, fieldLayoutStyle, controlDisabledStyle, controlErrorStyle, controlWarningStyle, valueWrapStyle, singleValueStyle, placeholderStyle, searchInputStyle, caretStyle, caretOpenStyle, tagLabelStyle, suffixWrapStyle, actionStyle, loadingIconStyle } from "./selectInput.styles.mjs";
 const setRef = (ref, node) => {
   if (typeof ref === "function") {
     ref(node);
@@ -15,31 +17,15 @@ const setRef = (ref, node) => {
     ref.current = node;
   }
 };
-const controlStyle = "rc-select-208f8e064cef";
-const materialFieldStyle = "rc-select-de4f87d60f05";
-const fieldLabelStyle = "rc-select-608ca49a02dc";
-const controlDisabledStyle = "rc-select-238e884e6a17";
-const controlErrorStyle = "rc-select-e0726e9ad481";
-const controlWarningStyle = "rc-select-79b739b32fcb";
-const valueWrapStyle = "rc-select-1356dfc74a7f";
-const singleValueStyle = "rc-select-52cbc5cc4f0f";
-const placeholderStyle = "rc-select-37ce25dfcd13";
-const searchInputStyle = "rc-select-50dd3c70bcdc";
-const caretStyle = "rc-select-d7edabfe7361";
-const caretOpenStyle = "rc-select-30173f5e3d41";
-const tagLabelStyle = "rc-select-2e4337f305d8";
-const suffixWrapStyle = "rc-select-ee9f2054c459";
-const actionStyle = "rc-select-8504d95b52bc";
-const loadingIconStyle = "rc-select-3ab2c2f8c427";
-const sizeMetricsMap = { large: "rc-select-df4a743b55e1", middle: "rc-select-de4a743b542e", small: "rc-select-dd4a743b527b" };
-const sizeHeightFixedMap = { large: "rc-select-b8fc5925a597", middle: "rc-select-b7fc5925a3e4", small: "rc-select-bafc5925a8fd" };
-const sizeHeightFlexibleMap = { large: "rc-select-5d07f79a2f4a", middle: "rc-select-5e07f79a30fd", small: "rc-select-5b07f79a2be4" };
+const sizeMetricsMap = { large: "rc-select-df4a743b55e1", medium: "rc-select-de4a743b542e", small: "rc-select-dd4a743b527b" };
+const sizeHeightFixedMap = { large: "rc-select-b8fc5925a597", medium: "rc-select-b7fc5925a3e4", small: "rc-select-bafc5925a8fd" };
+const sizeHeightFlexibleMap = { large: "rc-select-5d07f79a2f4a", medium: "rc-select-5e07f79a30fd", small: "rc-select-5b07f79a2be4" };
 const CaretIcon = () => _jsx("svg", { "aria-hidden": "true", focusable: "false", viewBox: "0 0 24 24", fill: "currentColor", children: _jsx("path", { d: "m7 10 5 5 5-5z" }) });
 const ClearIcon = () => _jsx("svg", { "aria-hidden": "true", focusable: "false", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("path", { d: "m18 6-12 12M6 6l12 12" }) });
 ;
-const SelectInput = ({ ref, id, ariaLabel, ariaLabelledBy, ariaDescribedBy, disabled, searchable, multiple, size, status, appearance, label, labelId, required, allowClear, loading, maxTagCount, autoFocus, placeholder, selectedOptions, searchText, highlightIndex, highlightedOption, listboxId, tagRender, onSearchTextChange, onOpenChange, onWidthChange, onMoveHighlight, onSelectHighlighted, onClear, onRemoveTag, onFocus, onBlur }) => {
+const SelectInput = ({ ref, controlRef, id, ariaLabel, ariaLabelledBy, ariaDescribedBy, disabled, searchable, multiple, size, status, appearance, label, labelId, required, allowClear, loading, maxTagCount, autoFocus, placeholder, selectedOptions, searchText, highlightIndex, highlightedOption, listboxId, tagRender, onSearchTextChange, onOpenStateChange, onWidthChange, onMoveHighlight, onSelectHighlighted, onClear, onRemoveTag, onFocus, onBlur }) => {
   const { state, refs, dispatch } = useDropdownContext();
-  const controlRef = useRef(null);
+  const { messages } = useLocale();
   const inputRef = useRef(null);
   const open = state.open;
   const [hovered, setHovered] = useState(false);
@@ -53,15 +39,14 @@ const SelectInput = ({ ref, id, ariaLabel, ariaLabelledBy, ariaDescribedBy, disa
     media.addEventListener("change", update);
     return () => media.removeEventListener("change", update);
   }, []);
-  const onOpenChangeRef = useRef(onOpenChange);
-  onOpenChangeRef.current = onOpenChange;
+  const syncOpen = useEffectEvent(onOpenStateChange);
   const mergeRef = useCallback((node) => {
     controlRef.current = node;
     if (typeof refs.setReference === "function") {
       refs.setReference(node);
     }
     setRef(ref, node);
-  }, [refs.setReference, ref]);
+  }, [refs.setReference, ref, controlRef]);
   useEffect(() => {
     const el = controlRef.current;
     if (!el) {
@@ -76,22 +61,17 @@ const SelectInput = ({ ref, id, ariaLabel, ariaLabelledBy, ariaDescribedBy, disa
     return () => observer.disconnect();
   }, [onWidthChange]);
   useEffect(() => {
-    if (open && searchable) {
+    if (open && searchable && !disabled) {
       queueMicrotask(() => inputRef.current?.focus());
     }
-  }, [open, searchable]);
+  }, [disabled, open, searchable]);
   useEffect(() => {
-    if (autoFocus && controlRef.current) {
+    if (autoFocus && !disabled && controlRef.current) {
       controlRef.current.focus();
     }
-  }, [autoFocus]);
-  const isFirstOpenRender = useRef(true);
+  }, [autoFocus, disabled]);
   useEffect(() => {
-    if (isFirstOpenRender.current) {
-      isFirstOpenRender.current = false;
-      return;
-    }
-    onOpenChangeRef.current(open);
+    syncOpen(open);
   }, [open]);
   const handleClick = () => {
     if (disabled) {
@@ -121,7 +101,7 @@ const SelectInput = ({ ref, id, ariaLabel, ariaLabelledBy, ariaDescribedBy, disa
       case "Enter":
         e.preventDefault();
         if (open && highlightedOption) {
-          onSelectHighlighted(highlightedOption);
+          onSelectHighlighted(highlightedOption, e);
           if (!multiple) {
             dispatch({ type: "setOpen", payload: false });
           }
@@ -140,29 +120,30 @@ const SelectInput = ({ ref, id, ariaLabel, ariaLabelledBy, ariaDescribedBy, disa
       case "Escape":
         if (open) {
           e.preventDefault();
-          dispatch({ type: "setOpen", payload: false });
+          controlRef.current?.focus();
+          dispatch({ type: "setOpen", payload: false, details: { reason: "escape", event: e.nativeEvent } });
         }
         break;
       case "Backspace":
         if (multiple && searchText === "" && selectedOptions.length > 0) {
           const lastOption = selectedOptions[selectedOptions.length - 1];
-          onRemoveTag(lastOption.value);
+          onRemoveTag(lastOption.value, e);
         }
         break;
       default:
         break;
     }
   };
-  const triggerClear = () => {
+  const triggerClear = (event) => {
     controlRef.current?.focus();
-    onClear();
+    onClear(event);
     if (open) {
       dispatch({ type: "setOpen", payload: false });
     }
   };
   const handleClearClick = (e) => {
     e.stopPropagation();
-    triggerClear();
+    triggerClear(e);
   };
   const handleClearKeyDown = (e) => {
     if (e.key === "Enter" || e.key === " ") {
@@ -172,11 +153,13 @@ const SelectInput = ({ ref, id, ariaLabel, ariaLabelledBy, ariaDescribedBy, disa
   const canClear = allowClear && !disabled && selectedOptions.length > 0;
   const showClear = canClear && (hovered || actionFocused || withoutHover);
   const renderTag = (opt) => {
-    const handleClose = () => onRemoveTag(opt.value);
+    const handleClose = (event) => {
+      if (!disabled) onRemoveTag(opt.value, event);
+    };
     if (tagRender) {
       return _jsx("span", { children: tagRender(opt, handleClose) }, opt.value);
     }
-    return _jsx(Tag, { size: "small", closable: true, closeAriaLabel: `Remove ${typeof opt.label === "string" ? opt.label : opt.value}`, onClose: handleClose, children: _jsx("span", { className: tagLabelStyle, children: opt.label }) }, opt.value);
+    return _jsx(Tag, { size: "small", closable: !disabled, closeAriaLabel: messages.select.removeTag(typeof opt.label === "string" ? opt.label : opt.value), onClose: handleClose, children: _jsx("span", { className: tagLabelStyle, children: opt.label }) }, opt.value);
   };
   const renderTags = () => {
     if (maxTagCount !== undefined && selectedOptions.length > maxTagCount) {
@@ -188,31 +171,31 @@ const SelectInput = ({ ref, id, ariaLabel, ariaLabelledBy, ariaDescribedBy, disa
   };
   const renderContent = () => {
     if (searchable && open) {
-      return _jsxs(_Fragment, { children: [multiple && renderTags(), _jsx(RcLineEdit, { ref: inputRef, bordered: false, value: searchText, placeholder: multiple && selectedOptions.length > 0 ? "" : placeholder, onChange: (e) => onSearchTextChange(e.target.value), onClick: (e) => e.stopPropagation(), className: searchInputStyle })] });
+      return _jsxs(_Fragment, { children: [multiple && renderTags(), _jsx(RcLineEdit, { ref: inputRef, "aria-label": ariaLabel ?? label ?? placeholder, bordered: false, disabled: disabled, value: searchText, placeholder: multiple && selectedOptions.length > 0 ? "" : placeholder, onChange: (e) => onSearchTextChange(e.target.value), onClick: (e) => e.stopPropagation(), className: searchInputStyle })] });
     }
     if (multiple) {
       if (selectedOptions.length === 0) {
-        return _jsx("span", { className: placeholderStyle, children: placeholder });
+        return _jsx("span", { "data-role": "select-placeholder", className: placeholderStyle, children: placeholder });
       }
       return renderTags();
     }
     if (selectedOptions.length === 0) {
-      return _jsx("span", { className: placeholderStyle, children: placeholder });
+      return _jsx("span", { "data-role": "select-placeholder", className: placeholderStyle, children: placeholder });
     }
     return _jsx("span", { className: singleValueStyle, children: selectedOptions[0]?.label });
   };
   const activeDescendantId = open && highlightIndex >= 0 ? `${listboxId}-option-${highlightIndex}` : undefined;
-  return _jsxs("div", { id: id, role: "combobox", "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-required": required || undefined, "aria-expanded": open, "aria-disabled": disabled, "aria-busy": loading || undefined, "aria-haspopup": "listbox", "aria-controls": open ? listboxId : undefined, "aria-activedescendant": activeDescendantId, "aria-invalid": status === "error" ? true : undefined, "data-appearance": appearance, "data-clearable": canClear, "data-labeled": Boolean(label), "data-floating": Boolean(open || selectedOptions.length > 0 || searchText), "data-status": status, tabIndex: disabled ? -1 : 0, ref: mergeRef, className: cx.call(undefined, controlStyle, sizeMetricsMap[size], multiple ? sizeHeightFlexibleMap[size] : sizeHeightFixedMap[size], disabled && controlDisabledStyle, status === "error" && controlErrorStyle, status === "warning" && controlWarningStyle, materialFieldStyle), onClick: handleClick, onKeyDown: handleKeyDown, onFocus: onFocus, onBlur: onBlur, onPointerOver: (event) => {
+  return _jsxs("div", { className: fieldLayoutStyle, "data-labeled": Boolean(label), "data-appearance": appearance, "data-floating": Boolean(open || selectedOptions.length > 0 || searchText), "data-open": open, "data-status": status, "data-disabled": disabled || undefined, children: [label && _jsxs("span", { "data-role": "select-label", children: [_jsx("span", { id: labelId, children: label }), required && _jsx("span", { "data-required-marker": "", "aria-hidden": "true", children: "*" })] }), _jsxs("div", { id: id, role: "combobox", "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-required": required || undefined, "aria-expanded": open, "aria-disabled": disabled, "aria-busy": loading || undefined, "aria-haspopup": "listbox", "aria-controls": open ? listboxId : undefined, "aria-activedescendant": activeDescendantId, "aria-invalid": status === "error" ? true : undefined, "data-appearance": appearance, "data-clearable": canClear, "data-labeled": Boolean(label), "data-floating": Boolean(open || selectedOptions.length > 0 || searchText), "data-status": status, tabIndex: disabled ? -1 : 0, ref: mergeRef, className: cx.call(undefined, controlStyle, sizeMetricsMap[size], multiple ? sizeHeightFlexibleMap[size] : sizeHeightFixedMap[size], disabled && controlDisabledStyle, status === "error" && controlErrorStyle, status === "warning" && controlWarningStyle, fieldControlStyle), onClick: handleClick, onKeyDown: handleKeyDown, onFocus: onFocus, onBlur: onBlur, onPointerOver: (event) => {
     if (event.pointerType !== "touch") setHovered(true);
   }, onPointerOut: (event) => {
     if (!(event.relatedTarget instanceof Node) || !event.currentTarget.contains(event.relatedTarget)) {
       setHovered(false);
     }
-  }, children: [label && _jsxs("span", { id: labelId, "data-role": "select-label", className: fieldLabelStyle, children: [label, required ? " *" : ""] }), _jsx("div", { "data-role": "select-value", className: valueWrapStyle, children: renderContent() }), _jsxs("span", { "data-role": "select-suffix", className: suffixWrapStyle, children: [loading ? _jsx("span", { "aria-hidden": "true", className: loadingIconStyle, children: _jsx(SpinIndicator, {}) }) : null, _jsx(Button, { "data-role": showClear ? "select-clear" : "select-caret", className: actionStyle, type: "button", appearance: "text", shape: "circle", size: size, disabled: disabled, "aria-label": showClear ? "Clear" : open ? "Close options" : "Open options", "aria-expanded": showClear ? undefined : open, icon: showClear ? _jsx(ClearIcon, {}) : _jsx("span", { "aria-hidden": "true", className: cx.call(undefined, caretStyle, open && caretOpenStyle), children: _jsx(CaretIcon, {}) }), onFocus: () => setActionFocused(true), onBlur: () => setActionFocused(false), onClick: (event) => {
+  }, children: [label && appearance === "outlined" && _jsx("fieldset", { "aria-hidden": "true", children: _jsxs("legend", { children: [label, required ? " *" : ""] }) }), _jsx("div", { "data-role": "select-value", className: valueWrapStyle, children: renderContent() }), _jsxs("span", { "data-role": "select-suffix", className: suffixWrapStyle, children: [loading ? _jsx("span", { "aria-hidden": "true", className: loadingIconStyle, children: _jsx(SpinIndicator, {}) }) : null, _jsx(Button, { "data-role": showClear ? "select-clear" : "select-caret", className: actionStyle, type: "button", appearance: "text", shape: "circle", size: size === "small" ? "xs" : size === "large" ? "m" : "s", disabled: disabled, "aria-label": showClear ? messages.common.clear : open ? messages.select.closeOptions : messages.select.openOptions, "aria-expanded": showClear ? undefined : open, icon: showClear ? _jsx(ClearIcon, {}) : _jsx("span", { "aria-hidden": "true", className: cx.call(undefined, caretStyle, open && caretOpenStyle), children: _jsx(CaretIcon, {}) }), onFocus: () => setActionFocused(true), onBlur: () => setActionFocused(false), onClick: (event) => {
     if (showClear) handleClearClick(event); else {
       event.stopPropagation();
       handleClick();
     }
-  }, onKeyDown: handleClearKeyDown })] })] });
+  }, onKeyDown: handleClearKeyDown })] })] })] });
 };
 export default SelectInput;

package/esm/_wake/src/selectInput.styles.mjs

@@ -0,0 +1,20 @@
+import { TokenVars as buttonVars } from "@crab-dev/rc-button";
+import { TokenVars as spinVars } from "@crab-dev/rc-spin";
+import semanticToken from "@crab-dev/rc-token-semantic";
+import token, { vars } from "./token.mjs";
+export const controlStyle = "rc-select-5e896678dc89";
+export const fieldControlStyle = "rc-select-29edc097b42b";
+export const fieldLayoutStyle = "rc-select-910e459fbbe0";
+export const controlDisabledStyle = "rc-select-82fbf3807561";
+export const controlErrorStyle = "rc-select-6d2a034155e7";
+export const controlWarningStyle = "rc-select-36466465840d";
+export const valueWrapStyle = "rc-select-f0b8a9c0c369";
+export const singleValueStyle = "rc-select-bcd33343d38d";
+export const placeholderStyle = "rc-select-30719d992205";
+export const searchInputStyle = "rc-select-c91210473c12";
+export const caretStyle = "rc-select-8ca15a371517";
+export const caretOpenStyle = "rc-select-72a72768a0ef";
+export const tagLabelStyle = "rc-select-113a9493f812";
+export const suffixWrapStyle = "rc-select-5032f5885db7";
+export const actionStyle = "rc-select-aa51540f6a1a";
+export const loadingIconStyle = "rc-select-14f1c2e4ccd5";

package/esm/_wake/src/selectOverlay.mjs

@@ -1,56 +1,50 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import Checkbox, { TokenVars as checkboxVars } from "@crab-dev/rc-checkbox";
-import { SpinIndicator, TokenVars as spinVars } from "@crab-dev/rc-spin";
+import Checkbox from "@crab-dev/rc-checkbox";
+import { componentDensityMetrics, useConfig, useLocale } from "@crab-dev/rc-config-provider";
+import { SpinIndicator } from "@crab-dev/rc-spin";
 import RcVirtual from "@crab-dev/rc-virtual";
 import { useMediaQuery } from "@crab-dev/rc-hooks";
 import { cx } from "@crab-dev/css";
 import { useDropdownContext } from "@crab-dev/rc-dropdown-container";
 import { useEffect, useLayoutEffect, useRef, useState } from "react";
-import token from "./token.mjs";
 ;
+import { overlayStyle, optionStyle, optionHighlightStyle, measureStyle, optionSelectedStyle, optionSelectedSingleStyle, optionDisabledStyle, optionLabelStyle, checkIconStyle, checkboxIndicatorStyle, emptyStyle, groupLabelStyle, groupedOptionStyle, virtualTopSpacerStyle, virtualBottomSpacerStyle, loadingStyle } from "./selectOverlay.styles.mjs";
 const hasGroups = (options) => options.some((opt) => opt.isGroupLabel);
-const overlayStyle = "rc-select-8032ea9d3fcc";
-const optionStyle = "rc-select-41a9c05e6999";
-const optionHighlightStyle = "rc-select-787681543371";
-const measureStyle = "rc-select-9fccdf1a17f8";
-const optionSelectedStyle = "rc-select-afbd832dfa96";
-const optionSelectedSingleStyle = "rc-select-92da46dc013a";
-const optionDisabledStyle = "rc-select-b51a97d11fd1";
-const optionLabelStyle = "rc-select-462ffe03d1f7";
-const checkIconStyle = "rc-select-4d7b259b317b";
-const checkboxIndicatorStyle = "rc-select-8509288b81d2";
-const emptyStyle = "rc-select-742133f23b03";
-const groupLabelStyle = "rc-select-4222a3b1548f";
-const groupedOptionStyle = "rc-select-fa0b905ad8a1";
-const virtualTopSpacerStyle = "rc-select-25c250ff4ce4";
-const virtualBottomSpacerStyle = "rc-select-bf5e0c73c29c";
-const loadingStyle = "rc-select-0ed119f292d0";
 const DROPDOWN_PADDING = 4;
-const ROW_HEIGHT = 48;
 const MAX_VIEWPORT_HEIGHT = 256;
 ;
-const SelectOverlay = ({ multiple, loading, filteredOptions, selectedValues, triggerWidth, highlightIndex, listboxId, notFoundContent, popupClassName, optionRender, dropdownRender, onOptionSelect, onOpenChange, onHighlightChange }) => {
+const SelectOverlay = ({ size, multiple, disabled, loading, filteredOptions, selectedValues, triggerWidth, highlightIndex, listboxId, notFoundContent, popupClassName, optionRender, dropdownRender, onOptionSelect, onHighlightChange }) => {
   const { dispatch } = useDropdownContext();
   const coarsePointer = useMediaQuery("(pointer: coarse)");
   const overlayRef = useRef(null);
-  const [measuredRowHeight, setMeasuredRowHeight] = useState(ROW_HEIGHT);
-  const rowHeight = Math.max(coarsePointer ? 48 : ROW_HEIGHT, measuredRowHeight);
+  const [measuredRowHeight, setMeasuredRowHeight] = useState(0);
+  const [measuredContentWidth, setMeasuredContentWidth] = useState(0);
+  const { density } = useConfig();
+  const { messages } = useLocale();
+  const rowHeight = Math.max(coarsePointer ? 48 : componentDensityMetrics[density].item, measuredRowHeight);
   useLayoutEffect(() => {
-    const option = overlayRef.current?.querySelector("[data-select-option-measure]");
-    if (!option) return;
+    const overlay = overlayRef.current;
+    const option = overlay?.querySelector("[data-select-option-measure]");
+    if (!overlay || !option) return;
     const measure = () => {
       const height = option.getBoundingClientRect().height;
       if (height > 0) {
         overlayRef.current?.style.setProperty("--select-option-measured-height", `${height}px`);
         setMeasuredRowHeight(height);
       }
+      const style = overlay.ownerDocument.defaultView?.getComputedStyle(overlay);
+      const paddingStart = Number.parseFloat(style?.paddingLeft ?? "") || 0;
+      const paddingEnd = Number.parseFloat(style?.paddingRight ?? "") || 0;
+      const width = overlay.clientWidth - paddingStart - paddingEnd;
+      if (width > 0) setMeasuredContentWidth(width);
     };
     measure();
     if (typeof ResizeObserver === "undefined") return;
     const observer = new ResizeObserver(measure);
     observer.observe(option);
+    observer.observe(overlay);
     return () => observer.disconnect();
-  }, [coarsePointer, filteredOptions.length, loading]);
+  }, [coarsePointer, density, filteredOptions.length, loading, size]);
   const gridRef = useRef(null);
   useEffect(() => {
     if (highlightIndex < 0) {
@@ -59,7 +53,7 @@ const SelectOverlay = ({ multiple, loading, filteredOptions, selectedValues, tri
     gridRef.current?.scrollToCell({ rowIndex: highlightIndex });
   }, [highlightIndex]);
   const rowCount = filteredOptions.length;
-  const contentWidth = Math.max(triggerWidth - DROPDOWN_PADDING * 2, 160);
+  const contentWidth = measuredContentWidth || Math.max(triggerWidth - DROPDOWN_PADDING * 2, 160);
   const viewportHeight = Math.min(MAX_VIEWPORT_HEIGHT, rowCount * rowHeight);
   const rows = Array(rowCount).fill(rowHeight);
   const columns = [contentWidth];
@@ -67,7 +61,7 @@ const SelectOverlay = ({ multiple, loading, filteredOptions, selectedValues, tri
     return _jsx("div", { id: listboxId, role: "listbox", "aria-busy": "true", "data-select-overlay": true, className: cx.call(undefined, overlayStyle, popupClassName), children: _jsx("div", { className: loadingStyle, children: _jsx(SpinIndicator, {}) }) });
   }
   if (filteredOptions.length === 0) {
-    return _jsx("div", { id: listboxId, role: "listbox", "data-select-overlay": true, className: cx.call(undefined, overlayStyle, popupClassName), children: _jsx("div", { className: emptyStyle, children: notFoundContent ?? "无匹配选项" }) });
+    return _jsx("div", { id: listboxId, role: "listbox", "data-select-overlay": true, className: cx.call(undefined, overlayStyle, popupClassName), children: _jsx("div", { className: emptyStyle, children: notFoundContent ?? messages.select.empty }) });
   }
   const isGrouped = hasGroups(filteredOptions);
   const menu = _jsx(RcVirtual, { gridRef: gridRef, viewportWidth: contentWidth, viewportHeight: viewportHeight, gridTemplateColumns: columns, gridTemplateRows: rows, overscanRowCount: 4, renderRows: (rowRange) => {
@@ -80,19 +74,21 @@ const SelectOverlay = ({ multiple, loading, filteredOptions, selectedValues, tri
       }
       const selected = selectedValues.includes(option.value);
       const highlighted = i === highlightIndex;
-      const content = optionRender ? optionRender(option, { selected }) : _jsxs(_Fragment, { children: [multiple ? _jsx(Checkbox, { className: checkboxIndicatorStyle, checked: selected, disabled: option.disabled, tabIndex: -1, "aria-label": typeof option.label === "string" ? option.label : option.value }) : null, _jsx("span", { className: optionLabelStyle, children: option.label }), !multiple && selected ? _jsx("span", { className: checkIconStyle, children: _jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("path", { d: "M20 6 9 17l-5-5" }) }) }) : null] });
+      const content = optionRender ? optionRender(option, { selected }) : _jsxs(_Fragment, { children: [multiple ? _jsx(Checkbox, { className: checkboxIndicatorStyle, checked: selected, disabled: disabled || option.disabled, tabIndex: -1, "aria-label": typeof option.label === "string" ? option.label : option.value }) : null, _jsx("span", { className: optionLabelStyle, children: option.label }), !multiple && selected ? _jsx("span", { className: checkIconStyle, children: _jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("path", { d: "M20 6 9 17l-5-5" }) }) }) : null] });
       const optionAriaLabel = multiple ? typeof option.label === "string" ? option.label : option.value : undefined;
-      nodes.push(_jsx("div", { id: `${listboxId}-option-${i}`, role: "option", "aria-selected": selected, "aria-disabled": option.disabled || undefined, "aria-label": optionAriaLabel, className: cx.call(undefined, optionStyle, isGrouped && groupedOptionStyle, selected && (multiple ? optionSelectedStyle : optionSelectedSingleStyle), highlighted && optionHighlightStyle, option.disabled && optionDisabledStyle), onMouseEnter: () => onHighlightChange(i), onClick: () => {
-        onOptionSelect(option);
+      nodes.push(_jsx("div", { id: `${listboxId}-option-${i}`, role: "option", "aria-selected": selected, "aria-disabled": disabled || option.disabled || undefined, "data-highlighted": highlighted || undefined, "aria-label": optionAriaLabel, className: cx.call(undefined, optionStyle, isGrouped && groupedOptionStyle, selected && (multiple ? optionSelectedStyle : optionSelectedSingleStyle), highlighted && optionHighlightStyle, (disabled || option.disabled) && optionDisabledStyle), onMouseEnter: () => {
+        if (!disabled) onHighlightChange(i);
+      }, onClick: (event) => {
+        if (disabled) return;
+        onOptionSelect(option, event);
         if (!multiple && !option.disabled) {
           dispatch({ type: "setOpen", payload: false });
-          onOpenChange(false);
         }
       }, children: content }, option.value));
     }
     nodes.push(_jsx("div", { "data-select-virtual-spacer": "bottom", className: virtualBottomSpacerStyle }, "__select-bottom-padding__"));
     return nodes;
   } });
-  return _jsxs("div", { id: listboxId, ref: overlayRef, "data-select-overlay": true, className: cx.call(undefined, overlayStyle, popupClassName), role: "listbox", "aria-multiselectable": multiple || undefined, children: [_jsx("div", { "aria-hidden": "true", "data-select-option-measure": "", className: cx(optionStyle, measureStyle), children: "M" }), dropdownRender ? dropdownRender(menu) : menu] });
+  return _jsxs("div", { id: listboxId, ref: overlayRef, "data-select-overlay": true, className: cx.call(undefined, overlayStyle, popupClassName), role: "listbox", "aria-multiselectable": multiple || undefined, "aria-disabled": disabled || undefined, children: [_jsx("div", { "aria-hidden": "true", "data-select-option-measure": "", className: cx(optionStyle, measureStyle), children: "M" }), dropdownRender ? dropdownRender(menu) : menu] });
 };
 export default SelectOverlay;

package/esm/_wake/src/selectOverlay.styles.mjs

@@ -0,0 +1,19 @@
+import { TokenVars as checkboxVars } from "@crab-dev/rc-checkbox";
+import { TokenVars as spinVars } from "@crab-dev/rc-spin";
+import token from "./token.mjs";
+export const overlayStyle = "rc-select-2b62562b9766";
+export const optionStyle = "rc-select-4c26800476b7";
+export const optionHighlightStyle = "rc-select-868bf53a2d33";
+export const measureStyle = "rc-select-f4efdbe79bde";
+export const optionSelectedStyle = "rc-select-dca4819751f4";
+export const optionSelectedSingleStyle = "rc-select-b8e7cfd3837c";
+export const optionDisabledStyle = "rc-select-fd6a969fdc3f";
+export const optionLabelStyle = "rc-select-d58ef5724e7d";
+export const checkIconStyle = "rc-select-bbb208831319";
+export const checkboxIndicatorStyle = "rc-select-52f500f177fc";
+export const emptyStyle = "rc-select-e84bd23bdc99";
+export const groupLabelStyle = "rc-select-3ce923bc7749";
+export const groupedOptionStyle = "rc-select-16181d2683cf";
+export const virtualTopSpacerStyle = "rc-select-7804943b918e";
+export const virtualBottomSpacerStyle = "rc-select-86002077b8c2";
+export const loadingStyle = "rc-select-3809e79e5752";