rsuite 5.50.0 → 5.52.0

package/esm/CheckTreePicker/CheckTreePicker.js

@@ -10,14 +10,16 @@ import _isNil from "lodash/isNil";
 import React, { useState, useEffect, useContext, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import { List, AutoSizer } from '../Windowing';
+import { List, AutoSizer } from '../internals/Windowing';
 import CheckTreeNode from './CheckTreeNode';
 import TreeContext from '../Tree/TreeContext';
 import { getKeyParentMap, getPathTowardsItem, getTreeNodeIndent } from '../utils/treeUtils';
 import { createChainedFunction, useCustom, useClassNames, useControlled, useEventCallback, KEY_VALUES, mergeRefs } from '../utils';
-import { PickerToggle, onMenuKeyDown as _onMenuKeyDown, PickerOverlay, SearchBar, SelectedElement, PickerToggleTrigger, createConcatChildrenFunction, usePickerClassName, useToggleKeyDownEvent, usePickerRef, pickTriggerPropKeys, omitTriggerPropKeys, listPickerPropTypes } from '../Picker';
+import { PickerToggle, TreeView, onMenuKeyDown as _onMenuKeyDown, PickerPopup, SelectedElement, PickerToggleTrigger, createConcatChildrenFunction, usePickerClassName, useToggleKeyDownEvent, usePickerRef, pickTriggerPropKeys, omitTriggerPropKeys, listPickerPropTypes } from '../internals/Picker';
+import SearchBox from '../internals/SearchBox';
 import { isEveryChildChecked, isSomeNodeHasChildren, isAllSiblingNodeUncheckable, isEveryFirstLevelNodeUncheckable, getFormattedTree, getDisabledState, getCheckTreePickerDefaultValue, getSelectedItems, isNodeUncheckable } from './utils';
 import { hasVisibleChildren, getExpandWhenSearching, useTreeSearch, useTreeNodeRefs, getDefaultExpandItemValues, useFlattenTreeData, focusNextItem, getFocusableItems, focusPreviousItem, toggleExpand, getActiveItem, useGetTreeNodeChildren, focusToActiveTreeNode, focusTreeNode, leftArrowHandler, rightArrowHandler, isSearching } from '../utils/treeUtils';
+import { oneOf } from '../internals/propTypes';
 var emptyArray = [];
 var itemSize = function itemSize() {
   return 36;
@@ -238,8 +240,8 @@ var CheckTreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       allUncheckable: isAllSiblingNodeUncheckable(node, flattenNodes, uncheckableItemValues, valueKey),
       onSelect: handleSelect,
       onExpand: handleExpand,
-      onRenderTreeNode: renderTreeNode,
-      onRenderTreeIcon: renderTreeIcon
+      renderTreeNode: renderTreeNode,
+      renderTreeIcon: renderTreeIcon
     };
   };
   var focusActiveNode = function focusActiveNode() {
@@ -402,8 +404,8 @@ var CheckTreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
   });
   var handleClean = 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);
@@ -557,7 +559,8 @@ var CheckTreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
           return saveTreeNodeRef(_ref, refKey);
         }
       })), /*#__PURE__*/React.createElement("div", {
-        className: checkTreePrefix('children')
+        className: checkTreePrefix('group'),
+        role: "group"
       }, nodes.map(function (child) {
         return renderNode(child, layer);
       }), showIndentLine && /*#__PURE__*/React.createElement("span", {
@@ -609,21 +612,17 @@ var CheckTreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
         className: prefix('none')
       }, locale.noResultsText);
     }
-    var treeNodesClass = merge(checkTreePrefix('nodes'), (_merge2 = {}, _merge2[checkTreePrefix('all-uncheckable')] = isEveryFirstLevelNodeUncheckable(flattenNodes, uncheckableItemValues, valueKey), _merge2));
-    var styles = inline ? _extends({
-      height: height
-    }, style) : {};
-    return /*#__PURE__*/React.createElement("div", {
-      id: id ? id + "-listbox" : undefined,
+    var treeNodesClass = merge(checkTreePrefix('root'), (_merge2 = {}, _merge2[checkTreePrefix('all-uncheckable')] = isEveryFirstLevelNodeUncheckable(flattenNodes, uncheckableItemValues, valueKey), _merge2));
+    return /*#__PURE__*/React.createElement(TreeView, {
       ref: inline ? root : treeView,
-      role: "tree",
-      "aria-multiselectable": true,
+      multiselectable: true,
+      treeRootClassName: treeNodesClass,
       className: classes,
-      style: styles,
+      style: inline ? _extends({
+        height: height
+      }, style) : {},
       onScroll: onScroll,
       onKeyDown: inline ? handleTreeKeydown : undefined
-    }, /*#__PURE__*/React.createElement("div", {
-      className: treeNodesClass
     }, virtualized ? /*#__PURE__*/React.createElement(AutoSizer, {
       defaultHeight: inline ? height : menuMaxHeight,
       style: {
@@ -639,7 +638,7 @@ var CheckTreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
         itemCount: formattedNodes.length,
         itemData: formattedNodes
       }, listProps), renderVirtualListNode);
-    }) : formattedNodes));
+    }) : formattedNodes);
   };
   var renderDropdownMenu = function renderDropdownMenu(positionProps, speakerRef) {
     var left = positionProps.left,
@@ -650,14 +649,14 @@ var CheckTreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       left: left,
       top: top
     });
-    return /*#__PURE__*/React.createElement(PickerOverlay, {
+    return /*#__PURE__*/React.createElement(PickerPopup, {
       autoWidth: menuAutoWidth,
       className: classes,
       style: mergedMenuStyle,
       ref: mergeRefs(overlay, speakerRef),
       onKeyDown: onPickerKeydown,
       target: trigger
-    }, searchable ? /*#__PURE__*/React.createElement(SearchBar, {
+    }, searchable ? /*#__PURE__*/React.createElement(SearchBox, {
       placeholder: locale.searchPlaceholder,
       onChange: handleSearch,
       value: searchKeywordState,
@@ -706,6 +705,9 @@ var CheckTreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     return renderCheckTree();
   }
   return /*#__PURE__*/React.createElement(PickerToggleTrigger, {
+    id: id,
+    popupType: "tree",
+    multiple: true,
     pickerProps: _pick(props, pickTriggerPropKeys),
     ref: trigger,
     placement: placement,
@@ -718,7 +720,6 @@ var CheckTreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     style: style,
     ref: root
   }, /*#__PURE__*/React.createElement(PickerToggle, _extends({}, _omit(rest, [].concat(omitTriggerPropKeys, usedClassNamePropKeys)), {
-    id: id,
     ref: target,
     appearance: appearance,
     onKeyDown: onPickerKeydown,
@@ -729,13 +730,14 @@ var CheckTreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     hasValue: hasValidValue,
     active: active,
     placement: placement,
-    inputValue: value
+    inputValue: value,
+    focusItemValue: focusItemValue
   }), selectedElement || locale.placeholder)));
 });
 CheckTreePicker.displayName = 'CheckTreePicker';
 CheckTreePicker.propTypes = _extends({}, listPickerPropTypes, {
   height: PropTypes.number,
-  appearance: PropTypes.oneOf(['default', 'subtle']),
+  appearance: oneOf(['default', 'subtle']),
   locale: PropTypes.any,
   cascade: PropTypes.bool,
   countable: PropTypes.bool,

package/esm/Checkbox/Checkbox.js

@@ -5,8 +5,9 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 var _templateObject, _templateObject2, _templateObject3;
 import React, { useContext, useCallback, useMemo } from 'react';
 import PropTypes from 'prop-types';
-import { useControlled, partitionHTMLProps, useClassNames, TypeChecker } from '../utils';
+import { useControlled, partitionHTMLProps, useClassNames } from '../utils';
 import { CheckboxGroupContext } from '../CheckboxGroup';
+import { refType } from '../internals/propTypes';
 /**
  * The Checkbox component is used for selecting multiple options from a set.
  * @see https://rsuitejs.com/components/checkbox
@@ -147,7 +148,7 @@ Checkbox.propTypes = {
   onChange: PropTypes.func,
   onClick: PropTypes.func,
   inputProps: PropTypes.any,
-  inputRef: TypeChecker.refType,
+  inputRef: refType,
   value: PropTypes.any,
   children: PropTypes.node,
   classPrefix: PropTypes.string,

package/esm/CheckboxGroup/CheckboxGroup.js

@@ -6,7 +6,7 @@ import PropTypes from 'prop-types';
 import cloneDeep from 'lodash/cloneDeep';
 import remove from 'lodash/remove';
 import { useClassNames, useControlled, shallowEqual } from '../utils';
-import Plaintext from '../Plaintext';
+import Plaintext from '../internals/Plaintext';
 import { CheckboxGroupContext } from './CheckboxGroupContext';
 /**
  * The `CheckboxGroup` component is used for selecting multiple options which are unrelated.

package/esm/DateInput/utils.js

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

package/esm/DatePicker/DatePicker.js

@@ -19,12 +19,11 @@ import Stack from '../Stack';
 import PredefinedRanges from './PredefinedRanges';
 import { createChainedFunction, mergeRefs, useClassNames, useControlled, useCustom, useUniqueId, useEventCallback, partitionHTMLProps } from '../utils';
 import { shouldRenderMonth, shouldRenderDate, shouldRenderTime, shouldOnlyRenderTime, setHours, getHours, addMonths, addDays, isValid, disabledTime, copyTime, calendarOnlyProps } from '../utils/dateUtils';
-import { PickerOverlay, PickerLabel, PickerIndicator, PickerToggleTrigger, pickerPropTypes, pickTriggerPropKeys, omitTriggerPropKeys, usePickerClassName, onMenuKeyDown } from '../Picker';
-import usePickerRef from '../Picker/usePickerRef';
+import { PickerPopup, PickerLabel, PickerIndicator, PickerToggleTrigger, pickerPropTypes, pickTriggerPropKeys, omitTriggerPropKeys, usePickerClassName, usePickerRef, onMenuKeyDown } from '../internals/Picker';
+import { OverlayCloseCause } from '../internals/Overlay/OverlayTrigger';
 import DateInput from '../DateInput';
 import InputGroup from '../InputGroup';
-import { OverlayCloseCause } from '../Overlay/OverlayTrigger';
-import { deprecatePropTypeNew } from '../utils/deprecatePropType';
+import { deprecatePropTypeNew } from '../internals/propTypes';
 import { getAriaLabel } from '../Calendar/utils';
 import { splitRanges } from './utils';
 /**
@@ -97,7 +96,7 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     onToggleTimeDropdown = props.onToggleTimeDropdown,
     onShortcutClick = props.onShortcutClick,
     restProps = _objectWithoutPropertiesLoose(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 = useUniqueId(classPrefix + "-", idProp);
+  var id = useUniqueId('rs-', idProp);
   var _usePickerRef = usePickerRef(ref),
     trigger = _usePickerRef.trigger,
     root = _usePickerRef.root,
@@ -274,7 +273,7 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     onClean === null || onClean === void 0 ? void 0 : onClean(event);
     event.stopPropagation();
   });
-  var handlePickerOverlayKeyDown = useEventCallback(function (event) {
+  var handlePickerPopupKeyDown = useEventCallback(function (event) {
     var delta = 0;
     var step = showMonth ? 6 : 7;
     var changeDateFunc = showMonth ? addMonths : addDays;
@@ -418,7 +417,7 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       left: left,
       top: top
     });
-    return /*#__PURE__*/React.createElement(PickerOverlay, {
+    return /*#__PURE__*/React.createElement(PickerPopup, {
       role: "dialog",
       "aria-labelledby": label ? id + "-label" : undefined,
       tabIndex: -1,
@@ -426,7 +425,7 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       ref: mergeRefs(overlay, speakerRef),
       style: styles,
       target: trigger,
-      onKeyDown: handlePickerOverlayKeyDown
+      onKeyDown: handlePickerPopupKeyDown
     }, /*#__PURE__*/React.createElement(Stack, {
       alignItems: "flex-start"
     }, sideRanges.length > 0 && /*#__PURE__*/React.createElement(PredefinedRanges, {

package/esm/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/esm/DateRangePicker/DateRangePicker.js

@@ -15,17 +15,16 @@ import { FormattedDate } from '../CustomProvider';
 import Toolbar from '../DatePicker/Toolbar';
 import PredefinedRanges from '../DatePicker/PredefinedRanges';
 import Stack from '../Stack';
-import { omitTriggerPropKeys, PickerOverlay, pickerPropTypes, PickerToggleTrigger, PickerIndicator, PickerLabel, pickTriggerPropKeys, usePickerClassName, onMenuKeyDown } from '../Picker';
+import { omitTriggerPropKeys, PickerPopup, pickerPropTypes, PickerToggleTrigger, PickerIndicator, PickerLabel, pickTriggerPropKeys, usePickerClassName, usePickerRef, onMenuKeyDown } from '../internals/Picker';
 import { createChainedFunction, DATERANGE_DISABLED_TARGET, mergeRefs, useClassNames, useControlled, useCustom, useUniqueId, useEventCallback, partitionHTMLProps, getStringLength } from '../utils';
 import { addMonths, compareAsc, isValid, isBefore, isSameDay, addDays, startOfDay, endOfDay, shouldRenderTime, isAfter, copyTime, isSameMonth, shouldRenderMonth, shouldRenderDate, reverseDateRangeOmitTime, getReversedTimeMeridian, calendarOnlyProps, shouldOnlyRenderTime } from '../utils/dateUtils';
 import Calendar from './Calendar';
 import * as disabledDateUtils from './disabledDateUtils';
 import { getSafeCalendarDate, getMonthHoverRange, getWeekHoverRange, isSameRange } from './utils';
-import { deprecatePropTypeNew } from '../utils/deprecatePropType';
+import { deprecatePropTypeNew, oneOf } from '../internals/propTypes';
 import DateRangePickerContext from './DateRangePickerContext';
 import DateRangeInput from '../DateRangeInput';
 import InputGroup from '../InputGroup';
-import usePickerRef from '../Picker/usePickerRef';
 /**
  * A date range picker allows you to select a date range from a calendar.
  *
@@ -77,6 +76,8 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     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,
@@ -92,8 +93,8 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     onSelect = props.onSelect,
     onShortcutClick = props.onShortcutClick,
     renderTitle = props.renderTitle,
-    restProps = _objectWithoutPropertiesLoose(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 = useUniqueId(classPrefix + "-", idProp);
+    restProps = _objectWithoutPropertiesLoose(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 = useUniqueId('rs-', idProp);
   var _usePickerRef = usePickerRef(ref),
     trigger = _usePickerRef.trigger,
     root = _usePickerRef.root,
@@ -196,9 +197,9 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     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(compareAsc);
       return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FormattedDate, {
@@ -538,8 +539,8 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       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();
@@ -598,7 +599,7 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     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.createElement(PickerOverlay, {
+    return /*#__PURE__*/React.createElement(PickerPopup, {
       role: "dialog",
       "aria-labelledby": label ? id + "-label" : undefined,
       tabIndex: -1,
@@ -623,10 +624,10 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       "data-testid": "daterange-predefined-side"
     }), /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
       className: prefix('daterange-content')
-    }, /*#__PURE__*/React.createElement("div", {
+    }, showHeader && /*#__PURE__*/React.createElement("div", {
       className: prefix('daterange-header'),
       "data-testid": "daterange-header"
-    }, getDateRangeString(selectedDates)), /*#__PURE__*/React.createElement("div", {
+    }, getDateRangeString(isSelectedIdle ? selectedDates : hoverDateRange)), /*#__PURE__*/React.createElement("div", {
       className: prefix("daterange-calendar-" + (showOneCalendar ? 'single' : 'group'))
     }, /*#__PURE__*/React.createElement(DateRangePickerContext.Provider, {
       value: {
@@ -754,7 +755,7 @@ DateRangePicker.propTypes = _extends({}, pickerPropTypes, {
   value: PropTypes.arrayOf(PropTypes.instanceOf(Date)),
   defaultValue: PropTypes.arrayOf(PropTypes.instanceOf(Date)),
   defaultCalendarValue: PropTypes.arrayOf(PropTypes.instanceOf(Date)),
-  hoverRange: PropTypes.oneOfType([PropTypes.oneOf(['week', 'month']), PropTypes.func]),
+  hoverRange: PropTypes.oneOfType([oneOf(['week', 'month']), PropTypes.func]),
   format: PropTypes.string,
   isoWeek: PropTypes.bool,
   oneTap: PropTypes.bool,

package/esm/Drawer/Drawer.js

@@ -8,6 +8,7 @@ import Modal from '../Modal';
 import { useClassNames } from '../utils';
 import deprecateComponent from '../utils/deprecateComponent';
 import DrawerContext from './DrawerContext';
+import { oneOf } from '../internals/propTypes';
 var DrawerBody = /*#__PURE__*/React.forwardRef(function (props, ref) {
   return /*#__PURE__*/React.createElement(Modal.Body, _extends({
     classPrefix: "drawer-body"
@@ -92,10 +93,10 @@ Drawer.Actions = DrawerActions;
 Drawer.Footer = deprecateComponent(DrawerFooter, '<Drawer.Footer> has been deprecated, use <Drawer.Actions> instead.');
 Drawer.Title = DrawerTitle;
 Drawer.displayName = 'Drawer';
-Drawer.propTypes = {
+Drawer.propTypes = _extends({}, Modal.propTypes, {
   classPrefix: PropTypes.string,
-  placement: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
+  placement: oneOf(['top', 'right', 'bottom', 'left']),
   children: PropTypes.node,
   className: PropTypes.string
-};
+});
 export default Drawer;

package/esm/Dropdown/Dropdown.js

@@ -7,10 +7,10 @@ import omit from 'lodash/omit';
 import pick from 'lodash/pick';
 import DropdownMenu from './DropdownMenu';
 import { mergeRefs, PLACEMENT_8, placementPolyfill, useClassNames } from '../utils';
-import deprecatePropType from '../utils/deprecatePropType';
+import { deprecatePropType, oneOf } from '../internals/propTypes';
 import DropdownItem from './DropdownItem';
 import DropdownContext from './DropdownContext';
-import Menu from '../Menu/Menu';
+import Menu from '../internals/Menu/Menu';
 import DropdownToggle from './DropdownToggle';
 import kebabCase from 'lodash/kebabCase';
 import NavContext from '../Nav/NavContext';
@@ -157,8 +157,8 @@ Dropdown.displayName = 'Dropdown';
 Dropdown.propTypes = {
   activeKey: PropTypes.any,
   classPrefix: PropTypes.string,
-  trigger: PropTypes.oneOfType([PropTypes.array, PropTypes.oneOf(['click', 'hover', 'contextMenu'])]),
-  placement: PropTypes.oneOf(PLACEMENT_8),
+  trigger: PropTypes.oneOfType([PropTypes.array, oneOf(['click', 'hover', 'contextMenu'])]),
+  placement: oneOf(PLACEMENT_8),
   title: PropTypes.node,
   disabled: PropTypes.bool,
   icon: PropTypes.node,

package/esm/Dropdown/DropdownItem.js

@@ -4,8 +4,8 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 import _pick from "lodash/pick";
 import React, { useCallback, useContext, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import deprecatePropType, { deprecatePropTypeNew } from '../utils/deprecatePropType';
-import MenuItem from '../Menu/MenuItem';
+import { deprecatePropType, deprecatePropTypeNew, oneOf } from '../internals/propTypes';
+import MenuItem from '../internals/Menu/MenuItem';
 import DropdownContext from './DropdownContext';
 import isNil from 'lodash/isNil';
 import { mergeRefs, shallowEqual, useClassNames } from '../utils';
@@ -16,6 +16,7 @@ import { useRenderDropdownItem } from './useRenderDropdownItem';
 import warnOnce from '../utils/warnOnce';
 import Nav from '../Nav';
 import DropdownSeparator from './DropdownSeparator';
+import classNames from 'classnames';
 /**
  * The `<Dropdown.Item>` API
  * - When used inside `<Sidenav>`, renders a `<TreeviewItem>`
@@ -118,7 +119,7 @@ var DropdownItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
       className: classes
     }, menuitem, dataAttributes, restProps, {
       children: /*#__PURE__*/React.createElement(React.Fragment, null, icon && /*#__PURE__*/React.cloneElement(icon, {
-        className: prefix('menu-icon')
+        className: classNames(prefix('menu-icon'), icon.props.className)
       }), children)
     }));
   });
@@ -128,7 +129,7 @@ DropdownItem.propTypes = {
   as: PropTypes.elementType,
   divider: deprecatePropTypeNew(PropTypes.bool, 'Use Dropdown.Separator component instead.'),
   panel: PropTypes.bool,
-  trigger: PropTypes.oneOfType([PropTypes.array, PropTypes.oneOf(['click', 'hover'])]),
+  trigger: PropTypes.oneOfType([PropTypes.array, oneOf(['click', 'hover'])]),
   open: deprecatePropType(PropTypes.bool),
   active: PropTypes.bool,
   disabled: PropTypes.bool,

package/esm/Dropdown/DropdownMenu.js

@@ -5,15 +5,16 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 var _templateObject, _templateObject2;
 import React, { useCallback, useContext, useMemo } from 'react';
 import omit from 'lodash/omit';
-import Menu from '../Menu/Menu';
-import MenuItem from '../Menu/MenuItem';
+import Menu from '../internals/Menu/Menu';
+import MenuItem from '../internals/Menu/MenuItem';
+import Menubar from '../internals/Menu/Menubar';
+import { oneOf } from '../internals/propTypes';
 import { mergeRefs, useClassNames } from '../utils';
 import PropTypes from 'prop-types';
 import AngleLeft from '@rsuite/icons/legacy/AngleLeft';
 import AngleRight from '@rsuite/icons/legacy/AngleRight';
 import useCustom from '../utils/useCustom';
 import DropdownContext from './DropdownContext';
-import Menubar from '../Menu/Menubar';
 import Nav from '../Nav';
 import NavContext from '../Nav/NavContext';
 import warnOnce from '../utils/warnOnce';
@@ -169,7 +170,7 @@ DropdownMenu.propTypes = {
   pullLeft: PropTypes.bool,
   title: PropTypes.node,
   open: PropTypes.bool,
-  trigger: PropTypes.oneOf(['click', 'hover']),
+  trigger: oneOf(['click', 'hover']),
   eventKey: PropTypes.any,
   expanded: PropTypes.bool,
   collapsible: PropTypes.bool,

package/esm/Dropdown/DropdownToggle.js

@@ -6,6 +6,7 @@ import PropTypes from 'prop-types';
 import Button from '../Button';
 import { useClassNames } from '../utils';
 import useToggleCaret from '../utils/useToggleCaret';
+import { oneOf } from '../internals/propTypes';
 var DropdownToggle = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _props$as = props.as,
     Component = _props$as === void 0 ? Button : _props$as,
@@ -48,6 +49,6 @@ DropdownToggle.propTypes = {
   noCaret: PropTypes.bool,
   as: PropTypes.elementType,
   renderToggle: PropTypes.func,
-  placement: PropTypes.oneOf(['bottomStart', 'bottomEnd', 'topStart', 'topEnd', 'leftStart', 'rightStart', 'leftEnd', 'rightEnd'])
+  placement: oneOf(['bottomStart', 'bottomEnd', 'topStart', 'topEnd', 'leftStart', 'rightStart', 'leftEnd', 'rightEnd'])
 };
 export default DropdownToggle;

package/esm/FlexboxGrid/FlexboxGrid.js

@@ -5,6 +5,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { useClassNames } from '../utils';
 import FlexboxGridItem from './FlexboxGridItem';
+import { oneOf } from '../internals/propTypes';
 /**
  * The FlexboxGrid component is a box that can be used to layout other components.
  * @see https://rsuitejs.com/components/flexbox-grid
@@ -34,7 +35,7 @@ FlexboxGrid.displayName = 'FlexboxGrid';
 FlexboxGrid.propTypes = {
   className: PropTypes.string,
   classPrefix: PropTypes.string,
-  align: PropTypes.oneOf(['top', 'middle', 'bottom']),
-  justify: PropTypes.oneOf(['start', 'end', 'center', 'space-around', 'space-between'])
+  align: oneOf(['top', 'middle', 'bottom']),
+  justify: oneOf(['start', 'end', 'center', 'space-around', 'space-between'])
 };
 export default FlexboxGrid;

package/esm/Form/Form.d.ts

@@ -32,6 +32,20 @@ export interface FormProps<T = Record<string, any>, errorMsgType = any, E = {
     disabled?: boolean;
     /** The error message comes from context */
     errorFromContext?: boolean;
+    /**
+     * The form data is nested.
+     * You may now nest fields with "dot syntax" (e.g. address.city).
+     *
+     * @default false
+     * @version v5.51.0
+     * @example
+     * ```jsx
+     * <Form formValue={{ address: { city: 'Shanghai' } }} nestedField>
+     *  <FormControl name="address.city" />
+     * </Form>
+     * ```
+     */
+    nestedField?: boolean;
     /** Callback fired when data changing */
     onChange?: (formValue: T, event?: React.SyntheticEvent) => void;
     /** Callback fired when error checking */