@canlooks/can-ui 0.0.48 → 0.0.51

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

@@ -13,128 +13,128 @@ export const classes = defineInnerClasses('calendar', [
     'yearItem',
     'foot'
 ]);
-export const style = defineCss(({ divider, text, spacing }) => css `
-    .${classes.head} {
-        height: 40px;
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        border-bottom: 1px solid ${divider};
-        padding: 0 ${menuListPadding}px;
-        position: relative;
-
-        .${classes.headSide} {
-            z-index: 1;
-        }
-
-        .${classes.headControl} {
-            color: ${text.placeholder};
-        }
-
-        .${classes.headCenter} {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            position: absolute;
-            inset: 0;
-
-            .${classes.headButton} {
-                font-weight: bold;
-                color: ${text.primary};
-            }
-        }
-    }
-
-    .${classes.body} {
-        padding: ${spacing[3]}px ${spacing[4]}px;
-        display: grid;
-        place-items: center;
-
-        &[data-view-type=date] {
-            font-size: ${13 / 14}em;
-            grid-template-columns: repeat(7, 36px);
-            grid-template-rows: repeat(7, 36px);
-
-            .${classes.dateItem} {
-                width: 24px;
-                height: 24px;
-    
-                &:not([data-variant=filled]) {
-                    color: ${text.primary};
-                    border-color: ${text.disabled};
-    
-                    &[data-other-month=true] {
-                        color: ${text.placeholder};
-                    }
-                }
-
-                &:disabled {
-                    width: 100%;
-                    border-radius: 0;
-                }
-            }
-        }
-
-        &[data-view-type=month], &[data-view-type=year] {
-            grid-template-columns: repeat(3, 84px);
-            grid-template-rows: repeat(4, 63px);
-
-            .${classes.monthItem},
-            .${classes.yearItem} {
-                width: 72px;
-                padding-inline: 0;
-
-                &:not([data-variant=filled]) {
-                    color: ${text.primary};
-                }
-            }
-        }
-    }
-    
-    &[data-size=small] {
-        .${classes.body} {
-            &[data-view-type=date] {
-                grid-template-columns: repeat(7, 30px);
-                grid-template-rows: repeat(7, 30px);
-            }
-
-            &[data-view-type=month], &[data-view-type=year] {
-                grid-template-columns: repeat(3, 70px);
-                grid-template-rows: repeat(4, 52.5px);
-
-                .${classes.monthItem},
-                .${classes.yearItem} {
-                    width: 60px;
-                }
-            }
-        }
-    }
-
-    &[data-size=large] {
-        .${classes.body} {
-            &[data-view-type=date] {
-                font-size: 1em;
-                grid-template-columns: repeat(7, 42px);
-                grid-template-rows: repeat(7, 42px);
-
-                .${classes.dateItem} {
-                    width: 32px;
-                    height: 32px;
-                }
-            }
-
-            &[data-view-type=month], &[data-view-type=year] {
-                grid-template-columns: repeat(3, 98px);
-                grid-template-rows: repeat(4, 73.5px);
-            }
-        }
-    }
-
-    .${classes.foot} {
-        height: 41px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        border-top: 1px solid ${divider};
-    }
+export const style = defineCss(({ divider, text, spacing }) => css `
+    .${classes.head} {
+        height: 40px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        border-bottom: 1px solid ${divider};
+        padding: 0 ${menuListPadding}px;
+        position: relative;
+
+        .${classes.headSide} {
+            z-index: 1;
+        }
+
+        .${classes.headControl} {
+            color: ${text.placeholder};
+        }
+
+        .${classes.headCenter} {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            position: absolute;
+            inset: 0;
+
+            .${classes.headButton} {
+                font-weight: bold;
+                color: ${text.primary};
+            }
+        }
+    }
+
+    .${classes.body} {
+        padding: ${spacing[3]}px ${spacing[4]}px;
+        display: grid;
+        place-items: center;
+
+        &[data-view-type=date] {
+            font-size: ${13 / 14}em;
+            grid-template-columns: repeat(7, 36px);
+            grid-template-rows: repeat(7, 36px);
+
+            .${classes.dateItem} {
+                width: 24px;
+                height: 24px;
+    
+                &:not([data-variant=filled]) {
+                    color: ${text.primary};
+                    border-color: ${text.disabled};
+    
+                    &[data-other-month=true] {
+                        color: ${text.placeholder};
+                    }
+                }
+
+                &:disabled {
+                    width: 100%;
+                    border-radius: 0;
+                }
+            }
+        }
+
+        &[data-view-type=month], &[data-view-type=year] {
+            grid-template-columns: repeat(3, 84px);
+            grid-template-rows: repeat(4, 63px);
+
+            .${classes.monthItem},
+            .${classes.yearItem} {
+                width: 72px;
+                padding-inline: 0;
+
+                &:not([data-variant=filled]) {
+                    color: ${text.primary};
+                }
+            }
+        }
+    }
+    
+    &[data-size=small] {
+        .${classes.body} {
+            &[data-view-type=date] {
+                grid-template-columns: repeat(7, 30px);
+                grid-template-rows: repeat(7, 30px);
+            }
+
+            &[data-view-type=month], &[data-view-type=year] {
+                grid-template-columns: repeat(3, 70px);
+                grid-template-rows: repeat(4, 52.5px);
+
+                .${classes.monthItem},
+                .${classes.yearItem} {
+                    width: 60px;
+                }
+            }
+        }
+    }
+
+    &[data-size=large] {
+        .${classes.body} {
+            &[data-view-type=date] {
+                font-size: 1em;
+                grid-template-columns: repeat(7, 42px);
+                grid-template-rows: repeat(7, 42px);
+
+                .${classes.dateItem} {
+                    width: 32px;
+                    height: 32px;
+                }
+            }
+
+            &[data-view-type=month], &[data-view-type=year] {
+                grid-template-columns: repeat(3, 98px);
+                grid-template-rows: repeat(4, 73.5px);
+            }
+        }
+    }
+
+    .${classes.foot} {
+        height: 41px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-top: 1px solid ${divider};
+    }
 `);

package/dist/esm/components/calendar/panelYear.js

@@ -13,7 +13,7 @@ export const PanelYear = memo(({ innerD, setInnerD, onSelected, min, max }) => {
         onSelected(d);
     };
     const [page, setPage] = useState(() => Math.floor(currentYear / 12));
-    const renderHeadControl = (icon, title, onClick) => (_jsx(Tooltip, { title: title, children: _jsx(Button, { className: classes.headControl, variant: "text", size: "small", color: "text", onClick: onClick, children: icon }) }));
+    const renderHeadControl = (icon, title, onClick) => (_jsx(Tooltip, { title: title, children: _jsx(Button, { className: classes.headControl, variant: "text", size: "small", color: "text.secondary", onClick: onClick, children: icon }) }));
     const isDisabled = (d) => {
         if (min && min.isAfter(d)) {
             return true;

package/dist/esm/components/curd/curd.js

@@ -68,7 +68,7 @@ export const Curd = memo((props) => {
             }
         };
         return [...columns || [], controlColumn];
-    }, [columns, updatable, deletable]);
+    }, [columns, updatable, deletable, renderExtraControl, controlColumnTitle, updateButtonProps, deleteButtonProps, dataName, deleteConfirmProps]);
     const { orderedColumns, actualColumns, innerVisible, setInnerVisible, setInnerOrder } = useCurdColumns({
         columns: completedColumns,
         columnConfigurable
@@ -174,7 +174,7 @@ export const Curd = memo((props) => {
                 _jsxs("div", { className: classes.toolbar, children: [_jsxs("div", { className: classes.toolbarLeft, children: [creatable &&
                                     _jsxs(Button, { prefix: _jsx(Icon, { icon: faPlus }), ...createButtonProps, onClick: createHandler, children: [createName, dataName] }), toolbarLeft] }), _jsxs("div", { className: classes.toolbarRight, children: [!!toolbarRight &&
                                     _jsxs(_Fragment, { children: [toolbarRight, _jsx(Divider, { className: classes.divider, orientation: "vertical" })] }), reloadable &&
-                                    _jsx(Tooltip, { title: "\u5237\u65B0", children: _jsx(Button, { shape: "circular", variant: "text", color: "text", prefix: _jsx(Icon, { icon: faRotateRight }), loading: innerLoading.current, onClick: reloadHandler }) }), resizable &&
+                                    _jsx(Tooltip, { title: "\u5237\u65B0", children: _jsx(Button, { shape: "circular", variant: "text", color: "text.secondary", prefix: _jsx(Icon, { icon: faRotateRight }), loading: innerLoading.current, onClick: reloadHandler }) }), resizable &&
                                     _jsx(CurdResizable, { innerSize: innerSize.current, setInnerSize: setInnerSize }), columnConfigurable &&
                                     _jsx(CurdColumnConfig, { columns: orderedColumns, innerVisible: innerVisible.current, setInnerVisible: setInnerVisible, setInnerOrder: setInnerOrder })] })] }), _jsx("div", { className: classes.card, children: _jsx(DataGrid, { ...dataGridProps, columns: actualColumns, tableProps: {
                         ...props.tableProps,

package/dist/esm/components/curd/curdColumnConfig.js

@@ -24,5 +24,5 @@ export const CurdColumnConfig = memo(({ columns = [], innerVisible, setInnerVisi
             ? [...o, key]
             : o.filter(k => k !== key));
     };
-    return (_jsx(Bubble, { css: style, placement: "bottomRight", content: _jsx(DndContext, { sensors: useDndSensors(), onDragEnd: dragEndHandler, children: _jsx(SortableContext, { items: columns?.map((col, i) => col._key ?? i), children: _jsxs("div", { className: classes.content, children: [_jsx("div", { className: classes.title, children: "\u5217\u8BBE\u7F6E" }), columns?.map((col, i) => _jsx(SortableItem, { id: col._key ?? i, component: MenuItem, className: classes.item, prefix: _jsx(Checkbox, { className: classes.checkbox, checked: !isUnset(col._key) && visibleSet.has(col._key), onChange: e => !isUnset(col._key) && toggleVisible(col._key, e.target.checked) }), label: col.title }, col._key ?? i))] }) }) }), children: _jsx(Button, { shape: "circular", variant: "text", color: "text", children: _jsx(Icon, { icon: faGear }) }) }));
+    return (_jsx(Bubble, { css: style, placement: "bottomRight", content: _jsx(DndContext, { sensors: useDndSensors(), onDragEnd: dragEndHandler, children: _jsx(SortableContext, { items: columns?.map((col, i) => col._key ?? i), children: _jsxs("div", { className: classes.content, children: [_jsx("div", { className: classes.title, children: "\u5217\u8BBE\u7F6E" }), columns?.map((col, i) => _jsx(SortableItem, { id: col._key ?? i, component: MenuItem, className: classes.item, prefix: _jsx(Checkbox, { className: classes.checkbox, checked: !isUnset(col._key) && visibleSet.has(col._key), onChange: e => !isUnset(col._key) && toggleVisible(col._key, e.target.checked) }), label: col.title }, col._key ?? i))] }) }) }), autoClose: false, children: _jsx(Button, { shape: "circular", variant: "text", color: "text.secondary", children: _jsx(Icon, { icon: faGear }) }) }));
 });

package/dist/esm/components/curd/curdFilter.js

@@ -22,9 +22,11 @@ export const CurdFilter = memo(({ ref, columns, expandable, showButton, renderCo
      */
     const firstItemRef = useRef(null);
     const [expanded, setExpanded] = useState(false);
-    const renderedGrid = (_jsx(Grid, { className: classes.filterGrid, columnGap: spacing[8], children: items?.map((item, i) => isValidElement(item)
-            ? item
-            : _createElement(FormItem, { span: { xs: 12, md: 6, lg: 4 }, ...item, key: item.key ?? i, wrapperRef: !i ? firstItemRef : void 0 })) }));
+    const renderedGrid = (_jsx(Grid, { className: classes.filterGrid, columnGap: spacing[8], children: items?.map((item, i) => {
+            return isValidElement(item)
+                ? item
+                : _createElement(FormItem, { span: { xs: 12, md: 6, lg: 4 }, variant: "grid", ...item, key: item.key ?? i, wrapperRef: !i ? firstItemRef : void 0 });
+        }) }));
     /**
      * --------------------------------------------------------------
      * 触发筛选

package/dist/esm/components/curd/curdResizable.js

@@ -7,5 +7,5 @@ import { Button } from '../button';
 import { Icon } from '../..';
 import { faArrowsUpDown } from '@fortawesome/free-solid-svg-icons/faArrowsUpDown';
 export const CurdResizable = memo(({ innerSize, setInnerSize }) => {
-    return (_jsx(Tooltip, { title: "\u8868\u683C\u5C3A\u5BF8", children: _jsx(Bubble, { placement: "bottom", content: _jsxs(_Fragment, { children: [_jsx(MenuItem, { value: "small", label: "\u5C0F", selected: innerSize === 'small', onClick: () => setInnerSize('small') }), _jsx(MenuItem, { value: "medium", label: "\u4E2D", selected: innerSize === 'medium', onClick: () => setInnerSize('medium') }), _jsx(MenuItem, { value: "large", label: "\u5927", selected: innerSize === 'large', onClick: () => setInnerSize('large') })] }), children: _jsx(Button, { shape: "circular", variant: "text", color: "text", children: _jsx(Icon, { icon: faArrowsUpDown }) }) }) }));
+    return (_jsx(Tooltip, { title: "\u8868\u683C\u5C3A\u5BF8", children: _jsx(Bubble, { placement: "bottom", content: _jsxs(_Fragment, { children: [_jsx(MenuItem, { value: "small", label: "\u5C0F", selected: innerSize === 'small', onClick: () => setInnerSize('small') }), _jsx(MenuItem, { value: "medium", label: "\u4E2D", selected: innerSize === 'medium', onClick: () => setInnerSize('medium') }), _jsx(MenuItem, { value: "large", label: "\u5927", selected: innerSize === 'large', onClick: () => setInnerSize('large') })] }), children: _jsx(Button, { shape: "circular", variant: "text", color: "text.secondary", children: _jsx(Icon, { icon: faArrowsUpDown }) }) }) }));
 });

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

@@ -30,7 +30,7 @@ type DataGridSharedProps<R extends RowType> = {
     /** 数据的主键名，默认为`id` */
     primaryKey?: keyof R;
     /**
-     * 当数据中存在该字段，则会渲染可展开的子行，默认为`null`表示不使用子行功能,
+     * 当数据中存在该字段，则会渲染可展开的子行，默认为`null`，表示不使用子行功能,
      * children允许的值类型：
      * @types {R[] | ReactNode | ((parent: R, expanded: boolean) => ReactNode)}
      */

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

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { createContext, memo, useContext, useMemo } from 'react';
 import { classes, style } from './dataGrid.style';
 import { SelectionContext, useSelectionContext } from '../selectionContext';
+import { Pagination } from '../pagination';
 import { Table, TableContainer } from '../table';
 import { clsx, cloneRef, useControlled, useDataGridColumns } from '../../utils';
 import { Loading } from '../loading';
@@ -92,21 +93,26 @@ export const DataGrid = memo(({ columns, rows, rowProps, primaryKey = 'id', chil
         pageSize: innerPageSize.current,
         onChange: pageChangeHandler
     };
+    const renderPaginationFn = () => {
+        return renderPagination
+            ? renderPagination(_paginationProps)
+            : _jsx(Pagination, { ..._paginationProps });
+    };
     const paginatedRows = useMemo(() => {
         if (!paginatable) {
             return orderedRows;
         }
         const { page, pageSize } = _paginationProps;
         return orderedRows?.slice((page - 1) * pageSize, page * pageSize);
-    }, [orderedRows, _paginationProps.page, _paginationProps.pageSize]);
-    return (_jsx(Loading, { ...props, css: style, className: clsx(classes.root, props.className), open: loading, "data-column-resizable": columnResizable, children: _jsx(ColumnResizeContext, { columnResizable: columnResizable, children: ({ scrollerRef, tableRef }) => _jsxs(TableContainer, { ref: scrollerRef, className: classes.container, children: [_jsx(Table, { size: size, bordered: bordered, striped: striped, ...tableProps, ref: cloneRef(tableProps?.ref, tableRef), children: _jsxs(SelectionContext, { options: rows, primaryKey: primaryKey, childrenKey: childrenKey !== null ? childrenKey : void 0, relation: relation, integration: integration, disabled: !selectable, multiple: multiple, defaultValue: defaultValue, value: value, onChange: onChange, children: [_jsx(DataGridHead, { flattedColumns: flattedColumns, completedColumns: completedColumns, rows: rows, primaryKey: primaryKey, orderColumn: innerOrderColumn.current, orderType: innerOrderType.current, onOrderChange: orderChangeHandler, allowSelectAll: allowSelectAll, columnResizable: columnResizable }), _jsx("tbody", { children: _jsx(DataGridContext, { value: useMemo(() => ({
-                                            rowProps, primaryKey, childrenKey, clickRowToSelect, indent, renderExpandIcon,
-                                            expandedSet, flattedColumns, toggleExpanded
-                                        }), [
-                                            rowProps, primaryKey, childrenKey, clickRowToSelect, indent, renderExpandIcon,
-                                            expandedSet, flattedColumns
-                                        ]), children: !!paginatedRows?.length &&
-                                            _jsx(DataGridRows, { rows: paginatedRows }) }) })] }) }), !paginatedRows?.length && (emptyPlaceholder ?? _jsx(Placeholder, { className: classes.empty }))] }) }) }));
+    }, [orderedRows, _paginationProps.page, _paginationProps.pageSize, paginatable]);
+    return (_jsxs(Loading, { ...props, css: style, className: clsx(classes.root, props.className), open: loading, "data-column-resizable": columnResizable, children: [_jsx(ColumnResizeContext, { columnResizable: columnResizable, children: ({ scrollerRef, tableRef }) => _jsxs(TableContainer, { ref: scrollerRef, className: classes.container, children: [_jsx(Table, { size: size, bordered: bordered, striped: striped, ...tableProps, ref: cloneRef(tableProps?.ref, tableRef), children: _jsxs(SelectionContext, { options: rows, primaryKey: primaryKey, childrenKey: childrenKey !== null ? childrenKey : void 0, relation: relation, integration: integration, disabled: !selectable, multiple: multiple, defaultValue: defaultValue, value: value, onChange: onChange, children: [_jsx(DataGridHead, { flattedColumns: flattedColumns, completedColumns: completedColumns, rows: rows, primaryKey: primaryKey, orderColumn: innerOrderColumn.current, orderType: innerOrderType.current, onOrderChange: orderChangeHandler, allowSelectAll: allowSelectAll, columnResizable: columnResizable }), _jsx("tbody", { children: _jsx(DataGridContext, { value: useMemo(() => ({
+                                                rowProps, primaryKey, childrenKey, clickRowToSelect, indent, renderExpandIcon,
+                                                expandedSet, flattedColumns, toggleExpanded
+                                            }), [
+                                                rowProps, primaryKey, childrenKey, clickRowToSelect, indent, renderExpandIcon,
+                                                expandedSet, flattedColumns
+                                            ]), children: !!paginatedRows?.length &&
+                                                _jsx(DataGridRows, { rows: paginatedRows }) }) })] }) }), !paginatedRows?.length && (emptyPlaceholder ?? _jsx(Placeholder, { className: classes.empty }))] }) }), renderPaginationFn()] }));
 });
 DataGrid.EXPAND_COLUMN = Symbol('expand-column');
 DataGrid.SELECT_COLUMN = Symbol('select-column');

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

@@ -81,7 +81,7 @@ export function Dialog({ ref, icon, title, footer, prefix, suffix, width = 420,
     return (_jsx(Modal, { ...props, ref: cloneRef(ref, overlayRef), 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 &&
                         _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", ...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 &&
+                                            _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 &&
                                         _jsx("div", { className: classes.prefix, children: prefix }), _jsx("div", { ref: bodyWrapRef, className: classes.bodyWrap, children: props.children }), !!suffix &&
                                         _jsx("div", { className: classes.suffix, children: suffix })] }), (typeof footer === 'undefined' || !!footer) &&
                                 _jsx("div", { className: classes.footer, children: renderFooter() })] })] }) }) }));

package/dist/esm/components/drawer/drawer.js

@@ -48,7 +48,7 @@ export function Drawer({ title, footer, showClose = true, size = { xs: '100%', s
     }, [innerOpen.current]);
     return (_jsx(OverlayBase, { ...props, css: useStyle({ size: typeof size === 'object' ? size : { xs: size } }), className: clsx(classes.root, props.className), open: innerOpen.current, onMaskClick: onMaskClick, "data-placement": placement, children: _jsx(Slide, { direction: placementToDirection[placement], ...slideProps, in: innerOpen.current, className: clsx(classes.drawer, slideProps?.className), children: _jsxs("div", { className: classes.drawerWrap, children: [!!(title || showClose) &&
                         _jsxs("div", { className: classes.titleRow, children: [_jsx("div", { className: classes.title, children: title }), showClose &&
-                                    _jsx(Button, { className: classes.close, shape: "circular", variant: "text", color: "text", onClick: closeHandler, children: _jsx(Icon, { icon: faAnglesRight, style: {
+                                    _jsx(Button, { className: classes.close, shape: "circular", variant: "text", color: "text.secondary", onClick: closeHandler, children: _jsx(Icon, { icon: faAnglesRight, style: {
                                                 rotate: {
                                                     left: '180deg',
                                                     right: '0',

package/dist/esm/components/form/form.js

@@ -39,7 +39,6 @@ inline, columnCount = 1, gap, columnGap, rowGap, ...props }) => {
      */
     const itemsContainer = useRef(new Map());
     const submitHandler = async (e) => {
-        console.log(e);
         e?.preventDefault();
         try {
             await Promise.all([...itemsContainer.current].map(async ([, item]) => {

package/dist/esm/components/inputBase/inputBase.js

@@ -73,6 +73,6 @@ min, max, step, precision, placeholder, disabled, readOnly, autoFocus, defaultVa
                     onKeyDown: (e) => e.key === 'Enter' && blurHandler(e)
                 }) }), loading &&
                 _jsx(LoadingIndicator, {}), clearable && !disabled && !readOnly && (Array.isArray(innerValue.current) ? !!innerValue.current.length : !!innerValue.current) &&
-                _jsx(Button, { className: classes.clear, variant: "plain", color: "text.disabled", onClick: clear, children: _jsx(Icon, { icon: faCircleXmark }) }), !!suffix &&
+                _jsx(Button, { className: classes.clear, variant: "plain", color: "text.disabled", onClick: clear, tabIndex: -1, children: _jsx(Icon, { icon: faCircleXmark }) }), !!suffix &&
                 _jsx("div", { className: classes.suffix, children: suffix })] }));
 });

package/dist/esm/components/pagination/pager.js

@@ -49,5 +49,5 @@ export const PaginationPager = memo((props) => {
                     : renderPageButton(page + i - 5, i === 1 || i === 7);
         });
     };
-    return (_jsxs("div", { ...props, className: clsx(classes.pager, props.className), children: [_jsx(Button, { className: classes.button, variant: "text", size: size, color: "text", disabled: page === 1, onClick: () => onPageChange(page - 1), children: _jsx(Icon, { icon: faAngleLeft }) }), renderPageList(), _jsx(Button, { className: classes.button, variant: "text", size: size, color: "text", disabled: page === pageCount, onClick: () => onPageChange(page + 1), children: _jsx(Icon, { icon: faAngleRight }) })] }));
+    return (_jsxs("div", { ...props, className: clsx(classes.pager, props.className), children: [_jsx(Button, { className: classes.button, variant: "text", size: size, color: "text.secondary", disabled: page === 1, onClick: () => onPageChange(page - 1), children: _jsx(Icon, { icon: faAngleLeft }) }), renderPageList(), _jsx(Button, { className: classes.button, variant: "text", size: size, color: "text.secondary", disabled: page === pageCount, onClick: () => onPageChange(page + 1), children: _jsx(Icon, { icon: faAngleRight }) })] }));
 });

package/dist/esm/components/palette/palette.js

@@ -110,5 +110,5 @@ export const Palette = memo(({ defaultValue, value, onChange, gestureOptions, ..
                         }, ...draggableHandles })] }), _jsxs("div", { className: classes.slidersRow, children: [_jsxs("div", { className: classes.sliders, children: [_jsx(Slider, { ...sliderProps, className: classes.hue, value: colorObject.hue / 359 * 100, onChange: hueChangeHandler }), _jsx(Slider, { ...sliderProps, className: classes.alpha, renderRail: (_, railProps) => _jsxs("div", { ...railProps, children: [railProps.children, _jsx("div", { className: classes.alphaMask, style: { backgroundImage: `linear-gradient(90deg, transparent, ${colorObject.saturated})` } })] }), value: colorObject.alpha * 100, onChange: alphaChangeHandler })] }), _jsx("div", { className: classes.preview, children: _jsx("div", { className: classes.previewColor, style: {
                                 backgroundColor: colorObject.hex,
                                 opacity: colorObject.alpha
-                            } }) })] }), _jsxs("div", { className: classes.inputRow, children: [_jsx(Button, { variant: "plain", color: "text", suffix: _jsx(Icon, { icon: faChevronDown }), onClick: formatChangeHandler, children: availableFormat[activeFormat] }), renderInputs()] })] }));
+                            } }) })] }), _jsxs("div", { className: classes.inputRow, children: [_jsx(Button, { variant: "plain", color: "text.secondary", suffix: _jsx(Icon, { icon: faChevronDown }), onClick: formatChangeHandler, children: availableFormat[activeFormat] }), renderInputs()] })] }));
 });

package/dist/esm/components/pickerDialog/pickerDialog.js

@@ -67,6 +67,6 @@ options = rows ?? nodes, primaryKey = 'id', childrenKey = 'children', relation =
                 ...props.modalProps
             }, ...showSelectedList && {
                 [selectedListPlacement === 'left' ? 'prefix' : 'suffix']: (_jsxs("div", { className: classes.selectedArea, children: [_jsxs(Divider, { className: classes.count, textAlign: "start", children: [_jsxs("div", { children: ["\u5DF2\u9009\u62E9", _jsx("b", { children: selectedCount }), "\u9879"] }), clearable &&
-                                    _jsx(Button, { prefix: _jsx(Icon, { icon: faTrashCan }), variant: "plain", color: "text", onClick: () => setInnerValue(multiple ? [] : null), children: "\u6E05\u7A7A" })] }), _jsx(SelectedList, { itemProps: selectedItemProps, ...selectedListProps, className: clsx(classes.list, selectedListProps?.className) }), _jsx(Button, { className: classes.confirm, disabled: selectedCount === 0, onClick: () => confirmHandler(), children: "\u786E\u5B9A" })] }))
+                                    _jsx(Button, { prefix: _jsx(Icon, { icon: faTrashCan }), variant: "plain", color: "text.secondary", onClick: () => setInnerValue(multiple ? [] : null), children: "\u6E05\u7A7A" })] }), _jsx(SelectedList, { itemProps: selectedItemProps, ...selectedListProps, className: clsx(classes.list, selectedListProps?.className) }), _jsx(Button, { className: classes.confirm, disabled: selectedCount === 0, onClick: () => confirmHandler(), children: "\u786E\u5B9A" })] }))
             }, children: renderChildren() }) }));
 });

package/dist/esm/components/transitionBase/collapse.js

@@ -18,7 +18,7 @@ const Sweeping = ({ ref, in: _in = false, appear = true, orientation = 'vertical
     useEffect(() => {
         if (_in && size.current !== 'auto') {
             requestAnimationFrame(() => {
-                setSize(innerRef.current[orientation === 'vertical' ? 'scrollHeight' : 'scrollWidth']);
+                innerRef.current && setSize(innerRef.current[orientation === 'vertical' ? 'scrollHeight' : 'scrollWidth']);
             });
         }
     }, [_in]);

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

@@ -72,8 +72,8 @@ export const style = defineCss(({ spacing, mode, borderRadius, text, easing, gra
                 align-items: center;
                 justify-content: center;
 
-                .${classes.icon} > svg {
-                    transition: transform .25s ${easing.easeOut};
+                .${classes.icon} {
+                    transition: rotate .25s ${easing.easeOut};
                 }
             }
 

package/dist/esm/components/tree/treeNode.js

@@ -20,14 +20,14 @@ export const TreeNode = memo(({ value, label, prefix, suffix, disabled, _level =
         clickLabelToExpand && toggleExpanded?.(value);
     };
     const hasChildren = !!props.children && (!Array.isArray(props.children) || props.children.length > 0);
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { ...props, className: clsx(classes.node, props.className), "data-selected": status === 2, "data-read-only": readOnly, "data-disabled": disabled, onClick: clickHandler, children: [Array(_level).fill(void 0).map((_, i) => _jsx("div", { className: classes.indent, style: { width: indent } }, i)), _jsx(Button, { className: classes.expand, variant: "plain", color: "text", onClick: e => {
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { ...props, className: clsx(classes.node, props.className), "data-selected": status === 2, "data-read-only": readOnly, "data-disabled": disabled, onClick: clickHandler, children: [Array(_level).fill(void 0).map((_, i) => _jsx("div", { className: classes.indent, style: { width: indent } }, i)), _jsx(Button, { className: classes.expand, variant: "plain", color: "text.secondary", onClick: e => {
                             e.stopPropagation();
                             toggleExpanded?.(value);
                         }, children: renderExpandIcon
                             ? renderExpandIcon(value, !!currentExpanded, [...expandedSet])
                             : hasChildren &&
                                 _jsx(Icon, { icon: faChevronRight, className: classes.icon, style: {
-                                        rotate: currentExpanded ? '90deg' : '0'
+                                        rotate: currentExpanded ? '90deg' : '0deg'
                                     } }) }), showCheckbox &&
                         _jsx(Checkbox, { className: classes.checkbox, checked: status === 2, indeterminate: status === 1, onClick: e => {
                                 e.stopPropagation();

package/dist/esm/components/treeSelect/treeSelect.js

@@ -54,24 +54,24 @@ placeholder = '请选择', autoFocus, clearable, onClear, ...props }) => {
     useMemo(() => {
         // 单选模式下，选中一次就自动关闭弹框
         !props.multiple && setInnerOpen(false);
-    }, [innerValue.current, props.multiple]);
+    }, [innerValue, props.multiple]);
     const clearHandler = () => {
         onClear?.();
         setInnerValue(props.multiple ? [] : void 0);
     };
     const renderBackfillFn = () => {
         if (renderBackfill) {
-            return renderBackfill(innerValue.current);
+            return renderBackfill(innerValue);
         }
         if (props.multiple) {
-            return toArray(innerValue.current)?.map(v => _jsx(Tag, { closable: true, onClose: () => toggleSelected(v), children: optionsMap.get(v)?.[props.labelKey] ?? v }, v));
+            return toArray(innerValue)?.map(v => _jsx(Tag, { closable: true, onClose: () => toggleSelected(v), children: optionsMap.get(v)?.[props.labelKey] ?? v }, v));
         }
-        return (_jsx("div", { className: classes.backfillWrap, children: optionsMap.get(innerValue.current)?.[props.labelKey] ?? innerValue.current }));
+        return (_jsx("div", { className: classes.backfillWrap, children: optionsMap.get(innerValue)?.[props.labelKey] ?? innerValue }));
     };
-    return (_jsx(Popper, { css: popperStyle, open: innerOpen.current, onOpenChange: openChangeHandler, placement: "bottom", variant: "collapse", trigger: ['click', 'enter'], disabled: props.disabled || props.readOnly, sizeAdaptable: sizeAdaptable, content: _jsx(Tree, { ...props, nodes: options, value: innerValue.current, onChange: setInnerValue }), ...popperProps, popperRef: popperRef, onPointerDown: e => {
+    return (_jsx(Popper, { css: popperStyle, open: innerOpen.current, onOpenChange: openChangeHandler, placement: "bottom", variant: "collapse", trigger: ['click', 'enter'], disabled: props.disabled || props.readOnly, sizeAdaptable: sizeAdaptable, content: _jsx(Tree, { ...props, nodes: options, value: innerValue, onChange: setInnerValue }), ...popperProps, popperRef: popperRef, onPointerDown: e => {
             popperProps?.onPointerDown?.(e);
             e.preventDefault();
-        }, children: _jsx(InputBase, { clearable: !!props.multiple, css: style, className: clsx(classes.root, props.className), "data-focused": open, value: innerValue.current, onClear: clearHandler, placeholder: placeholder, autoFocus: autoFocus, disabled: props.disabled, readOnly: props.readOnly, children: ({ ref, ...rest }) => _jsxs("div", { className: classes.contentWrap, children: [!toArray(innerValue.current)?.length
+        }, children: _jsx(InputBase, { clearable: !!props.multiple, css: style, className: clsx(classes.root, props.className), "data-focused": open, value: innerValue, onClear: clearHandler, placeholder: placeholder, autoFocus: autoFocus, disabled: props.disabled, readOnly: props.readOnly, children: ({ ref, ...rest }) => _jsxs("div", { className: classes.contentWrap, children: [!toArray(innerValue)?.length
                         ? _jsx("div", { className: classes.placeholder, children: placeholder })
                         : _jsx("div", { className: classes.backfill, children: renderBackfillFn() }), _jsx("input", { size: 1, ...rest, ...inputProps, ref: cloneRef(ref, inputProps?.ref), "data-hidden": "true" }), _jsx("div", { className: classes.arrow, "data-open": open, children: loading
                             ? _jsx(LoadingIndicator, {})

package/dist/esm/components/upload/imageItem.js

@@ -16,7 +16,7 @@ export const ImageItem = memo((props) => {
                 open: previewOpen,
                 onOpenChange: setPreviewOpen
             }, actions: [
-                _jsx(Button, { size: "small", variant: "text", shape: "circular", color: "text", onClick: () => setPreviewOpen(true), children: _jsx(Icon, { icon: faEye }) }, "preview"),
+                _jsx(Button, { size: "small", variant: "text", shape: "circular", color: "text.secondary", onClick: () => setPreviewOpen(true), children: _jsx(Icon, { icon: faEye }) }, "preview"),
                 _jsx(Button, { size: "small", variant: "text", shape: "circular", color: "error", onClick: props.onRemove, children: _jsx(Icon, { icon: faTrashCan }) }, "delete")
             ], children: status !== 'default' &&
                 _jsx("div", { className: clsx(classes.progress), children: _jsx(Progress, { variant: "circular", showInfo: status !== 'uploading', value: progress, status: status === 'uploading' ? 'processing' : status }) }) }) }));

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

@@ -10,6 +10,7 @@ export declare function columnsToFilterItem(columns?: (CurdColumn<any> | symbol)
 /**
  * 将Curd的Columns转换为FormItem
  * @param columns
+ * @param row
  */
 export declare function columnsToFormItem(columns?: (CurdColumn<any> | symbol)[], row?: Obj): CurdFormItemProps[] | undefined;
 /**

package/dist/esm/utils/curd.js

@@ -12,6 +12,7 @@ export function columnsToFilterItem(columns) {
 /**
  * 将Curd的Columns转换为FormItem
  * @param columns
+ * @param row
  */
 export function columnsToFormItem(columns, row) {
     return columnsTransfer(columns, 'form', row);
@@ -31,7 +32,7 @@ function columnsTransfer(columns, type = 'filter', row) {
             return item.key ? item : cloneElement(item, { key });
         }
         if (item === true) {
-            // filter为true当作空对象处理
+            // item为true当作空对象处理
             item = {};
         }
         if (typeof item === 'object') {
@@ -62,7 +63,7 @@ export function useCurdColumns({ columns, columnConfigurable }) {
     }
     let { defaultVisible, visible, onVisibleChange, defaultOrder, order, onOrderChange } = columnConfigurable;
     if (!defaultVisible || !defaultOrder) {
-        const defaultKeys = columns?.flatMap((col) => col._key ?? []) || [];
+        const defaultKeys = columns?.flatMap((col) => col.hideInTable ? [] : (col._key ?? [])) || [];
         defaultVisible ||= defaultKeys;
         defaultOrder ||= defaultKeys;
     }

package/dist/esm/utils/tree.js

@@ -1,11 +1,13 @@
 import { useCallback, useDeferredValue, useMemo } from 'react';
-import { useControlled } from './hooks';
+import { useControlled, useSync } from './hooks';
 export function useTreeSearch({ nodes, primaryKey = 'id', labelKey = 'label', childrenKey = 'children', searchTokenKey = 'searchToken', defaultExpanded = [], expanded, onExpandedChange, defaultSearchValue = '', searchValue, onSearchChange }) {
     const [innerExpanded, setInnerExpanded] = useControlled(defaultExpanded, expanded);
     const expandedSet = useMemo(() => {
         return new Set(innerExpanded.current);
     }, [innerExpanded.current]);
+    const sync = useSync({ expandedSet, onExpandedChange });
     const toggleExpanded = useCallback((value) => {
+        const { expandedSet, onExpandedChange } = sync.current;
         const currentExpanded = expandedSet.has(value);
         setInnerExpanded(o => {
             const newExpanded = currentExpanded