@douyinfe/semi-ui 2.57.1-alpha.0 → 2.58.0

package/lib/es/slider/index.js

@@ -266,11 +266,11 @@ export default 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 (
@@ -448,7 +448,9 @@ export default class Slider extends BaseComponent {
         let callback = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _noop;
         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;
       },
@@ -601,7 +603,8 @@ export default class Slider extends BaseComponent {
       [`${prefixCls}`]: !vertical,
       [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__*/React.createElement("div", Object.assign({
       className: wrapperClass,
       style: style,

package/lib/es/table/Body/BaseRow.d.ts

@@ -158,11 +158,9 @@ export default class TableRow extends BaseComponent<BaseRowProps, Record<string,
         disabled: boolean;
     };
     get adapter(): TableRowAdapter<BaseRowProps>;
-    ref: React.MutableRefObject<any>;
     constructor(props: BaseRowProps);
     componentDidMount(): void;
     shouldComponentUpdate(nextProps: BaseRowProps): boolean;
-    _cacheNode: (node: any) => void;
     renderExpandIcon: (record: Record<string, any>) => React.ReactNode;
     renderCells(): React.ReactNode[];
     handleMouseEnter: (e: React.MouseEvent) => void;

package/lib/es/table/Body/BaseRow.js

@@ -13,7 +13,7 @@ var __rest = this && this.__rest || function (s, e) {
   }
   return t;
 };
-import React, { createRef } from 'react';
+import React from 'react';
 import classnames from 'classnames';
 import PropTypes from 'prop-types';
 import { strings, cssClasses } from '@douyinfe/semi-foundation/lib/es/table/constants';
@@ -88,9 +88,6 @@ export default class TableRow extends BaseComponent {
   }
   constructor(props) {
     super(props);
-    this._cacheNode = node => {
-      this.ref.current = node;
-    };
     // Pass true to render the tree-shaped expand button
     this.renderExpandIcon = record => {
       const {
@@ -119,7 +116,6 @@ export default class TableRow extends BaseComponent {
         customRowProps.onClick(e);
       }
     };
-    this.ref = /*#__PURE__*/createRef();
     this.foundation = new TableRowFoundation(this.adapter);
   }
   componentDidMount() {
@@ -260,7 +256,8 @@ export default class TableRow extends BaseComponent {
       expandableRow,
       level,
       expandedRow,
-      isSection
+      isSection,
+      rowKey
     } = this.props;
     const BodyRow = components.body.row;
     const _a = onRow(record, index) || {},
@@ -299,7 +296,7 @@ export default class TableRow extends BaseComponent {
     }, ariaProps, rowProps, {
       style: baseRowStyle,
       className: rowCls,
-      ref: this._cacheNode,
+      "data-row-key": rowKey,
       onMouseEnter: this.handleMouseEnter,
       onMouseLeave: this.handleMouseLeave,
       onClick: this.handleClick

package/lib/es/table/ColGroup.d.ts

@@ -1,12 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { ColumnProps } from './interface';
+import { ColumnProps, TableComponents } from './interface';
 export interface ColGroupProps {
     columns?: ColumnProps[];
     prefixCls?: string;
     className?: string;
     style?: React.CSSProperties;
-    components?: Record<string, any>;
+    components?: TableComponents['body'];
 }
 export default class ColGroup extends React.PureComponent<ColGroupProps> {
     static propTypes: {

package/lib/es/table/interface.d.ts

@@ -188,29 +188,30 @@ export interface Data {
     [x: string]: any;
     key?: string | number;
 }
+export type TableComponent<P> = React.ComponentType<P> | React.ForwardRefExoticComponent<P> | keyof React.ReactHTML;
 export interface TableComponents {
-    table?: ReactNode;
+    table?: TableComponent<any>;
     header?: {
-        outer?: ReactNode;
-        wrapper?: ReactNode;
-        row?: ReactNode;
-        cell?: ReactNode;
+        outer?: TableComponent<any>;
+        wrapper?: TableComponent<any>;
+        row?: TableComponent<any>;
+        cell?: TableComponent<any>;
     };
     body?: {
-        outer?: ReactNode;
-        wrapper?: ReactNode;
-        row?: ReactNode;
-        cell?: ReactNode;
+        outer?: TableComponent<any>;
+        wrapper?: TableComponent<any>;
+        row?: TableComponent<any>;
+        cell?: TableComponent<any>;
         colgroup?: {
-            wrapper?: ReactNode;
-            col?: ReactNode;
+            wrapper?: TableComponent<any>;
+            col?: TableComponent<any>;
         };
     };
     footer?: {
-        wrapper?: ReactNode;
-        row?: ReactNode;
-        cell?: ReactNode;
-        outer?: ReactNode;
+        wrapper?: TableComponent<any>;
+        row?: TableComponent<any>;
+        cell?: TableComponent<any>;
+        outer?: TableComponent<any>;
     };
 }
 export interface RowSelectionProps<RecordType> {

package/lib/es/tabs/TabBar.d.ts

@@ -1,5 +1,6 @@
 import React, { MouseEvent, ReactNode } from 'react';
 import PropTypes from 'prop-types';
+import { DropdownProps } from '../dropdown';
 import { TabBarProps, PlainTab } from './interface';
 export interface TabBarState {
     endInd: number;
@@ -25,6 +26,7 @@ declare class TabBar extends React.Component<TabBarProps, TabBarState> {
         type: PropTypes.Requireable<string>;
         closable: PropTypes.Requireable<boolean>;
         deleteTabItem: PropTypes.Requireable<(...args: any[]) => any>;
+        more: PropTypes.Requireable<NonNullable<number | object>>;
     };
     constructor(props: TabBarProps);
     componentDidMount(): void;
@@ -38,6 +40,8 @@ declare class TabBar extends React.Component<TabBarProps, TabBarState> {
     renderCollapse: (items: Array<OverflowItem>, icon: ReactNode, pos: 'start' | 'end') => ReactNode;
     renderOverflow: (items: any[]) => Array<ReactNode>;
     renderCollapsedTab: () => ReactNode;
+    renderWithMoreTrigger: () => ReactNode;
+    renderMoreDropdown: (panels: PlainTab[], dropDownProps: DropdownProps, trigger: ReactNode) => ReactNode;
     render(): ReactNode;
     private _isActive;
     private _getItemKey;

package/lib/es/tabs/TabBar.js

@@ -16,9 +16,10 @@ import getDataAttr from '@douyinfe/semi-foundation/lib/es/utils/getDataAttr';
 import OverflowList from '../overflowList';
 import Dropdown from '../dropdown';
 import Button from '../button';
-import { IconChevronRight, IconChevronLeft } from '@douyinfe/semi-icons';
+import { IconChevronRight, IconChevronLeft, IconChevronDown } from '@douyinfe/semi-icons';
 import { getUuidv4 } from '@douyinfe/semi-foundation/lib/es/utils/uuid';
 import TabItem from './TabItem';
+import LocaleConsumer from "../locale/localeConsumer";
 class TabBar extends React.Component {
   constructor(props) {
     super(props);
@@ -156,6 +157,55 @@ class TabBar extends React.Component {
         visibleItemRenderer: this.renderTabItem
       });
     };
+    this.renderWithMoreTrigger = () => {
+      const {
+        list,
+        more
+      } = this.props;
+      let tabElements = [];
+      let moreTrigger = /*#__PURE__*/React.createElement("div", {
+        className: cls({
+          [`${cssClasses.TABS_BAR}-more-trigger`]: true,
+          [`${cssClasses.TABS_BAR}-more-trigger-${this.props.type}`]: true
+        })
+      }, /*#__PURE__*/React.createElement(LocaleConsumer, {
+        componentName: "Tabs"
+      }, (locale, localeCode) => /*#__PURE__*/React.createElement("div", {
+        className: `${cssClasses.TABS_BAR}-more-trigger-content`
+      }, /*#__PURE__*/React.createElement("div", null, locale.more), /*#__PURE__*/React.createElement(IconChevronDown, {
+        className: `${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__*/React.createElement(React.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__*/React.createElement(Dropdown, Object.assign({
+        trigger: 'hover',
+        showTick: true,
+        position: 'bottomLeft',
+        className: `${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 = {
@@ -205,9 +255,10 @@ class TabBar extends React.Component {
         className,
         list,
         tabPosition,
+        more,
         collapsible
       } = _a,
-      restProps = __rest(_a, ["type", "style", "className", "list", "tabPosition", "collapsible"]);
+      restProps = __rest(_a, ["type", "style", "className", "list", "tabPosition", "more", "collapsible"]);
     const classNames = cls(className, {
       [cssClasses.TABS_BAR]: true,
       [cssClasses.TABS_BAR_LINE]: type === 'line',
@@ -217,7 +268,7 @@ class TabBar extends React.Component {
       [`${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__*/React.createElement("div", Object.assign({
       role: "tablist",
       "aria-orientation": tabPosition === "left" ? "vertical" : "horizontal",
@@ -240,6 +291,7 @@ TabBar.propTypes = {
   tabPosition: PropTypes.oneOf(strings.POSITION_MAP),
   type: PropTypes.oneOf(strings.TYPE_MAP),
   closable: PropTypes.bool,
-  deleteTabItem: PropTypes.func
+  deleteTabItem: PropTypes.func,
+  more: PropTypes.oneOfType([PropTypes.number, PropTypes.object])
 };
 export default TabBar;

package/lib/es/tabs/TabItem.js

@@ -34,7 +34,9 @@ const TabItem = (props, ref) => {
       onClick: e => deleteTabItem(itemKey, e)
     }) : null;
   }, [type, closable, deleteTabItem, itemKey]);
-  const renderIcon = useCallback(icon => /*#__PURE__*/React.createElement("span", null, icon), []);
+  const renderIcon = useCallback(icon => /*#__PURE__*/React.createElement("span", {
+    className: `${cssClasses.TABS_BAR}-icon`
+  }, icon), []);
   const handleKeyDownInItem = useCallback(event => {
     handleKeyDown && handleKeyDown(event, itemKey, closable);
   }, [handleKeyDown, itemKey, closable]);

package/lib/es/tabs/index.d.ts

@@ -37,6 +37,7 @@ declare class Tabs extends BaseComponent<TabsProps, TabsState> {
         type: PropTypes.Requireable<string>;
         onTabClose: PropTypes.Requireable<(...args: any[]) => any>;
         preventScroll: PropTypes.Requireable<boolean>;
+        more: PropTypes.Requireable<NonNullable<number | object>>;
     };
     static __SemiComponentName__: string;
     static defaultProps: TabsProps;

package/lib/es/tabs/index.js

@@ -222,9 +222,10 @@ class Tabs extends BaseComponent {
         tabBarStyle,
         tabPaneMotion,
         tabPosition,
-        type
+        type,
+        more
       } = _a,
-      restProps = __rest(_a, ["children", "className", "collapsible", "contentStyle", "keepDOM", "lazyRender", "renderTabBar", "size", "style", "tabBarClassName", "tabBarExtraContent", "tabBarStyle", "tabPaneMotion", "tabPosition", "type"]);
+      restProps = __rest(_a, ["children", "className", "collapsible", "contentStyle", "keepDOM", "lazyRender", "renderTabBar", "size", "style", "tabBarClassName", "tabBarExtraContent", "tabBarStyle", "tabPaneMotion", "tabPosition", "type", "more"]);
     const {
       panes,
       activeKey
@@ -249,7 +250,8 @@ class Tabs extends BaseComponent {
       tabPosition,
       type,
       deleteTabItem: this.deleteTabItem,
-      handleKeyDown: this.foundation.handleKeyDown
+      handleKeyDown: this.foundation.handleKeyDown,
+      more
     };
     const tabBar = renderTabBar ? renderTabBar(tabBarProps, TabBar) : /*#__PURE__*/React.createElement(TabBar, Object.assign({}, tabBarProps));
     const content = keepDOM ? children : this.getActiveItem();
@@ -296,7 +298,8 @@ Tabs.propTypes = {
   tabPosition: PropTypes.oneOf(strings.POSITION_MAP),
   type: PropTypes.oneOf(strings.TYPE_MAP),
   onTabClose: PropTypes.func,
-  preventScroll: PropTypes.bool
+  preventScroll: PropTypes.bool,
+  more: PropTypes.oneOfType([PropTypes.number, PropTypes.object])
 };
 Tabs.__SemiComponentName__ = "Tabs";
 Tabs.defaultProps = getDefaultPropsFromGlobalConfig(Tabs.__SemiComponentName__, {

package/lib/es/tabs/interface.d.ts

@@ -1,6 +1,7 @@
 import React, { CSSProperties, MouseEvent, ReactNode } from 'react';
 import { Motion } from '../_base/base';
 import TabBar from './TabBar';
+import { DropdownProps } from "../dropdown";
 export type TabType = 'line' | 'card' | 'button';
 export type TabSize = 'small' | 'medium' | 'large';
 export type TabPosition = 'top' | 'left';
@@ -34,6 +35,11 @@ export interface TabsProps {
     type?: TabType;
     onTabClose?: (tabKey: string) => void;
     preventScroll?: boolean;
+    more?: number | {
+        count: number;
+        render?: () => ReactNode;
+        dropdownProps?: DropdownProps;
+    };
 }
 export interface TabBarProps {
     activeKey?: string;
@@ -51,6 +57,7 @@ export interface TabBarProps {
     closable?: boolean;
     deleteTabItem?: (tabKey: string, event: MouseEvent<Element>) => void;
     handleKeyDown?: (event: React.KeyboardEvent, itemKey: string, closable: boolean) => void;
+    more?: TabsProps['more'];
 }
 export interface TabPaneProps {
     className?: string;

package/lib/es/typography/title.d.ts

@@ -60,7 +60,7 @@ export default class Title extends PureComponent<TitleProps> {
         underline: PropTypes.Requireable<boolean>;
         strong: PropTypes.Requireable<boolean>;
         type: PropTypes.Requireable<"warning" | "success" | "primary" | "secondary" | "danger" | "tertiary" | "quaternary">;
-        heading: PropTypes.Requireable<4 | 2 | 1 | 3 | 5 | 6>;
+        heading: PropTypes.Requireable<1 | 2 | 3 | 4 | 5 | 6>;
         style: PropTypes.Requireable<object>;
         className: PropTypes.Requireable<string>;
         component: PropTypes.Requireable<string>;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-ui",
-    "version": "2.57.1-alpha.0",
+    "version": "2.58.0",
     "description": "A modern, comprehensive, flexible design system and UI library. Connect DesignOps & DevOps. Quickly build beautiful React apps. Maintained by Douyin-fe team.",
     "main": "lib/cjs/index.js",
     "module": "lib/es/index.js",
@@ -20,12 +20,12 @@
         "@dnd-kit/core": "^6.0.8",
         "@dnd-kit/sortable": "^7.0.2",
         "@dnd-kit/utilities": "^3.2.1",
-        "@douyinfe/semi-animation": "2.57.1-alpha.0",
-        "@douyinfe/semi-animation-react": "2.57.1-alpha.0",
-        "@douyinfe/semi-foundation": "2.57.1-alpha.0",
-        "@douyinfe/semi-icons": "2.57.1-alpha.0",
-        "@douyinfe/semi-illustrations": "2.57.1-alpha.0",
-        "@douyinfe/semi-theme-default": "2.57.1-alpha.0",
+        "@douyinfe/semi-animation": "2.58.0",
+        "@douyinfe/semi-animation-react": "2.58.0",
+        "@douyinfe/semi-foundation": "2.58.0",
+        "@douyinfe/semi-icons": "2.58.0",
+        "@douyinfe/semi-illustrations": "2.58.0",
+        "@douyinfe/semi-theme-default": "2.58.0",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
         "copy-text-to-clipboard": "^2.1.1",
@@ -75,7 +75,7 @@
     ],
     "author": "",
     "license": "MIT",
-    "gitHead": "d911c08d3b5e459aa328fa56a426526e05ef3ce8",
+    "gitHead": "71f716ee06be81190ed3d28de4e61542ad0b62d3",
     "devDependencies": {
         "@babel/plugin-proposal-decorators": "^7.15.8",
         "@babel/plugin-transform-runtime": "^7.15.8",