@douyinfe/semi-ui 2.1.4 → 2.2.0-beta.1

package/empty/index.tsx

@@ -60,7 +60,7 @@ export default class Empty extends BaseComponent<EmptyProps, EmptyState> {
         this.observer && this.observer.disconnect();
     }
 
-    observe(mutationsList: any): void {
+    observe = (mutationsList: any): void => {
         for (const mutation of mutationsList) {
             if (mutation.type === 'attributes' && mutation.attributeName === 'theme-mode') {
                 this.updateMode();
@@ -68,7 +68,7 @@ export default class Empty extends BaseComponent<EmptyProps, EmptyState> {
         }
     }
 
-    updateMode(): void {
+    updateMode = (): void => {
         const val = this.body.getAttribute('theme-mode');
         if (val !== this.state.mode) {
             this.setState({ mode: val });

package/form/_story/form.stories.js

@@ -432,73 +432,6 @@ FieldDisplayName.story = {
   name: 'Field displayName',
 };
 
-class ReUseDemo extends React.Component {
-  constructor() {
-    super();
-    this.getFormApi = this.getFormApi.bind(this);
-    this.suppressRankOptions = [
-      { label: '不打压', value: 0 },
-      { label: 'top10以下', value: 10 },
-      { label: 'top30以下', value: 30 },
-    ];
-    this.citySuppressRankOptions = [
-      { label: '不打压', value: 0 },
-      { label: 'top3以下', value: 3 },
-      { label: 'top5以下', value: 5 },
-      { label: 'top10以下', value: 10 },
-    ];
-  }
-
-  getFormApi(formApi) {
-    this.formApi = formApi;
-  }
-
-  render() {
-    return (
-      <Form
-        getFormApi={this.getFormApi}
-        initValues={{ listType: 'online', attr: { suppress_rank: 0, city_suppress_rank: 5 } }}
-        onValueChange={values => console.log(values)}
-        style={{ width: 250 }}
-      >
-        {({ formState }) => (
-          <>
-            <Form.Select
-              field="listType"
-              label="榜单类型"
-              disabled={this.ifUseOld}
-              style={{ width: '100%' }}
-              // onChange={val => this.onChangeListType(val)}
-            >
-              <Option value="online">热点榜</Option>
-              <Option value="riseHot">上升热点榜</Option>
-              <Option value="sameCity">同城热点榜</Option>
-            </Form.Select>
-            {formState.values.listType !== 'sameCity' ? (
-              <Form.Select
-                label="竞品打压类型"
-                field="attr.suppress_rank"
-                optionList={this.suppressRankOptions}
-              />
-            ) : (
-              <Form.Select
-                label="同城竞品打压"
-                field="attr.city_suppress_rank"
-                optionList={this.citySuppressRankOptions}
-              />
-            )}
-          </>
-        )}
-      </Form>
-    );
-  }
-}
-export const SameFieldSwitchCauseReuse = () => <ReUseDemo />;
-
-SameFieldSwitchCauseReuse.story = {
-  name: 'same field switch cause reuse',
-};
-
 export const _ChildDidMount = () => <ChildDidMount />;
 
 _ChildDidMount.story = {

package/form/hoc/withField.tsx

@@ -75,7 +75,7 @@ function withField<
         // 无需注入的直接返回，eg：Group内的checkbox、radio
         // Return without injection, eg: <Checkbox> / <Radio> inside CheckboxGroup/RadioGroup
         if (!shouldInject) {
-            return <Component {...rest} />;
+            return <Component {...rest} ref={ref} />;
         }
 
         // grab formState from context

package/gulpfile.js

@@ -81,7 +81,8 @@ gulp.task('compileScss', function compileScss() {
                     realUrl = url.replace(/~@douyinfe\/semi-foundation/, semiUIPath);
                 }
                 return { url: realUrl };
-            }
+            },
+            charset: false
         }).on('error', sass.logError))
         .pipe(gulp.dest('lib/es'))
         .pipe(gulp.dest('lib/cjs'));

package/lib/cjs/_base/base.css

@@ -399,7 +399,7 @@ body, body[theme-mode=dark] .semi-always-light {
   --semi-color-link-visited: rgba(var(--semi-blue-5), 1);
   --semi-color-border: rgba(var(--semi-grey-9), .08);
   --semi-color-nav-bg: rgba(var(--semi-white), 1);
-  --semi-overlay-bg: rgba(22, 22, 26, .6);
+  --semi-color-overlay-bg: rgba(22, 22, 26, .6);
   --semi-color-fill-0: rgba(var(--semi-grey-8), .05);
   --semi-color-fill-1: rgba(var(--semi-grey-8), .09);
   --semi-color-fill-2: rgba(var(--semi-grey-8), .13);
@@ -486,7 +486,7 @@ body[theme-mode=dark], body .semi-always-dark {
   --semi-color-link-visited: rgba(var(--semi-blue-5), 1);
   --semi-color-nav-bg: rgba(35, 36, 41, 1);
   --semi-shadow-elevated: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 4px 14px rgba(0, 0, 0, .25);
-  --semi-overlay-bg: rgba(22, 22, 26, .6);
+  --semi-color-overlay-bg: rgba(22, 22, 26, .6);
   --semi-color-fill-0: rgba(var(--semi-white), .05);
   --semi-color-fill-1: rgba(var(--semi-white), .09);
   --semi-color-fill-2: rgba(var(--semi-white), .13);

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

@@ -30,6 +30,7 @@ export declare function cloneDeep(value: any, customizer?: (value: any) => void)
 export declare const getHighLightTextHTML: ({ sourceString, searchWords, option }: GetHighLightTextHTMLProps) => (string | React.ReactElement<{
     style: Record<string, any>;
     className: string;
+    key: string;
 }, string | React.JSXElementConstructor<any>>)[];
 export interface RegisterMediaQueryOption {
     match?: (e: MediaQueryList | MediaQueryListEvent) => void;

package/lib/cjs/_utils/index.js

@@ -126,7 +126,7 @@ const getHighLightTextHTML = _ref => {
   const markEle = option.highlightTag || 'mark';
   const highlightClassName = option.highlightClassName || '';
   const highlightStyle = option.highlightStyle || {};
-  return (0, _map.default)(chunks).call(chunks, chunk => {
+  return (0, _map.default)(chunks).call(chunks, (chunk, index) => {
     const {
       end,
       start,
@@ -137,7 +137,8 @@ const getHighLightTextHTML = _ref => {
     if (highlight) {
       return /*#__PURE__*/_react.default.createElement(markEle, {
         style: highlightStyle,
-        className: highlightClassName
+        className: highlightClassName,
+        key: text + index
       }, text);
     } else {
       return text;
@@ -173,11 +174,17 @@ const registerMediaQuery = (media, _ref2) => {
     }
 
     callInInit && handlerMediaChange(mediaQueryList);
-    mediaQueryList.addEventListener('change', handlerMediaChange);
-    return () => mediaQueryList.removeEventListener('change', handlerMediaChange);
+
+    if (Object.prototype.hasOwnProperty.call(mediaQueryList, 'addEventListener')) {
+      mediaQueryList.addEventListener('change', handlerMediaChange);
+      return () => mediaQueryList.removeEventListener('change', handlerMediaChange);
+    }
+
+    mediaQueryList.addListener(handlerMediaChange);
+    return () => mediaQueryList.removeListener(handlerMediaChange);
   }
 
-  return null;
+  return () => undefined;
 };
 /**
  * Determine whether the incoming element is a built-in icon

package/lib/cjs/button/Button.d.ts

@@ -7,6 +7,7 @@ export declare type Size = 'default' | 'small' | 'large';
 export declare type Theme = 'solid' | 'borderless' | 'light';
 export declare type Type = 'primary' | 'secondary' | 'tertiary' | 'warning' | 'danger';
 export interface ButtonProps {
+    id?: string;
     block?: boolean;
     circle?: boolean;
     disabled?: boolean;

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

@@ -105,14 +105,18 @@ declare class Cascader extends BaseComponent<CascaderProps, CascaderState> {
         showRestTagsPopover: PropTypes.Requireable<boolean>;
         restTagsPopoverProps: PropTypes.Requireable<object>;
         max: PropTypes.Requireable<number>;
+        separator: PropTypes.Requireable<string>;
         onExceed: PropTypes.Requireable<(...args: any[]) => any>;
         onClear: PropTypes.Requireable<(...args: any[]) => any>;
         loadData: PropTypes.Requireable<(...args: any[]) => any>;
         onLoad: PropTypes.Requireable<(...args: any[]) => any>;
         loadedKeys: PropTypes.Requireable<any[]>;
         disableStrictly: PropTypes.Requireable<boolean>;
+        leafOnly: PropTypes.Requireable<boolean>;
+        enableLeafClick: PropTypes.Requireable<boolean>;
     };
     static defaultProps: {
+        leafOnly: boolean;
         arrowIcon: JSX.Element;
         stopPropagation: boolean;
         motion: boolean;
@@ -129,6 +133,7 @@ declare class Cascader extends BaseComponent<CascaderProps, CascaderState> {
         filterLeafOnly: boolean;
         showRestTagsPopover: boolean;
         restTagsPopoverProps: {};
+        separator: string;
         size: "default";
         treeNodeFilterProp: "label";
         displayProp: "label";
@@ -138,6 +143,7 @@ declare class Cascader extends BaseComponent<CascaderProps, CascaderState> {
         onClear: (...args: any[]) => void;
         onDropdownVisibleChange: (...args: any[]) => void;
         onListScroll: (...args: any[]) => void;
+        enableLeafClick: boolean;
     };
     options: any;
     isEmpty: boolean;
@@ -145,6 +151,7 @@ declare class Cascader extends BaseComponent<CascaderProps, CascaderState> {
     triggerRef: React.RefObject<HTMLDivElement>;
     optionsRef: React.RefObject<any>;
     clickOutsideHandler: any;
+    mergeType: string;
     constructor(props: CascaderProps);
     get adapter(): CascaderAdapter;
     static getDerivedStateFromProps(props: CascaderProps, prevState: CascaderState): Partial<CascaderState>;

package/lib/cjs/cascader/index.js

@@ -28,6 +28,8 @@ var _isArray = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-st
 
 var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
 
+var _flatten2 = _interopRequireDefault(require("lodash/flatten"));
+
 var _noop2 = _interopRequireDefault(require("lodash/noop"));
 
 var _isNumber2 = _interopRequireDefault(require("lodash/isNumber"));
@@ -175,6 +177,7 @@ class Cascader extends _baseComponent.default {
         dropdownStyle,
         loadData,
         emptyContent,
+        separator,
         topSlot,
         bottomSlot,
         showNext,
@@ -191,6 +194,7 @@ class Cascader extends _baseComponent.default {
       }, topSlot, /*#__PURE__*/_react.default.createElement(_item.default, {
         activeKeys: activeKeys,
         selectedKeys: selectedKeys,
+        separator: separator,
         loadedKeys: loadedKeys,
         loadingKeys: loadingKeys,
         onItemClick: this.handleItemClick,
@@ -243,9 +247,9 @@ class Cascader extends _baseComponent.default {
       } = this.props;
       const {
         checkedKeys,
-        mergedCheckedKeys
+        resolvedCheckedKeys
       } = this.state;
-      const realKeys = autoMergeValue ? mergedCheckedKeys : checkedKeys;
+      const realKeys = this.mergeType === _constants.strings.NONE_MERGE_TYPE ? checkedKeys : resolvedCheckedKeys;
       const displayTag = [];
       const hiddenTag = [];
       (0, _forEach.default)(_context2 = [...realKeys]).call(_context2, (checkedKey, idx) => {
@@ -333,20 +337,23 @@ class Cascader extends _baseComponent.default {
       const {
         disabled,
         triggerRender,
-        multiple,
-        autoMergeValue
+        multiple
       } = this.props;
       const {
         selectedKeys,
         inputValue,
         inputPlaceHolder,
-        mergedCheckedKeys,
+        resolvedCheckedKeys,
         checkedKeys
       } = this.state;
       let realValue;
 
       if (multiple) {
-        realValue = autoMergeValue ? mergedCheckedKeys : checkedKeys;
+        if (this.mergeType === _constants.strings.NONE_MERGE_TYPE) {
+          realValue = checkedKeys;
+        } else {
+          realValue = resolvedCheckedKeys;
+        }
       } else {
         realValue = [...selectedKeys][0];
       }
@@ -526,8 +533,8 @@ class Cascader extends _baseComponent.default {
       /* Key of half checked node, when multiple */
       halfCheckedKeys: new _set.default([]),
 
-      /* Auto merged checkedKeys, when multiple */
-      mergedCheckedKeys: new _set.default([]),
+      /* Auto merged checkedKeys or leaf checkedKeys, when multiple */
+      resolvedCheckedKeys: new _set.default([]),
 
       /* Keys of loaded item */
       loadedKeys: new _set.default(),
@@ -540,6 +547,7 @@ class Cascader extends _baseComponent.default {
     };
     this.options = {};
     this.isEmpty = false;
+    this.mergeType = (0, _util.calcMergeType)(props.autoMergeValue, props.leafOnly);
     this.inputRef = /*#__PURE__*/_react.default.createRef();
     this.triggerRef = /*#__PURE__*/_react.default.createRef();
     this.optionsRef = /*#__PURE__*/_react.default.createRef();
@@ -684,7 +692,9 @@ class Cascader extends _baseComponent.default {
       multiple,
       value,
       defaultValue,
-      onChangeWithObject
+      onChangeWithObject,
+      leafOnly,
+      autoMergeValue
     } = props;
     const {
       prevProps
@@ -745,22 +755,20 @@ class Cascader extends _baseComponent.default {
           realKeys = formatKeys;
         }
 
-        let checkedKeys = new _set.default([]);
-        let halfCheckedKeys = new _set.default([]);
-        (0, _forEach.default)(realKeys).call(realKeys, v => {
-          const calRes = (0, _treeUtil.calcCheckedKeys)(v, keyEntities);
-          checkedKeys = new _set.default([...checkedKeys, ...calRes.checkedKeys]);
-          halfCheckedKeys = new _set.default([...halfCheckedKeys, ...calRes.halfCheckedKeys]);
-        }); // disableStrictly
+        const calRes = (0, _treeUtil.calcCheckedKeys)((0, _flatten2.default)(realKeys), keyEntities);
+        const checkedKeys = new _set.default(calRes.checkedKeys);
+        const halfCheckedKeys = new _set.default(calRes.halfCheckedKeys); // disableStrictly
 
         if (props.disableStrictly) {
           newState.disabledKeys = (0, _treeUtil.calcDisabledKeys)(keyEntities);
         }
 
+        const isLeafOnlyMerge = (0, _util.calcMergeType)(autoMergeValue, leafOnly) === _constants.strings.LEAF_ONLY_MERGE_TYPE;
+
         newState.prevProps = props;
         newState.checkedKeys = checkedKeys;
         newState.halfCheckedKeys = halfCheckedKeys;
-        newState.mergedCheckedKeys = new _set.default((0, _treeUtil.normalizeKeyList)(checkedKeys, keyEntities));
+        newState.resolvedCheckedKeys = new _set.default((0, _treeUtil.normalizeKeyList)(checkedKeys, keyEntities, isLeafOnlyMerge));
       }
     }
 
@@ -794,7 +802,6 @@ class Cascader extends _baseComponent.default {
     const {
       size,
       disabled,
-      autoMergeValue,
       placeholder,
       maxTagCount,
       showRestTagsPopover,
@@ -804,11 +811,11 @@ class Cascader extends _baseComponent.default {
       inputValue,
       checkedKeys,
       keyEntities,
-      mergedCheckedKeys
+      resolvedCheckedKeys
     } = this.state;
     const tagInputcls = (0, _classnames.default)("".concat(prefixcls, "-tagInput-wrapper"));
     const tagValue = [];
-    const realKeys = autoMergeValue ? mergedCheckedKeys : checkedKeys;
+    const realKeys = this.mergeType === _constants.strings.NONE_MERGE_TYPE ? checkedKeys : resolvedCheckedKeys;
     (0, _forEach.default)(_context3 = [...realKeys]).call(_context3, checkedKey => {
       if (!(0, _isEmpty2.default)(keyEntities[checkedKey])) {
         tagValue.push(keyEntities[checkedKey].valuePath);
@@ -956,14 +963,18 @@ Cascader.propTypes = {
   showRestTagsPopover: _propTypes.default.bool,
   restTagsPopoverProps: _propTypes.default.object,
   max: _propTypes.default.number,
+  separator: _propTypes.default.string,
   onExceed: _propTypes.default.func,
   onClear: _propTypes.default.func,
   loadData: _propTypes.default.func,
   onLoad: _propTypes.default.func,
   loadedKeys: _propTypes.default.array,
-  disableStrictly: _propTypes.default.bool
+  disableStrictly: _propTypes.default.bool,
+  leafOnly: _propTypes.default.bool,
+  enableLeafClick: _propTypes.default.bool
 };
 Cascader.defaultProps = {
+  leafOnly: false,
   arrowIcon: /*#__PURE__*/_react.default.createElement(_semiIcons.IconChevronDown, null),
   stopPropagation: true,
   motion: true,
@@ -980,6 +991,7 @@ Cascader.defaultProps = {
   filterLeafOnly: true,
   showRestTagsPopover: false,
   restTagsPopoverProps: {},
+  separator: ' / ',
   size: 'default',
   treeNodeFilterProp: 'label',
   displayProp: 'label',
@@ -988,7 +1000,8 @@ Cascader.defaultProps = {
   onExceed: _noop2.default,
   onClear: _noop2.default,
   onDropdownVisibleChange: _noop2.default,
-  onListScroll: _noop2.default
+  onListScroll: _noop2.default,
+  enableLeafClick: false
 };
 var _default = Cascader;
 exports.default = _default;

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

@@ -33,6 +33,7 @@ export interface CascaderItemProps {
     emptyContent: React.ReactNode;
     loadData: (selectOptions: CascaderData[]) => Promise<void>;
     data: Array<Data | Entity>;
+    separator: string;
     multiple: boolean;
     checkedKeys: Set<string>;
     halfCheckedKeys: Set<string>;
@@ -50,6 +51,7 @@ export default class Item extends PureComponent<CascaderItemProps> {
         checkedKeys: PropTypes.Requireable<object>;
         halfCheckedKeys: PropTypes.Requireable<object>;
         onItemCheckboxClick: PropTypes.Requireable<(...args: any[]) => any>;
+        separator: PropTypes.Requireable<string>;
         keyword: PropTypes.Requireable<string>;
     };
     static defaultProps: {

package/lib/cjs/cascader/item.js

@@ -151,7 +151,8 @@ class Item extends _react.PureComponent {
     this.highlight = searchText => {
       const content = [];
       const {
-        keyword
+        keyword,
+        separator
       } = this.props;
       (0, _forEach.default)(searchText).call(searchText, (item, idx) => {
         if (typeof item === 'string' && (0, _includes2.default)(item, keyword)) {
@@ -174,7 +175,7 @@ class Item extends _react.PureComponent {
         }
 
         if (idx !== searchText.length - 1) {
-          content.push(' / ');
+          content.push(separator);
         }
       });
       return content;
@@ -349,6 +350,7 @@ Item.propTypes = {
   checkedKeys: _propTypes.default.object,
   halfCheckedKeys: _propTypes.default.object,
   onItemCheckboxClick: _propTypes.default.func,
+  separator: _propTypes.default.string,
   keyword: _propTypes.default.string
 };
 Item.defaultProps = {

package/lib/cjs/checkbox/checkbox.js

@@ -108,7 +108,8 @@ class Checkbox extends _baseComponent.default {
       onMouseEnter,
       onMouseLeave,
       extra,
-      value
+      value,
+      id
     } = this.props;
     const {
       checked
@@ -165,6 +166,7 @@ class Checkbox extends _baseComponent.default {
     return /*#__PURE__*/_react.default.createElement("span", {
       style: style,
       className: wrapper,
+      id: id,
       onMouseEnter: onMouseEnter,
       onMouseLeave: onMouseLeave,
       onClick: this.handleChange

package/lib/cjs/checkbox/checkboxGroup.d.ts

@@ -18,6 +18,7 @@ export declare type CheckboxGroupProps = {
     style?: React.CSSProperties;
     className?: string;
     type?: CheckboxType;
+    id?: string;
 };
 export declare type CheckboxGroupState = {
     value?: any[];

package/lib/cjs/checkbox/checkboxGroup.js

@@ -91,6 +91,7 @@ class CheckboxGroup extends _baseComponent.default {
       prefixCls,
       direction,
       className,
+      id,
       style,
       type
     } = this.props;
@@ -140,7 +141,8 @@ class CheckboxGroup extends _baseComponent.default {
 
     return /*#__PURE__*/_react.default.createElement("div", {
       className: prefixClsDisplay,
-      style: style
+      style: style,
+      id: id
     }, /*#__PURE__*/_react.default.createElement(_context7.Context.Provider, {
       value: {
         checkboxGroup: {

package/lib/cjs/datePicker/monthsGrid.d.ts

@@ -81,6 +81,7 @@ export default class MonthsGrid extends BaseComponent<MonthsGridProps, MonthsGri
     renderMonth(month: Date, panelType: PanelType): JSX.Element;
     handleWeeksRowNumChange: (weeksRowNum: number, panelType: PanelType) => void;
     reselect: () => void;
+    getYAMOpenType: () => "left" | "right" | "none" | "both";
     renderTimePicker(panelType: PanelType, panelDetail: MonthInfo): JSX.Element;
     renderYearAndMonth(panelType: PanelType, panelDetail: MonthInfo): JSX.Element;
     renderSwitch(panelType: PanelType): JSX.Element;

package/lib/cjs/datePicker/monthsGrid.js

@@ -157,6 +157,10 @@ class MonthsGrid extends _baseComponent.default {
       });
     };
 
+    this.getYAMOpenType = () => {
+      return this.foundation.getYAMOpenType();
+    };
+
     let nowDate = (0, _isArray.default)(props.defaultPickerValue) ? props.defaultPickerValue[0] : props.defaultPickerValue;
     const validFormat = props.format || (0, _getDefaultFormatToken.getDefaultFormatTokenByType)(props.type);
 
@@ -644,9 +648,11 @@ class MonthsGrid extends _baseComponent.default {
       content = 'year month';
     }
 
+    const yearOpenType = this.getYAMOpenType();
     return /*#__PURE__*/_react.default.createElement("div", {
       className: monthGridCls,
       "x-type": type,
+      "x-panel-yearandmonth-open-type": yearOpenType,
       ref: current => this.cacheRefCurrent('monthGrid', current)
     }, content);
   }

package/lib/cjs/datePicker/navigation.js

@@ -48,6 +48,8 @@ class Navigation extends _react.PureComponent {
       onMonthClick,
       onNextMonth,
       onPrevMonth,
+      onPrevYear,
+      onNextYear,
       density,
       shouldBimonthSwitch,
       panelType
@@ -55,37 +57,75 @@ class Navigation extends _react.PureComponent {
     const btnTheme = 'borderless';
     const iconBtnSize = density === 'compact' ? 'default' : 'large';
     const btnNoHorizontalPadding = true;
-    const buttonSize = density === 'compact' ? 'small' : 'default'; // Enable dual-panel synchronous switching, and the current panel is the left panel
+    const buttonSize = density === 'compact' ? 'small' : 'default';
+    const isLeftPanel = panelType === _constants.strings.PANEL_TYPE_LEFT;
+    const isRightPanel = panelType === _constants.strings.PANEL_TYPE_RIGHT; // syncSwitchMonth and the current panel is the left
 
-    const bimonthSwitchWithLeftPanel = shouldBimonthSwitch && panelType === _constants.strings.PANEL_TYPE_LEFT; // Enable dual-panel synchronous switching, and the current panel is the right panel
+    const hiddenLeftPanelRightButtons = shouldBimonthSwitch && isLeftPanel; // syncSwitchMonth and the current panel is the right
+
+    const hiddenRightPanelLeftButtons = shouldBimonthSwitch && isRightPanel; // `visibility: hidden` will keep the icon in position
+
+    const leftButtonStyle = {};
+    const rightButtonStyle = {};
+
+    if (hiddenRightPanelLeftButtons) {
+      leftButtonStyle.visibility = 'hidden';
+    }
+
+    if (hiddenLeftPanelRightButtons) {
+      rightButtonStyle.visibility = 'hidden';
+    }
 
-    const bimonthSwitchWithRightPanel = shouldBimonthSwitch && panelType === _constants.strings.PANEL_TYPE_RIGHT;
     const ref = forwardRef || this.navRef;
     return /*#__PURE__*/_react.default.createElement("div", {
       className: prefixCls,
       ref: ref
-    }, !bimonthSwitchWithRightPanel && /*#__PURE__*/_react.default.createElement(_iconButton.default, {
+    }, /*#__PURE__*/_react.default.createElement(_iconButton.default, {
+      key: "double-chevron-left",
+      icon: /*#__PURE__*/_react.default.createElement(_semiIcons.IconDoubleChevronLeft, {
+        size: iconBtnSize
+      }),
+      size: buttonSize,
+      theme: btnTheme,
+      noHorizontalPadding: btnNoHorizontalPadding,
+      onClick: onPrevYear,
+      style: leftButtonStyle
+    }), /*#__PURE__*/_react.default.createElement(_iconButton.default, {
+      key: "chevron-left",
       icon: /*#__PURE__*/_react.default.createElement(_semiIcons.IconChevronLeft, {
         size: iconBtnSize
       }),
       size: buttonSize,
       onClick: onPrevMonth,
       theme: btnTheme,
-      noHorizontalPadding: btnNoHorizontalPadding
+      noHorizontalPadding: btnNoHorizontalPadding,
+      style: leftButtonStyle
     }), /*#__PURE__*/_react.default.createElement("div", {
       className: "".concat(prefixCls, "-month")
     }, /*#__PURE__*/_react.default.createElement(_button.default, {
       onClick: onMonthClick,
       theme: btnTheme,
       size: buttonSize
-    }, /*#__PURE__*/_react.default.createElement("span", null, monthText))), !bimonthSwitchWithLeftPanel && /*#__PURE__*/_react.default.createElement(_iconButton.default, {
+    }, /*#__PURE__*/_react.default.createElement("span", null, monthText))), /*#__PURE__*/_react.default.createElement(_iconButton.default, {
+      key: "chevron-right",
       icon: /*#__PURE__*/_react.default.createElement(_semiIcons.IconChevronRight, {
         size: iconBtnSize
       }),
       size: buttonSize,
       onClick: onNextMonth,
       theme: btnTheme,
-      noHorizontalPadding: btnNoHorizontalPadding
+      noHorizontalPadding: btnNoHorizontalPadding,
+      style: rightButtonStyle
+    }), /*#__PURE__*/_react.default.createElement(_iconButton.default, {
+      key: "double-chevron-right",
+      icon: /*#__PURE__*/_react.default.createElement(_semiIcons.IconDoubleChevronRight, {
+        size: iconBtnSize
+      }),
+      size: buttonSize,
+      theme: btnTheme,
+      noHorizontalPadding: btnNoHorizontalPadding,
+      onClick: onNextYear,
+      style: rightButtonStyle
     }));
   }
 

package/lib/cjs/descriptions/item.js

@@ -60,7 +60,7 @@ class Item extends _react.PureComponent {
       className: "".concat(prefixCls, "-item")
     }, /*#__PURE__*/_react.default.createElement("span", {
       className: keyCls
-    }, "".concat(itemKey, ":")), /*#__PURE__*/_react.default.createElement("span", {
+    }, itemKey, ":"), /*#__PURE__*/_react.default.createElement("span", {
       className: valCls
     }, typeof children === 'function' ? children() : children))) : /*#__PURE__*/_react.default.createElement("tr", {
       className: className,

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

@@ -31,8 +31,8 @@ export default class Empty extends BaseComponent<EmptyProps, EmptyState> {
     constructor(props: EmptyProps);
     componentDidMount(): void;
     componentWillUnmount(): void;
-    observe(mutationsList: any): void;
-    updateMode(): void;
+    observe: (mutationsList: any) => void;
+    updateMode: () => void;
     render(): JSX.Element;
 }
 export {};