@sia.soul/sia-react-ui 0.1.20 → 0.1.22

package/dist/{select-date-range-4tEYkA5O.d.cts → select-date-range-CGRb3-W8.d.ts}

@@ -1,94 +1,208 @@
 import * as react from 'react';
 import { InputHTMLAttributes, ReactNode, HTMLAttributes, CSSProperties } from 'react';
-import { I as InputPlaceholderMode, C as ControlSize, a as ControlStatus } from './shared-DAYZvZVu.cjs';
-import { S as SelectOption, e as SelectValue } from './Select-Da9CLN0X.cjs';
+import { I as InputPlaceholderMode, C as ControlSize, a as ControlStatus } from './shared-Bx4B28Wh.js';
+import { S as SelectOption, e as SelectValue } from './Select-BNSE67xn.js';
 
+/** 日期选择附带的时间选择配置。 */
 type DatePickerShowTime = boolean | {
+    /** 是否显示秒选择。 */
     showSecond?: boolean;
+    /** 非受控模式的初始值，仅在初始化时使用。 */
     defaultValue?: string | readonly [string, string];
 };
 
+/** 日期选择的类型标识。 */
 type DatePickerType = "date" | "week" | "month" | "year" | "quarter";
+/** 日期选择的值类型。 */
 type DatePickerValue = string | readonly string[];
+/** 日期选择面板中的快捷日期选项。 */
 type DatePickerPreset = {
+    /** 展示给用户的名称，可传入文本或 React 节点。 */
     label: ReactNode;
+    /** 该项目对应的数据值，用于标识、选择或计算。 */
     value: string | (() => string);
 };
+/** 日期区间面板中的快捷范围选项。 */
 type DateRangePickerPreset = {
+    /** 展示给用户的名称，可传入文本或 React 节点。 */
     label: ReactNode;
+    /** 该项目对应的数据值，用于标识、选择或计算。 */
     value: readonly [string, string] | (() => readonly [string, string]);
 };
+/** 日期禁用判断函数收到的面板和范围上下文。 */
 type DatePickerDisabledInfo = {
+    /** 范围、渐变或转换的起始值。 */
     from?: string;
+    /** 类型标识，用于选择对应的表现形式。 */
     type: "date";
 };
+/** SharedDatePicker的属性配置。 */
 type SharedDatePickerProps = Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "size" | "value" | "defaultValue" | "onChange" | "multiple">;
+/** 日期选择的属性配置。 */
 interface DatePickerProps extends SharedDatePickerProps {
+    /** 占位提示的显示模式；floating 为浮动标签。 */
     placeholderMode?: InputPlaceholderMode;
+    /** 当前值；作为受控属性时，需要在变更回调中同步更新。 */
     value?: DatePickerValue;
+    /** 非受控模式的初始值，仅在初始化时使用。 */
     defaultValue?: DatePickerValue;
+    /**
+     * 日期粒度
+     * @defaultValue "date"
+     */
     picker?: DatePickerType;
+    /** 组件尺寸；用于调整控件高度、字号和间距。 */
     size?: ControlSize;
+    /**
+     * 当前状态，用于选择对应的状态样式。
+     * @defaultValue "default"
+     */
     status?: ControlStatus;
+    /**
+     是否允许清空当前选择或输入值。
+     * @defaultValue true
+     */
     allowClear?: boolean;
+    /**
+     是否允许在同一面板选择多个日期。
+     * @defaultValue false
+     */
     multiple?: boolean;
+    /** 选择后需要点击确定才提交 */
     needConfirm?: boolean;
+    /**
+     * 组合时间面板，可显示秒；范围选择会在宽屏并排显示起止面板，在窄屏分步选择
+     * @defaultValue false
+     */
     showTime?: DatePickerShowTime;
+    /**
+     * 是否显示返回今天的入口。
+     * @defaultValue true
+     */
     showToday?: boolean;
+    /** 是否打开；传入后由外部控制显示状态。 */
     open?: boolean;
+    /**
+     * 非受控模式下的初始打开状态。
+     * @defaultValue false
+     */
     defaultOpen?: boolean;
+    /** 显示在控件末尾的图标。 */
     suffixIcon?: ReactNode;
+    /** 允许选择的最早日期。 */
     minDate?: string;
+    /** 允许选择的最晚日期。 */
     maxDate?: string;
+    /** 预设候选值或快捷选项集合。 */
     presets?: readonly DatePickerPreset[];
+    /** 判断某个日期是否不可选的函数。 */
     disabledDate?: (value: string, info: DatePickerDisabledInfo) => boolean;
+    /** 值发生变化时调用；参数为新值及类型声明中列出的关联信息。 */
     onChange?: (value: DatePickerValue) => void;
+    /** 打开状态改变时触发，参数为新的打开状态。 */
     onOpenChange?: (open: boolean) => void;
     /** 只格式化显示文字，不改变传入和回调的标准日期值。 */
     formatValue?: (value: string) => string;
+    /** 渲染面板底部的自定义扩展区域。 */
     renderExtraFooter?: () => ReactNode;
 }
+/** 日期区间选择的属性配置。 */
 interface DateRangePickerProps extends Omit<DatePickerProps, "value" | "defaultValue" | "onChange" | "placeholder" | "multiple" | "presets"> {
+    /** 当前值；作为受控属性时，需要在变更回调中同步更新。 */
     value?: readonly [string, string];
+    /**
+     * 非受控模式的初始值，仅在初始化时使用。
+     * @defaultValue ["", ""]
+     */
     defaultValue?: readonly [string, string];
+    /**
+     * 未填写或未选择时的提示内容。
+     * @defaultValue ["开始日期", "结束日期"]
+     */
     placeholder?: readonly [string, string];
+    /**
+     * 全局分隔符，可传入图标或文字
+     * @defaultValue "→"
+     */
     separator?: ReactNode;
+    /** 预设候选值或快捷选项集合。 */
     presets?: readonly DateRangePickerPreset[];
+    /** 日期区间允许的最大天数。 */
     maxRangeDays?: number;
     /** 允许单独保留起点或终点；需要点击确定提交未完整的范围。 */
     allowEmpty?: readonly [boolean, boolean];
     /** 锁定指定端点，编辑和清空时保留其值。 */
     endpointDisabled?: readonly [boolean, boolean];
+    /** 日期区间选择过程中的暂存值变化时调用。 */
     onCalendarChange?: (value: readonly [string, string]) => void;
+    /** 值发生变化时调用；参数为新值及类型声明中列出的关联信息。 */
     onChange?: (value: readonly [string, string]) => void;
 }
 declare function DateRangePicker({ value, defaultValue, placeholder, placeholderMode, separator, presets, maxRangeDays, allowEmpty, endpointDisabled, size: sizeProp, status, allowClear, needConfirm, showTime, showToday, open, defaultOpen, suffixIcon, minDate, maxDate, disabledDate, disabled, className, onCalendarChange, onChange, onOpenChange, formatValue, renderExtraFooter, ...props }: DateRangePickerProps): react.JSX.Element;
+/** 日期选择组件。 */
 declare function DatePicker({ value, defaultValue, picker, size: sizeProp, status, allowClear, multiple, needConfirm, showTime, showToday, open, defaultOpen, suffixIcon, minDate, maxDate, presets, disabledDate, disabled, className, onChange, onOpenChange, placeholder, placeholderMode, formatValue, renderExtraFooter, ...props }: DatePickerProps): react.JSX.Element;
 declare namespace DatePicker {
+    /** 日期区间选择器。 */
     const RangePicker: typeof DateRangePicker;
 }
 
+/** 类型与日期区间组合选择的值类型。 */
 interface SelectDateRangeValue {
+    /** 选择指定项，或日期类型选择器的配置。 */
     select: SelectValue;
+    /** 是否启用范围选择，或指定选择范围。 */
     range: readonly [string, string];
 }
+/** 类型与日期区间组合选择的属性配置。 */
 interface SelectDateRangeProps extends Omit<HTMLAttributes<HTMLDivElement>, "defaultValue" | "onChange"> {
+    /** 可供用户选择的候选项列表。 */
     options: readonly SelectOption[];
+    /** 当前值；作为受控属性时，需要在变更回调中同步更新。 */
     value?: SelectDateRangeValue;
+    /** 非受控模式的初始值，仅在初始化时使用。 */
     defaultValue?: SelectDateRangeValue;
+    /**
+     * 选择器占位内容
+     * @defaultValue "请选择类型"
+     */
     selectPlaceholder?: ReactNode;
+    /** 占位提示的显示模式；floating 为浮动标签。 */
     placeholderMode?: InputPlaceholderMode;
     /** 左侧选择器宽度，数字单位为 px；右侧日期范围自动填充剩余宽度。 */
     selectWidth?: CSSProperties["width"];
+    /**
+     * 开始和结束日期占位内容
+     * @defaultValue ["开始日期", "结束日期"]
+     */
     rangePlaceholder?: readonly [string, string];
+    /**
+     * 日期类型选择器的无障碍名称。
+     * @defaultValue "选择类型"
+     */
     selectAriaLabel?: string;
+    /**
+     * 日期区间控件的无障碍名称。
+     * @defaultValue "日期范围"
+     */
     rangeAriaLabel?: string;
+    /** 预设候选值或快捷选项集合。 */
     presets?: readonly DateRangePickerPreset[];
+    /** 组件尺寸；用于调整控件高度、字号和间距。 */
     size?: ControlSize;
+    /**
+     * 当前状态，用于选择对应的状态样式。
+     * @defaultValue "default"
+     */
     status?: ControlStatus;
+    /**
+     * 是否禁用交互。
+     * @defaultValue false
+     */
     disabled?: boolean;
+    /** 值发生变化时调用；参数为新值及类型声明中列出的关联信息。 */
     onChange?: (value: SelectDateRangeValue) => void;
 }
+/** 类型与日期区间组合选择组件。 */
 declare function SelectDateRange({ options, value, defaultValue, selectPlaceholder, placeholderMode, selectWidth, rangePlaceholder, selectAriaLabel, rangeAriaLabel, presets, size: sizeProp, status, disabled, onChange, className, style, ...props }: SelectDateRangeProps): react.JSX.Element;
 
 export { DatePicker as D, SelectDateRange as S, type DatePickerDisabledInfo as a, type DatePickerPreset as b, type DatePickerProps as c, type DatePickerShowTime as d, type DatePickerType as e, type DatePickerValue as f, type DateRangePickerPreset as g, type DateRangePickerProps as h, type SelectDateRangeProps as i, type SelectDateRangeValue as j };

package/dist/{select-date-range-D-ynrB5k.d.ts → select-date-range-DDmYGDD4.d.cts}

@@ -1,94 +1,208 @@
 import * as react from 'react';
 import { InputHTMLAttributes, ReactNode, HTMLAttributes, CSSProperties } from 'react';
-import { I as InputPlaceholderMode, C as ControlSize, a as ControlStatus } from './shared-DAYZvZVu.js';
-import { S as SelectOption, e as SelectValue } from './Select-Cz3hzQl_.js';
+import { I as InputPlaceholderMode, C as ControlSize, a as ControlStatus } from './shared-Bx4B28Wh.cjs';
+import { S as SelectOption, e as SelectValue } from './Select-4hGJt3RJ.cjs';
 
+/** 日期选择附带的时间选择配置。 */
 type DatePickerShowTime = boolean | {
+    /** 是否显示秒选择。 */
     showSecond?: boolean;
+    /** 非受控模式的初始值，仅在初始化时使用。 */
     defaultValue?: string | readonly [string, string];
 };
 
+/** 日期选择的类型标识。 */
 type DatePickerType = "date" | "week" | "month" | "year" | "quarter";
+/** 日期选择的值类型。 */
 type DatePickerValue = string | readonly string[];
+/** 日期选择面板中的快捷日期选项。 */
 type DatePickerPreset = {
+    /** 展示给用户的名称，可传入文本或 React 节点。 */
     label: ReactNode;
+    /** 该项目对应的数据值，用于标识、选择或计算。 */
     value: string | (() => string);
 };
+/** 日期区间面板中的快捷范围选项。 */
 type DateRangePickerPreset = {
+    /** 展示给用户的名称，可传入文本或 React 节点。 */
     label: ReactNode;
+    /** 该项目对应的数据值，用于标识、选择或计算。 */
     value: readonly [string, string] | (() => readonly [string, string]);
 };
+/** 日期禁用判断函数收到的面板和范围上下文。 */
 type DatePickerDisabledInfo = {
+    /** 范围、渐变或转换的起始值。 */
     from?: string;
+    /** 类型标识，用于选择对应的表现形式。 */
     type: "date";
 };
+/** SharedDatePicker的属性配置。 */
 type SharedDatePickerProps = Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "size" | "value" | "defaultValue" | "onChange" | "multiple">;
+/** 日期选择的属性配置。 */
 interface DatePickerProps extends SharedDatePickerProps {
+    /** 占位提示的显示模式；floating 为浮动标签。 */
     placeholderMode?: InputPlaceholderMode;
+    /** 当前值；作为受控属性时，需要在变更回调中同步更新。 */
     value?: DatePickerValue;
+    /** 非受控模式的初始值，仅在初始化时使用。 */
     defaultValue?: DatePickerValue;
+    /**
+     * 日期粒度
+     * @defaultValue "date"
+     */
     picker?: DatePickerType;
+    /** 组件尺寸；用于调整控件高度、字号和间距。 */
     size?: ControlSize;
+    /**
+     * 当前状态，用于选择对应的状态样式。
+     * @defaultValue "default"
+     */
     status?: ControlStatus;
+    /**
+     是否允许清空当前选择或输入值。
+     * @defaultValue true
+     */
     allowClear?: boolean;
+    /**
+     是否允许在同一面板选择多个日期。
+     * @defaultValue false
+     */
     multiple?: boolean;
+    /** 选择后需要点击确定才提交 */
     needConfirm?: boolean;
+    /**
+     * 组合时间面板，可显示秒；范围选择会在宽屏并排显示起止面板，在窄屏分步选择
+     * @defaultValue false
+     */
     showTime?: DatePickerShowTime;
+    /**
+     * 是否显示返回今天的入口。
+     * @defaultValue true
+     */
     showToday?: boolean;
+    /** 是否打开；传入后由外部控制显示状态。 */
     open?: boolean;
+    /**
+     * 非受控模式下的初始打开状态。
+     * @defaultValue false
+     */
     defaultOpen?: boolean;
+    /** 显示在控件末尾的图标。 */
     suffixIcon?: ReactNode;
+    /** 允许选择的最早日期。 */
     minDate?: string;
+    /** 允许选择的最晚日期。 */
     maxDate?: string;
+    /** 预设候选值或快捷选项集合。 */
     presets?: readonly DatePickerPreset[];
+    /** 判断某个日期是否不可选的函数。 */
     disabledDate?: (value: string, info: DatePickerDisabledInfo) => boolean;
+    /** 值发生变化时调用；参数为新值及类型声明中列出的关联信息。 */
     onChange?: (value: DatePickerValue) => void;
+    /** 打开状态改变时触发，参数为新的打开状态。 */
     onOpenChange?: (open: boolean) => void;
     /** 只格式化显示文字，不改变传入和回调的标准日期值。 */
     formatValue?: (value: string) => string;
+    /** 渲染面板底部的自定义扩展区域。 */
     renderExtraFooter?: () => ReactNode;
 }
+/** 日期区间选择的属性配置。 */
 interface DateRangePickerProps extends Omit<DatePickerProps, "value" | "defaultValue" | "onChange" | "placeholder" | "multiple" | "presets"> {
+    /** 当前值；作为受控属性时，需要在变更回调中同步更新。 */
     value?: readonly [string, string];
+    /**
+     * 非受控模式的初始值，仅在初始化时使用。
+     * @defaultValue ["", ""]
+     */
     defaultValue?: readonly [string, string];
+    /**
+     * 未填写或未选择时的提示内容。
+     * @defaultValue ["开始日期", "结束日期"]
+     */
     placeholder?: readonly [string, string];
+    /**
+     * 全局分隔符，可传入图标或文字
+     * @defaultValue "→"
+     */
     separator?: ReactNode;
+    /** 预设候选值或快捷选项集合。 */
     presets?: readonly DateRangePickerPreset[];
+    /** 日期区间允许的最大天数。 */
     maxRangeDays?: number;
     /** 允许单独保留起点或终点；需要点击确定提交未完整的范围。 */
     allowEmpty?: readonly [boolean, boolean];
     /** 锁定指定端点，编辑和清空时保留其值。 */
     endpointDisabled?: readonly [boolean, boolean];
+    /** 日期区间选择过程中的暂存值变化时调用。 */
     onCalendarChange?: (value: readonly [string, string]) => void;
+    /** 值发生变化时调用；参数为新值及类型声明中列出的关联信息。 */
     onChange?: (value: readonly [string, string]) => void;
 }
 declare function DateRangePicker({ value, defaultValue, placeholder, placeholderMode, separator, presets, maxRangeDays, allowEmpty, endpointDisabled, size: sizeProp, status, allowClear, needConfirm, showTime, showToday, open, defaultOpen, suffixIcon, minDate, maxDate, disabledDate, disabled, className, onCalendarChange, onChange, onOpenChange, formatValue, renderExtraFooter, ...props }: DateRangePickerProps): react.JSX.Element;
+/** 日期选择组件。 */
 declare function DatePicker({ value, defaultValue, picker, size: sizeProp, status, allowClear, multiple, needConfirm, showTime, showToday, open, defaultOpen, suffixIcon, minDate, maxDate, presets, disabledDate, disabled, className, onChange, onOpenChange, placeholder, placeholderMode, formatValue, renderExtraFooter, ...props }: DatePickerProps): react.JSX.Element;
 declare namespace DatePicker {
+    /** 日期区间选择器。 */
     const RangePicker: typeof DateRangePicker;
 }
 
+/** 类型与日期区间组合选择的值类型。 */
 interface SelectDateRangeValue {
+    /** 选择指定项，或日期类型选择器的配置。 */
     select: SelectValue;
+    /** 是否启用范围选择，或指定选择范围。 */
     range: readonly [string, string];
 }
+/** 类型与日期区间组合选择的属性配置。 */
 interface SelectDateRangeProps extends Omit<HTMLAttributes<HTMLDivElement>, "defaultValue" | "onChange"> {
+    /** 可供用户选择的候选项列表。 */
     options: readonly SelectOption[];
+    /** 当前值；作为受控属性时，需要在变更回调中同步更新。 */
     value?: SelectDateRangeValue;
+    /** 非受控模式的初始值，仅在初始化时使用。 */
     defaultValue?: SelectDateRangeValue;
+    /**
+     * 选择器占位内容
+     * @defaultValue "请选择类型"
+     */
     selectPlaceholder?: ReactNode;
+    /** 占位提示的显示模式；floating 为浮动标签。 */
     placeholderMode?: InputPlaceholderMode;
     /** 左侧选择器宽度，数字单位为 px；右侧日期范围自动填充剩余宽度。 */
     selectWidth?: CSSProperties["width"];
+    /**
+     * 开始和结束日期占位内容
+     * @defaultValue ["开始日期", "结束日期"]
+     */
     rangePlaceholder?: readonly [string, string];
+    /**
+     * 日期类型选择器的无障碍名称。
+     * @defaultValue "选择类型"
+     */
     selectAriaLabel?: string;
+    /**
+     * 日期区间控件的无障碍名称。
+     * @defaultValue "日期范围"
+     */
     rangeAriaLabel?: string;
+    /** 预设候选值或快捷选项集合。 */
     presets?: readonly DateRangePickerPreset[];
+    /** 组件尺寸；用于调整控件高度、字号和间距。 */
     size?: ControlSize;
+    /**
+     * 当前状态，用于选择对应的状态样式。
+     * @defaultValue "default"
+     */
     status?: ControlStatus;
+    /**
+     * 是否禁用交互。
+     * @defaultValue false
+     */
     disabled?: boolean;
+    /** 值发生变化时调用；参数为新值及类型声明中列出的关联信息。 */
     onChange?: (value: SelectDateRangeValue) => void;
 }
+/** 类型与日期区间组合选择组件。 */
 declare function SelectDateRange({ options, value, defaultValue, selectPlaceholder, placeholderMode, selectWidth, rangePlaceholder, selectAriaLabel, rangeAriaLabel, presets, size: sizeProp, status, disabled, onChange, className, style, ...props }: SelectDateRangeProps): react.JSX.Element;
 
 export { DatePicker as D, SelectDateRange as S, type DatePickerDisabledInfo as a, type DatePickerPreset as b, type DatePickerProps as c, type DatePickerShowTime as d, type DatePickerType as e, type DatePickerValue as f, type DateRangePickerPreset as g, type DateRangePickerProps as h, type SelectDateRangeProps as i, type SelectDateRangeValue as j };

package/dist/select-date-range.cjs

@@ -2138,12 +2138,19 @@ function preset(type, defaults = {}) {
   });
 }
 var Modal2 = Object.assign(ModalRoot, {
+  /** 直接打开实例，返回可用于更新或关闭的操作句柄。 */
   open: openModal,
+  /** 显示普通信息提示。 */
   info: preset("info", { title: "\u63D0\u793A" }),
+  /** 显示成功提示。 */
   success: preset("success", { title: "\u64CD\u4F5C\u6210\u529F" }),
+  /** 显示警告提示。 */
   warning: preset("warning", { title: "\u8BF7\u6CE8\u610F" }),
+  /** 显示错误提示。 */
   error: preset("error", { title: "\u64CD\u4F5C\u5931\u8D25" }),
+  /** 打开确认弹框，支持异步确认；返回 false 可阻止关闭。 */
   confirm: preset("confirm", { title: "\u786E\u8BA4\u64CD\u4F5C" }),
+  /** 关闭由此 API 打开的所有弹层。 */
   destroyAll() {
     [...modalHandles].forEach((handle) => handle.destroy());
   }
@@ -2326,7 +2333,10 @@ function CheckboxGroup({
     children
   ] }) }) });
 }
-var Checkbox2 = Object.assign(CheckboxRoot, { Group: CheckboxGroup });
+var Checkbox2 = Object.assign(CheckboxRoot, {
+  /** 组合多个子项并统一管理布局或选择状态。 */
+  Group: CheckboxGroup
+});
 
 // src/components/SelectionPanel.tsx
 var import_react12 = require("react");
@@ -2546,6 +2556,8 @@ function SelectionPanel({
   const search = searchValue ?? localSearch;
   const [scrollTop, setScrollTop] = (0, import_react12.useState)(0);
   const [active, setActive] = (0, import_react12.useState)();
+  const [keyboardActive, setKeyboardActive] = (0, import_react12.useState)(false);
+  const [deselectedHover, setDeselectedHover] = (0, import_react12.useState)();
   const listRef = (0, import_react12.useRef)(null);
   const id = (0, import_react12.useId)();
   const selected = (0, import_react12.useMemo)(() => new Set(value), [value]);
@@ -2590,9 +2602,11 @@ function SelectionPanel({
     if (listRef.current) listRef.current.scrollTop = 0;
     setActive(void 0);
   }, [search, selectedOnly, count]);
-  function toggle(option) {
+  function toggle(option, keyboard = false) {
     if (disabled || loading || option.disabled || option.optionType === "divider") return;
     setActive(option.value);
+    setKeyboardActive(keyboard);
+    setDeselectedHover(!keyboard && !multiple && allowDeselect && selected.has(option.value) ? option.value : void 0);
     onChange(multiple ? selected.has(option.value) ? value.filter((item) => item !== option.value) : [...value, option.value] : allowDeselect && selected.has(option.value) ? [] : [option.value]);
   }
   function batch(operation) {
@@ -2642,6 +2656,10 @@ function SelectionPanel({
         className: "sia-selection-panel__list",
         style: { maxHeight },
         onScroll: (event) => setScrollTop(event.currentTarget.scrollTop),
+        onPointerDown: () => setKeyboardActive(false),
+        onBlur: (event) => {
+          if (!event.currentTarget.contains(event.relatedTarget)) setKeyboardActive(false);
+        },
         "aria-activedescendant": active !== void 0 ? `${id}-${typeof active}-${active}` : void 0,
         onKeyDown: (event) => {
           if (event.target instanceof HTMLInputElement) return;
@@ -2649,6 +2667,8 @@ function SelectionPanel({
           const index = enabled.findIndex((option) => option.value === active);
           if (["ArrowDown", "ArrowUp", "Home", "End"].includes(event.key)) {
             event.preventDefault();
+            setKeyboardActive(true);
+            setDeselectedHover(void 0);
             const next = event.key === "Home" ? 0 : event.key === "End" ? enabled.length - 1 : Math.max(0, Math.min(enabled.length - 1, index + (event.key === "ArrowDown" ? 1 : -1)));
             const option = enabled[next];
             setActive(option.value);
@@ -2659,7 +2679,7 @@ function SelectionPanel({
             }
           } else if ((event.key === "Enter" || event.key === " ") && index >= 0) {
             event.preventDefault();
-            toggle(enabled[index]);
+            toggle(enabled[index], true);
           }
         },
         children: loading ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { role: "status", children: "\u52A0\u8F7D\u4E2D\u2026" }) : !rows.length ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "sia-selection-panel__empty", children: "\u6682\u65E0\u5339\u914D\u9009\u9879" }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { style: { height: totalHeight, position: "relative" }, children: renderedRows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
@@ -2675,7 +2695,11 @@ function SelectionPanel({
                 tabIndex: -1,
                 "aria-selected": selected.has(option.value),
                 "aria-disabled": disabled || option.disabled || void 0,
-                className: `sia-selection-panel__option${active === option.value ? " is-active" : ""}`,
+                className: `sia-selection-panel__option${keyboardActive && active === option.value ? " is-active" : ""}`,
+                "data-deselected-hover": deselectedHover === option.value || void 0,
+                onPointerLeave: () => {
+                  if (deselectedHover === option.value) setDeselectedHover(void 0);
+                },
                 onClick: (event) => {
                   if (!event.target.closest(".sia-checkbox")) toggle(option);
                 },
@@ -3127,7 +3151,8 @@ function defaultFilterOption(query, option) {
 var Select = (0, import_react16.forwardRef)(function Select2({
   options,
   mode = "single",
-  popupMode = "dropdown",
+  popupMode: popupModeProp,
+  modalThreshold = 15,
   modalConfig,
   value,
   defaultValue,
@@ -3136,7 +3161,7 @@ var Select = (0, import_react16.forwardRef)(function Select2({
   placeholderMode,
   size: sizeProp,
   status = "default",
-  allowClear = false,
+  allowClear = true,
   loading = false,
   showSearch = false,
   showValue = false,
@@ -3169,6 +3194,9 @@ var Select = (0, import_react16.forwardRef)(function Select2({
   const searchRef = (0, import_react16.useRef)(null);
   const listRef = (0, import_react16.useRef)(null);
   const [open, setOpen] = (0, import_react16.useState)(false);
+  const automaticMode = popupModeProp ?? (options.length > modalThreshold ? "modal" : "dropdown");
+  const [openedMode, setOpenedMode] = (0, import_react16.useState)(automaticMode);
+  const popupMode = open ? openedMode : automaticMode;
   const [modalValues, setModalValues] = (0, import_react16.useState)([]);
   const [selectedOnly, setSelectedOnly] = (0, import_react16.useState)(false);
   const [query, setQuery] = (0, import_react16.useState)("");
@@ -3240,9 +3268,10 @@ var Select = (0, import_react16.forwardRef)(function Select2({
   }
   function openDropdown() {
     if (disabled || loading) return;
+    setOpenedMode(automaticMode);
     const selectedIndex = filteredOptions.findIndex((option) => selectedValueSet.has(option.value) && !option.disabled);
     setActiveIndex(selectedIndex >= 0 ? selectedIndex : firstEnabledIndex());
-    if (popupMode === "modal") {
+    if (automaticMode === "modal") {
       setModalValues([...selectedValues]);
       setSelectedOnly(false);
     }

package/dist/select-date-range.d.cts

@@ -1,4 +1,4 @@
-export { S as SelectDateRange, i as SelectDateRangeProps, j as SelectDateRangeValue } from './select-date-range-4tEYkA5O.cjs';
+export { S as SelectDateRange, i as SelectDateRangeProps, j as SelectDateRangeValue } from './select-date-range-DDmYGDD4.cjs';
 import 'react';
-import './shared-DAYZvZVu.cjs';
-import './Select-Da9CLN0X.cjs';
+import './shared-Bx4B28Wh.cjs';
+import './Select-4hGJt3RJ.cjs';

package/dist/select-date-range.d.ts

@@ -1,4 +1,4 @@
-export { S as SelectDateRange, i as SelectDateRangeProps, j as SelectDateRangeValue } from './select-date-range-D-ynrB5k.js';
+export { S as SelectDateRange, i as SelectDateRangeProps, j as SelectDateRangeValue } from './select-date-range-CGRb3-W8.js';
 import 'react';
-import './shared-DAYZvZVu.js';
-import './Select-Cz3hzQl_.js';
+import './shared-Bx4B28Wh.js';
+import './Select-BNSE67xn.js';

package/dist/select-date-range.js

@@ -1,8 +1,8 @@
 import {
   SelectDateRange
-} from "./chunk-LO3BUBWU.js";
-import "./chunk-4HB6GC24.js";
-import "./chunk-SUMXP2SF.js";
+} from "./chunk-VN6PIPP7.js";
+import "./chunk-3TRRBMXY.js";
+import "./chunk-KLI65JVD.js";
 import "./chunk-TZGUBGA4.js";
 import "./chunk-3VJ4CZDQ.js";
 export {

package/dist/{shared-DAYZvZVu.d.cts → shared-Bx4B28Wh.d.cts}

@@ -1,5 +1,8 @@
+/** 表单控件统一使用的尺寸等级。 */
 type ControlSize = "small" | "medium" | "large";
+/** Control的状态类型。 */
 type ControlStatus = "default" | "warning" | "error";
+/** InputPlaceholder的模式类型。 */
 type InputPlaceholderMode = "default" | "floating";
 
 export type { ControlSize as C, InputPlaceholderMode as I, ControlStatus as a };

package/dist/{shared-DAYZvZVu.d.ts → shared-Bx4B28Wh.d.ts}

@@ -1,5 +1,8 @@
+/** 表单控件统一使用的尺寸等级。 */
 type ControlSize = "small" | "medium" | "large";
+/** Control的状态类型。 */
 type ControlStatus = "default" | "warning" | "error";
+/** InputPlaceholder的模式类型。 */
 type InputPlaceholderMode = "default" | "floating";
 
 export type { ControlSize as C, InputPlaceholderMode as I, ControlStatus as a };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sia.soul/sia-react-ui",
-  "version": "0.1.20",
+  "version": "0.1.22",
   "description": "Sia Design components and tokens for React",
   "publishConfig": {
     "access": "public",