@sia.soul/sia-react-ui 0.1.77 → 0.1.79
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-TKCXP6RZ.js → chunk-WXERMWTW.js} +113 -436
- package/dist/{chunk-YMOOL62S.js → chunk-XHLIIDD2.js} +407 -21
- package/dist/{chunk-K5OU5NOT.js → chunk-Y4Y2NVBM.js} +2 -2
- package/dist/{chunk-QDZXP2UO.js → chunk-ZNJK3IKA.js} +10 -12
- package/dist/{core-Bx07vzrr.d.cts → core-DT3yw5kl.d.cts} +9 -2
- package/dist/{core-CBLT4Vfl.d.ts → core-TQOjO7wf.d.ts} +9 -2
- package/dist/core.cjs +337 -276
- 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 +1007 -944
- package/dist/index.css +19 -0
- package/dist/index.d.cts +2 -2
- package/dist/index.d.ts +2 -2
- 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.cjs +305 -178
- 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
|
@@ -2376,7 +2376,7 @@ function DateRangePicker({
|
|
|
2376
2376
|
})(DatePicker || (DatePicker = {}));
|
|
2377
2377
|
|
|
2378
2378
|
// src/components/Select.tsx
|
|
2379
|
-
var
|
|
2379
|
+
var import_react17 = require("react");
|
|
2380
2380
|
|
|
2381
2381
|
// src/components/Modal.tsx
|
|
2382
2382
|
var import_react10 = require("react");
|
|
@@ -2757,9 +2757,75 @@ var Modal2 = Object.assign(ModalRoot, {
|
|
|
2757
2757
|
});
|
|
2758
2758
|
|
|
2759
2759
|
// src/components/Input.tsx
|
|
2760
|
+
var import_react12 = require("react");
|
|
2761
|
+
|
|
2762
|
+
// src/components/TextArea.tsx
|
|
2760
2763
|
var import_react11 = require("react");
|
|
2761
2764
|
var import_jsx_runtime10 = require("react/jsx-runtime");
|
|
2762
|
-
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({
|
|
2763
2829
|
label,
|
|
2764
2830
|
hint,
|
|
2765
2831
|
status = "default",
|
|
@@ -2778,15 +2844,18 @@ var Input = (0, import_react11.forwardRef)(function Input2({
|
|
|
2778
2844
|
defaultValue,
|
|
2779
2845
|
maxLength,
|
|
2780
2846
|
onChange,
|
|
2847
|
+
expandable = false,
|
|
2781
2848
|
...props
|
|
2782
2849
|
}, forwardedRef) {
|
|
2783
2850
|
const size = useControlSize(sizeProp);
|
|
2784
|
-
const fallbackId = (0,
|
|
2851
|
+
const fallbackId = (0, import_react12.useId)();
|
|
2785
2852
|
const inputId = id ?? fallbackId;
|
|
2786
|
-
const localRef = (0,
|
|
2787
|
-
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));
|
|
2788
2855
|
const currentText = value !== void 0 ? String(value) : uncontrolledValue;
|
|
2789
2856
|
const hasValue = currentText.length > 0;
|
|
2857
|
+
const [expanded, setExpanded] = (0, import_react12.useState)(false);
|
|
2858
|
+
const [expandedDraft, setExpandedDraft] = (0, import_react12.useState)("");
|
|
2790
2859
|
const floatingPlaceholder = usePlaceholderMode(placeholderMode) === "floating" && Boolean(placeholder);
|
|
2791
2860
|
const hintId = `${inputId}-hint`;
|
|
2792
2861
|
const describedBy = [props["aria-describedby"], hint ? hintId : null].filter(Boolean).join(" ") || void 0;
|
|
@@ -2822,7 +2891,7 @@ var Input = (0, import_react11.forwardRef)(function Input2({
|
|
|
2822
2891
|
event.preventDefault();
|
|
2823
2892
|
localRef.current?.focus({ preventScroll: true });
|
|
2824
2893
|
}
|
|
2825
|
-
const input = /* @__PURE__ */ (0,
|
|
2894
|
+
const input = /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
|
2826
2895
|
"input",
|
|
2827
2896
|
{
|
|
2828
2897
|
...withTitleTooltip(props),
|
|
@@ -2839,39 +2908,97 @@ var Input = (0, import_react11.forwardRef)(function Input2({
|
|
|
2839
2908
|
onChange: handleChange
|
|
2840
2909
|
}
|
|
2841
2910
|
);
|
|
2842
|
-
const control = /* @__PURE__ */ (0,
|
|
2843
|
-
prefix ? /* @__PURE__ */ (0,
|
|
2844
|
-
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: [
|
|
2845
2914
|
input,
|
|
2846
|
-
/* @__PURE__ */ (0,
|
|
2915
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "sia-input-control__floating-placeholder", "aria-hidden": "true", children: placeholder })
|
|
2847
2916
|
] }) : input,
|
|
2848
|
-
allowClear && hasValue && !disabled ? /* @__PURE__ */ (0,
|
|
2849
|
-
suffix ? /* @__PURE__ */ (0,
|
|
2850
|
-
|
|
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: [
|
|
2851
2935
|
currentText.length,
|
|
2852
2936
|
maxLength !== void 0 ? `/${maxLength}` : null
|
|
2853
2937
|
] }) : null
|
|
2854
2938
|
] });
|
|
2855
|
-
|
|
2856
|
-
|
|
2857
|
-
|
|
2858
|
-
|
|
2859
|
-
|
|
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
|
|
2860
2987
|
] });
|
|
2861
2988
|
});
|
|
2862
2989
|
|
|
2863
2990
|
// src/components/Checkbox.tsx
|
|
2864
|
-
var
|
|
2865
|
-
var
|
|
2866
|
-
var CheckboxGroupContext = (0,
|
|
2867
|
-
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) {
|
|
2868
2995
|
const size = useControlSize(sizeProp);
|
|
2869
|
-
const group = (0,
|
|
2870
|
-
const localRef = (0,
|
|
2871
|
-
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)();
|
|
2872
2999
|
const grouped = group !== null && value !== void 0;
|
|
2873
3000
|
const currentChecked = grouped ? group.values.includes(value) : checked;
|
|
2874
|
-
(0,
|
|
3001
|
+
(0, import_react13.useEffect)(() => {
|
|
2875
3002
|
if (localRef.current) localRef.current.indeterminate = indeterminate;
|
|
2876
3003
|
}, [indeterminate]);
|
|
2877
3004
|
function setRef(node) {
|
|
@@ -2879,8 +3006,8 @@ var CheckboxRoot = (0, import_react12.forwardRef)(function Checkbox({ value, siz
|
|
|
2879
3006
|
if (typeof forwardedRef === "function") forwardedRef(node);
|
|
2880
3007
|
else if (forwardedRef) forwardedRef.current = node;
|
|
2881
3008
|
}
|
|
2882
|
-
return /* @__PURE__ */ (0,
|
|
2883
|
-
/* @__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)(
|
|
2884
3011
|
"input",
|
|
2885
3012
|
{
|
|
2886
3013
|
...withTitleTooltip(props),
|
|
@@ -2899,8 +3026,8 @@ var CheckboxRoot = (0, import_react12.forwardRef)(function Checkbox({ value, siz
|
|
|
2899
3026
|
}
|
|
2900
3027
|
}
|
|
2901
3028
|
),
|
|
2902
|
-
/* @__PURE__ */ (0,
|
|
2903
|
-
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
|
|
2904
3031
|
] });
|
|
2905
3032
|
});
|
|
2906
3033
|
function CheckboxGroup({
|
|
@@ -2924,7 +3051,7 @@ function CheckboxGroup({
|
|
|
2924
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`
|
|
2925
3052
|
};
|
|
2926
3053
|
const [values, setValues] = useControllableState({ value, defaultValue, onChange });
|
|
2927
|
-
const context = (0,
|
|
3054
|
+
const context = (0, import_react13.useMemo)(() => ({
|
|
2928
3055
|
values,
|
|
2929
3056
|
disabled,
|
|
2930
3057
|
name,
|
|
@@ -2933,10 +3060,10 @@ function CheckboxGroup({
|
|
|
2933
3060
|
setValues(next);
|
|
2934
3061
|
}
|
|
2935
3062
|
}), [disabled, name, setValues, values]);
|
|
2936
|
-
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: [
|
|
2937
3064
|
options?.map((option) => {
|
|
2938
3065
|
const normalized = typeof option === "object" ? option : { label: String(option), value: option };
|
|
2939
|
-
return /* @__PURE__ */ (0,
|
|
3066
|
+
return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(CheckboxRoot, { value: normalized.value, disabled: normalized.disabled, children: normalized.label }, normalized.value);
|
|
2940
3067
|
}),
|
|
2941
3068
|
children
|
|
2942
3069
|
] }) }) });
|
|
@@ -2947,12 +3074,12 @@ var Checkbox2 = Object.assign(CheckboxRoot, {
|
|
|
2947
3074
|
});
|
|
2948
3075
|
|
|
2949
3076
|
// src/components/SelectionPanel.tsx
|
|
2950
|
-
var
|
|
3077
|
+
var import_react15 = require("react");
|
|
2951
3078
|
|
|
2952
3079
|
// src/components/FloatingDisplay.tsx
|
|
2953
|
-
var
|
|
3080
|
+
var import_react14 = require("react");
|
|
2954
3081
|
var import_react_dom3 = require("react-dom");
|
|
2955
|
-
var
|
|
3082
|
+
var import_jsx_runtime13 = require("react/jsx-runtime");
|
|
2956
3083
|
var FLOATING_GAP = 9;
|
|
2957
3084
|
var FLOATING_VIEWPORT_PADDING = 8;
|
|
2958
3085
|
var FLOATING_ARROW_EDGE_OFFSET = 16;
|
|
@@ -3037,23 +3164,23 @@ function Floating({
|
|
|
3037
3164
|
role = "tooltip",
|
|
3038
3165
|
onOpenChange
|
|
3039
3166
|
}) {
|
|
3040
|
-
const rootRef = (0,
|
|
3041
|
-
const triggerElementRef = (0,
|
|
3042
|
-
const overlayRef = (0,
|
|
3043
|
-
const enterTimer = (0,
|
|
3044
|
-
const leaveTimer = (0,
|
|
3045
|
-
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)();
|
|
3046
3173
|
const triggers = Array.isArray(trigger) ? trigger : [trigger];
|
|
3047
3174
|
const [visible, setVisible] = useControllableState({ value: open, defaultValue: defaultOpen, onChange: onOpenChange });
|
|
3048
|
-
const [position, setPosition] = (0,
|
|
3049
|
-
const [portalContainer, setPortalContainer] = (0,
|
|
3050
|
-
(0,
|
|
3175
|
+
const [position, setPosition] = (0, import_react14.useState)();
|
|
3176
|
+
const [portalContainer, setPortalContainer] = (0, import_react14.useState)(null);
|
|
3177
|
+
(0, import_react14.useLayoutEffect)(() => {
|
|
3051
3178
|
if (!visible) return;
|
|
3052
3179
|
setPortalContainer(rootRef.current?.closest(".sia-modal-root, .sia-drawer-root") ?? document.body);
|
|
3053
3180
|
});
|
|
3054
|
-
const setVisibleRef = (0,
|
|
3181
|
+
const setVisibleRef = (0, import_react14.useRef)(setVisible);
|
|
3055
3182
|
setVisibleRef.current = setVisible;
|
|
3056
|
-
const closeSelfRef = (0,
|
|
3183
|
+
const closeSelfRef = (0, import_react14.useRef)();
|
|
3057
3184
|
if (!closeSelfRef.current) closeSelfRef.current = () => setVisibleRef.current(false);
|
|
3058
3185
|
const exclusiveTooltip = role === "tooltip" && triggers.includes("hover");
|
|
3059
3186
|
function openNow() {
|
|
@@ -3081,7 +3208,7 @@ function Floating({
|
|
|
3081
3208
|
if (delay <= 0) closeNow();
|
|
3082
3209
|
else leaveTimer.current = window.setTimeout(closeNow, delay * 1e3);
|
|
3083
3210
|
}
|
|
3084
|
-
(0,
|
|
3211
|
+
(0, import_react14.useEffect)(() => {
|
|
3085
3212
|
if (!visible || !triggers.includes("click")) return;
|
|
3086
3213
|
const close = (event) => {
|
|
3087
3214
|
const target = event.target;
|
|
@@ -3090,7 +3217,7 @@ function Floating({
|
|
|
3090
3217
|
document.addEventListener("pointerdown", close);
|
|
3091
3218
|
return () => document.removeEventListener("pointerdown", close);
|
|
3092
3219
|
}, [triggers.join("|"), visible]);
|
|
3093
|
-
(0,
|
|
3220
|
+
(0, import_react14.useLayoutEffect)(() => {
|
|
3094
3221
|
if (!visible) {
|
|
3095
3222
|
setPosition(void 0);
|
|
3096
3223
|
return;
|
|
@@ -3128,11 +3255,11 @@ function Floating({
|
|
|
3128
3255
|
observer.disconnect();
|
|
3129
3256
|
};
|
|
3130
3257
|
}, [children, content, placement, visible, portalContainer, autoAdjustOverflow, typeof arrow === "object" && arrow.pointAtCenter]);
|
|
3131
|
-
(0,
|
|
3258
|
+
(0, import_react14.useEffect)(() => () => {
|
|
3132
3259
|
clearTimers();
|
|
3133
3260
|
if (activeTooltipClose === closeSelfRef.current) activeTooltipClose = void 0;
|
|
3134
3261
|
}, []);
|
|
3135
|
-
const child = (0,
|
|
3262
|
+
const child = (0, import_react14.cloneElement)(children, {
|
|
3136
3263
|
...triggers.includes("hover") ? { onMouseEnter: (event) => {
|
|
3137
3264
|
triggerElementRef.current = event.currentTarget;
|
|
3138
3265
|
children.props.onMouseEnter?.(event);
|
|
@@ -3158,7 +3285,7 @@ function Floating({
|
|
|
3158
3285
|
"aria-describedby": visible ? contentId : void 0
|
|
3159
3286
|
});
|
|
3160
3287
|
const overlay = visible && content !== null && content !== void 0 && typeof document !== "undefined" ? (0, import_react_dom3.createPortal)(
|
|
3161
|
-
/* @__PURE__ */ (0,
|
|
3288
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
|
|
3162
3289
|
"span",
|
|
3163
3290
|
{
|
|
3164
3291
|
ref: overlayRef,
|
|
@@ -3178,23 +3305,23 @@ function Floating({
|
|
|
3178
3305
|
onMouseLeave: triggers.includes("hover") ? () => hide(mouseLeaveDelay) : void 0,
|
|
3179
3306
|
children: [
|
|
3180
3307
|
content,
|
|
3181
|
-
arrow ? /* @__PURE__ */ (0,
|
|
3308
|
+
arrow ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "sia-floating__arrow" }) : null
|
|
3182
3309
|
]
|
|
3183
3310
|
}
|
|
3184
3311
|
),
|
|
3185
3312
|
portalContainer ?? document.body
|
|
3186
3313
|
) : null;
|
|
3187
|
-
return /* @__PURE__ */ (0,
|
|
3188
|
-
/* @__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 }),
|
|
3189
3316
|
overlay
|
|
3190
3317
|
] });
|
|
3191
3318
|
}
|
|
3192
3319
|
function Tooltip(props) {
|
|
3193
|
-
return /* @__PURE__ */ (0,
|
|
3320
|
+
return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Floating, { ...props, content: props.title });
|
|
3194
3321
|
}
|
|
3195
3322
|
|
|
3196
3323
|
// src/components/SelectionPanel.tsx
|
|
3197
|
-
var
|
|
3324
|
+
var import_jsx_runtime14 = require("react/jsx-runtime");
|
|
3198
3325
|
function SelectionPanel({
|
|
3199
3326
|
options,
|
|
3200
3327
|
value,
|
|
@@ -3215,26 +3342,26 @@ function SelectionPanel({
|
|
|
3215
3342
|
maxHeight = 250,
|
|
3216
3343
|
autoFocusSearch = false
|
|
3217
3344
|
}) {
|
|
3218
|
-
const [localSearch, setLocalSearch] = (0,
|
|
3345
|
+
const [localSearch, setLocalSearch] = (0, import_react15.useState)("");
|
|
3219
3346
|
const search = searchValue ?? localSearch;
|
|
3220
|
-
const [scrollTop, setScrollTop] = (0,
|
|
3221
|
-
const [active, setActive] = (0,
|
|
3222
|
-
const [keyboardActive, setKeyboardActive] = (0,
|
|
3223
|
-
const [deselectedHover, setDeselectedHover] = (0,
|
|
3224
|
-
const listRef = (0,
|
|
3225
|
-
const id = (0,
|
|
3226
|
-
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]);
|
|
3227
3354
|
const count = Math.max(1, Math.floor(columns));
|
|
3228
|
-
const allOptions = (0,
|
|
3355
|
+
const allOptions = (0, import_react15.useMemo)(() => {
|
|
3229
3356
|
if (!includeUnknownValues) return [...options];
|
|
3230
3357
|
const known = new Set(options.filter((option) => option.optionType !== "divider").map((option) => option.value));
|
|
3231
3358
|
return [...value.filter((item) => !known.has(item)).map((item) => ({ value: item, label: String(item), group: "\u81EA\u5B9A\u4E49\u503C" })), ...options];
|
|
3232
3359
|
}, [options, value, includeUnknownValues]);
|
|
3233
|
-
const filtered = (0,
|
|
3360
|
+
const filtered = (0, import_react15.useMemo)(
|
|
3234
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())))),
|
|
3235
3362
|
[allOptions, selectedOnly, selected, search]
|
|
3236
3363
|
);
|
|
3237
|
-
const rows = (0,
|
|
3364
|
+
const rows = (0, import_react15.useMemo)(() => {
|
|
3238
3365
|
const groups = /* @__PURE__ */ new Map();
|
|
3239
3366
|
filtered.forEach((option) => {
|
|
3240
3367
|
const items = groups.get(option.group) ?? [];
|
|
@@ -3260,7 +3387,7 @@ function SelectionPanel({
|
|
|
3260
3387
|
const virtual = filtered.length > 100;
|
|
3261
3388
|
const renderedRows = virtual ? rows.filter((row) => row.top + row.height >= scrollTop - 100 && row.top <= scrollTop + maxHeight + 100) : rows;
|
|
3262
3389
|
const enabled = filtered.filter((option) => !option.disabled && option.optionType !== "divider");
|
|
3263
|
-
(0,
|
|
3390
|
+
(0, import_react15.useEffect)(() => {
|
|
3264
3391
|
setScrollTop(0);
|
|
3265
3392
|
if (listRef.current) listRef.current.scrollTop = 0;
|
|
3266
3393
|
setActive(void 0);
|
|
@@ -3283,9 +3410,9 @@ function SelectionPanel({
|
|
|
3283
3410
|
const add = enabled.filter((option) => operation === "all" || !selected.has(option.value)).map((option) => option.value);
|
|
3284
3411
|
onChange([...retained, ...add]);
|
|
3285
3412
|
}
|
|
3286
|
-
return /* @__PURE__ */ (0,
|
|
3287
|
-
/* @__PURE__ */ (0,
|
|
3288
|
-
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)(
|
|
3289
3416
|
Input,
|
|
3290
3417
|
{
|
|
3291
3418
|
"aria-label": "\u641C\u7D22\u9009\u9879",
|
|
@@ -3299,17 +3426,17 @@ function SelectionPanel({
|
|
|
3299
3426
|
}
|
|
3300
3427
|
}
|
|
3301
3428
|
),
|
|
3302
|
-
multiple && showActions && /* @__PURE__ */ (0,
|
|
3303
|
-
/* @__PURE__ */ (0,
|
|
3304
|
-
/* @__PURE__ */ (0,
|
|
3305
|
-
/* @__PURE__ */ (0,
|
|
3306
|
-
/* @__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: [
|
|
3307
3434
|
"\u5DF2\u9009 ",
|
|
3308
3435
|
value.length,
|
|
3309
3436
|
" \u9879"
|
|
3310
3437
|
] })
|
|
3311
3438
|
] }),
|
|
3312
|
-
/* @__PURE__ */ (0,
|
|
3439
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
|
|
3313
3440
|
"div",
|
|
3314
3441
|
{
|
|
3315
3442
|
ref: listRef,
|
|
@@ -3346,12 +3473,12 @@ function SelectionPanel({
|
|
|
3346
3473
|
toggle(enabled[index], true);
|
|
3347
3474
|
}
|
|
3348
3475
|
},
|
|
3349
|
-
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)(
|
|
3350
3477
|
"div",
|
|
3351
3478
|
{
|
|
3352
3479
|
className: row.title !== void 0 ? "sia-selection-panel__group" : "sia-selection-panel__row",
|
|
3353
3480
|
style: { position: "absolute", top: row.top, height: row.height, width: "100%", gridTemplateColumns: `repeat(${count}, minmax(0, 1fr))` },
|
|
3354
|
-
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)(
|
|
3355
3482
|
"div",
|
|
3356
3483
|
{
|
|
3357
3484
|
role: "option",
|
|
@@ -3367,12 +3494,12 @@ function SelectionPanel({
|
|
|
3367
3494
|
onClick: (event) => {
|
|
3368
3495
|
if (!event.target.closest(".sia-checkbox")) toggle(option);
|
|
3369
3496
|
},
|
|
3370
|
-
children: multiple ? /* @__PURE__ */ (0,
|
|
3371
|
-
/* @__PURE__ */ (0,
|
|
3372
|
-
showValue && /* @__PURE__ */ (0,
|
|
3373
|
-
] }) }) : /* @__PURE__ */ (0,
|
|
3374
|
-
/* @__PURE__ */ (0,
|
|
3375
|
-
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) })
|
|
3376
3503
|
] })
|
|
3377
3504
|
}
|
|
3378
3505
|
) }, `${typeof option.value}-${option.value}`))
|
|
@@ -3385,14 +3512,14 @@ function SelectionPanel({
|
|
|
3385
3512
|
}
|
|
3386
3513
|
|
|
3387
3514
|
// src/components/OverflowTags.tsx
|
|
3388
|
-
var
|
|
3389
|
-
var
|
|
3515
|
+
var import_react16 = require("react");
|
|
3516
|
+
var import_jsx_runtime15 = require("react/jsx-runtime");
|
|
3390
3517
|
function OverflowTags({ items, maxCount, className = "", tagClassName, restClassName = "" }) {
|
|
3391
|
-
const rootRef = (0,
|
|
3392
|
-
const measureRef = (0,
|
|
3518
|
+
const rootRef = (0, import_react16.useRef)(null);
|
|
3519
|
+
const measureRef = (0, import_react16.useRef)(null);
|
|
3393
3520
|
const limit = Math.min(items.length, Math.max(0, Math.floor(maxCount) || 0));
|
|
3394
|
-
const [visibleCount, setVisibleCount] = (0,
|
|
3395
|
-
(0,
|
|
3521
|
+
const [visibleCount, setVisibleCount] = (0, import_react16.useState)(0);
|
|
3522
|
+
(0, import_react16.useLayoutEffect)(() => {
|
|
3396
3523
|
const root = rootRef.current;
|
|
3397
3524
|
const measure = measureRef.current;
|
|
3398
3525
|
if (!root || !measure) return;
|
|
@@ -3415,15 +3542,15 @@ function OverflowTags({ items, maxCount, className = "", tagClassName, restClass
|
|
|
3415
3542
|
return () => observer.disconnect();
|
|
3416
3543
|
}, [items, limit]);
|
|
3417
3544
|
const count = Math.min(visibleCount, limit);
|
|
3418
|
-
return /* @__PURE__ */ (0,
|
|
3419
|
-
items.slice(0, count).map((item) => /* @__PURE__ */ (0,
|
|
3420
|
-
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: [
|
|
3421
3548
|
"+",
|
|
3422
3549
|
items.length - count
|
|
3423
3550
|
] }) : null,
|
|
3424
|
-
/* @__PURE__ */ (0,
|
|
3425
|
-
items.slice(0, limit).map((item) => /* @__PURE__ */ (0,
|
|
3426
|
-
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: [
|
|
3427
3554
|
"+",
|
|
3428
3555
|
items.length - index
|
|
3429
3556
|
] }, `rest-${index}`))
|
|
@@ -3432,12 +3559,12 @@ function OverflowTags({ items, maxCount, className = "", tagClassName, restClass
|
|
|
3432
3559
|
}
|
|
3433
3560
|
|
|
3434
3561
|
// src/components/Select.tsx
|
|
3435
|
-
var
|
|
3562
|
+
var import_jsx_runtime16 = require("react/jsx-runtime");
|
|
3436
3563
|
function defaultFilterOption(query, option) {
|
|
3437
3564
|
const keyword = query.toLowerCase();
|
|
3438
3565
|
return [option.label, option.value].some((value) => String(value).toLowerCase().includes(keyword));
|
|
3439
3566
|
}
|
|
3440
|
-
var Select = (0,
|
|
3567
|
+
var Select = (0, import_react17.forwardRef)(function Select2({
|
|
3441
3568
|
options,
|
|
3442
3569
|
mode = "single",
|
|
3443
3570
|
popupMode: popupModeProp,
|
|
@@ -3476,27 +3603,27 @@ var Select = (0, import_react16.forwardRef)(function Select2({
|
|
|
3476
3603
|
}, forwardedRef) {
|
|
3477
3604
|
const showSearch = showSearchProp ?? options.length > 15;
|
|
3478
3605
|
const size = useControlSize(sizeProp);
|
|
3479
|
-
const fallbackId = (0,
|
|
3606
|
+
const fallbackId = (0, import_react17.useId)();
|
|
3480
3607
|
const selectId = id ?? fallbackId;
|
|
3481
3608
|
const listboxId = `${selectId}-listbox`;
|
|
3482
|
-
const rootRef = (0,
|
|
3483
|
-
const popupRef = (0,
|
|
3484
|
-
const searchRef = (0,
|
|
3485
|
-
const listRef = (0,
|
|
3486
|
-
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);
|
|
3487
3614
|
const automaticMode = popupModeProp ?? (options.length > modalThreshold ? "modal" : "dropdown");
|
|
3488
|
-
const [openedMode, setOpenedMode] = (0,
|
|
3615
|
+
const [openedMode, setOpenedMode] = (0, import_react17.useState)(automaticMode);
|
|
3489
3616
|
const popupMode = open ? openedMode : automaticMode;
|
|
3490
|
-
const [modalValues, setModalValues] = (0,
|
|
3491
|
-
const [modalSubmitting, setModalSubmitting] = (0,
|
|
3492
|
-
const modalSubmitLock = (0,
|
|
3493
|
-
const [selectedOnly, setSelectedOnly] = (0,
|
|
3494
|
-
const [query, setQuery] = (0,
|
|
3495
|
-
const [activeIndex, setActiveIndex] = (0,
|
|
3496
|
-
const [scrollTop, setScrollTop] = (0,
|
|
3497
|
-
const [dropdownFontSize, setDropdownFontSize] = (0,
|
|
3498
|
-
const pendingSelectedScroll = (0,
|
|
3499
|
-
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());
|
|
3500
3627
|
const initialValue = defaultValue === void 0 ? mode === "multiple" ? [] : null : defaultValue;
|
|
3501
3628
|
const [currentValue, setCurrentValue] = useControllableState({
|
|
3502
3629
|
value,
|
|
@@ -3511,20 +3638,20 @@ var Select = (0, import_react16.forwardRef)(function Select2({
|
|
|
3511
3638
|
}
|
|
3512
3639
|
}
|
|
3513
3640
|
});
|
|
3514
|
-
const selectedValues = (0,
|
|
3641
|
+
const selectedValues = (0, import_react17.useMemo)(() => {
|
|
3515
3642
|
if (currentValue == null || currentValue === "" && !options.some((option) => option.value === "")) return [];
|
|
3516
3643
|
if (mode === "multiple") return Array.isArray(currentValue) ? currentValue : currentValue === null ? [] : [currentValue];
|
|
3517
3644
|
return Array.isArray(currentValue) ? currentValue.slice(0, 1) : currentValue === null ? [] : [currentValue];
|
|
3518
3645
|
}, [currentValue, mode, options]);
|
|
3519
|
-
const selectedValueSet = (0,
|
|
3520
|
-
const availableOptions = (0,
|
|
3646
|
+
const selectedValueSet = (0, import_react17.useMemo)(() => new Set(selectedValues), [selectedValues]);
|
|
3647
|
+
const availableOptions = (0, import_react17.useMemo)(() => {
|
|
3521
3648
|
if (!allowInput) return options;
|
|
3522
3649
|
const optionValueSet = new Set(options.map((option) => option.value));
|
|
3523
3650
|
const selectedCustomOptions = selectedValues.filter((selectedValue) => !optionValueSet.has(selectedValue)).map((selectedValue) => ({ label: String(selectedValue), value: selectedValue }));
|
|
3524
3651
|
return selectedCustomOptions.length ? [...selectedCustomOptions, ...options] : options;
|
|
3525
3652
|
}, [allowInput, options, selectedValues]);
|
|
3526
|
-
const selectedOptions = (0,
|
|
3527
|
-
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]);
|
|
3528
3655
|
const inputValue = query.trim();
|
|
3529
3656
|
const exactInputOption = inputValue ? availableOptions.find((option) => String(option.value).toLowerCase() === inputValue.toLowerCase() || typeof option.label === "string" && option.label.toLowerCase() === inputValue.toLowerCase()) : void 0;
|
|
3530
3657
|
const canSubmitInput = allowInput && Boolean(inputValue) && !exactInputOption;
|
|
@@ -3538,7 +3665,7 @@ var Select = (0, import_react16.forwardRef)(function Select2({
|
|
|
3538
3665
|
const renderedOptions = virtualEnabled ? filteredOptions.slice(virtualStart, virtualEnd) : filteredOptions;
|
|
3539
3666
|
const enabledFilteredOptions = filteredOptions.filter((option) => !option.disabled);
|
|
3540
3667
|
const allFilteredSelected = enabledFilteredOptions.length > 0 && enabledFilteredOptions.every((option) => selectedValueSet.has(option.value));
|
|
3541
|
-
(0,
|
|
3668
|
+
(0, import_react17.useEffect)(() => {
|
|
3542
3669
|
if (!open || popupMode === "modal") return void 0;
|
|
3543
3670
|
function closeFromOutside(event) {
|
|
3544
3671
|
const target = event.target;
|
|
@@ -3547,13 +3674,13 @@ var Select = (0, import_react16.forwardRef)(function Select2({
|
|
|
3547
3674
|
document.addEventListener("mousedown", closeFromOutside);
|
|
3548
3675
|
return () => document.removeEventListener("mousedown", closeFromOutside);
|
|
3549
3676
|
}, [open, popupMode]);
|
|
3550
|
-
(0,
|
|
3677
|
+
(0, import_react17.useEffect)(() => {
|
|
3551
3678
|
if (open && (showSearch || allowInput)) searchRef.current?.focus();
|
|
3552
3679
|
}, [allowInput, open, showSearch]);
|
|
3553
|
-
(0,
|
|
3680
|
+
(0, import_react17.useEffect)(() => {
|
|
3554
3681
|
if (disabled || loading) closeDropdown();
|
|
3555
3682
|
}, [disabled, loading]);
|
|
3556
|
-
(0,
|
|
3683
|
+
(0, import_react17.useEffect)(() => {
|
|
3557
3684
|
if (!open || popupMode !== "dropdown" || !pendingSelectedScroll.current || query) return;
|
|
3558
3685
|
const index = filteredOptions.findIndex((option) => selectedValueSet.has(option.value));
|
|
3559
3686
|
if (index < 0) return;
|
|
@@ -3568,7 +3695,7 @@ var Select = (0, import_react16.forwardRef)(function Select2({
|
|
|
3568
3695
|
});
|
|
3569
3696
|
return () => cancelAnimationFrame(frame);
|
|
3570
3697
|
}, [open, popupMode, filteredOptions, selectedValueSet, virtualEnabled, optionHeight, query]);
|
|
3571
|
-
(0,
|
|
3698
|
+
(0, import_react17.useLayoutEffect)(() => {
|
|
3572
3699
|
if (!open || popupMode !== "dropdown") return;
|
|
3573
3700
|
const trigger = rootRef.current?.querySelector(".sia-select__trigger");
|
|
3574
3701
|
if (trigger) setDropdownFontSize(getComputedStyle(trigger).fontSize);
|
|
@@ -3719,7 +3846,7 @@ var Select = (0, import_react16.forwardRef)(function Select2({
|
|
|
3719
3846
|
function renderOption(option, renderedIndex) {
|
|
3720
3847
|
const optionIndex = virtualEnabled ? virtualStart + renderedIndex : renderedIndex;
|
|
3721
3848
|
const selected = selectedValueSet.has(option.value);
|
|
3722
|
-
return /* @__PURE__ */ (0,
|
|
3849
|
+
return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
|
|
3723
3850
|
"div",
|
|
3724
3851
|
{
|
|
3725
3852
|
id: `${listboxId}-${optionIndex}`,
|
|
@@ -3732,11 +3859,11 @@ var Select = (0, import_react16.forwardRef)(function Select2({
|
|
|
3732
3859
|
onMouseDown: (event) => event.preventDefault(),
|
|
3733
3860
|
onClick: () => selectOption(option),
|
|
3734
3861
|
children: [
|
|
3735
|
-
/* @__PURE__ */ (0,
|
|
3736
|
-
/* @__PURE__ */ (0,
|
|
3737
|
-
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
|
|
3738
3865
|
] }),
|
|
3739
|
-
selected ? /* @__PURE__ */ (0,
|
|
3866
|
+
selected ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Icon, { name: "check", size: 15 }) : null
|
|
3740
3867
|
]
|
|
3741
3868
|
},
|
|
3742
3869
|
`${typeof option.value}-${option.value}`
|
|
@@ -3750,8 +3877,8 @@ var Select = (0, import_react16.forwardRef)(function Select2({
|
|
|
3750
3877
|
setModalValues([...modalValues.filter((value2) => !editable.has(value2)), ...modalEnabled.filter((option) => operation === "all" || operation === "invert" && !modalValues.includes(option.value)).map((option) => option.value)]);
|
|
3751
3878
|
}
|
|
3752
3879
|
const floating = useFloatingPlaceholder({ mode: placeholderMode, placeholder, filled: hasValue, active: open });
|
|
3753
|
-
return /* @__PURE__ */ (0,
|
|
3754
|
-
/* @__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)(
|
|
3755
3882
|
"button",
|
|
3756
3883
|
{
|
|
3757
3884
|
...withTitleTooltip(props),
|
|
@@ -3769,29 +3896,29 @@ var Select = (0, import_react16.forwardRef)(function Select2({
|
|
|
3769
3896
|
onClick: () => open ? closeDropdown() : openDropdown(),
|
|
3770
3897
|
onKeyDown: handleTriggerKeyDown,
|
|
3771
3898
|
children: [
|
|
3772
|
-
multiple && hasValue ? /* @__PURE__ */ (0,
|
|
3773
|
-
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,
|
|
3774
3901
|
floating.label,
|
|
3775
|
-
/* @__PURE__ */ (0,
|
|
3902
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Icon, { className: "sia-select__arrow", name: "chevron-down", size: 15 })
|
|
3776
3903
|
]
|
|
3777
3904
|
}
|
|
3778
3905
|
),
|
|
3779
|
-
allowClear && hasValue && !disabled && !loading ? /* @__PURE__ */ (0,
|
|
3780
|
-
/* @__PURE__ */ (0,
|
|
3781
|
-
/* @__PURE__ */ (0,
|
|
3782
|
-
showSearch || allowInput ? /* @__PURE__ */ (0,
|
|
3783
|
-
/* @__PURE__ */ (0,
|
|
3784
|
-
/* @__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 })
|
|
3785
3912
|
] }) : null,
|
|
3786
|
-
canSubmitInput ? /* @__PURE__ */ (0,
|
|
3787
|
-
/* @__PURE__ */ (0,
|
|
3788
|
-
/* @__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: [
|
|
3789
3916
|
"\u4F7F\u7528\u201C",
|
|
3790
3917
|
inputValue,
|
|
3791
3918
|
"\u201D"
|
|
3792
3919
|
] })
|
|
3793
3920
|
] }) : null,
|
|
3794
|
-
/* @__PURE__ */ (0,
|
|
3921
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
3795
3922
|
"div",
|
|
3796
3923
|
{
|
|
3797
3924
|
ref: listRef,
|
|
@@ -3802,23 +3929,23 @@ var Select = (0, import_react16.forwardRef)(function Select2({
|
|
|
3802
3929
|
"aria-multiselectable": multiple || void 0,
|
|
3803
3930
|
style: { maxHeight: listHeight },
|
|
3804
3931
|
onScroll: handleListScroll,
|
|
3805
|
-
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 })
|
|
3806
3933
|
}
|
|
3807
3934
|
),
|
|
3808
|
-
showActions ? /* @__PURE__ */ (0,
|
|
3809
|
-
/* @__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: [
|
|
3810
3937
|
"\u5171 ",
|
|
3811
3938
|
filteredOptions.length,
|
|
3812
3939
|
" \u6761"
|
|
3813
3940
|
] }),
|
|
3814
|
-
multiple && showSelectAll ? /* @__PURE__ */ (0,
|
|
3815
|
-
/* @__PURE__ */ (0,
|
|
3816
|
-
/* @__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" })
|
|
3817
3944
|
] }) : null,
|
|
3818
|
-
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
|
|
3819
3946
|
] }) : null
|
|
3820
3947
|
] }),
|
|
3821
|
-
popupMode === "modal" ? /* @__PURE__ */ (0,
|
|
3948
|
+
popupMode === "modal" ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
3822
3949
|
Modal2,
|
|
3823
3950
|
{
|
|
3824
3951
|
className: "sia-select-modal",
|
|
@@ -3830,30 +3957,30 @@ var Select = (0, import_react16.forwardRef)(function Select2({
|
|
|
3830
3957
|
if (!next) closeDropdown();
|
|
3831
3958
|
},
|
|
3832
3959
|
onCancel: closeDropdown,
|
|
3833
|
-
footer: /* @__PURE__ */ (0,
|
|
3834
|
-
/* @__PURE__ */ (0,
|
|
3835
|
-
/* @__PURE__ */ (0,
|
|
3836
|
-
/* @__PURE__ */ (0,
|
|
3837
|
-
/* @__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" })
|
|
3838
3965
|
] })
|
|
3839
3966
|
] }),
|
|
3840
|
-
children: open ? /* @__PURE__ */ (0,
|
|
3841
|
-
modalConfig?.headerExtra != null && modalConfig.headerExtra !== false ? /* @__PURE__ */ (0,
|
|
3842
|
-
/* @__PURE__ */ (0,
|
|
3843
|
-
/* @__PURE__ */ (0,
|
|
3844
|
-
/* @__PURE__ */ (0,
|
|
3845
|
-
/* @__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: [
|
|
3846
3973
|
"\u5DF2\u9009\u9879(",
|
|
3847
3974
|
modalValues.length,
|
|
3848
3975
|
")"
|
|
3849
3976
|
] })
|
|
3850
3977
|
] }),
|
|
3851
|
-
/* @__PURE__ */ (0,
|
|
3978
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
3852
3979
|
Input,
|
|
3853
3980
|
{
|
|
3854
3981
|
"aria-label": searchPlaceholder,
|
|
3855
3982
|
placeholder: searchPlaceholder,
|
|
3856
|
-
prefix: /* @__PURE__ */ (0,
|
|
3983
|
+
prefix: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Icon, { name: "search", size: 14 }),
|
|
3857
3984
|
value: query,
|
|
3858
3985
|
allowClear: true,
|
|
3859
3986
|
onChange: (event) => {
|
|
@@ -3863,8 +3990,8 @@ var Select = (0, import_react16.forwardRef)(function Select2({
|
|
|
3863
3990
|
}
|
|
3864
3991
|
)
|
|
3865
3992
|
] }),
|
|
3866
|
-
multiple && showSelectAll ? /* @__PURE__ */ (0,
|
|
3867
|
-
/* @__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)(
|
|
3868
3995
|
Checkbox2,
|
|
3869
3996
|
{
|
|
3870
3997
|
checked: modalEnabled.length > 0 && modalEnabled.every((option) => modalValues.includes(option.value)),
|
|
@@ -3874,10 +4001,10 @@ var Select = (0, import_react16.forwardRef)(function Select2({
|
|
|
3874
4001
|
children: "\u5168\u9009"
|
|
3875
4002
|
}
|
|
3876
4003
|
),
|
|
3877
|
-
/* @__PURE__ */ (0,
|
|
3878
|
-
/* @__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" })
|
|
3879
4006
|
] }) : null,
|
|
3880
|
-
allowInput && canSubmitInput ? /* @__PURE__ */ (0,
|
|
4007
|
+
allowInput && canSubmitInput ? /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(Button, { variant: "link", onClick: () => {
|
|
3881
4008
|
setModalValues(multiple ? [.../* @__PURE__ */ new Set([...modalValues, inputValue])] : [inputValue]);
|
|
3882
4009
|
setQuery("");
|
|
3883
4010
|
}, children: [
|
|
@@ -3885,7 +4012,7 @@ var Select = (0, import_react16.forwardRef)(function Select2({
|
|
|
3885
4012
|
inputValue,
|
|
3886
4013
|
"\u201D"
|
|
3887
4014
|
] }) : null,
|
|
3888
|
-
/* @__PURE__ */ (0,
|
|
4015
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
3889
4016
|
SelectionPanel,
|
|
3890
4017
|
{
|
|
3891
4018
|
options: modalFiltered,
|
|
@@ -3909,7 +4036,7 @@ var Select = (0, import_react16.forwardRef)(function Select2({
|
|
|
3909
4036
|
});
|
|
3910
4037
|
|
|
3911
4038
|
// src/components/SelectDateRange.tsx
|
|
3912
|
-
var
|
|
4039
|
+
var import_jsx_runtime17 = require("react/jsx-runtime");
|
|
3913
4040
|
function SelectDateRange({
|
|
3914
4041
|
options,
|
|
3915
4042
|
value,
|
|
@@ -3932,8 +4059,8 @@ function SelectDateRange({
|
|
|
3932
4059
|
const size = useControlSize(sizeProp);
|
|
3933
4060
|
const initialValue = defaultValue ?? { select: options[0]?.value ?? "", range: ["", ""] };
|
|
3934
4061
|
const [currentValue, setCurrentValue] = useControllableState({ value: value === void 0 ? void 0 : value && typeof value === "object" ? value : { select: "", range: ["", ""] }, defaultValue: initialValue, onChange });
|
|
3935
|
-
return /* @__PURE__ */ (0,
|
|
3936
|
-
/* @__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)(
|
|
3937
4064
|
Select,
|
|
3938
4065
|
{
|
|
3939
4066
|
className: "sia-select-date-range__select",
|
|
@@ -3951,7 +4078,7 @@ function SelectDateRange({
|
|
|
3951
4078
|
}
|
|
3952
4079
|
}
|
|
3953
4080
|
),
|
|
3954
|
-
/* @__PURE__ */ (0,
|
|
4081
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
3955
4082
|
DatePicker.RangePicker,
|
|
3956
4083
|
{
|
|
3957
4084
|
className: "sia-select-date-range__picker",
|