rsuite 5.0.0 → 5.1.0

package/cjs/Slider/Slider.js

@@ -29,15 +29,6 @@ var _utils2 = require("./utils");
 
 var _Plaintext = _interopRequireDefault(require("../Plaintext"));
 
-var defaultProps = {
-  as: 'div',
-  classPrefix: 'slider',
-  min: 0,
-  max: 100,
-  step: 1,
-  defaultValue: 0,
-  tooltip: true
-};
 var sliderPropTypes = {
   min: _propTypes.default.number,
   max: _propTypes.default.number,
@@ -63,17 +54,14 @@ var sliderPropTypes = {
   renderTooltip: _propTypes.default.func,
   getAriaValueText: _propTypes.default.func
 };
-/**
- * fixme: Should contain an input
- */
-
 exports.sliderPropTypes = sliderPropTypes;
 
 var Slider = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var ariaLabel = props['aria-label'],
       ariaLabelledby = props['aria-labelledby'],
       ariaValuetext = props['aria-valuetext'],
-      Componnet = props.as,
+      _props$as = props.as,
+      Componnet = _props$as === void 0 ? 'div' : _props$as,
       graduated = props.graduated,
       className = props.className,
       barClassName = props.barClassName,
@@ -82,16 +70,22 @@ var Slider = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       disabled = props.disabled,
       readOnly = props.readOnly,
       plaintext = props.plaintext,
-      classPrefix = props.classPrefix,
-      min = props.min,
+      _props$classPrefix = props.classPrefix,
+      classPrefix = _props$classPrefix === void 0 ? 'slider' : _props$classPrefix,
+      _props$min = props.min,
+      min = _props$min === void 0 ? 0 : _props$min,
       handleClassName = props.handleClassName,
       handleStyle = props.handleStyle,
       handleTitle = props.handleTitle,
-      tooltip = props.tooltip,
-      step = props.step,
-      defaultValue = props.defaultValue,
+      _props$tooltip = props.tooltip,
+      tooltip = _props$tooltip === void 0 ? true : _props$tooltip,
+      _props$step = props.step,
+      step = _props$step === void 0 ? 1 : _props$step,
+      _props$defaultValue = props.defaultValue,
+      defaultValue = _props$defaultValue === void 0 ? 0 : _props$defaultValue,
       valueProp = props.value,
-      maxProp = props.max,
+      _props$max = props.max,
+      maxProp = _props$max === void 0 ? 100 : _props$max,
       getAriaValueText = props.getAriaValueText,
       renderTooltip = props.renderTooltip,
       renderMark = props.renderMark,
@@ -267,7 +261,6 @@ var Slider = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     onDragMove: handleChangeValue,
     onKeyDown: handleKeyDown,
     onDragEnd: handleChangeCommitted,
-    role: "slider",
     tabIndex: disabled || readOnly ? null : 0,
     "aria-orientation": vertical ? 'vertical' : 'horizontal',
     "aria-valuenow": value,
@@ -281,7 +274,6 @@ var Slider = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
 });
 
 Slider.displayName = 'Slider';
-Slider.defaultProps = defaultProps;
 Slider.propTypes = sliderPropTypes;
 var _default = Slider;
 exports.default = _default;

package/cjs/Steps/StepItem.js

@@ -25,17 +25,15 @@ var STEP_STATUS_ICON = {
   process: null,
   error: /*#__PURE__*/_react.default.createElement(_Close.default, null)
 };
-var defaultProps = {
-  as: 'div',
-  classPrefix: 'steps-item'
-};
 
 var StepItem = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var _withClassPrefix, _STEP_STATUS_ICON$sta;
 
-  var Component = props.as,
+  var _props$as = props.as,
+      Component = _props$as === void 0 ? 'div' : _props$as,
       className = props.className,
-      classPrefix = props.classPrefix,
+      _props$classPrefix = props.classPrefix,
+      classPrefix = _props$classPrefix === void 0 ? 'steps-item' : _props$classPrefix,
       style = props.style,
       itemWidth = props.itemWidth,
       status = props.status,
@@ -85,7 +83,6 @@ var StepItem = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
 });
 
 StepItem.displayName = 'StepItem';
-StepItem.defaultProps = defaultProps;
 StepItem.propTypes = {
   className: _propTypes.default.string,
   classPrefix: _propTypes.default.string,

package/cjs/Steps/Steps.js

@@ -17,22 +17,19 @@ var _utils = require("../utils");
 
 var _StepItem = _interopRequireDefault(require("./StepItem"));
 
-var defaultProps = {
-  as: 'div',
-  classPrefix: 'steps',
-  currentStatus: 'process',
-  current: 0
-};
-
 var Steps = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
-  var Component = props.as,
-      classPrefix = props.classPrefix,
+  var _props$as = props.as,
+      Component = _props$as === void 0 ? 'div' : _props$as,
+      _props$classPrefix = props.classPrefix,
+      classPrefix = _props$classPrefix === void 0 ? 'steps' : _props$classPrefix,
       className = props.className,
       children = props.children,
       vertical = props.vertical,
       small = props.small,
-      current = props.current,
-      currentStatus = props.currentStatus,
+      _props$current = props.current,
+      current = _props$current === void 0 ? 0 : _props$current,
+      _props$currentStatus = props.currentStatus,
+      currentStatus = _props$currentStatus === void 0 ? 'process' : _props$currentStatus,
       rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "classPrefix", "className", "children", "vertical", "small", "current", "currentStatus"]);
 
   var _useClassNames = (0, _utils.useClassNames)(classPrefix),
@@ -84,7 +81,6 @@ var Steps = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
 
 Steps.Item = _StepItem.default;
 Steps.displayName = 'Steps';
-Steps.defaultProps = defaultProps;
 Steps.propTypes = {
   classPrefix: _propTypes.default.string,
   vertical: _propTypes.default.bool,

package/cjs/Table/Table.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import { TableProps, ColumnProps, ColumnGroupProps } from 'rsuite-table';
-import { StandardProps } from '../@types/common';
+import { Column, Cell, HeaderCell, ColumnGroup, TableProps } from 'rsuite-table';
+import { StandardProps, RsRefForwardingComponent } from '../@types/common';
 export interface TableInstance extends React.Component<TableProps> {
     scrollTop: (top: number) => void;
     scrollLeft: (left: number) => void;
@@ -13,13 +13,13 @@ export interface CellProps extends StandardProps {
     /** Row Data */
     rowData?: any;
 }
-interface TableComponent extends React.ForwardRefExoticComponent<TableProps & {
+interface TableComponent extends RsRefForwardingComponent<'div', TableProps & {
     ref?: React.Ref<TableInstance>;
 }> {
-    Column: React.ComponentType<ColumnProps>;
-    ColumnGroup: React.ComponentType<ColumnGroupProps>;
-    Cell: React.ComponentType<CellProps>;
-    HeaderCell: React.ComponentType<StandardProps>;
+    Column: typeof Column;
+    Cell: typeof Cell;
+    HeaderCell: typeof HeaderCell;
+    ColumnGroup: typeof ColumnGroup;
 }
 declare const Table: TableComponent;
 export default Table;

package/cjs/Table/Table.js

@@ -17,7 +17,9 @@ var _utils = require("../utils");
 
 var Table = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var localeProp = props.locale,
-      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["locale"]);
+      _props$loadAnimation = props.loadAnimation,
+      loadAnimation = _props$loadAnimation === void 0 ? true : _props$loadAnimation,
+      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["locale", "loadAnimation"]);
 
   var _useCustom = (0, _utils.useCustom)('Table', localeProp),
       locale = _useCustom.locale,
@@ -26,7 +28,8 @@ var Table = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   return /*#__PURE__*/_react.default.createElement(_rsuiteTable.Table, (0, _extends2.default)({}, rest, {
     rtl: rtl,
     ref: ref,
-    locale: locale
+    locale: locale,
+    loadAnimation: loadAnimation
   }));
 });
 
@@ -35,8 +38,5 @@ Table.Column = _rsuiteTable.Column;
 Table.HeaderCell = _rsuiteTable.HeaderCell;
 Table.ColumnGroup = _rsuiteTable.ColumnGroup;
 Table.displayName = 'Table';
-Table.defaultProps = {
-  loadAnimation: true
-};
 var _default = Table;
 exports.default = _default;

package/cjs/TagInput/index.js

@@ -16,8 +16,10 @@ var _react = _interopRequireWildcard(require("react"));
 var _InputPicker = _interopRequireWildcard(require("../InputPicker/InputPicker"));
 
 var TagInput = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
-  var tagProps = props.tagProps,
-      trigger = props.trigger,
+  var _props$tagProps = props.tagProps,
+      tagProps = _props$tagProps === void 0 ? {} : _props$tagProps,
+      _props$trigger = props.trigger,
+      trigger = _props$trigger === void 0 ? 'Enter' : _props$trigger,
       value = props.value,
       defaultValue = props.defaultValue,
       rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["tagProps", "trigger", "value", "defaultValue"]);
@@ -49,10 +51,6 @@ var TagInput = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   })));
 });
 
-TagInput.defaultProps = {
-  trigger: 'Enter',
-  tagProps: {}
-};
 TagInput.displayName = 'TagInput';
 var _default = TagInput;
 exports.default = _default;

package/cjs/TagPicker/index.d.ts

@@ -7,7 +7,7 @@ export interface TagPickerProps extends InputPickerProps {
     /**
      * Set the trigger for creating tags. only valid when creatable
      */
-    trigger: TriggerType | TriggerType[];
+    trigger?: TriggerType | TriggerType[];
 }
 declare const TagPicker: PickerComponent<TagPickerProps>;
 export default TagPicker;

package/cjs/TagPicker/index.js

@@ -16,8 +16,10 @@ var _react = _interopRequireWildcard(require("react"));
 var _InputPicker = _interopRequireWildcard(require("../InputPicker/InputPicker"));
 
 var TagPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
-  var tagProps = props.tagProps,
-      trigger = props.trigger,
+  var _props$tagProps = props.tagProps,
+      tagProps = _props$tagProps === void 0 ? {} : _props$tagProps,
+      _props$trigger = props.trigger,
+      trigger = _props$trigger === void 0 ? 'Enter' : _props$trigger,
       rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["tagProps", "trigger"]);
   var contextValue = (0, _react.useMemo)(function () {
     return {
@@ -33,10 +35,6 @@ var TagPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   })));
 });
 
-TagPicker.defaultProps = {
-  trigger: 'Enter',
-  tagProps: {}
-};
 TagPicker.displayName = 'TagPicker';
 var _default = TagPicker;
 exports.default = _default;

package/cjs/Timeline/Timeline.js

@@ -19,19 +19,15 @@ var _TimelineItem = _interopRequireDefault(require("./TimelineItem"));
 
 var _utils = require("../utils");
 
-var defaultProps = {
-  as: 'ul',
-  // TODO: Consider using <ol>?
-  classPrefix: 'timeline',
-  align: 'left'
-};
-
 var Timeline = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var children = props.children,
-      Component = props.as,
-      classPrefix = props.classPrefix,
+      _props$as = props.as,
+      Component = _props$as === void 0 ? 'ul' : _props$as,
+      _props$classPrefix = props.classPrefix,
+      classPrefix = _props$classPrefix === void 0 ? 'timeline' : _props$classPrefix,
       className = props.className,
-      align = props.align,
+      _props$align = props.align,
+      align = _props$align === void 0 ? 'left' : _props$align,
       endless = props.endless,
       rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["children", "as", "classPrefix", "className", "align", "endless"]);
 
@@ -63,7 +59,6 @@ var Timeline = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
 
 Timeline.Item = _TimelineItem.default;
 Timeline.displayName = 'Timeline';
-Timeline.defaultProps = defaultProps;
 Timeline.propTypes = {
   as: _propTypes.default.elementType,
   className: _propTypes.default.string,

package/cjs/Timeline/TimelineItem.js

@@ -15,15 +15,12 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _utils = require("../utils");
 
-var defaultProps = {
-  as: 'li',
-  classPrefix: 'timeline-item'
-};
-
 var TimelineItem = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
-  var Component = props.as,
+  var _props$as = props.as,
+      Component = _props$as === void 0 ? 'li' : _props$as,
       children = props.children,
-      classPrefix = props.classPrefix,
+      _props$classPrefix = props.classPrefix,
+      classPrefix = _props$classPrefix === void 0 ? 'timeline-item' : _props$classPrefix,
       last = props.last,
       className = props.className,
       dot = props.dot,
@@ -55,7 +52,6 @@ var TimelineItem = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
 });
 
 TimelineItem.displayName = 'TimelineItem';
-TimelineItem.defaultProps = defaultProps;
 TimelineItem.propTypes = {
   last: _propTypes.default.bool,
   dot: _propTypes.default.node,

package/cjs/Toggle/Toggle.d.ts

@@ -8,6 +8,8 @@ export interface ToggleProps extends WithAsProps {
     plaintext?: boolean;
     /** Make the control readonly */
     readOnly?: boolean;
+    /** Whether the checked state is being updated */
+    loading?: boolean;
     /** Checked（Controlled) */
     checked?: boolean;
     /** Default checked */

package/cjs/Toggle/Toggle.js

@@ -19,29 +19,30 @@ var _utils = require("../utils");
 
 var _Plaintext = _interopRequireDefault(require("../Plaintext"));
 
-var defaultProps = {
-  as: 'span',
-  classPrefix: 'btn-toggle'
-};
+var _Loader = _interopRequireDefault(require("../Loader"));
+
 /**
  * fixme: Should contain an input[type=checkbox]
  */
-
 var Toggle = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
-  var Component = props.as,
+  var _props$as = props.as,
+      Component = _props$as === void 0 ? 'span' : _props$as,
       disabled = props.disabled,
       readOnly = props.readOnly,
+      _props$loading = props.loading,
+      loading = _props$loading === void 0 ? false : _props$loading,
       plaintext = props.plaintext,
       className = props.className,
       checkedChildren = props.checkedChildren,
       unCheckedChildren = props.unCheckedChildren,
-      classPrefix = props.classPrefix,
+      _props$classPrefix = props.classPrefix,
+      classPrefix = _props$classPrefix === void 0 ? 'btn-toggle' : _props$classPrefix,
       checkedProp = props.checked,
       defaultChecked = props.defaultChecked,
       size = props.size,
       localeProp = props.locale,
       onChange = props.onChange,
-      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "disabled", "readOnly", "plaintext", "className", "checkedChildren", "unCheckedChildren", "classPrefix", "checked", "defaultChecked", "size", "locale", "onChange"]);
+      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "disabled", "readOnly", "loading", "plaintext", "className", "checkedChildren", "unCheckedChildren", "classPrefix", "checked", "defaultChecked", "size", "locale", "onChange"]);
 
   var _useControlled = (0, _utils.useControlled)(checkedProp, defaultChecked),
       checked = _useControlled[0],
@@ -57,7 +58,8 @@ var Toggle = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
 
   var classes = merge(className, withClassPrefix(size, {
     checked: checked,
-    disabled: disabled
+    disabled: disabled,
+    loading: loading
   }));
   var inner = checked ? checkedChildren : unCheckedChildren;
   var label = checked ? locale.on : locale.off;
@@ -69,6 +71,14 @@ var Toggle = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     setChecked(!checked);
     onChange === null || onChange === void 0 ? void 0 : onChange(!checked, event);
   }, [checked, disabled, onChange, readOnly, setChecked]);
+  var handleKeyDown = (0, _react.useCallback)(function (event) {
+    if (event.key !== ' ') {
+      return;
+    }
+
+    handleChange(event);
+    event.preventDefault();
+  }, [handleChange]);
 
   if (plaintext) {
     return /*#__PURE__*/_react.default.createElement(_Plaintext.default, null, inner || label);
@@ -79,24 +89,28 @@ var Toggle = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     "aria-checked": checked,
     "aria-disabled": disabled,
     "aria-label": typeof inner === 'string' ? inner : label,
-    tabIndex: -1
+    "aria-busy": loading || undefined,
+    tabIndex: 0
   }, rest, {
     ref: ref,
     className: classes,
-    onClick: handleChange
+    onClick: handleChange,
+    onKeyDown: handleKeyDown
   }), /*#__PURE__*/_react.default.createElement("span", {
     className: prefix('inner')
-  }, inner));
+  }, inner), loading && /*#__PURE__*/_react.default.createElement(_Loader.default, {
+    className: prefix('loader')
+  }));
 });
 
 Toggle.displayName = 'Toggle';
-Toggle.defaultProps = defaultProps;
 Toggle.propTypes = {
   disabled: _propTypes.default.bool,
   checked: _propTypes.default.bool,
   defaultChecked: _propTypes.default.bool,
   checkedChildren: _propTypes.default.node,
   unCheckedChildren: _propTypes.default.node,
+  loading: _propTypes.default.bool,
   classPrefix: _propTypes.default.string,
   className: _propTypes.default.string,
   onChange: _propTypes.default.func

package/cjs/Tooltip/Tooltip.js

@@ -15,15 +15,12 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _utils = require("../utils");
 
-var defaultProps = {
-  as: 'div',
-  classPrefix: 'tooltip'
-};
-
 var Tooltip = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
-  var Component = props.as,
+  var _props$as = props.as,
+      Component = _props$as === void 0 ? 'div' : _props$as,
       className = props.className,
-      classPrefix = props.classPrefix,
+      _props$classPrefix = props.classPrefix,
+      classPrefix = _props$classPrefix === void 0 ? 'tooltip' : _props$classPrefix,
       children = props.children,
       style = props.style,
       visible = props.visible,
@@ -47,7 +44,6 @@ var Tooltip = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
 });
 
 Tooltip.displayName = 'Tooltip';
-Tooltip.defaultProps = defaultProps;
 Tooltip.propTypes = {
   visible: _propTypes.default.bool,
   classPrefix: _propTypes.default.string,

package/cjs/Tree/Tree.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { StandardProps, ItemDataType, RsRefForwardingComponent } from '../@types/common';
+import { ListProps } from 'react-virtualized/dist/commonjs/List';
 /**
  * Tree Node Drag Type
  */
@@ -44,6 +45,11 @@ export interface TreeBaseProps<ValueType = string | number, ItemDataType = Recor
     searchable?: boolean;
     /** Whether using virtualized list */
     virtualized?: boolean;
+    /**
+     * List-related properties in `react-virtualized`
+     * https://github.com/bvaughn/react-virtualized/blob/master/docs/List.md#prop-types
+     */
+    listProps?: ListProps;
     /** Expand all nodes By default */
     defaultExpandAll?: boolean;
     /** searchKeyword (Controlled) */

package/cjs/TreePicker/TreeNode.js

@@ -40,9 +40,11 @@ var TreeNode = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       loading = _ref.loading,
       nodeData = _ref.nodeData,
       className = _ref.className,
-      classPrefix = _ref.classPrefix,
+      _ref$classPrefix = _ref.classPrefix,
+      classPrefix = _ref$classPrefix === void 0 ? 'tree-node' : _ref$classPrefix,
       disabled = _ref.disabled,
-      visible = _ref.visible,
+      _ref$visible = _ref.visible,
+      visible = _ref$visible === void 0 ? true : _ref$visible,
       draggable = _ref.draggable,
       expand = _ref.expand,
       focus = _ref.focus,
@@ -217,10 +219,6 @@ var TreeNode = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   }), renderIcon(), renderLabel()) : null;
 });
 TreeNode.displayName = 'TreePickerNode';
-TreeNode.defaultProps = {
-  visible: true,
-  classPrefix: 'tree-node'
-};
 TreeNode.propTypes = {
   as: _propTypes.default.elementType,
   rtl: _propTypes.default.bool,

package/cjs/TreePicker/TreePicker.js

@@ -7,10 +7,10 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 exports.__esModule = true;
 exports.default = exports.maxTreeHeight = void 0;
 
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
 var _isFunction2 = _interopRequireDefault(require("lodash/isFunction"));
 
 var _isNil2 = _interopRequireDefault(require("lodash/isNil"));
@@ -40,48 +40,54 @@ var _TreeContext = _interopRequireDefault(require("../Tree/TreeContext"));
 // default value for virtualized
 var maxTreeHeight = 320;
 exports.maxTreeHeight = maxTreeHeight;
-var defaultProps = (0, _extends2.default)({}, _Picker.listPickerDefaultProps, {
-  classPrefix: 'picker',
-  as: 'div',
-  height: 360,
-  appearance: 'default',
-  searchable: true,
-  cleanable: true,
-  menuAutoWidth: true,
-  placement: 'bottomStart'
-});
+var emptyArray = [];
 
 var TreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
-  var Component = props.as,
-      data = props.data,
+  var _props$as = props.as,
+      Component = _props$as === void 0 ? 'div' : _props$as,
+      _props$data = props.data,
+      data = _props$data === void 0 ? emptyArray : _props$data,
+      _props$appearance = props.appearance,
+      appearance = _props$appearance === void 0 ? 'default' : _props$appearance,
       style = props.style,
       controlledValue = props.value,
       overrideLocale = props.locale,
-      height = props.height,
+      _props$height = props.height,
+      height = _props$height === void 0 ? 360 : _props$height,
       className = props.className,
       disabled = props.disabled,
-      placement = props.placement,
-      cleanable = props.cleanable,
+      _props$placement = props.placement,
+      placement = _props$placement === void 0 ? 'bottomStart' : _props$placement,
+      _props$cleanable = props.cleanable,
+      cleanable = _props$cleanable === void 0 ? true : _props$cleanable,
       menuStyle = props.menuStyle,
-      searchable = props.searchable,
+      _props$searchable = props.searchable,
+      searchable = _props$searchable === void 0 ? true : _props$searchable,
       virtualized = props.virtualized,
-      classPrefix = props.classPrefix,
+      _props$classPrefix = props.classPrefix,
+      classPrefix = _props$classPrefix === void 0 ? 'picker' : _props$classPrefix,
       defaultValue = props.defaultValue,
       placeholder = props.placeholder,
       searchKeyword = props.searchKeyword,
       menuClassName = props.menuClassName,
-      menuAutoWidth = props.menuAutoWidth,
+      _props$menuAutoWidth = props.menuAutoWidth,
+      menuAutoWidth = _props$menuAutoWidth === void 0 ? true : _props$menuAutoWidth,
       searchBy = props.searchBy,
       toggleAs = props.toggleAs,
-      labelKey = props.labelKey,
-      valueKey = props.valueKey,
-      childrenKey = props.childrenKey,
+      _props$labelKey = props.labelKey,
+      labelKey = _props$labelKey === void 0 ? 'label' : _props$labelKey,
+      _props$valueKey = props.valueKey,
+      valueKey = _props$valueKey === void 0 ? 'value' : _props$valueKey,
+      _props$childrenKey = props.childrenKey,
+      childrenKey = _props$childrenKey === void 0 ? 'children' : _props$childrenKey,
       draggable = props.draggable,
       defaultExpandAll = props.defaultExpandAll,
-      disabledItemValues = props.disabledItemValues,
+      _props$disabledItemVa = props.disabledItemValues,
+      disabledItemValues = _props$disabledItemVa === void 0 ? emptyArray : _props$disabledItemVa,
       controlledExpandItemValues = props.expandItemValues,
       defaultExpandItemValues = props.defaultExpandItemValues,
       id = props.id,
+      listProps = props.listProps,
       getChildren = props.getChildren,
       renderTreeIcon = props.renderTreeIcon,
       renderTreeNode = props.renderTreeNode,
@@ -105,7 +111,7 @@ 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", "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"]);
+      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)();
@@ -659,7 +665,7 @@ var TreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     }, function (_ref5) {
       var height = _ref5.height,
           width = _ref5.width;
-      return /*#__PURE__*/_react.default.createElement(_VirtualizedList.List, {
+      return /*#__PURE__*/_react.default.createElement(_VirtualizedList.List, (0, _extends2.default)({
         ref: listRef,
         width: width,
         height: height,
@@ -667,7 +673,7 @@ var TreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
         rowCount: formattedNodes.length,
         rowRenderer: renderVirtualListNode(formattedNodes),
         scrollToAlignment: "center"
-      });
+      }, listProps));
     }) : formattedNodes), renderDefaultDragNode());
   };
 
@@ -720,8 +726,11 @@ var TreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   }
 
   var _usePickerClassName = (0, _Picker.usePickerClassName)((0, _extends2.default)({}, props, {
+    classPrefix: classPrefix,
+    appearance: appearance,
     hasValue: hasValidValue,
-    name: 'tree'
+    name: 'tree',
+    cleanable: cleanable
   })),
       classes = _usePickerClassName[0],
       usedClassNamePropKeys = _usePickerClassName[1];
@@ -745,6 +754,7 @@ var TreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   }, /*#__PURE__*/_react.default.createElement(_Picker.PickerToggle, (0, _extends2.default)({}, (0, _omit2.default)(rest, [].concat(_Picker.omitTriggerPropKeys, usedClassNamePropKeys, ['cascade'])), {
     id: id,
     ref: targetRef,
+    appearance: appearance,
     onKeyDown: onPickerKeydown,
     onClean: (0, _utils.createChainedFunction)(handleClean, onClean),
     cleanable: cleanable && !disabled,
@@ -758,7 +768,6 @@ var TreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
 });
 
 TreePicker.displayName = 'TreePicker';
-TreePicker.defaultProps = defaultProps;
 TreePicker.propTypes = (0, _extends2.default)({}, _Picker.listPickerPropTypes, {
   locale: _propTypes.default.any,
   appearance: _propTypes.default.oneOf(['default', 'subtle']),