@douyinfe/semi-ui 2.51.3 → 2.51.4

package/lib/cjs/cascader/index.d.ts

@@ -191,9 +191,10 @@ declare class Cascader extends BaseComponent<CascaderProps, CascaderState> {
     componentWillUnmount(): void;
     componentDidUpdate(prevProps: CascaderProps): void;
     handleInputChange: (value: string) => void;
-    handleTagRemove: (e: any, tagValuePath: Array<string | number>) => void;
-    handleRemoveByKey: (key: any) => void;
+    handleTagRemoveInTrigger: (pos: string) => void;
+    handleTagClose: (tagChildren: React.ReactNode, e: React.MouseEvent<HTMLElement>, tagKey: string | number) => void;
     renderTagItem: (nodeKey: string, idx: number) => string | number | boolean | React.ReactFragment | JSX.Element;
+    onRemoveInTagInput: (v: string) => void;
     renderTagInput(): JSX.Element;
     renderInput(): JSX.Element;
     handleItemClick: (e: MouseEvent | KeyboardEvent, item: Entity | Data) => void;

package/lib/cjs/cascader/index.js

@@ -43,14 +43,13 @@ class Cascader extends _baseComponent.default {
     this.handleInputChange = value => {
       this.foundation.handleInputChange(value);
     };
-    this.handleTagRemove = (e, tagValuePath) => {
-      this.foundation.handleTagRemove(e, tagValuePath);
+    this.handleTagRemoveInTrigger = pos => {
+      this.foundation.handleTagRemoveInTrigger(pos);
     };
-    this.handleRemoveByKey = key => {
-      const {
-        keyEntities
-      } = this.state;
-      this.handleTagRemove(null, keyEntities[key].valuePath);
+    this.handleTagClose = (tagChildren, e, tagKey) => {
+      // When value has not changed, prevent clicking tag closeBtn to close tag
+      e.preventDefault();
+      this.foundation.handleTagRemoveByKey(tagKey);
     };
     this.renderTagItem = (nodeKey, idx) => {
       const {
@@ -78,18 +77,18 @@ class Cascader extends _baseComponent.default {
             size: size === 'default' ? 'large' : size,
             key: `tag-${nodeKey}-${idx}`,
             color: "white",
+            tagKey: nodeKey,
             className: tagCls,
             closable: true,
-            onClose: (tagChildren, e) => {
-              // When value has not changed, prevent clicking tag closeBtn to close tag
-              e.preventDefault();
-              this.handleTagRemove(e, keyEntities[nodeKey].valuePath);
-            }
+            onClose: this.handleTagClose
           }, keyEntities[nodeKey].data[displayProp]);
         }
       }
       return null;
     };
+    this.onRemoveInTagInput = v => {
+      this.foundation.handleTagRemoveByKey(v);
+    };
     this.handleItemClick = (e, item) => {
       this.foundation.handleItemClick(e, item);
     };
@@ -289,6 +288,7 @@ class Cascader extends _baseComponent.default {
       }, labelNode);
     };
     this.renderCustomTrigger = () => {
+      var _a;
       const {
         disabled,
         triggerRender,
@@ -299,17 +299,26 @@ class Cascader extends _baseComponent.default {
         inputValue,
         inputPlaceHolder,
         resolvedCheckedKeys,
-        checkedKeys
+        checkedKeys,
+        keyEntities
       } = this.state;
       let realValue;
       if (multiple) {
         if (this.mergeType === _constants.strings.NONE_MERGE_TYPE) {
-          realValue = checkedKeys;
+          realValue = new Set();
+          checkedKeys.forEach(key => {
+            var _a;
+            realValue.add((_a = keyEntities[key]) === null || _a === void 0 ? void 0 : _a.pos);
+          });
         } else {
-          realValue = resolvedCheckedKeys;
+          realValue = new Set();
+          resolvedCheckedKeys.forEach(key => {
+            var _a;
+            realValue.add((_a = keyEntities[key]) === null || _a === void 0 ? void 0 : _a.pos);
+          });
         }
       } else {
-        realValue = [...selectedKeys][0];
+        realValue = (_a = keyEntities[[...selectedKeys][0]]) === null || _a === void 0 ? void 0 : _a.pos;
       }
       return /*#__PURE__*/_react.default.createElement(_trigger.default, {
         value: realValue,
@@ -322,7 +331,7 @@ class Cascader extends _baseComponent.default {
         componentName: 'Cascader',
         componentProps: Object.assign({}, this.props),
         onSearch: this.handleInputChange,
-        onRemove: this.handleRemoveByKey
+        onRemove: this.handleTagRemoveInTrigger
       });
     };
     this.handleMouseOver = () => {
@@ -806,11 +815,11 @@ class Cascader extends _baseComponent.default {
       showRestTagsPopover: showRestTagsPopover,
       restTagsPopoverProps: restTagsPopoverProps,
       maxTagCount: maxTagCount,
-      renderTagItem: (value, index) => this.renderTagItem(value, index),
+      renderTagItem: this.renderTagItem,
       inputValue: inputValue,
       onInputChange: this.handleInputChange,
       // TODO Modify logic, not modify type
-      onRemove: v => this.handleTagRemove(null, v),
+      onRemove: this.onRemoveInTagInput,
       placeholder: placeholder,
       expandRestTagsOnClick: false
     });

package/lib/cjs/datePicker/datePicker.js

@@ -471,7 +471,7 @@ class DatePicker extends _baseComponent.default {
     return /range/i.test(type) && !(0, _isFunction2.default)(triggerRender);
   }
   componentDidUpdate(prevProps) {
-    if (prevProps.value !== this.props.value) {
+    if (!(0, _isEqual2.default)(prevProps.value, this.props.value)) {
       this.foundation.initFromProps(Object.assign({}, this.props));
     } else if (this.props.timeZone !== prevProps.timeZone) {
       this.foundation.initFromProps({

package/lib/cjs/datePicker/yearAndMonth.js

@@ -48,16 +48,6 @@ class YearAndMonth extends _baseComponent.default {
       currentYear,
       currentMonth
     } = props;
-    const currentLeftYear = currentYear.left || now.getFullYear();
-    const currentLeftMonth = currentMonth.left || now.getMonth() + 1;
-    currentYear = {
-      left: currentLeftYear,
-      right: currentLeftYear
-    };
-    currentMonth = {
-      left: currentLeftMonth,
-      right: currentMonth.right || currentLeftMonth + 1
-    };
     this.state = {
       years: (0, _index2.getYears)(props.startYear, props.endYear).map(year => ({
         value: year,
@@ -67,8 +57,14 @@ class YearAndMonth extends _baseComponent.default {
         value: idx + 1,
         month: idx + 1
       })),
-      currentYear,
-      currentMonth
+      currentYear: {
+        left: currentYear.left || now.getFullYear(),
+        right: currentYear.right || now.getFullYear()
+      },
+      currentMonth: {
+        left: currentMonth.left || now.getMonth() + 1,
+        right: currentMonth.right || now.getMonth() + 2
+      }
     };
     this.yearRef = /*#__PURE__*/_react.default.createRef();
     this.monthRef = /*#__PURE__*/_react.default.createRef();
@@ -105,11 +101,19 @@ class YearAndMonth extends _baseComponent.default {
   }
   static getDerivedStateFromProps(props, state) {
     const willUpdateStates = {};
-    if (!(0, _isEqual2.default)(props.currentYear, state.currentYear) && props.currentYear.left !== 0) {
-      willUpdateStates.currentYear = props.currentYear;
+    if (!(0, _isEqual2.default)(props.currentYear, state.currentYear)) {
+      const nowYear = new Date().getFullYear();
+      willUpdateStates.currentYear = {
+        left: props.currentYear.left || nowYear,
+        right: props.currentYear.right || nowYear
+      };
     }
-    if (!(0, _isEqual2.default)(props.currentMonth, state.currentMonth) && props.currentMonth.left !== 0) {
-      willUpdateStates.currentMonth = props.currentMonth;
+    if (!(0, _isEqual2.default)(props.currentMonth, state.currentMonth)) {
+      const nowMonth = new Date().getMonth();
+      willUpdateStates.currentMonth = {
+        left: props.currentMonth.left || nowMonth + 1,
+        right: props.currentMonth.right || nowMonth + 2
+      };
     }
     return willUpdateStates;
   }

package/lib/cjs/form/hoc/withField.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
-import { WithFieldOption } from '@douyinfe/semi-foundation/lib/cjs/form/interface';
-import { CommonFieldProps, CommonexcludeType } from '../interface';
-import { Subtract } from 'utility-types';
+import type { WithFieldOption } from '@douyinfe/semi-foundation/lib/cjs/form/interface';
+import type { CommonFieldProps, CommonexcludeType } from '../interface';
+import type { Subtract } from 'utility-types';
 /**
  * withFiled is used to inject components
  * 1. Takes over the value and onChange of the component and synchronizes them to Form Foundation

package/lib/cjs/modal/Modal.js

@@ -36,6 +36,7 @@ exports.destroyFns = destroyFns;
 class Modal extends _baseComponent.default {
   constructor(props) {
     super(props);
+    this.bodyOverflow = null;
     this.handleCancel = e => {
       this.foundation.handleCancel(e);
     };
@@ -175,7 +176,6 @@ class Modal extends _baseComponent.default {
     };
     this.foundation = new _modalFoundation.default(this.adapter);
     this.modalRef = /*#__PURE__*/_react.default.createRef();
-    this.bodyOverflow = '';
     this.scrollBarWidth = 0;
     this.originBodyWidth = '100%';
   }
@@ -196,7 +196,7 @@ class Modal extends _baseComponent.default {
         const {
           getPopupContainer
         } = this.props;
-        if (!getPopupContainer && this.bodyOverflow !== 'hidden') {
+        if (!getPopupContainer && this.bodyOverflow !== null && this.bodyOverflow !== 'hidden') {
           document.body.style.overflow = this.bodyOverflow;
           document.body.style.width = this.originBodyWidth;
         }

package/lib/cjs/select/option.js

@@ -110,7 +110,8 @@ class Option extends _react.PureComponent {
           value,
           label,
           children
-        }, rest), e)
+        }, rest), e),
+        className
       }, rest));
     }
     const config = {

package/lib/cjs/table/ResizableTable.js

@@ -67,7 +67,7 @@ const ResizableTable = function () {
       width: _constants.numbers.DEFAULT_WIDTH_COLUMN_EXPAND
     });
   }
-  if (props.rowSelection && !(0, _find2.default)(rawColumns, item => item.key === _constants.strings.DEFAULT_KEY_COLUMN_SELECTION)) {
+  if (props.rowSelection && !(0, _get2.default)(props.rowSelection, 'hidden') && !(0, _find2.default)(rawColumns, item => item.key === _constants.strings.DEFAULT_KEY_COLUMN_SELECTION)) {
     newColumns.unshift({
       width: (0, _get2.default)(props, 'rowSelection.width', _constants.numbers.DEFAULT_WIDTH_COLUMN_SELECTION),
       key: _constants.strings.DEFAULT_KEY_COLUMN_SELECTION

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

@@ -191,9 +191,10 @@ declare class Cascader extends BaseComponent<CascaderProps, CascaderState> {
     componentWillUnmount(): void;
     componentDidUpdate(prevProps: CascaderProps): void;
     handleInputChange: (value: string) => void;
-    handleTagRemove: (e: any, tagValuePath: Array<string | number>) => void;
-    handleRemoveByKey: (key: any) => void;
+    handleTagRemoveInTrigger: (pos: string) => void;
+    handleTagClose: (tagChildren: React.ReactNode, e: React.MouseEvent<HTMLElement>, tagKey: string | number) => void;
     renderTagItem: (nodeKey: string, idx: number) => string | number | boolean | React.ReactFragment | JSX.Element;
+    onRemoveInTagInput: (v: string) => void;
     renderTagInput(): JSX.Element;
     renderInput(): JSX.Element;
     handleItemClick: (e: MouseEvent | KeyboardEvent, item: Entity | Data) => void;

package/lib/es/cascader/index.js

@@ -34,14 +34,13 @@ class Cascader extends BaseComponent {
     this.handleInputChange = value => {
       this.foundation.handleInputChange(value);
     };
-    this.handleTagRemove = (e, tagValuePath) => {
-      this.foundation.handleTagRemove(e, tagValuePath);
+    this.handleTagRemoveInTrigger = pos => {
+      this.foundation.handleTagRemoveInTrigger(pos);
     };
-    this.handleRemoveByKey = key => {
-      const {
-        keyEntities
-      } = this.state;
-      this.handleTagRemove(null, keyEntities[key].valuePath);
+    this.handleTagClose = (tagChildren, e, tagKey) => {
+      // When value has not changed, prevent clicking tag closeBtn to close tag
+      e.preventDefault();
+      this.foundation.handleTagRemoveByKey(tagKey);
     };
     this.renderTagItem = (nodeKey, idx) => {
       const {
@@ -69,18 +68,18 @@ class Cascader extends BaseComponent {
             size: size === 'default' ? 'large' : size,
             key: `tag-${nodeKey}-${idx}`,
             color: "white",
+            tagKey: nodeKey,
             className: tagCls,
             closable: true,
-            onClose: (tagChildren, e) => {
-              // When value has not changed, prevent clicking tag closeBtn to close tag
-              e.preventDefault();
-              this.handleTagRemove(e, keyEntities[nodeKey].valuePath);
-            }
+            onClose: this.handleTagClose
           }, keyEntities[nodeKey].data[displayProp]);
         }
       }
       return null;
     };
+    this.onRemoveInTagInput = v => {
+      this.foundation.handleTagRemoveByKey(v);
+    };
     this.handleItemClick = (e, item) => {
       this.foundation.handleItemClick(e, item);
     };
@@ -280,6 +279,7 @@ class Cascader extends BaseComponent {
       }, labelNode);
     };
     this.renderCustomTrigger = () => {
+      var _a;
       const {
         disabled,
         triggerRender,
@@ -290,17 +290,26 @@ class Cascader extends BaseComponent {
         inputValue,
         inputPlaceHolder,
         resolvedCheckedKeys,
-        checkedKeys
+        checkedKeys,
+        keyEntities
       } = this.state;
       let realValue;
       if (multiple) {
         if (this.mergeType === strings.NONE_MERGE_TYPE) {
-          realValue = checkedKeys;
+          realValue = new Set();
+          checkedKeys.forEach(key => {
+            var _a;
+            realValue.add((_a = keyEntities[key]) === null || _a === void 0 ? void 0 : _a.pos);
+          });
         } else {
-          realValue = resolvedCheckedKeys;
+          realValue = new Set();
+          resolvedCheckedKeys.forEach(key => {
+            var _a;
+            realValue.add((_a = keyEntities[key]) === null || _a === void 0 ? void 0 : _a.pos);
+          });
         }
       } else {
-        realValue = [...selectedKeys][0];
+        realValue = (_a = keyEntities[[...selectedKeys][0]]) === null || _a === void 0 ? void 0 : _a.pos;
       }
       return /*#__PURE__*/React.createElement(Trigger, {
         value: realValue,
@@ -313,7 +322,7 @@ class Cascader extends BaseComponent {
         componentName: 'Cascader',
         componentProps: Object.assign({}, this.props),
         onSearch: this.handleInputChange,
-        onRemove: this.handleRemoveByKey
+        onRemove: this.handleTagRemoveInTrigger
       });
     };
     this.handleMouseOver = () => {
@@ -797,11 +806,11 @@ class Cascader extends BaseComponent {
       showRestTagsPopover: showRestTagsPopover,
       restTagsPopoverProps: restTagsPopoverProps,
       maxTagCount: maxTagCount,
-      renderTagItem: (value, index) => this.renderTagItem(value, index),
+      renderTagItem: this.renderTagItem,
       inputValue: inputValue,
       onInputChange: this.handleInputChange,
       // TODO Modify logic, not modify type
-      onRemove: v => this.handleTagRemove(null, v),
+      onRemove: this.onRemoveInTagInput,
       placeholder: placeholder,
       expandRestTagsOnClick: false
     });

package/lib/es/datePicker/datePicker.js

@@ -463,7 +463,7 @@ export default class DatePicker extends BaseComponent {
     return /range/i.test(type) && !_isFunction(triggerRender);
   }
   componentDidUpdate(prevProps) {
-    if (prevProps.value !== this.props.value) {
+    if (!_isEqual(prevProps.value, this.props.value)) {
       this.foundation.initFromProps(Object.assign({}, this.props));
     } else if (this.props.timeZone !== prevProps.timeZone) {
       this.foundation.initFromProps({

package/lib/es/datePicker/yearAndMonth.js

@@ -41,16 +41,6 @@ class YearAndMonth extends BaseComponent {
       currentYear,
       currentMonth
     } = props;
-    const currentLeftYear = currentYear.left || now.getFullYear();
-    const currentLeftMonth = currentMonth.left || now.getMonth() + 1;
-    currentYear = {
-      left: currentLeftYear,
-      right: currentLeftYear
-    };
-    currentMonth = {
-      left: currentLeftMonth,
-      right: currentMonth.right || currentLeftMonth + 1
-    };
     this.state = {
       years: getYears(props.startYear, props.endYear).map(year => ({
         value: year,
@@ -60,8 +50,14 @@ class YearAndMonth extends BaseComponent {
         value: idx + 1,
         month: idx + 1
       })),
-      currentYear,
-      currentMonth
+      currentYear: {
+        left: currentYear.left || now.getFullYear(),
+        right: currentYear.right || now.getFullYear()
+      },
+      currentMonth: {
+        left: currentMonth.left || now.getMonth() + 1,
+        right: currentMonth.right || now.getMonth() + 2
+      }
     };
     this.yearRef = /*#__PURE__*/React.createRef();
     this.monthRef = /*#__PURE__*/React.createRef();
@@ -98,11 +94,19 @@ class YearAndMonth extends BaseComponent {
   }
   static getDerivedStateFromProps(props, state) {
     const willUpdateStates = {};
-    if (!_isEqual(props.currentYear, state.currentYear) && props.currentYear.left !== 0) {
-      willUpdateStates.currentYear = props.currentYear;
+    if (!_isEqual(props.currentYear, state.currentYear)) {
+      const nowYear = new Date().getFullYear();
+      willUpdateStates.currentYear = {
+        left: props.currentYear.left || nowYear,
+        right: props.currentYear.right || nowYear
+      };
     }
-    if (!_isEqual(props.currentMonth, state.currentMonth) && props.currentMonth.left !== 0) {
-      willUpdateStates.currentMonth = props.currentMonth;
+    if (!_isEqual(props.currentMonth, state.currentMonth)) {
+      const nowMonth = new Date().getMonth();
+      willUpdateStates.currentMonth = {
+        left: props.currentMonth.left || nowMonth + 1,
+        right: props.currentMonth.right || nowMonth + 2
+      };
     }
     return willUpdateStates;
   }

package/lib/es/form/hoc/withField.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
-import { WithFieldOption } from '@douyinfe/semi-foundation/lib/es/form/interface';
-import { CommonFieldProps, CommonexcludeType } from '../interface';
-import { Subtract } from 'utility-types';
+import type { WithFieldOption } from '@douyinfe/semi-foundation/lib/es/form/interface';
+import type { CommonFieldProps, CommonexcludeType } from '../interface';
+import type { Subtract } from 'utility-types';
 /**
  * withFiled is used to inject components
  * 1. Takes over the value and onChange of the component and synchronizes them to Form Foundation

package/lib/es/modal/Modal.js

@@ -26,6 +26,7 @@ export const destroyFns = [];
 class Modal extends BaseComponent {
   constructor(props) {
     super(props);
+    this.bodyOverflow = null;
     this.handleCancel = e => {
       this.foundation.handleCancel(e);
     };
@@ -165,7 +166,6 @@ class Modal extends BaseComponent {
     };
     this.foundation = new ModalFoundation(this.adapter);
     this.modalRef = /*#__PURE__*/React.createRef();
-    this.bodyOverflow = '';
     this.scrollBarWidth = 0;
     this.originBodyWidth = '100%';
   }
@@ -186,7 +186,7 @@ class Modal extends BaseComponent {
         const {
           getPopupContainer
         } = this.props;
-        if (!getPopupContainer && this.bodyOverflow !== 'hidden') {
+        if (!getPopupContainer && this.bodyOverflow !== null && this.bodyOverflow !== 'hidden') {
           document.body.style.overflow = this.bodyOverflow;
           document.body.style.width = this.originBodyWidth;
         }

package/lib/es/select/option.js

@@ -101,7 +101,8 @@ class Option extends PureComponent {
           value,
           label,
           children
-        }, rest), e)
+        }, rest), e),
+        className
       }, rest));
     }
     const config = {

package/lib/es/table/ResizableTable.js

@@ -57,7 +57,7 @@ const ResizableTable = function () {
       width: numbers.DEFAULT_WIDTH_COLUMN_EXPAND
     });
   }
-  if (props.rowSelection && !_find(rawColumns, item => item.key === strings.DEFAULT_KEY_COLUMN_SELECTION)) {
+  if (props.rowSelection && !_get(props.rowSelection, 'hidden') && !_find(rawColumns, item => item.key === strings.DEFAULT_KEY_COLUMN_SELECTION)) {
     newColumns.unshift({
       width: _get(props, 'rowSelection.width', numbers.DEFAULT_WIDTH_COLUMN_SELECTION),
       key: strings.DEFAULT_KEY_COLUMN_SELECTION

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-ui",
-    "version": "2.51.3",
+    "version": "2.51.4",
     "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.51.3",
-        "@douyinfe/semi-animation-react": "2.51.3",
-        "@douyinfe/semi-foundation": "2.51.3",
-        "@douyinfe/semi-icons": "2.51.3",
-        "@douyinfe/semi-illustrations": "2.51.3",
-        "@douyinfe/semi-theme-default": "2.51.3",
+        "@douyinfe/semi-animation": "2.51.4",
+        "@douyinfe/semi-animation-react": "2.51.4",
+        "@douyinfe/semi-foundation": "2.51.4",
+        "@douyinfe/semi-icons": "2.51.4",
+        "@douyinfe/semi-illustrations": "2.51.4",
+        "@douyinfe/semi-theme-default": "2.51.4",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
         "copy-text-to-clipboard": "^2.1.1",
@@ -75,7 +75,7 @@
     ],
     "author": "",
     "license": "MIT",
-    "gitHead": "d39b89cf05ae9bed8f2a18f6d73026b915db87a4",
+    "gitHead": "b8cad87796be9b6b10409a95d3a5b4cb8b9592e6",
     "devDependencies": {
         "@babel/plugin-proposal-decorators": "^7.15.8",
         "@babel/plugin-transform-runtime": "^7.15.8",