@canlooks/can-ui 0.0.81 → 0.0.83

package/dist/cjs/components/cascade/cascadePanel.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CascadePanel = CascadePanel;
+const react_1 = require("@emotion/react");
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const loading_1 = require("../loading");
 const loadingIndicator_1 = require("../loadingIndicator");
@@ -39,9 +40,8 @@ function CascadePanel({ options, index = 0 }) {
             const status = selectionStatus?.get(optVal);
             const opened = openedPanels[index] === optVal;
             const hasChildren = !!opt[childrenKey]?.length;
-            return ((0, jsx_runtime_1.jsx)(menuItem_1.MenuItem, { ...(0, utils_1.mergeComponentProps)({
-                    showCheckbox,
-                    key: optVal
+            return ((0, react_1.createElement)(menuItem_1.MenuItem, { ...(0, utils_1.mergeComponentProps)({
+                    showCheckbox
                 }, opt, {
                     checkboxProps: (0, utils_1.mergeComponentProps)(opt?.checkboxProps, showCheckbox
                         ? {
@@ -62,7 +62,7 @@ function CascadePanel({ options, index = 0 }) {
                         ? (0, jsx_runtime_1.jsx)(loadingIndicator_1.LoadingIndicator, {})
                         : hasChildren && (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faChevronRight_1.faChevronRight }),
                     children: null
-                }) }));
+                }), key: optVal }));
         });
     };
     const nextOptions = optionsMap.get(openedPanels[index])?.[childrenKey];

package/dist/cjs/components/dataGrid/dataGridRows.js

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DataGridRows = void 0;
-const react_1 = require("@emotion/react");
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("@emotion/react");
 const react_2 = require("react");
 const dataGrid_1 = require("./dataGrid");
 const selectionContext_1 = require("../selectionContext");
@@ -33,43 +33,42 @@ exports.DataGridRows = (0, react_2.memo)(({ rows, _level = 0 }) => {
         const currentExpanded = expandable && expandedSet.has(trKey);
         let expandableIndex = -2;
         const ret = [
-            (0, jsx_runtime_1.jsx)(Tr, { ...(0, utils_1.mergeComponentProps)(TrProps, _rowProps, {
-                    key: trKey,
+            (0, react_1.createElement)(Tr, { ...(0, utils_1.mergeComponentProps)(TrProps, _rowProps, {
                     className: (0, utils_1.clsx)(_rowProps, _level > 0 && dataGrid_style_1.classes.sub),
                     onClick() {
                         clickRowToSelect && toggleSelected(trKey, row);
                     }
-                }), "data-selected": status === 2, children: flattedColumns?.flatMap((col, j) => {
-                    if (typeof col === 'symbol') {
-                        if (col === dataGrid_1.DataGrid.EXPAND_COLUMN) {
-                            expandableIndex = j;
-                            return [];
-                        }
-                        // col === DataGrid.SELECT_COLUMN
-                        if (expandableIndex === j - 1) {
-                            // select column紧跟在expand column后面，需要顺延expandableIndex
-                            expandableIndex = j;
-                        }
-                        const Component = multiple ? checkbox_1.Checkbox : radio_1.Radio;
-                        return ((0, jsx_runtime_1.jsx)(table_1.TdCell, { className: dataGrid_style_1.classes.selectable, sticky: j === 0 ? 'left' : void 0, children: (0, jsx_runtime_1.jsx)(Component, { checked: status === 2, indeterminate: status === 1, onChange: () => {
-                                    toggleSelected(trKey, row);
-                                }, onClick: e => e.stopPropagation() }) }, j + '_selectable'));
+                }), key: trKey, "data-selected": status === 2 }, flattedColumns?.flatMap((col, j) => {
+                if (typeof col === 'symbol') {
+                    if (col === dataGrid_1.DataGrid.EXPAND_COLUMN) {
+                        expandableIndex = j;
+                        return [];
+                    }
+                    // col === DataGrid.SELECT_COLUMN
+                    if (expandableIndex === j - 1) {
+                        // select column紧跟在expand column后面，需要顺延expandableIndex
+                        expandableIndex = j;
                     }
-                    const { 
-                    // 排除无需加入dom节点的属性
-                    // width属性只需加入thead列中，普通列需排除
-                    // rowSpan与colSpan需排除
-                    title, key, children, sticky, field, render, sorter, filter, width, _key, _negativeRowSpan, rowSpan, colSpan, ..._colProps } = col;
-                    const renderedContent = (0, utils_1.renderCell)({ render, field }, row, i, arr);
-                    const shouldRenderExpand = expandableIndex === j - 1;
-                    return ((0, react_1.createElement)(table_1.TdCell, { ..._colProps, key: _key, className: shouldRenderExpand ? dataGrid_style_1.classes.expandable : void 0, sticky: sticky }, shouldRenderExpand
-                        ? (0, jsx_runtime_1.jsxs)("div", { className: dataGrid_style_1.classes.expandableWrap, style: { paddingLeft: _level * indent }, children: [(0, jsx_runtime_1.jsx)(button_1.Button, { variant: "text", shape: "circular", color: "text.disabled", onClick: () => toggleExpanded(trKey), style: expandable ? void 0 : { visibility: 'hidden' }, children: renderExpandIcon
-                                        ? renderExpandIcon(trKey, currentExpanded, [...expandedSet])
-                                        : currentExpanded
-                                            ? (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faMinusSquare_1.faMinusSquare })
-                                            : (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faPlusSquare_1.faPlusSquare }) }), renderedContent] })
-                        : renderedContent));
-                }) })
+                    const Component = multiple ? checkbox_1.Checkbox : radio_1.Radio;
+                    return ((0, jsx_runtime_1.jsx)(table_1.TdCell, { className: dataGrid_style_1.classes.selectable, sticky: j === 0 ? 'left' : void 0, children: (0, jsx_runtime_1.jsx)(Component, { checked: status === 2, indeterminate: status === 1, onChange: () => {
+                                toggleSelected(trKey, row);
+                            }, onClick: e => e.stopPropagation() }) }, j + '_selectable'));
+                }
+                const { 
+                // 排除无需加入dom节点的属性
+                // width属性只需加入thead列中，普通列需排除
+                // rowSpan与colSpan需排除
+                title, key, children, sticky, field, render, sorter, filter, width, _key, _negativeRowSpan, rowSpan, colSpan, ..._colProps } = col;
+                const renderedContent = (0, utils_1.renderCell)({ render, field }, row, i, arr);
+                const shouldRenderExpand = expandableIndex === j - 1;
+                return ((0, react_1.createElement)(table_1.TdCell, { ..._colProps, key: _key, className: shouldRenderExpand ? dataGrid_style_1.classes.expandable : void 0, sticky: sticky }, shouldRenderExpand
+                    ? (0, jsx_runtime_1.jsxs)("div", { className: dataGrid_style_1.classes.expandableWrap, style: { paddingLeft: _level * indent }, children: [(0, jsx_runtime_1.jsx)(button_1.Button, { variant: "text", shape: "circular", color: "text.disabled", onClick: () => toggleExpanded(trKey), style: expandable ? void 0 : { visibility: 'hidden' }, children: renderExpandIcon
+                                    ? renderExpandIcon(trKey, currentExpanded, [...expandedSet])
+                                    : currentExpanded
+                                        ? (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faMinusSquare_1.faMinusSquare })
+                                        : (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faPlusSquare_1.faPlusSquare }) }), renderedContent] })
+                    : renderedContent));
+            }))
         ];
         if (Array.isArray(children)) {
             currentExpanded && ret.push((0, jsx_runtime_1.jsx)(exports.DataGridRows, { rows: children, _level: _level + 1 }, trKey + '_children'));

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/cascade/cascadePanel.js

@@ -1,3 +1,4 @@
+import { createElement as _createElement } from "@emotion/react";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { Loading } from '../loading';
 import { LoadingIndicator } from '../loadingIndicator';
@@ -36,9 +37,8 @@ export function CascadePanel({ options, index = 0 }) {
             const status = selectionStatus?.get(optVal);
             const opened = openedPanels[index] === optVal;
             const hasChildren = !!opt[childrenKey]?.length;
-            return (_jsx(MenuItem, { ...mergeComponentProps({
-                    showCheckbox,
-                    key: optVal
+            return (_createElement(MenuItem, { ...mergeComponentProps({
+                    showCheckbox
                 }, opt, {
                     checkboxProps: mergeComponentProps(opt?.checkboxProps, showCheckbox
                         ? {
@@ -59,7 +59,7 @@ export function CascadePanel({ options, index = 0 }) {
                         ? _jsx(LoadingIndicator, {})
                         : hasChildren && _jsx(Icon, { icon: faChevronRight }),
                     children: null
-                }) }));
+                }), key: optVal }));
         });
     };
     const nextOptions = optionsMap.get(openedPanels[index])?.[childrenKey];

package/dist/esm/components/dataGrid/dataGridRows.js

@@ -1,5 +1,5 @@
-import { createElement as _createElement } from "@emotion/react";
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { createElement as _createElement } from "@emotion/react";
 import { memo } from 'react';
 import { DataGrid, useDataGridContext } from './dataGrid';
 import { useSelectionContext } from '../selectionContext';
@@ -30,43 +30,42 @@ export const DataGridRows = memo(({ rows, _level = 0 }) => {
         const currentExpanded = expandable && expandedSet.has(trKey);
         let expandableIndex = -2;
         const ret = [
-            _jsx(Tr, { ...mergeComponentProps(TrProps, _rowProps, {
-                    key: trKey,
+            _createElement(Tr, { ...mergeComponentProps(TrProps, _rowProps, {
                     className: clsx(_rowProps, _level > 0 && classes.sub),
                     onClick() {
                         clickRowToSelect && toggleSelected(trKey, row);
                     }
-                }), "data-selected": status === 2, children: flattedColumns?.flatMap((col, j) => {
-                    if (typeof col === 'symbol') {
-                        if (col === DataGrid.EXPAND_COLUMN) {
-                            expandableIndex = j;
-                            return [];
-                        }
-                        // col === DataGrid.SELECT_COLUMN
-                        if (expandableIndex === j - 1) {
-                            // select column紧跟在expand column后面，需要顺延expandableIndex
-                            expandableIndex = j;
-                        }
-                        const Component = multiple ? Checkbox : Radio;
-                        return (_jsx(TdCell, { className: classes.selectable, sticky: j === 0 ? 'left' : void 0, children: _jsx(Component, { checked: status === 2, indeterminate: status === 1, onChange: () => {
-                                    toggleSelected(trKey, row);
-                                }, onClick: e => e.stopPropagation() }) }, j + '_selectable'));
+                }), key: trKey, "data-selected": status === 2 }, flattedColumns?.flatMap((col, j) => {
+                if (typeof col === 'symbol') {
+                    if (col === DataGrid.EXPAND_COLUMN) {
+                        expandableIndex = j;
+                        return [];
+                    }
+                    // col === DataGrid.SELECT_COLUMN
+                    if (expandableIndex === j - 1) {
+                        // select column紧跟在expand column后面，需要顺延expandableIndex
+                        expandableIndex = j;
                     }
-                    const { 
-                    // 排除无需加入dom节点的属性
-                    // width属性只需加入thead列中，普通列需排除
-                    // rowSpan与colSpan需排除
-                    title, key, children, sticky, field, render, sorter, filter, width, _key, _negativeRowSpan, rowSpan, colSpan, ..._colProps } = col;
-                    const renderedContent = renderCell({ render, field }, row, i, arr);
-                    const shouldRenderExpand = expandableIndex === j - 1;
-                    return (_createElement(TdCell, { ..._colProps, key: _key, className: shouldRenderExpand ? classes.expandable : void 0, sticky: sticky }, shouldRenderExpand
-                        ? _jsxs("div", { className: classes.expandableWrap, style: { paddingLeft: _level * indent }, children: [_jsx(Button, { variant: "text", shape: "circular", color: "text.disabled", onClick: () => toggleExpanded(trKey), style: expandable ? void 0 : { visibility: 'hidden' }, children: renderExpandIcon
-                                        ? renderExpandIcon(trKey, currentExpanded, [...expandedSet])
-                                        : currentExpanded
-                                            ? _jsx(Icon, { icon: faMinusSquare })
-                                            : _jsx(Icon, { icon: faPlusSquare }) }), renderedContent] })
-                        : renderedContent));
-                }) })
+                    const Component = multiple ? Checkbox : Radio;
+                    return (_jsx(TdCell, { className: classes.selectable, sticky: j === 0 ? 'left' : void 0, children: _jsx(Component, { checked: status === 2, indeterminate: status === 1, onChange: () => {
+                                toggleSelected(trKey, row);
+                            }, onClick: e => e.stopPropagation() }) }, j + '_selectable'));
+                }
+                const { 
+                // 排除无需加入dom节点的属性
+                // width属性只需加入thead列中，普通列需排除
+                // rowSpan与colSpan需排除
+                title, key, children, sticky, field, render, sorter, filter, width, _key, _negativeRowSpan, rowSpan, colSpan, ..._colProps } = col;
+                const renderedContent = renderCell({ render, field }, row, i, arr);
+                const shouldRenderExpand = expandableIndex === j - 1;
+                return (_createElement(TdCell, { ..._colProps, key: _key, className: shouldRenderExpand ? classes.expandable : void 0, sticky: sticky }, shouldRenderExpand
+                    ? _jsxs("div", { className: classes.expandableWrap, style: { paddingLeft: _level * indent }, children: [_jsx(Button, { variant: "text", shape: "circular", color: "text.disabled", onClick: () => toggleExpanded(trKey), style: expandable ? void 0 : { visibility: 'hidden' }, children: renderExpandIcon
+                                    ? renderExpandIcon(trKey, currentExpanded, [...expandedSet])
+                                    : currentExpanded
+                                        ? _jsx(Icon, { icon: faMinusSquare })
+                                        : _jsx(Icon, { icon: faPlusSquare }) }), renderedContent] })
+                    : renderedContent));
+            }))
         ];
         if (Array.isArray(children)) {
             currentExpanded && ret.push(_jsx(DataGridRows, { rows: children, _level: _level + 1 }, trKey + '_children'));

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.81",
+  "version": "0.0.83",
   "author": "C.CanLiang <canlooks@gmail.com>",
   "description": "My ui framework",
   "license": "MIT",