@douyinfe/semi-ui 2.10.1 → 2.11.0-beta.0

package/lib/es/datePicker/datePicker.js

@@ -151,7 +151,8 @@ export default class DatePicker extends BaseComponent {
         insetInput,
         type,
         format,
-        rangeSeparator
+        rangeSeparator,
+        defaultPickerValue
       } = this.props;
       const {
         insetInputValue,
@@ -173,7 +174,8 @@ export default class DatePicker extends BaseComponent {
         onInsetInputChange: this.handleInsetInputChange,
         rangeInputStartRef: this.rangeInputStartRef,
         rangeInputEndRef: this.rangeInputEndRef,
-        density
+        density,
+        defaultPickerValue
       };
       return /*#__PURE__*/React.createElement("div", {
         ref: this.panelRef,
@@ -544,18 +546,11 @@ export default class DatePicker extends BaseComponent {
       insetInput
     } = this.props;
     const {
-      value,
       cachedSelectedValue,
       motionEnd,
       rangeInputFocus
-    } = this.state; // const cachedSelectedValue = this.adapter.getCache('cachedSelectedValue');
-
-    let defaultValue = value;
-
-    if (this.adapter.needConfirm()) {
-      defaultValue = cachedSelectedValue;
-    }
-
+    } = this.state;
+    const defaultValue = cachedSelectedValue;
     return /*#__PURE__*/React.createElement(MonthsGrid, {
       ref: this.monthGrid,
       locale: locale,
@@ -627,7 +622,8 @@ export default class DatePicker extends BaseComponent {
       size,
       inputReadOnly,
       rangeSeparator,
-      insetInput
+      insetInput,
+      defaultPickerValue
     } = this.props;
     const {
       value,
@@ -653,6 +649,7 @@ export default class DatePicker extends BaseComponent {
       disabled: inputDisabled,
       inputValue,
       value: value,
+      defaultPickerValue,
       onChange: this.handleInputChange,
       onEnterPress: this.handleInputComplete,
       // TODO: remove in next major version

package/lib/es/datePicker/monthsGrid.js

@@ -230,7 +230,8 @@ export default class MonthsGrid extends BaseComponent {
     } = this.props;
 
     if (prevProps.defaultValue !== defaultValue) {
-      this.foundation.updateSelectedFromProps(defaultValue, false);
+      // we should always update panel state when value changes
+      this.foundation.updateSelectedFromProps(defaultValue);
     }
 
     if (prevProps.defaultPickerValue !== defaultPickerValue) {

package/lib/es/form/baseForm.js

@@ -68,7 +68,6 @@ class Form extends BaseComponent {
 
   componentWillUnmount() {
     this.foundation.destroy();
-    this.foundation = null;
     this.formApi = null;
   }
 

package/lib/es/radio/radio.d.ts

@@ -29,9 +29,13 @@ export declare 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 };
 declare class Radio extends BaseComponent<RadioProps, RadioState> {

package/lib/es/radio/radio.js

@@ -44,16 +44,12 @@ class Radio extends BaseComponent {
     };
 
     this.state = {
-      hover: false
+      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() {
@@ -62,6 +58,20 @@ class Radio extends BaseComponent {
         this.setState({
           hover
         });
+      },
+      setAddonId: () => {
+        this.setState({
+          addonId: getUuidShort({
+            prefix: 'addon'
+          })
+        });
+      },
+      setExtraId: () => {
+        this.setState({
+          extraId: getUuidShort({
+            prefix: 'extra'
+          })
+        });
       }
     });
   }
@@ -98,7 +108,11 @@ class Radio extends BaseComponent {
       value: propValue
     } = this.props;
     let realChecked, isDisabled, realMode, isButtonRadioGroup, isCardRadioGroup, isPureCardRadioGroup, isButtonRadioComponent, buttonSize, realPrefixCls;
-    const isHover = this.state.hover;
+    const {
+      hover: isHover,
+      addonId,
+      extraId
+    } = this.state;
     let props = {};
 
     if (this.isInGroup()) {
@@ -151,10 +165,10 @@ class Radio extends BaseComponent {
     const renderContent = () => /*#__PURE__*/React.createElement(React.Fragment, null, children ? /*#__PURE__*/React.createElement("span", {
       className: addonCls,
       style: addonStyle,
-      id: this.addonId
+      id: addonId
     }, children) : null, extra && !isButtonRadio ? /*#__PURE__*/React.createElement("div", {
       className: "".concat(prefix, "-extra"),
-      id: this.extraId
+      id: extraId
     }, extra) : null);
 
     return /*#__PURE__*/React.createElement("label", {
@@ -171,8 +185,8 @@ class Radio extends BaseComponent {
       ref: ref => {
         this.radioEntity = ref;
       },
-      addonId: children && this.addonId,
-      extraId: extra && this.extraId
+      addonId: children && addonId,
+      extraId: extra && extraId
     })), isCardRadioGroup ? /*#__PURE__*/React.createElement("div", {
       className: "".concat(prefix, "-isCardRadioGroup_content")
     }, renderContent()) : renderContent());

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

@@ -113,6 +113,7 @@ export default class TableRow extends BaseComponent<BaseRowProps, Record<string,
     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;

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.1",
+    "version": "2.11.0-beta.0",
     "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.1",
-        "@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.0",
+        "@douyinfe/semi-animation-react": "2.11.0-beta.0",
+        "@douyinfe/semi-foundation": "2.11.0-beta.0",
+        "@douyinfe/semi-icons": "2.11.0-beta.0",
+        "@douyinfe/semi-illustrations": "2.11.0-beta.0",
+        "@douyinfe/semi-theme-default": "2.11.0-beta.0",
         "@types/react-window": "^1.8.2",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
@@ -69,13 +69,13 @@
     ],
     "author": "",
     "license": "MIT",
-    "gitHead": "1c84b585ff43db35b286e8c24f8333e4170d015c",
+    "gitHead": "252c53310656cdc47124d257b878c131d8a74ef2",
     "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.0",
         "@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>