rsuite 5.2.1 → 5.3.0

package/cjs/Sidenav/SidenavDropdown.js

@@ -60,14 +60,8 @@ var SidenavDropdown = /*#__PURE__*/_react.default.forwardRef(function (props, re
       openProp = props.open,
       onToggle = props.onToggle,
       rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "title", "children", "className", "menuStyle", "disabled", "renderTitle", "renderToggle", "classPrefix", "placement", "toggleClassName", "icon", "eventKey", "toggleAs", "noCaret", "style", "onOpen", "onClose", "open", "onToggle"]);
-
-  var _useContext = (0, _react.useContext)(_Sidenav.SidenavContext),
-      _useContext$openKeys = _useContext.openKeys,
-      openKeys = _useContext$openKeys === void 0 ? [] : _useContext$openKeys,
-      onOpenChange = _useContext.onOpenChange;
-
-  var _useContext2 = (0, _react.useContext)(_DropdownContext.default),
-      hasSelectedItem = _useContext2.hasSelectedItem;
+  var sidenavContext = (0, _react.useContext)(_Sidenav.SidenavContext);
+  var dropdownContext = (0, _react.useContext)(_DropdownContext.default);
 
   var _useClassNames = (0, _utils.useClassNames)(classPrefix),
       merge = _useClassNames.merge,
@@ -75,6 +69,15 @@ var SidenavDropdown = /*#__PURE__*/_react.default.forwardRef(function (props, re
 
   var internalId = (0, _useInternalId.default)('SidenavDropdown');
   var uniqueKey = eventKey !== null && eventKey !== void 0 ? eventKey : internalId;
+
+  if (!sidenavContext || !dropdownContext) {
+    throw new Error('<SidenavDropdown> component is not supposed to be used standalone. Use <Dropdown> inside <Sidenav> instead.');
+  }
+
+  var _sidenavContext$openK = sidenavContext.openKeys,
+      openKeys = _sidenavContext$openK === void 0 ? [] : _sidenavContext$openK,
+      onOpenChange = sidenavContext.onOpenChange;
+  var hasSelectedItem = dropdownContext.hasSelectedItem;
   var handleToggleDisclosure = (0, _react.useCallback)(function (open, event) {
     if (open) {
       onClose === null || onClose === void 0 ? void 0 : onClose();

package/cjs/Sidenav/SidenavDropdownItem.js

@@ -52,13 +52,16 @@ var SidenavDropdownItem = /*#__PURE__*/_react.default.forwardRef(function (props
       onClick = props.onClick,
       onSelect = props.onSelect,
       rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "active", "children", "disabled", "divider", "panel", "className", "style", "classPrefix", "icon", "eventKey", "onClick", "onSelect"]);
+  var sidenavContext = (0, _react.useContext)(_Sidenav.SidenavContext);
+  var dropdown = (0, _react.useContext)(_DropdownContext.default);
 
-  var _useContext = (0, _react.useContext)(_Sidenav.SidenavContext),
-      activeKey = _useContext.activeKey,
-      onSidenavSelect = _useContext.onSelect;
+  if (!sidenavContext || !dropdown) {
+    throw new Error('<SidenavDropdownItem> component is not supposed to be used standalone. Use <Dropdown.Item> within <Sidenav> instead.');
+  }
 
+  var activeKey = sidenavContext.activeKey,
+      onSidenavSelect = sidenavContext.onSelect;
   var nav = (0, _react.useContext)(_NavContext.default);
-  var dropdown = (0, _react.useContext)(_DropdownContext.default);
 
   var _useClassNames = (0, _utils.useClassNames)(classPrefix),
       merge = _useClassNames.merge,
@@ -72,9 +75,11 @@ var SidenavDropdownItem = /*#__PURE__*/_react.default.forwardRef(function (props
     disabled: disabled
   }));
   var handleClick = (0, _react.useCallback)(function (event) {
+    var _dropdown$onSelect;
+
     if (disabled) return;
     onSelect === null || onSelect === void 0 ? void 0 : onSelect(eventKey, event);
-    dropdown === null || dropdown === void 0 ? void 0 : dropdown.onSelect(eventKey, event);
+    (_dropdown$onSelect = dropdown.onSelect) === null || _dropdown$onSelect === void 0 ? void 0 : _dropdown$onSelect.call(dropdown, eventKey, event);
     onSidenavSelect === null || onSidenavSelect === void 0 ? void 0 : onSidenavSelect(eventKey, event);
   }, [disabled, onSelect, onSidenavSelect, eventKey, dropdown]);
   var menuitemEventHandlers = {

package/cjs/Sidenav/SidenavDropdownMenu.js

@@ -68,12 +68,16 @@ var SidenavDropdownMenu = /*#__PURE__*/_react.default.forwardRef(function (props
       withClassPrefix = _useClassNames.withClassPrefix,
       prefix = _useClassNames.prefix;
 
-  var _useContext = (0, _react.useContext)(_Sidenav.SidenavContext),
-      _useContext$openKeys = _useContext.openKeys,
-      openKeys = _useContext$openKeys === void 0 ? [] : _useContext$openKeys,
-      onOpenChange = _useContext.onOpenChange,
-      onSidenavSelect = _useContext.onSelect;
+  var sidenavContext = (0, _react.useContext)(_Sidenav.SidenavContext);
 
+  if (!sidenavContext) {
+    throw new Error('<SidenavDropdownMenu> component is not supposed to be used standalone. Use <Dropdown.Item> inside <Sidenav> instead.');
+  }
+
+  var _sidenavContext$openK = sidenavContext.openKeys,
+      openKeys = _sidenavContext$openK === void 0 ? [] : _sidenavContext$openK,
+      onOpenChange = sidenavContext.onOpenChange,
+      onSidenavSelect = sidenavContext.onSelect;
   var handleClick = (0, _react.useCallback)(function (event) {
     if (disabled) return;
     onSelect === null || onSelect === void 0 ? void 0 : onSelect(eventKey, event);

package/cjs/Sidenav/SidenavItem.d.ts

@@ -11,7 +11,7 @@ export interface SidenavItemProps<T = any> extends WithAsProps, Omit<React.HTMLA
     /** The value of the current option */
     eventKey?: T;
     /** Selected callback function */
-    onSelect?: (eventKey: T, event: React.MouseEvent<HTMLElement>) => void;
+    onSelect?: (eventKey: T, event: React.MouseEvent) => void;
     divider?: boolean;
     panel?: boolean;
 }

package/cjs/Sidenav/SidenavItem.js

@@ -50,6 +50,10 @@ var SidenavItem = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "active", "children", "className", "disabled", "classPrefix", "icon", "eventKey", "style", "onClick", "onSelect", "divider", "panel"]);
   var sidenav = (0, _react.useContext)(_Sidenav.SidenavContext);
 
+  if (!sidenav) {
+    throw new Error('<SidenavItem> component is not supposed to be used standalone. Use <Nav.Item> inside <Sidenav> instead.');
+  }
+
   var _useContext = (0, _react.useContext)(_NavContext.default),
       activeKey = _useContext.activeKey,
       onSelectFromNav = _useContext.onSelect;

package/cjs/Slider/Graduated.d.ts

@@ -1,11 +1,11 @@
 import React from 'react';
 import { WithAsProps, RsRefForwardingComponent } from '../@types/common';
 export interface GraduatedProps extends WithAsProps {
-    step?: number;
-    min?: number;
-    max?: number;
-    count?: number;
-    value?: number | number[];
+    step: number;
+    min: number;
+    max: number;
+    count: number;
+    value: number | number[];
     renderMark?: (mark: number) => React.ReactNode;
 }
 declare const Graduated: RsRefForwardingComponent<'div', GraduatedProps>;

package/cjs/Slider/Handle.d.ts

@@ -7,7 +7,7 @@ export interface HandleProps extends WithAsProps, React.HTMLAttributes<HTMLDivEl
     rtl?: boolean;
     position?: number;
     value?: number;
-    renderTooltip?: (value: number) => React.ReactNode;
+    renderTooltip?: (value: number | undefined) => React.ReactNode;
     onDragMove?: (event: React.DragEvent, dataset?: DOMStringMap) => void;
     onDragStart?: (event: React.MouseEvent) => void;
     onDragEnd?: (event: React.MouseEvent, dataset?: DOMStringMap) => void;

package/cjs/Slider/Handle.js

@@ -58,7 +58,7 @@ var Handle = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       active = _useState[0],
       setActive = _useState[1];
 
-  var rootRef = (0, _react.useRef)();
+  var rootRef = (0, _react.useRef)(null);
   var horizontalKey = rtl ? 'right' : 'left';
   var direction = vertical ? 'bottom' : horizontalKey;
   var styles = (0, _extends3.default)({}, style, (_extends2 = {}, _extends2[direction] = position + "%", _extends2));
@@ -70,7 +70,7 @@ var Handle = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var handleClasses = merge(className, prefix('handle'), {
     active: active
   });
-  var tooltipRef = (0, _react.useRef)();
+  var tooltipRef = (0, _react.useRef)(null);
   var mouseMoveTracker = (0, _react.useRef)();
   var releaseMouseMoves = (0, _react.useCallback)(function () {
     var _mouseMoveTracker$cur;
@@ -90,20 +90,24 @@ var Handle = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     var _mouseMoveTracker$cur2;
 
     if ((_mouseMoveTracker$cur2 = mouseMoveTracker.current) !== null && _mouseMoveTracker$cur2 !== void 0 && _mouseMoveTracker$cur2.isDragging()) {
-      onDragMove === null || onDragMove === void 0 ? void 0 : onDragMove(event, rootRef.current.dataset);
+      var _rootRef$current;
+
+      onDragMove === null || onDragMove === void 0 ? void 0 : onDragMove(event, (_rootRef$current = rootRef.current) === null || _rootRef$current === void 0 ? void 0 : _rootRef$current.dataset);
       setTooltipPosition();
     }
   }, [onDragMove, setTooltipPosition]);
   var handleDragEnd = (0, _react.useCallback)(function (event) {
+    var _rootRef$current2;
+
     setActive(false);
     releaseMouseMoves();
-    onDragEnd === null || onDragEnd === void 0 ? void 0 : onDragEnd(event, rootRef.current.dataset);
+    onDragEnd === null || onDragEnd === void 0 ? void 0 : onDragEnd(event, (_rootRef$current2 = rootRef.current) === null || _rootRef$current2 === void 0 ? void 0 : _rootRef$current2.dataset);
   }, [onDragEnd, releaseMouseMoves]);
   var getMouseMoveTracker = (0, _react.useCallback)(function () {
     return mouseMoveTracker.current || new _DOMMouseMoveTracker.default(handleDragMove, handleDragEnd, document.body);
   }, [handleDragEnd, handleDragMove]);
   var handleMouseDown = (0, _react.useCallback)(function (event) {
-    var _mouseMoveTracker$cur3, _rootRef$current;
+    var _mouseMoveTracker$cur3, _rootRef$current3;
 
     if (disabled) {
       return;
@@ -111,7 +115,7 @@ var Handle = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
 
     mouseMoveTracker.current = getMouseMoveTracker();
     (_mouseMoveTracker$cur3 = mouseMoveTracker.current) === null || _mouseMoveTracker$cur3 === void 0 ? void 0 : _mouseMoveTracker$cur3.captureMouseMoves(event);
-    (_rootRef$current = rootRef.current) === null || _rootRef$current === void 0 ? void 0 : _rootRef$current.focus();
+    (_rootRef$current3 = rootRef.current) === null || _rootRef$current3 === void 0 ? void 0 : _rootRef$current3.focus();
     setActive(true);
     onDragStart === null || onDragStart === void 0 ? void 0 : onDragStart(event);
   }, [disabled, getMouseMoveTracker, onDragStart]);

package/cjs/Slider/Mark.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { WithAsProps, RsRefForwardingComponent } from '../@types/common';
 export interface MarkProps extends WithAsProps {
-    mark?: number;
+    mark: number;
     last?: boolean;
     renderMark?: (mark: number) => React.ReactNode;
 }

package/cjs/Slider/Slider.d.ts

@@ -45,7 +45,7 @@ export interface SliderProps<T = number> extends WithAsProps, FormControlBasePro
     /** Customize labels on the render ruler */
     renderMark?: (mark: number) => React.ReactNode;
     /** Customize the content of the rendered Tooltip. */
-    renderTooltip?: (value: number) => React.ReactNode;
+    renderTooltip?: (value: number | undefined) => React.ReactNode;
     /** Accepts a function which returns a string value that provides a user-friendly name for the current value of the slider. */
     getAriaValueText?: (value: number, eventKey?: 'start' | 'end') => string;
     /** Callback function that is fired when the mouseup is triggered. */

package/cjs/Slider/Slider.js

@@ -96,7 +96,7 @@ var Slider = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       onChange = props.onChange,
       onChangeCommitted = props.onChangeCommitted,
       rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["aria-label", "aria-labelledby", "aria-valuetext", "as", "graduated", "className", "barClassName", "progress", "vertical", "disabled", "readOnly", "plaintext", "classPrefix", "min", "handleClassName", "handleStyle", "handleTitle", "tooltip", "step", "defaultValue", "value", "max", "getAriaValueText", "renderTooltip", "renderMark", "onChange", "onChangeCommitted"]);
-  var barRef = (0, _react.useRef)();
+  var barRef = (0, _react.useRef)(null);
 
   var _useClassNames = (0, _utils.useClassNames)(classPrefix),
       merge = _useClassNames.merge,
@@ -265,7 +265,7 @@ var Slider = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     onDragMove: handleChangeValue,
     onKeyDown: handleKeyDown,
     onDragEnd: handleChangeCommitted,
-    tabIndex: disabled || readOnly ? null : 0,
+    tabIndex: disabled || readOnly ? undefined : 0,
     "aria-orientation": vertical ? 'vertical' : 'horizontal',
     "aria-valuenow": value,
     "aria-disabled": disabled,

package/cjs/Slider/utils.d.ts

@@ -1,2 +1,3 @@
 export declare const precisionMath: (value: any) => number;
-export declare const checkValue: (value: number, min: number, max: number) => number;
+declare function checkValue<T extends number | undefined>(value: T, min: number, max: number): T extends undefined ? undefined : number;
+export { checkValue };

package/cjs/Slider/utils.js

@@ -1,7 +1,8 @@
 "use strict";
 
 exports.__esModule = true;
-exports.checkValue = exports.precisionMath = void 0;
+exports.checkValue = checkValue;
+exports.precisionMath = void 0;
 
 var precisionMath = function precisionMath(value) {
   return parseFloat(value.toFixed(10));
@@ -9,7 +10,7 @@ var precisionMath = function precisionMath(value) {
 
 exports.precisionMath = precisionMath;
 
-var checkValue = function checkValue(value, min, max) {
+function checkValue(value, min, max) {
   if (typeof value === 'undefined') {
     return value;
   }
@@ -23,6 +24,4 @@ var checkValue = function checkValue(value, min, max) {
   }
 
   return value;
-};
-
-exports.checkValue = checkValue;
+}

package/cjs/Steps/StepItem.js

@@ -27,7 +27,7 @@ var STEP_STATUS_ICON = {
 };
 
 var StepItem = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
-  var _withClassPrefix, _STEP_STATUS_ICON$sta;
+  var _withClassPrefix;
 
   var _props$as = props.as,
       Component = _props$as === void 0 ? 'div' : _props$as,
@@ -57,7 +57,7 @@ var StepItem = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
 
   var iconNode = /*#__PURE__*/_react.default.createElement("span", {
     className: prefix('icon', "icon-" + status)
-  }, (_STEP_STATUS_ICON$sta = STEP_STATUS_ICON[status]) !== null && _STEP_STATUS_ICON$sta !== void 0 ? _STEP_STATUS_ICON$sta : stepNumber);
+  }, status ? STEP_STATUS_ICON[status] : stepNumber);
 
   if (icon) {
     iconNode = /*#__PURE__*/_react.default.createElement("span", {

package/cjs/TagInput/index.js

@@ -45,7 +45,7 @@ var TagInput = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     value: value,
     defaultValue: defaultValue,
     data: data,
-    placement: null,
+    placement: undefined,
     creatable: true,
     ref: ref
   })));

package/cjs/Toggle/Toggle.js

@@ -40,7 +40,7 @@ var Toggle = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       localeProp = props.locale,
       onChange = props.onChange,
       rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "disabled", "readOnly", "loading", "plaintext", "className", "checkedChildren", "unCheckedChildren", "classPrefix", "checked", "defaultChecked", "size", "locale", "onChange"]);
-  var inputRef = (0, _react.useRef)();
+  var inputRef = (0, _react.useRef)(null);
 
   var _useControlled = (0, _utils.useControlled)(checkedProp, defaultChecked),
       checked = _useControlled[0],

package/cjs/Tree/Tree.d.ts

@@ -43,6 +43,8 @@ export interface TreeBaseProps<ValueType = string | number, ItemDataType = Recor
     height?: number;
     /** Whether display search input box */
     searchable?: boolean;
+    /** Display an auxiliary line when the tree node is indented. */
+    showIndentLine?: boolean;
     /** Whether using virtualized list */
     virtualized?: boolean;
     /**
@@ -59,7 +61,7 @@ export interface TreeBaseProps<ValueType = string | number, ItemDataType = Recor
     /** Set the option value for the expand node with controlled*/
     expandItemValues?: any[];
     /** Callback function for data change */
-    onExpand?: (expandItemValues: ItemDataType[], activeNode: ItemDataType, concat: (data: ItemDataType[], children: React.ReactNode) => ItemDataType[]) => void;
+    onExpand?: (expandItemValues: ItemDataType[], activeNode: ItemDataType, concat: (data: ItemDataType[], children: ItemDataType[]) => ItemDataType[]) => void;
     /** Callback function after selecting tree node */
     onSelect?: (activeNode: ItemDataType, value: ValueType, event: React.SyntheticEvent) => void;
     /** Custom Render tree Node */

package/cjs/TreePicker/TreeNode.js

@@ -7,7 +7,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 exports.__esModule = true;
 exports.default = void 0;
 
-var _extends3 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 
@@ -27,9 +27,9 @@ var _reactToString = _interopRequireDefault(require("../utils/reactToString"));
 
 var _utils = require("../utils");
 
-var TreeNode = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
-  var _extends2;
+var _treeUtils = require("../utils/treeUtils");
 
+var TreeNode = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var _ref$as = _ref.as,
       Component = _ref$as === void 0 ? 'div' : _ref$as,
       rtl = _ref.rtl,
@@ -194,11 +194,9 @@ var TreeNode = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     active: active,
     'text-muted': disabled,
     focus: focus
-  })); // layer start from 1
-
-  var padding = (layer - 1) * _utils.TREE_NODE_PADDING + _utils.TREE_NODE_ROOT_PADDING;
-  var styles = (0, _extends3.default)({}, style, (_extends2 = {}, _extends2[rtl ? 'paddingRight' : 'paddingLeft'] = padding, _extends2));
-  return visible ? /*#__PURE__*/_react.default.createElement(Component, (0, _extends3.default)({
+  }));
+  var styles = (0, _extends2.default)({}, style, (0, _treeUtils.getTreeNodeIndent)(rtl, layer - 1));
+  return visible ? /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
     role: "treeitem"
   }, rest, {
     "aria-expanded": expand,

package/cjs/TreePicker/TreePicker.js

@@ -29,10 +29,10 @@ var _VirtualizedList = require("../Picker/VirtualizedList");
 
 var _TreeNode = _interopRequireDefault(require("./TreeNode"));
 
-var _utils = require("../utils");
-
 var _treeUtils = require("../utils/treeUtils");
 
+var _utils = require("../utils");
+
 var _Picker = require("../Picker");
 
 var _TreeContext = _interopRequireDefault(require("../Tree/TreeContext"));
@@ -50,6 +50,7 @@ var TreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       _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,
@@ -63,7 +64,8 @@ var TreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       menuStyle = props.menuStyle,
       _props$searchable = props.searchable,
       searchable = _props$searchable === void 0 ? true : _props$searchable,
-      virtualized = props.virtualized,
+      _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,
@@ -111,13 +113,13 @@ var TreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       renderMenu = props.renderMenu,
       renderValue = props.renderValue,
       renderDragNode = props.renderDragNode,
-      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "data", "appearance", "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", "listProps", "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 = (0, _react.useRef)();
-  var targetRef = (0, _react.useRef)();
-  var listRef = (0, _react.useRef)();
-  var overlayRef = (0, _react.useRef)();
-  var searchInputRef = (0, _react.useRef)();
-  var treeViewRef = (0, _react.useRef)();
+      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "data", "appearance", "style", "showIndentLine", "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", "listProps", "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 = (0, _react.useRef)(null);
+  var targetRef = (0, _react.useRef)(null);
+  var listRef = (0, _react.useRef)(null);
+  var overlayRef = (0, _react.useRef)(null);
+  var searchInputRef = (0, _react.useRef)(null);
+  var treeViewRef = (0, _react.useRef)(null);
 
   var _useCustom = (0, _utils.useCustom)('Picker', overrideLocale),
       rtl = _useCustom.rtl,
@@ -209,21 +211,17 @@ var TreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
 
   var activeNode = (0, _treeUtils.getTreeActiveNode)(flattenNodes, value, valueKey);
   var getFormattedNodes = (0, _react.useCallback)(function (render) {
-    var formattedNodes = [];
-
     if (virtualized) {
-      formattedNodes = formatVirtualizedTreeData(flattenNodes, filteredData, expandItemValues, {
+      return formatVirtualizedTreeData(flattenNodes, filteredData, expandItemValues, {
         searchKeyword: searchKeywordState
       }).filter(function (n) {
         return n.visible;
       });
-    } else {
-      formattedNodes = filteredData.map(function (dataItem, index) {
-        return render === null || render === void 0 ? void 0 : render(dataItem, index, 1);
-      });
     }
 
-    return formattedNodes;
+    return filteredData.map(function (dataItem, index) {
+      return render === null || render === void 0 ? void 0 : render(dataItem, index, 1);
+    });
   }, [searchKeywordState, expandItemValues, filteredData, flattenNodes, formatVirtualizedTreeData, virtualized]);
   var focusActiveNode = (0, _react.useCallback)(function () {
     (0, _treeUtils.focusToActiveTreeNode)({
@@ -437,10 +435,13 @@ var TreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     (_targetRef$current2 = targetRef.current) === null || _targetRef$current2 === void 0 ? void 0 : _targetRef$current2.focus();
   }, [activeNode, setSearchKeyword, valueKey]);
   (0, _Picker.usePublicMethods)(ref, {
+    rootRef: inline ? treeViewRef : undefined,
     triggerRef: triggerRef,
     overlayRef: overlayRef,
-    targetRef: targetRef
-  }, inline);
+    targetRef: targetRef,
+    listRef: listRef,
+    inline: inline
+  });
   var handleFocusItem = (0, _react.useCallback)(function (key) {
     var focusableItems = (0, _treeUtils.getFocusableItems)(filteredData, {
       disabledItemValues: disabledItemValues,
@@ -470,11 +471,13 @@ var TreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     }
   }, [searchKeywordState, expandItemValues, filteredData, focusItemValue, treeNodesRefs, treePrefix, valueKey, childrenKey, disabledItemValues]);
   var handleLeftArrow = (0, _react.useCallback)(function () {
+    if ((0, _isNil2.default)(focusItemValue)) return;
     var focusItem = (0, _treeUtils.getActiveItem)(focusItemValue, flattenNodes, valueKey);
     (0, _treeUtils.leftArrowHandler)({
       focusItem: focusItem,
       expand: expandItemValues.includes(focusItem === null || focusItem === void 0 ? void 0 : focusItem[valueKey]),
       onExpand: handleExpand,
+      childrenKey: childrenKey,
       onFocusItem: function onFocusItem() {
         var _focusItem$parent, _focusItem$parent2;
 
@@ -482,8 +485,9 @@ var TreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
         (0, _treeUtils.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'));
       }
     });
-  }, [expandItemValues, flattenNodes, focusItemValue, handleExpand, treeNodesRefs, treePrefix, valueKey]);
+  }, [expandItemValues, flattenNodes, focusItemValue, handleExpand, treeNodesRefs, treePrefix, valueKey, childrenKey]);
   var handleRightArrow = (0, _react.useCallback)(function () {
+    if ((0, _isNil2.default)(focusItemValue)) return;
     var focusItem = (0, _treeUtils.getActiveItem)(focusItemValue, flattenNodes, valueKey);
     (0, _treeUtils.rightArrowHandler)({
       focusItem: focusItem,
@@ -496,10 +500,12 @@ var TreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     });
   }, [focusItemValue, flattenNodes, valueKey, expandItemValues, childrenKey, handleExpand, handleFocusItem]);
   var selectActiveItem = (0, _react.useCallback)(function (event) {
+    if ((0, _isNil2.default)(focusItemValue)) return;
     var activeItem = (0, _treeUtils.getActiveItem)(focusItemValue, flattenNodes, valueKey);
     handleSelect(activeItem, event);
   }, [flattenNodes, valueKey, focusItemValue, handleSelect]);
   var handleClean = (0, _react.useCallback)(function (event) {
+    var nullValue = null;
     var target = event.target; // exclude searchBar
 
     if (target.matches('div[role="searchbox"] > input')) {
@@ -507,7 +513,7 @@ var TreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     }
 
     setValue(null);
-    onChange === null || onChange === void 0 ? void 0 : onChange(null, event);
+    onChange === null || onChange === void 0 ? void 0 : onChange(nullValue, event);
   }, [onChange, setValue]);
   var onPickerKeydown = (0, _Picker.useToggleKeyDownEvent)((0, _extends2.default)({
     toggle: !activeNode || !active,
@@ -577,18 +583,21 @@ var TreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
         key: node[valueKey]
       }, /*#__PURE__*/_react.default.createElement(_TreeNode.default, (0, _extends2.default)({}, nodeProps, {
         ref: function ref(_ref) {
-          return saveTreeNodeRef(node.refKey, _ref);
+          return saveTreeNodeRef(_ref, node.refKey);
         }
       })), /*#__PURE__*/_react.default.createElement("div", {
         className: treePrefix('children')
       }, nodes.map(function (child, i) {
         return renderNode(child, i, layer);
+      }), showIndentLine && /*#__PURE__*/_react.default.createElement("span", {
+        className: treePrefix('indent-line'),
+        style: (0, _treeUtils.getTreeNodeIndent)(rtl, layer - 1, true)
       })));
     }
 
     return /*#__PURE__*/_react.default.createElement(_TreeNode.default, (0, _extends2.default)({
       ref: function ref(_ref2) {
-        return saveTreeNodeRef(node.refKey, _ref2);
+        return saveTreeNodeRef(_ref2, node.refKey);
       },
       key: node[valueKey]
     }, nodeProps));
@@ -616,7 +625,7 @@ var TreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       });
       return visible && /*#__PURE__*/_react.default.createElement(_TreeNode.default, (0, _extends2.default)({
         ref: function ref(_ref4) {
-          return saveTreeNodeRef(node.refKey, _ref4);
+          return saveTreeNodeRef(_ref4, node.refKey);
         },
         key: key
       }, nodeProps));
@@ -624,7 +633,7 @@ var TreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   };
 
   var renderDefaultDragNode = function renderDefaultDragNode() {
-    if (draggable) {
+    if (draggable && !(0, _isNil2.default)(dragNode)) {
       var dragNodeContent = dragNode === null || dragNode === void 0 ? void 0 : dragNode[labelKey];
 
       if ((0, _isFunction2.default)(renderDragNode)) {
@@ -650,7 +659,7 @@ var TreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     return /*#__PURE__*/_react.default.createElement("div", {
       role: "tree",
       id: id ? id + "-listbox" : undefined,
-      ref: inline ? (0, _utils.mergeRefs)(treeViewRef, ref) : treeViewRef,
+      ref: treeViewRef,
       className: classes,
       style: styles,
       onKeyDown: inline ? handleTreeKeyDown : undefined

package/cjs/Uploader/UploadFileItem.d.ts

@@ -7,7 +7,7 @@ export interface UploadFileItemProps extends WithAsProps {
     listType: 'text' | 'picture-text' | 'picture';
     disabled?: boolean;
     className?: string;
-    maxPreviewFileSize: number;
+    maxPreviewFileSize?: number;
     classPrefix?: string;
     removable?: boolean;
     allowReupload?: boolean;

package/cjs/Uploader/UploadFileItem.js

@@ -296,8 +296,8 @@ var UploadFileItem = /*#__PURE__*/_react.default.forwardRef(function (props, ref
 UploadFileItem.displayName = 'UploadFileItem';
 UploadFileItem.propTypes = {
   locale: _propTypes.default.any,
-  file: _propTypes.default.object,
-  listType: _propTypes.default.oneOf(['text', 'picture-text', 'picture']),
+  file: _propTypes.default.object.isRequired,
+  listType: _propTypes.default.oneOf(['text', 'picture-text', 'picture']).isRequired,
   disabled: _propTypes.default.bool,
   className: _propTypes.default.string,
   maxPreviewFileSize: _propTypes.default.number,

package/cjs/Uploader/UploadTrigger.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { UploaderLocale } from '../locales';
 export interface UploadTriggerProps {
-    as: React.ElementType | string;
+    as?: React.ElementType;
     name?: string;
     multiple?: boolean;
     disabled?: boolean;

package/cjs/Uploader/UploadTrigger.js

@@ -45,13 +45,13 @@ var UploadTrigger = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
       onDragOver = props.onDragOver,
       onDrop = props.onDrop,
       rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "name", "accept", "multiple", "disabled", "readOnly", "children", "classPrefix", "className", "draggable", "locale", "onChange", "onDragEnter", "onDragLeave", "onDragOver", "onDrop"]);
-  var rootRef = (0, _react.useRef)();
+  var rootRef = (0, _react.useRef)(null);
 
   var _useState = (0, _react.useState)(false),
       dragOver = _useState[0],
       setDragOver = _useState[1];
 
-  var inputRef = (0, _react.useRef)();
+  var inputRef = (0, _react.useRef)(null);
 
   var _useClassNames = (0, _utils.useClassNames)(classPrefix),
       merge = _useClassNames.merge,
@@ -164,7 +164,6 @@ UploadTrigger.propTypes = {
   classPrefix: _propTypes.default.string,
   className: _propTypes.default.string,
   children: _propTypes.default.node,
-  as: _propTypes.default.elementType,
   draggable: _propTypes.default.bool,
   onDragEnter: _propTypes.default.func,
   onDragLeave: _propTypes.default.func,