@rockshin/tao-ui 0.0.1 → 0.0.3

package/dist/components/drawer/drawer.d.ts

@@ -1,17 +1,50 @@
-import type { ReactNode } from 'react';
+import { type ReactNode } from 'react';
 import { type SemanticClassNames, type SemanticStyles } from '../../utils/semantic';
 import './drawer.css';
 export type DrawerPlacement = 'top' | 'right' | 'bottom' | 'left';
-export type DrawerSemanticPart = 'root' | 'header' | 'title' | 'body' | 'overlay';
+export type DrawerSize = 'default' | 'large';
+export type DrawerSemanticPart = 'root' | 'overlay' | 'header' | 'title' | 'extra' | 'body' | 'footer' | 'close' | 'dragger';
+export interface DrawerResizableConfig {
+    onResize?: (size: number) => void;
+    onResizeStart?: () => void;
+    onResizeEnd?: () => void;
+}
 export interface DrawerProps {
     open: boolean;
     onClose?: () => void;
     title?: ReactNode;
+    /** Extra content rendered on the trailing side of the header. */
+    extra?: ReactNode;
+    /** Footer content; renders a bordered footer area when provided. */
+    footer?: ReactNode;
     placement?: DrawerPlacement;
+    /** Preset drawer size: `default` (378) / `large` (736). `width`/`height` override it. */
+    size?: DrawerSize;
     width?: number | string;
     height?: number | string;
+    /** Show the close (×) button. Defaults to true. */
+    closable?: boolean;
+    /** Custom close icon. */
+    closeIcon?: ReactNode;
+    /** Close when clicking the mask. Defaults to true. */
+    maskClosable?: boolean;
+    /** Render the mask/overlay. Defaults to true. */
+    mask?: boolean;
+    /** Close on Esc key. Defaults to true. */
+    keyboard?: boolean;
+    /** Allow resizing by dragging the inner edge. Pass an object for resize callbacks. */
+    resizable?: boolean | DrawerResizableConfig;
+    /** Called after open transitions in either direction. */
+    afterOpenChange?: (open: boolean) => void;
+    /** Called after the drawer has fully closed. */
+    afterClose?: () => void;
+    /**
+     * Unmount children when closed. Defaults to `true`.
+     * Set `false` to keep children mounted and preserve their state across open/close.
+     */
+    destroyOnHidden?: boolean;
     children?: ReactNode;
     classNames?: SemanticClassNames<DrawerSemanticPart>;
     styles?: SemanticStyles<DrawerSemanticPart>;
 }
-export declare function Drawer({ open, onClose, title, placement, width, height, children, classNames, styles: stylesProp, }: DrawerProps): import("react/jsx-runtime").JSX.Element;
+export declare function Drawer({ open, onClose, title, extra, footer, placement, size, width, height, closable, closeIcon, maskClosable, mask, keyboard, resizable, afterOpenChange, afterClose, destroyOnHidden, children, classNames, styles: stylesProp, }: DrawerProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/drawer/drawer.js

@@ -1,164 +1,366 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { c } from "react/compiler-runtime";
+import { useEffect, useRef, useState } from "react";
+import { TaoPortalScope } from "../../provider/tao-provider.js";
 import { cx } from "../../utils/semantic.js";
 import "./drawer.css";
 import * as __rspack_external__radix_ui_react_dialog_6b867f3d from "@radix-ui/react-dialog";
+const SIZE_PRESET = {
+    default: 378,
+    large: 736
+};
+const MIN_DRAG_SIZE = 200;
 function Drawer(t0) {
-    const $ = c(42);
-    const { open, onClose, title, placement: t1, width, height, children, classNames, styles: stylesProp } = t0;
+    const $ = c(90);
+    const { open, onClose, title, extra, footer, placement: t1, size, width, height, closable: t2, closeIcon, maskClosable: t3, mask: t4, keyboard: t5, resizable, afterOpenChange, afterClose, destroyOnHidden: t6, children, classNames, styles: stylesProp } = t0;
     const placement = void 0 === t1 ? "right" : t1;
+    const closable = void 0 === t2 ? true : t2;
+    const maskClosable = void 0 === t3 ? true : t3;
+    const mask = void 0 === t4 ? true : t4;
+    const keyboard = void 0 === t5 ? true : t5;
+    const destroyOnHidden = void 0 === t6 ? true : t6;
+    const prevOpen = useRef(open);
+    let t7;
+    let t8;
+    if ($[0] !== afterClose || $[1] !== afterOpenChange || $[2] !== open) {
+        t7 = ()=>{
+            if (prevOpen.current !== open) {
+                afterOpenChange?.(open);
+                if (!open) afterClose?.();
+                prevOpen.current = open;
+            }
+        };
+        t8 = [
+            open,
+            afterOpenChange,
+            afterClose
+        ];
+        $[0] = afterClose;
+        $[1] = afterOpenChange;
+        $[2] = open;
+        $[3] = t7;
+        $[4] = t8;
+    } else {
+        t7 = $[3];
+        t8 = $[4];
+    }
+    useEffect(t7, t8);
     const isHorizontal = "left" === placement || "right" === placement;
+    const sizePx = size ? SIZE_PRESET[size] : void 0;
+    const resizeCfg = "object" == typeof resizable ? resizable : void 0;
+    const isResizable = !!resizable;
+    const contentRef = useRef(null);
+    const dragRef = useRef(null);
+    const [drag, setDrag] = useState(null);
+    const dragSize = drag && drag.horizontal === isHorizontal ? drag.size : null;
+    let t9;
+    if ($[5] !== isHorizontal || $[6] !== resizeCfg) {
+        t9 = (e)=>{
+            const el = contentRef.current;
+            if (!el) return;
+            e.preventDefault();
+            e.currentTarget.setPointerCapture(e.pointerId);
+            const rect = el.getBoundingClientRect();
+            dragRef.current = {
+                startPos: isHorizontal ? e.clientX : e.clientY,
+                startSize: isHorizontal ? rect.width : rect.height
+            };
+            resizeCfg?.onResizeStart?.();
+        };
+        $[5] = isHorizontal;
+        $[6] = resizeCfg;
+        $[7] = t9;
+    } else t9 = $[7];
+    const onDraggerPointerDown = t9;
+    let t10;
+    if ($[8] !== isHorizontal || $[9] !== placement || $[10] !== resizeCfg) {
+        t10 = (e_0)=>{
+            const dragStart = dragRef.current;
+            if (!dragStart) return;
+            const pos = isHorizontal ? e_0.clientX : e_0.clientY;
+            let delta = pos - dragStart.startPos;
+            if ("right" === placement || "bottom" === placement) delta = -delta;
+            const max = isHorizontal ? window.innerWidth : window.innerHeight;
+            const next = Math.max(MIN_DRAG_SIZE, Math.min(dragStart.startSize + delta, max));
+            setDrag({
+                horizontal: isHorizontal,
+                size: next
+            });
+            resizeCfg?.onResize?.(next);
+        };
+        $[8] = isHorizontal;
+        $[9] = placement;
+        $[10] = resizeCfg;
+        $[11] = t10;
+    } else t10 = $[11];
+    const onDraggerPointerMove = t10;
+    let t11;
+    if ($[12] !== resizeCfg) {
+        t11 = (e_1)=>{
+            if (!dragRef.current) return;
+            dragRef.current = null;
+            e_1.currentTarget.releasePointerCapture?.(e_1.pointerId);
+            resizeCfg?.onResizeEnd?.();
+        };
+        $[12] = resizeCfg;
+        $[13] = t11;
+    } else t11 = $[13];
+    const onDraggerPointerUp = t11;
+    const t12 = stylesProp?.root;
     let contentStyle;
-    if ($[0] !== height || $[1] !== isHorizontal || $[2] !== width) {
-        contentStyle = {};
-        if (isHorizontal && null != width) contentStyle.width = "number" == typeof width ? `${width}px` : width;
-        if (!isHorizontal && null != height) contentStyle.height = "number" == typeof height ? `${height}px` : height;
-        $[0] = height;
-        $[1] = isHorizontal;
-        $[2] = width;
-        $[3] = contentStyle;
-    } else contentStyle = $[3];
-    let t2;
-    if ($[4] !== onClose) {
-        t2 = (v)=>{
+    if ($[14] !== dragSize || $[15] !== height || $[16] !== isHorizontal || $[17] !== sizePx || $[18] !== t12 || $[19] !== width) {
+        contentStyle = {
+            ...t12
+        };
+        if (isHorizontal) {
+            const w = dragSize ?? width ?? sizePx;
+            if (null != w) contentStyle.width = "number" == typeof w ? `${w}px` : w;
+        } else {
+            const h = dragSize ?? height ?? sizePx;
+            if (null != h) contentStyle.height = "number" == typeof h ? `${h}px` : h;
+        }
+        $[14] = dragSize;
+        $[15] = height;
+        $[16] = isHorizontal;
+        $[17] = sizePx;
+        $[18] = t12;
+        $[19] = width;
+        $[20] = contentStyle;
+    } else contentStyle = $[20];
+    const keepAlive = !destroyOnHidden;
+    const forceMount = keepAlive ? true : void 0;
+    const showHeader = null != title || null != extra || closable;
+    let t13;
+    if ($[21] !== onClose) {
+        t13 = (v)=>{
             if (!v) onClose?.();
         };
-        $[4] = onClose;
-        $[5] = t2;
-    } else t2 = $[5];
-    const t3 = classNames?.overlay;
-    let t4;
-    if ($[6] !== t3) {
-        t4 = cx(t3);
-        $[6] = t3;
-        $[7] = t4;
-    } else t4 = $[7];
-    const t5 = stylesProp?.overlay;
-    let t6;
-    if ($[8] !== t4 || $[9] !== t5) {
-        t6 = /*#__PURE__*/ jsx(__rspack_external__radix_ui_react_dialog_6b867f3d.Overlay, {
+        $[21] = onClose;
+        $[22] = t13;
+    } else t13 = $[22];
+    let t14;
+    if ($[23] !== classNames?.overlay || $[24] !== forceMount || $[25] !== mask || $[26] !== stylesProp?.overlay) {
+        t14 = mask && /*#__PURE__*/ jsx(__rspack_external__radix_ui_react_dialog_6b867f3d.Overlay, {
+            forceMount: forceMount,
             "data-tao-drawer-overlay": "",
-            className: t4,
-            style: t5
+            className: cx(classNames?.overlay),
+            style: stylesProp?.overlay
         });
-        $[8] = t4;
-        $[9] = t5;
-        $[10] = t6;
-    } else t6 = $[10];
-    const t7 = stylesProp?.root;
-    let t8;
-    if ($[11] !== contentStyle || $[12] !== t7) {
-        t8 = {
-            ...contentStyle,
-            ...t7
+        $[23] = classNames?.overlay;
+        $[24] = forceMount;
+        $[25] = mask;
+        $[26] = stylesProp?.overlay;
+        $[27] = t14;
+    } else t14 = $[27];
+    const t15 = classNames?.root;
+    let t16;
+    if ($[28] !== t15) {
+        t16 = cx(t15);
+        $[28] = t15;
+        $[29] = t16;
+    } else t16 = $[29];
+    let t17;
+    if ($[30] !== keyboard) {
+        t17 = (e_2)=>{
+            if (!keyboard) e_2.preventDefault();
         };
-        $[11] = contentStyle;
-        $[12] = t7;
-        $[13] = t8;
-    } else t8 = $[13];
-    const t9 = classNames?.root;
-    let t10;
-    if ($[14] !== t9) {
-        t10 = cx(t9);
-        $[14] = t9;
-        $[15] = t10;
-    } else t10 = $[15];
-    let t11;
-    if ($[16] !== classNames?.header || $[17] !== classNames?.title || $[18] !== onClose || $[19] !== stylesProp?.header || $[20] !== stylesProp?.title || $[21] !== title) {
-        t11 = (null != title || null != onClose) && /*#__PURE__*/ jsxs("div", {
+        $[30] = keyboard;
+        $[31] = t17;
+    } else t17 = $[31];
+    let t18;
+    let t19;
+    if ($[32] !== maskClosable) {
+        t18 = (e_3)=>{
+            if (!maskClosable) e_3.preventDefault();
+        };
+        t19 = (e_4)=>{
+            if (!maskClosable) e_4.preventDefault();
+        };
+        $[32] = maskClosable;
+        $[33] = t18;
+        $[34] = t19;
+    } else {
+        t18 = $[33];
+        t19 = $[34];
+    }
+    let t20;
+    if ($[35] !== classNames?.dragger || $[36] !== isResizable || $[37] !== onDraggerPointerDown || $[38] !== onDraggerPointerMove || $[39] !== onDraggerPointerUp || $[40] !== placement || $[41] !== stylesProp?.dragger) {
+        t20 = isResizable && /*#__PURE__*/ jsx("div", {
+            "data-tao-drawer-dragger": "",
+            "data-tao-placement": placement,
+            className: cx(classNames?.dragger),
+            style: stylesProp?.dragger,
+            onPointerDown: onDraggerPointerDown,
+            onPointerMove: onDraggerPointerMove,
+            onPointerUp: onDraggerPointerUp
+        });
+        $[35] = classNames?.dragger;
+        $[36] = isResizable;
+        $[37] = onDraggerPointerDown;
+        $[38] = onDraggerPointerMove;
+        $[39] = onDraggerPointerUp;
+        $[40] = placement;
+        $[41] = stylesProp?.dragger;
+        $[42] = t20;
+    } else t20 = $[42];
+    let t21;
+    if ($[43] !== classNames?.close || $[44] !== classNames?.extra || $[45] !== classNames?.header || $[46] !== classNames?.title || $[47] !== closable || $[48] !== closeIcon || $[49] !== extra || $[50] !== onClose || $[51] !== showHeader || $[52] !== stylesProp?.close || $[53] !== stylesProp?.extra || $[54] !== stylesProp?.header || $[55] !== stylesProp?.title || $[56] !== title) {
+        t21 = showHeader && /*#__PURE__*/ jsxs("div", {
             "data-tao-drawer-header": "",
             className: cx(classNames?.header),
             style: stylesProp?.header,
             children: [
-                null != title && /*#__PURE__*/ jsx(__rspack_external__radix_ui_react_dialog_6b867f3d.Title, {
+                null != title ? /*#__PURE__*/ jsx(__rspack_external__radix_ui_react_dialog_6b867f3d.Title, {
                     "data-tao-drawer-title": "",
                     className: cx(classNames?.title),
                     style: stylesProp?.title,
                     children: title
+                }) : /*#__PURE__*/ jsx(__rspack_external__radix_ui_react_dialog_6b867f3d.Title, {
+                    "data-tao-drawer-title": "",
+                    style: {
+                        display: "none"
+                    }
                 }),
-                null != onClose && /*#__PURE__*/ jsx("button", {
-                    type: "button",
-                    "data-tao-drawer-close": "",
-                    onClick: onClose,
-                    "aria-label": "Close",
-                    children: /*#__PURE__*/ jsx(CloseIcon, {})
+                /*#__PURE__*/ jsxs("div", {
+                    "data-tao-drawer-actions": "",
+                    children: [
+                        null != extra && /*#__PURE__*/ jsx("div", {
+                            "data-tao-drawer-extra": "",
+                            className: cx(classNames?.extra),
+                            style: stylesProp?.extra,
+                            children: extra
+                        }),
+                        closable && /*#__PURE__*/ jsx("button", {
+                            type: "button",
+                            "data-tao-drawer-close": "",
+                            className: cx(classNames?.close),
+                            style: stylesProp?.close,
+                            onClick: onClose,
+                            "aria-label": "Close",
+                            children: closeIcon ?? /*#__PURE__*/ jsx(CloseIcon, {})
+                        })
+                    ]
                 })
             ]
         });
-        $[16] = classNames?.header;
-        $[17] = classNames?.title;
-        $[18] = onClose;
-        $[19] = stylesProp?.header;
-        $[20] = stylesProp?.title;
-        $[21] = title;
-        $[22] = t11;
-    } else t11 = $[22];
-    const t12 = classNames?.body;
-    let t13;
-    if ($[23] !== t12) {
-        t13 = cx(t12);
-        $[23] = t12;
-        $[24] = t13;
-    } else t13 = $[24];
-    const t14 = stylesProp?.body;
-    let t15;
-    if ($[25] !== children || $[26] !== t13 || $[27] !== t14) {
-        t15 = /*#__PURE__*/ jsx("div", {
+        $[43] = classNames?.close;
+        $[44] = classNames?.extra;
+        $[45] = classNames?.header;
+        $[46] = classNames?.title;
+        $[47] = closable;
+        $[48] = closeIcon;
+        $[49] = extra;
+        $[50] = onClose;
+        $[51] = showHeader;
+        $[52] = stylesProp?.close;
+        $[53] = stylesProp?.extra;
+        $[54] = stylesProp?.header;
+        $[55] = stylesProp?.title;
+        $[56] = title;
+        $[57] = t21;
+    } else t21 = $[57];
+    const t22 = classNames?.body;
+    let t23;
+    if ($[58] !== t22) {
+        t23 = cx(t22);
+        $[58] = t22;
+        $[59] = t23;
+    } else t23 = $[59];
+    const t24 = stylesProp?.body;
+    let t25;
+    if ($[60] !== children || $[61] !== t23 || $[62] !== t24) {
+        t25 = /*#__PURE__*/ jsx("div", {
             "data-tao-drawer-body": "",
-            className: t13,
-            style: t14,
+            className: t23,
+            style: t24,
             children: children
         });
-        $[25] = children;
-        $[26] = t13;
-        $[27] = t14;
-        $[28] = t15;
-    } else t15 = $[28];
-    let t16;
-    if ($[29] !== placement || $[30] !== t10 || $[31] !== t11 || $[32] !== t15 || $[33] !== t8) {
-        t16 = /*#__PURE__*/ jsxs(__rspack_external__radix_ui_react_dialog_6b867f3d.Content, {
+        $[60] = children;
+        $[61] = t23;
+        $[62] = t24;
+        $[63] = t25;
+    } else t25 = $[63];
+    let t26;
+    if ($[64] !== classNames?.footer || $[65] !== footer || $[66] !== stylesProp?.footer) {
+        t26 = null != footer && /*#__PURE__*/ jsx("div", {
+            "data-tao-drawer-footer": "",
+            className: cx(classNames?.footer),
+            style: stylesProp?.footer,
+            children: footer
+        });
+        $[64] = classNames?.footer;
+        $[65] = footer;
+        $[66] = stylesProp?.footer;
+        $[67] = t26;
+    } else t26 = $[67];
+    let t27;
+    if ($[68] !== contentStyle || $[69] !== forceMount || $[70] !== placement || $[71] !== t16 || $[72] !== t17 || $[73] !== t18 || $[74] !== t19 || $[75] !== t20 || $[76] !== t21 || $[77] !== t25 || $[78] !== t26) {
+        t27 = /*#__PURE__*/ jsxs(__rspack_external__radix_ui_react_dialog_6b867f3d.Content, {
+            ref: contentRef,
+            forceMount: forceMount,
             "data-tao-drawer": "",
             "data-tao-placement": placement,
-            style: t8,
-            className: t10,
+            style: contentStyle,
+            className: t16,
             "aria-describedby": void 0,
+            onEscapeKeyDown: t17,
+            onPointerDownOutside: t18,
+            onInteractOutside: t19,
             children: [
-                t11,
-                t15
+                t20,
+                t21,
+                t25,
+                t26
             ]
         });
-        $[29] = placement;
-        $[30] = t10;
-        $[31] = t11;
-        $[32] = t15;
-        $[33] = t8;
-        $[34] = t16;
-    } else t16 = $[34];
-    let t17;
-    if ($[35] !== t16 || $[36] !== t6) {
-        t17 = /*#__PURE__*/ jsxs(__rspack_external__radix_ui_react_dialog_6b867f3d.Portal, {
+        $[68] = contentStyle;
+        $[69] = forceMount;
+        $[70] = placement;
+        $[71] = t16;
+        $[72] = t17;
+        $[73] = t18;
+        $[74] = t19;
+        $[75] = t20;
+        $[76] = t21;
+        $[77] = t25;
+        $[78] = t26;
+        $[79] = t27;
+    } else t27 = $[79];
+    let t28;
+    if ($[80] !== t14 || $[81] !== t27) {
+        t28 = /*#__PURE__*/ jsxs(TaoPortalScope, {
             children: [
-                t6,
-                t16
+                t14,
+                t27
             ]
         });
-        $[35] = t16;
-        $[36] = t6;
-        $[37] = t17;
-    } else t17 = $[37];
-    let t18;
-    if ($[38] !== open || $[39] !== t17 || $[40] !== t2) {
-        t18 = /*#__PURE__*/ jsx(__rspack_external__radix_ui_react_dialog_6b867f3d.Root, {
+        $[80] = t14;
+        $[81] = t27;
+        $[82] = t28;
+    } else t28 = $[82];
+    let t29;
+    if ($[83] !== forceMount || $[84] !== t28) {
+        t29 = /*#__PURE__*/ jsx(__rspack_external__radix_ui_react_dialog_6b867f3d.Portal, {
+            forceMount: forceMount,
+            children: t28
+        });
+        $[83] = forceMount;
+        $[84] = t28;
+        $[85] = t29;
+    } else t29 = $[85];
+    let t30;
+    if ($[86] !== open || $[87] !== t13 || $[88] !== t29) {
+        t30 = /*#__PURE__*/ jsx(__rspack_external__radix_ui_react_dialog_6b867f3d.Root, {
             open: open,
-            onOpenChange: t2,
-            children: t17
+            onOpenChange: t13,
+            children: t29
         });
-        $[38] = open;
-        $[39] = t17;
-        $[40] = t2;
-        $[41] = t18;
-    } else t18 = $[41];
-    return t18;
+        $[86] = open;
+        $[87] = t13;
+        $[88] = t29;
+        $[89] = t30;
+    } else t30 = $[89];
+    return t30;
 }
 function CloseIcon() {
     const $ = c(1);