@unicom-cloud/ui 0.8.156 → 0.8.158

package/drawer/Drawer.js

@@ -1,27 +1,28 @@
-/* 潘启宝 2026-04-14 16:51:07 星期二 */
-import { isFunction as e, isHTMLElement as t, isNaN as n, isServerRendering as ee } from "../utils/is.js";
+/* 潘启宝 2026-05-08 09:13:14 星期五 */
+import { isFunction as e, isHTMLElement as t, isNaN as n, isNull as r, isServerRendering as ee, isUndefined as i } from "../utils/is.js";
 import { Esc as te } from "../utils/keyboardCode.js";
-import r from "../utils/className.js";
+import a from "../utils/className.js";
 import ne from "../hooks/use-merge-props/index.js";
-import { contains as i } from "../utils/dom.js";
-import re from "../config-provider/context.js";
-import ie from "../utils/omit.js";
-import ae from "../icon-hover/index.js";
-import a from "../config-provider/index.js";
-import oe from "../utils/findRootElement.js";
-import se from "../hooks/use-is-first-render/index.js";
+import { contains as re } from "../utils/dom.js";
+import ie from "../config-provider/context.js";
+import ae from "../utils/omit.js";
+import oe from "../icon-hover/index.js";
+import { TransitionCSS as se } from "../transition/index.js";
+import ce from "../config-provider/index.js";
+import le from "../utils/findRootElement.js";
+import ue from "../hooks/use-is-first-render/index.js";
 import o from "../button/index.js";
-import ce from "../hooks/use-overflow-hidden/index.js";
-import le from "../hooks/useUnmountOnExit.js";
-import ue from "../mask/index.js";
-import de from "../portal/index.js";
-import s, { useCallback as fe, useContext as pe, useEffect as c, useImperativeHandle as l, useRef as u, useState as d } from "react";
-import { getBodyContainer as f } from "@unicom-cloud/ui-common/utils/dom";
-import { Fragment as me, jsx as p, jsxs as m } from "react/jsx-runtime";
-import he from "@unicom-cloud/ui-common/transition/TransitionCSS";
-import ge from "@unicom-cloud/icons/IconUiClose";
+import de from "../hooks/use-overflow-hidden/index.js";
+import fe from "../hooks/useUnmountOnExit.js";
+import { MASK_TRANSITION_DURATION as s } from "../mask/constant.js";
+import pe from "../mask/index.js";
+import me from "../portal/index.js";
+import { forwardRef as c, useCallback as he, useContext as ge, useEffect as l, useImperativeHandle as _e, useLayoutEffect as ve, useRef as u, useState as ye } from "react";
+import { getBodyContainer as d } from "@unicom-cloud/ui-common/utils/dom";
+import { Fragment as be, jsx as f, jsxs as p } from "react/jsx-runtime";
+import xe from "@unicom-cloud/icons/IconUiClose";
 //#region components/pc/drawer/Drawer.tsx
-var h = "top", g = "bottom", _ = "left", v = "right", _e = {
+var m = "Drawer", h = "top", g = "bottom", _ = "left", v = "right", Se = {
 	placement: v,
 	width: 250,
 	height: 250,
@@ -30,177 +31,192 @@ var h = "top", g = "bottom", _ = "left", v = "right", _e = {
 	closable: !0,
 	maskClosable: !0,
 	mountOnEnter: !0,
-	getPopupContainer: f
+	getPopupContainer: d
 };
-function y(s, y) {
-	let b = pe(re), { locale: x, prefixCls: S, getPrefixCls: C, componentConfig: w, rtl: ve } = b, T = ne(s, _e, w?.Drawer), { style: ye, className: be, children: xe, wrapClassName: Se, maskStyle: Ce, headerStyle: E, bodyStyle: D, title: O, header: k, footer: A, okText: we, cancelText: Te, width: Ee, height: De, placement: j = v, mask: M, visible: N, closable: Oe, maskClosable: ke, confirmLoading: Ae, mountOnEnter: P, unmountOnExit: F, afterOpen: I, afterClose: L, getPopupContainer: R, escToExit: je, getChildrenPopupContainer: z, okButtonProps: Me, cancelButtonProps: Ne, zIndex: B, closeIcon: V, okButton: H, cancelButton: U, ...Pe } = T, W = u(null), G = u(null), K = u(null), [q, Fe] = d(), J = C?.("drawer");
-	se();
-	let Y = /* @__PURE__ */ m(me, { children: [U !== !1 && U?.visible !== !1 && /* @__PURE__ */ p(o, {
-		onClick: T.onCancel,
-		...Ne,
-		...U?.props,
-		children: U?.props?.children || U?.text || Te || x?.Drawer?.cancelText
-	}), H !== !1 && H?.visible !== !1 && /* @__PURE__ */ p(o, {
+function y(c, y) {
+	let b = ge(ie), { locale: x, prefixCls: S, getPrefixCls: C, componentConfig: w, rtl: Ce, childrenName: we } = b, { style: Te, className: Ee, children: De, wrapClassName: Oe, maskStyle: ke, headerStyle: Ae, bodyStyle: je, title: T, header: E, footer: D, okText: Me, cancelText: Ne, width: Pe, height: Fe, placement: O = v, mask: k, visible: A, closable: Ie, maskClosable: Le, confirmLoading: Re, mountOnEnter: j, unmountOnExit: M, afterOpen: N, afterClose: P, getPopupContainer: F, escToExit: ze, getChildrenPopupContainer: I, okButtonProps: L, cancelButtonProps: R, zIndex: Be, closeIcon: z, okButton: B, cancelButton: V, onCancel: H, onOk: Ve, ...He } = ne(c, Se, w?.Drawer), U = Be;
+	we === m && (j || (U ??= b.zIndex));
+	let W = u(null), G = u(null), K = u(null), [q, Ue] = ye(), J = C?.("drawer");
+	ue();
+	let Y = /* @__PURE__ */ p(be, { children: [V !== !1 && V?.visible !== !1 && /* @__PURE__ */ f(o, {
+		...R,
+		...V?.props,
+		onClick: (t) => {
+			let n = H;
+			e(n) && n(t), R?.onClick?.(t), V?.props?.onClick?.(t);
+		},
+		children: V?.props?.children || V?.text || Ne || x?.Drawer?.cancelText
+	}), B !== !1 && B?.visible !== !1 && /* @__PURE__ */ f(o, {
 		type: "primary",
-		loading: Ae,
-		onClick: T.onOk,
-		...Me,
-		...H?.props,
-		children: H?.props?.children || H?.text || we || x?.Drawer?.okText
-	})] }), X = fe(() => {
-		let e = R?.();
-		return oe(e) || f();
-	}, [R]), Ie = !ee && X() === f();
-	ce(X, { hidden: N && M }), c(() => {
-		N && i(f(), W.current) && W.current?.focus?.();
-	}, [N]), l(y, () => ({ getRootElement() {
-		return W.current;
-	} }));
-	let Le = () => {
-		if (N && q === void 0 && W.current) {
+		loading: Re,
+		...L,
+		...B?.props,
+		onClick: (t) => {
+			let n = Ve;
+			e(n) && n(t), L?.onClick?.(t), B?.props?.onClick?.(t);
+		},
+		children: B?.props?.children || B?.text || Me || x?.Drawer?.okText
+	})] }), X = he(() => {
+		let e = F?.();
+		return le(e) || d();
+	}, [F]), Z = !ee && X() === d();
+	function We() {
+		if (A && i(q) && W.current) {
 			let e = +window.getComputedStyle(W.current, null)?.zIndex;
-			n(e) || Fe(e + 1);
+			n(e) || Ue(e + 1);
 		}
-	}, Z;
-	if (k !== null) {
-		let t = O !== null && /* @__PURE__ */ p("div", {
-			className: `${J}-header-title`,
-			children: O
-		});
-		Z = /* @__PURE__ */ p("div", {
-			className: `${J}-header`,
-			style: E,
-			children: e(k) ? k(t) : k || t
-		});
 	}
-	let Q = /* @__PURE__ */ m("div", {
-		className: `${J}-scroll`,
-		tabIndex: -1,
-		children: [
-			Z,
-			Oe && (V === void 0 ? /* @__PURE__ */ p(ae, {
-				prefix: J,
-				onClick: T.onCancel,
-				className: `${J}-close-icon`,
-				children: /* @__PURE__ */ p(ge, {})
-			}) : /* @__PURE__ */ p("span", {
-				onClick: T.onCancel,
-				className: `${J}-close-icon`,
-				children: V
-			})),
-			/* @__PURE__ */ p("div", {
-				ref: (e) => {
-					K.current = e, Le();
-				},
-				style: D,
-				className: r(`${J}-content`, {
-					[`${J}-content-nofooter`]: A === null,
-					[`${J}-content-noheader`]: O === null
-				}),
-				children: /* @__PURE__ */ p(a, {
-					...b,
-					childrenName: "Drawer",
-					zIndex: q || 1050,
-					getPopupContainer: (t) => e(z) ? z(t) : K.current,
-					children: xe
-				})
-			}),
-			A !== null && /* @__PURE__ */ p("div", {
-				className: `${J}-footer`,
-				children: e(A) ? A(Y) : A || Y
-			})
-		]
-	});
-	Q = /* @__PURE__ */ p("div", {
-		ref: G,
-		style: Object.assign(j === _ || j === v ? { width: Ee } : { height: De }, { [j]: 0 }, ye),
-		className: r(w?.Drawer?.className, J, be, { [`${J}-rtl`]: ve }),
-		children: /* @__PURE__ */ p("div", {
-			className: `${J}-inner`,
-			children: /* @__PURE__ */ p(a, {
+	function Ge(e) {
+		if (e ||= G.current, t(e)) {
+			let n = e.parentNode || W.current;
+			t(n) && (n.style.display = "block");
+		}
+		$(!1), console.log("onEnter", e);
+	}
+	function Ke(e) {
+		t(e), console.log("onEntering", e);
+	}
+	function qe(t) {
+		e(N) && N(), console.log("onEntered", t);
+	}
+	function Je(e) {
+		console.log("onExit", e);
+	}
+	function Ye(e) {
+		console.log("onExiting", e);
+	}
+	function Xe(n) {
+		if (n ||= G.current, t(n)) {
+			let e = n.parentNode || W.current;
+			t(e) && (e.style.display = "none");
+		}
+		$(!0), e(P) && P(), console.log("onExited", n);
+	}
+	de(X, { hidden: !!(A && k) }), l(() => {
+		A && re(d(), W.current) && W.current?.focus?.();
+	}, [A]), ve(() => () => {}, []), l(() => () => {}, []), _e(y, () => ({ getRootElement() {
+		return W.current;
+	} }));
+	let Q = !r(T) && /* @__PURE__ */ f("div", {
+		className: `${J}-header-title`,
+		children: T
+	}), { element: Ze, setExited: $ } = fe({
+		element: /* @__PURE__ */ f(me, {
+			forceRender: !j,
+			visible: A,
+			getContainer: F,
+			children: /* @__PURE__ */ f(ce, {
 				...b,
+				childrenName: m,
+				zIndex: q || 1050,
 				effectGlobalModal: !1,
 				effectGlobalNotice: !1,
-				childrenName: "Drawer",
-				zIndex: q || 1050,
-				children: Q
+				getPopupContainer: (t) => e(I) ? I(t) : K.current,
+				children: /* @__PURE__ */ p("div", {
+					...ae(He, ["onCancel", "onOk"]),
+					ref: W,
+					style: Z ? {
+						position: "fixed",
+						zIndex: U
+					} : {
+						position: "absolute",
+						zIndex: U || "inherit"
+					},
+					className: a(`${J}-wrapper`, { [`${J}-no-mask`]: !k }, Oe, !A && C?.("display-none")),
+					onKeyDown: (t) => {
+						if (t.key === te.key && ze && A) {
+							let n = H;
+							e(n) && n(t);
+						}
+					},
+					children: [!!k && /* @__PURE__ */ f(pe, {
+						style: ke,
+						className: `${J}-mask`,
+						visible: A,
+						mountOnEnter: j,
+						unmountOnExit: M,
+						duration: s,
+						onClick: (t) => {
+							if (Le) {
+								let n = H;
+								e(n) && n(t);
+							}
+						}
+					}), /* @__PURE__ */ f(se, {
+						in: A,
+						appear: !0,
+						duration: s,
+						classNames: {
+							[h]: `${S}-slide-${h}`,
+							[g]: `${S}-slide-${g}`,
+							[_]: `${S}-slide-${_}`,
+							[v]: `${S}-slide-${v}`
+						}[O],
+						mountOnEnter: j,
+						unmountOnExit: M,
+						onEnter: Ge,
+						onEntering: Ke,
+						onEntered: qe,
+						onExit: Je,
+						onExiting: Ye,
+						onExited: Xe,
+						refElement: G,
+						children: /* @__PURE__ */ f("div", {
+							ref: G,
+							style: Object.assign(O === _ || O === v ? { width: Pe } : { height: Fe }, { [O]: 0 }, Te),
+							className: a(w?.Drawer?.className, J, Ee, { [`${J}-rtl`]: Ce }),
+							children: /* @__PURE__ */ f("div", {
+								className: `${J}-inner`,
+								children: /* @__PURE__ */ p("div", {
+									className: `${J}-scroll`,
+									tabIndex: -1,
+									children: [
+										!r(E) && /* @__PURE__ */ f("div", {
+											className: `${J}-header`,
+											style: Ae,
+											children: e(E) ? E(Q) : E || Q
+										}),
+										Ie && (i(z) ? /* @__PURE__ */ f(oe, {
+											prefix: J,
+											onClick: H,
+											className: `${J}-close-icon`,
+											children: /* @__PURE__ */ f(xe, {})
+										}) : /* @__PURE__ */ f("span", {
+											onClick: H,
+											className: `${J}-close-icon`,
+											children: z
+										})),
+										/* @__PURE__ */ f("div", {
+											ref: (e) => {
+												K.current = e, We();
+											},
+											style: je,
+											className: a(`${J}-content`, {
+												[`${J}-content-nofooter`]: r(D),
+												[`${J}-content-noheader`]: r(T)
+											}),
+											children: De
+										}),
+										!r(D) && /* @__PURE__ */ f("div", {
+											className: `${J}-footer`,
+											children: e(D) ? D(Y) : D || Y
+										})
+									]
+								})
+							})
+						})
+					})]
+				})
 			})
-		})
-	}), Q = /* @__PURE__ */ p(he, {
-		in: N,
-		appear: !0,
-		duration: 400,
-		classNames: {
-			[h]: `${S}-slide-${h}`,
-			[g]: `${S}-slide-${g}`,
-			[_]: `${S}-slide-${_}`,
-			[v]: `${S}-slide-${v}`
-		}[j],
-		mountOnEnter: P,
-		unmountOnExit: F,
-		onEnter: (e) => {
-			if (e ||= G.current, t(e)) {
-				let n = e.parentNode || W.current;
-				t(n) && (n.style.display = "block");
-			}
-			$(!1);
-		},
-		onEntering: () => {},
-		onEntered: () => {
-			e(I) && I();
-		},
-		onExit: () => {},
-		onExiting: () => {},
-		onExited: (n) => {
-			if (n ||= G.current, t(n)) {
-				let e = n.parentNode || W.current;
-				t(e) && (e.style.display = "none");
-			}
-			$(!0), e(L) && L();
-		},
-		refElement: G,
-		children: Q
-	}), Q = /* @__PURE__ */ p(de, {
-		forceRender: !P,
-		visible: N,
-		getContainer: R,
-		children: /* @__PURE__ */ m("div", {
-			...ie(Pe, ["onCancel", "onOk"]),
-			ref: W,
-			style: Ie ? {
-				position: "fixed",
-				zIndex: B
-			} : {
-				zIndex: B || "inherit",
-				position: "absolute"
-			},
-			className: r(`${J}-wrapper`, { [`${J}-no-mask`]: !M }, Se, !N && C?.("display-none")),
-			onKeyDown: (e) => {
-				e.key === te.key && je && N && T.onCancel?.(e);
-			},
-			children: [!!M && /* @__PURE__ */ p(ue, {
-				style: Ce,
-				className: `${J}-mask`,
-				visible: N,
-				mountOnEnter: P,
-				unmountOnExit: F,
-				duration: 400,
-				onClick: (e) => {
-					ke && T.onCancel?.(e);
-				}
-			}), Q]
-		})
-	});
-	let { element: Re, setExited: $ } = le({
-		element: Q,
-		visible: N,
-		mountOnEnter: P,
-		unmountOnExit: F
+		}),
+		visible: A,
+		mountOnEnter: j,
+		unmountOnExit: M
 	});
-	return Re;
+	return Ze;
 }
-var b = s.forwardRef(y);
-b.displayName = "Drawer";
+var b = c(y);
+b.displayName = m;
 //#endregion
 export { b as default };
 /* 独立思考，明辨是非 */

package/drawer/index.js

@@ -1,4 +1,4 @@
-/* 潘启宝 2026-04-14 16:51:07 星期二 */
+/* 潘启宝 2026-05-08 09:13:14 星期五 */
 import e from "./Drawer.js";
 //#region components/pc/drawer/index.tsx
 var t = Object.assign(e, {});

package/drawer/interface.d.ts

@@ -1,12 +1,12 @@
-import { CSSProperties, MouseEvent, ReactNode } from 'react';
+import { CSSProperties, ReactNode } from 'react';
 import type { ButtonProps } from '../button';
 import type { GetPopupContainer } from '../interface';
 /**
  * @title Drawer
  */
-export interface DrawerProps extends GetPopupContainer {
+export interface DrawerProps extends GetPopupContainer, Pick<CSSProperties, 'zIndex'> {
     style?: CSSProperties;
-    className?: string | string[];
+    className?: string;
     /**
      * @zh 设置抽屉的 zIndex
      * @en Set the zIndex of the drawer
@@ -150,12 +150,12 @@ export interface DrawerProps extends GetPopupContainer {
      * @zh 点击确认按钮的回调
      * @en Callback when the OK button is clicked
      */
-    onOk?: (e: Event) => void;
+    onOk?: (e?: React.MouseEvent) => void;
     /**
      * @zh 关闭弹出框的回调
      * @en Callback when the Cancel button is clicked
      */
-    onCancel?: (e: MouseEvent | Event) => void;
+    onCancel?: (e?: React.MouseEvent | React.KeyboardEvent) => void;
     /**
      * @zh 抽屉打开之后的回调
      * @en Callback when drawer is opened

package/dropdown/Button.js

@@ -1,57 +1,58 @@
-/* 潘启宝 2026-04-14 16:51:07 星期二 */
+/* 潘启宝 2026-05-08 09:13:14 星期五 */
 import { pickDataAttributes as e } from "../utils/pick.js";
 import t from "../hooks/use-merge-props/index.js";
 import n from "../config-provider/context.js";
 import "../config-provider/index.js";
-import r from "../button/index.js";
-import i from "./Dropdown.js";
-import { forwardRef as a, useContext as o } from "react";
-import { jsx as s, jsxs as c } from "react/jsx-runtime";
-import l from "@unicom-cloud/icons/IconUiMore";
+import r from "../button/Group.js";
+import i from "../button/index.js";
+import a from "./Dropdown.js";
+import { forwardRef as o, useContext as s } from "react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import u from "@unicom-cloud/icons/IconUiMore";
 //#region components/pc/dropdown/Button.tsx
-var u = {
+var d = {
 	position: "br",
 	trigger: "hover",
 	type: "default",
-	icon: /* @__PURE__ */ s(l, {}),
+	icon: /* @__PURE__ */ c(u, {}),
 	unmountOnExit: !0
 };
-function d(a, d) {
-	let { prefixCls: f, componentConfig: p } = o(n), m = t(a, u, p?.DropdownButton), { className: h, style: g, children: _, disabled: v, position: y = "br", type: b = "default", size: x, icon: S = /* @__PURE__ */ s(l, {}), onClick: C, buttonProps: w, rightButtonProps: T, buttonsRender: E, ...D } = m, O = /* @__PURE__ */ s(r, {
-		disabled: v,
-		type: b,
-		size: x,
-		onClick: C,
-		...w,
-		children: _
-	}), k = /* @__PURE__ */ s(r, {
-		disabled: v,
-		type: b,
-		size: x,
-		icon: S,
-		...T
+function f(o, f) {
+	let { prefixCls: p, componentConfig: m } = s(n), h = t(o, d, m?.DropdownButton), { className: g, style: _, children: v, disabled: y, position: b = "br", type: x = "default", size: S, icon: C = /* @__PURE__ */ c(u, {}), onClick: w, buttonProps: T, rightButtonProps: E, buttonsRender: D, ...O } = h, k = /* @__PURE__ */ c(i, {
+		disabled: y,
+		type: x,
+		size: S,
+		onClick: w,
+		...T,
+		children: v
+	}), A = /* @__PURE__ */ c(i, {
+		disabled: y,
+		type: x,
+		size: S,
+		icon: C,
+		...E
 	});
-	E && ([O, k] = E([O, k]));
-	let A = v || !k || k?.props?.loading;
-	return /* @__PURE__ */ c(r.Group, {
-		className: h,
-		style: g,
-		ref: d,
-		...e(m),
-		children: [O, /* @__PURE__ */ s(i, {
-			disabled: v,
-			position: y,
-			...D,
+	D && ([k, A] = D([k, A]));
+	let j = y || !A || A?.props?.loading;
+	return /* @__PURE__ */ l(r, {
+		className: g,
+		style: _,
+		ref: f,
+		...e(h),
+		children: [k, /* @__PURE__ */ c(a, {
+			disabled: y,
+			position: b,
+			...O,
 			triggerProps: {
-				disabled: A,
-				...D?.triggerProps
+				disabled: j,
+				...O?.triggerProps
 			},
-			children: k
+			children: A
 		})]
 	});
 }
-var f = a(d);
-f.displayName = "DropdownButton";
+var p = o(f);
+p.displayName = "DropdownButton";
 //#endregion
-export { f as default };
+export { p as default };
 /* 独立思考，明辨是非 */