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

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/lib/es/tooltip/index.js

@@ -15,7 +15,7 @@ var __rest = this && this.__rest || function (s, e) {
   return t;
 };
 import React, { isValidElement, cloneElement } from 'react';
-import ReactDOM from 'react-dom';
+import ReactDOM, { findDOMNode } from 'react-dom';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import { BASE_CLASS_PREFIX } from '@douyinfe/semi-foundation/lib/es/base/constants';
@@ -28,7 +28,7 @@ import { getUuidShort } from '@douyinfe/semi-foundation/lib/es/utils/uuid';
 import '@douyinfe/semi-foundation/lib/es/tooltip/tooltip.css';
 import BaseComponent from '../_base/baseComponent';
 import { isHTMLElement } from '../_base/reactUtils';
-import { getActiveElement, getDefaultPropsFromGlobalConfig, getFocusableElements, stopPropagation } from '../_utils';
+import { getActiveElement, getDefaultPropsFromGlobalConfig, getFocusableElements, runAfterTicks, stopPropagation } from '../_utils';
 import Portal from '../_portal/index';
 import ConfigContext from '../configProvider/context';
 import TriangleArrow from './TriangleArrow';
@@ -536,6 +536,15 @@ export default class Tooltip extends BaseComponent {
     this.mounted = true;
     this.getPopupContainer = this.props.getPopupContainer || this.context.getPopupContainer || defaultGetContainer;
     this.foundation.init();
+    runAfterTicks(() => {
+      let triggerEle = this.triggerEl.current;
+      if (triggerEle) {
+        if (!(triggerEle instanceof HTMLElement)) {
+          triggerEle = findDOMNode(triggerEle);
+        }
+      }
+      this.foundation.updateStateIfCursorOnTrigger(triggerEle);
+    }, 1);
   }
   componentWillUnmount() {
     this.mounted = false;

package/lib/es/treeSelect/index.js

@@ -358,15 +358,17 @@ class TreeSelect extends BaseComponent {
           leafOnly,
           searchPosition,
           triggerRender,
-          borderless
+          borderless,
+          checkRelation
         } = _a,
-        rest = __rest(_a, ["disabled", "multiple", "filterTreeNode", "validateStatus", "prefix", "suffix", "style", "size", "insetLabel", "className", "placeholder", "showClear", "leafOnly", "searchPosition", "triggerRender", "borderless"]);
+        rest = __rest(_a, ["disabled", "multiple", "filterTreeNode", "validateStatus", "prefix", "suffix", "style", "size", "insetLabel", "className", "placeholder", "showClear", "leafOnly", "searchPosition", "triggerRender", "borderless", "checkRelation"]);
       const {
         inputValue,
         selectedKeys,
         checkedKeys,
         keyEntities,
-        isFocus
+        isFocus,
+        realCheckedKeys
       } = this.state;
       const filterable = Boolean(filterTreeNode);
       const useCustomTrigger = typeof triggerRender === 'function';
@@ -394,31 +396,45 @@ class TreeSelect extends BaseComponent {
         [`${prefixcls}-with-suffix`]: suffix,
         [`${prefixcls}-with-suffix`]: suffix
       }, className);
-      const triggerRenderKeys = multiple ? normalizeKeyList([...checkedKeys], keyEntities, leafOnly, true) : selectedKeys;
-      const inner = useCustomTrigger ? /*#__PURE__*/React.createElement(Trigger, {
-        inputValue: inputValue,
-        value: triggerRenderKeys.map(key => _get(keyEntities, [key, 'data'])),
-        disabled: disabled,
-        placeholder: placeholder,
-        onClear: this.handleClear,
-        componentName: 'TreeSelect',
-        triggerRender: triggerRender,
-        componentProps: Object.assign({}, this.props),
-        onSearch: this.search,
-        onRemove: this.removeTag
-      }) : [/*#__PURE__*/React.createElement(Fragment, {
-        key: 'prefix'
-      }, prefix || insetLabel ? this.renderPrefix() : null), /*#__PURE__*/React.createElement(Fragment, {
-        key: 'selection'
-      }, /*#__PURE__*/React.createElement("div", {
-        className: `${prefixcls}-selection`
-      }, this.renderSelectContent())), /*#__PURE__*/React.createElement(Fragment, {
-        key: 'suffix'
-      }, suffix ? this.renderSuffix() : null), /*#__PURE__*/React.createElement(Fragment, {
-        key: 'clearBtn'
-      }, showClear || isTriggerPositionSearch && inputValue ? this.renderClearBtn() : null), /*#__PURE__*/React.createElement(Fragment, {
-        key: 'arrow'
-      }, this.renderArrow())];
+      let inner;
+      if (useCustomTrigger) {
+        let triggerRenderKeys = [];
+        if (multiple) {
+          if (checkRelation === 'related') {
+            triggerRenderKeys = normalizeKeyList([...checkedKeys], keyEntities, leafOnly, true);
+          } else if (checkRelation === 'unRelated') {
+            triggerRenderKeys = [...realCheckedKeys];
+          }
+        } else {
+          triggerRenderKeys = selectedKeys;
+        }
+        inner = /*#__PURE__*/React.createElement(Trigger, {
+          inputValue: inputValue,
+          value: triggerRenderKeys.map(key => _get(keyEntities, [key, 'data'])),
+          disabled: disabled,
+          placeholder: placeholder,
+          onClear: this.handleClear,
+          componentName: 'TreeSelect',
+          triggerRender: triggerRender,
+          componentProps: Object.assign({}, this.props),
+          onSearch: this.search,
+          onRemove: this.removeTag
+        });
+      } else {
+        inner = [/*#__PURE__*/React.createElement(Fragment, {
+          key: 'prefix'
+        }, prefix || insetLabel ? this.renderPrefix() : null), /*#__PURE__*/React.createElement(Fragment, {
+          key: 'selection'
+        }, /*#__PURE__*/React.createElement("div", {
+          className: `${prefixcls}-selection`
+        }, this.renderSelectContent())), /*#__PURE__*/React.createElement(Fragment, {
+          key: 'suffix'
+        }, suffix ? this.renderSuffix() : null), /*#__PURE__*/React.createElement(Fragment, {
+          key: 'clearBtn'
+        }, showClear || isTriggerPositionSearch && inputValue ? this.renderClearBtn() : null), /*#__PURE__*/React.createElement(Fragment, {
+          key: 'arrow'
+        }, this.renderArrow())];
+      }
       const tabIndex = disabled ? null : 0;
       /**
        * Reasons for disabling the a11y eslint rule:
@@ -882,7 +898,6 @@ class TreeSelect extends BaseComponent {
     };
   }
   static getDerivedStateFromProps(props, prevState) {
-    var _a;
     const {
       prevProps,
       rePosKey
@@ -945,16 +960,6 @@ class TreeSelect extends BaseComponent {
         newState.expandedKeys = calcExpandedKeysForValues(normalizeValue(props.defaultValue, withObject, keyMaps), keyEntities, props.multiple, valueEntities);
       } else if (!prevProps && props.value) {
         newState.expandedKeys = calcExpandedKeysForValues(normalizeValue(props.value, withObject, keyMaps), keyEntities, props.multiple, valueEntities);
-      } else if (!isExpandControlled && needUpdateTreeData && props.value) {
-        // 当 treeData 已经设置具体的值，并且设置了 props.loadData ，则认为 treeData 的更新是因为 loadData 导致的
-        // 如果是因为 loadData 导致 treeData改变， 此时在这里重新计算 key 会导致为未选中的展开项目被收起
-        // 所以此时不需要重新计算 expandedKeys，因为在点击展开按钮时候已经把被展开的项添加到 expandedKeys 中
-        // When treeData has a specific value and props.loadData is set, it is considered that the update of treeData is caused by loadData
-        // If the treeData is changed because of loadData, recalculating the key here will cause the unselected expanded items to be collapsed
-        // So there is no need to recalculate expandedKeys at this time, because the expanded item has been added to expandedKeys when the expand button is clicked
-        if (!(prevState.treeData && ((_a = prevState.treeData) === null || _a === void 0 ? void 0 : _a.length) > 0 && props.loadData)) {
-          newState.expandedKeys = calcExpandedKeysForValues(props.value, keyEntities, props.multiple, valueEntities);
-        }
       }
       if (!newState.expandedKeys) {
         delete newState.expandedKeys;

package/package.json

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