rsuite 5.48.1 → 5.50.0

package/esm/SelectPicker/SelectPicker.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 { ListProps } from '../Windowing';
@@ -49,7 +49,7 @@ export interface SelectPickerProps<T> extends Omit<FormControlPickerProps<T, Pic
 }
 export interface SelectPickerComponent {
     <T>(props: SelectPickerProps<T> & {
-        ref?: Ref<PickerHandle>;
+        ref?: React.Ref<PickerHandle>;
     }): JSX.Element | null;
     displayName?: string;
     propTypes?: React.WeakValidationMap<SelectPickerProps<any>>;

package/esm/SelectPicker/SelectPicker.js

@@ -3,16 +3,16 @@ 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 pick from 'lodash/pick';
 import isUndefined from 'lodash/isUndefined';
 import isNil from 'lodash/isNil';
 import isFunction from 'lodash/isFunction';
 import omit from 'lodash/omit';
-import { createChainedFunction, useCustom, useClassNames, useControlled, mergeRefs, shallowEqual } from '../utils';
+import { createChainedFunction, useCustom, useClassNames, useControlled, useEventCallback, mergeRefs, shallowEqual } from '../utils';
 import { getDataGroupBy } from '../utils/getDataGroupBy';
-import { DropdownMenu, DropdownMenuItem, PickerToggle, PickerToggleTrigger, PickerOverlay, SearchBar, useFocusItemValue, usePickerClassName, useSearch, usePublicMethods, useToggleKeyDownEvent, pickTriggerPropKeys, omitTriggerPropKeys, listPickerPropTypes } from '../Picker';
+import { DropdownMenu, DropdownMenuItem, PickerToggle, PickerToggleTrigger, PickerOverlay, SearchBar, useFocusItemValue, usePickerClassName, useSearch, useToggleKeyDownEvent, usePickerRef, pickTriggerPropKeys, omitTriggerPropKeys, listPickerPropTypes } from '../Picker';
 var emptyArray = [];
 /**
  * The `SelectPicker` component is used to select an item from a list of data.
@@ -73,11 +73,13 @@ var SelectPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     renderMenuItem = props.renderMenuItem,
     renderExtraFooter = props.renderExtraFooter,
     rest = _objectWithoutPropertiesLoose(props, ["as", "appearance", "data", "valueKey", "labelKey", "value", "classPrefix", "placeholder", "defaultValue", "disabled", "cleanable", "placement", "menuClassName", "menuAutoWidth", "menuMaxHeight", "menuStyle", "groupBy", "locale", "toggleAs", "style", "searchable", "disabledItemValues", "virtualized", "listProps", "id", "onGroupTitleClick", "searchBy", "onEntered", "onExited", "onClean", "onChange", "onSelect", "onSearch", "onClose", "onOpen", "sort", "renderValue", "renderMenu", "renderMenuGroup", "renderMenuItem", "renderExtraFooter"]);
-  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 _ref = useControlled(valueProp, defaultValue),
@@ -87,7 +89,7 @@ var SelectPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       data: data,
       valueKey: valueKey,
       target: function target() {
-        return overlayRef.current;
+        return overlay.current;
       }
     }),
     focusItemValue = _useFocusItemValue.focusItemValue,
@@ -110,19 +112,19 @@ var SelectPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _useState = useState(false),
     active = _useState[0],
     setActive = _useState[1];
-  var handleClose = useCallback(function () {
-    var _triggerRef$current, _triggerRef$current$c;
-    (_triggerRef$current = triggerRef.current) === null || _triggerRef$current === void 0 ? void 0 : (_triggerRef$current$c = _triggerRef$current.close) === null || _triggerRef$current$c === void 0 ? void 0 : _triggerRef$current$c.call(_triggerRef$current);
-  }, []);
-  var handleSelect = useCallback(function (value, item, event) {
-    var _targetRef$current;
+  var handleClose = useEventCallback(function () {
+    var _trigger$current, _trigger$current$clos;
+    (_trigger$current = trigger.current) === null || _trigger$current === void 0 ? void 0 : (_trigger$current$clos = _trigger$current.close) === null || _trigger$current$clos === void 0 ? void 0 : _trigger$current$clos.call(_trigger$current);
+  });
+  var handleSelect = useEventCallback(function (value, item, event) {
+    var _target$current;
     onSelect === null || onSelect === void 0 ? void 0 : onSelect(value, item, event);
-    (_targetRef$current = targetRef.current) === null || _targetRef$current === void 0 ? void 0 : _targetRef$current.focus();
-  }, [onSelect]);
-  var handleChangeValue = useCallback(function (value, event) {
+    (_target$current = target.current) === null || _target$current === void 0 ? void 0 : _target$current.focus();
+  });
+  var handleChangeValue = useEventCallback(function (value, event) {
     onChange === null || onChange === void 0 ? void 0 : onChange(value, event);
-  }, [onChange]);
-  var handleMenuPressEnter = useCallback(function (event) {
+  });
+  var handleMenuPressEnter = useEventCallback(function (event) {
     if (!focusItemValue) {
       return;
     }
@@ -135,28 +137,28 @@ var SelectPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     handleSelect(focusItemValue, focusItem, event);
     handleChangeValue(focusItemValue, event);
     handleClose();
-  }, [data, focusItemValue, handleChangeValue, handleClose, handleSelect, setValue, valueKey]);
-  var handleItemSelect = useCallback(function (value, item, event) {
+  });
+  var handleItemSelect = useEventCallback(function (value, item, event) {
     setValue(value);
     setFocusItemValue(value);
     handleSelect(value, item, event);
     handleChangeValue(value, event);
     handleClose();
-  }, [setValue, setFocusItemValue, handleSelect, handleChangeValue, handleClose]);
-  var handleClean = useCallback(function (event) {
+  });
+  var handleClean = useEventCallback(function (event) {
     if (disabled || !cleanable) {
       return;
     }
     setValue(null);
     setFocusItemValue(value);
     handleChangeValue(null, event);
-  }, [value, disabled, cleanable, setValue, handleChangeValue, setFocusItemValue]);
+  });
   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,
@@ -165,22 +167,16 @@ var SelectPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       setFocusItemValue(null);
     }
   }, rest));
-  var handleExited = useCallback(function () {
+  var handleExited = useEventCallback(function () {
     resetSearch();
     setActive(false);
     onSearch === null || onSearch === void 0 ? void 0 : onSearch('');
     onClose === null || onClose === void 0 ? void 0 : onClose();
-  }, [onClose, resetSearch, onSearch]);
-  var handleEntered = useCallback(function () {
+  });
+  var handleEntered = useEventCallback(function () {
     setActive(true);
     setFocusItemValue(value);
     onOpen === null || onOpen === void 0 ? void 0 : onOpen();
-  }, [onOpen, setFocusItemValue, value]);
-  usePublicMethods(ref, {
-    triggerRef: triggerRef,
-    overlayRef: overlayRef,
-    targetRef: targetRef,
-    listRef: listRef
   });
 
   // Find active `MenuItem` by `value`
@@ -227,7 +223,7 @@ var SelectPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     var menu = items.length ? /*#__PURE__*/React.createElement(DropdownMenu, {
       id: id ? id + "-listbox" : undefined,
       listProps: listProps,
-      listRef: listRef,
+      listRef: list,
       disabledItemValues: disabledItemValues,
       valueKey: valueKey,
       labelKey: labelKey,
@@ -252,17 +248,17 @@ var SelectPicker = /*#__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, {
@@ -276,17 +272,18 @@ var SelectPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     usedClassNamePropKeys = _usePickerClassName[1];
   return /*#__PURE__*/React.createElement(PickerToggleTrigger, {
     pickerProps: pick(props, pickTriggerPropKeys),
-    ref: triggerRef,
+    ref: trigger,
     placement: placement,
     onEntered: createChainedFunction(handleEntered, onEntered),
     onExited: createChainedFunction(handleExited, onExited),
     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,
     onClean: createChainedFunction(handleClean, onClean),
     onKeyDown: onPickerKeyDown,

package/esm/TreePicker/TreePicker.js

@@ -6,14 +6,14 @@ import _isNil from "lodash/isNil";
 import _isUndefined from "lodash/isUndefined";
 import _omit from "lodash/omit";
 import _pick from "lodash/pick";
-import React, { useState, useRef, useEffect, useCallback, useContext, useMemo } from 'react';
+import React, { useState, useEffect, useContext, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { List, AutoSizer } from '../Windowing';
 import TreeNode from './TreeNode';
 import { createDragPreview, getKeyParentMap, getPathTowardsItem, getTreeNodeIndent, removeDragPreview, stringifyTreeNodeLabel } from '../utils/treeUtils';
-import { createChainedFunction, useClassNames, useCustom, useControlled, TREE_NODE_DROP_POSITION, KEY_VALUES, mergeRefs, shallowEqual } from '../utils';
+import { createChainedFunction, useClassNames, useCustom, useControlled, useEventCallback, TREE_NODE_DROP_POSITION, KEY_VALUES, mergeRefs, shallowEqual } from '../utils';
 import { getExpandWhenSearching, hasVisibleChildren, getDragNodeKeys, calDropNodePosition, createUpdateTreeDataFunction, useTreeDrag, useFlattenTreeData, getTreeActiveNode, getDefaultExpandItemValues, useTreeNodeRefs, useTreeSearch, focusPreviousItem, getFocusableItems, focusNextItem, getActiveItem, toggleExpand, useGetTreeNodeChildren, focusToActiveTreeNode, leftArrowHandler, focusTreeNode, rightArrowHandler, isSearching } from '../utils/treeUtils';
-import { PickerToggle, PickerOverlay, SearchBar, PickerToggleTrigger, createConcatChildrenFunction, usePickerClassName, onMenuKeyDown as _onMenuKeyDown, usePublicMethods, listPickerPropTypes, pickTriggerPropKeys, omitTriggerPropKeys, useToggleKeyDownEvent } from '../Picker';
+import { PickerToggle, PickerOverlay, SearchBar, PickerToggleTrigger, createConcatChildrenFunction, usePickerClassName, usePickerRef, onMenuKeyDown as _onMenuKeyDown, listPickerPropTypes, pickTriggerPropKeys, omitTriggerPropKeys, useToggleKeyDownEvent } from '../Picker';
 import TreeContext from '../Tree/TreeContext';
 var emptyArray = [];
 var itemSize = function itemSize() {
@@ -101,17 +101,21 @@ var TreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     renderMenu = props.renderMenu,
     renderValue = props.renderValue,
     rest = _objectWithoutPropertiesLoose(props, ["as", "data", "appearance", "style", "showIndentLine", "value", "locale", "height", "menuMaxHeight", "menuStyle", "className", "disabled", "placement", "cleanable", "searchable", "virtualized", "classPrefix", "defaultValue", "placeholder", "searchKeyword", "menuClassName", "menuAutoWidth", "searchBy", "toggleAs", "labelKey", "valueKey", "childrenKey", "draggable", "defaultExpandAll", "disabledItemValues", "expandItemValues", "defaultExpandItemValues", "id", "listProps", "getChildren", "renderTreeIcon", "renderTreeNode", "onExit", "onExited", "onClean", "onOpen", "onSearch", "onSelect", "onSelectItem", "onChange", "onEntered", "onClose", "onDragEnd", "onDragStart", "onDragEnter", "onDragLeave", "onDragOver", "onDrop", "onExpand", "renderExtraFooter", "renderMenu", "renderValue"]);
-  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 _useCustom = useCustom('Picker', overrideLocale),
     rtl = _useCustom.rtl,
     locale = _useCustom.locale;
   var _useContext = useContext(TreeContext),
     inline = _useContext.inline;
+  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 _useControlled = useControlled(controlledValue, defaultValue),
     value = _useControlled[0],
     setValue = _useControlled[1],
@@ -182,7 +186,7 @@ var TreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     treeNodesRefs = _useTreeNodeRefs.treeNodesRefs,
     saveTreeNodeRef = _useTreeNodeRefs.saveTreeNodeRef;
   var activeNode = getTreeActiveNode(flattenNodes, value, valueKey);
-  var getFormattedNodes = useCallback(function (render) {
+  var getFormattedNodes = function getFormattedNodes(render) {
     if (virtualized) {
       return formatVirtualizedTreeData(flattenNodes, filteredData, expandItemValues, {
         searchKeyword: searchKeywordState
@@ -193,20 +197,20 @@ var TreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     return filteredData.map(function (dataItem, index) {
       return render === null || render === void 0 ? void 0 : render(dataItem, index, 1);
     });
-  }, [searchKeywordState, expandItemValues, filteredData, flattenNodes, formatVirtualizedTreeData, virtualized]);
-  var focusActiveNode = useCallback(function () {
-    if (listRef.current) {
+  };
+  var focusActiveNode = function focusActiveNode() {
+    if (list.current) {
       focusToActiveTreeNode({
-        list: listRef.current,
+        list: list.current,
         valueKey: valueKey,
         selector: "." + treePrefix('node-active'),
         activeNode: activeNode,
         virtualized: virtualized,
-        container: treeViewRef.current,
+        container: treeView.current,
         formattedNodes: getFormattedNodes()
       });
     }
-  }, [treePrefix, activeNode, getFormattedNodes, valueKey, virtualized]);
+  };
   useEffect(function () {
     setFilteredData(data, searchKeywordState);
     setTreeData(data);
@@ -222,7 +226,7 @@ var TreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
   useEffect(function () {
     setSearchKeyword(searchKeyword !== null && searchKeyword !== void 0 ? searchKeyword : '');
   }, [searchKeyword, setSearchKeyword]);
-  var getDropData = useCallback(function (nodeData) {
+  var getDropData = function getDropData(nodeData) {
     var options = {
       valueKey: valueKey,
       childrenKey: childrenKey
@@ -240,7 +244,7 @@ var TreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
         dropNodePosition: dropNodePosition
       }, options)
     };
-  }, [dragNode, valueKey, childrenKey, dropNodePosition]);
+  };
   var getTreeNodeProps = function getTreeNodeProps(node, layer, index) {
     var draggingNode = dragNode !== null && dragNode !== void 0 ? dragNode : {};
     return {
@@ -289,8 +293,8 @@ var TreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       return node[childrenKey];
     });
   }, [childrenKey, data, valueKey]);
-  var handleSelect = useCallback(function (nodeData, event) {
-    var _targetRef$current, _triggerRef$current, _triggerRef$current$c;
+  var handleSelect = useEventCallback(function (nodeData, event) {
+    var _target$current, _trigger$current, _trigger$current$clos;
     if (!nodeData) {
       return;
     }
@@ -304,10 +308,10 @@ var TreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     onSelectItem === null || onSelectItem === void 0 ? void 0 : onSelectItem(nodeData, getPathTowardsItem(nodeData, function (item) {
       return itemParentMap.get(item[valueKey]);
     }));
-    (_targetRef$current = targetRef.current) === null || _targetRef$current === void 0 ? void 0 : _targetRef$current.focus();
-    (_triggerRef$current = triggerRef.current) === null || _triggerRef$current === void 0 ? void 0 : (_triggerRef$current$c = _triggerRef$current.close) === null || _triggerRef$current$c === void 0 ? void 0 : _triggerRef$current$c.call(_triggerRef$current);
-  }, [valueKey, isControlled, onChange, onSelect, onSelectItem, setValue, itemParentMap]);
-  var handleExpand = useCallback(function (node) {
+    (_target$current = target.current) === null || _target$current === void 0 ? void 0 : _target$current.focus();
+    (_trigger$current = trigger.current) === null || _trigger$current === void 0 ? void 0 : (_trigger$current$clos = _trigger$current.close) === null || _trigger$current$clos === void 0 ? void 0 : _trigger$current$clos.call(_trigger$current);
+  });
+  var handleExpand = useEventCallback(function (node) {
     var nextExpandItemValues = toggleExpand({
       node: node,
       isExpand: !node.expand,
@@ -322,8 +326,8 @@ var TreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     if (_isFunction(getChildren) && !node.expand && Array.isArray(node[childrenKey]) && node[childrenKey].length === 0) {
       loadChildren(node, getChildren);
     }
-  }, [valueKey, childrenKey, expandItemValues, getChildren, onExpand, setExpandItemValues, loadChildren]);
-  var handleDragStart = useCallback(function (nodeData, event) {
+  });
+  var handleDragStart = useEventCallback(function (nodeData, event) {
     if (draggable) {
       var _event$dataTransfer;
       var dragMoverNode = createDragPreview(stringifyTreeNodeLabel(nodeData[labelKey]), treePrefix('drag-preview'));
@@ -332,8 +336,8 @@ var TreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       setDragNode(flattenNodes[nodeData.refKey]);
       onDragStart === null || onDragStart === void 0 ? void 0 : onDragStart(nodeData, event);
     }
-  }, [draggable, labelKey, treePrefix, setDragNodeKeys, childrenKey, valueKey, setDragNode, flattenNodes, onDragStart]);
-  var handleDragEnter = useCallback(function (nodeData, event) {
+  });
+  var handleDragEnter = useEventCallback(function (nodeData, event) {
     if (dragNodeKeys.some(function (d) {
       return shallowEqual(d, nodeData[valueKey]);
     })) {
@@ -344,8 +348,8 @@ var TreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       setDropNodePosition(calDropNodePosition(event, treeNodesRefs[nodeData.refKey]));
     }
     onDragEnter === null || onDragEnter === void 0 ? void 0 : onDragEnter(nodeData, event);
-  }, [dragNode, treeNodesRefs, dragNodeKeys, onDragEnter, setDragOverNodeKey, setDropNodePosition, valueKey]);
-  var handleDragOver = useCallback(function (nodeData, event) {
+  });
+  var handleDragOver = useEventCallback(function (nodeData, event) {
     if (dragNodeKeys.some(function (d) {
       return shallowEqual(d, nodeData[valueKey]);
     })) {
@@ -358,18 +362,18 @@ var TreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       setDropNodePosition(lastDropNodePosition);
     }
     onDragOver === null || onDragOver === void 0 ? void 0 : onDragOver(nodeData, event);
-  }, [dragNode, dragNodeKeys, dragOverNodeKey, dropNodePosition, onDragOver, setDropNodePosition, treeNodesRefs, valueKey]);
-  var handleDragLeave = useCallback(function (nodeData, event) {
+  });
+  var handleDragLeave = useEventCallback(function (nodeData, event) {
     onDragLeave === null || onDragLeave === void 0 ? void 0 : onDragLeave(nodeData, event);
-  }, [onDragLeave]);
-  var handleDragEnd = useCallback(function (nodeData, event) {
+  });
+  var handleDragEnd = useEventCallback(function (nodeData, event) {
     removeDragPreview();
     setDragNode(null);
     setDragNodeKeys([]);
     setDragOverNodeKey(null);
     onDragEnd === null || onDragEnd === void 0 ? void 0 : onDragEnd(nodeData, event);
-  }, [setDragNode, setDragNodeKeys, setDragOverNodeKey, onDragEnd]);
-  var handleDrop = useCallback(function (nodeData, event) {
+  });
+  var handleDrop = useEventCallback(function (nodeData, event) {
     if (dragNodeKeys.some(function (d) {
       return shallowEqual(d, nodeData[valueKey]);
     })) {
@@ -382,34 +386,26 @@ var TreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     setDragNode(null);
     setDragNodeKeys([]);
     setDragOverNodeKey(null);
-  }, [dragNodeKeys, setDragNode, setDragOverNodeKey, setDragNodeKeys, onDrop, getDropData, valueKey]);
-  var handleOpen = useCallback(function () {
-    var _triggerRef$current2, _triggerRef$current2$;
-    (_triggerRef$current2 = triggerRef.current) === null || _triggerRef$current2 === void 0 ? void 0 : (_triggerRef$current2$ = _triggerRef$current2.open) === null || _triggerRef$current2$ === void 0 ? void 0 : _triggerRef$current2$.call(_triggerRef$current2);
+  });
+  var handleOpen = useEventCallback(function () {
+    var _trigger$current2, _trigger$current2$ope;
+    (_trigger$current2 = trigger.current) === null || _trigger$current2 === void 0 ? void 0 : (_trigger$current2$ope = _trigger$current2.open) === null || _trigger$current2$ope === void 0 ? void 0 : _trigger$current2$ope.call(_trigger$current2);
     focusActiveNode();
     onOpen === null || onOpen === void 0 ? void 0 : onOpen();
     setActive(true);
-  }, [focusActiveNode, onOpen]);
-  var handleClose = useCallback(function () {
-    var _triggerRef$current3, _triggerRef$current3$, _targetRef$current2;
-    (_triggerRef$current3 = triggerRef.current) === null || _triggerRef$current3 === void 0 ? void 0 : (_triggerRef$current3$ = _triggerRef$current3.close) === null || _triggerRef$current3$ === void 0 ? void 0 : _triggerRef$current3$.call(_triggerRef$current3);
+  });
+  var handleClose = useEventCallback(function () {
+    var _trigger$current3, _trigger$current3$clo, _target$current2;
+    (_trigger$current3 = trigger.current) === null || _trigger$current3 === void 0 ? void 0 : (_trigger$current3$clo = _trigger$current3.close) === null || _trigger$current3$clo === void 0 ? void 0 : _trigger$current3$clo.call(_trigger$current3);
     setSearchKeyword('');
     setActive(false);
     setFocusItemValue(activeNode === null || activeNode === void 0 ? void 0 : activeNode[valueKey]);
     /**
      * when using keyboard toggle picker, should refocus on PickerToggle Component after close picker menu
      */
-    (_targetRef$current2 = targetRef.current) === null || _targetRef$current2 === void 0 ? void 0 : _targetRef$current2.focus();
-  }, [activeNode, setSearchKeyword, valueKey]);
-  usePublicMethods(ref, {
-    rootRef: inline ? treeViewRef : undefined,
-    triggerRef: triggerRef,
-    overlayRef: overlayRef,
-    targetRef: targetRef,
-    listRef: listRef,
-    inline: inline
+    (_target$current2 = target.current) === null || _target$current2 === void 0 ? void 0 : _target$current2.focus();
   });
-  var handleFocusItem = useCallback(function (key) {
+  var handleFocusItem = useEventCallback(function (key) {
     var focusableItems = getFocusableItems(filteredData, {
       disabledItemValues: disabledItemValues,
       valueKey: valueKey,
@@ -434,8 +430,8 @@ var TreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     if (key === KEY_VALUES.UP) {
       focusPreviousItem(focusProps);
     }
-  }, [searchKeywordState, expandItemValues, filteredData, focusItemValue, treeNodesRefs, treePrefix, valueKey, childrenKey, disabledItemValues]);
-  var handleLeftArrow = useCallback(function () {
+  });
+  var handleLeftArrow = useEventCallback(function () {
     if (_isNil(focusItemValue)) return;
     var focusItem = getActiveItem(focusItemValue, flattenNodes, valueKey);
     leftArrowHandler({
@@ -449,8 +445,8 @@ var TreePicker = /*#__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, "." + treePrefix('node-label'));
       }
     });
-  }, [expandItemValues, flattenNodes, focusItemValue, handleExpand, treeNodesRefs, treePrefix, valueKey, childrenKey]);
-  var handleRightArrow = useCallback(function () {
+  });
+  var handleRightArrow = useEventCallback(function () {
     if (_isNil(focusItemValue)) return;
     var focusItem = getActiveItem(focusItemValue, flattenNodes, valueKey);
     rightArrowHandler({
@@ -462,13 +458,13 @@ var TreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
         handleFocusItem(KEY_VALUES.DOWN);
       }
     });
-  }, [focusItemValue, flattenNodes, valueKey, expandItemValues, childrenKey, handleExpand, handleFocusItem]);
-  var selectActiveItem = useCallback(function (event) {
+  });
+  var selectActiveItem = useEventCallback(function (event) {
     if (_isNil(focusItemValue)) return;
     var activeItem = getActiveItem(focusItemValue, flattenNodes, valueKey);
     handleSelect(activeItem, event);
-  }, [flattenNodes, valueKey, focusItemValue, handleSelect]);
-  var handleClean = useCallback(function (event) {
+  });
+  var handleClean = useEventCallback(function (event) {
     var nullValue = null;
     var target = event.target;
     // exclude searchBar
@@ -479,13 +475,13 @@ var TreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       setValue(null);
     }
     onChange === null || onChange === void 0 ? void 0 : onChange(nullValue, event);
-  }, [cleanable, disabled, onChange, setValue, isControlled]);
+  });
   var onPickerKeydown = useToggleKeyDownEvent(_extends({
     toggle: !activeNode || !active,
-    triggerRef: triggerRef,
-    targetRef: targetRef,
-    overlayRef: overlayRef,
-    searchInputRef: searchInputRef,
+    trigger: trigger,
+    target: target,
+    overlay: overlay,
+    searchInput: searchInput,
     active: active,
     onExit: handleClean,
     onClose: handleClose,
@@ -504,8 +500,8 @@ var TreePicker = /*#__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, {
@@ -519,7 +515,7 @@ var TreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       right: rtl ? handleLeftArrow : handleRightArrow,
       enter: selectActiveItem
     });
-  }, [handleFocusItem, handleLeftArrow, handleRightArrow, rtl, selectActiveItem]);
+  });
   var renderNode = function renderNode(node, index, layer) {
     if (!node.visible) {
       return null;
@@ -594,7 +590,7 @@ var TreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     return /*#__PURE__*/React.createElement("div", {
       role: "tree",
       id: id ? id + "-listbox" : undefined,
-      ref: treeViewRef,
+      ref: inline ? root : treeView,
       className: classes,
       style: styles,
       onKeyDown: inline ? handleTreeKeyDown : undefined
@@ -609,7 +605,7 @@ var TreePicker = /*#__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,
@@ -630,14 +626,14 @@ var TreePicker = /*#__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(renderTree()) : renderTree(), renderExtraFooter === null || renderExtraFooter === void 0 ? void 0 : renderExtraFooter());
   };
 
@@ -671,7 +667,7 @@ var TreePicker = /*#__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,
@@ -680,10 +676,11 @@ var TreePicker = /*#__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, ['cascade'])), {
     id: id,
-    ref: targetRef,
+    ref: target,
     appearance: appearance,
     onKeyDown: onPickerKeydown,
     onClean: createChainedFunction(handleClean, onClean),

package/esm/index.d.ts

@@ -94,6 +94,8 @@ export { default as DateInput } from './DateInput';
 export type { DateInputProps } from './DateInput';
 export { default as DatePicker } from './DatePicker';
 export type { DatePickerProps } from './DatePicker';
+export { default as DateRangeInput } from './DateRangeInput';
+export type { DateRangeInputProps } from './DateRangeInput';
 export { default as DateRangePicker } from './DateRangePicker';
 export type { DateRangePickerProps } from './DateRangePicker';
 export { default as AutoComplete } from './AutoComplete';

package/esm/index.js

@@ -50,6 +50,7 @@ export { default as Cascader } from './Cascader';
 export { default as MultiCascader } from './MultiCascader';
 export { default as DateInput } from './DateInput';
 export { default as DatePicker } from './DatePicker';
+export { default as DateRangeInput } from './DateRangeInput';
 export { default as DateRangePicker } from './DateRangePicker';
 export { default as AutoComplete } from './AutoComplete';
 export { default as Uploader } from './Uploader';

package/esm/locales/index.d.ts

@@ -31,8 +31,8 @@ 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 DatePickerLocale = PickKeys<typeof defaultLocale.DatePicker> & CommonLocale;
+export declare type DateRangePickerLocale = PickKeys<typeof defaultLocale.DateRangePicker> & CommonLocale;
 export declare type PickerLocale = typeof defaultLocale.Picker & CommonLocale;
 export declare type InputPickerLocale = PickerLocale & typeof defaultLocale.InputPicker;
 export declare type UploaderLocale = PickKeys<typeof defaultLocale.Uploader> & CommonLocale;

package/esm/utils/constants.d.ts

@@ -49,5 +49,6 @@ export declare const KEY_VALUES: {
 export declare enum DATERANGE_DISABLED_TARGET {
     CALENDAR = "CALENDAR",
     TOOLBAR_BUTTON_OK = "TOOLBAR_BUTTON_OK",
-    TOOLBAR_SHORTCUT = "TOOLBAR_SHORTCUT"
+    TOOLBAR_SHORTCUT = "TOOLBAR_SHORTCUT",
+    INPUT = "INPUT"
 }

package/esm/utils/constants.js

@@ -60,4 +60,5 @@ export var DATERANGE_DISABLED_TARGET;
   DATERANGE_DISABLED_TARGET["CALENDAR"] = "CALENDAR";
   DATERANGE_DISABLED_TARGET["TOOLBAR_BUTTON_OK"] = "TOOLBAR_BUTTON_OK";
   DATERANGE_DISABLED_TARGET["TOOLBAR_SHORTCUT"] = "TOOLBAR_SHORTCUT";
+  DATERANGE_DISABLED_TARGET["INPUT"] = "INPUT";
 })(DATERANGE_DISABLED_TARGET || (DATERANGE_DISABLED_TARGET = {}));

package/esm/utils/dateUtils.d.ts

@@ -63,7 +63,6 @@ export declare const shouldOnlyRenderTime: (format: string) => boolean;
  * @return date[]
  */
 export declare function getMonthView(monthDate: Date, isoWeek: boolean): Date[];
-export declare function getDateMask(formatStr: string): (string | RegExp)[];
 /**
  * Copy the time of one date to another
  */

package/esm/utils/dateUtils.js

@@ -130,11 +130,6 @@ export function getMonthView(monthDate, isoWeek) {
   }
   return weeks;
 }
-export function getDateMask(formatStr) {
-  return Array.from(formatStr).map(function (i) {
-    return i.match(/[A-Za-z]/) ? /[\d|A-Za-z]/ : i;
-  });
-}
 
 /**
  * Copy the time of one date to another

package/esm/utils/getStringLength.d.ts

@@ -0,0 +1,2 @@
+declare function getStringLength(str: string): number;
+export default getStringLength;