@douyinfe/semi-ui 2.31.2-alpha.0 → 2.32.0-beta.0

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

@@ -39,7 +39,7 @@ declare class Anchor extends BaseComponent<AnchorProps, AnchorState> {
     static contextType: React.Context<ContextValue>;
     static Link: typeof Link;
     static PropTypes: {
-        size: PropTypes.Requireable<"small" | "default">;
+        size: PropTypes.Requireable<"default" | "small">;
         railTheme: PropTypes.Requireable<"primary" | "tertiary" | "muted">;
         className: PropTypes.Requireable<string>;
         style: PropTypes.Requireable<object>;

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

@@ -125,7 +125,7 @@ declare class AutoComplete<T extends AutoCompleteItems> extends BaseComponent<Au
         renderSelectedItem: PropTypes.Requireable<(...args: any[]) => any>;
         suffix: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         showClear: PropTypes.Requireable<boolean>;
-        size: PropTypes.Requireable<"small" | "default" | "large">;
+        size: PropTypes.Requireable<"default" | "small" | "large">;
         style: PropTypes.Requireable<object>;
         stopPropagation: PropTypes.Requireable<NonNullable<string | boolean>>;
         maxHeight: PropTypes.Requireable<NonNullable<string | number>>;

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

@@ -47,7 +47,7 @@ export default class Button extends PureComponent<ButtonProps> {
         disabled: PropTypes.Requireable<boolean>;
         prefixCls: PropTypes.Requireable<string>;
         style: PropTypes.Requireable<object>;
-        size: PropTypes.Requireable<"small" | "default" | "large">;
+        size: PropTypes.Requireable<"default" | "small" | "large">;
         type: PropTypes.Requireable<"warning" | "primary" | "tertiary" | "secondary" | "danger">;
         block: PropTypes.Requireable<boolean>;
         onClick: PropTypes.Requireable<(...args: any[]) => any>;

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

@@ -18,7 +18,7 @@ export default class ButtonGroup extends BaseComponent<ButtonGroupProps> {
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         disabled: PropTypes.Requireable<boolean>;
         type: PropTypes.Requireable<string>;
-        size: PropTypes.Requireable<"small" | "default" | "large">;
+        size: PropTypes.Requireable<"default" | "small" | "large">;
         theme: PropTypes.Requireable<"solid" | "light" | "borderless">;
         'aria-label': PropTypes.Requireable<string>;
     };

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

@@ -22,7 +22,7 @@ declare class Button extends React.PureComponent<ButtonProps> {
         onMouseEnter: import("prop-types").Requireable<(...args: any[]) => any>;
         onMouseLeave: import("prop-types").Requireable<(...args: any[]) => any>;
         disabled: import("prop-types").Requireable<boolean>;
-        size: import("prop-types").Requireable<"small" | "default" | "large">;
+        size: import("prop-types").Requireable<"default" | "small" | "large">;
         type: import("prop-types").Requireable<"warning" | "primary" | "tertiary" | "secondary" | "danger">;
         block: import("prop-types").Requireable<boolean>;
         onClick: import("prop-types").Requireable<(...args: any[]) => any>;

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

@@ -188,6 +188,7 @@ declare class Cascader extends BaseComponent<CascaderProps, CascaderState> {
     componentDidUpdate(prevProps: CascaderProps): void;
     handleInputChange: (value: string) => void;
     handleTagRemove: (e: any, tagValuePath: Array<string | number>) => void;
+    handleRemoveByKey: (key: any) => void;
     renderTagItem: (value: string | Array<string>, idx: number, type: string) => string | number | boolean | React.ReactFragment | JSX.Element;
     renderTagInput(): JSX.Element;
     renderInput(): JSX.Element;

package/lib/cjs/cascader/index.js

@@ -82,6 +82,13 @@ class Cascader extends _baseComponent.default {
       this.foundation.handleTagRemove(e, tagValuePath);
     };
 
+    this.handleRemoveByKey = key => {
+      const {
+        keyEntities
+      } = this.state;
+      this.handleTagRemove(null, keyEntities[key].valuePath);
+    };
+
     this.renderTagItem = (value, idx, type) => {
       const {
         keyEntities,
@@ -375,7 +382,9 @@ class Cascader extends _baseComponent.default {
         disabled: disabled,
         triggerRender: triggerRender,
         componentName: 'Cascader',
-        componentProps: Object.assign({}, this.props)
+        componentProps: Object.assign({}, this.props),
+        onSearch: this.handleInputChange,
+        onRemove: this.handleRemoveByKey
       });
     };
 

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

@@ -15,6 +15,9 @@ export interface DateInputProps extends DateInputFoundationProps, BaseProps {
     onClear?: (e: React.MouseEvent<HTMLDivElement>) => void;
     onInsetInputChange?: (options: InsetInputChangeProps) => void;
     value?: Date[];
+    inputRef?: React.RefObject<HTMLInputElement>;
+    rangeInputStartRef?: React.RefObject<HTMLInputElement>;
+    rangeInputEndRef?: React.RefObject<HTMLInputElement>;
 }
 export default class DateInput extends BaseComponent<DateInputProps, {}> {
     static propTypes: {
@@ -26,7 +29,7 @@ export default class DateInput extends BaseComponent<DateInputProps, {}> {
         onFocus: PropTypes.Requireable<(...args: any[]) => any>;
         value: PropTypes.Requireable<any[]>;
         disabled: PropTypes.Requireable<boolean>;
-        type: PropTypes.Requireable<"dateTime" | "date" | "month" | "dateRange" | "year" | "dateTimeRange">;
+        type: PropTypes.Requireable<"dateTime" | "date" | "month" | "dateRange" | "year" | "monthRange" | "dateTimeRange">;
         showClear: PropTypes.Requireable<boolean>;
         format: PropTypes.Requireable<string>;
         inputStyle: PropTypes.Requireable<object>;
@@ -81,6 +84,7 @@ export default class DateInput extends BaseComponent<DateInputProps, {}> {
     renderRangeClearBtn(rangeStart: string, rangeEnd: string): JSX.Element;
     renderRangeSuffix(suffix: React.ReactNode): JSX.Element;
     renderRangeInput(rangeProps: DateInputProps): JSX.Element;
+    isRenderMultipleInputs(): boolean;
     renderInputInset(): JSX.Element;
     renderTriggerInput(): JSX.Element;
     render(): JSX.Element;

package/lib/cjs/datePicker/dateInput.js

@@ -284,6 +284,14 @@ class DateInput extends _baseComponent.default {
     })), this.renderRangeClearBtn(rangeStart, rangeEnd), this.renderRangeSuffix(suffix));
   }
 
+  isRenderMultipleInputs() {
+    const {
+      type
+    } = this.props; // isRange and not monthRange render multiple inputs
+
+    return type.includes('Range') && type !== 'monthRange';
+  }
+
   renderInputInset() {
     const {
       type,
@@ -297,9 +305,6 @@ class DateInput extends _baseComponent.default {
       density,
       insetInput
     } = this.props;
-
-    const _isRangeType = type.includes('Range');
-
     const newInsetInputValue = this.foundation.getInsetInputValue({
       value,
       insetInputValue
@@ -334,7 +339,7 @@ class DateInput extends _baseComponent.default {
       valuePath: 'monthLeft.timeInput',
       onChange: this.handleInsetInputChange,
       onFocus: handleInsetTimeFocus
-    }), _isRangeType && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    }), this.isRenderMultipleInputs() && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
       className: separatorCls
     }, density === 'compact' ? null : '-'), /*#__PURE__*/_react.default.createElement(_insetInput.InsetDateInput, {
       forwardRef: rangeInputEndRef,
@@ -379,6 +384,7 @@ class DateInput extends _baseComponent.default {
       prefix,
       autofocus,
       size,
+      inputRef,
       // range input support props, no need passing to not range type
       rangeInputStartRef,
       rangeInputEndRef,
@@ -391,7 +397,7 @@ class DateInput extends _baseComponent.default {
       insetInputValue,
       defaultPickerValue
     } = _a,
-          rest = __rest(_a, ["placeholder", "type", "value", "inputValue", "inputStyle", "disabled", "showClear", "inputReadOnly", "insetLabel", "validateStatus", "block", "prefixCls", "multiple", "dateFnsLocale", "onBlur", "onClear", "onFocus", "prefix", "autofocus", "size", "rangeInputStartRef", "rangeInputEndRef", "onRangeClear", "onRangeBlur", "onRangeEndTabPress", "rangeInputFocus", "rangeSeparator", "insetInput", "insetInputValue", "defaultPickerValue"]);
+          rest = __rest(_a, ["placeholder", "type", "value", "inputValue", "inputStyle", "disabled", "showClear", "inputReadOnly", "insetLabel", "validateStatus", "block", "prefixCls", "multiple", "dateFnsLocale", "onBlur", "onClear", "onFocus", "prefix", "autofocus", "size", "inputRef", "rangeInputStartRef", "rangeInputEndRef", "onRangeClear", "onRangeBlur", "onRangeEndTabPress", "rangeInputFocus", "rangeSeparator", "insetInput", "insetInputValue", "defaultPickerValue"]);
 
     const dateIcon = /*#__PURE__*/_react.default.createElement(_semiIcons.IconCalendar, {
       "aria-hidden": true
@@ -411,22 +417,23 @@ class DateInput extends _baseComponent.default {
     }
 
     const inputCls = (0, _classnames.default)({
-      [`${prefixCls}-input-readonly`]: inputReadOnly
+      [`${prefixCls}-input-readonly`]: inputReadOnly,
+      [`${prefixCls}-monthRange-input`]: type === 'monthRange'
     });
-    const isRangeType = /range/i.test(type);
     const rangeProps = Object.assign(Object.assign({}, this.props), {
       text,
       suffix,
       inputCls
     });
-    return isRangeType ? this.renderRangeInput(rangeProps) : /*#__PURE__*/_react.default.createElement(_index.default, Object.assign({}, rest, {
+    return this.isRenderMultipleInputs() ? this.renderRangeInput(rangeProps) : /*#__PURE__*/_react.default.createElement(_index.default, Object.assign({}, rest, {
+      ref: inputRef,
       insetLabel: insetLabel,
       disabled: disabled,
       readonly: inputReadOnly,
       className: inputCls,
       style: inputStyle,
       hideSuffix: showClear,
-      placeholder: placeholder,
+      placeholder: type === 'monthRange' && Array.isArray(placeholder) ? placeholder[0] + rangeSeparator + placeholder[1] : placeholder,
       onEnterPress: this.handleEnterPress,
       onChange: this.handleChange,
       onClear: this.handleInputClear,

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

@@ -28,10 +28,21 @@ export interface DatePickerProps extends DatePickerFoundationProps {
     renderDate?: (dayNumber?: number, fullDate?: string) => React.ReactNode;
     renderFullDate?: (dayNumber?: number, fullDate?: string, dayStatus?: DayStatusType) => React.ReactNode;
     triggerRender?: (props: DatePickerProps) => React.ReactNode;
+    /**
+     * There are multiple input boxes when selecting a range, and the input boxes will be out of focus multiple times.
+     *
+     * Use `onOpenChange` or `onClickOutSide` instead
+     */
     onBlur?: React.MouseEventHandler<HTMLInputElement>;
     onClear?: React.MouseEventHandler<HTMLDivElement>;
+    /**
+     * There are multiple input boxes when selecting a range, and the input boxes will be focused multiple times.
+     *
+     * Use `onOpenChange` or `triggerRender` instead
+     */
     onFocus?: (e: React.MouseEvent, rangeType: RangeType) => void;
     onPresetClick?: (item: PresetType, e: React.MouseEvent<HTMLDivElement>) => void;
+    onClickOutSide?: () => void;
     locale?: Locale['DatePicker'];
     dateFnsLocale?: Locale['dateFnsLocale'];
     yearAndMonthOpts?: ScrollItemProps<any>;
@@ -46,8 +57,8 @@ export default class DatePicker extends BaseComponent<DatePickerProps, DatePicke
         'aria-invalid': PropTypes.Requireable<boolean>;
         'aria-labelledby': PropTypes.Requireable<string>;
         'aria-required': PropTypes.Requireable<boolean>;
-        type: PropTypes.Requireable<"dateTime" | "date" | "month" | "dateRange" | "year" | "dateTimeRange">;
-        size: PropTypes.Requireable<"small" | "default" | "large">;
+        type: PropTypes.Requireable<"dateTime" | "date" | "month" | "dateRange" | "year" | "monthRange" | "dateTimeRange">;
+        size: PropTypes.Requireable<"default" | "small" | "large">;
         clearIcon: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         density: PropTypes.Requireable<"default" | "compact">;
         defaultValue: PropTypes.Requireable<NonNullable<string | number | object>>;
@@ -113,6 +124,7 @@ export default class DatePicker extends BaseComponent<DatePickerProps, DatePicke
         rangeSeparator: PropTypes.Requireable<string>;
         preventScroll: PropTypes.Requireable<boolean>;
         yearAndMonthOpts: PropTypes.Requireable<object>;
+        onClickOutSide: PropTypes.Requireable<(...args: any[]) => any>;
     };
     static defaultProps: {
         onChangeWithDateFirst: boolean;
@@ -155,12 +167,14 @@ export default class DatePicker extends BaseComponent<DatePickerProps, DatePicke
         syncSwitchMonth: boolean;
         rangeSeparator: " ~ ";
         insetInput: boolean;
+        onClickOutSide: (...args: any[]) => void;
     };
     triggerElRef: React.MutableRefObject<HTMLElement>;
     panelRef: React.RefObject<HTMLDivElement>;
     monthGrid: React.RefObject<MonthsGrid>;
-    rangeInputStartRef: React.RefObject<HTMLElement>;
-    rangeInputEndRef: React.RefObject<HTMLElement>;
+    inputRef: DateInputProps['inputRef'];
+    rangeInputStartRef: DateInputProps['rangeInputStartRef'];
+    rangeInputEndRef: DateInputProps['rangeInputEndRef'];
     focusRecordsRef: React.RefObject<{
         rangeStart: boolean;
         rangeEnd: boolean;
@@ -175,6 +189,20 @@ export default class DatePicker extends BaseComponent<DatePickerProps, DatePicke
     componentDidUpdate(prevProps: DatePickerProps): void;
     componentDidMount(): void;
     componentWillUnmount(): void;
+    open(): void;
+    close(): void;
+    /**
+     *
+     * When selecting a range, the default focus is on the start input box, passing in `rangeEnd` can focus on the end input box
+     *
+     * When `insetInput` is `true`, due to trigger disabled, the cursor will focus on the input box of the popup layer panel
+     *
+     * 范围选择时，默认聚焦在开始输入框，传入 `rangeEnd` 可以聚焦在结束输入框
+     *
+     * `insetInput` 打开时，由于 trigger 禁用，会把焦点放在弹出面板的输入框上
+     */
+    focus(focusType?: Exclude<RangeType, false>): void;
+    blur(): void;
     setTriggerRef: (node: HTMLDivElement) => HTMLDivElement;
     handleSelectedChange: MonthsGridProps['onChange'];
     handleYMSelectedChange: YearAndMonthProps['onSelect'];
@@ -199,7 +227,7 @@ export default class DatePicker extends BaseComponent<DatePickerProps, DatePicke
     handleInsetDateFocus: (e: React.FocusEvent, rangeType: 'rangeStart' | 'rangeEnd') => void;
     handleInsetTimeFocus: () => void;
     handlePanelVisibleChange: (visible: boolean) => void;
-    renderInner(extraProps?: Partial<DatePickerProps>): JSX.Element;
+    renderInner(): JSX.Element;
     handleConfirm: (e: React.MouseEvent) => void;
     handleCancel: (e: React.MouseEvent) => void;
     renderFooter: (locale: Locale['DatePicker'], localeCode: string) => JSX.Element;

package/lib/cjs/datePicker/datePicker.js

@@ -173,7 +173,8 @@ class DatePicker extends _baseComponent.default {
         density,
         topSlot,
         bottomSlot,
-        presetPosition
+        presetPosition,
+        type
       } = this.props;
       const wrapCls = (0, _classnames.default)(_constants.cssClasses.PREFIX, {
         [_constants.cssClasses.PANEL_YAM]: this.adapter.typeIsYearOrMonth(),
@@ -182,11 +183,12 @@ class DatePicker extends _baseComponent.default {
       return /*#__PURE__*/_react.default.createElement("div", {
         ref: this.panelRef,
         className: wrapCls,
-        style: dropdownStyle
+        style: dropdownStyle,
+        "x-type": type
       }, topSlot && /*#__PURE__*/_react.default.createElement("div", {
         className: `${_constants.cssClasses.PREFIX}-topSlot`,
         "x-semi-prop": "topSlot"
-      }, topSlot), presetPosition === "top" && this.renderQuickControls(), this.adapter.typeIsYearOrMonth() ? this.renderYearMonthPanel(locale, localeCode) : this.renderMonthGrid(locale, localeCode, dateFnsLocale), presetPosition === "bottom" && this.renderQuickControls(), bottomSlot && /*#__PURE__*/_react.default.createElement("div", {
+      }, topSlot), presetPosition === "top" && type !== 'monthRange' && this.renderQuickControls(), this.adapter.typeIsYearOrMonth() ? this.renderYearMonthPanel(locale, localeCode) : this.renderMonthGrid(locale, localeCode, dateFnsLocale), presetPosition === "bottom" && type !== 'monthRange' && this.renderQuickControls(), bottomSlot && /*#__PURE__*/_react.default.createElement("div", {
         className: `${_constants.cssClasses.PREFIX}-bottomSlot`,
         "x-semi-prop": "bottomSlot"
       }, bottomSlot), this.renderFooter(locale, localeCode));
@@ -196,15 +198,31 @@ class DatePicker extends _baseComponent.default {
       const {
         density,
         presetPosition,
-        yearAndMonthOpts
+        yearAndMonthOpts,
+        type
       } = this.props;
       const date = this.state.value[0];
-      let year = 0;
-      let month = 0;
+      const year = {
+        left: 0,
+        right: 0
+      };
+      const month = {
+        left: 0,
+        right: 0
+      };
 
       if ((0, _isDate2.default)(date)) {
-        year = date.getFullYear();
-        month = date.getMonth() + 1;
+        year.left = date.getFullYear();
+        month.left = date.getMonth() + 1;
+      }
+
+      if (type === 'monthRange') {
+        const dateRight = this.state.value[1];
+
+        if ((0, _isDate2.default)(dateRight)) {
+          year.right = dateRight.getFullYear();
+          month.right = dateRight.getMonth() + 1;
+        }
       }
 
       return /*#__PURE__*/_react.default.createElement(_yearAndMonth.default, {
@@ -220,6 +238,7 @@ class DatePicker extends _baseComponent.default {
         presetPosition: presetPosition,
         renderQuickControls: this.renderQuickControls(),
         renderDateInput: this.renderDateInput(),
+        type: type,
         yearAndMonthOpts: yearAndMonthOpts
       });
     };
@@ -279,6 +298,7 @@ class DatePicker extends _baseComponent.default {
     this.triggerElRef = /*#__PURE__*/_react.default.createRef();
     this.panelRef = /*#__PURE__*/_react.default.createRef();
     this.monthGrid = /*#__PURE__*/_react.default.createRef();
+    this.inputRef = /*#__PURE__*/_react.default.createRef();
     this.rangeInputStartRef = /*#__PURE__*/_react.default.createRef();
     this.rangeInputEndRef = /*#__PURE__*/_react.default.createRef();
     this.focusRecordsRef = /*#__PURE__*/_react.default.createRef(); // @ts-ignore ignore readonly
@@ -294,10 +314,10 @@ class DatePicker extends _baseComponent.default {
     var _this2 = this;
 
     return Object.assign(Object.assign({}, super.adapter), {
-      togglePanel: panelShow => {
+      togglePanel: (panelShow, cb) => {
         this.setState({
           panelShow
-        });
+        }, cb);
 
         if (!panelShow) {
           this.focusRecordsRef.current.rangeEnd = false;
@@ -311,17 +331,20 @@ class DatePicker extends _baseComponent.default {
         }
 
         this.clickOutSideHandler = e => {
-          if (this.adapter.needConfirm()) {
-            return;
-          }
-
           const triggerEl = this.triggerElRef && this.triggerElRef.current;
           const panelEl = this.panelRef && this.panelRef.current;
           const isInTrigger = triggerEl && triggerEl.contains(e.target);
           const isInPanel = panelEl && panelEl.contains(e.target);
+          const clickOutSide = !isInTrigger && !isInPanel && this._mounted;
 
-          if (!isInTrigger && !isInPanel && this._mounted) {
-            this.foundation.closePanel(e);
+          if (this.adapter.needConfirm()) {
+            clickOutSide && this.props.onClickOutSide();
+            return;
+          } else {
+            if (clickOutSide) {
+              this.props.onClickOutSide();
+              this.foundation.closePanel(e);
+            }
           }
         };
 
@@ -388,7 +411,7 @@ class DatePicker extends _baseComponent.default {
         }
       },
       needConfirm: () => ['dateTime', 'dateTimeRange'].includes(this.props.type) && this.props.needConfirm === true,
-      typeIsYearOrMonth: () => ['month', 'year'].includes(this.props.type),
+      typeIsYearOrMonth: () => ['month', 'year', 'monthRange'].includes(this.props.type),
       setRangeInputFocus: rangeInputFocus => {
         const {
           preventScroll
@@ -486,6 +509,34 @@ class DatePicker extends _baseComponent.default {
             break;
         }
       },
+      setInputFocus: () => {
+        const {
+          preventScroll
+        } = this.props;
+        const inputNode = (0, _get2.default)(this, 'inputRef.current');
+        inputNode && inputNode.focus({
+          preventScroll
+        });
+      },
+      setInputBlur: () => {
+        const inputNode = (0, _get2.default)(this, 'inputRef.current');
+        inputNode && inputNode.blur();
+      },
+      setRangeInputBlur: () => {
+        const {
+          rangeInputFocus
+        } = this.state;
+
+        if (rangeInputFocus === 'rangeStart') {
+          const inputStartNode = (0, _get2.default)(this, 'rangeInputStartRef.current');
+          inputStartNode && inputStartNode.blur();
+        } else if (rangeInputFocus === 'rangeEnd') {
+          const inputEndNode = (0, _get2.default)(this, 'rangeInputEndRef.current');
+          inputEndNode && inputEndNode.blur();
+        }
+
+        this.adapter.setRangeInputFocus(false);
+      },
       setTriggerDisabled: disabled => {
         this.setState({
           triggerDisabled: disabled
@@ -528,6 +579,33 @@ class DatePicker extends _baseComponent.default {
     super.componentWillUnmount();
   }
 
+  open() {
+    this.foundation.open();
+  }
+
+  close() {
+    this.foundation.close();
+  }
+  /**
+   *
+   * When selecting a range, the default focus is on the start input box, passing in `rangeEnd` can focus on the end input box
+   *
+   * When `insetInput` is `true`, due to trigger disabled, the cursor will focus on the input box of the popup layer panel
+   *
+   * 范围选择时，默认聚焦在开始输入框，传入 `rangeEnd` 可以聚焦在结束输入框
+   *
+   * `insetInput` 打开时，由于 trigger 禁用，会把焦点放在弹出面板的输入框上
+   */
+
+
+  focus(focusType) {
+    this.foundation.focus(focusType);
+  }
+
+  blur() {
+    this.foundation.blur();
+  }
+
   renderMonthGrid(locale, localeCode, dateFnsLocale) {
     const {
       type,
@@ -649,7 +727,7 @@ class DatePicker extends _baseComponent.default {
     })) : null;
   }
 
-  renderInner(extraProps) {
+  renderInner() {
     const {
       clearIcon,
       type,
@@ -691,7 +769,7 @@ class DatePicker extends _baseComponent.default {
     const phText = placeholder || locale.placeholder[type]; // i18n
     // These values should be passed to triggerRender, do not delete any key if it is not necessary
 
-    const props = Object.assign(Object.assign({}, extraProps), {
+    const props = {
       placeholder: phText,
       clearIcon,
       disabled: inputDisabled,
@@ -725,8 +803,9 @@ class DatePicker extends _baseComponent.default {
       onRangeClear: this.handleRangeInputClear,
       onRangeEndTabPress: this.handleRangeEndTabPress,
       rangeInputStartRef: insetInput ? null : this.rangeInputStartRef,
-      rangeInputEndRef: insetInput ? null : this.rangeInputEndRef
-    });
+      rangeInputEndRef: insetInput ? null : this.rangeInputEndRef,
+      inputRef: this.inputRef
+    };
     return /*#__PURE__*/_react.default.createElement("div", {
       // tooltip will mount a11y props to children
       // eslint-disable-next-line jsx-a11y/role-has-required-aria-props
@@ -843,7 +922,8 @@ DatePicker.propTypes = {
   onPanelChange: _propTypes.default.func,
   rangeSeparator: _propTypes.default.string,
   preventScroll: _propTypes.default.bool,
-  yearAndMonthOpts: _propTypes.default.object
+  yearAndMonthOpts: _propTypes.default.object,
+  onClickOutSide: _propTypes.default.func
 };
 DatePicker.defaultProps = {
   onChangeWithDateFirst: true,
@@ -880,5 +960,6 @@ DatePicker.defaultProps = {
   autoSwitchDate: true,
   syncSwitchMonth: false,
   rangeSeparator: _constants.strings.DEFAULT_SEPARATOR_RANGE,
-  insetInput: false
+  insetInput: false,
+  onClickOutSide: _noop2.default
 };

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

@@ -8,5 +8,6 @@ export type { MonthsGridProps } from './monthsGrid';
 export type { QuickControlProps } from './quickControl';
 export type { YearAndMonthProps } from './yearAndMonth';
 export type { InsetInputProps } from '@douyinfe/semi-foundation/lib/cjs/datePicker/inputFoundation';
+export type { DatePicker as BaseDatePicker };
 declare const _default: React.ForwardRefExoticComponent<DatePickerProps & React.RefAttributes<DatePicker>>;
 export default _default;

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

@@ -19,7 +19,7 @@ export interface MonthsGridProps extends MonthsGridFoundationProps, BaseProps {
 export declare type MonthsGridState = MonthsGridFoundationState;
 export default class MonthsGrid extends BaseComponent<MonthsGridProps, MonthsGridState> {
     static propTypes: {
-        type: PropTypes.Requireable<"dateTime" | "date" | "month" | "dateRange" | "year" | "dateTimeRange">;
+        type: PropTypes.Requireable<"dateTime" | "date" | "month" | "dateRange" | "year" | "monthRange" | "dateTimeRange">;
         defaultValue: PropTypes.Requireable<any[]>;
         defaultPickerValue: PropTypes.Requireable<NonNullable<string | number | object>>;
         multiple: PropTypes.Requireable<boolean>;

package/lib/cjs/datePicker/monthsGrid.js

@@ -508,9 +508,17 @@ class MonthsGrid extends _baseComponent.default {
       ref: current => this.cacheRefCurrent(`yam-${panelType}`, current),
       locale: locale,
       localeCode: localeCode,
-      currentYear: y,
-      currentMonth: m,
-      onSelect: item => this.foundation.toYearMonth(panelType, new Date(item.currentYear, item.currentMonth - 1)),
+      // currentYear={y}
+      // currentMonth={m}
+      currentYear: {
+        left: y,
+        right: 0
+      },
+      currentMonth: {
+        left: m,
+        right: 0
+      },
+      onSelect: item => this.foundation.toYearMonth(panelType, new Date(item.currentYear.left, item.currentMonth.left - 1)),
       onBackToMain: () => {
         this.foundation.showDatePanel(panelType);
         const wrapCurrent = this.adapter.getCache(`wrap-${panelType}`);

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

@@ -4,14 +4,15 @@ import YearAndMonthFoundation, { MonthScrollItem, YearAndMonthAdapter, YearAndMo
 import BaseComponent, { BaseProps } from '../_base/baseComponent';
 import ScrollItem from '../scrollList/scrollItem';
 import { Locale } from '../locale/interface';
+import { PanelType } from '@douyinfe/semi-foundation/lib/cjs/datePicker/monthsGridFoundation';
 export interface YearAndMonthProps extends YearAndMonthFoundationProps, BaseProps {
     locale?: Locale['DatePicker'];
 }
 export declare type YearAndMonthState = YearAndMonthFoundationState;
 declare class YearAndMonth extends BaseComponent<YearAndMonthProps, YearAndMonthState> {
     static propTypes: {
-        currentYear: PropTypes.Requireable<number>;
-        currentMonth: PropTypes.Requireable<number>;
+        currentYear: PropTypes.Requireable<object>;
+        currentMonth: PropTypes.Requireable<object>;
         onSelect: PropTypes.Requireable<(...args: any[]) => any>;
         locale: PropTypes.Requireable<object>;
         localeCode: PropTypes.Requireable<string>;
@@ -23,6 +24,7 @@ declare class YearAndMonth extends BaseComponent<YearAndMonthProps, YearAndMonth
         presetPosition: PropTypes.Requireable<"left" | "top" | "right" | "bottom">;
         renderQuickControls: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         renderDateInput: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        type: PropTypes.Requireable<"dateTime" | "date" | "month" | "dateRange" | "year" | "monthRange" | "dateTimeRange">;
     };
     static defaultProps: {
         disabledDate: {
@@ -33,6 +35,7 @@ declare class YearAndMonth extends BaseComponent<YearAndMonthProps, YearAndMonth
         yearCycled: boolean;
         noBackBtn: boolean;
         onSelect: (...args: any[]) => void;
+        type: string;
     };
     foundation: YearAndMonthFoundation;
     yearRef: React.RefObject<ScrollItem<YearScrollItem>>;
@@ -40,12 +43,13 @@ declare class YearAndMonth extends BaseComponent<YearAndMonthProps, YearAndMonth
     constructor(props: YearAndMonthProps);
     get adapter(): YearAndMonthAdapter;
     static getDerivedStateFromProps(props: YearAndMonthProps, state: YearAndMonthState): Partial<YearAndMonthFoundationState>;
-    renderColYear(): JSX.Element;
-    selectYear: (item: YearScrollItem) => void;
-    selectMonth: (item: MonthScrollItem) => void;
+    renderColYear(panelType: PanelType): JSX.Element;
+    selectYear: (item: YearScrollItem, panelType?: PanelType) => void;
+    selectMonth: (item: MonthScrollItem, panelType?: PanelType) => void;
     reselect: () => void;
-    renderColMonth(): JSX.Element;
+    renderColMonth(panelType: PanelType): JSX.Element;
     backToMain: React.MouseEventHandler<HTMLButtonElement>;
+    renderPanel(panelType: PanelType): JSX.Element;
     render(): JSX.Element;
 }
 export default YearAndMonth;