rsuite 5.49.0 → 5.51.0

package/cjs/CheckTreePicker/CheckTreeNode.js

@@ -8,10 +8,9 @@ exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _react = _interopRequireWildcard(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
 var _ArrowDown = _interopRequireDefault(require("@rsuite/icons/legacy/ArrowDown"));
 var _Spinner = _interopRequireDefault(require("@rsuite/icons/legacy/Spinner"));
-var _DropdownMenuCheckItem = _interopRequireDefault(require("../Picker/DropdownMenuCheckItem"));
+var _ListCheckItem = _interopRequireDefault(require("../Picker/ListCheckItem"));
 var _treeUtils = require("../utils/treeUtils");
 var _utils = require("../utils");
 var CheckTreeNode = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
@@ -35,11 +34,12 @@ var CheckTreeNode = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     label = _ref.label,
     uncheckable = _ref.uncheckable,
     checkState = _ref.checkState,
+    value = _ref.value,
     onExpand = _ref.onExpand,
     onSelect = _ref.onSelect,
-    onRenderTreeIcon = _ref.onRenderTreeIcon,
-    onRenderTreeNode = _ref.onRenderTreeNode,
-    rest = (0, _objectWithoutPropertiesLoose2.default)(_ref, ["as", "style", "className", "classPrefix", "visible", "layer", "disabled", "allUncheckable", "rtl", "loading", "expand", "hasChildren", "nodeData", "focus", "label", "uncheckable", "checkState", "onExpand", "onSelect", "onRenderTreeIcon", "onRenderTreeNode"]);
+    renderTreeIcon = _ref.renderTreeIcon,
+    renderTreeNode = _ref.renderTreeNode,
+    rest = (0, _objectWithoutPropertiesLoose2.default)(_ref, ["as", "style", "className", "classPrefix", "visible", "layer", "disabled", "allUncheckable", "rtl", "loading", "expand", "hasChildren", "nodeData", "focus", "label", "uncheckable", "checkState", "value", "onExpand", "onSelect", "renderTreeIcon", "renderTreeNode"]);
   var _useClassNames = (0, _utils.useClassNames)(classPrefix),
     prefix = _useClassNames.prefix,
     merge = _useClassNames.merge,
@@ -52,13 +52,13 @@ var CheckTreeNode = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       return nodes.join('');
     }
   };
-  var handleExpand = (0, _react.useCallback)(function (event) {
+  var handleExpand = (0, _utils.useEventCallback)(function (event) {
     var _event$nativeEvent, _event$nativeEvent$st;
     // stop propagation when using custom loading icon
     event === null || event === void 0 ? void 0 : (_event$nativeEvent = event.nativeEvent) === null || _event$nativeEvent === void 0 ? void 0 : (_event$nativeEvent$st = _event$nativeEvent.stopImmediatePropagation) === null || _event$nativeEvent$st === void 0 ? void 0 : _event$nativeEvent$st.call(_event$nativeEvent);
     onExpand === null || onExpand === void 0 ? void 0 : onExpand(nodeData);
-  }, [nodeData, onExpand]);
-  var handleSelect = (0, _react.useCallback)(function (_value, event) {
+  });
+  var handleSelect = (0, _utils.useEventCallback)(function (_value, event) {
     if (disabled || uncheckable) {
       return;
     }
@@ -73,7 +73,7 @@ var CheckTreeNode = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       check: isChecked
     });
     onSelect === null || onSelect === void 0 ? void 0 : onSelect(nextNodeData, event);
-  }, [disabled, checkState, uncheckable, nodeData, onSelect]);
+  });
   var renderIcon = function renderIcon() {
     var expandIconClasses = prefix('expand-icon', 'icon', {
       expanded: expand
@@ -88,8 +88,8 @@ var CheckTreeNode = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
         spin: true
       }));
     }
-    if (typeof onRenderTreeIcon === 'function') {
-      var customIcon = onRenderTreeIcon(nodeData);
+    if (typeof renderTreeIcon === 'function') {
+      var customIcon = renderTreeIcon(nodeData);
       expandIcon = customIcon !== null ? /*#__PURE__*/_react.default.createElement("div", {
         className: prefix('custom-icon')
       }, customIcon) : expandIcon;
@@ -102,23 +102,6 @@ var CheckTreeNode = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       onClick: handleExpand
     }, expandIcon) : null;
   };
-  var renderLabel = function renderLabel() {
-    return /*#__PURE__*/_react.default.createElement(_DropdownMenuCheckItem.default, {
-      as: "div",
-      active: checkState === _utils.CHECK_STATE.CHECK,
-      indeterminate: checkState === _utils.CHECK_STATE.INDETERMINATE,
-      focus: focus,
-      checkable: !uncheckable,
-      disabled: disabled,
-      "data-layer": layer,
-      value: nodeData.refKey,
-      className: prefix('label'),
-      title: getTitle(),
-      onSelect: handleSelect
-    }, /*#__PURE__*/_react.default.createElement("span", {
-      className: prefix('text-wrapper')
-    }, typeof onRenderTreeNode === 'function' ? onRenderTreeNode(nodeData) : label));
-  };
   var classes = merge(className, withClassPrefix({
     disabled: disabled,
     'all-uncheckable': !!allUncheckable,
@@ -126,43 +109,32 @@ var CheckTreeNode = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     focus: focus
   }));
   var styles = (0, _extends2.default)({}, style, (0, _treeUtils.getTreeNodeIndent)(rtl, layer - 1));
-  return visible ? /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
+  return visible ? /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {
+    style: styles,
+    className: classes,
+    ref: ref
+  }), renderIcon(), /*#__PURE__*/_react.default.createElement(_ListCheckItem.default, {
+    as: "div",
     role: "treeitem",
     "aria-label": label,
     "aria-expanded": expand,
     "aria-selected": checkState === _utils.CHECK_STATE.CHECK,
     "aria-disabled": disabled,
-    "aria-level": layer
-  }, rest, {
-    style: styles,
-    className: classes,
-    ref: ref
-  }), renderIcon(), renderLabel()) : null;
+    "aria-level": layer,
+    active: checkState === _utils.CHECK_STATE.CHECK,
+    indeterminate: checkState === _utils.CHECK_STATE.INDETERMINATE,
+    focus: focus,
+    checkable: !uncheckable,
+    disabled: disabled,
+    "data-layer": layer,
+    value: nodeData.refKey || value,
+    className: prefix('label'),
+    title: getTitle(),
+    onSelect: handleSelect
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: prefix('text-wrapper')
+  }, typeof renderTreeNode === 'function' ? renderTreeNode(nodeData) : label))) : null;
 });
 CheckTreeNode.displayName = 'CheckTreeNode';
-CheckTreeNode.propTypes = {
-  as: _propTypes.default.elementType,
-  rtl: _propTypes.default.bool,
-  classPrefix: _propTypes.default.string,
-  visible: _propTypes.default.bool,
-  style: _propTypes.default.object,
-  label: _propTypes.default.any,
-  layer: _propTypes.default.number,
-  loading: _propTypes.default.bool,
-  value: _propTypes.default.any,
-  focus: _propTypes.default.bool,
-  expand: _propTypes.default.bool,
-  nodeData: _propTypes.default.object,
-  disabled: _propTypes.default.bool,
-  className: _propTypes.default.string,
-  checkState: _propTypes.default.oneOf([_utils.CHECK_STATE.UNCHECK, _utils.CHECK_STATE.CHECK, _utils.CHECK_STATE.INDETERMINATE]),
-  hasChildren: _propTypes.default.bool,
-  uncheckable: _propTypes.default.bool,
-  allUncheckable: _propTypes.default.bool,
-  onExpand: _propTypes.default.func,
-  onSelect: _propTypes.default.func,
-  onRenderTreeIcon: _propTypes.default.func,
-  onRenderTreeNode: _propTypes.default.func
-};
 var _default = CheckTreeNode;
 exports.default = _default;

package/cjs/CheckTreePicker/CheckTreePicker.js

@@ -111,12 +111,16 @@ var CheckTreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     rest = (0, _objectWithoutPropertiesLoose2.default)(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 = (0, _react.useContext)(_TreeContext.default),
     inline = _useContext.inline;
-  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 _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 _useCustom = (0, _utils.useCustom)('Picker', overrideLocale),
     rtl = _useCustom.rtl,
     locale = _useCustom.locale;
@@ -197,7 +201,7 @@ var CheckTreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
    * get formatted nodes for render tree
    * @params render - renderNode function. only used when virtualized setting false
    */
-  var getFormattedNodes = (0, _react.useCallback)(function (render) {
+  var getFormattedNodes = function getFormattedNodes(render) {
     if (virtualized) {
       return formatVirtualizedTreeData(flattenNodes, filteredData, expandItemValues, {
         cascade: cascade,
@@ -212,7 +216,7 @@ var CheckTreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     }).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,
@@ -239,23 +243,23 @@ var CheckTreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
       allUncheckable: (0, _utils2.isAllSiblingNodeUncheckable)(node, flattenNodes, uncheckableItemValues, valueKey),
       onSelect: handleSelect,
       onExpand: handleExpand,
-      onRenderTreeNode: renderTreeNode,
-      onRenderTreeIcon: renderTreeIcon
+      renderTreeNode: renderTreeNode,
+      renderTreeIcon: renderTreeIcon
     };
   };
-  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: "." + checkTreePrefix('node-active'),
         activeNode: activeNode,
         virtualized: virtualized,
-        container: treeViewRef.current,
+        container: treeView.current,
         formattedNodes: getFormattedNodes()
       });
     }
-  }, [checkTreePrefix, activeNode, getFormattedNodes, valueKey, virtualized]);
+  };
   (0, _react.useEffect)(function () {
     setValue((0, _utils2.getCheckTreePickerDefaultValue)(value, uncheckableItemValues));
   }, []); // eslint-disable-line react-hooks/exhaustive-deps
@@ -285,7 +289,7 @@ var CheckTreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     });
     forceUpdate();
   }, [cascade, value, uncheckableItemValues, unSerializeList, flattenNodes, forceUpdate]);
-  var toggleUpChecked = (0, _react.useCallback)(function (nodes, node, checked) {
+  var toggleUpChecked = (0, _utils.useEventCallback)(function (nodes, node, checked) {
     var currentNode = node.refKey ? nodes[node.refKey] : null;
     if (cascade && currentNode) {
       if (!checked) {
@@ -304,8 +308,8 @@ var CheckTreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
         toggleUpChecked(nodes, currentNode.parent, checked);
       }
     }
-  }, [cascade]);
-  var toggleDownChecked = (0, _react.useCallback)(function (nodes, node, isChecked) {
+  });
+  var toggleDownChecked = (0, _utils.useEventCallback)(function (nodes, node, isChecked) {
     var currentNode = node.refKey ? nodes[node.refKey] : null;
     if (!currentNode) {
       return;
@@ -319,8 +323,8 @@ var CheckTreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
         toggleDownChecked(nodes, child, isChecked);
       });
     }
-  }, [cascade, childrenKey]);
-  var toggleChecked = (0, _react.useCallback)(function (node, isChecked) {
+  });
+  var toggleChecked = (0, _utils.useEventCallback)(function (node, isChecked) {
     var nodes = (0, _cloneDeep2.default)(flattenNodes);
     toggleDownChecked(nodes, node, isChecked);
     node.parent && toggleUpChecked(nodes, node.parent, isChecked);
@@ -329,7 +333,7 @@ var CheckTreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     return values.filter(function (v) {
       return !uncheckableItemValues.includes(v);
     });
-  }, [flattenNodes, uncheckableItemValues, serializeListOnlyParent, toggleDownChecked, toggleUpChecked]);
+  });
 
   // TODO-Doma
   // Replace `getKeyParentMap` with `getParentMap`
@@ -340,7 +344,7 @@ var CheckTreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
       return node[childrenKey];
     });
   }, [childrenKey, data, valueKey]);
-  var handleSelect = (0, _react.useCallback)(function (node, event) {
+  var handleSelect = (0, _utils.useEventCallback)(function (node, event) {
     var currentNode = node.refKey ? flattenNodes[node.refKey] : null;
     if (!node || !currentNode) {
       return;
@@ -363,18 +367,18 @@ var CheckTreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     onSelectItem === null || onSelectItem === void 0 ? void 0 : onSelectItem(node, (0, _treeUtils.getPathTowardsItem)(node, function (item) {
       return itemParentMap.get(item[valueKey]);
     }));
-  }, [flattenNodes, toggleChecked, isControlled, valueKey, onChange, onSelect, onSelectItem, unSerializeList, cascade, uncheckableItemValues, setValue, itemParentMap]);
-  var handleOpen = (0, _react.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 = (0, _utils.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 = (0, _react.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 = (0, _utils.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);
@@ -383,9 +387,9 @@ var CheckTreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     /**
      * 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 = (0, _react.useCallback)(function (node) {
+    (_target$current = target.current) === null || _target$current === void 0 ? void 0 : _target$current.focus();
+  });
+  var handleExpand = (0, _utils.useEventCallback)(function (node) {
     var nextExpandItemValues = (0, _treeUtils.toggleExpand)({
       node: node,
       isExpand: !node.expand,
@@ -400,19 +404,11 @@ var CheckTreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     if ((0, _isFunction2.default)(getChildren) && !node.expand && Array.isArray(node[childrenKey]) && node[childrenKey].length === 0) {
       loadChildren(node, getChildren);
     }
-  }, [childrenKey, expandItemValues, getChildren, loadChildren, onExpand, setExpandItemValues, valueKey]);
-  (0, _Picker.usePublicMethods)(ref, {
-    rootRef: inline ? treeViewRef : undefined,
-    triggerRef: triggerRef,
-    overlayRef: overlayRef,
-    targetRef: targetRef,
-    listRef: listRef,
-    inline: inline
   });
-  var handleClean = (0, _react.useCallback)(function (event) {
+  var handleClean = (0, _utils.useEventCallback)(function (event) {
     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;
     }
     setActiveNode(null);
@@ -428,8 +424,8 @@ var CheckTreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
       });
     }
     onChange === null || onChange === void 0 ? void 0 : onChange([], event);
-  }, [cascade, cleanable, disabled, flattenNodes, onChange, setValue, unSerializeList, uncheckableItemValues, isControlled]);
-  var handleFocusItem = (0, _react.useCallback)(function (key) {
+  });
+  var handleFocusItem = (0, _utils.useEventCallback)(function (key) {
     var focusableItems = (0, _treeUtils.getFocusableItems)(filteredData, {
       disabledItemValues: disabledItemValues,
       valueKey: valueKey,
@@ -454,8 +450,8 @@ var CheckTreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     if (key === _utils.KEY_VALUES.UP) {
       (0, _treeUtils.focusPreviousItem)(focusProps);
     }
-  }, [searchKeywordState, checkTreePrefix, expandItemValues, filteredData, focusItemValue, treeNodesRefs, childrenKey, valueKey, 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)({
@@ -469,8 +465,8 @@ var CheckTreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
         (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, "." + checkTreePrefix('node-label'));
       }
     });
-  }, [checkTreePrefix, expandItemValues, flattenNodes, focusItemValue, handleExpand, treeNodesRefs, 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)({
@@ -482,8 +478,8 @@ var CheckTreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
         handleFocusItem(_utils.KEY_VALUES.DOWN);
       }
     });
-  }, [focusItemValue, flattenNodes, valueKey, expandItemValues, childrenKey, handleExpand, handleFocusItem]);
-  var selectActiveItem = (0, _react.useCallback)(function (event) {
+  });
+  var selectActiveItem = function selectActiveItem(event) {
     if ((0, _isNil2.default)(focusItemValue)) return;
     var activeItem = (0, _treeUtils.getActiveItem)(focusItemValue, flattenNodes, valueKey);
     if (!(0, _utils2.isNodeUncheckable)(activeItem, {
@@ -492,13 +488,13 @@ var CheckTreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     }) && activeItem !== null) {
       handleSelect(activeItem, event);
     }
-  }, [flattenNodes, focusItemValue, handleSelect, uncheckableItemValues, valueKey]);
+  };
   var onPickerKeydown = (0, _Picker.useToggleKeyDownEvent)((0, _extends2.default)({
     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,
@@ -517,8 +513,8 @@ var CheckTreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
       });
     }
   }, 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, {
@@ -532,7 +528,7 @@ var CheckTreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
       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
@@ -566,7 +562,8 @@ var CheckTreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
           return saveTreeNodeRef(_ref, refKey);
         }
       })), /*#__PURE__*/_react.default.createElement("div", {
-        className: checkTreePrefix('children')
+        className: checkTreePrefix('group'),
+        role: "group"
       }, nodes.map(function (child) {
         return renderNode(child, layer);
       }), showIndentLine && /*#__PURE__*/_react.default.createElement("span", {
@@ -618,21 +615,17 @@ var CheckTreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
         className: prefix('none')
       }, locale.noResultsText);
     }
-    var treeNodesClass = merge(checkTreePrefix('nodes'), (_merge2 = {}, _merge2[checkTreePrefix('all-uncheckable')] = (0, _utils2.isEveryFirstLevelNodeUncheckable)(flattenNodes, uncheckableItemValues, valueKey), _merge2));
-    var styles = inline ? (0, _extends2.default)({
-      height: height
-    }, style) : {};
-    return /*#__PURE__*/_react.default.createElement("div", {
-      id: id ? id + "-listbox" : undefined,
-      ref: treeViewRef,
-      role: "tree",
-      "aria-multiselectable": true,
+    var treeNodesClass = merge(checkTreePrefix('root'), (_merge2 = {}, _merge2[checkTreePrefix('all-uncheckable')] = (0, _utils2.isEveryFirstLevelNodeUncheckable)(flattenNodes, uncheckableItemValues, valueKey), _merge2));
+    return /*#__PURE__*/_react.default.createElement(_Picker.TreeView, {
+      ref: inline ? root : treeView,
+      multiselectable: true,
+      treeRootClassName: treeNodesClass,
       className: classes,
-      style: styles,
+      style: inline ? (0, _extends2.default)({
+        height: height
+      }, style) : {},
       onScroll: onScroll,
       onKeyDown: inline ? handleTreeKeydown : undefined
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: treeNodesClass
     }, virtualized ? /*#__PURE__*/_react.default.createElement(_Windowing.AutoSizer, {
       defaultHeight: inline ? height : menuMaxHeight,
       style: {
@@ -642,13 +635,13 @@ var CheckTreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     }, 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 left = positionProps.left,
@@ -659,18 +652,18 @@ var CheckTreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
       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(renderCheckTree()) : renderCheckTree(), renderExtraFooter === null || renderExtraFooter === void 0 ? void 0 : renderExtraFooter());
   };
   var selectedItems = (0, _react.useMemo)(function () {
@@ -715,8 +708,11 @@ var CheckTreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     return renderCheckTree();
   }
   return /*#__PURE__*/_react.default.createElement(_Picker.PickerToggleTrigger, {
+    id: id,
+    popupType: "tree",
+    multiple: true,
     pickerProps: (0, _pick2.default)(props, _Picker.pickTriggerPropKeys),
-    ref: triggerRef,
+    ref: trigger,
     placement: placement,
     onEnter: handleOpen,
     onEntered: onEntered,
@@ -724,10 +720,10 @@ var CheckTreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     speaker: renderDropdownMenu
   }, /*#__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)), {
-    id: id,
-    ref: targetRef,
+    ref: target,
     appearance: appearance,
     onKeyDown: onPickerKeydown,
     onClean: (0, _utils.createChainedFunction)(handleClean, onClean),
@@ -737,7 +733,8 @@ var CheckTreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     hasValue: hasValidValue,
     active: active,
     placement: placement,
-    inputValue: value
+    inputValue: value,
+    focusItemValue: focusItemValue
   }), selectedElement || locale.placeholder)));
 });
 CheckTreePicker.displayName = 'CheckTreePicker';

package/cjs/DatePicker/DatePicker.d.ts

@@ -20,7 +20,11 @@ export interface DatePickerProps extends PickerBaseProps<DatePickerLocale>, Form
      * @deprecated use <Calendar> instead
      **/
     inline?: boolean;
-    /** ISO 8601 standard, each calendar week begins on Monday and Sunday on the seventh day */
+    /**
+     * ISO 8601 standard, each calendar week begins on Monday and Sunday on the seventh day
+     *
+     * @see https://en.wikipedia.org/wiki/ISO_week_date
+     */
     isoWeek?: boolean;
     /** A label displayed at the beginning of toggle button */
     label?: React.ReactNode;

package/cjs/DatePicker/DatePicker.js

@@ -25,11 +25,8 @@ var _PredefinedRanges = _interopRequireDefault(require("./PredefinedRanges"));
 var _utils = require("../utils");
 var _dateUtils = require("../utils/dateUtils");
 var _Picker = require("../Picker");
-var _usePickerRef2 = _interopRequireDefault(require("../Picker/usePickerRef"));
 var _DateInput = _interopRequireDefault(require("../DateInput"));
 var _InputGroup = _interopRequireDefault(require("../InputGroup"));
-var _PickerLabel = _interopRequireDefault(require("./PickerLabel"));
-var _PickerIndicator = _interopRequireDefault(require("./PickerIndicator"));
 var _OverlayTrigger = require("../Overlay/OverlayTrigger");
 var _deprecatePropType = require("../utils/deprecatePropType");
 var _utils2 = require("../Calendar/utils");
@@ -105,8 +102,8 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     onToggleTimeDropdown = props.onToggleTimeDropdown,
     onShortcutClick = props.onShortcutClick,
     restProps = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "className", "classPrefix", "calendarDefaultDate", "cleanable", "editable", "defaultValue", "disabled", "readOnly", "plaintext", "format", "id", "isoWeek", "limitEndYear", "limitStartYear", "locale", "loading", "label", "menuClassName", "menuStyle", "appearance", "placement", "oneTap", "placeholder", "ranges", "value", "showMeridian", "showWeekNumbers", "style", "size", "caretAs", "disabledDate", "disabledHours", "disabledMinutes", "disabledSeconds", "shouldDisableDate", "shouldDisableHour", "shouldDisableMinute", "shouldDisableSecond", "onChange", "onChangeCalendarDate", "onClean", "onClose", "onEntered", "onExited", "onNextMonth", "onOk", "onOpen", "onPrevMonth", "onSelect", "onToggleMonthDropdown", "onToggleTimeDropdown", "onShortcutClick"]);
-  var id = (0, _utils.useUniqueId)(classPrefix + "-", idProp);
-  var _usePickerRef = (0, _usePickerRef2.default)(ref),
+  var id = (0, _utils.useUniqueId)('rs-', idProp);
+  var _usePickerRef = (0, _Picker.usePickerRef)(ref),
     trigger = _usePickerRef.trigger,
     root = _usePickerRef.root,
     target = _usePickerRef.target,
@@ -282,7 +279,7 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     onClean === null || onClean === void 0 ? void 0 : onClean(event);
     event.stopPropagation();
   });
-  var handlePickerOverlayKeyDown = (0, _utils.useEventCallback)(function (event) {
+  var handlePickerPopupKeyDown = (0, _utils.useEventCallback)(function (event) {
     var delta = 0;
     var step = showMonth ? 6 : 7;
     var changeDateFunc = showMonth ? _dateUtils.addMonths : _dateUtils.addDays;
@@ -426,7 +423,7 @@ var DatePicker = /*#__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, {
       role: "dialog",
       "aria-labelledby": label ? id + "-label" : undefined,
       tabIndex: -1,
@@ -434,7 +431,7 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       ref: (0, _utils.mergeRefs)(overlay, speakerRef),
       style: styles,
       target: trigger,
-      onKeyDown: handlePickerOverlayKeyDown
+      onKeyDown: handlePickerPopupKeyDown
     }, /*#__PURE__*/_react.default.createElement(_Stack.default, {
       alignItems: "flex-start"
     }, sideRanges.length > 0 && /*#__PURE__*/_react.default.createElement(_PredefinedRanges.default, {
@@ -532,7 +529,7 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     inside: true,
     size: size,
     onClick: handleClick
-  }), /*#__PURE__*/_react.default.createElement(_PickerLabel.default, {
+  }), /*#__PURE__*/_react.default.createElement(_Picker.PickerLabel, {
     className: prefix(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["label"]))),
     id: id + "-label"
   }, label), /*#__PURE__*/_react.default.createElement(_DateInput.default, (0, _extends2.default)({
@@ -550,7 +547,7 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     readOnly: readOnly || !editable || loading,
     plaintext: plaintext,
     onKeyDown: handleInputKeyDown
-  })), /*#__PURE__*/_react.default.createElement(_PickerIndicator.default, {
+  })), /*#__PURE__*/_react.default.createElement(_Picker.PickerIndicator, {
     loading: loading,
     caretAs: caretAs,
     onClose: handleClean,

package/cjs/DatePicker/Toolbar.js

@@ -61,7 +61,8 @@ var Toolbar = /*#__PURE__*/_react.default.forwardRef(function Toolbar(props, ref
     calendarDate: calendarDate,
     locale: locale,
     disabledShortcut: disabledShortcut,
-    onShortcutClick: onShortcutClick
+    onShortcutClick: onShortcutClick,
+    "data-testid": "daterange-predefined-bottom"
   }), /*#__PURE__*/_react.default.createElement("div", {
     className: prefix('right')
   }, !hideOkBtn && /*#__PURE__*/_react.default.createElement(SubmitButton, {

package/cjs/DateRangeInput/DateRangeInput.js

@@ -64,10 +64,10 @@ var DateRangeInput = /*#__PURE__*/_react.default.forwardRef(function (props, ref
     isControlledDate: isControlled
   };
   var startDateState = (0, _DateInput.useDateInputState)((0, _extends2.default)({}, dateInputOptions, {
-    date: value === null || value === void 0 ? void 0 : value[0]
+    date: (value === null || value === void 0 ? void 0 : value[0]) || null
   }));
   var endDateState = (0, _DateInput.useDateInputState)((0, _extends2.default)({}, dateInputOptions, {
-    date: value === null || value === void 0 ? void 0 : value[1]
+    date: (value === null || value === void 0 ? void 0 : value[1]) || null
   }));
   var getActiveState = function getActiveState(type) {
     if (type === void 0) {