@douyinfe/semi-ui 2.51.4 → 2.52.0-beta.0

package/lib/cjs/table/interface.d.ts

@@ -1,13 +1,13 @@
 import React, { ReactNode, MutableRefObject } from 'react';
-import { BaseProps } from '../_base/baseComponent';
-import { PaginationProps } from '../pagination';
-import { CheckboxProps } from '../checkbox';
-import { DropdownProps } from '../dropdown';
-import { Locale } from '../locale/interface';
-import { ArrayElement } from '../_base/base';
+import type { BaseProps } from '../_base/baseComponent';
+import type { PaginationProps } from '../pagination';
+import type { CheckboxProps } from '../checkbox';
+import type { Locale } from '../locale/interface';
+import type { ArrayElement } from '../_base/base';
 import { strings } from '@douyinfe/semi-foundation/lib/cjs/table/constants';
-import { BaseRowKeyType, BaseSortOrder, BaseGroupBy, BaseGroupByFn, BaseFixed, BaseAlign, BaseChangeInfoSorter, BaseSorter, BaseFilter, BaseChangeInfoFilter, BaseIncludeGroupRecord, BaseEllipsis } from '@douyinfe/semi-foundation/lib/cjs/table/foundation';
-import { ScrollDirection, CSSDirection } from 'react-window';
+import type { BaseRowKeyType, BaseSortOrder, BaseGroupBy, BaseGroupByFn, BaseFixed, BaseAlign, BaseChangeInfoSorter, BaseSorter, BaseFilter, BaseChangeInfoFilter, BaseIncludeGroupRecord, BaseEllipsis } from '@douyinfe/semi-foundation/lib/cjs/table/foundation';
+import type { ScrollDirection, CSSDirection } from 'react-window';
+import type { ColumnFilterProps } from './ColumnFilter';
 export interface TableProps<RecordType extends Record<string, any> = any> extends BaseProps {
     bordered?: boolean;
     children?: ReactNode;
@@ -65,29 +65,37 @@ export interface ColumnProps<RecordType extends Record<string, any> = any> {
     children?: Array<ColumnProps<RecordType>>;
     className?: string;
     colSpan?: number;
+    /** use `dataIndex` to get current column data item from record. If you use `sorter` or `onFilter`, a unique `dataIndex` is required  */
     dataIndex?: string;
     defaultFilteredValue?: any[];
     defaultSortOrder?: SortOrder;
     filterChildrenRecord?: boolean;
-    filterDropdown?: React.ReactNode;
-    filterDropdownProps?: DropdownProps;
+    filterDropdown?: ColumnFilterProps['filterDropdown'];
+    /** render filter Dropdown panel content  */
+    renderFilterDropdown?: ColumnFilterProps['renderFilterDropdown'];
+    /** filter Dropdown props  */
+    filterDropdownProps?: ColumnFilterProps['filterDropdownProps'];
     filterDropdownVisible?: boolean;
     filterIcon?: FilterIcon;
     filterMultiple?: boolean;
     filteredValue?: any[];
+    /** `filters` is not required if you use `renderFilterDropdown`  */
     filters?: Filter[];
     fixed?: Fixed;
+    /** the key required by React. If you have already set the `dataIndex`, the key does not need to be set again.  */
     key?: string | number;
     render?: ColumnRender<RecordType>;
     renderFilterDropdownItem?: RenderFilterDropdownItem;
     sortChildrenRecord?: boolean;
     sortOrder?: SortOrder;
+    /** enable sorting, `dataIndex` is required at the same time  */
     sorter?: Sorter<RecordType>;
     sortIcon?: SortIcon;
     title?: ColumnTitle;
     useFullRender?: boolean;
     width?: string | number;
     onCell?: OnCell<RecordType>;
+    /** enable filtering, `dataIndex` is required at the same time  */
     onFilter?: OnFilter<RecordType>;
     onFilterDropdownVisibleChange?: OnFilterDropdownVisibleChange;
     onHeaderCell?: OnHeaderCell<RecordType>;
@@ -217,7 +225,19 @@ export interface RowSelectionProps<RecordType> {
     onChange?: RowSelectionOnChange<RecordType>;
     onSelect?: RowSelectionOnSelect<RecordType>;
     onSelectAll?: RowSelectionOnSelectAll<RecordType>;
+    renderCell?: RowSelectionRenderCell<RecordType>;
 }
+export type RowSelectionRenderCell<RecordType> = (renderCellArgs: {
+    selected: boolean;
+    record: RecordType;
+    originNode: JSX.Element;
+    inHeader: boolean;
+    disabled: boolean;
+    indeterminate: boolean;
+    index?: number;
+    selectRow?: (selected: boolean, e: Event) => void;
+    selectAll?: (selected: boolean, e: Event) => void;
+}) => ReactNode;
 export type GetCheckboxProps<RecordType> = (record: RecordType) => CheckboxProps;
 export type RowSelectionOnChange<RecordType> = (selectedRowKeys?: (string | number)[], selectedRows?: RecordType[]) => void;
 export type RowSelectionOnSelect<RecordType> = (record?: RecordType, selected?: boolean, selectedRows?: RecordType[], nativeEvent?: React.MouseEvent) => void;

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

@@ -82,6 +82,7 @@ export interface TreeSelectProps extends Omit<BasicTreeSelectProps, OverrideComm
     onChange?: OnChange;
     onFocus?: (e: React.MouseEvent) => void;
     onVisibleChange?: (isVisible: boolean) => void;
+    onClear?: (e: React.MouseEvent | React.KeyboardEvent<HTMLDivElement>) => void;
 }
 export type OverrideCommonState = 'keyEntities' | 'treeData' | 'disabledKeys' | 'flattenNodes';
 export interface TreeSelectState extends Omit<BasicTreeSelectInnerData, OverrideCommonState | 'prevProps'>, Pick<TreeState, OverrideCommonState> {
@@ -121,6 +122,7 @@ declare class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState>
         virtualize: PropTypes.Requireable<object>;
         treeNodeFilterProp: PropTypes.Requireable<string>;
         onChange: PropTypes.Requireable<(...args: any[]) => any>;
+        onClear: PropTypes.Requireable<(...args: any[]) => any>;
         onSearch: PropTypes.Requireable<(...args: any[]) => any>;
         onSelect: PropTypes.Requireable<(...args: any[]) => any>;
         onExpand: PropTypes.Requireable<(...args: any[]) => any>;

package/lib/cjs/treeSelect/index.js

@@ -1155,6 +1155,9 @@ class TreeSelect extends _baseComponent.default {
           onLoad
         } = this.props;
         (0, _isFunction2.default)(onLoad) && onLoad(newLoadedKeys, data);
+      },
+      notifyClear: e => {
+        this.props.onClear && this.props.onClear(e);
       }
     };
     return Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, super.adapter), filterAdapter), treeSelectAdapter), treeAdapter), {
@@ -1326,6 +1329,7 @@ TreeSelect.propTypes = {
   virtualize: _propTypes.default.object,
   treeNodeFilterProp: _propTypes.default.string,
   onChange: _propTypes.default.func,
+  onClear: _propTypes.default.func,
   onSearch: _propTypes.default.func,
   onSelect: _propTypes.default.func,
   onExpand: _propTypes.default.func,

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

@@ -11,7 +11,8 @@ export declare function stopPropagation(e: React.MouseEvent | React.FocusEvent<H
  *
  * skip clone function and react element
  */
-export declare function cloneDeep(value: any, customizer?: (value: any) => void): any;
+export declare function cloneDeep<T>(value: T): T;
+export declare function cloneDeep<T>(value: T, customizer: (value: any) => any): any;
 /**
  * [getHighLightTextHTML description]
  *

package/lib/es/_utils/index.js

@@ -19,11 +19,6 @@ export function stopPropagation(e, noImmediate) {
     e.nativeEvent.stopImmediatePropagation();
   }
 }
-/**
- * use in Table, Form, Navigation
- *
- * skip clone function and react element
- */
 export function cloneDeep(value, customizer) {
   return _cloneDeepWith(value, v => {
     if (typeof customizer === 'function') {

package/lib/es/avatar/TopSlotSvg.d.ts

@@ -0,0 +1,5 @@
+declare const TopSlotSvg: ({ gradientStart, gradientEnd }: {
+    gradientStart: string;
+    gradientEnd: string;
+}) => JSX.Element;
+export default TopSlotSvg;

package/lib/es/avatar/TopSlotSvg.js

@@ -0,0 +1,66 @@
+import { getUuidShort } from '@douyinfe/semi-foundation/lib/es/utils/uuid';
+import React from 'react';
+const TopSlotSvg = _ref => {
+  let {
+    gradientStart,
+    gradientEnd
+  } = _ref;
+  const id = getUuidShort();
+  return /*#__PURE__*/React.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "51",
+    height: "52",
+    viewBox: "0 0 51 52",
+    fill: "none"
+  }, /*#__PURE__*/React.createElement("g", {
+    filter: "url(#filter0_d_6_2)"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M40.4918 46.5592C44.6795 43.176 46.261 34.1333 47.5301 25.6141C49.5854 11.8168 39.6662 1 25.8097 1C11.2857 1 3 11.4279 3 25.3518C3 33.7866 6.29361 43.8947 10.4602 46.5592C12.5868 47.9192 12.5868 47.9051 25.8097 47.9192C38.3651 47.9282 38.5352 48.14 40.4918 46.5592Z",
+    fill: `url(#${id})`
+  })), /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("filter", {
+    id: "filter0_d_6_2",
+    x: "0.789215",
+    y: "0.447304",
+    width: "49.2216",
+    height: "51.3549",
+    filterUnits: "userSpaceOnUse",
+    colorInterpolationFilters: "sRGB"
+  }, /*#__PURE__*/React.createElement("feFlood", {
+    floodOpacity: "0",
+    result: "BackgroundImageFix"
+  }), /*#__PURE__*/React.createElement("feColorMatrix", {
+    in: "SourceAlpha",
+    type: "matrix",
+    values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0",
+    result: "hardAlpha"
+  }), /*#__PURE__*/React.createElement("feOffset", {
+    dy: "1.65809"
+  }), /*#__PURE__*/React.createElement("feGaussianBlur", {
+    stdDeviation: "1.10539"
+  }), /*#__PURE__*/React.createElement("feColorMatrix", {
+    type: "matrix",
+    values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.3 0"
+  }), /*#__PURE__*/React.createElement("feBlend", {
+    mode: "normal",
+    in2: "BackgroundImageFix",
+    result: "effect1_dropShadow_6_2"
+  }), /*#__PURE__*/React.createElement("feBlend", {
+    mode: "normal",
+    in: "SourceGraphic",
+    in2: "effect1_dropShadow_6_2",
+    result: "shape"
+  })), /*#__PURE__*/React.createElement("linearGradient", {
+    id: id,
+    x1: "17.671",
+    y1: "31.7392",
+    x2: "17.671",
+    y2: "47.9333",
+    gradientUnits: "userSpaceOnUse"
+  }, /*#__PURE__*/React.createElement("stop", {
+    stopColor: gradientStart
+  }), /*#__PURE__*/React.createElement("stop", {
+    offset: "1",
+    stopColor: gradientEnd
+  }))));
+};
+export default TopSlotSvg;

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

@@ -40,6 +40,29 @@ export default class Avatar extends BaseComponent<AvatarProps, AvatarState> {
         onClick: PropTypes.Requireable<(...args: any[]) => any>;
         onMouseEnter: PropTypes.Requireable<(...args: any[]) => any>;
         onMouseLeave: PropTypes.Requireable<(...args: any[]) => any>;
+        bottomSlot: PropTypes.Requireable<PropTypes.InferProps<{
+            render: PropTypes.Requireable<(...args: any[]) => any>;
+            shape: PropTypes.Requireable<string>;
+            text: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+            bgColor: PropTypes.Requireable<string>;
+            textColor: PropTypes.Requireable<string>;
+            className: PropTypes.Requireable<string>;
+            style: PropTypes.Requireable<object>;
+        }>>;
+        topSlot: PropTypes.Requireable<PropTypes.InferProps<{
+            render: PropTypes.Requireable<(...args: any[]) => any>;
+            gradientStart: PropTypes.Requireable<string>;
+            gradientEnd: PropTypes.Requireable<string>;
+            text: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+            textColor: PropTypes.Requireable<string>;
+            className: PropTypes.Requireable<string>;
+            style: PropTypes.Requireable<object>;
+        }>>;
+        border: PropTypes.Requireable<NonNullable<boolean | PropTypes.InferProps<{
+            color: PropTypes.Requireable<string>;
+            motion: PropTypes.Requireable<boolean>;
+        }>>>;
+        contentMotion: PropTypes.Requireable<boolean>;
     };
     foundation: AvatarFoundation;
     avatarRef: React.RefObject<HTMLElement | null>;
@@ -55,5 +78,7 @@ export default class Avatar extends BaseComponent<AvatarProps, AvatarState> {
     handleFocusVisible: (event: React.FocusEvent) => void;
     handleBlur: (event: React.FocusEvent) => void;
     getContent: () => React.ReactNode;
+    renderBottomSlot: () => string | number | boolean | React.ReactFragment | JSX.Element;
+    renderTopSlot: () => string | number | boolean | React.ReactFragment | JSX.Element;
     render(): JSX.Element;
 }

package/lib/es/avatar/index.js

@@ -15,6 +15,7 @@ import '@douyinfe/semi-foundation/lib/es/avatar/avatar.css';
 import { noop } from '@douyinfe/semi-foundation/lib/es/utils/function';
 import BaseComponent from '../_base/baseComponent';
 import { handlePrevent } from '@douyinfe/semi-foundation/lib/es/utils/a11y';
+import TopSlotSvg from "./TopSlotSvg";
 const sizeSet = strings.SIZE;
 const shapeSet = strings.SHAPE;
 const colorSet = strings.COLOR;
@@ -88,6 +89,64 @@ export default class Avatar extends BaseComponent {
       }
       return content;
     };
+    this.renderBottomSlot = () => {
+      var _a, _b;
+      if (!this.props.bottomSlot) {
+        return null;
+      }
+      if (this.props.bottomSlot.render) {
+        return this.props.bottomSlot.render();
+      }
+      const renderContent = (_a = this.props.bottomSlot.render) !== null && _a !== void 0 ? _a : () => {
+        var _a;
+        const style = {};
+        if (this.props.bottomSlot.bgColor) {
+          style['backgroundColor'] = this.props.bottomSlot.bgColor;
+        }
+        if (this.props.bottomSlot.textColor) {
+          style['color'] = this.props.bottomSlot.textColor;
+        }
+        return /*#__PURE__*/React.createElement("span", {
+          style: style,
+          className: cls(`${prefixCls}-bottom_slot-shape_${this.props.bottomSlot.shape}`, `${prefixCls}-bottom_slot-shape_${this.props.bottomSlot.shape}-${this.props.size}`, (_a = this.props.bottomSlot.className) !== null && _a !== void 0 ? _a : "")
+        }, this.props.bottomSlot.text);
+      };
+      return /*#__PURE__*/React.createElement("div", {
+        className: cls([`${prefixCls}-bottom_slot`]),
+        style: (_b = this.props.bottomSlot.style) !== null && _b !== void 0 ? _b : {}
+      }, renderContent());
+    };
+    this.renderTopSlot = () => {
+      var _a, _b, _c, _d;
+      if (!this.props.topSlot) {
+        return null;
+      }
+      if (this.props.topSlot.render) {
+        return this.props.topSlot.render();
+      }
+      const textStyle = {};
+      if (this.props.topSlot.textColor) {
+        textStyle['color'] = this.props.topSlot.textColor;
+      }
+      return /*#__PURE__*/React.createElement("div", {
+        style: (_a = this.props.topSlot.style) !== null && _a !== void 0 ? _a : {},
+        className: cls([`${prefixCls}-top_slot-wrapper`, (_b = this.props.topSlot.className) !== null && _b !== void 0 ? _b : "", {
+          [`${prefixCls}-animated`]: this.props.contentMotion
+        }])
+      }, /*#__PURE__*/React.createElement("div", {
+        className: cls([`${prefixCls}-top_slot-bg`, `${prefixCls}-top_slot-bg-${this.props.size}`])
+      }, /*#__PURE__*/React.createElement("div", {
+        className: cls([`${prefixCls}-top_slot-bg-svg`, `${prefixCls}-top_slot-bg-svg-${this.props.size}`])
+      }, /*#__PURE__*/React.createElement(TopSlotSvg, {
+        gradientStart: (_c = this.props.topSlot.gradientStart) !== null && _c !== void 0 ? _c : "var(--semi-color-primary)",
+        gradientEnd: (_d = this.props.topSlot.gradientEnd) !== null && _d !== void 0 ? _d : "var(--semi-color-primary)"
+      }))), /*#__PURE__*/React.createElement("div", {
+        className: cls([`${prefixCls}-top_slot`])
+      }, /*#__PURE__*/React.createElement("div", {
+        style: textStyle,
+        className: cls([`${prefixCls}-top_slot-content`, `${prefixCls}-top_slot-content-${this.props.size}`])
+      }, this.props.topSlot.text)));
+    };
     this.state = {
       isImgExist: true,
       hoverContent: '',
@@ -205,7 +264,8 @@ export default class Avatar extends BaseComponent {
     }
   }
   render() {
-    const _a = this.props,
+    var _a, _b;
+    const _c = this.props,
       {
         shape,
         children,
@@ -219,9 +279,13 @@ export default class Avatar extends BaseComponent {
         srcSet,
         style,
         alt,
-        gap
-      } = _a,
-      others = __rest(_a, ["shape", "children", "size", "color", "className", "hoverMask", "onClick", "imgAttr", "src", "srcSet", "style", "alt", "gap"]);
+        gap,
+        bottomSlot,
+        topSlot,
+        border,
+        contentMotion
+      } = _c,
+      others = __rest(_c, ["shape", "children", "size", "color", "className", "hoverMask", "onClick", "imgAttr", "src", "srcSet", "style", "alt", "gap", "bottomSlot", "topSlot", "border", "contentMotion"]);
     const {
       isImgExist,
       hoverContent,
@@ -233,14 +297,15 @@ export default class Avatar extends BaseComponent {
       [`${prefixCls}-${size}`]: size,
       [`${prefixCls}-${color}`]: color && !isImg,
       [`${prefixCls}-img`]: isImg,
-      [`${prefixCls}-focus`]: focusVisible
+      [`${prefixCls}-focus`]: focusVisible,
+      [`${prefixCls}-animated`]: contentMotion
     }, className);
     const hoverRender = hoverContent ? /*#__PURE__*/React.createElement("div", {
       className: `${prefixCls}-hover`,
       "x-semi-prop": "hoverContent"
     }, hoverContent) : null;
-    return /*#__PURE__*/React.createElement("span", Object.assign({}, others, {
-      style: style,
+    let avatar = /*#__PURE__*/React.createElement("span", Object.assign({}, others, {
+      style: border || bottomSlot || topSlot || border ? {} : style,
       className: avatarCls,
       onClick: onClick,
       onMouseEnter: this.onEnter,
@@ -248,6 +313,36 @@ export default class Avatar extends BaseComponent {
       role: 'listitem',
       ref: this.avatarRef
     }), this.getContent(), hoverRender);
+    if (border) {
+      const borderStyle = {};
+      if (border === null || border === void 0 ? void 0 : border.color) {
+        borderStyle['borderColor'] = border.color;
+      }
+      avatar = /*#__PURE__*/React.createElement("div", {
+        style: Object.assign({
+          position: "relative"
+        }, style)
+      }, avatar, /*#__PURE__*/React.createElement("span", {
+        style: borderStyle,
+        className: cls([`${prefixCls}-additionalBorder`, `${prefixCls}-additionalBorder-${size}`, {
+          [`${prefixCls}-${shape}`]: shape
+        }])
+      }), ((_a = this.props.border) === null || _a === void 0 ? void 0 : _a.motion) && /*#__PURE__*/React.createElement("span", {
+        style: borderStyle,
+        className: cls([`${prefixCls}-additionalBorder`, `${prefixCls}-additionalBorder-${size}`, {
+          [`${prefixCls}-${shape}`]: shape,
+          [`${prefixCls}-additionalBorder-animated`]: (_b = this.props.border) === null || _b === void 0 ? void 0 : _b.motion
+        }])
+      }));
+    }
+    if (bottomSlot || topSlot || border) {
+      return /*#__PURE__*/React.createElement("span", {
+        className: cls([`${prefixCls}-wrapper`]),
+        style: style
+      }, avatar, topSlot && ["small", "default", "medium", "large", "extra-large"].includes(size) && shape === "circle" && this.renderTopSlot(), bottomSlot && ["small", "default", "medium", "large", "extra-large"].includes(size) && this.renderBottomSlot());
+    } else {
+      return avatar;
+    }
   }
 }
 Avatar.defaultProps = {
@@ -275,6 +370,29 @@ Avatar.propTypes = {
   onError: PropTypes.func,
   onClick: PropTypes.func,
   onMouseEnter: PropTypes.func,
-  onMouseLeave: PropTypes.func
+  onMouseLeave: PropTypes.func,
+  bottomSlot: PropTypes.shape({
+    render: PropTypes.func,
+    shape: PropTypes.oneOf(['circle', 'square']),
+    text: PropTypes.node,
+    bgColor: PropTypes.string,
+    textColor: PropTypes.string,
+    className: PropTypes.string,
+    style: PropTypes.object
+  }),
+  topSlot: PropTypes.shape({
+    render: PropTypes.func,
+    gradientStart: PropTypes.string,
+    gradientEnd: PropTypes.string,
+    text: PropTypes.node,
+    textColor: PropTypes.string,
+    className: PropTypes.string,
+    style: PropTypes.object
+  }),
+  border: PropTypes.oneOfType([PropTypes.shape({
+    color: PropTypes.string,
+    motion: PropTypes.bool
+  }), PropTypes.bool]),
+  contentMotion: PropTypes.bool
 };
 Avatar.elementType = 'Avatar';

package/lib/es/avatar/interface.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { CSSProperties } from 'react';
 import { BaseProps } from '../_base/baseComponent';
 export type AvatarShape = 'circle' | 'square';
 export type AvatarSize = 'extra-extra-small' | 'extra-small' | 'small' | 'default' | 'medium' | 'large' | 'extra-large';
@@ -18,6 +18,29 @@ export interface AvatarProps extends BaseProps {
     onMouseEnter?: React.MouseEventHandler;
     onMouseLeave?: React.MouseEventHandler;
     imgAttr?: React.ImgHTMLAttributes<HTMLImageElement>;
+    bottomSlot?: {
+        render?: () => React.ReactNode;
+        shape?: "circle" | "square";
+        text: React.ReactNode;
+        bgColor: string;
+        textColor: string;
+        className: string;
+        style?: CSSProperties;
+    };
+    topSlot?: {
+        render?: () => React.ReactNode;
+        gradientStart?: string;
+        gradientEnd?: string;
+        text: React.ReactNode;
+        textColor: string;
+        className: string;
+        style?: CSSProperties;
+    };
+    border?: {
+        color?: string;
+        motion?: boolean;
+    } & boolean;
+    contentMotion?: boolean;
 }
 export type AvatarGroupShape = 'circle' | 'square';
 export type AvatarGroupSize = 'extra-extra-small' | 'extra-small' | 'small' | 'default' | 'medium' | 'large' | 'extra-large';

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

@@ -191,10 +191,9 @@ declare class Cascader extends BaseComponent<CascaderProps, CascaderState> {
     componentWillUnmount(): void;
     componentDidUpdate(prevProps: CascaderProps): void;
     handleInputChange: (value: string) => void;
-    handleTagRemoveInTrigger: (pos: string) => void;
-    handleTagClose: (tagChildren: React.ReactNode, e: React.MouseEvent<HTMLElement>, tagKey: string | number) => void;
+    handleTagRemove: (e: any, tagValuePath: Array<string | number>) => void;
+    handleRemoveByKey: (key: any) => 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,13 +34,14 @@ class Cascader extends BaseComponent {
     this.handleInputChange = value => {
       this.foundation.handleInputChange(value);
     };
-    this.handleTagRemoveInTrigger = pos => {
-      this.foundation.handleTagRemoveInTrigger(pos);
+    this.handleTagRemove = (e, tagValuePath) => {
+      this.foundation.handleTagRemove(e, tagValuePath);
     };
-    this.handleTagClose = (tagChildren, e, tagKey) => {
-      // When value has not changed, prevent clicking tag closeBtn to close tag
-      e.preventDefault();
-      this.foundation.handleTagRemoveByKey(tagKey);
+    this.handleRemoveByKey = key => {
+      const {
+        keyEntities
+      } = this.state;
+      this.handleTagRemove(null, keyEntities[key].valuePath);
     };
     this.renderTagItem = (nodeKey, idx) => {
       const {
@@ -68,18 +69,18 @@ class Cascader extends BaseComponent {
             size: size === 'default' ? 'large' : size,
             key: `tag-${nodeKey}-${idx}`,
             color: "white",
-            tagKey: nodeKey,
             className: tagCls,
             closable: true,
-            onClose: this.handleTagClose
+            onClose: (tagChildren, e) => {
+              // When value has not changed, prevent clicking tag closeBtn to close tag
+              e.preventDefault();
+              this.handleTagRemove(e, keyEntities[nodeKey].valuePath);
+            }
           }, keyEntities[nodeKey].data[displayProp]);
         }
       }
       return null;
     };
-    this.onRemoveInTagInput = v => {
-      this.foundation.handleTagRemoveByKey(v);
-    };
     this.handleItemClick = (e, item) => {
       this.foundation.handleItemClick(e, item);
     };
@@ -279,7 +280,6 @@ class Cascader extends BaseComponent {
       }, labelNode);
     };
     this.renderCustomTrigger = () => {
-      var _a;
       const {
         disabled,
         triggerRender,
@@ -290,26 +290,17 @@ class Cascader extends BaseComponent {
         inputValue,
         inputPlaceHolder,
         resolvedCheckedKeys,
-        checkedKeys,
-        keyEntities
+        checkedKeys
       } = this.state;
       let realValue;
       if (multiple) {
         if (this.mergeType === strings.NONE_MERGE_TYPE) {
-          realValue = new Set();
-          checkedKeys.forEach(key => {
-            var _a;
-            realValue.add((_a = keyEntities[key]) === null || _a === void 0 ? void 0 : _a.pos);
-          });
+          realValue = checkedKeys;
         } else {
-          realValue = new Set();
-          resolvedCheckedKeys.forEach(key => {
-            var _a;
-            realValue.add((_a = keyEntities[key]) === null || _a === void 0 ? void 0 : _a.pos);
-          });
+          realValue = resolvedCheckedKeys;
         }
       } else {
-        realValue = (_a = keyEntities[[...selectedKeys][0]]) === null || _a === void 0 ? void 0 : _a.pos;
+        realValue = [...selectedKeys][0];
       }
       return /*#__PURE__*/React.createElement(Trigger, {
         value: realValue,
@@ -322,7 +313,7 @@ class Cascader extends BaseComponent {
         componentName: 'Cascader',
         componentProps: Object.assign({}, this.props),
         onSearch: this.handleInputChange,
-        onRemove: this.handleTagRemoveInTrigger
+        onRemove: this.handleRemoveByKey
       });
     };
     this.handleMouseOver = () => {
@@ -806,11 +797,11 @@ class Cascader extends BaseComponent {
       showRestTagsPopover: showRestTagsPopover,
       restTagsPopoverProps: restTagsPopoverProps,
       maxTagCount: maxTagCount,
-      renderTagItem: this.renderTagItem,
+      renderTagItem: (value, index) => this.renderTagItem(value, index),
       inputValue: inputValue,
       onInputChange: this.handleInputChange,
       // TODO Modify logic, not modify type
-      onRemove: this.onRemoveInTagInput,
+      onRemove: v => this.handleTagRemove(null, v),
       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 (!_isEqual(prevProps.value, this.props.value)) {
+    if (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,6 +41,16 @@ 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,
@@ -50,14 +60,8 @@ class YearAndMonth extends BaseComponent {
         value: idx + 1,
         month: idx + 1
       })),
-      currentYear: {
-        left: currentYear.left || now.getFullYear(),
-        right: currentYear.right || now.getFullYear()
-      },
-      currentMonth: {
-        left: currentMonth.left || now.getMonth() + 1,
-        right: currentMonth.right || now.getMonth() + 2
-      }
+      currentYear,
+      currentMonth
     };
     this.yearRef = /*#__PURE__*/React.createRef();
     this.monthRef = /*#__PURE__*/React.createRef();
@@ -94,19 +98,11 @@ class YearAndMonth extends BaseComponent {
   }
   static getDerivedStateFromProps(props, state) {
     const willUpdateStates = {};
-    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.currentYear, state.currentYear) && props.currentYear.left !== 0) {
+      willUpdateStates.currentYear = props.currentYear;
     }
-    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
-      };
+    if (!_isEqual(props.currentMonth, state.currentMonth) && props.currentMonth.left !== 0) {
+      willUpdateStates.currentMonth = props.currentMonth;
     }
     return willUpdateStates;
   }