rsuite 5.16.1 → 5.16.2

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [5.16.2](https://github.com/rsuite/rsuite/compare/v5.16.1...v5.16.2) (2022-07-28)
+
+### Bug Fixes
+
+- **CustomProvider:** fix warnings caused by server-side rendering ([#2599](https://github.com/rsuite/rsuite/issues/2599)) ([ea05efb](https://github.com/rsuite/rsuite/commit/ea05efba3c53bf7e04ea4caa7b378a762b85af93))
+- **DateRangePicker:** improved experience for date range selection ([#2618](https://github.com/rsuite/rsuite/issues/2618)) ([225fc08](https://github.com/rsuite/rsuite/commit/225fc08e21d43c41d92c1514f67c05eb660bf9dd))
+- **focus:** fix outline style for form components when focused ([#2601](https://github.com/rsuite/rsuite/issues/2601)) ([0e2f9df](https://github.com/rsuite/rsuite/commit/0e2f9dffe5e882fc56727eb8ba8901aaf1b7d7b3))
+- **OverlayTrigger:** fix invalid rendering without followCursor ([#2600](https://github.com/rsuite/rsuite/issues/2600)) ([08abc8e](https://github.com/rsuite/rsuite/commit/08abc8e825af55d8334a6e6057d4f5582a3197ac))
+- **Panel:** allow custom header in collapsible panels ([#2611](https://github.com/rsuite/rsuite/issues/2611)) ([6372d44](https://github.com/rsuite/rsuite/commit/6372d441235b5b65036c257608098df01f93bf6d))
+- **Picker:** add missing caretAs prop declaration ([#2592](https://github.com/rsuite/rsuite/issues/2592)) ([faabba4](https://github.com/rsuite/rsuite/commit/faabba4b32d82f819b5c5431c3d7040798db1765))
+- **Picker:** fix style dependency ([#2612](https://github.com/rsuite/rsuite/issues/2612)) ([0b5b1d6](https://github.com/rsuite/rsuite/commit/0b5b1d60909a069c317f069e9ab235da70eb4aa3))
+- **SelectPicker:** make controlled value nullable ([#2591](https://github.com/rsuite/rsuite/issues/2591)) ([6619a75](https://github.com/rsuite/rsuite/commit/6619a75eca9eabf9bf08dd84dee78f1df0e094ca))
+- **treelike:** fix data item stringify throw error ([#2606](https://github.com/rsuite/rsuite/issues/2606)) ([3a586d2](https://github.com/rsuite/rsuite/commit/3a586d28e075b5bdd95d8df948ce4887570fab1d))
+
 ## [5.16.1](https://github.com/rsuite/rsuite/compare/v5.16.0...v5.16.1) (2022-07-15)
 
 ### Bug Fixes

package/Picker/styles/index.less

@@ -277,6 +277,8 @@
   overflow: hidden;
   // Remove transition
   transition: none;
+  display: flex;
+  flex-direction: column;
 
   .high-contrast-mode({
     border: 1px solid var(--rs-border-primary);

package/Slider/styles/index.less

@@ -50,10 +50,11 @@
   }
 }
 
-//
+// Handle
 .rs-slider-handle {
   position: absolute;
   top: -50%;
+  outline: none;
 
   &::before {
     content: '';

package/TreePicker/styles/index.less

@@ -207,9 +207,6 @@
 }
 
 .rs-picker-menu {
-  display: flex;
-  flex-direction: column;
-
   &.rs-tree-menu {
     padding-top: @picker-menu-padding;
 

package/cjs/Cascader/utils.js

@@ -6,8 +6,6 @@ exports.__esModule = true;
 exports.getColumnsAndPaths = getColumnsAndPaths;
 exports.usePaths = usePaths;
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _react = require("react");
 
 var _slice = _interopRequireDefault(require("lodash/slice"));
@@ -16,6 +14,8 @@ var _utils = require("../utils");
 
 var _treeUtils = require("../utils/treeUtils");
 
+var _attachParent = require("../utils/attachParent");
+
 function getColumnsAndPaths(data, value, options) {
   var childrenKey = options.childrenKey,
       valueKey = options.valueKey,
@@ -39,9 +39,7 @@ function getColumnsAndPaths(data, value, options) {
 
         if (node) {
           columns.push(children.map(function (item) {
-            return (0, _extends2.default)({}, item, {
-              parent: items[i]
-            });
+            return (0, _attachParent.attachParent)(item, items[i]);
           }));
           paths.push(node.active);
           return {

package/cjs/CheckPicker/CheckPicker.d.ts

@@ -4,7 +4,7 @@ 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>, Pick<PickerToggleProps, 'label'> {
+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/cjs/CheckPicker/test/CheckPicker.test.js

@@ -88,4 +88,12 @@ _react.default.createElement(_CheckPicker.default, {
 _react.default.createElement(_CheckPicker.default, {
   label: "User",
   data: []
+});
+
+/*#__PURE__*/
+_react.default.createElement(_CheckPicker.default, {
+  caretAs: function caretAs() {
+    return /*#__PURE__*/_react.default.createElement("div", null);
+  },
+  data: []
 });

package/cjs/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/cjs/CheckTreePicker/test/CheckTreePicker.test.d.ts

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

package/cjs/CheckTreePicker/test/CheckTreePicker.test.js

@@ -0,0 +1,15 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _CheckTreePicker = _interopRequireDefault(require("../CheckTreePicker"));
+
+/*#__PURE__*/
+_react.default.createElement(_CheckTreePicker.default, {
+  caretAs: function caretAs() {
+    return /*#__PURE__*/_react.default.createElement("div", null);
+  },
+  data: []
+});

package/cjs/CheckTreePicker/utils.js

@@ -25,6 +25,8 @@ var _utils = require("../utils");
 
 var _treeUtils = require("../utils/treeUtils");
 
+var _attachParent = require("../utils/attachParent");
+
 function isEveryChildChecked(nodes, parent) {
   if ((0, _isNil2.default)(parent.refKey) || (0, _isNil2.default)(nodes[parent.refKey])) {
     return false;
@@ -147,7 +149,7 @@ function getFormattedTree(data, nodes, props) {
       formatted.check = curNode.check;
       formatted.expand = curNode.expand;
       formatted.uncheckable = curNode.uncheckable;
-      formatted.parent = curNode.parent;
+      (0, _attachParent.attachParent)(formatted, curNode.parent);
       formatted.checkState = checkState;
 
       if (((_node$childrenKey = node[childrenKey]) === null || _node$childrenKey === void 0 ? void 0 : _node$childrenKey.length) > 0) {

package/cjs/CustomProvider/CustomProvider.js

@@ -40,7 +40,8 @@ var CustomProvider = function CustomProvider(props) {
   var toasters = _react.default.useRef(new Map());
 
   var _usePortal = (0, _utils.usePortal)({
-    container: container
+    container: container,
+    waitMount: true
   }),
       Portal = _usePortal.Portal;
 
@@ -65,7 +66,9 @@ var CustomProvider = function CustomProvider(props) {
   }, [classPrefix, theme]);
   return /*#__PURE__*/_react.default.createElement(Provider, {
     value: value
-  }, children, /*#__PURE__*/_react.default.createElement(Portal, null, _ToastContainer.toastPlacements.map(function (placement) {
+  }, children, /*#__PURE__*/_react.default.createElement(Portal, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "rs-toast-provider"
+  }, _ToastContainer.toastPlacements.map(function (placement) {
     return /*#__PURE__*/_react.default.createElement(_ToastContainer.default, {
       key: placement,
       placement: placement,
@@ -73,7 +76,7 @@ var CustomProvider = function CustomProvider(props) {
         toasters.current.set(placement, _ref);
       }
     });
-  })));
+  }))));
 };
 
 var _default = CustomProvider;

package/cjs/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/cjs/DateRangePicker/Calendar.js

@@ -21,14 +21,6 @@ var _Calendar = _interopRequireWildcard(require("../Calendar/Calendar"));
 
 var _utils = require("../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.default.forwardRef(function (props, ref) {
   var _props$as = props.as,
       Component = _props$as === void 0 ? _Calendar.default : _props$as,
@@ -43,10 +35,9 @@ var Calendar = /*#__PURE__*/_react.default.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 = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "calendarDate", "format", "disabledDate", "index", "limitEndYear", "onChangeCalendarDate", "onChangeCalendarTime", "onToggleMeridian", "showOneCalendar", "value"]);
+      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "calendarDate", "format", "disabledDate", "index", "limitEndYear", "onChangeCalendarDate", "onChangeCalendarTime", "onToggleMeridian", "value"]);
 
   var _useState = (0, _react.useState)(),
       calendarState = _useState[0],
@@ -86,33 +77,6 @@ var Calendar = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var handleMoveBackward = (0, _react.useCallback)(function () {
     onMoveBackward === null || onMoveBackward === void 0 ? void 0 : onMoveBackward((0, _dateUtils.addMonths)(getCalendarDate(), -1));
   }, [getCalendarDate, onMoveBackward]);
-  var disabledBackward = (0, _react.useCallback)(function () {
-    // Do not disable the Backward button on the first calendar.
-    if (index === 0) {
-      return false;
-    }
-
-    var startDate = (0, _dateUtils.setDate)((0, _dateUtils.addMonths)(calendarDate[0], 1), 1);
-    var endDate = (0, _dateUtils.setDate)(omitTime(calendarDate[1]), 1);
-    var after = (0, _dateUtils.isAfter)(endDate, startDate);
-    return !after;
-  }, [calendarDate, index]);
-  var disabledForward = (0, _react.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 = (0, _dateUtils.setDate)((0, _dateUtils.addMonths)(omitTime(calendarDate[0]), 1), 1);
-    var endDate = (0, _dateUtils.setDate)(omitTime(calendarDate[1]), 1);
-    var after = (0, _dateUtils.isAfter)(endDate, startDate);
-    return !after;
-  }, [calendarDate, index, showOneCalendar]);
   var disabledMonth = (0, _react.useCallback)(function (date) {
     return disabledDate === null || disabledDate === void 0 ? void 0 : disabledDate(date, value, _utils.DATERANGE_DISABLED_TARGET.CALENDAR);
   }, [disabledDate, value]);
@@ -120,9 +84,7 @@ var Calendar = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     format: format,
     calendarState: calendarState,
     dateRange: value,
-    disabledBackward: disabledBackward(),
     disabledDate: disabledMonth,
-    disabledForward: disabledForward(),
     inSameMonth: inSameMonth,
     index: index,
     limitEndYear: limitEndYear,

package/cjs/DateRangePicker/DateRangePicker.js

@@ -160,9 +160,10 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
    * If params `value` is not passed, it defaults to [new Date(), addMonth(new Date(), 1)].
    */
 
-  var updateCalendarDate = (0, _react.useCallback)(function (value) {
+  var updateCalendarDateRange = (0, _react.useCallback)(function (value, calendarKey) {
     setCalendarDate((0, _utils2.getCalendarDate)({
-      value: value
+      value: value,
+      calendarKey: calendarKey
     }));
   }, []); // if valueProp changed then update selectValue/hoverValue
 
@@ -337,10 +338,10 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
 
     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.
@@ -352,12 +353,12 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     var doneSelected = selectValueLength === 0 || selectValueLength === 2;
     doneSelected && setHoverDateRange(null);
   }, [selectedDates]);
-  var handleChangeCalendarDate = (0, _react.useCallback)(function (index, date) {
+  var updateSingleCalendarDate = (0, _react.useCallback)(function (index, date) {
     var nextCalendarDate = Array.from(calendarDate);
     nextCalendarDate[index] = date;
-    updateCalendarDate(nextCalendarDate);
-  }, [calendarDate, updateCalendarDate]);
-  var handleChangeCalendarTime = (0, _react.useCallback)(function (index, date) {
+    updateCalendarDateRange(nextCalendarDate, index === 0 ? 'start' : 'end');
+  }, [calendarDate, updateCalendarDateRange]);
+  var updateSingleCalendarTime = (0, _react.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
@@ -369,8 +370,8 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
       next[index] = clonedDate;
       return next;
     });
-    handleChangeCalendarDate(index, date);
-  }, [handleChangeCalendarDate]);
+    updateSingleCalendarDate(index, date);
+  }, [updateSingleCalendarDate]);
   /**
    * The callback triggered when PM/AM is switched.
    */
@@ -407,9 +408,9 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     onOk === null || onOk === void 0 ? void 0 : onOk(selectedDates, event);
   }, [handleValueUpdate, onOk, selectedDates]);
   var handleClean = (0, _react.useCallback)(function (event) {
-    updateCalendarDate(null);
+    updateCalendarDateRange(null);
     handleValueUpdate(event, null);
-  }, [handleValueUpdate, updateCalendarDate]);
+  }, [handleValueUpdate, updateCalendarDateRange]);
   /**
    * Callback after the input box value is changed.
    */
@@ -444,9 +445,9 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
 
     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
    */
@@ -472,8 +473,8 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     }
 
     setSelectedDates(value !== null && value !== void 0 ? value : []);
-    updateCalendarDate(nextCalendarDate);
-  }, [defaultCalendarValue, updateCalendarDate, setSelectedDates, value]);
+    updateCalendarDateRange(nextCalendarDate);
+  }, [defaultCalendarValue, updateCalendarDateRange, setSelectedDates, value]);
   var handleEntered = (0, _react.useCallback)(function () {
     onOpen === null || onOpen === void 0 ? void 0 : onOpen();
     setPickerToggleActive(true);
@@ -548,7 +549,7 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
       left: left,
       top: top
     });
-    var panelProps = {
+    var calendarProps = {
       calendarDate: calendarDate,
       disabledDate: handleDisabledDate,
       format: formatStr,
@@ -556,12 +557,11 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
       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,
@@ -582,9 +582,9 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
       className: prefix("daterange-calendar-" + (showOneCalendar ? 'single' : 'group'))
     }, /*#__PURE__*/_react.default.createElement(_Calendar2.default, (0, _extends2.default)({
       index: 0
-    }, panelProps)), !showOneCalendar && /*#__PURE__*/_react.default.createElement(_Calendar2.default, (0, _extends2.default)({
+    }, calendarProps)), !showOneCalendar && /*#__PURE__*/_react.default.createElement(_Calendar2.default, (0, _extends2.default)({
       index: 1
-    }, panelProps)))), /*#__PURE__*/_react.default.createElement(_Toolbar.default, {
+    }, calendarProps)))), /*#__PURE__*/_react.default.createElement(_Toolbar.default, {
       locale: locale,
       calendarDate: selectedDates,
       disabledOkBtn: disabledOkButton,

package/cjs/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/cjs/DateRangePicker/utils.js

@@ -19,14 +19,23 @@ exports.setTimingMargin = setTimingMargin;
 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 = _utils.DateUtils.isSameMonth(value[0], value[1]);
+    var startMonth = _utils.DateUtils.getMonth(value[0]);
+
+    var endMonth = _utils.DateUtils.getMonth(value[1]);
+
+    if (calendarKey === 'start') {
+      return [value[0], startMonth >= endMonth ? _utils.DateUtils.addMonths(value[0], 1) : value[1]];
+    } else if (calendarKey === 'end') {
+      return [startMonth >= endMonth ? _utils.DateUtils.addMonths(value[1], -1) : value[0], value[1]];
+    } // If only the start date
 
-    return [value[0], sameMonth ? _utils.DateUtils.addMonths(value[1], 1) : value[1]]; // If only the start date
   } else if (value[0]) {
     return [value[0], _utils.DateUtils.addMonths(value[0], 1)];
   }

package/cjs/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/cjs/InputPicker/test/InputPicker.test.d.ts

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

package/cjs/InputPicker/test/InputPicker.test.js

@@ -0,0 +1,15 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _InputPicker = _interopRequireDefault(require("../InputPicker"));
+
+/*#__PURE__*/
+_react.default.createElement(_InputPicker.default, {
+  caretAs: function caretAs() {
+    return /*#__PURE__*/_react.default.createElement("div", null);
+  },
+  data: []
+});

package/cjs/MultiCascader/utils.js

@@ -18,6 +18,8 @@ var _slice = _interopRequireDefault(require("lodash/slice"));
 
 var _treeUtils = require("../utils/treeUtils");
 
+var _attachParent = require("../utils/attachParent");
+
 /**
  * Get all parents of a node
  * @param node
@@ -196,8 +198,7 @@ function useFlattenData(data, itemKeys) {
 
   var addFlattenData = (0, _react.useCallback)(function (children, parent) {
     var nodes = children.map(function (child) {
-      child.parent = parent;
-      return child;
+      return (0, _attachParent.attachParent)(child, parent);
     });
     parent[childrenKey] = nodes;
     setFlattenData([].concat(flattenData, nodes));

package/cjs/Overlay/OverlayTrigger.js

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

package/cjs/Panel/Panel.js

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

package/cjs/SelectPicker/SelectPicker.d.ts

@@ -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>, Pick<PickerToggleProps, 'label'> {
+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/cjs/SelectPicker/test/SelectPicker.test.js

@@ -74,4 +74,27 @@ _react.default.createElement(_SelectPicker.default, {
 _react.default.createElement(_SelectPicker.default, {
   label: "User",
   data: []
+});
+
+/*#__PURE__*/
+_react.default.createElement(_SelectPicker.default, {
+  data: [{
+    label: 'Ascending',
+    value: 'asc'
+  }, {
+    label: 'Descending',
+    value: 'desc'
+  }],
+  value: "asc",
+  onChange: function onChange(value) {
+    (0, _tsExpect.expectType)(value);
+  }
+});
+
+/*#__PURE__*/
+_react.default.createElement(_SelectPicker.default, {
+  caretAs: function caretAs() {
+    return /*#__PURE__*/_react.default.createElement("div", null);
+  },
+  data: []
 });

package/cjs/TreePicker/TreePicker.d.ts

@@ -1,10 +1,10 @@
 import React from 'react';
 import { PickerLocale } from '../locales';
-import { PickerComponent } from '../Picker';
+import { PickerComponent, PickerToggleProps } from '../Picker';
 import { TreeDragProps, TreeBaseProps } from '../Tree/Tree';
 import { FormControlPickerProps, ItemDataType } from '../@types/common';
 export declare const maxTreeHeight = 320;
-export interface TreePickerProps<T = number | string> extends TreeBaseProps<T, ItemDataType>, TreeDragProps, FormControlPickerProps<T, PickerLocale, ItemDataType> {
+export interface TreePickerProps<T = number | string> extends TreeBaseProps<T, ItemDataType>, TreeDragProps, FormControlPickerProps<T, PickerLocale, ItemDataType>, Pick<PickerToggleProps, 'caretAs'> {
     /** The height of Dropdown */
     height?: number;
     /** Tree node cascade */

package/cjs/TreePicker/test/TreePicker.test.d.ts

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

package/cjs/TreePicker/test/TreePicker.test.js

@@ -0,0 +1,15 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _TreePicker = _interopRequireDefault(require("../TreePicker"));
+
+/*#__PURE__*/
+_react.default.createElement(_TreePicker.default, {
+  caretAs: function caretAs() {
+    return /*#__PURE__*/_react.default.createElement("div", null);
+  },
+  data: []
+});

package/cjs/utils/attachParent.d.ts

@@ -0,0 +1 @@
+export declare function attachParent<T>(data: T, parent: T): T;

package/cjs/utils/attachParent.js

@@ -0,0 +1,15 @@
+"use strict";
+
+exports.__esModule = true;
+exports.attachParent = attachParent;
+
+function attachParent(data, parent) {
+  // mark "parent" unenumable
+  Object.defineProperty(data, 'parent', {
+    value: parent,
+    writable: false,
+    enumerable: false,
+    configurable: true
+  });
+  return data;
+}