@douyinfe/semi-ui 2.31.4 → 2.32.0

package/lib/cjs/sideSheet/SideSheetContent.d.ts

@@ -1,5 +1,6 @@
 import React, { CSSProperties } from 'react';
 import PropTypes from 'prop-types';
+import { SideSheetProps } from '@douyinfe/semi-foundation/lib/cjs/sideSheet/sideSheetFoundation';
 export interface SideSheetContentProps {
     onClose?: (e: React.MouseEvent) => void;
     mask?: boolean;
@@ -9,9 +10,10 @@ export interface SideSheetContentProps {
     title?: React.ReactNode;
     closable?: boolean;
     headerStyle?: CSSProperties;
-    width: CSSProperties['width'];
+    width?: CSSProperties['width'];
     height: CSSProperties['height'];
     style: CSSProperties;
+    size: SideSheetProps['size'];
     bodyStyle?: CSSProperties;
     className: string;
     dialogClassName?: string;

package/lib/cjs/sideSheet/SideSheetContent.js

@@ -143,7 +143,7 @@ class SideSheetContent extends _react.default.PureComponent {
       key: "dialog-element",
       role: "dialog",
       tabIndex: -1,
-      className: (0, _classnames.default)(`${prefixCls}-inner`, `${prefixCls}-inner-wrap`, (_a = this.props.dialogClassName) !== null && _a !== void 0 ? _a : ""),
+      className: (0, _classnames.default)(`${prefixCls}-inner`, `${prefixCls}-inner-wrap`, (_a = this.props.dialogClassName) !== null && _a !== void 0 ? _a : "", `${prefixCls}-size-${props.size}`),
       // onMouseDown={this.onDialogMouseDown}
       style: Object.assign(Object.assign({}, props.style), style)
     }, this.props.wrapperExtraProps), /*#__PURE__*/_react.default.createElement("div", {
@@ -167,7 +167,8 @@ class SideSheetContent extends _react.default.PureComponent {
       width
     } = this.props;
     const wrapperCls = (0, _classnames.default)(className, {
-      [`${prefixCls}-fixed`]: !mask
+      [`${prefixCls}-fixed`]: !mask,
+      [`${prefixCls}-size-${this.props.size}`]: !mask
     });
     const wrapperStyle = {};
 

package/lib/cjs/sideSheet/index.js

@@ -182,7 +182,6 @@ class SideSheet extends _baseComponent.default {
     } = this.context;
     const isVertical = placement === 'left' || placement === 'right';
     const isHorizontal = placement === 'top' || placement === 'bottom';
-    const sheetWidth = isVertical ? width ? width : defaultWidthList[size] : '100%';
     const sheetHeight = isHorizontal ? height ? height : defaultHeight : '100%';
     const classList = (0, _classnames.default)(prefixCls, className, {
       [`${prefixCls}-${placement}`]: placement,
@@ -191,11 +190,15 @@ class SideSheet extends _baseComponent.default {
       [`${prefixCls}-rtl`]: direction === 'rtl',
       [`${prefixCls}-hidden`]: keepDOM && this.state.displayNone
     });
-    const contentProps = Object.assign(Object.assign({}, props), {
+    const contentProps = Object.assign(Object.assign(Object.assign({}, isVertical ? width ? {
+      width
+    } : {} : {
+      width: "100%"
+    }), props), {
       visible,
       motion: false,
+      size,
       className: classList,
-      width: sheetWidth,
       height: sheetHeight,
       onClose: this.handleCancel
     });

package/lib/cjs/space/index.js

@@ -23,6 +23,8 @@ require("@douyinfe/semi-foundation/lib/cjs/space/space.css");
 
 var _utils = require("./utils");
 
+var _getDataAttr = _interopRequireDefault(require("@douyinfe/semi-foundation/lib/cjs/utils/getDataAttr"));
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -80,11 +82,12 @@ class Space extends _react.PureComponent {
       [`${prefixCls}-loose-vertical`]: spacingVerticalType === _constants.strings.SPACING_LOOSE
     });
     const childrenNodes = (0, _utils.flatten)(children);
-    return /*#__PURE__*/_react.default.createElement("div", {
+    const dataAttributes = (0, _getDataAttr.default)(this.props);
+    return /*#__PURE__*/_react.default.createElement("div", Object.assign({}, dataAttributes, {
       className: classNames,
       style: realStyle,
       "x-semi-prop": "children"
-    }, childrenNodes);
+    }), childrenNodes);
   }
 
 }

package/lib/cjs/table/Table.js

@@ -1174,13 +1174,13 @@ class Table extends _baseComponent.default {
     if (props.columns && props.columns !== state.cachedColumns) {
       const newFlattenColumns = (0, _utils.flattenColumns)(props.columns);
       willUpdateStates.flattenColumns = newFlattenColumns;
-      willUpdateStates.queries = (0, _utils.mergeColumns)(state.queries, newFlattenColumns, null, false);
+      willUpdateStates.queries = (0, _utils2.mergeColumns)(state.queries, newFlattenColumns, null, false);
       willUpdateStates.cachedColumns = props.columns;
       willUpdateStates.cachedChildren = null;
     } else if (props.children && props.children !== state.cachedChildren) {
       const newNestedColumns = (0, _getColumns.default)(props.children);
       const newFlattenColumns = (0, _utils.flattenColumns)(newNestedColumns);
-      const columns = (0, _utils.mergeColumns)(state.queries, newFlattenColumns, null, false);
+      const columns = (0, _utils2.mergeColumns)(state.queries, newFlattenColumns, null, false);
       willUpdateStates.flattenColumns = newFlattenColumns;
       willUpdateStates.queries = [...columns];
       willUpdateStates.cachedColumns = [...newNestedColumns];

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

@@ -180,6 +180,7 @@ declare class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState>
         showRestTagsPopover: PropTypes.Requireable<boolean>;
         restTagsPopoverProps: PropTypes.Requireable<object>;
         preventScroll: PropTypes.Requireable<boolean>;
+        clickTriggerToHide: PropTypes.Requireable<boolean>;
     };
     static defaultProps: Partial<TreeSelectProps>;
     inputRef: React.RefObject<typeof Input>;

package/lib/cjs/treeSelect/index.js

@@ -485,7 +485,9 @@ class TreeSelect extends _baseComponent.default {
         onClear: this.handleClear,
         componentName: 'TreeSelect',
         triggerRender: triggerRender,
-        componentProps: Object.assign({}, this.props)
+        componentProps: Object.assign({}, this.props),
+        onSearch: this.search,
+        onRemove: this.removeTag
       }) : [/*#__PURE__*/_react.default.createElement(_react.Fragment, {
         key: 'prefix'
       }, prefix || insetLabel ? this.renderPrefix() : null), /*#__PURE__*/_react.default.createElement(_react.Fragment, {
@@ -1420,7 +1422,8 @@ TreeSelect.propTypes = {
   'aria-label': _propTypes.default.string,
   showRestTagsPopover: _propTypes.default.bool,
   restTagsPopoverProps: _propTypes.default.object,
-  preventScroll: _propTypes.default.bool
+  preventScroll: _propTypes.default.bool,
+  clickTriggerToHide: _propTypes.default.bool
 };
 TreeSelect.defaultProps = {
   searchPosition: _constants.strings.SEARCH_POSITION_DROPDOWN,
@@ -1450,7 +1453,8 @@ TreeSelect.defaultProps = {
   checkRelation: 'related',
   'aria-label': 'TreeSelect',
   showRestTagsPopover: false,
-  restTagsPopoverProps: {}
+  restTagsPopoverProps: {},
+  clickTriggerToHide: true
 };
 var _default = TreeSelect;
 exports.default = _default;

package/lib/es/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/es/cascader/index.js

@@ -41,6 +41,13 @@ class Cascader extends BaseComponent {
       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,
@@ -330,7 +337,9 @@ class Cascader extends BaseComponent {
         disabled: disabled,
         triggerRender: triggerRender,
         componentName: 'Cascader',
-        componentProps: Object.assign({}, this.props)
+        componentProps: Object.assign({}, this.props),
+        onSearch: this.handleInputChange,
+        onRemove: this.handleRemoveByKey
       });
     };
 

package/lib/es/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/es/datePicker/dateInput.js

@@ -264,6 +264,14 @@ export default class DateInput extends BaseComponent {
     })), 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,
@@ -277,9 +285,6 @@ export default class DateInput extends BaseComponent {
       density,
       insetInput
     } = this.props;
-
-    const _isRangeType = type.includes('Range');
-
     const newInsetInputValue = this.foundation.getInsetInputValue({
       value,
       insetInputValue
@@ -316,7 +321,7 @@ export default class DateInput extends BaseComponent {
       valuePath: 'monthLeft.timeInput',
       onChange: this.handleInsetInputChange,
       onFocus: handleInsetTimeFocus
-    }), _isRangeType && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    }), this.isRenderMultipleInputs() && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
       className: separatorCls
     }, density === 'compact' ? null : '-'), /*#__PURE__*/React.createElement(InsetDateInput, {
       forwardRef: rangeInputEndRef,
@@ -361,6 +366,7 @@ export default class DateInput extends BaseComponent {
       prefix,
       autofocus,
       size,
+      inputRef,
       // range input support props, no need passing to not range type
       rangeInputStartRef,
       rangeInputEndRef,
@@ -373,7 +379,7 @@ export default class DateInput extends BaseComponent {
       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.createElement(IconCalendar, {
       "aria-hidden": true
@@ -391,22 +397,23 @@ export default class DateInput extends BaseComponent {
     }
 
     const inputCls = cls({
-      [`${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.createElement(Input, Object.assign({}, rest, {
+    return this.isRenderMultipleInputs() ? this.renderRangeInput(rangeProps) : /*#__PURE__*/React.createElement(Input, 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/es/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,7 +57,7 @@ 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">;
+        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">;
@@ -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/es/datePicker/datePicker.js

@@ -143,7 +143,8 @@ export default class DatePicker extends BaseComponent {
         density,
         topSlot,
         bottomSlot,
-        presetPosition
+        presetPosition,
+        type
       } = this.props;
       const wrapCls = classnames(cssClasses.PREFIX, {
         [cssClasses.PANEL_YAM]: this.adapter.typeIsYearOrMonth(),
@@ -152,11 +153,12 @@ export default class DatePicker extends BaseComponent {
       return /*#__PURE__*/React.createElement("div", {
         ref: this.panelRef,
         className: wrapCls,
-        style: dropdownStyle
+        style: dropdownStyle,
+        "x-type": type
       }, topSlot && /*#__PURE__*/React.createElement("div", {
         className: `${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.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.createElement("div", {
         className: `${cssClasses.PREFIX}-bottomSlot`,
         "x-semi-prop": "bottomSlot"
       }, bottomSlot), this.renderFooter(locale, localeCode));
@@ -166,15 +168,31 @@ export default class DatePicker extends BaseComponent {
       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 (_isDate(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 (_isDate(dateRight)) {
+          year.right = dateRight.getFullYear();
+          month.right = dateRight.getMonth() + 1;
+        }
       }
 
       return /*#__PURE__*/React.createElement(YearAndMonth, {
@@ -190,6 +208,7 @@ export default class DatePicker extends BaseComponent {
         presetPosition: presetPosition,
         renderQuickControls: this.renderQuickControls(),
         renderDateInput: this.renderDateInput(),
+        type: type,
         yearAndMonthOpts: yearAndMonthOpts
       });
     };
@@ -249,6 +268,7 @@ export default class DatePicker extends BaseComponent {
     this.triggerElRef = /*#__PURE__*/React.createRef();
     this.panelRef = /*#__PURE__*/React.createRef();
     this.monthGrid = /*#__PURE__*/React.createRef();
+    this.inputRef = /*#__PURE__*/React.createRef();
     this.rangeInputStartRef = /*#__PURE__*/React.createRef();
     this.rangeInputEndRef = /*#__PURE__*/React.createRef();
     this.focusRecordsRef = /*#__PURE__*/React.createRef(); // @ts-ignore ignore readonly
@@ -264,10 +284,10 @@ export default class DatePicker extends BaseComponent {
     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;
@@ -281,17 +301,20 @@ export default class DatePicker extends BaseComponent {
         }
 
         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);
+            }
           }
         };
 
@@ -358,7 +381,7 @@ export default class DatePicker extends BaseComponent {
         }
       },
       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
@@ -460,6 +483,39 @@ export default class DatePicker extends BaseComponent {
             break;
         }
       },
+      setInputFocus: () => {
+        const {
+          preventScroll
+        } = this.props;
+
+        const inputNode = _get(this, 'inputRef.current');
+
+        inputNode && inputNode.focus({
+          preventScroll
+        });
+      },
+      setInputBlur: () => {
+        const inputNode = _get(this, 'inputRef.current');
+
+        inputNode && inputNode.blur();
+      },
+      setRangeInputBlur: () => {
+        const {
+          rangeInputFocus
+        } = this.state;
+
+        if (rangeInputFocus === 'rangeStart') {
+          const inputStartNode = _get(this, 'rangeInputStartRef.current');
+
+          inputStartNode && inputStartNode.blur();
+        } else if (rangeInputFocus === 'rangeEnd') {
+          const inputEndNode = _get(this, 'rangeInputEndRef.current');
+
+          inputEndNode && inputEndNode.blur();
+        }
+
+        this.adapter.setRangeInputFocus(false);
+      },
       setTriggerDisabled: disabled => {
         this.setState({
           triggerDisabled: disabled
@@ -502,6 +558,33 @@ export default class DatePicker extends BaseComponent {
     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,
@@ -623,7 +706,7 @@ export default class DatePicker extends BaseComponent {
     })) : null;
   }
 
-  renderInner(extraProps) {
+  renderInner() {
     const {
       clearIcon,
       type,
@@ -665,7 +748,7 @@ export default class DatePicker extends BaseComponent {
     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,
@@ -699,8 +782,9 @@ export default class DatePicker extends BaseComponent {
       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.createElement("div", {
       // tooltip will mount a11y props to children
       // eslint-disable-next-line jsx-a11y/role-has-required-aria-props
@@ -815,7 +899,8 @@ DatePicker.propTypes = {
   onPanelChange: PropTypes.func,
   rangeSeparator: PropTypes.string,
   preventScroll: PropTypes.bool,
-  yearAndMonthOpts: PropTypes.object
+  yearAndMonthOpts: PropTypes.object,
+  onClickOutSide: PropTypes.func
 };
 DatePicker.defaultProps = {
   onChangeWithDateFirst: true,
@@ -852,5 +937,6 @@ DatePicker.defaultProps = {
   autoSwitchDate: true,
   syncSwitchMonth: false,
   rangeSeparator: strings.DEFAULT_SEPARATOR_RANGE,
-  insetInput: false
+  insetInput: false,
+  onClickOutSide: _noop
 };

package/lib/es/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/es/datePicker/inputFoundation';
+export type { DatePicker as BaseDatePicker };
 declare const _default: React.ForwardRefExoticComponent<DatePickerProps & React.RefAttributes<DatePicker>>;
 export default _default;

package/lib/es/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/es/datePicker/monthsGrid.js

@@ -482,9 +482,17 @@ export default class MonthsGrid extends BaseComponent {
       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}`);