rsuite 5.16.1 → 5.17.0-beta

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

@@ -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/esm/CheckPicker/test/CheckPicker.test.js

@@ -74,4 +74,12 @@ React.createElement(CheckPicker, {
 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));