@hi-ui/tabs 4.0.3 → 4.0.5

package/CHANGELOG.md

@@ -0,0 +1,7 @@
+# @hi-ui/tabs
+
+## 4.0.5
+
+### Patch Changes
+
+- [#2324](https://github.com/XiaoMi/hiui/pull/2324) [`d736da9c8`](https://github.com/XiaoMi/hiui/commit/d736da9c8932760053a1cac4c1b727b6cfab036c) Thanks [@zyprepare](https://github.com/zyprepare)! - 修复单独使用 TabList 时,设置 placement="vertical" 不生效问题

package/lib/cjs/TabList.js

@@ -210,7 +210,7 @@ var TabList = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   });
   return /*#__PURE__*/React__default["default"].createElement("div", Object.assign({
     style: style,
-    className: classname.cx(prefixCls + "__list", (_cx = {}, _cx[prefixCls + "__list--" + type] = type, _cx), className),
+    className: classname.cx(prefixCls + "__list", prefixCls + "__list--placement-" + direction, (_cx = {}, _cx[prefixCls + "__list--" + type] = type, _cx), className),
     ref: ref
   }, rest), showScrollBtn ? /*#__PURE__*/React__default["default"].createElement(iconButton.IconButton, {
     className: showHorizontal ? prefixCls + "__left-btn" : prefixCls + "__up-btn",

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

@@ -12,7 +12,7 @@
 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-4, 8px) var(--hi-v4-spacing-10, 20px);border-radius: 0;-webkit-transition: all 0.3s;transition: all 0.3s; }.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 {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-10, 20px);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(.hi-v4-tabs__item--active):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--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 {padding: 0 var(--hi-v4-spacing-10, 20px); }.hi-v4-tabs__list--desc .hi-v4-tabs-item__title {color: var(--hi-v4-color-gray-700, #1f2733); }.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: var(--hi-v4-spacing-10, 20px) var(--hi-v4-spacing-6, 12px) var(--hi-v4-spacing-10, 20px) 0;padding: var(--hi-v4-spacing-8, 16px) var(--hi-v4-spacing-10, 20px);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(.hi-v4-tabs__item--active):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--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__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--active {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__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--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--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__list--card .hi-v4-tabs__item {margin: 0;padding: var(--hi-v4-spacing-4, 8px) var(--hi-v4-spacing-10, 20px);background-color: var(--hi-v4-color-gray-200, #ebedf0);border-radius: 0;-webkit-transition: all 0.3s;transition: all 0.3s; }.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-10, 20px);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(.hi-v4-tabs__item--active):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--desc .hi-v4-tabs-item__title {color: var(--hi-v4-color-gray-700, #1f2733); }.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;margin: 0 0 var(--hi-v4-spacing-6, 12px) 0;padding: var(--hi-v4-spacing-8, 16px) var(--hi-v4-spacing-10, 20px);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(.hi-v4-tabs__item--active):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__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 {color: var(--hi-v4-color-gray-500, #929aa6) !important;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; }";
+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-4, 8px) var(--hi-v4-spacing-10, 20px);border-radius: 0;-webkit-transition: all 0.3s;transition: all 0.3s; }.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 {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-10, 20px);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(.hi-v4-tabs__item--active):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--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 {padding: 0 var(--hi-v4-spacing-10, 20px); }.hi-v4-tabs__list--desc .hi-v4-tabs-item__title {color: var(--hi-v4-color-gray-700, #1f2733); }.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: var(--hi-v4-spacing-10, 20px) var(--hi-v4-spacing-6, 12px) var(--hi-v4-spacing-10, 20px) 0;padding: var(--hi-v4-spacing-8, 16px) var(--hi-v4-spacing-10, 20px);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(.hi-v4-tabs__item--active):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__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--active {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__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--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--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__list--card .hi-v4-tabs__item {margin: 0;padding: var(--hi-v4-spacing-4, 8px) var(--hi-v4-spacing-10, 20px);background-color: var(--hi-v4-color-gray-200, #ebedf0);border-radius: 0;-webkit-transition: all 0.3s;transition: all 0.3s; }.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-10, 20px);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(.hi-v4-tabs__item--active):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--desc .hi-v4-tabs-item__title {color: var(--hi-v4-color-gray-700, #1f2733); }.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;margin: 0 0 var(--hi-v4-spacing-6, 12px) 0;padding: var(--hi-v4-spacing-8, 16px) var(--hi-v4-spacing-10, 20px);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(.hi-v4-tabs__item--active):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__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 {color: var(--hi-v4-color-gray-500, #929aa6) !important;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; }";
 
 var __styleInject__ = require('inject-head-style')["default"];
 

package/lib/esm/TabList.js

@@ -181,7 +181,7 @@ var TabList = /*#__PURE__*/forwardRef(function (_a, ref) {
   });
   return /*#__PURE__*/React.createElement("div", Object.assign({
     style: style,
-    className: cx(prefixCls + "__list", (_cx = {}, _cx[prefixCls + "__list--" + type] = type, _cx), className),
+    className: cx(prefixCls + "__list", prefixCls + "__list--placement-" + direction, (_cx = {}, _cx[prefixCls + "__list--" + type] = type, _cx), className),
     ref: ref
   }, rest), showScrollBtn ? /*#__PURE__*/React.createElement(IconButton, {
     className: showHorizontal ? prefixCls + "__left-btn" : prefixCls + "__up-btn",

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

@@ -8,7 +8,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import __styleInject__ from 'inject-head-style';
-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-4, 8px) var(--hi-v4-spacing-10, 20px);border-radius: 0;-webkit-transition: all 0.3s;transition: all 0.3s; }.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 {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-10, 20px);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(.hi-v4-tabs__item--active):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--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 {padding: 0 var(--hi-v4-spacing-10, 20px); }.hi-v4-tabs__list--desc .hi-v4-tabs-item__title {color: var(--hi-v4-color-gray-700, #1f2733); }.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: var(--hi-v4-spacing-10, 20px) var(--hi-v4-spacing-6, 12px) var(--hi-v4-spacing-10, 20px) 0;padding: var(--hi-v4-spacing-8, 16px) var(--hi-v4-spacing-10, 20px);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(.hi-v4-tabs__item--active):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--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__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--active {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__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--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--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__list--card .hi-v4-tabs__item {margin: 0;padding: var(--hi-v4-spacing-4, 8px) var(--hi-v4-spacing-10, 20px);background-color: var(--hi-v4-color-gray-200, #ebedf0);border-radius: 0;-webkit-transition: all 0.3s;transition: all 0.3s; }.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-10, 20px);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(.hi-v4-tabs__item--active):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--desc .hi-v4-tabs-item__title {color: var(--hi-v4-color-gray-700, #1f2733); }.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;margin: 0 0 var(--hi-v4-spacing-6, 12px) 0;padding: var(--hi-v4-spacing-8, 16px) var(--hi-v4-spacing-10, 20px);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(.hi-v4-tabs__item--active):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__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 {color: var(--hi-v4-color-gray-500, #929aa6) !important;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; }";
+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-4, 8px) var(--hi-v4-spacing-10, 20px);border-radius: 0;-webkit-transition: all 0.3s;transition: all 0.3s; }.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 {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-10, 20px);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(.hi-v4-tabs__item--active):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--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 {padding: 0 var(--hi-v4-spacing-10, 20px); }.hi-v4-tabs__list--desc .hi-v4-tabs-item__title {color: var(--hi-v4-color-gray-700, #1f2733); }.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: var(--hi-v4-spacing-10, 20px) var(--hi-v4-spacing-6, 12px) var(--hi-v4-spacing-10, 20px) 0;padding: var(--hi-v4-spacing-8, 16px) var(--hi-v4-spacing-10, 20px);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(.hi-v4-tabs__item--active):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__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--active {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__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--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--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__list--card .hi-v4-tabs__item {margin: 0;padding: var(--hi-v4-spacing-4, 8px) var(--hi-v4-spacing-10, 20px);background-color: var(--hi-v4-color-gray-200, #ebedf0);border-radius: 0;-webkit-transition: all 0.3s;transition: all 0.3s; }.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-10, 20px);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(.hi-v4-tabs__item--active):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--desc .hi-v4-tabs-item__title {color: var(--hi-v4-color-gray-700, #1f2733); }.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;margin: 0 0 var(--hi-v4-spacing-6, 12px) 0;padding: var(--hi-v4-spacing-8, 16px) var(--hi-v4-spacing-10, 20px);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(.hi-v4-tabs__item--active):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__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 {color: var(--hi-v4-color-gray-500, #929aa6) !important;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; }";
 
 __styleInject__(css_248z);
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hi-ui/tabs",
-  "version": "4.0.3",
+  "version": "4.0.5",
   "description": "A sub-package for @hi-ui/hiui.",
   "keywords": [],
   "author": "HiUI <mi-hiui@xiaomi.com>",
@@ -45,8 +45,8 @@
   "dependencies": {
     "@hi-ui/classname": "^4.0.1",
     "@hi-ui/env": "^4.0.1",
-    "@hi-ui/icon-button": "^4.0.3",
-    "@hi-ui/icons": "^4.0.3",
+    "@hi-ui/icon-button": "^4.0.4",
+    "@hi-ui/icons": "^4.0.4",
     "@hi-ui/react-utils": "^4.0.1",
     "@hi-ui/type-assertion": "^4.0.1",
     "@hi-ui/use-latest": "^4.0.1",
@@ -59,11 +59,10 @@
     "react-dom": ">=16.8.6"
   },
   "devDependencies": {
-    "@hi-ui/core": "^4.0.3",
+    "@hi-ui/core": "^4.0.4",
     "@hi-ui/core-css": "^4.0.1",
     "@hi-ui/hi-build": "^4.0.1",
     "react": "^17.0.1",
     "react-dom": "^17.0.1"
-  },
-  "gitHead": "f5dedca5447a3a7bfaf937bce1c718d8a029efad"
+  }
 }

package/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2018 Xiaomi
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.