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

package/lib/cjs/navigation/Item.js

@@ -217,7 +217,7 @@ class NavItem extends _baseComponent.default {
         onMouseEnter: onMouseEnter,
         onMouseLeave: onMouseLeave,
         onKeyPress: this.handleKeyPress
-      }), itemChildren);
+      }, this.getDataAttr(this.props)), itemChildren);
     }
     // Display Tooltip when disabled and SubNav
     if (isCollapsed && !isInSubNav && !isSubNav || isCollapsed && isSubNav && disabled) {

package/lib/cjs/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/cjs/table/Body/BaseRow.js

@@ -11,7 +11,7 @@ var _stubTrue2 = _interopRequireDefault(require("lodash/stubTrue"));
 var _get2 = _interopRequireDefault(require("lodash/get"));
 var _noop2 = _interopRequireDefault(require("lodash/noop"));
 var _each2 = _interopRequireDefault(require("lodash/each"));
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _constants = require("@douyinfe/semi-foundation/lib/cjs/table/constants");
@@ -20,8 +20,6 @@ var _tableRowFoundation = _interopRequireDefault(require("@douyinfe/semi-foundat
 var _utils = require("@douyinfe/semi-foundation/lib/cjs/table/utils");
 var _baseComponent = _interopRequireDefault(require("../../_base/baseComponent"));
 var _TableCell = _interopRequireDefault(require("../TableCell"));
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 var __rest = void 0 && (void 0).__rest || function (s, e) {
   var t = {};
@@ -98,9 +96,6 @@ class TableRow extends _baseComponent.default {
   }
   constructor(props) {
     super(props);
-    this._cacheNode = node => {
-      this.ref.current = node;
-    };
     // Pass true to render the tree-shaped expand button
     this.renderExpandIcon = record => {
       const {
@@ -129,7 +124,6 @@ class TableRow extends _baseComponent.default {
         customRowProps.onClick(e);
       }
     };
-    this.ref = /*#__PURE__*/(0, _react.createRef)();
     this.foundation = new _tableRowFoundation.default(this.adapter);
   }
   componentDidMount() {
@@ -270,7 +264,8 @@ class TableRow extends _baseComponent.default {
       expandableRow,
       level,
       expandedRow,
-      isSection
+      isSection,
+      rowKey
     } = this.props;
     const BodyRow = components.body.row;
     const _a = onRow(record, index) || {},
@@ -281,7 +276,7 @@ class TableRow extends _baseComponent.default {
       rowProps = __rest(_a, ["className", "style"]);
     this.adapter.setCache('customRowProps', Object.assign({}, rowProps));
     const baseRowStyle = Object.assign(Object.assign({}, style), customStyle);
-    const rowCls = typeof replaceClassName === 'string' && replaceClassName.length ? replaceClassName : (0, _classnames.default)(className, `${prefixCls}-row`, {
+    const rowCls = typeof replaceClassName === 'string' && replaceClassName.length ? (0, _classnames.default)(replaceClassName, customClassName) : (0, _classnames.default)(className, `${prefixCls}-row`, {
       [`${prefixCls}-row-selected`]: selected,
       [`${prefixCls}-row-expanded`]: expanded,
       [`${prefixCls}-row-hovered`]: hovered,
@@ -309,7 +304,7 @@ class TableRow extends _baseComponent.default {
     }, ariaProps, rowProps, {
       style: baseRowStyle,
       className: rowCls,
-      ref: this._cacheNode,
+      "data-row-key": rowKey,
       onMouseEnter: this.handleMouseEnter,
       onMouseLeave: this.handleMouseLeave,
       onClick: this.handleClick

package/lib/cjs/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/cjs/table/interface.d.ts

@@ -173,7 +173,7 @@ export interface OnRowReturnObject extends Omit<React.DetailedHTMLProps<React.HT
     style?: React.CSSProperties;
     onClick?: (e: React.MouseEvent) => void;
 }
-export interface OnGroupedRowReturnObject extends Omit<React.HTMLAttributes<HTMLTableRowElement>, 'className'> {
+export interface OnGroupedRowReturnObject extends React.HTMLAttributes<HTMLTableRowElement> {
     [x: string]: any;
     style?: React.CSSProperties;
     onClick?: (e: React.MouseEvent) => void;
@@ -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/cjs/tagInput/index.js

@@ -448,9 +448,12 @@ class TagInput extends _baseComponent.default {
         className,
         disabled,
         placeholder,
-        validateStatus
+        validateStatus,
+        prefix,
+        insetLabel,
+        suffix
       } = _a,
-      rest = __rest(_a, ["size", "style", "className", "disabled", "placeholder", "validateStatus"]);
+      rest = __rest(_a, ["size", "style", "className", "disabled", "placeholder", "validateStatus", "prefix", "insetLabel", "suffix"]);
     const {
       focusing,
       hovering,
@@ -465,7 +468,9 @@ class TagInput extends _baseComponent.default {
       [`${prefixCls}-error`]: validateStatus === 'error',
       [`${prefixCls}-warning`]: validateStatus === 'warning',
       [`${prefixCls}-small`]: size === 'small',
-      [`${prefixCls}-large`]: size === 'large'
+      [`${prefixCls}-large`]: size === 'large',
+      [`${prefixCls}-with-prefix`]: !!prefix || !!insetLabel,
+      [`${prefixCls}-with-suffix`]: !!suffix
     });
     const inputCls = (0, _classnames.default)(`${prefixCls}-wrapper-input`, `${prefixCls}-wrapper-input-${size}`);
     const wrapperCls = (0, _classnames.default)(`${prefixCls}-wrapper`);

package/lib/es/navigation/Item.js

@@ -210,7 +210,7 @@ export default class NavItem extends BaseComponent {
         onMouseEnter: onMouseEnter,
         onMouseLeave: onMouseLeave,
         onKeyPress: this.handleKeyPress
-      }), itemChildren);
+      }, this.getDataAttr(this.props)), itemChildren);
     }
     // Display Tooltip when disabled and SubNav
     if (isCollapsed && !isInSubNav && !isSubNav || isCollapsed && isSubNav && disabled) {

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) || {},
@@ -271,7 +268,7 @@ export default class TableRow extends BaseComponent {
       rowProps = __rest(_a, ["className", "style"]);
     this.adapter.setCache('customRowProps', Object.assign({}, rowProps));
     const baseRowStyle = Object.assign(Object.assign({}, style), customStyle);
-    const rowCls = typeof replaceClassName === 'string' && replaceClassName.length ? replaceClassName : classnames(className, `${prefixCls}-row`, {
+    const rowCls = typeof replaceClassName === 'string' && replaceClassName.length ? classnames(replaceClassName, customClassName) : classnames(className, `${prefixCls}-row`, {
       [`${prefixCls}-row-selected`]: selected,
       [`${prefixCls}-row-expanded`]: expanded,
       [`${prefixCls}-row-hovered`]: hovered,
@@ -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

@@ -173,7 +173,7 @@ export interface OnRowReturnObject extends Omit<React.DetailedHTMLProps<React.HT
     style?: React.CSSProperties;
     onClick?: (e: React.MouseEvent) => void;
 }
-export interface OnGroupedRowReturnObject extends Omit<React.HTMLAttributes<HTMLTableRowElement>, 'className'> {
+export interface OnGroupedRowReturnObject extends React.HTMLAttributes<HTMLTableRowElement> {
     [x: string]: any;
     style?: React.CSSProperties;
     onClick?: (e: React.MouseEvent) => void;
@@ -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/tagInput/index.js

@@ -441,9 +441,12 @@ class TagInput extends BaseComponent {
         className,
         disabled,
         placeholder,
-        validateStatus
+        validateStatus,
+        prefix,
+        insetLabel,
+        suffix
       } = _a,
-      rest = __rest(_a, ["size", "style", "className", "disabled", "placeholder", "validateStatus"]);
+      rest = __rest(_a, ["size", "style", "className", "disabled", "placeholder", "validateStatus", "prefix", "insetLabel", "suffix"]);
     const {
       focusing,
       hovering,
@@ -458,7 +461,9 @@ class TagInput extends BaseComponent {
       [`${prefixCls}-error`]: validateStatus === 'error',
       [`${prefixCls}-warning`]: validateStatus === 'warning',
       [`${prefixCls}-small`]: size === 'small',
-      [`${prefixCls}-large`]: size === 'large'
+      [`${prefixCls}-large`]: size === 'large',
+      [`${prefixCls}-with-prefix`]: !!prefix || !!insetLabel,
+      [`${prefixCls}-with-suffix`]: !!suffix
     });
     const inputCls = cls(`${prefixCls}-wrapper-input`, `${prefixCls}-wrapper-input-${size}`);
     const wrapperCls = cls(`${prefixCls}-wrapper`);

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-ui",
-    "version": "2.57.0",
+    "version": "2.58.0-beta.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.0",
-        "@douyinfe/semi-animation-react": "2.57.0",
-        "@douyinfe/semi-foundation": "2.57.0",
-        "@douyinfe/semi-icons": "2.57.0",
-        "@douyinfe/semi-illustrations": "2.57.0",
-        "@douyinfe/semi-theme-default": "2.57.0",
+        "@douyinfe/semi-animation": "2.58.0-beta.0",
+        "@douyinfe/semi-animation-react": "2.58.0-beta.0",
+        "@douyinfe/semi-foundation": "2.58.0-beta.0",
+        "@douyinfe/semi-icons": "2.58.0-beta.0",
+        "@douyinfe/semi-illustrations": "2.58.0-beta.0",
+        "@douyinfe/semi-theme-default": "2.58.0-beta.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": "57571d206421c8044245b6eaf70b49cce034f939",
+    "gitHead": "bd0c5bf8924d1e971746ba88f83c2c8857d307f7",
     "devDependencies": {
         "@babel/plugin-proposal-decorators": "^7.15.8",
         "@babel/plugin-transform-runtime": "^7.15.8",