@hi-ui/tabs 4.0.0-beta.2 → 4.0.0-beta.20

package/lib/cjs/index.js

@@ -15,14 +15,16 @@ Object.defineProperty(exports, '__esModule', {
 
 require('./styles/index.scss.js');
 
-var Tabs = require('./Tabs.js');
+var Tabs$1 = require('./Tabs.js');
 
 var TabPane = require('./TabPane.js');
 
 var TabList = require('./TabList.js');
 
-exports.Tabs = Tabs.Tabs;
-exports["default"] = Tabs.Tabs;
+var Tabs = Object.assign(Tabs$1.Tabs, {
+  Pane: TabPane.TabPane
+});
+exports.Tabs = Tabs$1.Tabs;
 exports.TabPane = TabPane.TabPane;
 exports.TabList = TabList.TabList;
-//# sourceMappingURL=index.js.map
+exports["default"] = Tabs;

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

@@ -12,11 +12,10 @@
 Object.defineProperty(exports, '__esModule', {
   value: true
 });
-var css_248z = "@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n.hi-v4-tabs__add-btn.hi-v4-icon-button {\n  font-size: 0.875rem;\n  font-size: var(--hi-v4-text-size-normal, 0.875rem); }\n.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 {\n  margin: 2px;\n  margin: var(--hi-v4-spacing-1, 2px); }\n.hi-v4-tabs__close-btn {\n  cursor: pointer;\n  color: #929aa6;\n  color: var(--hi-v4-color-gray-500, #929aa6);\n  margin-left: 4px;\n  margin-left: var(--hi-v4-spacing-2, 4px);\n  -webkit-transition: color 0.3s;\n  transition: color 0.3s; }\n.hi-v4-tabs__close-btn:hover {\n    color: #237ffa;\n    color: var(--hi-v4-color-brandblue-500, #237ffa); }\n.hi-v4-tabs--card .hi-v4-tabs__content {\n  background-color: #fff;\n  background-color: var(--hi-v4-color-static-white, #fff); }\n.hi-v4-tabs__list {\n  position: relative;\n  font-size: 0.875rem;\n  font-size: var(--hi-v4-text-size-normal, 0.875rem);\n  color: #929aa6;\n  color: var(--hi-v4-color-gray-500, #929aa6);\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  overflow: hidden;\n  -webkit-box-align: center;\n      -ms-flex-align: center;\n          align-items: center; }\n.hi-v4-tabs__list--card .hi-v4-tabs__item {\n    background-color: #ebedf0;\n    background-color: var(--hi-v4-color-gray-200, #ebedf0);\n    margin: 0;\n    padding: 8px 20px;\n    padding: var(--hi-v4-spacing-4, 8px) var(--hi-v4-spacing-10, 20px);\n    border-radius: 4px 4px 0 0;\n    border-radius: var(--hi-v4-border-radius-normal, 4px) var(--hi-v4-border-radius-normal, 4px) 0 0;\n    -webkit-transition: all 0.3s;\n    transition: all 0.3s; }\n.hi-v4-tabs__list--card .hi-v4-tabs__item--active {\n      color: #237ffa;\n      color: var(--hi-v4-color-brandblue-500, #237ffa);\n      background-color: #fff;\n      background-color: var(--hi-v4-color-static-white, #fff); }\n.hi-v4-tabs__list--button .hi-v4-tabs__item {\n    margin: 4px 4px 4px 0;\n    margin: var(--hi-v4-spacing-2, 4px) var(--hi-v4-spacing-2, 4px) var(--hi-v4-spacing-2, 4px) 0;\n    padding: 4px 20px;\n    padding: var(--hi-v4-spacing-2, 4px) var(--hi-v4-spacing-10, 20px);\n    border-radius: 4px;\n    border-radius: var(--hi-v4-border-radius-normal, 4px);\n    -webkit-transition: all 0.3s;\n    transition: all 0.3s; }\n.hi-v4-tabs__list--button .hi-v4-tabs__item:not(.hi-v4-tabs__item--active):hover {\n      background-color: #ebedf0;\n      background-color: var(--hi-v4-color-gray-200, #ebedf0);\n      color: #929aa6;\n      color: var(--hi-v4-color-gray-500, #929aa6); }\n.hi-v4-tabs__list--button .hi-v4-tabs__item--active {\n      color: #237ffa;\n      color: var(--hi-v4-color-brandblue-500, #237ffa);\n      background-color: #e2f3fe;\n      background-color: var(--hi-v4-color-brandblue-50, #e2f3fe); }\n.hi-v4-tabs__list--desc {\n    padding: 0 20px;\n    padding: 0 var(--hi-v4-spacing-10, 20px); }\n.hi-v4-tabs__list--desc .hi-v4-tabs-item__title {\n      color: #1f2733;\n      color: var(--hi-v4-color-gray-700, #1f2733); }\n.hi-v4-tabs__list--desc .hi-v4-tabs-item__desc {\n      color: #929aa6;\n      color: var(--hi-v4-color-gray-500, #929aa6);\n      font-size: 0.75rem;\n      font-size: var(--hi-v4-text-size-sm, 0.75rem);\n      line-height: 1.25rem;\n      line-height: var(--hi-v4-text-lineheight-sm, 1.25rem); }\n.hi-v4-tabs__list--desc .hi-v4-tabs__item {\n      background: #f5f7fa;\n      background: var(--hi-v4-color-gray-50, #f5f7fa);\n      display: -webkit-box;\n      display: -ms-flexbox;\n      display: flex;\n      -webkit-box-orient: vertical;\n      -webkit-box-direction: normal;\n          -ms-flex-direction: column;\n              flex-direction: column;\n      -webkit-box-align: center;\n          -ms-flex-align: center;\n              align-items: center;\n      margin: 20px 12px 20px 0;\n      margin: var(--hi-v4-spacing-10, 20px) var(--hi-v4-spacing-6, 12px) var(--hi-v4-spacing-10, 20px) 0;\n      padding: 16px 20px;\n      padding: var(--hi-v4-spacing-8, 16px) var(--hi-v4-spacing-10, 20px);\n      border-radius: 4px;\n      border-radius: var(--hi-v4-border-radius-normal, 4px);\n      -webkit-transition: all 0.3s;\n      transition: all 0.3s; }\n.hi-v4-tabs__list--desc .hi-v4-tabs__item:not(.hi-v4-tabs__item--active):hover {\n        background-color: #ebedf0;\n        background-color: var(--hi-v4-color-gray-200, #ebedf0);\n        color: #929aa6;\n        color: var(--hi-v4-color-gray-500, #929aa6); }\n.hi-v4-tabs__list--desc .hi-v4-tabs__item--active {\n        color: #237ffa;\n        color: var(--hi-v4-color-brandblue-500, #237ffa);\n        background-color: #e2f3fe;\n        background-color: var(--hi-v4-color-brandblue-50, #e2f3fe); }\n.hi-v4-tabs__list--desc .hi-v4-tabs__item--active .hi-v4-tabs-item__title {\n          color: #237ffa;\n          color: var(--hi-v4-color-brandblue-500, #237ffa); }\n.hi-v4-tabs__list--desc .hi-v4-tabs__item--active .hi-v4-tabs-item__desc {\n          color: #237ffa;\n          color: var(--hi-v4-color-brandblue-500, #237ffa); }\n.hi-v4-tabs__list--inner {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-flex: 1;\n        -ms-flex: 1 1;\n            flex: 1 1;\n    position: relative;\n    overflow: hidden; }\n.hi-v4-tabs__list--scroll {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    position: relative;\n    -webkit-transition: all 0.3s;\n    transition: all 0.3s; }\n.hi-v4-tabs--vertical {\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex; }\n.hi-v4-tabs--vertical .hi-v4-tabs__list {\n    -ms-flex-negative: 0;\n        flex-shrink: 0;\n    -webkit-box-orient: vertical;\n    -webkit-box-direction: normal;\n        -ms-flex-direction: column;\n            flex-direction: column; }\n.hi-v4-tabs--vertical .hi-v4-tabs__list--card .hi-v4-tabs__item {\n      margin: 0;\n      padding: 8px 20px;\n      padding: var(--hi-v4-spacing-4, 8px) var(--hi-v4-spacing-10, 20px);\n      background-color: #ebedf0;\n      background-color: var(--hi-v4-color-gray-200, #ebedf0);\n      border-radius: 4px 0 0 4px;\n      border-radius: var(--hi-v4-border-radius-normal, 4px) 0 0 var(--hi-v4-border-radius-normal, 4px);\n      -webkit-transition: all 0.3s;\n      transition: all 0.3s; }\n.hi-v4-tabs--vertical .hi-v4-tabs__list--card .hi-v4-tabs__item--active {\n        color: #237ffa;\n        color: var(--hi-v4-color-brandblue-500, #237ffa);\n        background-color: #fff;\n        background-color: var(--hi-v4-color-static-white, #fff); }\n.hi-v4-tabs--vertical .hi-v4-tabs__list--button .hi-v4-tabs__item {\n      margin: 0 0 4px 0;\n      margin: 0 0 var(--hi-v4-spacing-2, 4px) 0;\n      padding: 4px 20px;\n      padding: var(--hi-v4-spacing-2, 4px) var(--hi-v4-spacing-10, 20px);\n      border-radius: 4px;\n      border-radius: var(--hi-v4-border-radius-normal, 4px);\n      -webkit-transition: all 0.3s;\n      transition: all 0.3s; }\n.hi-v4-tabs--vertical .hi-v4-tabs__list--button .hi-v4-tabs__item:not(.hi-v4-tabs__item--active):hover {\n        background-color: #ebedf0;\n        background-color: var(--hi-v4-color-gray-200, #ebedf0);\n        color: #929aa6;\n        color: var(--hi-v4-color-gray-500, #929aa6); }\n.hi-v4-tabs--vertical .hi-v4-tabs__list--button .hi-v4-tabs__item--active {\n        color: #237ffa;\n        color: var(--hi-v4-color-brandblue-500, #237ffa);\n        background-color: #e2f3fe;\n        background-color: var(--hi-v4-color-brandblue-50, #e2f3fe); }\n.hi-v4-tabs--vertical .hi-v4-tabs__list--desc .hi-v4-tabs-item__title {\n      color: #1f2733;\n      color: var(--hi-v4-color-gray-700, #1f2733); }\n.hi-v4-tabs--vertical .hi-v4-tabs__list--desc .hi-v4-tabs-item__desc {\n      color: #929aa6;\n      color: var(--hi-v4-color-gray-500, #929aa6);\n      font-size: 0.75rem;\n      font-size: var(--hi-v4-text-size-sm, 0.75rem);\n      line-height: 1.25rem;\n      line-height: var(--hi-v4-text-lineheight-sm, 1.25rem); }\n.hi-v4-tabs--vertical .hi-v4-tabs__list--desc .hi-v4-tabs__item {\n      display: -webkit-box;\n      display: -ms-flexbox;\n      display: flex;\n      -webkit-box-orient: vertical;\n      -webkit-box-direction: normal;\n          -ms-flex-direction: column;\n              flex-direction: column;\n      -webkit-box-align: center;\n          -ms-flex-align: center;\n              align-items: center;\n      margin: 0 0 12px 0;\n      margin: 0 0 var(--hi-v4-spacing-6, 12px) 0;\n      padding: 16px 20px;\n      padding: var(--hi-v4-spacing-8, 16px) var(--hi-v4-spacing-10, 20px);\n      border-radius: 4px;\n      border-radius: var(--hi-v4-border-radius-normal, 4px);\n      -webkit-transition: all 0.3s;\n      transition: all 0.3s;\n      background: #f5f7fa;\n      background: var(--hi-v4-color-gray-50, #f5f7fa); }\n.hi-v4-tabs--vertical .hi-v4-tabs__list--desc .hi-v4-tabs__item:not(.hi-v4-tabs__item--active):hover {\n        background-color: #ebedf0;\n        background-color: var(--hi-v4-color-gray-200, #ebedf0);\n        color: #929aa6;\n        color: var(--hi-v4-color-gray-500, #929aa6); }\n.hi-v4-tabs--vertical .hi-v4-tabs__list--desc .hi-v4-tabs__item--active {\n        color: #237ffa;\n        color: var(--hi-v4-color-brandblue-500, #237ffa);\n        background-color: #e2f3fe;\n        background-color: var(--hi-v4-color-brandblue-50, #e2f3fe); }\n.hi-v4-tabs--vertical .hi-v4-tabs__list--desc .hi-v4-tabs__item--active .hi-v4-tabs-item__title {\n          color: #237ffa;\n          color: var(--hi-v4-color-brandblue-500, #237ffa); }\n.hi-v4-tabs--vertical .hi-v4-tabs__list--desc .hi-v4-tabs__item--active .hi-v4-tabs-item__desc {\n          color: #237ffa;\n          color: var(--hi-v4-color-brandblue-500, #237ffa); }\n.hi-v4-tabs--vertical .hi-v4-tabs__list--inner {\n      width: auto;\n      display: block;\n      position: relative; }\n.hi-v4-tabs--vertical .hi-v4-tabs__list--scroll {\n      -webkit-box-orient: vertical;\n      -webkit-box-direction: normal;\n          -ms-flex-direction: column;\n              flex-direction: column;\n      position: relative; }\n.hi-v4-tabs--vertical .hi-v4-tabs__item {\n    line-height: 1.5rem;\n    line-height: var(--hi-v4-text-lineheight-lg, 1.5rem);\n    padding: 8px 20px;\n    padding: var(--hi-v4-spacing-4, 8px) var(--hi-v4-spacing-10, 20px);\n    margin: 0;\n    -webkit-transition: all 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);\n    transition: all 0.2s cubic-bezier(0.34, 0.69, 0.1, 1); }\n.hi-v4-tabs--vertical .hi-v4-tabs__item--prev {\n      border-top: 1px dashed #237ffa;\n      border-top: 1px dashed var(--hi-v4-color-brandblue-500, #237ffa);\n      border-left: none; }\n.hi-v4-tabs--vertical .hi-v4-tabs__item--next {\n      border-bottom: 1px dashed #237ffa;\n      border-bottom: 1px dashed var(--hi-v4-color-brandblue-500, #237ffa);\n      border-right: none; }\n.hi-v4-tabs--vertical .hi-v4-tabs__content {\n    padding-left: 16px;\n    padding-top: 0; }\n.hi-v4-tabs--vertical .hi-v4-tabs__ink {\n    position: absolute;\n    left: 0;\n    bottom: auto;\n    width: 2px;\n    background-color: #237ffa;\n    background-color: var(--hi-v4-color-brandblue-500, #237ffa);\n    -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);\n    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); }\n.hi-v4-tabs__ink {\n  position: absolute;\n  bottom: 0;\n  right: auto;\n  top: auto;\n  height: 2px;\n  background-color: #237ffa;\n  background-color: var(--hi-v4-color-brandblue-500, #237ffa);\n  -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);\n  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); }\n.hi-v4-tabs__item {\n  line-height: 1.5rem;\n  line-height: var(--hi-v4-text-lineheight-lg, 1.5rem);\n  padding: 8px 20px;\n  padding: var(--hi-v4-spacing-4, 8px) var(--hi-v4-spacing-10, 20px);\n  margin: 0;\n  cursor: pointer;\n  -ms-flex-negative: 0;\n      flex-shrink: 0;\n  -webkit-transition: all 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);\n  transition: all 0.2s cubic-bezier(0.34, 0.69, 0.1, 1); }\n.hi-v4-tabs__item:not(.hi-v4-tabs__item--disabled):hover {\n    color: #237ffa;\n    color: var(--hi-v4-color-brandblue-500, #237ffa); }\n.hi-v4-tabs__item--active {\n    color: #237ffa;\n    color: var(--hi-v4-color-brandblue-500, #237ffa); }\n.hi-v4-tabs__item--prev {\n    border-left: 1px dashed #237ffa;\n    border-left: 1px dashed var(--hi-v4-color-brandblue-500, #237ffa); }\n.hi-v4-tabs__item--next {\n    border-right: 1px dashed #237ffa;\n    border-right: 1px dashed var(--hi-v4-color-brandblue-500, #237ffa); }\n.hi-v4-tabs__item--disabled {\n    color: #929aa6 !important;\n    color: var(--hi-v4-color-gray-500, #929aa6) !important;\n    cursor: not-allowed; }\n.hi-v4-tabs__item:not(.hi-v4-tabs__item--active) {\n    overflow: hidden;\n    white-space: nowrap;\n    text-overflow: ellipsis; }\n.hi-v4-tabs__content {\n  width: 100%;\n  overflow: hidden;\n  padding-top: 16px;\n  padding-top: var(--hi-v4-spacing-8, 16px);\n  -webkit-box-sizing: border-box;\n          box-sizing: border-box; }\n";
+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--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: var(--hi-v4-border-radius-md, 4px) var(--hi-v4-border-radius-md, 4px) 0 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); }.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--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: var(--hi-v4-border-radius-md, 4px) 0 0 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--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); }.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('style-inject/dist/style-inject.es.js')["default"];
+var __styleInject__ = require('inject-head-style')["default"];
 
 __styleInject__(css_248z);
 
 exports["default"] = css_248z;
-//# sourceMappingURL=index.scss.js.map

package/lib/cjs/utils/index.js

@@ -0,0 +1,32 @@
+/** @LICENSE
+ * @hi-ui/tabs
+ * https://github.com/XiaoMi/hiui/tree/master/packages/ui/tabs#readme
+ *
+ * Copyright (c) HIUI <mi-hiui@xiaomi.com>.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+'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

@@ -15,42 +15,47 @@ var TabInk = function TabInk(_ref) {
 
   var disabled = _ref.disabled,
       prefixCls = _ref.prefixCls,
-      itemRef = _ref.itemRef,
-      tabListRef = _ref.tabListRef,
+      activeItemElement = _ref.activeItemElement,
       direction = _ref.direction,
-      translate = _ref.translate;
+      activeTabId = _ref.activeTabId,
+      getTabOffset = _ref.getTabOffset;
   var inkRef = useRef(null);
   useEffect(function () {
-    if (inkRef.current && itemRef && tabListRef) {
-      var itemRect = itemRef.getBoundingClientRect();
-      var listRect = tabListRef.getBoundingClientRect();
-      var _style = {};
+    if (!inkRef.current) return;
+    if (!activeItemElement) return;
+    var computedStyle = getComputedStyle(activeItemElement);
+    var itemRect = activeItemElement.getBoundingClientRect();
+    var offset = getTabOffset(activeTabId);
 
-      if (direction === 'vertical') {
-        _style = {
-          top: itemRect.top - listRect.top - translate + 2 + 8 + "px",
-          height: itemRect.height - 4 - 16 + "px",
-          left: '',
-          width: ''
-        };
-      } else {
-        _style = {
-          left: itemRect.left - listRect.left - translate + 20 + "px",
-          width: itemRect.width - 40 + "px",
-          top: '',
-          height: ''
-        };
-      }
+    var _style;
 
-      Object.assign(inkRef.current.style, _style);
+    if (direction === 'vertical') {
+      var paddingTop = parseFloat(computedStyle.getPropertyValue('padding-top'));
+      var paddingBottom = parseFloat(computedStyle.getPropertyValue('padding-bottom'));
+      _style = {
+        // 2px 保证尽量和文字顶部对齐，减少文本行高的影响
+        top: offset + paddingTop + 2 + 'px',
+        height: itemRect.height - paddingTop - paddingBottom - 4 + "px",
+        left: '',
+        width: ''
+      };
+    } else {
+      var paddingLeft = parseFloat(computedStyle.getPropertyValue('padding-left'));
+      var paddingRight = parseFloat(computedStyle.getPropertyValue('padding-right'));
+      _style = {
+        left: offset + paddingLeft + 'px',
+        width: itemRect.width - paddingRight - paddingLeft + "px",
+        top: '',
+        height: ''
+      };
     }
-  }, [itemRef, tabListRef, direction]);
+
+    Object.assign(inkRef.current.style, _style);
+  }, [activeItemElement, direction, activeTabId, getTabOffset]);
   return /*#__PURE__*/React.createElement("div", {
     className: cx(prefixCls + "__ink", (_cx = {}, _cx[prefixCls + "__ink--disabled"] = disabled, _cx)),
     ref: inkRef
   });
 };
 
-export default TabInk;
 export { TabInk };
-//# sourceMappingURL=TabInk.js.map

package/lib/esm/TabItem.js

@@ -178,4 +178,3 @@ if (__DEV__) {
 }
 
 export { TabItem };
-//# sourceMappingURL=TabItem.js.map

package/lib/esm/TabList.js

@@ -7,46 +7,49 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import React, { forwardRef, useState, useRef, useMemo, useCallback } from 'react';
+import { __rest } from 'tslib';
+import React, { forwardRef, useState, useCallback, useRef } from 'react';
 import { __DEV__ } from '@hi-ui/env';
 import { TabItem } from './TabItem.js';
 import { useUncontrolledState } from '@hi-ui/use-uncontrolled-state';
 import { getPrefixCls, cx } from '@hi-ui/classname';
 import { TabInk } from './TabInk.js';
 import { LeftOutlined, UpOutlined, RightOutlined, DownOutlined, PlusOutlined } from '@hi-ui/icons';
-import { isUndef } from '@hi-ui/type-assertion';
+import { isUndef, isArrayNonEmpty } from '@hi-ui/type-assertion';
 import { IconButton } from '@hi-ui/icon-button';
+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 (_ref, ref) {
+var TabList = /*#__PURE__*/forwardRef(function (_a, ref) {
   var _cx;
 
-  var data = _ref.data,
-      className = _ref.className,
-      style = _ref.style,
-      activeId = _ref.activeId,
-      defaultActiveId = _ref.defaultActiveId,
-      onChange = _ref.onChange,
-      onTabClick = _ref.onTabClick,
-      _ref$prefixCls = _ref.prefixCls,
-      prefixCls = _ref$prefixCls === void 0 ? _prefix : _ref$prefixCls,
-      _ref$direction = _ref.direction,
-      direction = _ref$direction === void 0 ? 'horizontal' : _ref$direction,
-      editable = _ref.editable,
-      onAdd = _ref.onAdd,
-      onDelete = _ref.onDelete,
-      draggable = _ref.draggable,
-      onDragStart = _ref.onDragStart,
-      onDragOver = _ref.onDragOver,
-      onDrop = _ref.onDrop,
-      onDragEnd = _ref.onDragEnd,
-      _ref$type = _ref.type,
-      type = _ref$type === void 0 ? 'line' : _ref$type,
-      extra = _ref.extra;
-
-  var _a;
+  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,
+      _a$direction = _a.direction,
+      direction = _a$direction === void 0 ? 'horizontal' : _a$direction,
+      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", "editable", "onAdd", "onDelete", "draggable", "onDragStart", "onDragOver", "onDrop", "onDragEnd", "type", "extra"]);
 
   var _useUncontrolledState = useUncontrolledState(function () {
     if (isUndef(defaultActiveId)) {
@@ -54,101 +57,163 @@ var TabList = /*#__PURE__*/forwardRef(function (_ref, ref) {
     }
 
     return defaultActiveId;
-  }, activeId, onChange),
+  }, activeId, onChange, Object.is),
       activeTabId = _useUncontrolledState[0],
       setActiveTabId = _useUncontrolledState[1];
 
   var _useState = useState(null),
-      innerRef = _useState[0],
-      setInnerRef = _useState[1];
+      innerElement = _useState[0],
+      setInnerElement = _useState[1];
 
   var _useState2 = useState(null),
-      scrollRef = _useState2[0],
-      setScrollRef = _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),
-      translateX = _useState3[0],
-      setTranslateX = _useState3[1];
+      translatePos = _useState3[0],
+      setTranslatePos = _useState3[1];
 
   var _useState4 = useState(0),
-      translateY = _useState4[0],
-      setTranslateY = _useState4[1];
+      translateBoundPos = _useState4[0],
+      setTranslateBoundPos = _useState4[1];
 
   var itemsRef = useRef({});
-  var showScrollBtn = useMemo(function () {
-    if (scrollRef && innerRef) {
-      return direction === 'horizontal' ? (scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.clientWidth) > (innerRef === null || innerRef === void 0 ? void 0 : innerRef.clientWidth) : (scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.clientHeight) > (innerRef === null || innerRef === void 0 ? void 0 : innerRef.clientHeight);
+
+  var _useState5 = useState(false),
+      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,
+    onResize: function onResize(_, innerSize) {
+      if (scrollElement) {
+        var scrollSize = getClientSize(scrollElement);
+        resizeScroll(scrollSize, innerSize);
+      }
     }
-  }, [scrollRef, innerRef, direction]);
-  var onClickTab = useCallback(function (key, event) {
-    if (onTabClick) {
-      onTabClick(key, event);
+  });
+  useResizeObserver({
+    element: scrollElement,
+    getSize: getClientSize,
+    onResize: function onResize(_, scrollSize) {
+      if (innerElement) {
+        var innerSize = getClientSize(innerElement);
+        resizeScroll(scrollSize, innerSize);
+      }
     }
+  });
+  var getTabPos = useCallback(function (tabId) {
+    var target = 0; // 获取目标元素的位置
+
+    var targetElement = itemsRef.current[tabId];
 
-    if (key !== activeTabId && setActiveTabId) {
-      setActiveTabId(key);
+    if (targetElement) {
+      var rect = targetElement.getBoundingClientRect();
+      target = showHorizontal ? rect.left : rect.top;
     }
-  }, [activeTabId, onTabClick, setActiveTabId]);
-  return /*#__PURE__*/React.createElement("div", {
-    style: style,
-    className: cx(prefixCls + "__list", (_cx = {}, _cx[prefixCls + "__list--" + type] = type, _cx), className),
-    ref: ref
-  }, showScrollBtn && direction === 'horizontal' && /*#__PURE__*/React.createElement(IconButton, {
-    className: prefixCls + "__left-btn",
-    effect: true,
-    icon: /*#__PURE__*/React.createElement(LeftOutlined, null),
-    onClick: function onClick() {
-      if (scrollRef && innerRef) {
-        var canScroll = -translateX - innerRef.clientWidth;
-        var moveWidth = 0;
 
-        if (canScroll >= 0) {
-          moveWidth = innerRef.clientWidth;
-        } else {
-          moveWidth = -translateX;
-        }
+    return target;
+  }, [showHorizontal]);
+  var getTabOffset = useCallback(function (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]);
 
-        setTranslateX(translateX + moveWidth);
+  var syncScrollPosition = function syncScrollPosition(tabId) {
+    if (!innerElement) return;
+    if (!scrollElement) return;
+    var scrollSize = getClientSize(scrollElement);
+    var innerSize = getClientSize(innerElement);
+    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));
       }
     }
-  }), showScrollBtn && direction === 'vertical' && /*#__PURE__*/React.createElement(IconButton, {
-    className: prefixCls + "__up-btn",
+  };
+
+  var onClickTab = useLatestCallback(function (tabId, event) {
+    onTabClick === null || onTabClick === void 0 ? void 0 : onTabClick(tabId, event);
+    setActiveTabId(tabId);
+    syncScrollPosition(tabId);
+  });
+  return /*#__PURE__*/React.createElement("div", Object.assign({
+    style: style,
+    className: cx(prefixCls + "__list", (_cx = {}, _cx[prefixCls + "__list--" + type] = type, _cx), className),
+    ref: ref
+  }, rest), showScrollBtn ? /*#__PURE__*/React.createElement(IconButton, {
+    className: showHorizontal ? prefixCls + "__left-btn" : prefixCls + "__up-btn",
     effect: true,
-    icon: /*#__PURE__*/React.createElement(UpOutlined, null),
+    disabled: translatePos === 0,
+    icon: showHorizontal ? /*#__PURE__*/React.createElement(LeftOutlined, null) : /*#__PURE__*/React.createElement(UpOutlined, null),
     onClick: function onClick() {
-      if (scrollRef && innerRef) {
-        var canScroll = -translateY - innerRef.clientHeight;
-        var moveWidth = 0;
-
-        if (canScroll >= 0) {
-          moveWidth = innerRef.clientHeight;
-        } else {
-          moveWidth = -translateY;
-        }
+      if (!scrollElement) return;
+      if (!innerElement) return; // 向前面滚动
 
-        setTranslateY(translateY + moveWidth);
-      }
+      var clientSize = getClientSize(innerElement);
+      var canScroll = -translatePos - clientSize;
+      var moveWidth = canScroll >= 0 ? clientSize : -translatePos;
+      setTranslatePos(function (prev) {
+        return prev + moveWidth;
+      });
     }
-  }), /*#__PURE__*/React.createElement("div", {
+  }) : null, /*#__PURE__*/React.createElement("div", {
     className: cx(prefixCls + "__list--inner"),
-    ref: setInnerRef
+    ref: setInnerElement
   }, /*#__PURE__*/React.createElement("div", {
     className: cx(prefixCls + "__list--scroll"),
-    ref: setScrollRef,
+    ref: setScrollElement,
     style: showScrollBtn ? {
-      transform: direction === 'horizontal' ? "translateX(" + translateX + "px)" : "translateY(" + translateY + "px)"
-    } : {}
-  }, data.map(function (d, index) {
+      transform: direction === 'horizontal' ? "translateX(" + translatePos + "px)" : "translateY(" + translatePos + "px)"
+    } : undefined
+  }, data.map(function (item, index) {
     return /*#__PURE__*/React.createElement(TabItem, Object.assign({
       key: index
-    }, d, {
+    }, item, {
       ref: function ref(node) {
-        itemsRef.current["" + d.tabId] = node;
+        itemsRef.current["" + item.tabId] = node;
       },
       type: type,
-      itemRef: itemsRef.current["" + d.tabId],
+      itemRef: itemsRef.current["" + item.tabId],
       index: index,
-      active: activeTabId === d.tabId,
+      active: activeTabId === item.tabId,
       prefixCls: prefixCls,
       draggable: draggable,
       onTabClick: onClickTab,
@@ -160,49 +225,30 @@ var TabList = /*#__PURE__*/forwardRef(function (_ref, ref) {
       onDragEnd: onDragEnd,
       direction: direction
     }));
-  }), type === 'line' && /*#__PURE__*/React.createElement(TabInk, {
-    translate: direction === 'horizontal' ? translateX : translateY,
+  }), type === 'line' ? /*#__PURE__*/React.createElement(TabInk, {
     prefixCls: prefixCls,
     direction: direction,
-    tabListRef: innerRef,
-    itemRef: (_a = itemsRef.current) === null || _a === void 0 ? void 0 : _a[activeTabId]
-  }))), showScrollBtn && direction === 'horizontal' && /*#__PURE__*/React.createElement(IconButton, {
+    activeItemElement: itemsRef.current[activeTabId],
+    activeTabId: activeTabId,
+    getTabOffset: getTabOffset
+  }) : null)), showScrollBtn ? /*#__PURE__*/React.createElement(IconButton, {
     effect: true,
-    className: prefixCls + "__right-btn",
-    icon: /*#__PURE__*/React.createElement(RightOutlined, null),
+    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 (scrollRef && innerRef) {
-        var canScroll = scrollRef.clientWidth - innerRef.clientWidth + translateX;
-        var moveWidth = 0;
-
-        if (canScroll >= innerRef.clientWidth) {
-          moveWidth = innerRef.clientWidth;
-        } else {
-          moveWidth = canScroll;
-        }
+      if (!scrollElement) return;
+      if (!innerElement) return; // 向后面滚动
 
-        setTranslateX(translateX - moveWidth);
-      }
-    }
-  }), showScrollBtn && direction === 'vertical' && /*#__PURE__*/React.createElement(IconButton, {
-    effect: true,
-    className: prefixCls + "__down-btn",
-    icon: /*#__PURE__*/React.createElement(DownOutlined, null),
-    onClick: function onClick() {
-      if (scrollRef && innerRef) {
-        var canScroll = scrollRef.clientHeight - innerRef.clientHeight + translateY;
-        var moveWidth = 0;
-
-        if (canScroll >= innerRef.clientHeight) {
-          moveWidth = innerRef.clientHeight;
-        } else {
-          moveWidth = canScroll;
-        }
-
-        setTranslateY(translateY - moveWidth);
-      }
+      var scrollSize = getClientSize(scrollElement);
+      var innerSize = getClientSize(innerElement);
+      var canScrollWidth = scrollSize - innerSize + translatePos;
+      var moveWidth = canScrollWidth < innerSize ? canScrollWidth : innerSize;
+      setTranslatePos(function (prev) {
+        return prev - moveWidth;
+      });
     }
-  }), editable ? /*#__PURE__*/React.createElement(IconButton, {
+  }) : null, editable ? /*#__PURE__*/React.createElement(IconButton, {
     icon: /*#__PURE__*/React.createElement(PlusOutlined, null),
     className: prefixCls + "__add-btn",
     onClick: onAdd
@@ -214,4 +260,3 @@ if (__DEV__) {
 }
 
 export { TabList };
-//# sourceMappingURL=TabList.js.map

package/lib/esm/TabPane.js

@@ -7,18 +7,23 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
+import { __rest } from 'tslib';
 import React from 'react';
+import { filterProps } from '@hi-ui/react-utils';
+var omitProps = ['tabId', 'tabTitle', 'disabled', 'tabDesc', 'closeable'];
 
-var TabPane = function TabPane(_ref) {
-  var children = _ref.children,
-      className = _ref.className,
-      style = _ref.style,
-      active = _ref.active;
-  return /*#__PURE__*/React.createElement("div", {
+var TabPane = function TabPane(_a) {
+  var children = _a.children,
+      className = _a.className,
+      style = _a.style,
+      active = _a.active,
+      rest = __rest(_a, ["children", "className", "style", "active"]);
+
+  var htmlProps = filterProps(rest, omitProps);
+  return /*#__PURE__*/React.createElement("div", Object.assign({
     style: style,
     className: className
-  }, active ? children : null);
+  }, htmlProps), active ? children : null);
 };
 
 export { TabPane };
-//# sourceMappingURL=TabPane.js.map