@hi-ui/tabs 4.1.1 → 4.1.2

package/lib/cjs/TabPane.js

@@ -9,68 +9,41 @@
  */
 'use strict';
 
-var _typeof = require("@babel/runtime/helpers/typeof");
-
-Object.defineProperty(exports, '__esModule', {
-  value: true
-});
-
 var tslib = require('tslib');
-
 var React = require('react');
-
 var reactUtils = require('@hi-ui/react-utils');
-
 var classname = require('@hi-ui/classname');
-
-function _interopDefaultLegacy(e) {
-  return e && _typeof(e) === 'object' && 'default' in e ? e : {
-    'default': e
-  };
-}
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-
 var _role = 'tabs-tab-pane';
-
 var _prefix = classname.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 = tslib.__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 = tslib.__rest(_a, ["children", "className", "style", "active", "unmountOnInactive"]);
   var htmlProps = reactUtils.filterProps(rest, omitProps);
-
-  var _React$useState = React__default["default"].useState(false),
-      isLoaded = _React$useState[0],
-      setIsLoaded = _React$useState[1];
-
-  var childrenContentMemo = React__default["default"].useMemo(function () {
+  var _React$useState = React.useState(false),
+    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__default["default"].createElement("div", Object.assign({
+  return /*#__PURE__*/React.createElement("div", Object.assign({
     style: style,
     className: classname.cx(className, !unmountOnInactive && !active && _prefix + "--hide")
   }, htmlProps), childrenContentMemo);
 };
-
 exports.TabPane = TabPane;

package/lib/cjs/Tabs.js

@@ -9,80 +9,55 @@
  */
 'use strict';
 
-var _typeof = require("@babel/runtime/helpers/typeof");
-
-Object.defineProperty(exports, '__esModule', {
-  value: true
-});
-
 var tslib = require('tslib');
-
 var React = require('react');
-
 var classname = require('@hi-ui/classname');
-
 var env = require('@hi-ui/env');
-
 var TabList = require('./TabList.js');
-
 var useUncontrolledState = require('@hi-ui/use-uncontrolled-state');
-
 var typeAssertion = require('@hi-ui/type-assertion');
-
-function _interopDefaultLegacy(e) {
-  return e && _typeof(e) === 'object' && 'default' in e ? e : {
-    'default': e
-  };
-}
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-
 var _role = 'tabs';
-
 var _prefix = classname.getPrefixCls(_role);
 /**
  * Tabs 标签页
  */
-
-
 var Tabs = /*#__PURE__*/React.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 = tslib.__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 = tslib.__rest(_a, ["prefixCls", "role", "className", "children", "defaultActiveId", "activeId", "onChange", "onTabClick", "editable", "placement", "onAdd", "onDelete", "draggable", "onDragStart", "onDragOver", "onDragEnd", "onDrop", "style", "type", "extra"]);
   var tabList = React.useMemo(function () {
     var list = [];
-    React__default["default"].Children.map(children, function (child) {
+    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,
@@ -95,24 +70,21 @@ var Tabs = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     });
     return list;
   }, [children]);
-
   var _useUncontrolledState = useUncontrolledState.useUncontrolledState(function () {
-    if (typeAssertion.isUndef(defaultActiveId)) {
-      return tabList[0] ? tabList[0].tabId : '';
-    }
-
-    return defaultActiveId;
-  }, activeId, onChange),
-      activeTabId = _useUncontrolledState[0],
-      setActiveTabId = _useUncontrolledState[1];
-
+      if (typeAssertion.isUndef(defaultActiveId)) {
+        return tabList[0] ? tabList[0].tabId : '';
+      }
+      return defaultActiveId;
+    }, activeId, onChange),
+    activeTabId = _useUncontrolledState[0],
+    setActiveTabId = _useUncontrolledState[1];
   var cls = classname.cx(prefixCls, className, placement && prefixCls + "--placement-" + placement, type && prefixCls + "--type-" + type);
-  return /*#__PURE__*/React__default["default"].createElement("div", Object.assign({
+  return /*#__PURE__*/React.createElement("div", Object.assign({
     ref: ref,
     role: role,
     className: cls,
     style: style
-  }, rest), /*#__PURE__*/React__default["default"].createElement(TabList.TabList, {
+  }, rest), /*#__PURE__*/React.createElement(TabList.TabList, {
     prefixCls: prefixCls,
     data: tabList,
     activeId: activeTabId,
@@ -129,19 +101,17 @@ var Tabs = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     type: type,
     onDragStart: onDragStart,
     extra: extra
-  }), /*#__PURE__*/React__default["default"].createElement("div", {
+  }), /*#__PURE__*/React.createElement("div", {
     className: _prefix + "__content"
-  }, React__default["default"].Children.map(children, function (child) {
-    return child ? /*#__PURE__*/React__default["default"].cloneElement(child, {
+  }, React.Children.map(children, function (child) {
+    return child ? /*#__PURE__*/React.cloneElement(child, {
       key: child.props.tabId,
       className: classname.cx(_prefix + "-tab-pane", child.props.className),
       active: activeTabId === child.props.tabId
     }) : null;
   })));
 });
-
 if (env.__DEV__) {
   Tabs.displayName = 'Tabs';
 }
-
 exports.Tabs = Tabs;

package/lib/cjs/hooks/index.js

@@ -9,26 +9,19 @@
  */
 'use strict';
 
-Object.defineProperty(exports, '__esModule', {
-  value: true
-});
-
 var React = require('react');
-
 var useLatest = require('@hi-ui/use-latest');
-
 var useUnmountEffect = require('@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 = useLatest.useLatestRef(getSize);
   var onResizeLatest = useLatest.useLatestCallback(onResize);
   var prevSizeRef = React.useRef(initialSize);
@@ -38,11 +31,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);
@@ -52,12 +43,9 @@ var useResizeObserver = function useResizeObserver(_ref) {
           }
         }
       });
-
       _resizeObserver.observe(element);
     }
-
     return function () {};
   }, [element, getSizeLatestRef, onResizeLatest, unmountRef]);
 };
-
 exports.useResizeObserver = useResizeObserver;

package/lib/cjs/index.js

@@ -12,15 +12,10 @@
 Object.defineProperty(exports, '__esModule', {
   value: true
 });
-
 require('./styles/index.scss.js');
-
 var Tabs$1 = require('./Tabs.js');
-
 var TabPane = require('./TabPane.js');
-
 var TabList = require('./TabList.js');
-
 var Tabs = Object.assign(Tabs$1.Tabs, {
   Pane: TabPane.TabPane
 });

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

@@ -13,9 +13,6 @@ Object.defineProperty(exports, '__esModule', {
   value: true
 });
 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;}";
-
 var __styleInject__ = require('style-inject')["default"];
-
 __styleInject__(css_248z);
-
 exports["default"] = css_248z;

package/lib/cjs/utils/index.js

@@ -9,24 +9,16 @@
  */
 'use strict';
 
-Object.defineProperty(exports, '__esModule', {
-  value: true
-});
-
 var typeAssertion = require('@hi-ui/type-assertion');
-
 var getNextTabId = function getNextTabId(data, tabId) {
   if (typeAssertion.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;
 };
-
 exports.getNextTabId = getNextTabId;

package/lib/esm/TabInk.js

@@ -10,16 +10,14 @@
 import React, { useRef, useCallback, useEffect } from 'react';
 import { cx } from '@hi-ui/classname';
 import { useResizeObserver } from './hooks/index.js';
-
 var TabInk = function TabInk(_ref) {
   var _cx;
-
   var disabled = _ref.disabled,
-      prefixCls = _ref.prefixCls,
-      activeItemElement = _ref.activeItemElement,
-      activeTabId = _ref.activeTabId,
-      getTabOffset = _ref.getTabOffset,
-      showHorizontal = _ref.showHorizontal;
+    prefixCls = _ref.prefixCls,
+    activeItemElement = _ref.activeItemElement,
+    activeTabId = _ref.activeTabId,
+    getTabOffset = _ref.getTabOffset,
+    showHorizontal = _ref.showHorizontal;
   var inkRef = useRef(null);
   var setTabLnkPositionStyle = useCallback(function () {
     if (!inkRef.current) return;
@@ -27,9 +25,7 @@ var TabInk = function TabInk(_ref) {
     var computedStyle = getComputedStyle(activeItemElement);
     var itemRect = activeItemElement.getBoundingClientRect();
     var offset = getTabOffset(activeTabId);
-
     var _style;
-
     if (!showHorizontal) {
       var paddingTop = parseFloat(computedStyle.getPropertyValue('padding-top'));
       var paddingBottom = parseFloat(computedStyle.getPropertyValue('padding-bottom'));
@@ -50,7 +46,6 @@ var TabInk = function TabInk(_ref) {
         height: ''
       };
     }
-
     Object.assign(inkRef.current.style, _style);
   }, [activeItemElement, activeTabId, getTabOffset, showHorizontal]);
   useEffect(function () {
@@ -69,5 +64,4 @@ var TabInk = function TabInk(_ref) {
     ref: inkRef
   });
 };
-
 export { TabInk };

package/lib/esm/TabItem.js

@@ -13,46 +13,41 @@ import { __DEV__ } from '@hi-ui/env';
 import { CloseOutlined } from '@hi-ui/icons';
 var TabItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var _cx;
-
   var className = _ref.className,
-      style = _ref.style,
-      disabled = _ref.disabled,
-      tabTitle = _ref.tabTitle,
-      tabDesc = _ref.tabDesc,
-      prefixCls = _ref.prefixCls,
-      tabId = _ref.tabId,
-      onTabClick = _ref.onTabClick,
-      active = _ref.active,
-      editable = _ref.editable,
-      onDelete = _ref.onDelete,
-      index = _ref.index,
-      _onDragStart = _ref.onDragStart,
-      _onDragOver = _ref.onDragOver,
-      _onDrop = _ref.onDrop,
-      _onDragEnd = _ref.onDragEnd,
-      itemRef = _ref.itemRef,
-      draggable = _ref.draggable,
-      _ref$type = _ref.type,
-      type = _ref$type === void 0 ? 'line' : _ref$type,
-      _ref$closeable = _ref.closeable,
-      closeable = _ref$closeable === void 0 ? true : _ref$closeable,
-      _ref$direction = _ref.direction,
-      layout = _ref$direction === void 0 ? 'horizontal' : _ref$direction;
-
+    style = _ref.style,
+    disabled = _ref.disabled,
+    tabTitle = _ref.tabTitle,
+    tabDesc = _ref.tabDesc,
+    prefixCls = _ref.prefixCls,
+    tabId = _ref.tabId,
+    onTabClick = _ref.onTabClick,
+    active = _ref.active,
+    editable = _ref.editable,
+    onDelete = _ref.onDelete,
+    index = _ref.index,
+    _onDragStart = _ref.onDragStart,
+    _onDragOver = _ref.onDragOver,
+    _onDrop = _ref.onDrop,
+    _onDragEnd = _ref.onDragEnd,
+    itemRef = _ref.itemRef,
+    draggable = _ref.draggable,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? 'line' : _ref$type,
+    _ref$closeable = _ref.closeable,
+    closeable = _ref$closeable === void 0 ? true : _ref$closeable,
+    _ref$direction = _ref.direction,
+    layout = _ref$direction === void 0 ? 'horizontal' : _ref$direction;
   var _useState = useState(null),
-      dragId = _useState[0],
-      setDragId = _useState[1];
-
+    dragId = _useState[0],
+    setDragId = _useState[1];
   var _useState2 = useState(null),
-      direction = _useState2[0],
-      setDirection = _useState2[1];
-
+    direction = _useState2[0],
+    setDirection = _useState2[1];
   var _onClick = useCallback(function (e) {
     if (onTabClick) {
       onTabClick(tabId, e);
     }
   }, [onTabClick, tabId]);
-
   return /*#__PURE__*/React.createElement("div", {
     style: style,
     className: cx(prefixCls + "__item", className, (_cx = {}, _cx[prefixCls + "__item--active"] = active, _cx[prefixCls + "__item--disabled"] = disabled, _cx[prefixCls + "__item--" + direction] = direction, _cx)),
@@ -67,7 +62,6 @@ var TabItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
         tabTitle: tabTitle
       }));
       setDragId(tabId);
-
       if (_onDragStart) {
         _onDragStart(e, {
           dragNode: {
@@ -82,7 +76,6 @@ var TabItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
       e.stopPropagation();
       e.dataTransfer.clearData();
       setDragId(null);
-
       if (_onDragEnd) {
         _onDragEnd(e, {
           dragNode: {
@@ -100,15 +93,13 @@ var TabItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
     onDragOver: function onDragOver(e) {
       e.preventDefault();
       e.stopPropagation();
-
       if (dragId !== tabId && itemRef) {
         var targetBoundingRect = itemRef.getBoundingClientRect();
         var hoverTargetSortY = (targetBoundingRect.bottom - targetBoundingRect.top) / 2;
-        var hoverTargetSortX = (targetBoundingRect.right - targetBoundingRect.left) / 2; // 鼠标垂直移动距离
-
+        var hoverTargetSortX = (targetBoundingRect.right - targetBoundingRect.left) / 2;
+        // 鼠标垂直移动距离
         var hoverClientY = e.clientY - targetBoundingRect.top;
         var hoverClientX = e.clientX - targetBoundingRect.left;
-
         if (layout === 'vertical') {
           if (hoverClientY < hoverTargetSortY) {
             setDirection('prev');
@@ -123,7 +114,6 @@ var TabItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
           }
         }
       }
-
       if (_onDragOver) {
         _onDragOver(e, {
           targetNode: {
@@ -137,10 +127,8 @@ var TabItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
       e.preventDefault();
       e.stopPropagation();
       setDirection(null);
-
       if (_onDrop && dragId !== tabId) {
         var passedData = JSON.parse(e.dataTransfer.getData('tab'));
-
         _onDrop(e, {
           dragNode: {
             tabId: tabId,
@@ -162,7 +150,6 @@ var TabItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
     className: prefixCls + "__close-btn",
     onClick: function onClick(e) {
       e.stopPropagation();
-
       if (onDelete) {
         onDelete({
           tabId: tabId,
@@ -172,9 +159,7 @@ var TabItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
     }
   }, /*#__PURE__*/React.createElement(CloseOutlined, null)));
 });
-
 if (__DEV__) {
   TabItem.displayName = 'TabItem';
 }
-
 export { TabItem };