@jc-times/business-ui 0.4.0 → 0.4.2

package/CHANGELOG.md

@@ -1,3 +1,8 @@
+## 0.4.1 — 2026-09-28（patch，按用户指定）
+
+- AsyncDirectoryPicker/AsyncSearchPicker、TreeSelect 新增可选手机 bottom-sheet 面板，复用 ModalShell/Radix Dialog；搜索与结果同屏、独立滚动、固定底栏、返回焦点与软键盘视口适配。默认桌面行为及树即时多选契约保留。
+- 核对现有成熟内核；普通搜索继续使用 React Aria，树节点内核迁移作为独立候选，不采用上游明确不建议使用的 antd-mobile TreeSelect。
+
 ## 0.4.0 — 2026-09-28（minor）
 
 - 修复滚轮控件外部 ref 转发在 React 18 类型定义下无法编译的问题，兼容 React 18/19。
@@ -344,3 +349,7 @@
 
 - Fix missing Chinese and substituted Latin text in PDFs with unembedded fonts. Both PDFium viewers use stable same-origin Noto fallback configuration; assets and OFL licenses ship with the package, with no external CDN requests.
 - Add desktop/mobile real PDF rendering coverage. Restoring `fontFallback: null` makes the same Chinese test fail with zero text pixels; explicit caller overrides remain supported.
+## 0.4.2 — 2026-09-29（patch）
+
+- 日期及选项滚轮取消重复关闭叉号，使用公共内容高度 bottom-sheet、紧凑居中标题与统一底部操作。保留草稿、取消、一次确认和惯性未结束时禁止提交。
+- UI 173 单测、类型/构建/摇树/矩阵通过；完整浏览器156通过、15跳过，唯一旧叉号断言修订后滚轮专项15通过、5跳过。真实微信手机惯性和读屏仍待验收。

package/dist/AsyncDirectoryPicker.js

@@ -1,134 +1,135 @@
 import { AsyncSearchPicker as e } from "./AsyncSearchPicker.js";
 import { useEffect as t, useRef as n, useState as r } from "react";
-import { Fragment as i, jsx as a, jsxs as o } from "react/jsx-runtime";
+import { Fragment as i, jsx as a, jsxs as ee } from "react/jsx-runtime";
 //#region src/AsyncDirectoryPicker.tsx
-function s({ selectedItem: s, loadItems: ee, getKey: c, getText: l, getSelectionText: u = l, renderItem: d, onSelect: te, onQueryChange: f, ownerKey: p = "", label: m, placeholder: h = "输入关键词搜索", searchLabel: g, loadingTitle: _, emptyText: v, minimumCharacters: y = 0, minimumCharactersText: ne, debounceMs: b = 200, cacheSize: x = 50, cacheTtlMs: S = 3e5, refreshKey: C, loadOnFocus: re = !0, disabled: w = !1, busy: T = !1, className: E, inputProps: D }) {
-	let O = s ? u(s) : "", [k, A] = r(O), [j, M] = r(O), [N, P] = r([]), [F, I] = r("idle"), [L, R] = r(!1), [z, B] = r(!1), [V, H] = r(!1), U = n(0), W = n(O);
-	W.current = O;
-	let [G, K] = r(""), q = n(null), J = n(0), Y = n(/* @__PURE__ */ new Map()), X = Number.isFinite(x) ? Math.max(0, Math.floor(x)) : 50, Z = n(X);
-	Z.current = X, t(() => {
-		for (; Y.current.size > X;) Y.current.delete(Y.current.keys().next().value);
-	}, [X]), t(() => () => {
-		J.current++, U.current++, q.current?.abort();
+function o({ selectedItem: o, loadItems: te, getKey: s, getText: c, getSelectionText: l = c, renderItem: ne, onSelect: u, onQueryChange: d, ownerKey: f = "", label: p, placeholder: m = "输入关键词搜索", searchLabel: h, loadingTitle: g, emptyText: re, minimumCharacters: _ = 0, minimumCharactersText: v, debounceMs: y = 200, cacheSize: b = 50, cacheTtlMs: x = 3e5, refreshKey: S, loadOnFocus: C = !0, disabled: w = !1, busy: T = !1, className: E, inputProps: D, mobileMode: O }) {
+	let k = o ? l(o) : "", [A, j] = r(k), [M, N] = r(k), [P, F] = r([]), [I, L] = r("idle"), [R, z] = r(!1), [B, V] = r(!1), [H, U] = r(!1), W = n(0), G = n(k);
+	G.current = k;
+	let [K, q] = r(""), J = n(null), Y = n(0), X = n(/* @__PURE__ */ new Map()), Z = Number.isFinite(b) ? Math.max(0, Math.floor(b)) : 50, Q = n(Z);
+	Q.current = Z, t(() => {
+		for (; X.current.size > Z;) X.current.delete(X.current.keys().next().value);
+	}, [Z]), t(() => () => {
+		Y.current++, W.current++, J.current?.abort();
 	}, []), t(() => {
-		J.current++, q.current?.abort(), q.current = null, Y.current.clear(), U.current++, H(!1);
-		let e = s ? u(s) : "";
-		A(e), M(e), P([]), I("idle"), K("");
-	}, [p]), t(() => {
-		J.current++, q.current?.abort(), Y.current.clear(), P([]), I("idle");
-	}, [C, S]), t(() => {
-		J.current++, q.current?.abort(), U.current++, H(!1);
-		let e = s ? u(s) : "";
-		A(e), M(e), P([]), I("idle"), K("");
-	}, [s && c(s), s && u(s)]), t(() => {
-		if (w || T || V || L || z || k === j || k.trim().length < y) return;
-		let e = window.setTimeout(() => void Q(k), Math.max(0, b));
+		Y.current++, J.current?.abort(), J.current = null, X.current.clear(), W.current++, U(!1);
+		let e = o ? l(o) : "";
+		j(e), N(e), F([]), L("idle"), q("");
+	}, [f]), t(() => {
+		Y.current++, J.current?.abort(), X.current.clear(), F([]), L("idle");
+	}, [S, x]), t(() => {
+		Y.current++, J.current?.abort(), W.current++, U(!1);
+		let e = o ? l(o) : "";
+		j(e), N(e), F([]), L("idle"), q("");
+	}, [o && s(o), o && l(o)]), t(() => {
+		if (w || T || H || R || B || A === M || A.trim().length < _) return;
+		let e = window.setTimeout(() => void $(A), Math.max(0, y));
 		return () => window.clearTimeout(e);
 	}, [
-		k,
-		j,
+		A,
+		M,
 		w,
 		T,
-		V,
-		L,
-		z,
+		H,
+		R,
+		B,
+		_,
 		y,
-		b,
-		C,
-		S
+		S,
+		x
 	]);
-	async function Q(e = k) {
+	async function $(e = A) {
 		let t = e.trim();
-		if (w || T || V || z || t.length < y) return;
-		let n = ++J.current;
-		q.current?.abort(), q.current = null;
-		let r = t, i = X > 0 ? Y.current.get(r) : void 0;
+		if (w || T || H || B || t.length < _) return;
+		let n = ++Y.current;
+		J.current?.abort(), J.current = null;
+		let r = t, i = Z > 0 ? X.current.get(r) : void 0;
 		if (i && i.expires > Date.now()) {
-			Y.current.delete(r), Y.current.set(r, i), P(i.items), I("success"), K("");
+			X.current.delete(r), X.current.set(r, i), F(i.items), L("success"), q("");
 			return;
 		}
 		let a = new AbortController();
-		q.current = a, I("loading"), K("");
+		J.current = a, L("loading"), q("");
 		try {
-			let e = await ee(t, a.signal);
-			if (n !== J.current || a.signal.aborted) return;
-			if (Z.current > 0) for (Y.current.delete(r), Y.current.set(r, {
+			let e = await te(t, a.signal);
+			if (n !== Y.current || a.signal.aborted) return;
+			if (Q.current > 0) for (X.current.delete(r), X.current.set(r, {
 				items: e,
-				expires: Date.now() + Math.max(0, S)
-			}); Y.current.size > Z.current;) Y.current.delete(Y.current.keys().next().value);
-			P(e), I("success");
+				expires: Date.now() + Math.max(0, x)
+			}); X.current.size > Q.current;) X.current.delete(X.current.keys().next().value);
+			F(e), L("success");
 		} catch (e) {
-			if (n !== J.current || a.signal.aborted) return;
-			K(e instanceof Error ? e.message : "目录查询失败"), I("error");
+			if (n !== Y.current || a.signal.aborted) return;
+			q(e instanceof Error ? e.message : "目录查询失败"), L("error");
 		} finally {
-			n === J.current && (q.current = null);
+			n === Y.current && (J.current = null);
 		}
 	}
-	function $(e) {
-		J.current++, q.current?.abort(), q.current = null, A(e), M(""), P([]), I("idle"), K(""), f?.(e);
+	function ie(e) {
+		Y.current++, J.current?.abort(), J.current = null, j(e), N(""), F([]), L("idle"), q(""), d?.(e);
 	}
-	async function ie(e) {
-		J.current++, q.current?.abort(), q.current = null;
-		let t = ++U.current, n = u(e);
-		A(n), M(n), P([]), I("idle"), H(!0), K("");
+	async function ae(e) {
+		Y.current++, J.current?.abort(), J.current = null;
+		let t = ++W.current, n = l(e);
+		j(n), N(n), F([]), L("idle"), U(!0), q("");
 		try {
-			await te(e);
+			await u(e);
 		} catch (e) {
-			if (t !== U.current) return;
-			A(W.current), M(W.current), K(e instanceof Error ? e.message : "选择保存失败");
+			if (t !== W.current) return;
+			j(G.current), N(G.current), q(e instanceof Error ? e.message : "选择保存失败");
 		} finally {
-			t === U.current && H(!1);
+			t === W.current && U(!1);
 		}
 	}
-	function ae(e) {
-		D?.onFocus?.(e), !e.defaultPrevented && re && !s && F === "idle" && !N.length && k.trim().length >= y && Q(k);
-	}
 	function oe(e) {
-		D?.onKeyDown?.(e), (e.key === "Backspace" || e.key === "Delete") && R(!0);
+		D?.onFocus?.(e), !e.defaultPrevented && C && !o && I === "idle" && !P.length && A.trim().length >= _ && $(A);
 	}
 	function se(e) {
-		D?.onKeyUp?.(e), (e.key === "Backspace" || e.key === "Delete") && R(!1);
+		D?.onKeyDown?.(e), (e.key === "Backspace" || e.key === "Delete") && z(!0);
+	}
+	function ce(e) {
+		D?.onKeyUp?.(e), (e.key === "Backspace" || e.key === "Delete") && z(!1);
 	}
-	return /* @__PURE__ */ o(i, { children: [/* @__PURE__ */ a(e, {
-		query: k,
-		onQueryChange: $,
-		onSearch: () => void Q(),
-		items: N,
-		getKey: c,
-		getText: l,
-		renderItem: d,
-		onSelect: ie,
-		status: F,
-		error: G,
-		label: m,
-		searchLabel: g,
-		loadingTitle: _,
-		emptyText: v,
-		minimumCharacters: y,
-		minimumCharactersText: ne,
-		busy: T || V,
+	return /* @__PURE__ */ ee(i, { children: [/* @__PURE__ */ a(e, {
+		query: A,
+		onQueryChange: ie,
+		onSearch: () => void $(),
+		items: P,
+		getKey: s,
+		getText: c,
+		renderItem: ne,
+		onSelect: ae,
+		status: I,
+		error: K,
+		label: p,
+		searchLabel: h,
+		loadingTitle: g,
+		emptyText: re,
+		minimumCharacters: _,
+		minimumCharactersText: v,
+		busy: T || H,
 		disabled: w,
 		className: E,
+		mobileMode: O,
 		inputProps: {
 			...D,
-			placeholder: h,
-			onFocus: ae,
-			onKeyDown: oe,
-			onKeyUp: se,
+			placeholder: m,
+			onFocus: oe,
+			onKeyDown: se,
+			onKeyUp: ce,
 			onCompositionStart: (e) => {
-				B(!0), D?.onCompositionStart?.(e);
+				V(!0), D?.onCompositionStart?.(e);
 			},
 			onCompositionEnd: (e) => {
-				B(!1), D?.onCompositionEnd?.(e);
+				V(!1), D?.onCompositionEnd?.(e);
 			},
 			onBlur: (e) => {
-				D?.onBlur?.(e), R(!1);
+				D?.onBlur?.(e), z(!1);
 			}
 		}
-	}), G && F === "idle" && /* @__PURE__ */ a("div", {
+	}), K && I === "idle" && /* @__PURE__ */ a("div", {
 		role: "alert",
-		children: G
+		children: K
 	})] });
 }
 //#endregion
-export { s as AsyncDirectoryPicker };
+export { o as AsyncDirectoryPicker };

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/MobilePickerPanel.js

@@ -0,0 +1,34 @@
+import { Button as e } from "./Button.js";
+import { useOverlayContainer as t } from "./OverlayContainer.js";
+import { ModalShell as n } from "./ModalShell.js";
+import { useId as r } from "react";
+import { Fragment as i, jsx as a, jsxs as o } from "react/jsx-runtime";
+import { createPortal as s } from "react-dom";
+//#region src/MobilePickerPanel.tsx
+function c({ title: c, children: l, onClose: u, returnFocus: d, initialFocus: f, summary: p }) {
+	let m = r(), h = t();
+	return s(/* @__PURE__ */ a(n, {
+		titleId: `${m}-title`,
+		title: c,
+		closeLabel: "关闭选择面板",
+		mobileMode: "bottom-sheet",
+		onClose: u,
+		returnFocus: d,
+		initialFocus: f,
+		backdropClassName: "ui-picker-sheet-backdrop",
+		panelClassName: "ui-picker-sheet",
+		contentClassName: "ui-picker-sheet-content",
+		footerClassName: "ui-picker-sheet-footer",
+		footer: /* @__PURE__ */ o(i, { children: [p && /* @__PURE__ */ a("span", {
+			className: "ui-picker-sheet-summary",
+			role: "status",
+			children: p
+		}), /* @__PURE__ */ a(e, {
+			onClick: u,
+			children: "完成"
+		})] }),
+		children: l
+	}), h ?? document.body);
+}
+//#endregion
+export { c as MobilePickerPanel };

package/dist/OptionWheelDialog.js

@@ -21,6 +21,8 @@ function _({ options: r, value: s, title: l = "选择选项", returnFocus: _, po
 		title: l,
 		closeLabel: "关闭选择",
 		returnFocus: _,
+		mobileMode: "bottom-sheet",
+		showCloseButton: !1,
 		onClose: w,
 		backdropClassName: "ui-date-wheel-backdrop",
 		panelClassName: "ui-date-wheel-panel",