rsuite 5.50.0 → 5.51.0

package/cjs/TreePicker/TreePicker.js

@@ -284,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
     };
   };
 
@@ -472,8 +472,8 @@ var TreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   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) {
@@ -547,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", {
@@ -589,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,
+    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: {
@@ -616,9 +613,9 @@ var TreePicker = /*#__PURE__*/_react.default.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;
@@ -627,7 +624,7 @@ 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,
@@ -671,6 +668,8 @@ 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: trigger,
     placement: placement,
@@ -678,13 +677,12 @@ var TreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     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,
     ref: root
   }, /*#__PURE__*/_react.default.createElement(_Picker.PickerToggle, (0, _extends2.default)({}, (0, _omit2.default)(rest, [].concat(_Picker.omitTriggerPropKeys, usedClassNamePropKeys, ['cascade'])), {
-    id: id,
     ref: target,
     appearance: appearance,
     onKeyDown: onPickerKeydown,
@@ -695,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';