@douyinfe/semi-ui 2.58.0-beta.0 → 2.58.1

package/dist/umd/semi-ui.js

@@ -21460,6 +21460,9 @@ const local = {
     confirm: '确定',
     cancel: '取消'
   },
+  Tabs: {
+    more: "更多"
+  },
   TimePicker: {
     placeholder: {
       time: '请选择时间',
@@ -27929,6 +27932,7 @@ class Button_Button extends external_root_React_commonjs2_react_commonjs_react_a
         [`${prefixCls}-block`]: block,
         [`${prefixCls}-circle`]: circle,
         [`${prefixCls}-borderless`]: theme === 'borderless',
+        [`${prefixCls}-outline`]: theme === "outline",
         [`${prefixCls}-${type}-disabled`]: disabled && type
       }, className),
       type: htmlType,
@@ -76644,11 +76648,11 @@ class Slider extends BaseComponent {
       const minPercent = percentInfo.min;
       const maxPercent = percentInfo.max;
       let trackStyle = !vertical ? {
-        width: range ? `${(maxPercent - minPercent) * 100}%` : `${minPercent * 100}%`,
-        left: range ? `${minPercent * 100}%` : 0
+        width: range ? `${Math.abs(maxPercent - minPercent) * 100}%` : `${minPercent * 100}%`,
+        left: range ? `${Math.min(minPercent, maxPercent) * 100}%` : 0
       } : {
-        height: range ? `${(maxPercent - minPercent) * 100}%` : `${minPercent * 100}%`,
-        top: range ? `${minPercent * 100}%` : 0
+        height: range ? `${Math.abs(maxPercent - minPercent) * 100}%` : `${minPercent * 100}%`,
+        top: range ? `${Math.min(minPercent, maxPercent) * 100}%` : 0
       };
       trackStyle = included ? trackStyle : {};
       return (
@@ -76763,11 +76767,13 @@ class Slider extends BaseComponent {
     var _this = this;
     return Object.assign(Object.assign({}, super.adapter), {
       getSliderLengths: () => {
+        var _a;
         if (this.sliderEl && this.sliderEl.current) {
           const rect = this.sliderEl.current.getBoundingClientRect();
+          const offsetParentRect = (_a = this.sliderEl.current.offsetParent) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
           const offset = {
-            x: this.sliderEl.current.offsetLeft,
-            y: this.sliderEl.current.offsetTop
+            x: offsetParentRect ? rect.left - offsetParentRect.left : this.sliderEl.current.offsetLeft,
+            y: offsetParentRect ? rect.top - offsetParentRect.top : this.sliderEl.current.offsetTop
           };
           return {
             sliderX: offset.x,
@@ -76824,7 +76830,9 @@ class Slider extends BaseComponent {
         let callback = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : (noop_default());
         this.setState(stateObj, callback);
       },
-      notifyChange: cbValue => this.props.onChange(cbValue),
+      notifyChange: cbValue => {
+        this.props.onChange(Array.isArray(cbValue) ? [...cbValue].sort() : cbValue);
+      },
       setDragging: value => {
         this.dragging = value;
       },
@@ -76977,7 +76985,8 @@ class Slider extends BaseComponent {
       [`${slider_prefixCls}`]: !vertical,
       [slider_constants_cssClasses.VERTICAL]: vertical
     });
-    const ariaLabel = range ? `Range: ${this._getAriaValueText(currentValue[0], 0)} to ${this._getAriaValueText(currentValue[1], 1)}` : undefined;
+    const fixedCurrentValue = Array.isArray(currentValue) ? [...currentValue].sort() : currentValue;
+    const ariaLabel = range ? `Range: ${this._getAriaValueText(fixedCurrentValue[0], 0)} to ${this._getAriaValueText(fixedCurrentValue[1], 1)}` : undefined;
     const slider = /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("div", Object.assign({
       className: wrapperClass,
       style: style,
@@ -84887,7 +84896,9 @@ const TabItem = (props, ref) => {
       onClick: e => deleteTabItem(itemKey, e)
     }) : null;
   }, [type, closable, deleteTabItem, itemKey]);
-  const renderIcon = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useCallback)(icon => /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("span", null, icon), []);
+  const renderIcon = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useCallback)(icon => /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("span", {
+    className: `${tabs_constants_cssClasses.TABS_BAR}-icon`
+  }, icon), []);
   const handleKeyDownInItem = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useCallback)(event => {
     handleKeyDown && handleKeyDown(event, itemKey, closable);
   }, [handleKeyDown, itemKey, closable]);
@@ -84945,20 +84956,14 @@ var TabBar_rest = undefined && undefined.__rest || function (s, e) {
 
 
 
+
 class TabBar extends (external_root_React_commonjs2_react_commonjs_react_amd_react_default()).Component {
   constructor(props) {
+    var _this;
     super(props);
+    _this = this;
     this.handleItemClick = (itemKey, e) => {
       this.props.onTabClick(itemKey, e);
-      if (this.props.collapsible) {
-        const key = this._getItemKey(itemKey);
-        const tabItem = document.querySelector(`[data-uuid="${this.state.uuid}"] .${tabs_constants_cssClasses.TABS_TAB}[data-scrollkey="${key}"]`);
-        tabItem.scrollIntoView({
-          behavior: 'smooth',
-          block: 'nearest',
-          inline: 'nearest'
-        });
-      }
     };
     this.handleKeyDown = (event, itemKey, closable) => {
       this.props.handleKeyDown(event, itemKey, closable);
@@ -84983,6 +84988,19 @@ class TabBar extends (external_root_React_commonjs2_react_commonjs_react_amd_rea
         onClick: this.handleItemClick
       }));
     };
+    this.scrollTabItemIntoViewByKey = function (key) {
+      let logicalPosition = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'nearest';
+      const tabItem = document.querySelector(`[data-uuid="${_this.state.uuid}"] .${tabs_constants_cssClasses.TABS_TAB}[data-scrollkey="${key}"]`);
+      tabItem === null || tabItem === void 0 ? void 0 : tabItem.scrollIntoView({
+        behavior: 'smooth',
+        block: logicalPosition,
+        inline: logicalPosition
+      });
+    };
+    this.scrollActiveTabItemIntoView = logicalPosition => {
+      const key = this._getItemKey(this.props.activeKey);
+      this.scrollTabItemIntoViewByKey(key, logicalPosition);
+    };
     this.renderTabComponents = list => list.map(panel => this.renderTabItem(panel));
     this.handleArrowClick = (items, pos) => {
       const lastItem = pos === 'start' ? items.pop() : items.shift();
@@ -84990,12 +85008,7 @@ class TabBar extends (external_root_React_commonjs2_react_commonjs_react_amd_rea
         return;
       }
       const key = this._getItemKey(lastItem.itemKey);
-      const tabItem = document.querySelector(`[data-uuid="${this.state.uuid}"] .${tabs_constants_cssClasses.TABS_TAB}[data-scrollkey="${key}"]`);
-      tabItem.scrollIntoView({
-        behavior: 'smooth',
-        block: 'nearest',
-        inline: 'nearest'
-      });
+      this.scrollTabItemIntoViewByKey(key);
     };
     this.renderCollapse = (items, icon, pos) => {
       if (isEmpty_default()(items)) {
@@ -85082,6 +85095,55 @@ class TabBar extends (external_root_React_commonjs2_react_commonjs_react_amd_rea
         visibleItemRenderer: this.renderTabItem
       });
     };
+    this.renderWithMoreTrigger = () => {
+      const {
+        list,
+        more
+      } = this.props;
+      let tabElements = [];
+      let moreTrigger = /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("div", {
+        className: classnames_default()({
+          [`${tabs_constants_cssClasses.TABS_BAR}-more-trigger`]: true,
+          [`${tabs_constants_cssClasses.TABS_BAR}-more-trigger-${this.props.type}`]: true
+        })
+      }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement(LocaleConsumer, {
+        componentName: "Tabs"
+      }, (locale, localeCode) => /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("div", {
+        className: `${tabs_constants_cssClasses.TABS_BAR}-more-trigger-content`
+      }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("div", null, locale.more), /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement(IconChevronDown, {
+        className: `${tabs_constants_cssClasses.TABS_BAR}-more-trigger-content-icon`
+      }))));
+      let keepCount;
+      if (typeof more === "number") {
+        keepCount = list.length - Math.min(more, list.length);
+        tabElements = list.slice(0, keepCount).map(panel => this.renderTabItem(panel));
+      } else if (typeof more === 'object') {
+        keepCount = list.length - Math.min(more.count, list.length);
+        tabElements = list.slice(0, keepCount).map(panel => this.renderTabItem(panel));
+        if (more.render) {
+          moreTrigger = more.render();
+        }
+      } else if (more !== undefined) {
+        throw new Error("[Semi Tabs]: invalid tab props format: more");
+      }
+      return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement((external_root_React_commonjs2_react_commonjs_react_amd_react_default()).Fragment, null, tabElements, this.renderMoreDropdown(list.slice(keepCount), more === null || more === void 0 ? void 0 : more['dropdownProps'], moreTrigger));
+    };
+    this.renderMoreDropdown = (panels, dropDownProps, trigger) => {
+      return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement(dropdown_0, Object.assign({
+        trigger: 'hover',
+        showTick: true,
+        position: 'bottomLeft',
+        className: `${tabs_constants_cssClasses.TABS_BAR}-more-dropdown-${this.props.type}`,
+        clickToHide: true,
+        menu: panels.map(panel => ({
+          node: 'item',
+          name: panel.tab,
+          icon: panel.icon,
+          onClick: e => this.props.onTabClick(panel.itemKey, e),
+          active: this.props.activeKey === panel.itemKey
+        }))
+      }, dropDownProps), trigger);
+    };
     this._isActive = key => key === this.props.activeKey;
     this._getItemKey = key => `${key}-bar`;
     this.state = {
@@ -85096,6 +85158,13 @@ class TabBar extends (external_root_React_commonjs2_react_commonjs_react_amd_rea
       uuid: getUuidv4()
     });
   }
+  componentDidUpdate(prevProps) {
+    if (prevProps.activeKey !== this.props.activeKey) {
+      if (this.props.collapsible) {
+        this.scrollActiveTabItemIntoView();
+      }
+    }
+  }
   renderIcon(icon) {
     return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("span", null, icon);
   }
@@ -85131,9 +85200,10 @@ class TabBar extends (external_root_React_commonjs2_react_commonjs_react_amd_rea
         className,
         list,
         tabPosition,
+        more,
         collapsible
       } = _a,
-      restProps = TabBar_rest(_a, ["type", "style", "className", "list", "tabPosition", "collapsible"]);
+      restProps = TabBar_rest(_a, ["type", "style", "className", "list", "tabPosition", "more", "collapsible"]);
     const classNames = classnames_default()(className, {
       [tabs_constants_cssClasses.TABS_BAR]: true,
       [tabs_constants_cssClasses.TABS_BAR_LINE]: type === 'line',
@@ -85143,7 +85213,7 @@ class TabBar extends (external_root_React_commonjs2_react_commonjs_react_amd_rea
       [`${tabs_constants_cssClasses.TABS_BAR}-collapse`]: collapsible
     });
     const extra = this.renderExtra();
-    const contents = collapsible ? this.renderCollapsedTab() : this.renderTabComponents(list);
+    const contents = collapsible ? this.renderCollapsedTab() : more ? this.renderWithMoreTrigger() : this.renderTabComponents(list);
     return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("div", Object.assign({
       role: "tablist",
       "aria-orientation": tabPosition === "left" ? "vertical" : "horizontal",
@@ -85166,7 +85236,8 @@ TabBar.propTypes = {
   tabPosition: prop_types_default().oneOf(tabs_constants_strings.POSITION_MAP),
   type: prop_types_default().oneOf(tabs_constants_strings.TYPE_MAP),
   closable: (prop_types_default()).bool,
-  deleteTabItem: (prop_types_default()).func
+  deleteTabItem: (prop_types_default()).func,
+  more: prop_types_default().oneOfType([(prop_types_default()).number, (prop_types_default()).object])
 };
 /* harmony default export */ const tabs_TabBar = (TabBar);
 ;// CONCATENATED MODULE: ./tabs/tabs-context.ts
@@ -85525,9 +85596,10 @@ class Tabs extends BaseComponent {
         tabBarStyle,
         tabPaneMotion,
         tabPosition,
-        type
+        type,
+        more
       } = _a,
-      restProps = tabs_rest(_a, ["children", "className", "collapsible", "contentStyle", "keepDOM", "lazyRender", "renderTabBar", "size", "style", "tabBarClassName", "tabBarExtraContent", "tabBarStyle", "tabPaneMotion", "tabPosition", "type"]);
+      restProps = tabs_rest(_a, ["children", "className", "collapsible", "contentStyle", "keepDOM", "lazyRender", "renderTabBar", "size", "style", "tabBarClassName", "tabBarExtraContent", "tabBarStyle", "tabPaneMotion", "tabPosition", "type", "more"]);
     const {
       panes,
       activeKey
@@ -85552,7 +85624,8 @@ class Tabs extends BaseComponent {
       tabPosition,
       type,
       deleteTabItem: this.deleteTabItem,
-      handleKeyDown: this.foundation.handleKeyDown
+      handleKeyDown: this.foundation.handleKeyDown,
+      more
     };
     const tabBar = renderTabBar ? renderTabBar(tabBarProps, tabs_TabBar) : /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement(tabs_TabBar, Object.assign({}, tabBarProps));
     const content = keepDOM ? children : this.getActiveItem();
@@ -85599,7 +85672,8 @@ Tabs.propTypes = {
   tabPosition: prop_types_default().oneOf(tabs_constants_strings.POSITION_MAP),
   type: prop_types_default().oneOf(tabs_constants_strings.TYPE_MAP),
   onTabClose: (prop_types_default()).func,
-  preventScroll: (prop_types_default()).bool
+  preventScroll: (prop_types_default()).bool,
+  more: prop_types_default().oneOfType([(prop_types_default()).number, (prop_types_default()).object])
 };
 Tabs.__SemiComponentName__ = "Tabs";
 Tabs.defaultProps = getDefaultPropsFromGlobalConfig(Tabs.__SemiComponentName__, {