rsuite 5.40.0 → 5.41.0

package/esm/TreePicker/TreePicker.js

@@ -1,3 +1,4 @@
+'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _isFunction from "lodash/isFunction";
@@ -15,182 +16,165 @@ import { getExpandWhenSearching, hasVisibleChildren, getDragNodeKeys, calDropNod
 import { PickerToggle, PickerOverlay, SearchBar, PickerToggleTrigger, createConcatChildrenFunction, usePickerClassName, onMenuKeyDown as _onMenuKeyDown, usePublicMethods, listPickerPropTypes, pickTriggerPropKeys, omitTriggerPropKeys, useToggleKeyDownEvent } from '../Picker';
 import TreeContext from '../Tree/TreeContext';
 var emptyArray = [];
-
 var itemSize = function itemSize() {
   return 36;
 };
-
 var TreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _props$as = props.as,
-      Component = _props$as === void 0 ? 'div' : _props$as,
-      _props$data = props.data,
-      data = _props$data === void 0 ? emptyArray : _props$data,
-      _props$appearance = props.appearance,
-      appearance = _props$appearance === void 0 ? 'default' : _props$appearance,
-      style = props.style,
-      showIndentLine = props.showIndentLine,
-      controlledValue = props.value,
-      overrideLocale = props.locale,
-      _props$height = props.height,
-      height = _props$height === void 0 ? 360 : _props$height,
-      _props$menuMaxHeight = props.menuMaxHeight,
-      menuMaxHeight = _props$menuMaxHeight === void 0 ? 320 : _props$menuMaxHeight,
-      menuStyle = props.menuStyle,
-      className = props.className,
-      disabled = props.disabled,
-      _props$placement = props.placement,
-      placement = _props$placement === void 0 ? 'bottomStart' : _props$placement,
-      _props$cleanable = props.cleanable,
-      cleanable = _props$cleanable === void 0 ? true : _props$cleanable,
-      _props$searchable = props.searchable,
-      searchable = _props$searchable === void 0 ? true : _props$searchable,
-      _props$virtualized = props.virtualized,
-      virtualized = _props$virtualized === void 0 ? false : _props$virtualized,
-      _props$classPrefix = props.classPrefix,
-      classPrefix = _props$classPrefix === void 0 ? 'picker' : _props$classPrefix,
-      defaultValue = props.defaultValue,
-      placeholder = props.placeholder,
-      searchKeyword = props.searchKeyword,
-      menuClassName = props.menuClassName,
-      _props$menuAutoWidth = props.menuAutoWidth,
-      menuAutoWidth = _props$menuAutoWidth === void 0 ? true : _props$menuAutoWidth,
-      searchBy = props.searchBy,
-      toggleAs = props.toggleAs,
-      _props$labelKey = props.labelKey,
-      labelKey = _props$labelKey === void 0 ? 'label' : _props$labelKey,
-      _props$valueKey = props.valueKey,
-      valueKey = _props$valueKey === void 0 ? 'value' : _props$valueKey,
-      _props$childrenKey = props.childrenKey,
-      childrenKey = _props$childrenKey === void 0 ? 'children' : _props$childrenKey,
-      draggable = props.draggable,
-      _props$defaultExpandA = props.defaultExpandAll,
-      defaultExpandAll = _props$defaultExpandA === void 0 ? false : _props$defaultExpandA,
-      _props$disabledItemVa = props.disabledItemValues,
-      disabledItemValues = _props$disabledItemVa === void 0 ? emptyArray : _props$disabledItemVa,
-      controlledExpandItemValues = props.expandItemValues,
-      _props$defaultExpandI = props.defaultExpandItemValues,
-      defaultExpandItemValues = _props$defaultExpandI === void 0 ? emptyArray : _props$defaultExpandI,
-      id = props.id,
-      listProps = props.listProps,
-      getChildren = props.getChildren,
-      renderTreeIcon = props.renderTreeIcon,
-      renderTreeNode = props.renderTreeNode,
-      onExit = props.onExit,
-      onExited = props.onExited,
-      onClean = props.onClean,
-      onOpen = props.onOpen,
-      onSearch = props.onSearch,
-      onSelect = props.onSelect,
-      onSelectItem = props.onSelectItem,
-      onChange = props.onChange,
-      onEntered = props.onEntered,
-      onClose = props.onClose,
-      onDragEnd = props.onDragEnd,
-      onDragStart = props.onDragStart,
-      onDragEnter = props.onDragEnter,
-      onDragLeave = props.onDragLeave,
-      onDragOver = props.onDragOver,
-      onDrop = props.onDrop,
-      onExpand = props.onExpand,
-      renderExtraFooter = props.renderExtraFooter,
-      renderMenu = props.renderMenu,
-      renderValue = props.renderValue,
-      rest = _objectWithoutPropertiesLoose(props, ["as", "data", "appearance", "style", "showIndentLine", "value", "locale", "height", "menuMaxHeight", "menuStyle", "className", "disabled", "placement", "cleanable", "searchable", "virtualized", "classPrefix", "defaultValue", "placeholder", "searchKeyword", "menuClassName", "menuAutoWidth", "searchBy", "toggleAs", "labelKey", "valueKey", "childrenKey", "draggable", "defaultExpandAll", "disabledItemValues", "expandItemValues", "defaultExpandItemValues", "id", "listProps", "getChildren", "renderTreeIcon", "renderTreeNode", "onExit", "onExited", "onClean", "onOpen", "onSearch", "onSelect", "onSelectItem", "onChange", "onEntered", "onClose", "onDragEnd", "onDragStart", "onDragEnter", "onDragLeave", "onDragOver", "onDrop", "onExpand", "renderExtraFooter", "renderMenu", "renderValue"]);
-
+    Component = _props$as === void 0 ? 'div' : _props$as,
+    _props$data = props.data,
+    data = _props$data === void 0 ? emptyArray : _props$data,
+    _props$appearance = props.appearance,
+    appearance = _props$appearance === void 0 ? 'default' : _props$appearance,
+    style = props.style,
+    showIndentLine = props.showIndentLine,
+    controlledValue = props.value,
+    overrideLocale = props.locale,
+    _props$height = props.height,
+    height = _props$height === void 0 ? 360 : _props$height,
+    _props$menuMaxHeight = props.menuMaxHeight,
+    menuMaxHeight = _props$menuMaxHeight === void 0 ? 320 : _props$menuMaxHeight,
+    menuStyle = props.menuStyle,
+    className = props.className,
+    disabled = props.disabled,
+    _props$placement = props.placement,
+    placement = _props$placement === void 0 ? 'bottomStart' : _props$placement,
+    _props$cleanable = props.cleanable,
+    cleanable = _props$cleanable === void 0 ? true : _props$cleanable,
+    _props$searchable = props.searchable,
+    searchable = _props$searchable === void 0 ? true : _props$searchable,
+    _props$virtualized = props.virtualized,
+    virtualized = _props$virtualized === void 0 ? false : _props$virtualized,
+    _props$classPrefix = props.classPrefix,
+    classPrefix = _props$classPrefix === void 0 ? 'picker' : _props$classPrefix,
+    defaultValue = props.defaultValue,
+    placeholder = props.placeholder,
+    searchKeyword = props.searchKeyword,
+    menuClassName = props.menuClassName,
+    _props$menuAutoWidth = props.menuAutoWidth,
+    menuAutoWidth = _props$menuAutoWidth === void 0 ? true : _props$menuAutoWidth,
+    searchBy = props.searchBy,
+    toggleAs = props.toggleAs,
+    _props$labelKey = props.labelKey,
+    labelKey = _props$labelKey === void 0 ? 'label' : _props$labelKey,
+    _props$valueKey = props.valueKey,
+    valueKey = _props$valueKey === void 0 ? 'value' : _props$valueKey,
+    _props$childrenKey = props.childrenKey,
+    childrenKey = _props$childrenKey === void 0 ? 'children' : _props$childrenKey,
+    draggable = props.draggable,
+    _props$defaultExpandA = props.defaultExpandAll,
+    defaultExpandAll = _props$defaultExpandA === void 0 ? false : _props$defaultExpandA,
+    _props$disabledItemVa = props.disabledItemValues,
+    disabledItemValues = _props$disabledItemVa === void 0 ? emptyArray : _props$disabledItemVa,
+    controlledExpandItemValues = props.expandItemValues,
+    _props$defaultExpandI = props.defaultExpandItemValues,
+    defaultExpandItemValues = _props$defaultExpandI === void 0 ? emptyArray : _props$defaultExpandI,
+    id = props.id,
+    listProps = props.listProps,
+    getChildren = props.getChildren,
+    renderTreeIcon = props.renderTreeIcon,
+    renderTreeNode = props.renderTreeNode,
+    onExit = props.onExit,
+    onExited = props.onExited,
+    onClean = props.onClean,
+    onOpen = props.onOpen,
+    onSearch = props.onSearch,
+    onSelect = props.onSelect,
+    onSelectItem = props.onSelectItem,
+    onChange = props.onChange,
+    onEntered = props.onEntered,
+    onClose = props.onClose,
+    onDragEnd = props.onDragEnd,
+    onDragStart = props.onDragStart,
+    onDragEnter = props.onDragEnter,
+    onDragLeave = props.onDragLeave,
+    onDragOver = props.onDragOver,
+    onDrop = props.onDrop,
+    onExpand = props.onExpand,
+    renderExtraFooter = props.renderExtraFooter,
+    renderMenu = props.renderMenu,
+    renderValue = props.renderValue,
+    rest = _objectWithoutPropertiesLoose(props, ["as", "data", "appearance", "style", "showIndentLine", "value", "locale", "height", "menuMaxHeight", "menuStyle", "className", "disabled", "placement", "cleanable", "searchable", "virtualized", "classPrefix", "defaultValue", "placeholder", "searchKeyword", "menuClassName", "menuAutoWidth", "searchBy", "toggleAs", "labelKey", "valueKey", "childrenKey", "draggable", "defaultExpandAll", "disabledItemValues", "expandItemValues", "defaultExpandItemValues", "id", "listProps", "getChildren", "renderTreeIcon", "renderTreeNode", "onExit", "onExited", "onClean", "onOpen", "onSearch", "onSelect", "onSelectItem", "onChange", "onEntered", "onClose", "onDragEnd", "onDragStart", "onDragEnter", "onDragLeave", "onDragOver", "onDrop", "onExpand", "renderExtraFooter", "renderMenu", "renderValue"]);
   var triggerRef = useRef(null);
   var targetRef = useRef(null);
   var listRef = useRef(null);
   var overlayRef = useRef(null);
   var searchInputRef = useRef(null);
   var treeViewRef = useRef(null);
-
   var _useCustom = useCustom('Picker', overrideLocale),
-      rtl = _useCustom.rtl,
-      locale = _useCustom.locale;
-
+    rtl = _useCustom.rtl,
+    locale = _useCustom.locale;
   var _useContext = useContext(TreeContext),
-      inline = _useContext.inline;
-
+    inline = _useContext.inline;
   var _useControlled = useControlled(controlledValue, defaultValue),
-      value = _useControlled[0],
-      setValue = _useControlled[1],
-      isControlled = _useControlled[2];
-
+    value = _useControlled[0],
+    setValue = _useControlled[1],
+    isControlled = _useControlled[2];
   var _useGetTreeNodeChildr = useGetTreeNodeChildren(data, valueKey, childrenKey),
-      treeData = _useGetTreeNodeChildr.data,
-      setTreeData = _useGetTreeNodeChildr.setData,
-      loadingNodeValues = _useGetTreeNodeChildr.loadingNodeValues,
-      loadChildren = _useGetTreeNodeChildr.loadChildren;
-
+    treeData = _useGetTreeNodeChildr.data,
+    setTreeData = _useGetTreeNodeChildr.setData,
+    loadingNodeValues = _useGetTreeNodeChildr.loadingNodeValues,
+    loadChildren = _useGetTreeNodeChildr.loadChildren;
   var _useControlled2 = useControlled(controlledExpandItemValues, getDefaultExpandItemValues(treeData, {
-    defaultExpandAll: defaultExpandAll,
-    valueKey: valueKey,
-    childrenKey: childrenKey,
-    defaultExpandItemValues: defaultExpandItemValues
-  })),
-      expandItemValues = _useControlled2[0],
-      setExpandItemValues = _useControlled2[1];
-
+      defaultExpandAll: defaultExpandAll,
+      valueKey: valueKey,
+      childrenKey: childrenKey,
+      defaultExpandItemValues: defaultExpandItemValues
+    })),
+    expandItemValues = _useControlled2[0],
+    setExpandItemValues = _useControlled2[1];
   var _useState = useState(false),
-      active = _useState[0],
-      setActive = _useState[1];
-
+    active = _useState[0],
+    setActive = _useState[1];
   var _useState2 = useState(null),
-      focusItemValue = _useState2[0],
-      setFocusItemValue = _useState2[1];
-
+    focusItemValue = _useState2[0],
+    setFocusItemValue = _useState2[1];
   var _useFlattenTreeData = useFlattenTreeData({
-    data: treeData,
-    labelKey: labelKey,
-    valueKey: valueKey,
-    childrenKey: childrenKey,
-    callback: function callback() {
-      // after flattenData, always trigger re-render
-      forceUpdate();
-    }
-  }),
-      flattenNodes = _useFlattenTreeData.flattenNodes,
-      forceUpdate = _useFlattenTreeData.forceUpdate,
-      formatVirtualizedTreeData = _useFlattenTreeData.formatVirtualizedTreeData;
-
+      data: treeData,
+      labelKey: labelKey,
+      valueKey: valueKey,
+      childrenKey: childrenKey,
+      callback: function callback() {
+        // after flattenData, always trigger re-render
+        forceUpdate();
+      }
+    }),
+    flattenNodes = _useFlattenTreeData.flattenNodes,
+    forceUpdate = _useFlattenTreeData.forceUpdate,
+    formatVirtualizedTreeData = _useFlattenTreeData.formatVirtualizedTreeData;
   var _useClassNames = useClassNames(classPrefix),
-      prefix = _useClassNames.prefix,
-      merge = _useClassNames.merge;
-
+    prefix = _useClassNames.prefix,
+    merge = _useClassNames.merge;
   var _useClassNames2 = useClassNames('tree'),
-      treePrefix = _useClassNames2.prefix,
-      withTreeClassPrefix = _useClassNames2.withClassPrefix;
-
+    treePrefix = _useClassNames2.prefix,
+    withTreeClassPrefix = _useClassNames2.withClassPrefix;
   var _useTreeSearch = useTreeSearch({
-    labelKey: labelKey,
-    childrenKey: childrenKey,
-    searchKeyword: searchKeyword,
-    data: treeData,
-    searchBy: searchBy,
-    callback: function callback(searchKeyword, _filterData, event) {
-      onSearch === null || onSearch === void 0 ? void 0 : onSearch(searchKeyword, event);
-    }
-  }),
-      filteredData = _useTreeSearch.filteredData,
-      searchKeywordState = _useTreeSearch.searchKeywordState,
-      setSearchKeyword = _useTreeSearch.setSearchKeyword,
-      handleSearch = _useTreeSearch.handleSearch,
-      setFilteredData = _useTreeSearch.setFilteredData;
-
+      labelKey: labelKey,
+      childrenKey: childrenKey,
+      searchKeyword: searchKeyword,
+      data: treeData,
+      searchBy: searchBy,
+      callback: function callback(searchKeyword, _filterData, event) {
+        onSearch === null || onSearch === void 0 ? void 0 : onSearch(searchKeyword, event);
+      }
+    }),
+    filteredData = _useTreeSearch.filteredData,
+    searchKeywordState = _useTreeSearch.searchKeywordState,
+    setSearchKeyword = _useTreeSearch.setSearchKeyword,
+    handleSearch = _useTreeSearch.handleSearch,
+    setFilteredData = _useTreeSearch.setFilteredData;
   var _useTreeDrag = useTreeDrag(),
-      dragNodeKeys = _useTreeDrag.dragNodeKeys,
-      dragOverNodeKey = _useTreeDrag.dragOverNodeKey,
-      dragNode = _useTreeDrag.dragNode,
-      dropNodePosition = _useTreeDrag.dropNodePosition,
-      setDragNodeKeys = _useTreeDrag.setDragNodeKeys,
-      setDragOverNodeKey = _useTreeDrag.setDragOverNodeKey,
-      setDragNode = _useTreeDrag.setDragNode,
-      setDropNodePosition = _useTreeDrag.setDropNodePosition;
-
+    dragNodeKeys = _useTreeDrag.dragNodeKeys,
+    dragOverNodeKey = _useTreeDrag.dragOverNodeKey,
+    dragNode = _useTreeDrag.dragNode,
+    dropNodePosition = _useTreeDrag.dropNodePosition,
+    setDragNodeKeys = _useTreeDrag.setDragNodeKeys,
+    setDragOverNodeKey = _useTreeDrag.setDragOverNodeKey,
+    setDragNode = _useTreeDrag.setDragNode,
+    setDropNodePosition = _useTreeDrag.setDropNodePosition;
   var _useTreeNodeRefs = useTreeNodeRefs(),
-      treeNodesRefs = _useTreeNodeRefs.treeNodesRefs,
-      saveTreeNodeRef = _useTreeNodeRefs.saveTreeNodeRef;
-
+    treeNodesRefs = _useTreeNodeRefs.treeNodesRefs,
+    saveTreeNodeRef = _useTreeNodeRefs.saveTreeNodeRef;
   var activeNode = getTreeActiveNode(flattenNodes, value, valueKey);
   var getFormattedNodes = useCallback(function (render) {
     if (virtualized) {
@@ -200,7 +184,6 @@ var TreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
         return n.visible;
       });
     }
-
     return filteredData.map(function (dataItem, index) {
       return render === null || render === void 0 ? void 0 : render(dataItem, index, 1);
     });
@@ -241,10 +224,8 @@ var TreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     return {
       /** draggingNode */
       dragNode: dragNode,
-
       /** dropNode */
       dropNode: nodeData,
-
       /** dragAndDrop Position type */
       dropNodePosition: dropNodePosition,
       createUpdateDataFunction: createUpdateTreeDataFunction({
@@ -254,7 +235,6 @@ var TreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       }, options)
     };
   }, [dragNode, valueKey, childrenKey, dropNodePosition]);
-
   var getTreeNodeProps = function getTreeNodeProps(node, layer, index) {
     var draggingNode = dragNode !== null && dragNode !== void 0 ? dragNode : {};
     return {
@@ -292,10 +272,10 @@ var TreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       onRenderTreeNode: renderTreeNode,
       onRenderTreeIcon: renderTreeIcon
     };
-  }; // TODO-Doma
-  // Replace `getKeyParentMap` with `getParentMap`
-
+  };
 
+  // TODO-Doma
+  // Replace `getKeyParentMap` with `getParentMap`
   var itemParentMap = useMemo(function () {
     return getKeyParentMap(data, function (node) {
       return node[valueKey];
@@ -305,17 +285,13 @@ var TreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }, [childrenKey, data, valueKey]);
   var handleSelect = useCallback(function (nodeData, event) {
     var _targetRef$current, _triggerRef$current, _triggerRef$current$c;
-
     if (!nodeData) {
       return;
     }
-
     var nodeValue = nodeData[valueKey];
-
     if (!isControlled) {
       setValue(nodeValue);
     }
-
     setFocusItemValue(nodeData[valueKey]);
     onChange === null || onChange === void 0 ? void 0 : onChange(nodeValue, event);
     onSelect === null || onSelect === void 0 ? void 0 : onSelect(nodeData, nodeValue, event);
@@ -337,7 +313,6 @@ var TreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       valueKey: valueKey,
       childrenKey: childrenKey
     }));
-
     if (_isFunction(getChildren) && !node.expand && Array.isArray(node[childrenKey]) && node[childrenKey].length === 0) {
       loadChildren(node, getChildren);
     }
@@ -345,7 +320,6 @@ var TreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var handleDragStart = useCallback(function (nodeData, event) {
     if (draggable) {
       var _event$dataTransfer;
-
       var dragMoverNode = createDragPreview(stringifyTreeNodeLabel(nodeData[labelKey]), treePrefix('drag-preview'));
       (_event$dataTransfer = event.dataTransfer) === null || _event$dataTransfer === void 0 ? void 0 : _event$dataTransfer.setDragImage(dragMoverNode, 0, 0);
       setDragNodeKeys(getDragNodeKeys(nodeData, childrenKey, valueKey));
@@ -359,12 +333,10 @@ var TreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     })) {
       return;
     }
-
     if (dragNode) {
       setDragOverNodeKey(nodeData[valueKey]);
       setDropNodePosition(calDropNodePosition(event, treeNodesRefs[nodeData.refKey]));
     }
-
     onDragEnter === null || onDragEnter === void 0 ? void 0 : onDragEnter(nodeData, event);
   }, [dragNode, treeNodesRefs, dragNodeKeys, onDragEnter, setDragOverNodeKey, setDropNodePosition, valueKey]);
   var handleDragOver = useCallback(function (nodeData, event) {
@@ -374,13 +346,11 @@ var TreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       event.dataTransfer.dropEffect = 'none';
       return;
     }
-
     if (dragNode && shallowEqual(nodeData[valueKey], dragOverNodeKey)) {
       var lastDropNodePosition = calDropNodePosition(event, treeNodesRefs[nodeData.refKey]);
       if (lastDropNodePosition === dropNodePosition) return;
       setDropNodePosition(lastDropNodePosition);
     }
-
     onDragOver === null || onDragOver === void 0 ? void 0 : onDragOver(nodeData, event);
   }, [dragNode, dragNodeKeys, dragOverNodeKey, dropNodePosition, onDragOver, setDropNodePosition, treeNodesRefs, valueKey]);
   var handleDragLeave = useCallback(function (nodeData, event) {
@@ -402,7 +372,6 @@ var TreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       var dropData = getDropData(nodeData);
       onDrop === null || onDrop === void 0 ? void 0 : onDrop(dropData, event);
     }
-
     removeDragPreview();
     setDragNode(null);
     setDragNodeKeys([]);
@@ -410,7 +379,6 @@ var TreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }, [dragNodeKeys, setDragNode, setDragOverNodeKey, setDragNodeKeys, onDrop, getDropData, valueKey]);
   var handleOpen = useCallback(function () {
     var _triggerRef$current2, _triggerRef$current2$;
-
     (_triggerRef$current2 = triggerRef.current) === null || _triggerRef$current2 === void 0 ? void 0 : (_triggerRef$current2$ = _triggerRef$current2.open) === null || _triggerRef$current2$ === void 0 ? void 0 : _triggerRef$current2$.call(_triggerRef$current2);
     focusActiveNode();
     onOpen === null || onOpen === void 0 ? void 0 : onOpen();
@@ -418,7 +386,6 @@ var TreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }, [focusActiveNode, onOpen]);
   var handleClose = useCallback(function () {
     var _triggerRef$current3, _triggerRef$current3$, _targetRef$current2;
-
     (_triggerRef$current3 = triggerRef.current) === null || _triggerRef$current3 === void 0 ? void 0 : (_triggerRef$current3$ = _triggerRef$current3.close) === null || _triggerRef$current3$ === void 0 ? void 0 : _triggerRef$current3$.call(_triggerRef$current3);
     setSearchKeyword('');
     setActive(false);
@@ -426,7 +393,6 @@ var TreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     /**
      * when using keyboard toggle picker, should refocus on PickerToggle Component after close picker menu
      */
-
     (_targetRef$current2 = targetRef.current) === null || _targetRef$current2 === void 0 ? void 0 : _targetRef$current2.focus();
   }, [activeNode, setSearchKeyword, valueKey]);
   usePublicMethods(ref, {
@@ -455,12 +421,10 @@ var TreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
         setFocusItemValue(nextFocusItemValue);
       }
     };
-
     if (key === KEY_VALUES.DOWN) {
       focusNextItem(focusProps);
       return;
     }
-
     if (key === KEY_VALUES.UP) {
       focusPreviousItem(focusProps);
     }
@@ -475,7 +439,6 @@ var TreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       childrenKey: childrenKey,
       onFocusItem: function onFocusItem() {
         var _focusItem$parent, _focusItem$parent2;
-
         setFocusItemValue(focusItem === null || focusItem === void 0 ? void 0 : (_focusItem$parent = focusItem.parent) === null || _focusItem$parent === void 0 ? void 0 : _focusItem$parent[valueKey]);
         focusTreeNode(focusItem === null || focusItem === void 0 ? void 0 : (_focusItem$parent2 = focusItem.parent) === null || _focusItem$parent2 === void 0 ? void 0 : _focusItem$parent2.refKey, treeNodesRefs, "." + treePrefix('node-label'));
       }
@@ -501,16 +464,14 @@ var TreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }, [flattenNodes, valueKey, focusItemValue, handleSelect]);
   var handleClean = useCallback(function (event) {
     var nullValue = null;
-    var target = event.target; // exclude searchBar
-
+    var target = event.target;
+    // exclude searchBar
     if (target.matches('div[role="searchbox"] > input') || disabled || !cleanable) {
       return;
     }
-
     if (!isControlled) {
       setValue(null);
     }
-
     onChange === null || onChange === void 0 ? void 0 : onChange(nullValue, event);
   }, [cleanable, disabled, onChange, setValue, isControlled]);
   var onPickerKeydown = useToggleKeyDownEvent(_extends({
@@ -541,7 +502,6 @@ var TreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     if (!treeViewRef.current) {
       return;
     }
-
     _onMenuKeyDown(event, {
       down: function down() {
         return handleFocusItem(KEY_VALUES.DOWN);
@@ -554,25 +514,20 @@ var TreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       enter: selectActiveItem
     });
   }, [handleFocusItem, handleLeftArrow, handleRightArrow, rtl, selectActiveItem]);
-
   var renderNode = function renderNode(node, index, layer) {
     if (!node.visible) {
       return null;
     }
-
     var children = node[childrenKey];
     var expand = getExpandWhenSearching(searchKeywordState, expandItemValues.includes(node[valueKey]));
     var visibleChildren = _isUndefined(searchKeywordState) || searchKeywordState.length === 0 ? !!children : hasVisibleChildren(node, childrenKey);
-
     var nodeProps = _extends({}, getTreeNodeProps(_extends({}, node, {
       expand: expand
     }), layer, index), {
       hasChildren: visibleChildren
     });
-
     if (nodeProps.hasChildren) {
       var _merge;
-
       layer += 1;
       var openClass = treePrefix('open');
       var childrenClass = merge(treePrefix('node-children'), (_merge = {}, _merge[openClass] = expand && visibleChildren, _merge));
@@ -593,7 +548,6 @@ var TreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
         style: getTreeNodeIndent(rtl, layer - 1, true)
       })));
     }
-
     return /*#__PURE__*/React.createElement(TreeNode, _extends({
       ref: function ref(_ref2) {
         return saveTreeNodeRef(_ref2, node.refKey);
@@ -601,37 +555,31 @@ var TreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       key: node[valueKey]
     }, nodeProps));
   };
-
   var renderVirtualListNode = function renderVirtualListNode(_ref3) {
     var index = _ref3.index,
-        style = _ref3.style,
-        data = _ref3.data;
+      style = _ref3.style,
+      data = _ref3.data;
     var node = data[index];
     var layer = node.layer,
-        visible = node.visible;
+      visible = node.visible;
     var expand = getExpandWhenSearching(searchKeywordState, expandItemValues.includes(node[valueKey]));
-
     if (!node.visible) {
       return null;
     }
-
     var nodeProps = _extends({}, getTreeNodeProps(_extends({}, node, {
       expand: expand
     }), layer), {
       style: style,
       hasChildren: node.hasChildren
     });
-
     return visible && /*#__PURE__*/React.createElement(TreeNode, _extends({
       ref: function ref(_ref4) {
         return saveTreeNodeRef(_ref4, node.refKey);
       }
     }, nodeProps));
   };
-
   var renderTree = function renderTree() {
     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({
@@ -663,18 +611,15 @@ var TreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       }, listProps), renderVirtualListNode);
     }) : formattedNodes));
   };
-
   var renderDropdownMenu = function renderDropdownMenu(positionProps, speakerRef) {
     var left = positionProps.left,
-        top = positionProps.top,
-        className = positionProps.className;
+      top = positionProps.top,
+      className = positionProps.className;
     var classes = merge(className, menuClassName, prefix('tree-menu'));
-
     var mergedMenuStyle = _extends({}, menuStyle, {
       left: left,
       top: top
     });
-
     return /*#__PURE__*/React.createElement(PickerOverlay, {
       autoWidth: menuAutoWidth,
       className: classes,
@@ -689,43 +634,35 @@ var TreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       inputRef: searchInputRef
     }) : null, renderMenu ? renderMenu(renderTree()) : renderTree(), renderExtraFooter === null || renderExtraFooter === void 0 ? void 0 : renderExtraFooter());
   };
+
   /**
    * 1.Have a value and the value is valid.
    * 2.Regardless of whether the value is valid, as long as renderValue is set, it is judged to have a value.
    */
-
-
   var hasValidValue = !_isNil(activeNode) || !_isNil(value) && _isFunction(renderValue);
-
   var selectedElement = placeholder;
-
   if (hasValidValue) {
     var node = activeNode !== null && activeNode !== void 0 ? activeNode : {};
     selectedElement = node[labelKey];
-
     if (_isFunction(renderValue) && value) {
       selectedElement = renderValue(value, node, selectedElement);
-
       if (_isNil(selectedElement)) {
         hasValidValue = false;
       }
     }
   }
-
   var _usePickerClassName = usePickerClassName(_extends({}, props, {
-    classPrefix: classPrefix,
-    appearance: appearance,
-    hasValue: hasValidValue,
-    name: 'tree',
-    cleanable: cleanable
-  })),
-      classes = _usePickerClassName[0],
-      usedClassNamePropKeys = _usePickerClassName[1];
-
+      classPrefix: classPrefix,
+      appearance: appearance,
+      hasValue: hasValidValue,
+      name: 'tree',
+      cleanable: cleanable
+    })),
+    classes = _usePickerClassName[0],
+    usedClassNamePropKeys = _usePickerClassName[1];
   if (inline) {
     return renderTree();
   }
-
   return /*#__PURE__*/React.createElement(PickerToggleTrigger, {
     pickerProps: _pick(props, pickTriggerPropKeys),
     ref: triggerRef,

package/esm/TreePicker/index.js

@@ -1,2 +1,3 @@
+'use client';
 import TreePicker from './TreePicker';
 export default TreePicker;