@canlooks/can-ui 0.0.181 → 0.0.183

package/dist/cjs/utils/utils.js

@@ -9,7 +9,6 @@ exports.cloneDeep = cloneDeep;
 exports.mergeDeep = mergeDeep;
 exports.arrayShallowEqual = arrayShallowEqual;
 exports.isElementOverflowed = isElementOverflowed;
-exports.nextTick = nextTick;
 exports.cloneRef = cloneRef;
 exports.isUnset = isUnset;
 exports.isPromise = isPromise;
@@ -184,18 +183,6 @@ function isElementOverflowed(target, container) {
     const vHeight = window.innerHeight || document.documentElement.clientHeight;
     return judge({ left: 0, top: 0, right: vWidth, bottom: vHeight });
 }
-/**
- * 下一个事件循环
- * @param callback
- */
-function nextTick(callback) {
-    return new Promise(resolve => {
-        queueMicrotask(() => {
-            callback?.();
-            resolve();
-        });
-    });
-}
 /**
  * 克隆Ref
  * @param refs

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/dataGrid/dataGridHead.js

@@ -104,7 +104,6 @@ export const DataGridHead = memo(({ allowSelectAll, columnResizable, flattedColu
                                             : _jsx(Bubble, { ...mergeComponentProps({
                                                     style: { maxWidth: 360 },
                                                     trigger: 'click',
-                                                    placement: 'bottomRight',
                                                     autoClose: false,
                                                     content: (_jsx(FilterBubbleContent, { columnKey: _key, columnFilterProps: filter })),
                                                     onClick: e => e.stopPropagation()

package/dist/esm/components/dateTimeRangePicker/dateTimeRangePicker.js

@@ -37,8 +37,10 @@ variant, size, color, disabled, readOnly, autoFocus, ...props }) => {
                     onChange: value => {
                         setInnerValue(o => [value, o?.[1] || null]);
                         if (value && !showTimer) {
-                            endPickerInputRef.current.focus();
-                            innerOpen.current === 'start' && setInnerOpen('end');
+                            requestAnimationFrame(() => {
+                                endPickerInputRef.current.focus();
+                                innerOpen.current === 'start' && setInnerOpen('end');
+                            });
                         }
                     }
                 }

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/popper/popper.js

@@ -19,6 +19,20 @@ const getAttemptOrder = (placement) => {
     }
     return order;
 };
+const splitPlacement = {
+    top: ['top'],
+    bottom: ['bottom'],
+    left: ['left'],
+    right: ['right'],
+    topLeft: ['top', 'left'],
+    topRight: ['top', 'right'],
+    bottomLeft: ['bottom', 'left'],
+    bottomRight: ['bottom', 'right'],
+    leftTop: ['left', 'top'],
+    leftBottom: ['left', 'bottom'],
+    rightTop: ['right', 'top'],
+    rightBottom: ['right', 'bottom']
+};
 export function Popper({ ref, popperRef, anchorElement, container, effectContainer, content, offset, trigger = 'hover', clickToClose, placement = 'top', variant = 'zoom', sizeAdaptable = variant === 'collapse', mouseEnterDelay = 150, mouseLeaveDelay = 150, defaultOpen = false, open, onOpenChange, onOpenChangeEnd, disabled, autoClose = false, forceRender, animation = true, children, ...props }) {
     const { spacing } = useTheme();
     offset ??= spacing[2];
@@ -115,7 +129,7 @@ export function Popper({ ref, popperRef, anchorElement, container, effectContain
         const popperEl = innerPopperRef.current;
         let { offsetWidth: popperWidth, offsetHeight: popperHeight } = popperEl;
         let pA, pB;
-        let left, top;
+        let top, bottom, left, right;
         let width, height;
         let originX, originY;
         let attempt;
@@ -124,69 +138,64 @@ export function Popper({ ref, popperRef, anchorElement, container, effectContain
             const mouseX = contextMenuEvent.current.clientX - containerRect.left;
             const mouseY = contextMenuEvent.current.clientY - containerRect.top;
             attempt = placement => {
-                [, pA, pB] = placement.match(/^(top|bottom|left|right)(Top|Bottom|Left|Right)?/);
-                if (pB) {
-                    switch (placement) {
-                        case 'topLeft':
-                        case 'leftTop':
-                            left = mouseX - popperWidth;
-                            top = mouseY - popperHeight;
-                            originX = '100%';
-                            originY = '100%';
-                            break;
-                        case 'topRight':
-                        case 'rightTop':
-                            left = mouseX;
-                            top = mouseY - popperHeight;
-                            originX = '0%';
-                            originY = '100%';
-                            break;
-                        case 'bottomLeft':
-                        case 'leftBottom':
-                            left = mouseX - popperWidth;
-                            top = mouseY;
-                            originX = '100%';
-                            originY = '0%';
-                            break;
-                        case 'bottomRight':
-                        case 'rightBottom':
-                            left = mouseX;
-                            top = mouseY;
-                            originX = '0%';
-                            originY = '0%';
-                            break;
-                    }
-                }
-                else {
-                    switch (pA) {
-                        case 'top':
-                            top = mouseY - popperHeight;
-                            originY = '100%';
-                            break;
-                        case 'bottom':
-                            top = mouseY;
-                            originY = '0%';
-                            break;
-                        case 'left':
-                            left = mouseX - popperWidth;
-                            originX = '100%';
-                            break;
-                        case 'right':
-                            left = mouseX;
-                            originX = '0%';
-                            break;
-                    }
-                    if (pA === 'top' || pA === 'bottom') {
+                switch (placement) {
+                    case 'topLeft':
+                    case 'leftTop':
+                        bottom = -mouseY;
+                        right = containerRect.width - mouseX;
+                        originX = '100%';
+                        originY = '100%';
+                        break;
+                    case 'topRight':
+                    case 'rightTop':
+                        bottom = -mouseY;
+                        left = mouseX;
+                        originX = '0%';
+                        originY = '100%';
+                        break;
+                    case 'bottomLeft':
+                    case 'leftBottom':
+                        top = mouseY;
+                        right = containerRect.width - mouseX;
+                        originX = '100%';
+                        originY = '0%';
+                        break;
+                    case 'bottomRight':
+                    case 'rightBottom':
+                        top = mouseY;
+                        left = mouseX;
+                        originX = '0%';
+                        originY = '0%';
+                        break;
+                    case 'top':
+                        top = mouseY - popperHeight;
                         left = mouseX - popperWidth / 2;
                         originX = '50%';
-                    }
-                    else {
+                        originY = '100%';
+                        break;
+                    case 'bottom':
+                        top = mouseY;
+                        left = mouseX - popperWidth / 2;
+                        originX = '50%';
+                        originY = '0%';
+                        break;
+                    case 'left':
                         top = mouseY - popperHeight / 2;
+                        left = mouseX - popperWidth;
+                        originX = '100%';
                         originY = '50%';
-                    }
+                        break;
+                    case 'right':
+                        top = mouseY - popperHeight / 2;
+                        left = mouseX;
+                        originX = '0%';
+                        originY = '50%';
+                        break;
                 }
-                popperEl.style.left = left + 'px';
-                popperEl.style.top = top + 'px';
+                popperEl.style.top = typeof top === 'undefined' ? '' : top + 'px';
+                popperEl.style.bottom = typeof bottom === 'undefined' ? '' : bottom + 'px';
+                popperEl.style.left = typeof left === 'undefined' ? '' : left + 'px';
+                popperEl.style.right = typeof right === 'undefined' ? '' : right + 'px';
                 return isElementOverflowed(popperEl, containerEl.current === document.body ? void 0 : containerEl.current);
             };
         }
@@ -194,9 +203,11 @@ export function Popper({ ref, popperRef, anchorElement, container, effectContain
             // 非右键菜单
             const anchorRect = getAnchorElement().getBoundingClientRect();
             const topEdge = anchorRect.top - containerRect.top;
+            const bottomEdge = anchorRect.bottom - containerRect.top;
             const leftEdge = anchorRect.left - containerRect.left;
+            const rightEdge = containerRect.left + containerRect.width - anchorRect.right;
             attempt = placement => {
-                [, pA, pB] = placement.match(/^(top|bottom|left|right)(Top|Bottom|Left|Right)?/);
+                [pA, pB] = splitPlacement[placement];
                 if (sizeAdaptable) {
                     if (pA === 'top' || pA === 'bottom') {
                         width = popperWidth = anchorRect.width;
@@ -214,39 +225,48 @@ export function Popper({ ref, popperRef, anchorElement, container, effectContain
                 }
                 switch (pA) {
                     case 'top':
-                        top = topEdge - popperHeight - offset;
+                        top = void 0;
+                        bottom = -(topEdge - offset);
                         originY = '100%';
                         break;
                     case 'bottom':
-                        top = topEdge + anchorRect.height + offset;
+                        bottom = void 0;
+                        top = bottomEdge + offset;
                         originY = '0%';
                         break;
                     case 'left':
-                        left = leftEdge - popperWidth - offset;
+                        left = void 0;
+                        right = leftEdge - offset;
                         originX = '100%';
                         break;
                     case 'right':
-                        left = leftEdge + anchorRect.width + offset;
+                        right = void 0;
+                        left = rightEdge + offset;
                         originX = '0%';
                 }
                 switch (pB) {
-                    case 'Left':
+                    case 'left':
                         left = leftEdge;
+                        right = void 0;
                         originX = '0%';
                         break;
-                    case 'Right':
-                        left = leftEdge - popperWidth + anchorRect.width;
+                    case 'right':
+                        left = void 0;
+                        right = rightEdge;
                         originX = '100%';
                         break;
-                    case 'Top':
+                    case 'top':
                         top = topEdge;
+                        bottom = void 0;
                         originY = '0%';
                         break;
-                    case 'Bottom':
-                        top = topEdge - popperHeight + anchorRect.height;
+                    case 'bottom':
+                        top = void 0;
+                        bottom = bottomEdge;
                         originY = '100%';
                         break;
                     default:
+                        // pB === undefined
                         if (pA === 'top' || pA === 'bottom') {
                             left = leftEdge + (anchorRect.width - popperWidth) / 2;
                             originX = '50%';
@@ -256,8 +276,12 @@ export function Popper({ ref, popperRef, anchorElement, container, effectContain
                             originY = '50%';
                         }
                 }
-                popperEl.style.left = left + 'px';
-                popperEl.style.top = top + 'px';
+                popperEl.style.top = typeof top === 'undefined' ? '' : top + 'px';
+                popperEl.style.bottom = typeof bottom === 'undefined' ? '' : bottom + 'px';
+                popperEl.style.left = typeof left === 'undefined' ? '' : left + 'px';
+                popperEl.style.right = typeof right === 'undefined' ? '' : right + 'px';
+                popperEl.style.width = typeof width === 'undefined' ? '' : width + 'px';
+                popperEl.style.height = typeof height === 'undefined' ? '' : height + 'px';
                 return isElementOverflowed(popperEl, containerEl.current === document.body ? void 0 : containerEl.current);
             };
         }
@@ -267,40 +291,29 @@ export function Popper({ ref, popperRef, anchorElement, container, effectContain
         else {
             const attemptOrder = getAttemptOrder(placement);
             for (let i = 0; i < attemptOrder.length; i++) {
-                if (attempt(attemptOrder[i]) === false) {
+                const t = attempt(attemptOrder[i]);
+                if (t === false) {
                     break;
                 }
             }
         }
+        beforeOpen?.();
         const settle = () => {
             setPopperBounding({
-                left, top, width, height,
+                top, bottom, left, right, width, height,
                 transformOrigin: `${originX} ${originY}`
             });
             placeA.current = pA;
             placeB.current = pB;
         };
-        if (beforeOpen) {
-            if (sizeAdaptable) {
-                // 自适应尺寸需要在打开前设置
-                popperEl.style.width = width ? width + 'px' : '';
-                popperEl.style.height = height ? height + 'px' : '';
-            }
-            beforeOpen();
-        }
         if (options?.openAnimation) {
             popperEl.style.transform = variant === 'collapse'
                 ? pA === 'top' || pA === 'bottom' ? 'scaleY(0)' : 'scaleX(0)'
                 : 'scale(0)';
             animating.current = true;
-            requestAnimationFrame(() => {
-                settle();
-                setOpenNextFrame(true);
-            });
-        }
-        else {
-            settle();
+            setOpenNextFrame(true);
         }
+        settle();
     };
     useLayoutEffect(() => {
         if (innerOpen.current) {
@@ -536,12 +549,12 @@ export function Popper({ ref, popperRef, anchorElement, container, effectContain
                 })
                 : children, renderedOnce.current && containerEl.current && createPortal(_jsx(ClickAway, { disabled: !clickable && !enterable && !contextMenuable, 
                 // 右键菜单点击anchor需要关闭弹框
-                targets: () => contextMenuEvent.current ? void 0 : getAnchorElement(), onClickAway: onClickAway, children: _jsx("div", { ...props, ref: innerPopperRef, css: style, className: clsx(classes.root, props.className), style: {
-                        ...popperBounding,
-                        ...!openNextFrame.current && {
-                            transition: 'none',
-                            transform: 'scale(1)'
-                        },
-                        ...props.style
-                    }, "data-open": innerOpen.current, "data-variant": variant, "data-place-a": placeA.current, "data-place-b": placeB.current, "data-animation": animation, onTransitionEnd: onTransitionEnd, children: _jsx(PopperContext, { value: contextValue, children: content }) }) }), containerEl.current)] }));
+                targets: () => contextMenuEvent.current ? void 0 : getAnchorElement(), onClickAway: onClickAway, children: _jsx("div", { css: style, className: classes.placeHelper, children: _jsx("div", { ...props, ref: innerPopperRef, className: clsx(classes.root, props.className), style: {
+                            ...popperBounding,
+                            ...!openNextFrame.current && {
+                                transition: 'none',
+                                transform: 'scale(1)'
+                            },
+                            ...props.style
+                        }, "data-open": innerOpen.current, "data-variant": variant, "data-place-a": placeA.current, "data-place-b": placeB.current, "data-animation": animation, onTransitionEnd: onTransitionEnd, children: _jsx(PopperContext, { value: contextValue, children: content }) }) }) }), containerEl.current)] }));
 }

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

@@ -1,6 +1,6 @@
 import { Theme } from '../theme/index.js';
 export declare const classes: {
-    popper: string;
+    placeHelper: string;
 } & {
     root: string;
 };

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

@@ -3,7 +3,7 @@ import { defineCss, defineInnerClasses } from '../../utils/index.js';
 import { appStyleCallback } from '../app/app.style.js';
 import { zIndex } from '../theme/index.js';
 export const classes = defineInnerClasses('popper', [
-    'popper',
+    'placeHelper'
 ]);
 export const style = defineCss(theme => {
     const { easing } = theme;
@@ -11,37 +11,43 @@ export const style = defineCss(theme => {
         appStyleCallback(theme),
         css `
             @layer reset {
+                width: 100%;
+                height: 0;
                 position: absolute;
                 top: 0;
                 left: 0;
-                z-index: ${zIndex.popper};
-                transition-property: transform, opacity;
                 
-                &[data-animation=true] {
-                    transition-duration: .25s;
-                }
-
-                &[data-open=true] {
-                    transition-timing-function: ${easing.bounce}, ${easing.easeOut};
-                    opacity: 1;
-                    transform: scale(1);
-                }
+                .${classes.root} {
+                    position: absolute;
+                    z-index: ${zIndex.popper};
+                    transition-property: transform, opacity;
 
-                &:not([data-open=true]) {
-                    transition-timing-function: ${easing.easeIn};
-                    opacity: 0;
+                    &[data-animation=true] {
+                        transition-duration: .25s;
+                    }
 
-                    &[data-variant=zoom] {
-                        transform: scale(0);
+                    &[data-open=true] {
+                        transition-timing-function: ${easing.bounce}, ${easing.easeOut};
+                        opacity: 1;
+                        transform: scale(1);
                     }
 
-                    &[data-variant=collapse] {
-                        &[data-place-a=top], &[data-place-a=bottom] {
-                            transform: scaleY(0);
+                    &:not([data-open=true]) {
+                        transition-timing-function: ${easing.easeIn};
+                        opacity: 0;
+
+                        &[data-variant=zoom] {
+                            transform: scale(0);
                         }
 
-                        &[data-place-a=left], &[data-place-a=right] {
-                            transform: scaleX(0);
+                        &[data-variant=collapse] {
+                            &[data-place-a=top], &[data-place-a=bottom] {
+                                transform: scaleY(0);
+                            }
+
+                            &[data-place-a=left], &[data-place-a=right] {
+                                transform: scaleX(0);
+                            }
                         }
                     }
                 }

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渲染行为与外部类实例生命周期不同步的问题
  */