@canlooks/can-ui 0.0.167 → 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/lineIndicator.d.ts

@@ -1,6 +1,6 @@
 import { Id } from '../../types';
-export declare function LineIndicator({ value, position, getActiveTab, }: {
-    value?: Id;
-    position: 'top' | 'bottom' | 'left' | 'right';
-    getActiveTab(): HTMLDivElement | undefined;
-}): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const LineIndicator: import("react").MemoExoticComponent<({ value, position, getActiveTab }: {
+    value: Id | undefined;
+    position: "top" | "bottom" | "left" | "right";
+    getActiveTab(): HTMLElement | undefined;
+}) => import("@emotion/react/jsx-runtime").JSX.Element>;

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

@@ -1,13 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.LineIndicator = LineIndicator;
+exports.LineIndicator = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const react_1 = require("react");
 const tabs_style_1 = require("./tabs.style");
 const utils_1 = require("../../utils");
 const theme_1 = require("../theme");
 const tabs_1 = require("./tabs");
-function LineIndicator({ value, position, getActiveTab, }) {
+exports.LineIndicator = (0, react_1.memo)(({ value, position, getActiveTab }) => {
     const context = (0, tabs_1.useTabsContext)();
     const [color, setColor] = (0, react_1.useState)(context.color);
     const [boundingRect, setBoundingRect] = (0, react_1.useState)();
@@ -40,9 +40,12 @@ function LineIndicator({ value, position, getActiveTab, }) {
         }
         activeTab.dataset.color && setColor(activeTab.dataset.color);
     }, [value]);
+    const onTransitionEnd = () => {
+        setAnimating(false);
+    };
     const theme = (0, theme_1.useTheme)();
-    return ((0, jsx_runtime_1.jsx)("div", { className: tabs_style_1.classes.indicator, onTransitionEnd: () => setAnimating(false), style: {
+    return ((0, jsx_runtime_1.jsx)("div", { className: tabs_style_1.classes.indicator, onTransitionEnd: onTransitionEnd, style: {
             ...boundingRect,
             backgroundColor: (0, utils_1.colorTransfer)(color, theme)
         } }));
-}
+});

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,25 +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 sortableItem_1 = require("../sortableItem");
+const sortable_1 = require("@dnd-kit/react/sortable");
 const transitionBase_1 = require("../transitionBase");
-exports.Tab = (0, react_1.memo)(({ prefix, suffix, color, orientation, label, value, disabled, closable, onClose, sortable, _active, _index, ...props }) => {
+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;
-    return ((0, jsx_runtime_1.jsx)(sortableItem_1.SortableItem, { ...props, className: (0, utils_1.clsx)(tabs_style_1.classes.tabWrapper, props.className), component: transitionBase_1.Collapse, orientation: "horizontal", id: value, index: _index, disabled: !_sortable, children: (0, jsx_runtime_1.jsxs)("div", { className: tabs_style_1.classes.tab, style: {
-                borderColor: context.variant === 'line' && !context.animating && _active ? colorValue : void 0,
-                color: _active ? colorValue : void 0,
-                ...props.style
-            }, "data-color": colorValue, "data-disabled": disabled, "data-orientation": orientation, "data-active": _active, onClick: (e) => {
-                !disabled && props.onClick?.(e);
-            }, 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 }) })] }) }));
+    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.jsx)(transitionBase_1.Collapse, { ...(0, utils_1.mergeComponentProps)(props, {
+            ref,
+            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,26 +22,25 @@ 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);
     };
     const tabRefs = (0, react_2.useRef)(new Map());
-    const getActiveTab = () => {
-        return (0, utils_1.isUnset)(innerValue.current) ? void 0 : tabRefs.current.get(innerValue.current);
-    };
     const eventName = changeEvent === 'click' ? 'onClick' : 'onPointerDown';
     const renderTabs = () => {
         if (tabs) {
             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);
@@ -114,6 +113,9 @@ exports.Tabs = (0, react_2.memo)(({ tabs, labelKey = 'label', primaryKey = 'valu
             resizeObserver.disconnect();
         };
     }, [position]);
+    const getActiveTab = (0, react_2.useCallback)(() => {
+        return tabRefs.current.get(innerValue.current);
+    }, []);
     const shouldScroll = (0, react_2.useRef)(true);
     (0, react_2.useEffect)(() => {
         if (shouldScroll.current) {
@@ -133,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;
@@ -126,7 +128,11 @@ function useStyle({ color, variant }) {
                         background-color: ${divider};
                         position: absolute;
                     }
-
+                    
+                    .${exports.classes.tabTransition} { {
+                        z-index: 1;
+                    }}
+                    
                     .${exports.classes.tab} {
                         display: flex;
                         align-items: center;
@@ -136,9 +142,8 @@ function useStyle({ color, variant }) {
                         white-space: nowrap;
                         text-overflow: ellipsis;
                         overflow: hidden;
-                        z-index: 1;
                         -webkit-tap-highlight-color: transparent;
-                        transition: all .25s ${easing.easeOut};
+                        transition: background-color, color .25s ${easing.easeOut};
 
                         &[data-orientation=vertical] {
                             flex-direction: column;
@@ -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;