rsuite 5.16.0 → 5.16.3

package/esm/Cascader/utils.js

@@ -1,8 +1,8 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
 import { useState, useMemo } from 'react';
 import slice from 'lodash/slice';
 import { shallowEqual, useUpdateEffect } from '../utils';
 import { findNodeOfTree } from '../utils/treeUtils';
+import { attachParent } from '../utils/attachParent';
 export function getColumnsAndPaths(data, value, options) {
   var childrenKey = options.childrenKey,
       valueKey = options.valueKey,
@@ -26,9 +26,7 @@ export function getColumnsAndPaths(data, value, options) {
 
         if (node) {
           columns.push(children.map(function (item) {
-            return _extends({}, item, {
-              parent: items[i]
-            });
+            return attachParent(item, items[i]);
           }));
           paths.push(node.active);
           return {

package/esm/CheckPicker/CheckPicker.d.ts

@@ -1,10 +1,10 @@
 import React, { Ref } from 'react';
 import { PickerLocale } from '../locales';
-import { PickerInstance } from '../Picker';
+import { PickerInstance, PickerToggleProps } from '../Picker';
 import { ItemDataType, FormControlPickerProps } from '../@types/common';
 import type { MultipleSelectProps } from '../SelectPicker';
 export declare type ValueType = (number | string)[];
-export interface CheckPickerProps<T> extends FormControlPickerProps<T[], PickerLocale, ItemDataType<T>>, MultipleSelectProps<T> {
+export interface CheckPickerProps<T> extends FormControlPickerProps<T[], PickerLocale, ItemDataType<T>>, MultipleSelectProps<T>, Pick<PickerToggleProps, 'label' | 'caretAs'> {
     /** Top the selected option in the options */
     sticky?: boolean;
     /** A picker that can be counted */

package/esm/CheckPicker/test/CheckPicker.test.js

@@ -68,4 +68,18 @@ var pickerRef = /*#__PURE__*/React.createRef();
 React.createElement(CheckPicker, {
   ref: pickerRef,
   data: []
+}); // With a label
+
+/*#__PURE__*/
+React.createElement(CheckPicker, {
+  label: "User",
+  data: []
+});
+
+/*#__PURE__*/
+React.createElement(CheckPicker, {
+  caretAs: function caretAs() {
+    return /*#__PURE__*/React.createElement("div", null);
+  },
+  data: []
 });

package/esm/CheckTreePicker/CheckTreePicker.d.ts

@@ -1,10 +1,10 @@
 import React from 'react';
 import { PickerLocale } from '../locales';
-import { PickerComponent } from '../Picker';
+import { PickerComponent, PickerToggleProps } from '../Picker';
 import { TreeBaseProps } from '../Tree/Tree';
 import { FormControlPickerProps, ItemDataType } from '../@types/common';
 export declare type ValueType = (string | number)[];
-export interface CheckTreePickerProps<T = ValueType> extends TreeBaseProps<T, ItemDataType>, FormControlPickerProps<T, PickerLocale, ItemDataType> {
+export interface CheckTreePickerProps<T = ValueType> extends TreeBaseProps<T, ItemDataType>, FormControlPickerProps<T, PickerLocale, ItemDataType>, Pick<PickerToggleProps, 'caretAs'> {
     /** Tree node cascade */
     cascade?: boolean;
     /** A picker that can be counted */

package/esm/CheckTreePicker/CheckTreePicker.js

@@ -566,6 +566,11 @@ var CheckTreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     var visibleChildren = _isUndefined(searchKeywordState) || searchKeywordState.length === 0 ? !!children : hasVisibleChildren(node, childrenKey);
 
     var nodeProps = _extends({}, getTreeNodeProps(_extends({}, node, {
+      /**
+       * spread operator dont copy unenumerable properties
+       * so we need to copy them manually
+       */
+      parent: node.parent,
       expand: expand
     }), layer), {
       hasChildren: visibleChildren

package/esm/CheckTreePicker/test/CheckTreePicker.test.d.ts

@@ -0,0 +1 @@
+export {};

package/esm/CheckTreePicker/test/CheckTreePicker.test.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import CheckTreePicker from '../CheckTreePicker';
+
+/*#__PURE__*/
+React.createElement(CheckTreePicker, {
+  caretAs: function caretAs() {
+    return /*#__PURE__*/React.createElement("div", null);
+  },
+  data: []
+});

package/esm/CheckTreePicker/utils.js

@@ -3,6 +3,7 @@ import _isUndefined from "lodash/isUndefined";
 import _isNil from "lodash/isNil";
 import { shallowEqual, CHECK_STATE } from '../utils';
 import { getChildrenByFlattenNodes } from '../utils/treeUtils';
+import { attachParent } from '../utils/attachParent';
 export function isEveryChildChecked(nodes, parent) {
   if (_isNil(parent.refKey) || _isNil(nodes[parent.refKey])) {
     return false;
@@ -120,7 +121,7 @@ export function getFormattedTree(data, nodes, props) {
       formatted.check = curNode.check;
       formatted.expand = curNode.expand;
       formatted.uncheckable = curNode.uncheckable;
-      formatted.parent = curNode.parent;
+      attachParent(formatted, curNode.parent);
       formatted.checkState = checkState;
 
       if (((_node$childrenKey = node[childrenKey]) === null || _node$childrenKey === void 0 ? void 0 : _node$childrenKey.length) > 0) {

package/esm/CustomProvider/CustomProvider.js

@@ -21,7 +21,8 @@ var CustomProvider = function CustomProvider(props) {
   var toasters = React.useRef(new Map());
 
   var _usePortal = usePortal({
-    container: container
+    container: container,
+    waitMount: true
   }),
       Portal = _usePortal.Portal;
 
@@ -45,7 +46,9 @@ var CustomProvider = function CustomProvider(props) {
   }, [classPrefix, theme]);
   return /*#__PURE__*/React.createElement(Provider, {
     value: value
-  }, children, /*#__PURE__*/React.createElement(Portal, null, toastPlacements.map(function (placement) {
+  }, children, /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement("div", {
+    className: "rs-toast-provider"
+  }, toastPlacements.map(function (placement) {
     return /*#__PURE__*/React.createElement(ToastContainer, {
       key: placement,
       placement: placement,
@@ -53,7 +56,7 @@ var CustomProvider = function CustomProvider(props) {
         toasters.current.set(placement, _ref);
       }
     });
-  })));
+  }))));
 };
 
 export { CustomContext, Consumer as CustomConsumer };

package/esm/DatePicker/DatePicker.d.ts

@@ -5,7 +5,7 @@ import { PickerToggleProps } from '../Picker';
 import { FormControlBaseProps, PickerBaseProps, RsRefForwardingComponent } from '../@types/common';
 export type { RangeType } from './Toolbar';
 export interface DatePickerProps extends PickerBaseProps<DatePickerLocale>, FormControlBaseProps<Date | null>, Pick<PickerToggleProps, 'caretAs' | 'readOnly' | 'plaintext'> {
-    /** Configure shortcut options */
+    /** Predefined date Ranges */
     ranges?: RangeType<Date>[];
     /** Calendar panel default presentation date and time */
     calendarDefaultDate?: Date;

package/esm/DatePicker/Toolbar.js

@@ -80,7 +80,7 @@ var Toolbar = /*#__PURE__*/React.forwardRef(function (props, ref) {
         return;
       }
 
-      onClickShortcut === null || onClickShortcut === void 0 ? void 0 : onClickShortcut(value, closeOverlay !== null && closeOverlay !== void 0 ? closeOverlay : false, event);
+      onClickShortcut === null || onClickShortcut === void 0 ? void 0 : onClickShortcut(value, closeOverlay !== false ? true : false, event);
     };
 
     return /*#__PURE__*/React.createElement(Button, {

package/esm/DateRangePicker/Calendar.d.ts

@@ -19,7 +19,6 @@ export interface CalendarProps extends WithAsProps, Omit<CalendarCoreProps, Omit
     onToggleMeridian: (index: number, event: React.MouseEvent) => void;
     onMouseMove?: (date: Date) => void;
     onSelect?: (date: Date, event: React.SyntheticEvent) => void;
-    showOneCalendar?: boolean;
     showWeekNumbers?: boolean;
     value?: [] | [Date] | [Date, Date];
 }

package/esm/DateRangePicker/Calendar.js

@@ -2,18 +2,9 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import PropTypes from 'prop-types';
 import React, { useCallback, useState } from 'react';
-import { addMonths, isAfter, isSameMonth, setDate } from '../utils/dateUtils';
+import { addMonths, isSameMonth } from '../utils/dateUtils';
 import CalendarCore, { CalendarState } from '../Calendar/Calendar';
 import { DATERANGE_DISABLED_TARGET } from '../utils';
-
-/**
- * Omit the time in the date, which is used to compare and judge the date.
- * eg: isAfter/isBefore
- */
-function omitTime(date) {
-  return new Date(date.getFullYear(), date.getMonth(), date.getDate());
-}
-
 var Calendar = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _props$as = props.as,
       Component = _props$as === void 0 ? CalendarCore : _props$as,
@@ -28,10 +19,9 @@ var Calendar = /*#__PURE__*/React.forwardRef(function (props, ref) {
       onChangeCalendarDate = props.onChangeCalendarDate,
       onChangeCalendarTime = props.onChangeCalendarTime,
       onToggleMeridian = props.onToggleMeridian,
-      showOneCalendar = props.showOneCalendar,
       _props$value = props.value,
       value = _props$value === void 0 ? [] : _props$value,
-      rest = _objectWithoutPropertiesLoose(props, ["as", "calendarDate", "format", "disabledDate", "index", "limitEndYear", "onChangeCalendarDate", "onChangeCalendarTime", "onToggleMeridian", "showOneCalendar", "value"]);
+      rest = _objectWithoutPropertiesLoose(props, ["as", "calendarDate", "format", "disabledDate", "index", "limitEndYear", "onChangeCalendarDate", "onChangeCalendarTime", "onToggleMeridian", "value"]);
 
   var _useState = useState(),
       calendarState = _useState[0],
@@ -71,33 +61,6 @@ var Calendar = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var handleMoveBackward = useCallback(function () {
     onMoveBackward === null || onMoveBackward === void 0 ? void 0 : onMoveBackward(addMonths(getCalendarDate(), -1));
   }, [getCalendarDate, onMoveBackward]);
-  var disabledBackward = useCallback(function () {
-    // Do not disable the Backward button on the first calendar.
-    if (index === 0) {
-      return false;
-    }
-
-    var startDate = setDate(addMonths(calendarDate[0], 1), 1);
-    var endDate = setDate(omitTime(calendarDate[1]), 1);
-    var after = isAfter(endDate, startDate);
-    return !after;
-  }, [calendarDate, index]);
-  var disabledForward = useCallback(function () {
-    // If only one calendar is displayed, do not disable
-    if (showOneCalendar) {
-      return false;
-    } // Do not disable the Forward button on the second calendar.
-
-
-    if (index === 1) {
-      return false;
-    }
-
-    var startDate = setDate(addMonths(omitTime(calendarDate[0]), 1), 1);
-    var endDate = setDate(omitTime(calendarDate[1]), 1);
-    var after = isAfter(endDate, startDate);
-    return !after;
-  }, [calendarDate, index, showOneCalendar]);
   var disabledMonth = useCallback(function (date) {
     return disabledDate === null || disabledDate === void 0 ? void 0 : disabledDate(date, value, DATERANGE_DISABLED_TARGET.CALENDAR);
   }, [disabledDate, value]);
@@ -105,9 +68,7 @@ var Calendar = /*#__PURE__*/React.forwardRef(function (props, ref) {
     format: format,
     calendarState: calendarState,
     dateRange: value,
-    disabledBackward: disabledBackward(),
     disabledDate: disabledMonth,
-    disabledForward: disabledForward(),
     inSameMonth: inSameMonth,
     index: index,
     limitEndYear: limitEndYear,

package/esm/DateRangePicker/DateRangePicker.d.ts

@@ -3,7 +3,7 @@ import { FormControlBaseProps, PickerBaseProps } from '../@types/common';
 import { PickerComponent, PickerToggleProps } from '../Picker';
 import { DisabledDateFunction, RangeType, DateRange } from './types';
 export interface DateRangePickerProps extends PickerBaseProps, FormControlBaseProps<DateRange | null>, Pick<PickerToggleProps, 'caretAs' | 'readOnly' | 'plaintext'> {
-    /** Configure shortcut options */
+    /** Predefined date ranges */
     ranges?: RangeType[];
     /** Format date */
     format?: string;

package/esm/DateRangePicker/DateRangePicker.js

@@ -134,9 +134,10 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
    * If params `value` is not passed, it defaults to [new Date(), addMonth(new Date(), 1)].
    */
 
-  var updateCalendarDate = useCallback(function (value) {
+  var updateCalendarDateRange = useCallback(function (value, calendarKey) {
     setCalendarDate(getCalendarDate({
-      value: value
+      value: value,
+      calendarKey: calendarKey
     }));
   }, []); // if valueProp changed then update selectValue/hoverValue
 
@@ -311,10 +312,10 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
 
     setHoverDateRange(nextSelectDates.length === 2 ? nextSelectDates : [nextSelectDates[0], nextSelectDates[0]]);
     setSelectedDates(nextSelectDates);
-    updateCalendarDate(nextSelectDates);
+    updateCalendarDateRange(nextSelectDates);
     onSelect === null || onSelect === void 0 ? void 0 : onSelect(date, event);
     hasDoneSelect.current = !hasDoneSelect.current;
-  }, [getHoverRangeValue, handleValueUpdate, hoverDateRange, onSelect, oneTap, selectedDates, updateCalendarDate]);
+  }, [getHoverRangeValue, handleValueUpdate, hoverDateRange, onSelect, oneTap, selectedDates, updateCalendarDateRange]);
   /**
    * If `selectValue` changed, there will be the following effects.
    * 1. Check if the selection is completed.
@@ -326,12 +327,12 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     var doneSelected = selectValueLength === 0 || selectValueLength === 2;
     doneSelected && setHoverDateRange(null);
   }, [selectedDates]);
-  var handleChangeCalendarDate = useCallback(function (index, date) {
+  var updateSingleCalendarDate = useCallback(function (index, date) {
     var nextCalendarDate = Array.from(calendarDate);
     nextCalendarDate[index] = date;
-    updateCalendarDate(nextCalendarDate);
-  }, [calendarDate, updateCalendarDate]);
-  var handleChangeCalendarTime = useCallback(function (index, date) {
+    updateCalendarDateRange(nextCalendarDate, index === 0 ? 'start' : 'end');
+  }, [calendarDate, updateCalendarDateRange]);
+  var updateSingleCalendarTime = useCallback(function (index, date) {
     setSelectedDates(function (prev) {
       var next = [].concat(prev);
       var clonedDate = new Date(date.valueOf()); // if next[index] is not empty, only update the time after aligning the year, month and day
@@ -343,8 +344,8 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       next[index] = clonedDate;
       return next;
     });
-    handleChangeCalendarDate(index, date);
-  }, [handleChangeCalendarDate]);
+    updateSingleCalendarDate(index, date);
+  }, [updateSingleCalendarDate]);
   /**
    * The callback triggered when PM/AM is switched.
    */
@@ -379,9 +380,9 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     onOk === null || onOk === void 0 ? void 0 : onOk(selectedDates, event);
   }, [handleValueUpdate, onOk, selectedDates]);
   var handleClean = useCallback(function (event) {
-    updateCalendarDate(null);
+    updateCalendarDateRange(null);
     handleValueUpdate(event, null);
-  }, [handleValueUpdate, updateCalendarDate]);
+  }, [handleValueUpdate, updateCalendarDateRange]);
   /**
    * Callback after the input box value is changed.
    */
@@ -416,9 +417,9 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
 
     setHoverDateRange(selectValue);
     setSelectedDates(selectValue);
-    updateCalendarDate(selectValue);
+    updateCalendarDateRange(selectValue);
   }, // eslint-disable-next-line react-hooks/exhaustive-deps
-  [character, rangeFormatStr, updateCalendarDate]);
+  [character, rangeFormatStr, updateCalendarDateRange]);
   /**
    * The callback after the enter key is triggered on the input
    */
@@ -444,8 +445,8 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     }
 
     setSelectedDates(value !== null && value !== void 0 ? value : []);
-    updateCalendarDate(nextCalendarDate);
-  }, [defaultCalendarValue, updateCalendarDate, setSelectedDates, value]);
+    updateCalendarDateRange(nextCalendarDate);
+  }, [defaultCalendarValue, updateCalendarDateRange, setSelectedDates, value]);
   var handleEntered = useCallback(function () {
     onOpen === null || onOpen === void 0 ? void 0 : onOpen();
     setPickerToggleActive(true);
@@ -522,7 +523,7 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       top: top
     });
 
-    var panelProps = {
+    var calendarProps = {
       calendarDate: calendarDate,
       disabledDate: handleDisabledDate,
       format: formatStr,
@@ -530,12 +531,11 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       isoWeek: isoWeek,
       limitEndYear: limitEndYear,
       locale: locale,
-      showOneCalendar: showOneCalendar,
       showWeekNumbers: showWeekNumbers,
       value: selectedDates,
       showMeridian: showMeridian,
-      onChangeCalendarDate: handleChangeCalendarDate,
-      onChangeCalendarTime: handleChangeCalendarTime,
+      onChangeCalendarDate: updateSingleCalendarDate,
+      onChangeCalendarTime: updateSingleCalendarTime,
       onMouseMove: handleMouseMove,
       onSelect: handleSelectDate,
       onToggleMeridian: handleToggleMeridian,
@@ -556,9 +556,9 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       className: prefix("daterange-calendar-" + (showOneCalendar ? 'single' : 'group'))
     }, /*#__PURE__*/React.createElement(Calendar, _extends({
       index: 0
-    }, panelProps)), !showOneCalendar && /*#__PURE__*/React.createElement(Calendar, _extends({
+    }, calendarProps)), !showOneCalendar && /*#__PURE__*/React.createElement(Calendar, _extends({
       index: 1
-    }, panelProps)))), /*#__PURE__*/React.createElement(Toolbar, {
+    }, calendarProps)))), /*#__PURE__*/React.createElement(Toolbar, {
       locale: locale,
       calendarDate: selectedDates,
       disabledOkBtn: disabledOkButton,

package/esm/DateRangePicker/utils.d.ts

@@ -1,7 +1,8 @@
 import { DateRange, RangeType } from './types';
 export declare const setTimingMargin: (date: any, way?: string) => Date;
-export declare function getCalendarDate({ value }: {
+export declare function getCalendarDate({ value, calendarKey }: {
     value: [] | [Date] | [Date, Date] | null;
+    calendarKey?: 'start' | 'end';
 }): DateRange;
 export declare const getDefaultRanges: () => RangeType[];
 export declare const isSameRange: (source: DateRange | null, dest: DateRange | null, format: string) => boolean;

package/esm/DateRangePicker/utils.js

@@ -9,13 +9,22 @@ export var setTimingMargin = function setTimingMargin(date, way) {
 export function getCalendarDate(_ref) {
   var _value;
 
-  var value = _ref.value;
+  var value = _ref.value,
+      _ref$calendarKey = _ref.calendarKey,
+      calendarKey = _ref$calendarKey === void 0 ? 'start' : _ref$calendarKey;
   // Update calendarDate if the value is not null
   value = (_value = value) !== null && _value !== void 0 ? _value : [];
 
   if (value[0] && value[1]) {
-    var sameMonth = DateUtils.isSameMonth(value[0], value[1]);
-    return [value[0], sameMonth ? DateUtils.addMonths(value[1], 1) : value[1]]; // If only the start date
+    var startMonth = DateUtils.getMonth(value[0]);
+    var endMonth = DateUtils.getMonth(value[1]);
+
+    if (calendarKey === 'start') {
+      return [value[0], startMonth >= endMonth ? DateUtils.addMonths(value[0], 1) : value[1]];
+    } else if (calendarKey === 'end') {
+      return [startMonth >= endMonth ? DateUtils.addMonths(value[1], -1) : value[0], value[1]];
+    } // If only the start date
+
   } else if (value[0]) {
     return [value[0], DateUtils.addMonths(value[0], 1)];
   }

package/esm/InputPicker/InputPicker.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { InputPickerLocale } from '../locales';
-import { PickerComponent } from '../Picker';
+import { PickerComponent, PickerToggleProps } from '../Picker';
 import { TagProps } from '../Tag';
 import { ItemDataType, FormControlPickerProps } from '../@types/common';
 import { SelectProps } from '../SelectPicker';
@@ -24,7 +24,7 @@ interface InputItemDataType extends ItemDataType {
     create?: boolean;
 }
 export declare type ValueType = any;
-export interface InputPickerProps<T = ValueType> extends FormControlPickerProps<T, InputPickerLocale, InputItemDataType>, SelectProps<T> {
+export interface InputPickerProps<T = ValueType> extends FormControlPickerProps<T, InputPickerLocale, InputItemDataType>, SelectProps<T>, Pick<PickerToggleProps, 'caretAs'> {
     tabIndex?: number;
     /** Settings can create new options */
     creatable?: boolean;

package/esm/InputPicker/test/InputPicker.test.d.ts

@@ -0,0 +1 @@
+export {};

package/esm/InputPicker/test/InputPicker.test.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import InputPicker from '../InputPicker';
+
+/*#__PURE__*/
+React.createElement(InputPicker, {
+  caretAs: function caretAs() {
+    return /*#__PURE__*/React.createElement("div", null);
+  },
+  data: []
+});

package/esm/MultiCascader/utils.js

@@ -3,6 +3,7 @@ import uniq from 'lodash/uniq';
 import remove from 'lodash/remove';
 import slice from 'lodash/slice';
 import { flattenTree } from '../utils/treeUtils';
+import { attachParent } from '../utils/attachParent';
 
 /**
  * Get all parents of a node
@@ -167,8 +168,7 @@ export function useFlattenData(data, itemKeys) {
 
   var addFlattenData = useCallback(function (children, parent) {
     var nodes = children.map(function (child) {
-      child.parent = parent;
-      return child;
+      return attachParent(child, parent);
     });
     parent[childrenKey] = nodes;
     setFlattenData([].concat(flattenData, nodes));

package/esm/Overlay/OverlayTrigger.js

@@ -304,7 +304,7 @@ var OverlayTrigger = /*#__PURE__*/React.forwardRef(function (props, ref) {
       triggerEvents.onBlur = createChainedFunction(handleDelayedClose, onBlur);
     }
 
-    if (trigger !== 'none') {
+    if (trigger !== 'none' && followCursor) {
       triggerEvents.onMouseMove = createChainedFunction(handledMoveOverlay, onMouseMove);
     }
   }

package/esm/Panel/Panel.js

@@ -104,21 +104,19 @@ var Panel = /*#__PURE__*/React.forwardRef(function (props, ref) {
       return null;
     }
 
-    var content;
+    var panelTitleElement;
 
     if (! /*#__PURE__*/React.isValidElement(header) || Array.isArray(header)) {
-      content = collapsible ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(AngleDownIcon, {
-        rotate: expanded ? 180 : 0
-      }), /*#__PURE__*/React.createElement("span", {
+      panelTitleElement = /*#__PURE__*/React.createElement("span", {
         className: prefix('title'),
         role: "presentation"
       }, /*#__PURE__*/React.createElement("span", {
         className: expanded ? undefined : 'collapsed'
-      }, header))) : header;
+      }, header));
     } else {
       var _className = merge(prefix('title'), get(header, 'props.className'));
 
-      content = /*#__PURE__*/React.cloneElement(header, {
+      panelTitleElement = /*#__PURE__*/React.cloneElement(header, {
         className: _className
       });
     }
@@ -130,7 +128,10 @@ var Panel = /*#__PURE__*/React.forwardRef(function (props, ref) {
       className: prefix('header'),
       onClick: collapsible ? handleSelect : undefined,
       tabIndex: -1
-    }, content);
+    }, panelTitleElement, collapsible && /*#__PURE__*/React.createElement(AngleDownIcon, {
+      rotate: expanded ? 180 : 0,
+      "data-testid": "caret icon"
+    }));
   };
 
   var classes = merge(className, withClassPrefix({

package/esm/Picker/DropdownMenu.d.ts

@@ -19,7 +19,7 @@ export interface DropdownMenuProps<Multiple = false> extends StandardProps, Omit
     rowHeight?: number;
     rowGroupHeight?: number;
     virtualized?: boolean;
-    listProps?: ListProps;
+    listProps?: Partial<ListProps>;
     /** Custom selected option */
     renderMenuItem?: (itemLabel: React.ReactNode, item: any) => React.ReactNode;
     renderMenuGroup?: (title: React.ReactNode, item: any) => React.ReactNode;

package/esm/SelectPicker/SelectPicker.d.ts

@@ -1,8 +1,8 @@
 import React, { Ref } from 'react';
 import { PickerLocale } from '../locales';
-import { PickerInstance } from '../Picker';
+import { PickerInstance, PickerToggleProps } from '../Picker';
+import { ListProps } from '../Picker/VirtualizedList';
 import { FormControlPickerProps, ItemDataType } from '../@types/common';
-import { ListProps } from 'react-virtualized/dist/commonjs/List';
 export interface SelectProps<T> {
     /** Set group condition key in data */
     groupBy?: string;
@@ -14,7 +14,7 @@ export interface SelectProps<T> {
      * List-related properties in `react-virtualized`
      * https://github.com/bvaughn/react-virtualized/blob/master/docs/List.md#prop-types
      */
-    listProps?: ListProps;
+    listProps?: Partial<ListProps>;
     /** Custom search rules. */
     searchBy?: (keyword: string, label: React.ReactNode, item: ItemDataType) => boolean;
     /** Sort options */
@@ -40,7 +40,13 @@ export interface MultipleSelectProps<T> extends Omit<SelectProps<T>, 'renderValu
     /** Custom render selected items */
     renderValue?: (value: T[], item: ItemDataType<T>[], selectedElement: React.ReactNode) => React.ReactNode;
 }
-export interface SelectPickerProps<T> extends FormControlPickerProps<T, PickerLocale, ItemDataType<T>>, SelectProps<T> {
+export interface SelectPickerProps<T> extends Omit<FormControlPickerProps<T, PickerLocale, ItemDataType<T>>, 'value' | 'defaultValue' | 'onChange'>, SelectProps<T>, Pick<PickerToggleProps, 'caretAs' | 'label'> {
+    /** Initial value */
+    defaultValue?: T;
+    /** Current value of the component. Creates a controlled component */
+    value?: T | null;
+    /** Called after the value has been changed */
+    onChange?: (value: T | null, event: React.SyntheticEvent) => void;
 }
 export interface SelectPickerComponent {
     <T>(props: SelectPickerProps<T> & {

package/esm/SelectPicker/test/SelectPicker.test.js

@@ -56,4 +56,42 @@ var pickerRef = /*#__PURE__*/React.createRef();
 React.createElement(SelectPicker, {
   ref: pickerRef,
   data: []
+}); // With a label
+
+/*#__PURE__*/
+React.createElement(SelectPicker, {
+  label: "User",
+  data: []
+});
+
+/*#__PURE__*/
+React.createElement(SelectPicker, {
+  data: [{
+    label: 'Ascending',
+    value: 'asc'
+  }, {
+    label: 'Descending',
+    value: 'desc'
+  }],
+  value: "asc",
+  onChange: function onChange(value) {
+    expectType(value);
+  }
+});
+
+/*#__PURE__*/
+React.createElement(SelectPicker, {
+  caretAs: function caretAs() {
+    return /*#__PURE__*/React.createElement("div", null);
+  },
+  data: []
+}); // Override the default value of listProps.
+
+/*#__PURE__*/
+React.createElement(SelectPicker, {
+  data: [],
+  virtualized: true,
+  listProps: {
+    rowHeight: 70
+  }
 });

package/esm/Tree/Tree.d.ts

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

package/esm/Tree/test/Tree.test.d.ts

@@ -0,0 +1 @@
+export {};

package/esm/Tree/test/Tree.test.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import Tree from '../Tree'; // Override the default value of listProps.
+
+/*#__PURE__*/
+React.createElement(Tree, {
+  data: [],
+  virtualized: true,
+  listProps: {
+    rowHeight: 70
+  }
+});