rsuite 5.16.1 → 5.17.0-beta

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/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/cjs/SelectPicker/SelectPicker.d.ts

@@ -1,8 +1,8 @@
 import React, { Ref } from 'react';
 import { PickerLocale } from '../locales';
 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>, 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,37 @@ _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: []
+}); // Override the default value of listProps.
+
+
+/*#__PURE__*/
+_react.default.createElement(_SelectPicker.default, {
+  data: [],
+  virtualized: true,
+  listProps: {
+    rowHeight: 70
+  }
 });

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

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

package/cjs/Tree/test/Tree.test.js

@@ -0,0 +1,18 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Tree = _interopRequireDefault(require("../Tree"));
+
+// Override the default value of listProps.
+
+/*#__PURE__*/
+_react.default.createElement(_Tree.default, {
+  data: [],
+  virtualized: true,
+  listProps: {
+    rowHeight: 70
+  }
+});

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: []
+});