@canlooks/can-ui 0.0.152 → 0.0.154

package/dist/cjs/components/sortableItem/sortableItem.js

@@ -36,5 +36,5 @@ exports.SortableItem = (({ component: Component = 'div', id, disabled, sortableA
                     transform: utilities_1.CSS.Transform.toString(transform),
                     transition,
                     ...props.style
-                }, onTouchStart: disabled ? void 0 : onTouchStart, "data-dragging": isDragging, "data-disabled": disabled }), isDragging && (0, jsx_runtime_1.jsx)(react_2.Global, { styles: sortableItem_style_1.globalGrabbingStyle })] }));
+                }, onTouchStart: disabled ? void 0 : onTouchStart, "data-dragging": isDragging, "data-draggable": !disabled }), isDragging && (0, jsx_runtime_1.jsx)(react_2.Global, { styles: sortableItem_style_1.globalGrabbingStyle })] }));
 });

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

@@ -5,7 +5,7 @@ const react_1 = require("@emotion/react");
 const utils_1 = require("../../utils");
 exports.classes = (0, utils_1.defineInnerClasses)('sortable-item');
 exports.style = (0, react_1.css) `
-    &:not([data-dsabled=true]) {
+    &[data-draggable=true] {
         cursor: grab;
 
         &:active {

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

@@ -10,6 +10,7 @@ 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 transitionBase_1 = require("../transitionBase");
 exports.Tab = (0, react_1.memo)(({ prefix, suffix, color, orientation, label, value, disabled, closable, onClose, sortable, _active, ...props }) => {
     const context = (0, tabs_1.useTabsContext)();
     const colorValue = (0, utils_1.useColor)(color ?? context.color);
@@ -19,14 +20,14 @@ exports.Tab = (0, react_1.memo)(({ prefix, suffix, color, orientation, label, va
         context.onClose?.(value);
     };
     const _sortable = sortable ?? context.sortable;
-    return ((0, jsx_runtime_1.jsxs)(sortableItem_1.SortableItem, { ...props, id: value, disabled: !_sortable, className: (0, utils_1.clsx)(tabs_style_1.classes.tab, props.className), 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 }) })] }));
+    return ((0, jsx_runtime_1.jsx)(sortableItem_1.SortableItem, { ...props, component: transitionBase_1.Collapse, orientation: "horizontal", id: value, disabled: !_sortable, children: (0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.clsx)(tabs_style_1.classes.tab, props.className), 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 }) })] }) }));
 });

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

@@ -13,6 +13,7 @@ const tabsEllipsis_1 = require("./tabsEllipsis");
 const lineIndicator_1 = require("./lineIndicator");
 const core_1 = require("@dnd-kit/core");
 const sortable_1 = require("@dnd-kit/sortable");
+const react_transition_group_1 = require("react-transition-group");
 const TabsContext = (0, react_2.createContext)({});
 function useTabsContext() {
     return (0, react_2.useContext)(TabsContext);
@@ -139,7 +140,7 @@ exports.Tabs = (0, react_2.memo)(({ tabs, labelKey = 'label', primaryKey = 'valu
                                 }), [
                                     color, variant, closable, onClose, sortable,
                                     animating.current
-                                ]), children: [renderTabs(), variant === 'line' &&
+                                ]), 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) &&
                                 (0, jsx_runtime_1.jsx)(tabsEllipsis_1.TabsEllipsis, { tabs: tabs, labelKey: labelKey, primaryKey: primaryKey, value: innerValue.current, onToggleSelected: setValueInEllipsis, children: props.children }), suffix] }) })] }));

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

@@ -137,6 +137,7 @@ function useStyle({ color, variant }) {
                         overflow: hidden;
                         z-index: 1;
                         -webkit-tap-highlight-color: transparent;
+                        transition: all .25s ${easing.easeOut};
 
                         &[data-orientation=vertical] {
                             flex-direction: column;
@@ -231,10 +232,6 @@ function useStyle({ color, variant }) {
                                 gap: 0 ${spacing[10]}px;
                             }
 
-                            .${exports.classes.tab} {
-                                transition: color .25s ${easing.easeOut};
-                            }
-
                             &[data-position=top],
                             &[data-position=bottom] {
                                 .${exports.classes.tab} {
@@ -322,7 +319,6 @@ function useStyle({ color, variant }) {
                             .${exports.classes.tab} {
                                 border: 1px solid ${gray(.1)};
                                 background-color: ${background.body};
-                                transition: color .25s ${easing.easeOut}, background-color .25s ${easing.easeOut};
 
                                 &[data-active=true] {
                                     background-color: ${background.content};

package/dist/cjs/components/touchRipple/index.d.ts

@@ -1,2 +1 @@
 export * from './touchRipple';
-export * from './touchRipple';

package/dist/cjs/components/touchRipple/index.js

@@ -2,4 +2,3 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 tslib_1.__exportStar(require("./touchRipple"), exports);
-tslib_1.__exportStar(require("./touchRipple"), exports);

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

@@ -22,10 +22,19 @@ const Sweeping = ({ ref, in: _in = false, appear = true, orientation = 'vertical
         return getCollapsedSize();
     });
     const [isEntered, setIsEntered] = (0, react_1.useState)(_in && !appear);
+    const styleProperty = orientation === 'vertical' ? 'height' : 'width';
     const expand = () => {
-        requestAnimationFrame(() => {
-            innerRef.current && setSize(innerRef.current[orientation === 'vertical' ? 'scrollHeight' : 'scrollWidth']);
-        });
+        const el = innerRef.current;
+        if (el) {
+            el.style.transition = 'none';
+            el.style[styleProperty] = 'auto';
+            const newSize = el[orientation === 'vertical' ? 'offsetHeight' : 'offsetWidth'];
+            el.style[styleProperty] = size + 'px';
+            el.style.transition = '';
+            requestAnimationFrame(() => {
+                setSize(newSize);
+            });
+        }
     };
     const collapse = () => {
         setIsEntered(false);
@@ -48,8 +57,8 @@ const Sweeping = ({ ref, in: _in = false, appear = true, orientation = 'vertical
             : 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: {
-            [orientation === 'vertical' ? 'height' : 'width']: isEntered ? 'auto' : size,
-            ...!isEntered ? { overflow: 'hidden' } : {},
+            [styleProperty]: isEntered ? 'auto' : size,
+            ...!isEntered && { overflow: 'hidden' },
             ...props.style
         }, onEntered: () => setIsEntered(true) }));
 };

package/dist/esm/components/sortableItem/sortableItem.js

@@ -33,5 +33,5 @@ export const SortableItem = (({ component: Component = 'div', id, disabled, sort
                     transform: CSS.Transform.toString(transform),
                     transition,
                     ...props.style
-                }, onTouchStart: disabled ? void 0 : onTouchStart, "data-dragging": isDragging, "data-disabled": disabled }), isDragging && _jsx(Global, { styles: globalGrabbingStyle })] }));
+                }, onTouchStart: disabled ? void 0 : onTouchStart, "data-dragging": isDragging, "data-draggable": !disabled }), isDragging && _jsx(Global, { styles: globalGrabbingStyle })] }));
 });

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

@@ -2,7 +2,7 @@ import { css } from '@emotion/react';
 import { defineInnerClasses } from '../../utils';
 export const classes = defineInnerClasses('sortable-item');
 export const style = css `
-    &:not([data-dsabled=true]) {
+    &[data-draggable=true] {
         cursor: grab;
 
         &:active {

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

@@ -7,6 +7,7 @@ import { Button } from '../button';
 import { faXmark } from '@fortawesome/free-solid-svg-icons/faXmark';
 import { Icon } from '../icon';
 import { SortableItem } from '../sortableItem';
+import { Collapse } from '../transitionBase';
 export const Tab = memo(({ prefix, suffix, color, orientation, label, value, disabled, closable, onClose, sortable, _active, ...props }) => {
     const context = useTabsContext();
     const colorValue = useColor(color ?? context.color);
@@ -16,14 +17,14 @@ export const Tab = memo(({ prefix, suffix, color, orientation, label, value, dis
         context.onClose?.(value);
     };
     const _sortable = sortable ?? context.sortable;
-    return (_jsxs(SortableItem, { ...props, id: value, disabled: !_sortable, className: clsx(classes.tab, props.className), 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 &&
-                _jsx("div", { className: classes.tabPrefix, children: prefix }), _jsx("div", { className: classes.label, children: label }), !!suffix &&
-                _jsx("div", { className: classes.tabSuffix, children: suffix }), _closable &&
-                _jsx(Button, { className: classes.tabClose, variant: "text", color: "text.secondary", onClick: closeHandler, children: _jsx(Icon, { icon: faXmark }) })] }));
+    return (_jsx(SortableItem, { ...props, component: Collapse, orientation: "horizontal", id: value, disabled: !_sortable, children: _jsxs("div", { className: clsx(classes.tab, props.className), 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 &&
+                    _jsx("div", { className: classes.tabPrefix, children: prefix }), _jsx("div", { className: classes.label, children: label }), !!suffix &&
+                    _jsx("div", { className: classes.tabSuffix, children: suffix }), _closable &&
+                    _jsx(Button, { className: classes.tabClose, variant: "text", color: "text.secondary", onClick: closeHandler, children: _jsx(Icon, { icon: faXmark }) })] }) }));
 });

package/dist/esm/components/tabs/tabs.js

@@ -9,6 +9,7 @@ import { TabsEllipsis } from './tabsEllipsis';
 import { LineIndicator } from './lineIndicator';
 import { DndContext } from '@dnd-kit/core';
 import { SortableContext } from '@dnd-kit/sortable';
+import { TransitionGroup } from 'react-transition-group';
 const TabsContext = createContext({});
 export function useTabsContext() {
     return useContext(TabsContext);
@@ -135,7 +136,7 @@ export const Tabs = memo(({ tabs, labelKey = 'label', primaryKey = 'value', size
                                 }), [
                                     color, variant, closable, onClose, sortable,
                                     animating.current
-                                ]), children: [renderTabs(), variant === 'line' &&
+                                ]), children: [_jsx(TransitionGroup, { component: null, children: renderTabs() }), variant === 'line' &&
                                         _jsx(LineIndicator, { value: innerValue.current, position: position, getActiveTab: getActiveTab })] }) }) }) }) }), _jsx("div", { className: classes.end, "data-show": shadowEnd, children: !!(suffix || shadowStart || shadowEnd) &&
                     _jsxs("div", { className: classes.suffix, children: [(shadowStart || shadowEnd) &&
                                 _jsx(TabsEllipsis, { tabs: tabs, labelKey: labelKey, primaryKey: primaryKey, value: innerValue.current, onToggleSelected: setValueInEllipsis, children: props.children }), suffix] }) })] }));

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

@@ -133,6 +133,7 @@ export function useStyle({ color, variant }) {
                         overflow: hidden;
                         z-index: 1;
                         -webkit-tap-highlight-color: transparent;
+                        transition: all .25s ${easing.easeOut};
 
                         &[data-orientation=vertical] {
                             flex-direction: column;
@@ -227,10 +228,6 @@ export function useStyle({ color, variant }) {
                                 gap: 0 ${spacing[10]}px;
                             }
 
-                            .${classes.tab} {
-                                transition: color .25s ${easing.easeOut};
-                            }
-
                             &[data-position=top],
                             &[data-position=bottom] {
                                 .${classes.tab} {
@@ -318,7 +315,6 @@ export function useStyle({ color, variant }) {
                             .${classes.tab} {
                                 border: 1px solid ${gray(.1)};
                                 background-color: ${background.body};
-                                transition: color .25s ${easing.easeOut}, background-color .25s ${easing.easeOut};
 
                                 &[data-active=true] {
                                     background-color: ${background.content};

package/dist/esm/components/touchRipple/index.d.ts

@@ -1,2 +1 @@
 export * from './touchRipple';
-export * from './touchRipple';

package/dist/esm/components/touchRipple/index.js

@@ -1,2 +1 @@
 export * from './touchRipple';
-export * from './touchRipple';

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

@@ -18,10 +18,19 @@ const Sweeping = ({ ref, in: _in = false, appear = true, orientation = 'vertical
         return getCollapsedSize();
     });
     const [isEntered, setIsEntered] = useState(_in && !appear);
+    const styleProperty = orientation === 'vertical' ? 'height' : 'width';
     const expand = () => {
-        requestAnimationFrame(() => {
-            innerRef.current && setSize(innerRef.current[orientation === 'vertical' ? 'scrollHeight' : 'scrollWidth']);
-        });
+        const el = innerRef.current;
+        if (el) {
+            el.style.transition = 'none';
+            el.style[styleProperty] = 'auto';
+            const newSize = el[orientation === 'vertical' ? 'offsetHeight' : 'offsetWidth'];
+            el.style[styleProperty] = size + 'px';
+            el.style.transition = '';
+            requestAnimationFrame(() => {
+                setSize(newSize);
+            });
+        }
     };
     const collapse = () => {
         setIsEntered(false);
@@ -44,8 +53,8 @@ const Sweeping = ({ ref, in: _in = false, appear = true, orientation = 'vertical
             : collapse();
     }, [_in]);
     return (_jsx(TransitionBase, { ...props, appear: appear, orientation: orientation, in: _in, ref: cloneRef(ref, innerRef), style: {
-            [orientation === 'vertical' ? 'height' : 'width']: isEntered ? 'auto' : size,
-            ...!isEntered ? { overflow: 'hidden' } : {},
+            [styleProperty]: isEntered ? 'auto' : size,
+            ...!isEntered && { overflow: 'hidden' },
             ...props.style
         }, onEntered: () => setIsEntered(true) }));
 };

package/package.json

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