rsuite 5.76.2 → 6.0.0-canary-20250103

package/esm/Tree/utils/indentTreeNode.js

@@ -1,14 +1,16 @@
 'use client';
 export function indentTreeNode(rtl, layer, absolute) {
-  var _ref2;
   if (absolute === void 0) {
     absolute = false;
   }
   // layer start from 1
-  var offset = layer * 26;
+  const offset = layer * 26;
   if (absolute) {
-    var _ref;
-    return _ref = {}, _ref[rtl ? 'right' : 'left'] = offset, _ref;
+    return {
+      [rtl ? 'right' : 'left']: offset
+    };
   }
-  return _ref2 = {}, _ref2[rtl ? 'paddingRight' : 'paddingLeft'] = offset, _ref2;
+  return {
+    [rtl ? 'paddingRight' : 'paddingLeft']: offset
+  };
 }

package/esm/Tree/utils/treeKeyboardInteractions.js

@@ -6,10 +6,12 @@ import isEmpty from 'lodash/isEmpty';
  * it moves the focus to the parent item.
  */
 export function handleLeftArrow(props) {
-  var focusItem = props.focusItem,
-    expand = props.expand,
-    onExpand = props.onExpand,
-    onFocusItem = props.onFocusItem;
+  const {
+    focusItem,
+    expand,
+    onExpand,
+    onFocusItem
+  } = props;
   if (isEmpty(focusItem)) {
     return;
   }
@@ -27,11 +29,13 @@ export function handleLeftArrow(props) {
  * If the focused item does not have children, it does nothing.
  */
 export function handleRightArrow(props) {
-  var focusItem = props.focusItem,
-    expand = props.expand,
-    childrenKey = props.childrenKey,
-    onExpand = props.onExpand,
-    onFocusItem = props.onFocusItem;
+  const {
+    focusItem,
+    expand,
+    childrenKey,
+    onExpand,
+    onFocusItem
+  } = props;
   if (isEmpty(focusItem) || !Array.isArray(focusItem[childrenKey])) {
     return;
   }

package/esm/TreePicker/TreePicker.js

@@ -1,7 +1,5 @@
 'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-var _excluded = ["as", "appearance", "classPrefix", "cleanable", "childrenKey", "data", "disabled", "defaultValue", "defaultExpandAll", "disabledItemValues", "defaultExpandItemValues", "expandItemValues", "id", "locale", "labelKey", "placeholder", "placement", "style", "searchKeyword", "searchable", "showIndentLine", "menuClassName", "menuStyle", "popupClassName", "popupStyle", "popupAutoWidth", "treeHeight", "menuAutoWidth", "valueKey", "virtualized", "value", "listProps", "toggleAs", "searchBy", "getChildren", "onClean", "onSearch", "onSelect", "onSelectItem", "onChange", "onExpand", "onEnter", "onExit", "onEntered", "renderValue", "renderMenu", "renderTree", "renderTreeIcon", "renderTreeNode", "renderExtraFooter"];
 import React, { useMemo } from 'react';
 import pick from 'lodash/pick';
 import omit from 'lodash/omit';
@@ -23,138 +21,130 @@ import { useCustom } from "../CustomProvider/index.js";
  *
  * @see https://rsuitejs.com/components/tree-picker/
  */
-var TreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var _useCustom = useCustom('TreePicker', props),
-    propsWithDefaults = _useCustom.propsWithDefaults;
-  var _propsWithDefaults$as = propsWithDefaults.as,
-    Component = _propsWithDefaults$as === void 0 ? 'div' : _propsWithDefaults$as,
-    _propsWithDefaults$ap = propsWithDefaults.appearance,
-    appearance = _propsWithDefaults$ap === void 0 ? 'default' : _propsWithDefaults$ap,
-    _propsWithDefaults$cl = propsWithDefaults.classPrefix,
-    classPrefix = _propsWithDefaults$cl === void 0 ? 'picker' : _propsWithDefaults$cl,
-    _propsWithDefaults$cl2 = propsWithDefaults.cleanable,
-    cleanable = _propsWithDefaults$cl2 === void 0 ? true : _propsWithDefaults$cl2,
-    _propsWithDefaults$ch = propsWithDefaults.childrenKey,
-    childrenKey = _propsWithDefaults$ch === void 0 ? 'children' : _propsWithDefaults$ch,
-    _propsWithDefaults$da = propsWithDefaults.data,
-    data = _propsWithDefaults$da === void 0 ? [] : _propsWithDefaults$da,
-    disabled = propsWithDefaults.disabled,
-    defaultValue = propsWithDefaults.defaultValue,
-    _propsWithDefaults$de = propsWithDefaults.defaultExpandAll,
-    defaultExpandAll = _propsWithDefaults$de === void 0 ? false : _propsWithDefaults$de,
-    _propsWithDefaults$di = propsWithDefaults.disabledItemValues,
-    disabledItemValues = _propsWithDefaults$di === void 0 ? [] : _propsWithDefaults$di,
-    _propsWithDefaults$de2 = propsWithDefaults.defaultExpandItemValues,
-    defaultExpandItemValues = _propsWithDefaults$de2 === void 0 ? [] : _propsWithDefaults$de2,
-    controlledExpandItemValues = propsWithDefaults.expandItemValues,
-    id = propsWithDefaults.id,
-    locale = propsWithDefaults.locale,
-    _propsWithDefaults$la = propsWithDefaults.labelKey,
-    labelKey = _propsWithDefaults$la === void 0 ? 'label' : _propsWithDefaults$la,
-    placeholder = propsWithDefaults.placeholder,
-    _propsWithDefaults$pl = propsWithDefaults.placement,
-    placement = _propsWithDefaults$pl === void 0 ? 'bottomStart' : _propsWithDefaults$pl,
-    style = propsWithDefaults.style,
-    searchKeyword = propsWithDefaults.searchKeyword,
-    _propsWithDefaults$se = propsWithDefaults.searchable,
-    searchable = _propsWithDefaults$se === void 0 ? true : _propsWithDefaults$se,
-    showIndentLine = propsWithDefaults.showIndentLine,
-    DEPRECATED_menuClassName = propsWithDefaults.menuClassName,
-    DEPRECATED_menuStyle = propsWithDefaults.menuStyle,
-    popupClassName = propsWithDefaults.popupClassName,
-    popupStyle = propsWithDefaults.popupStyle,
-    _propsWithDefaults$po = propsWithDefaults.popupAutoWidth,
-    popupAutoWidth = _propsWithDefaults$po === void 0 ? true : _propsWithDefaults$po,
-    _propsWithDefaults$tr = propsWithDefaults.treeHeight,
-    treeHeight = _propsWithDefaults$tr === void 0 ? 320 : _propsWithDefaults$tr,
-    _propsWithDefaults$me = propsWithDefaults.menuAutoWidth,
-    menuAutoWidth = _propsWithDefaults$me === void 0 ? popupAutoWidth : _propsWithDefaults$me,
-    _propsWithDefaults$va = propsWithDefaults.valueKey,
-    valueKey = _propsWithDefaults$va === void 0 ? 'value' : _propsWithDefaults$va,
-    _propsWithDefaults$vi = propsWithDefaults.virtualized,
-    virtualized = _propsWithDefaults$vi === void 0 ? false : _propsWithDefaults$vi,
-    controlledValue = propsWithDefaults.value,
-    listProps = propsWithDefaults.listProps,
-    toggleAs = propsWithDefaults.toggleAs,
-    searchBy = propsWithDefaults.searchBy,
-    getChildren = propsWithDefaults.getChildren,
-    onClean = propsWithDefaults.onClean,
-    onSearch = propsWithDefaults.onSearch,
-    onSelect = propsWithDefaults.onSelect,
-    onSelectItem = propsWithDefaults.onSelectItem,
-    onChange = propsWithDefaults.onChange,
-    onExpand = propsWithDefaults.onExpand,
-    onEnter = propsWithDefaults.onEnter,
-    onExit = propsWithDefaults.onExit,
-    onEntered = propsWithDefaults.onEntered,
-    renderValue = propsWithDefaults.renderValue,
-    DEPRECATED_renderMenu = propsWithDefaults.renderMenu,
-    _propsWithDefaults$re = propsWithDefaults.renderTree,
-    renderTree = _propsWithDefaults$re === void 0 ? DEPRECATED_renderMenu : _propsWithDefaults$re,
-    renderTreeIcon = propsWithDefaults.renderTreeIcon,
-    renderTreeNode = propsWithDefaults.renderTreeNode,
-    renderExtraFooter = propsWithDefaults.renderExtraFooter,
-    rest = _objectWithoutPropertiesLoose(propsWithDefaults, _excluded);
-  var _usePickerRef = usePickerRef(ref),
-    trigger = _usePickerRef.trigger,
-    root = _usePickerRef.root,
-    target = _usePickerRef.target,
-    overlay = _usePickerRef.overlay,
-    list = _usePickerRef.list,
-    searchInput = _usePickerRef.searchInput,
-    treeView = _usePickerRef.treeView;
-  var _useControlled = useControlled(controlledValue, defaultValue),
-    value = _useControlled[0],
-    setValue = _useControlled[1];
-  var itemDataKeys = {
-    childrenKey: childrenKey,
-    labelKey: labelKey,
-    valueKey: valueKey
+const TreePicker = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const {
+    propsWithDefaults
+  } = useCustom('TreePicker', props);
+  const {
+    as: Component = 'div',
+    appearance = 'default',
+    classPrefix = 'picker',
+    cleanable = true,
+    childrenKey = 'children',
+    data = [],
+    disabled,
+    defaultValue,
+    defaultExpandAll = false,
+    disabledItemValues = [],
+    defaultExpandItemValues = [],
+    expandItemValues: controlledExpandItemValues,
+    id,
+    locale,
+    labelKey = 'label',
+    placeholder,
+    placement = 'bottomStart',
+    style,
+    searchKeyword,
+    searchable = true,
+    showIndentLine,
+    menuClassName: DEPRECATED_menuClassName,
+    menuStyle: DEPRECATED_menuStyle,
+    popupClassName,
+    popupStyle,
+    popupAutoWidth = true,
+    treeHeight = 320,
+    menuAutoWidth = popupAutoWidth,
+    valueKey = 'value',
+    virtualized = false,
+    value: controlledValue,
+    listProps,
+    toggleAs,
+    searchBy,
+    getChildren,
+    onClean,
+    onSearch,
+    onSelect,
+    onSelectItem,
+    onChange,
+    onExpand,
+    onEnter,
+    onExit,
+    onEntered,
+    renderValue,
+    renderMenu: DEPRECATED_renderMenu,
+    renderTree = DEPRECATED_renderMenu,
+    renderTreeIcon,
+    renderTreeNode,
+    renderExtraFooter,
+    ...rest
+  } = propsWithDefaults;
+  const {
+    trigger,
+    root,
+    target,
+    overlay,
+    list,
+    searchInput,
+    treeView
+  } = usePickerRef(ref);
+  const [value, setValue] = useControlled(controlledValue, defaultValue);
+  const itemDataKeys = {
+    childrenKey,
+    labelKey,
+    valueKey
   };
-  var _useTreeWithChildren = useTreeWithChildren(data, itemDataKeys),
-    treeData = _useTreeWithChildren.treeData,
-    loadingNodeValues = _useTreeWithChildren.loadingNodeValues,
-    appendChild = _useTreeWithChildren.appendChild;
-  var flattenedNodes = useFlattenTree(treeData, _extends({}, itemDataKeys));
-  var _useExpandTree = useExpandTree(data, _extends({}, itemDataKeys, {
-      defaultExpandAll: defaultExpandAll,
-      defaultExpandItemValues: defaultExpandItemValues,
-      controlledExpandItemValues: controlledExpandItemValues,
-      onExpand: onExpand,
-      getChildren: getChildren,
-      appendChild: appendChild
-    })),
-    expandItemValues = _useExpandTree.expandItemValues,
-    handleExpandTreeNode = _useExpandTree.handleExpandTreeNode;
-  var _useClassNames = useClassNames(classPrefix),
-    prefix = _useClassNames.prefix,
-    merge = _useClassNames.merge;
-  var activeNode = getTreeActiveNode(flattenedNodes, value, valueKey);
-  var _useTreeImperativeHan = useTreeImperativeHandle(),
-    register = _useTreeImperativeHan.register,
-    focusFirstNode = _useTreeImperativeHan.focusFirstNode,
-    focusActiveNode = _useTreeImperativeHan.focusActiveNode;
-  var _useFocusState = useFocusState({
-      focusActiveNode: focusActiveNode,
-      target: target,
-      value: value,
-      onEnter: onEnter,
-      onExit: onExit,
-      onEntered: onEntered
-    }),
-    active = _useFocusState.active,
-    focusItemValue = _useFocusState.focusItemValue,
-    setFocusItemValue = _useFocusState.setFocusItemValue,
-    triggerProps = _useFocusState.triggerProps;
-  var handleSelect = useEventCallback(function (treeNode, value, event) {
+  const {
+    treeData,
+    loadingNodeValues,
+    appendChild
+  } = useTreeWithChildren(data, itemDataKeys);
+  const flattenedNodes = useFlattenTree(treeData, {
+    ...itemDataKeys
+  });
+  const {
+    expandItemValues,
+    handleExpandTreeNode
+  } = useExpandTree(data, {
+    ...itemDataKeys,
+    defaultExpandAll,
+    defaultExpandItemValues,
+    controlledExpandItemValues,
+    onExpand,
+    getChildren,
+    appendChild
+  });
+  const {
+    prefix,
+    merge
+  } = useClassNames(classPrefix);
+  const activeNode = getTreeActiveNode(flattenedNodes, value, valueKey);
+  const {
+    register,
+    focusFirstNode,
+    focusActiveNode
+  } = useTreeImperativeHandle();
+  const {
+    active,
+    focusItemValue,
+    setFocusItemValue,
+    triggerProps
+  } = useFocusState({
+    focusActiveNode,
+    target,
+    value,
+    onEnter,
+    onExit,
+    onEntered
+  });
+  const handleSelect = useEventCallback((treeNode, value, event) => {
     var _target$current, _trigger$current, _trigger$current$clos;
     setFocusItemValue(value);
     onSelect === null || onSelect === void 0 || onSelect(treeNode, value, event);
     (_target$current = target.current) === null || _target$current === void 0 || _target$current.focus();
     (_trigger$current = trigger.current) === null || _trigger$current === void 0 || (_trigger$current$clos = _trigger$current.close) === null || _trigger$current$clos === void 0 || _trigger$current$clos.call(_trigger$current);
   });
-  var handleClean = useEventCallback(function (event) {
-    var target = event.target;
+  const handleClean = useEventCallback(event => {
+    const target = event.target;
     // exclude searchbox
     if (target.matches('input[role="searchbox"]') || disabled || !cleanable) {
       return;
@@ -162,50 +152,47 @@ var TreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     setValue(null);
     onChange === null || onChange === void 0 || onChange(null, event);
   });
-  var handleTreePressEnter = useEventCallback(function (event) {
+  const handleTreePressEnter = useEventCallback(event => {
     if (isNil(focusItemValue)) {
       return;
     }
-    var activeItem = getActiveItem(focusItemValue, flattenedNodes, valueKey);
+    const activeItem = getActiveItem(focusItemValue, flattenedNodes, valueKey);
     handleSelect(activeItem, event);
   });
-  var handleTreeKeyDown = useEventCallback(function (event) {
+  const handleTreeKeyDown = useEventCallback(event => {
     onMenuKeyDown(event, {
       del: handleClean,
-      down: function down() {
-        return focusFirstNode();
-      },
+      down: () => focusFirstNode(),
       enter: handleTreePressEnter
     });
   });
-  var onPickerKeydown = useToggleKeyDownEvent(_extends({
+  const onPickerKeydown = useToggleKeyDownEvent({
     toggle: !activeNode || !active,
-    trigger: trigger,
-    target: target,
-    overlay: overlay,
-    searchInput: searchInput,
-    active: active,
+    trigger,
+    target,
+    overlay,
+    searchInput,
+    active,
     onExit: handleClean,
-    onMenuKeyDown: handleTreeKeyDown
-  }, rest));
-  var handleChange = useEventCallback(function (nextValue, event) {
+    onMenuKeyDown: handleTreeKeyDown,
+    ...rest
+  });
+  const handleChange = useEventCallback((nextValue, event) => {
     setValue(nextValue);
     onChange === null || onChange === void 0 || onChange(nextValue, event);
   });
-  var treeContext = useMemo(function () {
-    return {
-      register: register,
-      props: {
-        labelKey: labelKey,
-        valueKey: valueKey,
-        childrenKey: childrenKey,
-        virtualized: virtualized,
-        renderTreeIcon: renderTreeIcon,
-        renderTreeNode: renderTreeNode
-      }
-    };
-  }, [childrenKey, labelKey, valueKey, virtualized, register, renderTreeIcon, renderTreeNode]);
-  var tree = /*#__PURE__*/React.createElement(TreeProvider, {
+  const treeContext = useMemo(() => ({
+    register,
+    props: {
+      labelKey,
+      valueKey,
+      childrenKey,
+      virtualized,
+      renderTreeIcon,
+      renderTreeNode
+    }
+  }), [childrenKey, labelKey, valueKey, virtualized, register, renderTreeIcon, renderTreeNode]);
+  const tree = /*#__PURE__*/React.createElement(TreeProvider, {
     value: treeContext
   }, /*#__PURE__*/React.createElement(TreeView, {
     ref: treeView,
@@ -231,15 +218,19 @@ var TreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     onSelectItem: onSelectItem,
     onFocusItem: setFocusItemValue
   }));
-  var renderTreeView = function renderTreeView(positionProps, speakerRef) {
-    var left = positionProps.left,
-      top = positionProps.top,
-      className = positionProps.className;
-    var classes = merge(className, DEPRECATED_menuClassName, popupClassName, prefix('tree-menu'));
-    var mergedMenuStyle = _extends({}, DEPRECATED_menuStyle, popupStyle, {
-      left: left,
-      top: top
-    });
+  const renderTreeView = (positionProps, speakerRef) => {
+    const {
+      left,
+      top,
+      className
+    } = positionProps;
+    const classes = merge(className, DEPRECATED_menuClassName, popupClassName, prefix('tree-menu'));
+    const mergedMenuStyle = {
+      ...DEPRECATED_menuStyle,
+      ...popupStyle,
+      left,
+      top
+    };
     return /*#__PURE__*/React.createElement(PickerPopup, {
       autoWidth: menuAutoWidth,
       className: classes,
@@ -254,10 +245,10 @@ var TreePicker = /*#__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 = !isNil(activeNode) || !isNil(value) && isFunction(renderValue);
-  var selectedElement = placeholder;
+  let hasValidValue = !isNil(activeNode) || !isNil(value) && isFunction(renderValue);
+  let selectedElement = placeholder;
   if (hasValidValue) {
-    var node = activeNode !== null && activeNode !== void 0 ? activeNode : {};
+    const node = activeNode !== null && activeNode !== void 0 ? activeNode : {};
     selectedElement = node[labelKey];
     if (isFunction(renderValue) && value) {
       selectedElement = renderValue(value, node, selectedElement);
@@ -266,15 +257,14 @@ var TreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       }
     }
   }
-  var _usePickerClassName = usePickerClassName(_extends({}, props, {
-      classPrefix: classPrefix,
-      appearance: appearance,
-      hasValue: hasValidValue,
-      name: 'tree',
-      cleanable: cleanable
-    })),
-    classes = _usePickerClassName[0],
-    usedClassNamePropKeys = _usePickerClassName[1];
+  const [classes, usedClassNamePropKeys] = usePickerClassName({
+    ...props,
+    classPrefix,
+    appearance,
+    hasValue: hasValidValue,
+    name: 'tree',
+    cleanable
+  });
   return /*#__PURE__*/React.createElement(PickerToggleTrigger, _extends({
     id: id,
     popupType: "tree",
@@ -286,7 +276,7 @@ var TreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     className: classes,
     style: style,
     ref: root
-  }, /*#__PURE__*/React.createElement(PickerToggle, _extends({}, omit(rest, [].concat(omitTriggerPropKeys, usedClassNamePropKeys, ['cascade'])), {
+  }, /*#__PURE__*/React.createElement(PickerToggle, _extends({}, omit(rest, [...omitTriggerPropKeys, ...usedClassNamePropKeys, 'cascade']), {
     ref: target,
     appearance: appearance,
     onKeyDown: onPickerKeydown,

package/esm/TreePicker/hooks/useFocusState.js

@@ -2,31 +2,29 @@
 import { useState } from 'react';
 import { useEventCallback } from "../../internals/hooks/index.js";
 function useFocusState(props) {
-  var target = props.target,
-    value = props.value,
-    focusActiveNode = props.focusActiveNode;
-  var _useState = useState(false),
-    active = _useState[0],
-    setActive = _useState[1];
-  var _useState2 = useState(null),
-    focusItemValue = _useState2[0],
-    setFocusItemValue = _useState2[1];
-  var focusTarget = useEventCallback(function () {
+  const {
+    target,
+    value,
+    focusActiveNode
+  } = props;
+  const [active, setActive] = useState(false);
+  const [focusItemValue, setFocusItemValue] = useState(null);
+  const focusTarget = useEventCallback(() => {
     var _target$current;
     (_target$current = target.current) === null || _target$current === void 0 || _target$current.focus();
   });
-  var onEnter = useEventCallback(function (node) {
+  const onEnter = useEventCallback(node => {
     var _props$onEnter;
     setActive(true);
     (_props$onEnter = props.onEnter) === null || _props$onEnter === void 0 || _props$onEnter.call(props, node);
   });
-  var onExit = useEventCallback(function (node) {
+  const onExit = useEventCallback(node => {
     var _props$onExit;
     setActive(false);
     focusTarget();
     (_props$onExit = props.onExit) === null || _props$onExit === void 0 || _props$onExit.call(props, node);
   });
-  var onEntered = useEventCallback(function (node) {
+  const onEntered = useEventCallback(node => {
     var _props$onEntered;
     if (value) {
       setFocusItemValue(value);
@@ -35,13 +33,13 @@ function useFocusState(props) {
     (_props$onEntered = props.onEntered) === null || _props$onEntered === void 0 || _props$onEntered.call(props, node);
   });
   return {
-    active: active,
-    focusItemValue: focusItemValue,
-    setFocusItemValue: setFocusItemValue,
+    active,
+    focusItemValue,
+    setFocusItemValue,
     triggerProps: {
-      onEnter: onEnter,
-      onExit: onExit,
-      onEntered: onEntered
+      onEnter,
+      onExit,
+      onEntered
     }
   };
 }