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

package/lib/cjs/collapsible/index.js

@@ -5,155 +5,198 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _semiAnimationReact = require("@douyinfe/semi-animation-react");
+var _isEqual2 = _interopRequireDefault(require("lodash/isEqual"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _foundation = _interopRequireDefault(require("@douyinfe/semi-foundation/lib/cjs/collapsible/foundation"));
+
+var _baseComponent = _interopRequireDefault(require("../_base/baseComponent"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _react = _interopRequireWildcard(require("react"));
-
 var _constants = require("@douyinfe/semi-foundation/lib/cjs/collapsible/constants");
 
-var _getMotionObjFromProps = _interopRequireDefault(require("@douyinfe/semi-foundation/lib/cjs/utils/getMotionObjFromProps"));
+require("@douyinfe/semi-foundation/lib/cjs/collapsible/collapsible.css");
 
-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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-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; }
+class Collapsible extends _baseComponent.default {
+  constructor(props) {
+    super(props);
+    this.domRef = /*#__PURE__*/_react.default.createRef();
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+    this.handleResize = entryList => {
+      const entry = entryList[0];
 
-// @ts-ignore  currently no type definition for @douyinfe/semi-animation-react
-const ease = 'cubicBezier(.25,.1,.25,1)';
-
-const Collapsible = props => {
-  const {
-    motion,
-    children,
-    isOpen,
-    duration,
-    keepDOM,
-    collapseHeight,
-    style,
-    className,
-    reCalcKey,
-    id
-  } = props;
-  const ref = (0, _react.useRef)(null);
-  const [maxHeight, setMaxHeight] = (0, _react.useState)(0);
-  const [open, setOpen] = (0, _react.useState)(props.isOpen);
-  const [isFirst, setIsFirst] = (0, _react.useState)(true);
-  const [transitionImmediate, setTransitionImmediate] = (0, _react.useState)(open && isFirst);
-  const [left, setLeft] = (0, _react.useState)(!props.isOpen);
-
-  if (isOpen !== open) {
-    setOpen(isOpen);
-
-    if (isFirst) {
-      setIsFirst(false);
-      setTransitionImmediate(false);
-    }
+      if (entry) {
+        const entryInfo = Collapsible.getEntryInfo(entry);
+        this.foundation.updateDOMHeight(entryInfo.height);
+        this.foundation.updateDOMInRenderTree(entryInfo.isShown);
+      }
+    };
 
-    isOpen && setLeft(!isOpen);
-  }
+    this.isChildrenInRenderTree = () => {
+      if (this.domRef.current) {
+        return this.domRef.current.offsetHeight > 0;
+      } else {
+        return false;
+      }
+    };
 
-  const setHeight = (0, _react.useCallback)(node => {
-    const currHeight = node && node.scrollHeight;
+    this.state = {
+      domInRenderTree: false,
+      domHeight: 0,
+      visible: this.props.isOpen,
+      isTransitioning: false
+    };
+    this.foundation = new _foundation.default(this.adapter);
+  }
 
-    if (currHeight && maxHeight !== currHeight) {
-      setMaxHeight(currHeight);
-    } // eslint-disable-next-line react-hooks/exhaustive-deps
+  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
+          });
+        }
+      }
+    });
+  }
 
-  }, [left, reCalcKey, maxHeight]);
+  componentDidMount() {
+    super.componentDidMount();
+    this.resizeObserver = new ResizeObserver(this.handleResize);
+    this.resizeObserver.observe(this.domRef.current);
+    const domInRenderTree = this.isChildrenInRenderTree();
+    this.foundation.updateDOMInRenderTree(domInRenderTree);
 
-  const resetHeight = () => {
-    ref.current.style.maxHeight = 'none';
-  };
+    if (domInRenderTree) {
+      this.foundation.updateDOMHeight(this.domRef.current.scrollHeight);
+    }
+  }
 
-  const formatStyle = _ref => {
-    let {
-      maxHeight: maxHeightInTransitionStyle
-    } = _ref;
-    return {
-      maxHeight: maxHeightInTransitionStyle
-    };
-  };
+  componentDidUpdate(prevProps, prevState, snapshot) {
+    const changedPropKeys = Object.keys(this.props).filter(key => !(0, _isEqual2.default)(this.props[key], prevProps[key]));
+    const changedStateKeys = Object.keys(this.state).filter(key => !(0, _isEqual2.default)(this.state[key], prevState[key]));
 
-  const shouldKeepDOM = () => keepDOM || collapseHeight !== 0;
+    if (changedPropKeys.includes("reCalcKey")) {
+      this.foundation.updateDOMHeight(this.domRef.current.scrollHeight);
+    }
 
-  const defaultMaxHeight = (0, _react.useMemo)(() => {
-    return isOpen || !shouldKeepDOM() && !motion ? 'none' : collapseHeight;
-  }, [collapseHeight, motion, isOpen, shouldKeepDOM]);
+    if (changedStateKeys.includes("domInRenderTree") && this.state.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);
+    if (changedPropKeys.includes("isOpen")) {
+      if (this.props.isOpen || !this.props.motion) {
+        this.foundation.updateVisible(this.props.isOpen);
+      }
+    }
 
-    if (isFirst) {
-      wrapperstyle.maxHeight = defaultMaxHeight;
+    if (this.props.motion && prevProps.isOpen !== this.props.isOpen) {
+      this.foundation.updateIsTransitioning(true);
     }
+  }
 
-    const wrapperCls = (0, _classnames.default)("".concat(_constants.cssClasses.PREFIX, "-wrapper"), className);
+  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 = (0, _classnames.default)("".concat(_constants.cssClasses.PREFIX, "-wrapper"), {
+      ["".concat(_constants.cssClasses.PREFIX, "-transition")]: this.props.motion && this.state.isTransitioning
+    }, this.props.className);
     return /*#__PURE__*/_react.default.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.default.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 = (0, _getMotionObjFromProps.default)({
-      didEnter: resetHeight,
-      didLeave,
-      motion
-    });
-    return /*#__PURE__*/_react.default.createElement(_semiAnimationReact.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;
 
-  return renderContent();
+  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 {
+    isShown: inRenderTree,
+    height
+  };
 };
 
-Collapsible.propType = {
-  motion: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.func, _propTypes.default.object]),
+Collapsible.propTypes = {
+  motion: _propTypes.default.bool,
   children: _propTypes.default.node,
   isOpen: _propTypes.default.bool,
   duration: _propTypes.default.number,
@@ -163,12 +206,5 @@ Collapsible.propType = {
   className: _propTypes.default.string,
   reCalcKey: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number])
 };
-Collapsible.defaultProps = {
-  isOpen: false,
-  duration: 250,
-  motion: true,
-  keepDOM: false,
-  collapseHeight: 0
-};
 var _default = Collapsible;
 exports.default = _default;

package/lib/cjs/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/cjs/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/cjs/datePicker/datePicker.d.ts

@@ -9,6 +9,7 @@ import { YearAndMonthProps } from './yearAndMonth';
 import '@douyinfe/semi-foundation/lib/cjs/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/cjs/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/cjs/datePicker/datePicker.js

@@ -219,7 +219,8 @@ class DatePicker extends _baseComponent.default {
     this.renderYearMonthPanel = (locale, localeCode) => {
       const {
         density,
-        presetPosition
+        presetPosition,
+        yearAndMonthOpts
       } = this.props;
       const date = this.state.value[0];
       let year = 0;
@@ -242,7 +243,8 @@ class DatePicker extends _baseComponent.default {
         density: density,
         presetPosition: presetPosition,
         renderQuickControls: this.renderQuickControls(),
-        renderDateInput: this.renderDateInput()
+        renderDateInput: this.renderDateInput(),
+        yearAndMonthOpts: yearAndMonthOpts
       });
     };
 
@@ -267,13 +269,12 @@ class DatePicker extends _baseComponent.default {
         autoAdjustOverflow,
         spacing
       } = this.props;
-      const mergedMotion = this.foundation.getMergedMotion(motion);
       return /*#__PURE__*/_react.default.createElement(_index.default, {
         getPopupContainer: getPopupContainer,
         // wrapWhenSpecial={false}
         autoAdjustOverflow: autoAdjustOverflow,
         zIndex: zIndex,
-        motion: mergedMotion,
+        motion: motion,
         content: this.renderPanel(locale, localeCode, dateFnsLocale),
         trigger: "custom",
         position: position,
@@ -291,7 +292,6 @@ class DatePicker extends _baseComponent.default {
       value: [],
       cachedSelectedValue: null,
       prevTimeZone: null,
-      motionEnd: false,
       rangeInputFocus: undefined,
       autofocus: props.autoFocus || this.isRangeType(props.type, props.triggerRender) && (props.open || props.defaultOpen),
       insetInputValue: null,
@@ -411,9 +411,6 @@ class DatePicker extends _baseComponent.default {
       },
       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
@@ -575,11 +572,11 @@ class DatePicker extends _baseComponent.default {
       timeZone,
       triggerRender,
       insetInput,
-      presetPosition
+      presetPosition,
+      yearAndMonthOpts
     } = this.props;
     const {
       cachedSelectedValue,
-      motionEnd,
       rangeInputFocus
     } = this.state;
     const defaultValue = cachedSelectedValue;
@@ -607,7 +604,6 @@ class DatePicker extends _baseComponent.default {
       startDateOffset: startDateOffset,
       endDateOffset: endDateOffset,
       autoSwitchDate: autoSwitchDate,
-      motionEnd: motionEnd,
       density: density,
       rangeInputFocus: rangeInputFocus,
       setRangeInputFocus: this.handleSetRangeFocus,
@@ -620,7 +616,8 @@ class DatePicker extends _baseComponent.default {
       insetInput: insetInput,
       presetPosition: presetPosition,
       renderQuickControls: this.renderQuickControls(),
-      renderDateInput: this.renderDateInput()
+      renderDateInput: this.renderDateInput(),
+      yearAndMonthOpts: yearAndMonthOpts
     });
   }
 
@@ -863,7 +860,8 @@ DatePicker.propTypes = {
   // Callback function for panel date switching
   onPanelChange: _propTypes.default.func,
   rangeSeparator: _propTypes.default.string,
-  preventScroll: _propTypes.default.bool
+  preventScroll: _propTypes.default.bool,
+  yearAndMonthOpts: _propTypes.default.object
 };
 DatePicker.defaultProps = {
   onChangeWithDateFirst: true,

package/lib/cjs/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/cjs/datePicker/month.js

@@ -85,6 +85,9 @@ class Month extends _baseComponent.default {
   }
 
   getSingleDayStatus(options) {
+    const {
+      rangeInputFocus
+    } = this.props;
     const {
       fullDate,
       todayText,
@@ -95,7 +98,8 @@ class Month extends _baseComponent.default {
     } = options;
     const disabledOptions = {
       rangeStart,
-      rangeEnd
+      rangeEnd,
+      rangeInputFocus
     };
     const isToday = fullDate === todayText;
     const isSelected = selected.has(fullDate);

package/lib/cjs/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>;
     };