@canlooks/can-ui 0.0.25 → 0.0.26

package/dist/cjs/components/checkboxBase/checkboxBase.js

@@ -5,12 +5,13 @@ const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const react_1 = require("react");
 const utils_1 = require("../../utils");
 const checkboxBase_style_1 = require("./checkboxBase.style");
-const icons_1 = require("@ant-design/icons");
 const checkboxBaseGroup_1 = require("../checkboxBaseGroup");
-exports.CheckboxBase = (0, react_1.memo)(({ inputProps, inputRef, _type, size, color, label, value, indeterminate, disabled, readOnly, defaultChecked = false, checked, onChange, ...props }) => {
+const __1 = require("../..");
+const faCheck_1 = require("@fortawesome/free-solid-svg-icons/faCheck");
+exports.CheckboxBase = (0, react_1.memo)(({ inputProps, _type, size, color, label, value, indeterminate, disabled, readOnly, defaultChecked = false, checked, onChange, ...props }) => {
     const context = (0, checkboxBaseGroup_1.useCheckboxBaseGroupContext)();
     size ??= context.size || 'medium';
-    color ??= context.color || 'primary';
+    color ||= context.color || 'primary';
     if (_type === 'radio') {
         // "radio"不支持indeterminate
         indeterminate = false;
@@ -35,14 +36,14 @@ exports.CheckboxBase = (0, react_1.memo)(({ inputProps, inputRef, _type, size, c
         inputProps?.onKeyDown?.(e);
         e.key === 'Enter' && clickHandler(e);
     };
-    return ((0, jsx_runtime_1.jsxs)("div", { ...props, css: (0, checkboxBase_style_1.useStyle)({ color }), className: (0, utils_1.classnames)(checkboxBase_style_1.classes.root, props.className), onClick: clickHandler, "data-size": size, "data-checked": innerChecked.current && !indeterminate, "data-disabled": disabled, children: [_type === 'checkbox'
+    return ((0, jsx_runtime_1.jsxs)("div", { ...props, css: (0, checkboxBase_style_1.useStyle)({ color }), className: (0, utils_1.clsx)(checkboxBase_style_1.classes.root, props.className), onClick: clickHandler, "data-size": size, "data-checked": innerChecked.current && !indeterminate, "data-disabled": disabled, children: [_type === 'checkbox'
                 ? (0, jsx_runtime_1.jsx)("div", { ref: checkboxRef, className: checkboxBase_style_1.classes.checkbox, children: indeterminate
                         ? (0, jsx_runtime_1.jsx)("div", { className: checkboxBase_style_1.classes.indeterminate })
                         : innerChecked.current
-                            ? (0, jsx_runtime_1.jsx)(icons_1.CheckOutlined, { className: checkboxBase_style_1.classes.icon })
+                            ? (0, jsx_runtime_1.jsx)(__1.Icon, { icon: faCheck_1.faCheck, className: checkboxBase_style_1.classes.icon })
                             : null })
                 : (0, jsx_runtime_1.jsx)("div", { ref: checkboxRef, className: `${checkboxBase_style_1.classes.checkbox} ${checkboxBase_style_1.classes.radio}`, children: innerChecked.current
                         ? (0, jsx_runtime_1.jsx)("div", { className: checkboxBase_style_1.classes.radioChecked })
                         : null }), !!label &&
-                (0, jsx_runtime_1.jsx)("div", { className: checkboxBase_style_1.classes.label, children: label }), (0, jsx_runtime_1.jsx)("input", { type: _type, disabled: disabled, readOnly: readOnly, ...inputProps, ref: (0, utils_1.cloneRef)(innerInputRef, inputRef), className: (0, utils_1.classnames)(checkboxBase_style_1.classes.input, inputProps?.className), onKeyDown: inputKeydown })] }));
+                (0, jsx_runtime_1.jsx)("div", { className: checkboxBase_style_1.classes.label, children: label }), (0, jsx_runtime_1.jsx)("input", { type: _type, disabled: disabled, readOnly: readOnly, ...inputProps, ref: (0, utils_1.cloneRef)(innerInputRef, inputProps?.ref), className: (0, utils_1.clsx)(checkboxBase_style_1.classes.input, inputProps?.className), onKeyDown: inputKeydown })] }));
 });

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

@@ -25,6 +25,7 @@ function useStyle({ color }) {
             gap: 6px;
             cursor: pointer;
             position: relative;
+            -webkit-tap-highlight-color: transparent;
     
             .${exports.classes.checkbox} {
                 min-width: 16px;
@@ -34,13 +35,13 @@ function useStyle({ color }) {
                 justify-content: center;
                 border: 1px solid ${gray(.7)};
                 border-radius: 4px;
-                transition: border-color .2s ${easing.easeOut};
+                transition: border-color .25s ${easing.easeOut};
                 position: relative;
     
                 .${exports.classes.icon} {
                     font-size: .9em;
                     color: #ffffff;
-                    animation: ${iconAnim} .2s ${easing.swing};
+                    animation: ${iconAnim} .25s ${easing.swing};
                     position: absolute;
                 }
     
@@ -48,7 +49,7 @@ function useStyle({ color }) {
                     width: 60%;
                     height: 4px;
                     background-color: ${colorValue};
-                    animation: ${iconAnim} .2s ${easing.swing};
+                    animation: ${iconAnim} .25s ${easing.swing};
                     position: absolute;
                 }
     
@@ -63,14 +64,14 @@ function useStyle({ color }) {
                 .${exports.classes.radioChecked} {
                     border-radius: inherit;
                     background-color: ${colorValue};
-                    animation: ${iconAnim} .2s ${easing.swing};
+                    animation: ${iconAnim} .25s ${easing.swing};
                     position: absolute;
                     inset: 3px;
                 }
             }
     
             .${exports.classes.label} {
-                transition: color .2s ${easing.easeOut};
+                transition: color .25s ${easing.easeOut};
             }
     
             &[data-size=small] {
@@ -157,7 +158,7 @@ function useStyle({ color }) {
                 pointer-events: none;
             }
     
-            &:has(\.${exports.classes.input}:focus) {
+            &:has(.${exports.classes.input}:focus) {
                 .${exports.classes.checkbox} {
                     outline: 3px solid ${lighter};
                     outline-offset: 1px;;

package/dist/cjs/components/checkboxBaseGroup/checkboxBaseGroup.js

@@ -23,7 +23,7 @@ exports.CheckboxBaseGroup = (({ size, color, items, primaryKey = 'value', multip
             return items.map((p, i) => {
                 const Component = multiple ? checkbox_1.Checkbox : radio_1.Radio;
                 const itemValue = p[primaryKey];
-                return ((0, jsx_runtime_1.jsx)(Component, { inputProps: p.inputProps, inputRef: p.inputRef, label: p.label, indeterminate: p.indeterminate, disabled: p.disabled, readOnly: p.readOnly, size: p.size ?? size, color: p.color ?? color, checked: (0, utils_1.isSelected)(itemValue, innerValue.current), onChange: e => {
+                return ((0, jsx_runtime_1.jsx)(Component, { inputProps: p.inputProps, label: p.label, indeterminate: p.indeterminate, disabled: p.disabled, readOnly: p.readOnly, size: p.size ?? size, color: p.color ?? color, checked: (0, utils_1.isSelected)(itemValue, innerValue), onChange: e => {
                         p.onChange?.(e);
                         toggleSelected(itemValue);
                     } }, p.key ?? itemValue ?? i));
@@ -38,7 +38,7 @@ exports.CheckboxBaseGroup = (({ size, color, items, primaryKey = 'value', multip
             return (0, react_1.cloneElement)(c, {
                 size: props.size ?? size,
                 color: props.color ?? color,
-                checked: (0, utils_1.isSelected)(itemValue, innerValue.current),
+                checked: (0, utils_1.isSelected)(itemValue, innerValue),
                 onChange: e => {
                     props.onChange?.(e);
                     toggleSelected(itemValue);
@@ -46,5 +46,5 @@ exports.CheckboxBaseGroup = (({ size, color, items, primaryKey = 'value', multip
             });
         });
     };
-    return ((0, jsx_runtime_1.jsx)(flex_1.Flex, { gap: spacing[8], ...props, className: (0, utils_1.classnames)(checkboxBaseGroup_style_1.classes.root, props.className), children: renderItems() }));
+    return ((0, jsx_runtime_1.jsx)(flex_1.Flex, { gap: spacing[8], ...props, className: (0, utils_1.clsx)(checkboxBaseGroup_style_1.classes.root, props.className), children: renderItems() }));
 });

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

@@ -1,13 +1,13 @@
 import { ReactElement } from 'react';
-import { DIVProps, DefineElement } from '../../types';
-export interface ClickAwayProps extends DIVProps {
+import { DivProps, DefineElement } from '../../types';
+export interface ClickAwayProps extends DivProps {
     container?: DefineElement<Element | Window>;
     /** 传入addEventListener的事件类型，默认为`'click'` */
     eventType?: string;
     onClickAway?(e: MouseEvent): void;
     disabled?: boolean;
-    children?: ReactElement;
+    children?: ReactElement<any>;
     /** 用于参考的目标元素，若为数组，需要点击数组外的元素才会触发clickAway */
     targets?: () => Element | null | (Element | null)[];
 }
-export declare function ClickAway({ ref, container, eventType, onClickAway, disabled, children, targets, ...props }: ClickAwayProps): ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | undefined;
+export declare function ClickAway({ ref, container, eventType, onClickAway, disabled, children, targets, ...props }: ClickAwayProps): ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;

package/dist/cjs/components/clickAway/clickAway.js

@@ -29,7 +29,7 @@ function ClickAway({ ref, container = self, eventType = 'click', onClickAway, di
             containerEl.removeEventListener(standardEventType, onClick);
         };
     }, [disabled]);
-    const clonedRef = (0, react_1.useCallback)((0, utils_1.cloneRef)(children?.ref, ref, childRef), [children?.ref, ref]);
+    const clonedRef = (0, react_1.useCallback)((0, utils_1.cloneRef)(children?.props.ref, ref, childRef), [children?.props.ref, ref]);
     return !disabled && (0, react_1.isValidElement)(children)
         ? (0, react_1.cloneElement)(children, {
             ...props,

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

@@ -1,21 +1,20 @@
-import React, { ReactNode, Ref } from 'react';
+import { ReactNode, Ref, JSX } from 'react';
 import { PopperProps, PopperRef } from '../popper';
-import { ColorPropsValue, DIVProps, Size } from '../../types';
-import Color from 'color';
-export interface ColorPickerProps extends Omit<DIVProps, 'defaultValue' | 'onChange'> {
-    inputProps?: React.JSX.IntrinsicElements['input'];
-    inputRef?: Ref<HTMLInputElement>;
+import { ColorPropsValue, DivProps, Size } from '../../types';
+import { ColorInstance } from 'color';
+export interface ColorPickerProps extends Omit<DivProps, 'defaultValue' | 'onChange'> {
+    inputProps?: JSX.IntrinsicElements['input'];
     popperProps?: PopperProps;
     popperRef?: Ref<PopperRef>;
     size?: Size;
     shape?: 'square' | 'circular';
     label?: ReactNode;
-    presets?: (ColorPropsValue | Color)[];
+    presets?: (ColorPropsValue | ColorInstance)[];
     defaultOpen?: boolean;
     open?: boolean;
     onOpenChange?(open: boolean): void;
-    defaultValue?: Color;
-    value?: Color;
-    onChange?(color: Color): void;
+    defaultValue?: ColorInstance;
+    value?: ColorInstance;
+    onChange?(color: ColorInstance): void;
 }
-export declare const ColorPicker: React.MemoExoticComponent<({ inputProps, inputRef, popperProps, popperRef, size, shape, label, presets, defaultOpen, open, onOpenChange, defaultValue, value, onChange, ...props }: ColorPickerProps) => import("@emotion/react/jsx-runtime").JSX.Element>;
+export declare const ColorPicker: import("react").MemoExoticComponent<({ inputProps, popperProps, popperRef, size, shape, label, presets, defaultOpen, open, onOpenChange, defaultValue, value, onChange, ...props }: ColorPickerProps) => import("@emotion/react/jsx-runtime").JSX.Element>;

package/dist/cjs/components/colorPicker/colorPicker.js

@@ -11,20 +11,15 @@ const utils_1 = require("../../utils");
 const theme_1 = require("../theme");
 const palette_1 = require("../palette");
 const color_1 = tslib_1.__importDefault(require("color"));
-exports.ColorPicker = (0, react_1.memo)(({ inputProps, inputRef, popperProps, popperRef, size, shape = 'square', label = '自定义', presets, defaultOpen, open, onOpenChange, defaultValue, value, onChange, ...props }) => {
+exports.ColorPicker = (0, react_1.memo)(({ inputProps, popperProps, popperRef, size, shape = 'square', label = '自定义', presets, defaultOpen, open, onOpenChange, defaultValue, value, onChange, ...props }) => {
     const theme = (0, theme_1.useTheme)();
     size ??= theme.size;
-    const [innerOpen, setInnerOpen] = (0, utils_1.useControlled)(defaultOpen, open, onOpenChange);
-    const openChangeHandler = (open) => {
-        popperProps?.onOpenChange?.(open);
-        setInnerOpen(open);
-    };
     const [innerValue, setInnerValue] = (0, utils_1.useControlled)(defaultValue ?? (0, color_1.default)(theme.colors.primary.main, 'hex'), value, onChange);
-    return ((0, jsx_runtime_1.jsxs)("div", { ...props, css: colorPicker_style_1.style, className: (0, utils_1.classnames)(colorPicker_style_1.classes.root, props.className), "data-size": size, "data-shape": shape, children: [presets?.map((color, i) => {
+    return ((0, jsx_runtime_1.jsxs)("div", { ...props, css: colorPicker_style_1.style, className: (0, utils_1.clsx)(colorPicker_style_1.classes.root, props.className), "data-size": size, "data-shape": shape, children: [presets?.map((color, i) => {
                 const colorInstance = (0, color_1.default)(typeof color === 'string' ? (0, utils_1.colorTransfer)(color, theme) : color);
                 return ((0, jsx_runtime_1.jsx)(BlockItem, { selected: colorInstance.hex() === innerValue.current.hex(), color: (0, color_1.default)(color), onClick: () => setInnerValue((0, color_1.default)(color, 'hex')) }, i));
-            }), (0, jsx_runtime_1.jsx)(popper_1.Popper, { css: colorPicker_style_1.colorPickerPopperStyle, open: innerOpen.current, trigger: ['click', 'enter'], placement: "bottomLeft", content: (0, jsx_runtime_1.jsx)(palette_1.Palette, { value: innerValue.current, onChange: setInnerValue }), ...popperProps, popperRef: popperRef, onOpenChange: openChangeHandler, children: (0, jsx_runtime_1.jsx)(inputBase_1.InputBase, { className: colorPicker_style_1.classes.inputBase, size: size, shape: shape === 'circular' ? 'rounded' : shape, children: ({ ref, ...rest }) => (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(BlockItem, { color: innerValue.current }), !!label &&
-                                (0, jsx_runtime_1.jsx)("div", { className: colorPicker_style_1.classes.label, children: label }), (0, jsx_runtime_1.jsx)("input", { ...rest, ...inputProps, ref: (0, utils_1.cloneRef)(ref, inputRef), "data-hidden": "true" })] }) }) })] }));
+            }), (0, jsx_runtime_1.jsx)(popper_1.Popper, { css: colorPicker_style_1.colorPickerPopperStyle, defaultOpen: defaultOpen, open: open, onOpenChange: onOpenChange, trigger: ['click', 'enter'], placement: "bottomLeft", content: (0, jsx_runtime_1.jsx)(palette_1.Palette, { value: innerValue.current, onChange: setInnerValue }), ...popperProps, popperRef: popperRef, children: (0, jsx_runtime_1.jsx)(inputBase_1.InputBase, { className: colorPicker_style_1.classes.inputBase, size: size, shape: shape === 'circular' ? 'rounded' : shape, children: ({ ref, ...rest }) => (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(BlockItem, { color: innerValue.current }), !!label &&
+                                (0, jsx_runtime_1.jsx)("div", { className: colorPicker_style_1.classes.label, children: label }), (0, jsx_runtime_1.jsx)("input", { ...rest, ...inputProps, ref: (0, utils_1.cloneRef)(ref, inputProps?.ref), "data-hidden": "true" })] }) }) })] }));
 });
 function BlockItem({ color, onClick, selected }) {
     const light = (0, react_1.useMemo)(() => color.luminosity() >= .8, [color]);
@@ -32,7 +27,7 @@ function BlockItem({ color, onClick, selected }) {
         hex: color.hex(),
         alpha: color.alpha()
     }), [color]);
-    const showRipple = (0, utils_1.useTouchRipple)(light ? 'disabled' : colorObject.hex);
+    const showRipple = (0, utils_1.useTouchRipple)(light ? 'text.disabled' : colorObject.hex);
     return ((0, jsx_runtime_1.jsx)("div", { className: colorPicker_style_1.classes.block, "data-selected": selected, "data-light": light, onClick: e => {
             onClick?.();
             showRipple(e.currentTarget);

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

@@ -1,7 +1,7 @@
 import { BubbleProps } from '../bubble';
 import { ItemPropType } from '../menu';
+import { ReactNode } from 'react';
 export interface ContextMenuProps extends Omit<BubbleProps, 'onClick'> {
-    items?: ItemPropType[];
-    onClick?(item: ItemPropType): void;
+    items?: (ItemPropType | ReactNode)[];
 }
-export declare function ContextMenu({ items, onClick, ...props }: ContextMenuProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function ContextMenu({ items, ...props }: ContextMenuProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/cjs/components/contextMenu/contextMenu.js

@@ -4,12 +4,14 @@ exports.ContextMenu = ContextMenu;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const bubble_1 = require("../bubble");
 const menuItem_1 = require("../menuItem");
-function ContextMenu({ items, onClick, ...props }) {
+const react_1 = require("react");
+function ContextMenu({ items, ...props }) {
     const renderItems = (items) => {
-        return items?.map((p, i) => (0, jsx_runtime_1.jsx)(menuItem_1.MenuItem, { ...p, onClick: e => {
-                p.onClick?.(e);
-                onClick?.(p);
-            }, children: renderItems(p.children) }, p.value ?? i));
+        return items?.map((p, i) => {
+            return typeof p === 'object' && p && !(0, react_1.isValidElement)(p)
+                ? (0, jsx_runtime_1.jsx)(menuItem_1.MenuItem, { ...p, children: renderItems(p.children) }, p.value ?? i)
+                : p;
+        });
     };
     return ((0, jsx_runtime_1.jsx)(bubble_1.Bubble, { placement: "bottomRight", showArrow: false, ...props, trigger: "contextMenu", content: props.content ?? renderItems(items) }));
 }

package/dist/cjs/components/counter/counter.js

@@ -6,9 +6,11 @@ const react_1 = require("react");
 const counter_style_1 = require("./counter.style");
 const utils_1 = require("../../utils");
 const button_1 = require("../button");
-const icons_1 = require("@ant-design/icons");
 const input_1 = require("../input");
 const flex_1 = require("../flex");
+const __1 = require("../..");
+const faMinus_1 = require("@fortawesome/free-solid-svg-icons/faMinus");
+const faPlus_1 = require("@fortawesome/free-solid-svg-icons/faPlus");
 exports.Counter = (0, react_1.memo)(({ size, min = -Infinity, max = Infinity, step = 1, precision = 0, defaultValue = 0, value, onChange, decreaseProps, increaseProps, inputProps, ...props }) => {
     const [innerValue, setInnerValue] = (0, utils_1.useControlled)(defaultValue, value, onChange);
     const commonButtonProps = {
@@ -19,14 +21,14 @@ exports.Counter = (0, react_1.memo)(({ size, min = -Infinity, max = Infinity, st
     const clickHandler = (dir) => {
         setInnerValue(Math.max(min, Math.min(max, innerValue.current + dir * step)));
     };
-    return ((0, jsx_runtime_1.jsxs)(flex_1.Flex, { compact: true, ...props, css: counter_style_1.style, className: (0, utils_1.classnames)(counter_style_1.classes.root, props.className), children: [(0, jsx_runtime_1.jsx)(button_1.Button, { disabled: innerValue.current <= min, ...commonButtonProps, ...decreaseProps, onClick: e => {
+    return ((0, jsx_runtime_1.jsxs)(flex_1.Flex, { compact: true, ...props, css: counter_style_1.style, className: (0, utils_1.clsx)(counter_style_1.classes.root, props.className), children: [(0, jsx_runtime_1.jsx)(button_1.Button, { disabled: innerValue.current <= min, ...commonButtonProps, ...decreaseProps, onClick: e => {
                     decreaseProps?.onClick?.(e);
                     clickHandler(-1);
-                }, children: (0, jsx_runtime_1.jsx)(icons_1.MinusOutlined, {}) }), (0, jsx_runtime_1.jsx)(input_1.Input, { type: "number", widthAdaptable: true, size: size, min: min, max: max, step: step, precision: precision, ...inputProps, className: (0, utils_1.classnames)(counter_style_1.classes.input, inputProps?.className), value: innerValue.current, onChange: e => {
+                }, children: (0, jsx_runtime_1.jsx)(__1.Icon, { icon: faMinus_1.faMinus }) }), (0, jsx_runtime_1.jsx)(input_1.Input, { type: "number", widthAdaptable: true, size: size, min: min, max: max, step: step, precision: precision, ...inputProps, className: (0, utils_1.clsx)(counter_style_1.classes.input, inputProps?.className), value: innerValue.current, onChange: e => {
                     inputProps?.onChange?.(e);
                     setInnerValue(+e.target.value);
                 } }), (0, jsx_runtime_1.jsx)(button_1.Button, { disabled: innerValue.current >= max, ...commonButtonProps, ...increaseProps, onClick: e => {
                     increaseProps?.onClick?.(e);
                     clickHandler(1);
-                }, children: (0, jsx_runtime_1.jsx)(icons_1.PlusOutlined, {}) })] }));
+                }, children: (0, jsx_runtime_1.jsx)(__1.Icon, { icon: faPlus_1.faPlus }) })] }));
 });

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

@@ -1,5 +1,5 @@
 import { ReactElement, ReactNode, Ref } from 'react';
-import { DIVProps, Id, Obj } from '../../types';
+import { DivProps, Id, Obj } from '../../types';
 import { ColumnType, DataGridBaseProps, DataGridMultipleProps, DataGridSingleProps, OrderType, RowType } from '../dataGrid';
 import { FormItemProps, FormProps, FormRef, FormValue } from '../form';
 import { CurdFilter, CurdFilterProps } from './curdFilter';
@@ -12,7 +12,7 @@ export type CurdFormItemProps<I = any> = FormItemProps<I> & {
     order?: number;
 } & Obj;
 export type CurdFormItemType<I = any> = CurdFormItemProps<I> | ReactElement | true;
-export interface CurdColumn<R extends RowType = RowType> extends ColumnType<R> {
+export interface CurdColumn<R extends RowType = RowType> extends Omit<ColumnType<R>, 'children'> {
     /** 在表格中隐藏，表明该列只用于filter或form */
     hideInTable?: boolean;
     filter?: CurdFormItemType | (() => CurdFormItemType);
@@ -26,7 +26,7 @@ export type LoadRowsReturn<R extends RowType> = {
 type EachRowType<R extends RowType, T> = T | ((row: R) => T);
 export interface CurdBaseProps<R extends RowType, F extends FormValue> extends DataGridBaseProps<R> {
     /** 默认属性会传递给DataGrid组件，外层包裹元素的属性使用wrapperProps */
-    wrapperProps?: DIVProps;
+    wrapperProps?: DivProps;
     wrapperRef?: Ref<HTMLDivElement>;
     /** 嵌入式样式通常用于Dialog或Card组件内 */
     variant?: 'standard' | 'embeded';

package/dist/cjs/components/curd/curd.js

@@ -8,7 +8,6 @@ const curdFilter_1 = require("./curdFilter");
 const curd_style_1 = require("./curd.style");
 const utils_1 = require("../../utils");
 const button_1 = require("../button");
-const icons_1 = require("@ant-design/icons");
 const tooltip_1 = require("../tooltip");
 const curdColumnConfig_1 = require("./curdColumnConfig");
 const curdResizable_1 = require("./curdResizable");
@@ -18,6 +17,11 @@ const curdDialog_1 = require("./curdDialog");
 const app_1 = require("../app");
 const bubbleConfirm_1 = require("../bubbleConfirm");
 const selectionContext_1 = require("../selectionContext");
+const __1 = require("../..");
+const faTrashCan_1 = require("@fortawesome/free-regular-svg-icons/faTrashCan");
+const faPenToSquare_1 = require("@fortawesome/free-regular-svg-icons/faPenToSquare");
+const faPlus_1 = require("@fortawesome/free-solid-svg-icons/faPlus");
+const faRotateRight_1 = require("@fortawesome/free-solid-svg-icons/faRotateRight");
 exports.Curd = (0, react_1.memo)((props) => {
     const { wrapperProps, wrapperRef, variant = 'standard', loadRows, columns, toolbarLeft, toolbarRight, reloadable = true, onReload, resizable = true, columnConfigurable = true, filterProps, filterRef, initialFilterValue, onFilter, renderFilter, copyable, creatable = true, updatable = true, deletable = true, createButtonProps, updateButtonProps, deleteButtonProps, deleteConfirmProps, controlColumnTitle = '操作', renderExtraControl, titleKey, dataName = '', createName = '添加', updateName = '编辑', deleteName = '删除', onCreate, onUpdate, onDelete, postData, dialogProps, formProps, formRef, onChange, ...dataGridProps } = props;
     /**
@@ -59,11 +63,11 @@ exports.Curd = (0, react_1.memo)((props) => {
                 const _updateProps = _updatable ? (typeof updateButtonProps === 'function' ? updateButtonProps(row) : updateButtonProps) : void 0;
                 const _deleteProps = _deletable ? (typeof deleteButtonProps === 'function' ? deleteButtonProps(row) : deleteButtonProps) : void 0;
                 return ((0, jsx_runtime_1.jsxs)("div", { className: curd_style_1.classes.control, children: [renderExtraControl?.(row), _updatable &&
-                            (0, jsx_runtime_1.jsx)(button_1.Button, { prefix: (0, jsx_runtime_1.jsx)(icons_1.EditOutlined, {}), variant: "plain", ..._updateProps, onClick: e => {
+                            (0, jsx_runtime_1.jsx)(button_1.Button, { prefix: (0, jsx_runtime_1.jsx)(__1.Icon, { icon: faPenToSquare_1.faPenToSquare }), variant: "plain", ..._updateProps, onClick: e => {
                                     _updateProps?.onClick?.(e);
                                     updateHandler(row);
                                 }, children: "\u7F16\u8F91" }), _deletable &&
-                            (0, jsx_runtime_1.jsx)(bubbleConfirm_1.BubbleConfirm, { title: `删除${dataName}`, content: `删除后不可恢复，确定要删除该${dataName || '数据'}吗？`, ...deleteConfirmProps, onConfirm: e => deleteHandler(row, e), children: (0, jsx_runtime_1.jsx)(button_1.Button, { prefix: (0, jsx_runtime_1.jsx)(icons_1.DeleteOutlined, {}), variant: "plain", color: "error", ..._deleteProps, children: "\u5220\u9664" }) })] }));
+                            (0, jsx_runtime_1.jsx)(bubbleConfirm_1.BubbleConfirm, { title: `删除${dataName}`, content: `删除后不可恢复，确定要删除该${dataName || '数据'}吗？`, ...deleteConfirmProps, onConfirm: e => deleteHandler(row, e), children: (0, jsx_runtime_1.jsx)(button_1.Button, { prefix: (0, jsx_runtime_1.jsx)(__1.Icon, { icon: faTrashCan_1.faTrashCan }), variant: "plain", color: "error", ..._deleteProps, children: "\u5220\u9664" }) })] }));
             }
         };
         return [...columns || [], controlColumn];
@@ -119,11 +123,11 @@ exports.Curd = (0, react_1.memo)((props) => {
         }
     }, props.loading);
     (0, react_1.useEffect)(() => {
-        innerLoadRows();
+        innerLoadRows().then();
     }, [innerPage.current, innerPageSize.current, innerOrderColumn.current, innerOrderType.current]);
     const reloadHandler = () => {
         onReload?.();
-        innerLoadRows();
+        innerLoadRows().then();
     };
     const syncLoadRows = (0, utils_1.useSync)(innerLoadRows);
     /**
@@ -135,11 +139,11 @@ exports.Curd = (0, react_1.memo)((props) => {
     const createHandler = (e) => {
         createButtonProps?.onClick?.(e);
         activeRow.current = void 0;
-        curdDialogRef.current.open();
+        curdDialogRef.current.open().then();
     };
     const updateHandler = (row) => {
         activeRow.current = row;
-        curdDialogRef.current.open(row);
+        curdDialogRef.current.open(row).then();
     };
     const { message } = (0, app_1.useAppContext)();
     const syncProps = (0, utils_1.useSync)({ dialogProps, onCreate, onUpdate });
@@ -148,8 +152,8 @@ exports.Curd = (0, react_1.memo)((props) => {
         dialogProps?.onFinish?.(formValue);
         if (activeRow.current) {
             await onUpdate?.(formValue, activeRow.current);
-            innerLoadRows();
-            message.success(updateName + '成功');
+            innerLoadRows().then();
+            message.success(updateName + '成功').then();
         }
         else {
             await onCreate?.(formValue);
@@ -158,22 +162,22 @@ exports.Curd = (0, react_1.memo)((props) => {
                 setInnerPage(1);
             }
             else {
-                innerLoadRows();
+                innerLoadRows().then();
             }
-            message.success(createName + '成功');
+            message.success(createName + '成功').then();
         }
     }, []);
     const deleteHandler = async (row, e) => {
         deleteConfirmProps?.onConfirm?.(e);
         await onDelete?.(row);
-        innerLoadRows();
-        message.success(deleteName + '成功');
+        innerLoadRows().then();
+        message.success(deleteName + '成功').then();
     };
-    return ((0, jsx_runtime_1.jsxs)("div", { ...wrapperProps, ref: wrapperRef, css: curd_style_1.style, className: (0, utils_1.classnames)(curd_style_1.classes.root, wrapperProps?.className), "data-variant": variant, children: [renderFilterFn(), (creatable || toolbarLeft || toolbarRight || reloadable || resizable || columnConfigurable) &&
+    return ((0, jsx_runtime_1.jsxs)("div", { ...wrapperProps, ref: wrapperRef, css: curd_style_1.style, className: (0, utils_1.clsx)(curd_style_1.classes.root, wrapperProps?.className), "data-variant": variant, children: [renderFilterFn(), (creatable || toolbarLeft || toolbarRight || reloadable || resizable || columnConfigurable) &&
                 (0, jsx_runtime_1.jsxs)("div", { className: curd_style_1.classes.toolbar, children: [(0, jsx_runtime_1.jsxs)("div", { className: curd_style_1.classes.toolbarLeft, children: [creatable &&
-                                    (0, jsx_runtime_1.jsxs)(button_1.Button, { prefix: (0, jsx_runtime_1.jsx)(icons_1.PlusOutlined, {}), ...createButtonProps, onClick: createHandler, children: [createName, dataName] }), toolbarLeft] }), (0, jsx_runtime_1.jsxs)("div", { className: curd_style_1.classes.toolbarRight, children: [!!toolbarRight &&
+                                    (0, jsx_runtime_1.jsxs)(button_1.Button, { prefix: (0, jsx_runtime_1.jsx)(__1.Icon, { icon: faPlus_1.faPlus }), ...createButtonProps, onClick: createHandler, children: [createName, dataName] }), toolbarLeft] }), (0, jsx_runtime_1.jsxs)("div", { className: curd_style_1.classes.toolbarRight, children: [!!toolbarRight &&
                                     (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [toolbarRight, (0, jsx_runtime_1.jsx)(divider_1.Divider, { className: curd_style_1.classes.divider, orientation: "vertical" })] }), reloadable &&
-                                    (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { title: "\u5237\u65B0", children: (0, jsx_runtime_1.jsx)(button_1.Button, { shape: "circular", variant: "text", color: "text", prefix: (0, jsx_runtime_1.jsx)(icons_1.ReloadOutlined, {}), loading: innerLoading.current, onClick: reloadHandler }) }), resizable &&
+                                    (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { title: "\u5237\u65B0", children: (0, jsx_runtime_1.jsx)(button_1.Button, { shape: "circular", variant: "text", color: "text", prefix: (0, jsx_runtime_1.jsx)(__1.Icon, { icon: faRotateRight_1.faRotateRight }), loading: innerLoading.current, onClick: reloadHandler }) }), resizable &&
                                     (0, jsx_runtime_1.jsx)(curdResizable_1.CurdResizable, { innerSize: innerSize.current, setInnerSize: setInnerSize }), columnConfigurable &&
                                     (0, jsx_runtime_1.jsx)(curdColumnConfig_1.CurdColumnConfig, { columns: orderedColumns, innerVisible: innerVisible.current, setInnerVisible: setInnerVisible, setInnerOrder: setInnerOrder })] })] }), (0, jsx_runtime_1.jsx)("div", { className: curd_style_1.classes.card, children: (0, jsx_runtime_1.jsx)(dataGrid_1.DataGrid, { ...dataGridProps, columns: actualColumns, tableProps: {
                         ...props.tableProps,

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

@@ -4,7 +4,6 @@ exports.CurdColumnConfig = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const react_1 = require("react");
 const button_1 = require("../button");
-const icons_1 = require("@ant-design/icons");
 const bubble_1 = require("../bubble");
 const curdColumnConfig_style_1 = require("./curdColumnConfig.style");
 const menuItem_1 = require("../menuItem");
@@ -13,6 +12,8 @@ const sortableItem_1 = require("../sortableItem");
 const core_1 = require("@dnd-kit/core");
 const sortable_1 = require("@dnd-kit/sortable");
 const utils_1 = require("../../utils");
+const __1 = require("../..");
+const faGear_1 = require("@fortawesome/free-solid-svg-icons/faGear");
 exports.CurdColumnConfig = (0, react_1.memo)(({ columns = [], innerVisible, setInnerVisible, setInnerOrder, }) => {
     const dragEndHandler = (e) => {
         const newColumns = (0, utils_1.onDndDragEnd)(e, columns, '_key');
@@ -26,5 +27,5 @@ exports.CurdColumnConfig = (0, react_1.memo)(({ columns = [], innerVisible, setI
             ? [...o, key]
             : o.filter(k => k !== key));
     };
-    return ((0, jsx_runtime_1.jsx)(bubble_1.Bubble, { css: curdColumnConfig_style_1.style, placement: "bottomRight", content: (0, jsx_runtime_1.jsx)(core_1.DndContext, { sensors: (0, utils_1.useDndSensors)(), onDragEnd: dragEndHandler, children: (0, jsx_runtime_1.jsx)(sortable_1.SortableContext, { items: columns?.map((col, i) => col._key ?? i), children: (0, jsx_runtime_1.jsxs)("div", { className: curdColumnConfig_style_1.classes.content, children: [(0, jsx_runtime_1.jsx)("div", { className: curdColumnConfig_style_1.classes.title, children: "\u5217\u8BBE\u7F6E" }), columns?.map((col, i) => (0, jsx_runtime_1.jsx)(sortableItem_1.SortableItem, { id: col._key ?? i, component: menuItem_1.MenuItem, className: curdColumnConfig_style_1.classes.item, prefix: (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { className: curdColumnConfig_style_1.classes.checkbox, checked: !(0, utils_1.isUnset)(col._key) && visibleSet.has(col._key), onChange: e => !(0, utils_1.isUnset)(col._key) && toggleVisible(col._key, e.target.checked) }), label: col.title }, col._key ?? i))] }) }) }), children: (0, jsx_runtime_1.jsx)(button_1.Button, { shape: "circular", variant: "text", color: "text", children: (0, jsx_runtime_1.jsx)(icons_1.SettingOutlined, {}) }) }));
+    return ((0, jsx_runtime_1.jsx)(bubble_1.Bubble, { css: curdColumnConfig_style_1.style, placement: "bottomRight", content: (0, jsx_runtime_1.jsx)(core_1.DndContext, { sensors: (0, utils_1.useDndSensors)(), onDragEnd: dragEndHandler, children: (0, jsx_runtime_1.jsx)(sortable_1.SortableContext, { items: columns?.map((col, i) => col._key ?? i), children: (0, jsx_runtime_1.jsxs)("div", { className: curdColumnConfig_style_1.classes.content, children: [(0, jsx_runtime_1.jsx)("div", { className: curdColumnConfig_style_1.classes.title, children: "\u5217\u8BBE\u7F6E" }), columns?.map((col, i) => (0, jsx_runtime_1.jsx)(sortableItem_1.SortableItem, { id: col._key ?? i, component: menuItem_1.MenuItem, className: curdColumnConfig_style_1.classes.item, prefix: (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { className: curdColumnConfig_style_1.classes.checkbox, checked: !(0, utils_1.isUnset)(col._key) && visibleSet.has(col._key), onChange: e => !(0, utils_1.isUnset)(col._key) && toggleVisible(col._key, e.target.checked) }), label: col.title }, col._key ?? i))] }) }) }), children: (0, jsx_runtime_1.jsx)(button_1.Button, { shape: "circular", variant: "text", color: "text", children: (0, jsx_runtime_1.jsx)(__1.Icon, { icon: faGear_1.faGear }) }) }));
 });

package/dist/cjs/components/curd/curdDialog.js

@@ -9,9 +9,10 @@ const curd_1 = require("./curd");
 const utils_1 = require("../../utils");
 const loading_1 = require("../loading");
 const button_1 = require("../button");
-const icons_1 = require("@ant-design/icons");
 const curd_style_1 = require("./curd.style");
 const pickerDialog_1 = require("../pickerDialog");
+const __1 = require("../..");
+const faCopy_1 = require("@fortawesome/free-regular-svg-icons/faCopy");
 exports.CurdDialog = (0, react_1.memo)(({ ref, onFinish, 
 // 继承来的属性
 curdProps, ...props }) => {
@@ -21,19 +22,17 @@ curdProps, ...props }) => {
      * ref与promise部分
      */
     const innerFormRef = (0, react_1.useRef)(null);
-    const resolveFn = (0, react_1.useRef)(void 0);
-    const rejectFn = (0, react_1.useRef)(void 0);
+    const resolvers = (0, react_1.useRef)(void 0);
     const [innerOpen, setInnerOpen] = (0, utils_1.useControlled)(props.defaultOpen, props.open);
     const closeHandler = (reason) => {
         if (reason === 'confirmed') {
             return;
         }
         props.onClose?.(reason);
-        rejectFn.current?.({
+        resolvers.current?.reject({
             type: 'canceled',
             value: innerFormRef.current.getFormValue()
         });
-        resolveFn.current = rejectFn.current = void 0;
         setInnerOpen(false);
     };
     (0, react_1.useImperativeHandle)(ref, () => ({
@@ -41,10 +40,8 @@ curdProps, ...props }) => {
             innerFormRef.current?.resetForm();
             setInnerOpen(true);
             setActiveRow(row);
-            return new Promise((resolve, reject) => {
-                resolveFn.current = resolve;
-                rejectFn.current = reject;
-            });
+            const { promise } = resolvers.current = Promise.withResolvers();
+            return promise;
         }
     }));
     /**
@@ -66,12 +63,12 @@ curdProps, ...props }) => {
      * ----------------------------------------------------------------
      * 结果处理与loading
      */
-    const confirmHandler = () => {
-        innerFormRef.current.submit();
+    const confirmHandler = async () => {
+        await innerFormRef.current.submit();
     };
     const [innerLoading, finishHandler] = (0, utils_1.useLoading)(async (value) => {
         formProps?.onFinish?.(value);
-        resolveFn.current?.(value);
+        resolvers.current?.resolve(value);
         await onFinish?.(value);
         setInnerOpen(false);
     }, props.confirmLoading);
@@ -93,6 +90,6 @@ curdProps, ...props }) => {
     return ((0, jsx_runtime_1.jsxs)(dialog_1.Dialog, { css: curd_style_1.dialogStyle, width: 600, title: activeRow
             ? `${updateName}${dataName}${rowTitle ? ' - ' + rowTitle : ''}`
             : (0, jsx_runtime_1.jsxs)("div", { className: curd_style_1.classes.dialogTitle, children: [(0, jsx_runtime_1.jsxs)("span", { children: [createName, dataName] }), copyable &&
-                        (0, jsx_runtime_1.jsxs)(button_1.Button, { variant: "plain", prefix: (0, jsx_runtime_1.jsx)(icons_1.CopyOutlined, {}), onClick: () => pickerDialogRef.current.open(), children: ["\u4ECE\u5DF2\u6709", dataName || '数据', "\u590D\u5236"] })] }), ...props, open: innerOpen.current, onClose: closeHandler, onConfirm: confirmHandler, confirmLoading: innerLoading.current, children: [(0, jsx_runtime_1.jsx)(loading_1.Loading, { loading: transforming.current, children: (0, jsx_runtime_1.jsx)(form_1.Form, { labelWidth: "20%", ...formProps, ref: (0, utils_1.cloneRef)(formRef, innerFormRef), onFinish: finishHandler, children: renderedFormItems }) }), copyable &&
+                        (0, jsx_runtime_1.jsxs)(button_1.Button, { variant: "plain", prefix: (0, jsx_runtime_1.jsx)(__1.Icon, { icon: faCopy_1.faCopy }), onClick: () => pickerDialogRef.current.open(), children: ["\u4ECE\u5DF2\u6709", dataName || '数据', "\u590D\u5236"] })] }), ...props, open: innerOpen.current, onClose: closeHandler, onConfirm: confirmHandler, confirmLoading: innerLoading.current, children: [(0, jsx_runtime_1.jsx)(loading_1.Loading, { open: transforming.current, children: (0, jsx_runtime_1.jsx)(form_1.Form, { labelWidth: "20%", ...formProps, ref: (0, utils_1.cloneRef)(formRef, innerFormRef), onFinish: finishHandler, children: renderedFormItems }) }), copyable &&
                 (0, jsx_runtime_1.jsx)(pickerDialog_1.PickerDialog, { ref: pickerDialogRef, onToggle: copiedHandler, children: (0, jsx_runtime_1.jsx)(curd_1.Curd, { ...curdProps, variant: "embeded", copyable: false, creatable: false, updatable: false, deletable: false }) })] }));
 });

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

@@ -8,9 +8,11 @@ const curd_style_1 = require("./curd.style");
 const utils_1 = require("../../utils");
 const grid_1 = require("../grid");
 const button_1 = require("../button");
-const icons_1 = require("@ant-design/icons");
 const transitionBase_1 = require("../transitionBase");
 const theme_1 = require("../theme");
+const __1 = require("../..");
+const faChevronDown_1 = require("@fortawesome/free-solid-svg-icons/faChevronDown");
+const faFilter_1 = require("@fortawesome/free-solid-svg-icons/faFilter");
 exports.CurdFilter = (0, react_1.memo)(({ ref, columns, expandable, showButton, renderConditions, buttonProps, onFilter, columnCount = 3, ...props }) => {
     const { spacing } = (0, theme_1.useTheme)();
     const items = (0, react_1.useMemo)(() => {
@@ -46,12 +48,12 @@ exports.CurdFilter = (0, react_1.memo)(({ ref, columns, expandable, showButton,
      * 已生效的筛选条件
      */
     const [filteredConditions, setFilteredConditions] = (0, react_1.useState)({});
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(form_1.Form, { ...props, ref: (0, utils_1.cloneRef)(ref, formRef), className: (0, utils_1.classnames)(curd_style_1.classes.filter, props.className), columnCount: columnCount, variant: "plain", onChange: changeHandler, children: !!items?.length &&
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(form_1.Form, { ...props, ref: (0, utils_1.cloneRef)(ref, formRef), className: (0, utils_1.clsx)(curd_style_1.classes.filter, props.className), columnCount: columnCount, variant: "plain", onChange: changeHandler, children: !!items?.length &&
                     (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [expandable
                                 ? (0, jsx_runtime_1.jsx)(transitionBase_1.Collapse, { className: curd_style_1.classes.filterGridContainer, in: expanded, collapsedSize: () => firstItemRef.current?.offsetHeight || 56, appear: false, children: renderedGrid })
                                 : renderedGrid, (expandable || showButton) &&
                                 (0, jsx_runtime_1.jsxs)("div", { className: curd_style_1.classes.filterControl, children: [expandable &&
-                                            (0, jsx_runtime_1.jsx)(button_1.Button, { variant: "text", suffix: (0, jsx_runtime_1.jsx)(icons_1.DownOutlined, { style: { rotate: expanded ? '180deg' : void 0 } }), onClick: () => setExpanded(o => !o), children: expanded ? '收起' : '展开' }), showButton &&
-                                            (0, jsx_runtime_1.jsx)(button_1.Button, { prefix: (0, jsx_runtime_1.jsx)(icons_1.FilterOutlined, {}), variant: "outlined", ...buttonProps, onClick: clickHandler, children: buttonProps?.children ?? '筛选' })] })] }) }), !!renderConditions &&
+                                            (0, jsx_runtime_1.jsx)(button_1.Button, { variant: "text", suffix: (0, jsx_runtime_1.jsx)(__1.Icon, { icon: faChevronDown_1.faChevronDown, style: { rotate: expanded ? '180deg' : void 0 } }), onClick: () => setExpanded(o => !o), children: expanded ? '收起' : '展开' }), showButton &&
+                                            (0, jsx_runtime_1.jsx)(button_1.Button, { prefix: (0, jsx_runtime_1.jsx)(__1.Icon, { icon: faFilter_1.faFilter }), variant: "outlined", ...buttonProps, onClick: clickHandler, children: buttonProps?.children ?? '筛选' })] })] }) }), !!renderConditions &&
                 (0, jsx_runtime_1.jsxs)("div", { className: curd_style_1.classes.filtered, children: [(0, jsx_runtime_1.jsx)("div", { className: curd_style_1.classes.filteredTitle, children: "\u5DF2\u7B5B\u9009\uFF1A" }), renderConditions(filteredConditions, formRef.current)] })] }));
 });

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

@@ -7,7 +7,8 @@ const tooltip_1 = require("../tooltip");
 const bubble_1 = require("../bubble");
 const menuItem_1 = require("../menuItem");
 const button_1 = require("../button");
-const icons_1 = require("@ant-design/icons");
+const __1 = require("../..");
+const faArrowsUpDown_1 = require("@fortawesome/free-solid-svg-icons/faArrowsUpDown");
 exports.CurdResizable = (0, react_1.memo)(({ innerSize, setInnerSize }) => {
-    return ((0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { title: "\u8868\u683C\u5C3A\u5BF8", children: (0, jsx_runtime_1.jsx)(bubble_1.Bubble, { placement: "bottom", content: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(menuItem_1.MenuItem, { value: "small", label: "\u5C0F", selected: innerSize === 'small', onClick: () => setInnerSize('small') }), (0, jsx_runtime_1.jsx)(menuItem_1.MenuItem, { value: "medium", label: "\u4E2D", selected: innerSize === 'medium', onClick: () => setInnerSize('medium') }), (0, jsx_runtime_1.jsx)(menuItem_1.MenuItem, { value: "large", label: "\u5927", selected: innerSize === 'large', onClick: () => setInnerSize('large') })] }), children: (0, jsx_runtime_1.jsx)(button_1.Button, { shape: "circular", variant: "text", color: "text", children: (0, jsx_runtime_1.jsx)(icons_1.ColumnHeightOutlined, {}) }) }) }));
+    return ((0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { title: "\u8868\u683C\u5C3A\u5BF8", children: (0, jsx_runtime_1.jsx)(bubble_1.Bubble, { placement: "bottom", content: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(menuItem_1.MenuItem, { value: "small", label: "\u5C0F", selected: innerSize === 'small', onClick: () => setInnerSize('small') }), (0, jsx_runtime_1.jsx)(menuItem_1.MenuItem, { value: "medium", label: "\u4E2D", selected: innerSize === 'medium', onClick: () => setInnerSize('medium') }), (0, jsx_runtime_1.jsx)(menuItem_1.MenuItem, { value: "large", label: "\u5927", selected: innerSize === 'large', onClick: () => setInnerSize('large') })] }), children: (0, jsx_runtime_1.jsx)(button_1.Button, { shape: "circular", variant: "text", color: "text", children: (0, jsx_runtime_1.jsx)(__1.Icon, { icon: faArrowsUpDown_1.faArrowsUpDown }) }) }) }));
 });

package/dist/cjs/components/dataGrid/columnResize.d.ts

@@ -0,0 +1,10 @@
+import { ThCellProps } from '../table';
+import { ComponentType, ReactNode, RefObject } from 'react';
+export declare function ColumnResizeContext({ columnResizable, children }: {
+    columnResizable: boolean;
+    children(ref: {
+        scrollerRef: RefObject<HTMLDivElement | null>;
+        tableRef: RefObject<HTMLTableElement | null>;
+    }): ReactNode;
+}): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function useRenderHead<T extends ReactNode>(render: (Column: ComponentType<ThCellProps>) => T): T;