rsuite 5.50.0 → 5.52.0

package/cjs/CheckTreePicker/CheckTreeNode.js

@@ -8,10 +8,9 @@ exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _react = _interopRequireWildcard(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
 var _ArrowDown = _interopRequireDefault(require("@rsuite/icons/legacy/ArrowDown"));
 var _Spinner = _interopRequireDefault(require("@rsuite/icons/legacy/Spinner"));
-var _DropdownMenuCheckItem = _interopRequireDefault(require("../Picker/DropdownMenuCheckItem"));
+var _ListCheckItem = _interopRequireDefault(require("../internals/Picker/ListCheckItem"));
 var _treeUtils = require("../utils/treeUtils");
 var _utils = require("../utils");
 var CheckTreeNode = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
@@ -35,11 +34,12 @@ var CheckTreeNode = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     label = _ref.label,
     uncheckable = _ref.uncheckable,
     checkState = _ref.checkState,
+    value = _ref.value,
     onExpand = _ref.onExpand,
     onSelect = _ref.onSelect,
-    onRenderTreeIcon = _ref.onRenderTreeIcon,
-    onRenderTreeNode = _ref.onRenderTreeNode,
-    rest = (0, _objectWithoutPropertiesLoose2.default)(_ref, ["as", "style", "className", "classPrefix", "visible", "layer", "disabled", "allUncheckable", "rtl", "loading", "expand", "hasChildren", "nodeData", "focus", "label", "uncheckable", "checkState", "onExpand", "onSelect", "onRenderTreeIcon", "onRenderTreeNode"]);
+    renderTreeIcon = _ref.renderTreeIcon,
+    renderTreeNode = _ref.renderTreeNode,
+    rest = (0, _objectWithoutPropertiesLoose2.default)(_ref, ["as", "style", "className", "classPrefix", "visible", "layer", "disabled", "allUncheckable", "rtl", "loading", "expand", "hasChildren", "nodeData", "focus", "label", "uncheckable", "checkState", "value", "onExpand", "onSelect", "renderTreeIcon", "renderTreeNode"]);
   var _useClassNames = (0, _utils.useClassNames)(classPrefix),
     prefix = _useClassNames.prefix,
     merge = _useClassNames.merge,
@@ -52,13 +52,13 @@ var CheckTreeNode = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       return nodes.join('');
     }
   };
-  var handleExpand = (0, _react.useCallback)(function (event) {
+  var handleExpand = (0, _utils.useEventCallback)(function (event) {
     var _event$nativeEvent, _event$nativeEvent$st;
     // stop propagation when using custom loading icon
     event === null || event === void 0 ? void 0 : (_event$nativeEvent = event.nativeEvent) === null || _event$nativeEvent === void 0 ? void 0 : (_event$nativeEvent$st = _event$nativeEvent.stopImmediatePropagation) === null || _event$nativeEvent$st === void 0 ? void 0 : _event$nativeEvent$st.call(_event$nativeEvent);
     onExpand === null || onExpand === void 0 ? void 0 : onExpand(nodeData);
-  }, [nodeData, onExpand]);
-  var handleSelect = (0, _react.useCallback)(function (_value, event) {
+  });
+  var handleSelect = (0, _utils.useEventCallback)(function (_value, event) {
     if (disabled || uncheckable) {
       return;
     }
@@ -73,7 +73,7 @@ var CheckTreeNode = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       check: isChecked
     });
     onSelect === null || onSelect === void 0 ? void 0 : onSelect(nextNodeData, event);
-  }, [disabled, checkState, uncheckable, nodeData, onSelect]);
+  });
   var renderIcon = function renderIcon() {
     var expandIconClasses = prefix('expand-icon', 'icon', {
       expanded: expand
@@ -88,8 +88,8 @@ var CheckTreeNode = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
         spin: true
       }));
     }
-    if (typeof onRenderTreeIcon === 'function') {
-      var customIcon = onRenderTreeIcon(nodeData);
+    if (typeof renderTreeIcon === 'function') {
+      var customIcon = renderTreeIcon(nodeData);
       expandIcon = customIcon !== null ? /*#__PURE__*/_react.default.createElement("div", {
         className: prefix('custom-icon')
       }, customIcon) : expandIcon;
@@ -102,23 +102,6 @@ var CheckTreeNode = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       onClick: handleExpand
     }, expandIcon) : null;
   };
-  var renderLabel = function renderLabel() {
-    return /*#__PURE__*/_react.default.createElement(_DropdownMenuCheckItem.default, {
-      as: "div",
-      active: checkState === _utils.CHECK_STATE.CHECK,
-      indeterminate: checkState === _utils.CHECK_STATE.INDETERMINATE,
-      focus: focus,
-      checkable: !uncheckable,
-      disabled: disabled,
-      "data-layer": layer,
-      value: nodeData.refKey,
-      className: prefix('label'),
-      title: getTitle(),
-      onSelect: handleSelect
-    }, /*#__PURE__*/_react.default.createElement("span", {
-      className: prefix('text-wrapper')
-    }, typeof onRenderTreeNode === 'function' ? onRenderTreeNode(nodeData) : label));
-  };
   var classes = merge(className, withClassPrefix({
     disabled: disabled,
     'all-uncheckable': !!allUncheckable,
@@ -126,43 +109,32 @@ var CheckTreeNode = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     focus: focus
   }));
   var styles = (0, _extends2.default)({}, style, (0, _treeUtils.getTreeNodeIndent)(rtl, layer - 1));
-  return visible ? /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
+  return visible ? /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {
+    style: styles,
+    className: classes,
+    ref: ref
+  }), renderIcon(), /*#__PURE__*/_react.default.createElement(_ListCheckItem.default, {
+    as: "div",
     role: "treeitem",
     "aria-label": label,
     "aria-expanded": expand,
     "aria-selected": checkState === _utils.CHECK_STATE.CHECK,
     "aria-disabled": disabled,
-    "aria-level": layer
-  }, rest, {
-    style: styles,
-    className: classes,
-    ref: ref
-  }), renderIcon(), renderLabel()) : null;
+    "aria-level": layer,
+    active: checkState === _utils.CHECK_STATE.CHECK,
+    indeterminate: checkState === _utils.CHECK_STATE.INDETERMINATE,
+    focus: focus,
+    checkable: !uncheckable,
+    disabled: disabled,
+    "data-layer": layer,
+    value: nodeData.refKey || value,
+    className: prefix('label'),
+    title: getTitle(),
+    onSelect: handleSelect
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: prefix('text-wrapper')
+  }, typeof renderTreeNode === 'function' ? renderTreeNode(nodeData) : label))) : null;
 });
 CheckTreeNode.displayName = 'CheckTreeNode';
-CheckTreeNode.propTypes = {
-  as: _propTypes.default.elementType,
-  rtl: _propTypes.default.bool,
-  classPrefix: _propTypes.default.string,
-  visible: _propTypes.default.bool,
-  style: _propTypes.default.object,
-  label: _propTypes.default.any,
-  layer: _propTypes.default.number,
-  loading: _propTypes.default.bool,
-  value: _propTypes.default.any,
-  focus: _propTypes.default.bool,
-  expand: _propTypes.default.bool,
-  nodeData: _propTypes.default.object,
-  disabled: _propTypes.default.bool,
-  className: _propTypes.default.string,
-  checkState: _propTypes.default.oneOf([_utils.CHECK_STATE.UNCHECK, _utils.CHECK_STATE.CHECK, _utils.CHECK_STATE.INDETERMINATE]),
-  hasChildren: _propTypes.default.bool,
-  uncheckable: _propTypes.default.bool,
-  allUncheckable: _propTypes.default.bool,
-  onExpand: _propTypes.default.func,
-  onSelect: _propTypes.default.func,
-  onRenderTreeIcon: _propTypes.default.func,
-  onRenderTreeNode: _propTypes.default.func
-};
 var _default = CheckTreeNode;
 exports.default = _default;

package/cjs/CheckTreePicker/CheckTreePicker.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { PickerLocale } from '../locales';
-import { PickerComponent, PickerToggleProps } from '../Picker';
+import { PickerComponent, PickerToggleProps } from '../internals/Picker';
 import { TreeBaseProps } from '../Tree/Tree';
 import { FormControlPickerProps, ItemDataType } from '../@types/common';
 export declare type ValueType = (string | number)[];

package/cjs/CheckTreePicker/CheckTreePicker.js

@@ -16,13 +16,15 @@ var _isNil2 = _interopRequireDefault(require("lodash/isNil"));
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _classnames = _interopRequireDefault(require("classnames"));
-var _Windowing = require("../Windowing");
+var _Windowing = require("../internals/Windowing");
 var _CheckTreeNode = _interopRequireDefault(require("./CheckTreeNode"));
 var _TreeContext = _interopRequireDefault(require("../Tree/TreeContext"));
 var _treeUtils = require("../utils/treeUtils");
 var _utils = require("../utils");
-var _Picker = require("../Picker");
+var _Picker = require("../internals/Picker");
+var _SearchBox = _interopRequireDefault(require("../internals/SearchBox"));
 var _utils2 = require("./utils");
+var _propTypes2 = require("../internals/propTypes");
 var emptyArray = [];
 var itemSize = function itemSize() {
   return 36;
@@ -243,8 +245,8 @@ var CheckTreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
       allUncheckable: (0, _utils2.isAllSiblingNodeUncheckable)(node, flattenNodes, uncheckableItemValues, valueKey),
       onSelect: handleSelect,
       onExpand: handleExpand,
-      onRenderTreeNode: renderTreeNode,
-      onRenderTreeIcon: renderTreeIcon
+      renderTreeNode: renderTreeNode,
+      renderTreeIcon: renderTreeIcon
     };
   };
   var focusActiveNode = function focusActiveNode() {
@@ -407,8 +409,8 @@ var CheckTreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
   });
   var handleClean = (0, _utils.useEventCallback)(function (event) {
     var target = event.target;
-    // exclude searchBar
-    if (target.matches('div[role="searchbox"] > input') || disabled || !cleanable) {
+    // exclude searchbox
+    if (target.matches('input[role="searchbox"]') || disabled || !cleanable) {
       return;
     }
     setActiveNode(null);
@@ -562,7 +564,8 @@ var CheckTreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
           return saveTreeNodeRef(_ref, refKey);
         }
       })), /*#__PURE__*/_react.default.createElement("div", {
-        className: checkTreePrefix('children')
+        className: checkTreePrefix('group'),
+        role: "group"
       }, nodes.map(function (child) {
         return renderNode(child, layer);
       }), showIndentLine && /*#__PURE__*/_react.default.createElement("span", {
@@ -614,21 +617,17 @@ var CheckTreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
         className: prefix('none')
       }, locale.noResultsText);
     }
-    var treeNodesClass = merge(checkTreePrefix('nodes'), (_merge2 = {}, _merge2[checkTreePrefix('all-uncheckable')] = (0, _utils2.isEveryFirstLevelNodeUncheckable)(flattenNodes, uncheckableItemValues, valueKey), _merge2));
-    var styles = inline ? (0, _extends2.default)({
-      height: height
-    }, style) : {};
-    return /*#__PURE__*/_react.default.createElement("div", {
-      id: id ? id + "-listbox" : undefined,
+    var treeNodesClass = merge(checkTreePrefix('root'), (_merge2 = {}, _merge2[checkTreePrefix('all-uncheckable')] = (0, _utils2.isEveryFirstLevelNodeUncheckable)(flattenNodes, uncheckableItemValues, valueKey), _merge2));
+    return /*#__PURE__*/_react.default.createElement(_Picker.TreeView, {
       ref: inline ? root : treeView,
-      role: "tree",
-      "aria-multiselectable": true,
+      multiselectable: true,
+      treeRootClassName: treeNodesClass,
       className: classes,
-      style: styles,
+      style: inline ? (0, _extends2.default)({
+        height: height
+      }, style) : {},
       onScroll: onScroll,
       onKeyDown: inline ? handleTreeKeydown : undefined
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: treeNodesClass
     }, virtualized ? /*#__PURE__*/_react.default.createElement(_Windowing.AutoSizer, {
       defaultHeight: inline ? height : menuMaxHeight,
       style: {
@@ -644,7 +643,7 @@ var CheckTreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
         itemCount: formattedNodes.length,
         itemData: formattedNodes
       }, listProps), renderVirtualListNode);
-    }) : formattedNodes));
+    }) : formattedNodes);
   };
   var renderDropdownMenu = function renderDropdownMenu(positionProps, speakerRef) {
     var left = positionProps.left,
@@ -655,14 +654,14 @@ var CheckTreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
       left: left,
       top: top
     });
-    return /*#__PURE__*/_react.default.createElement(_Picker.PickerOverlay, {
+    return /*#__PURE__*/_react.default.createElement(_Picker.PickerPopup, {
       autoWidth: menuAutoWidth,
       className: classes,
       style: mergedMenuStyle,
       ref: (0, _utils.mergeRefs)(overlay, speakerRef),
       onKeyDown: onPickerKeydown,
       target: trigger
-    }, searchable ? /*#__PURE__*/_react.default.createElement(_Picker.SearchBar, {
+    }, searchable ? /*#__PURE__*/_react.default.createElement(_SearchBox.default, {
       placeholder: locale.searchPlaceholder,
       onChange: handleSearch,
       value: searchKeywordState,
@@ -711,6 +710,9 @@ var CheckTreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     return renderCheckTree();
   }
   return /*#__PURE__*/_react.default.createElement(_Picker.PickerToggleTrigger, {
+    id: id,
+    popupType: "tree",
+    multiple: true,
     pickerProps: (0, _pick2.default)(props, _Picker.pickTriggerPropKeys),
     ref: trigger,
     placement: placement,
@@ -723,7 +725,6 @@ var CheckTreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     style: style,
     ref: root
   }, /*#__PURE__*/_react.default.createElement(_Picker.PickerToggle, (0, _extends2.default)({}, (0, _omit2.default)(rest, [].concat(_Picker.omitTriggerPropKeys, usedClassNamePropKeys)), {
-    id: id,
     ref: target,
     appearance: appearance,
     onKeyDown: onPickerKeydown,
@@ -734,13 +735,14 @@ var CheckTreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     hasValue: hasValidValue,
     active: active,
     placement: placement,
-    inputValue: value
+    inputValue: value,
+    focusItemValue: focusItemValue
   }), selectedElement || locale.placeholder)));
 });
 CheckTreePicker.displayName = 'CheckTreePicker';
 CheckTreePicker.propTypes = (0, _extends2.default)({}, _Picker.listPickerPropTypes, {
   height: _propTypes.default.number,
-  appearance: _propTypes.default.oneOf(['default', 'subtle']),
+  appearance: (0, _propTypes2.oneOf)(['default', 'subtle']),
   locale: _propTypes.default.any,
   cascade: _propTypes.default.bool,
   countable: _propTypes.default.bool,

package/cjs/Checkbox/Checkbox.js

@@ -12,6 +12,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _utils = require("../utils");
 var _CheckboxGroup = require("../CheckboxGroup");
+var _propTypes2 = require("../internals/propTypes");
 var _templateObject, _templateObject2, _templateObject3;
 /**
  * The Checkbox component is used for selecting multiple options from a set.
@@ -153,7 +154,7 @@ Checkbox.propTypes = {
   onChange: _propTypes.default.func,
   onClick: _propTypes.default.func,
   inputProps: _propTypes.default.any,
-  inputRef: _utils.TypeChecker.refType,
+  inputRef: _propTypes2.refType,
   value: _propTypes.default.any,
   children: _propTypes.default.node,
   classPrefix: _propTypes.default.string,

package/cjs/CheckboxGroup/CheckboxGroup.js

@@ -12,7 +12,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _cloneDeep = _interopRequireDefault(require("lodash/cloneDeep"));
 var _remove = _interopRequireDefault(require("lodash/remove"));
 var _utils = require("../utils");
-var _Plaintext = _interopRequireDefault(require("../Plaintext"));
+var _Plaintext = _interopRequireDefault(require("../internals/Plaintext"));
 var _CheckboxGroupContext = require("./CheckboxGroupContext");
 /**
  * The `CheckboxGroup` component is used for selecting multiple options which are unrelated.

package/cjs/DateInput/utils.js

@@ -249,7 +249,7 @@ function isFieldFullValue(formatStr, value, pattern) {
       return false;
   }
 }
-var isTestEnvironment = undefined === 'test';
+var isTestEnvironment = typeof process !== 'undefined' && undefined === 'test';
 function useInputSelection(input) {
   return function setSelectionRange(selectionStart, selectionEnd) {
     if (isTestEnvironment) {

package/cjs/DatePicker/DatePicker.js

@@ -24,12 +24,11 @@ var _Stack = _interopRequireDefault(require("../Stack"));
 var _PredefinedRanges = _interopRequireDefault(require("./PredefinedRanges"));
 var _utils = require("../utils");
 var _dateUtils = require("../utils/dateUtils");
-var _Picker = require("../Picker");
-var _usePickerRef2 = _interopRequireDefault(require("../Picker/usePickerRef"));
+var _Picker = require("../internals/Picker");
+var _OverlayTrigger = require("../internals/Overlay/OverlayTrigger");
 var _DateInput = _interopRequireDefault(require("../DateInput"));
 var _InputGroup = _interopRequireDefault(require("../InputGroup"));
-var _OverlayTrigger = require("../Overlay/OverlayTrigger");
-var _deprecatePropType = require("../utils/deprecatePropType");
+var _propTypes2 = require("../internals/propTypes");
 var _utils2 = require("../Calendar/utils");
 var _utils3 = require("./utils");
 var _templateObject;
@@ -103,8 +102,8 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     onToggleTimeDropdown = props.onToggleTimeDropdown,
     onShortcutClick = props.onShortcutClick,
     restProps = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "className", "classPrefix", "calendarDefaultDate", "cleanable", "editable", "defaultValue", "disabled", "readOnly", "plaintext", "format", "id", "isoWeek", "limitEndYear", "limitStartYear", "locale", "loading", "label", "menuClassName", "menuStyle", "appearance", "placement", "oneTap", "placeholder", "ranges", "value", "showMeridian", "showWeekNumbers", "style", "size", "caretAs", "disabledDate", "disabledHours", "disabledMinutes", "disabledSeconds", "shouldDisableDate", "shouldDisableHour", "shouldDisableMinute", "shouldDisableSecond", "onChange", "onChangeCalendarDate", "onClean", "onClose", "onEntered", "onExited", "onNextMonth", "onOk", "onOpen", "onPrevMonth", "onSelect", "onToggleMonthDropdown", "onToggleTimeDropdown", "onShortcutClick"]);
-  var id = (0, _utils.useUniqueId)(classPrefix + "-", idProp);
-  var _usePickerRef = (0, _usePickerRef2.default)(ref),
+  var id = (0, _utils.useUniqueId)('rs-', idProp);
+  var _usePickerRef = (0, _Picker.usePickerRef)(ref),
     trigger = _usePickerRef.trigger,
     root = _usePickerRef.root,
     target = _usePickerRef.target,
@@ -280,7 +279,7 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     onClean === null || onClean === void 0 ? void 0 : onClean(event);
     event.stopPropagation();
   });
-  var handlePickerOverlayKeyDown = (0, _utils.useEventCallback)(function (event) {
+  var handlePickerPopupKeyDown = (0, _utils.useEventCallback)(function (event) {
     var delta = 0;
     var step = showMonth ? 6 : 7;
     var changeDateFunc = showMonth ? _dateUtils.addMonths : _dateUtils.addDays;
@@ -424,7 +423,7 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       left: left,
       top: top
     });
-    return /*#__PURE__*/_react.default.createElement(_Picker.PickerOverlay, {
+    return /*#__PURE__*/_react.default.createElement(_Picker.PickerPopup, {
       role: "dialog",
       "aria-labelledby": label ? id + "-label" : undefined,
       tabIndex: -1,
@@ -432,7 +431,7 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       ref: (0, _utils.mergeRefs)(overlay, speakerRef),
       style: styles,
       target: trigger,
-      onKeyDown: handlePickerOverlayKeyDown
+      onKeyDown: handlePickerPopupKeyDown
     }, /*#__PURE__*/_react.default.createElement(_Stack.default, {
       alignItems: "flex-start"
     }, sideRanges.length > 0 && /*#__PURE__*/_react.default.createElement(_PredefinedRanges.default, {
@@ -559,10 +558,10 @@ DatePicker.displayName = 'DatePicker';
 DatePicker.propTypes = (0, _extends2.default)({}, _Picker.pickerPropTypes, {
   calendarDefaultDate: _propTypes.default.instanceOf(Date),
   defaultValue: _propTypes.default.instanceOf(Date),
-  disabledDate: (0, _deprecatePropType.deprecatePropTypeNew)(_propTypes.default.func, 'Use "shouldDisableDate" property instead.'),
-  disabledHours: (0, _deprecatePropType.deprecatePropTypeNew)(_propTypes.default.func, 'Use "shouldDisableHour" property instead.'),
-  disabledMinutes: (0, _deprecatePropType.deprecatePropTypeNew)(_propTypes.default.func, 'Use "shouldDisableMinute" property instead.'),
-  disabledSeconds: (0, _deprecatePropType.deprecatePropTypeNew)(_propTypes.default.func, 'Use "shouldDisableSecond" property instead.'),
+  disabledDate: (0, _propTypes2.deprecatePropTypeNew)(_propTypes.default.func, 'Use "shouldDisableDate" property instead.'),
+  disabledHours: (0, _propTypes2.deprecatePropTypeNew)(_propTypes.default.func, 'Use "shouldDisableHour" property instead.'),
+  disabledMinutes: (0, _propTypes2.deprecatePropTypeNew)(_propTypes.default.func, 'Use "shouldDisableMinute" property instead.'),
+  disabledSeconds: (0, _propTypes2.deprecatePropTypeNew)(_propTypes.default.func, 'Use "shouldDisableSecond" property instead.'),
   shouldDisableDate: _propTypes.default.func,
   shouldDisableHour: _propTypes.default.func,
   shouldDisableMinute: _propTypes.default.func,

package/cjs/DateRangePicker/DateRangePicker.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { FormControlBaseProps, PickerBaseProps } from '../@types/common';
 import { DateRangePickerLocale } from '../locales';
-import { PickerComponent } from '../Picker';
+import { PickerComponent } from '../internals/Picker';
 import { DisabledDateFunction, RangeType, DateRange } from './types';
 export interface DateRangePickerProps extends PickerBaseProps<DateRangePickerLocale>, FormControlBaseProps<DateRange | null> {
     /** Custom caret component */
@@ -36,6 +36,12 @@ export interface DateRangePickerProps extends PickerBaseProps<DateRangePickerLoc
     showOneCalendar?: boolean;
     /** Meridian format */
     showMeridian?: boolean;
+    /**
+     * Whether to display the formatted date range at the header of the calendar
+     * @default true
+     * @version 5.52.0
+     */
+    showHeader?: boolean;
     /** Set default date for calendar */
     defaultCalendarValue?: DateRange;
     /** The character that separates two dates */

package/cjs/DateRangePicker/DateRangePicker.js

@@ -20,17 +20,16 @@ var _CustomProvider = require("../CustomProvider");
 var _Toolbar = _interopRequireDefault(require("../DatePicker/Toolbar"));
 var _PredefinedRanges = _interopRequireDefault(require("../DatePicker/PredefinedRanges"));
 var _Stack = _interopRequireDefault(require("../Stack"));
-var _Picker = require("../Picker");
+var _Picker = require("../internals/Picker");
 var _utils = require("../utils");
 var _dateUtils = require("../utils/dateUtils");
 var _Calendar2 = _interopRequireDefault(require("./Calendar"));
 var disabledDateUtils = _interopRequireWildcard(require("./disabledDateUtils"));
 var _utils2 = require("./utils");
-var _deprecatePropType = require("../utils/deprecatePropType");
+var _propTypes2 = require("../internals/propTypes");
 var _DateRangePickerContext = _interopRequireDefault(require("./DateRangePickerContext"));
 var _DateRangeInput = _interopRequireDefault(require("../DateRangeInput"));
 var _InputGroup = _interopRequireDefault(require("../InputGroup"));
-var _usePickerRef2 = _interopRequireDefault(require("../Picker/usePickerRef"));
 var _templateObject;
 /**
  * A date range picker allows you to select a date range from a calendar.
@@ -83,6 +82,8 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     showOneCalendar = _props$showOneCalenda === void 0 ? false : _props$showOneCalenda,
     showWeekNumbers = props.showWeekNumbers,
     showMeridian = props.showMeridian,
+    _props$showHeader = props.showHeader,
+    showHeader = _props$showHeader === void 0 ? true : _props$showHeader,
     style = props.style,
     size = props.size,
     caretAsProp = props.caretAs,
@@ -98,9 +99,9 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     onSelect = props.onSelect,
     onShortcutClick = props.onShortcutClick,
     renderTitle = props.renderTitle,
-    restProps = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "classPrefix", "className", "appearance", "editable", "cleanable", "character", "defaultCalendarValue", "defaultValue", "plaintext", "disabled", "disabledDate", "shouldDisableDate", "format", "hoverRange", "id", "isoWeek", "limitEndYear", "limitStartYear", "locale", "loading", "label", "menuClassName", "menuStyle", "oneTap", "placeholder", "placement", "ranges", "readOnly", "showOneCalendar", "showWeekNumbers", "showMeridian", "style", "size", "caretAs", "value", "onChange", "onClean", "onClose", "onEnter", "onEntered", "onExited", "onOk", "onOpen", "onSelect", "onShortcutClick", "renderTitle"]);
-  var id = (0, _utils.useUniqueId)(classPrefix + "-", idProp);
-  var _usePickerRef = (0, _usePickerRef2.default)(ref),
+    restProps = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "classPrefix", "className", "appearance", "editable", "cleanable", "character", "defaultCalendarValue", "defaultValue", "plaintext", "disabled", "disabledDate", "shouldDisableDate", "format", "hoverRange", "id", "isoWeek", "limitEndYear", "limitStartYear", "locale", "loading", "label", "menuClassName", "menuStyle", "oneTap", "placeholder", "placement", "ranges", "readOnly", "showOneCalendar", "showWeekNumbers", "showMeridian", "showHeader", "style", "size", "caretAs", "value", "onChange", "onClean", "onClose", "onEnter", "onEntered", "onExited", "onOk", "onOpen", "onSelect", "onShortcutClick", "renderTitle"]);
+  var id = (0, _utils.useUniqueId)('rs-', idProp);
+  var _usePickerRef = (0, _Picker.usePickerRef)(ref),
     trigger = _usePickerRef.trigger,
     root = _usePickerRef.root,
     target = _usePickerRef.target,
@@ -202,9 +203,9 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     setHoverDateRange(valueProp !== null && valueProp !== void 0 ? valueProp : null);
   }, [valueProp]);
   var getDateRangeString = function getDateRangeString(nextValue) {
-    var _nextValue$, _nextValue$2;
-    var startDate = (_nextValue$ = nextValue === null || nextValue === void 0 ? void 0 : nextValue[0]) !== null && _nextValue$ !== void 0 ? _nextValue$ : null;
-    var endDate = (_nextValue$2 = nextValue === null || nextValue === void 0 ? void 0 : nextValue[1]) !== null && _nextValue$2 !== void 0 ? _nextValue$2 : null;
+    var _ref4 = nextValue !== null && nextValue !== void 0 ? nextValue : [null, null],
+      startDate = _ref4[0],
+      endDate = _ref4[1];
     if (startDate && endDate) {
       var displayValue = [startDate, endDate].sort(_dateUtils.compareAsc);
       return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_CustomProvider.FormattedDate, {
@@ -544,8 +545,8 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
       esc: handleClose,
       enter: function enter() {
         var _trigger$current2;
-        var _ref4 = ((_trigger$current2 = trigger.current) === null || _trigger$current2 === void 0 ? void 0 : _trigger$current2.getState()) || {},
-          open = _ref4.open;
+        var _ref5 = ((_trigger$current2 = trigger.current) === null || _trigger$current2 === void 0 ? void 0 : _trigger$current2.getState()) || {},
+          open = _ref5.open;
         if (!open) {
           var _trigger$current3;
           (_trigger$current3 = trigger.current) === null || _trigger$current3 === void 0 ? void 0 : _trigger$current3.open();
@@ -604,7 +605,7 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     var bottomRanges = 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;
     });
-    return /*#__PURE__*/_react.default.createElement(_Picker.PickerOverlay, {
+    return /*#__PURE__*/_react.default.createElement(_Picker.PickerPopup, {
       role: "dialog",
       "aria-labelledby": label ? id + "-label" : undefined,
       tabIndex: -1,
@@ -629,10 +630,10 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
       "data-testid": "daterange-predefined-side"
     }), /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
       className: prefix('daterange-content')
-    }, /*#__PURE__*/_react.default.createElement("div", {
+    }, showHeader && /*#__PURE__*/_react.default.createElement("div", {
       className: prefix('daterange-header'),
       "data-testid": "daterange-header"
-    }, getDateRangeString(selectedDates)), /*#__PURE__*/_react.default.createElement("div", {
+    }, getDateRangeString(isSelectedIdle ? selectedDates : hoverDateRange)), /*#__PURE__*/_react.default.createElement("div", {
       className: prefix("daterange-calendar-" + (showOneCalendar ? 'single' : 'group'))
     }, /*#__PURE__*/_react.default.createElement(_DateRangePickerContext.default.Provider, {
       value: {
@@ -760,7 +761,7 @@ DateRangePicker.propTypes = (0, _extends2.default)({}, _Picker.pickerPropTypes,
   value: _propTypes.default.arrayOf(_propTypes.default.instanceOf(Date)),
   defaultValue: _propTypes.default.arrayOf(_propTypes.default.instanceOf(Date)),
   defaultCalendarValue: _propTypes.default.arrayOf(_propTypes.default.instanceOf(Date)),
-  hoverRange: _propTypes.default.oneOfType([_propTypes.default.oneOf(['week', 'month']), _propTypes.default.func]),
+  hoverRange: _propTypes.default.oneOfType([(0, _propTypes2.oneOf)(['week', 'month']), _propTypes.default.func]),
   format: _propTypes.default.string,
   isoWeek: _propTypes.default.bool,
   oneTap: _propTypes.default.bool,
@@ -768,7 +769,7 @@ DateRangePicker.propTypes = (0, _extends2.default)({}, _Picker.pickerPropTypes,
   limitStartYear: _propTypes.default.number,
   onChange: _propTypes.default.func,
   onOk: _propTypes.default.func,
-  disabledDate: (0, _deprecatePropType.deprecatePropTypeNew)(_propTypes.default.func, 'Use "shouldDisableDate" property instead.'),
+  disabledDate: (0, _propTypes2.deprecatePropTypeNew)(_propTypes.default.func, 'Use "shouldDisableDate" property instead.'),
   shouldDisableDate: _propTypes.default.func,
   onSelect: _propTypes.default.func,
   showWeekNumbers: _propTypes.default.bool,

package/cjs/Drawer/Drawer.js

@@ -14,6 +14,7 @@ var _Modal = _interopRequireDefault(require("../Modal"));
 var _utils = require("../utils");
 var _deprecateComponent = _interopRequireDefault(require("../utils/deprecateComponent"));
 var _DrawerContext = _interopRequireDefault(require("./DrawerContext"));
+var _propTypes2 = require("../internals/propTypes");
 var DrawerBody = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   return /*#__PURE__*/_react.default.createElement(_Modal.default.Body, (0, _extends2.default)({
     classPrefix: "drawer-body"
@@ -98,11 +99,11 @@ Drawer.Actions = DrawerActions;
 Drawer.Footer = (0, _deprecateComponent.default)(DrawerFooter, '<Drawer.Footer> has been deprecated, use <Drawer.Actions> instead.');
 Drawer.Title = DrawerTitle;
 Drawer.displayName = 'Drawer';
-Drawer.propTypes = {
+Drawer.propTypes = (0, _extends2.default)({}, _Modal.default.propTypes, {
   classPrefix: _propTypes.default.string,
-  placement: _propTypes.default.oneOf(['top', 'right', 'bottom', 'left']),
+  placement: (0, _propTypes2.oneOf)(['top', 'right', 'bottom', 'left']),
   children: _propTypes.default.node,
   className: _propTypes.default.string
-};
+});
 var _default = Drawer;
 exports.default = _default;

package/cjs/Dropdown/Dropdown.js

@@ -13,10 +13,10 @@ var _omit = _interopRequireDefault(require("lodash/omit"));
 var _pick = _interopRequireDefault(require("lodash/pick"));
 var _DropdownMenu = _interopRequireDefault(require("./DropdownMenu"));
 var _utils = require("../utils");
-var _deprecatePropType = _interopRequireDefault(require("../utils/deprecatePropType"));
+var _propTypes2 = require("../internals/propTypes");
 var _DropdownItem = _interopRequireDefault(require("./DropdownItem"));
 var _DropdownContext = _interopRequireDefault(require("./DropdownContext"));
-var _Menu = _interopRequireDefault(require("../Menu/Menu"));
+var _Menu = _interopRequireDefault(require("../internals/Menu/Menu"));
 var _DropdownToggle = _interopRequireDefault(require("./DropdownToggle"));
 var _kebabCase = _interopRequireDefault(require("lodash/kebabCase"));
 var _NavContext = _interopRequireDefault(require("../Nav/NavContext"));
@@ -163,8 +163,8 @@ Dropdown.displayName = 'Dropdown';
 Dropdown.propTypes = {
   activeKey: _propTypes.default.any,
   classPrefix: _propTypes.default.string,
-  trigger: _propTypes.default.oneOfType([_propTypes.default.array, _propTypes.default.oneOf(['click', 'hover', 'contextMenu'])]),
-  placement: _propTypes.default.oneOf(_utils.PLACEMENT_8),
+  trigger: _propTypes.default.oneOfType([_propTypes.default.array, (0, _propTypes2.oneOf)(['click', 'hover', 'contextMenu'])]),
+  placement: (0, _propTypes2.oneOf)(_utils.PLACEMENT_8),
   title: _propTypes.default.node,
   disabled: _propTypes.default.bool,
   icon: _propTypes.default.node,
@@ -172,7 +172,7 @@ Dropdown.propTypes = {
   className: _propTypes.default.string,
   toggleClassName: _propTypes.default.string,
   children: _propTypes.default.node,
-  open: (0, _deprecatePropType.default)(_propTypes.default.bool),
+  open: (0, _propTypes2.deprecatePropType)(_propTypes.default.bool),
   eventKey: _propTypes.default.any,
   as: _propTypes.default.elementType,
   toggleAs: _propTypes.default.elementType,