@crab-dev/rc-select 0.0.3 → 0.1.0
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/CHANGELOG.md +59 -0
- package/README.md +9 -14
- package/cjs/_wake/src/hooks/useKeyboardNavigation.cjs +40 -0
- package/cjs/_wake/src/select.cjs +155 -0
- package/cjs/_wake/src/selectInput.cjs +205 -0
- package/cjs/_wake/src/selectInput.styles.cjs +69 -0
- package/cjs/_wake/src/selectOverlay.cjs +98 -0
- package/cjs/_wake/src/selectOverlay.styles.cjs +68 -0
- package/cjs/_wake/src/token.cjs +11 -0
- package/cjs/index.cjs +11 -1
- package/css/index.css +5 -42
- package/declarations/_wake/src/select.d.ts +44 -0
- package/declarations/_wake/src/token.d.ts +3 -0
- package/declarations/_wake/src/types.d.ts +79 -0
- package/declarations/index.d.ts +4 -79
- package/esm/_wake/src/hooks/useKeyboardNavigation.mjs +36 -0
- package/esm/_wake/src/select.mjs +151 -0
- package/esm/_wake/src/selectInput.mjs +201 -0
- package/esm/_wake/src/selectInput.styles.mjs +20 -0
- package/esm/_wake/src/selectOverlay.mjs +94 -0
- package/esm/_wake/src/selectOverlay.styles.mjs +19 -0
- package/esm/_wake/src/token.mjs +4 -0
- package/esm/index.mjs +4 -1
- package/package.json +47 -46
|
@@ -0,0 +1,98 @@
|
|
|
1
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
2
|
+
const __wake_namespace_0 = require("react/jsx-runtime");
|
|
3
|
+
const __wake_namespace_1 = require("@crab-dev/rc-checkbox");
|
|
4
|
+
const __wake_namespace_2 = require("@crab-dev/rc-config-provider");
|
|
5
|
+
const __wake_namespace_3 = require("@crab-dev/rc-spin");
|
|
6
|
+
const __wake_namespace_4 = require("@crab-dev/rc-virtual");
|
|
7
|
+
const __wake_namespace_5 = require("@crab-dev/rc-hooks");
|
|
8
|
+
const __wake_namespace_6 = require("@crab-dev/css");
|
|
9
|
+
const __wake_namespace_7 = require("@crab-dev/rc-dropdown-container");
|
|
10
|
+
const __wake_namespace_8 = require("react");
|
|
11
|
+
;
|
|
12
|
+
const __wake_namespace_9 = require("./selectOverlay.styles.cjs");
|
|
13
|
+
const hasGroups = (options) => options.some((opt) => opt.isGroupLabel);
|
|
14
|
+
const DROPDOWN_PADDING = 4;
|
|
15
|
+
const MAX_VIEWPORT_HEIGHT = 256;
|
|
16
|
+
;
|
|
17
|
+
const SelectOverlay = ({ size, multiple, disabled, loading, filteredOptions, selectedValues, triggerWidth, highlightIndex, listboxId, notFoundContent, popupClassName, optionRender, dropdownRender, onOptionSelect, onHighlightChange }) => {
|
|
18
|
+
const { dispatch } = (0, __wake_namespace_7["useDropdownContext"])();
|
|
19
|
+
const coarsePointer = (0, __wake_namespace_5["useMediaQuery"])("(pointer: coarse)");
|
|
20
|
+
const overlayRef = (0, __wake_namespace_8["useRef"])(null);
|
|
21
|
+
const [measuredRowHeight, setMeasuredRowHeight] = (0, __wake_namespace_8["useState"])(0);
|
|
22
|
+
const [measuredContentWidth, setMeasuredContentWidth] = (0, __wake_namespace_8["useState"])(0);
|
|
23
|
+
const { density } = (0, __wake_namespace_2["useConfig"])();
|
|
24
|
+
const { messages } = (0, __wake_namespace_2["useLocale"])();
|
|
25
|
+
const rowHeight = Math.max(coarsePointer ? 48 : __wake_namespace_2["componentDensityMetrics"][density].item, measuredRowHeight);
|
|
26
|
+
(0, __wake_namespace_8["useLayoutEffect"])(() => {
|
|
27
|
+
const overlay = overlayRef.current;
|
|
28
|
+
const option = overlay?.querySelector("[data-select-option-measure]");
|
|
29
|
+
if (!overlay || !option) return;
|
|
30
|
+
const measure = () => {
|
|
31
|
+
const height = option.getBoundingClientRect().height;
|
|
32
|
+
if (height > 0) {
|
|
33
|
+
overlayRef.current?.style.setProperty("--select-option-measured-height", `${height}px`);
|
|
34
|
+
setMeasuredRowHeight(height);
|
|
35
|
+
}
|
|
36
|
+
const style = overlay.ownerDocument.defaultView?.getComputedStyle(overlay);
|
|
37
|
+
const paddingStart = Number.parseFloat(style?.paddingLeft ?? "") || 0;
|
|
38
|
+
const paddingEnd = Number.parseFloat(style?.paddingRight ?? "") || 0;
|
|
39
|
+
const width = overlay.clientWidth - paddingStart - paddingEnd;
|
|
40
|
+
if (width > 0) setMeasuredContentWidth(width);
|
|
41
|
+
};
|
|
42
|
+
measure();
|
|
43
|
+
if (typeof ResizeObserver === "undefined") return;
|
|
44
|
+
const observer = new ResizeObserver(measure);
|
|
45
|
+
observer.observe(option);
|
|
46
|
+
observer.observe(overlay);
|
|
47
|
+
return () => observer.disconnect();
|
|
48
|
+
}, [coarsePointer, density, filteredOptions.length, loading, size]);
|
|
49
|
+
const gridRef = (0, __wake_namespace_8["useRef"])(null);
|
|
50
|
+
(0, __wake_namespace_8["useEffect"])(() => {
|
|
51
|
+
if (highlightIndex < 0) {
|
|
52
|
+
return;
|
|
53
|
+
}
|
|
54
|
+
gridRef.current?.scrollToCell({ rowIndex: highlightIndex });
|
|
55
|
+
}, [highlightIndex]);
|
|
56
|
+
const rowCount = filteredOptions.length;
|
|
57
|
+
const contentWidth = measuredContentWidth || Math.max(triggerWidth - DROPDOWN_PADDING * 2, 160);
|
|
58
|
+
const viewportHeight = Math.min(MAX_VIEWPORT_HEIGHT, rowCount * rowHeight);
|
|
59
|
+
const rows = Array(rowCount).fill(rowHeight);
|
|
60
|
+
const columns = [contentWidth];
|
|
61
|
+
if (loading) {
|
|
62
|
+
return (0, __wake_namespace_0["jsx"])("div", { id: listboxId, role: "listbox", "aria-busy": "true", "data-select-overlay": true, className: __wake_namespace_6["cx"].call(undefined, __wake_namespace_9["overlayStyle"], popupClassName), children: (0, __wake_namespace_0["jsx"])("div", { className: __wake_namespace_9["loadingStyle"], children: (0, __wake_namespace_0["jsx"])(__wake_namespace_3["SpinIndicator"], {}) }) });
|
|
63
|
+
}
|
|
64
|
+
if (filteredOptions.length === 0) {
|
|
65
|
+
return (0, __wake_namespace_0["jsx"])("div", { id: listboxId, role: "listbox", "data-select-overlay": true, className: __wake_namespace_6["cx"].call(undefined, __wake_namespace_9["overlayStyle"], popupClassName), children: (0, __wake_namespace_0["jsx"])("div", { className: __wake_namespace_9["emptyStyle"], children: notFoundContent ?? messages.select.empty }) });
|
|
66
|
+
}
|
|
67
|
+
const isGrouped = hasGroups(filteredOptions);
|
|
68
|
+
const menu = (0, __wake_namespace_0["jsx"])(__wake_namespace_4 && __wake_namespace_4.__esModule ? __wake_namespace_4.default : __wake_namespace_4, { gridRef: gridRef, viewportWidth: contentWidth, viewportHeight: viewportHeight, gridTemplateColumns: columns, gridTemplateRows: rows, overscanRowCount: 4, renderRows: (rowRange) => {
|
|
69
|
+
const nodes = [(0, __wake_namespace_0["jsx"])("div", { "data-select-virtual-spacer": "top", className: __wake_namespace_9["virtualTopSpacerStyle"] }, "__select-top-padding__")];
|
|
70
|
+
for (let i = rowRange[0]; i <= rowRange[1]; i += 1) {
|
|
71
|
+
const option = filteredOptions[i];
|
|
72
|
+
if (option.isGroupLabel) {
|
|
73
|
+
nodes.push((0, __wake_namespace_0["jsx"])("div", { "data-group-label": true, className: __wake_namespace_9["groupLabelStyle"], children: option.label }, option.value));
|
|
74
|
+
continue;
|
|
75
|
+
}
|
|
76
|
+
const selected = selectedValues.includes(option.value);
|
|
77
|
+
const highlighted = i === highlightIndex;
|
|
78
|
+
const content = optionRender ? optionRender(option, { selected }) : (0, __wake_namespace_0["jsxs"])(__wake_namespace_0["Fragment"], { children: [multiple ? (0, __wake_namespace_0["jsx"])(__wake_namespace_1 && __wake_namespace_1.__esModule ? __wake_namespace_1.default : __wake_namespace_1, { className: __wake_namespace_9["checkboxIndicatorStyle"], checked: selected, disabled: disabled || option.disabled, tabIndex: -1, "aria-label": typeof option.label === "string" ? option.label : option.value }) : null, (0, __wake_namespace_0["jsx"])("span", { className: __wake_namespace_9["optionLabelStyle"], children: option.label }), !multiple && selected ? (0, __wake_namespace_0["jsx"])("span", { className: __wake_namespace_9["checkIconStyle"], children: (0, __wake_namespace_0["jsx"])("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: (0, __wake_namespace_0["jsx"])("path", { d: "M20 6 9 17l-5-5" }) }) }) : null] });
|
|
79
|
+
const optionAriaLabel = multiple ? typeof option.label === "string" ? option.label : option.value : undefined;
|
|
80
|
+
nodes.push((0, __wake_namespace_0["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: __wake_namespace_6["cx"].call(undefined, __wake_namespace_9["optionStyle"], isGrouped && __wake_namespace_9["groupedOptionStyle"], selected && (multiple ? __wake_namespace_9["optionSelectedStyle"] : __wake_namespace_9["optionSelectedSingleStyle"]), highlighted && __wake_namespace_9["optionHighlightStyle"], (disabled || option.disabled) && __wake_namespace_9["optionDisabledStyle"]), onMouseEnter: () => {
|
|
81
|
+
if (!disabled) onHighlightChange(i);
|
|
82
|
+
}, onClick: (event) => {
|
|
83
|
+
if (disabled) return;
|
|
84
|
+
onOptionSelect(option, event);
|
|
85
|
+
if (!multiple && !option.disabled) {
|
|
86
|
+
dispatch({ type: "setOpen", payload: false });
|
|
87
|
+
}
|
|
88
|
+
}, children: content }, option.value));
|
|
89
|
+
}
|
|
90
|
+
nodes.push((0, __wake_namespace_0["jsx"])("div", { "data-select-virtual-spacer": "bottom", className: __wake_namespace_9["virtualBottomSpacerStyle"] }, "__select-bottom-padding__"));
|
|
91
|
+
return nodes;
|
|
92
|
+
} });
|
|
93
|
+
return (0, __wake_namespace_0["jsxs"])("div", { id: listboxId, ref: overlayRef, "data-select-overlay": true, className: __wake_namespace_6["cx"].call(undefined, __wake_namespace_9["overlayStyle"], popupClassName), role: "listbox", "aria-multiselectable": multiple || undefined, "aria-disabled": disabled || undefined, children: [(0, __wake_namespace_0["jsx"])("div", { "aria-hidden": "true", "data-select-option-measure": "", className: (0, __wake_namespace_6["cx"])(__wake_namespace_9["optionStyle"], __wake_namespace_9["measureStyle"]), children: "M" }), dropdownRender ? dropdownRender(menu) : menu] });
|
|
94
|
+
};
|
|
95
|
+
const __wake_default_export = SelectOverlay;
|
|
96
|
+
Object.defineProperty(exports, "default", { enumerable: true, get: function() {
|
|
97
|
+
return __wake_default_export;
|
|
98
|
+
} });
|
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
2
|
+
require("@crab-dev/rc-checkbox");
|
|
3
|
+
require("@crab-dev/rc-spin");
|
|
4
|
+
require("./token.cjs");
|
|
5
|
+
const overlayStyle = "rc-select-2b62562b9766";
|
|
6
|
+
Object.defineProperty(exports, "overlayStyle", { enumerable: true, get: function() {
|
|
7
|
+
return overlayStyle;
|
|
8
|
+
} });
|
|
9
|
+
const optionStyle = "rc-select-4c26800476b7";
|
|
10
|
+
Object.defineProperty(exports, "optionStyle", { enumerable: true, get: function() {
|
|
11
|
+
return optionStyle;
|
|
12
|
+
} });
|
|
13
|
+
const optionHighlightStyle = "rc-select-868bf53a2d33";
|
|
14
|
+
Object.defineProperty(exports, "optionHighlightStyle", { enumerable: true, get: function() {
|
|
15
|
+
return optionHighlightStyle;
|
|
16
|
+
} });
|
|
17
|
+
const measureStyle = "rc-select-f4efdbe79bde";
|
|
18
|
+
Object.defineProperty(exports, "measureStyle", { enumerable: true, get: function() {
|
|
19
|
+
return measureStyle;
|
|
20
|
+
} });
|
|
21
|
+
const optionSelectedStyle = "rc-select-dca4819751f4";
|
|
22
|
+
Object.defineProperty(exports, "optionSelectedStyle", { enumerable: true, get: function() {
|
|
23
|
+
return optionSelectedStyle;
|
|
24
|
+
} });
|
|
25
|
+
const optionSelectedSingleStyle = "rc-select-b8e7cfd3837c";
|
|
26
|
+
Object.defineProperty(exports, "optionSelectedSingleStyle", { enumerable: true, get: function() {
|
|
27
|
+
return optionSelectedSingleStyle;
|
|
28
|
+
} });
|
|
29
|
+
const optionDisabledStyle = "rc-select-fd6a969fdc3f";
|
|
30
|
+
Object.defineProperty(exports, "optionDisabledStyle", { enumerable: true, get: function() {
|
|
31
|
+
return optionDisabledStyle;
|
|
32
|
+
} });
|
|
33
|
+
const optionLabelStyle = "rc-select-d58ef5724e7d";
|
|
34
|
+
Object.defineProperty(exports, "optionLabelStyle", { enumerable: true, get: function() {
|
|
35
|
+
return optionLabelStyle;
|
|
36
|
+
} });
|
|
37
|
+
const checkIconStyle = "rc-select-bbb208831319";
|
|
38
|
+
Object.defineProperty(exports, "checkIconStyle", { enumerable: true, get: function() {
|
|
39
|
+
return checkIconStyle;
|
|
40
|
+
} });
|
|
41
|
+
const checkboxIndicatorStyle = "rc-select-52f500f177fc";
|
|
42
|
+
Object.defineProperty(exports, "checkboxIndicatorStyle", { enumerable: true, get: function() {
|
|
43
|
+
return checkboxIndicatorStyle;
|
|
44
|
+
} });
|
|
45
|
+
const emptyStyle = "rc-select-e84bd23bdc99";
|
|
46
|
+
Object.defineProperty(exports, "emptyStyle", { enumerable: true, get: function() {
|
|
47
|
+
return emptyStyle;
|
|
48
|
+
} });
|
|
49
|
+
const groupLabelStyle = "rc-select-3ce923bc7749";
|
|
50
|
+
Object.defineProperty(exports, "groupLabelStyle", { enumerable: true, get: function() {
|
|
51
|
+
return groupLabelStyle;
|
|
52
|
+
} });
|
|
53
|
+
const groupedOptionStyle = "rc-select-16181d2683cf";
|
|
54
|
+
Object.defineProperty(exports, "groupedOptionStyle", { enumerable: true, get: function() {
|
|
55
|
+
return groupedOptionStyle;
|
|
56
|
+
} });
|
|
57
|
+
const virtualTopSpacerStyle = "rc-select-7804943b918e";
|
|
58
|
+
Object.defineProperty(exports, "virtualTopSpacerStyle", { enumerable: true, get: function() {
|
|
59
|
+
return virtualTopSpacerStyle;
|
|
60
|
+
} });
|
|
61
|
+
const virtualBottomSpacerStyle = "rc-select-86002077b8c2";
|
|
62
|
+
Object.defineProperty(exports, "virtualBottomSpacerStyle", { enumerable: true, get: function() {
|
|
63
|
+
return virtualBottomSpacerStyle;
|
|
64
|
+
} });
|
|
65
|
+
const loadingStyle = "rc-select-3809e79e5752";
|
|
66
|
+
Object.defineProperty(exports, "loadingStyle", { enumerable: true, get: function() {
|
|
67
|
+
return loadingStyle;
|
|
68
|
+
} });
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
2
|
+
const __wake_namespace_0 = require("@crab-dev/css");
|
|
3
|
+
const vars = (0, __wake_namespace_0["defineTokens"])({ "option.checkbox.width": "--select-option-checkbox-width", "option.background-color-hover": "--select-option-background-color-hover", "option.color-selected": "--select-option-color-selected", "option.background-color-selected": "--select-option-background-color-selected", "option.border-radius": "--select-option-border-radius", "option.color-disabled": "--select-option-color-disabled", "option.highlight.background-color": "--select-option-highlight-background-color", "option.background-color-active": "--select-option-background-color-active", "option.selection.background-color-hover": "--select-option-selection-background-color-hover", "option.selection.background-color-active": "--select-option-selection-background-color-active", "option.activity.outline-color": "--select-option-activity-outline-color", "option.activity.outline-width": "--select-option-activity-outline-width", "option.activity.outline-offset": "--select-option-activity-outline-offset", "option.height": "--select-option-height", "option.padding-block": "--select-option-padding-block", "option.font-size": "--select-option-font-size", "option.line-height": "--select-option-line-height", "root.transition": "--select-root-transition", "root.opacity-disabled": "--select-root-opacity-disabled", "root.touch.min-height": "--select-root-touch-min-height", "root.outline-width-focus": "--select-root-outline-width-focus", "root.outline-offset-focus": "--select-root-outline-offset-focus", "root.border-width": "--select-root-border-width", "root.border-style": "--select-root-border-style", "root.border-color": "--select-root-border-color", "root.border-color-hover": "--select-root-border-color-hover", "root.border-color-focus": "--select-root-border-color-focus", "root.border-color-error": "--select-root-border-color-error", "root.border-color-warning": "--select-root-border-color-warning", "root.border-radius": "--select-root-border-radius", "root.background-color": "--select-root-background-color", "root.background-color-disabled": "--select-root-background-color-disabled", "root.box-shadow": "--select-root-box-shadow", "root.box-shadow-focus": "--select-root-box-shadow-focus", "root.validation.box-shadow-error": "--select-root-validation-box-shadow-error", "root.validation.box-shadow-warning": "--select-root-validation-box-shadow-warning", "root.color-loading": "--select-root-color-loading", "motion.interaction.transition": "--select-motion-interaction-transition", "motion.spatial.transition": "--select-motion-spatial-transition", "text.color": "--select-text-color", "text.color-placeholder": "--select-text-color-placeholder", "text.color-disabled": "--select-text-color-disabled", "tag.background-color": "--select-tag-background-color", "tag.color": "--select-tag-color", "tag.close.color-hover": "--select-tag-close-color-hover", "clear.color": "--select-clear-color", "clear.color-hover": "--select-clear-color-hover", "clear.width": "--select-clear-width", "clear.height": "--select-clear-height", "clear.touch.width": "--select-clear-touch-width", "clear.box-shadow-focus": "--select-clear-box-shadow-focus", "icon.width": "--select-icon-width", "icon.color": "--select-icon-color", "field.gap": "--select-field-gap", "field.padding-inline": "--select-field-padding-inline", "field.min-height": "--select-field-min-height", "field.label.top": "--select-field-label-top", "field.label.padding-inline": "--select-field-label-padding-inline", "field.label.font-size": "--select-field-label-font-size", "field.label.line-height": "--select-field-label-line-height", "field.label.color": "--select-field-label-color", "field.label.color-focus": "--select-field-label-color-focus", "field.input.padding-top": "--select-field-input-padding-top", "field.transition": "--select-field-transition", "field.filled.background-color": "--select-field-filled-background-color", "field.filled.background-color-hover": "--select-field-filled-background-color-hover", "field.filled.min-height": "--select-field-filled-min-height", "field.indicator.border-color": "--select-field-indicator-border-color", "field.indicator.box-shadow-focus": "--select-field-indicator-box-shadow-focus", "field.indicator.box-shadow-error": "--select-field-indicator-box-shadow-error", "field.indicator.box-shadow-warning": "--select-field-indicator-box-shadow-warning", "field.color-error": "--select-field-color-error", "field.color-warning": "--select-field-color-warning", "field.support.line-height": "--select-field-support-line-height", "field.outline.border-width-focus": "--select-field-outline-border-width-focus", "group.color": "--select-group-color", "group.font-size": "--select-group-font-size", "size.large.height": "--select-size-large-height", "size.large.padding": "--select-size-large-padding", "size.large.font-size": "--select-size-large-font-size", "size.large.line-height": "--select-size-large-line-height", "size.large.action.width": "--select-size-large-action-width", "size.medium.height": "--select-size-medium-height", "size.medium.padding": "--select-size-medium-padding", "size.medium.font-size": "--select-size-medium-font-size", "size.medium.line-height": "--select-size-medium-line-height", "size.medium.action.width": "--select-size-medium-action-width", "size.small.height": "--select-size-small-height", "size.small.padding": "--select-size-small-padding", "size.small.font-size": "--select-size-small-font-size", "size.small.line-height": "--select-size-small-line-height", "size.small.action.width": "--select-size-small-action-width", "dropdown.margin": "--select-dropdown-margin", "dropdown.max-height": "--select-dropdown-max-height", "dropdown.padding": "--select-dropdown-padding", "dropdown.option.padding": "--select-dropdown-option-padding", "dropdown.border-radius": "--select-dropdown-border-radius" });
|
|
4
|
+
Object.defineProperty(exports, "vars", { enumerable: true, get: function() {
|
|
5
|
+
return vars;
|
|
6
|
+
} });
|
|
7
|
+
const token = (0, __wake_namespace_0["defineTokens"])({ "option": { "checkbox": { "width": `var(${vars["option.checkbox.width"]}, var(--token-semantic-size-icon, var(--token-global-space-4, 16px)))` }, "background-color-hover": `var(${vars["option.background-color-hover"]}, var(--token-semantic-color-state-hover, var(--token-semantic-color-background-hover-subtle, color-mix(in oklch, var(--token-global-material-neutral-10, oklch(0.22652446 0.00999107 303.713695)) calc(var(--token-semantic-state-opacity-hover, var(--token-global-opacity-8, 0.08)) * 100%), var(--token-global-material-neutral-98, oklch(0.98379491 0.01284496 321.893957))))))`, "color-selected": `var(${vars["option.color-selected"]}, var(--token-semantic-field-option-color-selected, var(--token-semantic-color-brand-on-container, var(--token-global-purple-10, oklch(0.24199786 0.14038488 286.089811)))))`, "background-color-selected": `var(${vars["option.background-color-selected"]}, var(--token-semantic-field-option-background-selected, var(--token-semantic-color-brand-container, var(--token-global-purple-90, oklch(0.91829316 0.04770250 302.827510)))))`, "border-radius": `var(${vars["option.border-radius"]}, var(--token-semantic-field-option-radius, var(--token-global-radius-0, 0px)))`, "color-disabled": `var(${vars["option.color-disabled"]}, var(--token-semantic-color-text-disabled, var(--token-global-material-neutral-10, oklch(0.22652446 0.00999107 303.713695))))`, "highlight": { "background-color": `var(${vars["option.highlight.background-color"]}, var(--token-semantic-color-state-hover, var(--token-semantic-color-background-hover-subtle, color-mix(in oklch, var(--token-global-material-neutral-10, oklch(0.22652446 0.00999107 303.713695)) calc(var(--token-semantic-state-opacity-hover, var(--token-global-opacity-8, 0.08)) * 100%), var(--token-global-material-neutral-98, oklch(0.98379491 0.01284496 321.893957))))))` }, "background-color-active": `var(${vars["option.background-color-active"]}, var(--token-semantic-color-state-pressed, var(--token-semantic-color-background-active-subtle, color-mix(in oklch, var(--token-global-material-neutral-10, oklch(0.22652446 0.00999107 303.713695)) calc(var(--token-semantic-state-opacity-pressed, var(--token-global-opacity-12, 0.12)) * 100%), var(--token-global-material-neutral-98, oklch(0.98379491 0.01284496 321.893957))))))`, "selection": { "background-color-hover": `var(${vars["option.selection.background-color-hover"]}, color-mix(in oklch, var(--token-semantic-field-option-color-selected, var(--token-semantic-color-brand-on-container, var(--token-global-purple-10, oklch(0.24199786 0.14038488 286.089811)))) calc(var(--token-semantic-state-opacity-hover, var(--token-global-opacity-8, 0.08)) * 100%), var(--token-semantic-field-option-background-selected, var(--token-semantic-color-brand-container, var(--token-global-purple-90, oklch(0.91829316 0.04770250 302.827510))))))`, "background-color-active": `var(${vars["option.selection.background-color-active"]}, color-mix(in oklch, var(--token-semantic-field-option-color-selected, var(--token-semantic-color-brand-on-container, var(--token-global-purple-10, oklch(0.24199786 0.14038488 286.089811)))) calc(var(--token-semantic-state-opacity-pressed, var(--token-global-opacity-12, 0.12)) * 100%), var(--token-semantic-field-option-background-selected, var(--token-semantic-color-brand-container, var(--token-global-purple-90, oklch(0.91829316 0.04770250 302.827510))))))` }, "activity": { "outline-color": `var(${vars["option.activity.outline-color"]}, var(--token-semantic-color-focus-ring, var(--token-semantic-color-border-focus, var(--token-global-purple-40, oklch(0.49552086 0.13045663 293.709078)))))`, "outline-width": `var(${vars["option.activity.outline-width"]}, 2px)`, "outline-offset": `var(${vars["option.activity.outline-offset"]}, -2px)` }, "height": `var(${vars["option.height"]}, var(--token-semantic-density-item, var(--token-semantic-density-standard-item, var(--token-global-size-32, 32px))))`, "padding-block": `var(${vars["option.padding-block"]}, var(--token-semantic-space-inline-gap, var(--token-global-space-1, 4px)))`, "font-size": `var(${vars["option.font-size"]}, var(--token-semantic-typography-body-medium-font-size, var(--token-global-font-size-sm, 14px)))`, "line-height": `var(${vars["option.line-height"]}, var(--token-semantic-typography-body-medium-line-height, var(--token-global-line-height-14-20, 1.4285714285714286)))` }, "root": { "transition": `var(${vars["root.transition"]}, background-color var(--token-semantic-motion-interaction, var(--token-global-duration-150, 150ms) var(--token-global-easing-expressive-effects-fast, cubic-bezier(0.31, 0.94, 0.34, 1.00))), border-color var(--token-semantic-motion-interaction, var(--token-global-duration-150, 150ms) var(--token-global-easing-expressive-effects-fast, cubic-bezier(0.31, 0.94, 0.34, 1.00))), color var(--token-semantic-motion-interaction, var(--token-global-duration-150, 150ms) var(--token-global-easing-expressive-effects-fast, cubic-bezier(0.31, 0.94, 0.34, 1.00))), box-shadow var(--token-semantic-motion-interaction, var(--token-global-duration-150, 150ms) var(--token-global-easing-expressive-effects-fast, cubic-bezier(0.31, 0.94, 0.34, 1.00))))`, "opacity-disabled": `var(${vars["root.opacity-disabled"]}, var(--token-semantic-opacity-disabled, var(--token-global-opacity-38, 0.38)))`, "touch": { "min-height": `var(${vars["root.touch.min-height"]}, var(--token-semantic-size-touch-target, var(--token-global-size-48, 48px)))` }, "outline-width-focus": `var(${vars["root.outline-width-focus"]}, 2px)`, "outline-offset-focus": `var(${vars["root.outline-offset-focus"]}, 2px)`, "border-width": `var(${vars["root.border-width"]}, 1px)`, "border-style": `var(${vars["root.border-style"]}, solid)`, "border-color": `var(${vars["root.border-color"]}, var(--token-semantic-color-border-default, var(--token-global-material-neutral-variant-50, oklch(0.56674707 0.01627446 308.142182))))`, "border-color-hover": `var(${vars["root.border-color-hover"]}, var(--token-semantic-color-border-hover, var(--token-global-material-neutral-10, oklch(0.22652446 0.00999107 303.713695))))`, "border-color-focus": `var(${vars["root.border-color-focus"]}, var(--token-semantic-color-border-focus, var(--token-global-purple-40, oklch(0.49552086 0.13045663 293.709078))))`, "border-color-error": `var(${vars["root.border-color-error"]}, var(--token-semantic-color-feedback-error-border, var(--token-global-material-error-40, oklch(0.50128208 0.17831791 28.704727))))`, "border-color-warning": `var(${vars["root.border-color-warning"]}, var(--token-semantic-color-feedback-warning-border, var(--token-global-amber-700, oklch(0.555 0.163 71))))`, "border-radius": `var(${vars["root.border-radius"]}, var(--token-semantic-shape-control, var(--token-global-radius-2, 4px)))`, "background-color": `var(${vars["root.background-color"]}, var(--token-semantic-color-surface-content, var(--token-semantic-color-background-surface, var(--token-global-material-neutral-98, oklch(0.98379491 0.01284496 321.893957)))))`, "background-color-disabled": `var(${vars["root.background-color-disabled"]}, var(--token-semantic-color-background-disabled, var(--token-global-material-neutral-90, oklch(0.91401081 0.01366394 314.754144))))`, "box-shadow": `var(${vars["root.box-shadow"]}, var(--token-semantic-field-control-shadow, none))`, "box-shadow-focus": `var(${vars["root.box-shadow-focus"]}, var(--token-semantic-field-control-shadow-focus, inset 0 0 0 2px var(--token-semantic-color-border-focus, var(--token-global-purple-40, oklch(0.49552086 0.13045663 293.709078)))))`, "validation": { "box-shadow-error": `var(${vars["root.validation.box-shadow-error"]}, var(--token-semantic-field-control-shadow-error, inset 0 0 0 2px var(--token-semantic-color-feedback-error-border, var(--token-global-material-error-40, oklch(0.50128208 0.17831791 28.704727)))))`, "box-shadow-warning": `var(${vars["root.validation.box-shadow-warning"]}, var(--token-semantic-field-control-shadow-warning, inset 0 0 0 2px var(--token-semantic-color-feedback-warning-border, var(--token-global-amber-600, oklch(0.666 0.179 73)))))` }, "color-loading": `var(${vars["root.color-loading"]}, var(--token-semantic-color-text-secondary, var(--token-global-material-neutral-variant-30, oklch(0.39805288 0.01735545 303.720936))))` }, "motion": { "interaction": { "transition": `var(${vars["motion.interaction.transition"]}, var(--token-semantic-motion-interaction, var(--token-global-duration-150, 150ms) var(--token-global-easing-expressive-effects-fast, cubic-bezier(0.31, 0.94, 0.34, 1.00))))` }, "spatial": { "transition": `var(${vars["motion.spatial.transition"]}, var(--token-semantic-motion-spatial-fast, var(--token-global-duration-350, 350ms) var(--token-global-easing-expressive-spatial-fast, cubic-bezier(0.42, 1.67, 0.21, 0.90))))` } }, "text": { "color": `var(${vars["text.color"]}, var(--token-semantic-color-text-primary, var(--token-global-material-neutral-10, oklch(0.22652446 0.00999107 303.713695))))`, "color-placeholder": `var(${vars["text.color-placeholder"]}, var(--token-semantic-color-text-secondary, var(--token-global-material-neutral-variant-30, oklch(0.39805288 0.01735545 303.720936))))`, "color-disabled": `var(${vars["text.color-disabled"]}, var(--token-semantic-color-text-disabled, var(--token-global-material-neutral-10, oklch(0.22652446 0.00999107 303.713695))))` }, "tag": { "background-color": `var(${vars["tag.background-color"]}, var(--token-semantic-color-background-hover-subtle, color-mix(in oklch, var(--token-global-material-neutral-10, oklch(0.22652446 0.00999107 303.713695)) calc(var(--token-semantic-state-opacity-hover, var(--token-global-opacity-8, 0.08)) * 100%), var(--token-global-material-neutral-98, oklch(0.98379491 0.01284496 321.893957)))))`, "color": `var(${vars["tag.color"]}, var(--token-semantic-color-text-primary, var(--token-global-material-neutral-10, oklch(0.22652446 0.00999107 303.713695))))`, "close": { "color-hover": `var(${vars["tag.close.color-hover"]}, var(--token-semantic-color-text-secondary, var(--token-global-material-neutral-variant-30, oklch(0.39805288 0.01735545 303.720936))))` } }, "clear": { "color": `var(${vars["clear.color"]}, var(--token-semantic-color-text-secondary, var(--token-global-material-neutral-variant-30, oklch(0.39805288 0.01735545 303.720936))))`, "color-hover": `var(${vars["clear.color-hover"]}, var(--token-semantic-color-text-primary, var(--token-global-material-neutral-10, oklch(0.22652446 0.00999107 303.713695))))`, "width": `var(${vars["clear.width"]}, var(--token-semantic-sizing-medium-action, var(--token-global-space-7, 28px)))`, "height": `var(${vars["clear.height"]}, var(--token-semantic-sizing-medium-action, var(--token-global-space-7, 28px)))`, "touch": { "width": `var(${vars["clear.touch.width"]}, var(--token-semantic-size-touch-target, var(--token-global-size-48, 48px)))` }, "box-shadow-focus": `var(${vars["clear.box-shadow-focus"]}, inset 0 0 0 1px var(--token-semantic-color-focus-ring, var(--token-semantic-color-border-focus, var(--token-global-purple-40, oklch(0.49552086 0.13045663 293.709078)))))` }, "icon": { "width": `var(${vars["icon.width"]}, var(--token-semantic-field-icon-size, var(--token-global-space-6, 24px)))`, "color": `var(${vars["icon.color"]}, var(--token-semantic-color-text-secondary, var(--token-global-material-neutral-variant-30, oklch(0.39805288 0.01735545 303.720936))))` }, "field": { "gap": `var(${vars["field.gap"]}, var(--token-semantic-space-inline-gap, var(--token-global-space-1, 4px)))`, "padding-inline": `var(${vars["field.padding-inline"]}, var(--token-semantic-field-control-padding-inline, var(--token-global-space-4, 16px)))`, "min-height": `var(${vars["field.min-height"]}, var(--token-semantic-field-control-min-height, var(--token-global-size-56, 56px)))`, "label": { "top": `var(${vars["field.label.top"]}, var(--token-semantic-space-inline-gap, var(--token-global-space-1, 4px)))`, "padding-inline": `var(${vars["field.label.padding-inline"]}, var(--token-semantic-space-inline-gap, var(--token-global-space-1, 4px)))`, "font-size": `var(${vars["field.label.font-size"]}, var(--token-semantic-typography-body-small-font-size, var(--token-global-font-size-xs, 12px)))`, "line-height": `var(${vars["field.label.line-height"]}, var(--token-semantic-typography-body-small-line-height, var(--token-global-line-height-12-16, 1.3333333333333333)))`, "color": `var(${vars["field.label.color"]}, var(--token-semantic-color-text-secondary, var(--token-global-material-neutral-variant-30, oklch(0.39805288 0.01735545 303.720936))))`, "color-focus": `var(${vars["field.label.color-focus"]}, var(--token-semantic-field-label-color-focus, var(--token-semantic-color-brand-primary, var(--token-global-purple-40, oklch(0.49552086 0.13045663 293.709078)))))` }, "input": { "padding-top": `var(${vars["field.input.padding-top"]}, var(--token-semantic-space-section-gap, var(--token-global-space-4, 16px)))` }, "transition": `var(${vars["field.transition"]}, top var(--token-semantic-motion-interaction, var(--token-global-duration-150, 150ms) var(--token-global-easing-expressive-effects-fast, cubic-bezier(0.31, 0.94, 0.34, 1.00))), font-size var(--token-semantic-motion-interaction, var(--token-global-duration-150, 150ms) var(--token-global-easing-expressive-effects-fast, cubic-bezier(0.31, 0.94, 0.34, 1.00))), color var(--token-semantic-motion-interaction, var(--token-global-duration-150, 150ms) var(--token-global-easing-expressive-effects-fast, cubic-bezier(0.31, 0.94, 0.34, 1.00))), background-color var(--token-semantic-motion-interaction, var(--token-global-duration-150, 150ms) var(--token-global-easing-expressive-effects-fast, cubic-bezier(0.31, 0.94, 0.34, 1.00))))`, "filled": { "background-color": `var(${vars["field.filled.background-color"]}, var(--token-semantic-color-surface-highest, var(--token-global-material-neutral-90, oklch(0.91401081 0.01366394 314.754144))))`, "background-color-hover": `var(${vars["field.filled.background-color-hover"]}, color-mix(in oklch, var(--token-semantic-color-text-primary, var(--token-global-material-neutral-10, oklch(0.22652446 0.00999107 303.713695))) calc(var(--token-semantic-state-opacity-hover, var(--token-global-opacity-8, 0.08)) * 100%), var(--token-semantic-color-surface-highest, var(--token-global-material-neutral-90, oklch(0.91401081 0.01366394 314.754144)))))`, "min-height": `var(${vars["field.filled.min-height"]}, var(--token-semantic-size-field-labeled, var(--token-global-size-48, 48px)))` }, "indicator": { "border-color": `var(${vars["field.indicator.border-color"]}, var(--token-semantic-color-text-secondary, var(--token-global-material-neutral-variant-30, oklch(0.39805288 0.01735545 303.720936))))`, "box-shadow-focus": `var(${vars["field.indicator.box-shadow-focus"]}, inset 0 -2px 0 var(--token-semantic-color-border-focus, var(--token-global-purple-40, oklch(0.49552086 0.13045663 293.709078))))`, "box-shadow-error": `var(${vars["field.indicator.box-shadow-error"]}, inset 0 -2px 0 var(--token-semantic-color-feedback-error-border, var(--token-global-material-error-40, oklch(0.50128208 0.17831791 28.704727))))`, "box-shadow-warning": `var(${vars["field.indicator.box-shadow-warning"]}, inset 0 -2px 0 var(--token-semantic-color-feedback-warning-border, var(--token-global-amber-700, oklch(0.555 0.163 71))))` }, "color-error": `var(${vars["field.color-error"]}, var(--token-semantic-color-feedback-error-text, var(--token-global-material-error-10, oklch(0.25390329 0.07937181 27.605486))))`, "color-warning": `var(${vars["field.color-warning"]}, var(--token-semantic-color-feedback-warning-text, var(--token-global-amber-900, oklch(0.414 0.112 68))))`, "support": { "line-height": `var(${vars["field.support.line-height"]}, var(--token-semantic-typography-body-small-line-height, var(--token-global-line-height-12-16, 1.3333333333333333)))` }, "outline": { "border-width-focus": `var(${vars["field.outline.border-width-focus"]}, 3px)` } }, "group": { "color": `var(${vars["group.color"]}, var(--token-semantic-color-text-secondary, var(--token-global-material-neutral-variant-30, oklch(0.39805288 0.01735545 303.720936))))`, "font-size": `var(${vars["group.font-size"]}, var(--token-semantic-typography-caption-font-size, var(--token-global-font-size-xs, 12px)))` }, "size": { "large": { "height": `var(${vars["size.large.height"]}, var(--token-semantic-sizing-large-field, var(--token-global-size-40, 40px)))`, "padding": `var(${vars["size.large.padding"]}, var(--token-semantic-space-inline-gap, var(--token-global-space-1, 4px)) var(--token-semantic-field-control-padding-inline, var(--token-global-space-4, 16px)))`, "font-size": `var(${vars["size.large.font-size"]}, var(--token-semantic-field-input-font-size, var(--token-global-font-size-md, 16px)))`, "line-height": `var(${vars["size.large.line-height"]}, var(--token-semantic-field-input-line-height, var(--token-global-space-6, 24px)))`, "action": { "width": `var(${vars["size.large.action.width"]}, var(--token-semantic-sizing-large-action, var(--token-global-size-32, 32px)))` } }, "medium": { "height": `var(${vars["size.medium.height"]}, var(--token-semantic-sizing-medium-field, var(--token-global-size-36, 36px)))`, "padding": `var(${vars["size.medium.padding"]}, var(--token-semantic-space-inline-gap, var(--token-global-space-1, 4px)) var(--token-semantic-field-control-padding-inline, var(--token-global-space-4, 16px)))`, "font-size": `var(${vars["size.medium.font-size"]}, var(--token-semantic-field-input-font-size, var(--token-global-font-size-md, 16px)))`, "line-height": `var(${vars["size.medium.line-height"]}, var(--token-semantic-field-input-line-height, var(--token-global-space-6, 24px)))`, "action": { "width": `var(${vars["size.medium.action.width"]}, var(--token-semantic-sizing-medium-action, var(--token-global-space-7, 28px)))` } }, "small": { "height": `var(${vars["size.small.height"]}, var(--token-semantic-sizing-small-field, var(--token-global-size-32, 32px)))`, "padding": `var(${vars["size.small.padding"]}, 0 var(--token-semantic-field-control-padding-inline, var(--token-global-space-4, 16px)))`, "font-size": `var(${vars["size.small.font-size"]}, var(--token-semantic-field-input-font-size, var(--token-global-font-size-md, 16px)))`, "line-height": `var(${vars["size.small.line-height"]}, var(--token-semantic-field-input-line-height, var(--token-global-space-6, 24px)))`, "action": { "width": `var(${vars["size.small.action.width"]}, var(--token-semantic-sizing-small-action, var(--token-global-space-6, 24px)))` } } }, "dropdown": { "margin": `var(${vars["dropdown.margin"]}, 6px)`, "max-height": `var(${vars["dropdown.max-height"]}, 240px)`, "padding": `var(${vars["dropdown.padding"]}, var(--token-semantic-space-inline-gap, var(--token-global-space-1, 4px)))`, "option": { "padding": `var(${vars["dropdown.option.padding"]}, var(--token-semantic-space-component-gap, var(--token-global-space-2, 8px)))` }, "border-radius": `var(${vars["dropdown.border-radius"]}, var(--token-semantic-shape-overlay, var(--token-global-radius-14, 28px)))` } });
|
|
8
|
+
const __wake_default_export = token;
|
|
9
|
+
Object.defineProperty(exports, "default", { enumerable: true, get: function() {
|
|
10
|
+
return __wake_default_export;
|
|
11
|
+
} });
|
package/cjs/index.cjs
CHANGED
|
@@ -1 +1,11 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@crab-dev/rc-dropdown-container"),l=require("react"),t=require("@crab-dev/rc-hooks"),r=require("react/compiler-runtime"),s=require("@crab-dev/rc-line-edit"),o=require("@crab-dev/rc-spin"),a=require("@crab-dev/rc-tag"),n=require("@linaria/core"),i=require("react/jsx-dev-runtime"),c=require("@crab-dev/rc-checkbox"),d=require("@crab-dev/rc-virtual");function u(e){return e&&e.__esModule?e:{default:e}}var h=u(e),p=u(s),v=u(a),g=u(c),f=u(d);const x="rc-select-c1dsn6ds",m="rc-select-p1l0d023",b={large:"rc-select-l1ohqr33",middle:"rc-select-mvtp1fw",small:"rc-select-s1n8wm60"},j={large:"rc-select-ls4o1df",middle:"rc-select-mxdjkcj",small:"rc-select-s1qq3fet"},D={large:"rc-select-l11npiub",middle:"rc-select-mnw2jq7",small:"rc-select-s1p8llhq"},E=()=>{const e=r.c(1);let l;return e[0]===Symbol.for("react.memo_cache_sentinel")?(l=i.jsxDEV("svg",{width:"12",height:"12",viewBox:"0 0 1024 1024",fill:"currentColor",children:i.jsxDEV("path",{d:"M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3 0.1-12.7-6.4-12.7z"},void 0,!1)},void 0,!1),e[0]=l):l=e[0],l},y=()=>{const e=r.c(1);let l;return e[0]===Symbol.for("react.memo_cache_sentinel")?(l=i.jsxDEV("svg",{width:"12",height:"12",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[i.jsxDEV("circle",{cx:"12",cy:"12",r:"10"},void 0,!1),i.jsxDEV("path",{d:"m15 9-6 6M9 9l6 6"},void 0,!1)]},void 0,!0),e[0]=l):l=e[0],l},V=({ref:t,ariaLabel:r,disabled:s,searchable:a,multiple:c,size:d,status:u,allowClear:h,loading:g,maxTagCount:f,autoFocus:V,placeholder:C,selectedOptions:w,searchText:k,highlightIndex:N,highlightedOption:O,listboxId:R,tagRender:q,onSearchTextChange:_,onOpenChange:I,onWidthChange:L,onMoveHighlight:S,onSelectHighlighted:F,onClear:H,onRemoveTag:M,onFocus:T,onBlur:z})=>{const{state:B,refs:W,dispatch:A}=e.useDropdownContext(),G=l.useRef(null),$=l.useRef(null),P=B.open,K=l.useRef(I);K.current=I;const U=l.useCallback(e=>{G.current=e,"function"==typeof W.setReference&&W.setReference(e),((e,l)=>{"function"==typeof e?e(l):e&&(e.current=l)})(t,e)},[W.setReference,t]);l.useEffect(()=>{const e=G.current;if(!e)return;const l=new ResizeObserver(e=>{for(const l of e)L(l.target.getBoundingClientRect().width)});return l.observe(e),()=>l.disconnect()},[L]),l.useEffect(()=>{P&&a&&queueMicrotask(()=>$.current?.focus())},[P,a]),l.useEffect(()=>{V&&G.current&&G.current.focus()},[V]);const J=l.useRef(!0);l.useEffect(()=>{J.current?J.current=!1:K.current(P)},[P]);const Q=()=>{H(),P&&A({type:"setOpen",payload:!1})},X=h&&!s&&w.length>0,Y=e=>{const l=()=>M(e.value);return q?i.jsxDEV("span",{children:q(e,l)},e.value,!1):i.jsxDEV(v.default,{size:"small",closable:!0,closeAriaLabel:`Remove ${"string"==typeof e.label?e.label:e.value}`,onClose:l,children:i.jsxDEV("span",{className:"rc-select-tj3q1lh",children:e.label},void 0,!1)},e.value,!1)},Z=()=>{if(void 0!==f&&w.length>f){const e=w.slice(0,f),l=w.length-f;return i.jsxDEV(i.Fragment,{children:[e.map(Y),i.jsxDEV(v.default,{size:"small",children:["+",l]},void 0,!0)]},void 0,!0)}return w.map(Y)},ee=P&&N>=0?`${R}-option-${N}`:void 0;return i.jsxDEV("div",{role:"combobox","aria-label":r,"aria-expanded":P,"aria-disabled":s,"aria-busy":g||void 0,"aria-haspopup":"listbox","aria-controls":P?R:void 0,"aria-activedescendant":ee,"aria-invalid":"error"===u||void 0,tabIndex:s?-1:0,ref:U,className:n.cx("rc-select-c1l5vx99",b[d],c?D[d]:j[d],!u&&P&&x,s&&"rc-select-cvb0fm4",u?"error"===u?n.cx("rc-select-c1na8b52",P&&"rc-select-c19mujlp"):n.cx("rc-select-c16epqep",P&&"rc-select-ckhhleb"):P?x:void 0),onClick:()=>{s||A({type:"setOpen",payload:!P})},onKeyDown:e=>{if(!s)switch(e.key){case"ArrowDown":e.preventDefault(),P||A({type:"setOpen",payload:!0}),S(1);break;case"ArrowUp":e.preventDefault(),P||A({type:"setOpen",payload:!0}),S(-1);break;case"Enter":e.preventDefault(),P&&O?(F(O),c||A({type:"setOpen",payload:!1})):P||A({type:"setOpen",payload:!0});break;case" ":a&&P||(e.preventDefault(),P||A({type:"setOpen",payload:!0}));break;case"Escape":P&&(e.preventDefault(),A({type:"setOpen",payload:!1}));break;case"Backspace":if(c&&""===k&&w.length>0){const e=w[w.length-1];M(e.value)}}},onFocus:T,onBlur:z,children:[i.jsxDEV("div",{className:"rc-select-v1mxlf89",children:a&&P?i.jsxDEV(i.Fragment,{children:[c&&Z(),i.jsxDEV(p.default,{ref:$,bordered:!1,value:k,placeholder:c&&w.length>0?"":C,onChange:e=>_(e.target.value),onClick:e=>e.stopPropagation(),className:"rc-select-s1r0kmh4"},void 0,!1)]},void 0,!0):c?0===w.length?i.jsxDEV("span",{className:m,children:C},void 0,!1):Z():0===w.length?i.jsxDEV("span",{className:m,children:C},void 0,!1):i.jsxDEV("span",{className:"rc-select-sfumuma",children:w[0]?.label},void 0,!1)},void 0,!1),g?i.jsxDEV("span",{className:"rc-select-l1m17a72",children:i.jsxDEV(o.SpinIndicator,{},void 0,!1)},void 0,!1):null,i.jsxDEV("span",{className:"rc-select-s10zhocr",children:[i.jsxDEV("span",{"data-role":X?"select-caret":void 0,className:n.cx("rc-select-c1t4pqsr",P&&"rc-select-c1a799e8"),children:i.jsxDEV(E,{},void 0,!1)},void 0,!1),X?i.jsxDEV("span",{"data-role":"select-clear",className:"rc-select-c1i3ciyg",role:"button",tabIndex:0,"aria-label":"Clear",onClick:e=>{e.stopPropagation(),Q()},onKeyDown:e=>{"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),e.stopPropagation(),Q())},children:i.jsxDEV(y,{},void 0,!1)},void 0,!1):null]},void 0,!0)]},void 0,!0)},C="rc-select-o197jepe",w=t=>{const s=r.c(51),{multiple:a,loading:c,filteredOptions:d,selectedValues:u,triggerWidth:h,highlightIndex:p,listboxId:v,notFoundContent:x,popupClassName:m,optionRender:b,dropdownRender:j,onOptionSelect:D,onOpenChange:E,onHighlightChange:y}=t,{dispatch:V}=e.useDropdownContext(),w=l.useRef(null);let k,N;if(s[0]!==p?(k=()=>{p<0||w.current?.scrollToCell({rowIndex:p})},N=[p],s[0]=p,s[1]=k,s[2]=N):(k=s[1],N=s[2]),l.useEffect(k,N),c){let e,l,t;return s[3]!==m?(e=n.cx(C,m),s[3]=m,s[4]=e):e=s[4],s[5]===Symbol.for("react.memo_cache_sentinel")?(l=i.jsxDEV("div",{className:"rc-select-l274z9g",children:i.jsxDEV(o.SpinIndicator,{},void 0,!1)},void 0,!1),s[5]=l):l=s[5],s[6]!==v||s[7]!==e?(t=i.jsxDEV("div",{id:v,role:"listbox","aria-busy":"true","data-select-overlay":!0,className:e,children:l},void 0,!1),s[6]=v,s[7]=e,s[8]=t):t=s[8],t}if(0===d.length){let e;s[9]!==m?(e=n.cx(C,m),s[9]=m,s[10]=e):e=s[10];const l=x??"无匹配选项";let t,r;return s[11]!==l?(t=i.jsxDEV("div",{className:"rc-select-e198oa40",children:l},void 0,!1),s[11]=l,s[12]=t):t=s[12],s[13]!==v||s[14]!==e||s[15]!==t?(r=i.jsxDEV("div",{id:v,role:"listbox","data-select-overlay":!0,className:e,children:t},void 0,!1),s[13]=v,s[14]=e,s[15]=t,s[16]=r):r=s[16],r}const O=d.length,R=Math.max(h-8,160),q=Math.min(256,32*O);let _;s[17]!==O?(_=Array(O).fill(32),s[17]=O,s[18]=_):_=s[18];const I=_;let L;s[19]!==d?(L=d.some(e=>e.isGroupLabel),s[19]=d,s[20]=L):L=s[20];const S=L;let F,H,M;s[21]!==R?(F=[R],s[21]=R,s[22]=F):F=s[22],s[23]!==V||s[24]!==d||s[25]!==p||s[26]!==S||s[27]!==v||s[28]!==a||s[29]!==y||s[30]!==E||s[31]!==D||s[32]!==b||s[33]!==u?(H=e=>{const l=[i.jsxDEV("div",{className:"rc-select-d1dli847"},"__select-top-padding__",!1)];for(let t=e[0];t<=e[1];t+=1,t){const e=d[t];if(e.isGroupLabel){l.push(i.jsxDEV("div",{"data-group-label":!0,className:"rc-select-g17o4y",children:e.label},e.value,!1));continue}const r=u.includes(e.value),s=t===p,o=b?b(e,{selected:r}):i.jsxDEV(i.Fragment,{children:[a?i.jsxDEV(g.default,{className:"rc-select-c19svz90",checked:r,disabled:e.disabled,tabIndex:-1,"aria-label":"string"==typeof e.label?e.label:e.value},void 0,!1):null,i.jsxDEV("span",{className:"rc-select-o1dhqqw2",children:e.label},void 0,!1),!a&&r?i.jsxDEV("span",{className:"rc-select-c3deb06",children:i.jsxDEV("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:i.jsxDEV("path",{d:"M20 6 9 17l-5-5"},void 0,!1)},void 0,!1)},void 0,!1):null]},void 0,!0),c=a?"string"==typeof e.label?e.label:e.value:void 0;l.push(i.jsxDEV("div",{id:`${v}-option-${t}`,role:"option","aria-selected":r,"aria-label":c,className:n.cx("rc-select-o8623go",S&&"rc-select-gc4dk9f",r&&(a?"rc-select-oxaegfe":"rc-select-o16p9iym"),s&&"rc-select-o1n324dj",e.disabled&&"rc-select-o1qyr5qv"),onMouseEnter:()=>y(t),onClick:()=>{D(e),a||e.disabled||(V({type:"setOpen",payload:!1}),E(!1))},children:o},e.value,!1))}return l.push(i.jsxDEV("div",{className:"rc-select-d1a6h40l"},"__select-bottom-padding__",!1)),l},s[23]=V,s[24]=d,s[25]=p,s[26]=S,s[27]=v,s[28]=a,s[29]=y,s[30]=E,s[31]=D,s[32]=b,s[33]=u,s[34]=H):H=s[34],s[35]!==R||s[36]!==I||s[37]!==F||s[38]!==H||s[39]!==q?(M=i.jsxDEV(f.default,{gridRef:w,viewportWidth:R,viewportHeight:q,gridTemplateColumns:F,gridTemplateRows:I,renderRows:H},void 0,!1),s[35]=R,s[36]=I,s[37]=F,s[38]=H,s[39]=q,s[40]=M):M=s[40];const T=M;let z;s[41]!==m?(z=n.cx(C,m),s[41]=m,s[42]=z):z=s[42];const B=a||void 0;let W,A;return s[43]!==j||s[44]!==T?(W=j?j(T):T,s[43]=j,s[44]=T,s[45]=W):W=s[45],s[46]!==v||s[47]!==W||s[48]!==z||s[49]!==B?(A=i.jsxDEV("div",{id:v,"data-select-overlay":!0,className:z,role:"listbox","aria-multiselectable":B,children:W},void 0,!1),s[46]=v,s[47]=W,s[48]=z,s[49]=B,s[50]=A):A=s[50],A},k=e=>"options"in e&&Array.isArray(e.options),N=e=>void 0===e?[]:Array.isArray(e)?e:[e],O=(e,l,t)=>{if(!l||""===t.trim())return e;const r=t.trim().toLowerCase();return e.filter(e=>!e.isGroupLabel&&("string"==typeof e.label?e.label.toLowerCase().includes(r):e.value.toLowerCase().includes(r)))};exports.default=({ref:e,options:s,placeholder:o="请选择",disabled:a=!1,searchable:n=!1,multiple:c=!1,size:d="middle",status:u,allowClear:p=!1,loading:v=!1,maxTagCount:g,autoFocus:f=!1,notFoundContent:x,popupClassName:m,popupMatchSelectWidth:b=!0,optionRender:j,tagRender:D,dropdownRender:E,value:y,defaultValue:C,onChange:R,onOpenChange:q,onFocus:_,onBlur:I,className:L,"aria-label":S,...F})=>{const H=l.useId(),[M,T]=l.useState(""),[z,B]=t.useControllableValue({value:void 0!==y?N(y):void 0,defaultValue:N(C)}),[W,A]=l.useState(0),G=l.useRef(q);G.current=q;const $=(e=>{const l=[];for(const t of e)if(k(t))for(const e of t.options)l.push(e);else l.push(t);return l})(s),P=$.filter(e=>z.includes(e.value)),K=(e=>{const l=[];return e.forEach((e,t)=>{if(k(e)){l.push({label:e.label,value:`__group_${t}`,isGroupLabel:!0});for(const t of e.options)l.push(t)}else l.push(e)}),l})(s),U=O(K,n,M),{highlightIndex:J,highlightedOption:Q,moveHighlight:X,resetHighlight:Y,setHighlightIndex:Z}=(e=>{const t=r.c(10),{filteredOptions:s,open:o}=e,[a,n]=l.useState(-1);let i;t[0]!==s?(i=(e,l)=>{const t=s.length;if(0===t)return-1;let r=e;for(let e=0;e<t;e+=1,e){r=((r+l)%t+t)%t;const e=s[r];if(!e.disabled&&!e.isGroupLabel)return r}return-1},t[0]=s,t[1]=i):i=t[1];const c=i;let d;t[2]!==c||t[3]!==o?(d=e=>{o&&n(l=>c(-1===l?1===e?-1:0:l,e))},t[2]=c,t[3]=o,t[4]=d):d=t[4];const u=d;let h;t[5]===Symbol.for("react.memo_cache_sentinel")?(h=()=>{n(-1)},t[5]=h):h=t[5];const p=h,v=a>=0&&a<s.length?s[a]:void 0;let g;return t[6]!==a||t[7]!==v||t[8]!==u?(g={highlightIndex:a,highlightedOption:v,moveHighlight:u,resetHighlight:p,setHighlightIndex:n},t[6]=a,t[7]=v,t[8]=u,t[9]=g):g=t[9],g})({filteredOptions:U,open:!0}),ee=e=>{if(e){if(!c&&z.length>0){const e=U.findIndex(e=>e.value===z[0]);Z(e)}}else T(""),Y();G.current?.(e)},le=e=>{if(B(e),c){const l=$.filter(l=>e.includes(l.value));return void R?.(e,l)}const l=e[0],t=$.find(e=>e.value===l);R?.(l,t)},te=e=>{if(!e.disabled&&!e.isGroupLabel){if(c){const l=z.includes(e.value)?z.filter(l=>l!==e.value):[...z,e.value];return void le(l)}le([e.value])}},re=b?{width:W}:{minWidth:W};return i.jsxDEV(h.default,{...F,className:L,overlay:i.jsxDEV(w,{multiple:c,loading:v,filteredOptions:U,selectedValues:z,triggerWidth:W,highlightIndex:J,listboxId:H,notFoundContent:x,popupClassName:m,optionRender:j,dropdownRender:E,onOptionSelect:te,onOpenChange:ee,onHighlightChange:Z},void 0,!1),floatingContainerProps:{style:re},children:i.jsxDEV(V,{ref:e,ariaLabel:S,disabled:a,searchable:n,multiple:c,size:d,status:u,allowClear:p,loading:v,maxTagCount:g,autoFocus:f,placeholder:o,selectedOptions:P,searchText:M,highlightIndex:J,highlightedOption:Q,listboxId:H,tagRender:D,onSearchTextChange:e=>{T(e);const l=O(K,n,e);Z((e=>e.findIndex(e=>!e.disabled&&!e.isGroupLabel))(l))},onOpenChange:ee,onWidthChange:e=>{A(e)},onMoveHighlight:X,onSelectHighlighted:te,onClear:()=>{le([]),T("")},onRemoveTag:e=>{le(z.filter(l=>l!==e))},onFocus:_,onBlur:I},void 0,!1)},void 0,!1)};
|
|
1
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
2
|
+
const __wake_namespace_0 = require("./_wake/src/select.cjs");
|
|
3
|
+
;
|
|
4
|
+
const __wake_default_export = __wake_namespace_0 && __wake_namespace_0.__esModule ? __wake_namespace_0.default : __wake_namespace_0;
|
|
5
|
+
Object.defineProperty(exports, "default", { enumerable: true, get: function() {
|
|
6
|
+
return __wake_default_export;
|
|
7
|
+
} });
|
|
8
|
+
const __wake_namespace_1 = require("./_wake/src/token.cjs");
|
|
9
|
+
Object.defineProperty(exports, "TokenVars", { enumerable: true, get: function() {
|
|
10
|
+
return __wake_namespace_1["vars"];
|
|
11
|
+
} });
|
package/css/index.css
CHANGED
|
@@ -1,42 +1,5 @@
|
|
|
1
|
-
.rc-select-c1l5vx99{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%;box-sizing:border-box;border:1px solid var(--select-border-color, var(--token-semantic-color-border-default, var(--token-global-zinc-200, oklch(0.900 0.004 286))));border-radius:var(--select-border-radius, var(--token-semantic-radius-md, var(--token-global-radius-3, 6px)));background-color:transparent;color:var(--select-text-color, var(--token-semantic-color-text-primary, var(--token-global-zinc-950, oklch(0.140 0.004 286))));cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;outline:none;-webkit-transition:var(--select-transition, background-color 100ms cubic-bezier(0.4, 0, 0.2, 1), border-color 100ms cubic-bezier(0.4, 0, 0.2, 1), color 100ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 100ms cubic-bezier(0.4, 0, 0.2, 1));transition:var(--select-transition, background-color 100ms cubic-bezier(0.4, 0, 0.2, 1), border-color 100ms cubic-bezier(0.4, 0, 0.2, 1), color 100ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 100ms cubic-bezier(0.4, 0, 0.2, 1));}.rc-select-c1l5vx99:hover:not([aria-disabled="true"]){border-color:var(--select-border-color-hover, var(--token-semantic-color-border-hover, var(--token-global-zinc-300, oklch(0.840 0.008 286))));}.rc-select-c1l5vx99:hover:not([aria-disabled="true"]) [data-role="select-clear"]{opacity:1;}.rc-select-c1l5vx99:hover:not([aria-disabled="true"]) [data-role="select-caret"]{opacity:0;}.rc-select-c1l5vx99:focus-visible{border-color:var(--select-border-color-focus, var(--token-semantic-color-border-focus, var(--token-global-zinc-950, oklch(0.140 0.004 286))));box-shadow:var(--select-shadow-focus, var(--token-semantic-shadow-focus-ring, 0 0 0 3px oklch(0.140 0.004 286 / 0.25)));}@media (prefers-reduced-motion: reduce){.rc-select-c1l5vx99{-webkit-transition:none;transition:none;}}
|
|
2
|
-
.rc-select-
|
|
3
|
-
.rc-select-
|
|
4
|
-
.rc-select-
|
|
5
|
-
.rc-select-
|
|
6
|
-
.rc-select-c16epqep{border-color:var(--select-border-color-warning, var(--token-semantic-color-feedback-warning, var(--token-global-amber-500, oklch(0.769 0.188 75))));}.rc-select-c16epqep:hover:not([aria-disabled="true"]){border-color:var(--select-border-color-warning, var(--token-semantic-color-feedback-warning, var(--token-global-amber-500, oklch(0.769 0.188 75))));}.rc-select-c16epqep:focus-visible{border-color:var(--select-border-color-warning, var(--token-semantic-color-feedback-warning, var(--token-global-amber-500, oklch(0.769 0.188 75))));box-shadow:var(--select-shadow-focus-warning, 0 0 0 3px oklch(0.769 0.188 75 / 0.25));}
|
|
7
|
-
.rc-select-ckhhleb{border-color:var(--select-border-color-warning, var(--token-semantic-color-feedback-warning, var(--token-global-amber-500, oklch(0.769 0.188 75))));box-shadow:var(--select-shadow-focus-warning, 0 0 0 3px oklch(0.769 0.188 75 / 0.25));}
|
|
8
|
-
.rc-select-v1mxlf89{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:4px;-webkit-flex:1;-ms-flex:1;flex:1;min-width:0;overflow:hidden;}
|
|
9
|
-
.rc-select-sfumuma{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
|
|
10
|
-
.rc-select-p1l0d023{color:var(--select-text-color-placeholder, var(--token-semantic-color-text-secondary, var(--token-global-zinc-500, oklch(0.660 0.014 286))));overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
|
|
11
|
-
.rc-select-s1r0kmh4{-webkit-flex:1;-ms-flex:1;flex:1;min-width:0;}
|
|
12
|
-
.rc-select-c1t4pqsr{margin-left:0;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:var(--select-text-color-placeholder, var(--token-semantic-color-text-secondary, var(--token-global-zinc-500, oklch(0.660 0.014 286))));-webkit-transition:-webkit-transform 200ms ease,opacity 100ms ease;transition:transform 200ms ease,opacity 100ms ease;}@media (prefers-reduced-motion: reduce){.rc-select-c1t4pqsr{-webkit-transition:none;transition:none;}}
|
|
13
|
-
.rc-select-c1a799e8{-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg);}
|
|
14
|
-
.rc-select-tj3q1lh{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:120px;}
|
|
15
|
-
.rc-select-s10zhocr{position:relative;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;margin-left:8px;}
|
|
16
|
-
.rc-select-c1i3ciyg{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:var(--select-clear-color, var(--token-semantic-color-text-secondary, var(--token-global-zinc-500, oklch(0.660 0.014 286))));cursor:pointer;position:absolute;inset:-6px;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;opacity:0;-webkit-transition:opacity 100ms ease;transition:opacity 100ms ease;}.rc-select-c1i3ciyg:hover{color:var(--select-clear-color-hover, var(--token-semantic-color-text-primary, var(--token-global-zinc-950, oklch(0.140 0.004 286))));}.rc-select-c1i3ciyg:focus-visible{opacity:1;outline:none;box-shadow:var(--select-shadow-focus, var(--token-semantic-shadow-focus-ring, 0 0 0 3px oklch(0.140 0.004 286 / 0.25)));}@media (prefers-reduced-motion: reduce){.rc-select-c1i3ciyg{-webkit-transition:none;transition:none;}}
|
|
17
|
-
.rc-select-l1m17a72{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:var(--select-loading-color, var(--token-semantic-color-text-secondary, var(--token-global-zinc-500, oklch(0.660 0.014 286))));-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;margin-left:8px;--rc-spin-size:14px;--spin-ring-indicator-color:currentColor;--spin-ring-track-color:transparent;}
|
|
18
|
-
.rc-select-l1ohqr33{padding:var(--select-size-large-padding, var(--token-semantic-space-inline-gap, var(--token-global-space-1, 4px)) var(--token-semantic-space-control-padding-x, var(--token-global-space-3, 12px)));font-size:var(--select-size-large-font-size, var(--token-semantic-font-size-subhead, var(--token-global-font-size-md, 16px)));line-height:var(--select-size-large-line-height, 1.5rem);}
|
|
19
|
-
.rc-select-mvtp1fw{padding:var(--select-size-middle-padding, var(--token-semantic-space-inline-gap, var(--token-global-space-1, 4px)) var(--token-semantic-space-control-padding-x, var(--token-global-space-3, 12px)));font-size:var(--select-size-middle-font-size, var(--token-semantic-font-size-body, var(--token-global-font-size-sm, 14px)));line-height:var(--select-size-middle-line-height, 1.25rem);}
|
|
20
|
-
.rc-select-s1n8wm60{padding:var(--select-size-small-padding, var(--token-semantic-space-inline-gap, var(--token-global-space-1, 4px)) var(--token-semantic-space-control-padding-x, var(--token-global-space-3, 12px)));font-size:var(--select-size-small-font-size, var(--token-semantic-font-size-body, var(--token-global-font-size-sm, 14px)));line-height:var(--select-size-small-line-height, 1.25rem);}
|
|
21
|
-
.rc-select-ls4o1df{height:var(--select-size-large-height, 40px);}
|
|
22
|
-
.rc-select-mxdjkcj{height:var(--select-size-middle-height, 32px);}
|
|
23
|
-
.rc-select-s1qq3fet{height:var(--select-size-small-height, 24px);}
|
|
24
|
-
.rc-select-l11npiub{min-height:var(--select-size-large-height, 40px);}
|
|
25
|
-
.rc-select-mnw2jq7{min-height:var(--select-size-middle-height, 32px);}
|
|
26
|
-
.rc-select-s1p8llhq{min-height:var(--select-size-small-height, 24px);}
|
|
27
|
-
|
|
28
|
-
.rc-select-o197jepe{padding:var(--select-dropdown-padding, 4px);overflow:hidden;}
|
|
29
|
-
.rc-select-o8623go{position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%;padding:6px 8px;border-radius:3px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;height:32px;box-sizing:border-box;font-size:14px;outline:none;-webkit-transition:var(--select-transition, background-color 100ms cubic-bezier(0.4, 0, 0.2, 1), border-color 100ms cubic-bezier(0.4, 0, 0.2, 1), color 100ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 100ms cubic-bezier(0.4, 0, 0.2, 1));transition:var(--select-transition, background-color 100ms cubic-bezier(0.4, 0, 0.2, 1), border-color 100ms cubic-bezier(0.4, 0, 0.2, 1), color 100ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 100ms cubic-bezier(0.4, 0, 0.2, 1));}.rc-select-o8623go:hover{background-color:var(--select-option-color-hover, var(--token-semantic-color-background-hover-subtle, var(--token-global-zinc-100, oklch(0.950 0.003 286))));}.rc-select-o8623go:active{background-color:var(--select-option-color-hover, var(--token-semantic-color-background-hover-subtle, var(--token-global-zinc-100, oklch(0.950 0.003 286))));}.rc-select-o8623go[aria-selected="true"]{background-color:var(--select-option-background-selected, var(--token-semantic-color-background-active-subtle, var(--token-global-zinc-200, oklch(0.900 0.004 286))));}@media (prefers-reduced-motion: reduce){.rc-select-o8623go{-webkit-transition:none;transition:none;}}
|
|
30
|
-
.rc-select-o1n324dj{background-color:var(--select-option-highlight-background, var(--token-semantic-color-background-hover-subtle, var(--token-global-zinc-100, oklch(0.950 0.003 286))));}
|
|
31
|
-
.rc-select-oxaegfe{font-weight:500;}
|
|
32
|
-
.rc-select-o16p9iym{font-weight:500;color:var(--select-option-color-selected, var(--token-semantic-color-brand-primary, var(--token-global-zinc-900, oklch(0.220 0.005 286))));}
|
|
33
|
-
.rc-select-o1qyr5qv{opacity:0.5;pointer-events:none;}
|
|
34
|
-
.rc-select-o1dhqqw2{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;-webkit-flex:1;-ms-flex:1;flex:1;min-width:0;}
|
|
35
|
-
.rc-select-c3deb06{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;width:16px;height:16px;margin-left:8px;color:var(--select-option-color-selected, var(--token-semantic-color-brand-primary, var(--token-global-zinc-900, oklch(0.220 0.005 286))));}
|
|
36
|
-
.rc-select-c19svz90{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;margin-right:8px;pointer-events:none;}
|
|
37
|
-
.rc-select-e198oa40{padding:24px 8px;color:var(--select-text-color-placeholder, var(--token-semantic-color-text-secondary, var(--token-global-zinc-500, oklch(0.660 0.014 286))));text-align:center;font-size:14px;}
|
|
38
|
-
.rc-select-g17o4y{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:4px 8px;height:32px;box-sizing:border-box;font-size:var(--select-group-font-size, var(--token-semantic-font-size-caption, var(--token-global-font-size-xs, 12px)));color:var(--select-group-color, var(--token-semantic-color-text-secondary, var(--token-global-zinc-500, oklch(0.660 0.014 286))));font-weight:500;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;margin-top:4px;}.rc-select-g17o4y:first-child{margin-top:0;}
|
|
39
|
-
.rc-select-gc4dk9f{padding-left:20px;}
|
|
40
|
-
.rc-select-l274z9g{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;padding:24px 8px;color:var(--select-loading-color, var(--token-semantic-color-text-secondary, var(--token-global-zinc-500, oklch(0.660 0.014 286))));--rc-spin-size:20px;--spin-ring-indicator-color:currentColor;--spin-ring-track-color:transparent;}
|
|
41
|
-
.rc-select-d1dli847{display:inline-block;height:var(--crab-rc-virtual-top-padding-height, 0px);width:100%;}
|
|
42
|
-
.rc-select-d1a6h40l{display:inline-block;height:var(--crab-rc-virtual-bottom-padding-height, 0px);width:100%;}
|
|
1
|
+
.rc-select-0f3ecf945b98{display: inline-grid;width: 100%;min-width: 0;max-width: 100%;gap: var(--token-semantic-field-layout-row-gap, var(--token-global-space-1, 4px));}.rc-select-3bd2a27273ad{padding-inline: var(--token-semantic-field-support-padding-inline, var(--token-global-space-4, 16px));color: var(--select-field-label-color, var(--token-semantic-color-text-secondary, var(--token-global-material-neutral-variant-30, oklch(0.39805288 0.01735545 303.720936))));font-size: var(--select-field-label-font-size, var(--token-semantic-typography-body-small-font-size, var(--token-global-font-size-xs, 12px)));line-height: var(--select-field-support-line-height, var(--token-semantic-typography-body-small-line-height, var(--token-global-line-height-12-16, 1.3333333333333333)));overflow-wrap: anywhere;}.rc-select-3bd2a27273ad[data-status="error"]{color: var(--select-field-color-error, var(--token-semantic-color-feedback-error-text, var(--token-global-material-error-10, oklch(0.25390329 0.07937181 27.605486))));}.rc-select-3bd2a27273ad[data-status="warning"]{color: var(--select-field-color-warning, var(--token-semantic-color-feedback-warning-text, var(--token-global-amber-900, oklch(0.414 0.112 68))));}@media (forced-colors: active){.rc-select-3bd2a27273ad{color: CanvasText;}}.rc-select-df4a743b55e1{padding: var(--select-size-large-padding, var(--token-semantic-space-inline-gap, var(--token-global-space-1, 4px)) var(--token-semantic-field-control-padding-inline, var(--token-global-space-4, 16px)));--select-clear-width: var(--select-size-large-action-width, var(--token-semantic-sizing-large-action, var(--token-global-size-32, 32px)));--select-clear-height: var(--select-size-large-action-width, var(--token-semantic-sizing-large-action, var(--token-global-size-32, 32px)));font-size: var(--select-size-large-font-size, var(--token-semantic-field-input-font-size, var(--token-global-font-size-md, 16px)));line-height: var(--select-size-large-line-height, var(--token-semantic-field-input-line-height, var(--token-global-space-6, 24px)));}.rc-select-de4a743b542e{padding: var(--select-size-medium-padding, var(--token-semantic-space-inline-gap, var(--token-global-space-1, 4px)) var(--token-semantic-field-control-padding-inline, var(--token-global-space-4, 16px)));--select-clear-width: var(--select-size-medium-action-width, var(--token-semantic-sizing-medium-action, var(--token-global-space-7, 28px)));--select-clear-height: var(--select-size-medium-action-width, var(--token-semantic-sizing-medium-action, var(--token-global-space-7, 28px)));font-size: var(--select-size-medium-font-size, var(--token-semantic-field-input-font-size, var(--token-global-font-size-md, 16px)));line-height: var(--select-size-medium-line-height, var(--token-semantic-field-input-line-height, var(--token-global-space-6, 24px)));}.rc-select-dd4a743b527b{padding: var(--select-size-small-padding, 0 var(--token-semantic-field-control-padding-inline, var(--token-global-space-4, 16px)));--select-clear-width: var(--select-size-small-action-width, var(--token-semantic-sizing-small-action, var(--token-global-space-6, 24px)));--select-clear-height: var(--select-size-small-action-width, var(--token-semantic-sizing-small-action, var(--token-global-space-6, 24px)));font-size: var(--select-size-small-font-size, var(--token-semantic-field-input-font-size, var(--token-global-font-size-md, 16px)));line-height: var(--select-size-small-line-height, var(--token-semantic-field-input-line-height, var(--token-global-space-6, 24px)));}.rc-select-b8fc5925a597{height: max(var(--select-size-large-height, var(--token-semantic-sizing-large-field, var(--token-global-size-40, 40px))), var(--select-field-min-height, var(--token-semantic-field-control-min-height, var(--token-global-size-56, 56px))), calc(1lh + 2 * var(--select-root-border-width, 1px)));}.rc-select-b7fc5925a3e4{height: max(var(--select-size-medium-height, var(--token-semantic-sizing-medium-field, var(--token-global-size-36, 36px))), var(--select-field-min-height, var(--token-semantic-field-control-min-height, var(--token-global-size-56, 56px))), calc(1lh + 2 * var(--select-root-border-width, 1px)));}.rc-select-bafc5925a8fd{height: max(var(--select-size-small-height, var(--token-semantic-sizing-small-field, var(--token-global-size-32, 32px))), var(--select-field-min-height, var(--token-semantic-field-control-min-height, var(--token-global-size-56, 56px))), calc(1lh + 2 * var(--select-root-border-width, 1px)));}.rc-select-5d07f79a2f4a{min-height: max(var(--select-size-large-height, var(--token-semantic-sizing-large-field, var(--token-global-size-40, 40px))), var(--select-field-min-height, var(--token-semantic-field-control-min-height, var(--token-global-size-56, 56px))));}.rc-select-5e07f79a30fd{min-height: max(var(--select-size-medium-height, var(--token-semantic-sizing-medium-field, var(--token-global-size-36, 36px))), var(--select-field-min-height, var(--token-semantic-field-control-min-height, var(--token-global-size-56, 56px))));}.rc-select-5b07f79a2be4{min-height: max(var(--select-size-small-height, var(--token-semantic-sizing-small-field, var(--token-global-size-32, 32px))), var(--select-field-min-height, var(--token-semantic-field-control-min-height, var(--token-global-size-56, 56px))));}.rc-select-5e896678dc89{position: relative;display: inline-flex;align-items: center;width: 100%;box-sizing: border-box;border: var(--select-root-border-width, 1px) var(--select-root-border-style, solid) var(--select-root-border-color, var(--token-semantic-color-border-default, var(--token-global-material-neutral-variant-50, oklch(0.56674707 0.01627446 308.142182))));border-radius: var(--select-root-border-radius, var(--token-semantic-shape-control, var(--token-global-radius-2, 4px)));background-color: var(--select-root-background-color, var(--token-semantic-color-surface-content, var(--token-semantic-color-background-surface, var(--token-global-material-neutral-98, oklch(0.98379491 0.01284496 321.893957)))));box-shadow: var(--select-root-box-shadow, var(--token-semantic-field-control-shadow, none));color: var(--select-text-color, var(--token-semantic-color-text-primary, var(--token-global-material-neutral-10, oklch(0.22652446 0.00999107 303.713695))));cursor: pointer;user-select: none;outline: none;transition: var(--select-root-transition, background-color var(--token-semantic-motion-interaction, var(--token-global-duration-150, 150ms) var(--token-global-easing-expressive-effects-fast, cubic-bezier(0.31, 0.94, 0.34, 1.00))), border-color var(--token-semantic-motion-interaction, var(--token-global-duration-150, 150ms) var(--token-global-easing-expressive-effects-fast, cubic-bezier(0.31, 0.94, 0.34, 1.00))), color var(--token-semantic-motion-interaction, var(--token-global-duration-150, 150ms) var(--token-global-easing-expressive-effects-fast, cubic-bezier(0.31, 0.94, 0.34, 1.00))), box-shadow var(--token-semantic-motion-interaction, var(--token-global-duration-150, 150ms) var(--token-global-easing-expressive-effects-fast, cubic-bezier(0.31, 0.94, 0.34, 1.00))));}.rc-select-5e896678dc89:hover:not([aria-disabled="true"]):not(:focus-within):not([aria-expanded="true"]):not([data-status]){border-color: var(--select-root-border-color-hover, var(--token-semantic-color-border-hover, var(--token-global-material-neutral-10, oklch(0.22652446 0.00999107 303.713695))));}.rc-select-5e896678dc89:is(:focus-within, [aria-expanded="true"]){border-color: var(--select-root-border-color-focus, var(--token-semantic-color-border-focus, var(--token-global-purple-40, oklch(0.49552086 0.13045663 293.709078))));box-shadow: var(--select-root-box-shadow-focus, var(--token-semantic-field-control-shadow-focus, inset 0 0 0 2px var(--token-semantic-color-border-focus, var(--token-global-purple-40, oklch(0.49552086 0.13045663 293.709078)))));}@media (prefers-reduced-motion: reduce){.rc-select-5e896678dc89{transition: none;}}@media (pointer: coarse){.rc-select-5e896678dc89.rc-select-5e896678dc89{min-height: max(var(--select-field-min-height, var(--token-semantic-field-control-min-height, var(--token-global-size-56, 56px))), calc(var(--select-root-touch-min-height, var(--token-semantic-size-touch-target, var(--token-global-size-48, 48px))) + 2 * var(--select-root-border-width, 1px)));padding-block: 0;--select-clear-width: var(--select-clear-touch-width, var(--token-semantic-size-touch-target, var(--token-global-size-48, 48px)));}}@media (forced-colors: active){.rc-select-5e896678dc89{border-color: ButtonText;}.rc-select-5e896678dc89:is(:focus-within, [aria-expanded="true"]){outline: var(--select-root-outline-width-focus, 2px) solid Highlight;outline-offset: var(--select-root-outline-offset-focus, 2px);}.rc-select-5e896678dc89[aria-disabled='true']{border-color: GrayText;color: GrayText;}}.rc-select-29edc097b42b{grid-column: 1;grid-row: 1;}.rc-select-29edc097b42b[data-labeled="true"]{grid-row: var(--token-semantic-field-layout-control-row, 1);}.rc-select-29edc097b42b[data-appearance="filled"][data-labeled="true"] > [data-role="select-value"]{padding-top: var(--token-semantic-field-input-filled-padding-top, var(--token-global-space-4, 16px));}.rc-select-29edc097b42b[data-appearance="filled"]{border-radius: var(--token-semantic-field-filled-border-radius, var(--token-global-radius-2, 4px) var(--token-global-radius-2, 4px) 0 0);border-width: var(--token-semantic-field-filled-border-width, 0 0 1px);border-color: var(--token-semantic-field-filled-border-color, var(--token-semantic-color-text-secondary, var(--token-global-material-neutral-variant-30, oklch(0.39805288 0.01735545 303.720936))));background: var(--token-semantic-field-filled-background-color, var(--token-semantic-color-surface-highest, var(--token-global-material-neutral-90, oklch(0.91401081 0.01366394 314.754144))));}.rc-select-29edc097b42b[data-appearance="filled"]:hover:not([aria-disabled="true"]):not(:focus-within):not([aria-expanded="true"]){background: var(--token-semantic-field-filled-background-color-hover, color-mix(in oklch, var(--token-semantic-color-text-primary, var(--token-global-material-neutral-10, oklch(0.22652446 0.00999107 303.713695))) 8%, var(--token-semantic-color-surface-highest, var(--token-global-material-neutral-90, oklch(0.91401081 0.01366394 314.754144)))));}:is(.rc-select-29edc097b42b[data-appearance="filled"]:hover:not([aria-disabled="true"]):not(:focus-within):not([aria-expanded="true"])):not([data-status]){border-color: var(--token-semantic-field-filled-border-color-hover, var(--token-semantic-color-text-primary, var(--token-global-material-neutral-10, oklch(0.22652446 0.00999107 303.713695))));}.rc-select-29edc097b42b[data-appearance="filled"]:is(:focus-within, [aria-expanded="true"]){border-color: var(--token-semantic-field-filled-border-color-focus, var(--token-semantic-color-border-focus, var(--token-global-purple-40, oklch(0.49552086 0.13045663 293.709078))));box-shadow: var(--token-semantic-field-filled-shadow-focus, inset 0 -2px 0 var(--token-semantic-color-border-focus, var(--token-global-purple-40, oklch(0.49552086 0.13045663 293.709078))));}.rc-select-29edc097b42b.rc-select-29edc097b42b[data-appearance="filled"][data-status="error"]{border-color: var(--select-root-border-color-error, var(--token-semantic-color-feedback-error-border, var(--token-global-material-error-40, oklch(0.50128208 0.17831791 28.704727))));}:is(.rc-select-29edc097b42b.rc-select-29edc097b42b[data-appearance="filled"][data-status="error"]):is(:focus-within, [aria-expanded="true"]){box-shadow: var(--token-semantic-field-filled-shadow-error, inset 0 -2px 0 var(--token-semantic-color-feedback-error-border, var(--token-global-material-error-40, oklch(0.50128208 0.17831791 28.704727))));}.rc-select-29edc097b42b.rc-select-29edc097b42b[data-appearance="filled"][data-status="warning"]{border-color: var(--select-root-border-color-warning, var(--token-semantic-color-feedback-warning-border, var(--token-global-amber-700, oklch(0.555 0.163 71))));}:is(.rc-select-29edc097b42b.rc-select-29edc097b42b[data-appearance="filled"][data-status="warning"]):is(:focus-within, [aria-expanded="true"]){box-shadow: var(--token-semantic-field-filled-shadow-warning, inset 0 -2px 0 var(--token-semantic-color-feedback-warning-border, var(--token-global-amber-600, oklch(0.666 0.179 73))));}.rc-select-29edc097b42b.rc-select-29edc097b42b[data-appearance="outlined"][data-labeled="true"]{border-color: var(--token-semantic-field-outlined-border-color, transparent);}:is(.rc-select-29edc097b42b.rc-select-29edc097b42b[data-appearance="outlined"][data-labeled="true"]):hover:not([aria-disabled="true"]):not(:focus-within):not([aria-expanded="true"]){border-color: var(--token-semantic-field-outlined-border-color-hover, transparent);}:is(.rc-select-29edc097b42b.rc-select-29edc097b42b[data-appearance="outlined"][data-labeled="true"]):is(:focus-within, [aria-expanded="true"]){border-color: var(--token-semantic-field-outlined-border-color-focus, transparent);box-shadow: var(--token-semantic-field-outlined-shadow-focus, none);}:is(.rc-select-29edc097b42b.rc-select-29edc097b42b[data-appearance="outlined"][data-labeled="true"])[data-status="error"]{border-color: var(--token-semantic-field-outlined-border-color-error, transparent);}:is(:is(.rc-select-29edc097b42b.rc-select-29edc097b42b[data-appearance="outlined"][data-labeled="true"])[data-status="error"]):hover{border-color: var(--token-semantic-field-outlined-border-color-error, transparent);}:is(:is(.rc-select-29edc097b42b.rc-select-29edc097b42b[data-appearance="outlined"][data-labeled="true"])[data-status="error"]):is(:focus-within, [aria-expanded="true"]){box-shadow: var(--token-semantic-field-outlined-shadow-error, none);}:is(.rc-select-29edc097b42b.rc-select-29edc097b42b[data-appearance="outlined"][data-labeled="true"])[data-status="warning"]{border-color: var(--token-semantic-field-outlined-border-color-warning, transparent);}:is(:is(.rc-select-29edc097b42b.rc-select-29edc097b42b[data-appearance="outlined"][data-labeled="true"])[data-status="warning"]):hover{border-color: var(--token-semantic-field-outlined-border-color-warning, transparent);}:is(:is(.rc-select-29edc097b42b.rc-select-29edc097b42b[data-appearance="outlined"][data-labeled="true"])[data-status="warning"]):is(:focus-within, [aria-expanded="true"]){box-shadow: var(--token-semantic-field-outlined-shadow-warning, none);}.rc-select-29edc097b42b > fieldset{display: var(--token-semantic-field-outline-display, block);position: absolute;inset: calc(0px - var(--token-semantic-field-label-floating-line-height, var(--token-global-space-4, 16px)) / 2) 0 0;margin: 0;padding: 0;min-width: 0;pointer-events: none;border: var(--select-root-border-width, 1px) solid var(--select-root-border-color, var(--token-semantic-color-border-default, var(--token-global-material-neutral-variant-50, oklch(0.56674707 0.01627446 308.142182))));border-radius: inherit;}.rc-select-29edc097b42b > fieldset > legend{visibility: hidden;overflow: hidden;max-width: 0;height: var(--token-semantic-field-label-floating-line-height, var(--token-global-space-4, 16px));margin-inline-start: var(--token-semantic-field-outline-legend-margin, var(--token-global-space-3, 12px));padding: 0;font-size: var(--token-semantic-field-label-floating-font-size, var(--token-global-font-size-xs, 12px));line-height: 1;white-space: nowrap;}.rc-select-29edc097b42b:is(:focus-within, [data-floating="true"]) > fieldset > legend{max-width: 100%;padding-inline: var(--token-semantic-field-outline-legend-padding, var(--token-global-space-1, 4px));}.rc-select-29edc097b42b:hover:not([aria-disabled="true"]) > fieldset{border-color: var(--select-root-border-color-hover, var(--token-semantic-color-border-hover, var(--token-global-material-neutral-10, oklch(0.22652446 0.00999107 303.713695))));}.rc-select-29edc097b42b:is(:focus-within, [aria-expanded="true"]) > fieldset{border-color: var(--select-root-border-color-focus, var(--token-semantic-color-border-focus, var(--token-global-purple-40, oklch(0.49552086 0.13045663 293.709078))));border-width: var(--select-field-outline-border-width-focus, 3px);}.rc-select-29edc097b42b.rc-select-29edc097b42b[data-status="error"] > fieldset{border-color: var(--select-root-border-color-error, var(--token-semantic-color-feedback-error-border, var(--token-global-material-error-40, oklch(0.50128208 0.17831791 28.704727))));}.rc-select-29edc097b42b.rc-select-29edc097b42b[data-status="warning"] > fieldset{border-color: var(--select-root-border-color-warning, var(--token-semantic-color-feedback-warning-border, var(--token-global-amber-700, oklch(0.555 0.163 71))));}.rc-select-29edc097b42b.rc-select-29edc097b42b[aria-disabled="true"]{opacity: 1;color: var(--token-semantic-field-disabled-color, color-mix(in oklch, var(--token-semantic-color-text-primary, var(--token-global-material-neutral-10, oklch(0.22652446 0.00999107 303.713695))) 38%, transparent));border-color: var(--token-semantic-field-disabled-border-color, color-mix(in oklch, var(--token-semantic-color-text-primary, var(--token-global-material-neutral-10, oklch(0.22652446 0.00999107 303.713695))) 12%, transparent));box-shadow: none;}:is(.rc-select-29edc097b42b.rc-select-29edc097b42b[aria-disabled="true"]) > fieldset{border-color: var(--token-semantic-field-disabled-border-color, color-mix(in oklch, var(--token-semantic-color-text-primary, var(--token-global-material-neutral-10, oklch(0.22652446 0.00999107 303.713695))) 12%, transparent));}:is(.rc-select-29edc097b42b.rc-select-29edc097b42b[aria-disabled="true"]) [data-role="select-suffix"]{color: inherit;}:is(.rc-select-29edc097b42b.rc-select-29edc097b42b[aria-disabled="true"]) [data-role="select-value"]{color: inherit;}:is(.rc-select-29edc097b42b.rc-select-29edc097b42b[aria-disabled="true"]) [data-role="select-placeholder"],:is(.rc-select-29edc097b42b.rc-select-29edc097b42b[aria-disabled="true"]) [data-role="select-suffix"] button{color: inherit;}:is(.rc-select-29edc097b42b.rc-select-29edc097b42b[aria-disabled="true"]) [data-role="select-suffix"] button span{color: inherit;}:is(.rc-select-29edc097b42b.rc-select-29edc097b42b[aria-disabled="true"])[data-appearance="filled"]{border-color: var(--token-semantic-field-disabled-filled-border-color, color-mix(in oklch, var(--token-semantic-color-text-primary, var(--token-global-material-neutral-10, oklch(0.22652446 0.00999107 303.713695))) 38%, transparent));background: var(--token-semantic-field-disabled-filled-background, color-mix(in oklch, var(--token-semantic-color-text-primary, var(--token-global-material-neutral-10, oklch(0.22652446 0.00999107 303.713695))) 4%, transparent));}:is(.rc-select-29edc097b42b.rc-select-29edc097b42b[aria-disabled="true"])[data-appearance="outlined"][data-labeled="true"]{border-color: var(--token-semantic-field-outlined-border-color, transparent);}@media (forced-colors: active){.rc-select-29edc097b42b.rc-select-29edc097b42b{border-color: CanvasText;background: Canvas;}.rc-select-29edc097b42b > fieldset{display: none;}.rc-select-29edc097b42b[aria-disabled="true"]{border-color: GrayText;}}.rc-select-910e459fbbe0{display: grid;grid-template-columns: minmax(0, 1fr);row-gap: var(--token-semantic-field-layout-row-gap, var(--token-global-space-1, 4px));min-width: 0;}.rc-select-910e459fbbe0 > [data-role="select-label"]{display: inline-flex;gap: var(--token-semantic-field-required-gap, var(--token-global-space-1, 4px));position: relative;z-index: 1;grid-column: 1;grid-row: var(--token-semantic-field-layout-label-row, 1);align-self: var(--token-semantic-field-label-align, center);justify-self: start;min-width: 0;max-width: calc(100% - 2 * var(--select-field-padding-inline, var(--token-semantic-field-control-padding-inline, var(--token-global-space-4, 16px))) - var(--select-clear-width, var(--token-semantic-sizing-medium-action, var(--token-global-space-7, 28px))) - var(--select-field-gap, var(--token-semantic-space-inline-gap, var(--token-global-space-1, 4px))));margin-inline: var(--token-semantic-field-label-margin-inline, var(--token-global-space-4, 16px));overflow: hidden;text-overflow: ellipsis;white-space: nowrap;pointer-events: none;color: var(--select-field-label-color, var(--token-semantic-color-text-secondary, var(--token-global-material-neutral-variant-30, oklch(0.39805288 0.01735545 303.720936))));font-size: var(--token-semantic-field-label-font-size, var(--token-global-font-size-md, 16px));line-height: var(--token-semantic-field-label-line-height, var(--token-global-space-6, 24px));transition: var(--select-field-transition, top var(--token-semantic-motion-interaction, var(--token-global-duration-150, 150ms) var(--token-global-easing-expressive-effects-fast, cubic-bezier(0.31, 0.94, 0.34, 1.00))), font-size var(--token-semantic-motion-interaction, var(--token-global-duration-150, 150ms) var(--token-global-easing-expressive-effects-fast, cubic-bezier(0.31, 0.94, 0.34, 1.00))), color var(--token-semantic-motion-interaction, var(--token-global-duration-150, 150ms) var(--token-global-easing-expressive-effects-fast, cubic-bezier(0.31, 0.94, 0.34, 1.00))), background-color var(--token-semantic-motion-interaction, var(--token-global-duration-150, 150ms) var(--token-global-easing-expressive-effects-fast, cubic-bezier(0.31, 0.94, 0.34, 1.00))));}:is(.rc-select-910e459fbbe0 > [data-role="select-label"]) > [data-required-marker]{flex-shrink: 0;order: var(--token-semantic-field-required-order, 1);color: var(--token-semantic-field-required-color, inherit);}:is(.rc-select-910e459fbbe0 > [data-role="select-label"]) > [id]{min-width: 0;overflow: hidden;text-overflow: ellipsis;}.rc-select-910e459fbbe0:is(:focus-within, [data-floating="true"]) > [data-role="select-label"]{align-self: var(--token-semantic-field-label-floating-align, start);font-size: var(--token-semantic-field-label-floating-font-size, var(--token-global-font-size-xs, 12px));line-height: var(--token-semantic-field-label-floating-line-height, var(--token-global-space-4, 16px));transform: var(--token-semantic-field-label-floating-transform, translateY(-50%));}.rc-select-910e459fbbe0[data-appearance="filled"]:is(:focus-within, [data-floating="true"]) > [data-role="select-label"]{margin-block-start: var(--token-semantic-field-label-filled-offset, var(--token-global-space-2, 8px));transform: none;}.rc-select-910e459fbbe0:is(:focus-within, [data-open="true"]) > [data-role="select-label"]{color: var(--select-field-label-color-focus, var(--token-semantic-field-label-color-focus, var(--token-semantic-color-brand-primary, var(--token-global-purple-40, oklch(0.49552086 0.13045663 293.709078)))));}.rc-select-910e459fbbe0[data-status="error"] > [data-role="select-label"]{color: var(--select-field-color-error, var(--token-semantic-color-feedback-error-text, var(--token-global-material-error-10, oklch(0.25390329 0.07937181 27.605486))));}.rc-select-910e459fbbe0[data-status="warning"] > [data-role="select-label"]{color: var(--select-field-color-warning, var(--token-semantic-color-feedback-warning-text, var(--token-global-amber-900, oklch(0.414 0.112 68))));}.rc-select-910e459fbbe0[data-disabled="true"] > [data-role="select-label"]{color: var(--token-semantic-field-disabled-color, color-mix(in oklch, var(--token-semantic-color-text-primary, var(--token-global-material-neutral-10, oklch(0.22652446 0.00999107 303.713695))) 38%, transparent));}.rc-select-910e459fbbe0[data-disabled="true"] > [data-role="select-label"] > [data-required-marker]{color: inherit;}.rc-select-910e459fbbe0[data-labeled="true"][data-floating="false"]:not(:focus-within) [data-role="select-placeholder"]{color: var(--token-semantic-field-label-empty-placeholder-color, transparent);}@media (prefers-reduced-motion: reduce){.rc-select-910e459fbbe0 > [data-role="select-label"]{transition: none;}}@media (forced-colors: active){.rc-select-910e459fbbe0 > [data-role="select-label"]{color: CanvasText;}.rc-select-910e459fbbe0 > [data-role="select-label"] > [data-required-marker]{color: inherit;}.rc-select-910e459fbbe0[data-disabled="true"] > [data-role="select-label"]{color: GrayText;}}.rc-select-82fbf3807561{opacity: var(--select-root-opacity-disabled, var(--token-semantic-opacity-disabled, var(--token-global-opacity-38, 0.38)));cursor: not-allowed;pointer-events: none;}.rc-select-6d2a034155e7{border-color: var(--select-root-border-color-error, var(--token-semantic-color-feedback-error-border, var(--token-global-material-error-40, oklch(0.50128208 0.17831791 28.704727))));}.rc-select-6d2a034155e7:hover:not([aria-disabled="true"]){border-color: var(--select-root-border-color-error, var(--token-semantic-color-feedback-error-border, var(--token-global-material-error-40, oklch(0.50128208 0.17831791 28.704727))));}.rc-select-6d2a034155e7:is(:focus-within, [aria-expanded="true"]){border-color: var(--select-root-border-color-error, var(--token-semantic-color-feedback-error-border, var(--token-global-material-error-40, oklch(0.50128208 0.17831791 28.704727))));box-shadow: var(--select-root-validation-box-shadow-error, var(--token-semantic-field-control-shadow-error, inset 0 0 0 2px var(--token-semantic-color-feedback-error-border, var(--token-global-material-error-40, oklch(0.50128208 0.17831791 28.704727)))));}.rc-select-36466465840d{border-color: var(--select-root-border-color-warning, var(--token-semantic-color-feedback-warning-border, var(--token-global-amber-700, oklch(0.555 0.163 71))));}.rc-select-36466465840d:hover:not([aria-disabled="true"]){border-color: var(--select-root-border-color-warning, var(--token-semantic-color-feedback-warning-border, var(--token-global-amber-700, oklch(0.555 0.163 71))));}.rc-select-36466465840d:is(:focus-within, [aria-expanded="true"]){border-color: var(--select-root-border-color-warning, var(--token-semantic-color-feedback-warning-border, var(--token-global-amber-700, oklch(0.555 0.163 71))));box-shadow: var(--select-root-validation-box-shadow-warning, var(--token-semantic-field-control-shadow-warning, inset 0 0 0 2px var(--token-semantic-color-feedback-warning-border, var(--token-global-amber-600, oklch(0.666 0.179 73)))));}.rc-select-f0b8a9c0c369{display: flex;align-items: center;flex-wrap: wrap;gap: 4px;flex: 1;min-width: 0;overflow: hidden;}.rc-select-bcd33343d38d{overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}.rc-select-30719d992205{color: var(--select-text-color-placeholder, var(--token-semantic-color-text-secondary, var(--token-global-material-neutral-variant-30, oklch(0.39805288 0.01735545 303.720936))));overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}.rc-select-c91210473c12{flex: 1;min-width: 0;}/* The Select field owns focus, including forced colors; avoid a second ring. */
|
|
2
|
+
.rc-select-c91210473c12.rc-select-c91210473c12:focus-within{outline: none;}.rc-select-8ca15a371517{flex-shrink: 0;display: inline-flex;align-items: center;justify-content: center;width: var(--select-icon-width, var(--token-semantic-field-icon-size, var(--token-global-space-6, 24px)));height: var(--select-icon-width, var(--token-semantic-field-icon-size, var(--token-global-space-6, 24px)));color: var(--select-icon-color, var(--token-semantic-color-text-secondary, var(--token-global-material-neutral-variant-30, oklch(0.39805288 0.01735545 303.720936))));}.rc-select-8ca15a371517 > svg{width: 100%;height: 100%;}.rc-select-8ca15a371517{transition: transform var(--select-motion-spatial-transition, var(--token-semantic-motion-spatial-fast, var(--token-global-duration-350, 350ms) var(--token-global-easing-expressive-spatial-fast, cubic-bezier(0.42, 1.67, 0.21, 0.90))));}@media (prefers-reduced-motion: reduce){.rc-select-8ca15a371517{transition: none;}}.rc-select-72a72768a0ef{transform: rotate(180deg);}.rc-select-113a9493f812{overflow: hidden;text-overflow: ellipsis;white-space: nowrap;max-width: 120px;}.rc-select-5032f5885db7{display: inline-flex;align-items: center;justify-content: center;flex-shrink: 0;gap: var(--select-field-gap, var(--token-semantic-space-inline-gap, var(--token-global-space-1, 4px)));margin-inline-start: var(--select-field-gap, var(--token-semantic-space-inline-gap, var(--token-global-space-1, 4px)));}.rc-select-aa51540f6a1a{flex-shrink: 0;}.rc-select-aa51540f6a1a.rc-select-aa51540f6a1a{--button-icon-width: var(--select-icon-width, var(--token-semantic-field-icon-size, var(--token-global-space-6, 24px)));padding: 0;width: var(--select-clear-width, var(--token-semantic-sizing-medium-action, var(--token-global-space-7, 28px)));min-width: var(--select-clear-width, var(--token-semantic-sizing-medium-action, var(--token-global-space-7, 28px)));height: var(--select-clear-height, var(--token-semantic-sizing-medium-action, var(--token-global-space-7, 28px)));color: var(--select-clear-color, var(--token-semantic-color-text-secondary, var(--token-global-material-neutral-variant-30, oklch(0.39805288 0.01735545 303.720936))));}.rc-select-aa51540f6a1a.rc-select-aa51540f6a1a:hover{color: var(--select-clear-color-hover, var(--token-semantic-color-text-primary, var(--token-global-material-neutral-10, oklch(0.22652446 0.00999107 303.713695))));}/* 字段容器已经应用禁用透明度。 */
|
|
3
|
+
.rc-select-aa51540f6a1a.rc-select-aa51540f6a1a:disabled > span{opacity: 1;}@media (pointer: coarse){.rc-select-aa51540f6a1a.rc-select-aa51540f6a1a{width: var(--select-clear-touch-width, var(--token-semantic-size-touch-target, var(--token-global-size-48, 48px)));min-width: var(--select-clear-touch-width, var(--token-semantic-size-touch-target, var(--token-global-size-48, 48px)));height: var(--select-clear-touch-width, var(--token-semantic-size-touch-target, var(--token-global-size-48, 48px)));}}.rc-select-14f1c2e4ccd5{display: inline-flex;align-items: center;color: var(--select-root-color-loading, var(--token-semantic-color-text-secondary, var(--token-global-material-neutral-variant-30, oklch(0.39805288 0.01735545 303.720936))));flex-shrink: 0;--rc-spin-size: var(--select-icon-width, var(--token-semantic-field-icon-size, var(--token-global-space-6, 24px)));--spin-ring-indicator-stroke: currentColor;--spin-ring-track-stroke: transparent;}.rc-select-2b62562b9766{padding: var(--select-dropdown-padding, var(--token-semantic-space-inline-gap, var(--token-global-space-1, 4px)));overflow: hidden;}.rc-select-4c26800476b7{position: relative;display: flex;align-items: center;width: 100%;padding: var(--select-option-padding-block, var(--token-semantic-space-inline-gap, var(--token-global-space-1, 4px))) 8px;border-radius: var(--select-option-border-radius, var(--token-semantic-field-option-radius, var(--token-global-radius-0, 0px)));cursor: pointer;user-select: none;height: max(var(--select-option-height, var(--token-semantic-density-item, var(--token-semantic-density-standard-item, var(--token-global-size-32, 32px)))), calc(1lh + 2 * var(--select-option-padding-block, var(--token-semantic-space-inline-gap, var(--token-global-space-1, 4px)))));}@media (pointer: coarse){.rc-select-4c26800476b7{min-height: var(--select-root-touch-min-height, var(--token-semantic-size-touch-target, var(--token-global-size-48, 48px)));}}.rc-select-4c26800476b7{box-sizing: border-box;font-size: var(--select-option-font-size, var(--token-semantic-typography-body-medium-font-size, var(--token-global-font-size-sm, 14px)));line-height: var(--select-option-line-height, var(--token-semantic-typography-body-medium-line-height, var(--token-global-line-height-14-20, 1.4285714285714286)));outline: none;transition: var(--select-root-transition, background-color var(--token-semantic-motion-interaction, var(--token-global-duration-150, 150ms) var(--token-global-easing-expressive-effects-fast, cubic-bezier(0.31, 0.94, 0.34, 1.00))), border-color var(--token-semantic-motion-interaction, var(--token-global-duration-150, 150ms) var(--token-global-easing-expressive-effects-fast, cubic-bezier(0.31, 0.94, 0.34, 1.00))), color var(--token-semantic-motion-interaction, var(--token-global-duration-150, 150ms) var(--token-global-easing-expressive-effects-fast, cubic-bezier(0.31, 0.94, 0.34, 1.00))), box-shadow var(--token-semantic-motion-interaction, var(--token-global-duration-150, 150ms) var(--token-global-easing-expressive-effects-fast, cubic-bezier(0.31, 0.94, 0.34, 1.00))));}.rc-select-4c26800476b7:hover:not([aria-disabled='true']){background-color: var(--select-option-background-color-hover, var(--token-semantic-color-state-hover, var(--token-semantic-color-background-hover-subtle, color-mix(in oklch, var(--token-global-material-neutral-10, oklch(0.22652446 0.00999107 303.713695)) calc(var(--token-semantic-state-opacity-hover, var(--token-global-opacity-8, 0.08)) * 100%), var(--token-global-material-neutral-98, oklch(0.98379491 0.01284496 321.893957))))));}.rc-select-4c26800476b7:active:not([aria-disabled='true']){background-color: var(--select-option-background-color-active, var(--token-semantic-color-state-pressed, var(--token-semantic-color-background-active-subtle, color-mix(in oklch, var(--token-global-material-neutral-10, oklch(0.22652446 0.00999107 303.713695)) calc(var(--token-semantic-state-opacity-pressed, var(--token-global-opacity-12, 0.12)) * 100%), var(--token-global-material-neutral-98, oklch(0.98379491 0.01284496 321.893957))))));}/* Selection stays visible beneath independent hover, pressed and active-descendant feedback. */
|
|
4
|
+
.rc-select-4c26800476b7[aria-selected="true"]{background-color: var(--select-option-background-color-selected, var(--token-semantic-field-option-background-selected, var(--token-semantic-color-brand-container, var(--token-global-purple-90, oklch(0.91829316 0.04770250 302.827510)))));color: var(--select-option-color-selected, var(--token-semantic-field-option-color-selected, var(--token-semantic-color-brand-on-container, var(--token-global-purple-10, oklch(0.24199786 0.14038488 286.089811)))));}.rc-select-4c26800476b7[aria-selected="true"]:hover:not([aria-disabled='true']){background-color: var(--select-option-selection-background-color-hover, color-mix(in oklch, var(--token-semantic-field-option-color-selected, var(--token-semantic-color-brand-on-container, var(--token-global-purple-10, oklch(0.24199786 0.14038488 286.089811)))) calc(var(--token-semantic-state-opacity-hover, var(--token-global-opacity-8, 0.08)) * 100%), var(--token-semantic-field-option-background-selected, var(--token-semantic-color-brand-container, var(--token-global-purple-90, oklch(0.91829316 0.04770250 302.827510))))));}.rc-select-4c26800476b7[aria-selected="true"]:active:not([aria-disabled='true']){background-color: var(--select-option-selection-background-color-active, color-mix(in oklch, var(--token-semantic-field-option-color-selected, var(--token-semantic-color-brand-on-container, var(--token-global-purple-10, oklch(0.24199786 0.14038488 286.089811)))) calc(var(--token-semantic-state-opacity-pressed, var(--token-global-opacity-12, 0.12)) * 100%), var(--token-semantic-field-option-background-selected, var(--token-semantic-color-brand-container, var(--token-global-purple-90, oklch(0.91829316 0.04770250 302.827510))))));}.rc-select-4c26800476b7[data-highlighted="true"]{outline: var(--select-option-activity-outline-width, 2px) solid var(--select-option-activity-outline-color, var(--token-semantic-color-focus-ring, var(--token-semantic-color-border-focus, var(--token-global-purple-40, oklch(0.49552086 0.13045663 293.709078)))));outline-offset: var(--select-option-activity-outline-offset, -2px);}@media (prefers-reduced-motion: reduce){.rc-select-4c26800476b7{transition: none;}}@media (forced-colors: active){.rc-select-4c26800476b7{forced-color-adjust: none;background: Canvas;color: CanvasText;}.rc-select-4c26800476b7:hover:not([aria-disabled='true']),.rc-select-4c26800476b7:active:not([aria-disabled='true']){background: Canvas;}.rc-select-4c26800476b7[aria-selected='true']{background: Highlight;color: HighlightText;}.rc-select-4c26800476b7[aria-selected='true']:hover:not([aria-disabled='true']),.rc-select-4c26800476b7[aria-selected='true']:active:not([aria-disabled='true']){background: Highlight;color: HighlightText;}.rc-select-4c26800476b7[data-highlighted='true']{outline-color: CanvasText;}.rc-select-4c26800476b7[aria-selected='true'][data-highlighted='true']{outline-color: HighlightText;}.rc-select-4c26800476b7[aria-disabled='true']{color: GrayText;}}.rc-select-868bf53a2d33{background-color: var(--select-option-highlight-background-color, var(--token-semantic-color-state-hover, var(--token-semantic-color-background-hover-subtle, color-mix(in oklch, var(--token-global-material-neutral-10, oklch(0.22652446 0.00999107 303.713695)) calc(var(--token-semantic-state-opacity-hover, var(--token-global-opacity-8, 0.08)) * 100%), var(--token-global-material-neutral-98, oklch(0.98379491 0.01284496 321.893957))))));}.rc-select-f4efdbe79bde{position: absolute;visibility: hidden;pointer-events: none;width: 1px;overflow: hidden;}.rc-select-dca4819751f4{font-weight: 500;}.rc-select-b8e7cfd3837c{font-weight: 500;color: var(--select-option-color-selected, var(--token-semantic-field-option-color-selected, var(--token-semantic-color-brand-on-container, var(--token-global-purple-10, oklch(0.24199786 0.14038488 286.089811)))));}.rc-select-fd6a969fdc3f{opacity: var(--select-root-opacity-disabled, var(--token-semantic-opacity-disabled, var(--token-global-opacity-38, 0.38)));cursor: not-allowed;pointer-events: none;}@media (forced-colors: active){.rc-select-fd6a969fdc3f{opacity: 1;}}.rc-select-d58ef5724e7d{overflow: hidden;text-overflow: ellipsis;white-space: nowrap;flex: 1;min-width: 0;}.rc-select-bbb208831319{display: inline-flex;align-items: center;justify-content: center;flex-shrink: 0;width: 16px;height: 16px;margin-inline-start: 8px;color: var(--select-option-color-selected, var(--token-semantic-field-option-color-selected, var(--token-semantic-color-brand-on-container, var(--token-global-purple-10, oklch(0.24199786 0.14038488 286.089811)))));}.rc-select-52f500f177fc{/* The option row owns the hit area; its checkbox is a decorative indicator. */
|
|
5
|
+
--checkbox-control-target-width: var(--select-option-checkbox-width, var(--token-semantic-size-icon, var(--token-global-space-4, 16px)));--checkbox-root-touch-min-width: var(--select-option-checkbox-width, var(--token-semantic-size-icon, var(--token-global-space-4, 16px)));--checkbox-root-touch-min-height: var(--select-option-checkbox-width, var(--token-semantic-size-icon, var(--token-global-space-4, 16px)));display: inline-flex;flex-shrink: 0;margin-inline-end: 8px;pointer-events: none;}.rc-select-e84bd23bdc99{padding: 24px 8px;color: var(--select-text-color-placeholder, var(--token-semantic-color-text-secondary, var(--token-global-material-neutral-variant-30, oklch(0.39805288 0.01735545 303.720936))));text-align: center;font-size: var(--select-option-font-size, var(--token-semantic-typography-body-medium-font-size, var(--token-global-font-size-sm, 14px)));}.rc-select-3ce923bc7749{display: flex;align-items: center;padding: 4px 8px;height: var(--select-option-measured-height, var(--select-option-height, var(--token-semantic-density-item, var(--token-semantic-density-standard-item, var(--token-global-size-32, 32px)))));}@media (pointer: coarse){.rc-select-3ce923bc7749{min-height: var(--select-root-touch-min-height, var(--token-semantic-size-touch-target, var(--token-global-size-48, 48px)));}}.rc-select-3ce923bc7749{box-sizing: border-box;font-size: var(--select-group-font-size, var(--token-semantic-typography-caption-font-size, var(--token-global-font-size-xs, 12px)));color: var(--select-group-color, var(--token-semantic-color-text-secondary, var(--token-global-material-neutral-variant-30, oklch(0.39805288 0.01735545 303.720936))));font-weight: 500;user-select: none;}.rc-select-16181d2683cf{padding-inline-start: 20px;}.rc-select-7804943b918e{display: block;width: 100%;height: var(--crab-rc-virtual-top-padding-height, 0px);}.rc-select-86002077b8c2{display: block;width: 100%;height: var(--crab-rc-virtual-bottom-padding-height, 0px);}.rc-select-3809e79e5752{display: flex;align-items: center;justify-content: center;padding: 24px 8px;color: var(--select-root-color-loading, var(--token-semantic-color-text-secondary, var(--token-global-material-neutral-variant-30, oklch(0.39805288 0.01735545 303.720936))));--rc-spin-size: 20px;--spin-ring-indicator-stroke: currentColor;--spin-ring-track-stroke: transparent;}
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
import RcDropdownContainer, { type DropdownOpenChangeDetails } from "@crab-dev/rc-dropdown-container";
|
|
2
|
+
import type { ReactNode } from 'react';
|
|
3
|
+
import type { FlatOption, SelectChangeDetails, SelectOption, SelectOptionGroup, SelectOptionOrGroup, SelectProps } from "./types.js";
|
|
4
|
+
declare function SelectField({ children }: { children: ReactNode }): import("react").JSX.Element;
|
|
5
|
+
declare function Select({
|
|
6
|
+
ref,
|
|
7
|
+
id,
|
|
8
|
+
options,
|
|
9
|
+
placeholder,
|
|
10
|
+
disabled,
|
|
11
|
+
searchable,
|
|
12
|
+
multiple,
|
|
13
|
+
size: sizeProp,
|
|
14
|
+
status,
|
|
15
|
+
appearance,
|
|
16
|
+
label,
|
|
17
|
+
supportingText,
|
|
18
|
+
errorText,
|
|
19
|
+
required,
|
|
20
|
+
allowClear,
|
|
21
|
+
loading,
|
|
22
|
+
maxTagCount,
|
|
23
|
+
autoFocus,
|
|
24
|
+
notFoundContent,
|
|
25
|
+
popupClassName,
|
|
26
|
+
popupMatchSelectWidth,
|
|
27
|
+
optionRender,
|
|
28
|
+
tagRender,
|
|
29
|
+
dropdownRender,
|
|
30
|
+
value,
|
|
31
|
+
defaultValue,
|
|
32
|
+
onValueChange,
|
|
33
|
+
open,
|
|
34
|
+
defaultOpen,
|
|
35
|
+
onOpenChange,
|
|
36
|
+
onFocus,
|
|
37
|
+
onBlur,
|
|
38
|
+
className,
|
|
39
|
+
"aria-label": ariaLabel,
|
|
40
|
+
"aria-labelledby": ariaLabelledBy,
|
|
41
|
+
"aria-describedby": ariaDescribedBy,
|
|
42
|
+
...restProps
|
|
43
|
+
}: SelectProps): import("react").JSX.Element;
|
|
44
|
+
export default Select;
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
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; };
|
|
2
|
+
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; }; };
|
|
3
|
+
export default token;
|
|
@@ -0,0 +1,79 @@
|
|
|
1
|
+
import type { HTMLAttributes, ReactNode, Ref, SyntheticEvent } from "react";
|
|
2
|
+
import type { DropdownOpenChangeDetails } from '@crab-dev/rc-dropdown-container';
|
|
3
|
+
import type { ControlledValueProps, ControlledOpenProps } from '@crab-dev/rc-hooks';
|
|
4
|
+
export interface SelectOption {
|
|
5
|
+
label: ReactNode;
|
|
6
|
+
value: string;
|
|
7
|
+
disabled?: boolean;
|
|
8
|
+
}
|
|
9
|
+
export interface SelectOptionGroup {
|
|
10
|
+
label: ReactNode;
|
|
11
|
+
options: SelectOption[];
|
|
12
|
+
}
|
|
13
|
+
export type SelectOptionOrGroup = SelectOption | SelectOptionGroup;
|
|
14
|
+
export interface FlatOption {
|
|
15
|
+
label: ReactNode;
|
|
16
|
+
value: string;
|
|
17
|
+
disabled?: boolean;
|
|
18
|
+
isGroupLabel?: boolean;
|
|
19
|
+
}
|
|
20
|
+
interface BaseSelectProps extends Omit<HTMLAttributes<HTMLDivElement>, "defaultValue"> {
|
|
21
|
+
// 字段外观,默认 outlined
|
|
22
|
+
appearance?: "outlined" | "filled";
|
|
23
|
+
// 可见的浮动字段标签
|
|
24
|
+
label?: string;
|
|
25
|
+
// 字段下方的辅助说明
|
|
26
|
+
supportingText?: string;
|
|
27
|
+
// 错误说明;提供时自动启用 error 状态并替换辅助说明
|
|
28
|
+
errorText?: string;
|
|
29
|
+
// 表单必填语义与标签星号
|
|
30
|
+
required?: boolean;
|
|
31
|
+
// combobox 容器 DOM 节点的 ref
|
|
32
|
+
ref?: Ref<HTMLDivElement>;
|
|
33
|
+
// 数据源:支持扁平选项数组或分组数组
|
|
34
|
+
options: SelectOptionOrGroup[];
|
|
35
|
+
// 占位符文本
|
|
36
|
+
placeholder?: string;
|
|
37
|
+
// 是否禁用整个组件
|
|
38
|
+
disabled?: boolean;
|
|
39
|
+
// 是否可搜索(显示输入框以过滤选项)
|
|
40
|
+
searchable?: boolean;
|
|
41
|
+
// 组件尺寸;省略时继承 ConfigProvider,未配置时为 medium
|
|
42
|
+
size?: "large" | "medium" | "small";
|
|
43
|
+
// 状态:用于显示错误或警告的边框样式
|
|
44
|
+
status?: "error" | "warning";
|
|
45
|
+
// 是否允许清除;有已选项且未禁用时,悬停字段或聚焦尾部按钮会将箭头切换为清除
|
|
46
|
+
allowClear?: boolean;
|
|
47
|
+
// 是否处于加载状态(显示加载指示器)
|
|
48
|
+
loading?: boolean;
|
|
49
|
+
// 多选时的最大展示 tag 数量,超出则简写为 +n
|
|
50
|
+
maxTagCount?: number;
|
|
51
|
+
// 是否自动聚焦输入
|
|
52
|
+
autoFocus?: boolean;
|
|
53
|
+
// 无匹配项时的自定义渲染内容
|
|
54
|
+
notFoundContent?: ReactNode;
|
|
55
|
+
// 下拉菜单额外 className
|
|
56
|
+
popupClassName?: string;
|
|
57
|
+
// 下拉宽度是否与 Select 宽度保持一致
|
|
58
|
+
popupMatchSelectWidth?: boolean;
|
|
59
|
+
// 自定义选项渲染函数,提供当前选项及其选中状态
|
|
60
|
+
optionRender?: (option: SelectOption, info: { selected: boolean }) => ReactNode;
|
|
61
|
+
// 自定义 tag 渲染(多选时)
|
|
62
|
+
tagRender?: (option: SelectOption, onClose: (event?: SyntheticEvent<HTMLElement>) => void) => ReactNode;
|
|
63
|
+
// 自定义下拉菜单整体渲染(包裹原始菜单)
|
|
64
|
+
dropdownRender?: (menu: ReactNode) => ReactNode;
|
|
65
|
+
}
|
|
66
|
+
export type SingleSelectProps = BaseSelectProps & ControlledValueProps<string | null, SelectChangeDetails> & ControlledOpenProps<DropdownOpenChangeDetails> & {
|
|
67
|
+
multiple?: false;
|
|
68
|
+
};
|
|
69
|
+
export type MultiSelectProps = BaseSelectProps & ControlledValueProps<string[], SelectChangeDetails> & ControlledOpenProps<DropdownOpenChangeDetails> & {
|
|
70
|
+
multiple: true;
|
|
71
|
+
};
|
|
72
|
+
export type SelectProps = SingleSelectProps | MultiSelectProps;
|
|
73
|
+
export interface SelectChangeDetails {
|
|
74
|
+
reason: 'select' | 'deselect' | 'clear' | 'remove';
|
|
75
|
+
options: readonly SelectOption[];
|
|
76
|
+
option?: SelectOption;
|
|
77
|
+
/** 由用户交互触发时保留原事件;自定义标签也可主动调用无事件的关闭命令。 */
|
|
78
|
+
event?: SyntheticEvent<HTMLElement>;
|
|
79
|
+
}
|