rsuite 5.48.1 → 5.50.0

package/esm/CheckPicker/CheckPicker.d.ts

@@ -1,4 +1,4 @@
-import React, { Ref } from 'react';
+import React from 'react';
 import { PickerLocale } from '../locales';
 import { PickerHandle, PickerToggleProps } from '../Picker';
 import { ItemDataType, FormControlPickerProps } from '../@types/common';
@@ -12,7 +12,7 @@ export interface CheckPickerProps<T> extends FormControlPickerProps<T[], PickerL
 }
 export interface CheckPickerComponent {
     <T>(props: CheckPickerProps<T> & {
-        ref?: Ref<PickerHandle>;
+        ref?: React.Ref<PickerHandle>;
     }): JSX.Element | null;
     displayName?: string;
     propTypes?: React.WeakValidationMap<CheckPickerProps<any>>;

package/esm/CheckPicker/CheckPicker.js

@@ -3,7 +3,7 @@ import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTempla
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 var _templateObject;
-import React, { useRef, useState, useCallback } from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import clone from 'lodash/clone';
 import isUndefined from 'lodash/isUndefined';
@@ -13,9 +13,9 @@ import omit from 'lodash/omit';
 import pick from 'lodash/pick';
 import isNil from 'lodash/isNil';
 import { filterNodesOfTree } from '../utils/treeUtils';
-import { createChainedFunction, useClassNames, shallowEqual, useCustom, useControlled, mergeRefs } from '../utils';
+import { createChainedFunction, useClassNames, shallowEqual, useCustom, useControlled, useEventCallback, mergeRefs } from '../utils';
 import { getDataGroupBy } from '../utils/getDataGroupBy';
-import { DropdownMenu, DropdownMenuCheckItem as DropdownMenuItem, PickerToggle, PickerOverlay, SearchBar, SelectedElement, PickerToggleTrigger, useFocusItemValue, usePickerClassName, useSearch, usePublicMethods, useToggleKeyDownEvent, pickTriggerPropKeys, omitTriggerPropKeys, listPickerPropTypes } from '../Picker';
+import { DropdownMenu, DropdownMenuCheckItem as DropdownMenuItem, PickerToggle, PickerOverlay, SearchBar, SelectedElement, PickerToggleTrigger, useFocusItemValue, usePickerClassName, useSearch, useToggleKeyDownEvent, usePickerRef, pickTriggerPropKeys, omitTriggerPropKeys, listPickerPropTypes } from '../Picker';
 var emptyArray = [];
 /**
  * A component for selecting checkable items in a dropdown list.
@@ -80,11 +80,13 @@ var CheckPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     onClose = props.onClose,
     onOpen = props.onOpen,
     rest = _objectWithoutPropertiesLoose(props, ["as", "appearance", "classPrefix", "countable", "data", "disabledItemValues", "valueKey", "labelKey", "searchable", "virtualized", "cleanable", "placement", "menuAutoWidth", "menuMaxHeight", "menuClassName", "menuStyle", "locale", "placeholder", "disabled", "toggleAs", "style", "sticky", "value", "defaultValue", "groupBy", "listProps", "id", "sort", "searchBy", "renderMenuItem", "renderMenuGroup", "renderValue", "renderExtraFooter", "renderMenu", "onGroupTitleClick", "onSearch", "onEnter", "onEntered", "onExited", "onClean", "onChange", "onSelect", "onClose", "onOpen"]);
-  var triggerRef = useRef(null);
-  var targetRef = useRef(null);
-  var overlayRef = useRef(null);
-  var searchInputRef = useRef(null);
-  var listRef = useRef(null);
+  var _usePickerRef = usePickerRef(ref),
+    trigger = _usePickerRef.trigger,
+    root = _usePickerRef.root,
+    target = _usePickerRef.target,
+    overlay = _usePickerRef.overlay,
+    list = _usePickerRef.list,
+    searchInput = _usePickerRef.searchInput;
   var _useCustom = useCustom('Picker', overrideLocale),
     locale = _useCustom.locale;
   var _useControlled = useControlled(valueProp, defaultValue || []),
@@ -94,18 +96,18 @@ var CheckPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       data: data,
       valueKey: valueKey,
       target: function target() {
-        return overlayRef.current;
+        return overlay.current;
       }
     }),
     focusItemValue = _useFocusItemValue.focusItemValue,
     setFocusItemValue = _useFocusItemValue.setFocusItemValue,
     onFocusItem = _useFocusItemValue.onKeyDown;
-  var handleSearchCallback = useCallback(function (searchKeyword, filteredData, event) {
+  var handleSearchCallback = useEventCallback(function (searchKeyword, filteredData, event) {
     var _filteredData$;
     // The first option after filtering is the focus.
     setFocusItemValue(filteredData === null || filteredData === void 0 ? void 0 : (_filteredData$ = filteredData[0]) === null || _filteredData$ === void 0 ? void 0 : _filteredData$[valueKey]);
     onSearch === null || onSearch === void 0 ? void 0 : onSearch(searchKeyword, event);
-  }, [setFocusItemValue, onSearch, valueKey]);
+  });
 
   // Use search keywords to filter options.
   var _useSearch = useSearch(data, {
@@ -139,17 +141,17 @@ var CheckPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     }
     setStickyItems(nextStickyItems);
   };
-  var handleChangeValue = useCallback(function (value, event) {
+  var handleChangeValue = useEventCallback(function (value, event) {
     onChange === null || onChange === void 0 ? void 0 : onChange(value, event);
-  }, [onChange]);
-  var handleClean = useCallback(function (event) {
+  });
+  var handleClean = useEventCallback(function (event) {
     if (disabled || !cleanable) {
       return;
     }
     setValue([]);
     onClean === null || onClean === void 0 ? void 0 : onClean(event);
     handleChangeValue([], event);
-  }, [disabled, cleanable, setValue, onClean, handleChangeValue]);
+  });
   var handleMenuPressEnter = function handleMenuPressEnter(event) {
     var nextValue = clone(value);
     if (!focusItemValue) {
@@ -173,10 +175,10 @@ var CheckPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
   };
   var onPickerKeyDown = useToggleKeyDownEvent(_extends({
     toggle: !focusItemValue || !active,
-    triggerRef: triggerRef,
-    targetRef: targetRef,
-    overlayRef: overlayRef,
-    searchInputRef: searchInputRef,
+    trigger: trigger,
+    target: target,
+    overlay: overlay,
+    searchInput: searchInput,
     active: active,
     onExit: handleClean,
     onMenuKeyDown: onFocusItem,
@@ -186,10 +188,10 @@ var CheckPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       setFocusItemValue(null);
     }
   }, rest));
-  var handleSelect = useCallback(function (nextItemValue, item, event) {
+  var handleSelect = useEventCallback(function (nextItemValue, item, event) {
     onSelect === null || onSelect === void 0 ? void 0 : onSelect(nextItemValue, item, event);
-  }, [onSelect]);
-  var handleItemSelect = useCallback(function (nextItemValue, item, event, checked) {
+  });
+  var handleItemSelect = useEventCallback(function (nextItemValue, item, event, checked) {
     var nextValue = clone(value);
     if (checked) {
       nextValue.push(nextItemValue);
@@ -202,22 +204,16 @@ var CheckPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     setFocusItemValue(nextItemValue);
     handleSelect(nextValue, item, event);
     handleChangeValue(nextValue, event);
-  }, [value, setValue, handleSelect, handleChangeValue, setFocusItemValue]);
-  var handleEntered = useCallback(function () {
+  });
+  var handleEntered = useEventCallback(function () {
     setActive(true);
     onOpen === null || onOpen === void 0 ? void 0 : onOpen();
-  }, [onOpen]);
-  var handleExited = useCallback(function () {
+  });
+  var handleExited = useEventCallback(function () {
     resetSearch();
     setFocusItemValue(null);
     setActive(false);
     onClose === null || onClose === void 0 ? void 0 : onClose();
-  }, [onClose, setFocusItemValue, resetSearch]);
-  usePublicMethods(ref, {
-    triggerRef: triggerRef,
-    overlayRef: overlayRef,
-    targetRef: targetRef,
-    listRef: listRef
   });
   var selectedItems = data.filter(function (item) {
     return value === null || value === void 0 ? void 0 : value.some(function (val) {
@@ -281,7 +277,7 @@ var CheckPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     var menu = items.length || filteredStickyItems.length ? /*#__PURE__*/React.createElement(DropdownMenu, {
       id: id ? id + "-listbox" : undefined,
       listProps: listProps,
-      listRef: listRef,
+      listRef: list,
       disabledItemValues: disabledItemValues,
       valueKey: valueKey,
       labelKey: labelKey,
@@ -304,17 +300,17 @@ var CheckPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       className: prefix(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["none"])))
     }, locale === null || locale === void 0 ? void 0 : locale.noResultsText);
     return /*#__PURE__*/React.createElement(PickerOverlay, {
-      ref: mergeRefs(overlayRef, speakerRef),
+      ref: mergeRefs(overlay, speakerRef),
       autoWidth: menuAutoWidth,
       className: classes,
       style: styles,
       onKeyDown: onPickerKeyDown,
-      target: triggerRef
+      target: trigger
     }, searchable && /*#__PURE__*/React.createElement(SearchBar, {
       placeholder: locale === null || locale === void 0 ? void 0 : locale.searchPlaceholder,
       onChange: handleSearch,
       value: searchKeyword,
-      inputRef: searchInputRef
+      inputRef: searchInput
     }), renderMenu ? renderMenu(menu) : menu, renderExtraFooter === null || renderExtraFooter === void 0 ? void 0 : renderExtraFooter());
   };
   var _usePickerClassName = usePickerClassName(_extends({}, props, {
@@ -329,7 +325,7 @@ var CheckPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     usedClassNamePropKeys = _usePickerClassName[1];
   return /*#__PURE__*/React.createElement(PickerToggleTrigger, {
     pickerProps: pick(props, pickTriggerPropKeys),
-    ref: triggerRef,
+    ref: trigger,
     placement: placement,
     onEnter: createChainedFunction(initStickyItems, onEnter),
     onEntered: createChainedFunction(handleEntered, onEntered),
@@ -337,10 +333,11 @@ var CheckPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     speaker: renderDropdownMenu
   }, /*#__PURE__*/React.createElement(Component, {
     className: classes,
-    style: style
+    style: style,
+    ref: root
   }, /*#__PURE__*/React.createElement(PickerToggle, _extends({}, omit(rest, [].concat(omitTriggerPropKeys, usedClassNamePropKeys)), {
     id: id,
-    ref: targetRef,
+    ref: target,
     appearance: appearance,
     disabled: disabled,
     onClean: handleClean,

package/esm/CheckTreePicker/CheckTreePicker.js

@@ -7,15 +7,15 @@ import _omit from "lodash/omit";
 import _isFunction from "lodash/isFunction";
 import _pick from "lodash/pick";
 import _isNil from "lodash/isNil";
-import React, { useState, useRef, useEffect, useCallback, useContext, useMemo } from 'react';
+import React, { useState, useEffect, useContext, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { List, AutoSizer } from '../Windowing';
 import CheckTreeNode from './CheckTreeNode';
 import TreeContext from '../Tree/TreeContext';
 import { getKeyParentMap, getPathTowardsItem, getTreeNodeIndent } from '../utils/treeUtils';
-import { createChainedFunction, useCustom, useClassNames, useControlled, KEY_VALUES, mergeRefs } from '../utils';
-import { PickerToggle, onMenuKeyDown as _onMenuKeyDown, PickerOverlay, SearchBar, SelectedElement, PickerToggleTrigger, createConcatChildrenFunction, usePickerClassName, usePublicMethods, pickTriggerPropKeys, omitTriggerPropKeys, listPickerPropTypes, useToggleKeyDownEvent } from '../Picker';
+import { createChainedFunction, useCustom, useClassNames, useControlled, useEventCallback, KEY_VALUES, mergeRefs } from '../utils';
+import { PickerToggle, onMenuKeyDown as _onMenuKeyDown, PickerOverlay, SearchBar, SelectedElement, PickerToggleTrigger, createConcatChildrenFunction, usePickerClassName, useToggleKeyDownEvent, usePickerRef, pickTriggerPropKeys, omitTriggerPropKeys, listPickerPropTypes } from '../Picker';
 import { isEveryChildChecked, isSomeNodeHasChildren, isAllSiblingNodeUncheckable, isEveryFirstLevelNodeUncheckable, getFormattedTree, getDisabledState, getCheckTreePickerDefaultValue, getSelectedItems, isNodeUncheckable } from './utils';
 import { hasVisibleChildren, getExpandWhenSearching, useTreeSearch, useTreeNodeRefs, getDefaultExpandItemValues, useFlattenTreeData, focusNextItem, getFocusableItems, focusPreviousItem, toggleExpand, getActiveItem, useGetTreeNodeChildren, focusToActiveTreeNode, focusTreeNode, leftArrowHandler, rightArrowHandler, isSearching } from '../utils/treeUtils';
 var emptyArray = [];
@@ -106,12 +106,16 @@ var CheckTreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     rest = _objectWithoutPropertiesLoose(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", "menuMaxHeight", "menuStyle", "searchable", "virtualized", "className", "classPrefix", "menuClassName", "menuAutoWidth", "uncheckableItemValues", "id", "listProps", "renderMenu", "getChildren", "renderExtraFooter", "onEntered", "onChange", "onClean", "onClose", "onExited", "onSearch", "onSelect", "onSelectItem", "onOpen", "onScroll", "onExpand", "renderValue", "renderTreeIcon", "renderTreeNode"]);
   var _useContext = useContext(TreeContext),
     inline = _useContext.inline;
-  var triggerRef = useRef(null);
-  var targetRef = useRef(null);
-  var listRef = useRef(null);
-  var overlayRef = useRef(null);
-  var searchInputRef = useRef(null);
-  var treeViewRef = useRef(null);
+  var _usePickerRef = usePickerRef(ref, {
+      inline: inline
+    }),
+    trigger = _usePickerRef.trigger,
+    root = _usePickerRef.root,
+    target = _usePickerRef.target,
+    overlay = _usePickerRef.overlay,
+    list = _usePickerRef.list,
+    searchInput = _usePickerRef.searchInput,
+    treeView = _usePickerRef.treeView;
   var _useCustom = useCustom('Picker', overrideLocale),
     rtl = _useCustom.rtl,
     locale = _useCustom.locale;
@@ -192,7 +196,7 @@ var CheckTreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
    * get formatted nodes for render tree
    * @params render - renderNode function. only used when virtualized setting false
    */
-  var getFormattedNodes = useCallback(function (render) {
+  var getFormattedNodes = function getFormattedNodes(render) {
     if (virtualized) {
       return formatVirtualizedTreeData(flattenNodes, filteredData, expandItemValues, {
         cascade: cascade,
@@ -207,7 +211,7 @@ var CheckTreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     }).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) {
     return {
       as: Component,
@@ -238,19 +242,19 @@ var CheckTreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       onRenderTreeIcon: renderTreeIcon
     };
   };
-  var focusActiveNode = useCallback(function () {
-    if (listRef.current) {
+  var focusActiveNode = function focusActiveNode() {
+    if (list.current) {
       focusToActiveTreeNode({
-        list: listRef.current,
+        list: list.current,
         valueKey: valueKey,
         selector: "." + checkTreePrefix('node-active'),
         activeNode: activeNode,
         virtualized: virtualized,
-        container: treeViewRef.current,
+        container: treeView.current,
         formattedNodes: getFormattedNodes()
       });
     }
-  }, [checkTreePrefix, activeNode, getFormattedNodes, valueKey, virtualized]);
+  };
   useEffect(function () {
     setValue(getCheckTreePickerDefaultValue(value, uncheckableItemValues));
   }, []); // eslint-disable-line react-hooks/exhaustive-deps
@@ -280,7 +284,7 @@ var CheckTreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     });
     forceUpdate();
   }, [cascade, value, uncheckableItemValues, unSerializeList, flattenNodes, forceUpdate]);
-  var toggleUpChecked = useCallback(function (nodes, node, checked) {
+  var toggleUpChecked = useEventCallback(function (nodes, node, checked) {
     var currentNode = node.refKey ? nodes[node.refKey] : null;
     if (cascade && currentNode) {
       if (!checked) {
@@ -299,8 +303,8 @@ var CheckTreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
         toggleUpChecked(nodes, currentNode.parent, checked);
       }
     }
-  }, [cascade]);
-  var toggleDownChecked = useCallback(function (nodes, node, isChecked) {
+  });
+  var toggleDownChecked = useEventCallback(function (nodes, node, isChecked) {
     var currentNode = node.refKey ? nodes[node.refKey] : null;
     if (!currentNode) {
       return;
@@ -314,8 +318,8 @@ var CheckTreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
         toggleDownChecked(nodes, child, isChecked);
       });
     }
-  }, [cascade, childrenKey]);
-  var toggleChecked = useCallback(function (node, isChecked) {
+  });
+  var toggleChecked = useEventCallback(function (node, isChecked) {
     var nodes = _cloneDeep(flattenNodes);
     toggleDownChecked(nodes, node, isChecked);
     node.parent && toggleUpChecked(nodes, node.parent, isChecked);
@@ -324,7 +328,7 @@ var CheckTreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     return values.filter(function (v) {
       return !uncheckableItemValues.includes(v);
     });
-  }, [flattenNodes, uncheckableItemValues, serializeListOnlyParent, toggleDownChecked, toggleUpChecked]);
+  });
 
   // TODO-Doma
   // Replace `getKeyParentMap` with `getParentMap`
@@ -335,7 +339,7 @@ var CheckTreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       return node[childrenKey];
     });
   }, [childrenKey, data, valueKey]);
-  var handleSelect = useCallback(function (node, event) {
+  var handleSelect = useEventCallback(function (node, event) {
     var currentNode = node.refKey ? flattenNodes[node.refKey] : null;
     if (!node || !currentNode) {
       return;
@@ -358,18 +362,18 @@ var CheckTreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     onSelectItem === null || onSelectItem === void 0 ? void 0 : onSelectItem(node, getPathTowardsItem(node, function (item) {
       return itemParentMap.get(item[valueKey]);
     }));
-  }, [flattenNodes, toggleChecked, isControlled, valueKey, onChange, onSelect, onSelectItem, unSerializeList, cascade, uncheckableItemValues, setValue, itemParentMap]);
-  var handleOpen = useCallback(function () {
-    var _triggerRef$current, _triggerRef$current$o;
-    (_triggerRef$current = triggerRef.current) === null || _triggerRef$current === void 0 ? void 0 : (_triggerRef$current$o = _triggerRef$current.open) === null || _triggerRef$current$o === void 0 ? void 0 : _triggerRef$current$o.call(_triggerRef$current);
+  });
+  var handleOpen = useEventCallback(function () {
+    var _trigger$current, _trigger$current$open;
+    (_trigger$current = trigger.current) === null || _trigger$current === void 0 ? void 0 : (_trigger$current$open = _trigger$current.open) === null || _trigger$current$open === void 0 ? void 0 : _trigger$current$open.call(_trigger$current);
     setFocusItemValue(activeNode === null || activeNode === void 0 ? void 0 : activeNode[valueKey]);
     focusActiveNode();
     onOpen === null || onOpen === void 0 ? void 0 : onOpen();
     setActive(true);
-  }, [activeNode, focusActiveNode, onOpen, valueKey]);
-  var handleClose = useCallback(function () {
-    var _triggerRef$current2, _triggerRef$current2$, _targetRef$current;
-    (_triggerRef$current2 = triggerRef.current) === null || _triggerRef$current2 === void 0 ? void 0 : (_triggerRef$current2$ = _triggerRef$current2.close) === null || _triggerRef$current2$ === void 0 ? void 0 : _triggerRef$current2$.call(_triggerRef$current2);
+  });
+  var handleClose = useEventCallback(function () {
+    var _trigger$current2, _trigger$current2$clo, _target$current;
+    (_trigger$current2 = trigger.current) === null || _trigger$current2 === void 0 ? void 0 : (_trigger$current2$clo = _trigger$current2.close) === null || _trigger$current2$clo === void 0 ? void 0 : _trigger$current2$clo.call(_trigger$current2);
     setSearchKeyword('');
     onClose === null || onClose === void 0 ? void 0 : onClose();
     setFocusItemValue(null);
@@ -378,9 +382,9 @@ var CheckTreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     /**
      * when using keyboard toggle picker, should refocus on PickerToggle Component after close picker menu
      */
-    (_targetRef$current = targetRef.current) === null || _targetRef$current === void 0 ? void 0 : _targetRef$current.focus();
-  }, [onClose, setSearchKeyword]);
-  var handleExpand = useCallback(function (node) {
+    (_target$current = target.current) === null || _target$current === void 0 ? void 0 : _target$current.focus();
+  });
+  var handleExpand = useEventCallback(function (node) {
     var nextExpandItemValues = toggleExpand({
       node: node,
       isExpand: !node.expand,
@@ -395,16 +399,8 @@ var CheckTreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     if (_isFunction(getChildren) && !node.expand && Array.isArray(node[childrenKey]) && node[childrenKey].length === 0) {
       loadChildren(node, getChildren);
     }
-  }, [childrenKey, expandItemValues, getChildren, loadChildren, onExpand, setExpandItemValues, valueKey]);
-  usePublicMethods(ref, {
-    rootRef: inline ? treeViewRef : undefined,
-    triggerRef: triggerRef,
-    overlayRef: overlayRef,
-    targetRef: targetRef,
-    listRef: listRef,
-    inline: inline
   });
-  var handleClean = useCallback(function (event) {
+  var handleClean = useEventCallback(function (event) {
     var target = event.target;
     // exclude searchBar
     if (target.matches('div[role="searchbox"] > input') || disabled || !cleanable) {
@@ -423,8 +419,8 @@ var CheckTreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       });
     }
     onChange === null || onChange === void 0 ? void 0 : onChange([], event);
-  }, [cascade, cleanable, disabled, flattenNodes, onChange, setValue, unSerializeList, uncheckableItemValues, isControlled]);
-  var handleFocusItem = useCallback(function (key) {
+  });
+  var handleFocusItem = useEventCallback(function (key) {
     var focusableItems = getFocusableItems(filteredData, {
       disabledItemValues: disabledItemValues,
       valueKey: valueKey,
@@ -449,8 +445,8 @@ var CheckTreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     if (key === KEY_VALUES.UP) {
       focusPreviousItem(focusProps);
     }
-  }, [searchKeywordState, checkTreePrefix, expandItemValues, filteredData, focusItemValue, treeNodesRefs, childrenKey, valueKey, disabledItemValues]);
-  var handleLeftArrow = useCallback(function () {
+  });
+  var handleLeftArrow = useEventCallback(function () {
     if (_isNil(focusItemValue)) return;
     var focusItem = getActiveItem(focusItemValue, flattenNodes, valueKey);
     leftArrowHandler({
@@ -464,8 +460,8 @@ var CheckTreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
         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, childrenKey]);
-  var handleRightArrow = useCallback(function () {
+  });
+  var handleRightArrow = useEventCallback(function () {
     if (_isNil(focusItemValue)) return;
     var focusItem = getActiveItem(focusItemValue, flattenNodes, valueKey);
     rightArrowHandler({
@@ -477,8 +473,8 @@ var CheckTreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
         handleFocusItem(KEY_VALUES.DOWN);
       }
     });
-  }, [focusItemValue, flattenNodes, valueKey, expandItemValues, childrenKey, handleExpand, handleFocusItem]);
-  var selectActiveItem = useCallback(function (event) {
+  });
+  var selectActiveItem = function selectActiveItem(event) {
     if (_isNil(focusItemValue)) return;
     var activeItem = getActiveItem(focusItemValue, flattenNodes, valueKey);
     if (!isNodeUncheckable(activeItem, {
@@ -487,13 +483,13 @@ var CheckTreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     }) && activeItem !== null) {
       handleSelect(activeItem, event);
     }
-  }, [flattenNodes, focusItemValue, handleSelect, uncheckableItemValues, valueKey]);
+  };
   var onPickerKeydown = useToggleKeyDownEvent(_extends({
     toggle: !focusItemValue || !active,
-    triggerRef: triggerRef,
-    targetRef: targetRef,
-    overlayRef: overlayRef,
-    searchInputRef: searchInputRef,
+    trigger: trigger,
+    target: target,
+    overlay: overlay,
+    searchInput: searchInput,
     active: active,
     onExit: handleClean,
     onClose: handleClose,
@@ -512,8 +508,8 @@ var CheckTreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       });
     }
   }, rest));
-  var handleTreeKeydown = useCallback(function (event) {
-    if (!treeViewRef.current) {
+  var handleTreeKeydown = useEventCallback(function (event) {
+    if (!treeView.current) {
       return;
     }
     _onMenuKeyDown(event, {
@@ -527,7 +523,7 @@ var CheckTreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       right: rtl ? handleLeftArrow : handleRightArrow,
       enter: selectActiveItem
     });
-  }, [handleFocusItem, handleLeftArrow, handleRightArrow, rtl, selectActiveItem]);
+  });
   var renderNode = function renderNode(node, layer) {
     var visible = node.visible,
       refKey = node.refKey; // when searching, all nodes should be expand
@@ -619,7 +615,7 @@ var CheckTreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     }, style) : {};
     return /*#__PURE__*/React.createElement("div", {
       id: id ? id + "-listbox" : undefined,
-      ref: treeViewRef,
+      ref: inline ? root : treeView,
       role: "tree",
       "aria-multiselectable": true,
       className: classes,
@@ -637,7 +633,7 @@ var CheckTreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     }, function (_ref5) {
       var height = _ref5.height;
       return /*#__PURE__*/React.createElement(List, _extends({
-        ref: listRef,
+        ref: list,
         height: height,
         itemSize: itemSize,
         itemCount: formattedNodes.length,
@@ -658,14 +654,14 @@ var CheckTreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       autoWidth: menuAutoWidth,
       className: classes,
       style: mergedMenuStyle,
-      ref: mergeRefs(overlayRef, speakerRef),
+      ref: mergeRefs(overlay, speakerRef),
       onKeyDown: onPickerKeydown,
-      target: triggerRef
+      target: trigger
     }, searchable ? /*#__PURE__*/React.createElement(SearchBar, {
       placeholder: locale.searchPlaceholder,
       onChange: handleSearch,
       value: searchKeywordState,
-      inputRef: searchInputRef
+      inputRef: searchInput
     }) : null, renderMenu ? renderMenu(renderCheckTree()) : renderCheckTree(), renderExtraFooter === null || renderExtraFooter === void 0 ? void 0 : renderExtraFooter());
   };
   var selectedItems = useMemo(function () {
@@ -711,7 +707,7 @@ var CheckTreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }
   return /*#__PURE__*/React.createElement(PickerToggleTrigger, {
     pickerProps: _pick(props, pickTriggerPropKeys),
-    ref: triggerRef,
+    ref: trigger,
     placement: placement,
     onEnter: handleOpen,
     onEntered: onEntered,
@@ -719,10 +715,11 @@ var CheckTreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     speaker: renderDropdownMenu
   }, /*#__PURE__*/React.createElement(Component, {
     className: classes,
-    style: style
+    style: style,
+    ref: root
   }, /*#__PURE__*/React.createElement(PickerToggle, _extends({}, _omit(rest, [].concat(omitTriggerPropKeys, usedClassNamePropKeys)), {
     id: id,
-    ref: targetRef,
+    ref: target,
     appearance: appearance,
     onKeyDown: onPickerKeydown,
     onClean: createChainedFunction(handleClean, onClean),

package/esm/CustomProvider/CustomProvider.d.ts

@@ -67,6 +67,19 @@ declare const CustomContext: React.Context<CustomProviderProps<{
         more: string;
         prev: string;
         next: 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 });
+         *  }
+         *
+         * */
         first: string;
         last: string;
         limit: string;

package/esm/CustomProvider/CustomProvider.js

@@ -1,11 +1,11 @@
 'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import React, { useEffect } from 'react';
+import React from 'react';
 import { getClassNamePrefix, prefix } from '../utils/prefix';
 import { addClass, removeClass, canUseDOM } from '../DOMHelper';
 import ToastContainer, { toastPlacements } from '../toaster/ToastContainer';
-import { usePortal } from '../utils';
+import { usePortal, useIsomorphicLayoutEffect } from '../utils';
 var CustomContext = /*#__PURE__*/React.createContext({});
 var themes = ['light', 'dark', 'high-contrast'];
 
@@ -36,7 +36,7 @@ var CustomProvider = function CustomProvider(props) {
       disableRipple: disableRipple
     }, rest);
   }, [classPrefix, theme, disableRipple, rest]);
-  useEffect(function () {
+  useIsomorphicLayoutEffect(function () {
     if (canUseDOM && theme) {
       addClass(document.body, prefix(classPrefix, "theme-" + theme));