@canlooks/can-ui 0.0.194 → 0.0.196

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

@@ -14,5 +14,7 @@ export interface CounterProps extends Omit<FlexProps, 'defaultValue' | 'onChange
     decreaseProps?: ButtonProps;
     increaseProps?: ButtonProps;
     inputProps?: InputProps;
+    readOnly?: boolean;
+    disabled?: boolean;
 }
-export declare const Counter: import("react").MemoExoticComponent<({ size, min, max, step, precision, defaultValue, value, onChange, decreaseProps, increaseProps, inputProps, ...props }: CounterProps) => import("@emotion/react/jsx-runtime").JSX.Element>;
+export declare const Counter: import("react").MemoExoticComponent<({ size, min, max, step, precision, defaultValue, value, onChange, decreaseProps, increaseProps, inputProps, readOnly, disabled, ...props }: CounterProps) => import("@emotion/react/jsx-runtime").JSX.Element>;

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

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

package/dist/cjs/components/dataGrid/dataGridHead.js

@@ -108,6 +108,7 @@ exports.DataGridHead = (0, react_2.memo)(({ allowSelectAll, columnResizable, fla
                                                     style: { maxWidth: 360 },
                                                     trigger: 'click',
                                                     autoClose: false,
+                                                    placement: 'bottomLeft',
                                                     content: ((0, jsx_runtime_1.jsx)(filterBubbleContent_1.FilterBubbleContent, { columnKey: _key, columnFilterProps: filter })),
                                                     onClick: e => e.stopPropagation()
                                                 }, filterBubbleProps), children: filterButton }) })] })

package/dist/cjs/components/dataGrid/filterBubbleContent.js

@@ -36,7 +36,7 @@ exports.FilterBubbleContent = (0, react_1.memo)(({ columnKey, columnFilterProps
                         } }) }), columnFilterProps.showResetButton !== false &&
                 (0, jsx_runtime_1.jsx)(flex_1.Flex, { gap: 6, justifyContent: "center", marginTop: 6, children: (0, jsx_runtime_1.jsx)(button_1.Button, { variant: "text", onClick: () => {
                             hasChanged.current = true;
-                            formRef.current.resetField(columnKey);
+                            formRef.current._resetFieldAndCallChange(columnKey);
                             setOpen(false);
                         }, children: "\u91CD\u7F6E" }) })] }));
 });

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

@@ -53,6 +53,8 @@ export type FormRef<V extends FormValue = FormValue> = {
     resetField(field: FieldPath): void;
     isFormTouched(): boolean;
     isFieldTouched(field: FieldPath): boolean;
+    /** @private 用于dataGrid内的filterBubbleContent组件的"重置"功能 */
+    _resetFieldAndCallChange(field: FieldPath): void;
 };
 export declare const Form: {
     <V extends FormValue, C extends ElementType = "form">(props: FormProps<V, C>): ReactElement;

package/dist/cjs/components/form/form.js

@@ -116,7 +116,11 @@ inline, columnCount = 1, gap, columnGap, rowGap, ...props }) => {
             setFormValue(o => ({ ...o }));
         },
         isFormTouched: () => [...itemsContainer.current].some(([, item]) => item.isTouched),
-        isFieldTouched: field => !!itemsContainer.current.get((0, utils_1.stringifyField)(field))?.isTouched
+        isFieldTouched: field => !!itemsContainer.current.get((0, utils_1.stringifyField)(field))?.isTouched,
+        _resetFieldAndCallChange(field) {
+            this.resetField(field);
+            syncOnChange.current?.(field, void 0, formValue.current);
+        }
     };
     (0, react_1.useImperativeHandle)(ref, () => formRef.current);
     return ((0, jsx_runtime_1.jsx)(Component, { ...props, ref: wrapperRef, css: form_style_1.style, className: (0, utils_1.clsx)(form_style_1.classes.root, props.className), onSubmit: submitHandler, children: (0, jsx_runtime_1.jsx)(FormContext, { value: (0, react_1.useMemo)(() => ({

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

@@ -8,7 +8,7 @@ const pagination_style_1 = require("./pagination.style");
 const pagination_1 = require("./pagination");
 exports.PaginationCounter = (0, react_1.memo)((props) => {
     const { total, page, pageSize } = (0, pagination_1.usePaginationContext)();
-    const start = (page - 1) * pageSize + 1;
+    const start = Math.min((page - 1) * pageSize + 1, total);
     const end = Math.min(start + pageSize - 1, total);
     return ((0, jsx_runtime_1.jsxs)("div", { ...props, className: (0, utils_1.clsx)(pagination_style_1.classes.counter, props.className), children: ["\u7B2C ", start, "-", end, " \u6761/\u5171 ", total, " \u6761"] }));
 });

package/dist/cjs/components/pagination/pagination.js

@@ -15,9 +15,11 @@ const PaginationContext = (0, react_1.createContext)({
     total: 0,
     pageCount: 1,
     page: 1,
-    onPageChange(page) { },
+    onPageChange(page) {
+    },
     pageSize: 10,
-    onPageSizeChange(pageSize) { }
+    onPageSizeChange(pageSize) {
+    }
 });
 function usePaginationContext() {
     return (0, react_1.useContext)(PaginationContext);

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

@@ -89,6 +89,7 @@ function Popper({ ref, popperRef, anchorElement, container, effectContainer, con
         hold(open);
         setInnerOpen(open);
     };
+    const [derivedOpen, setDerivedOpen] = (0, utils_1.useDerivedState)(() => false, [innerOpen.current]);
     /**
      * --------------------------------------------------------------
      * 渲染条件
@@ -122,9 +123,7 @@ function Popper({ ref, popperRef, anchorElement, container, effectContainer, con
     };
     const containerEl = (0, utils_1.useContainer)(container, effectContainer);
     const innerPopperRef = (0, react_1.useRef)(null);
-    const [popperBounding, setPopperBounding] = (0, react_1.useState)();
     const [contextMenuEvent, setContextMenuEvent] = (0, utils_1.useSyncState)();
-    const [openNextFrame, setOpenNextFrame] = (0, utils_1.useDerivedState)(!innerOpen.current, [innerOpen.current, contextMenuEvent.current]);
     const placeA = (0, react_1.useRef)(void 0);
     const placeB = (0, react_1.useRef)(void 0);
     const fitPosition = (options, beforeOpen) => {
@@ -144,21 +143,27 @@ function Popper({ ref, popperRef, anchorElement, container, effectContainer, con
                 switch (placement) {
                     case 'topLeft':
                     case 'leftTop':
+                        top = void 0;
                         bottom = -mouseY;
+                        left = void 0;
                         right = containerRect.width - mouseX;
                         originX = '100%';
                         originY = '100%';
                         break;
                     case 'topRight':
                     case 'rightTop':
+                        top = void 0;
                         bottom = -mouseY;
                         left = mouseX;
+                        right = void 0;
                         originX = '0%';
                         originY = '100%';
                         break;
                     case 'bottomLeft':
                     case 'leftBottom':
                         top = mouseY;
+                        bottom = void 0;
+                        left = void 0;
                         right = containerRect.width - mouseX;
                         originX = '100%';
                         originY = '0%';
@@ -166,40 +171,49 @@ function Popper({ ref, popperRef, anchorElement, container, effectContainer, con
                     case 'bottomRight':
                     case 'rightBottom':
                         top = mouseY;
+                        bottom = void 0;
                         left = mouseX;
+                        right = void 0;
                         originX = '0%';
                         originY = '0%';
                         break;
                     case 'top':
                         top = mouseY - popperHeight;
+                        bottom = void 0;
                         left = mouseX - popperWidth / 2;
+                        right = void 0;
                         originX = '50%';
                         originY = '100%';
                         break;
                     case 'bottom':
                         top = mouseY;
+                        bottom = void 0;
                         left = mouseX - popperWidth / 2;
+                        right = void 0;
                         originX = '50%';
                         originY = '0%';
                         break;
                     case 'left':
                         top = mouseY - popperHeight / 2;
+                        bottom = void 0;
                         left = mouseX - popperWidth;
+                        right = void 0;
                         originX = '100%';
                         originY = '50%';
                         break;
                     case 'right':
                         top = mouseY - popperHeight / 2;
+                        bottom = void 0;
                         left = mouseX;
+                        right = void 0;
                         originX = '0%';
                         originY = '50%';
-                        break;
                 }
                 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);
+                return (0, utils_1.isElementOverflowed)(popperEl, containerEl.current);
             };
         }
         else {
@@ -208,7 +222,8 @@ function Popper({ ref, popperRef, anchorElement, container, effectContainer, con
             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;
+            const rightEdge = anchorRect.right - containerRect.left;
+            const containerWidth = containerRect.width;
             attempt = placement => {
                 [pA, pB] = splitPlacement[placement];
                 if (sizeAdaptable) {
@@ -239,7 +254,7 @@ function Popper({ ref, popperRef, anchorElement, container, effectContainer, con
                         break;
                     case 'left':
                         left = void 0;
-                        right = leftEdge - offset;
+                        right = containerWidth - leftEdge + offset;
                         originX = '100%';
                         break;
                     case 'right':
@@ -255,7 +270,7 @@ function Popper({ ref, popperRef, anchorElement, container, effectContainer, con
                         break;
                     case 'right':
                         left = void 0;
-                        right = rightEdge;
+                        right = containerWidth - rightEdge;
                         originX = '100%';
                         break;
                     case 'top':
@@ -265,7 +280,7 @@ function Popper({ ref, popperRef, anchorElement, container, effectContainer, con
                         break;
                     case 'bottom':
                         top = void 0;
-                        bottom = bottomEdge;
+                        bottom = -bottomEdge;
                         originY = '100%';
                         break;
                     default:
@@ -287,13 +302,15 @@ function Popper({ ref, popperRef, anchorElement, container, effectContainer, con
                 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);
+                return (0, utils_1.isElementOverflowed)(popperEl, containerEl.current);
             };
         }
         if (options?.forcePlacement) {
             attempt(options.forcePlacement);
         }
         else {
+            popperEl.style.transition = 'none';
+            popperEl.style.transform = 'scale(1)';
             const attemptOrder = getAttemptOrder(placement);
             for (let i = 0; i < attemptOrder.length; i++) {
                 const t = attempt(attemptOrder[i]);
@@ -303,28 +320,29 @@ function Popper({ ref, popperRef, anchorElement, container, effectContainer, con
             }
         }
         beforeOpen?.();
+        placeA.current = pA;
+        placeB.current = pB;
         const settle = () => {
-            setPopperBounding({
-                top, bottom, left, right, width, height,
-                transformOrigin: `${originX} ${originY}`
-            });
-            placeA.current = pA;
-            placeB.current = pB;
+            popperEl.style.transition = popperEl.style.transform = '';
+            popperEl.style.transformOrigin = `${originX} ${originY}`;
+            setDerivedOpen(true);
         };
         if (options?.openAnimation) {
             popperEl.style.transform = variant === 'collapse'
                 ? pA === 'top' || pA === 'bottom' ? 'scaleY(0)' : 'scaleX(0)'
                 : 'scale(0)';
-            animating.current = true;
-            setOpenNextFrame(true);
+            requestAnimationFrame(() => {
+                animating.current = true;
+                settle();
+            });
+        }
+        else {
+            settle();
         }
-        settle();
     };
     (0, react_1.useLayoutEffect)(() => {
-        if (innerOpen.current) {
-            fitPosition({ openAnimation: true }, triggerBeforeOpen);
-        }
-    }, [innerOpen.current, contextMenuEvent.current]);
+        innerOpen.current && fitPosition({ openAnimation: animation }, triggerBeforeOpen);
+    }, [innerOpen.current, contextMenuEvent.current, animation]);
     /**
      * --------------------------------------------------------------
      * 滚动跟随
@@ -347,9 +365,17 @@ function Popper({ ref, popperRef, anchorElement, container, effectContainer, con
             };
             addEventListener('resize', windowResize);
             const scroll = () => {
-                contextMenuEvent.current
-                    ? setOpenForce(false)
-                    : fitPosition({ forcePlacement: placeA.current + placeB.current });
+                if (contextMenuEvent.current) {
+                    setOpenForce(false);
+                }
+                else {
+                    let forcePlacement = placeA.current;
+                    const pB = placeB.current;
+                    if (pB) {
+                        forcePlacement += pB[0].toUpperCase() + pB.slice(1);
+                    }
+                    fitPosition({ forcePlacement: forcePlacement });
+                }
             };
             // 为所有父元素添加滚动事件
             const scrollDisposer = (0, utils_1.listenAllPredecessorsScroll)(getAnchorElement(), scroll);
@@ -481,7 +507,11 @@ function Popper({ ref, popperRef, anchorElement, container, effectContainer, con
         if (!anchorEl) {
             return;
         }
-        const click = () => openAndHold(true);
+        const click = () => {
+            innerOpen.current
+                ? setOpenForce(false)
+                : openAndHold(true);
+        };
         anchorEl.addEventListener('click', click);
         return () => {
             anchorEl.removeEventListener('click', click);
@@ -554,14 +584,7 @@ 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", { 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, onPointerDown: e => {
+                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), "data-open": derivedOpen.current, "data-variant": variant, "data-place-a": placeA.current, "data-place-b": placeB.current, "data-animation": animation, onPointerDown: e => {
                             props.onPointerDown?.(e);
                             e.preventDefault();
                         }, onTransitionEnd: onTransitionEnd, children: (0, jsx_runtime_1.jsx)(popperContext_1.PopperContext, { value: contextValue, children: content }) }) }) }), containerEl.current)] }));

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

@@ -49,7 +49,7 @@ export type OverflowEdge = 'top' | 'bottom' | 'left' | 'right';
  * @param container 容器
  * @returns 'top' | 'bottom' | 'left' | 'right' | false
  */
-export declare function isElementOverflowed(target: Element, container?: Element): OverflowEdge | false;
+export declare function isElementOverflowed(target: Element, container?: Element | null): OverflowEdge | false;
 /**
  * 克隆Ref
  * @param refs

package/dist/cjs/utils/utils.js

@@ -176,7 +176,7 @@ function isElementOverflowed(target, container) {
         }
         return false;
     };
-    if (container) {
+    if (container && container !== document.body) {
         return judge(container.getBoundingClientRect());
     }
     const vWidth = window.innerWidth || document.documentElement.clientWidth;

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

@@ -14,5 +14,7 @@ export interface CounterProps extends Omit<FlexProps, 'defaultValue' | 'onChange
     decreaseProps?: ButtonProps;
     increaseProps?: ButtonProps;
     inputProps?: InputProps;
+    readOnly?: boolean;
+    disabled?: boolean;
 }
-export declare const Counter: import("react").MemoExoticComponent<({ size, min, max, step, precision, defaultValue, value, onChange, decreaseProps, increaseProps, inputProps, ...props }: CounterProps) => import("@emotion/react/jsx-runtime").JSX.Element>;
+export declare const Counter: import("react").MemoExoticComponent<({ size, min, max, step, precision, defaultValue, value, onChange, decreaseProps, increaseProps, inputProps, readOnly, disabled, ...props }: CounterProps) => import("@emotion/react/jsx-runtime").JSX.Element>;

package/dist/esm/components/counter/counter.js

@@ -8,7 +8,7 @@ import { Flex } from '../flex/index.js';
 import { Icon } from '../icon/index.js';
 import { faMinus } from '@fortawesome/free-solid-svg-icons/faMinus';
 import { faPlus } from '@fortawesome/free-solid-svg-icons/faPlus';
-export const Counter = memo(({ size, min = -Infinity, max = Infinity, step = 1, precision = 0, defaultValue = 0, value, onChange, decreaseProps, increaseProps, inputProps, ...props }) => {
+export const Counter = memo(({ size, min = -Infinity, max = Infinity, step = 1, precision = 0, defaultValue = 0, value, onChange, decreaseProps, increaseProps, inputProps, readOnly, disabled, ...props }) => {
     const [innerValue, setInnerValue] = useControlled(defaultValue, value, onChange);
     const commonButtonProps = {
         size,
@@ -18,13 +18,13 @@ export const Counter = memo(({ size, min = -Infinity, max = Infinity, step = 1,
     const clickHandler = (dir) => {
         setInnerValue(Math.max(min, Math.min(max, innerValue.current + dir * step)));
     };
-    return (_jsxs(Flex, { compact: true, ...props, css: style, className: clsx(classes.root, props.className), children: [_jsx(Button, { disabled: innerValue.current <= min, ...mergeComponentProps(commonButtonProps, decreaseProps, {
+    return (_jsxs(Flex, { compact: true, ...props, css: style, className: clsx(classes.root, props.className), children: [_jsx(Button, { readOnly: readOnly, disabled: disabled || innerValue.current <= min, ...mergeComponentProps(commonButtonProps, decreaseProps, {
                     onClick: () => clickHandler(-1)
-                }), children: _jsx(Icon, { icon: faMinus }) }), _jsx(Input, { type: "number", widthAdaptable: true, size: size, min: min, max: max, step: step, precision: precision, ...mergeComponentProps(inputProps, {
+                }), children: _jsx(Icon, { icon: faMinus }) }), _jsx(Input, { type: "number", widthAdaptable: true, size: size, min: min, max: max, step: step, precision: precision, readOnly: readOnly, disabled: disabled, ...mergeComponentProps(inputProps, {
                     className: classes.input,
                     value: innerValue.current,
                     onChange: e => setInnerValue(+e.target.value)
-                }) }), _jsx(Button, { disabled: innerValue.current >= max, ...mergeComponentProps(commonButtonProps, increaseProps, {
+                }) }), _jsx(Button, { readOnly: readOnly, disabled: disabled || innerValue.current >= max, ...mergeComponentProps(commonButtonProps, increaseProps, {
                     onClick: () => clickHandler(1)
                 }), children: _jsx(Icon, { icon: faPlus }) })] }));
 });

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

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

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

@@ -33,7 +33,7 @@ export const FilterBubbleContent = memo(({ columnKey, columnFilterProps }) => {
                         } }) }), columnFilterProps.showResetButton !== false &&
                 _jsx(Flex, { gap: 6, justifyContent: "center", marginTop: 6, children: _jsx(Button, { variant: "text", onClick: () => {
                             hasChanged.current = true;
-                            formRef.current.resetField(columnKey);
+                            formRef.current._resetFieldAndCallChange(columnKey);
                             setOpen(false);
                         }, children: "\u91CD\u7F6E" }) })] }));
 });

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

@@ -53,6 +53,8 @@ export type FormRef<V extends FormValue = FormValue> = {
     resetField(field: FieldPath): void;
     isFormTouched(): boolean;
     isFieldTouched(field: FieldPath): boolean;
+    /** @private 用于dataGrid内的filterBubbleContent组件的"重置"功能 */
+    _resetFieldAndCallChange(field: FieldPath): void;
 };
 export declare const Form: {
     <V extends FormValue, C extends ElementType = "form">(props: FormProps<V, C>): ReactElement;

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

@@ -110,7 +110,11 @@ inline, columnCount = 1, gap, columnGap, rowGap, ...props }) => {
             setFormValue(o => ({ ...o }));
         },
         isFormTouched: () => [...itemsContainer.current].some(([, item]) => item.isTouched),
-        isFieldTouched: field => !!itemsContainer.current.get(stringifyField(field))?.isTouched
+        isFieldTouched: field => !!itemsContainer.current.get(stringifyField(field))?.isTouched,
+        _resetFieldAndCallChange(field) {
+            this.resetField(field);
+            syncOnChange.current?.(field, void 0, formValue.current);
+        }
     };
     useImperativeHandle(ref, () => formRef.current);
     return (_jsx(Component, { ...props, ref: wrapperRef, css: style, className: clsx(classes.root, props.className), onSubmit: submitHandler, children: _jsx(FormContext, { value: useMemo(() => ({

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

@@ -5,7 +5,7 @@ import { classes } from './pagination.style.js';
 import { usePaginationContext } from './pagination.js';
 export const PaginationCounter = memo((props) => {
     const { total, page, pageSize } = usePaginationContext();
-    const start = (page - 1) * pageSize + 1;
+    const start = Math.min((page - 1) * pageSize + 1, total);
     const end = Math.min(start + pageSize - 1, total);
     return (_jsxs("div", { ...props, className: clsx(classes.counter, props.className), children: ["\u7B2C ", start, "-", end, " \u6761/\u5171 ", total, " \u6761"] }));
 });

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

@@ -11,9 +11,11 @@ const PaginationContext = createContext({
     total: 0,
     pageCount: 1,
     page: 1,
-    onPageChange(page) { },
+    onPageChange(page) {
+    },
     pageSize: 10,
-    onPageSizeChange(pageSize) { }
+    onPageSizeChange(pageSize) {
+    }
 });
 export function usePaginationContext() {
     return useContext(PaginationContext);

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-import { cloneElement, isValidElement, useCallback, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { cloneElement, isValidElement, useCallback, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef } from 'react';
 import { createPortal } from 'react-dom';
-import { clsx, cloneRef, listenAllPredecessorsScroll, toArray, useControlled, useDerivedState, useForceUpdate, useSync, useSyncState, useUnmounted, useContainer, isElementOverflowed, isChildOf, useUpdateEffect } from '../../utils/index.js';
+import { clsx, cloneRef, listenAllPredecessorsScroll, toArray, useControlled, useForceUpdate, useSync, useSyncState, useUnmounted, useContainer, isElementOverflowed, isChildOf, useUpdateEffect, useDerivedState } from '../../utils/index.js';
 import { ClickAway } from '../clickAway/index.js';
 import { classes, style } from './popper.style.js';
 import { PopperContext, usePopperContext } from './popperContext.js';
@@ -86,6 +86,7 @@ export function Popper({ ref, popperRef, anchorElement, container, effectContain
         hold(open);
         setInnerOpen(open);
     };
+    const [derivedOpen, setDerivedOpen] = useDerivedState(() => false, [innerOpen.current]);
     /**
      * --------------------------------------------------------------
      * 渲染条件
@@ -119,9 +120,7 @@ export function Popper({ ref, popperRef, anchorElement, container, effectContain
     };
     const containerEl = useContainer(container, effectContainer);
     const innerPopperRef = useRef(null);
-    const [popperBounding, setPopperBounding] = useState();
     const [contextMenuEvent, setContextMenuEvent] = useSyncState();
-    const [openNextFrame, setOpenNextFrame] = useDerivedState(!innerOpen.current, [innerOpen.current, contextMenuEvent.current]);
     const placeA = useRef(void 0);
     const placeB = useRef(void 0);
     const fitPosition = (options, beforeOpen) => {
@@ -141,21 +140,27 @@ export function Popper({ ref, popperRef, anchorElement, container, effectContain
                 switch (placement) {
                     case 'topLeft':
                     case 'leftTop':
+                        top = void 0;
                         bottom = -mouseY;
+                        left = void 0;
                         right = containerRect.width - mouseX;
                         originX = '100%';
                         originY = '100%';
                         break;
                     case 'topRight':
                     case 'rightTop':
+                        top = void 0;
                         bottom = -mouseY;
                         left = mouseX;
+                        right = void 0;
                         originX = '0%';
                         originY = '100%';
                         break;
                     case 'bottomLeft':
                     case 'leftBottom':
                         top = mouseY;
+                        bottom = void 0;
+                        left = void 0;
                         right = containerRect.width - mouseX;
                         originX = '100%';
                         originY = '0%';
@@ -163,40 +168,49 @@ export function Popper({ ref, popperRef, anchorElement, container, effectContain
                     case 'bottomRight':
                     case 'rightBottom':
                         top = mouseY;
+                        bottom = void 0;
                         left = mouseX;
+                        right = void 0;
                         originX = '0%';
                         originY = '0%';
                         break;
                     case 'top':
                         top = mouseY - popperHeight;
+                        bottom = void 0;
                         left = mouseX - popperWidth / 2;
+                        right = void 0;
                         originX = '50%';
                         originY = '100%';
                         break;
                     case 'bottom':
                         top = mouseY;
+                        bottom = void 0;
                         left = mouseX - popperWidth / 2;
+                        right = void 0;
                         originX = '50%';
                         originY = '0%';
                         break;
                     case 'left':
                         top = mouseY - popperHeight / 2;
+                        bottom = void 0;
                         left = mouseX - popperWidth;
+                        right = void 0;
                         originX = '100%';
                         originY = '50%';
                         break;
                     case 'right':
                         top = mouseY - popperHeight / 2;
+                        bottom = void 0;
                         left = mouseX;
+                        right = void 0;
                         originX = '0%';
                         originY = '50%';
-                        break;
                 }
                 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);
+                return isElementOverflowed(popperEl, containerEl.current);
             };
         }
         else {
@@ -205,7 +219,8 @@ export function Popper({ ref, popperRef, anchorElement, container, effectContain
             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;
+            const rightEdge = anchorRect.right - containerRect.left;
+            const containerWidth = containerRect.width;
             attempt = placement => {
                 [pA, pB] = splitPlacement[placement];
                 if (sizeAdaptable) {
@@ -236,7 +251,7 @@ export function Popper({ ref, popperRef, anchorElement, container, effectContain
                         break;
                     case 'left':
                         left = void 0;
-                        right = leftEdge - offset;
+                        right = containerWidth - leftEdge + offset;
                         originX = '100%';
                         break;
                     case 'right':
@@ -252,7 +267,7 @@ export function Popper({ ref, popperRef, anchorElement, container, effectContain
                         break;
                     case 'right':
                         left = void 0;
-                        right = rightEdge;
+                        right = containerWidth - rightEdge;
                         originX = '100%';
                         break;
                     case 'top':
@@ -262,7 +277,7 @@ export function Popper({ ref, popperRef, anchorElement, container, effectContain
                         break;
                     case 'bottom':
                         top = void 0;
-                        bottom = bottomEdge;
+                        bottom = -bottomEdge;
                         originY = '100%';
                         break;
                     default:
@@ -284,13 +299,15 @@ export function Popper({ ref, popperRef, anchorElement, container, effectContain
                 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);
+                return isElementOverflowed(popperEl, containerEl.current);
             };
         }
         if (options?.forcePlacement) {
             attempt(options.forcePlacement);
         }
         else {
+            popperEl.style.transition = 'none';
+            popperEl.style.transform = 'scale(1)';
             const attemptOrder = getAttemptOrder(placement);
             for (let i = 0; i < attemptOrder.length; i++) {
                 const t = attempt(attemptOrder[i]);
@@ -300,28 +317,29 @@ export function Popper({ ref, popperRef, anchorElement, container, effectContain
             }
         }
         beforeOpen?.();
+        placeA.current = pA;
+        placeB.current = pB;
         const settle = () => {
-            setPopperBounding({
-                top, bottom, left, right, width, height,
-                transformOrigin: `${originX} ${originY}`
-            });
-            placeA.current = pA;
-            placeB.current = pB;
+            popperEl.style.transition = popperEl.style.transform = '';
+            popperEl.style.transformOrigin = `${originX} ${originY}`;
+            setDerivedOpen(true);
         };
         if (options?.openAnimation) {
             popperEl.style.transform = variant === 'collapse'
                 ? pA === 'top' || pA === 'bottom' ? 'scaleY(0)' : 'scaleX(0)'
                 : 'scale(0)';
-            animating.current = true;
-            setOpenNextFrame(true);
+            requestAnimationFrame(() => {
+                animating.current = true;
+                settle();
+            });
+        }
+        else {
+            settle();
         }
-        settle();
     };
     useLayoutEffect(() => {
-        if (innerOpen.current) {
-            fitPosition({ openAnimation: true }, triggerBeforeOpen);
-        }
-    }, [innerOpen.current, contextMenuEvent.current]);
+        innerOpen.current && fitPosition({ openAnimation: animation }, triggerBeforeOpen);
+    }, [innerOpen.current, contextMenuEvent.current, animation]);
     /**
      * --------------------------------------------------------------
      * 滚动跟随
@@ -344,9 +362,17 @@ export function Popper({ ref, popperRef, anchorElement, container, effectContain
             };
             addEventListener('resize', windowResize);
             const scroll = () => {
-                contextMenuEvent.current
-                    ? setOpenForce(false)
-                    : fitPosition({ forcePlacement: placeA.current + placeB.current });
+                if (contextMenuEvent.current) {
+                    setOpenForce(false);
+                }
+                else {
+                    let forcePlacement = placeA.current;
+                    const pB = placeB.current;
+                    if (pB) {
+                        forcePlacement += pB[0].toUpperCase() + pB.slice(1);
+                    }
+                    fitPosition({ forcePlacement: forcePlacement });
+                }
             };
             // 为所有父元素添加滚动事件
             const scrollDisposer = listenAllPredecessorsScroll(getAnchorElement(), scroll);
@@ -478,7 +504,11 @@ export function Popper({ ref, popperRef, anchorElement, container, effectContain
         if (!anchorEl) {
             return;
         }
-        const click = () => openAndHold(true);
+        const click = () => {
+            innerOpen.current
+                ? setOpenForce(false)
+                : openAndHold(true);
+        };
         anchorEl.addEventListener('click', click);
         return () => {
             anchorEl.removeEventListener('click', click);
@@ -551,14 +581,7 @@ 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", { 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, onPointerDown: e => {
+                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), "data-open": derivedOpen.current, "data-variant": variant, "data-place-a": placeA.current, "data-place-b": placeB.current, "data-animation": animation, onPointerDown: e => {
                             props.onPointerDown?.(e);
                             e.preventDefault();
                         }, onTransitionEnd: onTransitionEnd, children: _jsx(PopperContext, { value: contextValue, children: content }) }) }) }), containerEl.current)] }));

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

@@ -49,7 +49,7 @@ export type OverflowEdge = 'top' | 'bottom' | 'left' | 'right';
  * @param container 容器
  * @returns 'top' | 'bottom' | 'left' | 'right' | false
  */
-export declare function isElementOverflowed(target: Element, container?: Element): OverflowEdge | false;
+export declare function isElementOverflowed(target: Element, container?: Element | null): OverflowEdge | false;
 /**
  * 克隆Ref
  * @param refs

package/dist/esm/utils/utils.js

@@ -151,7 +151,7 @@ export function isElementOverflowed(target, container) {
         }
         return false;
     };
-    if (container) {
+    if (container && container !== document.body) {
         return judge(container.getBoundingClientRect());
     }
     const vWidth = window.innerWidth || document.documentElement.clientWidth;

package/package.json

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