@douyinfe/semi-ui 2.22.0-beta.0 → 2.22.0-beta.1

package/lib/es/collapsible/index.js

@@ -1,140 +1,186 @@
-// @ts-ignore  currently no type definition for @douyinfe/semi-animation-react
-import { Transition } from '@douyinfe/semi-animation-react';
-import PropTypes from 'prop-types';
-import cls from 'classnames';
-import React, { useRef, useState, useCallback, useMemo } from 'react';
+import _isEqual from "lodash/isEqual";
+import React from 'react';
+import CollapsibleFoundation from '@douyinfe/semi-foundation/lib/es/collapsible/foundation';
+import BaseComponent from "../_base/baseComponent";
+import PropTypes from "prop-types";
+import cls from "classnames";
 import { cssClasses } from '@douyinfe/semi-foundation/lib/es/collapsible/constants';
-import getMotionObjFromProps from '@douyinfe/semi-foundation/lib/es/utils/getMotionObjFromProps';
-const ease = 'cubicBezier(.25,.1,.25,1)';
-
-const Collapsible = props => {
-  const {
-    motion,
-    children,
-    isOpen,
-    duration,
-    keepDOM,
-    collapseHeight,
-    style,
-    className,
-    reCalcKey,
-    id
-  } = props;
-  const ref = useRef(null);
-  const [maxHeight, setMaxHeight] = useState(0);
-  const [open, setOpen] = useState(props.isOpen);
-  const [isFirst, setIsFirst] = useState(true);
-  const [transitionImmediate, setTransitionImmediate] = useState(open && isFirst);
-  const [left, setLeft] = useState(!props.isOpen);
-
-  if (isOpen !== open) {
-    setOpen(isOpen);
-
-    if (isFirst) {
-      setIsFirst(false);
-      setTransitionImmediate(false);
-    }
-
-    isOpen && setLeft(!isOpen);
-  }
+import '@douyinfe/semi-foundation/lib/es/collapsible/collapsible.css';
 
-  const setHeight = useCallback(node => {
-    const currHeight = node && node.scrollHeight;
+class Collapsible extends BaseComponent {
+  constructor(props) {
+    super(props);
+    this.domRef = /*#__PURE__*/React.createRef();
 
-    if (currHeight && maxHeight !== currHeight) {
-      setMaxHeight(currHeight);
-    } // eslint-disable-next-line react-hooks/exhaustive-deps
+    this.handleResize = entryList => {
+      const entry = entryList[0];
 
-  }, [left, reCalcKey, maxHeight]);
+      if (entry) {
+        const entryInfo = Collapsible.getEntryInfo(entry);
+        this.foundation.updateDOMHeight(entryInfo.height);
+        this.foundation.updateDOMInRenderTree(entryInfo.isShown);
+      }
+    };
 
-  const resetHeight = () => {
-    ref.current.style.maxHeight = 'none';
-  };
+    this.isChildrenInRenderTree = () => {
+      if (this.domRef.current) {
+        return this.domRef.current.offsetHeight > 0;
+      } else {
+        return false;
+      }
+    };
 
-  const formatStyle = _ref => {
-    let {
-      maxHeight: maxHeightInTransitionStyle
-    } = _ref;
-    return {
-      maxHeight: maxHeightInTransitionStyle
+    this.state = {
+      domInRenderTree: false,
+      domHeight: 0,
+      visible: this.props.isOpen,
+      isTransitioning: false
     };
-  };
+    this.foundation = new CollapsibleFoundation(this.adapter);
+  }
+
+  get adapter() {
+    return Object.assign(Object.assign({}, super.adapter), {
+      setDOMInRenderTree: domInRenderTree => {
+        if (this.state.domInRenderTree !== domInRenderTree) {
+          this.setState({
+            domInRenderTree
+          });
+        }
+      },
+      setDOMHeight: domHeight => {
+        if (this.state.domHeight !== domHeight) {
+          this.setState({
+            domHeight
+          });
+        }
+      },
+      setVisible: visible => {
+        if (this.state.visible !== visible) {
+          this.setState({
+            visible
+          });
+        }
+      },
+      setIsTransitioning: isTransitioning => {
+        if (this.state.isTransitioning !== isTransitioning) {
+          this.setState({
+            isTransitioning
+          });
+        }
+      }
+    });
+  }
 
-  const shouldKeepDOM = () => keepDOM || collapseHeight !== 0;
+  componentDidMount() {
+    super.componentDidMount();
+    this.resizeObserver = new ResizeObserver(this.handleResize);
+    this.resizeObserver.observe(this.domRef.current);
+    const domInRenderTree = this.isChildrenInRenderTree();
+    this.foundation.updateDOMInRenderTree(domInRenderTree);
 
-  const defaultMaxHeight = useMemo(() => {
-    return isOpen || !shouldKeepDOM() && !motion ? 'none' : collapseHeight;
-  }, [collapseHeight, motion, isOpen, shouldKeepDOM]);
+    if (domInRenderTree) {
+      this.foundation.updateDOMHeight(this.domRef.current.scrollHeight);
+    }
+  }
 
-  const renderChildren = transitionStyle => {
-    const transition = transitionStyle && typeof transitionStyle === 'object' ? formatStyle(transitionStyle) : {};
-    const wrapperstyle = Object.assign(Object.assign({
-      overflow: 'hidden',
-      maxHeight: defaultMaxHeight
-    }, style), transition);
+  componentDidUpdate(prevProps, prevState, snapshot) {
+    const changedPropKeys = Object.keys(this.props).filter(key => !_isEqual(this.props[key], prevProps[key]));
+    const changedStateKeys = Object.keys(this.state).filter(key => !_isEqual(this.state[key], prevState[key]));
+
+    if (changedPropKeys.includes("reCalcKey")) {
+      this.foundation.updateDOMHeight(this.domRef.current.scrollHeight);
+    }
 
-    if (isFirst) {
-      wrapperstyle.maxHeight = defaultMaxHeight;
+    if (changedStateKeys.includes("domInRenderTree") && this.state.domInRenderTree) {
+      this.foundation.updateDOMHeight(this.domRef.current.scrollHeight);
     }
 
-    const wrapperCls = cls("".concat(cssClasses.PREFIX, "-wrapper"), className);
+    if (changedPropKeys.includes("isOpen")) {
+      if (this.props.isOpen || !this.props.motion) {
+        this.foundation.updateVisible(this.props.isOpen);
+      }
+    }
+
+    if (this.props.motion && prevProps.isOpen !== this.props.isOpen) {
+      this.foundation.updateIsTransitioning(true);
+    }
+  }
+
+  componentWillUnmount() {
+    super.componentWillUnmount();
+    this.resizeObserver.disconnect();
+  }
+
+  render() {
+    const wrapperStyle = Object.assign({
+      overflow: 'hidden',
+      height: this.props.isOpen ? this.state.domHeight : this.props.collapseHeight,
+      opacity: this.props.isOpen || !this.props.fade || this.props.collapseHeight !== 0 ? 1 : 0,
+      transitionDuration: "".concat(this.props.motion && this.state.isTransitioning ? this.props.duration : 0, "ms")
+    }, this.props.style);
+    const wrapperCls = cls("".concat(cssClasses.PREFIX, "-wrapper"), {
+      ["".concat(cssClasses.PREFIX, "-transition")]: this.props.motion && this.state.isTransitioning
+    }, this.props.className);
     return /*#__PURE__*/React.createElement("div", {
-      style: wrapperstyle,
       className: wrapperCls,
-      ref: ref
+      style: wrapperStyle,
+      onTransitionEnd: () => {
+        if (!this.props.isOpen) {
+          this.foundation.updateVisible(false);
+        }
+
+        this.foundation.updateIsTransitioning(false);
+        this.props.onMotionEnd();
+      }
     }, /*#__PURE__*/React.createElement("div", {
-      ref: setHeight,
+      "x-semi-prop": "children",
+      ref: this.domRef,
       style: {
         overflow: 'hidden'
       },
-      id: id,
-      "x-semi-prop": "children"
-    }, children));
-  };
+      id: this.props.id
+    }, (this.props.keepDOM || this.props.collapseHeight !== 0 || this.state.visible || this.props.isOpen) && this.props.children));
+  }
 
-  const didLeave = () => {
-    setLeft(true);
-    !shouldKeepDOM() && setMaxHeight(collapseHeight);
-  };
+}
 
-  const renderContent = () => {
-    if (left && !shouldKeepDOM()) {
-      return null;
-    }
+Collapsible.defaultProps = {
+  isOpen: false,
+  duration: 250,
+  motion: true,
+  keepDOM: false,
+  collapseHeight: 0,
+  fade: false
+};
 
-    const mergedMotion = getMotionObjFromProps({
-      didEnter: resetHeight,
-      didLeave,
-      motion
-    });
-    return /*#__PURE__*/React.createElement(Transition, Object.assign({
-      state: isOpen ? 'enter' : 'leave',
-      immediate: transitionImmediate,
-      from: {
-        maxHeight: 0
-      },
-      enter: {
-        maxHeight: {
-          val: maxHeight,
-          easing: ease,
-          duration
-        }
-      },
-      leave: {
-        maxHeight: {
-          val: collapseHeight,
-          easing: ease,
-          duration
-        }
-      }
-    }, mergedMotion), transitionStyle => renderChildren(motion ? transitionStyle : null));
-  };
+Collapsible.getEntryInfo = entry => {
+  //judge whether parent or self display none
+  let inRenderTree;
+
+  if (entry.borderBoxSize) {
+    inRenderTree = !(entry.borderBoxSize[0].blockSize === 0 && entry.borderBoxSize[0].inlineSize === 0);
+  } else {
+    inRenderTree = !(entry.contentRect.height === 0 && entry.contentRect.width === 0);
+  }
+
+  let height = 0;
+
+  if (entry.borderBoxSize) {
+    height = Math.ceil(entry.borderBoxSize[0].blockSize);
+  } else {
+    const target = entry.target;
+    height = target.clientHeight;
+  }
 
-  return renderContent();
+  return {
+    isShown: inRenderTree,
+    height
+  };
 };
 
-Collapsible.propType = {
-  motion: PropTypes.oneOfType([PropTypes.bool, PropTypes.func, PropTypes.object]),
+Collapsible.propTypes = {
+  motion: PropTypes.bool,
   children: PropTypes.node,
   isOpen: PropTypes.bool,
   duration: PropTypes.number,
@@ -144,11 +190,4 @@ Collapsible.propType = {
   className: PropTypes.string,
   reCalcKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
 };
-Collapsible.defaultProps = {
-  isOpen: false,
-  duration: 250,
-  motion: true,
-  keepDOM: false,
-  collapseHeight: 0
-};
 export default Collapsible;

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

@@ -6,7 +6,7 @@ export interface ConfigProviderProps extends ContextValue {
 export default class ConfigProvider extends React.Component<ConfigProviderProps> {
     static propTypes: {
         locale: PropTypes.Requireable<object>;
-        timeZone: PropTypes.Requireable<string | number>;
+        timeZone: PropTypes.Requireable<NonNullable<string | number>>;
         getPopupContainer: PropTypes.Requireable<(...args: any[]) => any>;
         direction: PropTypes.Requireable<string>;
     };

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

@@ -36,14 +36,14 @@ export default class DateInput extends BaseComponent<DateInputProps, {}> {
         prefix: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         prefixCls: PropTypes.Requireable<string>;
         dateFnsLocale: PropTypes.Validator<object>;
-        placeholder: PropTypes.Requireable<string | any[]>;
-        rangeInputFocus: PropTypes.Requireable<string | boolean>;
+        placeholder: PropTypes.Requireable<NonNullable<string | any[]>>;
+        rangeInputFocus: PropTypes.Requireable<NonNullable<string | boolean>>;
         rangeInputStartRef: PropTypes.Requireable<object>;
         rangeInputEndRef: PropTypes.Requireable<object>;
         rangeSeparator: PropTypes.Requireable<string>;
         insetInput: PropTypes.Requireable<boolean>;
         insetInputValue: PropTypes.Requireable<object>;
-        defaultPickerValue: PropTypes.Requireable<string | number | object>;
+        defaultPickerValue: PropTypes.Requireable<NonNullable<string | number | object>>;
     };
     static defaultProps: {
         showClear: boolean;

package/lib/es/datePicker/datePicker.d.ts

@@ -9,6 +9,7 @@ import { YearAndMonthProps } from './yearAndMonth';
 import '@douyinfe/semi-foundation/lib/es/datePicker/datePicker.css';
 import { Locale } from '../locale/interface';
 import { TimePickerProps } from '../timePicker/TimePicker';
+import { ScrollItemProps } from '../scrollList/scrollItem';
 import { InsetInputChangeProps } from '@douyinfe/semi-foundation/lib/es/datePicker/inputFoundation';
 export interface DatePickerProps extends DatePickerFoundationProps {
     'aria-describedby'?: React.AriaAttributes['aria-describedby'];
@@ -31,6 +32,7 @@ export interface DatePickerProps extends DatePickerFoundationProps {
     onPresetClick?: (item: PresetType, e: React.MouseEvent<HTMLDivElement>) => void;
     locale?: Locale['DatePicker'];
     dateFnsLocale?: Locale['dateFnsLocale'];
+    yearAndMonthOpts?: ScrollItemProps<any>;
 }
 export declare type DatePickerState = DatePickerFoundationState;
 export default class DatePicker extends BaseComponent<DatePickerProps, DatePickerState> {
@@ -44,9 +46,9 @@ export default class DatePicker extends BaseComponent<DatePickerProps, DatePicke
         type: PropTypes.Requireable<"dateTime" | "date" | "month" | "dateRange" | "year" | "dateTimeRange">;
         size: PropTypes.Requireable<"default" | "small" | "large">;
         density: PropTypes.Requireable<"default" | "compact">;
-        defaultValue: PropTypes.Requireable<string | number | object>;
-        value: PropTypes.Requireable<string | number | object>;
-        defaultPickerValue: PropTypes.Requireable<string | number | object>;
+        defaultValue: PropTypes.Requireable<NonNullable<string | number | object>>;
+        value: PropTypes.Requireable<NonNullable<string | number | object>>;
+        defaultPickerValue: PropTypes.Requireable<NonNullable<string | number | object>>;
         disabledTime: PropTypes.Requireable<(...args: any[]) => any>;
         disabledTimePicker: PropTypes.Requireable<boolean>;
         hideDisabledOptions: PropTypes.Requireable<boolean>;
@@ -54,9 +56,9 @@ export default class DatePicker extends BaseComponent<DatePickerProps, DatePicke
         disabled: PropTypes.Requireable<boolean>;
         multiple: PropTypes.Requireable<boolean>;
         max: PropTypes.Requireable<number>;
-        placeholder: PropTypes.Requireable<string | any[]>;
+        placeholder: PropTypes.Requireable<NonNullable<string | any[]>>;
         presets: PropTypes.Requireable<any[]>;
-        presetPosition: PropTypes.Requireable<"top" | "left" | "right" | "bottom">;
+        presetPosition: PropTypes.Requireable<"left" | "top" | "right" | "bottom">;
         onChange: PropTypes.Requireable<(...args: any[]) => any>;
         onChangeWithDateFirst: PropTypes.Requireable<boolean>;
         weekStartsOn: PropTypes.Requireable<number>;
@@ -66,22 +68,22 @@ export default class DatePicker extends BaseComponent<DatePickerProps, DatePicke
         onOpenChange: PropTypes.Requireable<(...args: any[]) => any>;
         open: PropTypes.Requireable<boolean>;
         defaultOpen: PropTypes.Requireable<boolean>;
-        motion: PropTypes.Requireable<boolean | object>;
+        motion: PropTypes.Requireable<NonNullable<boolean | object>>;
         className: PropTypes.Requireable<string>;
         prefixCls: PropTypes.Requireable<string>;
         prefix: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         insetLabel: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         insetLabelId: PropTypes.Requireable<string>;
         zIndex: PropTypes.Requireable<number>;
-        position: PropTypes.Requireable<"top" | "topLeft" | "topRight" | "left" | "leftTop" | "leftBottom" | "right" | "rightTop" | "rightBottom" | "bottom" | "bottomLeft" | "bottomRight" | "leftTopOver" | "rightTopOver">;
+        position: PropTypes.Requireable<"left" | "top" | "right" | "bottom" | "topLeft" | "topRight" | "leftTop" | "leftBottom" | "rightTop" | "rightBottom" | "bottomLeft" | "bottomRight" | "leftTopOver" | "rightTopOver">;
         getPopupContainer: PropTypes.Requireable<(...args: any[]) => any>;
         onCancel: PropTypes.Requireable<(...args: any[]) => any>;
         onConfirm: PropTypes.Requireable<(...args: any[]) => any>;
         needConfirm: PropTypes.Requireable<boolean>;
         inputStyle: PropTypes.Requireable<object>;
-        timeZone: PropTypes.Requireable<string | number>;
+        timeZone: PropTypes.Requireable<NonNullable<string | number>>;
         triggerRender: PropTypes.Requireable<(...args: any[]) => any>;
-        stopPropagation: PropTypes.Requireable<string | boolean>;
+        stopPropagation: PropTypes.Requireable<NonNullable<string | boolean>>;
         autoAdjustOverflow: PropTypes.Requireable<boolean>;
         onBlur: PropTypes.Requireable<(...args: any[]) => any>;
         onFocus: PropTypes.Requireable<(...args: any[]) => any>;
@@ -105,6 +107,7 @@ export default class DatePicker extends BaseComponent<DatePickerProps, DatePicke
         onPanelChange: PropTypes.Requireable<(...args: any[]) => any>;
         rangeSeparator: PropTypes.Requireable<string>;
         preventScroll: PropTypes.Requireable<boolean>;
+        yearAndMonthOpts: PropTypes.Requireable<object>;
     };
     static defaultProps: {
         onChangeWithDateFirst: boolean;

package/lib/es/datePicker/datePicker.js

@@ -189,7 +189,8 @@ export default class DatePicker extends BaseComponent {
     this.renderYearMonthPanel = (locale, localeCode) => {
       const {
         density,
-        presetPosition
+        presetPosition,
+        yearAndMonthOpts
       } = this.props;
       const date = this.state.value[0];
       let year = 0;
@@ -212,7 +213,8 @@ export default class DatePicker extends BaseComponent {
         density: density,
         presetPosition: presetPosition,
         renderQuickControls: this.renderQuickControls(),
-        renderDateInput: this.renderDateInput()
+        renderDateInput: this.renderDateInput(),
+        yearAndMonthOpts: yearAndMonthOpts
       });
     };
 
@@ -237,13 +239,12 @@ export default class DatePicker extends BaseComponent {
         autoAdjustOverflow,
         spacing
       } = this.props;
-      const mergedMotion = this.foundation.getMergedMotion(motion);
       return /*#__PURE__*/React.createElement(Popover, {
         getPopupContainer: getPopupContainer,
         // wrapWhenSpecial={false}
         autoAdjustOverflow: autoAdjustOverflow,
         zIndex: zIndex,
-        motion: mergedMotion,
+        motion: motion,
         content: this.renderPanel(locale, localeCode, dateFnsLocale),
         trigger: "custom",
         position: position,
@@ -261,7 +262,6 @@ export default class DatePicker extends BaseComponent {
       value: [],
       cachedSelectedValue: null,
       prevTimeZone: null,
-      motionEnd: false,
       rangeInputFocus: undefined,
       autofocus: props.autoFocus || this.isRangeType(props.type, props.triggerRender) && (props.open || props.defaultOpen),
       insetInputValue: null,
@@ -381,9 +381,6 @@ export default class DatePicker extends BaseComponent {
       },
       needConfirm: () => ['dateTime', 'dateTimeRange'].includes(this.props.type) && this.props.needConfirm === true,
       typeIsYearOrMonth: () => ['month', 'year'].includes(this.props.type),
-      setMotionEnd: motionEnd => this.setState({
-        motionEnd
-      }),
       setRangeInputFocus: rangeInputFocus => {
         const {
           preventScroll
@@ -549,11 +546,11 @@ export default class DatePicker extends BaseComponent {
       timeZone,
       triggerRender,
       insetInput,
-      presetPosition
+      presetPosition,
+      yearAndMonthOpts
     } = this.props;
     const {
       cachedSelectedValue,
-      motionEnd,
       rangeInputFocus
     } = this.state;
     const defaultValue = cachedSelectedValue;
@@ -581,7 +578,6 @@ export default class DatePicker extends BaseComponent {
       startDateOffset: startDateOffset,
       endDateOffset: endDateOffset,
       autoSwitchDate: autoSwitchDate,
-      motionEnd: motionEnd,
       density: density,
       rangeInputFocus: rangeInputFocus,
       setRangeInputFocus: this.handleSetRangeFocus,
@@ -594,7 +590,8 @@ export default class DatePicker extends BaseComponent {
       insetInput: insetInput,
       presetPosition: presetPosition,
       renderQuickControls: this.renderQuickControls(),
-      renderDateInput: this.renderDateInput()
+      renderDateInput: this.renderDateInput(),
+      yearAndMonthOpts: yearAndMonthOpts
     });
   }
 
@@ -835,7 +832,8 @@ DatePicker.propTypes = {
   // Callback function for panel date switching
   onPanelChange: PropTypes.func,
   rangeSeparator: PropTypes.string,
-  preventScroll: PropTypes.bool
+  preventScroll: PropTypes.bool,
+  yearAndMonthOpts: PropTypes.object
 };
 DatePicker.defaultProps = {
   onChangeWithDateFirst: true,

package/lib/es/datePicker/month.d.ts

@@ -31,7 +31,7 @@ export default class Month extends BaseComponent<MonthProps, MonthState> {
         hoverDay: PropTypes.Requireable<string>;
         startDateOffset: PropTypes.Requireable<(...args: any[]) => any>;
         endDateOffset: PropTypes.Requireable<(...args: any[]) => any>;
-        rangeInputFocus: PropTypes.Requireable<string | boolean>;
+        rangeInputFocus: PropTypes.Requireable<NonNullable<string | boolean>>;
         focusRecordsRef: PropTypes.Requireable<object>;
         multiple: PropTypes.Requireable<boolean>;
     };

package/lib/es/datePicker/month.js

@@ -65,6 +65,9 @@ export default class Month extends BaseComponent {
   }
 
   getSingleDayStatus(options) {
+    const {
+      rangeInputFocus
+    } = this.props;
     const {
       fullDate,
       todayText,
@@ -75,7 +78,8 @@ export default class Month extends BaseComponent {
     } = options;
     const disabledOptions = {
       rangeStart,
-      rangeEnd
+      rangeEnd,
+      rangeInputFocus
     };
     const isToday = fullDate === todayText;
     const isSelected = selected.has(fullDate);

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

@@ -4,6 +4,7 @@ import MonthsGridFoundation, { MonthInfo, MonthsGridAdapter, MonthsGridDateAdapt
 import BaseComponent, { BaseProps } from '../_base/baseComponent';
 import Combobox from '../timePicker/Combobox';
 import YearAndMonth from './yearAndMonth';
+import { ScrollItemProps } from '../scrollList/scrollItem';
 export interface MonthsGridProps extends MonthsGridFoundationProps, BaseProps {
     navPrev?: React.ReactNode;
     navNext?: React.ReactNode;
@@ -13,13 +14,14 @@ export interface MonthsGridProps extends MonthsGridFoundationProps, BaseProps {
         rangeStart: boolean;
         rangeEnd: boolean;
     }>;
+    yearAndMonthOpts?: ScrollItemProps<any>;
 }
 export declare type MonthsGridState = MonthsGridFoundationState;
 export default class MonthsGrid extends BaseComponent<MonthsGridProps, MonthsGridState> {
     static propTypes: {
         type: PropTypes.Requireable<"dateTime" | "date" | "month" | "dateRange" | "year" | "dateTimeRange">;
-        defaultValue: PropTypes.Requireable<string | number | object>;
-        defaultPickerValue: PropTypes.Requireable<string | number | object>;
+        defaultValue: PropTypes.Requireable<NonNullable<string | number | object>>;
+        defaultPickerValue: PropTypes.Requireable<NonNullable<string | number | object>>;
         multiple: PropTypes.Requireable<boolean>;
         max: PropTypes.Requireable<number>;
         weekStartsOn: PropTypes.Requireable<number>;
@@ -33,7 +35,7 @@ export default class MonthsGrid extends BaseComponent<MonthsGridProps, MonthsGri
         timePickerOpts: PropTypes.Requireable<object>;
         isControlledComponent: PropTypes.Requireable<boolean>;
         rangeStart: PropTypes.Requireable<string>;
-        rangeInputFocus: PropTypes.Requireable<string | boolean>;
+        rangeInputFocus: PropTypes.Requireable<NonNullable<string | boolean>>;
         locale: PropTypes.Requireable<object>;
         localeCode: PropTypes.Requireable<string>;
         format: PropTypes.Requireable<string>;
@@ -42,15 +44,14 @@ export default class MonthsGrid extends BaseComponent<MonthsGridProps, MonthsGri
         startDateOffset: PropTypes.Requireable<(...args: any[]) => any>;
         endDateOffset: PropTypes.Requireable<(...args: any[]) => any>;
         autoSwitchDate: PropTypes.Requireable<boolean>;
-        motionEnd: PropTypes.Requireable<boolean>;
         density: PropTypes.Requireable<string>;
         dateFnsLocale: PropTypes.Validator<object>;
-        timeZone: PropTypes.Requireable<string | number>;
+        timeZone: PropTypes.Requireable<NonNullable<string | number>>;
         syncSwitchMonth: PropTypes.Requireable<boolean>;
         onPanelChange: PropTypes.Requireable<(...args: any[]) => any>;
         focusRecordsRef: PropTypes.Requireable<object>;
         triggerRender: PropTypes.Requireable<(...args: any[]) => any>;
-        presetPosition: PropTypes.Requireable<"top" | "left" | "right" | "bottom">;
+        presetPosition: PropTypes.Requireable<"left" | "top" | "right" | "bottom">;
         renderQuickControls: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         renderDateInput: PropTypes.Requireable<PropTypes.ReactNodeLike>;
     };

package/lib/es/datePicker/monthsGrid.js

@@ -65,18 +65,10 @@ export default class MonthsGrid extends BaseComponent {
 
 
     this.calcScrollListHeight = () => {
-      const {
-        motionEnd
-      } = this.props;
-      let wrapLeft, wrapRight, switchLeft, switchRight;
-
-      if (motionEnd) {
-        wrapLeft = this.adapter.getCache("wrap-".concat(strings.PANEL_TYPE_LEFT));
-        wrapRight = this.adapter.getCache("wrap-".concat(strings.PANEL_TYPE_RIGHT));
-        switchLeft = this.adapter.getCache("switch-".concat(strings.PANEL_TYPE_LEFT));
-        switchRight = this.adapter.getCache("switch-".concat(strings.PANEL_TYPE_RIGHT));
-      }
-
+      const wrapLeft = this.adapter.getCache("wrap-".concat(strings.PANEL_TYPE_LEFT));
+      const wrapRight = this.adapter.getCache("wrap-".concat(strings.PANEL_TYPE_RIGHT));
+      const switchLeft = this.adapter.getCache("switch-".concat(strings.PANEL_TYPE_LEFT));
+      const switchRight = this.adapter.getCache("switch-".concat(strings.PANEL_TYPE_RIGHT));
       const leftRect = wrapLeft && wrapLeft.getBoundingClientRect();
       const rightRect = wrapRight && wrapRight.getBoundingClientRect();
       let leftHeight = leftRect && leftRect.height || 0;
@@ -219,8 +211,7 @@ export default class MonthsGrid extends BaseComponent {
   componentDidUpdate(prevProps, prevState) {
     const {
       defaultValue,
-      defaultPickerValue,
-      motionEnd
+      defaultPickerValue
     } = this.props;
 
     if (prevProps.defaultValue !== defaultValue) {
@@ -232,15 +223,6 @@ export default class MonthsGrid extends BaseComponent {
       this.foundation.initDefaultPickerValue();
     }
 
-    if (prevProps.motionEnd !== motionEnd && motionEnd === true) {
-      if (this.foundation.isRangeType()) {
-        const currentPanelHeight = this.calcScrollListHeight();
-        this.setState({
-          currentPanelHeight
-        });
-      }
-    }
-
     const isRange = this.foundation.isRangeType();
 
     if (isRange) {
@@ -491,7 +473,8 @@ export default class MonthsGrid extends BaseComponent {
     const {
       locale,
       localeCode,
-      density
+      density,
+      yearAndMonthOpts
     } = this.props;
     const y = pickerDate.getFullYear();
     const m = pickerDate.getMonth() + 1;
@@ -510,7 +493,8 @@ export default class MonthsGrid extends BaseComponent {
           wrapCurrent.style.height = 'auto';
         }
       },
-      density: density
+      density: density,
+      yearAndMonthOpts: yearAndMonthOpts
     });
   }
 
@@ -665,7 +649,6 @@ MonthsGrid.propTypes = {
   startDateOffset: PropTypes.func,
   endDateOffset: PropTypes.func,
   autoSwitchDate: PropTypes.bool,
-  motionEnd: PropTypes.bool,
   density: PropTypes.string,
   dateFnsLocale: PropTypes.object.isRequired,
   timeZone: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),