rsuite 5.50.0 → 5.51.0

package/esm/Cascader/TreeView.js

@@ -0,0 +1,167 @@
+'use client';
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import React, { useEffect, useRef } from 'react';
+import SpinnerIcon from '@rsuite/icons/legacy/Spinner';
+import isUndefined from 'lodash/isUndefined';
+import isNil from 'lodash/isNil';
+import { shallowEqual, useClassNames, mergeRefs, useCustom, useEventCallback } from '../utils';
+import { ListItem, useCombobox } from '../Picker';
+import AngleLeftIcon from '@rsuite/icons/legacy/AngleLeft';
+import AngleRightIcon from '@rsuite/icons/legacy/AngleRight';
+import getPosition from 'dom-lib/getPosition';
+import scrollTop from 'dom-lib/scrollTop';
+var emptyArray = [];
+var TreeView = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var _props$as = props.as,
+    Component = _props$as === void 0 ? 'div' : _props$as,
+    activeItemValue = props.activeItemValue,
+    classPrefix = props.classPrefix,
+    className = props.className,
+    _props$childrenKey = props.childrenKey,
+    childrenKey = _props$childrenKey === void 0 ? 'children' : _props$childrenKey,
+    _props$disabledItemVa = props.disabledItemValues,
+    disabledItemValues = _props$disabledItemVa === void 0 ? emptyArray : _props$disabledItemVa,
+    _props$menuWidth = props.menuWidth,
+    menuWidth = _props$menuWidth === void 0 ? 120 : _props$menuWidth,
+    _props$menuHeight = props.menuHeight,
+    menuHeight = _props$menuHeight === void 0 ? 200 : _props$menuHeight,
+    _props$valueKey = props.valueKey,
+    valueKey = _props$valueKey === void 0 ? 'value' : _props$valueKey,
+    _props$cascadeData = props.cascadeData,
+    cascadeData = _props$cascadeData === void 0 ? emptyArray : _props$cascadeData,
+    _props$cascadePaths = props.cascadePaths,
+    cascadePaths = _props$cascadePaths === void 0 ? emptyArray : _props$cascadePaths,
+    loadingItemsSet = props.loadingItemsSet,
+    _props$labelKey = props.labelKey,
+    labelKey = _props$labelKey === void 0 ? 'label' : _props$labelKey,
+    style = props.style,
+    renderMenu = props.renderMenu,
+    renderMenuItem = props.renderMenuItem,
+    onSelect = props.onSelect,
+    rest = _objectWithoutPropertiesLoose(props, ["as", "activeItemValue", "classPrefix", "className", "childrenKey", "disabledItemValues", "menuWidth", "menuHeight", "valueKey", "cascadeData", "cascadePaths", "loadingItemsSet", "labelKey", "style", "renderMenu", "renderMenuItem", "onSelect"]);
+  var _useClassNames = useClassNames(classPrefix),
+    merge = _useClassNames.merge,
+    prefix = _useClassNames.prefix;
+  var classes = merge(className, prefix('items'));
+  var rootRef = useRef();
+  var _useCustom = useCustom(),
+    rtl = _useCustom.rtl;
+  var _useCombobox = useCombobox(),
+    id = _useCombobox.id,
+    labelId = _useCombobox.labelId,
+    popupType = _useCombobox.popupType;
+  useEffect(function () {
+    var _rootRef$current;
+    var columns = ((_rootRef$current = rootRef.current) === null || _rootRef$current === void 0 ? void 0 : _rootRef$current.querySelectorAll('[data-type="column"]')) || [];
+    columns.forEach(function (column) {
+      if (!column) {
+        return;
+      }
+      var activeItem = column.querySelector("." + prefix('item-focus'));
+      if (!activeItem) {
+        activeItem = column.querySelector("." + prefix('item-active'));
+      }
+      if (activeItem) {
+        var position = getPosition(activeItem, column);
+        // Let the active option scroll into view.
+        scrollTop(column, position === null || position === void 0 ? void 0 : position.top);
+      }
+    });
+  }, [prefix]);
+  var getCascadePaths = function getCascadePaths(layer, node) {
+    var paths = [];
+    for (var i = 0; i < cascadeData.length && i < layer; i += 1) {
+      if (i < layer - 1 && cascadePaths) {
+        paths.push(cascadePaths[i]);
+      }
+    }
+    paths.push(node);
+    return paths;
+  };
+  var handleSelect = useEventCallback(function (layer, node, event) {
+    var isLeafNode = isNil(node[childrenKey]);
+    var cascadePaths = getCascadePaths(layer + 1, node);
+    onSelect === null || onSelect === void 0 ? void 0 : onSelect(node, cascadePaths, isLeafNode, event);
+  });
+  var renderCascadeNode = function renderCascadeNode(nodeProps) {
+    var _loadingItemsSet$has;
+    var node = nodeProps.node,
+      index = nodeProps.index,
+      layer = nodeProps.layer,
+      focus = nodeProps.focus,
+      size = nodeProps.size;
+    var children = node[childrenKey];
+    var value = node[valueKey];
+    var label = node[labelKey];
+    var disabled = disabledItemValues.some(function (disabledValue) {
+      return shallowEqual(disabledValue, value);
+    });
+    var loading = (_loadingItemsSet$has = loadingItemsSet === null || loadingItemsSet === void 0 ? void 0 : loadingItemsSet.has(node)) !== null && _loadingItemsSet$has !== void 0 ? _loadingItemsSet$has : false;
+
+    // Use `value` in keys when If `value` is string or number
+    var onlyKey = typeof value === 'number' || typeof value === 'string' ? value : index;
+    var Icon = loading ? SpinnerIcon : rtl ? AngleLeftIcon : AngleRightIcon;
+    return /*#__PURE__*/React.createElement(ListItem, {
+      as: 'li',
+      role: "treeitem",
+      "aria-level": layer + 1,
+      "aria-setsize": size,
+      "aria-posinset": index + 1,
+      "aria-label": typeof label === 'string' ? label : undefined,
+      classPrefix: "picker-cascader-menu-item",
+      key: layer + "-" + onlyKey,
+      disabled: disabled,
+      active: !isUndefined(activeItemValue) && shallowEqual(activeItemValue, value),
+      focus: focus,
+      value: value,
+      className: children ? prefix('has-children') : undefined,
+      onSelect: function onSelect(_value, event) {
+        return handleSelect(layer, node, event);
+      }
+    }, renderMenuItem ? renderMenuItem(label, node) : label, children ? /*#__PURE__*/React.createElement(Icon, {
+      className: prefix('caret'),
+      spin: loading,
+      "data-testid": "spinner"
+    }) : null);
+  };
+  var cascadeNodes = cascadeData.map(function (children, layer) {
+    var onlyKey = layer + "_" + children.length;
+    var parentNode = cascadePaths[layer - 1];
+    var menu = /*#__PURE__*/React.createElement(React.Fragment, null, children.map(function (item, index) {
+      var focus = cascadePaths[layer] && shallowEqual(cascadePaths[layer][valueKey], item[valueKey]);
+      return renderCascadeNode({
+        node: item,
+        index: index,
+        layer: layer,
+        focus: focus,
+        size: children.length
+      });
+    }));
+    return /*#__PURE__*/React.createElement("ul", {
+      role: "group",
+      "data-layer": layer,
+      "data-type": 'column',
+      key: onlyKey,
+      className: prefix('column'),
+      style: {
+        height: menuHeight,
+        width: menuWidth
+      }
+    }, renderMenu ? renderMenu(children, menu, parentNode, layer) : menu);
+  });
+  var styles = _extends({}, style, {
+    width: cascadeData.length * menuWidth
+  });
+  return /*#__PURE__*/React.createElement(Component, _extends({
+    role: "tree",
+    id: id + "-" + popupType,
+    "aria-labelledby": labelId
+  }, rest, {
+    ref: mergeRefs(rootRef, ref),
+    className: classes,
+    style: styles
+  }), cascadeNodes);
+});
+TreeView.displayName = 'TreeView';
+export default TreeView;

package/esm/CheckPicker/CheckPicker.js

@@ -15,7 +15,7 @@ import isNil from 'lodash/isNil';
 import { filterNodesOfTree } from '../utils/treeUtils';
 import { createChainedFunction, useClassNames, shallowEqual, useCustom, useControlled, useEventCallback, mergeRefs } from '../utils';
 import { getDataGroupBy } from '../utils/getDataGroupBy';
-import { DropdownMenu, DropdownMenuCheckItem as DropdownMenuItem, PickerToggle, PickerOverlay, SearchBar, SelectedElement, PickerToggleTrigger, useFocusItemValue, usePickerClassName, useSearch, useToggleKeyDownEvent, usePickerRef, pickTriggerPropKeys, omitTriggerPropKeys, listPickerPropTypes } from '../Picker';
+import { Listbox, ListCheckItem, PickerToggle, PickerPopup, SearchBar, SelectedElement, PickerToggleTrigger, useFocusItemValue, usePickerClassName, useSearch, useToggleKeyDownEvent, usePickerRef, pickTriggerPropKeys, omitTriggerPropKeys, listPickerPropTypes } from '../Picker';
 var emptyArray = [];
 /**
  * A component for selecting checkable items in a dropdown list.
@@ -246,7 +246,7 @@ var CheckPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       hasValue = false;
     }
   }
-  var renderDropdownMenu = function renderDropdownMenu(positionProps, speakerRef) {
+  var renderPopup = function renderPopup(positionProps, speakerRef) {
     var left = positionProps.left,
       top = positionProps.top,
       className = positionProps.className;
@@ -274,8 +274,7 @@ var CheckPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     } else if (typeof sort === 'function') {
       items = items.sort(sort(false));
     }
-    var menu = items.length || filteredStickyItems.length ? /*#__PURE__*/React.createElement(DropdownMenu, {
-      id: id ? id + "-listbox" : undefined,
+    var menu = items.length || filteredStickyItems.length ? /*#__PURE__*/React.createElement(Listbox, {
       listProps: listProps,
       listRef: list,
       disabledItemValues: disabledItemValues,
@@ -285,7 +284,7 @@ var CheckPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       renderMenuItem: renderMenuItem,
       maxHeight: menuMaxHeight,
       classPrefix: 'picker-check-menu',
-      dropdownMenuItemAs: DropdownMenuItem,
+      listItemAs: ListCheckItem,
       activeItemValues: value,
       focusItemValue: focusItemValue,
       data: [].concat(filteredStickyItems, items)
@@ -299,7 +298,7 @@ var CheckPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     }) : /*#__PURE__*/React.createElement("div", {
       className: prefix(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["none"])))
     }, locale === null || locale === void 0 ? void 0 : locale.noResultsText);
-    return /*#__PURE__*/React.createElement(PickerOverlay, {
+    return /*#__PURE__*/React.createElement(PickerPopup, {
       ref: mergeRefs(overlay, speakerRef),
       autoWidth: menuAutoWidth,
       className: classes,
@@ -324,19 +323,20 @@ var CheckPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     classes = _usePickerClassName[0],
     usedClassNamePropKeys = _usePickerClassName[1];
   return /*#__PURE__*/React.createElement(PickerToggleTrigger, {
+    id: id,
+    multiple: true,
     pickerProps: pick(props, pickTriggerPropKeys),
     ref: trigger,
     placement: placement,
     onEnter: createChainedFunction(initStickyItems, onEnter),
     onEntered: createChainedFunction(handleEntered, onEntered),
     onExited: createChainedFunction(handleExited, onExited),
-    speaker: renderDropdownMenu
+    speaker: renderPopup
   }, /*#__PURE__*/React.createElement(Component, {
     className: classes,
     style: style,
     ref: root
   }, /*#__PURE__*/React.createElement(PickerToggle, _extends({}, omit(rest, [].concat(omitTriggerPropKeys, usedClassNamePropKeys)), {
-    id: id,
     ref: target,
     appearance: appearance,
     disabled: disabled,
@@ -347,7 +347,8 @@ var CheckPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     hasValue: hasValue,
     active: active,
     placement: placement,
-    inputValue: value
+    inputValue: value,
+    focusItemValue: focusItemValue
   }), selectedElement || (locale === null || locale === void 0 ? void 0 : locale.placeholder))));
 });
 CheckPicker.displayName = 'CheckPicker';

package/esm/CheckTreePicker/CheckTreeNode.d.ts

@@ -21,8 +21,8 @@ export interface CheckTreeNodeProps extends WithAsProps {
     allUncheckable?: boolean;
     onExpand?: (nodeData: any) => void;
     onSelect?: (nodeData: any, event: React.SyntheticEvent) => void;
-    onRenderTreeIcon?: (nodeData: any, expandIcon?: React.ReactNode) => React.ReactNode;
-    onRenderTreeNode?: (nodeData: any) => React.ReactNode;
+    renderTreeIcon?: (nodeData: any, expandIcon?: React.ReactNode) => React.ReactNode;
+    renderTreeNode?: (nodeData: any) => React.ReactNode;
 }
 declare const CheckTreeNode: RsRefForwardingComponent<'div', CheckTreeNodeProps>;
 export default CheckTreeNode;

package/esm/CheckTreePicker/CheckTreeNode.js

@@ -1,13 +1,12 @@
 'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import React, { forwardRef, useCallback } from 'react';
-import PropTypes from 'prop-types';
+import React, { forwardRef } from 'react';
 import ArrowDown from '@rsuite/icons/legacy/ArrowDown';
 import Spinner from '@rsuite/icons/legacy/Spinner';
-import DropdownMenuCheckItem from '../Picker/DropdownMenuCheckItem';
+import ListCheckItem from '../Picker/ListCheckItem';
 import { getTreeNodeIndent } from '../utils/treeUtils';
-import { useClassNames, CHECK_STATE, reactToString } from '../utils';
+import { useClassNames, useEventCallback, CHECK_STATE, reactToString } from '../utils';
 var CheckTreeNode = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var _ref$as = _ref.as,
     Component = _ref$as === void 0 ? 'div' : _ref$as,
@@ -29,11 +28,12 @@ var CheckTreeNode = /*#__PURE__*/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 = _objectWithoutPropertiesLoose(_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 = _objectWithoutPropertiesLoose(_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 = useClassNames(classPrefix),
     prefix = _useClassNames.prefix,
     merge = _useClassNames.merge,
@@ -46,13 +46,13 @@ var CheckTreeNode = /*#__PURE__*/forwardRef(function (_ref, ref) {
       return nodes.join('');
     }
   };
-  var handleExpand = useCallback(function (event) {
+  var handleExpand = 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 = useCallback(function (_value, event) {
+  });
+  var handleSelect = useEventCallback(function (_value, event) {
     if (disabled || uncheckable) {
       return;
     }
@@ -67,7 +67,7 @@ var CheckTreeNode = /*#__PURE__*/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
@@ -82,8 +82,8 @@ var CheckTreeNode = /*#__PURE__*/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.createElement("div", {
         className: prefix('custom-icon')
       }, customIcon) : expandIcon;
@@ -96,23 +96,6 @@ var CheckTreeNode = /*#__PURE__*/forwardRef(function (_ref, ref) {
       onClick: handleExpand
     }, expandIcon) : null;
   };
-  var renderLabel = function renderLabel() {
-    return /*#__PURE__*/React.createElement(DropdownMenuCheckItem, {
-      as: "div",
-      active: checkState === CHECK_STATE.CHECK,
-      indeterminate: checkState === CHECK_STATE.INDETERMINATE,
-      focus: focus,
-      checkable: !uncheckable,
-      disabled: disabled,
-      "data-layer": layer,
-      value: nodeData.refKey,
-      className: prefix('label'),
-      title: getTitle(),
-      onSelect: handleSelect
-    }, /*#__PURE__*/React.createElement("span", {
-      className: prefix('text-wrapper')
-    }, typeof onRenderTreeNode === 'function' ? onRenderTreeNode(nodeData) : label));
-  };
   var classes = merge(className, withClassPrefix({
     disabled: disabled,
     'all-uncheckable': !!allUncheckable,
@@ -120,42 +103,31 @@ var CheckTreeNode = /*#__PURE__*/forwardRef(function (_ref, ref) {
     focus: focus
   }));
   var styles = _extends({}, style, getTreeNodeIndent(rtl, layer - 1));
-  return visible ? /*#__PURE__*/React.createElement(Component, _extends({
+  return visible ? /*#__PURE__*/React.createElement(Component, _extends({}, rest, {
+    style: styles,
+    className: classes,
+    ref: ref
+  }), renderIcon(), /*#__PURE__*/React.createElement(ListCheckItem, {
+    as: "div",
     role: "treeitem",
     "aria-label": label,
     "aria-expanded": expand,
     "aria-selected": checkState === CHECK_STATE.CHECK,
     "aria-disabled": disabled,
-    "aria-level": layer
-  }, rest, {
-    style: styles,
-    className: classes,
-    ref: ref
-  }), renderIcon(), renderLabel()) : null;
+    "aria-level": layer,
+    active: checkState === CHECK_STATE.CHECK,
+    indeterminate: checkState === 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.createElement("span", {
+    className: prefix('text-wrapper')
+  }, typeof renderTreeNode === 'function' ? renderTreeNode(nodeData) : label))) : null;
 });
 CheckTreeNode.displayName = 'CheckTreeNode';
-CheckTreeNode.propTypes = {
-  as: PropTypes.elementType,
-  rtl: PropTypes.bool,
-  classPrefix: PropTypes.string,
-  visible: PropTypes.bool,
-  style: PropTypes.object,
-  label: PropTypes.any,
-  layer: PropTypes.number,
-  loading: PropTypes.bool,
-  value: PropTypes.any,
-  focus: PropTypes.bool,
-  expand: PropTypes.bool,
-  nodeData: PropTypes.object,
-  disabled: PropTypes.bool,
-  className: PropTypes.string,
-  checkState: PropTypes.oneOf([CHECK_STATE.UNCHECK, CHECK_STATE.CHECK, CHECK_STATE.INDETERMINATE]),
-  hasChildren: PropTypes.bool,
-  uncheckable: PropTypes.bool,
-  allUncheckable: PropTypes.bool,
-  onExpand: PropTypes.func,
-  onSelect: PropTypes.func,
-  onRenderTreeIcon: PropTypes.func,
-  onRenderTreeNode: PropTypes.func
-};
 export default CheckTreeNode;

package/esm/CheckTreePicker/CheckTreePicker.js

@@ -15,7 +15,7 @@ import CheckTreeNode from './CheckTreeNode';
 import TreeContext from '../Tree/TreeContext';
 import { getKeyParentMap, getPathTowardsItem, getTreeNodeIndent } from '../utils/treeUtils';
 import { createChainedFunction, useCustom, useClassNames, useControlled, useEventCallback, KEY_VALUES, mergeRefs } from '../utils';
-import { PickerToggle, onMenuKeyDown as _onMenuKeyDown, PickerOverlay, SearchBar, SelectedElement, PickerToggleTrigger, createConcatChildrenFunction, usePickerClassName, useToggleKeyDownEvent, usePickerRef, pickTriggerPropKeys, omitTriggerPropKeys, listPickerPropTypes } from '../Picker';
+import { PickerToggle, TreeView, onMenuKeyDown as _onMenuKeyDown, PickerPopup, SearchBar, SelectedElement, PickerToggleTrigger, createConcatChildrenFunction, usePickerClassName, useToggleKeyDownEvent, usePickerRef, pickTriggerPropKeys, omitTriggerPropKeys, listPickerPropTypes } from '../Picker';
 import { isEveryChildChecked, isSomeNodeHasChildren, isAllSiblingNodeUncheckable, isEveryFirstLevelNodeUncheckable, getFormattedTree, getDisabledState, getCheckTreePickerDefaultValue, getSelectedItems, isNodeUncheckable } from './utils';
 import { hasVisibleChildren, getExpandWhenSearching, useTreeSearch, useTreeNodeRefs, getDefaultExpandItemValues, useFlattenTreeData, focusNextItem, getFocusableItems, focusPreviousItem, toggleExpand, getActiveItem, useGetTreeNodeChildren, focusToActiveTreeNode, focusTreeNode, leftArrowHandler, rightArrowHandler, isSearching } from '../utils/treeUtils';
 var emptyArray = [];
@@ -238,8 +238,8 @@ var CheckTreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       allUncheckable: isAllSiblingNodeUncheckable(node, flattenNodes, uncheckableItemValues, valueKey),
       onSelect: handleSelect,
       onExpand: handleExpand,
-      onRenderTreeNode: renderTreeNode,
-      onRenderTreeIcon: renderTreeIcon
+      renderTreeNode: renderTreeNode,
+      renderTreeIcon: renderTreeIcon
     };
   };
   var focusActiveNode = function focusActiveNode() {
@@ -402,8 +402,8 @@ var CheckTreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
   });
   var handleClean = 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);
@@ -557,7 +557,8 @@ var CheckTreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
           return saveTreeNodeRef(_ref, refKey);
         }
       })), /*#__PURE__*/React.createElement("div", {
-        className: checkTreePrefix('children')
+        className: checkTreePrefix('group'),
+        role: "group"
       }, nodes.map(function (child) {
         return renderNode(child, layer);
       }), showIndentLine && /*#__PURE__*/React.createElement("span", {
@@ -609,21 +610,17 @@ var CheckTreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
         className: prefix('none')
       }, locale.noResultsText);
     }
-    var treeNodesClass = merge(checkTreePrefix('nodes'), (_merge2 = {}, _merge2[checkTreePrefix('all-uncheckable')] = isEveryFirstLevelNodeUncheckable(flattenNodes, uncheckableItemValues, valueKey), _merge2));
-    var styles = inline ? _extends({
-      height: height
-    }, style) : {};
-    return /*#__PURE__*/React.createElement("div", {
-      id: id ? id + "-listbox" : undefined,
+    var treeNodesClass = merge(checkTreePrefix('root'), (_merge2 = {}, _merge2[checkTreePrefix('all-uncheckable')] = isEveryFirstLevelNodeUncheckable(flattenNodes, uncheckableItemValues, valueKey), _merge2));
+    return /*#__PURE__*/React.createElement(TreeView, {
       ref: inline ? root : treeView,
-      role: "tree",
-      "aria-multiselectable": true,
+      multiselectable: true,
+      treeRootClassName: treeNodesClass,
       className: classes,
-      style: styles,
+      style: inline ? _extends({
+        height: height
+      }, style) : {},
       onScroll: onScroll,
       onKeyDown: inline ? handleTreeKeydown : undefined
-    }, /*#__PURE__*/React.createElement("div", {
-      className: treeNodesClass
     }, virtualized ? /*#__PURE__*/React.createElement(AutoSizer, {
       defaultHeight: inline ? height : menuMaxHeight,
       style: {
@@ -639,7 +636,7 @@ var CheckTreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
         itemCount: formattedNodes.length,
         itemData: formattedNodes
       }, listProps), renderVirtualListNode);
-    }) : formattedNodes));
+    }) : formattedNodes);
   };
   var renderDropdownMenu = function renderDropdownMenu(positionProps, speakerRef) {
     var left = positionProps.left,
@@ -650,7 +647,7 @@ var CheckTreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       left: left,
       top: top
     });
-    return /*#__PURE__*/React.createElement(PickerOverlay, {
+    return /*#__PURE__*/React.createElement(PickerPopup, {
       autoWidth: menuAutoWidth,
       className: classes,
       style: mergedMenuStyle,
@@ -706,6 +703,9 @@ var CheckTreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     return renderCheckTree();
   }
   return /*#__PURE__*/React.createElement(PickerToggleTrigger, {
+    id: id,
+    popupType: "tree",
+    multiple: true,
     pickerProps: _pick(props, pickTriggerPropKeys),
     ref: trigger,
     placement: placement,
@@ -718,7 +718,6 @@ var CheckTreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     style: style,
     ref: root
   }, /*#__PURE__*/React.createElement(PickerToggle, _extends({}, _omit(rest, [].concat(omitTriggerPropKeys, usedClassNamePropKeys)), {
-    id: id,
     ref: target,
     appearance: appearance,
     onKeyDown: onPickerKeydown,
@@ -729,7 +728,8 @@ var CheckTreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     hasValue: hasValidValue,
     active: active,
     placement: placement,
-    inputValue: value
+    inputValue: value,
+    focusItemValue: focusItemValue
   }), selectedElement || locale.placeholder)));
 });
 CheckTreePicker.displayName = 'CheckTreePicker';

package/esm/DatePicker/DatePicker.js

@@ -19,8 +19,7 @@ import Stack from '../Stack';
 import PredefinedRanges from './PredefinedRanges';
 import { createChainedFunction, mergeRefs, useClassNames, useControlled, useCustom, useUniqueId, useEventCallback, partitionHTMLProps } from '../utils';
 import { shouldRenderMonth, shouldRenderDate, shouldRenderTime, shouldOnlyRenderTime, setHours, getHours, addMonths, addDays, isValid, disabledTime, copyTime, calendarOnlyProps } from '../utils/dateUtils';
-import { PickerOverlay, PickerLabel, PickerIndicator, PickerToggleTrigger, pickerPropTypes, pickTriggerPropKeys, omitTriggerPropKeys, usePickerClassName, onMenuKeyDown } from '../Picker';
-import usePickerRef from '../Picker/usePickerRef';
+import { PickerPopup, PickerLabel, PickerIndicator, PickerToggleTrigger, pickerPropTypes, pickTriggerPropKeys, omitTriggerPropKeys, usePickerClassName, usePickerRef, onMenuKeyDown } from '../Picker';
 import DateInput from '../DateInput';
 import InputGroup from '../InputGroup';
 import { OverlayCloseCause } from '../Overlay/OverlayTrigger';
@@ -97,7 +96,7 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     onToggleTimeDropdown = props.onToggleTimeDropdown,
     onShortcutClick = props.onShortcutClick,
     restProps = _objectWithoutPropertiesLoose(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 = useUniqueId(classPrefix + "-", idProp);
+  var id = useUniqueId('rs-', idProp);
   var _usePickerRef = usePickerRef(ref),
     trigger = _usePickerRef.trigger,
     root = _usePickerRef.root,
@@ -274,7 +273,7 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     onClean === null || onClean === void 0 ? void 0 : onClean(event);
     event.stopPropagation();
   });
-  var handlePickerOverlayKeyDown = useEventCallback(function (event) {
+  var handlePickerPopupKeyDown = useEventCallback(function (event) {
     var delta = 0;
     var step = showMonth ? 6 : 7;
     var changeDateFunc = showMonth ? addMonths : addDays;
@@ -418,7 +417,7 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       left: left,
       top: top
     });
-    return /*#__PURE__*/React.createElement(PickerOverlay, {
+    return /*#__PURE__*/React.createElement(PickerPopup, {
       role: "dialog",
       "aria-labelledby": label ? id + "-label" : undefined,
       tabIndex: -1,
@@ -426,7 +425,7 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       ref: mergeRefs(overlay, speakerRef),
       style: styles,
       target: trigger,
-      onKeyDown: handlePickerOverlayKeyDown
+      onKeyDown: handlePickerPopupKeyDown
     }, /*#__PURE__*/React.createElement(Stack, {
       alignItems: "flex-start"
     }, sideRanges.length > 0 && /*#__PURE__*/React.createElement(PredefinedRanges, {

package/esm/DateRangePicker/DateRangePicker.js

@@ -15,7 +15,7 @@ import { FormattedDate } from '../CustomProvider';
 import Toolbar from '../DatePicker/Toolbar';
 import PredefinedRanges from '../DatePicker/PredefinedRanges';
 import Stack from '../Stack';
-import { omitTriggerPropKeys, PickerOverlay, pickerPropTypes, PickerToggleTrigger, PickerIndicator, PickerLabel, pickTriggerPropKeys, usePickerClassName, onMenuKeyDown } from '../Picker';
+import { omitTriggerPropKeys, PickerPopup, pickerPropTypes, PickerToggleTrigger, PickerIndicator, PickerLabel, pickTriggerPropKeys, usePickerClassName, usePickerRef, onMenuKeyDown } from '../Picker';
 import { createChainedFunction, DATERANGE_DISABLED_TARGET, mergeRefs, useClassNames, useControlled, useCustom, useUniqueId, useEventCallback, partitionHTMLProps, getStringLength } from '../utils';
 import { addMonths, compareAsc, isValid, isBefore, isSameDay, addDays, startOfDay, endOfDay, shouldRenderTime, isAfter, copyTime, isSameMonth, shouldRenderMonth, shouldRenderDate, reverseDateRangeOmitTime, getReversedTimeMeridian, calendarOnlyProps, shouldOnlyRenderTime } from '../utils/dateUtils';
 import Calendar from './Calendar';
@@ -25,7 +25,6 @@ import { deprecatePropTypeNew } from '../utils/deprecatePropType';
 import DateRangePickerContext from './DateRangePickerContext';
 import DateRangeInput from '../DateRangeInput';
 import InputGroup from '../InputGroup';
-import usePickerRef from '../Picker/usePickerRef';
 /**
  * A date range picker allows you to select a date range from a calendar.
  *
@@ -93,7 +92,7 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     onShortcutClick = props.onShortcutClick,
     renderTitle = props.renderTitle,
     restProps = _objectWithoutPropertiesLoose(props, ["as", "classPrefix", "className", "appearance", "editable", "cleanable", "character", "defaultCalendarValue", "defaultValue", "plaintext", "disabled", "disabledDate", "shouldDisableDate", "format", "hoverRange", "id", "isoWeek", "limitEndYear", "limitStartYear", "locale", "loading", "label", "menuClassName", "menuStyle", "oneTap", "placeholder", "placement", "ranges", "readOnly", "showOneCalendar", "showWeekNumbers", "showMeridian", "style", "size", "caretAs", "value", "onChange", "onClean", "onClose", "onEnter", "onEntered", "onExited", "onOk", "onOpen", "onSelect", "onShortcutClick", "renderTitle"]);
-  var id = useUniqueId(classPrefix + "-", idProp);
+  var id = useUniqueId('rs-', idProp);
   var _usePickerRef = usePickerRef(ref),
     trigger = _usePickerRef.trigger,
     root = _usePickerRef.root,
@@ -598,7 +597,7 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     var bottomRanges = ranges === null || ranges === void 0 ? void 0 : ranges.filter(function (range) {
       return (range === null || range === void 0 ? void 0 : range.placement) === 'bottom' || (range === null || range === void 0 ? void 0 : range.placement) === undefined;
     });
-    return /*#__PURE__*/React.createElement(PickerOverlay, {
+    return /*#__PURE__*/React.createElement(PickerPopup, {
       role: "dialog",
       "aria-labelledby": label ? id + "-label" : undefined,
       tabIndex: -1,

package/esm/Form/Form.d.ts

@@ -32,6 +32,20 @@ export interface FormProps<T = Record<string, any>, errorMsgType = any, E = {
     disabled?: boolean;
     /** The error message comes from context */
     errorFromContext?: boolean;
+    /**
+     * The form data is nested.
+     * You may now nest fields with "dot syntax" (e.g. address.city).
+     *
+     * @default false
+     * @version v5.51.0
+     * @example
+     * ```jsx
+     * <Form formValue={{ address: { city: 'Shanghai' } }} nestedField>
+     *  <FormControl name="address.city" />
+     * </Form>
+     * ```
+     */
+    nestedField?: boolean;
     /** Callback fired when data changing */
     onChange?: (formValue: T, event?: React.SyntheticEvent) => void;
     /** Callback fired when error checking */