rsuite 5.2.1 → 5.3.0

package/cjs/Uploader/Uploader.d.ts

@@ -21,7 +21,7 @@ export interface UploaderInstance {
 }
 export interface UploaderProps extends WithAsProps {
     /** Uploading URL */
-    action?: string;
+    action: string;
     /** File types that can be accepted. See input accept Attribute */
     accept?: string;
     /** Automatically upload files after selecting them */
@@ -62,7 +62,7 @@ export interface UploaderProps extends WithAsProps {
     /** Max file size limit of the preview file */
     maxPreviewFileSize?: number;
     /** You can use a custom element for this component */
-    toggleAs?: React.ElementType | string;
+    toggleAs?: React.ElementType;
     /** Removable list file  */
     removable?: boolean;
     /** File list can be rendered */
@@ -84,11 +84,11 @@ export interface UploaderProps extends WithAsProps {
     /** In the file list, click the callback function for the uploaded file */
     onPreview?: (file: FileType, event: React.SyntheticEvent) => void;
     /** Upload callback function with erro */
-    onError?: (status: any, file: FileType, event: React.SyntheticEvent, xhr: XMLHttpRequest) => void;
+    onError?: (status: any, file: FileType, event: ProgressEvent, xhr: XMLHttpRequest) => void;
     /** callback function after successful upload */
-    onSuccess?: (response: any, file: FileType, event: React.SyntheticEvent, xhr: XMLHttpRequest) => void;
+    onSuccess?: (response: any, file: FileType, event: ProgressEvent, xhr: XMLHttpRequest) => void;
     /** Callback functions that upload progress change */
-    onProgress?: (percent: number, file: FileType, event: React.SyntheticEvent, xhr: XMLHttpRequest) => void;
+    onProgress?: (percent: number, file: FileType, event: ProgressEvent, xhr: XMLHttpRequest) => void;
     /** In the file list, click the callback function to delete a file */
     onRemove?: (file: FileType) => void;
     /** Custom render file information */

package/cjs/Uploader/Uploader.js

@@ -443,7 +443,7 @@ var Uploader = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
 
 Uploader.displayName = 'Uploader';
 Uploader.propTypes = {
-  action: _propTypes.default.string,
+  action: _propTypes.default.string.isRequired,
   accept: _propTypes.default.string,
   autoUpload: _propTypes.default.bool,
   children: _propTypes.default.node,
@@ -473,7 +473,6 @@ Uploader.propTypes = {
   onRemove: _propTypes.default.func,
   maxPreviewFileSize: _propTypes.default.number,
   style: _propTypes.default.object,
-  toggleAs: _propTypes.default.elementType,
   renderFileInfo: _propTypes.default.func,
   renderThumbnail: _propTypes.default.func,
   removable: _propTypes.default.bool,

package/cjs/index.d.ts

@@ -32,6 +32,8 @@ export { default as Badge } from './Badge';
 export type { BadgeProps } from './Badge';
 export { default as Avatar } from './Avatar';
 export type { AvatarProps } from './Avatar';
+export { default as AvatarGroup } from './AvatarGroup';
+export type { AvatarGroupProps } from './AvatarGroup';
 export { default as toaster } from './toaster';
 export type { Toaster } from './toaster';
 export { default as Dropdown } from './Dropdown';

package/cjs/index.js

@@ -3,7 +3,7 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 exports.__esModule = true;
-exports.CustomProvider = exports.Affix = exports.DOMHelper = exports.Animation = exports.Schema = exports.Footer = exports.Sidebar = exports.Header = exports.Content = exports.Container = exports.FlexboxGrid = exports.Col = exports.Row = exports.Grid = exports.Carousel = exports.Calendar = exports.List = exports.TagGroup = exports.Tag = exports.Timeline = exports.Progress = exports.Table = exports.PanelGroup = exports.Panel = exports.CheckTree = exports.Tree = exports.Rate = exports.RangeSlider = exports.Slider = exports.Uploader = exports.AutoComplete = exports.DateRangePicker = exports.DatePicker = exports.MultiCascader = exports.Cascader = exports.CheckTreePicker = exports.TreePicker = exports.TagInput = exports.TagPicker = exports.InputPicker = exports.CheckPicker = exports.SelectPicker = exports.RadioGroup = exports.Radio = exports.CheckboxGroup = exports.Checkbox = exports.InputGroup = exports.InputNumber = exports.MaskedInput = exports.Input = exports.Form = exports.Toggle = exports.Steps = exports.Pagination = exports.Breadcrumb = exports.Sidenav = exports.Navbar = exports.Nav = exports.Dropdown = exports.toaster = exports.Avatar = exports.Badge = exports.Placeholder = exports.Divider = exports.SafeAnchor = exports.Loader = exports.Drawer = exports.Message = exports.Notification = exports.Modal = exports.Popover = exports.Tooltip = exports.Whisper = exports.ButtonGroup = exports.ButtonToolbar = exports.IconButton = exports.Button = void 0;
+exports.CustomProvider = exports.Affix = exports.DOMHelper = exports.Animation = exports.Schema = exports.Footer = exports.Sidebar = exports.Header = exports.Content = exports.Container = exports.FlexboxGrid = exports.Col = exports.Row = exports.Grid = exports.Carousel = exports.Calendar = exports.List = exports.TagGroup = exports.Tag = exports.Timeline = exports.Progress = exports.Table = exports.PanelGroup = exports.Panel = exports.CheckTree = exports.Tree = exports.Rate = exports.RangeSlider = exports.Slider = exports.Uploader = exports.AutoComplete = exports.DateRangePicker = exports.DatePicker = exports.MultiCascader = exports.Cascader = exports.CheckTreePicker = exports.TreePicker = exports.TagInput = exports.TagPicker = exports.InputPicker = exports.CheckPicker = exports.SelectPicker = exports.RadioGroup = exports.Radio = exports.CheckboxGroup = exports.Checkbox = exports.InputGroup = exports.InputNumber = exports.MaskedInput = exports.Input = exports.Form = exports.Toggle = exports.Steps = exports.Pagination = exports.Breadcrumb = exports.Sidenav = exports.Navbar = exports.Nav = exports.Dropdown = exports.toaster = exports.AvatarGroup = exports.Avatar = exports.Badge = exports.Placeholder = exports.Divider = exports.SafeAnchor = exports.Loader = exports.Drawer = exports.Message = exports.Notification = exports.Modal = exports.Popover = exports.Tooltip = exports.Whisper = exports.ButtonGroup = exports.ButtonToolbar = exports.IconButton = exports.Button = void 0;
 
 var _Button = _interopRequireDefault(require("./Button"));
 
@@ -73,6 +73,10 @@ var _Avatar = _interopRequireDefault(require("./Avatar"));
 
 exports.Avatar = _Avatar.default;
 
+var _AvatarGroup = _interopRequireDefault(require("./AvatarGroup"));
+
+exports.AvatarGroup = _AvatarGroup.default;
+
 var _toaster = _interopRequireDefault(require("./toaster"));
 
 exports.toaster = _toaster.default;

package/cjs/locales/index.d.ts

@@ -19,15 +19,15 @@ declare type PickKeys<T> = {
     [keys in keyof T]?: T[keys];
 };
 export declare type Locale = PickKeys<typeof defaultLocale>;
-export declare type CommonLocale = PickKeys<typeof defaultLocale.common>;
+export declare type CommonLocale = typeof defaultLocale.common;
 export declare type CalendarLocale = PickKeys<typeof defaultLocale.Calendar>;
 export declare type PlaintextLocale = PickKeys<typeof defaultLocale.Plaintext>;
 export declare type PaginationLocale = PickKeys<typeof defaultLocale.Pagination>;
 export declare type TableLocale = CommonLocale;
 export declare type DatePickerLocale = PickKeys<typeof defaultLocale.DatePicker>;
 export declare type DateRangePickerLocale = PickKeys<typeof defaultLocale.DateRangePicker>;
-export declare type PickerLocale = PickKeys<typeof defaultLocale.Picker> & CommonLocale;
-export declare type InputPickerLocale = PickerLocale & PickKeys<typeof defaultLocale.InputPicker>;
+export declare type PickerLocale = typeof defaultLocale.Picker & CommonLocale;
+export declare type InputPickerLocale = PickerLocale & typeof defaultLocale.InputPicker;
 export declare type UploaderLocale = PickKeys<typeof defaultLocale.Uploader>;
 export declare type CloseButtonLocale = PickKeys<typeof defaultLocale.CloseButton>;
 export declare type BreadcrumbLocale = PickKeys<typeof defaultLocale.Breadcrumb>;

package/cjs/toaster/ToastContainer.d.ts

@@ -18,7 +18,7 @@ export interface NodeProps extends WithAsProps {
     onClose?: (event?: React.MouseEvent<HTMLDivElement>) => void;
 }
 interface ToastContainerComponent extends RsRefForwardingComponent<'div', ToastContainerProps> {
-    getInstance?: (props: ToastContainerProps) => [React.RefObject<ToastContainerInstance>, () => void];
+    getInstance: (props: ToastContainerProps) => [React.RefObject<ToastContainerInstance>, () => void];
 }
 declare const ToastContainer: ToastContainerComponent;
 export default ToastContainer;

package/cjs/toaster/ToastContainer.js

@@ -30,7 +30,7 @@ var useMessages = function useMessages() {
 
   var getKey = (0, _react.useCallback)(function (key) {
     if (typeof key === 'undefined' && messages.length) {
-      key = messages[messages.length - 1].key;
+      return messages[messages.length - 1].key;
     }
 
     return key;

package/cjs/toaster/toaster.js

@@ -48,7 +48,9 @@ toaster.push = function (message, options) {
   var container = getContainer(options.placement);
 
   if (!container) {
-    container = createContainer(options.placement, options);
+    var _options$placement;
+
+    container = createContainer((_options$placement = options.placement) !== null && _options$placement !== void 0 ? _options$placement : '', options);
   }
 
   return container.current.push(message);

package/cjs/utils/BrowserDetection.js

@@ -29,7 +29,7 @@ var isIE11 = function isIE11() {
 exports.isIE11 = isIE11;
 
 var isEdge = function isEdge() {
-  return _canUseDOM.default && !isIE() && !!window.styleMedia;
+  return _canUseDOM.default && !isIE() && 'styleMedia' in window;
 };
 
 exports.isEdge = isEdge;

package/cjs/utils/ReactChildren.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 export declare function find(children: React.ReactNode, func: any, context?: any): React.ReactNode;
-export declare function map(children: React.ReactNode, func: any, context?: any): any[];
-export declare function mapCloneElement(children: React.ReactNode, func: any, context?: any): any[];
+export declare function map(children: React.ReactNode, func: any, context?: any): any[] | null | undefined;
+export declare function mapCloneElement(children: React.ReactNode, func: any, context?: any): any[] | null | undefined;
 export declare function count(children: React.ReactChildren): number;
 declare function some(children: React.ReactNode, func: any, context?: any): boolean;
 declare const _default: {

package/cjs/utils/ajaxUpload.d.ts

@@ -17,6 +17,6 @@ interface Options {
 }
 export default function ajaxUpload(options: Options): {
     xhr: XMLHttpRequest;
-    data: any;
+    data: File | FormData;
 };
 export {};

package/cjs/utils/ajaxUpload.js

@@ -32,15 +32,16 @@ function ajaxUpload(options) {
       withCredentials = options.withCredentials,
       disableMultipart = options.disableMultipart;
   var xhr = new XMLHttpRequest();
-  var sendableData = null;
+  var sendableData;
   xhr.open('POST', url, true);
 
   if (!disableMultipart) {
     sendableData = new FormData();
     sendableData.append(name, file, file.name);
-    Object.keys(data).forEach(function (key) {
-      return sendableData.append(key, data[key]);
-    });
+
+    for (var key in data) {
+      sendableData.append(key, data[key]);
+    }
   } else {
     sendableData = file;
   }

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

@@ -11,7 +11,7 @@ var _propTypes = _interopRequireDefault(require("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;
 
@@ -26,12 +26,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;
 }
 
@@ -40,7 +41,7 @@ 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) {
@@ -64,7 +65,7 @@ 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/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[];
+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 | 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[];
     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[];
+    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;
 }