@sia.soul/sia-react-ui 0.1.76 → 0.1.78
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/chart.js +2 -3
- package/dist/{chunk-Q4FDV6KP.js → chunk-BDS42FR3.js} +2 -4
- package/dist/{chunk-JNZXYBGM.js → chunk-GODBVCIQ.js} +2 -2
- package/dist/chunk-JZWTTSOZ.js +131 -0
- package/dist/{chunk-QDZXP2UO.js → chunk-NK2FZWKM.js} +8 -10
- package/dist/{chunk-TKCXP6RZ.js → chunk-WXERMWTW.js} +113 -436
- package/dist/{chunk-YMOOL62S.js → chunk-XHLIIDD2.js} +407 -21
- package/dist/{chunk-TG7ZYXA7.js → chunk-Y4Y2NVBM.js} +35 -12
- package/dist/{core-CBLT4Vfl.d.ts → core-0ml74Q-C.d.ts} +7 -0
- package/dist/{core-Bx07vzrr.d.cts → core-vGTHkzIa.d.cts} +7 -0
- package/dist/core.cjs +336 -275
- package/dist/core.css +19 -0
- package/dist/core.d.cts +1 -1
- package/dist/core.d.ts +1 -1
- package/dist/core.js +5 -6
- package/dist/index.cjs +1038 -952
- package/dist/index.css +19 -0
- package/dist/index.d.cts +3 -3
- package/dist/index.d.ts +3 -3
- package/dist/index.js +13 -15
- package/dist/rich-text-editor.cjs +522 -74
- package/dist/rich-text-editor.js +3 -3
- package/dist/{select-date-range-DN4eBuVx.d.cts → select-date-range-CRWxqHFp.d.cts} +2 -2
- package/dist/{select-date-range-YrK9kuKW.d.ts → select-date-range-rtYL9egr.d.ts} +2 -2
- package/dist/select-date-range.cjs +338 -188
- package/dist/select-date-range.d.cts +1 -1
- package/dist/select-date-range.d.ts +1 -1
- package/dist/select-date-range.js +4 -4
- package/package.json +1 -1
- package/dist/chunk-IKAMZNCK.js +0 -65
- package/dist/chunk-SMCYEPBL.js +0 -73
|
@@ -1734,7 +1734,7 @@ function DatePanelFooter({
|
|
|
1734
1734
|
}) {
|
|
1735
1735
|
return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("footer", { className: "sia-date-panel__footer", children: [
|
|
1736
1736
|
/* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { children: [
|
|
1737
|
-
showToday ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { type: "button", onClick: onToday, children: "\
|
|
1737
|
+
showToday ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { type: "button", onClick: onToday, children: "\u6B64\u523B" }) : null,
|
|
1738
1738
|
extra
|
|
1739
1739
|
] }),
|
|
1740
1740
|
needConfirm ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { type: "button", className: "sia-date-panel__confirm", disabled: disabledConfirm, onClick: onConfirm, children: confirmText }) : null
|
|
@@ -1859,17 +1859,17 @@ function DatePicker({
|
|
|
1859
1859
|
if (maximum && day > String(maximum).slice(0, 10)) return true;
|
|
1860
1860
|
return disabledDate?.(day, { type: "date" }) ?? false;
|
|
1861
1861
|
}
|
|
1862
|
-
function buildValue(day) {
|
|
1862
|
+
function buildValue(day, time = draftTime) {
|
|
1863
1863
|
const picked = formatPickerValue(day, picker);
|
|
1864
|
-
return showTime && picker === "date" ? withTime(picked,
|
|
1864
|
+
return showTime && picker === "date" ? withTime(picked, time, showSecond) : picked;
|
|
1865
1865
|
}
|
|
1866
|
-
function selectDate(day) {
|
|
1866
|
+
function selectDate(day, time = draftTime, ensureSelected = false) {
|
|
1867
1867
|
if (isDisabled(day)) return;
|
|
1868
|
-
const nextValue = buildValue(day);
|
|
1868
|
+
const nextValue = buildValue(day, time);
|
|
1869
1869
|
if (multiple) {
|
|
1870
1870
|
const current = Array.isArray(draftValue) ? [...draftValue] : [];
|
|
1871
1871
|
const exists = current.some((item) => dayFromValue(item) === day);
|
|
1872
|
-
const next = exists ? current.filter((item) => dayFromValue(item) !== day) : [...current, nextValue];
|
|
1872
|
+
const next = exists ? ensureSelected ? current.map((item) => dayFromValue(item) === day ? nextValue : item) : current.filter((item) => dayFromValue(item) !== day) : [...current, nextValue];
|
|
1873
1873
|
setDraftValue(next);
|
|
1874
1874
|
if (!resolvedNeedConfirm) setCurrentValue(next);
|
|
1875
1875
|
return;
|
|
@@ -1961,7 +1961,15 @@ function DatePicker({
|
|
|
1961
1961
|
showToday,
|
|
1962
1962
|
needConfirm: resolvedNeedConfirm,
|
|
1963
1963
|
disabledConfirm: Array.isArray(draftValue) ? draftValue.length === 0 : !draftValue,
|
|
1964
|
-
onToday: () =>
|
|
1964
|
+
onToday: () => {
|
|
1965
|
+
const now = /* @__PURE__ */ new Date();
|
|
1966
|
+
const day = dateKey(now);
|
|
1967
|
+
if (isDisabled(day)) return;
|
|
1968
|
+
const time = [now.getHours(), now.getMinutes(), now.getSeconds()].map(pad).join(":");
|
|
1969
|
+
if (showTime) setDraftTime(time);
|
|
1970
|
+
setViewMonth(startOfMonth(now));
|
|
1971
|
+
selectDate(day, time, true);
|
|
1972
|
+
},
|
|
1965
1973
|
onConfirm: commitDraft
|
|
1966
1974
|
}
|
|
1967
1975
|
)
|
|
@@ -2122,10 +2130,13 @@ function DateRangePicker({
|
|
|
2122
2130
|
changeOpen(false);
|
|
2123
2131
|
}
|
|
2124
2132
|
}
|
|
2125
|
-
function selectDateTime(day, index) {
|
|
2133
|
+
function selectDateTime(day, index, time = index === 1 ? "23:59:59" : times[index]) {
|
|
2126
2134
|
if (isDisabled(day, index, true)) return;
|
|
2135
|
+
const nextTimes = [...times];
|
|
2136
|
+
nextTimes[index] = time;
|
|
2137
|
+
setTimes(nextTimes);
|
|
2127
2138
|
const nextValue = [...draftValue];
|
|
2128
|
-
nextValue[index] =
|
|
2139
|
+
nextValue[index] = withTime(day, time, showSecond);
|
|
2129
2140
|
updateDraft(nextValue);
|
|
2130
2141
|
setHoverDate("");
|
|
2131
2142
|
setActiveIndex(index);
|
|
@@ -2341,7 +2352,19 @@ function DateRangePicker({
|
|
|
2341
2352
|
" \u5929"
|
|
2342
2353
|
] }) : null
|
|
2343
2354
|
] }),
|
|
2344
|
-
onToday: () =>
|
|
2355
|
+
onToday: () => {
|
|
2356
|
+
const now = /* @__PURE__ */ new Date();
|
|
2357
|
+
const day = dateKey(now);
|
|
2358
|
+
if (isDisabled(day, activeIndex, Boolean(showTime))) return;
|
|
2359
|
+
if (showTime) {
|
|
2360
|
+
const time = [now.getHours(), now.getMinutes(), now.getSeconds()].map(pad).join(":");
|
|
2361
|
+
(activeIndex === 0 ? setViewMonth : setEndViewMonth)(startOfMonth(now));
|
|
2362
|
+
selectDateTime(day, activeIndex, time);
|
|
2363
|
+
} else {
|
|
2364
|
+
setViewMonth(startOfMonth(now));
|
|
2365
|
+
selectDate(day);
|
|
2366
|
+
}
|
|
2367
|
+
},
|
|
2345
2368
|
onConfirm: confirm
|
|
2346
2369
|
}
|
|
2347
2370
|
)
|
|
@@ -2353,7 +2376,7 @@ function DateRangePicker({
|
|
|
2353
2376
|
})(DatePicker || (DatePicker = {}));
|
|
2354
2377
|
|
|
2355
2378
|
// src/components/Select.tsx
|
|
2356
|
-
var
|
|
2379
|
+
var import_react17 = require("react");
|
|
2357
2380
|
|
|
2358
2381
|
// src/components/Modal.tsx
|
|
2359
2382
|
var import_react10 = require("react");
|
|
@@ -2734,9 +2757,75 @@ var Modal2 = Object.assign(ModalRoot, {
|
|
|
2734
2757
|
});
|
|
2735
2758
|
|
|
2736
2759
|
// src/components/Input.tsx
|
|
2760
|
+
var import_react12 = require("react");
|
|
2761
|
+
|
|
2762
|
+
// src/components/TextArea.tsx
|
|
2737
2763
|
var import_react11 = require("react");
|
|
2738
2764
|
var import_jsx_runtime10 = require("react/jsx-runtime");
|
|
2739
|
-
var
|
|
2765
|
+
var TextArea = (0, import_react11.forwardRef)(function TextArea2({
|
|
2766
|
+
label,
|
|
2767
|
+
hint,
|
|
2768
|
+
status = "default",
|
|
2769
|
+
size: sizeProp,
|
|
2770
|
+
showCount = false,
|
|
2771
|
+
placeholder,
|
|
2772
|
+
placeholderMode,
|
|
2773
|
+
className = "",
|
|
2774
|
+
id,
|
|
2775
|
+
disabled,
|
|
2776
|
+
value,
|
|
2777
|
+
defaultValue,
|
|
2778
|
+
maxLength,
|
|
2779
|
+
onChange,
|
|
2780
|
+
...props
|
|
2781
|
+
}, ref) {
|
|
2782
|
+
const size = useControlSize(sizeProp);
|
|
2783
|
+
const fallbackId = (0, import_react11.useId)();
|
|
2784
|
+
const textAreaId = id ?? fallbackId;
|
|
2785
|
+
const [uncontrolledValue, setUncontrolledValue] = (0, import_react11.useState)(() => defaultValue === void 0 ? "" : String(defaultValue));
|
|
2786
|
+
const currentText = value !== void 0 ? String(value) : uncontrolledValue;
|
|
2787
|
+
const floating = useFloatingPlaceholder({ mode: placeholderMode, placeholder, filled: currentText.length > 0 });
|
|
2788
|
+
const hintId = `${textAreaId}-hint`;
|
|
2789
|
+
const describedBy = [props["aria-describedby"], hint ? hintId : null].filter(Boolean).join(" ") || void 0;
|
|
2790
|
+
function handleChange(event) {
|
|
2791
|
+
setUncontrolledValue(event.target.value);
|
|
2792
|
+
onChange?.(event);
|
|
2793
|
+
}
|
|
2794
|
+
const control = /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: `sia-textarea-control sia-textarea-control--${size} sia-textarea-control--${status}${floating.className}${disabled ? " is-disabled" : ""}`, children: [
|
|
2795
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
2796
|
+
"textarea",
|
|
2797
|
+
{
|
|
2798
|
+
...withTitleTooltip(props),
|
|
2799
|
+
ref,
|
|
2800
|
+
id: textAreaId,
|
|
2801
|
+
className: "sia-textarea",
|
|
2802
|
+
disabled,
|
|
2803
|
+
value,
|
|
2804
|
+
defaultValue,
|
|
2805
|
+
maxLength,
|
|
2806
|
+
placeholder,
|
|
2807
|
+
"aria-describedby": describedBy,
|
|
2808
|
+
"aria-invalid": status === "error" || void 0,
|
|
2809
|
+
onChange: handleChange
|
|
2810
|
+
}
|
|
2811
|
+
),
|
|
2812
|
+
floating.label,
|
|
2813
|
+
showCount ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: `sia-textarea-control__count${maxLength !== void 0 && currentText.length >= maxLength ? " is-limit" : ""}`, "aria-live": "polite", children: [
|
|
2814
|
+
currentText.length,
|
|
2815
|
+
maxLength !== void 0 ? `/${maxLength}` : null
|
|
2816
|
+
] }) : null
|
|
2817
|
+
] });
|
|
2818
|
+
if (!label && !hint) return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: `sia-field ${className}`.trim(), children: control });
|
|
2819
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: `sia-field ${className}`.trim(), children: [
|
|
2820
|
+
label ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("label", { className: "sia-field__label", htmlFor: textAreaId, children: label }) : null,
|
|
2821
|
+
control,
|
|
2822
|
+
hint ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { id: hintId, className: `sia-field__hint sia-field__hint--${status}`, children: hint }) : null
|
|
2823
|
+
] });
|
|
2824
|
+
});
|
|
2825
|
+
|
|
2826
|
+
// src/components/Input.tsx
|
|
2827
|
+
var import_jsx_runtime11 = require("react/jsx-runtime");
|
|
2828
|
+
var Input = (0, import_react12.forwardRef)(function Input2({
|
|
2740
2829
|
label,
|
|
2741
2830
|
hint,
|
|
2742
2831
|
status = "default",
|
|
@@ -2755,15 +2844,18 @@ var Input = (0, import_react11.forwardRef)(function Input2({
|
|
|
2755
2844
|
defaultValue,
|
|
2756
2845
|
maxLength,
|
|
2757
2846
|
onChange,
|
|
2847
|
+
expandable = false,
|
|
2758
2848
|
...props
|
|
2759
2849
|
}, forwardedRef) {
|
|
2760
2850
|
const size = useControlSize(sizeProp);
|
|
2761
|
-
const fallbackId = (0,
|
|
2851
|
+
const fallbackId = (0, import_react12.useId)();
|
|
2762
2852
|
const inputId = id ?? fallbackId;
|
|
2763
|
-
const localRef = (0,
|
|
2764
|
-
const [uncontrolledValue, setUncontrolledValue] = (0,
|
|
2853
|
+
const localRef = (0, import_react12.useRef)(null);
|
|
2854
|
+
const [uncontrolledValue, setUncontrolledValue] = (0, import_react12.useState)(() => defaultValue === void 0 ? "" : String(defaultValue));
|
|
2765
2855
|
const currentText = value !== void 0 ? String(value) : uncontrolledValue;
|
|
2766
2856
|
const hasValue = currentText.length > 0;
|
|
2857
|
+
const [expanded, setExpanded] = (0, import_react12.useState)(false);
|
|
2858
|
+
const [expandedDraft, setExpandedDraft] = (0, import_react12.useState)("");
|
|
2767
2859
|
const floatingPlaceholder = usePlaceholderMode(placeholderMode) === "floating" && Boolean(placeholder);
|
|
2768
2860
|
const hintId = `${inputId}-hint`;
|
|
2769
2861
|
const describedBy = [props["aria-describedby"], hint ? hintId : null].filter(Boolean).join(" ") || void 0;
|
|
@@ -2799,7 +2891,7 @@ var Input = (0, import_react11.forwardRef)(function Input2({
|
|
|
2799
2891
|
event.preventDefault();
|
|
2800
2892
|
localRef.current?.focus({ preventScroll: true });
|
|
2801
2893
|
}
|
|
2802
|
-
const input = /* @__PURE__ */ (0,
|
|
2894
|
+
const input = /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
|
2803
2895
|
"input",
|
|
2804
2896
|
{
|
|
2805
2897
|
...withTitleTooltip(props),
|
|
@@ -2816,39 +2908,97 @@ var Input = (0, import_react11.forwardRef)(function Input2({
|
|
|
2816
2908
|
onChange: handleChange
|
|
2817
2909
|
}
|
|
2818
2910
|
);
|
|
2819
|
-
const control = /* @__PURE__ */ (0,
|
|
2820
|
-
prefix ? /* @__PURE__ */ (0,
|
|
2821
|
-
floatingPlaceholder ? /* @__PURE__ */ (0,
|
|
2911
|
+
const control = /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("span", { onMouseDown: handleControlMouseDown, className: `sia-input-control sia-input-control--${size} sia-input-control--${status}${floatingPlaceholder ? " sia-input-control--floating" : ""}${floatingPlaceholder && hasValue ? " is-filled" : ""}${disabled ? " is-disabled" : ""}`, children: [
|
|
2912
|
+
prefix ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "sia-input-control__affix", children: prefix }) : null,
|
|
2913
|
+
floatingPlaceholder ? /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("span", { className: "sia-input-control__input-wrap", children: [
|
|
2822
2914
|
input,
|
|
2823
|
-
/* @__PURE__ */ (0,
|
|
2915
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "sia-input-control__floating-placeholder", "aria-hidden": "true", children: placeholder })
|
|
2824
2916
|
] }) : input,
|
|
2825
|
-
allowClear && hasValue && !disabled ? /* @__PURE__ */ (0,
|
|
2826
|
-
suffix ? /* @__PURE__ */ (0,
|
|
2827
|
-
|
|
2917
|
+
allowClear && hasValue && !disabled ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("button", { className: "sia-input-control__clear", type: "button", "aria-label": "\u6E05\u7A7A\u8F93\u5165", onClick: clearValue, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Icon, { name: "circle-close", variant: "filled", size: 15 }) }) : null,
|
|
2918
|
+
suffix ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "sia-input-control__affix", children: suffix }) : null,
|
|
2919
|
+
expandable && !disabled && !props.readOnly && (!props.type || props.type === "text") ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
|
2920
|
+
"button",
|
|
2921
|
+
{
|
|
2922
|
+
type: "button",
|
|
2923
|
+
className: "sia-input-control__expand",
|
|
2924
|
+
"aria-label": "\u5C55\u5F00\u7F16\u8F91",
|
|
2925
|
+
title: "\u5C55\u5F00\u7F16\u8F91",
|
|
2926
|
+
onClick: () => {
|
|
2927
|
+
if (localRef.current?.matches(":disabled")) return;
|
|
2928
|
+
setExpandedDraft(currentText);
|
|
2929
|
+
setExpanded(true);
|
|
2930
|
+
},
|
|
2931
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Icon, { name: "expand", size: 15 })
|
|
2932
|
+
}
|
|
2933
|
+
) : null,
|
|
2934
|
+
showCount ? /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("span", { className: `sia-input-control__count${maxLength !== void 0 && currentText.length >= maxLength ? " is-limit" : ""}`, "aria-live": "polite", children: [
|
|
2828
2935
|
currentText.length,
|
|
2829
2936
|
maxLength !== void 0 ? `/${maxLength}` : null
|
|
2830
2937
|
] }) : null
|
|
2831
2938
|
] });
|
|
2832
|
-
|
|
2833
|
-
|
|
2834
|
-
|
|
2835
|
-
|
|
2836
|
-
|
|
2939
|
+
const editor = expandable ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
|
2940
|
+
Modal2,
|
|
2941
|
+
{
|
|
2942
|
+
open: expanded,
|
|
2943
|
+
title: "\u5C55\u5F00\u7F16\u8F91",
|
|
2944
|
+
okText: "\u786E\u5B9A",
|
|
2945
|
+
cancelText: "\u53D6\u6D88",
|
|
2946
|
+
onCancel: () => setExpanded(false),
|
|
2947
|
+
afterOpenChange: (open) => {
|
|
2948
|
+
if (!open) setExpandedDraft("");
|
|
2949
|
+
},
|
|
2950
|
+
onOk: () => {
|
|
2951
|
+
const target = localRef.current;
|
|
2952
|
+
if (!target || target.matches(":disabled") || props.readOnly) return false;
|
|
2953
|
+
const normalized = expandedDraft.replace(/\r\n|[\r\n]/g, " ");
|
|
2954
|
+
const next = maxLength !== void 0 && maxLength >= 0 ? normalized.slice(0, maxLength) : normalized;
|
|
2955
|
+
Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value")?.set?.call(target, next);
|
|
2956
|
+
target.dispatchEvent(new Event("input", { bubbles: true }));
|
|
2957
|
+
setUncontrolledValue(next);
|
|
2958
|
+
setExpanded(false);
|
|
2959
|
+
},
|
|
2960
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
|
2961
|
+
TextArea,
|
|
2962
|
+
{
|
|
2963
|
+
"aria-label": "\u5C55\u5F00\u7F16\u8F91\u5185\u5BB9",
|
|
2964
|
+
value: expandedDraft,
|
|
2965
|
+
onChange: (event) => setExpandedDraft(event.target.value),
|
|
2966
|
+
maxLength,
|
|
2967
|
+
showCount,
|
|
2968
|
+
placeholder,
|
|
2969
|
+
rows: 8,
|
|
2970
|
+
disabled,
|
|
2971
|
+
readOnly: props.readOnly
|
|
2972
|
+
}
|
|
2973
|
+
)
|
|
2974
|
+
}
|
|
2975
|
+
) : null;
|
|
2976
|
+
if (!label && !hint) return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
|
|
2977
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: `sia-field ${className}`.trim(), children: control }),
|
|
2978
|
+
editor
|
|
2979
|
+
] });
|
|
2980
|
+
return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
|
|
2981
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("span", { className: `sia-field ${className}`.trim(), children: [
|
|
2982
|
+
label ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("label", { className: "sia-field__label", htmlFor: inputId, children: label }) : null,
|
|
2983
|
+
control,
|
|
2984
|
+
hint ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { id: hintId, className: `sia-field__hint sia-field__hint--${status}`, children: hint }) : null
|
|
2985
|
+
] }),
|
|
2986
|
+
editor
|
|
2837
2987
|
] });
|
|
2838
2988
|
});
|
|
2839
2989
|
|
|
2840
2990
|
// src/components/Checkbox.tsx
|
|
2841
|
-
var
|
|
2842
|
-
var
|
|
2843
|
-
var CheckboxGroupContext = (0,
|
|
2844
|
-
var CheckboxRoot = (0,
|
|
2991
|
+
var import_react13 = require("react");
|
|
2992
|
+
var import_jsx_runtime12 = require("react/jsx-runtime");
|
|
2993
|
+
var CheckboxGroupContext = (0, import_react13.createContext)(null);
|
|
2994
|
+
var CheckboxRoot = (0, import_react13.forwardRef)(function Checkbox({ value, size: sizeProp, indeterminate = false, children, disabled, checked, defaultChecked, className = "", onChange, ...props }, forwardedRef) {
|
|
2845
2995
|
const size = useControlSize(sizeProp);
|
|
2846
|
-
const group = (0,
|
|
2847
|
-
const localRef = (0,
|
|
2848
|
-
const fallbackId = (0,
|
|
2996
|
+
const group = (0, import_react13.useContext)(CheckboxGroupContext);
|
|
2997
|
+
const localRef = (0, import_react13.useRef)(null);
|
|
2998
|
+
const fallbackId = (0, import_react13.useId)();
|
|
2849
2999
|
const grouped = group !== null && value !== void 0;
|
|
2850
3000
|
const currentChecked = grouped ? group.values.includes(value) : checked;
|
|
2851
|
-
(0,
|
|
3001
|
+
(0, import_react13.useEffect)(() => {
|
|
2852
3002
|
if (localRef.current) localRef.current.indeterminate = indeterminate;
|
|
2853
3003
|
}, [indeterminate]);
|
|
2854
3004
|
function setRef(node) {
|
|
@@ -2856,8 +3006,8 @@ var CheckboxRoot = (0, import_react12.forwardRef)(function Checkbox({ value, siz
|
|
|
2856
3006
|
if (typeof forwardedRef === "function") forwardedRef(node);
|
|
2857
3007
|
else if (forwardedRef) forwardedRef.current = node;
|
|
2858
3008
|
}
|
|
2859
|
-
return /* @__PURE__ */ (0,
|
|
2860
|
-
/* @__PURE__ */ (0,
|
|
3009
|
+
return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("label", { className: `sia-checkbox sia-checkbox--${size}${disabled || group?.disabled ? " is-disabled" : ""} ${className}`.trim(), children: [
|
|
3010
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
2861
3011
|
"input",
|
|
2862
3012
|
{
|
|
2863
3013
|
...withTitleTooltip(props),
|
|
@@ -2876,8 +3026,8 @@ var CheckboxRoot = (0, import_react12.forwardRef)(function Checkbox({ value, siz
|
|
|
2876
3026
|
}
|
|
2877
3027
|
}
|
|
2878
3028
|
),
|
|
2879
|
-
/* @__PURE__ */ (0,
|
|
2880
|
-
children !== void 0 ? /* @__PURE__ */ (0,
|
|
3029
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "sia-checkbox__control", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", {}) }),
|
|
3030
|
+
children !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "sia-checkbox__label", children }) : null
|
|
2881
3031
|
] });
|
|
2882
3032
|
});
|
|
2883
3033
|
function CheckboxGroup({
|
|
@@ -2901,7 +3051,7 @@ function CheckboxGroup({
|
|
|
2901
3051
|
gap: gap === void 0 ? void 0 : typeof gap === "number" ? Math.max(0, gap) : `${Math.max(0, gap[0])}px ${Math.max(0, gap[1])}px`
|
|
2902
3052
|
};
|
|
2903
3053
|
const [values, setValues] = useControllableState({ value, defaultValue, onChange });
|
|
2904
|
-
const context = (0,
|
|
3054
|
+
const context = (0, import_react13.useMemo)(() => ({
|
|
2905
3055
|
values,
|
|
2906
3056
|
disabled,
|
|
2907
3057
|
name,
|
|
@@ -2910,10 +3060,10 @@ function CheckboxGroup({
|
|
|
2910
3060
|
setValues(next);
|
|
2911
3061
|
}
|
|
2912
3062
|
}), [disabled, name, setValues, values]);
|
|
2913
|
-
return /* @__PURE__ */ (0,
|
|
3063
|
+
return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ControlSizeContext.Provider, { value: size, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(CheckboxGroupContext.Provider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: `sia-checkbox-group${gridColumns ? " sia-checkbox-group--grid" : direction === "vertical" ? " sia-checkbox-group--vertical" : ""} ${className}`.trim(), style: layoutStyle, role: "group", children: [
|
|
2914
3064
|
options?.map((option) => {
|
|
2915
3065
|
const normalized = typeof option === "object" ? option : { label: String(option), value: option };
|
|
2916
|
-
return /* @__PURE__ */ (0,
|
|
3066
|
+
return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(CheckboxRoot, { value: normalized.value, disabled: normalized.disabled, children: normalized.label }, normalized.value);
|
|
2917
3067
|
}),
|
|
2918
3068
|
children
|
|
2919
3069
|
] }) }) });
|
|
@@ -2924,12 +3074,12 @@ var Checkbox2 = Object.assign(CheckboxRoot, {
|
|
|
2924
3074
|
});
|
|
2925
3075
|
|
|
2926
3076
|
// src/components/SelectionPanel.tsx
|
|
2927
|
-
var
|
|
3077
|
+
var import_react15 = require("react");
|
|
2928
3078
|
|
|
2929
3079
|
// src/components/FloatingDisplay.tsx
|
|
2930
|
-
var
|
|
3080
|
+
var import_react14 = require("react");
|
|
2931
3081
|
var import_react_dom3 = require("react-dom");
|
|
2932
|
-
var
|
|
3082
|
+
var import_jsx_runtime13 = require("react/jsx-runtime");
|
|
2933
3083
|
var FLOATING_GAP = 9;
|
|
2934
3084
|
var FLOATING_VIEWPORT_PADDING = 8;
|
|
2935
3085
|
var FLOATING_ARROW_EDGE_OFFSET = 16;
|
|
@@ -3014,23 +3164,23 @@ function Floating({
|
|
|
3014
3164
|
role = "tooltip",
|
|
3015
3165
|
onOpenChange
|
|
3016
3166
|
}) {
|
|
3017
|
-
const rootRef = (0,
|
|
3018
|
-
const triggerElementRef = (0,
|
|
3019
|
-
const overlayRef = (0,
|
|
3020
|
-
const enterTimer = (0,
|
|
3021
|
-
const leaveTimer = (0,
|
|
3022
|
-
const contentId = (0,
|
|
3167
|
+
const rootRef = (0, import_react14.useRef)(null);
|
|
3168
|
+
const triggerElementRef = (0, import_react14.useRef)(null);
|
|
3169
|
+
const overlayRef = (0, import_react14.useRef)(null);
|
|
3170
|
+
const enterTimer = (0, import_react14.useRef)();
|
|
3171
|
+
const leaveTimer = (0, import_react14.useRef)();
|
|
3172
|
+
const contentId = (0, import_react14.useId)();
|
|
3023
3173
|
const triggers = Array.isArray(trigger) ? trigger : [trigger];
|
|
3024
3174
|
const [visible, setVisible] = useControllableState({ value: open, defaultValue: defaultOpen, onChange: onOpenChange });
|
|
3025
|
-
const [position, setPosition] = (0,
|
|
3026
|
-
const [portalContainer, setPortalContainer] = (0,
|
|
3027
|
-
(0,
|
|
3175
|
+
const [position, setPosition] = (0, import_react14.useState)();
|
|
3176
|
+
const [portalContainer, setPortalContainer] = (0, import_react14.useState)(null);
|
|
3177
|
+
(0, import_react14.useLayoutEffect)(() => {
|
|
3028
3178
|
if (!visible) return;
|
|
3029
3179
|
setPortalContainer(rootRef.current?.closest(".sia-modal-root, .sia-drawer-root") ?? document.body);
|
|
3030
3180
|
});
|
|
3031
|
-
const setVisibleRef = (0,
|
|
3181
|
+
const setVisibleRef = (0, import_react14.useRef)(setVisible);
|
|
3032
3182
|
setVisibleRef.current = setVisible;
|
|
3033
|
-
const closeSelfRef = (0,
|
|
3183
|
+
const closeSelfRef = (0, import_react14.useRef)();
|
|
3034
3184
|
if (!closeSelfRef.current) closeSelfRef.current = () => setVisibleRef.current(false);
|
|
3035
3185
|
const exclusiveTooltip = role === "tooltip" && triggers.includes("hover");
|
|
3036
3186
|
function openNow() {
|
|
@@ -3058,7 +3208,7 @@ function Floating({
|
|
|
3058
3208
|
if (delay <= 0) closeNow();
|
|
3059
3209
|
else leaveTimer.current = window.setTimeout(closeNow, delay * 1e3);
|
|
3060
3210
|
}
|
|
3061
|
-
(0,
|
|
3211
|
+
(0, import_react14.useEffect)(() => {
|
|
3062
3212
|
if (!visible || !triggers.includes("click")) return;
|
|
3063
3213
|
const close = (event) => {
|
|
3064
3214
|
const target = event.target;
|
|
@@ -3067,7 +3217,7 @@ function Floating({
|
|
|
3067
3217
|
document.addEventListener("pointerdown", close);
|
|
3068
3218
|
return () => document.removeEventListener("pointerdown", close);
|
|
3069
3219
|
}, [triggers.join("|"), visible]);
|
|
3070
|
-
(0,
|
|
3220
|
+
(0, import_react14.useLayoutEffect)(() => {
|
|
3071
3221
|
if (!visible) {
|
|
3072
3222
|
setPosition(void 0);
|
|
3073
3223
|
return;
|
|
@@ -3105,11 +3255,11 @@ function Floating({
|
|
|
3105
3255
|
observer.disconnect();
|
|
3106
3256
|
};
|
|
3107
3257
|
}, [children, content, placement, visible, portalContainer, autoAdjustOverflow, typeof arrow === "object" && arrow.pointAtCenter]);
|
|
3108
|
-
(0,
|
|
3258
|
+
(0, import_react14.useEffect)(() => () => {
|
|
3109
3259
|
clearTimers();
|
|
3110
3260
|
if (activeTooltipClose === closeSelfRef.current) activeTooltipClose = void 0;
|
|
3111
3261
|
}, []);
|
|
3112
|
-
const child = (0,
|
|
3262
|
+
const child = (0, import_react14.cloneElement)(children, {
|
|
3113
3263
|
...triggers.includes("hover") ? { onMouseEnter: (event) => {
|
|
3114
3264
|
triggerElementRef.current = event.currentTarget;
|
|
3115
3265
|
children.props.onMouseEnter?.(event);
|
|
@@ -3135,7 +3285,7 @@ function Floating({
|
|
|
3135
3285
|
"aria-describedby": visible ? contentId : void 0
|
|
3136
3286
|
});
|
|
3137
3287
|
const overlay = visible && content !== null && content !== void 0 && typeof document !== "undefined" ? (0, import_react_dom3.createPortal)(
|
|
3138
|
-
/* @__PURE__ */ (0,
|
|
3288
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
|
|
3139
3289
|
"span",
|
|
3140
3290
|
{
|
|
3141
3291
|
ref: overlayRef,
|
|
@@ -3155,23 +3305,23 @@ function Floating({
|
|
|
3155
3305
|
onMouseLeave: triggers.includes("hover") ? () => hide(mouseLeaveDelay) : void 0,
|
|
3156
3306
|
children: [
|
|
3157
3307
|
content,
|
|
3158
|
-
arrow ? /* @__PURE__ */ (0,
|
|
3308
|
+
arrow ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "sia-floating__arrow" }) : null
|
|
3159
3309
|
]
|
|
3160
3310
|
}
|
|
3161
3311
|
),
|
|
3162
3312
|
portalContainer ?? document.body
|
|
3163
3313
|
) : null;
|
|
3164
|
-
return /* @__PURE__ */ (0,
|
|
3165
|
-
/* @__PURE__ */ (0,
|
|
3314
|
+
return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
|
|
3315
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { ref: rootRef, className: `sia-floating ${className}`.trim(), children: child }),
|
|
3166
3316
|
overlay
|
|
3167
3317
|
] });
|
|
3168
3318
|
}
|
|
3169
3319
|
function Tooltip(props) {
|
|
3170
|
-
return /* @__PURE__ */ (0,
|
|
3320
|
+
return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Floating, { ...props, content: props.title });
|
|
3171
3321
|
}
|
|
3172
3322
|
|
|
3173
3323
|
// src/components/SelectionPanel.tsx
|
|
3174
|
-
var
|
|
3324
|
+
var import_jsx_runtime14 = require("react/jsx-runtime");
|
|
3175
3325
|
function SelectionPanel({
|
|
3176
3326
|
options,
|
|
3177
3327
|
value,
|
|
@@ -3192,26 +3342,26 @@ function SelectionPanel({
|
|
|
3192
3342
|
maxHeight = 250,
|
|
3193
3343
|
autoFocusSearch = false
|
|
3194
3344
|
}) {
|
|
3195
|
-
const [localSearch, setLocalSearch] = (0,
|
|
3345
|
+
const [localSearch, setLocalSearch] = (0, import_react15.useState)("");
|
|
3196
3346
|
const search = searchValue ?? localSearch;
|
|
3197
|
-
const [scrollTop, setScrollTop] = (0,
|
|
3198
|
-
const [active, setActive] = (0,
|
|
3199
|
-
const [keyboardActive, setKeyboardActive] = (0,
|
|
3200
|
-
const [deselectedHover, setDeselectedHover] = (0,
|
|
3201
|
-
const listRef = (0,
|
|
3202
|
-
const id = (0,
|
|
3203
|
-
const selected = (0,
|
|
3347
|
+
const [scrollTop, setScrollTop] = (0, import_react15.useState)(0);
|
|
3348
|
+
const [active, setActive] = (0, import_react15.useState)();
|
|
3349
|
+
const [keyboardActive, setKeyboardActive] = (0, import_react15.useState)(false);
|
|
3350
|
+
const [deselectedHover, setDeselectedHover] = (0, import_react15.useState)();
|
|
3351
|
+
const listRef = (0, import_react15.useRef)(null);
|
|
3352
|
+
const id = (0, import_react15.useId)();
|
|
3353
|
+
const selected = (0, import_react15.useMemo)(() => new Set(value), [value]);
|
|
3204
3354
|
const count = Math.max(1, Math.floor(columns));
|
|
3205
|
-
const allOptions = (0,
|
|
3355
|
+
const allOptions = (0, import_react15.useMemo)(() => {
|
|
3206
3356
|
if (!includeUnknownValues) return [...options];
|
|
3207
3357
|
const known = new Set(options.filter((option) => option.optionType !== "divider").map((option) => option.value));
|
|
3208
3358
|
return [...value.filter((item) => !known.has(item)).map((item) => ({ value: item, label: String(item), group: "\u81EA\u5B9A\u4E49\u503C" })), ...options];
|
|
3209
3359
|
}, [options, value, includeUnknownValues]);
|
|
3210
|
-
const filtered = (0,
|
|
3360
|
+
const filtered = (0, import_react15.useMemo)(
|
|
3211
3361
|
() => allOptions.filter((option) => (!selectedOnly || selected.has(option.value)) && (!search || option.optionType !== "divider" && [option.label, option.value].some((text) => String(text ?? "").toLowerCase().includes(search.toLowerCase())))),
|
|
3212
3362
|
[allOptions, selectedOnly, selected, search]
|
|
3213
3363
|
);
|
|
3214
|
-
const rows = (0,
|
|
3364
|
+
const rows = (0, import_react15.useMemo)(() => {
|
|
3215
3365
|
const groups = /* @__PURE__ */ new Map();
|
|
3216
3366
|
filtered.forEach((option) => {
|
|
3217
3367
|
const items = groups.get(option.group) ?? [];
|
|
@@ -3237,7 +3387,7 @@ function SelectionPanel({
|
|
|
3237
3387
|
const virtual = filtered.length > 100;
|
|
3238
3388
|
const renderedRows = virtual ? rows.filter((row) => row.top + row.height >= scrollTop - 100 && row.top <= scrollTop + maxHeight + 100) : rows;
|
|
3239
3389
|
const enabled = filtered.filter((option) => !option.disabled && option.optionType !== "divider");
|
|
3240
|
-
(0,
|
|
3390
|
+
(0, import_react15.useEffect)(() => {
|
|
3241
3391
|
setScrollTop(0);
|
|
3242
3392
|
if (listRef.current) listRef.current.scrollTop = 0;
|
|
3243
3393
|
setActive(void 0);
|
|
@@ -3260,9 +3410,9 @@ function SelectionPanel({
|
|
|
3260
3410
|
const add = enabled.filter((option) => operation === "all" || !selected.has(option.value)).map((option) => option.value);
|
|
3261
3411
|
onChange([...retained, ...add]);
|
|
3262
3412
|
}
|
|
3263
|
-
return /* @__PURE__ */ (0,
|
|
3264
|
-
/* @__PURE__ */ (0,
|
|
3265
|
-
showSearch && /* @__PURE__ */ (0,
|
|
3413
|
+
return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "sia-selection-panel", children: [
|
|
3414
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)(FloatingScrollbarProvider, { targetRef: listRef }),
|
|
3415
|
+
showSearch && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
|
|
3266
3416
|
Input,
|
|
3267
3417
|
{
|
|
3268
3418
|
"aria-label": "\u641C\u7D22\u9009\u9879",
|
|
@@ -3276,17 +3426,17 @@ function SelectionPanel({
|
|
|
3276
3426
|
}
|
|
3277
3427
|
}
|
|
3278
3428
|
),
|
|
3279
|
-
multiple && showActions && /* @__PURE__ */ (0,
|
|
3280
|
-
/* @__PURE__ */ (0,
|
|
3281
|
-
/* @__PURE__ */ (0,
|
|
3282
|
-
/* @__PURE__ */ (0,
|
|
3283
|
-
/* @__PURE__ */ (0,
|
|
3429
|
+
multiple && showActions && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "sia-selection-panel__actions", children: [
|
|
3430
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Button, { variant: "link", size: "small", disabled: disabled || loading || !enabled.length, onClick: () => batch("all"), children: "\u5168\u9009" }),
|
|
3431
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Button, { variant: "link", size: "small", disabled: disabled || loading || !enabled.length, onClick: () => batch("invert"), children: "\u53CD\u9009" }),
|
|
3432
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Button, { variant: "link", size: "small", disabled: disabled || loading || !value.length, onClick: () => batch("clear"), children: "\u6E05\u7A7A" }),
|
|
3433
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("span", { children: [
|
|
3284
3434
|
"\u5DF2\u9009 ",
|
|
3285
3435
|
value.length,
|
|
3286
3436
|
" \u9879"
|
|
3287
3437
|
] })
|
|
3288
3438
|
] }),
|
|
3289
|
-
/* @__PURE__ */ (0,
|
|
3439
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
|
|
3290
3440
|
"div",
|
|
3291
3441
|
{
|
|
3292
3442
|
ref: listRef,
|
|
@@ -3323,12 +3473,12 @@ function SelectionPanel({
|
|
|
3323
3473
|
toggle(enabled[index], true);
|
|
3324
3474
|
}
|
|
3325
3475
|
},
|
|
3326
|
-
children: loading ? /* @__PURE__ */ (0,
|
|
3476
|
+
children: loading ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { role: "status", children: "\u52A0\u8F7D\u4E2D\u2026" }) : !rows.length ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "sia-selection-panel__empty", children: "\u6682\u65E0\u5339\u914D\u9009\u9879" }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { style: { height: totalHeight, position: "relative" }, children: renderedRows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
|
|
3327
3477
|
"div",
|
|
3328
3478
|
{
|
|
3329
3479
|
className: row.title !== void 0 ? "sia-selection-panel__group" : "sia-selection-panel__row",
|
|
3330
3480
|
style: { position: "absolute", top: row.top, height: row.height, width: "100%", gridTemplateColumns: `repeat(${count}, minmax(0, 1fr))` },
|
|
3331
|
-
children: row.title ?? row.items?.map((option, index) => option.optionType === "divider" ? /* @__PURE__ */ (0,
|
|
3481
|
+
children: row.title ?? row.items?.map((option, index) => option.optionType === "divider" ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { role: "separator", className: "sia-selection-panel__divider" }, `divider-${index}`) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Tooltip, { title: option.disabled ? option.disabledTip : void 0, placement: "right", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
|
|
3332
3482
|
"div",
|
|
3333
3483
|
{
|
|
3334
3484
|
role: "option",
|
|
@@ -3344,12 +3494,12 @@ function SelectionPanel({
|
|
|
3344
3494
|
onClick: (event) => {
|
|
3345
3495
|
if (!event.target.closest(".sia-checkbox")) toggle(option);
|
|
3346
3496
|
},
|
|
3347
|
-
children: multiple ? /* @__PURE__ */ (0,
|
|
3348
|
-
/* @__PURE__ */ (0,
|
|
3349
|
-
showValue && /* @__PURE__ */ (0,
|
|
3350
|
-
] }) }) : /* @__PURE__ */ (0,
|
|
3351
|
-
/* @__PURE__ */ (0,
|
|
3352
|
-
showValue && /* @__PURE__ */ (0,
|
|
3497
|
+
children: multiple ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Checkbox2, { checked: selected.has(option.value), disabled: disabled || loading || option.disabled, tabIndex: -1, onChange: () => toggle(option), children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("span", { className: "sia-selection-panel__text", children: [
|
|
3498
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "sia-selection-panel__label", children: showValue || displayField === "label" ? option.label : String(option.value) }),
|
|
3499
|
+
showValue && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("small", { children: String(option.value) })
|
|
3500
|
+
] }) }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("span", { className: "sia-selection-panel__text", children: [
|
|
3501
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "sia-selection-panel__label", children: showValue || displayField === "label" ? option.label : String(option.value) }),
|
|
3502
|
+
showValue && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("small", { children: String(option.value) })
|
|
3353
3503
|
] })
|
|
3354
3504
|
}
|
|
3355
3505
|
) }, `${typeof option.value}-${option.value}`))
|
|
@@ -3362,14 +3512,14 @@ function SelectionPanel({
|
|
|
3362
3512
|
}
|
|
3363
3513
|
|
|
3364
3514
|
// src/components/OverflowTags.tsx
|
|
3365
|
-
var
|
|
3366
|
-
var
|
|
3515
|
+
var import_react16 = require("react");
|
|
3516
|
+
var import_jsx_runtime15 = require("react/jsx-runtime");
|
|
3367
3517
|
function OverflowTags({ items, maxCount, className = "", tagClassName, restClassName = "" }) {
|
|
3368
|
-
const rootRef = (0,
|
|
3369
|
-
const measureRef = (0,
|
|
3518
|
+
const rootRef = (0, import_react16.useRef)(null);
|
|
3519
|
+
const measureRef = (0, import_react16.useRef)(null);
|
|
3370
3520
|
const limit = Math.min(items.length, Math.max(0, Math.floor(maxCount) || 0));
|
|
3371
|
-
const [visibleCount, setVisibleCount] = (0,
|
|
3372
|
-
(0,
|
|
3521
|
+
const [visibleCount, setVisibleCount] = (0, import_react16.useState)(0);
|
|
3522
|
+
(0, import_react16.useLayoutEffect)(() => {
|
|
3373
3523
|
const root = rootRef.current;
|
|
3374
3524
|
const measure = measureRef.current;
|
|
3375
3525
|
if (!root || !measure) return;
|
|
@@ -3392,15 +3542,15 @@ function OverflowTags({ items, maxCount, className = "", tagClassName, restClass
|
|
|
3392
3542
|
return () => observer.disconnect();
|
|
3393
3543
|
}, [items, limit]);
|
|
3394
3544
|
const count = Math.min(visibleCount, limit);
|
|
3395
|
-
return /* @__PURE__ */ (0,
|
|
3396
|
-
items.slice(0, count).map((item) => /* @__PURE__ */ (0,
|
|
3397
|
-
items.length > count ? /* @__PURE__ */ (0,
|
|
3545
|
+
return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("span", { ref: rootRef, className: `sia-overflow-tags ${className}`.trim(), children: [
|
|
3546
|
+
items.slice(0, count).map((item) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: tagClassName, children: item.label }, item.key)),
|
|
3547
|
+
items.length > count ? /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("span", { className: `${tagClassName} sia-overflow-tags__rest ${restClassName}`.trim(), children: [
|
|
3398
3548
|
"+",
|
|
3399
3549
|
items.length - count
|
|
3400
3550
|
] }) : null,
|
|
3401
|
-
/* @__PURE__ */ (0,
|
|
3402
|
-
items.slice(0, limit).map((item) => /* @__PURE__ */ (0,
|
|
3403
|
-
Array.from({ length: limit + 1 }, (_, index) => /* @__PURE__ */ (0,
|
|
3551
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("span", { ref: measureRef, className: "sia-overflow-tags__measure", "aria-hidden": "true", children: [
|
|
3552
|
+
items.slice(0, limit).map((item) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: tagClassName, children: item.label }, item.key)),
|
|
3553
|
+
Array.from({ length: limit + 1 }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("span", { className: `${tagClassName} ${restClassName}`.trim(), children: [
|
|
3404
3554
|
"+",
|
|
3405
3555
|
items.length - index
|
|
3406
3556
|
] }, `rest-${index}`))
|
|
@@ -3409,12 +3559,12 @@ function OverflowTags({ items, maxCount, className = "", tagClassName, restClass
|
|
|
3409
3559
|
}
|
|
3410
3560
|
|
|
3411
3561
|
// src/components/Select.tsx
|
|
3412
|
-
var
|
|
3562
|
+
var import_jsx_runtime16 = require("react/jsx-runtime");
|
|
3413
3563
|
function defaultFilterOption(query, option) {
|
|
3414
3564
|
const keyword = query.toLowerCase();
|
|
3415
3565
|
return [option.label, option.value].some((value) => String(value).toLowerCase().includes(keyword));
|
|
3416
3566
|
}
|
|
3417
|
-
var Select = (0,
|
|
3567
|
+
var Select = (0, import_react17.forwardRef)(function Select2({
|
|
3418
3568
|
options,
|
|
3419
3569
|
mode = "single",
|
|
3420
3570
|
popupMode: popupModeProp,
|
|
@@ -3453,27 +3603,27 @@ var Select = (0, import_react16.forwardRef)(function Select2({
|
|
|
3453
3603
|
}, forwardedRef) {
|
|
3454
3604
|
const showSearch = showSearchProp ?? options.length > 15;
|
|
3455
3605
|
const size = useControlSize(sizeProp);
|
|
3456
|
-
const fallbackId = (0,
|
|
3606
|
+
const fallbackId = (0, import_react17.useId)();
|
|
3457
3607
|
const selectId = id ?? fallbackId;
|
|
3458
3608
|
const listboxId = `${selectId}-listbox`;
|
|
3459
|
-
const rootRef = (0,
|
|
3460
|
-
const popupRef = (0,
|
|
3461
|
-
const searchRef = (0,
|
|
3462
|
-
const listRef = (0,
|
|
3463
|
-
const [open, setOpen] = (0,
|
|
3609
|
+
const rootRef = (0, import_react17.useRef)(null);
|
|
3610
|
+
const popupRef = (0, import_react17.useRef)(null);
|
|
3611
|
+
const searchRef = (0, import_react17.useRef)(null);
|
|
3612
|
+
const listRef = (0, import_react17.useRef)(null);
|
|
3613
|
+
const [open, setOpen] = (0, import_react17.useState)(false);
|
|
3464
3614
|
const automaticMode = popupModeProp ?? (options.length > modalThreshold ? "modal" : "dropdown");
|
|
3465
|
-
const [openedMode, setOpenedMode] = (0,
|
|
3615
|
+
const [openedMode, setOpenedMode] = (0, import_react17.useState)(automaticMode);
|
|
3466
3616
|
const popupMode = open ? openedMode : automaticMode;
|
|
3467
|
-
const [modalValues, setModalValues] = (0,
|
|
3468
|
-
const [modalSubmitting, setModalSubmitting] = (0,
|
|
3469
|
-
const modalSubmitLock = (0,
|
|
3470
|
-
const [selectedOnly, setSelectedOnly] = (0,
|
|
3471
|
-
const [query, setQuery] = (0,
|
|
3472
|
-
const [activeIndex, setActiveIndex] = (0,
|
|
3473
|
-
const [scrollTop, setScrollTop] = (0,
|
|
3474
|
-
const [dropdownFontSize, setDropdownFontSize] = (0,
|
|
3475
|
-
const pendingSelectedScroll = (0,
|
|
3476
|
-
const deferredQuery = (0,
|
|
3617
|
+
const [modalValues, setModalValues] = (0, import_react17.useState)([]);
|
|
3618
|
+
const [modalSubmitting, setModalSubmitting] = (0, import_react17.useState)(false);
|
|
3619
|
+
const modalSubmitLock = (0, import_react17.useRef)(false);
|
|
3620
|
+
const [selectedOnly, setSelectedOnly] = (0, import_react17.useState)(false);
|
|
3621
|
+
const [query, setQuery] = (0, import_react17.useState)("");
|
|
3622
|
+
const [activeIndex, setActiveIndex] = (0, import_react17.useState)(-1);
|
|
3623
|
+
const [scrollTop, setScrollTop] = (0, import_react17.useState)(0);
|
|
3624
|
+
const [dropdownFontSize, setDropdownFontSize] = (0, import_react17.useState)();
|
|
3625
|
+
const pendingSelectedScroll = (0, import_react17.useRef)(false);
|
|
3626
|
+
const deferredQuery = (0, import_react17.useDeferredValue)(query.trim());
|
|
3477
3627
|
const initialValue = defaultValue === void 0 ? mode === "multiple" ? [] : null : defaultValue;
|
|
3478
3628
|
const [currentValue, setCurrentValue] = useControllableState({
|
|
3479
3629
|
value,
|
|
@@ -3488,20 +3638,20 @@ var Select = (0, import_react16.forwardRef)(function Select2({
|
|
|
3488
3638
|
}
|
|
3489
3639
|
}
|
|
3490
3640
|
});
|
|
3491
|
-
const selectedValues = (0,
|
|
3641
|
+
const selectedValues = (0, import_react17.useMemo)(() => {
|
|
3492
3642
|
if (currentValue == null || currentValue === "" && !options.some((option) => option.value === "")) return [];
|
|
3493
3643
|
if (mode === "multiple") return Array.isArray(currentValue) ? currentValue : currentValue === null ? [] : [currentValue];
|
|
3494
3644
|
return Array.isArray(currentValue) ? currentValue.slice(0, 1) : currentValue === null ? [] : [currentValue];
|
|
3495
3645
|
}, [currentValue, mode, options]);
|
|
3496
|
-
const selectedValueSet = (0,
|
|
3497
|
-
const availableOptions = (0,
|
|
3646
|
+
const selectedValueSet = (0, import_react17.useMemo)(() => new Set(selectedValues), [selectedValues]);
|
|
3647
|
+
const availableOptions = (0, import_react17.useMemo)(() => {
|
|
3498
3648
|
if (!allowInput) return options;
|
|
3499
3649
|
const optionValueSet = new Set(options.map((option) => option.value));
|
|
3500
3650
|
const selectedCustomOptions = selectedValues.filter((selectedValue) => !optionValueSet.has(selectedValue)).map((selectedValue) => ({ label: String(selectedValue), value: selectedValue }));
|
|
3501
3651
|
return selectedCustomOptions.length ? [...selectedCustomOptions, ...options] : options;
|
|
3502
3652
|
}, [allowInput, options, selectedValues]);
|
|
3503
|
-
const selectedOptions = (0,
|
|
3504
|
-
const filteredOptions = (0,
|
|
3653
|
+
const selectedOptions = (0, import_react17.useMemo)(() => selectedValues.map((selectedValue) => availableOptions.find((option) => option.value === selectedValue)).filter((option) => option !== void 0), [availableOptions, selectedValues]);
|
|
3654
|
+
const filteredOptions = (0, import_react17.useMemo)(() => deferredQuery ? availableOptions.filter((option) => filterOption(deferredQuery, option)) : availableOptions, [availableOptions, deferredQuery, filterOption]);
|
|
3505
3655
|
const inputValue = query.trim();
|
|
3506
3656
|
const exactInputOption = inputValue ? availableOptions.find((option) => String(option.value).toLowerCase() === inputValue.toLowerCase() || typeof option.label === "string" && option.label.toLowerCase() === inputValue.toLowerCase()) : void 0;
|
|
3507
3657
|
const canSubmitInput = allowInput && Boolean(inputValue) && !exactInputOption;
|
|
@@ -3515,7 +3665,7 @@ var Select = (0, import_react16.forwardRef)(function Select2({
|
|
|
3515
3665
|
const renderedOptions = virtualEnabled ? filteredOptions.slice(virtualStart, virtualEnd) : filteredOptions;
|
|
3516
3666
|
const enabledFilteredOptions = filteredOptions.filter((option) => !option.disabled);
|
|
3517
3667
|
const allFilteredSelected = enabledFilteredOptions.length > 0 && enabledFilteredOptions.every((option) => selectedValueSet.has(option.value));
|
|
3518
|
-
(0,
|
|
3668
|
+
(0, import_react17.useEffect)(() => {
|
|
3519
3669
|
if (!open || popupMode === "modal") return void 0;
|
|
3520
3670
|
function closeFromOutside(event) {
|
|
3521
3671
|
const target = event.target;
|
|
@@ -3524,13 +3674,13 @@ var Select = (0, import_react16.forwardRef)(function Select2({
|
|
|
3524
3674
|
document.addEventListener("mousedown", closeFromOutside);
|
|
3525
3675
|
return () => document.removeEventListener("mousedown", closeFromOutside);
|
|
3526
3676
|
}, [open, popupMode]);
|
|
3527
|
-
(0,
|
|
3677
|
+
(0, import_react17.useEffect)(() => {
|
|
3528
3678
|
if (open && (showSearch || allowInput)) searchRef.current?.focus();
|
|
3529
3679
|
}, [allowInput, open, showSearch]);
|
|
3530
|
-
(0,
|
|
3680
|
+
(0, import_react17.useEffect)(() => {
|
|
3531
3681
|
if (disabled || loading) closeDropdown();
|
|
3532
3682
|
}, [disabled, loading]);
|
|
3533
|
-
(0,
|
|
3683
|
+
(0, import_react17.useEffect)(() => {
|
|
3534
3684
|
if (!open || popupMode !== "dropdown" || !pendingSelectedScroll.current || query) return;
|
|
3535
3685
|
const index = filteredOptions.findIndex((option) => selectedValueSet.has(option.value));
|
|
3536
3686
|
if (index < 0) return;
|
|
@@ -3545,7 +3695,7 @@ var Select = (0, import_react16.forwardRef)(function Select2({
|
|
|
3545
3695
|
});
|
|
3546
3696
|
return () => cancelAnimationFrame(frame);
|
|
3547
3697
|
}, [open, popupMode, filteredOptions, selectedValueSet, virtualEnabled, optionHeight, query]);
|
|
3548
|
-
(0,
|
|
3698
|
+
(0, import_react17.useLayoutEffect)(() => {
|
|
3549
3699
|
if (!open || popupMode !== "dropdown") return;
|
|
3550
3700
|
const trigger = rootRef.current?.querySelector(".sia-select__trigger");
|
|
3551
3701
|
if (trigger) setDropdownFontSize(getComputedStyle(trigger).fontSize);
|
|
@@ -3696,7 +3846,7 @@ var Select = (0, import_react16.forwardRef)(function Select2({
|
|
|
3696
3846
|
function renderOption(option, renderedIndex) {
|
|
3697
3847
|
const optionIndex = virtualEnabled ? virtualStart + renderedIndex : renderedIndex;
|
|
3698
3848
|
const selected = selectedValueSet.has(option.value);
|
|
3699
|
-
return /* @__PURE__ */ (0,
|
|
3849
|
+
return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
|
|
3700
3850
|
"div",
|
|
3701
3851
|
{
|
|
3702
3852
|
id: `${listboxId}-${optionIndex}`,
|
|
@@ -3709,11 +3859,11 @@ var Select = (0, import_react16.forwardRef)(function Select2({
|
|
|
3709
3859
|
onMouseDown: (event) => event.preventDefault(),
|
|
3710
3860
|
onClick: () => selectOption(option),
|
|
3711
3861
|
children: [
|
|
3712
|
-
/* @__PURE__ */ (0,
|
|
3713
|
-
/* @__PURE__ */ (0,
|
|
3714
|
-
showValue ? /* @__PURE__ */ (0,
|
|
3862
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("span", { className: "sia-select__option-content", children: [
|
|
3863
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "sia-select__option-label", children: option.label }),
|
|
3864
|
+
showValue ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("small", { className: "sia-select__option-value", children: String(option.value) }) : null
|
|
3715
3865
|
] }),
|
|
3716
|
-
selected ? /* @__PURE__ */ (0,
|
|
3866
|
+
selected ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Icon, { name: "check", size: 15 }) : null
|
|
3717
3867
|
]
|
|
3718
3868
|
},
|
|
3719
3869
|
`${typeof option.value}-${option.value}`
|
|
@@ -3727,8 +3877,8 @@ var Select = (0, import_react16.forwardRef)(function Select2({
|
|
|
3727
3877
|
setModalValues([...modalValues.filter((value2) => !editable.has(value2)), ...modalEnabled.filter((option) => operation === "all" || operation === "invert" && !modalValues.includes(option.value)).map((option) => option.value)]);
|
|
3728
3878
|
}
|
|
3729
3879
|
const floating = useFloatingPlaceholder({ mode: placeholderMode, placeholder, filled: hasValue, active: open });
|
|
3730
|
-
return /* @__PURE__ */ (0,
|
|
3731
|
-
/* @__PURE__ */ (0,
|
|
3880
|
+
return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { ref: rootRef, className: `sia-select sia-select--${size} sia-select--${status}${open ? " is-open" : ""}${disabled ? " is-disabled" : ""}${multiple ? " sia-select--multiple" : ""} ${className}`.trim(), style, children: [
|
|
3881
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
|
|
3732
3882
|
"button",
|
|
3733
3883
|
{
|
|
3734
3884
|
...withTitleTooltip(props),
|
|
@@ -3746,29 +3896,29 @@ var Select = (0, import_react16.forwardRef)(function Select2({
|
|
|
3746
3896
|
onClick: () => open ? closeDropdown() : openDropdown(),
|
|
3747
3897
|
onKeyDown: handleTriggerKeyDown,
|
|
3748
3898
|
children: [
|
|
3749
|
-
multiple && hasValue ? /* @__PURE__ */ (0,
|
|
3750
|
-
loading ? /* @__PURE__ */ (0,
|
|
3899
|
+
multiple && hasValue ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(OverflowTags, { className: "sia-select__tags", tagClassName: "sia-select__tag", restClassName: "sia-select__tag--rest", maxCount: maxTagCount, items: selectedOptions.map((option) => ({ key: `${typeof option.value}-${option.value}`, label: option.label })) }) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: `sia-select__value${hasValue ? "" : " is-placeholder"}`, children: selectedOptions[0]?.label ?? placeholder }),
|
|
3900
|
+
loading ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "sia-select__spinner", "aria-hidden": "true" }) : null,
|
|
3751
3901
|
floating.label,
|
|
3752
|
-
/* @__PURE__ */ (0,
|
|
3902
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Icon, { className: "sia-select__arrow", name: "chevron-down", size: 15 })
|
|
3753
3903
|
]
|
|
3754
3904
|
}
|
|
3755
3905
|
),
|
|
3756
|
-
allowClear && hasValue && !disabled && !loading ? /* @__PURE__ */ (0,
|
|
3757
|
-
/* @__PURE__ */ (0,
|
|
3758
|
-
/* @__PURE__ */ (0,
|
|
3759
|
-
showSearch || allowInput ? /* @__PURE__ */ (0,
|
|
3760
|
-
/* @__PURE__ */ (0,
|
|
3761
|
-
/* @__PURE__ */ (0,
|
|
3906
|
+
allowClear && hasValue && !disabled && !loading ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("button", { className: "sia-select__clear", type: "button", "aria-label": "\u6E05\u7A7A\u9009\u62E9", onClick: clearValue, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Icon, { name: "circle-close", variant: "filled", size: 15 }) }) : null,
|
|
3907
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(PopupPortal, { ref: popupRef, anchorRef: rootRef, open: open && popupMode === "dropdown", style: { fontSize: dropdownFontSize }, className: `sia-select__dropdown${filteredOptions.length === 0 && !canSubmitInput ? " sia-select__dropdown--empty" : ""}`, children: [
|
|
3908
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(FloatingScrollbarProvider, { targetRef: listRef }),
|
|
3909
|
+
showSearch || allowInput ? /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("label", { className: "sia-select__search", children: [
|
|
3910
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Icon, { name: "search", size: 15 }),
|
|
3911
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)("input", { ref: searchRef, value: query, maxLength: inputMaxLength, onChange: handleSearchChange, onKeyDown: (event) => handleInteractionKeyDown(event, true), placeholder: searchPlaceholder, "aria-label": searchPlaceholder })
|
|
3762
3912
|
] }) : null,
|
|
3763
|
-
canSubmitInput ? /* @__PURE__ */ (0,
|
|
3764
|
-
/* @__PURE__ */ (0,
|
|
3765
|
-
/* @__PURE__ */ (0,
|
|
3913
|
+
canSubmitInput ? /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("button", { type: "button", className: "sia-select__input-option", onMouseDown: (event) => event.preventDefault(), onClick: submitInputValue, children: [
|
|
3914
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Icon, { name: "plus", size: 14 }),
|
|
3915
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("span", { children: [
|
|
3766
3916
|
"\u4F7F\u7528\u201C",
|
|
3767
3917
|
inputValue,
|
|
3768
3918
|
"\u201D"
|
|
3769
3919
|
] })
|
|
3770
3920
|
] }) : null,
|
|
3771
|
-
/* @__PURE__ */ (0,
|
|
3921
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
3772
3922
|
"div",
|
|
3773
3923
|
{
|
|
3774
3924
|
ref: listRef,
|
|
@@ -3779,23 +3929,23 @@ var Select = (0, import_react16.forwardRef)(function Select2({
|
|
|
3779
3929
|
"aria-multiselectable": multiple || void 0,
|
|
3780
3930
|
style: { maxHeight: listHeight },
|
|
3781
3931
|
onScroll: handleListScroll,
|
|
3782
|
-
children: filteredOptions.length > 0 ? virtualEnabled ? /* @__PURE__ */ (0,
|
|
3932
|
+
children: filteredOptions.length > 0 ? virtualEnabled ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "sia-select__virtual-space", style: { height: filteredOptions.length * optionHeight }, children: renderedOptions.map(renderOption) }) : renderedOptions.map(renderOption) : canSubmitInput ? null : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "sia-select__empty", children: notFoundContent })
|
|
3783
3933
|
}
|
|
3784
3934
|
),
|
|
3785
|
-
showActions ? /* @__PURE__ */ (0,
|
|
3786
|
-
/* @__PURE__ */ (0,
|
|
3935
|
+
showActions ? /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "sia-select__actions", children: [
|
|
3936
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("span", { children: [
|
|
3787
3937
|
"\u5171 ",
|
|
3788
3938
|
filteredOptions.length,
|
|
3789
3939
|
" \u6761"
|
|
3790
3940
|
] }),
|
|
3791
|
-
multiple && showSelectAll ? /* @__PURE__ */ (0,
|
|
3792
|
-
/* @__PURE__ */ (0,
|
|
3793
|
-
/* @__PURE__ */ (0,
|
|
3941
|
+
multiple && showSelectAll ? /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
|
|
3942
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Button, { variant: "link", size: "small", disabled: allFilteredSelected || !enabledFilteredOptions.length, onClick: selectAllFiltered, children: "\u5168\u9009" }),
|
|
3943
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Button, { variant: "link", size: "small", disabled: !enabledFilteredOptions.length, onClick: invertFiltered, children: "\u53CD\u9009" })
|
|
3794
3944
|
] }) : null,
|
|
3795
|
-
multiple || allowClear ? /* @__PURE__ */ (0,
|
|
3945
|
+
multiple || allowClear ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Button, { variant: "link", size: "small", danger: true, disabled: !hasValue, onClick: clearSelection, children: "\u6E05\u7A7A" }) : null
|
|
3796
3946
|
] }) : null
|
|
3797
3947
|
] }),
|
|
3798
|
-
popupMode === "modal" ? /* @__PURE__ */ (0,
|
|
3948
|
+
popupMode === "modal" ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
3799
3949
|
Modal2,
|
|
3800
3950
|
{
|
|
3801
3951
|
className: "sia-select-modal",
|
|
@@ -3807,30 +3957,30 @@ var Select = (0, import_react16.forwardRef)(function Select2({
|
|
|
3807
3957
|
if (!next) closeDropdown();
|
|
3808
3958
|
},
|
|
3809
3959
|
onCancel: closeDropdown,
|
|
3810
|
-
footer: /* @__PURE__ */ (0,
|
|
3811
|
-
/* @__PURE__ */ (0,
|
|
3812
|
-
/* @__PURE__ */ (0,
|
|
3813
|
-
/* @__PURE__ */ (0,
|
|
3814
|
-
/* @__PURE__ */ (0,
|
|
3960
|
+
footer: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "sia-select-modal__footer", children: [
|
|
3961
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { children: modalConfig?.footerExtra }),
|
|
3962
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { children: [
|
|
3963
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Button, { disabled: modalSubmitting, onClick: closeDropdown, children: "\u53D6\u6D88" }),
|
|
3964
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Button, { variant: "primary", loading: modalSubmitting, disabled: disabled || loading, onClick: confirmModalSelection, children: "\u786E\u5B9A" })
|
|
3815
3965
|
] })
|
|
3816
3966
|
] }),
|
|
3817
|
-
children: open ? /* @__PURE__ */ (0,
|
|
3818
|
-
modalConfig?.headerExtra != null && modalConfig.headerExtra !== false ? /* @__PURE__ */ (0,
|
|
3819
|
-
/* @__PURE__ */ (0,
|
|
3820
|
-
/* @__PURE__ */ (0,
|
|
3821
|
-
/* @__PURE__ */ (0,
|
|
3822
|
-
/* @__PURE__ */ (0,
|
|
3967
|
+
children: open ? /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
|
|
3968
|
+
modalConfig?.headerExtra != null && modalConfig.headerExtra !== false ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "sia-select-modal__header-extra", children: modalConfig.headerExtra }) : null,
|
|
3969
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "sia-select-modal__heading", children: [
|
|
3970
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { role: "tablist", "aria-label": "\u9009\u9879\u8303\u56F4", children: [
|
|
3971
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Button, { role: "tab", "aria-selected": !selectedOnly, variant: "link", onClick: () => setSelectedOnly(false), children: "\u5168\u90E8" }),
|
|
3972
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(Button, { role: "tab", "aria-selected": selectedOnly, variant: "link", onClick: () => setSelectedOnly(true), children: [
|
|
3823
3973
|
"\u5DF2\u9009\u9879(",
|
|
3824
3974
|
modalValues.length,
|
|
3825
3975
|
")"
|
|
3826
3976
|
] })
|
|
3827
3977
|
] }),
|
|
3828
|
-
/* @__PURE__ */ (0,
|
|
3978
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
3829
3979
|
Input,
|
|
3830
3980
|
{
|
|
3831
3981
|
"aria-label": searchPlaceholder,
|
|
3832
3982
|
placeholder: searchPlaceholder,
|
|
3833
|
-
prefix: /* @__PURE__ */ (0,
|
|
3983
|
+
prefix: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Icon, { name: "search", size: 14 }),
|
|
3834
3984
|
value: query,
|
|
3835
3985
|
allowClear: true,
|
|
3836
3986
|
onChange: (event) => {
|
|
@@ -3840,8 +3990,8 @@ var Select = (0, import_react16.forwardRef)(function Select2({
|
|
|
3840
3990
|
}
|
|
3841
3991
|
)
|
|
3842
3992
|
] }),
|
|
3843
|
-
multiple && showSelectAll ? /* @__PURE__ */ (0,
|
|
3844
|
-
/* @__PURE__ */ (0,
|
|
3993
|
+
multiple && showSelectAll ? /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "sia-select-modal__actions", children: [
|
|
3994
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
3845
3995
|
Checkbox2,
|
|
3846
3996
|
{
|
|
3847
3997
|
checked: modalEnabled.length > 0 && modalEnabled.every((option) => modalValues.includes(option.value)),
|
|
@@ -3851,10 +4001,10 @@ var Select = (0, import_react16.forwardRef)(function Select2({
|
|
|
3851
4001
|
children: "\u5168\u9009"
|
|
3852
4002
|
}
|
|
3853
4003
|
),
|
|
3854
|
-
/* @__PURE__ */ (0,
|
|
3855
|
-
/* @__PURE__ */ (0,
|
|
4004
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Button, { variant: "link", size: "small", disabled: !modalEnabled.length, onClick: () => modalBatch("invert"), children: "\u53CD\u9009" }),
|
|
4005
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Button, { variant: "link", size: "small", danger: true, disabled: !modalValues.length, onClick: () => setModalValues([]), children: "\u6E05\u7A7A" })
|
|
3856
4006
|
] }) : null,
|
|
3857
|
-
allowInput && canSubmitInput ? /* @__PURE__ */ (0,
|
|
4007
|
+
allowInput && canSubmitInput ? /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(Button, { variant: "link", onClick: () => {
|
|
3858
4008
|
setModalValues(multiple ? [.../* @__PURE__ */ new Set([...modalValues, inputValue])] : [inputValue]);
|
|
3859
4009
|
setQuery("");
|
|
3860
4010
|
}, children: [
|
|
@@ -3862,7 +4012,7 @@ var Select = (0, import_react16.forwardRef)(function Select2({
|
|
|
3862
4012
|
inputValue,
|
|
3863
4013
|
"\u201D"
|
|
3864
4014
|
] }) : null,
|
|
3865
|
-
/* @__PURE__ */ (0,
|
|
4015
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
3866
4016
|
SelectionPanel,
|
|
3867
4017
|
{
|
|
3868
4018
|
options: modalFiltered,
|
|
@@ -3886,7 +4036,7 @@ var Select = (0, import_react16.forwardRef)(function Select2({
|
|
|
3886
4036
|
});
|
|
3887
4037
|
|
|
3888
4038
|
// src/components/SelectDateRange.tsx
|
|
3889
|
-
var
|
|
4039
|
+
var import_jsx_runtime17 = require("react/jsx-runtime");
|
|
3890
4040
|
function SelectDateRange({
|
|
3891
4041
|
options,
|
|
3892
4042
|
value,
|
|
@@ -3909,8 +4059,8 @@ function SelectDateRange({
|
|
|
3909
4059
|
const size = useControlSize(sizeProp);
|
|
3910
4060
|
const initialValue = defaultValue ?? { select: options[0]?.value ?? "", range: ["", ""] };
|
|
3911
4061
|
const [currentValue, setCurrentValue] = useControllableState({ value: value === void 0 ? void 0 : value && typeof value === "object" ? value : { select: "", range: ["", ""] }, defaultValue: initialValue, onChange });
|
|
3912
|
-
return /* @__PURE__ */ (0,
|
|
3913
|
-
/* @__PURE__ */ (0,
|
|
4062
|
+
return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: `sia-select-date-range sia-select-date-range--${size} ${className}`.trim(), role: "group", "aria-label": `${selectAriaLabel}\u4E0E${rangeAriaLabel}`, ...withTitleTooltip(props), style: { ...style, "--sia-select-date-range-select-width": typeof selectWidth === "number" ? `${selectWidth}px` : selectWidth }, children: [
|
|
4063
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
3914
4064
|
Select,
|
|
3915
4065
|
{
|
|
3916
4066
|
className: "sia-select-date-range__select",
|
|
@@ -3928,7 +4078,7 @@ function SelectDateRange({
|
|
|
3928
4078
|
}
|
|
3929
4079
|
}
|
|
3930
4080
|
),
|
|
3931
|
-
/* @__PURE__ */ (0,
|
|
4081
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
3932
4082
|
DatePicker.RangePicker,
|
|
3933
4083
|
{
|
|
3934
4084
|
className: "sia-select-date-range__picker",
|