@canlooks/can-ui 0.0.180 → 0.0.182

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

@@ -8,7 +8,7 @@ export interface ClickAwayProps extends DivProps {
     disabled?: boolean;
     children?: ReactElement<any>;
     /** 用于参考的目标元素，若为数组，需要点击数组外的元素才会触发clickAway */
-    targets?: () => Element | undefined | (Element | undefined)[];
+    targets?: () => Element | null | undefined | (Element | null | undefined)[];
 }
 export declare function ClickAway({ ref, container, eventType, onClickAway, disabled, children, targets, ...props }: ClickAwayProps): ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").FunctionComponentElement<{
     ref: (ref: Element | null) => void;

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

@@ -24,9 +24,9 @@ function ClickAway({ ref, container = self, eventType = 'click', onClickAway, di
         };
         const containerEl = typeof container === 'function' ? container() : container;
         const standardEventType = eventType.toLowerCase().replace(/^on/, '');
-        containerEl.addEventListener(standardEventType, onClick);
+        containerEl?.addEventListener(standardEventType, onClick);
         return () => {
-            containerEl.removeEventListener(standardEventType, onClick);
+            containerEl?.removeEventListener(standardEventType, onClick);
         };
     }, [disabled]);
     return !disabled && (0, react_1.isValidElement)(children)

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

@@ -7,6 +7,7 @@ import { FieldPath } from '../../utils';
 import { ButtonProps } from '../button';
 import { CurdDialogProps } from './curdDialog';
 import { BubbleConfirmProps } from '../bubbleConfirm';
+import { BubbleProps } from '../bubble';
 export type CurdFormItemProps<I = any> = FormItemProps<I> & {
     /** 对filter或form内的字段单独排序，数字越大越靠后，默认为`0` */
     order?: number;
@@ -61,6 +62,8 @@ export interface CurdBaseProps<R extends RowType = RowType, F extends FormValue
     reloadable?: boolean;
     onReload?(): void;
     resizable?: boolean;
+    defaultSize?: Size;
+    onSizeChange?(size: Size): void;
     columnConfigurable?: boolean | {
         defaultVisible?: Id[];
         visible?: Id[];
@@ -69,8 +72,8 @@ export interface CurdBaseProps<R extends RowType = RowType, F extends FormValue
         order?: Id[];
         onOrderChange?(order: Id[]): void;
     };
-    defaultSize?: Size;
-    onSizeChange?(size: Size): void;
+    resizeBubbleProps?: BubbleProps;
+    columnConfigBubbleProps?: BubbleProps;
     filterableProps?: Omit<CurdFilterableProps, 'columns'>;
     renderFilterable?(filterableProps: CurdFilterableProps): ReactNode;
     renderFilterConditions?: CurdFilterableProps['renderFilterConditions'];

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

@@ -24,7 +24,7 @@ const faPenToSquare_1 = require("@fortawesome/free-regular-svg-icons/faPenToSqua
 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 { ref, wrapperProps, variant = 'standard', loadRows, onLoad, columns, toolbarLeft, toolbarRight, reloadable = true, onReload, resizable = true, columnConfigurable = true, defaultSize = 'medium', onSizeChange, filterProps, initialFilterValue, onFilter, filterableProps, renderFilterable, renderFilterConditions, copyable, creatable = true, updatable = true, deletable = true, createButtonProps, updateButtonProps, deleteButtonProps, deleteConfirmProps, controlColumnTitle = '操作', renderExtraControl, titleKey, dataName = '', createName = '添加', updateName = '编辑', deleteName = '删除', onCreate, onUpdate, onDelete, rowToForm, dialogProps, formProps, formRef, onChange, ...dataGridProps } = props;
+    const { ref, wrapperProps, variant = 'standard', loadRows, onLoad, columns, toolbarLeft, toolbarRight, reloadable = true, onReload, resizable = true, defaultSize = 'medium', onSizeChange, columnConfigurable = true, resizeBubbleProps, columnConfigBubbleProps, filterProps, initialFilterValue, onFilter, filterableProps, renderFilterable, renderFilterConditions, copyable, creatable = true, updatable = true, deletable = true, createButtonProps, updateButtonProps, deleteButtonProps, deleteConfirmProps, controlColumnTitle = '操作', renderExtraControl, titleKey, dataName = '', createName = '添加', updateName = '编辑', deleteName = '删除', onCreate, onUpdate, onDelete, rowToForm, dialogProps, formProps, formRef, onChange, ...dataGridProps } = props;
     /**
      * -------------------------------------------------------------
      * ref
@@ -248,8 +248,8 @@ exports.Curd = (0, react_1.memo)((props) => {
                                             (0, jsx_runtime_1.jsxs)(button_1.Button, { prefix: (0, jsx_runtime_1.jsx)(icon_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.secondary", prefix: (0, jsx_runtime_1.jsx)(icon_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, slotProps: {
+                                            (0, jsx_runtime_1.jsx)(curdResizable_1.CurdResizable, { innerSize: innerSize.current, setInnerSize: setInnerSize, resizeBubbleProps: resizeBubbleProps }), columnConfigurable &&
+                                            (0, jsx_runtime_1.jsx)(curdColumnConfig_1.CurdColumnConfig, { columns: orderedColumns, innerVisible: innerVisible.current, setInnerVisible: setInnerVisible, setInnerOrder: setInnerOrder, columnConfigBubbleProps: columnConfigBubbleProps })] })] }), (0, jsx_runtime_1.jsx)("div", { className: curd_style_1.classes.card, children: (0, jsx_runtime_1.jsx)(dataGrid_1.DataGrid, { ...dataGridProps, slotProps: {
                                 container: { ref: (0, utils_1.cloneRef)(containerRef, dataGridProps?.slotProps?.container?.ref) }
                             }, tableProps: {
                                 ...props.tableProps,

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

@@ -1,4 +1,5 @@
 import { Dispatch, ReactElement, SetStateAction } from 'react';
+import { BubbleProps } from '../bubble';
 import { CurdColumn } from './curd';
 import { RowType } from '../dataGrid';
 import { Id } from '../../types';
@@ -7,5 +8,6 @@ export type CurdColumnConfigProps<R extends RowType> = {
     innerVisible: Id[] | undefined;
     setInnerVisible: Dispatch<SetStateAction<Id[] | undefined>>;
     setInnerOrder: Dispatch<SetStateAction<Id[] | undefined>>;
+    columnConfigBubbleProps?: BubbleProps;
 };
 export declare const CurdColumnConfig: <R extends RowType>(props: CurdColumnConfigProps<R>) => ReactElement;

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

@@ -20,7 +20,7 @@ exports.CurdColumnConfig = (0, react_1.memo)((props) => {
     };
     return ((0, jsx_runtime_1.jsx)(react_2.DragDropProvider, { sensors: utils_1.defaultSensors, onDragEnd: dragEndHandler, children: (0, jsx_runtime_1.jsx)(CurdColumnConfigContent, { ...props }) }));
 });
-const CurdColumnConfigContent = (0, react_1.memo)(({ columns, innerVisible, setInnerVisible }) => {
+const CurdColumnConfigContent = (0, react_1.memo)(({ columns, innerVisible, setInnerVisible, columnConfigBubbleProps }) => {
     const isDragging = (0, react_1.useRef)(false);
     (0, react_2.useDragDropMonitor)({
         onDragStart: () => isDragging.current = true,
@@ -28,6 +28,7 @@ const CurdColumnConfigContent = (0, react_1.memo)(({ columns, innerVisible, setI
     });
     const [open, setOpen] = (0, react_1.useState)(false);
     const openChangeHandler = (open) => {
+        columnConfigBubbleProps?.onOpenChange?.(open);
         if (open || !isDragging.current) {
             setOpen(open);
         }
@@ -40,7 +41,7 @@ const CurdColumnConfigContent = (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, open: open, onOpenChange: openChangeHandler, placement: "bottomRight", trigger: ['hover', 'click'], content: (0, jsx_runtime_1.jsxs)("div", { className: curdColumnConfig_style_1.classes.content, children: [(0, jsx_runtime_1.jsxs)("div", { className: curdColumnConfig_style_1.classes.title, children: [(0, jsx_runtime_1.jsx)("div", { className: curdColumnConfig_style_1.classes.titleText, children: "\u5217\u8BBE\u7F6E" }), (0, jsx_runtime_1.jsx)("div", { className: curdColumnConfig_style_1.classes.description, children: "\u62D6\u62FD\u8C03\u6574\u987A\u5E8F" })] }), columns?.map((col, i) => {
+    return ((0, jsx_runtime_1.jsx)(bubble_1.Bubble, { placement: "bottomRight", trigger: ['hover', 'click'], ...columnConfigBubbleProps, css: curdColumnConfig_style_1.style, open: open, onOpenChange: openChangeHandler, content: (0, jsx_runtime_1.jsxs)("div", { className: curdColumnConfig_style_1.classes.content, children: [(0, jsx_runtime_1.jsxs)("div", { className: curdColumnConfig_style_1.classes.title, children: [(0, jsx_runtime_1.jsx)("div", { className: curdColumnConfig_style_1.classes.titleText, children: "\u5217\u8BBE\u7F6E" }), (0, jsx_runtime_1.jsx)("div", { className: curdColumnConfig_style_1.classes.description, children: "\u62D6\u62FD\u8C03\u6574\u987A\u5E8F" })] }), columns?.map((col, i) => {
                     const id = col._key;
                     const checked = !(0, utils_1.isUnset)(id) && (!visibleSet || visibleSet.has(id));
                     return ((0, jsx_runtime_1.jsx)(sortableItem_1.SortableItem, { id: id ?? i, index: 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: checked, onChange: e => {

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

@@ -1,6 +1,8 @@
 import { Dispatch, SetStateAction } from 'react';
+import { BubbleProps } from '../bubble';
 import { Size } from '../../types';
-export declare const CurdResizable: import("react").MemoExoticComponent<({ innerSize, setInnerSize }: {
+export declare const CurdResizable: import("react").MemoExoticComponent<({ innerSize, setInnerSize, resizeBubbleProps }: {
     innerSize: Size;
     setInnerSize: Dispatch<SetStateAction<Size>>;
+    resizeBubbleProps?: BubbleProps;
 }) => import("@emotion/react/jsx-runtime").JSX.Element>;

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

@@ -9,6 +9,6 @@ const menuItem_1 = require("../menuItem");
 const button_1 = require("../button");
 const icon_1 = require("../icon");
 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", clickToClose: true, children: (0, jsx_runtime_1.jsx)(bubble_1.Bubble, { placement: "bottom", trigger: "click", 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.secondary", children: (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faArrowsUpDown_1.faArrowsUpDown }) }) }) }));
+exports.CurdResizable = (0, react_1.memo)(({ innerSize, setInnerSize, resizeBubbleProps }) => {
+    return ((0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { title: "\u8868\u683C\u5C3A\u5BF8", clickToClose: true, children: (0, jsx_runtime_1.jsx)(bubble_1.Bubble, { placement: "bottom", trigger: "click", ...resizeBubbleProps, 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.secondary", children: (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faArrowsUpDown_1.faArrowsUpDown }) }) }) }));
 });

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

@@ -2,8 +2,8 @@ import { ReactNode } from 'react';
 import { ColorPropsValue, DivProps, Size } from '../../types';
 import { DatePickerSharedProps, DateTimePickerProps } from '../dateTimePicker';
 import { Dayjs } from 'dayjs';
-type DateValueType = [Dayjs | null, Dayjs | null] | null;
-type PickerType = 'start' | 'end';
+export type DateValueType = [Dayjs | null, Dayjs | null] | null;
+export type PickerType = 'start' | 'end';
 export interface DateTimeRangePickerProps extends DatePickerSharedProps, Omit<DivProps, 'defaultValue' | 'onChange'> {
     startPickerProps?: DateTimePickerProps;
     endPickerProps?: DateTimePickerProps;
@@ -25,4 +25,3 @@ export interface DateTimeRangePickerProps extends DatePickerSharedProps, Omit<Di
     autoFocus?: boolean;
 }
 export declare const DateTimeRangePicker: import("react").MemoExoticComponent<({ startPickerProps, endPickerProps, format, defaultValue, value, onChange, defaultOpenPicker, openPicker, onOpenPickerChange, autoClose, separator, min, max, disabledDates, disabledHours, disabledMinutes, disabledSeconds, variant, size, color, disabled, readOnly, autoFocus, ...props }: DateTimeRangePickerProps) => import("@emotion/react/jsx-runtime").JSX.Element>;
-export {};

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

@@ -24,4 +24,4 @@ export interface OverlayBaseProps extends DivProps {
     removeFocusOnOpen?: boolean;
 }
 export declare const overlayBaseTransitionDuration = 300;
-export declare function OverlayBase({ container, effectContainer, forceRender, open, onMaskClick, singleLayer, onOpened, onClosed, maskProps, removeFocusOnOpen, ...props }: OverlayBaseProps): false | React.ReactPortal | null;
+export declare function OverlayBase({ container, effectContainer, forceRender, open, onMaskClick, singleLayer, onOpened, onClosed, maskProps, removeFocusOnOpen, ...props }: OverlayBaseProps): false | React.ReactPortal | null | undefined;

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

@@ -30,7 +30,7 @@ export declare const SnackbarBase: React.MemoExoticComponent<({ methods, useTo,
     max?: number;
     container?: DefineElement<HTMLElement>;
     effectContainer?: DefineElement<HTMLElement>;
-}) => React.ReactPortal | null>;
+}) => React.ReactPortal | null | undefined>;
 interface SnackbarBaseItemProps extends Omit<SnackbarBaseProps, 'duration' | 'onAutoClose'> {
     id: string;
     type: keyof SnackbarBaseMethods;

package/dist/cjs/types.d.ts

@@ -21,7 +21,7 @@ export type Size = 'small' | 'medium' | 'large';
 export type CornerPlacement = 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight' | 'leftTop' | 'leftBottom' | 'rightTop' | 'rightBottom';
 export type BlockPlacement = CornerPlacement | 'top' | 'bottom';
 export type Placement = BlockPlacement | 'left' | 'right';
-export type DefineElement<T = Element | null | undefined> = T | (() => T);
+export type DefineElement<T = Element> = T | null | undefined | (() => T | null | undefined);
 /**
  * ----------------------------------------------------------------------------------
  * Responsive

package/dist/cjs/utils/hooks.d.ts

@@ -51,7 +51,7 @@ export declare function useLoading<A extends any[], R>(fn: (...args: A) => R | P
  * @param effectContainer
  * @param defaultContainer 默认为`document.body`
  */
-export declare function useContainer<T extends HTMLElement | null>(container?: DefineElement<T>, effectContainer?: DefineElement<T>, defaultContainer?: DefineElement<T>): RefObject<T | null>;
+export declare function useContainer<T extends HTMLElement | null>(container?: DefineElement<T>, effectContainer?: DefineElement<T>, defaultContainer?: DefineElement<T>): RefObject<T | null | undefined>;
 /**
  * 使用外部类，该方法可避免`StrictMode`下，React渲染行为与外部类实例生命周期不同步的问题
  */

package/dist/cjs/utils/hooks.js

@@ -126,7 +126,6 @@ function useLoading(fn, referredLoading = false) {
                     return await res;
                 }
                 finally {
-                    console.log(157, unmounted.current);
                     !unmounted.current && setLoading(false);
                 }
             }
@@ -146,7 +145,7 @@ function useContainer(container, effectContainer, defaultContainer) {
         if (container) {
             return typeof container === 'function' ? container() : container;
         }
-        return prev || null;
+        return prev;
     }, [container]);
     (0, react_1.useEffect)(() => {
         let _container = effectContainer || defaultContainer;

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

@@ -8,7 +8,7 @@ export interface ClickAwayProps extends DivProps {
     disabled?: boolean;
     children?: ReactElement<any>;
     /** 用于参考的目标元素，若为数组，需要点击数组外的元素才会触发clickAway */
-    targets?: () => Element | undefined | (Element | undefined)[];
+    targets?: () => Element | null | undefined | (Element | null | undefined)[];
 }
 export declare function ClickAway({ ref, container, eventType, onClickAway, disabled, children, targets, ...props }: ClickAwayProps): ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").FunctionComponentElement<{
     ref: (ref: Element | null) => void;

package/dist/esm/components/clickAway/clickAway.js

@@ -21,9 +21,9 @@ export function ClickAway({ ref, container = self, eventType = 'click', onClickA
         };
         const containerEl = typeof container === 'function' ? container() : container;
         const standardEventType = eventType.toLowerCase().replace(/^on/, '');
-        containerEl.addEventListener(standardEventType, onClick);
+        containerEl?.addEventListener(standardEventType, onClick);
         return () => {
-            containerEl.removeEventListener(standardEventType, onClick);
+            containerEl?.removeEventListener(standardEventType, onClick);
         };
     }, [disabled]);
     return !disabled && isValidElement(children)

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

@@ -7,6 +7,7 @@ import { FieldPath } from '../../utils/index.js';
 import { ButtonProps } from '../button/index.js';
 import { CurdDialogProps } from './curdDialog.js';
 import { BubbleConfirmProps } from '../bubbleConfirm/index.js';
+import { BubbleProps } from '../bubble/index.js';
 export type CurdFormItemProps<I = any> = FormItemProps<I> & {
     /** 对filter或form内的字段单独排序，数字越大越靠后，默认为`0` */
     order?: number;
@@ -61,6 +62,8 @@ export interface CurdBaseProps<R extends RowType = RowType, F extends FormValue
     reloadable?: boolean;
     onReload?(): void;
     resizable?: boolean;
+    defaultSize?: Size;
+    onSizeChange?(size: Size): void;
     columnConfigurable?: boolean | {
         defaultVisible?: Id[];
         visible?: Id[];
@@ -69,8 +72,8 @@ export interface CurdBaseProps<R extends RowType = RowType, F extends FormValue
         order?: Id[];
         onOrderChange?(order: Id[]): void;
     };
-    defaultSize?: Size;
-    onSizeChange?(size: Size): void;
+    resizeBubbleProps?: BubbleProps;
+    columnConfigBubbleProps?: BubbleProps;
     filterableProps?: Omit<CurdFilterableProps, 'columns'>;
     renderFilterable?(filterableProps: CurdFilterableProps): ReactNode;
     renderFilterConditions?: CurdFilterableProps['renderFilterConditions'];

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

@@ -21,7 +21,7 @@ import { faPenToSquare } from '@fortawesome/free-regular-svg-icons/faPenToSquare
 import { faPlus } from '@fortawesome/free-solid-svg-icons/faPlus';
 import { faRotateRight } from '@fortawesome/free-solid-svg-icons/faRotateRight';
 export const Curd = memo((props) => {
-    const { ref, wrapperProps, variant = 'standard', loadRows, onLoad, columns, toolbarLeft, toolbarRight, reloadable = true, onReload, resizable = true, columnConfigurable = true, defaultSize = 'medium', onSizeChange, filterProps, initialFilterValue, onFilter, filterableProps, renderFilterable, renderFilterConditions, copyable, creatable = true, updatable = true, deletable = true, createButtonProps, updateButtonProps, deleteButtonProps, deleteConfirmProps, controlColumnTitle = '操作', renderExtraControl, titleKey, dataName = '', createName = '添加', updateName = '编辑', deleteName = '删除', onCreate, onUpdate, onDelete, rowToForm, dialogProps, formProps, formRef, onChange, ...dataGridProps } = props;
+    const { ref, wrapperProps, variant = 'standard', loadRows, onLoad, columns, toolbarLeft, toolbarRight, reloadable = true, onReload, resizable = true, defaultSize = 'medium', onSizeChange, columnConfigurable = true, resizeBubbleProps, columnConfigBubbleProps, filterProps, initialFilterValue, onFilter, filterableProps, renderFilterable, renderFilterConditions, copyable, creatable = true, updatable = true, deletable = true, createButtonProps, updateButtonProps, deleteButtonProps, deleteConfirmProps, controlColumnTitle = '操作', renderExtraControl, titleKey, dataName = '', createName = '添加', updateName = '编辑', deleteName = '删除', onCreate, onUpdate, onDelete, rowToForm, dialogProps, formProps, formRef, onChange, ...dataGridProps } = props;
     /**
      * -------------------------------------------------------------
      * ref
@@ -245,8 +245,8 @@ export const Curd = memo((props) => {
                                             _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.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, slotProps: {
+                                            _jsx(CurdResizable, { innerSize: innerSize.current, setInnerSize: setInnerSize, resizeBubbleProps: resizeBubbleProps }), columnConfigurable &&
+                                            _jsx(CurdColumnConfig, { columns: orderedColumns, innerVisible: innerVisible.current, setInnerVisible: setInnerVisible, setInnerOrder: setInnerOrder, columnConfigBubbleProps: columnConfigBubbleProps })] })] }), _jsx("div", { className: classes.card, children: _jsx(DataGrid, { ...dataGridProps, slotProps: {
                                 container: { ref: cloneRef(containerRef, dataGridProps?.slotProps?.container?.ref) }
                             }, tableProps: {
                                 ...props.tableProps,

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

@@ -1,4 +1,5 @@
 import { Dispatch, ReactElement, SetStateAction } from 'react';
+import { BubbleProps } from '../bubble/index.js';
 import { CurdColumn } from './curd.js';
 import { RowType } from '../dataGrid/index.js';
 import { Id } from '../../types.js';
@@ -7,5 +8,6 @@ export type CurdColumnConfigProps<R extends RowType> = {
     innerVisible: Id[] | undefined;
     setInnerVisible: Dispatch<SetStateAction<Id[] | undefined>>;
     setInnerOrder: Dispatch<SetStateAction<Id[] | undefined>>;
+    columnConfigBubbleProps?: BubbleProps;
 };
 export declare const CurdColumnConfig: <R extends RowType>(props: CurdColumnConfigProps<R>) => ReactElement;

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

@@ -17,7 +17,7 @@ export const CurdColumnConfig = memo((props) => {
     };
     return (_jsx(DragDropProvider, { sensors: defaultSensors, onDragEnd: dragEndHandler, children: _jsx(CurdColumnConfigContent, { ...props }) }));
 });
-const CurdColumnConfigContent = memo(({ columns, innerVisible, setInnerVisible }) => {
+const CurdColumnConfigContent = memo(({ columns, innerVisible, setInnerVisible, columnConfigBubbleProps }) => {
     const isDragging = useRef(false);
     useDragDropMonitor({
         onDragStart: () => isDragging.current = true,
@@ -25,6 +25,7 @@ const CurdColumnConfigContent = memo(({ columns, innerVisible, setInnerVisible }
     });
     const [open, setOpen] = useState(false);
     const openChangeHandler = (open) => {
+        columnConfigBubbleProps?.onOpenChange?.(open);
         if (open || !isDragging.current) {
             setOpen(open);
         }
@@ -37,7 +38,7 @@ const CurdColumnConfigContent = memo(({ columns, innerVisible, setInnerVisible }
             ? [...o, key]
             : o.filter(k => k !== key));
     };
-    return (_jsx(Bubble, { css: style, open: open, onOpenChange: openChangeHandler, placement: "bottomRight", trigger: ['hover', 'click'], content: _jsxs("div", { className: classes.content, children: [_jsxs("div", { className: classes.title, children: [_jsx("div", { className: classes.titleText, children: "\u5217\u8BBE\u7F6E" }), _jsx("div", { className: classes.description, children: "\u62D6\u62FD\u8C03\u6574\u987A\u5E8F" })] }), columns?.map((col, i) => {
+    return (_jsx(Bubble, { placement: "bottomRight", trigger: ['hover', 'click'], ...columnConfigBubbleProps, css: style, open: open, onOpenChange: openChangeHandler, content: _jsxs("div", { className: classes.content, children: [_jsxs("div", { className: classes.title, children: [_jsx("div", { className: classes.titleText, children: "\u5217\u8BBE\u7F6E" }), _jsx("div", { className: classes.description, children: "\u62D6\u62FD\u8C03\u6574\u987A\u5E8F" })] }), columns?.map((col, i) => {
                     const id = col._key;
                     const checked = !isUnset(id) && (!visibleSet || visibleSet.has(id));
                     return (_jsx(SortableItem, { id: id ?? i, index: i, component: MenuItem, className: classes.item, prefix: _jsx(Checkbox, { className: classes.checkbox, checked: checked, onChange: e => {

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

@@ -1,6 +1,8 @@
 import { Dispatch, SetStateAction } from 'react';
+import { BubbleProps } from '../bubble/index.js';
 import { Size } from '../../types.js';
-export declare const CurdResizable: import("react").MemoExoticComponent<({ innerSize, setInnerSize }: {
+export declare const CurdResizable: import("react").MemoExoticComponent<({ innerSize, setInnerSize, resizeBubbleProps }: {
     innerSize: Size;
     setInnerSize: Dispatch<SetStateAction<Size>>;
+    resizeBubbleProps?: BubbleProps;
 }) => import("@emotion/react/jsx-runtime").JSX.Element>;

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

@@ -6,6 +6,6 @@ import { MenuItem } from '../menuItem/index.js';
 import { Button } from '../button/index.js';
 import { Icon } from '../icon/index.js';
 import { faArrowsUpDown } from '@fortawesome/free-solid-svg-icons/faArrowsUpDown';
-export const CurdResizable = memo(({ innerSize, setInnerSize }) => {
-    return (_jsx(Tooltip, { title: "\u8868\u683C\u5C3A\u5BF8", clickToClose: true, children: _jsx(Bubble, { placement: "bottom", trigger: "click", 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 }) }) }) }));
+export const CurdResizable = memo(({ innerSize, setInnerSize, resizeBubbleProps }) => {
+    return (_jsx(Tooltip, { title: "\u8868\u683C\u5C3A\u5BF8", clickToClose: true, children: _jsx(Bubble, { placement: "bottom", trigger: "click", ...resizeBubbleProps, 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/dateTimeRangePicker/dateTimeRangePicker.d.ts

@@ -2,8 +2,8 @@ import { ReactNode } from 'react';
 import { ColorPropsValue, DivProps, Size } from '../../types.js';
 import { DatePickerSharedProps, DateTimePickerProps } from '../dateTimePicker/index.js';
 import { Dayjs } from 'dayjs';
-type DateValueType = [Dayjs | null, Dayjs | null] | null;
-type PickerType = 'start' | 'end';
+export type DateValueType = [Dayjs | null, Dayjs | null] | null;
+export type PickerType = 'start' | 'end';
 export interface DateTimeRangePickerProps extends DatePickerSharedProps, Omit<DivProps, 'defaultValue' | 'onChange'> {
     startPickerProps?: DateTimePickerProps;
     endPickerProps?: DateTimePickerProps;
@@ -25,4 +25,3 @@ export interface DateTimeRangePickerProps extends DatePickerSharedProps, Omit<Di
     autoFocus?: boolean;
 }
 export declare const DateTimeRangePicker: import("react").MemoExoticComponent<({ startPickerProps, endPickerProps, format, defaultValue, value, onChange, defaultOpenPicker, openPicker, onOpenPickerChange, autoClose, separator, min, max, disabledDates, disabledHours, disabledMinutes, disabledSeconds, variant, size, color, disabled, readOnly, autoFocus, ...props }: DateTimeRangePickerProps) => import("@emotion/react/jsx-runtime").JSX.Element>;
-export {};

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

@@ -24,4 +24,4 @@ export interface OverlayBaseProps extends DivProps {
     removeFocusOnOpen?: boolean;
 }
 export declare const overlayBaseTransitionDuration = 300;
-export declare function OverlayBase({ container, effectContainer, forceRender, open, onMaskClick, singleLayer, onOpened, onClosed, maskProps, removeFocusOnOpen, ...props }: OverlayBaseProps): false | React.ReactPortal | null;
+export declare function OverlayBase({ container, effectContainer, forceRender, open, onMaskClick, singleLayer, onOpened, onClosed, maskProps, removeFocusOnOpen, ...props }: OverlayBaseProps): false | React.ReactPortal | null | undefined;

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

@@ -30,7 +30,7 @@ export declare const SnackbarBase: React.MemoExoticComponent<({ methods, useTo,
     max?: number;
     container?: DefineElement<HTMLElement>;
     effectContainer?: DefineElement<HTMLElement>;
-}) => React.ReactPortal | null>;
+}) => React.ReactPortal | null | undefined>;
 interface SnackbarBaseItemProps extends Omit<SnackbarBaseProps, 'duration' | 'onAutoClose'> {
     id: string;
     type: keyof SnackbarBaseMethods;

package/dist/esm/types.d.ts

@@ -21,7 +21,7 @@ export type Size = 'small' | 'medium' | 'large';
 export type CornerPlacement = 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight' | 'leftTop' | 'leftBottom' | 'rightTop' | 'rightBottom';
 export type BlockPlacement = CornerPlacement | 'top' | 'bottom';
 export type Placement = BlockPlacement | 'left' | 'right';
-export type DefineElement<T = Element | null | undefined> = T | (() => T);
+export type DefineElement<T = Element> = T | null | undefined | (() => T | null | undefined);
 /**
  * ----------------------------------------------------------------------------------
  * Responsive

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

@@ -51,7 +51,7 @@ export declare function useLoading<A extends any[], R>(fn: (...args: A) => R | P
  * @param effectContainer
  * @param defaultContainer 默认为`document.body`
  */
-export declare function useContainer<T extends HTMLElement | null>(container?: DefineElement<T>, effectContainer?: DefineElement<T>, defaultContainer?: DefineElement<T>): RefObject<T | null>;
+export declare function useContainer<T extends HTMLElement | null>(container?: DefineElement<T>, effectContainer?: DefineElement<T>, defaultContainer?: DefineElement<T>): RefObject<T | null | undefined>;
 /**
  * 使用外部类，该方法可避免`StrictMode`下，React渲染行为与外部类实例生命周期不同步的问题
  */

package/dist/esm/utils/hooks.js

@@ -111,7 +111,6 @@ export function useLoading(fn, referredLoading = false) {
                     return await res;
                 }
                 finally {
-                    console.log(157, unmounted.current);
                     !unmounted.current && setLoading(false);
                 }
             }
@@ -131,7 +130,7 @@ export function useContainer(container, effectContainer, defaultContainer) {
         if (container) {
             return typeof container === 'function' ? container() : container;
         }
-        return prev || null;
+        return prev;
     }, [container]);
     useEffect(() => {
         let _container = effectContainer || defaultContainer;

package/package.json

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