@sia.soul/sia-react-ui 0.1.22 → 0.1.24

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.
Files changed (44) hide show
  1. package/dist/Select-O_yY51vc.d.ts +307 -0
  2. package/dist/Select-W_xpkpOW.d.cts +307 -0
  3. package/dist/chart.cjs +1401 -1160
  4. package/dist/chart.css +21 -0
  5. package/dist/chart.js +4 -4
  6. package/dist/{chunk-3TRRBMXY.js → chunk-6R7JY7IY.js} +44 -21
  7. package/dist/{chunk-TZGUBGA4.js → chunk-6WBABNAX.js} +4 -3
  8. package/dist/{chunk-OKP4DIQH.js → chunk-GUXAWU63.js} +29 -26
  9. package/dist/{chunk-QJ4OQNQ4.js → chunk-LA7O3PN4.js} +4 -3
  10. package/dist/{chunk-7RNS52YG.js → chunk-LIYCU2GU.js} +349 -278
  11. package/dist/{chunk-KLI65JVD.js → chunk-LRPQ5FGE.js} +68 -186
  12. package/dist/chunk-NSSPGXNM.js +284 -0
  13. package/dist/{chunk-YT6E3X2K.js → chunk-OH6YILJW.js} +4 -3
  14. package/dist/{chunk-RWGSZW32.js → chunk-RGXVPS37.js} +7 -6
  15. package/dist/{chunk-VN6PIPP7.js → chunk-T2QIW4OO.js} +8 -7
  16. package/dist/{core-DeZknKwc.d.ts → core-BOzLwiXG.d.ts} +40 -158
  17. package/dist/{core-C5OnrCi4.d.cts → core-tbb9ZiBY.d.cts} +40 -158
  18. package/dist/core.cjs +1656 -1443
  19. package/dist/core.css +60 -0
  20. package/dist/core.d.cts +2 -2
  21. package/dist/core.d.ts +2 -2
  22. package/dist/core.js +8 -6
  23. package/dist/index.cjs +3801 -3580
  24. package/dist/index.css +60 -0
  25. package/dist/index.d.cts +33 -16
  26. package/dist/index.d.ts +33 -16
  27. package/dist/index.js +94 -85
  28. package/dist/markdown-editor.cjs +269 -28
  29. package/dist/markdown-editor.css +20 -0
  30. package/dist/markdown-editor.js +2 -2
  31. package/dist/rich-text-editor.cjs +1156 -1031
  32. package/dist/rich-text-editor.css +20 -0
  33. package/dist/rich-text-editor.js +4 -4
  34. package/dist/{select-date-range-CGRb3-W8.d.ts → select-date-range-BjqFUeU6.d.ts} +1 -1
  35. package/dist/{select-date-range-DDmYGDD4.d.cts → select-date-range-C9w8z3G8.d.cts} +1 -1
  36. package/dist/select-date-range.cjs +1209 -1061
  37. package/dist/select-date-range.css +20 -0
  38. package/dist/select-date-range.d.cts +2 -2
  39. package/dist/select-date-range.d.ts +2 -2
  40. package/dist/select-date-range.js +5 -5
  41. package/package.json +2 -2
  42. package/dist/Select-4hGJt3RJ.d.cts +0 -142
  43. package/dist/Select-BNSE67xn.d.ts +0 -142
  44. package/dist/chunk-3VJ4CZDQ.js +0 -43
@@ -0,0 +1,284 @@
1
+ // src/components/titleTooltip.tsx
2
+ import { createRoot } from "react-dom/client";
3
+ import { jsx } from "react/jsx-runtime";
4
+ var documents = /* @__PURE__ */ new WeakSet();
5
+ function withTitleTooltip(props) {
6
+ if (!props || typeof props !== "object" || !("title" in props)) return props;
7
+ const { title, ...rest } = props;
8
+ if (typeof document !== "undefined") installTitleTooltips(document);
9
+ return { ...rest, "data-sia-title": title == null ? void 0 : String(title) };
10
+ }
11
+ function installTitleTooltips(doc) {
12
+ if (documents.has(doc)) return;
13
+ documents.add(doc);
14
+ let hovered = null;
15
+ let focused = null;
16
+ let active = null;
17
+ let pending = null;
18
+ let timer;
19
+ let root;
20
+ let observer;
21
+ let tooltipId = "";
22
+ const candidate = (target) => {
23
+ if (!(target instanceof Element)) return null;
24
+ const element = target.closest("[data-sia-title]");
25
+ return element?.getAttribute("data-sia-title") && !element.closest(".sia-floating") ? element : null;
26
+ };
27
+ const hasExplicitTooltip = (target) => target instanceof Element && Boolean(target.closest(".sia-floating"));
28
+ const hide = () => {
29
+ clearTimeout(timer);
30
+ pending = null;
31
+ observer?.disconnect();
32
+ observer = void 0;
33
+ if (active) {
34
+ const ids = (active.getAttribute("aria-describedby") ?? "").split(/\s+/).filter((id) => id && id !== tooltipId);
35
+ if (ids.length) active.setAttribute("aria-describedby", ids.join(" "));
36
+ else active.removeAttribute("aria-describedby");
37
+ }
38
+ active = null;
39
+ root?.render(null);
40
+ };
41
+ const render = () => {
42
+ const text = active?.getAttribute("data-sia-title");
43
+ if (!active?.isConnected || !text) {
44
+ hide();
45
+ return;
46
+ }
47
+ if (!root) {
48
+ const host = doc.createElement("div");
49
+ host.setAttribute("data-sia-title-tooltip-host", "");
50
+ doc.body.append(host);
51
+ root = createRoot(host);
52
+ tooltipId = `sia-title-tooltip-${Math.random().toString(36).slice(2)}`;
53
+ }
54
+ const ids = new Set((active.getAttribute("aria-describedby") ?? "").split(/\s+/).filter(Boolean));
55
+ ids.add(tooltipId);
56
+ active.setAttribute("aria-describedby", [...ids].join(" "));
57
+ root.render(/* @__PURE__ */ jsx(
58
+ PopupPortal,
59
+ {
60
+ anchorRef: { current: active },
61
+ placement: "top-start",
62
+ id: tooltipId,
63
+ role: "tooltip",
64
+ className: "sia-title-tooltip",
65
+ children: text
66
+ }
67
+ ));
68
+ };
69
+ const show = (element) => {
70
+ if (!element && !active && !pending) return;
71
+ if (element && (element === active || element === pending)) return;
72
+ hide();
73
+ if (!element) return;
74
+ pending = element;
75
+ timer = setTimeout(() => {
76
+ pending = null;
77
+ if (!element.isConnected) return;
78
+ active = element;
79
+ render();
80
+ if (!active) return;
81
+ observer = new MutationObserver(() => {
82
+ if (!active?.isConnected) hide();
83
+ else if (active.getAttribute("data-sia-title") !== doc.getElementById(tooltipId)?.textContent) render();
84
+ });
85
+ observer.observe(doc.body, { childList: true, subtree: true, attributes: true, attributeFilter: ["data-sia-title"] });
86
+ }, 250);
87
+ };
88
+ doc.addEventListener("pointerover", (event) => {
89
+ if (event.pointerType === "touch") return;
90
+ hovered = candidate(event.target);
91
+ if (hasExplicitTooltip(event.target)) hide();
92
+ else show(hovered ?? focused);
93
+ }, true);
94
+ doc.addEventListener("pointermove", (event) => {
95
+ if (event.pointerType === "touch" || event.buttons) return;
96
+ hovered = candidate(event.target);
97
+ if (!hasExplicitTooltip(event.target)) show(hovered ?? focused);
98
+ }, true);
99
+ doc.addEventListener("pointerout", (event) => {
100
+ if (event.pointerType === "touch") return;
101
+ hovered = candidate(event.relatedTarget);
102
+ if (hasExplicitTooltip(event.relatedTarget)) hide();
103
+ else show(hovered ?? focused);
104
+ }, true);
105
+ doc.addEventListener("focusin", (event) => {
106
+ focused = candidate(event.target);
107
+ if (hasExplicitTooltip(event.target)) hide();
108
+ else show(focused ?? hovered);
109
+ }, true);
110
+ doc.addEventListener("focusout", (event) => {
111
+ focused = candidate(event.relatedTarget);
112
+ show(hovered ?? focused);
113
+ }, true);
114
+ doc.addEventListener("pointerdown", hide, true);
115
+ doc.addEventListener("keydown", (event) => {
116
+ if (event.key === "Escape") hide();
117
+ }, true);
118
+ doc.addEventListener("scroll", hide, true);
119
+ doc.defaultView?.addEventListener("blur", () => {
120
+ hovered = focused = null;
121
+ hide();
122
+ });
123
+ }
124
+
125
+ // src/components/PopupPortal.tsx
126
+ import { forwardRef, useLayoutEffect, useRef, useState } from "react";
127
+ import { createPortal } from "react-dom";
128
+ import { jsx as jsx2 } from "react/jsx-runtime";
129
+ function setForwardedRef(ref, value) {
130
+ if (typeof ref === "function") ref(value);
131
+ else if (ref) ref.current = value;
132
+ }
133
+ function clamp(value, min, max) {
134
+ return Math.min(Math.max(value, min), Math.max(min, max));
135
+ }
136
+ var PopupPortal = forwardRef(function PopupPortal2({
137
+ anchorRef,
138
+ open = true,
139
+ placement = "bottom-start",
140
+ offset = 6,
141
+ viewportPadding = 8,
142
+ className = "",
143
+ style,
144
+ children,
145
+ ...props
146
+ }, forwardedRef) {
147
+ const popupRef = useRef(null);
148
+ const [position, setPosition] = useState();
149
+ useLayoutEffect(() => {
150
+ if (!open || typeof document === "undefined") {
151
+ setPosition(void 0);
152
+ return;
153
+ }
154
+ const update = () => {
155
+ const anchor = anchorRef.current;
156
+ const popup = popupRef.current;
157
+ if (!anchor || !popup) return;
158
+ const anchorRect = anchor.getBoundingClientRect();
159
+ const popupRect = popup.getBoundingClientRect();
160
+ const viewportWidth = document.documentElement.clientWidth;
161
+ const viewportHeight = document.documentElement.clientHeight;
162
+ let resolvedPlacement = placement;
163
+ const availableBelow = Math.max(0, viewportHeight - viewportPadding - anchorRect.bottom - offset);
164
+ const availableAbove = Math.max(0, anchorRect.top - offset - viewportPadding);
165
+ const availableRight = Math.max(0, viewportWidth - viewportPadding - anchorRect.right - offset);
166
+ const availableLeft = Math.max(0, anchorRect.left - offset - viewportPadding);
167
+ const horizontalSide = placement.startsWith("right") || placement.startsWith("left");
168
+ if (horizontalSide) {
169
+ const prefersRight = placement.startsWith("right");
170
+ const fitsRight = popupRect.width <= availableRight;
171
+ const fitsLeft = popupRect.width <= availableLeft;
172
+ if (prefersRight && !fitsRight && (fitsLeft || availableLeft > availableRight)) {
173
+ resolvedPlacement = placement.replace("right", "left");
174
+ } else if (!prefersRight && !fitsLeft && (fitsRight || availableRight > availableLeft)) {
175
+ resolvedPlacement = placement.replace("left", "right");
176
+ }
177
+ } else {
178
+ const prefersBottom = placement.startsWith("bottom");
179
+ const fitsBelow = popupRect.height <= availableBelow;
180
+ const fitsAbove = popupRect.height <= availableAbove;
181
+ if (prefersBottom && !fitsBelow && (fitsAbove || availableAbove > availableBelow)) {
182
+ resolvedPlacement = placement.replace("bottom", "top");
183
+ } else if (!prefersBottom && !fitsAbove && (fitsBelow || availableBelow > availableAbove)) {
184
+ resolvedPlacement = placement.replace("top", "bottom");
185
+ }
186
+ }
187
+ const resolvedHorizontalSide = resolvedPlacement.startsWith("right") || resolvedPlacement.startsWith("left");
188
+ const top = resolvedHorizontalSide ? resolvedPlacement.endsWith("end") ? anchorRect.bottom - popupRect.height : anchorRect.top : resolvedPlacement.startsWith("bottom") ? anchorRect.bottom + offset : anchorRect.top - popupRect.height - offset;
189
+ const availableHeight = resolvedHorizontalSide ? Math.max(0, viewportHeight - viewportPadding * 2) : resolvedPlacement.startsWith("bottom") ? availableBelow : availableAbove;
190
+ const alignedLeft = resolvedHorizontalSide ? resolvedPlacement.startsWith("right") ? anchorRect.right + offset : anchorRect.left - popupRect.width - offset : resolvedPlacement.endsWith("end") ? anchorRect.right - popupRect.width : anchorRect.left;
191
+ const next = {
192
+ top: clamp(top, viewportPadding, viewportHeight - popupRect.height - viewportPadding),
193
+ left: clamp(alignedLeft, viewportPadding, viewportWidth - popupRect.width - viewportPadding),
194
+ anchorWidth: anchorRect.width,
195
+ availableHeight,
196
+ placement: resolvedPlacement
197
+ };
198
+ setPosition((current) => current && current.top === next.top && current.left === next.left && current.anchorWidth === next.anchorWidth && current.availableHeight === next.availableHeight && current.placement === next.placement ? current : next);
199
+ };
200
+ update();
201
+ window.addEventListener("resize", update);
202
+ window.addEventListener("scroll", update, true);
203
+ const observer = new ResizeObserver(update);
204
+ if (anchorRef.current) observer.observe(anchorRef.current);
205
+ if (popupRef.current) observer.observe(popupRef.current);
206
+ return () => {
207
+ window.removeEventListener("resize", update);
208
+ window.removeEventListener("scroll", update, true);
209
+ observer.disconnect();
210
+ };
211
+ }, [anchorRef, offset, open, placement, viewportPadding]);
212
+ if (!open || typeof document === "undefined") return null;
213
+ return createPortal(
214
+ /* @__PURE__ */ jsx2(
215
+ "div",
216
+ {
217
+ ref: (node) => {
218
+ popupRef.current = node;
219
+ setForwardedRef(forwardedRef, node);
220
+ },
221
+ className: `sia-popup-portal ${className}`.trim(),
222
+ "data-sia-popup-layer": "",
223
+ "data-placement": position?.placement ?? placement,
224
+ style: {
225
+ ...style,
226
+ "--sia-popup-anchor-width": `${position?.anchorWidth ?? anchorRef.current?.getBoundingClientRect().width ?? 0}px`,
227
+ "--sia-popup-available-height": position ? `${position.availableHeight}px` : void 0,
228
+ top: position?.top ?? 0,
229
+ left: position?.left ?? 0,
230
+ visibility: position ? "visible" : "hidden"
231
+ },
232
+ ...withTitleTooltip(props),
233
+ children
234
+ }
235
+ ),
236
+ document.body
237
+ );
238
+ });
239
+
240
+ // src/components/shared.ts
241
+ import { createContext, useCallback, useContext, useState as useState2 } from "react";
242
+ var ControlSizeContext = createContext("medium");
243
+ function useControlSize(size) {
244
+ const inherited = useContext(ControlSizeContext);
245
+ return size ?? inherited;
246
+ }
247
+ var PlaceholderModeContext = createContext("default");
248
+ function usePlaceholderMode(mode) {
249
+ const inherited = useContext(PlaceholderModeContext);
250
+ return mode ?? inherited;
251
+ }
252
+ function useControllableState({ value, defaultValue, onChange }) {
253
+ const [internalValue, setInternalValue] = useState2(defaultValue);
254
+ const controlled = value !== void 0;
255
+ const currentValue = controlled ? value : internalValue;
256
+ const setValue = useCallback((nextValue) => {
257
+ if (Object.is(currentValue, nextValue)) return;
258
+ if (!controlled) setInternalValue(nextValue);
259
+ onChange?.(nextValue);
260
+ }, [controlled, currentValue, onChange]);
261
+ return [currentValue, setValue];
262
+ }
263
+
264
+ // src/components/FloatingPlaceholder.tsx
265
+ import { jsx as jsx3 } from "react/jsx-runtime";
266
+ function useFloatingPlaceholder({ mode, placeholder, filled, active = false }) {
267
+ const enabled = usePlaceholderMode(mode) === "floating" && Boolean(placeholder);
268
+ return {
269
+ enabled,
270
+ className: enabled ? ` sia-placeholder-floating${filled ? " sia-placeholder-floating--filled" : ""}${active ? " sia-placeholder-floating--active" : ""}` : "",
271
+ label: enabled ? /* @__PURE__ */ jsx3("span", { className: "sia-floating-placeholder", "aria-hidden": "true", children: placeholder }) : null
272
+ };
273
+ }
274
+
275
+ export {
276
+ PopupPortal,
277
+ withTitleTooltip,
278
+ ControlSizeContext,
279
+ useControlSize,
280
+ PlaceholderModeContext,
281
+ usePlaceholderMode,
282
+ useControllableState,
283
+ useFloatingPlaceholder
284
+ };
@@ -1,7 +1,8 @@
1
1
  import {
2
2
  useControlSize,
3
- useFloatingPlaceholder
4
- } from "./chunk-3VJ4CZDQ.js";
3
+ useFloatingPlaceholder,
4
+ withTitleTooltip
5
+ } from "./chunk-NSSPGXNM.js";
5
6
 
6
7
  // src/components/TextArea.tsx
7
8
  import { forwardRef, useId, useState } from "react";
@@ -39,7 +40,7 @@ var TextArea = forwardRef(function TextArea2({
39
40
  /* @__PURE__ */ jsx(
40
41
  "textarea",
41
42
  {
42
- ...props,
43
+ ...withTitleTooltip(props),
43
44
  ref,
44
45
  id: textAreaId,
45
46
  className: "sia-textarea",
@@ -2,13 +2,14 @@ import {
2
2
  Dropdown,
3
3
  Icon,
4
4
  Input
5
- } from "./chunk-KLI65JVD.js";
5
+ } from "./chunk-LRPQ5FGE.js";
6
6
  import {
7
7
  Button
8
- } from "./chunk-TZGUBGA4.js";
8
+ } from "./chunk-6WBABNAX.js";
9
9
  import {
10
- useFloatingPlaceholder
11
- } from "./chunk-3VJ4CZDQ.js";
10
+ useFloatingPlaceholder,
11
+ withTitleTooltip
12
+ } from "./chunk-NSSPGXNM.js";
12
13
 
13
14
  // src/components/RichTextEditor.tsx
14
15
  import { useEffect, useMemo, useRef, useState } from "react";
@@ -42,7 +43,7 @@ function sanitizeContent(value) {
42
43
  function RichTextContent({ content, emptyText = "\u6682\u65E0\u5185\u5BB9", className = "", ...props }) {
43
44
  const html = useMemo(() => sanitizeContent(content), [content]);
44
45
  if (!html.trim()) return /* @__PURE__ */ jsx("div", { className: `sia-rich-text-content sia-rich-text-content--empty ${className}`.trim(), children: emptyText });
45
- return /* @__PURE__ */ jsx("article", { className: `sia-rich-text-content ${className}`.trim(), dangerouslySetInnerHTML: { __html: html }, ...props });
46
+ return /* @__PURE__ */ jsx("article", { className: `sia-rich-text-content ${className}`.trim(), dangerouslySetInnerHTML: { __html: html }, ...withTitleTooltip(props) });
46
47
  }
47
48
  function RichTextEditor({
48
49
  value,
@@ -222,7 +223,7 @@ function RichTextEditor({
222
223
  }
223
224
  };
224
225
  const floating = useFloatingPlaceholder({ mode: placeholderMode, placeholder, filled: editor ? !editor.isEmpty : Boolean(value ?? defaultValue) });
225
- return /* @__PURE__ */ jsxs("div", { ...props, id, style: mergedStyle, className: `sia-rich-text-editor${floating.className}${disabled ? " is-disabled" : ""} sia-rich-text-editor--${toolbar} ${className}`.trim(), children: [
226
+ return /* @__PURE__ */ jsxs("div", { ...withTitleTooltip(props), id, style: mergedStyle, className: `sia-rich-text-editor${floating.className}${disabled ? " is-disabled" : ""} sia-rich-text-editor--${toolbar} ${className}`.trim(), children: [
226
227
  floating.label,
227
228
  /* @__PURE__ */ jsxs("div", { className: "sia-rich-text-editor__toolbar", "aria-label": "\u6587\u672C\u683C\u5F0F\u5DE5\u5177\u680F", children: [
228
229
  /* @__PURE__ */ jsxs("div", { className: "sia-rich-text-editor__toolbar-main", children: [
@@ -1,15 +1,16 @@
1
1
  import {
2
2
  Select
3
- } from "./chunk-3TRRBMXY.js";
3
+ } from "./chunk-6R7JY7IY.js";
4
4
  import {
5
- Icon,
6
- PopupPortal
7
- } from "./chunk-KLI65JVD.js";
5
+ Icon
6
+ } from "./chunk-LRPQ5FGE.js";
8
7
  import {
8
+ PopupPortal,
9
9
  useControlSize,
10
10
  useControllableState,
11
- useFloatingPlaceholder
12
- } from "./chunk-3VJ4CZDQ.js";
11
+ useFloatingPlaceholder,
12
+ withTitleTooltip
13
+ } from "./chunk-NSSPGXNM.js";
13
14
 
14
15
  // src/components/DatePicker.tsx
15
16
  import { useEffect, useId, useMemo, useRef as useRef2, useState } from "react";
@@ -840,7 +841,7 @@ function SelectDateRange({
840
841
  const size = useControlSize(sizeProp);
841
842
  const initialValue = defaultValue ?? { select: options[0]?.value ?? "", range: ["", ""] };
842
843
  const [currentValue, setCurrentValue] = useControllableState({ value: value === void 0 ? void 0 : value && typeof value === "object" ? value : { select: "", range: ["", ""] }, defaultValue: initialValue, onChange });
843
- return /* @__PURE__ */ jsxs3("div", { className: `sia-select-date-range sia-select-date-range--${size} ${className}`.trim(), role: "group", "aria-label": `${selectAriaLabel}\u4E0E${rangeAriaLabel}`, ...props, style: { ...style, "--sia-select-date-range-select-width": typeof selectWidth === "number" ? `${selectWidth}px` : selectWidth }, children: [
844
+ return /* @__PURE__ */ jsxs3("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: [
844
845
  /* @__PURE__ */ jsx3(
845
846
  Select,
846
847
  {
@@ -1,46 +1,46 @@
1
1
  import * as react from 'react';
2
- import { ButtonHTMLAttributes, ReactNode, HTMLAttributes, CSSProperties, MouseEvent, ReactElement, ImgHTMLAttributes, InputHTMLAttributes, MouseEventHandler, AnchorHTMLAttributes } from 'react';
2
+ import { ReactNode, HTMLAttributes, CSSProperties, MouseEvent, ReactElement, ImgHTMLAttributes, InputHTMLAttributes, MouseEventHandler, AnchorHTMLAttributes, ButtonHTMLAttributes } from 'react';
3
+ import { B as ButtonProps, f as Button } from './Select-O_yY51vc.js';
3
4
  import { C as ControlSize, a as ControlStatus, I as InputPlaceholderMode } from './shared-Bx4B28Wh.js';
4
- import './Select-BNSE67xn.js';
5
5
 
6
- /** 按钮视觉样式,可选择主按钮、默认按钮、文本按钮或链接等形式。 */
7
- type ButtonVariant = "primary" | "default" | "dashed" | "filled" | "text" | "link";
8
- /** 按钮尺寸等级。 */
9
- type ButtonSize = ControlSize;
10
- /** 按钮的属性配置。 */
11
- interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
12
- /**
13
- 组件的视觉样式。
14
- * @defaultValue "default"
15
- */
16
- variant?: ButtonVariant;
17
- /** small / medium / large 高度为 22 / 30 / 38px;默认继承 Form,组件自身 size 优先 */
18
- size?: ButtonSize;
19
- /**
20
- * 显示加载状态并禁止重复点击
21
- * @defaultValue false
22
- */
6
+ /** 单个工具栏操作及其下拉菜单。 */
7
+ interface ToolbarItem {
8
+ /** 操作唯一标识,点击后由 onAction 返回。 */
9
+ key: string;
10
+ /** 按钮与溢出菜单共用的文案。 */
11
+ label: ReactNode;
12
+ /** 按钮与菜单图标。 */
13
+ icon?: ReactNode;
14
+ /** 禁用该操作及其下级操作。 */
15
+ disabled?: boolean;
16
+ /** 主按钮的等待状态,等待期间不可再次触发。 */
23
17
  loading?: boolean;
24
- /**
25
- * 宽度撑满父容器
26
- * @defaultValue false
27
- */
28
- block?: boolean;
29
- /**
30
- * 危险操作样式
31
- * @defaultValue false
32
- */
18
+ /** 危险操作样式。 */
33
19
  danger?: boolean;
34
- /** 按钮图标 */
35
- icon?: ReactNode;
36
- /**
37
- * 图标位置
38
- * @defaultValue "start"
39
- */
40
- iconPosition?: "start" | "end";
20
+ /** 完全隐藏该操作,不占宽度,也不进入溢出菜单。 */
21
+ hidden?: boolean;
22
+ /** 下拉操作;split 为 true 时主按钮和下拉箭头可分别操作。 */
23
+ children?: readonly ToolbarItem[];
24
+ /** 使用独立的主操作按钮和下拉箭头。 */
25
+ split?: boolean;
26
+ }
27
+ /** 单行自适应工具栏的配置。 */
28
+ interface ToolbarProps {
29
+ /** 按展示顺序排列的操作配置。 */
30
+ items: readonly ToolbarItem[];
31
+ /** 业务处理回调;异步状态由调用方通过 loading/disabled 控制。 */
32
+ onAction?: (key: string) => void | Promise<void>;
33
+ /** 禁用全部操作。 */
34
+ disabled?: boolean;
35
+ /** 按钮尺寸,默认 small。 */
36
+ size?: ButtonProps["size"];
37
+ /** 按钮样式,默认 link。 */
38
+ variant?: ButtonProps["variant"];
39
+ /** 溢出入口的无障碍名称与提示,默认“更多操作”。 */
40
+ overflowLabel?: string;
41
41
  }
42
- /** 按钮组件。 */
43
- declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement>>;
42
+ /** 单行操作栏;宽度不足时按原顺序将尾部操作收纳到 hover 菜单。 */
43
+ declare function Toolbar({ items, onAction, disabled, size, variant, overflowLabel }: ToolbarProps): react.JSX.Element;
44
44
 
45
45
  /** 卡片强调装饰的显示方式。 */
46
46
  type CardAccent = "primary" | "success" | "warning" | "error";
@@ -298,7 +298,7 @@ declare const iconPaths: {
298
298
  /** 可用的线框图标名称。 */
299
299
  type IconName = keyof typeof iconPaths;
300
300
  /** 可用线框图标名称集合。 */
301
- declare const ICON_NAMES: readonly ("warning" | "link" | "copy" | "move" | "zoom-in" | "zoom-out" | "table" | "italic" | "bold" | "underline" | "menu" | "search" | "send" | "notepad-file" | "notepad-folder" | "notepad-virtual-folder" | "step-backward" | "step-forward" | "fast-backward" | "fast-forward" | "corner-up-left" | "corner-up-right" | "swap-horizontal" | "swap-vertical" | "expand" | "shrink" | "fullscreen" | "fullscreen-exit" | "menu-fold" | "menu-unfold" | "login" | "logout" | "vertical-align-top" | "vertical-align-middle" | "vertical-align-bottom" | "square-plus" | "square-minus" | "square-check" | "square-close" | "tab-plus" | "folder-plus" | "pin" | "pin-off" | "stop" | "help-circle" | "save" | "clipboard" | "clipboard-check" | "file-plus" | "file-check" | "file-warning" | "file-spreadsheet" | "align-left" | "align-center" | "align-right" | "align-justify" | "strikethrough" | "list-ordered" | "list-unordered" | "eraser" | "highlighter" | "columns" | "rows" | "bar-chart" | "line-chart" | "pie-chart" | "area-chart" | "activity" | "trending-up" | "trending-down" | "database" | "cloud" | "cloud-download" | "cloud-upload" | "server" | "desktop" | "laptop" | "mobile" | "tablet" | "printer" | "camera" | "video" | "microphone" | "volume-up" | "volume-off" | "speaker-wave" | "speaker-muted" | "wifi" | "power" | "key" | "shield" | "shield-check" | "bug" | "bulb" | "rocket" | "target" | "trophy" | "shopping-cart" | "shopping-bag" | "shop" | "wallet" | "bank" | "calculator" | "tag" | "tags" | "message" | "comments" | "share" | "paperclip" | "location" | "compass" | "car" | "truck" | "gift" | "coffee" | "experiment" | "tool" | "appstore" | "puzzle" | "partition" | "branches" | "scan" | "qr-code" | "barcode" | "user-plus" | "user-minus" | "smile" | "meh" | "frown" | "game-cultivator" | "game-swordsman" | "game-spirit-wolf" | "game-gem" | "game-ingot" | "game-sword" | "game-robe" | "game-pants" | "game-pendant" | "game-necklace" | "game-pill" | "game-potion" | "game-elixir-jar" | "game-flame" | "game-soul-elixir" | "game-herb" | "game-meditate" | "game-backpack" | "game-qi" | "plus" | "minus" | "close" | "check" | "info" | "question" | "circle-check" | "circle-close" | "circle-plus" | "circle-minus" | "chevron-left" | "chevron-right" | "chevron-up" | "chevron-down" | "double-left" | "double-right" | "arrow-left" | "arrow-right" | "arrow-up" | "arrow-down" | "more-horizontal" | "more-vertical" | "home" | "user" | "users" | "settings" | "edit" | "trash" | "scissors" | "undo" | "redo" | "download" | "upload" | "refresh" | "loader" | "calendar" | "clock" | "mail" | "phone" | "external-link" | "eye" | "eye-off" | "lock" | "unlock" | "bell" | "star" | "heart" | "file" | "folder" | "image" | "filter" | "sort-ascending" | "sort-descending" | "play" | "pause" | "book" | "component" | "token" | "sun" | "moon" | "code" | "github")[];
301
+ declare const ICON_NAMES: readonly ("search" | "bold" | "link" | "copy" | "move" | "zoom-in" | "zoom-out" | "table" | "italic" | "underline" | "menu" | "send" | "close" | "pause" | "play" | "message" | "code" | "video" | "filter" | "image" | "stop" | "warning" | "notepad-file" | "notepad-folder" | "notepad-virtual-folder" | "step-backward" | "step-forward" | "fast-backward" | "fast-forward" | "corner-up-left" | "corner-up-right" | "swap-horizontal" | "swap-vertical" | "expand" | "shrink" | "fullscreen" | "fullscreen-exit" | "menu-fold" | "menu-unfold" | "login" | "logout" | "vertical-align-top" | "vertical-align-middle" | "vertical-align-bottom" | "square-plus" | "square-minus" | "square-check" | "square-close" | "tab-plus" | "folder-plus" | "pin" | "pin-off" | "help-circle" | "save" | "clipboard" | "clipboard-check" | "file-plus" | "file-check" | "file-warning" | "file-spreadsheet" | "align-left" | "align-center" | "align-right" | "align-justify" | "strikethrough" | "list-ordered" | "list-unordered" | "eraser" | "highlighter" | "columns" | "rows" | "bar-chart" | "line-chart" | "pie-chart" | "area-chart" | "activity" | "trending-up" | "trending-down" | "database" | "cloud" | "cloud-download" | "cloud-upload" | "server" | "desktop" | "laptop" | "mobile" | "tablet" | "printer" | "camera" | "microphone" | "volume-up" | "volume-off" | "speaker-wave" | "speaker-muted" | "wifi" | "power" | "key" | "shield" | "shield-check" | "bug" | "bulb" | "rocket" | "target" | "trophy" | "shopping-cart" | "shopping-bag" | "shop" | "wallet" | "bank" | "calculator" | "tag" | "tags" | "comments" | "share" | "paperclip" | "location" | "compass" | "car" | "truck" | "gift" | "coffee" | "experiment" | "tool" | "appstore" | "puzzle" | "partition" | "branches" | "scan" | "qr-code" | "barcode" | "user-plus" | "user-minus" | "smile" | "meh" | "frown" | "game-cultivator" | "game-swordsman" | "game-spirit-wolf" | "game-gem" | "game-ingot" | "game-sword" | "game-robe" | "game-pants" | "game-pendant" | "game-necklace" | "game-pill" | "game-potion" | "game-elixir-jar" | "game-flame" | "game-soul-elixir" | "game-herb" | "game-meditate" | "game-backpack" | "game-qi" | "plus" | "minus" | "check" | "info" | "question" | "circle-check" | "circle-close" | "circle-plus" | "circle-minus" | "chevron-left" | "chevron-right" | "chevron-up" | "chevron-down" | "double-left" | "double-right" | "arrow-left" | "arrow-right" | "arrow-up" | "arrow-down" | "more-horizontal" | "more-vertical" | "home" | "user" | "users" | "settings" | "edit" | "trash" | "scissors" | "undo" | "redo" | "download" | "upload" | "refresh" | "loader" | "calendar" | "clock" | "mail" | "phone" | "external-link" | "eye" | "eye-off" | "lock" | "unlock" | "bell" | "star" | "heart" | "file" | "folder" | "sort-ascending" | "sort-descending" | "book" | "component" | "token" | "sun" | "moon" | "github")[];
302
302
  declare const filledIconPaths: {
303
303
  info: react.JSX.Element;
304
304
  question: react.JSX.Element;
@@ -334,7 +334,7 @@ type FilledIconName = keyof typeof filledIconPaths;
334
334
  /** 图标采用线框还是填充样式。 */
335
335
  type IconVariant = "outline" | "filled";
336
336
  /** 可用填充图标名称集合。 */
337
- declare const FILLED_ICON_NAMES: readonly ("warning" | "info" | "question" | "circle-check" | "circle-close" | "circle-plus" | "circle-minus" | "home" | "user" | "users" | "trash" | "calendar" | "clock" | "mail" | "lock" | "unlock" | "bell" | "star" | "heart" | "file" | "folder" | "image" | "filter" | "play" | "pause" | "book" | "component" | "token")[];
337
+ declare const FILLED_ICON_NAMES: readonly ("pause" | "play" | "filter" | "image" | "warning" | "info" | "question" | "circle-check" | "circle-close" | "circle-plus" | "circle-minus" | "home" | "user" | "users" | "trash" | "calendar" | "clock" | "mail" | "lock" | "unlock" | "bell" | "star" | "heart" | "file" | "folder" | "book" | "component" | "token")[];
338
338
  /** 图标的属性配置。 */
339
339
  interface IconProps extends Omit<HTMLAttributes<HTMLSpanElement>, "children"> {
340
340
  /** 名称或字段标识。 */
@@ -1918,124 +1918,6 @@ declare const Upload: typeof UploadRoot & {
1918
1918
  LIST_IGNORE: symbol;
1919
1919
  };
1920
1920
 
1921
- /** 弹层挂载节点或返回挂载节点的函数。 */
1922
- type OverlayContainer = HTMLElement | (() => HTMLElement);
1923
-
1924
- /** 模态框的类型标识。 */
1925
- type ModalType = "default" | "info" | "success" | "warning" | "error" | "confirm";
1926
- /** 确认操作的返回值;false 阻止关闭,Promise 可用于等待异步操作。 */
1927
- type ModalActionResult = void | boolean | Promise<void | boolean>;
1928
- /** 模态框的属性配置。 */
1929
- interface ModalProps extends Omit<HTMLAttributes<HTMLDivElement>, "title" | "onSubmit"> {
1930
- /** 是否显示对话框 */
1931
- open: boolean;
1932
- /** 标题 */
1933
- title?: ReactNode;
1934
- /** 子内容;组件嵌套内容或当前节点的子项。 */
1935
- children?: ReactNode;
1936
- /** 自定义底部操作区,传 null 隐藏 */
1937
- footer?: ReactNode | null;
1938
- /** 默认底部操作区左侧的扩展内容。 */
1939
- footerExtra?: ReactNode;
1940
- /**
1941
- * 类型标识,用于选择对应的表现形式。
1942
- * @defaultValue "default"
1943
- */
1944
- type?: ModalType;
1945
- /**
1946
- * 确定按钮文案。
1947
- * @defaultValue "确定"
1948
- */
1949
- okText?: ReactNode;
1950
- /**
1951
- * 取消按钮文案。
1952
- * @defaultValue "取消"
1953
- */
1954
- cancelText?: ReactNode;
1955
- /**
1956
- * 是否显示取消按钮。
1957
- * @defaultValue type === "default" || type === "confirm"
1958
- */
1959
- showCancel?: boolean;
1960
- /**
1961
- * 确定操作是否正在执行;为 true 时阻止重复提交和关闭。
1962
- * @defaultValue false
1963
- */
1964
- confirmLoading?: boolean;
1965
- /** 确定按钮的 Button 属性。 */
1966
- okButtonProps?: ButtonProps;
1967
- /** 取消按钮的 Button 属性。 */
1968
- cancelButtonProps?: ButtonProps;
1969
- /**
1970
- * 是否显示关闭入口。
1971
- * @defaultValue true
1972
- */
1973
- closable?: boolean;
1974
- /**
1975
- * 点击遮罩时是否允许关闭。
1976
- * @defaultValue true
1977
- */
1978
- maskClosable?: boolean;
1979
- /**
1980
- * 是否允许通过 Esc 等键盘操作关闭。
1981
- * @defaultValue true
1982
- */
1983
- keyboard?: boolean;
1984
- /**
1985
- * 弹框是否垂直居中。
1986
- * @defaultValue false
1987
- */
1988
- centered?: boolean;
1989
- /**
1990
- * 宽度;数值按像素处理,字符串可使用 CSS 尺寸。
1991
- * @defaultValue 520
1992
- */
1993
- width?: number | string;
1994
- /**
1995
- 组件或浮层的堆叠层级。
1996
- * @defaultValue 1000
1997
- */
1998
- zIndex?: number;
1999
- /** 弹层挂载目标;可提供元素或返回元素的函数,默认挂载到页面容器。 */
2000
- getContainer?: OverlayContainer;
2001
- /** 确认回调,支持 Promise 与返回 false 阻止关闭 */
2002
- onOk?: () => ModalActionResult;
2003
- /** 用户取消或通过关闭入口退出时调用。 */
2004
- onCancel?: () => void;
2005
- /** 打开状态变化回调 */
2006
- onOpenChange?: (open: boolean) => void;
2007
- /** 动画完成后触发,适用于聚焦内容和释放外部挂载点。 */
2008
- afterOpenChange?: (open: boolean) => void;
2009
- }
2010
- /** ModalOpen的配置。 */
2011
- interface ModalOpenConfig extends Omit<ModalProps, "open"> {
2012
- }
2013
- /** OverlayApi的操作句柄。 */
2014
- interface OverlayApiHandle<T> {
2015
- /** 关闭弹层并在退出动画后释放挂载点。程序化关闭不会模拟用户取消按钮点击。 */
2016
- destroy: () => void;
2017
- /** 合并更新已打开弹层的配置,未提供的属性保留原值。 */
2018
- update: (next: Partial<T>) => void;
2019
- }
2020
- declare function openModal(config: ModalOpenConfig): OverlayApiHandle<ModalOpenConfig>;
2021
- /** 模态框组件。 */
2022
- declare const Modal: react.ForwardRefExoticComponent<ModalProps & react.RefAttributes<HTMLDivElement>> & {
2023
- /** 直接打开实例,返回可用于更新或关闭的操作句柄。 */
2024
- open: typeof openModal;
2025
- /** 显示普通信息提示。 */
2026
- info: (config: ModalOpenConfig) => OverlayApiHandle<ModalOpenConfig>;
2027
- /** 显示成功提示。 */
2028
- success: (config: ModalOpenConfig) => OverlayApiHandle<ModalOpenConfig>;
2029
- /** 显示警告提示。 */
2030
- warning: (config: ModalOpenConfig) => OverlayApiHandle<ModalOpenConfig>;
2031
- /** 显示错误提示。 */
2032
- error: (config: ModalOpenConfig) => OverlayApiHandle<ModalOpenConfig>;
2033
- /** 打开确认弹框,支持异步确认;返回 false 可阻止关闭。 */
2034
- confirm: (config: ModalOpenConfig) => OverlayApiHandle<ModalOpenConfig>;
2035
- /** 关闭由此 API 打开的所有弹层。 */
2036
- destroyAll(): void;
2037
- };
2038
-
2039
1921
  /** 全局消息的类型标识。 */
2040
1922
  type MessageType = "info" | "success" | "warning" | "error" | "loading";
2041
1923
  /** 全局消息的唯一标识,用于更新或关闭已有消息。 */
@@ -2285,4 +2167,4 @@ declare const FloatButton: react.ForwardRefExoticComponent<FloatButtonProps & re
2285
2167
  BackTop: typeof FloatButtonBackTop;
2286
2168
  };
2287
2169
 
2288
- export { type ImageProps as $, type DropdownPlacement as A, type ButtonProps as B, Calendar as C, Dropdown as D, type DropdownProps as E, type DropdownTrigger as F, FILLED_ICON_NAMES as G, type FilledIconName as H, FloatButton as I, type FloatButtonBackTopProps as J, type FloatButtonGroupProps as K, type FloatButtonProps as L, type ModalOpenConfig as M, type FloatButtonShape as N, type OverlayContainer as O, type FloatingPlacement as P, type FloatingTrigger as Q, ICON_NAMES as R, Icon as S, type TagStatus as T, type IconName as U, type IconProps as V, type IconVariant as W, Image as X, ImagePreview as Y, type ImagePreviewConfig as Z, type ImagePreviewProps as _, type OverlayApiHandle as a, type TypographyTitleProps as a$, Input as a0, type InputProps as a1, Menu as a2, type MenuClickInfo as a3, type MenuItem as a4, type MenuMode as a5, type MenuProps as a6, type MenuTheme as a7, type MessageConfig as a8, type MessageHandle as a9, type StepsProps as aA, type TabItem as aB, Tabs as aC, type TabsContextMenuClickInfo as aD, type TabsOrientation as aE, type TabsPosition as aF, type TabsProps as aG, type TabsType as aH, Tag as aI, type TagProps as aJ, type TagVariant as aK, Timeline as aL, type TimelineItem as aM, type TimelineProps as aN, Tooltip as aO, type TooltipProps as aP, Tour as aQ, type TourProps as aR, type TourStep as aS, Tree as aT, type TreeDropPosition as aU, type TreeKey as aV, type TreeNode as aW, type TreeProps as aX, Typography as aY, type TypographyLinkProps as aZ, type TypographyProps as a_, type MessageKey as aa, type MessageType as ab, Modal as ac, type ModalProps as ad, type ModalType as ae, type NotificationConfig as af, type NotificationPlacement as ag, type NotificationType as ah, Popconfirm as ai, type PopconfirmProps as aj, Popover as ak, type PopoverProps as al, Progress as am, type ProgressProps as an, type ProgressStatus as ao, Rate as ap, type RateProps as aq, Segmented as ar, type SegmentedOption as as, type SegmentedProps as at, type SegmentedValue as au, Spin as av, type SpinProps as aw, type StepItem as ax, type StepStatus as ay, Steps as az, type ModalActionResult as b, type TypographyType as b0, Upload as b1, type UploadChangeInfo as b2, type UploadDraggerProps as b3, type UploadFile as b4, type UploadFileStatus as b5, type UploadProps as b6, type UploadRequestOptions as b7, Watermark as b8, type WatermarkFont as b9, type WatermarkProps as ba, message as bb, notification as bc, type ButtonSize as c, type BadgeProps as d, Badge as e, type BadgeRibbonProps as f, type BadgeStatus as g, Breadcrumb as h, type BreadcrumbItem as i, type BreadcrumbProps as j, Button as k, type ButtonVariant as l, type CalendarProps as m, Card as n, type CardAccent as o, type CardProps as p, Carousel as q, type CarouselProps as r, type CarouselRef as s, Collapse as t, type CollapseItem as u, type CollapseKey as v, type CollapseProps as w, type DropdownButtonProps as x, type DropdownMenuProps as y, type DropdownOpenSource as z };
2170
+ export { type MenuTheme as $, type FloatButtonGroupProps as A, type BadgeProps as B, Calendar as C, Dropdown as D, type FloatButtonProps as E, FILLED_ICON_NAMES as F, type FloatButtonShape as G, type FloatingPlacement as H, type FloatingTrigger as I, ICON_NAMES as J, Icon as K, type IconName as L, type IconProps as M, type IconVariant as N, Image as O, ImagePreview as P, type ImagePreviewConfig as Q, type ImagePreviewProps as R, type ImageProps as S, type TagStatus as T, Input as U, type InputProps as V, Menu as W, type MenuClickInfo as X, type MenuItem as Y, type MenuMode as Z, type MenuProps as _, Badge as a, type UploadRequestOptions as a$, type MessageConfig as a0, type MessageHandle as a1, type MessageKey as a2, type MessageType as a3, type NotificationConfig as a4, type NotificationPlacement as a5, type NotificationType as a6, Popconfirm as a7, type PopconfirmProps as a8, Popover as a9, Timeline as aA, type TimelineItem as aB, type TimelineProps as aC, Toolbar as aD, type ToolbarItem as aE, type ToolbarProps as aF, Tooltip as aG, type TooltipProps as aH, Tour as aI, type TourProps as aJ, type TourStep as aK, Tree as aL, type TreeDropPosition as aM, type TreeKey as aN, type TreeNode as aO, type TreeProps as aP, Typography as aQ, type TypographyLinkProps as aR, type TypographyProps as aS, type TypographyTitleProps as aT, type TypographyType as aU, Upload as aV, type UploadChangeInfo as aW, type UploadDraggerProps as aX, type UploadFile as aY, type UploadFileStatus as aZ, type UploadProps as a_, type PopoverProps as aa, Progress as ab, type ProgressProps as ac, type ProgressStatus as ad, Rate as ae, type RateProps as af, Segmented as ag, type SegmentedOption as ah, type SegmentedProps as ai, type SegmentedValue as aj, Spin as ak, type SpinProps as al, type StepItem as am, type StepStatus as an, Steps as ao, type StepsProps as ap, type TabItem as aq, Tabs as ar, type TabsContextMenuClickInfo as as, type TabsOrientation as at, type TabsPosition as au, type TabsProps as av, type TabsType as aw, Tag as ax, type TagProps as ay, type TagVariant as az, type BadgeRibbonProps as b, Watermark as b0, type WatermarkFont as b1, type WatermarkProps as b2, message as b3, notification as b4, type BadgeStatus as c, Breadcrumb as d, type BreadcrumbItem as e, type BreadcrumbProps as f, type CalendarProps as g, Card as h, type CardAccent as i, type CardProps as j, Carousel as k, type CarouselProps as l, type CarouselRef as m, Collapse as n, type CollapseItem as o, type CollapseKey as p, type CollapseProps as q, type DropdownButtonProps as r, type DropdownMenuProps as s, type DropdownOpenSource as t, type DropdownPlacement as u, type DropdownProps as v, type DropdownTrigger as w, type FilledIconName as x, FloatButton as y, type FloatButtonBackTopProps as z };