@hi-ui/tabs 4.1.1 → 4.1.3

package/lib/esm/TabList.js

@@ -21,88 +21,71 @@ import { useResizeObserver } from './hooks/index.js';
 import { useLatestCallback } from '@hi-ui/use-latest';
 import { getNextTabId } from './utils/index.js';
 var _role = 'tabs';
-
 var _prefix = getPrefixCls(_role);
-
 var TabList = /*#__PURE__*/forwardRef(function (_a, ref) {
   var _cx;
-
   var _b;
-
   var data = _a.data,
-      className = _a.className,
-      style = _a.style,
-      activeId = _a.activeId,
-      defaultActiveId = _a.defaultActiveId,
-      onChange = _a.onChange,
-      onTabClick = _a.onTabClick,
-      _a$prefixCls = _a.prefixCls,
-      prefixCls = _a$prefixCls === void 0 ? _prefix : _a$prefixCls,
-      directionProp = _a.direction,
-      _a$placement = _a.placement,
-      placement = _a$placement === void 0 ? 'horizontal' : _a$placement,
-      editable = _a.editable,
-      onAdd = _a.onAdd,
-      onDelete = _a.onDelete,
-      draggable = _a.draggable,
-      onDragStart = _a.onDragStart,
-      onDragOver = _a.onDragOver,
-      onDrop = _a.onDrop,
-      onDragEnd = _a.onDragEnd,
-      _a$type = _a.type,
-      type = _a$type === void 0 ? 'line' : _a$type,
-      extra = _a.extra,
-      rest = __rest(_a, ["data", "className", "style", "activeId", "defaultActiveId", "onChange", "onTabClick", "prefixCls", "direction", "placement", "editable", "onAdd", "onDelete", "draggable", "onDragStart", "onDragOver", "onDrop", "onDragEnd", "type", "extra"]);
-
+    className = _a.className,
+    style = _a.style,
+    activeId = _a.activeId,
+    defaultActiveId = _a.defaultActiveId,
+    onChange = _a.onChange,
+    onTabClick = _a.onTabClick,
+    _a$prefixCls = _a.prefixCls,
+    prefixCls = _a$prefixCls === void 0 ? _prefix : _a$prefixCls,
+    directionProp = _a.direction,
+    _a$placement = _a.placement,
+    placement = _a$placement === void 0 ? 'horizontal' : _a$placement,
+    editable = _a.editable,
+    onAdd = _a.onAdd,
+    onDelete = _a.onDelete,
+    draggable = _a.draggable,
+    onDragStart = _a.onDragStart,
+    onDragOver = _a.onDragOver,
+    onDrop = _a.onDrop,
+    onDragEnd = _a.onDragEnd,
+    _a$type = _a.type,
+    type = _a$type === void 0 ? 'line' : _a$type,
+    extra = _a.extra,
+    rest = __rest(_a, ["data", "className", "style", "activeId", "defaultActiveId", "onChange", "onTabClick", "prefixCls", "direction", "placement", "editable", "onAdd", "onDelete", "draggable", "onDragStart", "onDragOver", "onDrop", "onDragEnd", "type", "extra"]);
   var direction = (_b = placement !== null && placement !== void 0 ? placement : directionProp) !== null && _b !== void 0 ? _b : 'horizontal';
-
   var _useUncontrolledState = useUncontrolledState(function () {
-    if (isUndef(defaultActiveId)) {
-      return data[0] ? data[0].tabId : '';
-    }
-
-    return defaultActiveId;
-  }, activeId, onChange, Object.is),
-      activeTabId = _useUncontrolledState[0],
-      setActiveTabId = _useUncontrolledState[1];
-
+      if (isUndef(defaultActiveId)) {
+        return data[0] ? data[0].tabId : '';
+      }
+      return defaultActiveId;
+    }, activeId, onChange, Object.is),
+    activeTabId = _useUncontrolledState[0],
+    setActiveTabId = _useUncontrolledState[1];
   var _useState = useState(null),
-      innerElement = _useState[0],
-      setInnerElement = _useState[1];
-
+    innerElement = _useState[0],
+    setInnerElement = _useState[1];
   var _useState2 = useState(null),
-      scrollElement = _useState2[0],
-      setScrollElement = _useState2[1];
-
+    scrollElement = _useState2[0],
+    setScrollElement = _useState2[1];
   var showHorizontal = direction === 'horizontal';
   var getClientSize = useCallback(function (element) {
     return showHorizontal ? element.clientWidth : element.clientHeight;
   }, [showHorizontal]);
-
   var _useState3 = useState(0),
-      translatePos = _useState3[0],
-      setTranslatePos = _useState3[1];
-
+    translatePos = _useState3[0],
+    setTranslatePos = _useState3[1];
   var _useState4 = useState(0),
-      translateBoundPos = _useState4[0],
-      setTranslateBoundPos = _useState4[1];
-
+    translateBoundPos = _useState4[0],
+    setTranslateBoundPos = _useState4[1];
   var itemsRef = useRef({});
-
   var _useState5 = useState(false),
-      showScrollBtn = _useState5[0],
-      setShowScrollBtn = _useState5[1];
-
+    showScrollBtn = _useState5[0],
+    setShowScrollBtn = _useState5[1];
   var resizeScroll = function resizeScroll(scrollSize, innerSize) {
     var showScrollBtn = scrollSize > innerSize;
     setShowScrollBtn(showScrollBtn);
-
     if (showScrollBtn) {
       setTranslateBoundPos(scrollSize - innerSize);
     }
-  }; // 响应式滚动按钮展示
-
-
+  };
+  // 响应式滚动按钮展示
   useResizeObserver({
     element: innerElement,
     getSize: getClientSize,
@@ -119,36 +102,32 @@ var TabList = /*#__PURE__*/forwardRef(function (_a, ref) {
     onResize: function onResize(_, scrollSize) {
       if (innerElement) {
         var innerSize = getClientSize(innerElement);
-        resizeScroll(scrollSize, innerSize); // 每次滚动容器大小改变后，需要同步更新滚动位置
-
+        resizeScroll(scrollSize, innerSize);
+        // 每次滚动容器大小改变后，需要同步更新滚动位置
         initScrollPosition(activeId);
       }
     }
   });
   var getTabPos = useCallback(function (tabId) {
-    var target = 0; // 获取目标元素的位置
-
+    var target = 0;
+    // 获取目标元素的位置
     var targetElement = itemsRef.current[tabId];
-
     if (targetElement) {
       var rect = targetElement.getBoundingClientRect();
       target = showHorizontal ? rect.left : rect.top;
     }
-
     return target;
   }, [showHorizontal]);
   var getTabOffset = useCallback(function (tabId) {
     // 获取目标元素的位置
-    var targetPos = getTabPos(tabId); // 获取基准元素的位置（第一个）
-
+    var targetPos = getTabPos(tabId);
+    // 获取基准元素的位置（第一个）
     var basePos = 0;
-
     if (isArrayNonEmpty(data)) {
       var baseItem = data[0];
       basePos = getTabPos(baseItem.tabId);
-    } // 返回目标元素相对基准元素的偏移量
-
-
+    }
+    // 返回目标元素相对基准元素的偏移量
     return targetPos ? targetPos - basePos : 0;
   }, [data, getTabPos]);
   var syncScrollPosition = useCallback(function (tabId) {
@@ -156,19 +135,16 @@ var TabList = /*#__PURE__*/forwardRef(function (_a, ref) {
     if (!scrollElement) return;
     var scrollSize = getClientSize(scrollElement);
     var innerSize = getClientSize(innerElement);
-    var offsetValue = getTabOffset(tabId); // 左边或上半部内容展示不全
-
+    var offsetValue = getTabOffset(tabId);
+    // 左边或上半部内容展示不全
     var currentOffset = -translatePos;
-
     if (offsetValue < currentOffset) {
       setTranslatePos(-offsetValue);
     } else {
       // 右边或下半部内容展示不全
       var nextTabId = getNextTabId(data, tabId);
       var nextOffsetValue = nextTabId !== null ? getTabOffset(nextTabId) : scrollSize;
-
       var _currentOffset = -translatePos + innerSize;
-
       if (nextOffsetValue > _currentOffset) {
         setTranslatePos(translatePos - (nextOffsetValue - _currentOffset));
       }
@@ -190,15 +166,15 @@ var TabList = /*#__PURE__*/forwardRef(function (_a, ref) {
     style: style,
     className: cx(prefixCls + "__list", prefixCls + "__list--placement-" + direction, (_cx = {}, _cx[prefixCls + "__list--" + type] = type, _cx), className),
     ref: ref
-  }, rest), showScrollBtn ? /*#__PURE__*/React.createElement(IconButton, {
+  }, rest), showScrollBtn ? ( /*#__PURE__*/React.createElement(IconButton, {
     className: showHorizontal ? prefixCls + "__left-btn" : prefixCls + "__up-btn",
     effect: true,
     disabled: translatePos === 0,
     icon: showHorizontal ? /*#__PURE__*/React.createElement(LeftOutlined, null) : /*#__PURE__*/React.createElement(UpOutlined, null),
     onClick: function onClick() {
       if (!scrollElement) return;
-      if (!innerElement) return; // 向前面滚动
-
+      if (!innerElement) return;
+      // 向前面滚动
       var clientSize = getClientSize(innerElement);
       var canScroll = -translatePos - clientSize;
       var moveWidth = canScroll >= 0 ? clientSize : -translatePos;
@@ -206,7 +182,7 @@ var TabList = /*#__PURE__*/forwardRef(function (_a, ref) {
         return prev + moveWidth;
       });
     }
-  }) : null, /*#__PURE__*/React.createElement("div", {
+  })) : null, /*#__PURE__*/React.createElement("div", {
     className: cx(prefixCls + "__list--inner"),
     ref: setInnerElement
   }, /*#__PURE__*/React.createElement("div", {
@@ -237,21 +213,21 @@ var TabList = /*#__PURE__*/forwardRef(function (_a, ref) {
       onDragEnd: onDragEnd,
       direction: direction
     }));
-  }), type === 'line' ? /*#__PURE__*/React.createElement(TabInk, {
+  }), type === 'line' ? ( /*#__PURE__*/React.createElement(TabInk, {
     prefixCls: prefixCls,
     showHorizontal: showHorizontal,
     activeItemElement: itemsRef.current[activeTabId],
     activeTabId: activeTabId,
     getTabOffset: getTabOffset
-  }) : null)), showScrollBtn ? /*#__PURE__*/React.createElement(IconButton, {
+  })) : null)), showScrollBtn ? ( /*#__PURE__*/React.createElement(IconButton, {
     effect: true,
     className: showHorizontal ? prefixCls + "__right-btn" : prefixCls + "__down-btn",
     disabled: translateBoundPos === -translatePos,
     icon: showHorizontal ? /*#__PURE__*/React.createElement(RightOutlined, null) : /*#__PURE__*/React.createElement(DownOutlined, null),
     onClick: function onClick() {
       if (!scrollElement) return;
-      if (!innerElement) return; // 向后面滚动
-
+      if (!innerElement) return;
+      // 向后面滚动
       var scrollSize = getClientSize(scrollElement);
       var innerSize = getClientSize(innerElement);
       var canScrollWidth = scrollSize - innerSize + translatePos;
@@ -260,15 +236,13 @@ var TabList = /*#__PURE__*/forwardRef(function (_a, ref) {
         return prev - moveWidth;
       });
     }
-  }) : null, editable ? /*#__PURE__*/React.createElement(IconButton, {
+  })) : null, editable ? ( /*#__PURE__*/React.createElement(IconButton, {
     icon: /*#__PURE__*/React.createElement(PlusOutlined, null),
     className: prefixCls + "__add-btn",
     onClick: onAdd
-  }) : null, extra);
+  })) : null, extra);
 });
-
 if (__DEV__) {
   TabList.displayName = 'TabList';
 }
-
 export { TabList };

package/lib/esm/TabPane.js

@@ -12,39 +12,31 @@ import React from 'react';
 import { filterProps } from '@hi-ui/react-utils';
 import { getPrefixCls, cx } from '@hi-ui/classname';
 var _role = 'tabs-tab-pane';
-
 var _prefix = getPrefixCls(_role);
-
 var omitProps = ['tabId', 'tabTitle', 'disabled', 'tabDesc', 'closeable'];
-
 var TabPane = function TabPane(_a) {
   var children = _a.children,
-      className = _a.className,
-      style = _a.style,
-      active = _a.active,
-      _a$unmountOnInactive = _a.unmountOnInactive,
-      unmountOnInactive = _a$unmountOnInactive === void 0 ? true : _a$unmountOnInactive,
-      rest = __rest(_a, ["children", "className", "style", "active", "unmountOnInactive"]);
-
+    className = _a.className,
+    style = _a.style,
+    active = _a.active,
+    _a$unmountOnInactive = _a.unmountOnInactive,
+    unmountOnInactive = _a$unmountOnInactive === void 0 ? true : _a$unmountOnInactive,
+    rest = __rest(_a, ["children", "className", "style", "active", "unmountOnInactive"]);
   var htmlProps = filterProps(rest, omitProps);
-
   var _React$useState = React.useState(false),
-      isLoaded = _React$useState[0],
-      setIsLoaded = _React$useState[1];
-
+    isLoaded = _React$useState[0],
+    setIsLoaded = _React$useState[1];
   var childrenContentMemo = React.useMemo(function () {
     if (!unmountOnInactive) {
       if (active && !isLoaded) {
         setIsLoaded(true);
       }
-
       if (isLoaded) {
         return children;
       }
     } else if (active) {
       return children;
     }
-
     return null;
   }, [active, children, isLoaded, unmountOnInactive]);
   return /*#__PURE__*/React.createElement("div", Object.assign({
@@ -52,5 +44,4 @@ var TabPane = function TabPane(_a) {
     className: cx(className, !unmountOnInactive && !active && _prefix + "--hide")
   }, htmlProps), childrenContentMemo);
 };
-
 export { TabPane };

package/lib/esm/Tabs.js

@@ -15,51 +15,47 @@ import { TabList } from './TabList.js';
 import { useUncontrolledState } from '@hi-ui/use-uncontrolled-state';
 import { isUndef } from '@hi-ui/type-assertion';
 var _role = 'tabs';
-
 var _prefix = getPrefixCls(_role);
 /**
  * Tabs 标签页
  */
-
-
 var Tabs = /*#__PURE__*/forwardRef(function (_a, ref) {
   var _a$prefixCls = _a.prefixCls,
-      prefixCls = _a$prefixCls === void 0 ? _prefix : _a$prefixCls,
-      _a$role = _a.role,
-      role = _a$role === void 0 ? _role : _a$role,
-      className = _a.className,
-      children = _a.children,
-      defaultActiveId = _a.defaultActiveId,
-      activeId = _a.activeId,
-      onChange = _a.onChange,
-      onTabClick = _a.onTabClick,
-      editable = _a.editable,
-      _a$placement = _a.placement,
-      placement = _a$placement === void 0 ? 'horizontal' : _a$placement,
-      onAdd = _a.onAdd,
-      onDelete = _a.onDelete,
-      _a$draggable = _a.draggable,
-      draggable = _a$draggable === void 0 ? false : _a$draggable,
-      onDragStart = _a.onDragStart,
-      onDragOver = _a.onDragOver,
-      onDragEnd = _a.onDragEnd,
-      onDrop = _a.onDrop,
-      style = _a.style,
-      _a$type = _a.type,
-      type = _a$type === void 0 ? 'line' : _a$type,
-      extra = _a.extra,
-      rest = __rest(_a, ["prefixCls", "role", "className", "children", "defaultActiveId", "activeId", "onChange", "onTabClick", "editable", "placement", "onAdd", "onDelete", "draggable", "onDragStart", "onDragOver", "onDragEnd", "onDrop", "style", "type", "extra"]);
-
+    prefixCls = _a$prefixCls === void 0 ? _prefix : _a$prefixCls,
+    _a$role = _a.role,
+    role = _a$role === void 0 ? _role : _a$role,
+    className = _a.className,
+    children = _a.children,
+    defaultActiveId = _a.defaultActiveId,
+    activeId = _a.activeId,
+    onChange = _a.onChange,
+    onTabClick = _a.onTabClick,
+    editable = _a.editable,
+    _a$placement = _a.placement,
+    placement = _a$placement === void 0 ? 'horizontal' : _a$placement,
+    onAdd = _a.onAdd,
+    onDelete = _a.onDelete,
+    _a$draggable = _a.draggable,
+    draggable = _a$draggable === void 0 ? false : _a$draggable,
+    onDragStart = _a.onDragStart,
+    onDragOver = _a.onDragOver,
+    onDragEnd = _a.onDragEnd,
+    onDrop = _a.onDrop,
+    style = _a.style,
+    _a$type = _a.type,
+    type = _a$type === void 0 ? 'line' : _a$type,
+    extra = _a.extra,
+    rest = __rest(_a, ["prefixCls", "role", "className", "children", "defaultActiveId", "activeId", "onChange", "onTabClick", "editable", "placement", "onAdd", "onDelete", "draggable", "onDragStart", "onDragOver", "onDragEnd", "onDrop", "style", "type", "extra"]);
   var tabList = useMemo(function () {
     var list = [];
     React.Children.map(children, function (child) {
       if (child) {
         var _child$props = child.props,
-            tabTitle = _child$props.tabTitle,
-            tabId = _child$props.tabId,
-            tabDesc = _child$props.tabDesc,
-            closeable = _child$props.closeable,
-            disabled = _child$props.disabled;
+          tabTitle = _child$props.tabTitle,
+          tabId = _child$props.tabId,
+          tabDesc = _child$props.tabDesc,
+          closeable = _child$props.closeable,
+          disabled = _child$props.disabled;
         var item = {
           tabTitle: tabTitle,
           tabId: tabId,
@@ -72,17 +68,14 @@ var Tabs = /*#__PURE__*/forwardRef(function (_a, ref) {
     });
     return list;
   }, [children]);
-
   var _useUncontrolledState = useUncontrolledState(function () {
-    if (isUndef(defaultActiveId)) {
-      return tabList[0] ? tabList[0].tabId : '';
-    }
-
-    return defaultActiveId;
-  }, activeId, onChange),
-      activeTabId = _useUncontrolledState[0],
-      setActiveTabId = _useUncontrolledState[1];
-
+      if (isUndef(defaultActiveId)) {
+        return tabList[0] ? tabList[0].tabId : '';
+      }
+      return defaultActiveId;
+    }, activeId, onChange),
+    activeTabId = _useUncontrolledState[0],
+    setActiveTabId = _useUncontrolledState[1];
   var cls = cx(prefixCls, className, placement && prefixCls + "--placement-" + placement, type && prefixCls + "--type-" + type);
   return /*#__PURE__*/React.createElement("div", Object.assign({
     ref: ref,
@@ -116,9 +109,7 @@ var Tabs = /*#__PURE__*/forwardRef(function (_a, ref) {
     }) : null;
   })));
 });
-
 if (__DEV__) {
   Tabs.displayName = 'Tabs';
 }
-
 export { Tabs };

package/lib/esm/hooks/index.js

@@ -10,16 +10,16 @@
 import { useRef, useEffect } from 'react';
 import { useLatestRef, useLatestCallback } from '@hi-ui/use-latest';
 import { useUnmountEffect } from '@hi-ui/use-unmount-effect';
+
 /**
  * 响应式监听元素的 size 变化
  */
-
 var useResizeObserver = function useResizeObserver(_ref) {
   var element = _ref.element,
-      onResize = _ref.onResize,
-      _ref$initialSize = _ref.initialSize,
-      initialSize = _ref$initialSize === void 0 ? 0 : _ref$initialSize,
-      getSize = _ref.getSize;
+    onResize = _ref.onResize,
+    _ref$initialSize = _ref.initialSize,
+    initialSize = _ref$initialSize === void 0 ? 0 : _ref$initialSize,
+    getSize = _ref.getSize;
   var getSizeLatestRef = useLatestRef(getSize);
   var onResizeLatest = useLatestCallback(onResize);
   var prevSizeRef = useRef(initialSize);
@@ -29,11 +29,9 @@ var useResizeObserver = function useResizeObserver(_ref) {
       var _resizeObserver = new ResizeObserver(function () {
         if (unmountRef.current) return;
         var getSize = getSizeLatestRef.current;
-
         if (element) {
           if (getSize) {
             var nextSize = getSize(element);
-
             if (prevSizeRef.current !== nextSize) {
               prevSizeRef.current = nextSize;
               onResizeLatest(element, nextSize);
@@ -43,12 +41,9 @@ var useResizeObserver = function useResizeObserver(_ref) {
           }
         }
       });
-
       _resizeObserver.observe(element);
     }
-
     return function () {};
   }, [element, getSizeLatestRef, onResizeLatest, unmountRef]);
 };
-
 export { useResizeObserver };

package/lib/esm/index.js

@@ -9,11 +9,9 @@
  */
 import './styles/index.scss.js';
 import { Tabs as Tabs$1 } from './Tabs.js';
-export { Tabs } from './Tabs.js';
 import { TabPane } from './TabPane.js';
-export { TabPane } from './TabPane.js';
 export { TabList } from './TabList.js';
 var Tabs = Object.assign(Tabs$1, {
   Pane: TabPane
 });
-export { Tabs as default };
+export { TabPane, Tabs$1 as Tabs, Tabs as default };

package/lib/esm/styles/index.scss.js

@@ -9,7 +9,5 @@
  */
 import __styleInject__ from 'style-inject';
 var css_248z = ".hi-v4-tabs__add-btn.hi-v4-icon-button {font-size: var(--hi-v4-text-size-md, 0.875rem);}.hi-v4-tabs__up-btn.hi-v4-icon-button, .hi-v4-tabs__down-btn.hi-v4-icon-button, .hi-v4-tabs__left-btn.hi-v4-icon-button, .hi-v4-tabs__right-btn.hi-v4-icon-button {margin: var(--hi-v4-spacing-1, 2px);}.hi-v4-tabs__close-btn {cursor: pointer;color: var(--hi-v4-color-gray-500, #929aa6);margin-left: var(--hi-v4-spacing-2, 4px);-webkit-transition: color 0.3s;transition: color 0.3s;}.hi-v4-tabs__close-btn:hover {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-tabs--type-card .hi-v4-tabs__content {background-color: var(--hi-v4-color-static-white, #fff);}.hi-v4-tabs__list {position: relative;font-size: var(--hi-v4-text-size-md, 0.875rem);color: var(--hi-v4-color-gray-500, #929aa6);display: -webkit-box;display: -ms-flexbox;display: flex;overflow: hidden;-webkit-box-align: center;-ms-flex-align: center;align-items: center;}.hi-v4-tabs__list--card .hi-v4-tabs__item {background-color: var(--hi-v4-color-gray-200, #ebedf0);margin: 0;padding: var(--hi-v4-spacing-5, 10px) var(--hi-v4-spacing-8, 16px);border-radius: 0;-webkit-transition: all 0.3s;transition: all 0.3s;line-height: var(--hi-v4-text-lineheight-sm, 1.25rem);}.hi-v4-tabs__list--card .hi-v4-tabs__item--active {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));background-color: var(--hi-v4-color-static-white, #fff);border-radius: var(--hi-v4-border-radius-md, 4px) 0 0 var(--hi-v4-border-radius-md, 4px);}.hi-v4-tabs__list--button .hi-v4-tabs__item {position: relative;margin: var(--hi-v4-spacing-2, 4px) var(--hi-v4-spacing-2, 4px) var(--hi-v4-spacing-2, 4px) 0;padding: var(--hi-v4-spacing-2, 4px) var(--hi-v4-spacing-6, 12px);border-radius: var(--hi-v4-border-radius-md, 4px);-webkit-transition: all 0.3s;transition: all 0.3s;}.hi-v4-tabs__list--button .hi-v4-tabs__item:not(:where(.hi-v4-tabs__item--active, .hi-v4-tabs__item--disabled)):hover {background-color: var(--hi-v4-color-gray-200, #ebedf0);color: var(--hi-v4-color-gray-500, #929aa6);}.hi-v4-tabs__list--button .hi-v4-tabs__item:not(:where(.hi-v4-tabs__item--active, .hi-v4-tabs__item--disabled)):hover::after {display: none;}.hi-v4-tabs__list--button .hi-v4-tabs__item:not(:where(.hi-v4-tabs__item--active, .hi-v4-tabs__item--disabled)):hover + .hi-v4-tabs__item::after {display: none;}.hi-v4-tabs__list--button .hi-v4-tabs__item:not(:where(.hi-v4-tabs__item--active, .hi-v4-tabs__item--disabled))::after {content: \"\";position: absolute;width: 1px;height: var(--hi-v4-height-4, 16px);background-color: var(--hi-v4-color-gray-300, #dfe2e8);left: 0;top: 50%;-webkit-transform: translateY(-50%);transform: translateY(-50%);}.hi-v4-tabs__list--button .hi-v4-tabs__item:not(:where(.hi-v4-tabs__item--active, .hi-v4-tabs__item--disabled)):first-child::after {display: none;}.hi-v4-tabs__list--button .hi-v4-tabs__item--active {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));}.hi-v4-tabs__list--button .hi-v4-tabs__item--active + .hi-v4-tabs__item::after {display: none;}.hi-v4-tabs__list--desc .hi-v4-tabs-item__title {color: var(--hi-v4-color-gray-700, #1f2733);line-height: var(--hi-v4-text-lineheight-sm, 1.25rem);}.hi-v4-tabs__list--desc .hi-v4-tabs-item__desc {color: var(--hi-v4-color-gray-500, #929aa6);font-size: var(--hi-v4-text-size-sm, 0.75rem);line-height: var(--hi-v4-text-lineheight-sm, 1.25rem);}.hi-v4-tabs__list--desc .hi-v4-tabs__item {background: var(--hi-v4-color-gray-50, #f5f7fa);display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;-webkit-box-align: center;-ms-flex-align: center;align-items: center;margin: 0 var(--hi-v4-spacing-6, 12px) 0 0;padding: var(--hi-v4-spacing-8, 16px);border-radius: var(--hi-v4-border-radius-md, 4px);-webkit-transition: all 0.3s;transition: all 0.3s;}.hi-v4-tabs__list--desc .hi-v4-tabs__item:not(:where(.hi-v4-tabs__item--active, .hi-v4-tabs__item--disabled)):hover {background-color: var(--hi-v4-color-gray-200, #ebedf0);color: var(--hi-v4-color-gray-500, #929aa6);}.hi-v4-tabs__list--desc .hi-v4-tabs__item--active {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));}.hi-v4-tabs__list--desc .hi-v4-tabs__item--active .hi-v4-tabs-item__title {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-tabs__list--desc .hi-v4-tabs__item--active .hi-v4-tabs-item__desc {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-tabs__list--inner {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;position: relative;overflow: hidden;}.hi-v4-tabs__list--scroll {display: -webkit-box;display: -ms-flexbox;display: flex;position: relative;-ms-flex-negative: 0;flex-shrink: 0;-webkit-transition-property: -webkit-transform;transition-property: -webkit-transform;transition-property: transform;transition-property: transform, -webkit-transform;-webkit-transition-duration: var(--hi-v4-motion-duration-slow, 300ms);transition-duration: var(--hi-v4-motion-duration-slow, 300ms);-webkit-transition-timing-function: var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));transition-timing-function: var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));will-change: transform;}.hi-v4-tabs__list--placement-vertical > .hi-v4-tabs__list--inner > .hi-v4-tabs__list--scroll {-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;}.hi-v4-tabs__list--placement-vertical {display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;}.hi-v4-tabs--placement-vertical {display: -webkit-box;display: -ms-flexbox;display: flex;}.hi-v4-tabs--placement-vertical > .hi-v4-tabs__content {padding-left: 16px;padding-top: 0;}.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list {-ms-flex-negative: 0;flex-shrink: 0;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;}.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list.hi-v4-tabs__list--desc .hi-v4-tabs-item__title {color: var(--hi-v4-color-gray-700, #1f2733);line-height: var(--hi-v4-text-lineheight-sm, 1.25rem);}.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list.hi-v4-tabs__list--desc .hi-v4-tabs-item__desc {color: var(--hi-v4-color-gray-500, #929aa6);font-size: var(--hi-v4-text-size-sm, 0.75rem);line-height: var(--hi-v4-text-lineheight-sm, 1.25rem);}.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list.hi-v4-tabs__list--desc .hi-v4-tabs__item {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;-webkit-box-align: center;-ms-flex-align: center;align-items: center;padding: var(--hi-v4-spacing-8, 16px);border-radius: var(--hi-v4-border-radius-md, 4px);-webkit-transition: all 0.3s;transition: all 0.3s;background: var(--hi-v4-color-gray-50, #f5f7fa);}.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list.hi-v4-tabs__list--desc .hi-v4-tabs__item:not(:where(.hi-v4-tabs__item--active, .hi-v4-tabs__item--disabled)):hover {background-color: var(--hi-v4-color-gray-200, #ebedf0);color: var(--hi-v4-color-gray-500, #929aa6);}.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list.hi-v4-tabs__list--desc .hi-v4-tabs__item--active {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));}.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list.hi-v4-tabs__list--desc .hi-v4-tabs__item--active .hi-v4-tabs-item__title {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list.hi-v4-tabs__list--desc .hi-v4-tabs__item--active .hi-v4-tabs-item__desc {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list.hi-v4-tabs__list--desc .hi-v4-tabs__list--scroll {row-gap: var(--hi-v4-spacing-6, 12px);}.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list.hi-v4-tabs__list--card .hi-v4-tabs__item {margin: 0;padding: var(--hi-v4-spacing-5, 10px) var(--hi-v4-spacing-8, 16px);background-color: var(--hi-v4-color-gray-200, #ebedf0);border-radius: 0;-webkit-transition: all 0.3s;transition: all 0.3s;line-height: var(--hi-v4-text-lineheight-sm, 1.25rem);}.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list.hi-v4-tabs__list--card .hi-v4-tabs__item--active {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));background-color: var(--hi-v4-color-static-white, #fff);border-radius: var(--hi-v4-border-radius-md, 4px) 0 0 var(--hi-v4-border-radius-md, 4px);}.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list.hi-v4-tabs__list--button .hi-v4-tabs__item {margin: 0 0 var(--hi-v4-spacing-2, 4px) 0;padding: var(--hi-v4-spacing-2, 4px) var(--hi-v4-spacing-6, 12px);border-radius: var(--hi-v4-border-radius-md, 4px);-webkit-transition: all 0.3s;transition: all 0.3s;}.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list.hi-v4-tabs__list--button .hi-v4-tabs__item:not(:where(.hi-v4-tabs__item--active, .hi-v4-tabs__item--disabled)):hover {background-color: var(--hi-v4-color-gray-200, #ebedf0);color: var(--hi-v4-color-gray-500, #929aa6);}.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list.hi-v4-tabs__list--button .hi-v4-tabs__item--active {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));}.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list.hi-v4-tabs__list--button .hi-v4-tabs__list--scroll {row-gap: var(--hi-v4-spacing-2, 4px);}.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__list--inner {width: auto;display: block;position: relative;}.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__list--scroll {-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;position: relative;}.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__item {line-height: var(--hi-v4-text-lineheight-lg, 1.5rem);padding: var(--hi-v4-spacing-4, 8px) var(--hi-v4-spacing-10, 20px);margin: 0;-webkit-transition: all 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);transition: all 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);}.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__item::after {display: none;}.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__item--prev {border-top: 1px dashed var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));border-left: none;}.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__item--next {border-bottom: 1px dashed var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));border-right: none;}.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__ink {position: absolute;left: 0;bottom: auto;width: 2px;background-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));-webkit-transition: top 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), height 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);transition: top 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), height 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);}.hi-v4-tabs__ink {position: absolute;bottom: 0;right: auto;top: auto;height: 2px;background-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));-webkit-transition: left 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), width 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);transition: left 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), width 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);}.hi-v4-tabs__item {line-height: var(--hi-v4-text-lineheight-lg, 1.5rem);padding: var(--hi-v4-spacing-4, 8px) var(--hi-v4-spacing-10, 20px);margin: 0;cursor: pointer;-ms-flex-negative: 0;flex-shrink: 0;-webkit-transition: all 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);transition: all 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);}.hi-v4-tabs__item:focus {outline: 0;}.hi-v4-tabs__item:not(.hi-v4-tabs__item--disabled):hover {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-tabs__item--active {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-tabs__item--prev {border-left: 1px dashed var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-tabs__item--next {border-right: 1px dashed var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-tabs__item--disabled, .hi-v4-tabs__item--disabled .hi-v4-tabs__close-btn {color: var(--hi-v4-color-gray-400, #b5bcc7);cursor: not-allowed;}.hi-v4-tabs__item:not(.hi-v4-tabs__item--active) {overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}.hi-v4-tabs__content {width: 100%;overflow: hidden;padding-top: var(--hi-v4-spacing-8, 16px);-webkit-box-sizing: border-box;box-sizing: border-box;}.hi-v4-tabs-tab-pane--hide {display: none;}";
-
 __styleInject__(css_248z);
-
 export { css_248z as default };

package/lib/esm/utils/index.js

@@ -8,19 +8,15 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { isArrayNonEmpty } from '@hi-ui/type-assertion';
-
 var getNextTabId = function getNextTabId(data, tabId) {
   if (isArrayNonEmpty(data)) {
     var itemIndex = data.findIndex(function (item) {
       return item.tabId === tabId;
     });
-
     if (itemIndex !== -1 && data[itemIndex + 1]) {
       return data[itemIndex + 1].tabId;
     }
   }
-
   return null;
 };
-
 export { getNextTabId };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hi-ui/tabs",
-  "version": "4.1.1",
+  "version": "4.1.3",
   "description": "A sub-package for @hi-ui/hiui.",
   "keywords": [],
   "author": "HiUI <mi-hiui@xiaomi.com>",
@@ -43,24 +43,24 @@
     "url": "https://github.com/XiaoMi/hiui/issues"
   },
   "dependencies": {
-    "@hi-ui/classname": "^4.0.1",
-    "@hi-ui/env": "^4.0.1",
-    "@hi-ui/icon-button": "^4.0.5",
-    "@hi-ui/icons": "^4.0.11",
-    "@hi-ui/react-utils": "^4.0.1",
-    "@hi-ui/type-assertion": "^4.0.1",
-    "@hi-ui/use-latest": "^4.0.1",
-    "@hi-ui/use-uncontrolled-state": "^4.0.1",
-    "@hi-ui/use-unmount-effect": "^4.0.1"
+    "@hi-ui/classname": "^4.0.3",
+    "@hi-ui/env": "^4.0.3",
+    "@hi-ui/icon-button": "^4.0.7",
+    "@hi-ui/icons": "^4.0.17",
+    "@hi-ui/react-utils": "^4.0.3",
+    "@hi-ui/type-assertion": "^4.0.3",
+    "@hi-ui/use-latest": "^4.0.3",
+    "@hi-ui/use-uncontrolled-state": "^4.0.3",
+    "@hi-ui/use-unmount-effect": "^4.0.3"
   },
   "peerDependencies": {
-    "@hi-ui/core": ">=4.0.5",
+    "@hi-ui/core": ">=4.0.7",
     "react": ">=16.8.6",
     "react-dom": ">=16.8.6"
   },
   "devDependencies": {
-    "@hi-ui/core": "^4.0.5",
-    "@hi-ui/core-css": "^4.1.2",
+    "@hi-ui/core": "^4.0.7",
+    "@hi-ui/core-css": "^4.1.4",
     "react": "^17.0.1",
     "react-dom": "^17.0.1"
   }