@douyinfe/semi-ui 2.10.2-alpha.0 → 2.11.0-beta.1

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

@@ -103,6 +103,28 @@ export default class TableRow extends BaseComponent {
     });
   }
 
+  componentDidMount() {
+    // fix #745
+    // didmount/willUnmount may be called twice when React.StrictMode is true in React 18, we need to ensure that this.cache.customRowProps is correct
+    const {
+      onRow,
+      index,
+      record
+    } = this.props;
+    const customRowProps = this.adapter.getCache('customRowProps');
+
+    if (typeof customRowProps === 'undefined') {
+      const _a = onRow(record, index) || {},
+            {
+        className: customClassName,
+        style: customStyle
+      } = _a,
+            rowProps = __rest(_a, ["className", "style"]);
+
+      this.adapter.setCache('customRowProps', _Object$assign({}, rowProps));
+    }
+  }
+
   shouldComponentUpdate(nextProps) {
     /**
       * Shallow comparison of incoming props to simulate PureComponent

package/lib/es/tag/group.d.ts

@@ -3,19 +3,19 @@ import PropTypes from 'prop-types';
 import Tag from './index';
 import { PopoverProps } from '../popover/index';
 import { AvatarShape, TagProps } from './interface';
-export interface TagGroupProps {
+export interface TagGroupProps<T> {
     style?: React.CSSProperties;
     className?: string;
     maxTagCount?: number;
     restCount?: number;
-    tagList?: (TagProps | React.ReactNode)[];
+    tagList?: (T extends 'custom' ? React.ReactNode : TagProps)[];
     size?: 'small' | 'large';
     showPopover?: boolean;
     popoverProps?: PopoverProps;
     avatarShape?: AvatarShape;
     mode?: string;
 }
-export default class TagGroup extends PureComponent<TagGroupProps> {
+export default class TagGroup<T> extends PureComponent<TagGroupProps<T>> {
     static defaultProps: {
         style: {};
         className: string;

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

@@ -53,6 +53,7 @@ export interface TooltipProps extends BaseProps {
     guardFocus?: boolean;
     returnFocusOnClose?: boolean;
     onEscKeyDown?: (e: React.KeyboardEvent) => void;
+    wrapperId?: string;
 }
 interface TooltipState {
     visible: boolean;

package/lib/es/tooltip/index.js

@@ -293,7 +293,7 @@ export default class Tooltip extends BaseComponent {
       placement: props.position || 'top',
       transitionStyle: {},
       isPositionUpdated: false,
-      id: getUuidShort() // auto generate id, will be used by children.aria-describedby & content.id, improve a11y
+      id: props.wrapperId // auto generate id, will be used by children.aria-describedby & content.id, improve a11y
 
     };
     this.foundation = new TooltipFoundation(this.adapter);
@@ -562,6 +562,11 @@ export default class Tooltip extends BaseComponent {
       },
       notifyEscKeydown: event => {
         this.props.onEscKeyDown(event);
+      },
+      setId: () => {
+        this.setState({
+          id: getUuidShort()
+        });
       }
     });
   }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-ui",
-    "version": "2.10.2-alpha.0",
+    "version": "2.11.0-beta.1",
     "description": "",
     "main": "lib/cjs/index.js",
     "module": "lib/es/index.js",
@@ -14,12 +14,12 @@
     },
     "dependencies": {
         "@babel/runtime-corejs3": "^7.15.4",
-        "@douyinfe/semi-animation": "2.10.1",
-        "@douyinfe/semi-animation-react": "2.10.2-alpha.0",
-        "@douyinfe/semi-foundation": "2.10.1",
-        "@douyinfe/semi-icons": "2.10.1",
-        "@douyinfe/semi-illustrations": "2.10.1",
-        "@douyinfe/semi-theme-default": "2.10.1",
+        "@douyinfe/semi-animation": "2.11.0-beta.1",
+        "@douyinfe/semi-animation-react": "2.11.0-beta.1",
+        "@douyinfe/semi-foundation": "2.11.0-beta.1",
+        "@douyinfe/semi-icons": "2.11.0-beta.1",
+        "@douyinfe/semi-illustrations": "2.11.0-beta.1",
+        "@douyinfe/semi-theme-default": "2.11.0-beta.1",
         "@types/react-window": "^1.8.2",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
@@ -69,13 +69,13 @@
     ],
     "author": "",
     "license": "MIT",
-    "gitHead": "0af26368c88d1654b57ca177c18ed1d92b1b8b61",
+    "gitHead": "23088cd48e6c894f541e4358d495001e923321fd",
     "devDependencies": {
         "@babel/plugin-proposal-decorators": "^7.15.8",
         "@babel/plugin-transform-runtime": "^7.15.8",
         "@babel/preset-env": "^7.15.8",
         "@babel/preset-react": "^7.14.5",
-        "@douyinfe/semi-scss-compile": "2.10.1",
+        "@douyinfe/semi-scss-compile": "2.11.0-beta.1",
         "@storybook/addon-knobs": "^6.3.1",
         "@types/lodash": "^4.14.176",
         "babel-loader": "^8.2.2",

package/radio/radio.tsx

@@ -41,10 +41,14 @@ export type RadioProps = {
     addonClassName?: string;
     type?: RadioType;
     'aria-label'?: React.AriaAttributes['aria-label'];
+    addonId?: string;
+    extraId?: string;
 };
 
 export interface RadioState {
     hover?: boolean;
+    addonId?: string;
+    extraId?: string;
 }
 
 export { RadioChangeEvent };
@@ -94,11 +98,11 @@ class Radio extends BaseComponent<RadioProps, RadioState> {
         super(props);
         this.state = {
             hover: false,
+            addonId: props.addonId,
+            extraId: props.extraId,
         };
         this.foundation = new RadioFoundation(this.adapter);
         this.radioEntity = null;
-        this.addonId = getUuidShort({ prefix: 'addon' });
-        this.extraId = getUuidShort({ prefix: 'extra' });
     }
 
     get adapter(): RadioAdapter {
@@ -106,6 +110,12 @@ class Radio extends BaseComponent<RadioProps, RadioState> {
             ...super.adapter,
             setHover: (hover: boolean) => {
                 this.setState({ hover });
+            },
+            setAddonId: () => {
+                this.setState({ addonId: getUuidShort({ prefix: 'addon' }) });
+            },
+            setExtraId: () => {
+                this.setState({ extraId: getUuidShort({ prefix: 'extra' }) });
             }
         };
     }
@@ -168,7 +178,7 @@ class Radio extends BaseComponent<RadioProps, RadioState> {
             isButtonRadioComponent,
             buttonSize,
             realPrefixCls;
-        const isHover = this.state.hover;
+        const { hover: isHover, addonId, extraId } = this.state;
         let props = {};
 
         if (this.isInGroup()) {
@@ -218,8 +228,8 @@ class Radio extends BaseComponent<RadioProps, RadioState> {
         }, addonClassName);
         const renderContent = () => (
             <>
-                {children ? <span className={addonCls} style={addonStyle} id={this.addonId}>{children}</span> : null}
-                {extra && !isButtonRadio ? <div className={`${prefix}-extra`} id={this.extraId}>{extra}</div> : null}
+                {children ? <span className={addonCls} style={addonStyle} id={addonId}>{children}</span> : null}
+                {extra && !isButtonRadio ? <div className={`${prefix}-extra`} id={extraId}>{extra}</div> : null}
             </>
         );
         return (
@@ -240,8 +250,8 @@ class Radio extends BaseComponent<RadioProps, RadioState> {
                     ref={(ref: RadioInner) => {
                         this.radioEntity = ref;
                     }}
-                    addonId={children && this.addonId}
-                    extraId={extra && this.extraId}
+                    addonId={children && addonId}
+                    extraId={extra && extraId}
                 />
                 {
                     isCardRadioGroup ?

package/scrollList/_story/ScrollList/index.js

@@ -11,7 +11,7 @@ class ScrollListDemo extends React.Component {
         };
 
         this.list = new Array(20).fill(0).map((itm, index) => {
-            return { value: index, disabled: Math.random() + 0.2 > 1 };
+            return { value: index };
         });
     }
 

package/select/index.tsx

@@ -446,11 +446,11 @@ class Select extends BaseComponent<SelectProps, SelectState> {
                 let options = [];
                 const { optionList } = this.props;
                 if (optionList && optionList.length) {
-                    options = optionList.map((itemOpt, index) => ({ 
-                        _show: true, 
-                        _selected: false, 
+                    options = optionList.map((itemOpt, index) => ({
+                        _show: true,
+                        _selected: false,
                         _scrollIndex: index,
-                        ...itemOpt 
+                        ...itemOpt
                     }));
                     optionGroups[0] = { children: options, label: '' };
                 } else {
@@ -771,7 +771,7 @@ class Select extends BaseComponent<SelectProps, SelectState> {
                 const groupContent = <OptionGroup {...parentGroup} key={parentGroup.label} />;
                 groupStatus.set(parentGroup.label, true);
                 content.push(groupContent);
-            } 
+            }
             content.push(optionContent);
         });
 
@@ -899,7 +899,7 @@ class Select extends BaseComponent<SelectProps, SelectState> {
                 content: optionNode.label,
             });
         }
-        
+
         const mapItems = maxTagCount ? selectedItems.slice(0, maxTagCount) : selectedItems; // no need to render rest tag when maxTagCount is setting
 
         const tags = mapItems.map((item, i) => {
@@ -946,7 +946,7 @@ class Select extends BaseComponent<SelectProps, SelectState> {
 
         const NotOneLine = !maxTagCount; // Multiple lines (that is, do not set maxTagCount), do not use TagGroup, directly traverse with Tag, otherwise Input cannot follow the correct position
 
-        const tagContent = NotOneLine ? tags : <TagGroup tagList={tags} maxTagCount={n} restCount={maxTagCount ? selectedItems.length - maxTagCount : undefined} size="large" mode="custom" />;
+        const tagContent = NotOneLine ? tags : <TagGroup<"custom"> tagList={tags} maxTagCount={n} restCount={maxTagCount ? selectedItems.length - maxTagCount : undefined} size="large" mode="custom" />;
 
         return (
             <>

package/table/Body/BaseRow.tsx

@@ -153,6 +153,21 @@ export default class TableRow extends BaseComponent<BaseRowProps, Record<string,
         this.foundation = new TableRowFoundation(this.adapter);
     }
 
+    componentDidMount() {
+        // fix #745
+        // didmount/willUnmount may be called twice when React.StrictMode is true in React 18, we need to ensure that this.cache.customRowProps is correct
+        const {
+            onRow,
+            index,
+            record,
+        } = this.props;
+        const customRowProps = this.adapter.getCache('customRowProps');
+        if (typeof customRowProps === 'undefined') {
+            const { className: customClassName, style: customStyle, ...rowProps } = onRow(record, index) || {};
+            this.adapter.setCache('customRowProps', { ...rowProps });
+        }
+    }
+
     shouldComponentUpdate(nextProps: BaseRowProps) {
         /**
           * Shallow comparison of incoming props to simulate PureComponent

package/tag/group.tsx

@@ -10,12 +10,12 @@ const prefixCls = cssClasses.PREFIX;
 const tagSize = strings.TAG_SIZE;
 const avatarShapeSet = strings.AVATAR_SHAPE;
 
-export interface TagGroupProps {
+export interface TagGroupProps<T> {
     style?: React.CSSProperties;
     className?: string;
     maxTagCount?: number;
     restCount?: number;
-    tagList?: (TagProps | React.ReactNode)[];
+    tagList?: (T extends 'custom' ? React.ReactNode : TagProps)[];
     size?: 'small' | 'large';
     showPopover?: boolean;
     popoverProps?: PopoverProps;
@@ -23,7 +23,7 @@ export interface TagGroupProps {
     mode?: string;
 }
 
-export default class TagGroup extends PureComponent<TagGroupProps> {
+export default class TagGroup<T> extends PureComponent<TagGroupProps<T>> {
     static defaultProps = {
         style: {},
         className: '',
@@ -84,7 +84,7 @@ export default class TagGroup extends PureComponent<TagGroupProps> {
         let renderTags: (Tag | React.ReactNode)[] = tags;
 
         const normalTags: (Tag | React.ReactNode)[] = tags.slice(0, maxTagCount);
-        const restTags = tags.slice(maxTagCount) as  React.ReactNode;
+        const restTags = tags.slice(maxTagCount) as React.ReactNode;
         let nTag = null;
         if (n > 0) {
             nTag = this.renderNTag(n, restTags);

package/tooltip/index.tsx

@@ -75,6 +75,7 @@ export interface TooltipProps extends BaseProps {
     guardFocus?: boolean;
     returnFocusOnClose?: boolean;
     onEscKeyDown?: (e: React.KeyboardEvent) => void;
+    wrapperId?: string;
 }
 interface TooltipState {
     visible: boolean;
@@ -193,7 +194,7 @@ export default class Tooltip extends BaseComponent<TooltipProps, TooltipState> {
             placement: props.position || 'top',
             transitionStyle: {},
             isPositionUpdated: false,
-            id: getUuidShort(), // auto generate id, will be used by children.aria-describedby & content.id, improve a11y
+            id: props.wrapperId, // auto generate id, will be used by children.aria-describedby & content.id, improve a11y
         };
         this.foundation = new TooltipFoundation(this.adapter);
         this.eventManager = new Event();
@@ -428,6 +429,9 @@ export default class Tooltip extends BaseComponent<TooltipProps, TooltipState> {
             },
             notifyEscKeydown: (event: React.KeyboardEvent) => {
                 this.props.onEscKeyDown(event);
+            },
+            setId: () => {
+                this.setState({ id: getUuidShort() });
             }
         };
     }

package/treeSelect/index.tsx

@@ -826,7 +826,7 @@ class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState> {
         const tagList = this.renderTagList();
         // mode=custom to return tagList directly
         return (
-            <TagGroup
+            <TagGroup<'custom'>
                 maxTagCount={maxTagCount}
                 tagList={tagList}
                 size="large"

package/upload/_story/upload.stories.js

@@ -581,6 +581,7 @@ export const Draggable = () => (
     <Upload
       {...commonProps}
       style={{ marginTop: 10, height: 300 }}
+      // directory 
       draggable={true}
       dragMainText={'点击上传文件或拖拽文件到这里'}
     ></Upload>