rsuite 5.50.0 → 5.51.0

package/esm/TreePicker/TreeNode.js

@@ -1,12 +1,11 @@
 '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 hasClass from 'dom-lib/hasClass';
 import ArrowDown from '@rsuite/icons/legacy/ArrowDown';
 import Spinner from '@rsuite/icons/legacy/Spinner';
-import { useClassNames } from '../utils';
+import { useClassNames, useEventCallback } from '../utils';
 import { getTreeNodeIndent, stringifyTreeNodeLabel } from '../utils/treeUtils';
 var TreeNode = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var _ref$as = _ref.as,
@@ -40,20 +39,20 @@ var TreeNode = /*#__PURE__*/forwardRef(function (_ref, ref) {
     onDragEnd = _ref.onDragEnd,
     onDrop = _ref.onDrop,
     onExpand = _ref.onExpand,
-    onRenderTreeIcon = _ref.onRenderTreeIcon,
-    onRenderTreeNode = _ref.onRenderTreeNode,
-    rest = _objectWithoutPropertiesLoose(_ref, ["as", "rtl", "label", "layer", "style", "active", "loading", "nodeData", "className", "classPrefix", "disabled", "visible", "draggable", "expand", "focus", "hasChildren", "dragging", "dragOver", "dragOverTop", "dragOverBottom", "onSelect", "onDragStart", "onDragOver", "onDragEnter", "onDragLeave", "onDragEnd", "onDrop", "onExpand", "onRenderTreeIcon", "onRenderTreeNode"]);
+    renderTreeIcon = _ref.renderTreeIcon,
+    renderTreeNode = _ref.renderTreeNode,
+    rest = _objectWithoutPropertiesLoose(_ref, ["as", "rtl", "label", "layer", "style", "active", "loading", "nodeData", "className", "classPrefix", "disabled", "visible", "draggable", "expand", "focus", "hasChildren", "dragging", "dragOver", "dragOverTop", "dragOverBottom", "onSelect", "onDragStart", "onDragOver", "onDragEnter", "onDragLeave", "onDragEnd", "onDrop", "onExpand", "renderTreeIcon", "renderTreeNode"]);
   var _useClassNames = useClassNames(classPrefix),
     prefix = _useClassNames.prefix,
     merge = _useClassNames.merge,
     withClassPrefix = _useClassNames.withClassPrefix;
-  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 (event) {
+  });
+  var handleSelect = useEventCallback(function (event) {
     if (disabled) {
       return;
     }
@@ -63,33 +62,33 @@ var TreeNode = /*#__PURE__*/forwardRef(function (_ref, ref) {
       }
     }
     onSelect === null || onSelect === void 0 ? void 0 : onSelect(nodeData, event);
-  }, [nodeData, disabled, prefix, onSelect]);
-  var handleDragStart = useCallback(function (event) {
+  });
+  var handleDragStart = useEventCallback(function (event) {
     onDragStart === null || onDragStart === void 0 ? void 0 : onDragStart(nodeData, event);
-  }, [nodeData, onDragStart]);
-  var handleDragEnter = useCallback(function (event) {
+  });
+  var handleDragEnter = useEventCallback(function (event) {
     event.preventDefault();
     event.stopPropagation();
     onDragEnter === null || onDragEnter === void 0 ? void 0 : onDragEnter(nodeData, event);
-  }, [nodeData, onDragEnter]);
-  var handleDragOver = useCallback(function (event) {
+  });
+  var handleDragOver = useEventCallback(function (event) {
     event.preventDefault();
     event.stopPropagation();
     onDragOver === null || onDragOver === void 0 ? void 0 : onDragOver(nodeData, event);
-  }, [nodeData, onDragOver]);
-  var handleDragLeave = useCallback(function (event) {
+  });
+  var handleDragLeave = useEventCallback(function (event) {
     event.stopPropagation();
     onDragLeave === null || onDragLeave === void 0 ? void 0 : onDragLeave(nodeData, event);
-  }, [nodeData, onDragLeave]);
-  var handleDragEnd = useCallback(function (event) {
+  });
+  var handleDragEnd = useEventCallback(function (event) {
     event.stopPropagation();
     onDragEnd === null || onDragEnd === void 0 ? void 0 : onDragEnd(nodeData, event);
-  }, [nodeData, onDragEnd]);
-  var handleDrop = useCallback(function (event) {
+  });
+  var handleDrop = useEventCallback(function (event) {
     event.preventDefault();
     event.stopPropagation();
     onDrop === null || onDrop === void 0 ? void 0 : onDrop(nodeData, event);
-  }, [nodeData, onDrop]);
+  });
   var renderIcon = function renderIcon() {
     var classes = prefix('expand-icon', 'icon', {
       expanded: expand
@@ -104,8 +103,8 @@ var TreeNode = /*#__PURE__*/forwardRef(function (_ref, ref) {
         spin: true
       }));
     }
-    if (nodeData !== undefined && typeof onRenderTreeIcon === 'function') {
-      var customIcon = onRenderTreeIcon(nodeData);
+    if (nodeData !== undefined && typeof renderTreeIcon === 'function') {
+      var customIcon = renderTreeIcon(nodeData);
       expandIcon = customIcon !== null ? /*#__PURE__*/React.createElement("div", {
         className: prefix('custom-icon')
       }, customIcon) : expandIcon;
@@ -135,7 +134,7 @@ var TreeNode = /*#__PURE__*/forwardRef(function (_ref, ref) {
       onClick: handleSelect
     }, /*#__PURE__*/React.createElement("span", {
       className: contentClasses
-    }, onRenderTreeNode ? onRenderTreeNode(nodeData) : label));
+    }, renderTreeNode ? renderTreeNode(nodeData) : label));
   };
   var classes = merge(className, withClassPrefix({
     disabled: disabled,
@@ -165,37 +164,4 @@ var TreeNode = /*#__PURE__*/forwardRef(function (_ref, ref) {
   }), renderIcon(), renderLabel()) : null;
 });
 TreeNode.displayName = 'TreePickerNode';
-TreeNode.propTypes = {
-  as: PropTypes.elementType,
-  rtl: PropTypes.bool,
-  focus: PropTypes.bool,
-  layer: PropTypes.number,
-  value: PropTypes.any,
-  label: PropTypes.any,
-  expand: PropTypes.bool,
-  active: PropTypes.bool,
-  loading: PropTypes.bool,
-  visible: PropTypes.bool,
-  nodeData: PropTypes.any,
-  disabled: PropTypes.bool,
-  draggable: PropTypes.bool,
-  dragging: PropTypes.bool,
-  dragOver: PropTypes.bool,
-  dragOverTop: PropTypes.bool,
-  dragOverBottom: PropTypes.bool,
-  hasChildren: PropTypes.bool,
-  className: PropTypes.string,
-  classPrefix: PropTypes.string,
-  style: PropTypes.object,
-  onExpand: PropTypes.func,
-  onSelect: PropTypes.func,
-  onRenderTreeIcon: PropTypes.func,
-  onRenderTreeNode: PropTypes.func,
-  onDragStart: PropTypes.func,
-  onDragEnter: PropTypes.func,
-  onDragOver: PropTypes.func,
-  onDragLeave: PropTypes.func,
-  onDragEnd: PropTypes.func,
-  onDrop: PropTypes.func
-};
 export default TreeNode;

package/esm/TreePicker/TreePicker.js

@@ -13,7 +13,7 @@ import TreeNode from './TreeNode';
 import { createDragPreview, getKeyParentMap, getPathTowardsItem, getTreeNodeIndent, removeDragPreview, stringifyTreeNodeLabel } from '../utils/treeUtils';
 import { createChainedFunction, useClassNames, useCustom, useControlled, useEventCallback, TREE_NODE_DROP_POSITION, KEY_VALUES, mergeRefs, shallowEqual } from '../utils';
 import { getExpandWhenSearching, hasVisibleChildren, getDragNodeKeys, calDropNodePosition, createUpdateTreeDataFunction, useTreeDrag, useFlattenTreeData, getTreeActiveNode, getDefaultExpandItemValues, useTreeNodeRefs, useTreeSearch, focusPreviousItem, getFocusableItems, focusNextItem, getActiveItem, toggleExpand, useGetTreeNodeChildren, focusToActiveTreeNode, leftArrowHandler, focusTreeNode, rightArrowHandler, isSearching } from '../utils/treeUtils';
-import { PickerToggle, PickerOverlay, SearchBar, PickerToggleTrigger, createConcatChildrenFunction, usePickerClassName, usePickerRef, onMenuKeyDown as _onMenuKeyDown, listPickerPropTypes, pickTriggerPropKeys, omitTriggerPropKeys, useToggleKeyDownEvent } from '../Picker';
+import { PickerToggle, PickerPopup, TreeView, SearchBar, PickerToggleTrigger, createConcatChildrenFunction, usePickerClassName, usePickerRef, onMenuKeyDown as _onMenuKeyDown, listPickerPropTypes, pickTriggerPropKeys, omitTriggerPropKeys, useToggleKeyDownEvent } from '../Picker';
 import TreeContext from '../Tree/TreeContext';
 var emptyArray = [];
 var itemSize = function itemSize() {
@@ -279,8 +279,8 @@ var TreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       onDragEnd: handleDragEnd,
       onDrop: handleDrop,
       onExpand: handleExpand,
-      onRenderTreeNode: renderTreeNode,
-      onRenderTreeIcon: renderTreeIcon
+      renderTreeNode: renderTreeNode,
+      renderTreeIcon: renderTreeIcon
     };
   };
 
@@ -467,8 +467,8 @@ var TreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var handleClean = 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) {
@@ -542,7 +542,8 @@ var TreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
           return saveTreeNodeRef(_ref, node.refKey);
         }
       })), /*#__PURE__*/React.createElement("div", {
-        className: treePrefix('children')
+        className: treePrefix('group'),
+        role: "group"
       }, nodes.map(function (child, i) {
         return renderNode(child, i, layer);
       }), showIndentLine && /*#__PURE__*/React.createElement("span", {
@@ -584,18 +585,14 @@ var TreePicker = /*#__PURE__*/React.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 ? _extends({
-      height: height
-    }, style) : {};
-    return /*#__PURE__*/React.createElement("div", {
-      role: "tree",
-      id: id ? id + "-listbox" : undefined,
+    return /*#__PURE__*/React.createElement(TreeView, {
+      treeRootClassName: treePrefix('root'),
       ref: inline ? root : treeView,
       className: classes,
-      style: styles,
+      style: inline ? _extends({
+        height: height
+      }, style) : {},
       onKeyDown: inline ? handleTreeKeyDown : undefined
-    }, /*#__PURE__*/React.createElement("div", {
-      className: treePrefix('nodes')
     }, virtualized ? /*#__PURE__*/React.createElement(AutoSizer, {
       defaultHeight: inline ? height : menuMaxHeight,
       style: {
@@ -611,9 +608,9 @@ var TreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
         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;
@@ -622,7 +619,7 @@ var TreePicker = /*#__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,
@@ -666,6 +663,8 @@ var TreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     return renderTree();
   }
   return /*#__PURE__*/React.createElement(PickerToggleTrigger, {
+    id: id,
+    popupType: "tree",
     pickerProps: _pick(props, pickTriggerPropKeys),
     ref: trigger,
     placement: placement,
@@ -673,13 +672,12 @@ var TreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     onEntered: onEntered,
     onExit: createChainedFunction(onClose, onExit),
     onExited: createChainedFunction(handleClose, onExited),
-    speaker: renderDropdownMenu
+    speaker: renderTreeView
   }, /*#__PURE__*/React.createElement(Component, {
     className: classes,
     style: style,
     ref: root
   }, /*#__PURE__*/React.createElement(PickerToggle, _extends({}, _omit(rest, [].concat(omitTriggerPropKeys, usedClassNamePropKeys, ['cascade'])), {
-    id: id,
     ref: target,
     appearance: appearance,
     onKeyDown: onPickerKeydown,
@@ -690,7 +688,8 @@ var TreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     hasValue: hasValidValue,
     active: active,
     placement: placement,
-    inputValue: value
+    inputValue: value,
+    focusItemValue: focusItemValue
   }), selectedElement || locale.placeholder)));
 });
 TreePicker.displayName = 'TreePicker';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rsuite",
-  "version": "5.50.0",
+  "version": "5.51.0",
   "description": "A suite of react components",
   "main": "cjs/index.js",
   "module": "esm/index.js",

package/styles/variables.less

@@ -849,12 +849,10 @@
 @zindex-date-range-picker-calendar-dropdown:  1;
 @zindex-date-range-picker-table-cell-content: 1;
 @zindex-badge-content:                        1;
-@zindex-input:                                2;
-@zindex-input-group-icon:                     4;
 @zindex-dropdown:                             5;
 @zindex-picker-toggle:                        5; // The same with zindex-dropdown
 @zindex-picker-input:                         (@zindex-picker-toggle + 1); // Greater than picker toggle
-@zindex-picker-menu:                          (@zindex-picker-toggle + 2); // Greater than picker toggle and input
+@zindex-picker-popup:                          (@zindex-picker-toggle + 2); // Greater than picker toggle and input
 @zindex-dropdown-a:                           10;
 @zindex-list-helper:                          99;
 @zindex-navbar:                               1000;

package/cjs/Picker/DropdownMenu.d.ts

@@ -1,59 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { ListProps, ListHandle } from '../Windowing';
-import { StandardProps, ItemDataType } from '../@types/common';
-export interface DropdownMenuProps<Multiple = false> extends StandardProps, Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'> {
-    classPrefix: string;
-    data?: ItemDataType[];
-    group?: boolean;
-    groupBy?: string;
-    disabledItemValues?: any[];
-    activeItemValues?: any[];
-    focusItemValue?: any;
-    maxHeight?: number;
-    valueKey?: string;
-    labelKey?: string;
-    className?: string;
-    style?: React.CSSProperties;
-    dropdownMenuItemAs: React.ElementType | string;
-    dropdownMenuItemClassPrefix?: string;
-    dropdownMenuItemProps?: any;
-    rowHeight?: number;
-    rowGroupHeight?: number;
-    virtualized?: boolean;
-    listProps?: Partial<ListProps>;
-    listRef?: React.Ref<ListHandle>;
-    /** Custom selected option */
-    renderMenuItem?: (itemLabel: React.ReactNode, item: any) => React.ReactNode;
-    renderMenuGroup?: (title: React.ReactNode, item: any) => React.ReactNode;
-    onSelect?: Multiple extends true ? (value: any, item: any, event: React.MouseEvent, checked: boolean) => void : Multiple extends false ? (value: any, item: any, event: React.MouseEvent) => void : any;
-    onGroupTitleClick?: (event: React.MouseEvent) => void;
-}
-export declare type DropdownMenuComponent = React.ForwardRefExoticComponent<DropdownMenuProps> & {
-    <Multiple = false>(props: DropdownMenuProps<Multiple>): React.ReactElement | null;
-};
-declare const DropdownMenu: DropdownMenuComponent;
-export declare const dropdownMenuPropTypes: {
-    classPrefix: PropTypes.Validator<string>;
-    className: PropTypes.Requireable<string>;
-    dropdownMenuItemAs: PropTypes.Validator<PropTypes.ReactComponentLike>;
-    dropdownMenuItemClassPrefix: PropTypes.Requireable<string>;
-    data: PropTypes.Requireable<any[]>;
-    group: PropTypes.Requireable<boolean>;
-    disabledItemValues: PropTypes.Requireable<any[]>;
-    activeItemValues: PropTypes.Requireable<any[]>;
-    focusItemValue: PropTypes.Requireable<any>;
-    maxHeight: PropTypes.Requireable<number>;
-    valueKey: PropTypes.Requireable<string>;
-    labelKey: PropTypes.Requireable<string>;
-    style: PropTypes.Requireable<object>;
-    renderMenuItem: PropTypes.Requireable<(...args: any[]) => any>;
-    renderMenuGroup: PropTypes.Requireable<(...args: any[]) => any>;
-    onSelect: PropTypes.Requireable<(...args: any[]) => any>;
-    onGroupTitleClick: PropTypes.Requireable<(...args: any[]) => any>;
-    virtualized: PropTypes.Requireable<boolean>;
-    listProps: PropTypes.Requireable<any>;
-    rowHeight: PropTypes.Requireable<number>;
-    rowGroupHeight: PropTypes.Requireable<number>;
-};
-export default DropdownMenu;

package/cjs/Picker/DropdownMenuGroup.d.ts

@@ -1,6 +0,0 @@
-import React from 'react';
-import { WithAsProps } from '../@types/common';
-export interface DropdownMenuGroupProps extends WithAsProps, React.HTMLAttributes<HTMLDivElement> {
-}
-declare const DropdownMenuGroup: React.ForwardRefExoticComponent<DropdownMenuGroupProps & React.RefAttributes<HTMLDivElement>>;
-export default DropdownMenuGroup;

package/esm/Picker/DropdownMenu.d.ts

@@ -1,59 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { ListProps, ListHandle } from '../Windowing';
-import { StandardProps, ItemDataType } from '../@types/common';
-export interface DropdownMenuProps<Multiple = false> extends StandardProps, Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'> {
-    classPrefix: string;
-    data?: ItemDataType[];
-    group?: boolean;
-    groupBy?: string;
-    disabledItemValues?: any[];
-    activeItemValues?: any[];
-    focusItemValue?: any;
-    maxHeight?: number;
-    valueKey?: string;
-    labelKey?: string;
-    className?: string;
-    style?: React.CSSProperties;
-    dropdownMenuItemAs: React.ElementType | string;
-    dropdownMenuItemClassPrefix?: string;
-    dropdownMenuItemProps?: any;
-    rowHeight?: number;
-    rowGroupHeight?: number;
-    virtualized?: boolean;
-    listProps?: Partial<ListProps>;
-    listRef?: React.Ref<ListHandle>;
-    /** Custom selected option */
-    renderMenuItem?: (itemLabel: React.ReactNode, item: any) => React.ReactNode;
-    renderMenuGroup?: (title: React.ReactNode, item: any) => React.ReactNode;
-    onSelect?: Multiple extends true ? (value: any, item: any, event: React.MouseEvent, checked: boolean) => void : Multiple extends false ? (value: any, item: any, event: React.MouseEvent) => void : any;
-    onGroupTitleClick?: (event: React.MouseEvent) => void;
-}
-export declare type DropdownMenuComponent = React.ForwardRefExoticComponent<DropdownMenuProps> & {
-    <Multiple = false>(props: DropdownMenuProps<Multiple>): React.ReactElement | null;
-};
-declare const DropdownMenu: DropdownMenuComponent;
-export declare const dropdownMenuPropTypes: {
-    classPrefix: PropTypes.Validator<string>;
-    className: PropTypes.Requireable<string>;
-    dropdownMenuItemAs: PropTypes.Validator<PropTypes.ReactComponentLike>;
-    dropdownMenuItemClassPrefix: PropTypes.Requireable<string>;
-    data: PropTypes.Requireable<any[]>;
-    group: PropTypes.Requireable<boolean>;
-    disabledItemValues: PropTypes.Requireable<any[]>;
-    activeItemValues: PropTypes.Requireable<any[]>;
-    focusItemValue: PropTypes.Requireable<any>;
-    maxHeight: PropTypes.Requireable<number>;
-    valueKey: PropTypes.Requireable<string>;
-    labelKey: PropTypes.Requireable<string>;
-    style: PropTypes.Requireable<object>;
-    renderMenuItem: PropTypes.Requireable<(...args: any[]) => any>;
-    renderMenuGroup: PropTypes.Requireable<(...args: any[]) => any>;
-    onSelect: PropTypes.Requireable<(...args: any[]) => any>;
-    onGroupTitleClick: PropTypes.Requireable<(...args: any[]) => any>;
-    virtualized: PropTypes.Requireable<boolean>;
-    listProps: PropTypes.Requireable<any>;
-    rowHeight: PropTypes.Requireable<number>;
-    rowGroupHeight: PropTypes.Requireable<number>;
-};
-export default DropdownMenu;

package/esm/Picker/DropdownMenuGroup.d.ts

@@ -1,6 +0,0 @@
-import React from 'react';
-import { WithAsProps } from '../@types/common';
-export interface DropdownMenuGroupProps extends WithAsProps, React.HTMLAttributes<HTMLDivElement> {
-}
-declare const DropdownMenuGroup: React.ForwardRefExoticComponent<DropdownMenuGroupProps & React.RefAttributes<HTMLDivElement>>;
-export default DropdownMenuGroup;