@canlooks/can-ui 0.0.25 → 0.0.26

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

@@ -1,53 +1,45 @@
 import { css } from '@emotion/react';
 import { defineClasses, defineCss } from '../../utils';
-export const classes = defineClasses('table');
-export const style = defineCss(({ mode, borderRadius, spacing, gray, easing }) => {
-    const borderColor = gray(mode === 'light' ? .12 : .32);
-    const bg = gray(mode === 'light' ? .02 : .22);
-    const bgStriped = gray(mode === 'light' ? .01 : .21);
+import Color from 'color';
+export const classes = defineClasses('table', [
+    'container',
+    'cell'
+]);
+export const style = defineCss(({ mode, spacing, gray, divider, easing, colors }) => {
+    const headerBg = gray(mode === 'light' ? .02 : .22);
+    const stripedBg = gray(mode === 'light' ? .01 : .21);
+    const selectedBg = Color(colors.primary.main).alpha(mode === 'light' ? .05 : .1).string();
     return css `
         width: 100%;
         border-spacing: 0;
-        border-radius: ${borderRadius}px ${borderRadius}px 0 0;
 
         thead, tfoot {
-            tr {
-                background-color: ${bg};
-                position: sticky;
-                z-index: 2;
+            position: sticky;
+            z-index: 3;
+
+            th, td {
+                background-color: ${headerBg};
             }
         }
 
-        thead tr {
+        thead {
             top: 0;
-
-            &:first-of-type > * {
-                &:first-of-type {
-                    border-top-left-radius: ${borderRadius}px;
-                }
-
-                &:last-of-type {
-                    border-top-right-radius: ${borderRadius}px;
-                }
-            }
         }
 
-        tfoot tr {
+        tfoot {
             bottom: 0;
-            
-            & > * {
-                border-top: 1px solid ${borderColor};
+
+            th, td {
+                border-top: 1px solid ${divider};
             }
         }
 
         th, td {
+            position: relative;
             text-align: left;
             padding: 12px ${spacing[5]}px;
-            border-bottom: 1px solid ${borderColor};
-
-            &[data-grouped=true] {
-                text-align: center;
-            }
+            border-bottom: 1px solid ${divider};
+            transition: background-color .25s ${easing.easeOut};
         }
 
         &[data-size=small] {
@@ -62,40 +54,66 @@ export const style = defineCss(({ mode, borderRadius, spacing, gray, easing }) =
             }
         }
 
-        &[data-bordered=true] {
-            border-top: 1px solid ${borderColor};
-            border-left: 1px solid ${borderColor};
+        &[data-bordered=all], &[data-bordered=true] {
+            border-top: 1px solid ${divider};
+            border-left: 1px solid ${divider};
 
             th, td {
-                border-right: 1px solid ${borderColor};
+                border-right: 1px solid ${divider};
             }
         }
 
-        &:not([data-bordered=true]) {
-            thead > tr > * {
-                &:not(:first-of-type):before {
-                    content: '';
-                    width: 1px;
-                    height: 20px;
-                    background-color: ${borderColor};
-                    position: absolute;
-                    inset: auto auto auto 0;
+        &:not([data-bordered=all], [data-bordered=true]) {
+            thead {
+                th, td {
+                    &:not(:first-of-type) {
+                        &:before {
+                            content: '';
+                            width: 2px;
+                            height: 1em;
+                            background-color: ${divider};
+                            position: absolute;
+                            top: calc(50% - .5em);
+                            left: 0;
+                        }
+                    }
                 }
             }
         }
 
+        &[data-bordered=out] {
+            border-top: 1px solid ${divider};
 
-        tr {
-            transition: background-color .2s ${easing.easeOut};
+            th, td {
+                &:first-of-type {
+                    border-left: 1px solid ${divider};
+                }
+
+                &:last-of-type {
+                    border-right: 1px solid ${divider};
+                }
+            }
+        }
+
+        tbody tr {
+            &[data-selected=true] {
+                th, td {
+                    background-color: ${selectedBg};
+                }
+            }
 
             &:not([data-selected=true]):hover {
-                background-color: ${bg};
+                th, td {
+                    background-color: ${headerBg};
+                }
             }
         }
 
         &[data-striped=true] {
             tbody tr:nth-of-type(even):not(:hover):not([data-selected=true]) {
-                background-color: ${bgStriped};
+                th, td {
+                    background-color: ${stripedBg};
+                }
             }
         }
     `;

package/dist/esm/components/table/tableSticky.d.ts

@@ -0,0 +1,13 @@
+import { JSX } from 'react';
+import { DivProps } from '../../types';
+export declare function TableContainer(props: DivProps): import("@emotion/react/jsx-runtime").JSX.Element;
+type CellProps = {
+    sticky?: 'left' | 'right';
+};
+export interface TdCellProps extends Partial<JSX.IntrinsicElements['td']>, CellProps {
+}
+export interface ThCellProps extends Partial<JSX.IntrinsicElements['th']>, CellProps {
+}
+export declare function TdCell(props: TdCellProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function ThCell(props: ThCellProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/components/table/tableSticky.js

@@ -0,0 +1,71 @@
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { clsx, cloneRef } from '../../utils';
+import { classes } from './table.style';
+import { style } from './tableSticky.style';
+export function TableContainer(props) {
+    const [scrolledLeft, setScrolledLeft] = useState(false);
+    const [scrolledRight, setScrolledRight] = useState(false);
+    const innerRef = useRef(null);
+    useEffect(() => {
+        const el = innerRef.current;
+        const scroll = () => {
+            setScrolledLeft(!!el.scrollLeft);
+            setScrolledRight(!!(el.scrollWidth - el.clientWidth - el.scrollLeft));
+        };
+        scroll();
+        el.addEventListener('scroll', scroll);
+        return () => {
+            el.removeEventListener('scroll', scroll);
+        };
+    }, []);
+    return (_jsx("div", { ...props, ref: cloneRef(props.ref, innerRef), css: style, className: clsx(classes.container, props.className), "data-scrolled-left": scrolledLeft, "data-scrolled-right": scrolledRight }));
+}
+export function TdCell(props) {
+    return _jsx("td", { ...useStickyCellProps(props) });
+}
+export function ThCell(props) {
+    return _jsx("th", { ...useStickyCellProps(props) });
+}
+function useStickyCellProps({ ref, sticky, ...props }) {
+    const innerRef = useRef(null);
+    const [offset, setOffset] = useState(0);
+    useEffect(() => {
+        if (!sticky) {
+            return;
+        }
+        const siblings = [];
+        const resizeObserver = new ResizeObserver(() => {
+            setOffset(siblings.reduce((acc, el) => {
+                return acc + el.offsetWidth;
+            }, 0));
+        });
+        const recurve = (currentEl = innerRef.current) => {
+            const sibling = sticky === 'left'
+                ? currentEl.previousElementSibling
+                : currentEl.nextElementSibling;
+            if (sibling) {
+                if (sibling.dataset.sticky === sticky) {
+                    siblings.push(sibling);
+                    resizeObserver.observe(sibling);
+                }
+                recurve(sibling);
+            }
+        };
+        recurve();
+        return () => {
+            resizeObserver.disconnect();
+        };
+    });
+    return {
+        ...props,
+        ref: cloneRef(ref, innerRef),
+        css: style,
+        className: clsx(classes.cell, props.className),
+        'data-sticky': sticky,
+        style: {
+            ...sticky && { [sticky]: offset },
+            ...props.style
+        }
+    };
+}

package/dist/esm/components/table/tableSticky.style.d.ts

@@ -0,0 +1 @@
+export declare const style: () => import("@emotion/react").SerializedStyles;

package/dist/esm/components/table/tableSticky.style.js

@@ -0,0 +1,55 @@
+import { defineCss } from '../../utils';
+import { css } from '@emotion/react';
+export const style = defineCss(({ background, easing }) => css `
+    overflow: auto;
+
+    tbody tr {
+        &:not(:hover):not([data-selected=true]) {
+            th, td {
+                background-color: ${background.content};
+            }
+        }
+    }
+
+    th, td {
+        &[data-sticky=left], &[data-sticky=right] {
+            overflow: visible;
+            position: sticky;
+            z-index: 2;
+
+            &:after {
+                content: '';
+                width: 30px;
+                height: 100%;
+                position: absolute;
+                top: 0;
+                transition: all .3s ${easing.easeOut};
+                pointer-events: none;
+            }
+        }
+
+        &[data-sticky=left]:after {
+            left: 100%;
+        }
+
+        &[data-sticky=right]:after {
+            right: 100%;
+        }
+    }
+
+    &[data-scrolled-left=true] {
+        th, td {
+            &[data-sticky=left]:not(:has(+ [data-sticky=left])):after {
+                box-shadow: inset 12px 0 9px -9px rgba(0, 0, 0, .08);
+            }
+        }
+    }
+
+    &[data-scrolled-right=true] {
+        th, td {
+            &:not([data-sticky=right]) + [data-sticky=right]:after {
+                box-shadow: inset -12px 0 9px -9px rgba(0, 0, 0, .08);
+            }
+        }
+    }
+`);

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

@@ -0,0 +1,8 @@
+import { ActiveTabRef } from './tabs';
+import { Id } from '../../types';
+export declare function LineIndicator({ value, position, getActiveTab, onTransitionEnd }: {
+    value?: Id;
+    position: 'top' | 'bottom' | 'left' | 'right';
+    getActiveTab(): ActiveTabRef | undefined;
+    onTransitionEnd(): void;
+}): import("@emotion/react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,42 @@
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { classes, indicatorWidth } from './tabs.style';
+import { colorTransfer } from '../../utils';
+import { useTheme } from '../theme';
+export function LineIndicator({ value, position, getActiveTab, onTransitionEnd }) {
+    const [boundingRect, setBoundingRect] = useState();
+    const [color, setColor] = useState('primary');
+    useEffect(() => {
+        const { el, color } = getActiveTab() || {};
+        if (!el) {
+            return;
+        }
+        if (position === 'top' || position === 'bottom') {
+            setBoundingRect({
+                width: el.offsetWidth,
+                height: indicatorWidth,
+                left: el.offsetLeft,
+                ...position === 'top'
+                    ? { bottom: 0 }
+                    : { top: 0 }
+            });
+        }
+        else {
+            // position === 'left' || position === 'right'
+            setBoundingRect({
+                width: indicatorWidth,
+                height: el.offsetHeight,
+                top: el.offsetTop,
+                ...position === 'left'
+                    ? { right: 0 }
+                    : { left: 0 }
+            });
+        }
+        setColor(color);
+    }, [value]);
+    const theme = useTheme();
+    return (_jsx("div", { className: classes.indicator, onTransitionEnd: onTransitionEnd, style: {
+            ...boundingRect,
+            backgroundColor: colorTransfer(color, theme)
+        } }));
+}

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

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
-import { ColorPropsValue, DIVProps, Id } from '../../types';
-export interface TabProps extends Omit<DIVProps, 'prefix'> {
+import { ColorPropsValue, DivProps, Id } from '../../types';
+export interface TabProps extends Omit<DivProps, 'prefix'> {
     prefix?: ReactNode;
     suffix?: ReactNode;
     /** color仅生效于激活状态，普通状态样式请使用css修改 */

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

@@ -1,12 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { memo } from 'react';
-import { classnames, useColor } from '../../utils';
+import { clsx, useColor } from '../../utils';
 import { classes } from './tabs.style';
 import { useTabsContext } from './tabs';
 export const Tab = memo(({ prefix, suffix, color = 'primary', orientation, label, value, disabled, _active, ...props }) => {
     const colorValue = useColor(color);
     const { variant, animating } = useTabsContext();
-    return (_jsxs("div", { ...props, className: classnames(classes.tab, props.className), style: {
+    return (_jsxs("div", { ...props, className: clsx(classes.tab, props.className), style: {
             borderColor: variant === 'line' && !animating && _active ? colorValue : void 0,
             color: _active ? colorValue : void 0,
             ...props.style

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

@@ -1,8 +1,8 @@
 import { CSSProperties, ReactElement, ReactNode } from 'react';
-import { ColorPropsValue, DIVProps, Id, Obj, Size } from '../../types';
+import { ColorPropsValue, DivProps, Id, Obj, Size } from '../../types';
 import { Tab, TabProps } from './tab';
 export type TabType = TabProps & Obj;
-export interface TabsProps<T extends TabType = TabType> extends Omit<DIVProps, 'prefix' | 'defaultValue' | 'onChange'> {
+export interface TabsProps<T extends TabType = TabType> extends Omit<DivProps, 'prefix' | 'defaultValue' | 'onChange'> {
     tabs?: T[];
     labelKey?: keyof T;
     primaryKey?: keyof T;
@@ -21,8 +21,12 @@ export interface TabsProps<T extends TabType = TabType> extends Omit<DIVProps, '
     readOnly?: boolean;
     disabled?: boolean;
 }
+export type ActiveTabRef = {
+    el: HTMLElement | null;
+    color: string;
+};
 export declare function useTabsContext(): {
-    variant?: TabsProps<TabType>["variant"];
+    variant?: TabsProps["variant"];
     animating?: boolean;
 };
 export declare const Tabs: {

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

@@ -1,10 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { Children, cloneElement, createContext, isValidElement, memo, useContext, useEffect, useMemo, useRef, useState } from 'react';
-import { classes, indicatorWidth, useStyle } from './tabs.style';
-import { classnames, cloneRef, colorTransfer, isUnset, useControlled, useDerivedState } from '../../utils';
+import { classes, useStyle } from './tabs.style';
+import { clsx, cloneRef, isUnset, useControlled } from '../../utils';
 import { useTheme } from '../theme';
 import { Tab } from './tab';
 import { TabsEllipsis } from './tabsEllipsis';
+import { LineIndicator } from './lineIndicator';
 const TabsContext = createContext({});
 export function useTabsContext() {
     return useContext(TabsContext);
@@ -12,7 +13,7 @@ export function useTabsContext() {
 export const Tabs = memo(({ tabs, labelKey = 'label', primaryKey = 'value', variant = 'line', color = 'primary', size, position = 'top', justifyContent = 'flex-start', fullWidth, prefix, suffix, defaultValue, value, onChange, readOnly, disabled, ...props }) => {
     const theme = useTheme();
     size ??= theme.size;
-    const [animating, setAnimating] = useState(false);
+    const [animating, setAnimating] = useState(false); // TODO 应当考虑value受控的情况，参考anchorList组件
     const [innerValue, _setInnerValue] = useControlled(defaultValue, value, onChange);
     const setInnerValue = (value) => {
         if (!readOnly && !disabled) {
@@ -25,48 +26,9 @@ export const Tabs = memo(({ tabs, labelKey = 'label', primaryKey = 'value', vari
         setInnerValue(value);
     };
     const tabRefs = useRef(new Map());
-    const activeTab = useMemo(() => {
-        return !isUnset(innerValue.current) ? tabRefs.current.get(innerValue.current) : void 0;
-    }, [innerValue.current]);
-    /**
-     * 计算指示器的位置
-     */
-    const fitIndicatorRect = () => {
-        if (variant !== 'card') {
-            const el = activeTab?.el;
-            if (el) {
-                if (position === 'top' || position === 'bottom') {
-                    return {
-                        width: el.offsetWidth,
-                        height: indicatorWidth,
-                        left: el.offsetLeft,
-                        ...position === 'top'
-                            ? { bottom: 0 }
-                            : { top: 0 }
-                    };
-                }
-                return {
-                    width: indicatorWidth,
-                    height: el.offsetHeight,
-                    top: el.offsetTop,
-                    ...position === 'left'
-                        ? { right: 0 }
-                        : { left: 0 }
-                };
-            }
-        }
-        return {
-            width: 0,
-            height: 0,
-            left: 0,
-            top: 0
-        };
+    const getActiveTab = () => {
+        return isUnset(innerValue.current) ? void 0 : tabRefs.current.get(innerValue.current);
     };
-    const [indicatorRect, setIndicatorRect] = useDerivedState(fitIndicatorRect, [innerValue.current, variant, position]);
-    useEffect(() => {
-        // 仅首次渲染需要计算
-        setIndicatorRect(fitIndicatorRect());
-    }, []);
     const renderTabs = () => {
         if (tabs) {
             return tabs.map((p, i) => {
@@ -89,14 +51,17 @@ export const Tabs = memo(({ tabs, labelKey = 'label', primaryKey = 'value', vari
                 const active = !isUnset(value) && value === innerValue.current;
                 return cloneElement(c, {
                     ref: cloneRef(c.ref, el => {
-                        !isUnset(value) && tabRefs.current.set(value, { el, color: color || 'primary' });
+                        if (!isUnset(value)) {
+                            el
+                                ? tabRefs.current.set(value, { el, color: color || 'primary' })
+                                : tabRefs.current.delete(value);
+                        }
                     }),
                     onClick(e) {
                         onClick?.(e);
                         !isUnset(value) && setInnerValue(value);
                     },
-                    _active: active,
-                    _animating: animating
+                    _active: active
                 });
             }
             return c;
@@ -122,34 +87,32 @@ export const Tabs = memo(({ tabs, labelKey = 'label', primaryKey = 'value', vari
         }
     };
     useEffect(() => {
+        const scroller = scrollRef.current;
         const onWheel = (e) => {
-            scrollRef.current.scrollTo({
-                left: scrollRef.current.scrollLeft + e.deltaY
+            scroller.scrollTo({
+                left: scroller.scrollLeft + e.deltaY
             });
         };
         if (position === 'top' || position === 'bottom') {
-            scrollRef.current?.addEventListener('wheel', onWheel, { passive: false });
+            scroller.addEventListener('wheel', onWheel, { passive: false });
         }
         const resizeObserver = new ResizeObserver(setShadow);
-        resizeObserver.observe(scrollRef.current);
+        resizeObserver.observe(scroller);
         return () => {
-            scrollRef.current?.removeEventListener('wheel', onWheel);
+            scroller.removeEventListener('wheel', onWheel);
             resizeObserver.disconnect();
         };
     }, [position]);
     const shouldScroll = useRef(true);
     useEffect(() => {
         if (shouldScroll.current) {
-            activeTab?.el?.scrollIntoView({ block: 'center', inline: 'center', behavior: 'smooth' });
+            getActiveTab()?.el?.scrollIntoView({ block: 'center', inline: 'center', behavior: 'smooth' });
             shouldScroll.current = false;
         }
     }, [shouldScroll.current]);
-    return (_jsxs("div", { ...props, css: useStyle({ color, variant }), className: classnames(classes.root, props.className), "data-size": size, "data-animating": animating, "data-position": position, "data-full-width": fullWidth, "data-read-only": readOnly, "data-disabled": disabled, children: [_jsx("div", { className: classes.start, "data-show": shadowStart, children: !!prefix &&
+    return (_jsxs("div", { ...props, css: useStyle({ color: color || 'primary', variant }), className: clsx(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: [_jsx("div", { className: classes.start, "data-show": shadowStart, children: !!prefix &&
                     _jsx("div", { className: classes.prefix, children: prefix }) }), _jsx("div", { ref: scrollRef, className: classes.scroll, onScroll: setShadow, children: _jsxs("div", { className: classes.scrollWrap, style: { justifyContent }, children: [_jsx(TabsContext, { value: useMemo(() => ({ variant, animating }), [variant, animating]), children: renderTabs() }), variant === 'line' &&
-                            _jsx("div", { className: classes.indicator, onTransitionEnd: () => setAnimating(false), style: {
-                                    ...indicatorRect.current,
-                                    backgroundColor: activeTab && colorTransfer(activeTab.color, theme)
-                                } })] }) }), _jsx("div", { className: classes.end, "data-show": shadowEnd, children: !!(suffix || shadowStart || shadowEnd) &&
+                            _jsx(LineIndicator, { value: innerValue.current, position: position, getActiveTab: getActiveTab, onTransitionEnd: () => setAnimating(false) })] }) }), _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.d.ts

@@ -1,13 +1,13 @@
 import { TabsProps } from './tabs';
 export declare const classes: {
     label: string;
-    start: string;
+    indicator: string;
     prefix: string;
     end: string;
+    start: string;
     scroll: string;
     ellipsis: string;
     tab: string;
-    indicator: string;
     suffix: string;
     scrollWrap: string;
     tabPrefix: string;

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

@@ -45,7 +45,7 @@ export function useStyle({ color, variant }) {
                 display: flex;
                 z-index: 2;
                 border-bottom: 1px solid ${divider};
-                transition: box-shadow .2s ${easing.easeOut};
+                transition: box-shadow .25s ${easing.easeOut};
 
                 &[data-show=true] {
                     box-shadow: 0 0 12px rgba(0, 0, 0, .2);
@@ -126,6 +126,7 @@ export function useStyle({ color, variant }) {
                 text-overflow: ellipsis;
                 overflow: hidden;
                 z-index: 1;
+                -webkit-tap-highlight-color: transparent;
 
                 &[data-orientation=vertical] {
                     flex-direction: column;
@@ -186,7 +187,7 @@ export function useStyle({ color, variant }) {
             }
 
             &:not([data-read-only=true]):not([data-disabled=true]) {
-                \.${classes.tab}:not([data-disabled=true]) {
+                .${classes.tab}:not([data-disabled=true]) {
                     cursor: pointer;
                     
                     &:not([data-active=true]):hover {
@@ -215,7 +216,7 @@ export function useStyle({ color, variant }) {
                 }
 
                 .${classes.tab} {
-                    transition: color .2s ${easing.easeOut};
+                    transition: color .25s ${easing.easeOut};
                 }
 
                 &[data-position=top],
@@ -283,7 +284,9 @@ export function useStyle({ color, variant }) {
                 .${classes.indicator} {
                     position: absolute;
                     z-index: 1;
-                    transition: all .3s ${easing.bounce};
+                    transition-property: width, height, left, top;
+                    transition-duration: .3s;
+                    transition-timing-function: ${easing.bounce};
                 }
 
                 &:not([data-animating=true]) {
@@ -303,7 +306,7 @@ export function useStyle({ color, variant }) {
                 .${classes.tab} {
                     border: 1px solid ${gray(.1)};
                     background-color: ${background.body};
-                    transition: color .2s ${easing.easeOut}, background-color .2s ${easing.easeOut};
+                    transition: color .25s ${easing.easeOut}, background-color .25s ${easing.easeOut};
 
                     &[data-active=true] {
                         background-color: ${background.content};

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

@@ -1,10 +1,11 @@
 import { jsx as _jsx, Fragment as _Fragment } from "@emotion/react/jsx-runtime";
 import { Children, isValidElement, memo, useState } from 'react';
 import { classes } from './tabs.style';
-import { EllipsisOutlined } from '@ant-design/icons';
 import { Popper } from '../popper';
 import { tabsEllipsisPopperStyle } from './tabsEllipsis.style';
 import { OptionsBase } from '../optionsBase';
+import { Icon } from '../..';
+import { faEllipsis } from '@fortawesome/free-solid-svg-icons/faEllipsis';
 export const TabsEllipsis = memo(({ tabs, children, labelKey = 'label', primaryKey = 'value', value, onToggleSelected }) => {
     const [open, setOpen] = useState(false);
     const getOptions = () => {
@@ -22,5 +23,5 @@ export const TabsEllipsis = memo(({ tabs, children, labelKey = 'label', primaryK
         onToggleSelected(value);
         setOpen(false);
     };
-    return (_jsx(_Fragment, { children: _jsx(Popper, { css: tabsEllipsisPopperStyle, placement: "bottomRight", trigger: "hover", open: open, onOpenChange: setOpen, content: _jsx(OptionsBase, { options: getOptions(), selectedValue: value, onToggleSelected: _onToggleSelected }), children: _jsx("div", { className: classes.ellipsis, children: _jsx(EllipsisOutlined, {}) }) }) }));
+    return (_jsx(_Fragment, { children: _jsx(Popper, { css: tabsEllipsisPopperStyle, placement: "bottomRight", trigger: "hover", open: open, onOpenChange: setOpen, content: _jsx(OptionsBase, { options: getOptions(), selectedValue: value, onToggleSelected: _onToggleSelected }), children: _jsx("div", { className: classes.ellipsis, children: _jsx(Icon, { icon: faEllipsis }) }) }) }));
 });

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

@@ -1,6 +1,6 @@
 import React, { ReactNode } from 'react';
-import { ColorPropsValue, DIVProps, Size } from '../../types';
-export interface TagProps extends Omit<DIVProps, 'prefix'> {
+import { ColorPropsValue, DivProps, Size } from '../../types';
+export interface TagProps extends Omit<DivProps, 'prefix'> {
     variant?: 'filled' | 'outlined' | 'plain';
     color?: ColorPropsValue;
     shape?: 'square' | 'rounded';