@canlooks/can-ui 0.0.168 → 0.0.169

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

@@ -3,9 +3,9 @@ import { CurdColumn } from './curd';
 import { RowType } from '../dataGrid';
 import { Id } from '../../types';
 export type CurdColumnConfigProps<R extends RowType> = {
-    columns?: CurdColumn<R>[];
-    innerVisible: Id[];
-    setInnerVisible: Dispatch<SetStateAction<Id[]>>;
-    setInnerOrder: Dispatch<SetStateAction<Id[]>>;
+    columns: CurdColumn<R>[] | undefined;
+    innerVisible: Id[] | undefined;
+    setInnerVisible: Dispatch<SetStateAction<Id[] | undefined>>;
+    setInnerOrder: Dispatch<SetStateAction<Id[] | undefined>>;
 };
 export declare const CurdColumnConfig: <R extends RowType>(props: CurdColumnConfigProps<R>) => ReactElement;

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

@@ -33,16 +33,16 @@ const CurdColumnConfigContent = (0, react_1.memo)(({ columns, innerVisible, setI
         }
     };
     const visibleSet = (0, react_1.useMemo)(() => {
-        return new Set(innerVisible);
+        return innerVisible && new Set(innerVisible);
     }, [innerVisible]);
     const toggleVisible = (key, checked) => {
-        !(0, utils_1.isUnset)(key) && setInnerVisible(o => checked
+        !(0, utils_1.isUnset)(key) && setInnerVisible((o = []) => checked
             ? [...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) => {
                     const id = col._key;
-                    const checked = !(0, utils_1.isUnset)(id) && visibleSet.has(id);
+                    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 => {
                                 e.stopPropagation();
                                 toggleVisible(id, e.target.checked);

package/dist/cjs/components/tabs/tab.d.ts

@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react';
+import React, { ReactNode, Ref } from 'react';
 import { ColorPropsValue, DivProps, Id } from '../../types';
 export interface TabProps extends Omit<DivProps, 'prefix'> {
     prefix?: ReactNode;
@@ -17,5 +17,7 @@ export interface TabProps extends Omit<DivProps, 'prefix'> {
     _active?: boolean;
     /** @private */
     _index?: number;
+    /** @private */
+    _tabRef?: Ref<HTMLDivElement>;
 }
-export declare const Tab: React.MemoExoticComponent<({ prefix, suffix, color, orientation, label, value, disabled, closable, onClose, sortable, _active, _index, ...props }: TabProps) => import("@emotion/react/jsx-runtime").JSX.Element>;
+export declare const Tab: React.MemoExoticComponent<({ prefix, suffix, color, orientation, label, value, disabled, closable, onClose, sortable, _active, _index, _tabRef, ...props }: TabProps) => import("@emotion/react/jsx-runtime").JSX.Element>;

package/dist/cjs/components/tabs/tab.js

@@ -9,34 +9,34 @@ const tabs_1 = require("./tabs");
 const button_1 = require("../button");
 const faXmark_1 = require("@fortawesome/free-solid-svg-icons/faXmark");
 const icon_1 = require("../icon");
-const transitionBase_1 = require("../transitionBase");
 const sortable_1 = require("@dnd-kit/react/sortable");
-exports.Tab = (0, react_1.memo)(({ prefix, suffix, color, orientation, label, value, disabled, closable, onClose, sortable, _active, _index, ...props }) => {
+const transitionBase_1 = require("../transitionBase");
+exports.Tab = (0, react_1.memo)(({ prefix, suffix, color, orientation, label, value, disabled, closable, onClose, sortable, _active, _index, _tabRef, ...props }) => {
     const context = (0, tabs_1.useTabsContext)();
     const colorValue = (0, utils_1.useColor)(color ?? context.color);
     const _closable = closable ?? context.closable;
     const closeHandler = (e) => {
+        e.stopPropagation();
         onClose?.(e);
         context.onClose?.(value);
     };
     const _sortable = sortable ?? context.sortable;
+    const showBorder = context.variant === 'line' && !context.animating && _active;
     const { ref } = (0, sortable_1.useSortable)({
         id: value,
         index: _index,
         disabled: !_sortable
     });
-    return ((0, jsx_runtime_1.jsxs)(transitionBase_1.Collapse, { orientation: "horizontal", ...(0, utils_1.mergeComponentProps)(props, {
+    return ((0, jsx_runtime_1.jsx)(transitionBase_1.Collapse, { ...(0, utils_1.mergeComponentProps)(props, {
             ref,
-            className: tabs_style_1.classes.tab,
-            style: {
-                borderColor: context.variant === 'line' && !context.animating && _active ? colorValue : void 0,
-                color: _active ? colorValue : void 0
-            },
-            onClick: e => {
-                !disabled && props.onClick?.(e);
-            }
-        }), "data-color": colorValue, "data-disabled": disabled, "data-orientation": orientation, "data-active": _active, children: [!!prefix &&
-                (0, jsx_runtime_1.jsx)("div", { className: tabs_style_1.classes.tabPrefix, children: prefix }), (0, jsx_runtime_1.jsx)("div", { className: tabs_style_1.classes.label, children: label }), !!suffix &&
-                (0, jsx_runtime_1.jsx)("div", { className: tabs_style_1.classes.tabSuffix, children: suffix }), _closable &&
-                (0, jsx_runtime_1.jsx)(button_1.Button, { className: tabs_style_1.classes.tabClose, variant: "text", color: "text.secondary", onClick: closeHandler, children: (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faXmark_1.faXmark }) })] }));
+            className: tabs_style_1.classes.tabTransition
+        }), orientation: "horizontal", className: tabs_style_1.classes.tabTransition, children: (0, jsx_runtime_1.jsx)("div", { className: tabs_style_1.classes.tabWrapper, children: (0, jsx_runtime_1.jsxs)("div", { ref: _tabRef, className: tabs_style_1.classes.tab, style: {
+                    borderColor: showBorder ? colorValue : void 0,
+                    color: _active ? colorValue : void 0
+                }, onClick: e => {
+                    !disabled && props.onClick?.(e);
+                }, "data-color": colorValue, "data-disabled": disabled, "data-orientation": orientation, "data-active": _active, children: [!!prefix &&
+                        (0, jsx_runtime_1.jsx)("div", { className: tabs_style_1.classes.tabPrefix, children: prefix }), (0, jsx_runtime_1.jsx)("div", { className: tabs_style_1.classes.label, children: label }), !!suffix &&
+                        (0, jsx_runtime_1.jsx)("div", { className: tabs_style_1.classes.tabSuffix, children: suffix }), _closable &&
+                        (0, jsx_runtime_1.jsx)(button_1.Button, { className: tabs_style_1.classes.tabClose, variant: "text", color: "text.secondary", onClick: closeHandler, children: (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faXmark_1.faXmark }) })] }) }) }));
 });

package/dist/cjs/components/tabs/tabs.js

@@ -22,12 +22,13 @@ exports.Tabs = (0, react_2.memo)(({ tabs, labelKey = 'label', primaryKey = 'valu
     size ??= theme.size;
     const [innerValue, _setInnerValue] = (0, utils_1.useControlled)(defaultValue, value, onChange);
     const setInnerValue = (value) => {
-        if (!readOnly && !disabled) {
+        if (!readOnly && !disabled && value !== innerValue.current) {
             _setInnerValue(value);
+            console.log(96, value);
             variant === 'line' && setAnimating(true);
         }
     };
-    const [animating, setAnimating] = (0, utils_1.useDerivedState)(prev => typeof prev !== 'undefined', [innerValue.current]);
+    const [animating, setAnimating] = (0, react_2.useState)(false);
     const setValueInEllipsis = (value) => {
         shouldScroll.current = true;
         setInnerValue(value);
@@ -39,7 +40,7 @@ exports.Tabs = (0, react_2.memo)(({ tabs, labelKey = 'label', primaryKey = 'valu
             return tabs.map((p, i) => {
                 const value = p[primaryKey];
                 const active = !(0, utils_1.isUnset)(value) && value === innerValue.current;
-                return ((0, react_1.createElement)(tab_1.Tab, { ...p, key: p.key ?? value ?? i, ref: el => {
+                return ((0, react_1.createElement)(tab_1.Tab, { ...p, key: p.key ?? value ?? i, _tabRef: el => {
                         el
                             ? tabRefs.current.set(value, el)
                             : tabRefs.current.delete(value);
@@ -134,13 +135,13 @@ exports.Tabs = (0, react_2.memo)(({ tabs, labelKey = 'label', primaryKey = 'valu
             newTabs && props.onSort(e, newTabs);
         }
     };
-    return ((0, jsx_runtime_1.jsxs)("div", { ...props, css: (0, tabs_style_1.useStyle)({ color, variant }), className: (0, utils_1.clsx)(tabs_style_1.classes.root, props.className), "data-size": size, "data-position": position, "data-animating": animating.current, "data-full-width": fullWidth, "data-read-only": readOnly, "data-disabled": disabled, children: [(0, jsx_runtime_1.jsx)("div", { className: tabs_style_1.classes.start, "data-show": shadowStart, children: !!prefix &&
+    return ((0, jsx_runtime_1.jsxs)("div", { ...props, css: (0, tabs_style_1.useStyle)({ color, variant }), className: (0, utils_1.clsx)(tabs_style_1.classes.root, props.className), "data-size": size, "data-position": position, "data-animating": animating, "data-full-width": fullWidth, "data-read-only": readOnly, "data-disabled": disabled, children: [(0, jsx_runtime_1.jsx)("div", { className: tabs_style_1.classes.start, "data-show": shadowStart, children: !!prefix &&
                     (0, jsx_runtime_1.jsx)("div", { className: tabs_style_1.classes.prefix, children: prefix }) }), (0, jsx_runtime_1.jsx)("div", { ref: scrollRef, className: tabs_style_1.classes.scroll, onScroll: setShadow, children: (0, jsx_runtime_1.jsx)("div", { className: tabs_style_1.classes.scrollWrap, style: { justifyContent }, children: (0, jsx_runtime_1.jsxs)(TabsContext, { value: (0, react_2.useMemo)(() => ({
                             color, variant, closable, onClose, sortable,
-                            animating: animating.current, setAnimating
+                            animating, setAnimating
                         }), [
                             color, variant, closable, onClose, sortable,
-                            animating.current
+                            animating
                         ]), children: [(0, jsx_runtime_1.jsx)(react_3.DragDropProvider, { sensors: utils_1.defaultSensors, onDragEnd: dragEndHandler, children: (0, jsx_runtime_1.jsx)(react_transition_group_1.TransitionGroup, { component: null, children: renderTabs() }) }), variant === 'line' &&
                                 (0, jsx_runtime_1.jsx)(lineIndicator_1.LineIndicator, { value: innerValue.current, position: position, getActiveTab: getActiveTab })] }) }) }), (0, jsx_runtime_1.jsx)("div", { className: tabs_style_1.classes.end, "data-show": shadowEnd, children: !!(suffix || shadowStart || shadowEnd) &&
                     (0, jsx_runtime_1.jsxs)("div", { className: tabs_style_1.classes.suffix, children: [(shadowStart || shadowEnd) &&

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

@@ -10,6 +10,7 @@ export declare const classes: {
     ellipsis: string;
     tab: string;
     scrollWrap: string;
+    tabTransition: string;
     tabWrapper: string;
     tabPrefix: string;
     tabSuffix: string;

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

@@ -12,6 +12,7 @@ exports.classes = (0, utils_1.defineInnerClasses)('tabs', [
     'ellipsis',
     'prefix',
     'suffix',
+    'tabTransition',
     'tabWrapper',
     'tab',
     'label',
@@ -36,6 +37,7 @@ function useStyle({ color, variant }) {
                         display: flex;
                         scrollbar-width: none;
                         position: relative;
+                        overflow: auto;
 
                         &::-webkit-scrollbar {
                             display: none;
@@ -127,6 +129,10 @@ function useStyle({ color, variant }) {
                         position: absolute;
                     }
                     
+                    .${exports.classes.tabTransition} { {
+                        z-index: 1;
+                    }}
+                    
                     .${exports.classes.tab} {
                         display: flex;
                         align-items: center;
@@ -136,7 +142,6 @@ function useStyle({ color, variant }) {
                         white-space: nowrap;
                         text-overflow: ellipsis;
                         overflow: hidden;
-                        z-index: 1;
                         -webkit-tap-highlight-color: transparent;
                         transition: background-color, color .25s ${easing.easeOut};
 
@@ -229,8 +234,8 @@ function useStyle({ color, variant }) {
             variant === 'line'
                 ? (0, react_1.css) `
                         @layer reset {
-                            .${exports.classes.scrollWrap} {
-                                gap: 0 ${spacing[10]}px;
+                            .${exports.classes.tabWrapper} {
+                                padding: 0 ${spacing[5]}px;
                             }
 
                             &[data-position=top],
@@ -313,10 +318,6 @@ function useStyle({ color, variant }) {
                 // variant === 'card'
                 : (0, react_1.css) `
                         @layer reset {
-                            .${exports.classes.scrollWrap} {
-                                gap: ${spacing[1]}px;
-                            }
-
                             .${exports.classes.tab} {
                                 border: 1px solid ${gray(.1)};
                                 background-color: ${background.body};
@@ -328,6 +329,10 @@ function useStyle({ color, variant }) {
 
                             &[data-position=top],
                             &[data-position=bottom] {
+                                .${exports.classes.tabWrapper} {
+                                    padding: 0 2px;
+                                }
+                                
                                 .${exports.classes.tab} {
                                     padding: 10px 15px;
                                 }
@@ -367,6 +372,10 @@ function useStyle({ color, variant }) {
 
                             &[data-position=left],
                             &[data-position=right] {
+                                .${exports.classes.tabWrapper} {
+                                    padding: 2px 0;
+                                }
+                                
                                 .${exports.classes.tab} {
                                     padding: 9px 18px;
                                 }

package/dist/cjs/components/transitionBase/collapse.d.ts

@@ -12,7 +12,7 @@ export type CollapseOwnProps = {
     /**
      * 设定折叠后的尺寸
      * {@link transitionType}为"`sweeping"`时有效
-     * 默认为0
+     * 默认为`0`
      */
     collapsedSize?: number | (() => number);
 };

package/dist/cjs/components/transitionBase/collapse.js

@@ -10,55 +10,66 @@ const Collapse = ({ transitionType = 'sweeping', ...props }) => {
     return ((0, jsx_runtime_1.jsx)(Component, { ...props, _mode: transitionType === 'sweeping' ? '_sweeping' : 'collapse' }));
 };
 exports.Collapse = Collapse;
-const Sweeping = ({ ref, in: _in = false, appear = true, orientation = 'vertical', collapsedSize = 0, ...props }) => {
+const Sweeping = ({ ref, in: _in = false, orientation = 'vertical', collapsedSize = 0, appear = true, ...props }) => {
     const innerRef = (0, react_1.useRef)(null);
+    const styleProperty = orientation === 'vertical' ? 'height' : 'width';
     const getCollapsedSize = () => {
         return typeof collapsedSize === 'function' ? collapsedSize() : collapsedSize;
     };
-    const [size, setSize] = (0, react_1.useState)(() => {
-        if (_in && !appear) {
-            return 'auto';
-        }
-        return getCollapsedSize();
-    });
-    const [isEntered, setIsEntered] = (0, react_1.useState)(_in && !appear);
-    const styleProperty = orientation === 'vertical' ? 'height' : 'width';
-    const expand = () => {
+    const [size, setSize] = (0, react_1.useState)(() => !_in ? getCollapsedSize() : 'auto');
+    const getFullSize = () => {
         const el = innerRef.current;
+        let size;
         if (el) {
             el.style.transition = 'none';
+            const originalSize = el.style[styleProperty];
             el.style[styleProperty] = 'auto';
-            const newSize = el[orientation === 'vertical' ? 'offsetHeight' : 'offsetWidth'];
-            el.style[styleProperty] = size + 'px';
+            size = el[orientation === 'vertical' ? 'offsetHeight' : 'offsetWidth'];
+            el.style[styleProperty] = originalSize;
             el.style.transition = '';
+        }
+        return size;
+    };
+    const expand = (fromSize) => {
+        const fullSize = getFullSize();
+        if (typeof fullSize !== 'undefined') {
+            if (typeof fromSize !== 'undefined') {
+                const el = innerRef.current;
+                el.style[styleProperty] = fromSize + 'px';
+            }
             requestAnimationFrame(() => {
-                setSize(newSize);
+                setSize(fullSize);
             });
         }
     };
+    const getCurrentSize = () => {
+        const el = innerRef.current;
+        if (el) {
+            return el[orientation === 'vertical' ? 'offsetHeight' : 'offsetWidth'];
+        }
+    };
     const collapse = () => {
-        setIsEntered(false);
-        requestAnimationFrame(() => {
-            setSize(getCollapsedSize());
-        });
+        const currentSize = getCurrentSize();
+        if (typeof currentSize !== 'undefined') {
+            const el = innerRef.current;
+            el.style[styleProperty] = currentSize + 'px';
+            requestAnimationFrame(() => {
+                setSize(getCollapsedSize());
+            });
+        }
     };
-    const mounted = (0, react_1.useRef)(false);
-    (0, utils_1.useStrictEffect)(() => {
-        if (!mounted.current) {
-            // 首次渲染
-            mounted.current = true;
-            if (!appear) {
-                // 若appear为false，则跳过首次动画
-                return;
-            }
+    (0, react_1.useLayoutEffect)(() => {
+        if (_in && appear) {
+            expand(getCollapsedSize());
         }
+    }, []);
+    (0, utils_1.useUpdateEffect)(() => {
         _in
             ? expand()
             : collapse();
     }, [_in]);
-    return ((0, jsx_runtime_1.jsx)(transitionBase_1.TransitionBase, { ...props, appear: appear, orientation: orientation, in: _in, ref: (0, utils_1.cloneRef)(ref, innerRef), style: {
-            [styleProperty]: isEntered ? 'auto' : size,
-            ...!isEntered && { overflow: 'hidden' },
+    return ((0, jsx_runtime_1.jsx)(transitionBase_1.TransitionBase, { ...props, ref: (0, utils_1.cloneRef)(ref, innerRef), in: _in, orientation: orientation, appear: appear, style: {
+            [styleProperty]: size,
             ...props.style
-        }, onEntered: () => setIsEntered(true) }));
+        } }));
 };

package/dist/cjs/components/transitionBase/transitionBase.js

@@ -14,7 +14,7 @@ exports.TransitionBase = (({ ref, component: Component = 'div', orientation = 'v
         cssArr.push(transitionBase_style_1.fadeStyle);
         switch (_mode) {
             case '_sweeping':
-                cssArr.push(transitionBase_style_1.sweepingStyle);
+                cssArr.push((0, transitionBase_style_1.useSweepingStyle)({ orientation }));
                 break;
             case 'collapse':
             case 'grow':
@@ -25,5 +25,10 @@ exports.TransitionBase = (({ ref, component: Component = 'div', orientation = 'v
         }
     }
     const innerRef = (0, react_1.useRef)(null);
-    return ((0, jsx_runtime_1.jsx)(react_transition_group_1.CSSTransition, { ...props, css: cssArr, nodeRef: innerRef, className: (0, utils_1.clsx)(transitionBase_style_1.classes.root, props.className), timeout: timeout, appear: appear, children: (0, jsx_runtime_1.jsx)(Component, { ref: (0, utils_1.cloneRef)(ref, innerRef), children: props.children }) }));
+    const initialized = (0, react_1.useRef)(false);
+    (0, react_1.useEffect)(() => {
+        initialized.current = true;
+    }, [props.in]);
+    const unInitClass = !initialized.current && !props.in && 'exit-done';
+    return ((0, jsx_runtime_1.jsx)(react_transition_group_1.CSSTransition, { ...props, css: cssArr, nodeRef: innerRef, className: (0, utils_1.clsx)(transitionBase_style_1.classes.root, props.className, unInitClass), timeout: timeout, appear: appear, children: (0, jsx_runtime_1.jsx)(Component, { ref: (0, utils_1.cloneRef)(ref, innerRef), children: props.children }) }));
 });

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

@@ -4,6 +4,6 @@ export declare const classes: {
 };
 export declare function useTransitionBaseStyle({ timeout }: Required<Pick<TransitionBaseProps<any>, 'timeout'>>): import("@emotion/utils").SerializedStyles;
 export declare const fadeStyle: () => import("@emotion/utils").SerializedStyles;
-export declare const sweepingStyle: () => import("@emotion/utils").SerializedStyles;
-export declare function useGrowAndCollapseStyle({ orientation, _mode }: Required<Pick<TransitionBaseProps<any>, 'orientation' | '_mode'>>): import("@emotion/utils").SerializedStyles;
-export declare function useSlideStyle({ direction, offset }: Required<Pick<TransitionBaseProps<any>, 'direction' | 'offset'>>): import("@emotion/utils").SerializedStyles;
+export declare function useSweepingStyle({ orientation }: Required<Pick<TransitionBaseProps, 'orientation'>>): import("@emotion/utils").SerializedStyles;
+export declare function useGrowAndCollapseStyle({ orientation, _mode }: Required<Pick<TransitionBaseProps, 'orientation' | '_mode'>>): import("@emotion/utils").SerializedStyles;
+export declare function useSlideStyle({ direction, offset }: Required<Pick<TransitionBaseProps, 'direction' | 'offset'>>): import("@emotion/utils").SerializedStyles;

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

@@ -1,7 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.sweepingStyle = exports.fadeStyle = exports.classes = void 0;
+exports.fadeStyle = exports.classes = void 0;
 exports.useTransitionBaseStyle = useTransitionBaseStyle;
+exports.useSweepingStyle = useSweepingStyle;
 exports.useGrowAndCollapseStyle = useGrowAndCollapseStyle;
 exports.useSlideStyle = useSlideStyle;
 const react_1 = require("@emotion/react");
@@ -12,6 +13,7 @@ function useTransitionBaseStyle({ timeout }) {
     return (0, utils_1.useCss)(() => (0, react_1.css) `
         @layer reset {
             ${timeoutIsNumber ? `transition-duration: ${timeout}ms;` : ''}
+            
             &.appear-active {
                 ${!timeoutIsNumber ? `transition-duration: ${timeout.appear}ms;` : ''}
             }
@@ -28,126 +30,107 @@ function useTransitionBaseStyle({ timeout }) {
 }
 exports.fadeStyle = (0, utils_1.defineCss)(({ easing }) => (0, react_1.css) `
     @layer reset {
-        transition-property: opacity;
-        transition-timing-function: ${easing.easeOut};
-
-        &,
         &.appear,
-        &.enter {
+        &.exit,
+        &.exit-done {
             opacity: 0;
         }
-
+        
         &.appear-active,
-        &.enter-active,
-        &.enter-done,
-        &.exit {
+        &.enter,
+        &.enter-done {
             opacity: 1;
         }
 
-        &.exit-active,
-        &.exit-done {
-            opacity: 0;
-        }
-    }
-`);
-exports.sweepingStyle = (0, utils_1.defineCss)(({ easing }) => (0, react_1.css) `
-    @layer reset {
-        transition-property: opacity, width, height;
-
         &.appear-active,
         &.enter-active,
-        &.enter-done {
-            transition-timing-function: ${easing.easeOut}, ${easing.bounce}, ${easing.bounce};
-        }
-
-        &.exit-active,
-        &.exit-done {
+        &.exit-active {
+            transition-property: opacity;
             transition-timing-function: ${easing.easeOut};
         }
     }
 `);
+function useSweepingStyle({ orientation }) {
+    return (0, utils_1.useCss)(() => (0, react_1.css) `
+        @layer reset {
+            &.appear,
+            &.appear-active,
+            &.enter-active,
+            &.exit,
+            &.exit-active,
+            &.exit-done {
+                overflow: hidden;
+            }
+            
+            &.appear-active,
+            &.enter-active,
+            &.exit-active {
+                transition-property: opacity, width, height;
+            }
+        }
+    `, [orientation]);
+}
 function useGrowAndCollapseStyle({ orientation, _mode }) {
-    return (0, utils_1.useCss)(({ easing }) => {
-        let transformMethod = _mode === 'grow'
-            ? 'scale'
-            : orientation === 'vertical'
-                ? 'scaleY'
-                : 'scaleX';
-        return (0, react_1.css) `
-            @layer reset {
-                transition-property: opacity, transform;
-                ${_mode === 'collapse' ? `transform-origin: ${orientation === 'vertical' ? 'top' : 'left'};` : ''}
-                &,
-                &.appear,
-                &.enter {
-                    transform: ${transformMethod}(0);
-                }
-
-                &.appear-active,
-                &.enter-active,
-                &.enter-done,
-                &.exit {
-                    transform: scale(1);
-                }
+    let transformMethod = _mode === 'grow'
+        ? 'scale'
+        : orientation === 'vertical'
+            ? 'scaleY'
+            : 'scaleX';
+    return (0, utils_1.useCss)(() => (0, react_1.css) `
+        @layer reset {
+            ${_mode === 'collapse' ? `transform-origin: ${orientation === 'vertical' ? 'top' : 'left'};` : ''}
 
-                &.exit-active,
-                &.exit-done {
-                    transform: ${transformMethod}(0);
-                }
+            transition-property: opacity, transform;
 
-                &.appear-active,
-                &.enter-active {
-                    transition-timing-function: ${easing.easeOut}, ${easing.bounce};
-                }
+            &.appear,
+            &.exit,
+            &.exit-done {
+                transform: ${transformMethod}(0);
+            }
 
-                &.exit-active {
-                    transition-timing-function: ${easing.easeOut};
-                }
+            &.appear-active,
+            &.enter,
+            &.enter-done {
+                transform: scale(1);
             }
-        `;
-    }, [orientation, _mode]);
+            
+            &.appear-active,
+            &.enter-active,
+            &.exit-active {
+                transition-property: opacity, transform;
+            }
+        }
+    `, [orientation, _mode]);
 }
 function useSlideStyle({ direction, offset }) {
-    return (0, utils_1.useCss)(({ easing }) => {
-        const transformMethod = direction === 'up' || direction === 'down' ? 'translateY' : 'translateX';
-        let offsetValue = typeof offset === 'number' ? `${offset}px` : offset;
-        if (direction === 'down' || direction === 'right') {
-            offsetValue = '-' + offsetValue;
-        }
-        return (0, react_1.css) `
-            @layer reset {
-                transition-property: opacity, transform;
-
-                &,
-                &.appear,
-                &.enter {
-                    pointer-events: none;
-                    transform: ${transformMethod}(${offsetValue});
-                }
-
-                &.appear-active,
-                &.enter-active,
-                &.enter-done,
-                &.exit {
-                    pointer-events: inherit;
-                    transform: translate(0);
-                }
+    const transformMethod = direction === 'up' || direction === 'down' ? 'translateY' : 'translateX';
+    let offsetValue = typeof offset === 'number' ? `${offset}px` : offset;
+    if (direction === 'down' || direction === 'right') {
+        offsetValue = '-' + offsetValue;
+    }
+    return (0, utils_1.useCss)(() => (0, react_1.css) `
+        @layer reset {
+            transition-property: opacity, transform;
 
-                &.exit-active,
-                &.exit-done {
-                    pointer-events: none;
-                    transform: ${transformMethod}(${offsetValue});
-                }
+            &.appear,
+            &.exit,
+            &.exit-done {
+                pointer-events: none;
+                transform: ${transformMethod}(${offsetValue});
+            }
 
-                &.appear-active,
-                &.enter-active {
-                    transition-timing-function: ${easing.easeOut}, ${easing.bounce};
-                }
+            &.appear-active,
+            &.enter,
+            &.enter-done {
+                pointer-events: inherit;
+                transform: translate(0);
+            }
 
-                &.exit-active {
-                    transition-timing-function: ${easing.easeOut};
-                }
+            &.appear-active,
+            &.enter-active,
+            &.exit-active {
+                transition-property: opacity, transform;
             }
-        `;
-    }, [direction, offset]);
+        }
+    `, [direction, offset]);
 }

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

@@ -21,7 +21,7 @@ export declare const CONTROL_COLUMN_KEY = "$control";
 export declare function useCurdColumns<R extends RowType, V extends Id = Id>({ columns, columnConfigurable }: Pick<CurdProps<R, FormValue, V>, 'columns' | 'columnConfigurable'>): {
     orderedColumns: any[];
     actualColumns: (symbol | ColumnType<R>)[];
-    innerVisible: import("react").RefObject<Id[]>;
-    setInnerVisible: import("react").Dispatch<import("react").SetStateAction<Id[]>>;
-    setInnerOrder: import("react").Dispatch<import("react").SetStateAction<Id[]>>;
+    innerVisible: import("react").RefObject<Id[] | undefined>;
+    setInnerVisible: import("react").Dispatch<import("react").SetStateAction<Id[] | undefined>>;
+    setInnerOrder: import("react").Dispatch<import("react").SetStateAction<Id[] | undefined>>;
 };