@sia.soul/sia-react-ui 0.1.38 → 0.1.40
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/{chunk-DQ7WGTKA.js → chunk-CEZ4GW3X.js} +97 -44
- package/dist/{core-BzBVS9md.d.cts → core-BAHoW7_e.d.cts} +2 -2
- package/dist/{core-CBURAp9W.d.ts → core-fn8h4yRg.d.ts} +2 -2
- package/dist/core.cjs +254 -201
- package/dist/core.css +63 -23
- package/dist/core.d.cts +1 -1
- package/dist/core.d.ts +1 -1
- package/dist/core.js +1 -1
- package/dist/index.cjs +536 -483
- package/dist/index.css +63 -23
- package/dist/index.d.cts +2 -2
- package/dist/index.d.ts +2 -2
- package/dist/index.js +1 -1
- package/package.json +1 -1
package/dist/core.cjs
CHANGED
|
@@ -1833,6 +1833,7 @@ function Tag({
|
|
|
1833
1833
|
// src/components/Tabs.tsx
|
|
1834
1834
|
var import_react10 = require("react");
|
|
1835
1835
|
var import_jsx_runtime11 = require("react/jsx-runtime");
|
|
1836
|
+
var import_react11 = require("react");
|
|
1836
1837
|
function Tabs({
|
|
1837
1838
|
items,
|
|
1838
1839
|
activeKey,
|
|
@@ -1867,6 +1868,42 @@ function Tabs({
|
|
|
1867
1868
|
const sliding = ["capsule", "line", "underline", "tech", "tech-line"].includes(type);
|
|
1868
1869
|
const listRef = (0, import_react10.useRef)(null);
|
|
1869
1870
|
const indicatorRef = (0, import_react10.useRef)(null);
|
|
1871
|
+
const moreRef = (0, import_react10.useRef)(null);
|
|
1872
|
+
const [overflow, setOverflow] = (0, import_react10.useState)({ count: items.length, width: 0 });
|
|
1873
|
+
const [moreOpen, setMoreOpen] = (0, import_react10.useState)(false);
|
|
1874
|
+
const visibleCount = resolvedOrientation === "horizontal" ? overflow.count : items.length;
|
|
1875
|
+
const hiddenItems = items.slice(visibleCount);
|
|
1876
|
+
(0, import_react10.useLayoutEffect)(() => {
|
|
1877
|
+
const list = listRef.current;
|
|
1878
|
+
if (!list || resolvedOrientation !== "horizontal") return;
|
|
1879
|
+
const entries = Array.from(list.children).filter((node) => node instanceof HTMLElement && node.hasAttribute("data-tab-entry"));
|
|
1880
|
+
const measure = () => {
|
|
1881
|
+
const css = getComputedStyle(list);
|
|
1882
|
+
const gap = parseFloat(css.columnGap) || 0;
|
|
1883
|
+
const padding = (parseFloat(css.paddingLeft) || 0) + (parseFloat(css.paddingRight) || 0);
|
|
1884
|
+
const widths = entries.map((node) => node.getBoundingClientRect().width);
|
|
1885
|
+
const total = widths.reduce((sum, width2) => sum + width2, 0) + gap * Math.max(0, widths.length - 1);
|
|
1886
|
+
const available = Math.max(0, list.clientWidth - padding);
|
|
1887
|
+
let count = widths.length;
|
|
1888
|
+
if (total > available + 0.5) {
|
|
1889
|
+
const moreWidth = moreRef.current?.getBoundingClientRect().width ?? 36;
|
|
1890
|
+
let used = moreWidth;
|
|
1891
|
+
count = 0;
|
|
1892
|
+
for (const width2 of widths) {
|
|
1893
|
+
if (used + gap + width2 > available + 0.5) break;
|
|
1894
|
+
used += gap + width2;
|
|
1895
|
+
count++;
|
|
1896
|
+
}
|
|
1897
|
+
}
|
|
1898
|
+
const width = Math.ceil(total + padding + (parseFloat(css.borderLeftWidth) || 0) + (parseFloat(css.borderRightWidth) || 0));
|
|
1899
|
+
setOverflow((previous) => previous.count === count && previous.width === width ? previous : { count, width });
|
|
1900
|
+
};
|
|
1901
|
+
measure();
|
|
1902
|
+
const observer = new ResizeObserver(measure);
|
|
1903
|
+
observer.observe(list);
|
|
1904
|
+
entries.forEach((entry) => observer.observe(entry));
|
|
1905
|
+
return () => observer.disconnect();
|
|
1906
|
+
}, [items, type, size, closable, resolvedOrientation, tabBarTitle, tabBarExtraContent]);
|
|
1870
1907
|
const [contentState, setContentState] = (0, import_react10.useState)(() => ({ key: selectedKey, visited: /* @__PURE__ */ new Set([selectedKey]) }));
|
|
1871
1908
|
const settledKeyRef = (0, import_react10.useRef)(selectedKey);
|
|
1872
1909
|
const afterChangeRef = (0, import_react10.useRef)(onAfterChange);
|
|
@@ -1881,13 +1918,14 @@ function Tabs({
|
|
|
1881
1918
|
function updateIndicator() {
|
|
1882
1919
|
if (!list || !indicator) return;
|
|
1883
1920
|
const active = list.querySelector('[role="tab"][aria-selected="true"]');
|
|
1884
|
-
if (!active) {
|
|
1921
|
+
if (!active || active.closest('[data-tab-hidden="true"]')) {
|
|
1885
1922
|
indicator.style.visibility = "hidden";
|
|
1886
1923
|
return;
|
|
1887
1924
|
}
|
|
1888
1925
|
const listRect = list.getBoundingClientRect();
|
|
1889
1926
|
const rect = active.getBoundingClientRect();
|
|
1890
|
-
|
|
1927
|
+
const currentRect = active.getBoundingClientRect();
|
|
1928
|
+
indicator.style.transform = `translate(${currentRect.left - listRect.left - list.clientLeft + list.scrollLeft}px, ${currentRect.top - listRect.top - list.clientTop + list.scrollTop}px)`;
|
|
1891
1929
|
indicator.style.width = `${rect.width}px`;
|
|
1892
1930
|
indicator.style.height = `${rect.height}px`;
|
|
1893
1931
|
indicator.style.visibility = "visible";
|
|
@@ -1901,7 +1939,7 @@ function Tabs({
|
|
|
1901
1939
|
observer.observe(list);
|
|
1902
1940
|
list.querySelectorAll('[role="tab"]').forEach((tab) => observer.observe(tab));
|
|
1903
1941
|
return () => observer.disconnect();
|
|
1904
|
-
}, [sliding, type, selectedKey, items, size, resolvedPosition, centered, closable]);
|
|
1942
|
+
}, [sliding, type, selectedKey, items, size, resolvedPosition, centered, closable, visibleCount]);
|
|
1905
1943
|
(0, import_react10.useEffect)(() => {
|
|
1906
1944
|
let cancelled = false;
|
|
1907
1945
|
let frame = 0;
|
|
@@ -1935,7 +1973,8 @@ function Tabs({
|
|
|
1935
1973
|
}
|
|
1936
1974
|
function focusAndSelect(key) {
|
|
1937
1975
|
selectTab(key);
|
|
1938
|
-
|
|
1976
|
+
if (items.findIndex((item) => item.key === key) >= visibleCount) moreRef.current?.focus();
|
|
1977
|
+
else document.getElementById(`${baseId}-tab-${key}`)?.focus();
|
|
1939
1978
|
}
|
|
1940
1979
|
function handleKeyDown(event, key) {
|
|
1941
1980
|
const previousKey = resolvedOrientation === "horizontal" ? "ArrowLeft" : "ArrowUp";
|
|
@@ -1961,49 +2000,49 @@ function Tabs({
|
|
|
1961
2000
|
tabBarTitle,
|
|
1962
2001
|
type === "tech-line" ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("svg", { className: "sia-tabs__title-connector", viewBox: "0 0 32 40", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("path", { d: "M0 39.25 H5 Q8 39.25 10 35.25 L28 3.75 Q29 1.75 32 1.75", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinejoin: "round" }) }) : null
|
|
1963
2002
|
] }) : null,
|
|
1964
|
-
/* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { ref: listRef, className: `sia-tabs__list${sliding ? " sia-tabs__list--sliding" : ""}`, role: "tablist", "aria-orientation": resolvedOrientation, children: [
|
|
2003
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { ref: listRef, style: resolvedOrientation === "horizontal" && overflow.width ? { width: overflow.width } : void 0, className: `sia-tabs__list${sliding ? " sia-tabs__list--sliding" : ""}`, role: "tablist", "aria-orientation": resolvedOrientation, children: [
|
|
1965
2004
|
sliding ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { ref: indicatorRef, className: `sia-tabs__indicator${type === "capsule" ? " sia-tabs__capsule-indicator" : ""}`, "aria-hidden": "true", children: type === "tech-line" ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "sia-tabs__indicator-shape", "aria-hidden": "true" }) : null }, type) : null,
|
|
1966
|
-
items.map((item) => {
|
|
2005
|
+
items.map((item, index) => {
|
|
1967
2006
|
const selected = item.key === selectedKey;
|
|
1968
2007
|
const canClose = item.closable ?? closable;
|
|
1969
|
-
const tabNode = /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("span", { className: `sia-tabs__tab-wrap${canClose ? " is-closable" : ""}`, children: [
|
|
1970
|
-
/* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
|
|
1971
|
-
"button",
|
|
1972
|
-
{
|
|
1973
|
-
id: `${baseId}-tab-${item.key}`,
|
|
1974
|
-
type: "button",
|
|
1975
|
-
className: "sia-tabs__tab",
|
|
1976
|
-
role: "tab",
|
|
1977
|
-
"aria-selected": selected,
|
|
1978
|
-
"aria-controls": hasPanels ? `${baseId}-panel-${item.key}` : void 0,
|
|
1979
|
-
tabIndex: selected ? 0 : -1,
|
|
1980
|
-
disabled: item.disabled,
|
|
1981
|
-
onClick: () => selectTab(item.key),
|
|
1982
|
-
onKeyDown: (event) => handleKeyDown(event, item.key),
|
|
1983
|
-
children: [
|
|
1984
|
-
type === "tech-line" ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "sia-tabs__tab-shape", "aria-hidden": "true" }) : null,
|
|
1985
|
-
item.icon ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "sia-tabs__icon", children: item.icon }) : null,
|
|
1986
|
-
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { children: item.label })
|
|
1987
|
-
]
|
|
1988
|
-
}
|
|
1989
|
-
),
|
|
1990
|
-
canClose ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
|
1991
|
-
"button",
|
|
1992
|
-
{
|
|
1993
|
-
type: "button",
|
|
1994
|
-
className: "sia-tabs__close",
|
|
1995
|
-
"aria-label": `\u5173\u95ED${typeof item.label === "string" ? item.label : "\u6807\u7B7E\u9875"}`,
|
|
1996
|
-
disabled: item.disabled,
|
|
1997
|
-
onClick: () => onEdit?.(item.key, "remove"),
|
|
1998
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Icon, { name: "close", size: 12 })
|
|
1999
|
-
}
|
|
2000
|
-
) : null
|
|
2001
|
-
] }, item.key);
|
|
2002
2008
|
const contextMenuItems = typeof tabContextMenu === "function" ? tabContextMenu(item) : tabContextMenu;
|
|
2009
|
+
const entryProps = { "data-tab-entry": "", "data-tab-hidden": index >= visibleCount, "aria-hidden": index >= visibleCount || void 0 };
|
|
2010
|
+
const tabNode = /* @__PURE__ */ (0, import_react11.createElement)("span", { ...!contextMenuItems?.length ? entryProps : {}, className: `sia-tabs__tab-wrap${canClose ? " is-closable" : ""}`, key: item.key }, /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
|
|
2011
|
+
"button",
|
|
2012
|
+
{
|
|
2013
|
+
id: `${baseId}-tab-${item.key}`,
|
|
2014
|
+
type: "button",
|
|
2015
|
+
className: "sia-tabs__tab",
|
|
2016
|
+
role: "tab",
|
|
2017
|
+
"aria-selected": selected,
|
|
2018
|
+
"aria-controls": hasPanels ? `${baseId}-panel-${item.key}` : void 0,
|
|
2019
|
+
tabIndex: selected ? 0 : -1,
|
|
2020
|
+
disabled: item.disabled,
|
|
2021
|
+
onClick: () => selectTab(item.key),
|
|
2022
|
+
onKeyDown: (event) => handleKeyDown(event, item.key),
|
|
2023
|
+
children: [
|
|
2024
|
+
type === "tech-line" ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "sia-tabs__tab-shape", "aria-hidden": "true" }) : null,
|
|
2025
|
+
item.icon ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "sia-tabs__icon", children: item.icon }) : null,
|
|
2026
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { children: item.label })
|
|
2027
|
+
]
|
|
2028
|
+
}
|
|
2029
|
+
), canClose ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
|
2030
|
+
"button",
|
|
2031
|
+
{
|
|
2032
|
+
type: "button",
|
|
2033
|
+
className: "sia-tabs__close",
|
|
2034
|
+
"aria-label": `\u5173\u95ED${typeof item.label === "string" ? item.label : "\u6807\u7B7E\u9875"}`,
|
|
2035
|
+
disabled: item.disabled,
|
|
2036
|
+
onClick: () => onEdit?.(item.key, "remove"),
|
|
2037
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Icon, { name: "close", size: 12 })
|
|
2038
|
+
}
|
|
2039
|
+
) : null);
|
|
2003
2040
|
if (!contextMenuItems?.length) return tabNode;
|
|
2004
|
-
return /* @__PURE__ */ (0,
|
|
2041
|
+
return /* @__PURE__ */ (0, import_react11.createElement)(
|
|
2005
2042
|
Dropdown,
|
|
2006
2043
|
{
|
|
2044
|
+
...entryProps,
|
|
2045
|
+
key: item.key,
|
|
2007
2046
|
className: "sia-tabs__tab-context-trigger",
|
|
2008
2047
|
popupClassName: "sia-tabs__tab-context-menu",
|
|
2009
2048
|
trigger: ["contextMenu"],
|
|
@@ -2012,12 +2051,26 @@ function Tabs({
|
|
|
2012
2051
|
items: contextMenuItems,
|
|
2013
2052
|
selectable: false,
|
|
2014
2053
|
onClick: (info) => onTabContextMenuClick?.({ ...info, tabKey: item.key, tab: item })
|
|
2015
|
-
}
|
|
2016
|
-
children: tabNode
|
|
2054
|
+
}
|
|
2017
2055
|
},
|
|
2018
|
-
|
|
2056
|
+
tabNode
|
|
2019
2057
|
);
|
|
2020
|
-
})
|
|
2058
|
+
}),
|
|
2059
|
+
resolvedOrientation === "horizontal" ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
|
2060
|
+
Dropdown,
|
|
2061
|
+
{
|
|
2062
|
+
className: "sia-tabs__more",
|
|
2063
|
+
"data-tab-hidden": !hiddenItems.length,
|
|
2064
|
+
trigger: ["hover", "click"],
|
|
2065
|
+
placement: "bottomRight",
|
|
2066
|
+
showTriggerIcon: false,
|
|
2067
|
+
autoFocus: true,
|
|
2068
|
+
open: moreOpen && hiddenItems.length > 0,
|
|
2069
|
+
onOpenChange: setMoreOpen,
|
|
2070
|
+
menu: { items: hiddenItems.map((item) => ({ key: item.key, label: item.label, icon: item.icon, disabled: item.disabled })), selectedKeys: [selectedKey], onClick: (info) => selectTab(info.key) },
|
|
2071
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Button, { ref: moreRef, variant: "text", icon: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Icon, { name: "more-horizontal" }), "aria-label": "\u66F4\u591A\u9009\u9879\u5361", onKeyDown: (event) => handleKeyDown(event, selectedKey), className: hiddenItems.some((item) => item.key === selectedKey) ? "is-active" : void 0 })
|
|
2072
|
+
}
|
|
2073
|
+
) : null
|
|
2021
2074
|
] }),
|
|
2022
2075
|
tabBarExtraContent ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "sia-tabs__extra", children: tabBarExtraContent }) : null
|
|
2023
2076
|
] }),
|
|
@@ -2048,26 +2101,26 @@ function Tabs({
|
|
|
2048
2101
|
}
|
|
2049
2102
|
|
|
2050
2103
|
// src/components/Feedback.tsx
|
|
2051
|
-
var
|
|
2104
|
+
var import_react14 = require("react");
|
|
2052
2105
|
var import_react_dom3 = require("react-dom");
|
|
2053
2106
|
var import_client2 = require("react-dom/client");
|
|
2054
2107
|
|
|
2055
2108
|
// src/components/FloatingDisplay.tsx
|
|
2056
|
-
var
|
|
2109
|
+
var import_react13 = require("react");
|
|
2057
2110
|
var import_react_dom2 = require("react-dom");
|
|
2058
2111
|
|
|
2059
2112
|
// src/components/Checkbox.tsx
|
|
2060
|
-
var
|
|
2113
|
+
var import_react12 = require("react");
|
|
2061
2114
|
var import_jsx_runtime12 = require("react/jsx-runtime");
|
|
2062
|
-
var CheckboxGroupContext = (0,
|
|
2063
|
-
var CheckboxRoot = (0,
|
|
2115
|
+
var CheckboxGroupContext = (0, import_react12.createContext)(null);
|
|
2116
|
+
var CheckboxRoot = (0, import_react12.forwardRef)(function Checkbox({ value, size: sizeProp, indeterminate = false, children, disabled, checked, defaultChecked, className = "", onChange, ...props }, forwardedRef) {
|
|
2064
2117
|
const size = useControlSize(sizeProp);
|
|
2065
|
-
const group = (0,
|
|
2066
|
-
const localRef = (0,
|
|
2067
|
-
const fallbackId = (0,
|
|
2118
|
+
const group = (0, import_react12.useContext)(CheckboxGroupContext);
|
|
2119
|
+
const localRef = (0, import_react12.useRef)(null);
|
|
2120
|
+
const fallbackId = (0, import_react12.useId)();
|
|
2068
2121
|
const grouped = group !== null && value !== void 0;
|
|
2069
2122
|
const currentChecked = grouped ? group.values.includes(value) : checked;
|
|
2070
|
-
(0,
|
|
2123
|
+
(0, import_react12.useEffect)(() => {
|
|
2071
2124
|
if (localRef.current) localRef.current.indeterminate = indeterminate;
|
|
2072
2125
|
}, [indeterminate]);
|
|
2073
2126
|
function setRef(node) {
|
|
@@ -2120,7 +2173,7 @@ function CheckboxGroup({
|
|
|
2120
2173
|
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`
|
|
2121
2174
|
};
|
|
2122
2175
|
const [values, setValues] = useControllableState({ value, defaultValue, onChange });
|
|
2123
|
-
const context = (0,
|
|
2176
|
+
const context = (0, import_react12.useMemo)(() => ({
|
|
2124
2177
|
values,
|
|
2125
2178
|
disabled,
|
|
2126
2179
|
name,
|
|
@@ -2199,17 +2252,17 @@ function Floating({
|
|
|
2199
2252
|
role = "tooltip",
|
|
2200
2253
|
onOpenChange
|
|
2201
2254
|
}) {
|
|
2202
|
-
const rootRef = (0,
|
|
2203
|
-
const overlayRef = (0,
|
|
2204
|
-
const enterTimer = (0,
|
|
2205
|
-
const leaveTimer = (0,
|
|
2206
|
-
const contentId = (0,
|
|
2255
|
+
const rootRef = (0, import_react13.useRef)(null);
|
|
2256
|
+
const overlayRef = (0, import_react13.useRef)(null);
|
|
2257
|
+
const enterTimer = (0, import_react13.useRef)();
|
|
2258
|
+
const leaveTimer = (0, import_react13.useRef)();
|
|
2259
|
+
const contentId = (0, import_react13.useId)();
|
|
2207
2260
|
const triggers = Array.isArray(trigger) ? trigger : [trigger];
|
|
2208
2261
|
const [visible, setVisible] = useControllableState({ value: open, defaultValue: defaultOpen, onChange: onOpenChange });
|
|
2209
|
-
const [position, setPosition] = (0,
|
|
2210
|
-
const setVisibleRef = (0,
|
|
2262
|
+
const [position, setPosition] = (0, import_react13.useState)();
|
|
2263
|
+
const setVisibleRef = (0, import_react13.useRef)(setVisible);
|
|
2211
2264
|
setVisibleRef.current = setVisible;
|
|
2212
|
-
const closeSelfRef = (0,
|
|
2265
|
+
const closeSelfRef = (0, import_react13.useRef)();
|
|
2213
2266
|
if (!closeSelfRef.current) closeSelfRef.current = () => setVisibleRef.current(false);
|
|
2214
2267
|
const exclusiveTooltip = role === "tooltip" && triggers.includes("hover");
|
|
2215
2268
|
function openNow() {
|
|
@@ -2237,7 +2290,7 @@ function Floating({
|
|
|
2237
2290
|
if (delay <= 0) closeNow();
|
|
2238
2291
|
else leaveTimer.current = window.setTimeout(closeNow, delay * 1e3);
|
|
2239
2292
|
}
|
|
2240
|
-
(0,
|
|
2293
|
+
(0, import_react13.useEffect)(() => {
|
|
2241
2294
|
if (!visible || !triggers.includes("click")) return;
|
|
2242
2295
|
const close = (event) => {
|
|
2243
2296
|
const target = event.target;
|
|
@@ -2246,7 +2299,7 @@ function Floating({
|
|
|
2246
2299
|
document.addEventListener("pointerdown", close);
|
|
2247
2300
|
return () => document.removeEventListener("pointerdown", close);
|
|
2248
2301
|
}, [triggers.join("|"), visible]);
|
|
2249
|
-
(0,
|
|
2302
|
+
(0, import_react13.useLayoutEffect)(() => {
|
|
2250
2303
|
if (!visible) {
|
|
2251
2304
|
setPosition(void 0);
|
|
2252
2305
|
return;
|
|
@@ -2267,11 +2320,11 @@ function Floating({
|
|
|
2267
2320
|
observer.disconnect();
|
|
2268
2321
|
};
|
|
2269
2322
|
}, [children, content, placement, visible]);
|
|
2270
|
-
(0,
|
|
2323
|
+
(0, import_react13.useEffect)(() => () => {
|
|
2271
2324
|
clearTimers();
|
|
2272
2325
|
if (activeTooltipClose === closeSelfRef.current) activeTooltipClose = void 0;
|
|
2273
2326
|
}, []);
|
|
2274
|
-
const child = (0,
|
|
2327
|
+
const child = (0, import_react13.cloneElement)(children, {
|
|
2275
2328
|
...triggers.includes("hover") ? { onMouseEnter: (event) => {
|
|
2276
2329
|
children.props.onMouseEnter?.(event);
|
|
2277
2330
|
show(mouseEnterDelay);
|
|
@@ -2376,11 +2429,11 @@ function Progress({
|
|
|
2376
2429
|
}
|
|
2377
2430
|
|
|
2378
2431
|
// src/components/DataDisplay.tsx
|
|
2379
|
-
var
|
|
2432
|
+
var import_react16 = require("react");
|
|
2380
2433
|
var import_react_dom5 = require("react-dom");
|
|
2381
2434
|
|
|
2382
2435
|
// src/components/Overlay.tsx
|
|
2383
|
-
var
|
|
2436
|
+
var import_react15 = require("react");
|
|
2384
2437
|
var import_react_dom4 = require("react-dom");
|
|
2385
2438
|
var bodyLockCount = 0;
|
|
2386
2439
|
var previousBodyOverflow = "";
|
|
@@ -2402,10 +2455,10 @@ function focusableElements(container) {
|
|
|
2402
2455
|
)].filter((element) => !element.hidden && element.getAttribute("aria-hidden") !== "true");
|
|
2403
2456
|
}
|
|
2404
2457
|
function useOverlayLifecycle(open, panelRef, onRequestClose, keyboard = true) {
|
|
2405
|
-
const overlayIdRef = (0,
|
|
2406
|
-
const closeRef = (0,
|
|
2458
|
+
const overlayIdRef = (0, import_react15.useRef)(/* @__PURE__ */ Symbol("sia-overlay"));
|
|
2459
|
+
const closeRef = (0, import_react15.useRef)(onRequestClose);
|
|
2407
2460
|
closeRef.current = onRequestClose;
|
|
2408
|
-
(0,
|
|
2461
|
+
(0, import_react15.useEffect)(() => {
|
|
2409
2462
|
if (!open || typeof document === "undefined") return void 0;
|
|
2410
2463
|
const overlayId = overlayIdRef.current;
|
|
2411
2464
|
const previouslyFocused = document.activeElement instanceof HTMLElement ? document.activeElement : null;
|
|
@@ -2488,8 +2541,8 @@ function CollapsePanel({
|
|
|
2488
2541
|
destroyInactivePanel = false,
|
|
2489
2542
|
children
|
|
2490
2543
|
}) {
|
|
2491
|
-
const [keepChildren, setKeepChildren] = (0,
|
|
2492
|
-
(0,
|
|
2544
|
+
const [keepChildren, setKeepChildren] = (0, import_react16.useState)(open || forceRender || !destroyInactivePanel);
|
|
2545
|
+
(0, import_react16.useEffect)(() => {
|
|
2493
2546
|
if (open || forceRender || !destroyInactivePanel) {
|
|
2494
2547
|
setKeepChildren(true);
|
|
2495
2548
|
return void 0;
|
|
@@ -2503,7 +2556,7 @@ function CollapsePanel({
|
|
|
2503
2556
|
function Collapse({ items, activeKey, defaultActiveKey = [], accordion = false, bordered = true, ghost = false, destroyInactivePanel = false, expandIconPosition = "start", onChange, className = "", ...props }) {
|
|
2504
2557
|
const normalize = (key) => Array.isArray(key) ? [...key] : key === void 0 ? [] : [key];
|
|
2505
2558
|
const controlled = activeKey !== void 0;
|
|
2506
|
-
const [internal, setInternal] = (0,
|
|
2559
|
+
const [internal, setInternal] = (0, import_react16.useState)(normalize(defaultActiveKey));
|
|
2507
2560
|
const openKeys = controlled ? normalize(activeKey) : internal;
|
|
2508
2561
|
function toggle(item) {
|
|
2509
2562
|
if (item.disabled || item.collapsible === "disabled") return;
|
|
@@ -2533,16 +2586,16 @@ function Collapse({ items, activeKey, defaultActiveKey = [], accordion = false,
|
|
|
2533
2586
|
}) });
|
|
2534
2587
|
}
|
|
2535
2588
|
function ImagePreview({ open, src, alt = "", onOpenChange }) {
|
|
2536
|
-
const previewRef = (0,
|
|
2537
|
-
const stageRef = (0,
|
|
2538
|
-
const [natural, setNatural] = (0,
|
|
2539
|
-
const [area, setArea] = (0,
|
|
2540
|
-
const [zoom, setZoom] = (0,
|
|
2541
|
-
const [rotation, setRotation] = (0,
|
|
2542
|
-
const [flip, setFlip] = (0,
|
|
2543
|
-
const [pan, setPan] = (0,
|
|
2544
|
-
const [failed, setFailed] = (0,
|
|
2545
|
-
const drag = (0,
|
|
2589
|
+
const previewRef = (0, import_react16.useRef)(null);
|
|
2590
|
+
const stageRef = (0, import_react16.useRef)(null);
|
|
2591
|
+
const [natural, setNatural] = (0, import_react16.useState)({ src: "", width: 0, height: 0 });
|
|
2592
|
+
const [area, setArea] = (0, import_react16.useState)({ width: 0, height: 0 });
|
|
2593
|
+
const [zoom, setZoom] = (0, import_react16.useState)(1);
|
|
2594
|
+
const [rotation, setRotation] = (0, import_react16.useState)(0);
|
|
2595
|
+
const [flip, setFlip] = (0, import_react16.useState)({ x: 1, y: 1 });
|
|
2596
|
+
const [pan, setPan] = (0, import_react16.useState)({ x: 0, y: 0 });
|
|
2597
|
+
const [failed, setFailed] = (0, import_react16.useState)(false);
|
|
2598
|
+
const drag = (0, import_react16.useRef)();
|
|
2546
2599
|
useOverlayLifecycle(open, previewRef, () => onOpenChange(false));
|
|
2547
2600
|
const reset = () => {
|
|
2548
2601
|
setZoom(1);
|
|
@@ -2551,11 +2604,11 @@ function ImagePreview({ open, src, alt = "", onOpenChange }) {
|
|
|
2551
2604
|
setPan({ x: 0, y: 0 });
|
|
2552
2605
|
drag.current = void 0;
|
|
2553
2606
|
};
|
|
2554
|
-
(0,
|
|
2607
|
+
(0, import_react16.useEffect)(() => {
|
|
2555
2608
|
reset();
|
|
2556
2609
|
setFailed(false);
|
|
2557
2610
|
}, [open, src]);
|
|
2558
|
-
(0,
|
|
2611
|
+
(0, import_react16.useEffect)(() => {
|
|
2559
2612
|
const stage = stageRef.current;
|
|
2560
2613
|
if (!open || !stage) return;
|
|
2561
2614
|
const measure = () => {
|
|
@@ -2641,10 +2694,10 @@ function useFloatingPlaceholder({ mode, placeholder, filled, active = false }) {
|
|
|
2641
2694
|
}
|
|
2642
2695
|
|
|
2643
2696
|
// src/components/Select.tsx
|
|
2644
|
-
var
|
|
2697
|
+
var import_react23 = require("react");
|
|
2645
2698
|
|
|
2646
2699
|
// src/components/Modal.tsx
|
|
2647
|
-
var
|
|
2700
|
+
var import_react17 = require("react");
|
|
2648
2701
|
var import_client3 = require("react-dom/client");
|
|
2649
2702
|
var import_jsx_runtime17 = require("react/jsx-runtime");
|
|
2650
2703
|
var modalHandles = /* @__PURE__ */ new Set();
|
|
@@ -2656,7 +2709,7 @@ var typeIcons = {
|
|
|
2656
2709
|
error: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Icon, { name: "circle-close", size: 23 }),
|
|
2657
2710
|
confirm: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Icon, { name: "question", size: 23 })
|
|
2658
2711
|
};
|
|
2659
|
-
var ModalRoot = (0,
|
|
2712
|
+
var ModalRoot = (0, import_react17.forwardRef)(function Modal({
|
|
2660
2713
|
open,
|
|
2661
2714
|
title,
|
|
2662
2715
|
children,
|
|
@@ -2685,20 +2738,20 @@ var ModalRoot = (0, import_react16.forwardRef)(function Modal({
|
|
|
2685
2738
|
style,
|
|
2686
2739
|
...props
|
|
2687
2740
|
}, forwardedRef) {
|
|
2688
|
-
const localRef = (0,
|
|
2689
|
-
const titleId = (0,
|
|
2690
|
-
const [submitting, setSubmitting] = (0,
|
|
2691
|
-
const [rendered, setRendered] = (0,
|
|
2692
|
-
const [closing, setClosing] = (0,
|
|
2693
|
-
const afterOpenChangeRef = (0,
|
|
2741
|
+
const localRef = (0, import_react17.useRef)(null);
|
|
2742
|
+
const titleId = (0, import_react17.useId)();
|
|
2743
|
+
const [submitting, setSubmitting] = (0, import_react17.useState)(false);
|
|
2744
|
+
const [rendered, setRendered] = (0, import_react17.useState)(open);
|
|
2745
|
+
const [closing, setClosing] = (0, import_react17.useState)(false);
|
|
2746
|
+
const afterOpenChangeRef = (0, import_react17.useRef)(afterOpenChange);
|
|
2694
2747
|
afterOpenChangeRef.current = afterOpenChange;
|
|
2695
|
-
const submitLock = (0,
|
|
2696
|
-
(0,
|
|
2748
|
+
const submitLock = (0, import_react17.useRef)(false);
|
|
2749
|
+
(0, import_react17.useEffect)(() => {
|
|
2697
2750
|
if (!open || !rendered) return void 0;
|
|
2698
2751
|
const timer = window.setTimeout(() => afterOpenChangeRef.current?.(true), MODAL_MOTION_DURATION);
|
|
2699
2752
|
return () => window.clearTimeout(timer);
|
|
2700
2753
|
}, [open, rendered]);
|
|
2701
|
-
(0,
|
|
2754
|
+
(0, import_react17.useEffect)(() => {
|
|
2702
2755
|
if (open) {
|
|
2703
2756
|
setRendered(true);
|
|
2704
2757
|
setClosing(false);
|
|
@@ -2873,9 +2926,9 @@ var Modal2 = Object.assign(ModalRoot, {
|
|
|
2873
2926
|
});
|
|
2874
2927
|
|
|
2875
2928
|
// src/components/Input.tsx
|
|
2876
|
-
var
|
|
2929
|
+
var import_react18 = require("react");
|
|
2877
2930
|
var import_jsx_runtime18 = require("react/jsx-runtime");
|
|
2878
|
-
var Input = (0,
|
|
2931
|
+
var Input = (0, import_react18.forwardRef)(function Input2({
|
|
2879
2932
|
label,
|
|
2880
2933
|
hint,
|
|
2881
2934
|
status = "default",
|
|
@@ -2897,10 +2950,10 @@ var Input = (0, import_react17.forwardRef)(function Input2({
|
|
|
2897
2950
|
...props
|
|
2898
2951
|
}, forwardedRef) {
|
|
2899
2952
|
const size = useControlSize(sizeProp);
|
|
2900
|
-
const fallbackId = (0,
|
|
2953
|
+
const fallbackId = (0, import_react18.useId)();
|
|
2901
2954
|
const inputId = id ?? fallbackId;
|
|
2902
|
-
const localRef = (0,
|
|
2903
|
-
const [uncontrolledValue, setUncontrolledValue] = (0,
|
|
2955
|
+
const localRef = (0, import_react18.useRef)(null);
|
|
2956
|
+
const [uncontrolledValue, setUncontrolledValue] = (0, import_react18.useState)(() => defaultValue === void 0 ? "" : String(defaultValue));
|
|
2904
2957
|
const currentText = value !== void 0 ? String(value) : uncontrolledValue;
|
|
2905
2958
|
const hasValue = currentText.length > 0;
|
|
2906
2959
|
const floatingPlaceholder = usePlaceholderMode(placeholderMode) === "floating" && Boolean(placeholder);
|
|
@@ -2977,17 +3030,17 @@ var Input = (0, import_react17.forwardRef)(function Input2({
|
|
|
2977
3030
|
});
|
|
2978
3031
|
|
|
2979
3032
|
// src/components/SelectionPanel.tsx
|
|
2980
|
-
var
|
|
3033
|
+
var import_react21 = require("react");
|
|
2981
3034
|
|
|
2982
3035
|
// src/components/FloatingScrollbarProvider.tsx
|
|
2983
|
-
var
|
|
3036
|
+
var import_react20 = require("react");
|
|
2984
3037
|
|
|
2985
3038
|
// src/components/useScrollbarProximity.ts
|
|
2986
|
-
var
|
|
3039
|
+
var import_react19 = require("react");
|
|
2987
3040
|
var users = 0;
|
|
2988
3041
|
var cleanup;
|
|
2989
3042
|
function useScrollbarProximity() {
|
|
2990
|
-
(0,
|
|
3043
|
+
(0, import_react19.useEffect)(() => {
|
|
2991
3044
|
if (users++ === 0) {
|
|
2992
3045
|
let frame = 0;
|
|
2993
3046
|
let x = -Infinity;
|
|
@@ -3108,7 +3161,7 @@ function createTrack(axis) {
|
|
|
3108
3161
|
}
|
|
3109
3162
|
function FloatingScrollbarProvider({ disabled = false, targetRef }) {
|
|
3110
3163
|
useScrollbarProximity();
|
|
3111
|
-
(0,
|
|
3164
|
+
(0, import_react20.useEffect)(() => {
|
|
3112
3165
|
if (disabled) return;
|
|
3113
3166
|
const layer = document.createElement("div");
|
|
3114
3167
|
layer.className = "sia-floating-scrollbar-layer";
|
|
@@ -3376,26 +3429,26 @@ function SelectionPanel({
|
|
|
3376
3429
|
maxHeight = 250,
|
|
3377
3430
|
autoFocusSearch = false
|
|
3378
3431
|
}) {
|
|
3379
|
-
const [localSearch, setLocalSearch] = (0,
|
|
3432
|
+
const [localSearch, setLocalSearch] = (0, import_react21.useState)("");
|
|
3380
3433
|
const search = searchValue ?? localSearch;
|
|
3381
|
-
const [scrollTop, setScrollTop] = (0,
|
|
3382
|
-
const [active, setActive] = (0,
|
|
3383
|
-
const [keyboardActive, setKeyboardActive] = (0,
|
|
3384
|
-
const [deselectedHover, setDeselectedHover] = (0,
|
|
3385
|
-
const listRef = (0,
|
|
3386
|
-
const id = (0,
|
|
3387
|
-
const selected = (0,
|
|
3434
|
+
const [scrollTop, setScrollTop] = (0, import_react21.useState)(0);
|
|
3435
|
+
const [active, setActive] = (0, import_react21.useState)();
|
|
3436
|
+
const [keyboardActive, setKeyboardActive] = (0, import_react21.useState)(false);
|
|
3437
|
+
const [deselectedHover, setDeselectedHover] = (0, import_react21.useState)();
|
|
3438
|
+
const listRef = (0, import_react21.useRef)(null);
|
|
3439
|
+
const id = (0, import_react21.useId)();
|
|
3440
|
+
const selected = (0, import_react21.useMemo)(() => new Set(value), [value]);
|
|
3388
3441
|
const count = Math.max(1, Math.floor(columns));
|
|
3389
|
-
const allOptions = (0,
|
|
3442
|
+
const allOptions = (0, import_react21.useMemo)(() => {
|
|
3390
3443
|
if (!includeUnknownValues) return [...options];
|
|
3391
3444
|
const known = new Set(options.filter((option) => option.optionType !== "divider").map((option) => option.value));
|
|
3392
3445
|
return [...value.filter((item) => !known.has(item)).map((item) => ({ value: item, label: String(item), group: "\u81EA\u5B9A\u4E49\u503C" })), ...options];
|
|
3393
3446
|
}, [options, value, includeUnknownValues]);
|
|
3394
|
-
const filtered = (0,
|
|
3447
|
+
const filtered = (0, import_react21.useMemo)(
|
|
3395
3448
|
() => allOptions.filter((option) => (!selectedOnly || selected.has(option.value)) && (!search || option.optionType !== "divider" && [option.label, option.value].some((text) => String(text ?? "").toLowerCase().includes(search.toLowerCase())))),
|
|
3396
3449
|
[allOptions, selectedOnly, selected, search]
|
|
3397
3450
|
);
|
|
3398
|
-
const rows = (0,
|
|
3451
|
+
const rows = (0, import_react21.useMemo)(() => {
|
|
3399
3452
|
const groups = /* @__PURE__ */ new Map();
|
|
3400
3453
|
filtered.forEach((option) => {
|
|
3401
3454
|
const items = groups.get(option.group) ?? [];
|
|
@@ -3421,7 +3474,7 @@ function SelectionPanel({
|
|
|
3421
3474
|
const virtual = filtered.length > 100;
|
|
3422
3475
|
const renderedRows = virtual ? rows.filter((row) => row.top + row.height >= scrollTop - 100 && row.top <= scrollTop + maxHeight + 100) : rows;
|
|
3423
3476
|
const enabled = filtered.filter((option) => !option.disabled && option.optionType !== "divider");
|
|
3424
|
-
(0,
|
|
3477
|
+
(0, import_react21.useEffect)(() => {
|
|
3425
3478
|
setScrollTop(0);
|
|
3426
3479
|
if (listRef.current) listRef.current.scrollTop = 0;
|
|
3427
3480
|
setActive(void 0);
|
|
@@ -3546,14 +3599,14 @@ function SelectionPanel({
|
|
|
3546
3599
|
}
|
|
3547
3600
|
|
|
3548
3601
|
// src/components/OverflowTags.tsx
|
|
3549
|
-
var
|
|
3602
|
+
var import_react22 = require("react");
|
|
3550
3603
|
var import_jsx_runtime20 = require("react/jsx-runtime");
|
|
3551
3604
|
function OverflowTags({ items, maxCount: maxCount2, className = "", tagClassName, restClassName = "" }) {
|
|
3552
|
-
const rootRef = (0,
|
|
3553
|
-
const measureRef = (0,
|
|
3605
|
+
const rootRef = (0, import_react22.useRef)(null);
|
|
3606
|
+
const measureRef = (0, import_react22.useRef)(null);
|
|
3554
3607
|
const limit = Math.min(items.length, Math.max(0, Math.floor(maxCount2) || 0));
|
|
3555
|
-
const [visibleCount, setVisibleCount] = (0,
|
|
3556
|
-
(0,
|
|
3608
|
+
const [visibleCount, setVisibleCount] = (0, import_react22.useState)(0);
|
|
3609
|
+
(0, import_react22.useLayoutEffect)(() => {
|
|
3557
3610
|
const root = rootRef.current;
|
|
3558
3611
|
const measure = measureRef.current;
|
|
3559
3612
|
if (!root || !measure) return;
|
|
@@ -3598,7 +3651,7 @@ function defaultFilterOption(query, option) {
|
|
|
3598
3651
|
const keyword = query.toLowerCase();
|
|
3599
3652
|
return [option.label, option.value].some((value) => String(value).toLowerCase().includes(keyword));
|
|
3600
3653
|
}
|
|
3601
|
-
var Select = (0,
|
|
3654
|
+
var Select = (0, import_react23.forwardRef)(function Select2({
|
|
3602
3655
|
options,
|
|
3603
3656
|
mode = "single",
|
|
3604
3657
|
popupMode: popupModeProp,
|
|
@@ -3636,27 +3689,27 @@ var Select = (0, import_react22.forwardRef)(function Select2({
|
|
|
3636
3689
|
...props
|
|
3637
3690
|
}, forwardedRef) {
|
|
3638
3691
|
const size = useControlSize(sizeProp);
|
|
3639
|
-
const fallbackId = (0,
|
|
3692
|
+
const fallbackId = (0, import_react23.useId)();
|
|
3640
3693
|
const selectId = id ?? fallbackId;
|
|
3641
3694
|
const listboxId = `${selectId}-listbox`;
|
|
3642
|
-
const rootRef = (0,
|
|
3643
|
-
const popupRef = (0,
|
|
3644
|
-
const searchRef = (0,
|
|
3645
|
-
const listRef = (0,
|
|
3646
|
-
const [open, setOpen] = (0,
|
|
3695
|
+
const rootRef = (0, import_react23.useRef)(null);
|
|
3696
|
+
const popupRef = (0, import_react23.useRef)(null);
|
|
3697
|
+
const searchRef = (0, import_react23.useRef)(null);
|
|
3698
|
+
const listRef = (0, import_react23.useRef)(null);
|
|
3699
|
+
const [open, setOpen] = (0, import_react23.useState)(false);
|
|
3647
3700
|
const automaticMode = popupModeProp ?? (options.length > modalThreshold ? "modal" : "dropdown");
|
|
3648
|
-
const [openedMode, setOpenedMode] = (0,
|
|
3701
|
+
const [openedMode, setOpenedMode] = (0, import_react23.useState)(automaticMode);
|
|
3649
3702
|
const popupMode = open ? openedMode : automaticMode;
|
|
3650
|
-
const [modalValues, setModalValues] = (0,
|
|
3651
|
-
const [modalSubmitting, setModalSubmitting] = (0,
|
|
3652
|
-
const modalSubmitLock = (0,
|
|
3653
|
-
const [selectedOnly, setSelectedOnly] = (0,
|
|
3654
|
-
const [query, setQuery] = (0,
|
|
3655
|
-
const [activeIndex, setActiveIndex] = (0,
|
|
3656
|
-
const [scrollTop, setScrollTop] = (0,
|
|
3657
|
-
const [dropdownFontSize, setDropdownFontSize] = (0,
|
|
3658
|
-
const pendingSelectedScroll = (0,
|
|
3659
|
-
const deferredQuery = (0,
|
|
3703
|
+
const [modalValues, setModalValues] = (0, import_react23.useState)([]);
|
|
3704
|
+
const [modalSubmitting, setModalSubmitting] = (0, import_react23.useState)(false);
|
|
3705
|
+
const modalSubmitLock = (0, import_react23.useRef)(false);
|
|
3706
|
+
const [selectedOnly, setSelectedOnly] = (0, import_react23.useState)(false);
|
|
3707
|
+
const [query, setQuery] = (0, import_react23.useState)("");
|
|
3708
|
+
const [activeIndex, setActiveIndex] = (0, import_react23.useState)(-1);
|
|
3709
|
+
const [scrollTop, setScrollTop] = (0, import_react23.useState)(0);
|
|
3710
|
+
const [dropdownFontSize, setDropdownFontSize] = (0, import_react23.useState)();
|
|
3711
|
+
const pendingSelectedScroll = (0, import_react23.useRef)(false);
|
|
3712
|
+
const deferredQuery = (0, import_react23.useDeferredValue)(query.trim());
|
|
3660
3713
|
const initialValue = defaultValue === void 0 ? mode === "multiple" ? [] : null : defaultValue;
|
|
3661
3714
|
const [currentValue, setCurrentValue] = useControllableState({
|
|
3662
3715
|
value,
|
|
@@ -3671,20 +3724,20 @@ var Select = (0, import_react22.forwardRef)(function Select2({
|
|
|
3671
3724
|
}
|
|
3672
3725
|
}
|
|
3673
3726
|
});
|
|
3674
|
-
const selectedValues = (0,
|
|
3727
|
+
const selectedValues = (0, import_react23.useMemo)(() => {
|
|
3675
3728
|
if (currentValue == null || currentValue === "" && !options.some((option) => option.value === "")) return [];
|
|
3676
3729
|
if (mode === "multiple") return Array.isArray(currentValue) ? currentValue : currentValue === null ? [] : [currentValue];
|
|
3677
3730
|
return Array.isArray(currentValue) ? currentValue.slice(0, 1) : currentValue === null ? [] : [currentValue];
|
|
3678
3731
|
}, [currentValue, mode, options]);
|
|
3679
|
-
const selectedValueSet = (0,
|
|
3680
|
-
const availableOptions = (0,
|
|
3732
|
+
const selectedValueSet = (0, import_react23.useMemo)(() => new Set(selectedValues), [selectedValues]);
|
|
3733
|
+
const availableOptions = (0, import_react23.useMemo)(() => {
|
|
3681
3734
|
if (!allowInput) return options;
|
|
3682
3735
|
const optionValueSet = new Set(options.map((option) => option.value));
|
|
3683
3736
|
const selectedCustomOptions = selectedValues.filter((selectedValue) => !optionValueSet.has(selectedValue)).map((selectedValue) => ({ label: String(selectedValue), value: selectedValue }));
|
|
3684
3737
|
return selectedCustomOptions.length ? [...selectedCustomOptions, ...options] : options;
|
|
3685
3738
|
}, [allowInput, options, selectedValues]);
|
|
3686
|
-
const selectedOptions = (0,
|
|
3687
|
-
const filteredOptions = (0,
|
|
3739
|
+
const selectedOptions = (0, import_react23.useMemo)(() => selectedValues.map((selectedValue) => availableOptions.find((option) => option.value === selectedValue)).filter((option) => option !== void 0), [availableOptions, selectedValues]);
|
|
3740
|
+
const filteredOptions = (0, import_react23.useMemo)(() => deferredQuery ? availableOptions.filter((option) => filterOption(deferredQuery, option)) : availableOptions, [availableOptions, deferredQuery, filterOption]);
|
|
3688
3741
|
const inputValue = query.trim();
|
|
3689
3742
|
const exactInputOption = inputValue ? availableOptions.find((option) => String(option.value).toLowerCase() === inputValue.toLowerCase() || typeof option.label === "string" && option.label.toLowerCase() === inputValue.toLowerCase()) : void 0;
|
|
3690
3743
|
const canSubmitInput = allowInput && Boolean(inputValue) && !exactInputOption;
|
|
@@ -3698,7 +3751,7 @@ var Select = (0, import_react22.forwardRef)(function Select2({
|
|
|
3698
3751
|
const renderedOptions = virtualEnabled ? filteredOptions.slice(virtualStart, virtualEnd) : filteredOptions;
|
|
3699
3752
|
const enabledFilteredOptions = filteredOptions.filter((option) => !option.disabled);
|
|
3700
3753
|
const allFilteredSelected = enabledFilteredOptions.length > 0 && enabledFilteredOptions.every((option) => selectedValueSet.has(option.value));
|
|
3701
|
-
(0,
|
|
3754
|
+
(0, import_react23.useEffect)(() => {
|
|
3702
3755
|
if (!open || popupMode === "modal") return void 0;
|
|
3703
3756
|
function closeFromOutside(event) {
|
|
3704
3757
|
const target = event.target;
|
|
@@ -3707,13 +3760,13 @@ var Select = (0, import_react22.forwardRef)(function Select2({
|
|
|
3707
3760
|
document.addEventListener("mousedown", closeFromOutside);
|
|
3708
3761
|
return () => document.removeEventListener("mousedown", closeFromOutside);
|
|
3709
3762
|
}, [open, popupMode]);
|
|
3710
|
-
(0,
|
|
3763
|
+
(0, import_react23.useEffect)(() => {
|
|
3711
3764
|
if (open && (showSearch || allowInput)) searchRef.current?.focus();
|
|
3712
3765
|
}, [allowInput, open, showSearch]);
|
|
3713
|
-
(0,
|
|
3766
|
+
(0, import_react23.useEffect)(() => {
|
|
3714
3767
|
if (disabled || loading) closeDropdown();
|
|
3715
3768
|
}, [disabled, loading]);
|
|
3716
|
-
(0,
|
|
3769
|
+
(0, import_react23.useEffect)(() => {
|
|
3717
3770
|
if (!open || popupMode !== "dropdown" || !pendingSelectedScroll.current || query) return;
|
|
3718
3771
|
const index = filteredOptions.findIndex((option) => selectedValueSet.has(option.value));
|
|
3719
3772
|
if (index < 0) return;
|
|
@@ -3728,7 +3781,7 @@ var Select = (0, import_react22.forwardRef)(function Select2({
|
|
|
3728
3781
|
});
|
|
3729
3782
|
return () => cancelAnimationFrame(frame);
|
|
3730
3783
|
}, [open, popupMode, filteredOptions, selectedValueSet, virtualEnabled, optionHeight, query]);
|
|
3731
|
-
(0,
|
|
3784
|
+
(0, import_react23.useLayoutEffect)(() => {
|
|
3732
3785
|
if (!open || popupMode !== "dropdown") return;
|
|
3733
3786
|
const trigger = rootRef.current?.querySelector(".sia-select__trigger");
|
|
3734
3787
|
if (trigger) setDropdownFontSize(getComputedStyle(trigger).fontSize);
|
|
@@ -4069,7 +4122,7 @@ var Select = (0, import_react22.forwardRef)(function Select2({
|
|
|
4069
4122
|
});
|
|
4070
4123
|
|
|
4071
4124
|
// src/components/Upload.tsx
|
|
4072
|
-
var
|
|
4125
|
+
var import_react24 = require("react");
|
|
4073
4126
|
|
|
4074
4127
|
// src/components/uploadFiles.ts
|
|
4075
4128
|
function acceptsUploadFile(file, accept) {
|
|
@@ -4308,8 +4361,8 @@ var message = {
|
|
|
4308
4361
|
var import_jsx_runtime23 = require("react/jsx-runtime");
|
|
4309
4362
|
var LIST_IGNORE = /* @__PURE__ */ Symbol("SIA_UPLOAD_LIST_IGNORE");
|
|
4310
4363
|
function useThumbnail(file, accept) {
|
|
4311
|
-
const [local, setLocal] = (0,
|
|
4312
|
-
(0,
|
|
4364
|
+
const [local, setLocal] = (0, import_react24.useState)();
|
|
4365
|
+
(0, import_react24.useEffect)(() => {
|
|
4313
4366
|
if (!file?.thumbUrl && file?.originFileObj?.type.startsWith("image/")) {
|
|
4314
4367
|
const url = URL.createObjectURL(file.originFileObj);
|
|
4315
4368
|
setLocal(url);
|
|
@@ -4321,9 +4374,9 @@ function useThumbnail(file, accept) {
|
|
|
4321
4374
|
}
|
|
4322
4375
|
function UploadItem({ file, files, props, actions }) {
|
|
4323
4376
|
const source = useThumbnail(file, props.accept);
|
|
4324
|
-
const [failed, setFailed] = (0,
|
|
4325
|
-
const [downloading, setDownloading] = (0,
|
|
4326
|
-
const downloadingRef = (0,
|
|
4377
|
+
const [failed, setFailed] = (0, import_react24.useState)(false);
|
|
4378
|
+
const [downloading, setDownloading] = (0, import_react24.useState)(false);
|
|
4379
|
+
const downloadingRef = (0, import_react24.useRef)(false);
|
|
4327
4380
|
const canPreview = !!(source || file.url || file.originFileObj || props.onPreview);
|
|
4328
4381
|
const canDownload = !!(file.url || file.originFileObj || props.downloadRequest);
|
|
4329
4382
|
async function download() {
|
|
@@ -4339,7 +4392,7 @@ function UploadItem({ file, files, props, actions }) {
|
|
|
4339
4392
|
setDownloading(false);
|
|
4340
4393
|
}
|
|
4341
4394
|
}
|
|
4342
|
-
(0,
|
|
4395
|
+
(0, import_react24.useEffect)(() => setFailed(false), [source]);
|
|
4343
4396
|
const node = /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: `sia-upload__item sia-upload__item--${file.status ?? "ready"}`, children: [
|
|
4344
4397
|
props.listType !== "text" ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Button, { variant: "text", className: "sia-upload__thumbnail", "aria-label": `\u9884\u89C8\u7F29\u7565\u56FE ${file.name}`, onClick: actions.preview, disabled: !canPreview, children: source && !failed ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("img", { src: source, alt: file.name, onError: () => setFailed(true) }) : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Icon, { name: file.type?.startsWith("image/") ? "image" : "file", size: 28 }) }) : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Icon, { name: file.status === "done" ? "circle-check" : "file", size: 16 }),
|
|
4345
4398
|
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "sia-upload__name", ...withTitleTooltip({ title: file.relativePath || file.name }), children: file.url ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("a", { href: file.url, target: "_blank", rel: "noreferrer", children: file.name }) : file.name }),
|
|
@@ -4360,7 +4413,7 @@ function UploadItem({ file, files, props, actions }) {
|
|
|
4360
4413
|
] });
|
|
4361
4414
|
return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_jsx_runtime23.Fragment, { children: props.itemRender ? props.itemRender(node, file, files, actions) : node });
|
|
4362
4415
|
}
|
|
4363
|
-
var UploadRoot = (0,
|
|
4416
|
+
var UploadRoot = (0, import_react24.forwardRef)(function UploadRoot2({
|
|
4364
4417
|
accept,
|
|
4365
4418
|
multiple = false,
|
|
4366
4419
|
directory = false,
|
|
@@ -4398,19 +4451,19 @@ var UploadRoot = (0, import_react23.forwardRef)(function UploadRoot2({
|
|
|
4398
4451
|
const cardWidth = cardDimension(typeof cardSize === "number" ? cardSize : cardSize?.width);
|
|
4399
4452
|
const cardHeight = cardDimension(typeof cardSize === "number" ? cardSize : cardSize?.height);
|
|
4400
4453
|
const compactCard = listType === "picture-card" && (cardWidth < 88 || cardHeight < 88);
|
|
4401
|
-
const inputRef = (0,
|
|
4402
|
-
const [internalFiles, setInternalFiles] = (0,
|
|
4454
|
+
const inputRef = (0, import_react24.useRef)(null);
|
|
4455
|
+
const [internalFiles, setInternalFiles] = (0, import_react24.useState)(defaultFileList);
|
|
4403
4456
|
const files = fileList ?? internalFiles;
|
|
4404
|
-
const filesRef = (0,
|
|
4457
|
+
const filesRef = (0, import_react24.useRef)(files);
|
|
4405
4458
|
filesRef.current = files;
|
|
4406
|
-
const tasks = (0,
|
|
4407
|
-
const mounted = (0,
|
|
4408
|
-
const [dragging, setDragging] = (0,
|
|
4409
|
-
const [preview, setPreview] = (0,
|
|
4459
|
+
const tasks = (0, import_react24.useRef)(/* @__PURE__ */ new Map());
|
|
4460
|
+
const mounted = (0, import_react24.useRef)(true);
|
|
4461
|
+
const [dragging, setDragging] = (0, import_react24.useState)(false);
|
|
4462
|
+
const [preview, setPreview] = (0, import_react24.useState)();
|
|
4410
4463
|
const previewSource = useThumbnail(preview, accept);
|
|
4411
4464
|
const limit = maxCount2 === void 0 || !Number.isFinite(maxCount2) ? Infinity : Math.max(0, Math.floor(maxCount2));
|
|
4412
4465
|
const full = files.length >= limit;
|
|
4413
|
-
const current = (0,
|
|
4466
|
+
const current = (0, import_react24.useRef)({ disabled, directory, recursive });
|
|
4414
4467
|
current.current = { disabled, directory, recursive };
|
|
4415
4468
|
function cancel(uid) {
|
|
4416
4469
|
const task = tasks.current.get(uid);
|
|
@@ -4422,14 +4475,14 @@ var UploadRoot = (0, import_react23.forwardRef)(function UploadRoot2({
|
|
|
4422
4475
|
}
|
|
4423
4476
|
task?.finish();
|
|
4424
4477
|
}
|
|
4425
|
-
(0,
|
|
4478
|
+
(0, import_react24.useEffect)(() => {
|
|
4426
4479
|
mounted.current = true;
|
|
4427
4480
|
return () => {
|
|
4428
4481
|
mounted.current = false;
|
|
4429
4482
|
[...tasks.current.keys()].forEach(cancel);
|
|
4430
4483
|
};
|
|
4431
4484
|
}, []);
|
|
4432
|
-
(0,
|
|
4485
|
+
(0, import_react24.useEffect)(() => {
|
|
4433
4486
|
for (const uid of tasks.current.keys()) if (!files.some((file) => file.uid === uid)) cancel(uid);
|
|
4434
4487
|
if (preview && !files.some((file) => file.uid === preview.uid)) setPreview(void 0);
|
|
4435
4488
|
}, [files, preview]);
|
|
@@ -4535,7 +4588,7 @@ var UploadRoot = (0, import_react23.forwardRef)(function UploadRoot2({
|
|
|
4535
4588
|
} catch {
|
|
4536
4589
|
}
|
|
4537
4590
|
}
|
|
4538
|
-
(0,
|
|
4591
|
+
(0, import_react24.useImperativeHandle)(ref, () => ({
|
|
4539
4592
|
upload: async (uid) => {
|
|
4540
4593
|
await Promise.all(filesRef.current.filter((file) => (!uid || file.uid === uid) && file.status !== "done").map(start));
|
|
4541
4594
|
},
|
|
@@ -4657,7 +4710,7 @@ var UploadRoot = (0, import_react23.forwardRef)(function UploadRoot2({
|
|
|
4657
4710
|
}
|
|
4658
4711
|
);
|
|
4659
4712
|
});
|
|
4660
|
-
var UploadDragger = (0,
|
|
4713
|
+
var UploadDragger = (0, import_react24.forwardRef)(function UploadDragger2({ hint = "\u652F\u6301\u5355\u4E2A\u6216\u6279\u91CF\u4E0A\u4F20", children, className = "", ...props }, ref) {
|
|
4661
4714
|
return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(UploadRoot, { ...props, ref, className: `sia-upload-dragger ${className}`.trim(), children: children ?? /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("span", { className: "sia-upload-dragger__content", children: [
|
|
4662
4715
|
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Icon, { name: "upload", size: 32 }),
|
|
4663
4716
|
/* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("strong", { children: [
|
|
@@ -4698,12 +4751,12 @@ function Breadcrumb({ items, separator = "/", itemRender, className = "", ...pro
|
|
|
4698
4751
|
}
|
|
4699
4752
|
|
|
4700
4753
|
// src/components/Typography.tsx
|
|
4701
|
-
var
|
|
4754
|
+
var import_react26 = require("react");
|
|
4702
4755
|
|
|
4703
4756
|
// src/components/TextArea.tsx
|
|
4704
|
-
var
|
|
4757
|
+
var import_react25 = require("react");
|
|
4705
4758
|
var import_jsx_runtime25 = require("react/jsx-runtime");
|
|
4706
|
-
var TextArea = (0,
|
|
4759
|
+
var TextArea = (0, import_react25.forwardRef)(function TextArea2({
|
|
4707
4760
|
label,
|
|
4708
4761
|
hint,
|
|
4709
4762
|
status = "default",
|
|
@@ -4721,9 +4774,9 @@ var TextArea = (0, import_react24.forwardRef)(function TextArea2({
|
|
|
4721
4774
|
...props
|
|
4722
4775
|
}, ref) {
|
|
4723
4776
|
const size = useControlSize(sizeProp);
|
|
4724
|
-
const fallbackId = (0,
|
|
4777
|
+
const fallbackId = (0, import_react25.useId)();
|
|
4725
4778
|
const textAreaId = id ?? fallbackId;
|
|
4726
|
-
const [uncontrolledValue, setUncontrolledValue] = (0,
|
|
4779
|
+
const [uncontrolledValue, setUncontrolledValue] = (0, import_react25.useState)(() => defaultValue === void 0 ? "" : String(defaultValue));
|
|
4727
4780
|
const currentText = value !== void 0 ? String(value) : uncontrolledValue;
|
|
4728
4781
|
const floating = useFloatingPlaceholder({ mode: placeholderMode, placeholder, filled: currentText.length > 0 });
|
|
4729
4782
|
const hintId = `${textAreaId}-hint`;
|
|
@@ -4784,26 +4837,26 @@ function TypographyContent({
|
|
|
4784
4837
|
className = "",
|
|
4785
4838
|
...props
|
|
4786
4839
|
}) {
|
|
4787
|
-
const contentRef = (0,
|
|
4788
|
-
const editRef = (0,
|
|
4789
|
-
const timer = (0,
|
|
4790
|
-
const [localText, setLocalText] = (0,
|
|
4791
|
-
const [draft, setDraft] = (0,
|
|
4792
|
-
const [editing, setEditing] = (0,
|
|
4793
|
-
const [copied, setCopied] = (0,
|
|
4794
|
-
const [copyError, setCopyError] = (0,
|
|
4795
|
-
const [expanded, setExpanded] = (0,
|
|
4796
|
-
const [overflow, setOverflow] = (0,
|
|
4840
|
+
const contentRef = (0, import_react26.useRef)(null);
|
|
4841
|
+
const editRef = (0, import_react26.useRef)(null);
|
|
4842
|
+
const timer = (0, import_react26.useRef)();
|
|
4843
|
+
const [localText, setLocalText] = (0, import_react26.useState)();
|
|
4844
|
+
const [draft, setDraft] = (0, import_react26.useState)("");
|
|
4845
|
+
const [editing, setEditing] = (0, import_react26.useState)(false);
|
|
4846
|
+
const [copied, setCopied] = (0, import_react26.useState)(false);
|
|
4847
|
+
const [copyError, setCopyError] = (0, import_react26.useState)(false);
|
|
4848
|
+
const [expanded, setExpanded] = (0, import_react26.useState)(false);
|
|
4849
|
+
const [overflow, setOverflow] = (0, import_react26.useState)(false);
|
|
4797
4850
|
const editConfig = typeof editable === "object" ? editable : void 0;
|
|
4798
4851
|
const content = editConfig?.text ?? localText ?? children;
|
|
4799
4852
|
const requestedRows = typeof ellipsis === "object" ? ellipsis.rows ?? 1 : 1;
|
|
4800
4853
|
const rows = Number.isFinite(requestedRows) ? Math.max(1, Math.floor(requestedRows)) : 1;
|
|
4801
4854
|
const expandable = typeof ellipsis === "object" && ellipsis.expandable;
|
|
4802
|
-
(0,
|
|
4855
|
+
(0, import_react26.useEffect)(() => {
|
|
4803
4856
|
setLocalText(void 0);
|
|
4804
4857
|
}, [children]);
|
|
4805
|
-
(0,
|
|
4806
|
-
(0,
|
|
4858
|
+
(0, import_react26.useEffect)(() => () => clearTimeout(timer.current), []);
|
|
4859
|
+
(0, import_react26.useLayoutEffect)(() => {
|
|
4807
4860
|
const element = contentRef.current;
|
|
4808
4861
|
if (!element || !ellipsis || editing || expanded) return;
|
|
4809
4862
|
const measure = () => setOverflow(element.scrollHeight > element.clientHeight + 1 || element.scrollWidth > element.clientWidth + 1);
|
|
@@ -4921,10 +4974,10 @@ var Typography = Object.assign(TypographyRoot, {
|
|
|
4921
4974
|
});
|
|
4922
4975
|
|
|
4923
4976
|
// src/components/FloatButton.tsx
|
|
4924
|
-
var
|
|
4977
|
+
var import_react27 = require("react");
|
|
4925
4978
|
var import_jsx_runtime27 = require("react/jsx-runtime");
|
|
4926
|
-
var GroupShape = (0,
|
|
4927
|
-
var FloatButtonRoot = (0,
|
|
4979
|
+
var GroupShape = (0, import_react27.createContext)(void 0);
|
|
4980
|
+
var FloatButtonRoot = (0, import_react27.forwardRef)(function FloatButton({
|
|
4928
4981
|
icon,
|
|
4929
4982
|
description,
|
|
4930
4983
|
tooltip,
|
|
@@ -4937,7 +4990,7 @@ var FloatButtonRoot = (0, import_react26.forwardRef)(function FloatButton({
|
|
|
4937
4990
|
children,
|
|
4938
4991
|
...props
|
|
4939
4992
|
}, ref) {
|
|
4940
|
-
const groupShape = (0,
|
|
4993
|
+
const groupShape = (0, import_react27.useContext)(GroupShape);
|
|
4941
4994
|
const label = props["aria-label"] ?? (typeof tooltip === "string" ? tooltip : typeof description === "string" ? description : "\u60AC\u6D6E\u64CD\u4F5C");
|
|
4942
4995
|
const button = /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
4943
4996
|
"button",
|
|
@@ -4975,10 +5028,10 @@ function FloatButtonGroup({
|
|
|
4975
5028
|
...props
|
|
4976
5029
|
}) {
|
|
4977
5030
|
const [visible, setVisible] = useControllableState({ value: open, defaultValue: defaultOpen, onChange: onOpenChange });
|
|
4978
|
-
const rootRef = (0,
|
|
4979
|
-
const triggerRef = (0,
|
|
4980
|
-
const id = (0,
|
|
4981
|
-
(0,
|
|
5031
|
+
const rootRef = (0, import_react27.useRef)(null);
|
|
5032
|
+
const triggerRef = (0, import_react27.useRef)(null);
|
|
5033
|
+
const id = (0, import_react27.useId)();
|
|
5034
|
+
(0, import_react27.useEffect)(() => {
|
|
4982
5035
|
if (!trigger || !visible) return;
|
|
4983
5036
|
const close = (event) => {
|
|
4984
5037
|
if (!rootRef.current?.contains(event.target)) setVisible(false);
|
|
@@ -5032,8 +5085,8 @@ function FloatButtonGroup({
|
|
|
5032
5085
|
) });
|
|
5033
5086
|
}
|
|
5034
5087
|
function FloatButtonBackTop({ target, visibilityHeight = 400, behavior = "smooth", onClick, icon, tooltip = "\u8FD4\u56DE\u9876\u90E8", ...props }) {
|
|
5035
|
-
const [visible, setVisible] = (0,
|
|
5036
|
-
(0,
|
|
5088
|
+
const [visible, setVisible] = (0, import_react27.useState)(false);
|
|
5089
|
+
(0, import_react27.useEffect)(() => {
|
|
5037
5090
|
const element = target ? target() : window;
|
|
5038
5091
|
if (!element) return;
|
|
5039
5092
|
const update = () => setVisible((element === window ? window.scrollY : element.scrollTop) >= visibilityHeight);
|