rsuite 5.49.0 → 5.51.0

package/cjs/TreePicker/TreePicker.js

@@ -106,17 +106,21 @@ var TreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     renderMenu = props.renderMenu,
     renderValue = props.renderValue,
     rest = (0, _objectWithoutPropertiesLoose2.default)(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 = (0, _react.useRef)(null);
-  var targetRef = (0, _react.useRef)(null);
-  var listRef = (0, _react.useRef)(null);
-  var overlayRef = (0, _react.useRef)(null);
-  var searchInputRef = (0, _react.useRef)(null);
-  var treeViewRef = (0, _react.useRef)(null);
   var _useCustom = (0, _utils.useCustom)('Picker', overrideLocale),
     rtl = _useCustom.rtl,
     locale = _useCustom.locale;
   var _useContext = (0, _react.useContext)(_TreeContext.default),
     inline = _useContext.inline;
+  var _usePickerRef = (0, _Picker.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 = (0, _utils.useControlled)(controlledValue, defaultValue),
     value = _useControlled[0],
     setValue = _useControlled[1],
@@ -187,7 +191,7 @@ var TreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     treeNodesRefs = _useTreeNodeRefs.treeNodesRefs,
     saveTreeNodeRef = _useTreeNodeRefs.saveTreeNodeRef;
   var activeNode = (0, _treeUtils.getTreeActiveNode)(flattenNodes, value, valueKey);
-  var getFormattedNodes = (0, _react.useCallback)(function (render) {
+  var getFormattedNodes = function getFormattedNodes(render) {
     if (virtualized) {
       return formatVirtualizedTreeData(flattenNodes, filteredData, expandItemValues, {
         searchKeyword: searchKeywordState
@@ -198,20 +202,20 @@ var TreePicker = /*#__PURE__*/_react.default.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 = (0, _react.useCallback)(function () {
-    if (listRef.current) {
+  };
+  var focusActiveNode = function focusActiveNode() {
+    if (list.current) {
       (0, _treeUtils.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]);
+  };
   (0, _react.useEffect)(function () {
     setFilteredData(data, searchKeywordState);
     setTreeData(data);
@@ -227,7 +231,7 @@ var TreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   (0, _react.useEffect)(function () {
     setSearchKeyword(searchKeyword !== null && searchKeyword !== void 0 ? searchKeyword : '');
   }, [searchKeyword, setSearchKeyword]);
-  var getDropData = (0, _react.useCallback)(function (nodeData) {
+  var getDropData = function getDropData(nodeData) {
     var options = {
       valueKey: valueKey,
       childrenKey: childrenKey
@@ -245,7 +249,7 @@ var TreePicker = /*#__PURE__*/_react.default.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 {
@@ -280,8 +284,8 @@ var TreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       onDragEnd: handleDragEnd,
       onDrop: handleDrop,
       onExpand: handleExpand,
-      onRenderTreeNode: renderTreeNode,
-      onRenderTreeIcon: renderTreeIcon
+      renderTreeNode: renderTreeNode,
+      renderTreeIcon: renderTreeIcon
     };
   };
 
@@ -294,8 +298,8 @@ var TreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       return node[childrenKey];
     });
   }, [childrenKey, data, valueKey]);
-  var handleSelect = (0, _react.useCallback)(function (nodeData, event) {
-    var _targetRef$current, _triggerRef$current, _triggerRef$current$c;
+  var handleSelect = (0, _utils.useEventCallback)(function (nodeData, event) {
+    var _target$current, _trigger$current, _trigger$current$clos;
     if (!nodeData) {
       return;
     }
@@ -309,10 +313,10 @@ var TreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     onSelectItem === null || onSelectItem === void 0 ? void 0 : onSelectItem(nodeData, (0, _treeUtils.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 = (0, _react.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 = (0, _utils.useEventCallback)(function (node) {
     var nextExpandItemValues = (0, _treeUtils.toggleExpand)({
       node: node,
       isExpand: !node.expand,
@@ -327,8 +331,8 @@ var TreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     if ((0, _isFunction2.default)(getChildren) && !node.expand && Array.isArray(node[childrenKey]) && node[childrenKey].length === 0) {
       loadChildren(node, getChildren);
     }
-  }, [valueKey, childrenKey, expandItemValues, getChildren, onExpand, setExpandItemValues, loadChildren]);
-  var handleDragStart = (0, _react.useCallback)(function (nodeData, event) {
+  });
+  var handleDragStart = (0, _utils.useEventCallback)(function (nodeData, event) {
     if (draggable) {
       var _event$dataTransfer;
       var dragMoverNode = (0, _treeUtils.createDragPreview)((0, _treeUtils.stringifyTreeNodeLabel)(nodeData[labelKey]), treePrefix('drag-preview'));
@@ -337,8 +341,8 @@ var TreePicker = /*#__PURE__*/_react.default.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 = (0, _react.useCallback)(function (nodeData, event) {
+  });
+  var handleDragEnter = (0, _utils.useEventCallback)(function (nodeData, event) {
     if (dragNodeKeys.some(function (d) {
       return (0, _utils.shallowEqual)(d, nodeData[valueKey]);
     })) {
@@ -349,8 +353,8 @@ var TreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       setDropNodePosition((0, _treeUtils.calDropNodePosition)(event, treeNodesRefs[nodeData.refKey]));
     }
     onDragEnter === null || onDragEnter === void 0 ? void 0 : onDragEnter(nodeData, event);
-  }, [dragNode, treeNodesRefs, dragNodeKeys, onDragEnter, setDragOverNodeKey, setDropNodePosition, valueKey]);
-  var handleDragOver = (0, _react.useCallback)(function (nodeData, event) {
+  });
+  var handleDragOver = (0, _utils.useEventCallback)(function (nodeData, event) {
     if (dragNodeKeys.some(function (d) {
       return (0, _utils.shallowEqual)(d, nodeData[valueKey]);
     })) {
@@ -363,18 +367,18 @@ var TreePicker = /*#__PURE__*/_react.default.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 = (0, _react.useCallback)(function (nodeData, event) {
+  });
+  var handleDragLeave = (0, _utils.useEventCallback)(function (nodeData, event) {
     onDragLeave === null || onDragLeave === void 0 ? void 0 : onDragLeave(nodeData, event);
-  }, [onDragLeave]);
-  var handleDragEnd = (0, _react.useCallback)(function (nodeData, event) {
+  });
+  var handleDragEnd = (0, _utils.useEventCallback)(function (nodeData, event) {
     (0, _treeUtils.removeDragPreview)();
     setDragNode(null);
     setDragNodeKeys([]);
     setDragOverNodeKey(null);
     onDragEnd === null || onDragEnd === void 0 ? void 0 : onDragEnd(nodeData, event);
-  }, [setDragNode, setDragNodeKeys, setDragOverNodeKey, onDragEnd]);
-  var handleDrop = (0, _react.useCallback)(function (nodeData, event) {
+  });
+  var handleDrop = (0, _utils.useEventCallback)(function (nodeData, event) {
     if (dragNodeKeys.some(function (d) {
       return (0, _utils.shallowEqual)(d, nodeData[valueKey]);
     })) {
@@ -387,34 +391,26 @@ var TreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     setDragNode(null);
     setDragNodeKeys([]);
     setDragOverNodeKey(null);
-  }, [dragNodeKeys, setDragNode, setDragOverNodeKey, setDragNodeKeys, onDrop, getDropData, valueKey]);
-  var handleOpen = (0, _react.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 = (0, _utils.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 = (0, _react.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 = (0, _utils.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]);
-  (0, _Picker.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 = (0, _react.useCallback)(function (key) {
+  var handleFocusItem = (0, _utils.useEventCallback)(function (key) {
     var focusableItems = (0, _treeUtils.getFocusableItems)(filteredData, {
       disabledItemValues: disabledItemValues,
       valueKey: valueKey,
@@ -439,8 +435,8 @@ var TreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     if (key === _utils.KEY_VALUES.UP) {
       (0, _treeUtils.focusPreviousItem)(focusProps);
     }
-  }, [searchKeywordState, expandItemValues, filteredData, focusItemValue, treeNodesRefs, treePrefix, valueKey, childrenKey, disabledItemValues]);
-  var handleLeftArrow = (0, _react.useCallback)(function () {
+  });
+  var handleLeftArrow = (0, _utils.useEventCallback)(function () {
     if ((0, _isNil2.default)(focusItemValue)) return;
     var focusItem = (0, _treeUtils.getActiveItem)(focusItemValue, flattenNodes, valueKey);
     (0, _treeUtils.leftArrowHandler)({
@@ -454,8 +450,8 @@ var TreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
         (0, _treeUtils.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 = (0, _react.useCallback)(function () {
+  });
+  var handleRightArrow = (0, _utils.useEventCallback)(function () {
     if ((0, _isNil2.default)(focusItemValue)) return;
     var focusItem = (0, _treeUtils.getActiveItem)(focusItemValue, flattenNodes, valueKey);
     (0, _treeUtils.rightArrowHandler)({
@@ -467,30 +463,30 @@ var TreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
         handleFocusItem(_utils.KEY_VALUES.DOWN);
       }
     });
-  }, [focusItemValue, flattenNodes, valueKey, expandItemValues, childrenKey, handleExpand, handleFocusItem]);
-  var selectActiveItem = (0, _react.useCallback)(function (event) {
+  });
+  var selectActiveItem = (0, _utils.useEventCallback)(function (event) {
     if ((0, _isNil2.default)(focusItemValue)) return;
     var activeItem = (0, _treeUtils.getActiveItem)(focusItemValue, flattenNodes, valueKey);
     handleSelect(activeItem, event);
-  }, [flattenNodes, valueKey, focusItemValue, handleSelect]);
-  var handleClean = (0, _react.useCallback)(function (event) {
+  });
+  var handleClean = (0, _utils.useEventCallback)(function (event) {
     var nullValue = null;
     var target = event.target;
-    // exclude searchBar
-    if (target.matches('div[role="searchbox"] > input') || disabled || !cleanable) {
+    // exclude searchbox
+    if (target.matches('input[role="searchbox"]') || disabled || !cleanable) {
       return;
     }
     if (!isControlled) {
       setValue(null);
     }
     onChange === null || onChange === void 0 ? void 0 : onChange(nullValue, event);
-  }, [cleanable, disabled, onChange, setValue, isControlled]);
+  });
   var onPickerKeydown = (0, _Picker.useToggleKeyDownEvent)((0, _extends2.default)({
     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,
@@ -509,8 +505,8 @@ var TreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       });
     }
   }, rest));
-  var handleTreeKeyDown = (0, _react.useCallback)(function (event) {
-    if (!treeViewRef.current) {
+  var handleTreeKeyDown = (0, _utils.useEventCallback)(function (event) {
+    if (!treeView.current) {
       return;
     }
     (0, _Picker.onMenuKeyDown)(event, {
@@ -524,7 +520,7 @@ var TreePicker = /*#__PURE__*/_react.default.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;
@@ -551,7 +547,8 @@ var TreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
           return saveTreeNodeRef(_ref, node.refKey);
         }
       })), /*#__PURE__*/_react.default.createElement("div", {
-        className: treePrefix('children')
+        className: treePrefix('group'),
+        role: "group"
       }, nodes.map(function (child, i) {
         return renderNode(child, i, layer);
       }), showIndentLine && /*#__PURE__*/_react.default.createElement("span", {
@@ -593,18 +590,14 @@ var TreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     var _withTreeClassPrefix;
     var classes = withTreeClassPrefix((_withTreeClassPrefix = {}, _withTreeClassPrefix[className !== null && className !== void 0 ? className : ''] = inline, _withTreeClassPrefix.virtualized = virtualized, _withTreeClassPrefix));
     var formattedNodes = getFormattedNodes(renderNode);
-    var styles = inline ? (0, _extends2.default)({
-      height: height
-    }, style) : {};
-    return /*#__PURE__*/_react.default.createElement("div", {
-      role: "tree",
-      id: id ? id + "-listbox" : undefined,
-      ref: treeViewRef,
+    return /*#__PURE__*/_react.default.createElement(_Picker.TreeView, {
+      treeRootClassName: treePrefix('root'),
+      ref: inline ? root : treeView,
       className: classes,
-      style: styles,
+      style: inline ? (0, _extends2.default)({
+        height: height
+      }, style) : {},
       onKeyDown: inline ? handleTreeKeyDown : undefined
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: treePrefix('nodes')
     }, virtualized ? /*#__PURE__*/_react.default.createElement(_Windowing.AutoSizer, {
       defaultHeight: inline ? height : menuMaxHeight,
       style: {
@@ -614,15 +607,15 @@ var TreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     }, function (_ref5) {
       var height = _ref5.height;
       return /*#__PURE__*/_react.default.createElement(_Windowing.List, (0, _extends2.default)({
-        ref: listRef,
+        ref: list,
         height: height,
         itemSize: itemSize,
         itemCount: formattedNodes.length,
         itemData: formattedNodes
       }, listProps), renderVirtualListNode);
-    }) : formattedNodes));
+    }) : formattedNodes);
   };
-  var renderDropdownMenu = function renderDropdownMenu(positionProps, speakerRef) {
+  var renderTreeView = function renderTreeView(positionProps, speakerRef) {
     var left = positionProps.left,
       top = positionProps.top,
       className = positionProps.className;
@@ -631,18 +624,18 @@ var TreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       left: left,
       top: top
     });
-    return /*#__PURE__*/_react.default.createElement(_Picker.PickerOverlay, {
+    return /*#__PURE__*/_react.default.createElement(_Picker.PickerPopup, {
       autoWidth: menuAutoWidth,
       className: classes,
       style: mergedMenuStyle,
-      ref: (0, _utils.mergeRefs)(overlayRef, speakerRef),
+      ref: (0, _utils.mergeRefs)(overlay, speakerRef),
       onKeyDown: onPickerKeydown,
-      target: triggerRef
+      target: trigger
     }, searchable ? /*#__PURE__*/_react.default.createElement(_Picker.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());
   };
 
@@ -675,20 +668,22 @@ var TreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     return renderTree();
   }
   return /*#__PURE__*/_react.default.createElement(_Picker.PickerToggleTrigger, {
+    id: id,
+    popupType: "tree",
     pickerProps: (0, _pick2.default)(props, _Picker.pickTriggerPropKeys),
-    ref: triggerRef,
+    ref: trigger,
     placement: placement,
     onEnter: handleOpen,
     onEntered: onEntered,
     onExit: (0, _utils.createChainedFunction)(onClose, onExit),
     onExited: (0, _utils.createChainedFunction)(handleClose, onExited),
-    speaker: renderDropdownMenu
+    speaker: renderTreeView
   }, /*#__PURE__*/_react.default.createElement(Component, {
     className: classes,
-    style: style
+    style: style,
+    ref: root
   }, /*#__PURE__*/_react.default.createElement(_Picker.PickerToggle, (0, _extends2.default)({}, (0, _omit2.default)(rest, [].concat(_Picker.omitTriggerPropKeys, usedClassNamePropKeys, ['cascade'])), {
-    id: id,
-    ref: targetRef,
+    ref: target,
     appearance: appearance,
     onKeyDown: onPickerKeydown,
     onClean: (0, _utils.createChainedFunction)(handleClean, onClean),
@@ -698,7 +693,8 @@ var TreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     hasValue: hasValidValue,
     active: active,
     placement: placement,
-    inputValue: value
+    inputValue: value,
+    focusItemValue: focusItemValue
   }), selectedElement || locale.placeholder)));
 });
 TreePicker.displayName = 'TreePicker';

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

@@ -77,4 +77,5 @@ exports.DATERANGE_DISABLED_TARGET = 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 || (exports.DATERANGE_DISABLED_TARGET = DATERANGE_DISABLED_TARGET = {}));

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

@@ -5,7 +5,6 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 exports.__esModule = true;
 exports.disabledTime = disabledTime;
 exports.getMonthView = getMonthView;
-exports.getDateMask = getDateMask;
 exports.copyTime = copyTime;
 exports.reverseDateRangeOmitTime = reverseDateRangeOmitTime;
 exports.getReversedTimeMeridian = exports.shouldOnlyRenderTime = exports.shouldRenderDate = exports.shouldRenderMonth = exports.shouldRenderTime = exports.omitHideDisabledProps = exports.calendarOnlyProps = exports.lastDayOfMonth = exports.isLastDayOfMonth = exports.differenceInCalendarMonths = exports.set = exports.isValid = exports.isMatch = exports.subDays = exports.startOfWeek = exports.startOfMonth = exports.startOfISOWeek = exports.startOfDay = exports.setYear = exports.setSeconds = exports.setMonth = exports.setMinutes = exports.setHours = exports.setDate = exports.parseISO = exports.parse = exports.isSameSecond = exports.isSameMonth = exports.isSameDay = exports.isEqual = exports.isBefore = exports.isAfter = exports.getYear = exports.getSeconds = exports.getMonth = exports.getMinutes = exports.getHours = exports.getDaysInMonth = exports.getDay = exports.getDate = exports.format = exports.endOfWeek = exports.endOfMonth = exports.endOfISOWeek = exports.endOfDay = exports.compareAsc = exports.addHours = exports.addMinutes = exports.addSeconds = exports.addYears = exports.addMonths = exports.addDays = void 0;
@@ -183,11 +182,6 @@ function getMonthView(monthDate, isoWeek) {
   }
   return weeks;
 }
-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/cjs/utils/getStringLength.d.ts

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

package/cjs/utils/getStringLength.js

@@ -0,0 +1,18 @@
+'use client';
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+function getStringLength(str) {
+  var length = 0;
+  Array.from(str).forEach(function (char) {
+    if (char.charCodeAt(0) > 255) {
+      length += 2;
+    } else {
+      length++;
+    }
+  });
+  return length;
+}
+var _default = getStringLength;
+exports.default = _default;

package/cjs/utils/index.d.ts

@@ -24,6 +24,7 @@ export { default as scrollTopAnimation } from './scrollTopAnimation';
 export { default as appendTooltip } from './appendTooltip';
 export { default as render } from './render';
 export { default as safeSetSelection } from './safeSetSelection';
+export { default as getStringLength } from './getStringLength';
 /** Hooks **/
 export { default as useClassNames } from './useClassNames';
 export { default as useEventListener } from './useEventListener';

package/cjs/utils/index.js

@@ -25,6 +25,7 @@ var _exportNames = {
   appendTooltip: true,
   render: true,
   safeSetSelection: true,
+  getStringLength: true,
   useClassNames: true,
   useEventListener: true,
   useElementResize: true,
@@ -50,7 +51,7 @@ var _exportNames = {
   DateUtils: true,
   TypeChecker: true
 };
-exports.TypeChecker = exports.DateUtils = exports.globalKey = exports.getClassNamePrefix = exports.defaultClassPrefix = exports.useIsomorphicLayoutEffect = exports.useUniqueId = exports.useMount = exports.useIsMounted = exports.useUpdateEffect = exports.useWillUnmount = exports.useUpdatedRef = exports.useEventCallback = exports.stringToObject = exports.getSafeRegExpString = exports.useRootClose = exports.useControlled = exports.useTimeout = exports.createComponent = exports.usePortal = exports.useCustom = exports.useElementResize = exports.useEventListener = exports.useClassNames = exports.safeSetSelection = exports.render = exports.appendTooltip = exports.scrollTopAnimation = exports.reactToString = exports.composeFunctions = exports.shallowEqualArray = exports.shallowEqual = exports.mergeRefs = exports.getDOMNode = exports.placementPolyfill = exports.clone = exports.previewFile = exports.ajaxUpload = exports.tplTransform = exports.ReactChildren = exports.isOneOf = exports.createChainedFunction = exports.prefix = exports.guid = void 0;
+exports.TypeChecker = exports.DateUtils = exports.globalKey = exports.getClassNamePrefix = exports.defaultClassPrefix = exports.useIsomorphicLayoutEffect = exports.useUniqueId = exports.useMount = exports.useIsMounted = exports.useUpdateEffect = exports.useWillUnmount = exports.useUpdatedRef = exports.useEventCallback = exports.stringToObject = exports.getSafeRegExpString = exports.useRootClose = exports.useControlled = exports.useTimeout = exports.createComponent = exports.usePortal = exports.useCustom = exports.useElementResize = exports.useEventListener = exports.useClassNames = exports.getStringLength = exports.safeSetSelection = exports.render = exports.appendTooltip = exports.scrollTopAnimation = exports.reactToString = exports.composeFunctions = exports.shallowEqualArray = exports.shallowEqual = exports.mergeRefs = exports.getDOMNode = exports.placementPolyfill = exports.clone = exports.previewFile = exports.ajaxUpload = exports.tplTransform = exports.ReactChildren = exports.isOneOf = exports.createChainedFunction = exports.prefix = exports.guid = void 0;
 var _BrowserDetection = require("./BrowserDetection");
 Object.keys(_BrowserDetection).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -126,6 +127,8 @@ var _render = _interopRequireDefault(require("./render"));
 exports.render = _render.default;
 var _safeSetSelection = _interopRequireDefault(require("./safeSetSelection"));
 exports.safeSetSelection = _safeSetSelection.default;
+var _getStringLength = _interopRequireDefault(require("./getStringLength"));
+exports.getStringLength = _getStringLength.default;
 var _useClassNames = _interopRequireDefault(require("./useClassNames"));
 exports.useClassNames = _useClassNames.default;
 var _useEventListener = _interopRequireDefault(require("./useEventListener"));