rsuite 5.2.2 → 5.4.0

package/cjs/CheckTreePicker/CheckTreePicker.js

@@ -35,14 +35,14 @@ var _CheckTreeNode = _interopRequireDefault(require("./CheckTreeNode"));
 
 var _TreeContext = _interopRequireDefault(require("../Tree/TreeContext"));
 
+var _treeUtils = require("../utils/treeUtils");
+
 var _utils = require("../utils");
 
 var _Picker = require("../Picker");
 
 var _utils2 = require("./utils");
 
-var _treeUtils = require("../utils/treeUtils");
-
 var _TreePicker = require("../TreePicker/TreePicker");
 
 var emptyArray = [];
@@ -62,6 +62,7 @@ var CheckTreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
       searchBy = props.searchBy,
       toggleAs = props.toggleAs,
       searchKeyword = props.searchKeyword,
+      showIndentLine = props.showIndentLine,
       overrideLocale = props.locale,
       _props$cascade = props.cascade,
       cascade = _props$cascade === void 0 ? true : _props$cascade,
@@ -115,17 +116,17 @@ var CheckTreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
       renderValue = props.renderValue,
       renderTreeIcon = props.renderTreeIcon,
       renderTreeNode = props.renderTreeNode,
-      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "data", "style", "appearance", "cleanable", "countable", "searchBy", "toggleAs", "searchKeyword", "locale", "cascade", "disabled", "valueKey", "labelKey", "placement", "childrenKey", "placeholder", "value", "defaultValue", "defaultExpandAll", "disabledItemValues", "expandItemValues", "defaultExpandItemValues", "height", "menuStyle", "searchable", "virtualized", "className", "classPrefix", "menuClassName", "menuAutoWidth", "uncheckableItemValues", "id", "listProps", "renderMenu", "getChildren", "renderExtraFooter", "onEntered", "onChange", "onClean", "onClose", "onExited", "onSearch", "onSelect", "onOpen", "onScroll", "onExpand", "renderValue", "renderTreeIcon", "renderTreeNode"]);
+      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "data", "style", "appearance", "cleanable", "countable", "searchBy", "toggleAs", "searchKeyword", "showIndentLine", "locale", "cascade", "disabled", "valueKey", "labelKey", "placement", "childrenKey", "placeholder", "value", "defaultValue", "defaultExpandAll", "disabledItemValues", "expandItemValues", "defaultExpandItemValues", "height", "menuStyle", "searchable", "virtualized", "className", "classPrefix", "menuClassName", "menuAutoWidth", "uncheckableItemValues", "id", "listProps", "renderMenu", "getChildren", "renderExtraFooter", "onEntered", "onChange", "onClean", "onClose", "onExited", "onSearch", "onSelect", "onOpen", "onScroll", "onExpand", "renderValue", "renderTreeIcon", "renderTreeNode"]);
 
   var _useContext = (0, _react.useContext)(_TreeContext.default),
       inline = _useContext.inline;
 
-  var triggerRef = (0, _react.useRef)();
-  var targetRef = (0, _react.useRef)();
-  var listRef = (0, _react.useRef)();
-  var overlayRef = (0, _react.useRef)();
-  var searchInputRef = (0, _react.useRef)();
-  var treeViewRef = (0, _react.useRef)();
+  var triggerRef = (0, _react.useRef)(null);
+  var targetRef = (0, _react.useRef)(null);
+  var listRef = (0, _react.useRef)(null);
+  var overlayRef = (0, _react.useRef)(null);
+  var searchInputRef = (0, _react.useRef)(null);
+  var treeViewRef = (0, _react.useRef)(null);
 
   var _useCustom = (0, _utils.useCustom)('Picker', overrideLocale),
       rtl = _useCustom.rtl,
@@ -221,25 +222,21 @@ var CheckTreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
 
 
   var getFormattedNodes = (0, _react.useCallback)(function (render) {
-    var formattedNodes = [];
-
     if (virtualized) {
-      formattedNodes = formatVirtualizedTreeData(flattenNodes, filteredData, expandItemValues, {
+      return formatVirtualizedTreeData(flattenNodes, filteredData, expandItemValues, {
         cascade: cascade,
         searchKeyword: searchKeywordState
       }).filter(function (item) {
         return item.visible;
       });
-    } else {
-      formattedNodes = (0, _utils2.getFormattedTree)(filteredData, flattenNodes, {
-        childrenKey: childrenKey,
-        cascade: cascade
-      }).map(function (node) {
-        return render === null || render === void 0 ? void 0 : render(node, 1);
-      });
     }
 
-    return formattedNodes;
+    return (0, _utils2.getFormattedTree)(filteredData, flattenNodes, {
+      childrenKey: childrenKey,
+      cascade: cascade
+    }).map(function (node) {
+      return render === null || render === void 0 ? void 0 : render(node, 1);
+    });
   }, [searchKeywordState, expandItemValues, filteredData, flattenNodes, formatVirtualizedTreeData, virtualized, childrenKey, cascade]);
 
   var getTreeNodeProps = function getTreeNodeProps(node, layer) {
@@ -434,10 +431,13 @@ var CheckTreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     }
   }, [childrenKey, expandItemValues, getChildren, loadChildren, onExpand, setExpandItemValues, valueKey]);
   (0, _Picker.usePublicMethods)(ref, {
+    rootRef: inline ? treeViewRef : undefined,
     triggerRef: triggerRef,
     overlayRef: overlayRef,
-    targetRef: targetRef
-  }, inline);
+    targetRef: targetRef,
+    listRef: listRef,
+    inline: inline
+  });
   var handleClean = (0, _react.useCallback)(function (event) {
     var target = event.target; // exclude searchBar
 
@@ -486,11 +486,13 @@ var CheckTreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     }
   }, [searchKeywordState, checkTreePrefix, expandItemValues, filteredData, focusItemValue, treeNodesRefs, childrenKey, valueKey, disabledItemValues]);
   var handleLeftArrow = (0, _react.useCallback)(function () {
+    if ((0, _isNil2.default)(focusItemValue)) return;
     var focusItem = (0, _treeUtils.getActiveItem)(focusItemValue, flattenNodes, valueKey);
     (0, _treeUtils.leftArrowHandler)({
       focusItem: focusItem,
       expand: expandItemValues.includes(focusItem === null || focusItem === void 0 ? void 0 : focusItem[valueKey]),
       onExpand: handleExpand,
+      childrenKey: childrenKey,
       onFocusItem: function onFocusItem() {
         var _focusItem$parent, _focusItem$parent2;
 
@@ -498,8 +500,9 @@ var CheckTreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
         (0, _treeUtils.focusTreeNode)(focusItem === null || focusItem === void 0 ? void 0 : (_focusItem$parent2 = focusItem.parent) === null || _focusItem$parent2 === void 0 ? void 0 : _focusItem$parent2.refKey, treeNodesRefs, "." + checkTreePrefix('node-label'));
       }
     });
-  }, [checkTreePrefix, expandItemValues, flattenNodes, focusItemValue, handleExpand, treeNodesRefs, valueKey]);
+  }, [checkTreePrefix, expandItemValues, flattenNodes, focusItemValue, handleExpand, treeNodesRefs, valueKey, childrenKey]);
   var handleRightArrow = (0, _react.useCallback)(function () {
+    if ((0, _isNil2.default)(focusItemValue)) return;
     var focusItem = (0, _treeUtils.getActiveItem)(focusItemValue, flattenNodes, valueKey);
     (0, _treeUtils.rightArrowHandler)({
       focusItem: focusItem,
@@ -512,6 +515,7 @@ var CheckTreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     });
   }, [focusItemValue, flattenNodes, valueKey, expandItemValues, childrenKey, handleExpand, handleFocusItem]);
   var selectActiveItem = (0, _react.useCallback)(function (event) {
+    if ((0, _isNil2.default)(focusItemValue)) return;
     var activeItem = (0, _treeUtils.getActiveItem)(focusItemValue, flattenNodes, valueKey);
 
     if (!(0, _utils2.isNodeUncheckable)(activeItem, {
@@ -593,19 +597,22 @@ var CheckTreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
         key: node[valueKey]
       }, /*#__PURE__*/_react.default.createElement(_CheckTreeNode.default, (0, _extends2.default)({}, nodeProps, {
         ref: function ref(_ref) {
-          return saveTreeNodeRef(refKey, _ref);
+          return saveTreeNodeRef(_ref, refKey);
         }
       })), /*#__PURE__*/_react.default.createElement("div", {
         className: checkTreePrefix('children')
       }, nodes.map(function (child) {
         return renderNode(child, layer);
+      }), showIndentLine && /*#__PURE__*/_react.default.createElement("span", {
+        className: checkTreePrefix('indent-line'),
+        style: (0, _treeUtils.getTreeNodeIndent)(rtl, layer - 1, true)
       })));
     }
 
     return /*#__PURE__*/_react.default.createElement(_CheckTreeNode.default, (0, _extends2.default)({
       key: node[valueKey],
       ref: function ref(_ref2) {
-        return saveTreeNodeRef(refKey, _ref2);
+        return saveTreeNodeRef(_ref2, refKey);
       }
     }, nodeProps));
   };
@@ -629,7 +636,7 @@ var CheckTreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
         style: style,
         key: key,
         ref: function ref(_ref4) {
-          return saveTreeNodeRef(refKey, _ref4);
+          return saveTreeNodeRef(_ref4, refKey);
         }
       }, nodeProps));
     };
@@ -655,7 +662,7 @@ var CheckTreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     }, style) : {};
     return /*#__PURE__*/_react.default.createElement("div", {
       id: id ? id + "-listbox" : undefined,
-      ref: inline ? (0, _utils.mergeRefs)(treeViewRef, ref) : treeViewRef,
+      ref: treeViewRef,
       role: "tree",
       "aria-multiselectable": true,
       className: classes,

package/cjs/CheckTreePicker/utils.d.ts

@@ -14,6 +14,8 @@ export interface TreeNodeType {
     value?: string | number;
     groupBy?: string;
     children?: TreeNodeType[];
+    hasChildren?: boolean;
+    checkState?: CheckStateType;
 }
 export interface TreeNodesType {
     [key: string]: TreeNodeType;
@@ -38,5 +40,5 @@ export declare function isNodeUncheckable(node: any, props: Partial<CheckTreePic
 export declare function getFormattedTree(data: any[], nodes: TreeNodesType, props: Partial<CheckTreePickerProps>): any[];
 export declare function getDisabledState(nodes: TreeNodesType, node: TreeNodeType, props: Partial<CheckTreePickerProps>): boolean;
 export declare function getCheckTreePickerDefaultValue(value: any[], uncheckableItemValues: any[]): any[];
-export declare function getSelectedItems(nodes: TreeNodesType, value: (string | number)[], valueKey: string): any[];
+export declare function getSelectedItems(nodes: TreeNodesType, value: (string | number)[], valueKey: string): TreeNodeType[];
 export declare function getNodeCheckState({ nodes, node, cascade, childrenKey }: any): CheckStateType;

package/cjs/CheckTreePicker/utils.js

@@ -26,23 +26,25 @@ var _utils = require("../utils");
 var _treeUtils = require("../utils/treeUtils");
 
 function isEveryChildChecked(nodes, parent) {
-  if ((0, _isNil2.default)(nodes[parent.refKey])) {
+  if ((0, _isNil2.default)(parent.refKey) || (0, _isNil2.default)(nodes[parent.refKey])) {
     return false;
   }
 
   var children = (0, _treeUtils.getChildrenByFlattenNodes)(nodes, parent);
 
   if (!children.length) {
-    return nodes[parent.refKey].check;
+    var _nodes$parent$refKey$;
+
+    return (_nodes$parent$refKey$ = nodes[parent.refKey].check) !== null && _nodes$parent$refKey$ !== void 0 ? _nodes$parent$refKey$ : false;
   }
 
   return children.every(function (child) {
-    return nodes[child.refKey].check;
+    return !(0, _isNil2.default)(child.refKey) && nodes[child.refKey].check;
   });
 }
 
 function isSomeChildChecked(nodes, parent, childrenKey) {
-  if ((0, _isNil2.default)(nodes[parent.refKey])) {
+  if (!(0, _isNil2.default)(parent.refKey) && (0, _isNil2.default)(nodes[parent.refKey])) {
     return false;
   }
 
@@ -54,7 +56,7 @@ function isSomeChildChecked(nodes, parent, childrenKey) {
       return isSomeChildChecked(nodes, child, childrenKey);
     }
 
-    return nodes[child.refKey].check;
+    return !(0, _isNil2.default)(child.refKey) && nodes[child.refKey].check;
   });
 }
 
@@ -71,7 +73,7 @@ function isSomeNodeHasChildren(data, childrenKey) {
 
 function isAllSiblingNodeUncheckable(node, nodes, uncheckableItemValues, valueKey) {
   var list = [];
-  var parentNodeRefkey = node.parent ? node.parent.refKey : '';
+  var parentNodeRefKey = node.parent ? node.parent.refKey : '';
   Object.keys(nodes).forEach(function (refKey) {
     var _curNode$parent;
 
@@ -79,7 +81,7 @@ function isAllSiblingNodeUncheckable(node, nodes, uncheckableItemValues, valueKe
 
     if ((0, _isNil2.default)(node.parent) && (0, _isNil2.default)(curNode.parent)) {
       list.push(curNode);
-    } else if (((_curNode$parent = curNode.parent) === null || _curNode$parent === void 0 ? void 0 : _curNode$parent.refKey) === parentNodeRefkey) {
+    } else if (((_curNode$parent = curNode.parent) === null || _curNode$parent === void 0 ? void 0 : _curNode$parent.refKey) === parentNodeRefKey) {
       list.push(curNode);
     }
   });
@@ -134,7 +136,7 @@ function getFormattedTree(data, nodes, props) {
     var curNode = nodes[node.refKey];
 
     if (curNode) {
-      var _node$childrenKey;
+      var _node;
 
       var checkState = !(0, _isUndefined2.default)(cascade) ? getNodeCheckState({
         node: curNode,
@@ -148,7 +150,7 @@ function getFormattedTree(data, nodes, props) {
       formatted.parent = curNode.parent;
       formatted.checkState = checkState;
 
-      if (((_node$childrenKey = node[childrenKey]) === null || _node$childrenKey === void 0 ? void 0 : _node$childrenKey.length) > 0) {
+      if (((_node = node[childrenKey]) === null || _node === void 0 ? void 0 : _node.length) > 0) {
         formatted[childrenKey] = getFormattedTree(formatted[childrenKey], nodes, props);
       }
     }
@@ -162,7 +164,7 @@ function getDisabledState(nodes, node, props) {
       disabledItemValues = _props$disabledItemVa === void 0 ? [] : _props$disabledItemVa,
       valueKey = props.valueKey;
 
-  if ((0, _isNil2.default)(nodes[node.refKey])) {
+  if (!(0, _isNil2.default)(node.refKey) && (0, _isNil2.default)(nodes[node.refKey])) {
     return false;
   }
 

package/cjs/Checkbox/Checkbox.d.ts

@@ -31,7 +31,7 @@ export interface CheckboxProps<V = ValueType> extends WithAsProps {
     /** Used for the name of the form */
     name?: string;
     /** Called when the user attempts to change the checked state. */
-    onChange?: (value: V, checked: boolean, event: React.ChangeEvent<HTMLInputElement>) => void;
+    onChange?: (value: V | undefined, checked: boolean, event: React.ChangeEvent<HTMLInputElement>) => void;
     /** Called when the checkbox or label is clicked. */
     onClick?: (event: React.SyntheticEvent) => void;
     /** Called when the checkbox is clicked. */

package/cjs/CheckboxGroup/CheckboxGroup.js

@@ -83,10 +83,10 @@ var CheckboxGroup = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
   }, [disabled, handleChange, inline, isControlled, name, plaintext, readOnly, value]);
   return /*#__PURE__*/_react.default.createElement(_CheckboxGroupContext.CheckboxGroupContext.Provider, {
     value: contextValue
-  }, plaintext ? /*#__PURE__*/_react.default.createElement(_Plaintext.default, {
+  }, plaintext ? /*#__PURE__*/_react.default.createElement(_Plaintext.default, (0, _extends2.default)({
     ref: ref,
     localeKey: "notSelected"
-  }, value !== null && value !== void 0 && value.length ? children : null) : /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {
+  }, rest), value !== null && value !== void 0 && value.length ? children : null) : /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {
     ref: ref,
     role: "group",
     className: classes

package/cjs/CustomProvider/CustomProvider.d.ts

@@ -2,9 +2,9 @@ import React from 'react';
 import { Locale } from '../locales';
 export interface CustomValue<T = Locale> {
     /** Language configuration */
-    locale?: T;
+    locale: T;
     /** Support right-to-left */
-    rtl?: boolean;
+    rtl: boolean;
     /**
      * Return the formatted date string in the given format. The result may vary by locale.
      *
@@ -18,7 +18,7 @@ export interface CustomValue<T = Locale> {
      *  }
      *
      * */
-    formatDate?: (date: Date | string | number, format?: string) => string;
+    formatDate: (date: Date | number, format: string) => string;
     /**
      * Return the date parsed from string using the given format string.
      *
@@ -32,9 +32,9 @@ export interface CustomValue<T = Locale> {
      *  }
      *
      * */
-    parseDate?: (dateString: string, formatString: string) => Date;
+    parseDate: (dateString: string, formatString: string) => Date;
 }
-export interface CustomProviderProps<T = Locale> extends CustomValue<T> {
+export interface CustomProviderProps<T = Locale> extends Partial<CustomValue<T>> {
     /** Supported themes */
     theme?: 'light' | 'dark' | 'high-contrast';
     /** The prefix of the component CSS class */
@@ -46,25 +46,12 @@ declare const CustomContext: React.Context<CustomProviderProps<{
     common?: {
         loading: string;
         emptyMessage: string;
-    };
+    } | undefined;
     Plaintext?: {
         unfilled: string;
         notSelected: string;
-        /**
-         * Return the date parsed from string using the given format string.
-         *
-         * Example:
-         *
-         *  import parse from 'date-fns/parse';
-         *  import eo from 'date-fns/locale/eo'
-         *
-         *  function parseDate(date, formatStr) {
-         *    return parse(date, formatStr, new Date(), { locale: eo });
-         *  }
-         *
-         * */
         notUploaded: string;
-    };
+    } | undefined;
     Pagination?: {
         more: string;
         prev: string;
@@ -74,7 +61,7 @@ declare const CustomContext: React.Context<CustomProviderProps<{
         limit: string;
         total: string;
         skip: string;
-    };
+    } | undefined;
     Calendar?: {
         sunday: string;
         monday: string;
@@ -92,7 +79,7 @@ declare const CustomContext: React.Context<CustomProviderProps<{
         formattedMonthPattern: string;
         formattedDayPattern: string;
         dateLocale: any;
-    };
+    } | undefined;
     DatePicker?: {
         sunday: string;
         monday: string;
@@ -110,7 +97,7 @@ declare const CustomContext: React.Context<CustomProviderProps<{
         formattedMonthPattern: string;
         formattedDayPattern: string;
         dateLocale: any;
-    };
+    } | undefined;
     DateRangePicker?: {
         last7Days: string;
         sunday: string;
@@ -129,17 +116,17 @@ declare const CustomContext: React.Context<CustomProviderProps<{
         formattedMonthPattern: string;
         formattedDayPattern: string;
         dateLocale: any;
-    };
+    } | undefined;
     Picker?: {
         noResultsText: string;
         placeholder: string;
-        searchPlaceholder: string;
+        searchPlaceholder: string; /** Supported themes */
         checkAll: string;
-    };
+    } | undefined;
     InputPicker?: {
         newItem: string;
         createOption: string;
-    };
+    } | undefined;
     Uploader?: {
         inited: string;
         progress: string;
@@ -147,41 +134,28 @@ declare const CustomContext: React.Context<CustomProviderProps<{
         complete: string;
         emptyFile: string;
         upload: string;
-    };
+    } | undefined;
     CloseButton?: {
         closeLabel: string;
-    };
+    } | undefined;
     Breadcrumb?: {
         expandText: string;
-    };
+    } | undefined;
     Toggle?: {
         on: string;
         off: string;
-    };
+    } | undefined;
 }>>;
 declare const Consumer: React.Consumer<CustomProviderProps<{
     common?: {
         loading: string;
         emptyMessage: string;
-    };
+    } | undefined;
     Plaintext?: {
         unfilled: string;
         notSelected: string;
-        /**
-         * Return the date parsed from string using the given format string.
-         *
-         * Example:
-         *
-         *  import parse from 'date-fns/parse';
-         *  import eo from 'date-fns/locale/eo'
-         *
-         *  function parseDate(date, formatStr) {
-         *    return parse(date, formatStr, new Date(), { locale: eo });
-         *  }
-         *
-         * */
         notUploaded: string;
-    };
+    } | undefined;
     Pagination?: {
         more: string;
         prev: string;
@@ -191,7 +165,7 @@ declare const Consumer: React.Consumer<CustomProviderProps<{
         limit: string;
         total: string;
         skip: string;
-    };
+    } | undefined;
     Calendar?: {
         sunday: string;
         monday: string;
@@ -209,7 +183,7 @@ declare const Consumer: React.Consumer<CustomProviderProps<{
         formattedMonthPattern: string;
         formattedDayPattern: string;
         dateLocale: any;
-    };
+    } | undefined;
     DatePicker?: {
         sunday: string;
         monday: string;
@@ -227,7 +201,7 @@ declare const Consumer: React.Consumer<CustomProviderProps<{
         formattedMonthPattern: string;
         formattedDayPattern: string;
         dateLocale: any;
-    };
+    } | undefined;
     DateRangePicker?: {
         last7Days: string;
         sunday: string;
@@ -246,17 +220,17 @@ declare const Consumer: React.Consumer<CustomProviderProps<{
         formattedMonthPattern: string;
         formattedDayPattern: string;
         dateLocale: any;
-    };
+    } | undefined;
     Picker?: {
         noResultsText: string;
         placeholder: string;
-        searchPlaceholder: string;
+        searchPlaceholder: string; /** Supported themes */
         checkAll: string;
-    };
+    } | undefined;
     InputPicker?: {
         newItem: string;
         createOption: string;
-    };
+    } | undefined;
     Uploader?: {
         inited: string;
         progress: string;
@@ -264,17 +238,17 @@ declare const Consumer: React.Consumer<CustomProviderProps<{
         complete: string;
         emptyFile: string;
         upload: string;
-    };
+    } | undefined;
     CloseButton?: {
         closeLabel: string;
-    };
+    } | undefined;
     Breadcrumb?: {
         expandText: string;
-    };
+    } | undefined;
     Toggle?: {
         on: string;
         off: string;
-    };
+    } | undefined;
 }>>;
 declare const CustomProvider: (props: CustomProviderProps) => JSX.Element;
 export { CustomContext, Consumer as CustomConsumer };

package/cjs/DOMHelper/index.d.ts

@@ -16,33 +16,33 @@ declare const DOMHelper: {
     ownerDocument: (node: Element) => Document;
     ownerWindow: (componentOrElement: Element) => Window;
     getWindow: (node: any) => Window;
-    getContainer: (container: Element | (() => Element), defaultContainer?: Element) => Element;
+    getContainer: (container: Element | (() => Element), defaultContainer?: Element | undefined) => Element;
     canUseDOM: boolean;
     contains: (context: Element, node: Node & ParentNode) => boolean;
-    scrollTop: (node: Element, val?: number) => number;
-    scrollLeft: (node: Element, val?: number) => number;
+    scrollTop: (node: Element, val?: number | undefined) => number;
+    scrollLeft: (node: Element, val?: number | undefined) => number;
     getOffset: (node: Element) => {
         top: number;
         left: number;
         height: number;
         width: number;
-    } | DOMRect;
+    } | DOMRect | null;
     nodeName: (node: Element) => string;
     getOffsetParent: (node: Element) => Element;
-    getPosition: (node: Element, offsetParent?: Element, calcMargin?: boolean) => DOMRect | {
+    getPosition: (node: Element, offsetParent?: Element | undefined, calcMargin?: boolean | undefined) => DOMRect | {
         top: number;
         left: number;
         height: number;
         width: number;
-    };
+    } | null;
     isOverflowing: (container: Element) => boolean;
-    getScrollbarSize: (recalc?: boolean) => number | void;
-    getHeight: (node: Element | Window, client?: Element) => number;
-    getWidth: (node: Element | Window, client?: Element) => number;
+    getScrollbarSize: (recalc?: boolean | undefined) => number | void;
+    getHeight: (node: Element | Window, client?: Element | undefined) => number;
+    getWidth: (node: Element | Window, client?: Element | undefined) => number;
     isFocusable: typeof helpers.isFocusable;
-    getStyle: (node: Element, property?: string) => string | CSSStyleDeclaration;
+    getStyle: (node: Element, property?: string | undefined) => string | CSSStyleDeclaration;
     removeStyle: (node: Element, keys: string | string[]) => void;
-    addStyle: (node: Element, property: string | import("dom-lib/esm/addStyle").CSSProperty, value?: string | number) => void;
-    translateDOMPositionXY: (style: CSSStyleDeclaration, x?: number, y?: number) => CSSStyleDeclaration;
+    addStyle: (node: Element, property: string | import("dom-lib/esm/addStyle").CSSProperty, value?: string | number | undefined) => void;
+    translateDOMPositionXY: (style: CSSStyleDeclaration, x?: number | undefined, y?: number | undefined) => CSSStyleDeclaration;
 };
 export default DOMHelper;

package/cjs/DatePicker/DatePicker.d.ts

@@ -5,7 +5,7 @@ import { FormControlBaseProps, PickerBaseProps, RsRefForwardingComponent } from
 export type { RangeType } from './Toolbar';
 export interface DatePickerProps extends PickerBaseProps<DatePickerLocale>, FormControlBaseProps<Date> {
     /** Configure shortcut options */
-    ranges?: RangeType[];
+    ranges?: RangeType<Date>[];
     /** Calendar panel default presentation date and time */
     calendarDefaultDate?: Date;
     /** Format date */

package/cjs/DatePicker/DatePicker.js

@@ -15,6 +15,8 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _isNil = _interopRequireDefault(require("lodash/isNil"));
+
 var _mapValues = _interopRequireDefault(require("lodash/mapValues"));
 
 var _pick = _interopRequireDefault(require("lodash/pick"));
@@ -116,10 +118,10 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       active = _useState2[0],
       setActive = _useState2[1];
 
-  var triggerRef = (0, _react.useRef)();
-  var rootRef = (0, _react.useRef)();
-  var targetRef = (0, _react.useRef)();
-  var overlayRef = (0, _react.useRef)();
+  var triggerRef = (0, _react.useRef)(null);
+  var rootRef = (0, _react.useRef)(null);
+  var targetRef = (0, _react.useRef)(null);
+  var overlayRef = (0, _react.useRef)(null);
   (0, _Picker.usePublicMethods)(ref, {
     rootRef: rootRef,
     triggerRef: triggerRef,
@@ -192,7 +194,7 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       closeOverlay = true;
     }
 
-    var nextValue = typeof nextPageDate !== 'undefined' ? nextPageDate : calendarDate;
+    var nextValue = !(0, _isNil.default)(nextPageDate) ? nextPageDate : calendarDate;
     setCalendarDate(nextValue || new Date());
     setValue(nextValue);
 
@@ -289,7 +291,9 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     }
   }, [formatStr, handleDateChange, oneTap, calendarDate, setCalendarDate, updateValue]);
   var disabledDate = (0, _react.useCallback)(function (date) {
-    return disabledDateProp === null || disabledDateProp === void 0 ? void 0 : disabledDateProp(date);
+    var _disabledDateProp;
+
+    return (_disabledDateProp = disabledDateProp === null || disabledDateProp === void 0 ? void 0 : disabledDateProp(date)) !== null && _disabledDateProp !== void 0 ? _disabledDateProp : false;
   }, [disabledDateProp]);
   /**
    * Callback after the input box value is changed.
@@ -346,9 +350,9 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   }, [onClose, reset]); // Check whether the time is within the time range of the shortcut option in the toolbar.
 
   var disabledToolbarHandle = (0, _react.useCallback)(function (date) {
-    var _disabledDateProp;
+    var _disabledDateProp2;
 
-    var allowDate = (_disabledDateProp = disabledDateProp === null || disabledDateProp === void 0 ? void 0 : disabledDateProp(date)) !== null && _disabledDateProp !== void 0 ? _disabledDateProp : false;
+    var allowDate = (_disabledDateProp2 = disabledDateProp === null || disabledDateProp === void 0 ? void 0 : disabledDateProp(date)) !== null && _disabledDateProp2 !== void 0 ? _disabledDateProp2 : false;
 
     var allowTime = _utils.DateUtils.disabledTime(props, date);
 
@@ -357,7 +361,9 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var calendarProps = (0, _react.useMemo)(function () {
     return (0, _mapValues.default)((0, _pick.default)(props, _utils.DateUtils.calendarOnlyProps), function (disabledOrHiddenTimeFunc) {
       return function (next, date) {
-        return disabledOrHiddenTimeFunc(next, date);
+        var _disabledOrHiddenTime;
+
+        return (_disabledOrHiddenTime = disabledOrHiddenTimeFunc === null || disabledOrHiddenTimeFunc === void 0 ? void 0 : disabledOrHiddenTimeFunc(next, date)) !== null && _disabledOrHiddenTime !== void 0 ? _disabledOrHiddenTime : false;
       };
     });
   }, [props]);
@@ -433,7 +439,7 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
 
     return (_renderValue = renderValue === null || renderValue === void 0 ? void 0 : renderValue(value, formatStr)) !== null && _renderValue !== void 0 ? _renderValue : formatDate(value, formatStr);
   }, [formatStr, formatDate, placeholder, renderValue, value]);
-  var caretComponent = (0, _react.useMemo)(function () {
+  var caretAs = (0, _react.useMemo)(function () {
     return _utils.DateUtils.shouldOnlyTime(formatStr) ? _ClockO.default : _Calendar.default;
   }, [formatStr]);
   return /*#__PURE__*/_react.default.createElement(_Picker.PickerToggleTrigger, {
@@ -469,7 +475,7 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     active: active,
     placement: placement,
     disabled: disabled,
-    caretComponent: caretComponent
+    caretAs: caretAs
   }), renderDate())));
 });