@jc-times/business-ui 0.3.1 → 0.4.0

package/dist/ModalShell.js

@@ -1,105 +1,117 @@
 import { Button as e } from "./Button.js";
 import { OverlayContainerContext as t } from "./OverlayContainer.js";
-import { Children as n, Fragment as r, isValidElement as i, useCallback as a, useEffect as o, useRef as s, useState as c } from "react";
-import { jsx as l, jsxs as u } from "react/jsx-runtime";
-import { X as d } from "lucide-react";
-import * as f from "@radix-ui/react-dialog";
+import { useSheetViewport as n } from "./useSheetViewport.js";
+import { Children as r, Fragment as i, isValidElement as a, useCallback as o, useEffect as s, useRef as c, useState as l } from "react";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+import { X as f } from "lucide-react";
+import * as p from "@radix-ui/react-dialog";
 //#region src/ModalShell.tsx
-function p({ backdropClassName: e = "", panelClassName: n = "", titleId: r, eyebrow: i, title: d, description: p, closeLabel: _, onClose: b, closeDisabled: x = !1, showCloseButton: S = !0, closeIconSize: C = 20, closeOnBackdrop: w = !1, rootRef: T, closeOnEscape: E = !0, initialFocus: D, returnFocus: O, role: k = "dialog", describedBy: A, children: j, footer: M, contentClassName: N = "", contentProps: P, footerClassName: F = "" }) {
-	let I = s(null), [L, R] = c(null), z = s(typeof document > "u" ? null : document.activeElement), B = a((e) => {
-		I.current = e, v(T, e);
-	}, [T]), V = s(!1), { ref: H, ...U } = P ?? {};
-	function W() {
-		return [...document.querySelectorAll("[role='dialog'][aria-modal='true'],[role='alertdialog'][aria-modal='true']")].at(-1) === I.current;
+var m = Symbol("ui-modal-nested-escape");
+function h({ backdropClassName: e = "", panelClassName: r = "", titleId: i, eyebrow: a, title: f, description: h, closeLabel: y, onClose: S, closeDisabled: C = !1, showCloseButton: w = !0, closeIconSize: T = 20, closeOnBackdrop: E = !1, rootRef: D, closeOnEscape: O = !0, initialFocus: k, returnFocus: A, role: j = "dialog", describedBy: M, children: N, footer: P, contentClassName: F = "", contentProps: I, footerClassName: L = "", mobileMode: R = "fullscreen" }) {
+	let z = n(R === "bottom-sheet"), B = c(null), [V, H] = l(null), U = c(typeof document > "u" ? null : document.activeElement), W = o((e) => {
+		B.current = e, b(D, e);
+	}, [D]), G = c(!1), { ref: K, ...q } = I ?? {};
+	function J() {
+		return [...document.querySelectorAll("[role='dialog'][aria-modal='true'],[role='alertdialog'][aria-modal='true']")].at(-1) === B.current;
 	}
-	function G() {
-		!x && W() && b();
+	function Y() {
+		!C && J() && S();
 	}
-	o(() => {
-		h() && M === void 0 && !V.current && m(j) && (V.current = !0, console.warn("[business-ui] ModalShell 的直接 <footer> child 会位于可滚动正文区。固定底栏请改用 footer 属性，并用 footerClassName 定制样式；组件不会自动搬运 children。"));
-	}, [j, M]);
-	function K(e) {
-		w && e.target === e.currentTarget && G(), e.target.closest("button,a[href],input,select,textarea,[tabindex]") || e.preventDefault();
+	s(() => {
+		_() && P === void 0 && !G.current && g(N) && (G.current = !0, console.warn("[business-ui] ModalShell 的直接 <footer> child 会位于可滚动正文区。固定底栏请改用 footer 属性，并用 footerClassName 定制样式；组件不会自动搬运 children。"));
+	}, [N, P]);
+	function X(e) {
+		E && e.target === e.currentTarget && Y(), e.target.closest("button,a[href],input,select,textarea,[tabindex]") || e.preventDefault();
 	}
-	return /* @__PURE__ */ l(f.Root, {
+	return /* @__PURE__ */ u(p.Root, {
 		open: !0,
 		onOpenChange: (e) => {
-			e || G();
+			e || Y();
 		},
-		children: /* @__PURE__ */ l(f.Overlay, {
+		children: /* @__PURE__ */ u(p.Overlay, {
 			asChild: !0,
-			children: /* @__PURE__ */ l(f.Content, {
+			children: /* @__PURE__ */ u(p.Content, {
 				asChild: !0,
 				onEscapeKeyDown: (e) => {
-					(x || !E || I.current?.querySelector("[data-ui-aria-overlay]")) && e.preventDefault();
+					if (!J()) {
+						e[m] = !0, e.preventDefault();
+						return;
+					}
+					(C || !O || B.current?.querySelector("[data-ui-aria-overlay]")) && e.preventDefault();
 				},
 				onInteractOutside: (e) => e.preventDefault(),
 				onOpenAutoFocus: (e) => {
-					let t = y(D);
+					let t = x(k);
 					t && !t.hasAttribute("disabled") && (e.preventDefault(), t.focus());
 				},
 				onCloseAutoFocus: (e) => {
-					if (e.preventDefault(), O !== !1) {
-						let e = y(O) ?? z.current;
+					if (e.preventDefault(), A !== !1) {
+						let e = x(A) ?? U.current;
 						e?.isConnected && e.focus();
 					}
 				},
-				children: /* @__PURE__ */ l("div", {
-					ref: B,
+				children: /* @__PURE__ */ u("div", {
+					ref: W,
 					"data-ui-focus-managed": "radix",
+					"data-mobile-mode": R,
+					style: z,
 					className: `ui-modal-backdrop ${e}`.trim(),
-					role: k,
+					role: j,
 					"aria-modal": "true",
-					"aria-labelledby": r,
-					"aria-describedby": A ?? (p === void 0 ? void 0 : `${r}-description`),
-					onMouseDown: K,
+					"aria-labelledby": i,
+					"aria-describedby": M ?? (h === void 0 ? void 0 : `${i}-description`),
+					onMouseDown: X,
 					tabIndex: -1,
-					children: /* @__PURE__ */ u(t.Provider, {
-						value: L,
-						children: [/* @__PURE__ */ u("section", {
-							className: `ui-modal ${n}`.trim(),
+					onKeyDown: (e) => {
+						let t = e.nativeEvent[m];
+						e.key === "Escape" && (!e.defaultPrevented || t) && J() && O && !C && !B.current?.querySelector("[data-ui-aria-overlay]") && (e.preventDefault(), e.stopPropagation(), Y());
+					},
+					children: /* @__PURE__ */ d(t.Provider, {
+						value: V,
+						children: [/* @__PURE__ */ d("section", {
+							className: `ui-modal ${r}`.trim(),
 							children: [
-								/* @__PURE__ */ u("header", {
+								/* @__PURE__ */ d("header", {
 									className: "ui-modal-header",
-									children: [/* @__PURE__ */ u("div", { children: [
-										i === void 0 ? null : /* @__PURE__ */ l("span", {
+									children: [/* @__PURE__ */ d("div", { children: [
+										a === void 0 ? null : /* @__PURE__ */ u("span", {
 											className: "ui-modal-eyebrow",
-											children: i
+											children: a
 										}),
-										/* @__PURE__ */ l(f.Title, {
+										/* @__PURE__ */ u(p.Title, {
 											asChild: !0,
-											children: /* @__PURE__ */ l("h2", {
-												id: r,
-												children: d
+											children: /* @__PURE__ */ u("h2", {
+												id: i,
+												children: f
 											})
 										}),
-										p === void 0 ? null : /* @__PURE__ */ l(f.Description, {
+										h === void 0 ? null : /* @__PURE__ */ u(p.Description, {
 											asChild: !0,
-											children: /* @__PURE__ */ l("p", {
-												id: `${r}-description`,
-												children: p
+											children: /* @__PURE__ */ u("p", {
+												id: `${i}-description`,
+												children: h
 											})
 										})
-									] }), S && /* @__PURE__ */ l(g, {
-										label: _,
-										disabled: x,
-										size: C,
-										onClose: G
+									] }), w && /* @__PURE__ */ u(v, {
+										label: y,
+										disabled: C,
+										size: T,
+										onClose: Y
 									})]
 								}),
-								/* @__PURE__ */ l("div", {
-									...U,
-									ref: H,
-									className: `ui-modal-content ${N}`.trim(),
-									children: j
+								/* @__PURE__ */ u("div", {
+									...q,
+									ref: K,
+									className: `ui-modal-content ${F}`.trim(),
+									children: N
 								}),
-								M === void 0 ? null : /* @__PURE__ */ l("footer", {
-									className: `ui-modal-footer ${F}`.trim(),
-									children: M
+								P === void 0 ? null : /* @__PURE__ */ u("footer", {
+									className: `ui-modal-footer ${L}`.trim(),
+									children: P
 								})
 							]
-						}), /* @__PURE__ */ l("div", {
-							ref: R,
+						}), /* @__PURE__ */ u("div", {
+							ref: H,
 							className: "ui-overlay-container"
 						})]
 					})
@@ -108,32 +120,32 @@ function p({ backdropClassName: e = "", panelClassName: n = "", titleId: r, eyeb
 		})
 	});
 }
-function m(e) {
-	return n.toArray(e).some((e) => i(e) ? e.type === "footer" || e.type === r && m(e.props.children) : !1);
+function g(e) {
+	return r.toArray(e).some((e) => a(e) ? e.type === "footer" || e.type === i && g(e.props.children) : !1);
 }
-function h() {
+function _() {
 	return typeof process < "u" && process.env.NODE_ENV !== "production";
 }
-function g({ label: t, disabled: n, size: r, onClose: i }) {
-	return /* @__PURE__ */ l(e, {
+function v({ label: t, disabled: n, size: r, onClose: i }) {
+	return /* @__PURE__ */ u(e, {
 		className: "ui-modal-close",
 		variant: "ghost",
 		iconOnly: !0,
 		"aria-label": t,
 		onClick: i,
 		disabled: n,
-		children: /* @__PURE__ */ l(d, {
+		children: /* @__PURE__ */ u(f, {
 			size: r,
 			"aria-hidden": "true"
 		})
 	});
 }
-var _ = p;
-function v(e, t) {
+var y = h;
+function b(e, t) {
 	typeof e == "function" ? e(t) : e && (e.current = t);
 }
-function y(e) {
+function x(e) {
 	return e && "current" in e ? e.current : e || null;
 }
 //#endregion
-export { _ as Dialog, p as ModalShell };
+export { y as Dialog, h as ModalShell };

package/dist/MultiSelect.js

@@ -43,6 +43,7 @@ function x({ values: x, defaultValues: S = y, onValuesChange: C, name: w, select
 		selectionMode: "multiple",
 		value: Z,
 		onChange: (e) => Q(e.map(String)),
+		allowsCustomValue: !0,
 		inputValue: j,
 		defaultInputValue: M,
 		onInputChange: N,
@@ -87,7 +88,10 @@ function x({ values: x, defaultValues: S = y, onValuesChange: C, name: w, select
 							id: e.id,
 							textValue: e.label,
 							className: "ui-selection-tag",
-							children: [e.label, /* @__PURE__ */ r(c, {
+							children: [/* @__PURE__ */ r("span", {
+								className: "ui-selection-tag-label",
+								children: e.label
+							}), /* @__PURE__ */ r(c, {
 								slot: "remove",
 								"aria-label": `移除 ${e.label}`,
 								children: "×"

package/dist/OptionWheelDialog.js

@@ -0,0 +1,99 @@
+import { Button as e } from "./Button.js";
+import { useOverlayContainer as t } from "./OverlayContainer.js";
+import { ModalShell as n } from "./ModalShell.js";
+import { RecoverableAsyncState as r } from "./RecoverableAsyncState.js";
+import { enabledWheelOptions as i, resolveWheelPath as a, wheelText as o } from "./option-wheel-model.js";
+import { Component as s, Suspense as c, lazy as l, useId as u, useState as d } from "react";
+import { Fragment as f, jsx as p, jsxs as m } from "react/jsx-runtime";
+import { createPortal as h } from "react-dom";
+//#region src/OptionWheelDialog.tsx
+var g = () => l(() => import("./AntOptionWheelView.js"));
+function _({ options: r, value: s, title: l = "选择选项", returnFocus: _, portalContainer: b, allowClear: x, clearLabel: S = "清除", emptyText: C = "没有可选项", onClose: w, onConfirm: T }) {
+	let E = t(b), D = u(), [{ View: O, attempt: k }, A] = d(() => ({
+		View: g(),
+		attempt: 0
+	})), j = i(r), [M, N] = d(() => a(j, s).value), [P, F] = d(!0), I = a(j, M), L = M.length > 0 && JSON.stringify(I.value) === JSON.stringify(M);
+	function R() {
+		L && !P && T(M);
+	}
+	return h(/* @__PURE__ */ m(n, {
+		titleId: `${D}-title`,
+		title: l,
+		closeLabel: "关闭选择",
+		returnFocus: _,
+		onClose: w,
+		backdropClassName: "ui-date-wheel-backdrop",
+		panelClassName: "ui-date-wheel-panel",
+		contentClassName: "ui-date-wheel-content",
+		footerClassName: "ui-date-wheel-actions",
+		footer: /* @__PURE__ */ m(f, { children: [
+			/* @__PURE__ */ p(e, {
+				variant: "secondary",
+				onClick: w,
+				children: "取消"
+			}),
+			x && /* @__PURE__ */ p(e, {
+				variant: "secondary",
+				disabled: !s.length,
+				onClick: () => T([]),
+				children: S
+			}),
+			/* @__PURE__ */ p(e, {
+				variant: "primary",
+				disabled: !L || P,
+				onClick: R,
+				children: "确定选择"
+			})
+		] }),
+		children: [j.length ? /* @__PURE__ */ p(v, {
+			onError: () => F(!0),
+			onRetry: () => {
+				F(!0), A({
+					View: g(),
+					attempt: k + 1
+				});
+			},
+			children: /* @__PURE__ */ p(c, {
+				fallback: /* @__PURE__ */ p(y, {}),
+				children: /* @__PURE__ */ p(O, {
+					columns: I.columns,
+					value: I.value,
+					onPendingChange: F,
+					onChange: (e) => N(a(j, e).value)
+				})
+			})
+		}, k) : /* @__PURE__ */ p("p", {
+			role: "status",
+			children: C
+		}), /* @__PURE__ */ p("p", {
+			className: "ui-date-wheel-summary ui-option-wheel-summary",
+			role: "status",
+			children: I.path.map(o).join(" / ")
+		})]
+	}), E ?? document.body);
+}
+var v = class extends s {
+	state = { failed: !1 };
+	static getDerivedStateFromError() {
+		return { failed: !0 };
+	}
+	componentDidCatch() {
+		this.props.onError();
+	}
+	render() {
+		return this.state.failed ? /* @__PURE__ */ p(r, {
+			phase: "error",
+			loadingTitle: "加载选择器",
+			errorTitle: "选择器加载失败",
+			onRetry: this.props.onRetry
+		}) : this.props.children;
+	}
+};
+function y() {
+	return /* @__PURE__ */ p("p", {
+		role: "status",
+		children: "正在加载选择器…"
+	});
+}
+//#endregion
+export { _ as OptionWheelDialog };

package/dist/Select.js

@@ -1,73 +1,128 @@
 import { useOverlayContainer as e } from "./OverlayContainer.js";
 import { FormField as t } from "./FormField.js";
-import { useId as n } from "react";
-import { jsx as r, jsxs as i } from "react/jsx-runtime";
-import { Check as a, ChevronDown as o, ChevronUp as s } from "lucide-react";
-import * as c from "@radix-ui/react-select";
+import { usePhoneWheel as n } from "./usePhoneWheel.js";
+import { wheelOptionsKey as r } from "./option-wheel-model.js";
+import { OptionWheelDialog as i } from "./OptionWheelDialog.js";
+import { useCallback as a, useEffect as o, useId as s, useRef as c, useState as l } from "react";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+import { Check as f, ChevronDown as p, ChevronUp as m } from "lucide-react";
+import * as h from "@radix-ui/react-select";
 //#region src/Select.tsx
-function l({ value: l, defaultValue: f, onValueChange: p, options: m, label: h, placeholder: g = "请选择", helpText: _, error: v, required: y, disabled: b, name: x, id: S, className: C = "", triggerRef: w, triggerProps: T, portalContainer: E, placement: D }) {
-	let O = n(), k = S ?? O, A = e(E), j = /* @__PURE__ */ i(c.Root, {
-		value: l,
-		defaultValue: f,
-		onValueChange: p,
-		disabled: b,
-		name: x,
-		required: y,
-		children: [/* @__PURE__ */ i(c.Trigger, {
-			...T,
-			ref: w,
-			id: k,
-			className: `ui-select-trigger ${C}`.trim(),
-			"aria-invalid": v ? !0 : T?.["aria-invalid"],
-			"aria-describedby": d(T?.["aria-describedby"], u(k, _, v)),
-			children: [/* @__PURE__ */ r(c.Value, { placeholder: g }), /* @__PURE__ */ r(c.Icon, { children: /* @__PURE__ */ r(o, { size: 16 }) })]
-		}), /* @__PURE__ */ r(c.Portal, {
-			container: A,
-			children: /* @__PURE__ */ i(c.Content, {
-				className: "ui-select-content",
-				position: "popper",
-				sideOffset: 6,
-				collisionPadding: 10,
-				...D,
-				children: [
-					/* @__PURE__ */ r(c.ScrollUpButton, {
-						className: "ui-select-scroll",
-						children: /* @__PURE__ */ r(s, { size: 16 })
-					}),
-					/* @__PURE__ */ r(c.Viewport, {
-						className: "ui-select-viewport",
-						children: m.map((e) => /* @__PURE__ */ i(c.Item, {
-							value: e.value,
-							disabled: e.disabled,
-							className: "ui-select-item",
-							children: [/* @__PURE__ */ r(c.ItemText, { children: e.label }), /* @__PURE__ */ r(c.ItemIndicator, {
-								className: "ui-select-indicator",
-								children: /* @__PURE__ */ r(a, { size: 15 })
-							})]
-						}, e.value))
-					}),
-					/* @__PURE__ */ r(c.ScrollDownButton, {
-						className: "ui-select-scroll",
-						children: /* @__PURE__ */ r(o, { size: 16 })
-					})
-				]
+function g({ value: g, defaultValue: y, onValueChange: b, options: x, label: S, placeholder: C = "请选择", helpText: w, error: T, required: E, disabled: D, name: O, id: k, className: A = "", triggerRef: j, triggerProps: M, portalContainer: N, placement: P, mobileMode: F = "dropdown" }) {
+	let I = s(), L = k ?? I, R = e(N), z = n(F === "wheel"), [B, V] = l(y ?? ""), H = g ?? B, U = c(null), W = a((e) => {
+		U.current = e, typeof j == "function" ? j(e) : j && (j.current = e);
+	}, [j]), G = z ? JSON.stringify([H, r(x)]) : "", [K, q] = l(null), [J, Y] = l(!1), X = z && !D && K === G;
+	o(() => {
+		q(null);
+	}, [
+		G,
+		z,
+		D
+	]), o(() => {
+		Y(!1);
+	}, [z, D]);
+	function Z(e) {
+		g === void 0 && V(e), b?.(e);
+	}
+	let Q = /* @__PURE__ */ d(h.Root, {
+		value: H,
+		onValueChange: Z,
+		open: !z && !D && J,
+		onOpenChange: (e) => {
+			z ? e && !D && q(G) : Y(e);
+		},
+		disabled: D,
+		name: O,
+		required: E,
+		children: [
+			/* @__PURE__ */ d(h.Trigger, {
+				...M,
+				ref: W,
+				id: L,
+				className: `ui-select-trigger ${A}`.trim(),
+				...z ? {
+					"aria-haspopup": "dialog",
+					"aria-expanded": X,
+					"aria-controls": void 0
+				} : {},
+				onKeyDown: (e) => {
+					M?.onKeyDown?.(e), z && !e.defaultPrevented && ([
+						"Enter",
+						" ",
+						"ArrowDown",
+						"ArrowUp"
+					].includes(e.key) ? (e.preventDefault(), D || q(G)) : e.key.length === 1 && e.preventDefault());
+				},
+				"aria-invalid": T ? !0 : M?.["aria-invalid"],
+				"aria-describedby": v(M?.["aria-describedby"], _(L, w, T)),
+				children: [/* @__PURE__ */ u("span", {
+					className: "ui-select-value",
+					children: /* @__PURE__ */ u(h.Value, { placeholder: C })
+				}), /* @__PURE__ */ u(h.Icon, {
+					className: "ui-select-icon",
+					children: /* @__PURE__ */ u(p, { size: 16 })
+				})]
+			}),
+			/* @__PURE__ */ u(h.Portal, {
+				container: R,
+				children: /* @__PURE__ */ d(h.Content, {
+					className: "ui-select-content",
+					position: "popper",
+					sideOffset: 6,
+					collisionPadding: 10,
+					...P,
+					children: [
+						/* @__PURE__ */ u(h.ScrollUpButton, {
+							className: "ui-select-scroll",
+							children: /* @__PURE__ */ u(m, { size: 16 })
+						}),
+						/* @__PURE__ */ u(h.Viewport, {
+							className: "ui-select-viewport",
+							children: x.map((e) => /* @__PURE__ */ d(h.Item, {
+								value: e.value,
+								disabled: e.disabled,
+								className: "ui-select-item",
+								children: [/* @__PURE__ */ u(h.ItemText, { children: e.label }), /* @__PURE__ */ u(h.ItemIndicator, {
+									className: "ui-select-indicator",
+									children: /* @__PURE__ */ u(f, { size: 15 })
+								})]
+							}, e.value))
+						}),
+						/* @__PURE__ */ u(h.ScrollDownButton, {
+							className: "ui-select-scroll",
+							children: /* @__PURE__ */ u(p, { size: 16 })
+						})
+					]
+				})
+			}),
+			X && /* @__PURE__ */ u(i, {
+				options: x,
+				value: H ? [H] : [],
+				title: S ?? "选择选项",
+				portalContainer: N,
+				returnFocus: U,
+				onClose: () => q(null),
+				onConfirm: (e) => {
+					let t = x.find((t) => t.value === e[0] && !t.disabled);
+					!D && t && (H !== t.value && Z(t.value), q(null));
+				}
 			})
-		})]
+		]
 	});
-	return h === void 0 && _ === void 0 && !v ? j : /* @__PURE__ */ r(t, {
-		controlId: k,
-		label: h,
-		required: y,
-		helpText: _,
-		error: v,
-		children: j
+	return S === void 0 && w === void 0 && !T ? Q : /* @__PURE__ */ u(t, {
+		controlId: L,
+		label: S,
+		required: E,
+		helpText: w,
+		error: T,
+		children: Q
 	});
 }
-function u(e, t, n) {
+function _(e, t, n) {
 	return [t === void 0 ? "" : `${e}-help`, n === void 0 || n === "" ? "" : `${e}-error`].filter(Boolean).join(" ") || void 0;
 }
-function d(...e) {
+function v(...e) {
 	return e.filter(Boolean).join(" ") || void 0;
 }
 //#endregion
-export { l as Select };
+export { g as Select };