@canlooks/can-ui 0.0.166 → 0.0.168

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

@@ -3,6 +3,7 @@ import { ColorPropsValue, DivProps, Placement } from '../../types';
 export interface BadgeProps extends DivProps {
     color?: ColorPropsValue;
     placement?: Placement;
+    /** 默认为`standard` */
     variant?: 'dot' | 'standard';
     /** 角标的任容 */
     count?: ReactNode;

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.js

@@ -9,8 +9,8 @@ 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 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 context = (0, tabs_1.useTabsContext)();
     const colorValue = (0, utils_1.useColor)(color ?? context.color);
@@ -20,14 +20,23 @@ 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.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: {
+    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, {
+            ref,
+            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) => {
+                color: _active ? colorValue : void 0
+            },
+            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 }) })] }) }));
+            }
+        }), "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

@@ -24,6 +24,7 @@ exports.Tabs = (0, react_2.memo)(({ tabs, labelKey = 'label', primaryKey = 'valu
     const setInnerValue = (value) => {
         if (!readOnly && !disabled) {
             _setInnerValue(value);
+            variant === 'line' && setAnimating(true);
         }
     };
     const [animating, setAnimating] = (0, utils_1.useDerivedState)(prev => typeof prev !== 'undefined', [innerValue.current]);
@@ -32,9 +33,6 @@ exports.Tabs = (0, react_2.memo)(({ tabs, labelKey = 'label', primaryKey = 'valu
         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) {
@@ -114,6 +112,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) {

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

@@ -126,7 +126,7 @@ function useStyle({ color, variant }) {
                         background-color: ${divider};
                         position: absolute;
                     }
-
+                    
                     .${exports.classes.tab} {
                         display: flex;
                         align-items: center;
@@ -138,7 +138,7 @@ function useStyle({ color, variant }) {
                         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;

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

@@ -31,6 +31,7 @@ exports.fadeStyle = (0, utils_1.defineCss)(({ easing }) => (0, react_1.css) `
         transition-property: opacity;
         transition-timing-function: ${easing.easeOut};
 
+        &,
         &.appear,
         &.enter {
             opacity: 0;

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

@@ -3,6 +3,7 @@ import { ColorPropsValue, DivProps, Placement } from '../../types.js';
 export interface BadgeProps extends DivProps {
     color?: ColorPropsValue;
     placement?: Placement;
+    /** 默认为`standard` */
     variant?: 'dot' | 'standard';
     /** 角标的任容 */
     count?: ReactNode;

package/dist/esm/components/tabs/lineIndicator.d.ts

@@ -1,6 +1,6 @@
 import { Id } from '../../types.js';
-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/esm/components/tabs/lineIndicator.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-import { useEffect, useState } from 'react';
+import { memo, useEffect, useState } from 'react';
 import { classes, indicatorWidth } from './tabs.style.js';
 import { colorTransfer } from '../../utils/index.js';
 import { useTheme } from '../theme/index.js';
 import { useTabsContext } from './tabs.js';
-export function LineIndicator({ value, position, getActiveTab, }) {
+export const LineIndicator = memo(({ value, position, getActiveTab }) => {
     const context = useTabsContext();
     const [color, setColor] = useState(context.color);
     const [boundingRect, setBoundingRect] = useState();
@@ -37,9 +37,12 @@ export function LineIndicator({ value, position, getActiveTab, }) {
         }
         activeTab.dataset.color && setColor(activeTab.dataset.color);
     }, [value]);
+    const onTransitionEnd = () => {
+        setAnimating(false);
+    };
     const theme = useTheme();
-    return (_jsx("div", { className: classes.indicator, onTransitionEnd: () => setAnimating(false), style: {
+    return (_jsx("div", { className: classes.indicator, onTransitionEnd: onTransitionEnd, style: {
             ...boundingRect,
             backgroundColor: colorTransfer(color, theme)
         } }));
-}
+});

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

@@ -1,13 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { memo } from 'react';
-import { clsx, useColor } from '../../utils/index.js';
+import { mergeComponentProps, useColor } from '../../utils/index.js';
 import { classes } from './tabs.style.js';
 import { useTabsContext } from './tabs.js';
 import { Button } from '../button/index.js';
 import { faXmark } from '@fortawesome/free-solid-svg-icons/faXmark';
 import { Icon } from '../icon/index.js';
-import { SortableItem } from '../sortableItem/index.js';
 import { Collapse } from '../transitionBase/index.js';
+import { useSortable } from '@dnd-kit/react/sortable';
 export const Tab = memo(({ prefix, suffix, color, orientation, label, value, disabled, closable, onClose, sortable, _active, _index, ...props }) => {
     const context = useTabsContext();
     const colorValue = useColor(color ?? context.color);
@@ -17,14 +17,23 @@ export const Tab = memo(({ prefix, suffix, color, orientation, label, value, dis
         context.onClose?.(value);
     };
     const _sortable = sortable ?? context.sortable;
-    return (_jsx(SortableItem, { ...props, className: clsx(classes.tabWrapper, props.className), component: Collapse, orientation: "horizontal", id: value, index: _index, disabled: !_sortable, children: _jsxs("div", { className: classes.tab, style: {
+    const { ref } = useSortable({
+        id: value,
+        index: _index,
+        disabled: !_sortable
+    });
+    return (_jsxs(Collapse, { orientation: "horizontal", ...mergeComponentProps(props, {
+            ref,
+            className: 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) => {
+                color: _active ? colorValue : void 0
+            },
+            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 }) })] }) }));
+            }
+        }), "data-color": colorValue, "data-disabled": disabled, "data-orientation": orientation, "data-active": _active, 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

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { createElement as _createElement } from "@emotion/react";
-import { Children, cloneElement, createContext, isValidElement, memo, useContext, useEffect, useMemo, useRef, useState } from 'react';
+import { Children, cloneElement, createContext, isValidElement, memo, useContext, useEffect, useMemo, useRef, useState, useCallback } from 'react';
 import { classes, useStyle } from './tabs.style.js';
 import { clsx, cloneRef, isUnset, useControlled, useDerivedState, defaultSensors, onDndDragEnd } from '../../utils/index.js';
 import { useTheme } from '../theme/index.js';
@@ -20,6 +20,7 @@ export const Tabs = memo(({ tabs, labelKey = 'label', primaryKey = 'value', size
     const setInnerValue = (value) => {
         if (!readOnly && !disabled) {
             _setInnerValue(value);
+            variant === 'line' && setAnimating(true);
         }
     };
     const [animating, setAnimating] = useDerivedState(prev => typeof prev !== 'undefined', [innerValue.current]);
@@ -28,9 +29,6 @@ export const Tabs = memo(({ tabs, labelKey = 'label', primaryKey = 'value', size
         setInnerValue(value);
     };
     const tabRefs = useRef(new Map());
-    const getActiveTab = () => {
-        return isUnset(innerValue.current) ? void 0 : tabRefs.current.get(innerValue.current);
-    };
     const eventName = changeEvent === 'click' ? 'onClick' : 'onPointerDown';
     const renderTabs = () => {
         if (tabs) {
@@ -110,6 +108,9 @@ export const Tabs = memo(({ tabs, labelKey = 'label', primaryKey = 'value', size
             resizeObserver.disconnect();
         };
     }, [position]);
+    const getActiveTab = useCallback(() => {
+        return tabRefs.current.get(innerValue.current);
+    }, []);
     const shouldScroll = useRef(true);
     useEffect(() => {
         if (shouldScroll.current) {

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

@@ -122,7 +122,7 @@ export function useStyle({ color, variant }) {
                         background-color: ${divider};
                         position: absolute;
                     }
-
+                    
                     .${classes.tab} {
                         display: flex;
                         align-items: center;
@@ -134,7 +134,7 @@ export function useStyle({ color, variant }) {
                         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;

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

@@ -25,6 +25,7 @@ export const fadeStyle = defineCss(({ easing }) => css `
         transition-property: opacity;
         transition-timing-function: ${easing.easeOut};
 
+        &,
         &.appear,
         &.enter {
             opacity: 0;

package/package.json

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