@canlooks/can-ui 0.0.82 → 0.0.84

package/dist/cjs/components/curd/curd.d.ts

@@ -87,7 +87,7 @@ export interface CurdBaseProps<R extends RowType = RowType, F extends FormValue
     onDelete?(row: R): any;
     /** 行数据转换为表单值的方法，若不指定，行数据会直接填入表单 */
     rowToForm?(row: R): F | Promise<F>;
-    dialogProps?: CurdDialogProps<R, F>;
+    dialogProps?: Partial<CurdDialogProps<R, F>>;
     formProps?: FormProps<F>;
     formRef?: Ref<FormRef<F>>;
 }

package/dist/cjs/components/dialog/dialog.d.ts

@@ -25,12 +25,18 @@ export interface DialogProps extends Omit<ModalProps, 'title' | 'prefix'> {
     cancelText?: ReactNode;
     cancelProps?: ButtonProps;
     onCancel?(e: React.MouseEvent<HTMLButtonElement | HTMLDivElement> | KeyboardEvent): void;
+    /**
+     * 滚动的行为，默认为`card`
+     * @enum 'card' 卡片内部滚动
+     * @enum 'body' 对话框整体滚动
+     */
+    scrollBehavior?: 'card' | 'body';
     draggable?: boolean;
-    /** 是否可通过点击遮罩层关闭对话框，默认为true */
+    /** 是否可通过点击遮罩层关闭对话框，默认为`true` */
     maskClosable?: boolean;
-    /** 是否可通过键盘的【ESC】键关闭对话框，默认为true */
+    /** 是否可通过键盘的【ESC】键关闭对话框，默认为`true` */
     escapeClosable?: boolean;
     defaultOpen?: boolean;
     onClose?(closeReason: DialogCloseReason): void;
 }
-export declare function Dialog({ icon, title, footer, prefix, suffix, width, minWidth, maxWidth, showClose, closeProps, showConfirm, confirmText, confirmProps, onConfirm, confirmLoading, showCancel, cancelText, cancelProps, onCancel, draggable, maskClosable, escapeClosable, defaultOpen, open, onClose, ...props }: DialogProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function Dialog({ icon, title, footer, prefix, suffix, width, minWidth, maxWidth, showClose, closeProps, showConfirm, confirmText, confirmProps, onConfirm, confirmLoading, showCancel, cancelText, cancelProps, onCancel, scrollBehavior, draggable, maskClosable, escapeClosable, defaultOpen, open, onClose, ...props }: DialogProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/cjs/components/dialog/dialog.js

@@ -10,7 +10,7 @@ const button_1 = require("../button");
 const draggable_1 = require("../draggable");
 const icon_1 = require("../icon");
 const faXmark_1 = require("@fortawesome/free-solid-svg-icons/faXmark");
-function Dialog({ icon, title, footer, prefix, suffix, width = 420, minWidth, maxWidth = '100%', showClose = true, closeProps, showConfirm = true, confirmText = '确 定', confirmProps, onConfirm, confirmLoading = false, showCancel = true, cancelText = '取 消', cancelProps, onCancel, draggable = true, maskClosable = true, escapeClosable = true, defaultOpen = false, open, onClose, ...props }) {
+function Dialog({ icon, title, footer, prefix, suffix, width = 420, minWidth, maxWidth = '100%', showClose = true, closeProps, showConfirm = true, confirmText = '确 定', confirmProps, onConfirm, confirmLoading = false, showCancel = true, cancelText = '取 消', cancelProps, onCancel, scrollBehavior = 'card', draggable = true, maskClosable = true, escapeClosable = true, defaultOpen = false, open, onClose, ...props }) {
     const [innerOpen, _setInnerOpen] = (0, utils_1.useControlled)(defaultOpen, open);
     const close = (closeReason) => {
         if (!innerLoading.current || closeReason === 'confirmed') {
@@ -81,7 +81,7 @@ function Dialog({ icon, title, footer, prefix, suffix, width = 420, minWidth, ma
         }
         return footer;
     };
-    return ((0, jsx_runtime_1.jsx)(modal_1.Modal, { ...props, ref: (0, utils_1.cloneRef)(overlayRef, props.ref), css: dialog_style_1.style, className: (0, utils_1.clsx)(dialog_style_1.classes.root, props.className), open: innerOpen.current, onMaskClick: onMaskClick, "data-draggable": draggable, children: (0, jsx_runtime_1.jsx)(draggable_1.Draggable, { container: () => overlayRef.current, children: (targetProps, handleProps) => (0, jsx_runtime_1.jsxs)("div", { className: dialog_style_1.classes.card, ...targetProps, style: { width, minWidth, maxWidth, ...targetProps.style }, children: [!!icon &&
+    return ((0, jsx_runtime_1.jsx)(modal_1.Modal, { ...props, ref: (0, utils_1.cloneRef)(overlayRef, props.ref), css: dialog_style_1.style, className: (0, utils_1.clsx)(dialog_style_1.classes.root, props.className), open: innerOpen.current, onMaskClick: onMaskClick, "data-scroll-behavior": scrollBehavior, "data-draggable": draggable, children: (0, jsx_runtime_1.jsx)(draggable_1.Draggable, { container: () => overlayRef.current, children: (targetProps, handleProps) => (0, jsx_runtime_1.jsxs)("div", { className: dialog_style_1.classes.card, ...targetProps, style: { width, minWidth, maxWidth, ...targetProps.style }, children: [!!icon &&
                         (0, jsx_runtime_1.jsx)("div", { className: dialog_style_1.classes.icon, children: icon }), (0, jsx_runtime_1.jsxs)("div", { className: dialog_style_1.classes.content, children: [!!(title || showClose) &&
                                 (0, jsx_runtime_1.jsxs)("div", { className: dialog_style_1.classes.titleRow, ...handleProps, children: [(0, jsx_runtime_1.jsx)("div", { className: dialog_style_1.classes.title, children: title }), showClose &&
                                             (0, jsx_runtime_1.jsx)(button_1.Button, { shape: "circular", variant: "text", color: "text.secondary", ...closeProps, className: (0, utils_1.clsx)(dialog_style_1.classes.close, closeProps?.className), onClick: closeHandler, children: (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faXmark_1.faXmark }) })] }), (0, jsx_runtime_1.jsxs)("div", { ref: bodyRef, className: dialog_style_1.classes.body, onScroll: onScroll, children: [!!prefix &&

package/dist/cjs/components/dialog/dialog.style.js

@@ -3,6 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.style = exports.classes = void 0;
 const react_1 = require("@emotion/react");
 const utils_1 = require("../../utils");
+const modal_style_1 = require("../modal/modal.style");
+const overlayBase_style_1 = require("../overlayBase/overlayBase.style");
 exports.classes = (0, utils_1.defineInnerClasses)('dialog', [
     'card',
     'icon',
@@ -18,13 +20,36 @@ exports.classes = (0, utils_1.defineInnerClasses)('dialog', [
 ]);
 exports.style = (0, utils_1.defineCss)(({ background, borderRadius, boxShadow, spacing, colors, divider }) => (0, react_1.css) `
     .${exports.classes.card} {
-        max-height: 100%;
         display: flex;
         background-color: ${background.content};
         border-radius: ${borderRadius}px;
         box-shadow: ${boxShadow[0]};
     }
 
+    .${modal_style_1.classes.childrenWrap} {
+        padding: 40px;
+    }
+
+    &[data-scroll-behavior=card] {
+        .${modal_style_1.classes.childrenWrap} {
+            height: 100%;
+        }
+        
+        .${exports.classes.card} {
+            max-height: 100%;
+        }
+    }
+
+    &[data-scroll-behavior=body] {
+        .${modal_style_1.classes.modal} {
+            height: auto;
+        }
+
+        .${overlayBase_style_1.classes.childrenWrap} {
+            overflow: hidden auto;
+        }
+    }
+
     .${exports.classes.icon} {
         color: ${colors.primary.main};
         font-size: ${21 / 14}em;
@@ -51,7 +76,7 @@ exports.style = (0, utils_1.defineCss)(({ background, borderRadius, boxShadow, s
         font-size: ${16 / 14}em;
         font-weight: bold;
         margin-right: -${spacing[8]}px;
-        
+
         .${exports.classes.title} {
             flex: 1;
             padding: ${spacing[6]}px 0 ${spacing[3]}px;

package/dist/cjs/components/gallery/gallery.style.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.style = exports.classes = void 0;
 const react_1 = require("@emotion/react");
 const utils_1 = require("../../utils");
-const modal_style_1 = require("../modal/modal.style");
 exports.classes = (0, utils_1.defineInnerClasses)('image-preview', [
     'button',
     'control',
@@ -69,10 +68,6 @@ exports.style = (0, utils_1.defineCss)(({ spacing, easing, breakpoints }) => (0,
         }
     }
 
-    .${modal_style_1.classes.modal} {
-        padding: 0;
-    }
-
     .${exports.classes.galleryContainer} {
         &, .${exports.classes.galleryWrapper}, .${exports.classes.imageItem}, .${exports.classes.image} {
             width: 100%;

package/dist/cjs/components/modal/modal.js

@@ -22,5 +22,5 @@ function Modal({ modalProps, ...props }) {
     return ((0, jsx_runtime_1.jsx)(overlayBase_1.OverlayBase, { ...props, css: modal_style_1.style, className: (0, utils_1.clsx)(modal_style_1.classes.root, props.className), children: (0, jsx_runtime_1.jsx)(transitionBase_1.Grow, { timeout: overlayBase_1.overlayBaseTransitionDuration, ...modalProps, in: props.open, className: (0, utils_1.clsx)(modal_style_1.classes.modal, modalProps?.className), style: {
                 transformOrigin: transformOrigin.current,
                 ...modalProps?.style
-            }, children: props.children }) }));
+            }, children: (0, jsx_runtime_1.jsx)("div", { className: modal_style_1.classes.childrenWrap, onClick: e => e.stopPropagation(), children: props.children }) }) }));
 }

package/dist/cjs/components/modal/modal.style.d.ts

@@ -1,4 +1,5 @@
 export declare const classes: {
+    childrenWrap: string;
     modal: string;
 } & {
     root: string;

package/dist/cjs/components/modal/modal.style.js

@@ -4,20 +4,15 @@ exports.style = exports.classes = void 0;
 const react_1 = require("@emotion/react");
 const utils_1 = require("../../utils");
 exports.classes = (0, utils_1.defineInnerClasses)('modal', [
-    'modal'
+    'modal',
+    'childrenWrap'
 ]);
 exports.style = (0, react_1.css) `
     .${exports.classes.modal} {
         width: 100%;
         height: 100%;
-        padding: 40px;
-        pointer-events: none;
         display: flex;
         align-items: center;
         justify-content: center;
-
-        > * {
-            pointer-events: all;
-        }
     }
 `;

package/dist/cjs/components/overlayBase/overlayBase.js

@@ -37,11 +37,11 @@ function OverlayBase({ container, effectContainer, forceRender, open, onMaskClic
         onClosed?.();
         forceRender === false && setShouldRender(false);
     };
-    return shouldRender.current && (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsxs)("div", { ...props, css: overlayBase_style_1.style, className: (0, utils_1.clsx)(overlayBase_style_1.classes.root, props.className), "data-open": open, "data-custom-container": containerEl.current !== document.body, children: [(0, jsx_runtime_1.jsx)(transitionBase_1.Fade, { timeout: exports.overlayBaseTransitionDuration, ...(0, utils_1.mergeComponentProps)(maskProps, {
-                    in: open,
-                    className: overlayBase_style_1.classes.mask,
-                    onClick,
-                    onEntered,
-                    onExited
-                }) }), props.children] }), containerEl.current);
+    return shouldRender.current && (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)("div", { ...props, css: overlayBase_style_1.style, className: (0, utils_1.clsx)(overlayBase_style_1.classes.root, props.className), "data-open": open, "data-custom-container": containerEl.current !== document.body, children: (0, jsx_runtime_1.jsx)(transitionBase_1.Fade, { timeout: exports.overlayBaseTransitionDuration, ...(0, utils_1.mergeComponentProps)(maskProps, {
+                in: open,
+                className: overlayBase_style_1.classes.mask,
+                onClick,
+                onEntered,
+                onExited
+            }), children: (0, jsx_runtime_1.jsx)("div", { className: overlayBase_style_1.classes.childrenWrap, children: props.children }) }) }), containerEl.current);
 }

package/dist/cjs/components/overlayBase/overlayBase.style.d.ts

@@ -1,5 +1,6 @@
 export declare const classes: {
     mask: string;
+    childrenWrap: string;
 } & {
     root: string;
 };

package/dist/cjs/components/overlayBase/overlayBase.style.js

@@ -6,29 +6,35 @@ const utils_1 = require("../../utils");
 const app_style_1 = require("../app/app.style");
 const theme_1 = require("../theme");
 exports.classes = (0, utils_1.defineInnerClasses)('overlay-base', [
-    'mask'
+    'mask',
+    'childrenWrap'
 ]);
 exports.style = (0, utils_1.defineCss)(theme => {
     return [
         (0, app_style_1.appStyleCallback)(theme),
         (0, react_1.css) `
-        position: fixed;
-        inset: 0;
-        z-index: ${theme_1.zIndex.overlay};
-
-        &[data-custom-container=true] {
-            position: absolute;
-        }
-        
-        .${exports.classes.mask} {
-            background-color: rgba(0, 0, 0, .5);
-            position: absolute;
+            position: fixed;
             inset: 0;
-        }
+            z-index: ${theme_1.zIndex.overlay};
+
+            &[data-custom-container=true] {
+                position: absolute;
+            }
+
+            .${exports.classes.mask} {
+                background-color: rgba(0, 0, 0, .5);
+                position: absolute;
+                inset: 0;
+            }
 
-        &:not([data-open=true]) {
-            pointer-events: none;
-        }
-    `
+            &:not([data-open=true]) {
+                pointer-events: none;
+            }
+            
+            .${exports.classes.childrenWrap} {
+                height: 100%;
+                position: relative;
+            }
+        `
     ];
 });

package/dist/esm/components/curd/curd.d.ts

@@ -87,7 +87,7 @@ export interface CurdBaseProps<R extends RowType = RowType, F extends FormValue
     onDelete?(row: R): any;
     /** 行数据转换为表单值的方法，若不指定，行数据会直接填入表单 */
     rowToForm?(row: R): F | Promise<F>;
-    dialogProps?: CurdDialogProps<R, F>;
+    dialogProps?: Partial<CurdDialogProps<R, F>>;
     formProps?: FormProps<F>;
     formRef?: Ref<FormRef<F>>;
 }

package/dist/esm/components/dialog/dialog.d.ts

@@ -25,12 +25,18 @@ export interface DialogProps extends Omit<ModalProps, 'title' | 'prefix'> {
     cancelText?: ReactNode;
     cancelProps?: ButtonProps;
     onCancel?(e: React.MouseEvent<HTMLButtonElement | HTMLDivElement> | KeyboardEvent): void;
+    /**
+     * 滚动的行为，默认为`card`
+     * @enum 'card' 卡片内部滚动
+     * @enum 'body' 对话框整体滚动
+     */
+    scrollBehavior?: 'card' | 'body';
     draggable?: boolean;
-    /** 是否可通过点击遮罩层关闭对话框，默认为true */
+    /** 是否可通过点击遮罩层关闭对话框，默认为`true` */
     maskClosable?: boolean;
-    /** 是否可通过键盘的【ESC】键关闭对话框，默认为true */
+    /** 是否可通过键盘的【ESC】键关闭对话框，默认为`true` */
     escapeClosable?: boolean;
     defaultOpen?: boolean;
     onClose?(closeReason: DialogCloseReason): void;
 }
-export declare function Dialog({ icon, title, footer, prefix, suffix, width, minWidth, maxWidth, showClose, closeProps, showConfirm, confirmText, confirmProps, onConfirm, confirmLoading, showCancel, cancelText, cancelProps, onCancel, draggable, maskClosable, escapeClosable, defaultOpen, open, onClose, ...props }: DialogProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function Dialog({ icon, title, footer, prefix, suffix, width, minWidth, maxWidth, showClose, closeProps, showConfirm, confirmText, confirmProps, onConfirm, confirmLoading, showCancel, cancelText, cancelProps, onCancel, scrollBehavior, draggable, maskClosable, escapeClosable, defaultOpen, open, onClose, ...props }: DialogProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/esm/components/dialog/dialog.js

@@ -7,7 +7,7 @@ import { Button } from '../button';
 import { Draggable } from '../draggable';
 import { Icon } from '../icon';
 import { faXmark } from '@fortawesome/free-solid-svg-icons/faXmark';
-export function Dialog({ icon, title, footer, prefix, suffix, width = 420, minWidth, maxWidth = '100%', showClose = true, closeProps, showConfirm = true, confirmText = '确 定', confirmProps, onConfirm, confirmLoading = false, showCancel = true, cancelText = '取 消', cancelProps, onCancel, draggable = true, maskClosable = true, escapeClosable = true, defaultOpen = false, open, onClose, ...props }) {
+export function Dialog({ icon, title, footer, prefix, suffix, width = 420, minWidth, maxWidth = '100%', showClose = true, closeProps, showConfirm = true, confirmText = '确 定', confirmProps, onConfirm, confirmLoading = false, showCancel = true, cancelText = '取 消', cancelProps, onCancel, scrollBehavior = 'card', draggable = true, maskClosable = true, escapeClosable = true, defaultOpen = false, open, onClose, ...props }) {
     const [innerOpen, _setInnerOpen] = useControlled(defaultOpen, open);
     const close = (closeReason) => {
         if (!innerLoading.current || closeReason === 'confirmed') {
@@ -78,7 +78,7 @@ export function Dialog({ icon, title, footer, prefix, suffix, width = 420, minWi
         }
         return footer;
     };
-    return (_jsx(Modal, { ...props, ref: cloneRef(overlayRef, props.ref), css: style, className: clsx(classes.root, props.className), open: innerOpen.current, onMaskClick: onMaskClick, "data-draggable": draggable, children: _jsx(Draggable, { container: () => overlayRef.current, children: (targetProps, handleProps) => _jsxs("div", { className: classes.card, ...targetProps, style: { width, minWidth, maxWidth, ...targetProps.style }, children: [!!icon &&
+    return (_jsx(Modal, { ...props, ref: cloneRef(overlayRef, props.ref), css: style, className: clsx(classes.root, props.className), open: innerOpen.current, onMaskClick: onMaskClick, "data-scroll-behavior": scrollBehavior, "data-draggable": draggable, children: _jsx(Draggable, { container: () => overlayRef.current, children: (targetProps, handleProps) => _jsxs("div", { className: classes.card, ...targetProps, style: { width, minWidth, maxWidth, ...targetProps.style }, children: [!!icon &&
                         _jsx("div", { className: classes.icon, children: icon }), _jsxs("div", { className: classes.content, children: [!!(title || showClose) &&
                                 _jsxs("div", { className: classes.titleRow, ...handleProps, children: [_jsx("div", { className: classes.title, children: title }), showClose &&
                                             _jsx(Button, { shape: "circular", variant: "text", color: "text.secondary", ...closeProps, className: clsx(classes.close, closeProps?.className), onClick: closeHandler, children: _jsx(Icon, { icon: faXmark }) })] }), _jsxs("div", { ref: bodyRef, className: classes.body, onScroll: onScroll, children: [!!prefix &&

package/dist/esm/components/dialog/dialog.style.js

@@ -1,5 +1,7 @@
 import { css } from '@emotion/react';
 import { defineInnerClasses, defineCss } from '../../utils';
+import { classes as modalClasses } from '../modal/modal.style';
+import { classes as overlayBaseClasses } from '../overlayBase/overlayBase.style';
 export const classes = defineInnerClasses('dialog', [
     'card',
     'icon',
@@ -15,13 +17,36 @@ export const classes = defineInnerClasses('dialog', [
 ]);
 export const style = defineCss(({ background, borderRadius, boxShadow, spacing, colors, divider }) => css `
     .${classes.card} {
-        max-height: 100%;
         display: flex;
         background-color: ${background.content};
         border-radius: ${borderRadius}px;
         box-shadow: ${boxShadow[0]};
     }
 
+    .${modalClasses.childrenWrap} {
+        padding: 40px;
+    }
+
+    &[data-scroll-behavior=card] {
+        .${modalClasses.childrenWrap} {
+            height: 100%;
+        }
+        
+        .${classes.card} {
+            max-height: 100%;
+        }
+    }
+
+    &[data-scroll-behavior=body] {
+        .${modalClasses.modal} {
+            height: auto;
+        }
+
+        .${overlayBaseClasses.childrenWrap} {
+            overflow: hidden auto;
+        }
+    }
+
     .${classes.icon} {
         color: ${colors.primary.main};
         font-size: ${21 / 14}em;
@@ -48,7 +73,7 @@ export const style = defineCss(({ background, borderRadius, boxShadow, spacing,
         font-size: ${16 / 14}em;
         font-weight: bold;
         margin-right: -${spacing[8]}px;
-        
+
         .${classes.title} {
             flex: 1;
             padding: ${spacing[6]}px 0 ${spacing[3]}px;

package/dist/esm/components/gallery/gallery.style.js

@@ -1,6 +1,5 @@
 import { css } from '@emotion/react';
 import { defineInnerClasses, defineCss } from '../../utils';
-import { classes as modalClasses } from '../modal/modal.style';
 export const classes = defineInnerClasses('image-preview', [
     'button',
     'control',
@@ -66,10 +65,6 @@ export const style = defineCss(({ spacing, easing, breakpoints }) => css `
         }
     }
 
-    .${modalClasses.modal} {
-        padding: 0;
-    }
-
     .${classes.galleryContainer} {
         &, .${classes.galleryWrapper}, .${classes.imageItem}, .${classes.image} {
             width: 100%;

package/dist/esm/components/modal/modal.js

@@ -19,5 +19,5 @@ export function Modal({ modalProps, ...props }) {
     return (_jsx(OverlayBase, { ...props, css: style, className: clsx(classes.root, props.className), children: _jsx(Grow, { timeout: overlayBaseTransitionDuration, ...modalProps, in: props.open, className: clsx(classes.modal, modalProps?.className), style: {
                 transformOrigin: transformOrigin.current,
                 ...modalProps?.style
-            }, children: props.children }) }));
+            }, children: _jsx("div", { className: classes.childrenWrap, onClick: e => e.stopPropagation(), children: props.children }) }) }));
 }

package/dist/esm/components/modal/modal.style.d.ts

@@ -1,4 +1,5 @@
 export declare const classes: {
+    childrenWrap: string;
     modal: string;
 } & {
     root: string;

package/dist/esm/components/modal/modal.style.js

@@ -1,20 +1,15 @@
 import { css } from '@emotion/react';
 import { defineInnerClasses } from '../../utils';
 export const classes = defineInnerClasses('modal', [
-    'modal'
+    'modal',
+    'childrenWrap'
 ]);
 export const style = css `
     .${classes.modal} {
         width: 100%;
         height: 100%;
-        padding: 40px;
-        pointer-events: none;
         display: flex;
         align-items: center;
         justify-content: center;
-
-        > * {
-            pointer-events: all;
-        }
     }
 `;

package/dist/esm/components/overlayBase/overlayBase.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { useEffect } from 'react';
 import { classes, style } from './overlayBase.style';
 import { clsx, mergeComponentProps, useContainer, useDerivedState } from '../../utils';
@@ -33,11 +33,11 @@ export function OverlayBase({ container, effectContainer, forceRender, open, onM
         onClosed?.();
         forceRender === false && setShouldRender(false);
     };
-    return shouldRender.current && createPortal(_jsxs("div", { ...props, css: style, className: clsx(classes.root, props.className), "data-open": open, "data-custom-container": containerEl.current !== document.body, children: [_jsx(Fade, { timeout: overlayBaseTransitionDuration, ...mergeComponentProps(maskProps, {
-                    in: open,
-                    className: classes.mask,
-                    onClick,
-                    onEntered,
-                    onExited
-                }) }), props.children] }), containerEl.current);
+    return shouldRender.current && createPortal(_jsx("div", { ...props, css: style, className: clsx(classes.root, props.className), "data-open": open, "data-custom-container": containerEl.current !== document.body, children: _jsx(Fade, { timeout: overlayBaseTransitionDuration, ...mergeComponentProps(maskProps, {
+                in: open,
+                className: classes.mask,
+                onClick,
+                onEntered,
+                onExited
+            }), children: _jsx("div", { className: classes.childrenWrap, children: props.children }) }) }), containerEl.current);
 }

package/dist/esm/components/overlayBase/overlayBase.style.d.ts

@@ -1,5 +1,6 @@
 export declare const classes: {
     mask: string;
+    childrenWrap: string;
 } & {
     root: string;
 };

package/dist/esm/components/overlayBase/overlayBase.style.js

@@ -3,29 +3,35 @@ import { defineInnerClasses, defineCss } from '../../utils';
 import { appStyleCallback } from '../app/app.style';
 import { zIndex } from '../theme';
 export const classes = defineInnerClasses('overlay-base', [
-    'mask'
+    'mask',
+    'childrenWrap'
 ]);
 export const style = defineCss(theme => {
     return [
         appStyleCallback(theme),
         css `
-        position: fixed;
-        inset: 0;
-        z-index: ${zIndex.overlay};
-
-        &[data-custom-container=true] {
-            position: absolute;
-        }
-        
-        .${classes.mask} {
-            background-color: rgba(0, 0, 0, .5);
-            position: absolute;
+            position: fixed;
             inset: 0;
-        }
+            z-index: ${zIndex.overlay};
+
+            &[data-custom-container=true] {
+                position: absolute;
+            }
+
+            .${classes.mask} {
+                background-color: rgba(0, 0, 0, .5);
+                position: absolute;
+                inset: 0;
+            }
 
-        &:not([data-open=true]) {
-            pointer-events: none;
-        }
-    `
+            &:not([data-open=true]) {
+                pointer-events: none;
+            }
+            
+            .${classes.childrenWrap} {
+                height: 100%;
+                position: relative;
+            }
+        `
     ];
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canlooks/can-ui",
-  "version": "0.0.82",
+  "version": "0.0.84",
   "author": "C.CanLiang <canlooks@gmail.com>",
   "description": "My ui framework",
   "license": "MIT",