rsuite 5.2.2 → 5.4.0

package/cjs/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/cjs/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/cjs/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/cjs/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/cjs/utils/treeUtils.js

@@ -33,6 +33,7 @@ exports.useTreeSearch = useTreeSearch;
 exports.useGetTreeNodeChildren = useGetTreeNodeChildren;
 exports.focusToActiveTreeNode = focusToActiveTreeNode;
 exports.isSearching = isSearching;
+exports.getTreeNodeIndent = getTreeNodeIndent;
 exports.getScrollToIndex = exports.focusPreviousItem = exports.focusNextItem = exports.focusTreeNode = exports.getElementByDataKey = exports.getActiveItem = exports.getActiveIndex = exports.getFocusableItems = void 0;
 
 var _extends3 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
@@ -63,6 +64,8 @@ var _Picker = require("../Picker");
 
 var _reactToString = _interopRequireDefault(require("./reactToString"));
 
+var _constants = require("./constants");
+
 // gap of tree node
 var TREE_NODE_GAP = 4;
 /**
@@ -659,24 +662,21 @@ function getExpandWhenSearching(searchKeyword, expand) {
 }
 
 function getTreeActiveNode(nodes, value, valueKey) {
-  var activeNode = null;
-
-  if (!(0, _isUndefined2.default)(value)) {
-    Object.keys(nodes).forEach(function (refKey) {
-      if ((0, _utils2.shallowEqual)(nodes[refKey][valueKey], value)) {
-        activeNode = nodes[refKey];
-      }
-    });
+  if ((0, _isUndefined2.default)(value)) {
+    return undefined;
   }
 
-  return activeNode;
+  for (var refKey in nodes) {
+    if ((0, _utils2.shallowEqual)(nodes[refKey][valueKey], value)) {
+      return nodes[refKey];
+    }
+  }
 }
+
 /**
  * toggle tree node
  * @param param0
  */
-
-
 function toggleExpand(_ref7) {
   var node = _ref7.node,
       isExpand = _ref7.isExpand,
@@ -710,7 +710,7 @@ function getTreeNodeTitle(label) {
 
 
 function getChildrenByFlattenNodes(nodes, parent) {
-  if ((0, _isNil2.default)(nodes[parent.refKey])) {
+  if (!(0, _isNil2.default)(parent.refKey) && (0, _isNil2.default)(nodes[parent.refKey])) {
     return [];
   }
 
@@ -794,7 +794,7 @@ function useFlattenTreeData(_ref8) {
       node.refKey = refKey;
       flattenNodes[refKey] = (0, _extends3.default)((_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 (0, _utils2.shallowEqual)(node[valueKey], value);
       }), _extends2), node);
 
@@ -811,10 +811,8 @@ 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 (!(0, _isNil2.default)(currentNode.parent) && !(0, _isNil2.default)(currentNode.parent.refKey)) {
+        var parentNode = nodes[currentNode.parent.refKey];
 
         if (currentNode[key]) {
           if (!(parentNode !== null && parentNode !== void 0 && parentNode.checkAll)) {
@@ -846,7 +844,7 @@ function useFlattenTreeData(_ref8) {
     Object.keys(nodes).forEach(function (refKey) {
       var node = nodes[refKey];
 
-      if (cascade && node.parent) {
+      if (cascade && !(0, _isNil2.default)(node.parent) && !(0, _isNil2.default)(node.parent.refKey)) {
         node[key] = nodes[node.parent.refKey][key];
       } else {
         node[key] = false;
@@ -928,8 +926,8 @@ function useFlattenTreeData(_ref8) {
 function useTreeNodeRefs() {
   var treeNodeRefs = (0, _react.useRef)({});
 
-  var saveTreeNodeRef = function saveTreeNodeRef(refKey, ref) {
-    if (refKey) {
+  var saveTreeNodeRef = function saveTreeNodeRef(ref, refKey) {
+    if (!(0, _isNil2.default)(refKey)) {
       treeNodeRefs.current[refKey] = ref;
     }
   };
@@ -971,11 +969,15 @@ function useTreeSearch(props) {
     return data;
   }, [childrenKey, labelKey, searchBy]); // Use search keywords to filter options.
 
-  var _useState5 = (0, _react.useState)(searchKeyword !== null && searchKeyword !== void 0 ? searchKeyword : ''),
+  var _useState5 = (0, _react.useState)(function () {
+    return searchKeyword !== null && searchKeyword !== void 0 ? searchKeyword : '';
+  }),
       searchKeywordState = _useState5[0],
       setSearchKeyword = _useState5[1];
 
-  var _useState6 = (0, _react.useState)(filterVisibleData(data, searchKeywordState)),
+  var _useState6 = (0, _react.useState)(function () {
+    return filterVisibleData(data, searchKeywordState);
+  }),
       filteredData = _useState6[0],
       setFilteredData = _useState6[1];
 
@@ -1068,8 +1070,10 @@ 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;
   }
 
@@ -1084,4 +1088,23 @@ function focusToActiveTreeNode(_ref10) {
 
 function isSearching(searchKeyword) {
   return !(0, _isEmpty2.default)(searchKeyword);
+}
+
+function getTreeNodeIndent(rtl, layer, absolute) {
+  var _ref12;
+
+  if (absolute === void 0) {
+    absolute = false;
+  }
+
+  // layer start from 1
+  var offset = layer * _constants.TREE_NODE_PADDING + _constants.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/cjs/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/cjs/utils/useControlled.js

@@ -5,14 +5,6 @@ exports.default = void 0;
 
 var _react = require("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 = (0, _react.useRef)(false);
   controlledRef.current = controlledValue !== undefined;

package/cjs/utils/useCustom.js

@@ -32,6 +32,8 @@ var getDefaultRTL = function getDefaultRTL() {
 
 
 function useCustom(keys, overrideLocale) {
+  var _locale$Calendar2, _locale$Calendar4;
+
   var _useContext = (0, _react.useContext)(_CustomProvider.CustomContext),
       _useContext$locale = _useContext.locale,
       locale = _useContext$locale === void 0 ? _default2.default : _useContext$locale,
@@ -54,14 +56,14 @@ function useCustom(keys, overrideLocale) {
     return (0, _dateUtils.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 = (0, _react.useCallback)(function (dateString, formatString) {
-    var _locale$Calendar2;
+    var _locale$Calendar3;
 
     return (0, _dateUtils.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/cjs/utils/useElementResize.js

@@ -17,9 +17,12 @@ var _resizeObserver = require("@juggle/resize-observer");
 function useElementResize(eventTarget, listener) {
   var resizeObserver = (0, _react.useRef)();
   (0, _react.useEffect)(function () {
-    var target = typeof eventTarget === 'function' ? eventTarget() : eventTarget;
-    resizeObserver.current = new _resizeObserver.ResizeObserver(listener);
-    resizeObserver.current.observe(target);
+    if (!resizeObserver.current) {
+      var target = typeof eventTarget === 'function' ? eventTarget() : eventTarget;
+      resizeObserver.current = new _resizeObserver.ResizeObserver(listener);
+      resizeObserver.current.observe(target);
+    }
+
     return function () {
       var _resizeObserver$curre;
 

package/cjs/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/cjs/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/cjs/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/cjs/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/cjs/utils/useTimeout.js

@@ -25,9 +25,11 @@ function useTimeout(fn, ms, open) {
     timeout.current && clearTimeout(timeout.current);
   }, []);
   var set = (0, _react.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]);
   (0, _react.useEffect)(function () {
     set();