rsuite 5.39.0 → 5.41.0

package/esm/CheckTreePicker/CheckTreePicker.js

@@ -1,3 +1,4 @@
+'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _isUndefined from "lodash/isUndefined";
@@ -18,191 +19,173 @@ import { PickerToggle, onMenuKeyDown as _onMenuKeyDown, PickerOverlay, SearchBar
 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 = [];
-
 var itemSize = function itemSize() {
   return 36;
 };
-
 var CheckTreePicker = /*#__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,
-      style = props.style,
-      _props$appearance = props.appearance,
-      appearance = _props$appearance === void 0 ? 'default' : _props$appearance,
-      _props$cleanable = props.cleanable,
-      cleanable = _props$cleanable === void 0 ? true : _props$cleanable,
-      _props$countable = props.countable,
-      countable = _props$countable === void 0 ? true : _props$countable,
-      searchBy = props.searchBy,
-      toggleAs = props.toggleAs,
-      searchKeyword = props.searchKeyword,
-      showIndentLine = props.showIndentLine,
-      overrideLocale = props.locale,
-      _props$cascade = props.cascade,
-      cascade = _props$cascade === void 0 ? true : _props$cascade,
-      disabled = props.disabled,
-      _props$valueKey = props.valueKey,
-      valueKey = _props$valueKey === void 0 ? 'value' : _props$valueKey,
-      _props$labelKey = props.labelKey,
-      labelKey = _props$labelKey === void 0 ? 'label' : _props$labelKey,
-      _props$placement = props.placement,
-      placement = _props$placement === void 0 ? 'bottomStart' : _props$placement,
-      _props$childrenKey = props.childrenKey,
-      childrenKey = _props$childrenKey === void 0 ? 'children' : _props$childrenKey,
-      placeholder = props.placeholder,
-      controlledValue = props.value,
-      _props$defaultValue = props.defaultValue,
-      defaultValue = _props$defaultValue === void 0 ? emptyArray : _props$defaultValue,
-      _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,
-      _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,
-      _props$searchable = props.searchable,
-      searchable = _props$searchable === void 0 ? true : _props$searchable,
-      _props$virtualized = props.virtualized,
-      virtualized = _props$virtualized === void 0 ? false : _props$virtualized,
-      className = props.className,
-      _props$classPrefix = props.classPrefix,
-      classPrefix = _props$classPrefix === void 0 ? 'picker' : _props$classPrefix,
-      menuClassName = props.menuClassName,
-      _props$menuAutoWidth = props.menuAutoWidth,
-      menuAutoWidth = _props$menuAutoWidth === void 0 ? true : _props$menuAutoWidth,
-      _props$uncheckableIte = props.uncheckableItemValues,
-      uncheckableItemValues = _props$uncheckableIte === void 0 ? emptyArray : _props$uncheckableIte,
-      id = props.id,
-      listProps = props.listProps,
-      renderMenu = props.renderMenu,
-      getChildren = props.getChildren,
-      renderExtraFooter = props.renderExtraFooter,
-      onEntered = props.onEntered,
-      onChange = props.onChange,
-      onClean = props.onClean,
-      onClose = props.onClose,
-      onExited = props.onExited,
-      onSearch = props.onSearch,
-      onSelect = props.onSelect,
-      onSelectItem = props.onSelectItem,
-      onOpen = props.onOpen,
-      onScroll = props.onScroll,
-      onExpand = props.onExpand,
-      renderValue = props.renderValue,
-      renderTreeIcon = props.renderTreeIcon,
-      renderTreeNode = props.renderTreeNode,
-      rest = _objectWithoutPropertiesLoose(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"]);
-
+    Component = _props$as === void 0 ? 'div' : _props$as,
+    _props$data = props.data,
+    data = _props$data === void 0 ? emptyArray : _props$data,
+    style = props.style,
+    _props$appearance = props.appearance,
+    appearance = _props$appearance === void 0 ? 'default' : _props$appearance,
+    _props$cleanable = props.cleanable,
+    cleanable = _props$cleanable === void 0 ? true : _props$cleanable,
+    _props$countable = props.countable,
+    countable = _props$countable === void 0 ? true : _props$countable,
+    searchBy = props.searchBy,
+    toggleAs = props.toggleAs,
+    searchKeyword = props.searchKeyword,
+    showIndentLine = props.showIndentLine,
+    overrideLocale = props.locale,
+    _props$cascade = props.cascade,
+    cascade = _props$cascade === void 0 ? true : _props$cascade,
+    disabled = props.disabled,
+    _props$valueKey = props.valueKey,
+    valueKey = _props$valueKey === void 0 ? 'value' : _props$valueKey,
+    _props$labelKey = props.labelKey,
+    labelKey = _props$labelKey === void 0 ? 'label' : _props$labelKey,
+    _props$placement = props.placement,
+    placement = _props$placement === void 0 ? 'bottomStart' : _props$placement,
+    _props$childrenKey = props.childrenKey,
+    childrenKey = _props$childrenKey === void 0 ? 'children' : _props$childrenKey,
+    placeholder = props.placeholder,
+    controlledValue = props.value,
+    _props$defaultValue = props.defaultValue,
+    defaultValue = _props$defaultValue === void 0 ? emptyArray : _props$defaultValue,
+    _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,
+    _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,
+    _props$searchable = props.searchable,
+    searchable = _props$searchable === void 0 ? true : _props$searchable,
+    _props$virtualized = props.virtualized,
+    virtualized = _props$virtualized === void 0 ? false : _props$virtualized,
+    className = props.className,
+    _props$classPrefix = props.classPrefix,
+    classPrefix = _props$classPrefix === void 0 ? 'picker' : _props$classPrefix,
+    menuClassName = props.menuClassName,
+    _props$menuAutoWidth = props.menuAutoWidth,
+    menuAutoWidth = _props$menuAutoWidth === void 0 ? true : _props$menuAutoWidth,
+    _props$uncheckableIte = props.uncheckableItemValues,
+    uncheckableItemValues = _props$uncheckableIte === void 0 ? emptyArray : _props$uncheckableIte,
+    id = props.id,
+    listProps = props.listProps,
+    renderMenu = props.renderMenu,
+    getChildren = props.getChildren,
+    renderExtraFooter = props.renderExtraFooter,
+    onEntered = props.onEntered,
+    onChange = props.onChange,
+    onClean = props.onClean,
+    onClose = props.onClose,
+    onExited = props.onExited,
+    onSearch = props.onSearch,
+    onSelect = props.onSelect,
+    onSelectItem = props.onSelectItem,
+    onOpen = props.onOpen,
+    onScroll = props.onScroll,
+    onExpand = props.onExpand,
+    renderValue = props.renderValue,
+    renderTreeIcon = props.renderTreeIcon,
+    renderTreeNode = props.renderTreeNode,
+    rest = _objectWithoutPropertiesLoose(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 = useContext(TreeContext),
-      inline = _useContext.inline;
-
+    inline = _useContext.inline;
   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 _useState = useState(false),
-      active = _useState[0],
-      setActive = _useState[1];
-
+    active = _useState[0],
+    setActive = _useState[1];
   var _useState2 = useState(null),
-      activeNode = _useState2[0],
-      setActiveNode = _useState2[1];
-
+    activeNode = _useState2[0],
+    setActiveNode = _useState2[1];
   var _useClassNames = useClassNames(classPrefix),
-      prefix = _useClassNames.prefix,
-      merge = _useClassNames.merge;
-
+    prefix = _useClassNames.prefix,
+    merge = _useClassNames.merge;
   var _useClassNames2 = useClassNames('check-tree'),
-      checkTreePrefix = _useClassNames2.prefix,
-      withCheckTreeClassPrefix = _useClassNames2.withClassPrefix;
-
+    checkTreePrefix = _useClassNames2.prefix,
+    withCheckTreeClassPrefix = _useClassNames2.withClassPrefix;
   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 _useState3 = useState(null),
-      focusItemValue = _useState3[0],
-      setFocusItemValue = _useState3[1];
-
+    focusItemValue = _useState3[0],
+    setFocusItemValue = _useState3[1];
   var _useFlattenTreeData = useFlattenTreeData({
-    data: treeData,
-    labelKey: labelKey,
-    valueKey: valueKey,
-    childrenKey: childrenKey,
-    uncheckableItemValues: uncheckableItemValues,
-    callback: function callback(nodes) {
-      // after flattenData, always unSerialize check property value
-      unSerializeList({
-        nodes: nodes,
-        key: 'check',
-        value: value,
-        cascade: cascade,
-        uncheckableItemValues: uncheckableItemValues
-      });
-      forceUpdate();
-    }
-  }),
-      flattenNodes = _useFlattenTreeData.flattenNodes,
-      forceUpdate = _useFlattenTreeData.forceUpdate,
-      formatVirtualizedTreeData = _useFlattenTreeData.formatVirtualizedTreeData,
-      serializeListOnlyParent = _useFlattenTreeData.serializeListOnlyParent,
-      unSerializeList = _useFlattenTreeData.unSerializeList;
-
+      data: treeData,
+      labelKey: labelKey,
+      valueKey: valueKey,
+      childrenKey: childrenKey,
+      uncheckableItemValues: uncheckableItemValues,
+      callback: function callback(nodes) {
+        // after flattenData, always unSerialize check property value
+        unSerializeList({
+          nodes: nodes,
+          key: 'check',
+          value: value,
+          cascade: cascade,
+          uncheckableItemValues: uncheckableItemValues
+        });
+        forceUpdate();
+      }
+    }),
+    flattenNodes = _useFlattenTreeData.flattenNodes,
+    forceUpdate = _useFlattenTreeData.forceUpdate,
+    formatVirtualizedTreeData = _useFlattenTreeData.formatVirtualizedTreeData,
+    serializeListOnlyParent = _useFlattenTreeData.serializeListOnlyParent,
+    unSerializeList = _useFlattenTreeData.unSerializeList;
   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 _useTreeNodeRefs = useTreeNodeRefs(),
-      treeNodesRefs = _useTreeNodeRefs.treeNodesRefs,
-      saveTreeNodeRef = _useTreeNodeRefs.saveTreeNodeRef;
+    treeNodesRefs = _useTreeNodeRefs.treeNodesRefs,
+    saveTreeNodeRef = _useTreeNodeRefs.saveTreeNodeRef;
   /**
    * get formatted nodes for render tree
    * @params render - renderNode function. only used when virtualized setting false
    */
-
-
   var getFormattedNodes = useCallback(function (render) {
     if (virtualized) {
       return formatVirtualizedTreeData(flattenNodes, filteredData, expandItemValues, {
@@ -212,15 +195,13 @@ var CheckTreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
         return item.visible;
       });
     }
-
-    return getFormattedTree(filteredData, flattenNodes, {
+    return getFormattedTree(flattenNodes, filteredData, {
       childrenKey: childrenKey,
       cascade: cascade
     }).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,
@@ -251,7 +232,6 @@ var CheckTreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       onRenderTreeIcon: renderTreeIcon
     };
   };
-
   var focusActiveNode = useCallback(function () {
     if (listRef.current) {
       focusToActiveTreeNode({
@@ -296,7 +276,6 @@ var CheckTreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }, [cascade, value, uncheckableItemValues, unSerializeList, flattenNodes, forceUpdate]);
   var toggleUpChecked = useCallback(function (nodes, node, checked) {
     var currentNode = node.refKey ? nodes[node.refKey] : null;
-
     if (cascade && currentNode) {
       if (!checked) {
         currentNode.check = checked;
@@ -310,7 +289,6 @@ var CheckTreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
           currentNode.checkAll = false;
         }
       }
-
       if (currentNode.parent) {
         toggleUpChecked(nodes, currentNode.parent, checked);
       }
@@ -318,13 +296,10 @@ var CheckTreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }, [cascade]);
   var toggleDownChecked = useCallback(function (nodes, node, isChecked) {
     var currentNode = node.refKey ? nodes[node.refKey] : null;
-
     if (!currentNode) {
       return;
     }
-
     currentNode.check = isChecked;
-
     if (!currentNode[childrenKey] || !currentNode[childrenKey].length || !cascade) {
       currentNode.checkAll = false;
     } else {
@@ -336,17 +311,17 @@ var CheckTreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }, [cascade, childrenKey]);
   var toggleChecked = useCallback(function (node, isChecked) {
     var nodes = _cloneDeep(flattenNodes);
-
     toggleDownChecked(nodes, node, isChecked);
     node.parent && toggleUpChecked(nodes, node.parent, isChecked);
-    var values = serializeListOnlyParent(nodes, 'check'); // filter uncheckableItemValues
-
+    var values = serializeListOnlyParent(nodes, 'check');
+    // filter uncheckableItemValues
     return values.filter(function (v) {
       return !uncheckableItemValues.includes(v);
     });
-  }, [flattenNodes, uncheckableItemValues, serializeListOnlyParent, toggleDownChecked, toggleUpChecked]); // TODO-Doma
-  // Replace `getKeyParentMap` with `getParentMap`
+  }, [flattenNodes, uncheckableItemValues, serializeListOnlyParent, toggleDownChecked, toggleUpChecked]);
 
+  // TODO-Doma
+  // Replace `getKeyParentMap` with `getParentMap`
   var itemParentMap = useMemo(function () {
     return getKeyParentMap(data, function (node) {
       return node[valueKey];
@@ -356,13 +331,10 @@ var CheckTreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }, [childrenKey, data, valueKey]);
   var handleSelect = useCallback(function (node, event) {
     var currentNode = node.refKey ? flattenNodes[node.refKey] : null;
-
     if (!node || !currentNode) {
       return;
     }
-
     var selectedValues = toggleChecked(node, !currentNode.check);
-
     if (!isControlled) {
       unSerializeList({
         nodes: flattenNodes,
@@ -373,7 +345,6 @@ var CheckTreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       });
       setValue(selectedValues);
     }
-
     setActiveNode(node);
     setFocusItemValue(node[valueKey]);
     onChange === null || onChange === void 0 ? void 0 : onChange(selectedValues, event);
@@ -384,7 +355,6 @@ var CheckTreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }, [flattenNodes, toggleChecked, isControlled, valueKey, onChange, onSelect, onSelectItem, unSerializeList, cascade, uncheckableItemValues, setValue, itemParentMap]);
   var handleOpen = 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);
     setFocusItemValue(activeNode === null || activeNode === void 0 ? void 0 : activeNode[valueKey]);
     focusActiveNode();
@@ -393,16 +363,15 @@ var CheckTreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }, [activeNode, focusActiveNode, onOpen, valueKey]);
   var handleClose = 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);
     setSearchKeyword('');
     onClose === null || onClose === void 0 ? void 0 : onClose();
     setFocusItemValue(null);
     setActive(false);
+
     /**
      * 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 = useCallback(function (node) {
@@ -417,7 +386,6 @@ var CheckTreePicker = /*#__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);
     }
@@ -431,15 +399,13 @@ var CheckTreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     inline: inline
   });
   var handleClean = useCallback(function (event) {
-    var target = event.target; // exclude searchBar
-
+    var target = event.target;
+    // exclude searchBar
     if (target.matches('div[role="searchbox"] > input') || disabled || !cleanable) {
       return;
     }
-
     setActiveNode(null);
     setFocusItemValue(null);
-
     if (!isControlled) {
       setValue([]);
       unSerializeList({
@@ -450,7 +416,6 @@ var CheckTreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
         uncheckableItemValues: uncheckableItemValues
       });
     }
-
     onChange === null || onChange === void 0 ? void 0 : onChange([], event);
   }, [cascade, cleanable, disabled, flattenNodes, onChange, setValue, unSerializeList, uncheckableItemValues, isControlled]);
   var handleFocusItem = useCallback(function (key) {
@@ -471,12 +436,10 @@ var CheckTreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
         setFocusItemValue(nextFocusItemValue);
       }
     };
-
     if (key === KEY_VALUES.DOWN) {
       focusNextItem(focusProps);
       return;
     }
-
     if (key === KEY_VALUES.UP) {
       focusPreviousItem(focusProps);
     }
@@ -491,7 +454,6 @@ var CheckTreePicker = /*#__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, "." + checkTreePrefix('node-label'));
       }
@@ -513,7 +475,6 @@ var CheckTreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var selectActiveItem = useCallback(function (event) {
     if (_isNil(focusItemValue)) return;
     var activeItem = getActiveItem(focusItemValue, flattenNodes, valueKey);
-
     if (!isNodeUncheckable(activeItem, {
       uncheckableItemValues: uncheckableItemValues,
       valueKey: valueKey
@@ -549,7 +510,6 @@ var CheckTreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     if (!treeViewRef.current) {
       return;
     }
-
     _onMenuKeyDown(event, {
       down: function down() {
         return handleFocusItem(KEY_VALUES.DOWN);
@@ -562,20 +522,15 @@ var CheckTreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       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
-
+      refKey = node.refKey; // when searching, all nodes should be expand
     var expand = getExpandWhenSearching(searchKeywordState, expandItemValues.includes(node[valueKey]));
-
     if (!visible) {
       return null;
     }
-
     var children = node[childrenKey];
     var visibleChildren = _isUndefined(searchKeywordState) || searchKeywordState.length === 0 ? !!children : hasVisibleChildren(node, childrenKey);
-
     var nodeProps = _extends({}, getTreeNodeProps(_extends({}, node, {
       /**
        * spread operator don't copy unenumerable properties
@@ -586,10 +541,8 @@ var CheckTreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     }), layer), {
       hasChildren: visibleChildren
     });
-
     if (nodeProps.hasChildren) {
       var _merge;
-
       layer += 1;
       var openClass = checkTreePrefix('open');
       var childrenClass = merge(checkTreePrefix('node-children'), (_merge = {}, _merge[openClass] = expand && visibleChildren, _merge));
@@ -610,7 +563,6 @@ var CheckTreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
         style: getTreeNodeIndent(rtl, layer - 1, true)
       })));
     }
-
     return /*#__PURE__*/React.createElement(CheckTreeNode, _extends({
       key: node[valueKey],
       ref: function ref(_ref2) {
@@ -618,17 +570,15 @@ var CheckTreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       }
     }, 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,
-        refKey = node.refKey,
-        visible = node.visible;
+      refKey = node.refKey,
+      visible = node.visible;
     var expand = getExpandWhenSearching(searchKeywordState, expandItemValues.includes(node[valueKey]));
-
     var nodeProps = _extends({}, getTreeNodeProps(_extends({}, node, {
       /**
        * spread operator don't copy unenumerable properties
@@ -639,7 +589,6 @@ var CheckTreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     }), layer), {
       hasChildren: node.hasChildren
     });
-
     return visible && /*#__PURE__*/React.createElement(CheckTreeNode, _extends({
       style: style,
       ref: function ref(_ref4) {
@@ -647,13 +596,10 @@ var CheckTreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       }
     }, nodeProps));
   };
-
   var renderCheckTree = function renderCheckTree() {
     var _withCheckTreeClassPr, _merge2;
-
     var classes = withCheckTreeClassPrefix((_withCheckTreeClassPr = {}, _withCheckTreeClassPr[className !== null && className !== void 0 ? className : ''] = inline, _withCheckTreeClassPr['without-children'] = !isSomeNodeHasChildren(data, childrenKey), _withCheckTreeClassPr.virtualized = virtualized, _withCheckTreeClassPr));
     var formattedNodes = getFormattedNodes(renderNode);
-
     if (!formattedNodes.some(function (v) {
       return v !== null;
     })) {
@@ -661,7 +607,6 @@ 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
@@ -694,18 +639,15 @@ var CheckTreePicker = /*#__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 = classNames(className, menuClassName, prefix('check-tree-menu'));
-
     var mergedMenuStyle = _extends({}, menuStyle, {
       left: left,
       top: top
     });
-
     return /*#__PURE__*/React.createElement(PickerOverlay, {
       autoWidth: menuAutoWidth,
       className: classes,
@@ -720,7 +662,6 @@ var CheckTreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       inputRef: searchInputRef
     }) : null, renderMenu ? renderMenu(renderCheckTree()) : renderCheckTree(), renderExtraFooter === null || renderExtraFooter === void 0 ? void 0 : renderExtraFooter());
   };
-
   var selectedItems = useMemo(function () {
     return getSelectedItems(flattenNodes, value);
   }, [flattenNodes, value]);
@@ -728,11 +669,8 @@ var CheckTreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
    * 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 = selectedItems.length > 0 || value.length > 0 && _isFunction(renderValue);
-
   var selectedElement = placeholder;
-
   if (hasValidValue) {
     selectedElement = /*#__PURE__*/React.createElement(SelectedElement, {
       selectedItems: selectedItems,
@@ -744,32 +682,27 @@ var CheckTreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       cascade: cascade,
       locale: locale
     });
-
     if (_isFunction(renderValue)) {
       selectedElement = renderValue(value, selectedItems, selectedElement);
-
       if (_isNil(selectedElement)) {
         hasValidValue = false;
       }
     }
   }
-
   var _usePickerClassName = usePickerClassName(_extends({}, props, {
-    classPrefix: classPrefix,
-    appearance: appearance,
-    countable: countable,
-    cleanable: cleanable,
-    disabled: disabled,
-    hasValue: hasValidValue,
-    name: 'check-tree'
-  })),
-      classes = _usePickerClassName[0],
-      usedClassNamePropKeys = _usePickerClassName[1];
-
+      classPrefix: classPrefix,
+      appearance: appearance,
+      countable: countable,
+      cleanable: cleanable,
+      disabled: disabled,
+      hasValue: hasValidValue,
+      name: 'check-tree'
+    })),
+    classes = _usePickerClassName[0],
+    usedClassNamePropKeys = _usePickerClassName[1];
   if (inline) {
     return renderCheckTree();
   }
-
   return /*#__PURE__*/React.createElement(PickerToggleTrigger, {
     pickerProps: _pick(props, pickTriggerPropKeys),
     ref: triggerRef,