rsuite 5.0.0-beta.5 → 5.0.0

package/cjs/DatePicker/DatePicker.js

@@ -54,7 +54,6 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       defaultValue = props.defaultValue,
       disabled = props.disabled,
       formatStr = props.format,
-      inline = props.inline,
       isoWeek = props.isoWeek,
       limitEndYear = props.limitEndYear,
       overrideLocale = props.locale,
@@ -83,7 +82,7 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       onSelect = props.onSelect,
       onToggleMonthDropdown = props.onToggleMonthDropdown,
       onToggleTimeDropdown = props.onToggleTimeDropdown,
-      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "className", "classPrefix", "calendarDefaultDate", "cleanable", "defaultValue", "disabled", "format", "inline", "isoWeek", "limitEndYear", "locale", "menuClassName", "placement", "oneTap", "placeholder", "ranges", "value", "showMeridian", "showWeekNumbers", "style", "toggleAs", "disabledDate", "renderValue", "onChange", "onChangeCalendarDate", "onClean", "onClose", "onEntered", "onExited", "onNextMonth", "onOk", "onOpen", "onPrevMonth", "onSelect", "onToggleMonthDropdown", "onToggleTimeDropdown"]);
+      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "className", "classPrefix", "calendarDefaultDate", "cleanable", "defaultValue", "disabled", "format", "isoWeek", "limitEndYear", "locale", "menuClassName", "placement", "oneTap", "placeholder", "ranges", "value", "showMeridian", "showWeekNumbers", "style", "toggleAs", "disabledDate", "renderValue", "onChange", "onChangeCalendarDate", "onClean", "onClose", "onEntered", "onExited", "onNextMonth", "onOk", "onOpen", "onPrevMonth", "onSelect", "onToggleMonthDropdown", "onToggleTimeDropdown"]);
 
   var _useCustom = (0, _utils.useCustom)('DatePicker', overrideLocale),
       locale = _useCustom.locale,
@@ -92,8 +91,7 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
 
   var _useClassNames = (0, _utils.useClassNames)(classPrefix),
       merge = _useClassNames.merge,
-      prefix = _useClassNames.prefix,
-      withClassPrefix = _useClassNames.withClassPrefix;
+      prefix = _useClassNames.prefix;
 
   var _useControlled = (0, _utils.useControlled)(valueProp, defaultValue),
       value = _useControlled[0],
@@ -434,14 +432,6 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var caretComponent = (0, _react.useMemo)(function () {
     return _utils.DateUtils.shouldOnlyTime(formatStr) ? _ClockO.default : _Calendar.default;
   }, [formatStr]);
-
-  if (inline) {
-    return /*#__PURE__*/_react.default.createElement(Component, {
-      ref: rootRef,
-      className: merge(className, withClassPrefix('date-inline'))
-    }, calendar);
-  }
-
   return /*#__PURE__*/_react.default.createElement(_Picker.PickerToggleTrigger, {
     trigger: "active",
     pickerProps: (0, _pick.default)(props, _Picker.pickTriggerPropKeys),
@@ -490,7 +480,6 @@ DatePicker.propTypes = (0, _extends2.default)({}, _Picker.pickerPropTypes, {
   hideHours: _propTypes.default.func,
   hideMinutes: _propTypes.default.func,
   hideSeconds: _propTypes.default.func,
-  inline: _propTypes.default.bool,
   isoWeek: _propTypes.default.bool,
   limitEndYear: _propTypes.default.number,
   onChange: _propTypes.default.func,

package/cjs/DateRangePicker/Calendar.d.ts

@@ -13,7 +13,8 @@ export interface CalendarProps extends WithAsProps, Omit<CalendarCoreProps, Omit
     isoWeek?: boolean;
     limitEndYear?: number;
     locale?: DatePickerLocale;
-    onChangeCalendarDate?: (index: number, nextPageDate: Date) => void;
+    onChangeCalendarDate?: (index: number, date: Date) => void;
+    onChangeCalendarTime?: (index: number, date: Date) => void;
     onMouseMove?: (date: Date) => void;
     onSelect?: (date: Date, event?: React.SyntheticEvent<any>) => void;
     showOneCalendar?: boolean;

package/cjs/DateRangePicker/Calendar.js

@@ -36,9 +36,10 @@ var Calendar = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       index = props.index,
       limitEndYear = props.limitEndYear,
       onChangeCalendarDate = props.onChangeCalendarDate,
+      onChangeCalendarTime = props.onChangeCalendarTime,
       showOneCalendar = props.showOneCalendar,
       value = props.value,
-      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "calendarDate", "disabledDate", "index", "limitEndYear", "onChangeCalendarDate", "showOneCalendar", "value"]);
+      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "calendarDate", "disabledDate", "index", "limitEndYear", "onChangeCalendarDate", "onChangeCalendarTime", "showOneCalendar", "value"]);
 
   var _useState = (0, _react.useState)(),
       calendarState = _useState[0],
@@ -55,8 +56,8 @@ var Calendar = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     setCalendarState(undefined);
   }, [index, onChangeCalendarDate]);
   var handleChangePageTime = (0, _react.useCallback)(function (nextPageDate) {
-    onChangeCalendarDate(index, nextPageDate);
-  }, [index, onChangeCalendarDate]);
+    onChangeCalendarTime(index, nextPageDate);
+  }, [index, onChangeCalendarTime]);
   var toggleMonthDropdown = (0, _react.useCallback)(function () {
     setCalendarState(calendarState === _Calendar.CalendarState.DROP_MONTH ? undefined : _Calendar.CalendarState.DROP_MONTH);
   }, [calendarState]);

package/cjs/DateRangePicker/DateRangePicker.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import { PickerComponent } from '../Picker';
 import { FormControlBaseProps, PickerBaseProps } from '../@types/common';
+import { PickerComponent } from '../Picker';
 import { DisabledDateFunction, RangeType, ValueType } from './types';
 export interface DateRangePickerProps extends PickerBaseProps, FormControlBaseProps<ValueType> {
     /** Configure shortcut options */

package/cjs/DateRangePicker/DateRangePicker.js

@@ -11,35 +11,35 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _react = _interopRequireWildcard(require("react"));
+var _Calendar = _interopRequireDefault(require("@rsuite/icons/legacy/Calendar"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
+var _isUndefined = _interopRequireDefault(require("lodash/isUndefined"));
 
 var _omit = _interopRequireDefault(require("lodash/omit"));
 
-var _pick = _interopRequireDefault(require("lodash/pick"));
+var _partial = _interopRequireDefault(require("lodash/partial"));
 
-var _isUndefined = _interopRequireDefault(require("lodash/isUndefined"));
+var _pick = _interopRequireDefault(require("lodash/pick"));
 
-var _dateUtils = require("../utils/dateUtils");
+var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var disabledDateUtils = _interopRequireWildcard(require("./disabledDateUtils"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _CustomProvider = require("../CustomProvider");
 
 var _Toolbar = _interopRequireDefault(require("../DatePicker/Toolbar"));
 
-var _Calendar = _interopRequireDefault(require("./Calendar"));
+var _Picker = require("../Picker");
 
-var _utils = require("./utils");
+var _utils = require("../utils");
 
-var _utils2 = require("../utils");
+var _dateUtils = require("../utils/dateUtils");
 
-var _Picker = require("../Picker");
+var _Calendar2 = _interopRequireDefault(require("./Calendar"));
 
-var _partial = _interopRequireDefault(require("lodash/partial"));
+var disabledDateUtils = _interopRequireWildcard(require("./disabledDateUtils"));
 
-var _Calendar2 = _interopRequireDefault(require("@rsuite/icons/legacy/Calendar"));
+var _utils2 = require("./utils");
 
 var defaultProps = (0, _extends2.default)({}, _Picker.pickerDefaultProps, {
   as: 'div',
@@ -94,17 +94,17 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
       onSelect = props.onSelect,
       rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "classPrefix", "className", "cleanable", "character", "defaultCalendarValue", "defaultValue", "disabled", "disabledDate", "format", "hoverRange", "isoWeek", "limitEndYear", "locale", "menuClassName", "menuStyle", "oneTap", "placeholder", "placement", "ranges", "renderValue", "showOneCalendar", "showWeekNumbers", "style", "toggleAs", "value", "onChange", "onClean", "onClose", "onEnter", "onEntered", "onExited", "onOk", "onOpen", "onSelect"]);
 
-  var _useClassNames = (0, _utils2.useClassNames)(classPrefix),
+  var _useClassNames = (0, _utils.useClassNames)(classPrefix),
       merge = _useClassNames.merge,
       prefix = _useClassNames.prefix;
 
-  var _useCustom = (0, _utils2.useCustom)('DateRangePicker', overrideLocale),
+  var _useCustom = (0, _utils.useCustom)('DateRangePicker', overrideLocale),
       locale = _useCustom.locale,
       formatDate = _useCustom.formatDate;
 
   var rangeFormatStr = "" + formatStr + character + formatStr;
 
-  var _useControlled = (0, _utils2.useControlled)(valueProp, defaultValue !== null && defaultValue !== void 0 ? defaultValue : []),
+  var _useControlled = (0, _utils.useControlled)(valueProp, defaultValue !== null && defaultValue !== void 0 ? defaultValue : []),
       value = _useControlled[0],
       setValue = _useControlled[1];
   /**
@@ -135,7 +135,7 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
       setHoverValue = _useState2[1]; // The displayed calendar panel is rendered based on this value.
 
 
-  var _useState3 = (0, _react.useState)((0, _utils.getCalendarDate)({
+  var _useState3 = (0, _react.useState)((0, _utils2.getCalendarDate)({
     value: valueProp !== null && valueProp !== void 0 ? valueProp : defaultCalendarValue
   })),
       calendarDate = _useState3[0],
@@ -158,7 +158,7 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
    */
 
   var updateCalendarDate = (0, _react.useCallback)(function (value) {
-    setCalendarDate((0, _utils.getCalendarDate)({
+    setCalendarDate((0, _utils2.getCalendarDate)({
       value: value
     }));
   }, []); // if valueProp changed then update selectValue/hoverValue
@@ -227,11 +227,11 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     var hoverRangeFunc = hoverRange;
 
     if (hoverRange === 'week') {
-      hoverRangeFunc = (0, _partial.default)(_utils.getWeekHoverRange, isoWeek);
+      hoverRangeFunc = (0, _partial.default)(_utils2.getWeekHoverRange, isoWeek);
     }
 
     if (hoverRangeFunc === 'month') {
-      hoverRangeFunc = _utils.getMonthHoverRange;
+      hoverRangeFunc = _utils2.getMonthHoverRange;
     }
 
     if (typeof hoverRangeFunc !== 'function') {
@@ -245,7 +245,7 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
       return [];
     }
 
-    if (_utils2.DateUtils.isAfter(hoverValues[0], hoverValues[1])) {
+    if (_utils.DateUtils.isAfter(hoverValues[0], hoverValues[1])) {
       hoverValues.reverse();
     }
 
@@ -259,7 +259,7 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     var nextValue = !(0, _isUndefined.default)(nextSelectValue) ? nextSelectValue : selectValue;
     setSelectValue(nextValue || []);
 
-    if (!(0, _dateUtils.isSameDay)(nextValue[0], value[0]) || !(0, _dateUtils.isSameDay)(nextValue[1], value[1])) {
+    if (!(0, _utils2.isSameRange)(nextValue, value, formatStr)) {
       setValue(nextValue);
       onChange === null || onChange === void 0 ? void 0 : onChange(nextValue, event);
     } // `closeOverlay` default value is `true`
@@ -268,7 +268,7 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     if (closeOverlay !== false) {
       handleCloseDropdown();
     }
-  }, [handleCloseDropdown, onChange, selectValue, setSelectValue, setValue, value]);
+  }, [formatStr, handleCloseDropdown, onChange, selectValue, setValue, value]);
   /**
    * Select the date range. If oneTap is not set, you need to click twice to select the start time and end time.
    * The MouseMove event is called between the first click and the second click to update the selection state.
@@ -282,7 +282,7 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
       if (hoverRange) {
         var nextHoverValue = [selectRangeValueRef.current[0], hoverRangeValue[1]];
 
-        if (_utils2.DateUtils.isBefore(hoverRangeValue[0], selectRangeValueRef.current[0])) {
+        if (_utils.DateUtils.isBefore(hoverRangeValue[0], selectRangeValueRef.current[0])) {
           nextHoverValue[0] = hoverRangeValue[0];
           nextHoverValue[1] = selectRangeValueRef.current[1];
         }
@@ -304,7 +304,7 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     var noHoverRangeValid = hoverRangeValue.length !== 2; // in `oneTap` mode
 
     if (hasDoneSelect.current && oneTap) {
-      handleValueUpdate(event, noHoverRangeValid ? [(0, _utils.setTimingMargin)(date), (0, _utils.setTimingMargin)(date, 'right')] : hoverRangeValue);
+      handleValueUpdate(event, noHoverRangeValid ? [(0, _utils2.setTimingMargin)(date), (0, _utils2.setTimingMargin)(date, 'right')] : hoverRangeValue);
       hasDoneSelect.current = false;
       return;
     } // no preset hover range can use
@@ -329,7 +329,7 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     } // If user have completed the selection, then sort
 
 
-    if (nextSelectValue.length === 2 && _utils2.DateUtils.isAfter(nextSelectValue[0], nextSelectValue[1])) {
+    if (nextSelectValue.length === 2 && _utils.DateUtils.isAfter(nextSelectValue[0], nextSelectValue[1])) {
       nextSelectValue.reverse();
     }
 
@@ -357,6 +357,20 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     nextCalendarDate[index] = date;
     updateCalendarDate(nextCalendarDate);
   }, [calendarDate, updateCalendarDate]);
+  var handleChangeCalendarTime = (0, _react.useCallback)(function (index, date) {
+    setSelectValue(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
+
+      if (next[index]) {
+        clonedDate.setFullYear(next[index].getFullYear(), next[index].getMonth(), next[index].getDate());
+      }
+
+      next[index] = clonedDate;
+      return next;
+    });
+    handleChangeCalendarDate(index, date);
+  }, [handleChangeCalendarDate]);
   /**
    * Toolbar operation callback function
    */
@@ -381,7 +395,7 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     var rangeValue = value.split(character); // isMatch('01/11/2020', 'MM/dd/yyyy') ==> true
     // isMatch('2020-11-01', 'MM/dd/yyyy') ==> false
 
-    if (!_utils2.DateUtils.isMatch(rangeValue[0], formatStr) || !_utils2.DateUtils.isMatch(rangeValue[1], formatStr)) {
+    if (!_utils.DateUtils.isMatch(rangeValue[0], formatStr) || !_utils.DateUtils.isMatch(rangeValue[1], formatStr)) {
       setInputState('Error');
       return;
     }
@@ -390,12 +404,12 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     var endDate = new Date(rangeValue[1]);
     var selectValue = [startDate, endDate];
 
-    if (!_utils2.DateUtils.isValid(startDate) || !_utils2.DateUtils.isValid(endDate)) {
+    if (!_utils.DateUtils.isValid(startDate) || !_utils.DateUtils.isValid(endDate)) {
       setInputState('Error');
       return;
     }
 
-    if (disabledDate(startDate, selectValue, true, _utils2.DATERANGE_DISABLED_TARGET.CALENDAR)) {
+    if (disabledDate(startDate, selectValue, true, _utils.DATERANGE_DISABLED_TARGET.CALENDAR)) {
       setInputState('Error');
       return;
     }
@@ -424,7 +438,7 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
           endData = value[1];
       nextCalendarDate = [_startDate, (0, _dateUtils.isSameMonth)(_startDate, endData) ? (0, _dateUtils.addMonths)(endData, 1) : endData];
     } else {
-      nextCalendarDate = (0, _utils.getCalendarDate)({
+      nextCalendarDate = (0, _utils2.getCalendarDate)({
         value: defaultCalendarValue
       });
     }
@@ -450,12 +464,12 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     var nextSelectValue = [selectStartDate, selectEndDate]; // If the date is between the start and the end
     // the button is disabled
 
-    while (_utils2.DateUtils.isBefore(start, end) || _utils2.DateUtils.isSameDay(start, end)) {
+    while (_utils.DateUtils.isBefore(start, end) || _utils.DateUtils.isSameDay(start, end)) {
       if (disabledDate(start, nextSelectValue, hasDoneSelect.current, type)) {
         return true;
       }
 
-      start = _utils2.DateUtils.addDays(start, 1);
+      start = _utils.DateUtils.addDays(start, 1);
     }
 
     return false;
@@ -468,7 +482,7 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
       return true;
     }
 
-    return disabledByBetween(start, end, _utils2.DATERANGE_DISABLED_TARGET.TOOLBAR_BUTTON_OK);
+    return disabledByBetween(start, end, _utils.DATERANGE_DISABLED_TARGET.TOOLBAR_BUTTON_OK);
   }, [disabledByBetween, selectValue]);
   var disabledShortcutButton = (0, _react.useCallback)(function (value) {
     if (value === void 0) {
@@ -483,7 +497,7 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
       return true;
     }
 
-    return disabledByBetween(start, end, _utils2.DATERANGE_DISABLED_TARGET.TOOLBAR_SHORTCUT);
+    return disabledByBetween(start, end, _utils.DATERANGE_DISABLED_TARGET.TOOLBAR_SHORTCUT);
   }, [disabledByBetween]);
   var handleDisabledDate = (0, _react.useCallback)(function (date, values, type) {
     return disabledDate(date, values, hasDoneSelect.current, type);
@@ -519,12 +533,13 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
       showWeekNumbers: showWeekNumbers,
       value: selectValue,
       onChangeCalendarDate: handleChangeCalendarDate,
+      onChangeCalendarTime: handleChangeCalendarTime,
       onMouseMove: handleMouseMove,
       onSelect: handleSelectValueChange
     };
     return /*#__PURE__*/_react.default.createElement(_Picker.PickerOverlay, {
       className: classes,
-      ref: (0, _utils2.mergeRefs)(overlayRef, speakerRef),
+      ref: (0, _utils.mergeRefs)(overlayRef, speakerRef),
       target: triggerRef,
       style: styles
     }, /*#__PURE__*/_react.default.createElement("div", {
@@ -535,9 +550,9 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
       className: prefix('daterange-header')
     }, getDisplayString(selectValue)), /*#__PURE__*/_react.default.createElement("div", {
       className: prefix("daterange-calendar-" + (showOneCalendar ? 'single' : 'group'))
-    }, /*#__PURE__*/_react.default.createElement(_Calendar.default, (0, _extends2.default)({
+    }, /*#__PURE__*/_react.default.createElement(_Calendar2.default, (0, _extends2.default)({
       index: 0
-    }, panelProps)), !showOneCalendar && /*#__PURE__*/_react.default.createElement(_Calendar.default, (0, _extends2.default)({
+    }, panelProps)), !showOneCalendar && /*#__PURE__*/_react.default.createElement(_Calendar2.default, (0, _extends2.default)({
       index: 1
     }, panelProps)))), /*#__PURE__*/_react.default.createElement(_Toolbar.default, {
       locale: locale,
@@ -564,30 +579,30 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     pickerProps: (0, _pick.default)(props, _Picker.pickTriggerPropKeys),
     ref: triggerRef,
     placement: placement,
-    onEnter: (0, _utils2.createChainedFunction)(handleEnter, onEnter),
-    onEntered: (0, _utils2.createChainedFunction)(handleEntered, onEntered),
-    onExited: (0, _utils2.createChainedFunction)(handleExited, onExited),
+    onEnter: (0, _utils.createChainedFunction)(handleEnter, onEnter),
+    onEntered: (0, _utils.createChainedFunction)(handleEntered, onEntered),
+    onExited: (0, _utils.createChainedFunction)(handleExited, onExited),
     speaker: renderDropdownMenu
   }, /*#__PURE__*/_react.default.createElement(Component, {
     ref: rootRef,
     className: merge(className, classes, (_merge = {}, _merge[prefix('error')] = inputState === 'Error', _merge)),
     style: style
-  }, /*#__PURE__*/_react.default.createElement(_Picker.PickerToggle, (0, _extends2.default)({}, (0, _omit.default)(rest, [].concat(_Picker.omitTriggerPropKeys, usedClassNamePropKeys, _utils2.DateUtils.calendarOnlyProps)), {
+  }, /*#__PURE__*/_react.default.createElement(_Picker.PickerToggle, (0, _extends2.default)({}, (0, _omit.default)(rest, [].concat(_Picker.omitTriggerPropKeys, usedClassNamePropKeys, _utils.DateUtils.calendarOnlyProps)), {
     as: toggleAs,
     ref: targetRef,
     input: true,
-    inputMask: _utils2.DateUtils.getDateMask(rangeFormatStr),
+    inputMask: _utils.DateUtils.getDateMask(rangeFormatStr),
     inputValue: value ? getDisplayString(value, true) : '',
     inputPlaceholder: typeof placeholder === 'string' && placeholder ? placeholder : rangeFormatStr,
     onInputChange: handleInputChange,
     onInputBlur: handleInputBlur,
     onKeyDown: onPickerKeyDown,
-    onClean: (0, _utils2.createChainedFunction)(handleClean, onClean),
+    onClean: (0, _utils.createChainedFunction)(handleClean, onClean),
     cleanable: cleanable && !disabled,
     hasValue: hasValue,
     active: isPickerToggleActive,
     placement: placement,
-    caretComponent: _Calendar2.default,
+    caretComponent: _Calendar.default,
     disabled: disabled
   }), getDisplayString())));
 });

package/cjs/DateRangePicker/utils.d.ts

@@ -4,6 +4,6 @@ export declare function getCalendarDate({ value }: {
     value?: ValueType;
 }): ValueType;
 export declare const getDefaultRanges: () => RangeType[];
-export declare const isSameValueType: (source: ValueType, dest: ValueType) => boolean;
+export declare const isSameRange: (source: ValueType, dest: ValueType, format: string) => boolean;
 export declare const getMonthHoverRange: (date: Date) => ValueType;
 export declare const getWeekHoverRange: (isoWeek: boolean, date: Date) => ValueType;

package/cjs/DateRangePicker/utils.js

@@ -2,7 +2,7 @@
 
 exports.__esModule = true;
 exports.getCalendarDate = getCalendarDate;
-exports.getWeekHoverRange = exports.getMonthHoverRange = exports.isSameValueType = exports.getDefaultRanges = exports.setTimingMargin = void 0;
+exports.getWeekHoverRange = exports.getMonthHoverRange = exports.isSameRange = exports.getDefaultRanges = exports.setTimingMargin = void 0;
 
 var _utils = require("../utils");
 
@@ -51,13 +51,17 @@ var getDefaultRanges = function getDefaultRanges() {
 
 exports.getDefaultRanges = getDefaultRanges;
 
-var isSameValueType = function isSameValueType(source, dest) {
-  var _source$, _dest$, _source$2, _dest$2;
+var isSameRange = function isSameRange(source, dest, format) {
+  var result = _utils.DateUtils.isSameDay(source === null || source === void 0 ? void 0 : source[0], dest === null || dest === void 0 ? void 0 : dest[0]) && _utils.DateUtils.isSameDay(source === null || source === void 0 ? void 0 : source[1], dest === null || dest === void 0 ? void 0 : dest[1]);
 
-  return (source === null || source === void 0 ? void 0 : (_source$ = source[0]) === null || _source$ === void 0 ? void 0 : _source$.valueOf()) === (dest === null || dest === void 0 ? void 0 : (_dest$ = dest[0]) === null || _dest$ === void 0 ? void 0 : _dest$.valueOf()) && (source === null || source === void 0 ? void 0 : (_source$2 = source[1]) === null || _source$2 === void 0 ? void 0 : _source$2.valueOf()) === (dest === null || dest === void 0 ? void 0 : (_dest$2 = dest[1]) === null || _dest$2 === void 0 ? void 0 : _dest$2.valueOf());
+  if (_utils.DateUtils.shouldTime(format)) {
+    result && (result = _utils.DateUtils.isSameSecond(source === null || source === void 0 ? void 0 : source[0], dest === null || dest === void 0 ? void 0 : dest[0]) && _utils.DateUtils.isSameSecond(source === null || source === void 0 ? void 0 : source[1], dest === null || dest === void 0 ? void 0 : dest[1]));
+  }
+
+  return result;
 };
 
-exports.isSameValueType = isSameValueType;
+exports.isSameRange = isSameRange;
 
 var getMonthHoverRange = function getMonthHoverRange(date) {
   return [_utils.DateUtils.startOfMonth(date), _utils.DateUtils.endOfMonth(date)];

package/cjs/Dropdown/Dropdown.js

@@ -17,6 +17,8 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _omit = _interopRequireDefault(require("lodash/omit"));
 
+var _pick = _interopRequireDefault(require("lodash/pick"));
+
 var _DropdownMenu = _interopRequireDefault(require("./DropdownMenu"));
 
 var _utils = require("../utils");
@@ -47,6 +49,8 @@ var _SidenavDropdown = _interopRequireDefault(require("../Sidenav/SidenavDropdow
 
 var _NavContext = _interopRequireDefault(require("../Nav/NavContext"));
 
+var _DropdownState = require("./DropdownState");
+
 var defaultProps = {
   as: 'div',
   classPrefix: 'dropdown',
@@ -124,14 +128,29 @@ var Dropdown = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   }, [trigger]);
   var parentMenu = (0, _react.useContext)(_MenuContext.default);
   var sidenav = (0, _react.useContext)(_Sidenav.SidenavContext);
-  var navbar = (0, _react.useContext)(_Navbar.NavbarContext); // Render a disclosure when inside expanded <Sidenav>
+  var navbar = (0, _react.useContext)(_Navbar.NavbarContext);
+
+  var _useReducer = (0, _react.useReducer)(_DropdownState.reducer, _DropdownState.initialState),
+      items = _useReducer[0].items,
+      dispatch = _useReducer[1];
+
+  var hasSelectedItem = (0, _react.useMemo)(function () {
+    return items.some(function (item) {
+      return item.props.selected;
+    });
+  }, [items]);
+  var dropdownContextValue = (0, _react.useMemo)(function () {
+    return {
+      activeKey: activeKey,
+      onSelect: emitSelect,
+      hasSelectedItem: hasSelectedItem,
+      dispatch: dispatch
+    };
+  }, [activeKey, emitSelect, hasSelectedItem, dispatch]); // Render a disclosure when inside expanded <Sidenav>
 
   if (sidenav !== null && sidenav !== void 0 && sidenav.expanded) {
     return /*#__PURE__*/_react.default.createElement(_DropdownContext.default.Provider, {
-      value: {
-        activeKey: activeKey,
-        onSelect: emitSelect
-      }
+      value: dropdownContextValue
     }, /*#__PURE__*/_react.default.createElement(_SidenavDropdown.default, (0, _extends2.default)({
       ref: ref
     }, rest)));
@@ -140,10 +159,7 @@ var Dropdown = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
 
   if (navbar) {
     return /*#__PURE__*/_react.default.createElement(_DropdownContext.default.Provider, {
-      value: {
-        activeKey: activeKey,
-        onSelect: emitSelect
-      }
+      value: dropdownContextValue
     }, /*#__PURE__*/_react.default.createElement(_Disclosure.default, {
       hideOnClickOutside: true
     }, function (_ref, containerRef) {
@@ -183,7 +199,7 @@ var Dropdown = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       className: toggleClassName,
       placement: placement,
       disabled: disabled
-    }, (0, _omit.default)(menuButtonProps, ['open']), toggleProps), title);
+    }, (0, _omit.default)(menuButtonProps, ['open']), (0, _omit.default)(toggleProps, ['data-testid'])), title);
   };
 
   if (parentMenu) {
@@ -199,16 +215,13 @@ var Dropdown = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
           className: mergeNavItemClassNames(toggleClassName, withNavItemClassPrefix({
             focus: active
           }))
-        }, menuButtonProps, (0, _omit.default)(menuitemProps, ['onClick']), toggleProps), title);
+        }, menuButtonProps, (0, _omit.default)(menuitemProps, ['onClick']), (0, _omit.default)(toggleProps, 'data-testid')), title);
       });
     };
   }
 
   return /*#__PURE__*/_react.default.createElement(_DropdownContext.default.Provider, {
-    value: {
-      activeKey: activeKey,
-      onSelect: emitSelect
-    }
+    value: dropdownContextValue
   }, /*#__PURE__*/_react.default.createElement(_Menu.default, {
     menuButtonText: title,
     renderMenuButton: renderMenuButton,
@@ -216,7 +229,7 @@ var Dropdown = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     renderMenuPopup: function renderMenuPopup(_ref4, popupRef) {
       var open = _ref4.open,
           popupProps = (0, _objectWithoutPropertiesLoose2.default)(_ref4, ["open"]);
-      var menuClassName = mergeMenuClassName(className, withMenuClassPrefix()); // When inside a collapsed <Sidenav>, render a header in menu
+      var menuClassName = mergeMenuClassName(className, withMenuClassPrefix({})); // When inside a collapsed <Sidenav>, render a header in menu
 
       var showHeader = !!sidenav;
       return /*#__PURE__*/_react.default.createElement("ul", (0, _extends2.default)({
@@ -243,11 +256,11 @@ var Dropdown = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
 
     var open = _ref5.open,
         menuContainer = (0, _objectWithoutPropertiesLoose2.default)(_ref5, ["open"]);
-    var classes = merge(className, withClassPrefix((_withClassPrefix2 = {}, _withClassPrefix2["placement-" + (0, _kebabCase.default)((0, _utils.placementPolyfill)(placement))] = !!placement, _withClassPrefix2.disabled = disabled, _withClassPrefix2.open = open, _withClassPrefix2.submenu = !!parentMenu, _withClassPrefix2)));
+    var classes = merge(className, withClassPrefix((_withClassPrefix2 = {}, _withClassPrefix2["placement-" + (0, _kebabCase.default)((0, _utils.placementPolyfill)(placement))] = !!placement, _withClassPrefix2.disabled = disabled, _withClassPrefix2.open = open, _withClassPrefix2.submenu = !!parentMenu, _withClassPrefix2['selected-within'] = hasSelectedItem, _withClassPrefix2)));
     return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
       ref: (0, _utils.mergeRefs)(ref, menuContainerRef),
       className: classes
-    }, menuContainer, {
+    }, menuContainer, (0, _pick.default)(toggleProps, ['data-testid']), {
       style: style
     }));
   }));

package/cjs/Dropdown/DropdownContext.d.ts

@@ -1,7 +1,10 @@
-import React from 'react';
+import React, { Dispatch } from 'react';
+import { DropdownAction } from './DropdownState';
 export interface DropdownContextProps {
     activeKey?: string;
     onSelect: (eventKey: string, event: React.SyntheticEvent) => void;
+    hasSelectedItem?: boolean;
+    dispatch?: Dispatch<DropdownAction>;
 }
 declare const DropdownContext: React.Context<DropdownContextProps>;
 export default DropdownContext;

package/cjs/Dropdown/DropdownItem.js

@@ -37,6 +37,10 @@ var _SafeAnchor = _interopRequireDefault(require("../SafeAnchor"));
 
 var _NavContext = _interopRequireDefault(require("../Nav/NavContext"));
 
+var _useInternalId = _interopRequireDefault(require("../utils/useInternalId"));
+
+var _DropdownState = require("./DropdownState");
+
 var defaultProps = {
   as: 'li',
   classPrefix: 'dropdown-item'
@@ -55,6 +59,7 @@ var DropdownItem = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
       onSelect = props.onSelect,
       icon = props.icon,
       rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["classPrefix", "className", "active", "eventKey", "onSelect", "icon"]);
+  var internalId = (0, _useInternalId.default)('DropdownItem');
   var nav = (0, _react.useContext)(_NavContext.default);
   var dropdown = (0, _react.useContext)(_DropdownContext.default);
 
@@ -82,6 +87,29 @@ var DropdownItem = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
     });
     handleSelectItem === null || handleSelectItem === void 0 ? void 0 : handleSelectItem(event);
   }, [dispatchDisclosure, handleSelectItem]);
+  var selected = activeProp || !(0, _isNil.default)(eventKey) && ((0, _utils.shallowEqual)(dropdown === null || dropdown === void 0 ? void 0 : dropdown.activeKey, eventKey) || (0, _utils.shallowEqual)(nav === null || nav === void 0 ? void 0 : nav.activeKey, eventKey));
+  var dispatch = dropdown === null || dropdown === void 0 ? void 0 : dropdown.dispatch;
+  (0, _react.useEffect)(function () {
+    if (dispatch) {
+      dispatch({
+        type: _DropdownState.DropdownActionType.RegisterItem,
+        payload: {
+          id: internalId,
+          props: {
+            selected: selected
+          }
+        }
+      });
+      return function () {
+        dispatch({
+          type: _DropdownState.DropdownActionType.UnregisterItem,
+          payload: {
+            id: internalId
+          }
+        });
+      };
+    }
+  }, [internalId, selected, dispatch]);
 
   if (sidenav !== null && sidenav !== void 0 && sidenav.expanded) {
     return /*#__PURE__*/_react.default.createElement(_SidenavDropdownItem.default, (0, _extends2.default)({
@@ -89,7 +117,6 @@ var DropdownItem = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
     }, props));
   }
 
-  var menuitemSelected = activeProp || !(0, _isNil.default)(eventKey) && ((0, _utils.shallowEqual)(dropdown === null || dropdown === void 0 ? void 0 : dropdown.activeKey, eventKey) || (0, _utils.shallowEqual)(nav === null || nav === void 0 ? void 0 : nav.activeKey, eventKey));
   var Component = rest.as,
       divider = rest.divider,
       panel = rest.panel,
@@ -119,7 +146,7 @@ var DropdownItem = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
       disabled: disabled,
       divider: divider,
       panel: panel,
-      active: menuitemSelected
+      active: selected
     }));
     var dataAttributes = {
       'data-event-key': eventKey
@@ -132,7 +159,7 @@ var DropdownItem = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
     return /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement(_SafeAnchor.default, (0, _extends2.default)({
       ref: ref,
       className: classes,
-      "aria-current": menuitemSelected || undefined
+      "aria-current": selected || undefined
     }, dataAttributes, restProps, {
       onClick: (0, _utils.createChainedFunction)(handleClickNavbarDropdownItem, restProps.onClick)
     }), icon && /*#__PURE__*/_react.default.cloneElement(icon, {
@@ -141,7 +168,7 @@ var DropdownItem = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
   }
 
   return /*#__PURE__*/_react.default.createElement(_MenuItem.default, {
-    selected: menuitemSelected,
+    selected: selected,
     disabled: disabled,
     onActivate: handleSelectItem
   }, function (_ref2, menuitemRef) {