rsuite 5.17.0-beta.1 → 5.17.0

package/esm/Calendar/Header.js

@@ -70,14 +70,12 @@ var Header = /*#__PURE__*/React.forwardRef(function (props, ref) {
     return timeFormat.join(':');
   }, [format, showMeridian]);
   var getDateFormat = useCallback(function () {
-    if (showDate) {
-      return (locale === null || locale === void 0 ? void 0 : locale.formattedDayPattern) || 'yyyy-MM-dd';
-    } else if (showMonth) {
+    if (showMonth) {
       return (locale === null || locale === void 0 ? void 0 : locale.formattedMonthPattern) || 'yyyy-MM';
     }
 
     return 'yyyy';
-  }, [locale, showDate, showMonth]);
+  }, [locale, showMonth]);
   var renderTitle = useCallback(function () {
     var _renderTitleProp;
 

package/esm/Calendar/useCalendarDate.d.ts

@@ -1,5 +1,6 @@
 declare const useCalendarDate: (value: Date | null | undefined, defaultDate: Date | undefined) => {
     calendarDate: Date;
     setCalendarDate: (date: Date | undefined) => void;
+    resetCalendarDate: () => void;
 };
 export default useCalendarDate;

package/esm/Calendar/useCalendarDate.js

@@ -15,6 +15,11 @@ var useCalendarDate = function useCalendarDate(value, defaultDate) {
       setValue(date);
     }
   }, [calendarDate]);
+  var resetCalendarDate = useCallback(function () {
+    var _ref2;
+
+    setValue((_ref2 = value !== null && value !== void 0 ? value : defaultDate) !== null && _ref2 !== void 0 ? _ref2 : new Date());
+  }, [defaultDate, value]);
   useUpdateEffect(function () {
     var _valueRef$current;
 
@@ -25,7 +30,8 @@ var useCalendarDate = function useCalendarDate(value, defaultDate) {
   }, [value]);
   return {
     calendarDate: calendarDate,
-    setCalendarDate: setCalendarDate
+    setCalendarDate: setCalendarDate,
+    resetCalendarDate: resetCalendarDate
   };
 };
 

package/esm/DatePicker/DatePicker.js

@@ -77,7 +77,8 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
 
   var _useCalendarDate = useCalendarDate(valueProp, calendarDefaultDate),
       calendarDate = _useCalendarDate.calendarDate,
-      setCalendarDate = _useCalendarDate.setCalendarDate;
+      setCalendarDate = _useCalendarDate.setCalendarDate,
+      resetCalendarDate = _useCalendarDate.resetCalendarDate;
 
   var _useState = useState(),
       inputState = _useState[0],
@@ -217,9 +218,9 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
    */
 
   var handleClean = useCallback(function (event) {
-    setCalendarDate(new Date());
     updateValue(event, null);
-  }, [setCalendarDate, updateValue]);
+    resetCalendarDate();
+  }, [resetCalendarDate, updateValue]);
   /**
    * Handle keyboard events.
    */

package/esm/DatePicker/PredefinedRanges.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { StackProps } from '../Stack';
+import { RangeType } from './types';
+import { CalendarLocale } from '../locales';
+export interface PredefinedRangesProps<T = any, Shortcut = T> extends StackProps {
+    ranges?: RangeType<Shortcut>[];
+    calendarDate: T;
+    locale: CalendarLocale;
+    disabledShortcut?: (value: T) => boolean;
+    onClickShortcut?: (value: Shortcut, closeOverlay: boolean, event: React.MouseEvent) => void;
+}
+declare const PredefinedRanges: React.ForwardRefExoticComponent<PredefinedRangesProps<any, any> & React.RefAttributes<HTMLDivElement>>;
+export default PredefinedRanges;

package/esm/DatePicker/PredefinedRanges.js

@@ -0,0 +1,62 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import React, { useCallback, useState } from 'react';
+import Button from '../Button';
+import Stack from '../Stack';
+import { useUpdateEffect } from '../utils';
+import { getDefaultRanges, getRanges } from './utils';
+var PredefinedRanges = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var className = props.className,
+      disabledShortcut = props.disabledShortcut,
+      onClickShortcut = props.onClickShortcut,
+      calendarDate = props.calendarDate,
+      rangesProp = props.ranges,
+      locale = props.locale,
+      rest = _objectWithoutPropertiesLoose(props, ["className", "disabledShortcut", "onClickShortcut", "calendarDate", "ranges", "locale"]);
+
+  var _useState = useState(getRanges(props)),
+      ranges = _useState[0],
+      setRanges = _useState[1];
+
+  useUpdateEffect(function () {
+    setRanges(getRanges({
+      ranges: rangesProp,
+      calendarDate: calendarDate
+    }));
+  }, [calendarDate, rangesProp]);
+  var hasLocaleKey = useCallback(function (key) {
+    return getDefaultRanges(calendarDate).some(function (item) {
+      return item.label === key;
+    });
+  }, [calendarDate]);
+  return /*#__PURE__*/React.createElement(Stack, _extends({
+    className: className,
+    ref: ref,
+    alignItems: "flex-start",
+    spacing: 4
+  }, rest), ranges.map(function (_ref, index) {
+    var value = _ref.value,
+        closeOverlay = _ref.closeOverlay,
+        label = _ref.label,
+        rest = _objectWithoutPropertiesLoose(_ref, ["value", "closeOverlay", "label"]);
+
+    var disabled = disabledShortcut === null || disabledShortcut === void 0 ? void 0 : disabledShortcut(value);
+
+    var handleClickShortcut = function handleClickShortcut(event) {
+      if (disabled) {
+        return;
+      }
+
+      onClickShortcut === null || onClickShortcut === void 0 ? void 0 : onClickShortcut(value, closeOverlay !== false ? true : false, event);
+    };
+
+    return /*#__PURE__*/React.createElement(Button, _extends({
+      appearance: "link",
+      size: "sm",
+      key: index,
+      disabled: disabled,
+      onClick: handleClickShortcut
+    }, rest), hasLocaleKey(label) && typeof label === 'string' ? locale === null || locale === void 0 ? void 0 : locale[label] : label);
+  }));
+});
+export default PredefinedRanges;

package/esm/DatePicker/Toolbar.d.ts

@@ -1,17 +1,10 @@
 import React from 'react';
-import { StandardProps } from '../@types/common';
-import { RangeType } from './types';
-import { CalendarLocale } from '../locales';
+import { PredefinedRangesProps } from './PredefinedRanges';
 export type { RangeType } from './types';
-export interface ToolbarProps<T = any, Shortcut = T> extends StandardProps {
+export interface ToolbarProps<T = any, Shortcut = T> extends PredefinedRangesProps<T, Shortcut> {
     hideOkBtn?: boolean;
-    locale?: CalendarLocale;
-    calendarDate: T;
-    ranges?: RangeType<Shortcut>[];
     disabledOkBtn?: (value: T) => boolean;
-    disabledShortcut?: (value: T) => boolean;
     onOk?: (event: React.MouseEvent) => void;
-    onClickShortcut?: (value: Shortcut, closeOverlay: boolean, event: React.MouseEvent) => void;
 }
 declare type ToolbarComponent = React.ForwardRefExoticComponent<ToolbarProps> & {
     <T = any, Shortcut = T>(props: ToolbarProps<T, Shortcut>): React.ReactElement | null;

package/esm/DatePicker/Toolbar.js

@@ -1,14 +1,36 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import React, { useCallback, useState } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import Button from '../Button';
-import { useClassNames, useUpdateEffect } from '../utils';
-import { getDefaultRanges, getRanges } from './utils';
+import { useClassNames } from '../utils';
+import PredefinedRanges from './PredefinedRanges';
+import Stack from '../Stack';
 
+var SubmitButton = function SubmitButton(_ref) {
+  var hide = _ref.hide,
+      disabledOkBtn = _ref.disabledOkBtn,
+      calendarDate = _ref.calendarDate,
+      onOk = _ref.onOk,
+      children = _ref.children;
+
+  if (hide) {
+    return null;
+  }
+
+  var disabled = disabledOkBtn === null || disabledOkBtn === void 0 ? void 0 : disabledOkBtn(calendarDate);
+  return /*#__PURE__*/React.createElement(Button, {
+    appearance: "primary",
+    size: "sm",
+    disabled: disabled,
+    onClick: disabled ? undefined : onOk
+  }, children);
+};
 /**
  * Toolbar for DatePicker and DateRangePicker
  */
+
+
 var Toolbar = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var className = props.className,
       _props$classPrefix = props.classPrefix,
@@ -19,78 +41,40 @@ var Toolbar = /*#__PURE__*/React.forwardRef(function (props, ref) {
       onOk = props.onOk,
       onClickShortcut = props.onClickShortcut,
       calendarDate = props.calendarDate,
-      rangesProp = props.ranges,
+      ranges = props.ranges,
       locale = props.locale,
       rest = _objectWithoutPropertiesLoose(props, ["className", "classPrefix", "disabledOkBtn", "disabledShortcut", "hideOkBtn", "onOk", "onClickShortcut", "calendarDate", "ranges", "locale"]);
 
-  var _useState = useState(getRanges(props)),
-      ranges = _useState[0],
-      setRanges = _useState[1];
-
   var _useClassNames = useClassNames(classPrefix),
       merge = _useClassNames.merge,
       prefix = _useClassNames.prefix,
       withClassPrefix = _useClassNames.withClassPrefix;
 
-  useUpdateEffect(function () {
-    setRanges(getRanges({
-      ranges: rangesProp,
-      calendarDate: calendarDate
-    }));
-  }, [calendarDate, rangesProp]);
-  var hasLocaleKey = useCallback(function (key) {
-    return getDefaultRanges(calendarDate).some(function (item) {
-      return item.label === key;
-    });
-  }, [calendarDate]);
-  var renderOkButton = useCallback(function () {
-    if (hideOkBtn) {
-      return null;
-    }
-
-    var disabled = disabledOkBtn === null || disabledOkBtn === void 0 ? void 0 : disabledOkBtn(calendarDate);
-    return /*#__PURE__*/React.createElement("div", {
-      className: prefix('right')
-    }, /*#__PURE__*/React.createElement(Button, {
-      appearance: "primary",
-      size: "sm",
-      disabled: disabled,
-      onClick: disabled ? undefined : onOk
-    }, locale === null || locale === void 0 ? void 0 : locale.ok));
-  }, [disabledOkBtn, hideOkBtn, locale, onOk, calendarDate, prefix]);
-
-  if (hideOkBtn && ranges.length === 0) {
+  if (hideOkBtn && (ranges === null || ranges === void 0 ? void 0 : ranges.length) === 0) {
     return null;
   }
 
   var classes = merge(className, withClassPrefix());
-  return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
+  return /*#__PURE__*/React.createElement(Stack, _extends({
     ref: ref,
-    className: classes
+    className: classes,
+    justifyContent: "space-between",
+    alignItems: "flex-start"
+  }, rest), /*#__PURE__*/React.createElement(PredefinedRanges, {
+    className: prefix('ranges'),
+    ranges: ranges,
+    calendarDate: calendarDate,
+    locale: locale,
+    disabledShortcut: disabledShortcut,
+    onClickShortcut: onClickShortcut
   }), /*#__PURE__*/React.createElement("div", {
-    className: prefix('ranges')
-  }, ranges.map(function (_ref, index) {
-    var value = _ref.value,
-        closeOverlay = _ref.closeOverlay,
-        label = _ref.label;
-    var disabled = disabledShortcut === null || disabledShortcut === void 0 ? void 0 : disabledShortcut(value);
-
-    var handleClickShortcut = function handleClickShortcut(event) {
-      if (disabled) {
-        return;
-      }
-
-      onClickShortcut === null || onClickShortcut === void 0 ? void 0 : onClickShortcut(value, closeOverlay !== false ? true : false, event);
-    };
-
-    return /*#__PURE__*/React.createElement(Button, {
-      appearance: "link",
-      size: "sm",
-      key: index,
-      disabled: disabled,
-      onClick: handleClickShortcut
-    }, hasLocaleKey(label) && typeof label === 'string' ? locale === null || locale === void 0 ? void 0 : locale[label] : label);
-  })), renderOkButton());
+    className: prefix('right')
+  }, /*#__PURE__*/React.createElement(SubmitButton, {
+    disabledOkBtn: disabledOkBtn,
+    hide: hideOkBtn,
+    calendarDate: calendarDate,
+    onOk: onOk
+  }, locale === null || locale === void 0 ? void 0 : locale.ok)));
 });
 Toolbar.displayName = 'Toolbar';
 Toolbar.propTypes = {

package/esm/DateRangePicker/DateRangePicker.js

@@ -9,6 +9,8 @@ import PropTypes from 'prop-types';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { FormattedDate } from '../CustomProvider';
 import Toolbar from '../DatePicker/Toolbar';
+import PredefinedRanges from '../DatePicker/PredefinedRanges';
+import Stack from '../Stack';
 import { omitTriggerPropKeys, PickerOverlay, pickerPropTypes, PickerToggle, PickerToggleTrigger, pickTriggerPropKeys, usePickerClassName, usePublicMethods, useToggleKeyDownEvent } from '../Picker';
 import { createChainedFunction, DATERANGE_DISABLED_TARGET, DateUtils, mergeRefs, useClassNames, useControlled, useCustom } from '../utils';
 import { addMonths, compareAsc, isSameMonth } from '../utils/dateUtils';
@@ -135,11 +137,31 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
    */
 
   var updateCalendarDateRange = useCallback(function (value, calendarKey) {
+    var nextValue = value;
+    var shouldTime = DateUtils.shouldTime,
+        getHours = DateUtils.getHours,
+        getMinutes = DateUtils.getMinutes,
+        getSeconds = DateUtils.getSeconds,
+        set = DateUtils.set;
+
+    if (shouldTime(formatStr) && calendarKey === undefined && (value === null || value === void 0 ? void 0 : value.length) === 1 && (defaultCalendarValue === null || defaultCalendarValue === void 0 ? void 0 : defaultCalendarValue.length) === 2) {
+      var calendarEndDate = (calendarDate === null || calendarDate === void 0 ? void 0 : calendarDate[1]) || defaultCalendarValue[1];
+      var _startDate = value[0]; // When updating the start date, the time of the end date should keep the time set by the user by default.
+
+      var _endDate = set(addMonths(_startDate, 1), {
+        hours: getHours(calendarEndDate),
+        minutes: getMinutes(calendarEndDate),
+        seconds: getSeconds(calendarEndDate)
+      });
+
+      nextValue = [_startDate, _endDate];
+    }
+
     setCalendarDate(getCalendarDate({
-      value: value,
+      value: nextValue,
       calendarKey: calendarKey
     }));
-  }, []); // if valueProp changed then update selectValue/hoverValue
+  }, [calendarDate, defaultCalendarValue, formatStr]); // if valueProp changed then update selectValue/hoverValue
 
   useEffect(function () {
     setSelectedDates(valueProp !== null && valueProp !== void 0 ? valueProp : []);
@@ -371,10 +393,17 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       closeOverlay = false;
     }
 
-    handleValueUpdate(event, value, closeOverlay); // End unfinished selections.
+    updateCalendarDateRange(value);
+
+    if (closeOverlay) {
+      handleValueUpdate(event, value, closeOverlay);
+    } else {
+      setSelectedDates(value !== null && value !== void 0 ? value : []);
+    } // End unfinished selections.
+
 
     hasDoneSelect.current = true;
-  }, [handleValueUpdate]);
+  }, [handleValueUpdate, updateCalendarDateRange]);
   var handleOK = useCallback(function (event) {
     handleValueUpdate(event, selectedDates);
     onOk === null || onOk === void 0 ? void 0 : onOk(selectedDates, event);
@@ -435,10 +464,11 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     var nextCalendarDate;
 
     if (value && value.length) {
-      var _startDate = value[0],
+      var _startDate2 = value[0],
           endData = value[1];
-      nextCalendarDate = [_startDate, isSameMonth(_startDate, endData) ? addMonths(endData, 1) : endData];
+      nextCalendarDate = [_startDate2, isSameMonth(_startDate2, endData) ? addMonths(endData, 1) : endData];
     } else {
+      // Reset the date on the calendar to the default date
       nextCalendarDate = getCalendarDate({
         value: defaultCalendarValue !== null && defaultCalendarValue !== void 0 ? defaultCalendarValue : null
       });
@@ -542,13 +572,27 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       renderTitle: renderTitle
     };
     return /*#__PURE__*/React.createElement(PickerOverlay, {
+      role: "dialog",
       className: classes,
       ref: mergeRefs(overlayRef, speakerRef),
       target: triggerRef,
       style: styles
     }, /*#__PURE__*/React.createElement("div", {
       className: panelClasses
-    }, /*#__PURE__*/React.createElement("div", {
+    }, /*#__PURE__*/React.createElement(Stack, {
+      alignItems: "flex-start"
+    }, /*#__PURE__*/React.createElement(PredefinedRanges, {
+      direction: "column",
+      spacing: 0,
+      className: prefix('daterange-predefined'),
+      ranges: (ranges === null || ranges === void 0 ? void 0 : ranges.filter(function (range) {
+        return (range === null || range === void 0 ? void 0 : range.placement) === 'left';
+      })) || [],
+      calendarDate: calendarDate,
+      locale: locale,
+      disabledShortcut: disabledShortcutButton,
+      onClickShortcut: handleShortcutPageDate
+    }), /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
       className: prefix('daterange-content')
     }, /*#__PURE__*/React.createElement("div", {
       className: prefix('daterange-header')
@@ -566,8 +610,10 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       hideOkBtn: oneTap,
       onOk: handleOK,
       onClickShortcut: handleShortcutPageDate,
-      ranges: ranges
-    })));
+      ranges: ranges === null || ranges === void 0 ? void 0 : ranges.filter(function (range) {
+        return (range === null || range === void 0 ? void 0 : range.placement) === 'bottom' || (range === null || range === void 0 ? void 0 : range.placement) === undefined;
+      })
+    })))));
   };
 
   var hasValue = !isNil(value) && value.length > 1;

package/esm/DateRangePicker/types.d.ts

@@ -4,8 +4,9 @@ export declare type ValueType = [Date?, Date?];
 export declare type DateRange = [Date, Date];
 export interface RangeType {
     label: React.ReactNode;
-    closeOverlay?: boolean;
     value: DateRange | ((value?: ValueType) => DateRange);
+    closeOverlay?: boolean;
+    placement?: 'bottom' | 'left';
 }
 export declare type DisabledDateFunction = (
 /** Date used to determine if disabling is required. */

package/esm/Disclosure/Disclosure.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
 import DisclosureButton from './DisclosureButton';
 import DisclosureContent from './DisclosureContent';
-export declare type DisclosureTrigger = 'click' | 'hover';
-export interface DisclosureRenderProps extends Pick<React.HTMLAttributes<HTMLElement>, 'onMouseEnter' | 'onMouseLeave'> {
+export declare type DisclosureTrigger = 'click' | 'mouseover';
+export interface DisclosureRenderProps extends Pick<React.HTMLAttributes<HTMLElement>, 'onMouseOver' | 'onMouseOut'> {
     open: boolean;
 }
 export interface DisclosureProps {

package/esm/Disclosure/Disclosure.js

@@ -59,7 +59,7 @@ var Disclosure = /*#__PURE__*/React.memo(function (props) {
       });
     }
   });
-  var onMouseEnter = useCallback(function (event) {
+  var onMouseOver = useCallback(function (event) {
     if (!open) {
       dispatch({
         type: DisclosureActionTypes.Show
@@ -67,7 +67,7 @@ var Disclosure = /*#__PURE__*/React.memo(function (props) {
       onToggle === null || onToggle === void 0 ? void 0 : onToggle(true, event);
     }
   }, [open, dispatch, onToggle]);
-  var onMouseLeave = useCallback(function (event) {
+  var onMouseOut = useCallback(function (event) {
     if (open) {
       dispatch({
         type: DisclosureActionTypes.Hide
@@ -98,13 +98,13 @@ var Disclosure = /*#__PURE__*/React.memo(function (props) {
       open: open
     };
 
-    if (trigger.includes('hover')) {
-      renderProps.onMouseEnter = onMouseEnter;
-      renderProps.onMouseLeave = onMouseLeave;
+    if (trigger.includes('mouseover')) {
+      renderProps.onMouseOver = onMouseOver;
+      renderProps.onMouseOut = onMouseOut;
     }
 
     return renderProps;
-  }, [open, trigger, onMouseEnter, onMouseLeave]);
+  }, [open, trigger, onMouseOver, onMouseOut]);
   return /*#__PURE__*/React.createElement(DisclosureContext.Provider, {
     value: contextValue
   }, children(renderProps, containerElementRef));

package/esm/FormControl/FormControl.js

@@ -39,7 +39,6 @@ var FormControl = /*#__PURE__*/React.forwardRef(function (props, ref) {
       AccepterComponent = _props$accepter === void 0 ? Input : _props$accepter,
       _props$classPrefix = props.classPrefix,
       classPrefix = _props$classPrefix === void 0 ? 'form-control' : _props$classPrefix,
-      className = props.className,
       checkAsync = props.checkAsync,
       checkTrigger = props.checkTrigger,
       _props$errorPlacement = props.errorPlacement,
@@ -59,7 +58,7 @@ var FormControl = /*#__PURE__*/React.forwardRef(function (props, ref) {
       _props$shouldResetWit = props.shouldResetWithUnmount,
       shouldResetWithUnmount = _props$shouldResetWit === void 0 ? false : _props$shouldResetWit,
       rule = props.rule,
-      rest = _objectWithoutPropertiesLoose(props, ["as", "accepter", "classPrefix", "className", "checkAsync", "checkTrigger", "errorPlacement", "errorMessage", "name", "value", "readOnly", "plaintext", "disabled", "onChange", "onBlur", "defaultValue", "shouldResetWithUnmount", "rule"]);
+      rest = _objectWithoutPropertiesLoose(props, ["as", "accepter", "classPrefix", "checkAsync", "checkTrigger", "errorPlacement", "errorMessage", "name", "value", "readOnly", "plaintext", "disabled", "onChange", "onBlur", "defaultValue", "shouldResetWithUnmount", "rule"]);
 
   var _useContext2 = useContext(FormGroupContext),
       controlId = _useContext2.controlId;
@@ -81,10 +80,9 @@ var FormControl = /*#__PURE__*/React.forwardRef(function (props, ref) {
 
   var _useClassNames = useClassNames(classPrefix),
       withClassPrefix = _useClassNames.withClassPrefix,
-      prefix = _useClassNames.prefix,
-      merge = _useClassNames.merge;
+      prefix = _useClassNames.prefix;
 
-  var classes = merge(className, withClassPrefix('wrapper'));
+  var classes = withClassPrefix('wrapper');
 
   var handleFieldChange = function handleFieldChange(value, event) {
     handleFieldCheck(value, trigger === 'change');