@jc-times/business-ui 0.3.2 → 0.4.1

package/dist/AsyncSearchPicker.js

@@ -1,155 +1,209 @@
 import { Button as e } from "./Button.js";
 import { TextInput as t } from "./FormField.js";
-import { RecoverableAsyncState as n } from "./RecoverableAsyncState.js";
-import { memo as r, useCallback as i, useEffect as a, useId as o, useRef as s, useState as c } from "react";
-import { jsx as l, jsxs as u } from "react/jsx-runtime";
+import { usePhoneWheel as n } from "./usePhoneWheel.js";
+import { RecoverableAsyncState as r } from "./RecoverableAsyncState.js";
+import { MobilePickerPanel as i } from "./MobilePickerPanel.js";
+import { memo as a, useCallback as o, useEffect as s, useId as c, useRef as l, useState as u } from "react";
+import { Fragment as d, jsx as f, jsxs as p } from "react/jsx-runtime";
 //#region src/AsyncSearchPicker.tsx
-function d({ query: r, onQueryChange: d, onSearch: p, items: h, getKey: g, getText: _, renderItem: v, onSelect: y, status: b = "idle", error: x, label: S, searchLabel: C = "查询", loadingTitle: w = "正在查询", emptyText: T = "没有匹配项", minimumCharacters: E = 0, minimumCharactersText: D = (e) => `请至少输入 ${e} 个字符`, busy: O = !1, disabled: k = !1, className: A = "", inputRef: j, inputProps: M }) {
-	let N = `ui-async-picker-${o().replaceAll(":", "")}`, [P, F] = c(-1), [I, L] = c(!1), R = s(/* @__PURE__ */ new Map()), z = s(null), [B, V] = c(320), H = k || O || b === "loading", U = r.trim().length < E, W = !I && b === "success" && !U, G = P >= 0 && P < h.length ? h[P] : void 0;
-	a(() => {
-		F(-1);
-	}, [r, h]), a(() => {
+function m({ query: a, onQueryChange: m, onSearch: g, items: _, getKey: v, getText: te, renderItem: y, onSelect: b, status: x = "idle", error: S, label: C, searchLabel: w = "查询", loadingTitle: ne = "正在查询", emptyText: re = "没有匹配项", minimumCharacters: T = 0, minimumCharactersText: ie = (e) => `请至少输入 ${e} 个字符`, busy: E = !1, disabled: D = !1, className: O = "", inputRef: k, inputProps: A, mobileMode: ae = "inline" }) {
+	let j = n(ae === "bottom-sheet"), [M, N] = u(!1), P = l(null), F = l(null);
+	s(() => {
+		(D || !j) && N(!1);
+	}, [D, j]);
+	let I = `ui-async-picker-${c().replaceAll(":", "")}`, [L, R] = u(-1), [z, B] = u(!1), V = l(/* @__PURE__ */ new Map()), H = l(null), [U, W] = u(320), G = D || E || x === "loading", K = a.trim().length < T, q = !z && x === "success" && !K, J = L >= 0 && L < _.length ? _[L] : void 0;
+	s(() => {
+		R(-1);
+	}, [a, _]), s(() => {
+		if (j) return;
 		let e = (e) => {
-			z.current?.contains(e.target) || (L(!0), F(-1));
+			H.current?.contains(e.target) || (B(!0), R(-1));
 		};
 		return document.addEventListener("pointerdown", e, !0), () => document.removeEventListener("pointerdown", e, !0);
-	}, []), a(() => {
-		if (!W || h.length === 0) return;
+	}, [j]), s(() => {
+		if (j || !q || _.length === 0) return;
 		let e = window.visualViewport, t = 0, n = () => {
 			t && window.cancelAnimationFrame(t), t = window.requestAnimationFrame(() => {
 				t = 0;
-				let n = z.current?.querySelector(".ui-async-search-control");
+				let n = H.current?.querySelector(".ui-async-search-control");
 				if (!n) return;
 				let r = (e?.offsetTop ?? 0) + (e?.height ?? window.innerHeight), i = Math.floor(r - n.getBoundingClientRect().bottom - 12);
-				V(Math.max(96, Math.min(320, i)));
+				W(Math.max(96, Math.min(320, i)));
 			});
 		};
 		return n(), e?.addEventListener("resize", n), e?.addEventListener("scroll", n), window.addEventListener("resize", n), () => {
 			t && window.cancelAnimationFrame(t), e?.removeEventListener("resize", n), e?.removeEventListener("scroll", n), window.removeEventListener("resize", n);
 		};
-	}, [h.length, W]);
-	function K() {
-		!H && !U && (L(!1), p(r));
+	}, [
+		_.length,
+		q,
+		j
+	]);
+	function Y() {
+		!G && !K && (B(!1), g(a));
 	}
-	let q = i((e) => {
-		H || (y(e), L(!0), F(-1));
-	}, [H, y]);
-	function J(e) {
-		if (!h.length) return;
-		let t = (e + h.length) % h.length;
-		F(t);
-		let n = R.current.get(g(h[t]));
+	let X = o((e) => {
+		G || (b(e), B(!0), R(-1), N(!1));
+	}, [G, b]);
+	function Z(e) {
+		if (!_.length) return;
+		let t = (e + _.length) % _.length;
+		R(t);
+		let n = V.current.get(v(_[t]));
 		typeof n?.scrollIntoView == "function" && n.scrollIntoView({ block: "nearest" });
 	}
-	function Y(e) {
-		M?.onKeyDown?.(e), !(e.defaultPrevented || e.nativeEvent.isComposing) && (e.key === "ArrowDown" && W && h.length ? (e.preventDefault(), J(P + 1)) : e.key === "ArrowUp" && W && h.length ? (e.preventDefault(), J(P <= 0 ? h.length - 1 : P - 1)) : e.key === "Enter" ? (e.preventDefault(), G && W ? q(G) : K()) : (e.key === "Escape" || e.key === "Tab") && (L(!0), F(-1)));
+	function oe(e) {
+		A?.onKeyDown?.(e), !(e.defaultPrevented || e.nativeEvent.isComposing) && (e.key === "ArrowDown" && q && _.length ? (e.preventDefault(), Z(L + 1)) : e.key === "ArrowUp" && q && _.length ? (e.preventDefault(), Z(L <= 0 ? _.length - 1 : L - 1)) : e.key === "Enter" ? (e.preventDefault(), J && q ? X(J) : Y()) : (e.key === "Escape" || e.key === "Tab" && !j) && (B(!0), R(-1)));
 	}
-	return /* @__PURE__ */ u("div", {
-		ref: z,
-		className: `ui-async-search-picker ${A}`.trim(),
+	let Q = /* @__PURE__ */ p("div", {
+		ref: H,
+		className: `ui-async-search-picker ${O}`.trim(),
 		onBlur: (e) => {
-			e.currentTarget.contains(e.relatedTarget) || (L(!0), F(-1));
+			!j && !e.currentTarget.contains(e.relatedTarget) && (B(!0), R(-1));
 		},
 		children: [
-			/* @__PURE__ */ u("div", {
+			/* @__PURE__ */ p("div", {
 				className: "ui-async-search-control",
-				children: [/* @__PURE__ */ l(t, {
-					...M,
-					ref: j,
-					label: S,
-					value: r,
-					disabled: k || O,
+				children: [/* @__PURE__ */ f(t, {
+					...A,
+					ref: j ? F : k,
+					label: C,
+					value: a,
+					disabled: D || E,
+					id: j ? `${I}-search` : A?.id,
+					name: j ? void 0 : A?.name,
+					form: j ? void 0 : A?.form,
+					required: !j && A?.required,
 					onFocus: (e) => {
-						L(!1), M?.onFocus?.(e);
+						B(!1), A?.onFocus?.(e);
 					},
 					onChange: (e) => {
-						L(!1), d(e.target.value);
+						B(!1), m(e.target.value);
 					},
-					onKeyDown: Y,
+					onKeyDown: oe,
 					role: "combobox",
 					"aria-autocomplete": "list",
-					"aria-expanded": W && h.length > 0,
-					"aria-controls": W && h.length > 0 ? `${N}-list` : void 0,
-					"aria-activedescendant": W && G ? `${N}-${f(g(G))}` : void 0
-				}), /* @__PURE__ */ l(e, {
+					"aria-expanded": q && _.length > 0,
+					"aria-controls": q && _.length > 0 ? `${I}-list` : void 0,
+					"aria-activedescendant": q && J ? `${I}-${h(v(J))}` : void 0
+				}), /* @__PURE__ */ f(e, {
 					variant: "primary",
-					busy: O || b === "loading",
-					disabled: k || U,
-					onClick: K,
-					children: C
+					busy: E || x === "loading",
+					disabled: D || K,
+					onClick: Y,
+					children: w
 				})]
 			}),
-			/* @__PURE__ */ u("div", {
+			/* @__PURE__ */ p("div", {
 				className: "ui-async-search-status",
 				"aria-live": "polite",
 				children: [
-					U ? D(E) : null,
-					!I && !U && b === "loading" ? /* @__PURE__ */ l(n, {
+					K ? ie(T) : null,
+					!z && !K && x === "loading" ? /* @__PURE__ */ f(r, {
 						compact: !0,
 						phase: "loading",
-						loadingTitle: w,
+						loadingTitle: ne,
 						errorTitle: ""
 					}) : null,
-					!I && !U && b === "error" ? /* @__PURE__ */ l(n, {
+					!z && !K && x === "error" ? /* @__PURE__ */ f(r, {
 						compact: !0,
 						phase: "error",
 						loadingTitle: "",
 						errorTitle: "查询失败",
-						detail: x,
-						onRetry: H ? void 0 : K,
+						detail: S,
+						onRetry: G ? void 0 : Y,
 						retryLabel: "重试"
 					}) : null,
-					W && h.length === 0 ? /* @__PURE__ */ l("div", {
+					q && _.length === 0 ? /* @__PURE__ */ f("div", {
 						className: "ui-async-search-empty",
-						children: T
+						children: re
 					}) : null
 				]
 			}),
-			W && h.length > 0 ? /* @__PURE__ */ l("div", {
-				id: `${N}-list`,
+			q && _.length > 0 ? /* @__PURE__ */ f("div", {
+				id: `${I}-list`,
 				role: "listbox",
 				className: "ui-async-search-list",
-				style: { maxHeight: B },
-				children: h.map((e, t) => {
-					let n = g(e);
-					return /* @__PURE__ */ l(m, {
+				style: { maxHeight: U },
+				children: _.map((e, t) => {
+					let n = v(e);
+					return /* @__PURE__ */ f(ee, {
 						item: e,
 						index: t,
 						optionKey: n,
-						id: `${N}-${f(n)}`,
-						selected: P === t,
-						refs: R.current,
-						activate: F,
-						select: q,
-						getText: _,
-						renderItem: v
+						id: `${I}-${h(n)}`,
+						selected: L === t,
+						refs: V.current,
+						activate: R,
+						select: X,
+						getText: te,
+						renderItem: y
 					}, n);
 				})
 			}) : null
 		]
 	});
+	if (!j) return Q;
+	function se() {
+		N(!1), B(!0), R(-1);
+	}
+	function $() {
+		!D && !E && (B(!1), N(!0));
+	}
+	return /* @__PURE__ */ p(d, { children: [/* @__PURE__ */ f(t, {
+		...A,
+		ref: (e) => {
+			P.current = e, typeof k == "function" ? k(e) : k && (k.current = e);
+		},
+		label: C,
+		value: a,
+		inputMode: "none",
+		disabled: D,
+		"aria-disabled": E || D || void 0,
+		readOnly: E || A?.readOnly,
+		className: `ui-mobile-picker-trigger ${O}`,
+		"aria-haspopup": "dialog",
+		"aria-expanded": M,
+		onFocus: void 0,
+		onBlur: void 0,
+		onChange: (e) => {
+			E || (m(e.target.value), $());
+		},
+		onClick: (e) => {
+			A?.onClick?.(e), e.defaultPrevented || $();
+		},
+		onKeyDown: (e) => {
+			A?.onKeyDown?.(e), !(e.defaultPrevented || e.nativeEvent.isComposing || e.keyCode === 229) && (e.key === "Enter" || e.key === " " || e.key === "ArrowDown") && (e.preventDefault(), $());
+		}
+	}), M && /* @__PURE__ */ f(i, {
+		title: C ?? "搜索选择",
+		returnFocus: P,
+		initialFocus: F,
+		onClose: se,
+		children: Q
+	})] });
 }
-function f(e) {
+function h(e) {
 	return e.replace(/[^a-zA-Z0-9_-]/g, "-");
 }
-function p({ item: e, index: t, optionKey: n, id: r, selected: a, refs: o, activate: s, select: c, getText: u, renderItem: d }) {
-	let f = i((e) => {
-		e ? o.set(n, e) : o.delete(n);
-	}, [o, n]);
-	return /* @__PURE__ */ l("button", {
-		ref: f,
+function g({ item: e, index: t, optionKey: n, id: r, selected: i, refs: a, activate: s, select: c, getText: l, renderItem: u }) {
+	let d = o((e) => {
+		e ? a.set(n, e) : a.delete(n);
+	}, [a, n]);
+	return /* @__PURE__ */ f("button", {
+		ref: d,
 		id: r,
 		type: "button",
 		role: "option",
-		"aria-selected": a,
+		"aria-selected": i,
 		className: "ui-async-search-option",
 		tabIndex: -1,
 		onMouseEnter: () => s(t),
 		onClick: () => c(e),
-		"aria-label": u(e),
-		children: d(e)
+		"aria-label": l(e),
+		children: u(e)
 	});
 }
-var m = r(p);
+var ee = a(g);
 //#endregion
-export { d as AsyncSearchPicker };
+export { m as AsyncSearchPicker };

package/dist/Cascader.js

@@ -1,52 +1,57 @@
 import { useOverlayContainer as e } from "./OverlayContainer.js";
 import { FormField as t } from "./FormField.js";
-import { useCallback as n, useEffect as r, useId as i, useRef as a, useState as o } from "react";
-import { jsx as s, jsxs as c } from "react/jsx-runtime";
-import { ChevronDown as l, ChevronRight as u, LoaderCircle as d, X as f } from "lucide-react";
-import p from "@rc-component/cascader";
+import { usePhoneWheel as n } from "./usePhoneWheel.js";
+import { WheelCascader as r } from "./WheelCascader.js";
+import { useCallback as i, useEffect as a, useId as o, useRef as s, useState as c } from "react";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+import { ChevronDown as d, ChevronRight as f, LoaderCircle as p, X as m } from "lucide-react";
+import h from "@rc-component/cascader";
 //#region src/Cascader.tsx
-function m(m) {
-	let g = i(), [_, v] = o(!1);
-	r(() => {
-		m.disabled && v(!1);
-	}, [m.disabled]);
-	let y = !m.disabled && (m.open ?? _), b = m.id ?? m.inputProps?.id ?? g, x = e(), { inputProps: S, inputRef: C, label: w, helpText: T, error: E } = m, D = a(null), O = n((e) => {
+function g(e) {
+	return n(e.mobileMode === "wheel") && !e.multiple && !e.loadData && !e.changeOnSelect ? /* @__PURE__ */ l(r, { ...e }) : /* @__PURE__ */ l(_, { ...e });
+}
+function _(n) {
+	let r = o(), [g, _] = c(!1);
+	a(() => {
+		n.disabled && _(!1);
+	}, [n.disabled]);
+	let y = !n.disabled && (n.open ?? g), b = n.id ?? n.inputProps?.id ?? r, x = e(), { inputProps: S, inputRef: C, label: w, helpText: T, error: E } = n, D = s(null), O = i((e) => {
 		D.current = e, typeof C == "function" ? C(e) : C && (C.current = e);
 	}, [C]);
-	r(() => {
-		D.current?.setCustomValidity(m.required && !m.value.length ? "请选择一个选项" : "");
-	}, [m.required, m.value.length]);
+	a(() => {
+		D.current?.setCustomValidity(n.required && !n.value.length ? "请选择一个选项" : "");
+	}, [n.required, n.value.length]);
 	let k = [
 		S?.["aria-describedby"],
 		T !== void 0 && `${b}-help`,
 		E && `${b}-error`
 	].filter(Boolean).join(" ") || void 0, A = {
 		id: b,
-		options: m.options,
+		options: n.options,
 		prefixCls: "ui-cascader",
-		className: m.className,
-		disabled: m.disabled,
+		className: n.className,
+		disabled: n.disabled,
 		open: y,
 		onPopupVisibleChange: (e) => {
-			v(e), m.onOpenChange?.(e);
+			_(e), n.onOpenChange?.(e);
 		},
 		onInputKeyDown: (e) => {
-			e.key === "Escape" && y && !e.nativeEvent.isComposing && (e.preventDefault(), e.stopPropagation(), v(!1), m.onOpenChange?.(!1));
+			e.key === "Escape" && y && !e.nativeEvent.isComposing && (e.preventDefault(), e.stopPropagation(), _(!1), n.onOpenChange?.(!1));
 		},
 		showAction: [],
-		placeholder: m.placeholder ?? "请选择或搜索",
-		notFoundContent: m.emptyText ?? "没有匹配的选项",
-		allowClear: m.allowClear !== !1 && {
-			clearIcon: /* @__PURE__ */ s(f, { size: 14 }),
-			label: m.clearLabel ?? "清除选择"
+		placeholder: n.placeholder ?? "请选择或搜索",
+		notFoundContent: n.emptyText ?? "没有匹配的选项",
+		allowClear: n.allowClear !== !1 && {
+			clearIcon: /* @__PURE__ */ l(m, { size: 14 }),
+			label: n.clearLabel ?? "清除选择"
 		},
-		suffix: /* @__PURE__ */ s(l, { size: 16 }),
-		expandIcon: /* @__PURE__ */ s(u, { size: 14 }),
-		loadingIcon: /* @__PURE__ */ s(d, { size: 14 }),
-		changeOnSelect: m.changeOnSelect,
-		loadData: m.loadData,
-		showSearch: m.searchable ?? !m.loadData ? {
-			filter: (e, t) => h(t.map((e) => e.label).join("/")).includes(h(e)),
+		suffix: /* @__PURE__ */ l(d, { size: 16 }),
+		expandIcon: /* @__PURE__ */ l(f, { size: 14 }),
+		loadingIcon: /* @__PURE__ */ l(p, { size: 14 }),
+		changeOnSelect: n.changeOnSelect,
+		loadData: n.loadData,
+		showSearch: n.searchable ?? !n.loadData ? {
+			filter: (e, t) => v(t.map((e) => e.label).join("/")).includes(v(e)),
 			render: (e, t) => t.map((e) => e.label).join(" / "),
 			limit: 50
 		} : !1,
@@ -61,19 +66,19 @@ function m(m) {
 				shiftX: !0
 			}
 		},
-		components: { input: /* @__PURE__ */ s("input", {
+		components: { input: /* @__PURE__ */ l("input", {
 			...S,
 			ref: O,
 			id: b,
 			placeholder: "",
-			required: m.required && !m.value.length,
-			"aria-required": m.required || void 0,
+			required: n.required && !n.value.length,
+			"aria-required": n.required || void 0,
 			"aria-invalid": E ? !0 : S?.["aria-invalid"],
 			"aria-describedby": k
 		}) },
-		tagRender: ({ label: e, closable: t, onClose: n }) => /* @__PURE__ */ c("span", {
+		tagRender: ({ label: e, closable: t, onClose: n }) => /* @__PURE__ */ u("span", {
 			className: "ui-cascader-tag",
-			children: [/* @__PURE__ */ s("span", { children: e }), t && /* @__PURE__ */ s("button", {
+			children: [/* @__PURE__ */ l("span", { children: e }), t && /* @__PURE__ */ l("button", {
 				type: "button",
 				"aria-label": `移除 ${String(e)}`,
 				onMouseDown: (e) => {
@@ -82,37 +87,37 @@ function m(m) {
 				onClick: (e) => {
 					e.stopPropagation(), n();
 				},
-				children: /* @__PURE__ */ s(f, { size: 12 })
+				children: /* @__PURE__ */ l(m, { size: 12 })
 			})]
 		})
 	};
-	return /* @__PURE__ */ c(t, {
+	return /* @__PURE__ */ u(t, {
 		controlId: b,
 		label: w,
 		helpText: T,
 		error: E,
-		required: m.required,
-		children: [y && /* @__PURE__ */ s("span", {
+		required: n.required,
+		children: [y && /* @__PURE__ */ l("span", {
 			hidden: !0,
 			"data-ui-aria-overlay": ""
-		}), m.multiple ? /* @__PURE__ */ s(p, {
+		}), n.multiple ? /* @__PURE__ */ l(h, {
 			...A,
 			checkable: !0,
-			checkStrictly: m.checkStrictly ?? !0,
-			maxTagCount: m.maxTagCount ?? 3,
-			value: m.value,
-			onChange: (e, t) => m.onValueChange(e ?? [], t ?? [])
-		}) : /* @__PURE__ */ s(p, {
+			checkStrictly: n.checkStrictly ?? !0,
+			maxTagCount: n.maxTagCount ?? 3,
+			value: n.value,
+			onChange: (e, t) => n.onValueChange(e ?? [], t ?? [])
+		}) : /* @__PURE__ */ l(h, {
 			...A,
-			value: m.value,
-			onChange: (e, t) => m.onValueChange(e ?? [], t ?? [])
+			value: n.value,
+			onChange: (e, t) => n.onValueChange(e ?? [], t ?? [])
 		})]
 	});
 }
-function h(e) {
+function v(e) {
 	return e.replace(/[\s/]+/gu, "").toLocaleLowerCase();
 }
-function g(e) {
+function y(e) {
 	let t = /* @__PURE__ */ new Map(), n = new Map(e.map((e) => [e.id, e.parentId]));
 	for (let n of e) {
 		if (!n.id || t.has(n.id)) throw Error("Cascader IDs must be nonempty and unique");
@@ -134,7 +139,7 @@ function g(e) {
 	}
 	return r;
 }
-function _(e) {
+function b(e) {
 	let t = /* @__PURE__ */ new Map();
 	function n(e, r) {
 		for (let i of e) {
@@ -146,4 +151,4 @@ function _(e) {
 	return n(e, []), t;
 }
 //#endregion
-export { m as Cascader, g as buildCascaderOptions, _ as indexCascaderPaths };
+export { g as Cascader, y as buildCascaderOptions, b as indexCascaderPaths };