@douyinfe/semi-ui 2.1.6-alpha.0 → 2.2.1

package/lib/cjs/upload/index.js

@@ -97,6 +97,23 @@ class Upload extends _baseComponent.default {
     this.remove = fileItem => {
       this.foundation.handleRemove(fileItem);
     };
+    /**
+     * ref method
+     * insert files at index
+     * @param files Array<CustomFile>
+     * @param index number
+     * @returns
+     */
+
+
+    this.insert = (files, index) => {
+      return this.foundation.insertFileToList(files, index);
+    };
+    /**
+     * ref method
+     * manual upload by user
+     */
+
 
     this.upload = () => {
       const {
@@ -112,14 +129,18 @@ class Upload extends _baseComponent.default {
         name,
         status,
         validateMessage,
-        _sizeInvalid
+        _sizeInvalid,
+        uid
       } = file;
       const {
         previewFile,
         listType,
         itemStyle,
         showRetry,
+        showPicInfo,
+        renderPicInfo,
         renderFileItem,
+        renderThumbnail,
         disabled,
         onPreviewClick,
         showReplace
@@ -140,10 +161,14 @@ class Upload extends _baseComponent.default {
         listType,
         onRemove,
         onRetry,
-        key: (0, _concat.default)(_context = "".concat(name)).call(_context, index),
+        index,
+        key: uid || (0, _concat.default)(_context = "".concat(name)).call(_context, index),
         showRetry: typeof file.showRetry !== 'undefined' ? file.showRetry : showRetry,
         style: itemStyle,
         disabled,
+        showPicInfo,
+        renderPicInfo,
+        renderThumbnail,
         showReplace: typeof file.showReplace !== 'undefined' ? file.showReplace : showReplace,
         onReplace,
         onPreviewClick: typeof onPreviewClick !== 'undefined' ? () => this.foundation.handlePreviewClick(file) : undefined
@@ -165,28 +190,69 @@ class Upload extends _baseComponent.default {
     };
 
     this.renderFileList = () => {
+      const {
+        listType
+      } = this.props;
+
+      if (listType === _constants.strings.FILE_LIST_PIC) {
+        return this.renderFileListPic();
+      }
+
+      if (listType === _constants.strings.FILE_LIST_DEFAULT) {
+        return this.renderFileListDefault();
+      }
+
+      return null;
+    };
+
+    this.renderFileListPic = () => {
       const {
         showUploadList,
-        listType,
         limit,
         disabled,
-        children
+        children,
+        draggable
       } = this.props;
       const {
-        fileList: stateFileList
+        fileList: stateFileList,
+        dragAreaStatus
       } = this.state;
       const fileList = this.props.fileList || stateFileList;
-      const isPicType = listType === _constants.strings.FILE_LIST_PIC;
-      const showAddTriggerInList = isPicType && (limit ? limit > fileList.length : true);
+      const showAddTriggerInList = limit ? limit > fileList.length : true;
+      const dragAreaBaseCls = "".concat(prefixCls, "-drag-area");
       const uploadAddCls = (0, _classnames.default)("".concat(prefixCls, "-add"), {
-        ["".concat(prefixCls, "-picture-add")]: isPicType,
+        ["".concat(prefixCls, "-picture-add")]: true,
         ["".concat(prefixCls, "-picture-add-disabled")]: disabled
       });
-
-      const addContent = /*#__PURE__*/_react.default.createElement("div", {
+      const fileListCls = (0, _classnames.default)("".concat(prefixCls, "-file-list"), {
+        ["".concat(prefixCls, "-picture-file-list")]: true
+      });
+      const dragAreaCls = (0, _classnames.default)({
+        ["".concat(dragAreaBaseCls, "-legal")]: dragAreaStatus === _constants.strings.DRAG_AREA_LEGAL,
+        ["".concat(dragAreaBaseCls, "-illegal")]: dragAreaStatus === _constants.strings.DRAG_AREA_ILLEGAL
+      });
+      const mainCls = "".concat(prefixCls, "-file-list-main");
+      const addContentProps = {
         className: uploadAddCls,
         onClick: this.onClick
-      }, children);
+      };
+      const containerProps = {
+        className: fileListCls
+      };
+      const draggableProps = {
+        onDrop: this.onDrop,
+        onDragOver: this.onDragOver,
+        onDragLeave: this.onDragLeave,
+        onDragEnter: this.onDragEnter
+      };
+
+      if (draggable) {
+        (0, _assign.default)(addContentProps, draggableProps, {
+          className: (0, _classnames.default)(uploadAddCls, dragAreaCls)
+        });
+      }
+
+      const addContent = /*#__PURE__*/_react.default.createElement("div", (0, _assign.default)({}, addContentProps), children);
 
       if (!showUploadList || !fileList.length) {
         if (showAddTriggerInList) {
@@ -196,18 +262,39 @@ class Upload extends _baseComponent.default {
         return null;
       }
 
-      const fileListCls = (0, _classnames.default)("".concat(prefixCls, "-file-list"), {
-        ["".concat(prefixCls, "-picture-file-list")]: isPicType
-      });
+      return /*#__PURE__*/_react.default.createElement(_localeConsumer.default, {
+        componentName: "Upload"
+      }, locale => /*#__PURE__*/_react.default.createElement("div", (0, _assign.default)({}, containerProps), /*#__PURE__*/_react.default.createElement("div", {
+        className: mainCls
+      }, (0, _map.default)(fileList).call(fileList, (file, index) => this.renderFile(file, index, locale)), showAddTriggerInList ? addContent : null)));
+    };
+
+    this.renderFileListDefault = () => {
+      const {
+        showUploadList,
+        limit,
+        disabled
+      } = this.props;
+      const {
+        fileList: stateFileList
+      } = this.state;
+      const fileList = this.props.fileList || stateFileList;
+      const fileListCls = (0, _classnames.default)("".concat(prefixCls, "-file-list"));
       const titleCls = "".concat(prefixCls, "-file-list-title");
       const mainCls = "".concat(prefixCls, "-file-list-main");
-      const showTitle = limit !== 1 && fileList.length && listType !== _constants.strings.FILE_LIST_PIC;
+      const showTitle = limit !== 1 && fileList.length;
       const showClear = this.props.showClear && !disabled;
+      const containerProps = {
+        className: fileListCls
+      };
+
+      if (!showUploadList || !fileList.length) {
+        return null;
+      }
+
       return /*#__PURE__*/_react.default.createElement(_localeConsumer.default, {
         componentName: "Upload"
-      }, locale => /*#__PURE__*/_react.default.createElement("div", {
-        className: fileListCls
-      }, showTitle ? /*#__PURE__*/_react.default.createElement("div", {
+      }, locale => /*#__PURE__*/_react.default.createElement("div", (0, _assign.default)({}, containerProps), showTitle ? /*#__PURE__*/_react.default.createElement("div", {
         className: titleCls
       }, /*#__PURE__*/_react.default.createElement("span", {
         className: "".concat(titleCls, "-choosen")
@@ -216,7 +303,7 @@ class Upload extends _baseComponent.default {
         className: "".concat(titleCls, "-clear")
       }, locale.clear) : null) : null, /*#__PURE__*/_react.default.createElement("div", {
         className: mainCls
-      }, (0, _map.default)(fileList).call(fileList, (file, index) => this.renderFile(file, index, locale)), showAddTriggerInList ? addContent : null)));
+      }, (0, _map.default)(fileList).call(fileList, (file, index) => this.renderFile(file, index, locale)))));
     };
 
     this.onDrop = e => {
@@ -236,6 +323,28 @@ class Upload extends _baseComponent.default {
       this.foundation.handleDragEnter(e);
     };
 
+    this.renderAddContent = () => {
+      const {
+        draggable,
+        children,
+        listType
+      } = this.props;
+      const uploadAddCls = (0, _classnames.default)("".concat(prefixCls, "-add"));
+
+      if (listType === _constants.strings.FILE_LIST_PIC) {
+        return null;
+      }
+
+      if (draggable) {
+        return this.renderDragArea();
+      }
+
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: uploadAddCls,
+        onClick: this.onClick
+      }, children);
+    };
+
     this.renderDragArea = () => {
       const {
         dragAreaStatus
@@ -422,7 +531,6 @@ class Upload extends _baseComponent.default {
       ["".concat(prefixCls, "-warning")]: validateStatus === 'warning',
       ["".concat(prefixCls, "-success")]: validateStatus === 'success'
     }, className);
-    const uploadAddCls = (0, _classnames.default)("".concat(prefixCls, "-add"));
     const inputCls = (0, _classnames.default)("".concat(prefixCls, "-hidden-input"));
     const inputReplaceCls = (0, _classnames.default)("".concat(prefixCls, "-hidden-input-replace"));
     const promptCls = (0, _classnames.default)("".concat(prefixCls, "-prompt"));
@@ -431,10 +539,6 @@ class Upload extends _baseComponent.default {
       directory: 'directory',
       webkitdirectory: 'webkitdirectory'
     } : {};
-    const addContent = listType !== _constants.strings.FILE_LIST_PIC ? /*#__PURE__*/_react.default.createElement("div", {
-      className: uploadAddCls,
-      onClick: this.onClick
-    }, children) : null;
     return /*#__PURE__*/_react.default.createElement("div", {
       className: uploadCls,
       style: style,
@@ -460,7 +564,7 @@ class Upload extends _baseComponent.default {
       tabIndex: -1,
       className: inputReplaceCls,
       ref: this.replaceInputRef
-    }), draggable ? this.renderDragArea() : addContent, prompt ? /*#__PURE__*/_react.default.createElement("div", {
+    }), this.renderAddContent(), prompt ? /*#__PURE__*/_react.default.createElement("div", {
       className: promptCls
     }, prompt) : null, validateMessage ? /*#__PURE__*/_react.default.createElement("div", {
       className: validateMsgCls
@@ -515,7 +619,10 @@ Upload.propTypes = {
   prompt: _propTypes.default.node,
   promptPosition: _propTypes.default.oneOf(_constants.strings.PROMPT_POSITION),
   renderFileItem: _propTypes.default.func,
+  renderPicInfo: _propTypes.default.func,
+  renderThumbnail: _propTypes.default.func,
   showClear: _propTypes.default.bool,
+  showPicInfo: _propTypes.default.bool,
   showReplace: _propTypes.default.bool,
   showRetry: _propTypes.default.bool,
   showUploadList: _propTypes.default.bool,
@@ -549,6 +656,7 @@ Upload.defaultProps = {
   onSuccess: _noop2.default,
   promptPosition: 'right',
   showClear: true,
+  showPicInfo: false,
   showReplace: false,
   showRetry: true,
   showUploadList: true,

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

@@ -42,12 +42,15 @@ export interface FileItem extends BaseFileItem {
     validateMessage?: ReactNode;
 }
 export interface RenderFileItemProps extends FileItem {
+    index?: number;
     previewFile?: (fileItem: RenderFileItemProps) => ReactNode;
     listType: UploadListType;
     onRemove: (props: RenderFileItemProps, e: MouseEvent) => void;
     onRetry: (props: RenderFileItemProps, e: MouseEvent) => void;
     onReplace: (props: RenderFileItemProps, e: MouseEvent) => void;
     key: string;
+    showPicInfo?: boolean;
+    renderPicInfo?: (renderFileItemProps: RenderFileItemProps) => ReactNode;
     showRetry: boolean;
     showReplace: boolean;
     style?: CSSProperties;

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

@@ -102,7 +102,7 @@ export const getHighLightTextHTML = _ref => {
   const markEle = option.highlightTag || 'mark';
   const highlightClassName = option.highlightClassName || '';
   const highlightStyle = option.highlightStyle || {};
-  return _mapInstanceProperty(chunks).call(chunks, chunk => {
+  return _mapInstanceProperty(chunks).call(chunks, (chunk, index) => {
     const {
       end,
       start,
@@ -113,7 +113,8 @@ export const getHighLightTextHTML = _ref => {
     if (highlight) {
       return /*#__PURE__*/React.createElement(markEle, {
         style: highlightStyle,
-        className: highlightClassName
+        className: highlightClassName,
+        key: text + index
       }, text);
     } else {
       return text;
@@ -146,11 +147,17 @@ export 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/es/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/es/cascader/index.js

@@ -1,3 +1,4 @@
+import _flatten from "lodash/flatten";
 import _noop from "lodash/noop";
 import _isNumber from "lodash/isNumber";
 import _isFunction from "lodash/isFunction";
@@ -20,7 +21,7 @@ import { cssClasses, strings } from '@douyinfe/semi-foundation/lib/es/cascader/c
 import { numbers as popoverNumbers } from '@douyinfe/semi-foundation/lib/es/popover/constants';
 import '@douyinfe/semi-foundation/lib/es/cascader/cascader.css';
 import { IconClear, IconChevronDown } from '@douyinfe/semi-icons';
-import { findKeysForValues, convertDataToEntities } from '@douyinfe/semi-foundation/lib/es/cascader/util';
+import { findKeysForValues, convertDataToEntities, calcMergeType } from '@douyinfe/semi-foundation/lib/es/cascader/util';
 import { calcCheckedKeys, normalizeKeyList, calcDisabledKeys } from '@douyinfe/semi-foundation/lib/es/tree/treeUtil';
 import ConfigContext from '../configProvider/context';
 import BaseComponent from '../_base/baseComponent';
@@ -122,6 +123,7 @@ class Cascader extends BaseComponent {
         dropdownStyle,
         loadData,
         emptyContent,
+        separator,
         topSlot,
         bottomSlot,
         showNext,
@@ -137,6 +139,7 @@ class Cascader extends BaseComponent {
       }, topSlot, /*#__PURE__*/React.createElement(Item, {
         activeKeys: activeKeys,
         selectedKeys: selectedKeys,
+        separator: separator,
         loadedKeys: loadedKeys,
         loadingKeys: loadingKeys,
         onItemClick: this.handleItemClick,
@@ -186,9 +189,9 @@ class Cascader extends BaseComponent {
       } = this.props;
       const {
         checkedKeys,
-        mergedCheckedKeys
+        resolvedCheckedKeys
       } = this.state;
-      const realKeys = autoMergeValue ? mergedCheckedKeys : checkedKeys;
+      const realKeys = this.mergeType === strings.NONE_MERGE_TYPE ? checkedKeys : resolvedCheckedKeys;
       const displayTag = [];
       const hiddenTag = [];
 
@@ -278,20 +281,23 @@ class Cascader extends BaseComponent {
       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 === strings.NONE_MERGE_TYPE) {
+          realValue = checkedKeys;
+        } else {
+          realValue = resolvedCheckedKeys;
+        }
       } else {
         realValue = [...selectedKeys][0];
       }
@@ -471,8 +477,8 @@ class Cascader extends BaseComponent {
       /* Key of half checked node, when multiple */
       halfCheckedKeys: new _Set([]),
 
-      /* Auto merged checkedKeys, when multiple */
-      mergedCheckedKeys: new _Set([]),
+      /* Auto merged checkedKeys or leaf checkedKeys, when multiple */
+      resolvedCheckedKeys: new _Set([]),
 
       /* Keys of loaded item */
       loadedKeys: new _Set(),
@@ -485,6 +491,7 @@ class Cascader extends BaseComponent {
     };
     this.options = {};
     this.isEmpty = false;
+    this.mergeType = calcMergeType(props.autoMergeValue, props.leafOnly);
     this.inputRef = /*#__PURE__*/React.createRef();
     this.triggerRef = /*#__PURE__*/React.createRef();
     this.optionsRef = /*#__PURE__*/React.createRef();
@@ -627,7 +634,9 @@ class Cascader extends BaseComponent {
       multiple,
       value,
       defaultValue,
-      onChangeWithObject
+      onChangeWithObject,
+      leafOnly,
+      autoMergeValue
     } = props;
     const {
       prevProps
@@ -692,24 +701,19 @@ class Cascader extends BaseComponent {
           realKeys = formatKeys;
         }
 
-        let checkedKeys = new _Set([]);
-        let halfCheckedKeys = new _Set([]);
-
-        _forEachInstanceProperty(realKeys).call(realKeys, v => {
-          const calRes = calcCheckedKeys(v, keyEntities);
-          checkedKeys = new _Set([...checkedKeys, ...calRes.checkedKeys]);
-          halfCheckedKeys = new _Set([...halfCheckedKeys, ...calRes.halfCheckedKeys]);
-        }); // disableStrictly
-
+        const calRes = calcCheckedKeys(_flatten(realKeys), keyEntities);
+        const checkedKeys = new _Set(calRes.checkedKeys);
+        const halfCheckedKeys = new _Set(calRes.halfCheckedKeys); // disableStrictly
 
         if (props.disableStrictly) {
           newState.disabledKeys = calcDisabledKeys(keyEntities);
         }
 
+        const isLeafOnlyMerge = calcMergeType(autoMergeValue, leafOnly) === strings.LEAF_ONLY_MERGE_TYPE;
         newState.prevProps = props;
         newState.checkedKeys = checkedKeys;
         newState.halfCheckedKeys = halfCheckedKeys;
-        newState.mergedCheckedKeys = new _Set(normalizeKeyList(checkedKeys, keyEntities));
+        newState.resolvedCheckedKeys = new _Set(normalizeKeyList(checkedKeys, keyEntities, isLeafOnlyMerge));
       }
     }
 
@@ -743,7 +747,6 @@ class Cascader extends BaseComponent {
     const {
       size,
       disabled,
-      autoMergeValue,
       placeholder,
       maxTagCount,
       showRestTagsPopover,
@@ -753,11 +756,11 @@ class Cascader extends BaseComponent {
       inputValue,
       checkedKeys,
       keyEntities,
-      mergedCheckedKeys
+      resolvedCheckedKeys
     } = this.state;
     const tagInputcls = cls("".concat(prefixcls, "-tagInput-wrapper"));
     const tagValue = [];
-    const realKeys = autoMergeValue ? mergedCheckedKeys : checkedKeys;
+    const realKeys = this.mergeType === strings.NONE_MERGE_TYPE ? checkedKeys : resolvedCheckedKeys;
 
     _forEachInstanceProperty(_context3 = [...realKeys]).call(_context3, checkedKey => {
       if (!_isEmpty(keyEntities[checkedKey])) {
@@ -907,14 +910,18 @@ Cascader.propTypes = {
   showRestTagsPopover: PropTypes.bool,
   restTagsPopoverProps: PropTypes.object,
   max: PropTypes.number,
+  separator: PropTypes.string,
   onExceed: PropTypes.func,
   onClear: PropTypes.func,
   loadData: PropTypes.func,
   onLoad: PropTypes.func,
   loadedKeys: PropTypes.array,
-  disableStrictly: PropTypes.bool
+  disableStrictly: PropTypes.bool,
+  leafOnly: PropTypes.bool,
+  enableLeafClick: PropTypes.bool
 };
 Cascader.defaultProps = {
+  leafOnly: false,
   arrowIcon: /*#__PURE__*/React.createElement(IconChevronDown, null),
   stopPropagation: true,
   motion: true,
@@ -931,6 +938,7 @@ Cascader.defaultProps = {
   filterLeafOnly: true,
   showRestTagsPopover: false,
   restTagsPopoverProps: {},
+  separator: ' / ',
   size: 'default',
   treeNodeFilterProp: 'label',
   displayProp: 'label',
@@ -939,6 +947,7 @@ Cascader.defaultProps = {
   onExceed: _noop,
   onClear: _noop,
   onDropdownVisibleChange: _noop,
-  onListScroll: _noop
+  onListScroll: _noop,
+  enableLeafClick: false
 };
 export default Cascader;

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

@@ -117,7 +117,8 @@ export default class Item extends PureComponent {
     this.highlight = searchText => {
       const content = [];
       const {
-        keyword
+        keyword,
+        separator
       } = this.props;
 
       _forEachInstanceProperty(searchText).call(searchText, (item, idx) => {
@@ -141,7 +142,7 @@ export default class Item extends PureComponent {
         }
 
         if (idx !== searchText.length - 1) {
-          content.push(' / ');
+          content.push(separator);
         }
       });
 
@@ -313,6 +314,7 @@ Item.propTypes = {
   checkedKeys: PropTypes.object,
   halfCheckedKeys: PropTypes.object,
   onItemCheckboxClick: PropTypes.func,
+  separator: PropTypes.string,
   keyword: PropTypes.string
 };
 Item.defaultProps = {

package/lib/es/datePicker/datePicker.js

@@ -241,6 +241,10 @@ 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);

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

@@ -124,6 +124,10 @@ export default class MonthsGrid extends BaseComponent {
       });
     };
 
+    this.getYAMOpenType = () => {
+      return this.foundation.getYAMOpenType();
+    };
+
     let nowDate = _Array$isArray(props.defaultPickerValue) ? props.defaultPickerValue[0] : props.defaultPickerValue;
     const validFormat = props.format || getDefaultFormatTokenByType(props.type);
 
@@ -615,9 +619,11 @@ export default class MonthsGrid extends BaseComponent {
       content = 'year month';
     }
 
+    const yearOpenType = this.getYAMOpenType();
     return /*#__PURE__*/React.createElement("div", {
       className: monthGridCls,
       "x-type": type,
+      "x-panel-yearandmonth-open-type": yearOpenType,
       ref: current => this.cacheRefCurrent('monthGrid', current)
     }, content);
   }