@canlooks/can-ui 0.0.181 → 0.0.183

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

@@ -107,7 +107,6 @@ exports.DataGridHead = (0, react_2.memo)(({ allowSelectAll, columnResizable, fla
                                             : (0, jsx_runtime_1.jsx)(bubble_1.Bubble, { ...(0, utils_1.mergeComponentProps)({
                                                     style: { maxWidth: 360 },
                                                     trigger: 'click',
-                                                    placement: 'bottomRight',
                                                     autoClose: false,
                                                     content: ((0, jsx_runtime_1.jsx)(filterBubbleContent_1.FilterBubbleContent, { columnKey: _key, columnFilterProps: filter })),
                                                     onClick: e => e.stopPropagation()

package/dist/cjs/components/dateTimeRangePicker/dateTimeRangePicker.js

@@ -40,8 +40,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/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/popper/popper.js

@@ -22,6 +22,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']
+};
 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 } = (0, theme_1.useTheme)();
     offset ??= spacing[2];
@@ -118,7 +132,7 @@ function Popper({ ref, popperRef, anchorElement, container, effectContainer, con
         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;
@@ -127,69 +141,64 @@ function Popper({ ref, popperRef, anchorElement, container, effectContainer, con
             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 (0, utils_1.isElementOverflowed)(popperEl, containerEl.current === document.body ? void 0 : containerEl.current);
             };
         }
@@ -197,9 +206,11 @@ function Popper({ ref, popperRef, anchorElement, container, effectContainer, con
             // 非右键菜单
             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;
@@ -217,39 +228,48 @@ function Popper({ ref, popperRef, anchorElement, container, effectContainer, con
                 }
                 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%';
@@ -259,8 +279,12 @@ function Popper({ ref, popperRef, anchorElement, container, effectContainer, con
                             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 (0, utils_1.isElementOverflowed)(popperEl, containerEl.current === document.body ? void 0 : containerEl.current);
             };
         }
@@ -270,40 +294,29 @@ function Popper({ ref, popperRef, anchorElement, container, effectContainer, con
         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();
     };
     (0, react_1.useLayoutEffect)(() => {
         if (innerOpen.current) {
@@ -539,12 +552,12 @@ function Popper({ ref, popperRef, anchorElement, container, effectContainer, con
                 })
                 : children, renderedOnce.current && containerEl.current && (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(clickAway_1.ClickAway, { disabled: !clickable && !enterable && !contextMenuable, 
                 // 右键菜单点击anchor需要关闭弹框
-                targets: () => contextMenuEvent.current ? void 0 : getAnchorElement(), onClickAway: onClickAway, children: (0, jsx_runtime_1.jsx)("div", { ...props, ref: innerPopperRef, css: popper_style_1.style, className: (0, utils_1.clsx)(popper_style_1.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: (0, jsx_runtime_1.jsx)(popperContext_1.PopperContext, { value: contextValue, children: content }) }) }), containerEl.current)] }));
+                targets: () => contextMenuEvent.current ? void 0 : getAnchorElement(), onClickAway: onClickAway, children: (0, jsx_runtime_1.jsx)("div", { css: popper_style_1.style, className: popper_style_1.classes.placeHelper, children: (0, jsx_runtime_1.jsx)("div", { ...props, ref: innerPopperRef, className: (0, utils_1.clsx)(popper_style_1.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: (0, jsx_runtime_1.jsx)(popperContext_1.PopperContext, { value: contextValue, children: content }) }) }) }), containerEl.current)] }));
 }

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

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

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

@@ -6,7 +6,7 @@ const utils_1 = require("../../utils");
 const app_style_1 = require("../app/app.style");
 const theme_1 = require("../theme");
 exports.classes = (0, utils_1.defineInnerClasses)('popper', [
-    'popper',
+    'placeHelper'
 ]);
 exports.style = (0, utils_1.defineCss)(theme => {
     const { easing } = theme;
@@ -14,37 +14,43 @@ exports.style = (0, utils_1.defineCss)(theme => {
         (0, app_style_1.appStyleCallback)(theme),
         (0, react_1.css) `
             @layer reset {
+                width: 100%;
+                height: 0;
                 position: absolute;
                 top: 0;
                 left: 0;
-                z-index: ${theme_1.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);
-                }
+                .${exports.classes.root} {
+                    position: absolute;
+                    z-index: ${theme_1.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/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,10 @@ function useContainer(container, effectContainer, defaultContainer) {
         if (container) {
             return typeof container === 'function' ? container() : container;
         }
-        return prev || null;
+        if (!prev && typeof document !== 'undefined') {
+            return document.body;
+        }
+        return prev;
     }, [container]);
     (0, react_1.useEffect)(() => {
         let _container = effectContainer || defaultContainer;

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

@@ -50,11 +50,6 @@ export type OverflowEdge = 'top' | 'bottom' | 'left' | 'right';
  * @returns 'top' | 'bottom' | 'left' | 'right' | false
  */
 export declare function isElementOverflowed(target: Element, container?: Element): OverflowEdge | false;
-/**
- * 下一个事件循环
- * @param callback
- */
-export declare function nextTick(callback?: () => void): Promise<void>;
 /**
  * 克隆Ref
  * @param refs