@sia.soul/sia-react-ui 0.1.18 → 0.1.21
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Select-4hGJt3RJ.d.cts +142 -0
- package/dist/Select-BNSE67xn.d.ts +142 -0
- package/dist/chart.d.cts +2498 -0
- package/dist/chart.d.ts +2498 -0
- package/dist/{chunk-LPRFOSRZ.js → chunk-3TRRBMXY.js} +45 -10
- package/dist/{chunk-JX53ZBIW.js → chunk-7RNS52YG.js} +38 -5
- package/dist/{chunk-SUMXP2SF.js → chunk-KLI65JVD.js} +12 -4
- package/dist/{chunk-I3EF5SF2.js → chunk-RWGSZW32.js} +1 -1
- package/dist/{chunk-UCQZZ2YC.js → chunk-VN6PIPP7.js} +2 -2
- package/dist/core-C5OnrCi4.d.cts +2288 -0
- package/dist/core-DeZknKwc.d.ts +2288 -0
- package/dist/core.cjs +85 -15
- package/dist/core.css +18 -1
- package/dist/core.d.cts +3 -3
- package/dist/core.d.ts +3 -3
- package/dist/core.js +3 -3
- package/dist/index.cjs +1812 -1571
- package/dist/index.css +18 -1
- package/dist/index.d.cts +1715 -8
- package/dist/index.d.ts +1715 -8
- package/dist/index.js +402 -238
- package/dist/markdown-editor.d.cts +41 -1
- package/dist/markdown-editor.d.ts +41 -1
- package/dist/rich-text-editor.cjs +11 -3
- package/dist/rich-text-editor.d.cts +46 -1
- package/dist/rich-text-editor.d.ts +46 -1
- package/dist/rich-text-editor.js +2 -2
- package/dist/{select-date-range-Bdb-hi9c.d.ts → select-date-range-CGRb3-W8.d.ts} +116 -2
- package/dist/{select-date-range-shDQ5uJA.d.cts → select-date-range-DDmYGDD4.d.cts} +116 -2
- package/dist/select-date-range.cjs +44 -9
- package/dist/select-date-range.d.cts +3 -3
- package/dist/select-date-range.d.ts +3 -3
- package/dist/select-date-range.js +3 -3
- package/dist/{shared-DAYZvZVu.d.cts → shared-Bx4B28Wh.d.cts} +3 -0
- package/dist/{shared-DAYZvZVu.d.ts → shared-Bx4B28Wh.d.ts} +3 -0
- package/package.json +1 -1
- package/dist/Select-CVvF4mcy.d.cts +0 -57
- package/dist/Select-Ce2Irbpt.d.ts +0 -57
- package/dist/core-AeKYVPDZ.d.cts +0 -1082
- package/dist/core-DcSXqSRs.d.ts +0 -1082
|
@@ -1,94 +1,208 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
2
|
import { InputHTMLAttributes, ReactNode, HTMLAttributes, CSSProperties } from 'react';
|
|
3
|
-
import { I as InputPlaceholderMode, C as ControlSize, a as ControlStatus } from './shared-
|
|
4
|
-
import {
|
|
3
|
+
import { I as InputPlaceholderMode, C as ControlSize, a as ControlStatus } from './shared-Bx4B28Wh.cjs';
|
|
4
|
+
import { S as SelectOption, e as SelectValue } from './Select-4hGJt3RJ.cjs';
|
|
5
5
|
|
|
6
|
+
/** 日期选择附带的时间选择配置。 */
|
|
6
7
|
type DatePickerShowTime = boolean | {
|
|
8
|
+
/** 是否显示秒选择。 */
|
|
7
9
|
showSecond?: boolean;
|
|
10
|
+
/** 非受控模式的初始值,仅在初始化时使用。 */
|
|
8
11
|
defaultValue?: string | readonly [string, string];
|
|
9
12
|
};
|
|
10
13
|
|
|
14
|
+
/** 日期选择的类型标识。 */
|
|
11
15
|
type DatePickerType = "date" | "week" | "month" | "year" | "quarter";
|
|
16
|
+
/** 日期选择的值类型。 */
|
|
12
17
|
type DatePickerValue = string | readonly string[];
|
|
18
|
+
/** 日期选择面板中的快捷日期选项。 */
|
|
13
19
|
type DatePickerPreset = {
|
|
20
|
+
/** 展示给用户的名称,可传入文本或 React 节点。 */
|
|
14
21
|
label: ReactNode;
|
|
22
|
+
/** 该项目对应的数据值,用于标识、选择或计算。 */
|
|
15
23
|
value: string | (() => string);
|
|
16
24
|
};
|
|
25
|
+
/** 日期区间面板中的快捷范围选项。 */
|
|
17
26
|
type DateRangePickerPreset = {
|
|
27
|
+
/** 展示给用户的名称,可传入文本或 React 节点。 */
|
|
18
28
|
label: ReactNode;
|
|
29
|
+
/** 该项目对应的数据值,用于标识、选择或计算。 */
|
|
19
30
|
value: readonly [string, string] | (() => readonly [string, string]);
|
|
20
31
|
};
|
|
32
|
+
/** 日期禁用判断函数收到的面板和范围上下文。 */
|
|
21
33
|
type DatePickerDisabledInfo = {
|
|
34
|
+
/** 范围、渐变或转换的起始值。 */
|
|
22
35
|
from?: string;
|
|
36
|
+
/** 类型标识,用于选择对应的表现形式。 */
|
|
23
37
|
type: "date";
|
|
24
38
|
};
|
|
39
|
+
/** SharedDatePicker的属性配置。 */
|
|
25
40
|
type SharedDatePickerProps = Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "size" | "value" | "defaultValue" | "onChange" | "multiple">;
|
|
41
|
+
/** 日期选择的属性配置。 */
|
|
26
42
|
interface DatePickerProps extends SharedDatePickerProps {
|
|
43
|
+
/** 占位提示的显示模式;floating 为浮动标签。 */
|
|
27
44
|
placeholderMode?: InputPlaceholderMode;
|
|
45
|
+
/** 当前值;作为受控属性时,需要在变更回调中同步更新。 */
|
|
28
46
|
value?: DatePickerValue;
|
|
47
|
+
/** 非受控模式的初始值,仅在初始化时使用。 */
|
|
29
48
|
defaultValue?: DatePickerValue;
|
|
49
|
+
/**
|
|
50
|
+
* 日期粒度
|
|
51
|
+
* @defaultValue "date"
|
|
52
|
+
*/
|
|
30
53
|
picker?: DatePickerType;
|
|
54
|
+
/** 组件尺寸;用于调整控件高度、字号和间距。 */
|
|
31
55
|
size?: ControlSize;
|
|
56
|
+
/**
|
|
57
|
+
* 当前状态,用于选择对应的状态样式。
|
|
58
|
+
* @defaultValue "default"
|
|
59
|
+
*/
|
|
32
60
|
status?: ControlStatus;
|
|
61
|
+
/**
|
|
62
|
+
是否允许清空当前选择或输入值。
|
|
63
|
+
* @defaultValue true
|
|
64
|
+
*/
|
|
33
65
|
allowClear?: boolean;
|
|
66
|
+
/**
|
|
67
|
+
是否允许在同一面板选择多个日期。
|
|
68
|
+
* @defaultValue false
|
|
69
|
+
*/
|
|
34
70
|
multiple?: boolean;
|
|
71
|
+
/** 选择后需要点击确定才提交 */
|
|
35
72
|
needConfirm?: boolean;
|
|
73
|
+
/**
|
|
74
|
+
* 组合时间面板,可显示秒;范围选择会在宽屏并排显示起止面板,在窄屏分步选择
|
|
75
|
+
* @defaultValue false
|
|
76
|
+
*/
|
|
36
77
|
showTime?: DatePickerShowTime;
|
|
78
|
+
/**
|
|
79
|
+
* 是否显示返回今天的入口。
|
|
80
|
+
* @defaultValue true
|
|
81
|
+
*/
|
|
37
82
|
showToday?: boolean;
|
|
83
|
+
/** 是否打开;传入后由外部控制显示状态。 */
|
|
38
84
|
open?: boolean;
|
|
85
|
+
/**
|
|
86
|
+
* 非受控模式下的初始打开状态。
|
|
87
|
+
* @defaultValue false
|
|
88
|
+
*/
|
|
39
89
|
defaultOpen?: boolean;
|
|
90
|
+
/** 显示在控件末尾的图标。 */
|
|
40
91
|
suffixIcon?: ReactNode;
|
|
92
|
+
/** 允许选择的最早日期。 */
|
|
41
93
|
minDate?: string;
|
|
94
|
+
/** 允许选择的最晚日期。 */
|
|
42
95
|
maxDate?: string;
|
|
96
|
+
/** 预设候选值或快捷选项集合。 */
|
|
43
97
|
presets?: readonly DatePickerPreset[];
|
|
98
|
+
/** 判断某个日期是否不可选的函数。 */
|
|
44
99
|
disabledDate?: (value: string, info: DatePickerDisabledInfo) => boolean;
|
|
100
|
+
/** 值发生变化时调用;参数为新值及类型声明中列出的关联信息。 */
|
|
45
101
|
onChange?: (value: DatePickerValue) => void;
|
|
102
|
+
/** 打开状态改变时触发,参数为新的打开状态。 */
|
|
46
103
|
onOpenChange?: (open: boolean) => void;
|
|
47
104
|
/** 只格式化显示文字,不改变传入和回调的标准日期值。 */
|
|
48
105
|
formatValue?: (value: string) => string;
|
|
106
|
+
/** 渲染面板底部的自定义扩展区域。 */
|
|
49
107
|
renderExtraFooter?: () => ReactNode;
|
|
50
108
|
}
|
|
109
|
+
/** 日期区间选择的属性配置。 */
|
|
51
110
|
interface DateRangePickerProps extends Omit<DatePickerProps, "value" | "defaultValue" | "onChange" | "placeholder" | "multiple" | "presets"> {
|
|
111
|
+
/** 当前值;作为受控属性时,需要在变更回调中同步更新。 */
|
|
52
112
|
value?: readonly [string, string];
|
|
113
|
+
/**
|
|
114
|
+
* 非受控模式的初始值,仅在初始化时使用。
|
|
115
|
+
* @defaultValue ["", ""]
|
|
116
|
+
*/
|
|
53
117
|
defaultValue?: readonly [string, string];
|
|
118
|
+
/**
|
|
119
|
+
* 未填写或未选择时的提示内容。
|
|
120
|
+
* @defaultValue ["开始日期", "结束日期"]
|
|
121
|
+
*/
|
|
54
122
|
placeholder?: readonly [string, string];
|
|
123
|
+
/**
|
|
124
|
+
* 全局分隔符,可传入图标或文字
|
|
125
|
+
* @defaultValue "→"
|
|
126
|
+
*/
|
|
55
127
|
separator?: ReactNode;
|
|
128
|
+
/** 预设候选值或快捷选项集合。 */
|
|
56
129
|
presets?: readonly DateRangePickerPreset[];
|
|
130
|
+
/** 日期区间允许的最大天数。 */
|
|
57
131
|
maxRangeDays?: number;
|
|
58
132
|
/** 允许单独保留起点或终点;需要点击确定提交未完整的范围。 */
|
|
59
133
|
allowEmpty?: readonly [boolean, boolean];
|
|
60
134
|
/** 锁定指定端点,编辑和清空时保留其值。 */
|
|
61
135
|
endpointDisabled?: readonly [boolean, boolean];
|
|
136
|
+
/** 日期区间选择过程中的暂存值变化时调用。 */
|
|
62
137
|
onCalendarChange?: (value: readonly [string, string]) => void;
|
|
138
|
+
/** 值发生变化时调用;参数为新值及类型声明中列出的关联信息。 */
|
|
63
139
|
onChange?: (value: readonly [string, string]) => void;
|
|
64
140
|
}
|
|
65
141
|
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;
|
|
142
|
+
/** 日期选择组件。 */
|
|
66
143
|
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;
|
|
67
144
|
declare namespace DatePicker {
|
|
145
|
+
/** 日期区间选择器。 */
|
|
68
146
|
const RangePicker: typeof DateRangePicker;
|
|
69
147
|
}
|
|
70
148
|
|
|
149
|
+
/** 类型与日期区间组合选择的值类型。 */
|
|
71
150
|
interface SelectDateRangeValue {
|
|
151
|
+
/** 选择指定项,或日期类型选择器的配置。 */
|
|
72
152
|
select: SelectValue;
|
|
153
|
+
/** 是否启用范围选择,或指定选择范围。 */
|
|
73
154
|
range: readonly [string, string];
|
|
74
155
|
}
|
|
156
|
+
/** 类型与日期区间组合选择的属性配置。 */
|
|
75
157
|
interface SelectDateRangeProps extends Omit<HTMLAttributes<HTMLDivElement>, "defaultValue" | "onChange"> {
|
|
158
|
+
/** 可供用户选择的候选项列表。 */
|
|
76
159
|
options: readonly SelectOption[];
|
|
160
|
+
/** 当前值;作为受控属性时,需要在变更回调中同步更新。 */
|
|
77
161
|
value?: SelectDateRangeValue;
|
|
162
|
+
/** 非受控模式的初始值,仅在初始化时使用。 */
|
|
78
163
|
defaultValue?: SelectDateRangeValue;
|
|
164
|
+
/**
|
|
165
|
+
* 选择器占位内容
|
|
166
|
+
* @defaultValue "请选择类型"
|
|
167
|
+
*/
|
|
79
168
|
selectPlaceholder?: ReactNode;
|
|
169
|
+
/** 占位提示的显示模式;floating 为浮动标签。 */
|
|
80
170
|
placeholderMode?: InputPlaceholderMode;
|
|
81
171
|
/** 左侧选择器宽度,数字单位为 px;右侧日期范围自动填充剩余宽度。 */
|
|
82
172
|
selectWidth?: CSSProperties["width"];
|
|
173
|
+
/**
|
|
174
|
+
* 开始和结束日期占位内容
|
|
175
|
+
* @defaultValue ["开始日期", "结束日期"]
|
|
176
|
+
*/
|
|
83
177
|
rangePlaceholder?: readonly [string, string];
|
|
178
|
+
/**
|
|
179
|
+
* 日期类型选择器的无障碍名称。
|
|
180
|
+
* @defaultValue "选择类型"
|
|
181
|
+
*/
|
|
84
182
|
selectAriaLabel?: string;
|
|
183
|
+
/**
|
|
184
|
+
* 日期区间控件的无障碍名称。
|
|
185
|
+
* @defaultValue "日期范围"
|
|
186
|
+
*/
|
|
85
187
|
rangeAriaLabel?: string;
|
|
188
|
+
/** 预设候选值或快捷选项集合。 */
|
|
86
189
|
presets?: readonly DateRangePickerPreset[];
|
|
190
|
+
/** 组件尺寸;用于调整控件高度、字号和间距。 */
|
|
87
191
|
size?: ControlSize;
|
|
192
|
+
/**
|
|
193
|
+
* 当前状态,用于选择对应的状态样式。
|
|
194
|
+
* @defaultValue "default"
|
|
195
|
+
*/
|
|
88
196
|
status?: ControlStatus;
|
|
197
|
+
/**
|
|
198
|
+
* 是否禁用交互。
|
|
199
|
+
* @defaultValue false
|
|
200
|
+
*/
|
|
89
201
|
disabled?: boolean;
|
|
202
|
+
/** 值发生变化时调用;参数为新值及类型声明中列出的关联信息。 */
|
|
90
203
|
onChange?: (value: SelectDateRangeValue) => void;
|
|
91
204
|
}
|
|
205
|
+
/** 类型与日期区间组合选择组件。 */
|
|
92
206
|
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;
|
|
93
207
|
|
|
94
208
|
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 };
|
|
@@ -1947,6 +1947,7 @@ var ModalRoot = (0, import_react8.forwardRef)(function Modal({
|
|
|
1947
1947
|
title,
|
|
1948
1948
|
children,
|
|
1949
1949
|
footer,
|
|
1950
|
+
footerExtra,
|
|
1950
1951
|
type = "default",
|
|
1951
1952
|
okText = "\u786E\u5B9A",
|
|
1952
1953
|
cancelText = "\u53D6\u6D88",
|
|
@@ -2071,7 +2072,10 @@ var ModalRoot = (0, import_react8.forwardRef)(function Modal({
|
|
|
2071
2072
|
closable ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { type: "button", className: "sia-modal__close", "aria-label": "\u5173\u95ED\u5BF9\u8BDD\u6846", onClick: requestClose, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Icon, { name: "close", size: 17 }) }) : null
|
|
2072
2073
|
] }),
|
|
2073
2074
|
children !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "sia-modal__body", children }) : null,
|
|
2074
|
-
footer !== null ? /* @__PURE__ */ (0, import_jsx_runtime8.
|
|
2075
|
+
footer !== null ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "sia-modal__footer", children: [
|
|
2076
|
+
footer === void 0 && footerExtra != null ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: { marginRight: "auto" }, children: footerExtra }) : null,
|
|
2077
|
+
footer ?? defaultFooter
|
|
2078
|
+
] }) : null
|
|
2075
2079
|
]
|
|
2076
2080
|
}
|
|
2077
2081
|
)
|
|
@@ -2134,12 +2138,19 @@ function preset(type, defaults = {}) {
|
|
|
2134
2138
|
});
|
|
2135
2139
|
}
|
|
2136
2140
|
var Modal2 = Object.assign(ModalRoot, {
|
|
2141
|
+
/** 直接打开实例,返回可用于更新或关闭的操作句柄。 */
|
|
2137
2142
|
open: openModal,
|
|
2143
|
+
/** 显示普通信息提示。 */
|
|
2138
2144
|
info: preset("info", { title: "\u63D0\u793A" }),
|
|
2145
|
+
/** 显示成功提示。 */
|
|
2139
2146
|
success: preset("success", { title: "\u64CD\u4F5C\u6210\u529F" }),
|
|
2147
|
+
/** 显示警告提示。 */
|
|
2140
2148
|
warning: preset("warning", { title: "\u8BF7\u6CE8\u610F" }),
|
|
2149
|
+
/** 显示错误提示。 */
|
|
2141
2150
|
error: preset("error", { title: "\u64CD\u4F5C\u5931\u8D25" }),
|
|
2151
|
+
/** 打开确认弹框,支持异步确认;返回 false 可阻止关闭。 */
|
|
2142
2152
|
confirm: preset("confirm", { title: "\u786E\u8BA4\u64CD\u4F5C" }),
|
|
2153
|
+
/** 关闭由此 API 打开的所有弹层。 */
|
|
2143
2154
|
destroyAll() {
|
|
2144
2155
|
[...modalHandles].forEach((handle) => handle.destroy());
|
|
2145
2156
|
}
|
|
@@ -2322,7 +2333,10 @@ function CheckboxGroup({
|
|
|
2322
2333
|
children
|
|
2323
2334
|
] }) }) });
|
|
2324
2335
|
}
|
|
2325
|
-
var Checkbox2 = Object.assign(CheckboxRoot, {
|
|
2336
|
+
var Checkbox2 = Object.assign(CheckboxRoot, {
|
|
2337
|
+
/** 组合多个子项并统一管理布局或选择状态。 */
|
|
2338
|
+
Group: CheckboxGroup
|
|
2339
|
+
});
|
|
2326
2340
|
|
|
2327
2341
|
// src/components/SelectionPanel.tsx
|
|
2328
2342
|
var import_react12 = require("react");
|
|
@@ -2523,6 +2537,7 @@ function SelectionPanel({
|
|
|
2523
2537
|
value,
|
|
2524
2538
|
onChange,
|
|
2525
2539
|
multiple = false,
|
|
2540
|
+
allowDeselect = false,
|
|
2526
2541
|
disabled = false,
|
|
2527
2542
|
loading = false,
|
|
2528
2543
|
showSearch = true,
|
|
@@ -2541,6 +2556,8 @@ function SelectionPanel({
|
|
|
2541
2556
|
const search = searchValue ?? localSearch;
|
|
2542
2557
|
const [scrollTop, setScrollTop] = (0, import_react12.useState)(0);
|
|
2543
2558
|
const [active, setActive] = (0, import_react12.useState)();
|
|
2559
|
+
const [keyboardActive, setKeyboardActive] = (0, import_react12.useState)(false);
|
|
2560
|
+
const [deselectedHover, setDeselectedHover] = (0, import_react12.useState)();
|
|
2544
2561
|
const listRef = (0, import_react12.useRef)(null);
|
|
2545
2562
|
const id = (0, import_react12.useId)();
|
|
2546
2563
|
const selected = (0, import_react12.useMemo)(() => new Set(value), [value]);
|
|
@@ -2585,10 +2602,12 @@ function SelectionPanel({
|
|
|
2585
2602
|
if (listRef.current) listRef.current.scrollTop = 0;
|
|
2586
2603
|
setActive(void 0);
|
|
2587
2604
|
}, [search, selectedOnly, count]);
|
|
2588
|
-
function toggle(option) {
|
|
2605
|
+
function toggle(option, keyboard = false) {
|
|
2589
2606
|
if (disabled || loading || option.disabled || option.optionType === "divider") return;
|
|
2590
2607
|
setActive(option.value);
|
|
2591
|
-
|
|
2608
|
+
setKeyboardActive(keyboard);
|
|
2609
|
+
setDeselectedHover(!keyboard && !multiple && allowDeselect && selected.has(option.value) ? option.value : void 0);
|
|
2610
|
+
onChange(multiple ? selected.has(option.value) ? value.filter((item) => item !== option.value) : [...value, option.value] : allowDeselect && selected.has(option.value) ? [] : [option.value]);
|
|
2592
2611
|
}
|
|
2593
2612
|
function batch(operation) {
|
|
2594
2613
|
if (disabled || loading) return;
|
|
@@ -2637,6 +2656,10 @@ function SelectionPanel({
|
|
|
2637
2656
|
className: "sia-selection-panel__list",
|
|
2638
2657
|
style: { maxHeight },
|
|
2639
2658
|
onScroll: (event) => setScrollTop(event.currentTarget.scrollTop),
|
|
2659
|
+
onPointerDown: () => setKeyboardActive(false),
|
|
2660
|
+
onBlur: (event) => {
|
|
2661
|
+
if (!event.currentTarget.contains(event.relatedTarget)) setKeyboardActive(false);
|
|
2662
|
+
},
|
|
2640
2663
|
"aria-activedescendant": active !== void 0 ? `${id}-${typeof active}-${active}` : void 0,
|
|
2641
2664
|
onKeyDown: (event) => {
|
|
2642
2665
|
if (event.target instanceof HTMLInputElement) return;
|
|
@@ -2644,6 +2667,8 @@ function SelectionPanel({
|
|
|
2644
2667
|
const index = enabled.findIndex((option) => option.value === active);
|
|
2645
2668
|
if (["ArrowDown", "ArrowUp", "Home", "End"].includes(event.key)) {
|
|
2646
2669
|
event.preventDefault();
|
|
2670
|
+
setKeyboardActive(true);
|
|
2671
|
+
setDeselectedHover(void 0);
|
|
2647
2672
|
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)));
|
|
2648
2673
|
const option = enabled[next];
|
|
2649
2674
|
setActive(option.value);
|
|
@@ -2654,7 +2679,7 @@ function SelectionPanel({
|
|
|
2654
2679
|
}
|
|
2655
2680
|
} else if ((event.key === "Enter" || event.key === " ") && index >= 0) {
|
|
2656
2681
|
event.preventDefault();
|
|
2657
|
-
toggle(enabled[index]);
|
|
2682
|
+
toggle(enabled[index], true);
|
|
2658
2683
|
}
|
|
2659
2684
|
},
|
|
2660
2685
|
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)(
|
|
@@ -2670,7 +2695,11 @@ function SelectionPanel({
|
|
|
2670
2695
|
tabIndex: -1,
|
|
2671
2696
|
"aria-selected": selected.has(option.value),
|
|
2672
2697
|
"aria-disabled": disabled || option.disabled || void 0,
|
|
2673
|
-
className: `sia-selection-panel__option${active === option.value ? " is-active" : ""}`,
|
|
2698
|
+
className: `sia-selection-panel__option${keyboardActive && active === option.value ? " is-active" : ""}`,
|
|
2699
|
+
"data-deselected-hover": deselectedHover === option.value || void 0,
|
|
2700
|
+
onPointerLeave: () => {
|
|
2701
|
+
if (deselectedHover === option.value) setDeselectedHover(void 0);
|
|
2702
|
+
},
|
|
2674
2703
|
onClick: (event) => {
|
|
2675
2704
|
if (!event.target.closest(".sia-checkbox")) toggle(option);
|
|
2676
2705
|
},
|
|
@@ -3122,7 +3151,8 @@ function defaultFilterOption(query, option) {
|
|
|
3122
3151
|
var Select = (0, import_react16.forwardRef)(function Select2({
|
|
3123
3152
|
options,
|
|
3124
3153
|
mode = "single",
|
|
3125
|
-
popupMode
|
|
3154
|
+
popupMode: popupModeProp,
|
|
3155
|
+
modalThreshold = 15,
|
|
3126
3156
|
modalConfig,
|
|
3127
3157
|
value,
|
|
3128
3158
|
defaultValue,
|
|
@@ -3131,7 +3161,7 @@ var Select = (0, import_react16.forwardRef)(function Select2({
|
|
|
3131
3161
|
placeholderMode,
|
|
3132
3162
|
size: sizeProp,
|
|
3133
3163
|
status = "default",
|
|
3134
|
-
allowClear =
|
|
3164
|
+
allowClear = true,
|
|
3135
3165
|
loading = false,
|
|
3136
3166
|
showSearch = false,
|
|
3137
3167
|
showValue = false,
|
|
@@ -3164,6 +3194,9 @@ var Select = (0, import_react16.forwardRef)(function Select2({
|
|
|
3164
3194
|
const searchRef = (0, import_react16.useRef)(null);
|
|
3165
3195
|
const listRef = (0, import_react16.useRef)(null);
|
|
3166
3196
|
const [open, setOpen] = (0, import_react16.useState)(false);
|
|
3197
|
+
const automaticMode = popupModeProp ?? (options.length > modalThreshold ? "modal" : "dropdown");
|
|
3198
|
+
const [openedMode, setOpenedMode] = (0, import_react16.useState)(automaticMode);
|
|
3199
|
+
const popupMode = open ? openedMode : automaticMode;
|
|
3167
3200
|
const [modalValues, setModalValues] = (0, import_react16.useState)([]);
|
|
3168
3201
|
const [selectedOnly, setSelectedOnly] = (0, import_react16.useState)(false);
|
|
3169
3202
|
const [query, setQuery] = (0, import_react16.useState)("");
|
|
@@ -3235,9 +3268,10 @@ var Select = (0, import_react16.forwardRef)(function Select2({
|
|
|
3235
3268
|
}
|
|
3236
3269
|
function openDropdown() {
|
|
3237
3270
|
if (disabled || loading) return;
|
|
3271
|
+
setOpenedMode(automaticMode);
|
|
3238
3272
|
const selectedIndex = filteredOptions.findIndex((option) => selectedValueSet.has(option.value) && !option.disabled);
|
|
3239
3273
|
setActiveIndex(selectedIndex >= 0 ? selectedIndex : firstEnabledIndex());
|
|
3240
|
-
if (
|
|
3274
|
+
if (automaticMode === "modal") {
|
|
3241
3275
|
setModalValues([...selectedValues]);
|
|
3242
3276
|
setSelectedOnly(false);
|
|
3243
3277
|
}
|
|
@@ -3524,6 +3558,7 @@ var Select = (0, import_react16.forwardRef)(function Select2({
|
|
|
3524
3558
|
value: modalValues,
|
|
3525
3559
|
onChange: setModalValues,
|
|
3526
3560
|
multiple,
|
|
3561
|
+
allowDeselect: allowClear,
|
|
3527
3562
|
selectedOnly,
|
|
3528
3563
|
showValue,
|
|
3529
3564
|
showSearch: false,
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export { S as SelectDateRange, i as SelectDateRangeProps, j as SelectDateRangeValue } from './select-date-range-
|
|
1
|
+
export { S as SelectDateRange, i as SelectDateRangeProps, j as SelectDateRangeValue } from './select-date-range-DDmYGDD4.cjs';
|
|
2
2
|
import 'react';
|
|
3
|
-
import './shared-
|
|
4
|
-
import './Select-
|
|
3
|
+
import './shared-Bx4B28Wh.cjs';
|
|
4
|
+
import './Select-4hGJt3RJ.cjs';
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export { S as SelectDateRange, i as SelectDateRangeProps, j as SelectDateRangeValue } from './select-date-range-
|
|
1
|
+
export { S as SelectDateRange, i as SelectDateRangeProps, j as SelectDateRangeValue } from './select-date-range-CGRb3-W8.js';
|
|
2
2
|
import 'react';
|
|
3
|
-
import './shared-
|
|
4
|
-
import './Select-
|
|
3
|
+
import './shared-Bx4B28Wh.js';
|
|
4
|
+
import './Select-BNSE67xn.js';
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import {
|
|
2
2
|
SelectDateRange
|
|
3
|
-
} from "./chunk-
|
|
4
|
-
import "./chunk-
|
|
5
|
-
import "./chunk-
|
|
3
|
+
} from "./chunk-VN6PIPP7.js";
|
|
4
|
+
import "./chunk-3TRRBMXY.js";
|
|
5
|
+
import "./chunk-KLI65JVD.js";
|
|
6
6
|
import "./chunk-TZGUBGA4.js";
|
|
7
7
|
import "./chunk-3VJ4CZDQ.js";
|
|
8
8
|
export {
|
|
@@ -1,5 +1,8 @@
|
|
|
1
|
+
/** 表单控件统一使用的尺寸等级。 */
|
|
1
2
|
type ControlSize = "small" | "medium" | "large";
|
|
3
|
+
/** Control的状态类型。 */
|
|
2
4
|
type ControlStatus = "default" | "warning" | "error";
|
|
5
|
+
/** InputPlaceholder的模式类型。 */
|
|
3
6
|
type InputPlaceholderMode = "default" | "floating";
|
|
4
7
|
|
|
5
8
|
export type { ControlSize as C, InputPlaceholderMode as I, ControlStatus as a };
|
|
@@ -1,5 +1,8 @@
|
|
|
1
|
+
/** 表单控件统一使用的尺寸等级。 */
|
|
1
2
|
type ControlSize = "small" | "medium" | "large";
|
|
3
|
+
/** Control的状态类型。 */
|
|
2
4
|
type ControlStatus = "default" | "warning" | "error";
|
|
5
|
+
/** InputPlaceholder的模式类型。 */
|
|
3
6
|
type InputPlaceholderMode = "default" | "floating";
|
|
4
7
|
|
|
5
8
|
export type { ControlSize as C, InputPlaceholderMode as I, ControlStatus as a };
|
package/package.json
CHANGED
|
@@ -1,57 +0,0 @@
|
|
|
1
|
-
import * as react from 'react';
|
|
2
|
-
import { ButtonHTMLAttributes, ReactNode } from 'react';
|
|
3
|
-
import { I as InputPlaceholderMode, C as ControlSize, a as ControlStatus } from './shared-DAYZvZVu.cjs';
|
|
4
|
-
|
|
5
|
-
type SelectValue = string | number;
|
|
6
|
-
type SelectMode = "single" | "multiple";
|
|
7
|
-
type SelectChangeValue = SelectValue | SelectValue[] | null;
|
|
8
|
-
type SelectOption = {
|
|
9
|
-
label: ReactNode;
|
|
10
|
-
value: SelectValue;
|
|
11
|
-
disabled?: boolean;
|
|
12
|
-
/** 弹框模式中的分组标题。 */
|
|
13
|
-
group?: string;
|
|
14
|
-
};
|
|
15
|
-
interface SelectProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "defaultValue" | "onChange" | "value"> {
|
|
16
|
-
options: readonly SelectOption[];
|
|
17
|
-
mode?: SelectMode;
|
|
18
|
-
popupMode?: "dropdown" | "modal";
|
|
19
|
-
modalConfig?: {
|
|
20
|
-
title?: ReactNode;
|
|
21
|
-
width?: number | string;
|
|
22
|
-
columns?: number;
|
|
23
|
-
maxHeight?: number;
|
|
24
|
-
footerExtra?: ReactNode;
|
|
25
|
-
};
|
|
26
|
-
value?: SelectChangeValue;
|
|
27
|
-
defaultValue?: SelectChangeValue;
|
|
28
|
-
onChange?: (value: SelectChangeValue, option: SelectOption | SelectOption[] | null) => void;
|
|
29
|
-
placeholder?: ReactNode;
|
|
30
|
-
placeholderMode?: InputPlaceholderMode;
|
|
31
|
-
size?: ControlSize;
|
|
32
|
-
status?: ControlStatus;
|
|
33
|
-
allowClear?: boolean;
|
|
34
|
-
loading?: boolean;
|
|
35
|
-
showSearch?: boolean;
|
|
36
|
-
/** 在选项名称下方显示对应的 value。 */
|
|
37
|
-
showValue?: boolean;
|
|
38
|
-
/** 允许将搜索框内容作为自定义选项提交。 */
|
|
39
|
-
allowInput?: boolean;
|
|
40
|
-
inputMaxLength?: number;
|
|
41
|
-
searchPlaceholder?: string;
|
|
42
|
-
onSearch?: (query: string) => void;
|
|
43
|
-
filterOption?: (query: string, option: SelectOption) => boolean;
|
|
44
|
-
showSelectAll?: boolean;
|
|
45
|
-
/** 是否显示下拉面板底部的条数统计与操作行;默认单选隐藏、多选显示,不影响弹框模式。 */
|
|
46
|
-
showActions?: boolean;
|
|
47
|
-
/** 最多显示的标签数;空间不足时会继续折叠,并为 +N 预留宽度。 */
|
|
48
|
-
maxTagCount?: number;
|
|
49
|
-
virtual?: boolean;
|
|
50
|
-
virtualThreshold?: number;
|
|
51
|
-
listHeight?: number;
|
|
52
|
-
optionHeight?: number;
|
|
53
|
-
notFoundContent?: ReactNode;
|
|
54
|
-
}
|
|
55
|
-
declare const Select: react.ForwardRefExoticComponent<SelectProps & react.RefAttributes<HTMLButtonElement>>;
|
|
56
|
-
|
|
57
|
-
export { Select as S, type SelectChangeValue as a, type SelectMode as b, type SelectOption as c, type SelectProps as d, type SelectValue as e };
|
|
@@ -1,57 +0,0 @@
|
|
|
1
|
-
import * as react from 'react';
|
|
2
|
-
import { ButtonHTMLAttributes, ReactNode } from 'react';
|
|
3
|
-
import { I as InputPlaceholderMode, C as ControlSize, a as ControlStatus } from './shared-DAYZvZVu.js';
|
|
4
|
-
|
|
5
|
-
type SelectValue = string | number;
|
|
6
|
-
type SelectMode = "single" | "multiple";
|
|
7
|
-
type SelectChangeValue = SelectValue | SelectValue[] | null;
|
|
8
|
-
type SelectOption = {
|
|
9
|
-
label: ReactNode;
|
|
10
|
-
value: SelectValue;
|
|
11
|
-
disabled?: boolean;
|
|
12
|
-
/** 弹框模式中的分组标题。 */
|
|
13
|
-
group?: string;
|
|
14
|
-
};
|
|
15
|
-
interface SelectProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "defaultValue" | "onChange" | "value"> {
|
|
16
|
-
options: readonly SelectOption[];
|
|
17
|
-
mode?: SelectMode;
|
|
18
|
-
popupMode?: "dropdown" | "modal";
|
|
19
|
-
modalConfig?: {
|
|
20
|
-
title?: ReactNode;
|
|
21
|
-
width?: number | string;
|
|
22
|
-
columns?: number;
|
|
23
|
-
maxHeight?: number;
|
|
24
|
-
footerExtra?: ReactNode;
|
|
25
|
-
};
|
|
26
|
-
value?: SelectChangeValue;
|
|
27
|
-
defaultValue?: SelectChangeValue;
|
|
28
|
-
onChange?: (value: SelectChangeValue, option: SelectOption | SelectOption[] | null) => void;
|
|
29
|
-
placeholder?: ReactNode;
|
|
30
|
-
placeholderMode?: InputPlaceholderMode;
|
|
31
|
-
size?: ControlSize;
|
|
32
|
-
status?: ControlStatus;
|
|
33
|
-
allowClear?: boolean;
|
|
34
|
-
loading?: boolean;
|
|
35
|
-
showSearch?: boolean;
|
|
36
|
-
/** 在选项名称下方显示对应的 value。 */
|
|
37
|
-
showValue?: boolean;
|
|
38
|
-
/** 允许将搜索框内容作为自定义选项提交。 */
|
|
39
|
-
allowInput?: boolean;
|
|
40
|
-
inputMaxLength?: number;
|
|
41
|
-
searchPlaceholder?: string;
|
|
42
|
-
onSearch?: (query: string) => void;
|
|
43
|
-
filterOption?: (query: string, option: SelectOption) => boolean;
|
|
44
|
-
showSelectAll?: boolean;
|
|
45
|
-
/** 是否显示下拉面板底部的条数统计与操作行;默认单选隐藏、多选显示,不影响弹框模式。 */
|
|
46
|
-
showActions?: boolean;
|
|
47
|
-
/** 最多显示的标签数;空间不足时会继续折叠,并为 +N 预留宽度。 */
|
|
48
|
-
maxTagCount?: number;
|
|
49
|
-
virtual?: boolean;
|
|
50
|
-
virtualThreshold?: number;
|
|
51
|
-
listHeight?: number;
|
|
52
|
-
optionHeight?: number;
|
|
53
|
-
notFoundContent?: ReactNode;
|
|
54
|
-
}
|
|
55
|
-
declare const Select: react.ForwardRefExoticComponent<SelectProps & react.RefAttributes<HTMLButtonElement>>;
|
|
56
|
-
|
|
57
|
-
export { Select as S, type SelectChangeValue as a, type SelectMode as b, type SelectOption as c, type SelectProps as d, type SelectValue as e };
|