rsuite 5.2.4 → 5.4.2

package/esm/utils/appendTooltip.d.ts

@@ -3,7 +3,7 @@ import { TypeAttributes } from '../@types/common';
 interface Props {
     ref?: React.Ref<any>;
     message?: React.ReactNode;
-    children?: React.ReactElement | ((props: any, ref: any) => React.ReactElement);
+    children: React.ReactElement | ((props: any, ref: any) => React.ReactElement);
     placement?: TypeAttributes.Placement;
 }
 export default function appendTooltip({ message, ref, ...rest }: Props): JSX.Element;

package/esm/utils/constants.d.ts

@@ -1,10 +1,10 @@
 export declare const SIZE: string[];
 export declare const STATUS: string[];
 export declare const COLOR: string[];
-export declare const PLACEMENT_4: string[];
-export declare const PLACEMENT_8: string[];
-export declare const PLACEMENT_AUTO: string[];
-export declare const PLACEMENT: any[];
+export declare const PLACEMENT_4: readonly ["top", "bottom", "right", "left"];
+export declare const PLACEMENT_8: readonly ["bottomStart", "bottomEnd", "topStart", "topEnd", "leftStart", "rightStart", "leftEnd", "rightEnd"];
+export declare const PLACEMENT_AUTO: readonly ["auto", "autoVertical", "autoVerticalStart", "autoVerticalEnd", "autoHorizontal", "autoHorizontalStart", "autoHorizontalEnd"];
+export declare const PLACEMENT: readonly ["top", "bottom", "right", "left", "bottomStart", "bottomEnd", "topStart", "topEnd", "leftStart", "rightStart", "leftEnd", "rightEnd", "auto", "autoVertical", "autoVerticalStart", "autoVerticalEnd", "autoHorizontal", "autoHorizontalStart", "autoHorizontalEnd"];
 /**
  *  Check Tree Node State
  */

package/esm/utils/createChainedFunction.d.ts

@@ -11,5 +11,5 @@
  * @param {function} functions to chain
  * @returns {function|undefined}
  */
-declare function createChainedFunction<T = any>(...funcs: T[]): T;
+declare function createChainedFunction<T = any>(...funcs: (T | null)[]): T;
 export default createChainedFunction;

package/esm/utils/getDataGroupBy.d.ts

@@ -1,3 +1,3 @@
 export declare const KEY_GROUP: string | symbol;
 export declare const KEY_GROUP_TITLE = "groupTitle";
-export default function getDataGroupBy(data: any[], key: string, sort: any): any[];
+export default function getDataGroupBy(data: any[] | undefined, key: string, sort: any): any[];

package/esm/utils/index.d.ts

@@ -40,3 +40,4 @@ export { default as useUpdatedRef } from './useUpdatedRef';
 export { default as useWillUnmount } from './useWillUnmount';
 export { default as useUpdateEffect } from './useUpdateEffect';
 export { default as useIsMounted } from './useIsMounted';
+export { default as useMount } from './useMount';

package/esm/utils/index.js

@@ -42,4 +42,5 @@ export { default as useEventCallback } from './useEventCallback';
 export { default as useUpdatedRef } from './useUpdatedRef';
 export { default as useWillUnmount } from './useWillUnmount';
 export { default as useUpdateEffect } from './useUpdateEffect';
-export { default as useIsMounted } from './useIsMounted';
+export { default as useIsMounted } from './useIsMounted';
+export { default as useMount } from './useMount';

package/esm/utils/mergeRefs.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
+import React from 'react';
 declare type CallbackRef<T> = (ref: T | null) => void;
 declare type Ref<T> = React.MutableRefObject<T> | CallbackRef<T>;
-export default function mergeRefs<T>(refA?: Ref<T> | null, refB?: Ref<T> | null): (value: T | null) => void;
+export default function mergeRefs<T>(refA?: Ref<T | null> | null, refB?: Ref<T | null> | null): React.RefCallback<T>;
 export {};

package/esm/utils/previewFile.d.ts

@@ -1,3 +1,3 @@
 export declare function isImage(file: any): boolean;
-declare const _default: (file: File, callback: (result: string | ArrayBuffer) => void) => void;
+declare const _default: (file: File, callback: (result: string | ArrayBuffer | null) => void) => void;
 export default _default;

package/esm/utils/propTypeChecker.d.ts

@@ -1,3 +1,7 @@
-import PropTypes from 'prop-types';
-export declare function tupleType(...types: any[]): any;
+import PropTypes, { Requireable, Validator } from 'prop-types';
+declare type ExtractValue<T extends ReadonlyArray<Validator<any>>> = {
+    [K in keyof T]: T[K] extends Validator<infer V> ? V : never;
+};
+export declare function tupleType<T extends readonly Validator<any>[]>(...types: T): Requireable<ExtractValue<T>>;
 export declare const refType: PropTypes.Requireable<any>;
+export {};

package/esm/utils/propTypeChecker.js

@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 var ANONYMOUS = '';
 
 function createChainableTypeChecker(validate) {
-  function checkType(isRequired, props, propName, componentName, location, propFullName, secret) {
+  function checkType(isRequired, props, propName, componentName, location, propFullName) {
     componentName = componentName || ANONYMOUS;
     propFullName = propFullName || propName;
 
@@ -17,12 +17,13 @@ function createChainableTypeChecker(validate) {
 
       return null;
     } else {
-      return validate(props, propName, componentName, location, propFullName, secret);
+      return validate(props, propName, componentName, location, propFullName);
     }
   }
 
-  var chainedCheckType = checkType.bind(null, false);
-  chainedCheckType.isRequired = checkType.bind(null, true);
+  var chainedCheckType = Object.assign(checkType.bind(null, false), {
+    isRequired: checkType.bind(null, true)
+  });
   return chainedCheckType;
 }
 
@@ -31,7 +32,7 @@ export function tupleType() {
     types[_key] = arguments[_key];
   }
 
-  return createChainableTypeChecker(function (props, propName, componentName, location, propFullName, secret) {
+  return createChainableTypeChecker(function (props, propName, componentName, location, propFullName) {
     var value = props[propName];
 
     if (!location) {
@@ -55,7 +56,7 @@ export function tupleType() {
     }
 
     for (var i = 0; i < value.length; ++i) {
-      var error = types[i](value, i, componentName, 'element', propFullName + "[" + i + "]", secret);
+      var error = types[i](value, String(i), componentName, 'element', propFullName + "[" + i + "]");
 
       if (error) {
         return error;

package/esm/utils/reactToString.d.ts

@@ -1 +1,2 @@
-export default function reactToString(element: any): any[];
+import React from 'react';
+export default function reactToString(element: React.ReactElement): string[];

package/esm/utils/statusIcons.d.ts

@@ -7,6 +7,6 @@ export declare const MESSAGE_STATUS_ICONS: {
 };
 export declare const PROGRESS_STATUS_ICON: {
     success: JSX.Element;
-    active: any;
+    active: null;
     fail: JSX.Element;
 };

package/esm/utils/stringToObject.d.ts

@@ -1,2 +1,2 @@
-declare const _default: (value: any, labelKey?: string, valueKey?: string) => object;
+declare const _default: (value: any, labelKey?: string | undefined, valueKey?: string | undefined) => object | null;
 export default _default;

package/esm/utils/treeUtils.d.ts

@@ -30,7 +30,7 @@ export declare function getNodeParents(node: any, parentKey?: string, valueKey?:
  * @param node
  * @param valueKey
  */
-export declare function getNodeParentKeys(nodes: TreeNodesType, node: TreeNodeType, valueKey: string): any[];
+export declare function getNodeParentKeys(nodes: TreeNodesType, node: TreeNodeType, valueKey: string): TreeNodeType[];
 export declare function hasVisibleChildren(node: TreeNodeType, childrenKey: string): any;
 /**
  * shallow equal array
@@ -61,7 +61,7 @@ export declare function createUpdateTreeDataFunction(params: any, { valueKey, ch
     childrenKey: any;
 }): (tree: any[]) => any[];
 export declare function findNodeOfTree(data: any, check: any): any;
-export declare function filterNodesOfTree(data: any, check: any): any[];
+export declare function filterNodesOfTree(data: any, check: any): TreeNodeType[];
 /**
  * get all focusable items
  * exclude not visible and disabled node
@@ -70,7 +70,7 @@ export declare function filterNodesOfTree(data: any, check: any): any[];
  * @param isSearching - component is in Searching
  * @returns
  */
-export declare const getFocusableItems: (filteredData: ItemDataType[], props: PartialTreeProps, isSearching?: boolean) => any[];
+export declare const getFocusableItems: (filteredData: ItemDataType[], props: PartialTreeProps, isSearching?: boolean | undefined) => TreeNodeType[];
 /**
  * return all focusable Item and active Element index
  * @param focusItemValue
@@ -82,7 +82,7 @@ export declare const getActiveIndex: (focusItemValue: any, focusItems: any[], va
  * @param flattenNodes - flattenData
  */
 export declare const getActiveItem: (focusItemValue: string | number, flattenNodes: TreeNodesType, valueKey: string) => any;
-export declare const getElementByDataKey: (dataKey: string, treeNodesRefs: any, selector: string) => Element;
+export declare const getElementByDataKey: (dataKey: string, treeNodesRefs: any, selector: string) => Element | null;
 /**
  * focus to specify tree node
  * @param refKey - target node refKey
@@ -91,7 +91,7 @@ export declare const getElementByDataKey: (dataKey: string, treeNodesRefs: any,
  */
 export declare const focusTreeNode: (refKey: string, treeNodeRefs: any, selector: string) => void;
 export interface FocusPrevOrNextProps {
-    focusItemValue: string | number;
+    focusItemValue: string | number | null;
     focusableItems: any[];
     treeNodesRefs: any;
     selector: string;
@@ -111,7 +111,7 @@ export declare const focusPreviousItem: ({ focusItemValue, focusableItems, treeN
 export interface ArrowHandlerProps {
     focusItem: TreeNodeType;
     expand: boolean;
-    childrenKey?: string;
+    childrenKey: string;
     onExpand: (focusItem: TreeNodeType) => void;
     onFocusItem: () => void;
 }
@@ -137,20 +137,21 @@ export declare function rightArrowHandler({ focusItem, expand, childrenKey, onEx
  * @param value - activeItem value
  * @param valueKey
  */
-export declare const getScrollToIndex: (nodes: TreeNodeType[], value: string | number, valueKey: string) => number;
+export declare const getScrollToIndex: (nodes: readonly TreeNodeType[], value: string | number, valueKey: string) => number;
 /**
  * when searching, expand state always return true
  * @param searchKeyword
  * @param expand
  */
 export declare function getExpandWhenSearching(searchKeyword: string, expand: boolean): boolean;
-export declare function getTreeActiveNode(nodes: TreeNodesType, value: number | string, valueKey: string): any;
+declare function getTreeActiveNode<T extends number | string | undefined>(nodes: TreeNodesType, value: T, valueKey: string): T extends undefined ? undefined : TreeNodeType | undefined;
+export { getTreeActiveNode };
 /**
  * toggle tree node
  * @param param0
  */
-export declare function toggleExpand({ node, isExpand, expandItemValues, valueKey }: any): unknown[];
-export declare function getTreeNodeTitle(label: any): string;
+export declare function toggleExpand({ node, isExpand, expandItemValues, valueKey }: any): ItemDataType<string | number>[];
+export declare function getTreeNodeTitle(label: any): string | undefined;
 /**
  * get all children from flattenNodes object by given parent node
  * @param nodes
@@ -158,14 +159,14 @@ export declare function getTreeNodeTitle(label: any): string;
  */
 export declare function getChildrenByFlattenNodes(nodes: TreeNodesType, parent: TreeNodeType): TreeNodeType[];
 export declare function useTreeDrag(): {
-    dragNode: any;
-    dragOverNodeKey: any;
-    dragNodeKeys: any[];
-    dropNodePosition: TREE_NODE_DROP_POSITION;
-    setDragNode: (node: ItemDataType) => void;
-    setDragOverNodeKey: React.Dispatch<any>;
-    setDragNodeKeys: React.Dispatch<React.SetStateAction<any[]>>;
-    setDropNodePosition: React.Dispatch<React.SetStateAction<TREE_NODE_DROP_POSITION>>;
+    dragNode: ItemDataType<string | number> | null;
+    dragOverNodeKey: null;
+    dragNodeKeys: (string | number)[];
+    dropNodePosition: TREE_NODE_DROP_POSITION | null;
+    setDragNode: (node: ItemDataType | null) => void;
+    setDragOverNodeKey: React.Dispatch<React.SetStateAction<null>>;
+    setDragNodeKeys: React.Dispatch<React.SetStateAction<(string | number)[]>>;
+    setDropNodePosition: React.Dispatch<React.SetStateAction<TREE_NODE_DROP_POSITION | null>>;
 };
 interface FlattenTreeDataProps {
     data: TreeNodeType[];
@@ -189,44 +190,44 @@ interface UnSerializeListProps {
 export declare function useFlattenTreeData({ data, labelKey, valueKey, childrenKey, uncheckableItemValues, callback }: FlattenTreeDataProps): {
     forceUpdate: () => void;
     flattenNodes: TreeNodesType;
-    flattenTreeData: (treeData: TreeNodeType[], ref: string, parent?: TreeNodeType, layer?: any) => any[];
-    serializeListOnlyParent: (nodes: TreeNodesType, key: string) => any[];
+    flattenTreeData: (treeData: TreeNodeType[], ref: string, parent?: TreeNodeType | undefined, layer?: any) => never[] | undefined;
+    serializeListOnlyParent: (nodes: TreeNodesType, key: string) => (string | number)[];
     unSerializeList: ({ nodes, key, value, cascade, uncheckableItemValues }: UnSerializeListProps) => void;
     formatVirtualizedTreeData: (nodes: TreeNodesType, data: any[], expandItemValues: ItemDataType[], options: {
         cascade?: boolean;
         searchKeyword?: string;
-    }) => any[];
+    }) => TreeNodeType[];
 };
 /**
  * A hook that saving every tree node ref
  */
 export declare function useTreeNodeRefs(): {
     treeNodesRefs: {};
-    saveTreeNodeRef: (refKey: string, ref: React.Ref<any>) => void;
+    saveTreeNodeRef: (ref: React.Ref<any>, refKey?: string | undefined) => void;
 };
 interface TreeSearchProps {
     labelKey: string;
     childrenKey: string;
-    searchKeyword: string;
+    searchKeyword?: string;
     data: ItemDataType[];
-    searchBy: (keyword: any, label: any, item: any) => boolean;
+    searchBy?: (keyword: any, label: any, item: any) => boolean;
     callback?: (keyword: string, data: ItemDataType[], event: React.SyntheticEvent) => void;
 }
 /**
  * A hook that handles tree search filter options
  * @param props
  */
-export declare function useTreeSearch(props: TreeSearchProps): {
+export declare function useTreeSearch<T extends HTMLElement = HTMLInputElement>(props: TreeSearchProps): {
     searchKeywordState: string;
-    filteredData: ItemDataType[];
+    filteredData: ItemDataType<string | number>[];
     setFilteredData: (data: ItemDataType[], searchKeyword: string) => void;
     setSearchKeyword: React.Dispatch<React.SetStateAction<string>>;
-    handleSearch: (searchKeyword: string, event: React.SyntheticEvent) => void;
+    handleSearch: (searchKeyword: string, event: React.ChangeEvent<T>) => void;
 };
 export declare function useGetTreeNodeChildren(treeData: ItemDataType[], valueKey: string, childrenKey: string): {
-    data: ItemDataType[];
-    setData: React.Dispatch<React.SetStateAction<ItemDataType[]>>;
-    loadingNodeValues: any[];
+    data: ItemDataType<string | number>[];
+    setData: React.Dispatch<React.SetStateAction<ItemDataType<string | number>[]>>;
+    loadingNodeValues: never[];
     loadChildren: (node: any, getChildren: any) => void;
 };
 export interface FocusToTreeNodeProps {
@@ -236,7 +237,7 @@ export interface FocusToTreeNodeProps {
     virtualized: boolean;
     container: HTMLDivElement;
     list: ListInstance;
-    formattedNodes: TreeNodesType[];
+    formattedNodes: TreeNodeType[];
 }
 /**
  * Focus to active tree node.
@@ -244,4 +245,6 @@ export interface FocusToTreeNodeProps {
  */
 export declare function focusToActiveTreeNode({ list, valueKey, activeNode, virtualized, container, selector, formattedNodes }: FocusToTreeNodeProps): void;
 export declare function isSearching(searchKeyword?: string): boolean;
-export {};
+export declare function getTreeNodeIndent(rtl: any, layer: any, absolute?: boolean): {
+    [x: string]: number;
+};

package/esm/utils/treeUtils.js

@@ -12,6 +12,7 @@ import { getNodeCheckState } from '../CheckTreePicker/utils';
 import { TREE_NODE_DROP_POSITION, shallowEqual } from '../utils';
 import { shouldDisplay } from '../Picker';
 import reactToString from './reactToString';
+import { TREE_NODE_PADDING, TREE_NODE_ROOT_PADDING } from './constants';
 // gap of tree node
 var TREE_NODE_GAP = 4;
 /**
@@ -568,19 +569,20 @@ export var getScrollToIndex = function getScrollToIndex(nodes, value, valueKey)
 export function getExpandWhenSearching(searchKeyword, expand) {
   return isSearching(searchKeyword) ? true : expand;
 }
-export function getTreeActiveNode(nodes, value, valueKey) {
-  var activeNode = null;
 
-  if (!_isUndefined(value)) {
-    Object.keys(nodes).forEach(function (refKey) {
-      if (shallowEqual(nodes[refKey][valueKey], value)) {
-        activeNode = nodes[refKey];
-      }
-    });
+function getTreeActiveNode(nodes, value, valueKey) {
+  if (_isUndefined(value)) {
+    return undefined;
   }
 
-  return activeNode;
+  for (var refKey in nodes) {
+    if (shallowEqual(nodes[refKey][valueKey], value)) {
+      return nodes[refKey];
+    }
+  }
 }
+
+export { getTreeActiveNode };
 /**
  * toggle tree node
  * @param param0
@@ -617,7 +619,7 @@ export function getTreeNodeTitle(label) {
  */
 
 export function getChildrenByFlattenNodes(nodes, parent) {
-  if (_isNil(nodes[parent.refKey])) {
+  if (!_isNil(parent.refKey) && _isNil(nodes[parent.refKey])) {
     return [];
   }
 
@@ -700,7 +702,7 @@ export function useFlattenTreeData(_ref8) {
       node.refKey = refKey;
       flattenNodes[refKey] = _extends((_extends2 = {
         layer: layer
-      }, _extends2[labelKey] = node[labelKey], _extends2[valueKey] = node[valueKey], _extends2.refKey = refKey, _extends2.uncheckable = uncheckableItemValues.some(function (value) {
+      }, _extends2[labelKey] = node[labelKey], _extends2[valueKey] = node[valueKey], _extends2.uncheckable = uncheckableItemValues.some(function (value) {
         return shallowEqual(node[valueKey], value);
       }), _extends2), node);
 
@@ -717,10 +719,8 @@ export function useFlattenTreeData(_ref8) {
     Object.keys(nodes).forEach(function (refKey) {
       var currentNode = nodes[refKey];
 
-      if (currentNode.parent) {
-        var _currentNode$parent;
-
-        var parentNode = nodes[(_currentNode$parent = currentNode.parent) === null || _currentNode$parent === void 0 ? void 0 : _currentNode$parent.refKey];
+      if (!_isNil(currentNode.parent) && !_isNil(currentNode.parent.refKey)) {
+        var parentNode = nodes[currentNode.parent.refKey];
 
         if (currentNode[key]) {
           if (!(parentNode !== null && parentNode !== void 0 && parentNode.checkAll)) {
@@ -752,7 +752,7 @@ export function useFlattenTreeData(_ref8) {
     Object.keys(nodes).forEach(function (refKey) {
       var node = nodes[refKey];
 
-      if (cascade && node.parent) {
+      if (cascade && !_isNil(node.parent) && !_isNil(node.parent.refKey)) {
         node[key] = nodes[node.parent.refKey][key];
       } else {
         node[key] = false;
@@ -833,8 +833,8 @@ export function useFlattenTreeData(_ref8) {
 export function useTreeNodeRefs() {
   var treeNodeRefs = useRef({});
 
-  var saveTreeNodeRef = function saveTreeNodeRef(refKey, ref) {
-    if (refKey) {
+  var saveTreeNodeRef = function saveTreeNodeRef(ref, refKey) {
+    if (!_isNil(refKey)) {
       treeNodeRefs.current[refKey] = ref;
     }
   };
@@ -876,11 +876,15 @@ export function useTreeSearch(props) {
     return data;
   }, [childrenKey, labelKey, searchBy]); // Use search keywords to filter options.
 
-  var _useState5 = useState(searchKeyword !== null && searchKeyword !== void 0 ? searchKeyword : ''),
+  var _useState5 = useState(function () {
+    return searchKeyword !== null && searchKeyword !== void 0 ? searchKeyword : '';
+  }),
       searchKeywordState = _useState5[0],
       setSearchKeyword = _useState5[1];
 
-  var _useState6 = useState(filterVisibleData(data, searchKeywordState)),
+  var _useState6 = useState(function () {
+    return filterVisibleData(data, searchKeywordState);
+  }),
       filteredData = _useState6[0],
       setFilteredData = _useState6[1];
 
@@ -972,8 +976,10 @@ export function focusToActiveTreeNode(_ref10) {
   if (!container) return;
 
   if (virtualized && activeNode) {
+    var _list$scrollToRow;
+
     var scrollIndex = getScrollToIndex(formattedNodes, activeNode === null || activeNode === void 0 ? void 0 : activeNode[valueKey], valueKey);
-    list.scrollToRow(scrollIndex);
+    (_list$scrollToRow = list.scrollToRow) === null || _list$scrollToRow === void 0 ? void 0 : _list$scrollToRow.call(list, scrollIndex);
     return;
   }
 
@@ -987,4 +993,22 @@ export function focusToActiveTreeNode(_ref10) {
 }
 export function isSearching(searchKeyword) {
   return !_isEmpty(searchKeyword);
+}
+export function getTreeNodeIndent(rtl, layer, absolute) {
+  var _ref12;
+
+  if (absolute === void 0) {
+    absolute = false;
+  }
+
+  // layer start from 1
+  var offset = layer * TREE_NODE_PADDING + TREE_NODE_ROOT_PADDING;
+
+  if (absolute) {
+    var _ref11;
+
+    return _ref11 = {}, _ref11[rtl ? 'right' : 'left'] = offset, _ref11;
+  }
+
+  return _ref12 = {}, _ref12[rtl ? 'paddingRight' : 'paddingLeft'] = offset, _ref12;
 }

package/esm/utils/useControlled.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+declare type InferDefined<T> = T extends infer U | undefined ? U : never;
 /**
  * A hook for controlled value management.
  * In the case of passing the controlled value, the controlled value is returned, otherwise the value in state is returned.
@@ -7,5 +8,9 @@
  * @param defaultValue
  * @param formatValue
  */
-declare function useControlled<T = any>(controlledValue: T, defaultValue: T): [T, (value: React.SetStateAction<T>) => void, boolean];
+declare function useControlled<V = any, D = V>(controlledValue: V, defaultValue: D): [
+    V extends undefined ? D : InferDefined<V>,
+    (value: React.SetStateAction<V | null>) => void,
+    boolean
+];
 export default useControlled;

package/esm/utils/useControlled.js

@@ -1,12 +1,4 @@
 import { useRef, useState, useCallback } from 'react';
-/**
- * A hook for controlled value management.
- * In the case of passing the controlled value, the controlled value is returned, otherwise the value in state is returned.
- * Generally used for a component including controlled and uncontrolled modes.
- * @param controlledValue
- * @param defaultValue
- * @param formatValue
- */
 
 function useControlled(controlledValue, defaultValue) {
   var controlledRef = useRef(false);

package/esm/utils/useCustom.js

@@ -21,6 +21,8 @@ var getDefaultRTL = function getDefaultRTL() {
 
 
 function useCustom(keys, overrideLocale) {
+  var _locale$Calendar2, _locale$Calendar4;
+
   var _useContext = useContext(CustomContext),
       _useContext$locale = _useContext.locale,
       locale = _useContext$locale === void 0 ? defaultLocale : _useContext$locale,
@@ -44,14 +46,14 @@ function useCustom(keys, overrideLocale) {
     return format(date, formatStr, {
       locale: locale === null || locale === void 0 ? void 0 : (_locale$Calendar = locale.Calendar) === null || _locale$Calendar === void 0 ? void 0 : _locale$Calendar.dateLocale
     });
-  }, [locale.Calendar.dateLocale]);
+  }, [(_locale$Calendar2 = locale.Calendar) === null || _locale$Calendar2 === void 0 ? void 0 : _locale$Calendar2.dateLocale]);
   var defaultParseDate = useCallback(function (dateString, formatString) {
-    var _locale$Calendar2;
+    var _locale$Calendar3;
 
     return parse(dateString, formatString, new Date(), {
-      locale: locale === null || locale === void 0 ? void 0 : (_locale$Calendar2 = locale.Calendar) === null || _locale$Calendar2 === void 0 ? void 0 : _locale$Calendar2.dateLocale
+      locale: locale === null || locale === void 0 ? void 0 : (_locale$Calendar3 = locale.Calendar) === null || _locale$Calendar3 === void 0 ? void 0 : _locale$Calendar3.dateLocale
     });
-  }, [locale.Calendar.dateLocale]);
+  }, [(_locale$Calendar4 = locale.Calendar) === null || _locale$Calendar4 === void 0 ? void 0 : _locale$Calendar4.dateLocale]);
   return {
     locale: componentLocale,
     rtl: rtl,

package/esm/utils/useFocus.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-export default function useFocus<E extends HTMLElement>(elementRef: React.MutableRefObject<E>): {
+export default function useFocus<E extends HTMLElement>(elementRef: React.RefObject<E>): {
     grab: () => void;
-    release: (options?: FocusOptions) => void;
+    release: (options?: FocusOptions | undefined) => void;
 };

package/esm/utils/useMount.d.ts

@@ -0,0 +1,2 @@
+declare const useMount: (callback: () => void) => void;
+export default useMount;

package/esm/utils/useMount.js

@@ -0,0 +1,13 @@
+import { useEffect, useRef } from 'react';
+
+var useMount = function useMount(callback) {
+  var mountRef = useRef(callback);
+  mountRef.current = callback;
+  useEffect(function () {
+    var _mountRef$current;
+
+    (_mountRef$current = mountRef.current) === null || _mountRef$current === void 0 ? void 0 : _mountRef$current.call(mountRef);
+  }, []);
+};
+
+export default useMount;

package/esm/utils/usePortal.d.ts

@@ -1,10 +1,10 @@
 import React from 'react';
 interface PortalProps {
     id?: string;
-    container?: HTMLElement | (() => HTMLElement);
+    container?: HTMLElement | (() => HTMLElement | null) | null;
 }
 declare function usePortal(props?: PortalProps): {
-    target: Element | HTMLElement;
+    target: HTMLElement | null;
     Portal: React.FC<any>;
 };
 export default usePortal;

package/esm/utils/useRootClose.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 declare type TargetType = React.RefObject<Element> | Element | null | undefined;
 interface Options {
     disabled: boolean;
@@ -16,5 +16,5 @@ interface Options {
  * @param param1
  * @todo Allow different behaviors based on whether clicked element is focusable
  */
-declare function useRootClose(onRootClose: (e: Event) => void, { disabled, triggerTarget, overlayTarget, listenEscape }: Options): void;
+declare function useRootClose(onRootClose: React.ReactEventHandler | undefined, { disabled, triggerTarget, overlayTarget, listenEscape }: Options): void;
 export default useRootClose;

package/esm/utils/useTimeout.d.ts

@@ -8,5 +8,5 @@ export interface UseTimeoutFnReturn {
  * @param ms Milliseconds of the timer
  * @param open Whether to open the timer
  */
-declare function useTimeout(fn: () => void, ms?: number, open?: boolean): UseTimeoutFnReturn;
+declare function useTimeout(fn: (() => void) | undefined, ms?: number, open?: boolean): UseTimeoutFnReturn;
 export default useTimeout;

package/esm/utils/useTimeout.js

@@ -20,9 +20,11 @@ function useTimeout(fn, ms, open) {
     timeout.current && clearTimeout(timeout.current);
   }, []);
   var set = useCallback(function () {
-    timeout.current = open && setTimeout(function () {
-      return fn === null || fn === void 0 ? void 0 : fn();
-    }, ms);
+    if (open) {
+      timeout.current = setTimeout(function () {
+        return fn === null || fn === void 0 ? void 0 : fn();
+      }, ms);
+    }
   }, [ms, fn, open]);
   useEffect(function () {
     set();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rsuite",
-  "version": "5.2.4",
+  "version": "5.4.2",
   "description": "A suite of react components",
   "main": "cjs/index.js",
   "module": "esm/index.js",
@@ -29,7 +29,7 @@
     "@rsuite/icons": "^1.0.2",
     "@types/chai": "^4.2.18",
     "@types/lodash": "^4.14.134",
-    "@types/prop-types": "^15.7.1",
+    "@types/prop-types": "^15.7.4",
     "@types/react-virtualized": "^9.21.11",
     "classnames": "^2.3.1",
     "date-fns": "^2.13.0",

package/styles/index.less

@@ -4,6 +4,7 @@
 @import '../Animation/styles/index';
 @import '../AutoComplete/styles/index';
 @import '../Avatar/styles/index';
+@import '../AvatarGroup/styles/index';
 @import '../Badge/styles/index';
 @import '../Breadcrumb/styles/index';
 @import '../Button/styles/index';
@@ -74,3 +75,4 @@
 @import '../Rate/styles/index';
 @import '../toaster/styles/index';
 @import '../CloseButton/styles/index';
+@import '../Stack/styles/index';