rsuite 5.0.0-beta.5 → 5.0.0

package/esm/Picker/utils.js

@@ -462,7 +462,7 @@ export function useSearch(props) {
  * @param ref
  * @param params
  */
-export function usePublicMethods(ref, _ref) {
+export function usePublicMethods(ref, _ref, disabled) {
   var triggerRef = _ref.triggerRef,
       overlayRef = _ref.overlayRef,
       targetRef = _ref.targetRef,
@@ -482,25 +482,29 @@ export function usePublicMethods(ref, _ref) {
 
     (_triggerRef$current5 = triggerRef.current) === null || _triggerRef$current5 === void 0 ? void 0 : _triggerRef$current5.updatePosition();
   }, [triggerRef]);
-  useImperativeHandle(ref, function () {
-    return {
-      get root() {
-        var _triggerRef$current6;
-
-        return rootRef !== null && rootRef !== void 0 && rootRef.current ? rootRef === null || rootRef === void 0 ? void 0 : rootRef.current : (_triggerRef$current6 = triggerRef.current) === null || _triggerRef$current6 === void 0 ? void 0 : _triggerRef$current6.root;
-      },
-
-      get overlay() {
-        return overlayRef.current;
-      },
-
-      get target() {
-        return targetRef === null || targetRef === void 0 ? void 0 : targetRef.current;
-      },
-
-      updatePosition: handleUpdatePosition,
-      open: handleOpen,
-      close: handleClose
-    };
-  });
+
+  if (!disabled) {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useImperativeHandle(ref, function () {
+      return {
+        get root() {
+          var _triggerRef$current6;
+
+          return rootRef !== null && rootRef !== void 0 && rootRef.current ? rootRef === null || rootRef === void 0 ? void 0 : rootRef.current : (_triggerRef$current6 = triggerRef.current) === null || _triggerRef$current6 === void 0 ? void 0 : _triggerRef$current6.root;
+        },
+
+        get overlay() {
+          return overlayRef.current;
+        },
+
+        get target() {
+          return targetRef === null || targetRef === void 0 ? void 0 : targetRef.current;
+        },
+
+        updatePosition: handleUpdatePosition,
+        open: handleOpen,
+        close: handleClose
+      };
+    });
+  }
 }

package/esm/Progress/ProgressCircle.js

@@ -35,35 +35,35 @@ var ProgressCircle = /*#__PURE__*/React.forwardRef(function (props, ref) {
 
   var getPathStyles = useCallback(function () {
     var radius = 50 - strokeWidth / 2;
-    var beginPositionX = 0;
-    var beginPositionY = -radius;
-    var endPositionX = 0;
-    var endPositionY = -2 * radius;
+    var x1 = 0;
+    var y1 = -radius;
+    var x2 = 0;
+    var y2 = -2 * radius;
 
     switch (gapPosition) {
       case 'left':
-        beginPositionX = -radius;
-        beginPositionY = 0;
-        endPositionX = 2 * radius;
-        endPositionY = 0;
+        x1 = -radius;
+        y1 = 0;
+        x2 = 2 * radius;
+        y2 = 0;
         break;
 
       case 'right':
-        beginPositionX = radius;
-        beginPositionY = 0;
-        endPositionX = -2 * radius;
-        endPositionY = 0;
+        x1 = radius;
+        y1 = 0;
+        x2 = -2 * radius;
+        y2 = 0;
         break;
 
       case 'bottom':
-        beginPositionY = radius;
-        endPositionY = 2 * radius;
+        y1 = radius;
+        y2 = 2 * radius;
         break;
 
       default:
     }
 
-    var pathString = "M 50,50 m " + beginPositionX + "," + beginPositionY + "\n       a " + radius + "," + radius + " 0 1 1 " + endPositionX + "," + -endPositionY + "\n       a " + radius + "," + radius + " 0 1 1 " + -endPositionX + "," + endPositionY;
+    var pathString = "M 50,50 m " + x1 + "," + y1 + " a " + radius + "," + radius + " 0 1 1 " + x2 + "," + -y2 + " a " + radius + "," + radius + " 0 1 1 " + -x2 + "," + y2;
     var len = Math.PI * 2 * radius;
     var trailPathStyle = {
       stroke: trailColor,

package/esm/SelectPicker/SelectPicker.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { PickerLocale } from '../locales';
 import { PickerComponent } from '../Picker';
-import { TypeAttributes, FormControlPickerProps, ItemDataType } from '../@types/common';
+import { FormControlPickerProps, ItemDataType } from '../@types/common';
 import { ListProps } from 'react-virtualized/dist/commonjs/List';
 export declare type ValueType = number | string;
 export interface SelectProps<T = ValueType> {
@@ -16,8 +16,6 @@ export interface SelectProps<T = ValueType> {
      * https://github.com/bvaughn/react-virtualized/blob/master/docs/List.md#prop-types
      */
     listProps?: ListProps;
-    /** A picker can have different sizes */
-    size?: TypeAttributes.Size;
     /** Custom search rules. */
     searchBy?: (keyword: string, label: React.ReactNode, item: ItemDataType) => boolean;
     /** Sort options */

package/esm/Sidenav/SidenavDropdown.js

@@ -11,6 +11,7 @@ import { SidenavContext } from './Sidenav';
 import deprecatePropType from '../utils/deprecatePropType';
 import SidenavDropdownCollapse from './SidenavDropdownCollapse';
 import Disclosure from '../Disclosure/Disclosure';
+import DropdownContext from '../Dropdown/DropdownContext';
 var defaultProps = {
   as: 'div',
   classPrefix: 'dropdown',
@@ -43,6 +44,9 @@ var SidenavDropdown = /*#__PURE__*/React.forwardRef(function (props, ref) {
       openKeys = _useContext$openKeys === void 0 ? [] : _useContext$openKeys,
       onOpenChange = _useContext.onOpenChange;
 
+  var _useContext2 = useContext(DropdownContext),
+      hasSelectedItem = _useContext2.hasSelectedItem;
+
   var _useClassNames = useClassNames(classPrefix),
       merge = _useClassNames.merge,
       withClassPrefix = _useClassNames.withClassPrefix;
@@ -65,7 +69,7 @@ var SidenavDropdown = /*#__PURE__*/React.forwardRef(function (props, ref) {
     var _withClassPrefix;
 
     var open = _ref.open;
-    var classes = merge(className, withClassPrefix((_withClassPrefix = {}, _withClassPrefix["placement-" + kebabCase(placementPolyfill(placement))] = placement, _withClassPrefix[open ? 'expand' : 'collapse'] = true, _withClassPrefix.disabled = disabled, _withClassPrefix['no-caret'] = noCaret, _withClassPrefix)));
+    var classes = merge(className, withClassPrefix((_withClassPrefix = {}, _withClassPrefix["placement-" + kebabCase(placementPolyfill(placement))] = placement, _withClassPrefix[open ? 'expand' : 'collapse'] = true, _withClassPrefix.disabled = disabled, _withClassPrefix['selected-within'] = hasSelectedItem, _withClassPrefix['no-caret'] = noCaret, _withClassPrefix)));
     return /*#__PURE__*/React.createElement(Component, _extends({
       ref: mergeRefs(ref, containerRef),
       style: style,

package/esm/Sidenav/SidenavItem.js

@@ -3,20 +3,22 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 import React, { useContext, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import isNil from 'lodash/isNil';
-import { useClassNames, shallowEqual } from '../utils';
+import { useClassNames, shallowEqual, mergeRefs, appendTooltip } from '../utils';
 import Ripple from '../Ripple';
 import SafeAnchor from '../SafeAnchor';
 import NavContext from '../Nav/NavContext';
-var defaultProps = {
-  as: 'div',
-  classPrefix: 'dropdown'
-};
+import MenuItem from '../Menu/MenuItem';
+import omit from 'lodash/omit';
+import { SidenavContext } from './Sidenav';
 var SidenavItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var activeProp = props.active,
-      children = props.children,
+  var _props$as = props.as,
+      Component = _props$as === void 0 ? SafeAnchor : _props$as,
+      activeProp = props.active,
+      _children = props.children,
       className = props.className,
       disabled = props.disabled,
-      classPrefix = props.classPrefix,
+      _props$classPrefix = props.classPrefix,
+      classPrefix = _props$classPrefix === void 0 ? 'sidenav-item' : _props$classPrefix,
       icon = props.icon,
       eventKey = props.eventKey,
       style = props.style,
@@ -24,7 +26,9 @@ var SidenavItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
       onSelect = props.onSelect,
       divider = props.divider,
       panel = props.panel,
-      rest = _objectWithoutPropertiesLoose(props, ["active", "children", "className", "disabled", "classPrefix", "icon", "eventKey", "style", "onClick", "onSelect", "divider", "panel"]);
+      rest = _objectWithoutPropertiesLoose(props, ["as", "active", "children", "className", "disabled", "classPrefix", "icon", "eventKey", "style", "onClick", "onSelect", "divider", "panel"]);
+
+  var sidenav = useContext(SidenavContext);
 
   var _useContext = useContext(NavContext),
       activeKey = _useContext.activeKey,
@@ -43,6 +47,37 @@ var SidenavItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
     onClick === null || onClick === void 0 ? void 0 : onClick(event);
   }, [disabled, onSelect, onSelectFromNav, eventKey, onClick]);
 
+  if (!sidenav.expanded) {
+    return /*#__PURE__*/React.createElement(MenuItem, {
+      selected: selected,
+      disabled: disabled,
+      onActivate: handleClick
+    }, function (_ref, menuitemRef) {
+      var selected = _ref.selected,
+          active = _ref.active,
+          menuitem = _objectWithoutPropertiesLoose(_ref, ["selected", "active"]);
+
+      var classes = merge(className, withClassPrefix({
+        focus: active,
+        active: selected,
+        disabled: disabled
+      })); // Show tooltip when inside a collapse <Sidenav>
+
+      return appendTooltip({
+        children: function children(triggerProps, triggerRef) {
+          return /*#__PURE__*/React.createElement(Component, _extends({
+            ref: mergeRefs(mergeRefs(ref, menuitemRef), triggerRef),
+            disabled: Component === SafeAnchor ? disabled : undefined,
+            className: classes,
+            "data-event-key": eventKey
+          }, omit(rest, ['divider', 'panel']), triggerProps, menuitem), icon, _children, /*#__PURE__*/React.createElement(Ripple, null));
+        },
+        message: _children,
+        placement: 'right'
+      });
+    });
+  }
+
   if (divider) {
     return /*#__PURE__*/React.createElement("li", _extends({
       ref: ref,
@@ -58,10 +93,10 @@ var SidenavItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
       role: "none presentation",
       style: style,
       className: merge(className, prefix('panel'))
-    }, rest), children);
+    }, rest), _children);
   }
 
-  return /*#__PURE__*/React.createElement(SafeAnchor, _extends({
+  return /*#__PURE__*/React.createElement(Component, _extends({
     ref: ref,
     className: merge(className, withClassPrefix({
       active: selected,
@@ -71,10 +106,9 @@ var SidenavItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
     style: style,
     "aria-selected": selected || undefined,
     "data-event-key": eventKey
-  }, rest), icon, children, /*#__PURE__*/React.createElement(Ripple, null));
+  }, rest), icon, _children, /*#__PURE__*/React.createElement(Ripple, null));
 });
 SidenavItem.displayName = 'Sidenav.Item';
-SidenavItem.defaultProps = defaultProps;
 SidenavItem.propTypes = {
   classPrefix: PropTypes.string,
   disabled: PropTypes.bool,

package/esm/Slider/Slider.js

@@ -208,7 +208,8 @@ var Slider = /*#__PURE__*/React.forwardRef(function (props, ref) {
 
   if (plaintext) {
     return /*#__PURE__*/React.createElement(Plaintext, {
-      localeKey: "notSelected"
+      localeKey: "notSelected",
+      ref: ref
     }, value);
   }
 

package/esm/TagInput/index.d.ts

@@ -0,0 +1,13 @@
+import { InputPickerProps, TriggerType } from '../InputPicker/InputPicker';
+import type { PickerComponent } from '../Picker/types';
+import type { TagProps } from '../Tag';
+export interface TagInputProps extends InputPickerProps {
+    /**  Tag related props. */
+    tagProps?: TagProps;
+    /**
+     * Set the trigger for creating tags. only valid when creatable
+     */
+    trigger: TriggerType | TriggerType[];
+}
+declare const TagInput: PickerComponent<TagInputProps>;
+export default TagInput;

package/esm/TagInput/index.js

@@ -0,0 +1,44 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import React, { useMemo } from 'react';
+import InputPicker, { InputPickerContext } from '../InputPicker/InputPicker';
+var TagInput = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var tagProps = props.tagProps,
+      trigger = props.trigger,
+      value = props.value,
+      defaultValue = props.defaultValue,
+      rest = _objectWithoutPropertiesLoose(props, ["tagProps", "trigger", "value", "defaultValue"]);
+
+  var contextValue = useMemo(function () {
+    return {
+      multi: true,
+      disabledOptions: true,
+      trigger: trigger,
+      tagProps: tagProps
+    };
+  }, [tagProps, trigger]);
+  var data = useMemo(function () {
+    return (value || defaultValue || []).map(function (v) {
+      return {
+        value: v,
+        label: v
+      };
+    });
+  }, [defaultValue, value]);
+  return /*#__PURE__*/React.createElement(InputPickerContext.Provider, {
+    value: contextValue
+  }, /*#__PURE__*/React.createElement(InputPicker, _extends({}, rest, {
+    value: value,
+    defaultValue: defaultValue,
+    data: data,
+    placement: null,
+    creatable: true,
+    ref: ref
+  })));
+});
+TagInput.defaultProps = {
+  trigger: 'Enter',
+  tagProps: {}
+};
+TagInput.displayName = 'TagInput';
+export default TagInput;

package/esm/TagPicker/index.d.ts

@@ -1,5 +1,13 @@
-import { InputPickerProps } from '../InputPicker/InputPicker';
+import { InputPickerProps, TriggerType } from '../InputPicker/InputPicker';
 import type { PickerComponent } from '../Picker/types';
-export declare type TagPickerProps = InputPickerProps;
+import type { TagProps } from '../Tag';
+export interface TagPickerProps extends InputPickerProps {
+    /**  Tag related props. */
+    tagProps?: TagProps;
+    /**
+     * Set the trigger for creating tags. only valid when creatable
+     */
+    trigger: TriggerType | TriggerType[];
+}
 declare const TagPicker: PickerComponent<TagPickerProps>;
 export default TagPicker;

package/esm/TagPicker/index.js

@@ -1,11 +1,28 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import React from 'react';
-import InputPicker from '../InputPicker/InputPicker';
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import React, { useMemo } from 'react';
+import InputPicker, { InputPickerContext } from '../InputPicker/InputPicker';
 var TagPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  return /*#__PURE__*/React.createElement(InputPicker, _extends({}, props, {
-    ref: ref,
-    multi: true
-  }));
+  var tagProps = props.tagProps,
+      trigger = props.trigger,
+      rest = _objectWithoutPropertiesLoose(props, ["tagProps", "trigger"]);
+
+  var contextValue = useMemo(function () {
+    return {
+      multi: true,
+      trigger: trigger,
+      tagProps: tagProps
+    };
+  }, [tagProps, trigger]);
+  return /*#__PURE__*/React.createElement(InputPickerContext.Provider, {
+    value: contextValue
+  }, /*#__PURE__*/React.createElement(InputPicker, _extends({}, rest, {
+    ref: ref
+  })));
 });
+TagPicker.defaultProps = {
+  trigger: 'Enter',
+  tagProps: {}
+};
 TagPicker.displayName = 'TagPicker';
 export default TagPicker;

package/esm/Tree/Tree.d.ts

@@ -40,8 +40,6 @@ export interface TreeDragProps<ItemDataType = Record<string, any>> {
 export interface TreeBaseProps<ValueType = string | number, ItemDataType = Record<string, any>> extends StandardProps {
     /** The height of Dropdown */
     height?: number;
-    /** Display inline */
-    inline?: boolean;
     /** Whether display search input box */
     searchable?: boolean;
     /** Whether using virtualized list */

package/esm/Tree/Tree.js

@@ -1,6 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import React from 'react';
+import React, { useRef } from 'react';
 import TreePicker from '../TreePicker';
+import TreeContext from './TreeContext';
 
 /**
  * Tree Node Drag Type
@@ -14,10 +15,15 @@ export var TREE_NODE_DROP_POSITION;
 })(TREE_NODE_DROP_POSITION || (TREE_NODE_DROP_POSITION = {}));
 
 var Tree = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  return /*#__PURE__*/React.createElement(TreePicker, _extends({
-    inline: true,
+  var dragNodeRef = useRef();
+  return /*#__PURE__*/React.createElement(TreeContext.Provider, {
+    value: {
+      inline: true,
+      dragNodeRef: dragNodeRef
+    }
+  }, /*#__PURE__*/React.createElement(TreePicker, _extends({
     ref: ref
-  }, props));
+  }, props)));
 });
 Tree.displayName = 'Tree';
 export default Tree;

package/esm/Tree/TreeContext.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export interface TreeContextProps {
+    inline?: boolean;
+    dragNodeRef?: React.MutableRefObject<any>;
+}
+declare const TreeContext: React.Context<TreeContextProps>;
+export default TreeContext;

package/esm/Tree/TreeContext.js

@@ -0,0 +1,3 @@
+import React from 'react';
+var TreeContext = /*#__PURE__*/React.createContext({});
+export default TreeContext;

package/esm/TreePicker/TreeNode.js

@@ -1,10 +1,11 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import React, { forwardRef, useCallback } from 'react';
+import React, { forwardRef, useCallback, useContext } from 'react';
 import PropTypes from 'prop-types';
 import { hasClass } from 'dom-lib';
 import ArrowDown from '@rsuite/icons/legacy/ArrowDown';
 import Spinner from '@rsuite/icons/legacy/Spinner';
+import TreeContext from '../Tree/TreeContext';
 import reactToString from '../utils/reactToString';
 import { useClassNames, TREE_NODE_PADDING, TREE_NODE_ROOT_PADDING } from '../utils';
 var TreeNode = /*#__PURE__*/forwardRef(function (_ref, ref) {
@@ -48,6 +49,9 @@ var TreeNode = /*#__PURE__*/forwardRef(function (_ref, ref) {
       merge = _useClassNames.merge,
       withClassPrefix = _useClassNames.withClassPrefix;
 
+  var _useContext = useContext(TreeContext),
+      dragNodeRef = _useContext.dragNodeRef;
+
   var getTitle = useCallback(function () {
     if (typeof label === 'string') {
       return label;
@@ -77,14 +81,16 @@ 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 dragNode = document.getElementById('drag-node');
+    var dragNode = dragNodeRef === null || dragNodeRef === void 0 ? void 0 : dragNodeRef.current;
 
     if (dragNode) {
-      event.dataTransfer.setDragImage(dragNode, 0, 0);
+      var _event$dataTransfer;
+
+      (_event$dataTransfer = event.dataTransfer) === null || _event$dataTransfer === void 0 ? void 0 : _event$dataTransfer.setDragImage(dragNode, 0, 0);
     }
 
     onDragStart === null || onDragStart === void 0 ? void 0 : onDragStart(nodeData, event);
-  }, [nodeData, onDragStart]);
+  }, [dragNodeRef, nodeData, onDragStart]);
   var handleDragEnter = useCallback(function (event) {
     event.preventDefault();
     event.stopPropagation();

package/esm/TreePicker/TreePicker.js

@@ -5,14 +5,15 @@ import _isNil from "lodash/isNil";
 import _isUndefined from "lodash/isUndefined";
 import _omit from "lodash/omit";
 import _pick from "lodash/pick";
-import React, { useState, useRef, useEffect, useCallback } from 'react';
+import React, { useState, useRef, useEffect, useCallback, useContext } from 'react';
 import PropTypes from 'prop-types';
 import { List, AutoSizer } from '../Picker/VirtualizedList';
 import TreeNode from './TreeNode';
 import { createChainedFunction, useClassNames, useCustom, useControlled, 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, onMenuKeyDown as _onMenuKeyDown, usePublicMethods, listPickerPropTypes, listPickerDefaultProps, pickTriggerPropKeys, omitTriggerPropKeys, useToggleKeyDownEvent } from '../Picker';
-// default value for virtualized
+import TreeContext from '../Tree/TreeContext'; // default value for virtualized
+
 export var maxTreeHeight = 320;
 
 var defaultProps = _extends({}, listPickerDefaultProps, {
@@ -31,7 +32,6 @@ var TreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       data = props.data,
       style = props.style,
       controlledValue = props.value,
-      inline = props.inline,
       overrideLocale = props.locale,
       height = props.height,
       className = props.className,
@@ -61,6 +61,7 @@ var TreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       getChildren = props.getChildren,
       renderTreeIcon = props.renderTreeIcon,
       renderTreeNode = props.renderTreeNode,
+      onExit = props.onExit,
       onExited = props.onExited,
       onClean = props.onClean,
       onOpen = props.onOpen,
@@ -80,7 +81,7 @@ var TreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       renderMenu = props.renderMenu,
       renderValue = props.renderValue,
       renderDragNode = props.renderDragNode,
-      rest = _objectWithoutPropertiesLoose(props, ["as", "data", "style", "value", "inline", "locale", "height", "className", "disabled", "placement", "cleanable", "menuStyle", "searchable", "virtualized", "classPrefix", "defaultValue", "placeholder", "searchKeyword", "menuClassName", "menuAutoWidth", "searchBy", "toggleAs", "labelKey", "valueKey", "childrenKey", "draggable", "defaultExpandAll", "disabledItemValues", "expandItemValues", "defaultExpandItemValues", "id", "getChildren", "renderTreeIcon", "renderTreeNode", "onExited", "onClean", "onOpen", "onSearch", "onSelect", "onChange", "onEntered", "onClose", "onDragEnd", "onDragStart", "onDragEnter", "onDragLeave", "onDragOver", "onDrop", "onExpand", "renderExtraFooter", "renderMenu", "renderValue", "renderDragNode"]);
+      rest = _objectWithoutPropertiesLoose(props, ["as", "data", "style", "value", "locale", "height", "className", "disabled", "placement", "cleanable", "menuStyle", "searchable", "virtualized", "classPrefix", "defaultValue", "placeholder", "searchKeyword", "menuClassName", "menuAutoWidth", "searchBy", "toggleAs", "labelKey", "valueKey", "childrenKey", "draggable", "defaultExpandAll", "disabledItemValues", "expandItemValues", "defaultExpandItemValues", "id", "getChildren", "renderTreeIcon", "renderTreeNode", "onExit", "onExited", "onClean", "onOpen", "onSearch", "onSelect", "onChange", "onEntered", "onClose", "onDragEnd", "onDragStart", "onDragEnter", "onDragLeave", "onDragOver", "onDrop", "onExpand", "renderExtraFooter", "renderMenu", "renderValue", "renderDragNode"]);
 
   var triggerRef = useRef();
   var targetRef = useRef();
@@ -93,6 +94,10 @@ var TreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       rtl = _useCustom.rtl,
       locale = _useCustom.locale;
 
+  var _useContext = useContext(TreeContext),
+      inline = _useContext.inline,
+      dragNodeRef = _useContext.dragNodeRef;
+
   var _useControlled = useControlled(controlledValue, defaultValue),
       value = _useControlled[0],
       setValue = _useControlled[1],
@@ -217,6 +222,14 @@ var TreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
   useEffect(function () {
     setSearchKeyword(searchKeyword !== null && searchKeyword !== void 0 ? searchKeyword : '');
   }, [searchKeyword, setSearchKeyword]);
+  useEffect(function () {
+    if (dragNodeRef) {
+      var _treeViewRef$current;
+
+      dragNodeRef.current = (_treeViewRef$current = treeViewRef.current) === null || _treeViewRef$current === void 0 ? void 0 : _treeViewRef$current.querySelector("." + treePrefix('drag-node-mover'));
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  }, []);
   var getDropData = useCallback(function (nodeData) {
     var options = {
       valueKey: valueKey,
@@ -386,7 +399,6 @@ var TreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
 
     (_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('');
-    onClose === null || onClose === void 0 ? void 0 : onClose();
     setActive(false);
     setFocusItemValue(activeNode === null || activeNode === void 0 ? void 0 : activeNode[valueKey]);
     /**
@@ -394,12 +406,12 @@ var TreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
      */
 
     (_targetRef$current2 = targetRef.current) === null || _targetRef$current2 === void 0 ? void 0 : _targetRef$current2.focus();
-  }, [activeNode, onClose, setSearchKeyword, valueKey]);
+  }, [activeNode, setSearchKeyword, valueKey]);
   usePublicMethods(ref, {
     triggerRef: triggerRef,
     overlayRef: overlayRef,
     targetRef: targetRef
-  });
+  }, inline);
   var handleFocusItem = useCallback(function (key) {
     var focusableItems = getFocusableItems(filteredData, {
       disabledItemValues: disabledItemValues,
@@ -593,7 +605,6 @@ var TreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       }
 
       return /*#__PURE__*/React.createElement("span", {
-        id: "drag-node",
         className: treePrefix('drag-node-mover')
       }, dragNodeContent);
     }
@@ -609,10 +620,10 @@ var TreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     var styles = inline ? _extends({
       height: height
     }, style) : {};
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    return /*#__PURE__*/React.createElement("div", {
       role: "tree",
       id: id ? id + "-listbox" : undefined,
-      ref: treeViewRef,
+      ref: inline ? mergeRefs(treeViewRef, ref) : treeViewRef,
       className: classes,
       style: styles,
       onKeyDown: inline ? handleTreeKeyDown : undefined
@@ -636,7 +647,7 @@ var TreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
         rowRenderer: renderVirtualListNode(formattedNodes),
         scrollToAlignment: "center"
       });
-    }) : formattedNodes)), renderDefaultDragNode());
+    }) : formattedNodes), renderDefaultDragNode());
   };
 
   var renderDropdownMenu = function renderDropdownMenu(positionProps, speakerRef) {
@@ -707,6 +718,7 @@ var TreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     placement: placement,
     onEnter: handleOpen,
     onEntered: onEntered,
+    onExit: createChainedFunction(onClose, onExit),
     onExited: createChainedFunction(handleClose, onExited),
     speaker: renderDropdownMenu
   }, /*#__PURE__*/React.createElement(Component, {
@@ -732,7 +744,6 @@ TreePicker.propTypes = _extends({}, listPickerPropTypes, {
   locale: PropTypes.any,
   appearance: PropTypes.oneOf(['default', 'subtle']),
   height: PropTypes.number,
-  inline: PropTypes.bool,
   draggable: PropTypes.bool,
   virtualized: PropTypes.bool,
   searchable: PropTypes.bool,

package/esm/Uploader/UploadFileItem.d.ts

@@ -17,5 +17,10 @@ export interface UploadFileItemProps extends WithAsProps {
     onPreview?: (file: FileType, event: React.MouseEvent) => void;
     onReupload?: (file: FileType, event: React.MouseEvent) => void;
 }
+/**
+ * Format display file size
+ * @param size
+ */
+export declare const formatSize: (size?: number) => string;
 declare const UploadFileItem: React.ForwardRefExoticComponent<UploadFileItemProps & React.RefAttributes<HTMLDivElement>>;
 export default UploadFileItem;

package/esm/Uploader/UploadFileItem.js

@@ -11,7 +11,7 @@ import CloseButton from '../CloseButton';
  * Format display file size
  * @param size
  */
-var getSize = function getSize(size) {
+export var formatSize = function formatSize(size) {
   if (size === void 0) {
     size = 0;
   }
@@ -34,7 +34,6 @@ var getSize = function getSize(size) {
 
   return size + "B";
 };
-
 var defaultProps = {
   as: 'div',
   classPrefix: 'uploader-file-item',
@@ -223,7 +222,7 @@ var UploadFileItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
 
       return /*#__PURE__*/React.createElement("span", {
         className: prefix('size')
-      }, getSize(file === null || file === void 0 ? void 0 : (_file$blobFile2 = file.blobFile) === null || _file$blobFile2 === void 0 ? void 0 : _file$blobFile2.size));
+      }, formatSize(file === null || file === void 0 ? void 0 : (_file$blobFile2 = file.blobFile) === null || _file$blobFile2 === void 0 ? void 0 : _file$blobFile2.size));
     }
 
     return null;