rsuite 5.72.0 → 5.73.1

package/cjs/Calendar/hooks/useCalendarState.js

@@ -15,9 +15,16 @@ var useCalendarState = exports.useCalendarState = function useCalendarState(prop
   var _useState = (0, _react.useState)(props.defaultState),
     calendarState = _useState[0],
     setCalendarState = _useState[1];
-  var reset = (0, _react.useCallback)(function () {
+  var reset = (0, _hooks.useEventCallback)(function () {
     setCalendarState(undefined);
-  }, []);
+    if (calendarState === CalendarState.TIME) {
+      var _props$onToggleTimeDr;
+      (_props$onToggleTimeDr = props.onToggleTimeDropdown) === null || _props$onToggleTimeDr === void 0 ? void 0 : _props$onToggleTimeDr.call(props, false);
+    } else if (calendarState === CalendarState.MONTH) {
+      var _props$onToggleMonthD;
+      (_props$onToggleMonthD = props.onToggleMonthDropdown) === null || _props$onToggleMonthD === void 0 ? void 0 : _props$onToggleMonthD.call(props, false);
+    }
+  });
   var onMoveForward = (0, _hooks.useEventCallback)(function () {
     var _props$onMoveForward;
     (_props$onMoveForward = props.onMoveForward) === null || _props$onMoveForward === void 0 ? void 0 : _props$onMoveForward.call(props, (0, _date.addMonths)(props.calendarDate, 1));
@@ -27,22 +34,22 @@ var useCalendarState = exports.useCalendarState = function useCalendarState(prop
     (_props$onMoveBackward = props.onMoveBackward) === null || _props$onMoveBackward === void 0 ? void 0 : _props$onMoveBackward.call(props, (0, _date.addMonths)(props.calendarDate, -1));
   });
   var onToggleTimeDropdown = (0, _hooks.useEventCallback)(function () {
-    var _props$onToggleTimeDr;
+    var _props$onToggleTimeDr2;
     if (calendarState === CalendarState.TIME) {
-      reset();
+      setCalendarState(undefined);
     } else {
       setCalendarState(CalendarState.TIME);
     }
-    (_props$onToggleTimeDr = props.onToggleTimeDropdown) === null || _props$onToggleTimeDr === void 0 ? void 0 : _props$onToggleTimeDr.call(props, calendarState !== CalendarState.TIME);
+    (_props$onToggleTimeDr2 = props.onToggleTimeDropdown) === null || _props$onToggleTimeDr2 === void 0 ? void 0 : _props$onToggleTimeDr2.call(props, calendarState !== CalendarState.TIME);
   });
   var onToggleMonthDropdown = (0, _hooks.useEventCallback)(function () {
-    var _props$onToggleMonthD;
+    var _props$onToggleMonthD2;
     if (calendarState === CalendarState.MONTH) {
-      reset();
+      setCalendarState(undefined);
     } else {
       setCalendarState(CalendarState.MONTH);
     }
-    (_props$onToggleMonthD = props.onToggleMonthDropdown) === null || _props$onToggleMonthD === void 0 ? void 0 : _props$onToggleMonthD.call(props, calendarState !== CalendarState.MONTH);
+    (_props$onToggleMonthD2 = props.onToggleMonthDropdown) === null || _props$onToggleMonthD2 === void 0 ? void 0 : _props$onToggleMonthD2.call(props, calendarState !== CalendarState.MONTH);
   });
   var handlers = (0, _react.useMemo)(function () {
     return {

package/cjs/Calendar/utils/index.d.ts

@@ -1 +1,2 @@
 export { getAriaLabel } from './getAriaLabel';
+export { isEveryDateInMonth } from './isEveryDateInMonth';

package/cjs/Calendar/utils/index.js

@@ -2,6 +2,8 @@
 "use strict";
 
 exports.__esModule = true;
-exports.getAriaLabel = void 0;
+exports.isEveryDateInMonth = exports.getAriaLabel = void 0;
 var _getAriaLabel = require("./getAriaLabel");
-exports.getAriaLabel = _getAriaLabel.getAriaLabel;
+exports.getAriaLabel = _getAriaLabel.getAriaLabel;
+var _isEveryDateInMonth = require("./isEveryDateInMonth");
+exports.isEveryDateInMonth = _isEveryDateInMonth.isEveryDateInMonth;

package/cjs/Calendar/utils/isEveryDateInMonth.d.ts

@@ -0,0 +1 @@
+export declare function isEveryDateInMonth(year: number, month: number, predicate: (date: Date) => boolean): boolean;

package/cjs/Calendar/utils/isEveryDateInMonth.js

@@ -0,0 +1,15 @@
+'use client';
+"use strict";
+
+exports.__esModule = true;
+exports.isEveryDateInMonth = isEveryDateInMonth;
+var _date = require("../../internals/utils/date");
+function isEveryDateInMonth(year, month, predicate) {
+  var days = (0, _date.getDaysInMonth)(new Date(year, month));
+  for (var i = 1; i <= days; i++) {
+    if (!predicate(new Date(year, month, i))) {
+      return false;
+    }
+  }
+  return true;
+}

package/cjs/CascadeTree/TreeView.js

@@ -13,8 +13,8 @@ var _isNil = _interopRequireDefault(require("lodash/isNil"));
 var _utils = require("../internals/utils");
 var _hooks = require("../internals/hooks");
 var _Picker = require("../internals/Picker");
-var _AngleLeft = _interopRequireDefault(require("@rsuite/icons/legacy/AngleLeft"));
-var _AngleRight = _interopRequireDefault(require("@rsuite/icons/legacy/AngleRight"));
+var _PagePrevious = _interopRequireDefault(require("@rsuite/icons/PagePrevious"));
+var _PageNext = _interopRequireDefault(require("@rsuite/icons/PageNext"));
 var _getPosition = _interopRequireDefault(require("dom-lib/getPosition"));
 var _scrollTop = _interopRequireDefault(require("dom-lib/scrollTop"));
 var _excluded = ["as", "activeItemValue", "classPrefix", "className", "childrenKey", "disabledItemValues", "columnWidth", "columnHeight", "valueKey", "data", "cascadePaths", "loadingItemsSet", "labelKey", "style", "renderColumn", "renderTreeNode", "onSelect"];
@@ -117,7 +117,7 @@ var TreeView = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
 
     // Use `value` in keys when If `value` is string or number
     var onlyKey = typeof value === 'number' || typeof value === 'string' ? value : index;
-    var Icon = loading ? _Spinner.default : rtl ? _AngleLeft.default : _AngleRight.default;
+    var Icon = loading ? _Spinner.default : rtl ? _PagePrevious.default : _PageNext.default;
     return /*#__PURE__*/_react.default.createElement(_Picker.ListItem, {
       as: 'li',
       role: "treeitem",

package/cjs/CustomProvider/CustomProvider.d.ts

@@ -102,14 +102,38 @@ export interface CustomValue<T = Locale> {
     disableRipple?: boolean;
 }
 export interface CustomProviderProps<T = Locale> extends Partial<CustomValue<T>> {
-    /** Supported themes */
+    /**
+     * Supported themes
+     */
     theme?: 'light' | 'dark' | 'high-contrast';
-    /** The prefix of the component CSS class */
+    /**
+     * The prefix of the component CSS class
+     */
     classPrefix?: string;
-    /** Primary content */
+    /**
+     * The prefix of the icon CSS class
+     */
+    iconClassPrefix?: string;
+    /**
+     * Primary content
+     */
     children?: React.ReactNode;
-    /** Sets a container for toast rendering */
+    /**
+     * Sets a container for toast rendering
+     */
     toastContainer?: HTMLElement | (() => HTMLElement | null) | null;
+    csp?: {
+        /**
+         * Content Security Policy nonce
+         * https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/nonce
+         */
+        nonce?: string;
+    };
+    /**
+     * Disable inline styles
+     * @default false
+     */
+    disableInlineStyles?: boolean;
 }
 declare const CustomContext: React.Context<CustomProviderProps<{
     code?: string | undefined;
@@ -149,9 +173,7 @@ declare const CustomContext: React.Context<CustomProviderProps<{
         hours: string;
         minutes: string;
         seconds: string;
-        formattedMonthPattern: string; /**
-         * The locale object that contains the language and formatting rules for the date.
-         */
+        formattedMonthPattern: string;
         formattedDayPattern: string;
         shortDateFormat: string;
         shortTimeFormat: string;
@@ -172,9 +194,7 @@ declare const CustomContext: React.Context<CustomProviderProps<{
         hours: string;
         minutes: string;
         seconds: string;
-        formattedMonthPattern: string; /**
-         * The locale object that contains the language and formatting rules for the date.
-         */
+        formattedMonthPattern: string;
         formattedDayPattern: string;
         shortDateFormat: string;
         shortTimeFormat: string;
@@ -196,9 +216,7 @@ declare const CustomContext: React.Context<CustomProviderProps<{
         hours: string;
         minutes: string;
         seconds: string;
-        formattedMonthPattern: string; /**
-         * The locale object that contains the language and formatting rules for the date.
-         */
+        formattedMonthPattern: string;
         formattedDayPattern: string;
         shortDateFormat: string;
         shortTimeFormat: string;

package/cjs/CustomProvider/CustomProvider.js

@@ -6,12 +6,13 @@ exports.__esModule = true;
 exports.default = exports.CustomContext = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
+var _IconProvider = _interopRequireDefault(require("@rsuite/icons/IconProvider"));
 var _hooks = require("../internals/hooks");
 var _prefix = require("../internals/utils/prefix");
 var _DOMHelper = require("../DOMHelper");
 var _ToastContainer = _interopRequireWildcard(require("../toaster/ToastContainer"));
-var _excluded = ["children", "classPrefix", "theme", "toastContainer", "disableRipple"];
+var _excluded = ["children", "classPrefix", "iconClassPrefix", "theme", "toastContainer", "disableRipple", "csp", "disableInlineStyles"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 var CustomContext = exports.CustomContext = /*#__PURE__*/_react.default.createContext({});
@@ -26,17 +27,21 @@ var CustomProvider = function CustomProvider(props) {
   var children = props.children,
     _props$classPrefix = props.classPrefix,
     classPrefix = _props$classPrefix === void 0 ? (0, _prefix.getClassNamePrefix)() : _props$classPrefix,
+    _props$iconClassPrefi = props.iconClassPrefix,
+    iconClassPrefix = _props$iconClassPrefi === void 0 ? classPrefix : _props$iconClassPrefi,
     theme = props.theme,
     container = props.toastContainer,
     disableRipple = props.disableRipple,
+    csp = props.csp,
+    disableInlineStyles = props.disableInlineStyles,
     rest = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  var toasters = _react.default.useRef(new Map());
+  var toasters = (0, _react.useRef)(new Map());
   var _usePortal = (0, _hooks.usePortal)({
       container: container,
       waitMount: true
     }),
     Portal = _usePortal.Portal;
-  var value = _react.default.useMemo(function () {
+  var value = (0, _react.useMemo)(function () {
     return (0, _extends2.default)({
       classPrefix: classPrefix,
       theme: theme,
@@ -44,6 +49,13 @@ var CustomProvider = function CustomProvider(props) {
       disableRipple: disableRipple
     }, rest);
   }, [classPrefix, theme, disableRipple, rest]);
+  var iconContext = (0, _react.useMemo)(function () {
+    return {
+      classPrefix: iconClassPrefix,
+      csp: csp,
+      disableInlineStyles: disableInlineStyles
+    };
+  }, [iconClassPrefix, csp, disableInlineStyles]);
   (0, _hooks.useIsomorphicLayoutEffect)(function () {
     if (_DOMHelper.canUseDOM && theme) {
       (0, _DOMHelper.addClass)(document.body, (0, _prefix.prefix)(classPrefix, "theme-" + theme));
@@ -58,8 +70,10 @@ var CustomProvider = function CustomProvider(props) {
   }, [classPrefix, theme]);
   return /*#__PURE__*/_react.default.createElement(CustomContext.Provider, {
     value: value
+  }, /*#__PURE__*/_react.default.createElement(_IconProvider.default, {
+    value: iconContext
   }, children, /*#__PURE__*/_react.default.createElement(Portal, null, /*#__PURE__*/_react.default.createElement("div", {
-    className: "rs-toast-provider"
+    className: classPrefix + "toast-provider"
   }, _ToastContainer.toastPlacements.map(function (placement) {
     return /*#__PURE__*/_react.default.createElement(_ToastContainer.default, {
       key: placement,
@@ -68,6 +82,6 @@ var CustomProvider = function CustomProvider(props) {
         toasters.current.set(placement, _ref);
       }
     });
-  }))));
+  })))));
 };
 var _default = exports.default = CustomProvider;

package/cjs/DatePicker/DatePicker.js

@@ -11,10 +11,11 @@ var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _mapValues = _interopRequireDefault(require("lodash/mapValues"));
 var _pick = _interopRequireDefault(require("lodash/pick"));
-var _Calendar = _interopRequireDefault(require("@rsuite/icons/legacy/Calendar"));
+var _Calendar = _interopRequireDefault(require("@rsuite/icons/Calendar"));
 var _Time = _interopRequireDefault(require("@rsuite/icons/Time"));
 var _CalendarContainer = _interopRequireDefault(require("../Calendar/CalendarContainer"));
 var _hooks = require("../Calendar/hooks");
+var _utils = require("../Calendar/utils");
 var _Toolbar = _interopRequireDefault(require("./Toolbar"));
 var _Stack = _interopRequireDefault(require("../Stack"));
 var _PredefinedRanges = _interopRequireDefault(require("./PredefinedRanges"));
@@ -23,13 +24,12 @@ var _InputGroup = _interopRequireDefault(require("../InputGroup"));
 var _useMonthView2 = _interopRequireDefault(require("./hooks/useMonthView"));
 var _useFocus2 = _interopRequireDefault(require("./hooks/useFocus"));
 var _useCustomizedInput2 = _interopRequireDefault(require("./hooks/useCustomizedInput"));
-var _MonthDropdown = require("../Calendar/MonthDropdown");
-var _utils = require("../internals/utils");
+var _utils2 = require("../internals/utils");
 var _hooks2 = require("../internals/hooks");
 var _date = require("../internals/utils/date");
 var _Picker = require("../internals/Picker");
 var _OverlayTrigger = require("../internals/Overlay/OverlayTrigger");
-var _utils2 = require("./utils");
+var _utils3 = require("./utils");
 var _templateObject, _templateObject2;
 var _excluded = ["as", "className", "classPrefix", "calendarDefaultDate", "cleanable", "caretAs", "editable", "defaultValue", "disabled", "readOnly", "plaintext", "format", "id", "isoWeek", "weekStart", "limitEndYear", "limitStartYear", "locale", "loading", "label", "menuClassName", "menuStyle", "appearance", "placement", "oneTap", "placeholder", "ranges", "value", "showMeridian", "showMeridiem", "showWeekNumbers", "style", "size", "monthDropdownProps", "shouldDisableDate", "shouldDisableHour", "shouldDisableMinute", "shouldDisableSecond", "onChange", "onChangeCalendarDate", "onClean", "onEnter", "onExit", "onNextMonth", "onOk", "onPrevMonth", "onSelect", "onToggleMonthDropdown", "onToggleTimeDropdown", "onShortcutClick", "renderCell", "renderValue", "disabledDate", "disabledHours", "disabledMinutes", "disabledSeconds"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
@@ -173,7 +173,7 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
    * If any day in the month is disabled, the entire month is disabled
    */
   var isMonthDisabled = function isMonthDisabled(date) {
-    return (0, _MonthDropdown.isEveryDateInMonth)(date.getFullYear(), date.getMonth(), isDateDisabled);
+    return (0, _utils.isEveryDateInMonth)(date.getFullYear(), date.getMonth(), isDateDisabled);
   };
 
   /**
@@ -366,7 +366,7 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       return (_func = func === null || func === void 0 ? void 0 : func(next, date)) !== null && _func !== void 0 ? _func : false;
     };
   });
-  var _splitRanges = (0, _utils2.splitRanges)(ranges),
+  var _splitRanges = (0, _utils3.splitRanges)(ranges),
     sideRanges = _splitRanges.sideRanges,
     bottomRanges = _splitRanges.bottomRanges;
   var renderCalendarOverlay = function renderCalendarOverlay(positionProps, speakerRef) {
@@ -383,7 +383,7 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       "aria-labelledby": label ? id + "-label" : undefined,
       tabIndex: -1,
       className: classes,
-      ref: (0, _utils.mergeRefs)(overlay, speakerRef),
+      ref: (0, _utils2.mergeRefs)(overlay, speakerRef),
       style: styles,
       target: trigger,
       onKeyDown: handlePickerPopupKeyDown
@@ -460,7 +460,7 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     (_props$onClose = props.onClose) === null || _props$onClose === void 0 ? void 0 : _props$onClose.call(props);
   });
   var showCleanButton = cleanable && hasValue && !readOnly;
-  var _partitionHTMLProps = (0, _utils.partitionHTMLProps)(restProps, {
+  var _partitionHTMLProps = (0, _utils2.partitionHTMLProps)(restProps, {
       htmlProps: [],
       includeAria: true
     }),
@@ -486,8 +486,8 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     ref: trigger,
     placement: placement,
     onClose: handleTriggerClose,
-    onEnter: (0, _utils.createChainedFunction)(events.onActive, onEnter),
-    onExit: (0, _utils.createChainedFunction)(events.onInactive, onExit),
+    onEnter: (0, _utils2.createChainedFunction)(events.onActive, onEnter),
+    onExit: (0, _utils2.createChainedFunction)(events.onInactive, onExit),
     speaker: renderCalendarOverlay
   }, /*#__PURE__*/_react.default.createElement(Component, {
     className: merge(className, classes, (_merge = {}, _merge[prefix('error')] = invalidValue, _merge)),
@@ -497,7 +497,7 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     value: value,
     format: formatStr,
     plaintext: plaintext
-  }) : /*#__PURE__*/_react.default.createElement(_InputGroup.default, (0, _extends2.default)({}, (0, _utils2.getRestProps)(rest, usedClassNamePropKeys), {
+  }) : /*#__PURE__*/_react.default.createElement(_InputGroup.default, (0, _extends2.default)({}, (0, _utils3.getRestProps)(rest, usedClassNamePropKeys), {
     inside: true,
     size: size,
     disabled: disabled,
@@ -528,7 +528,7 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   }))));
 });
 DatePicker.displayName = 'DatePicker';
-DatePicker.propTypes = (0, _extends2.default)({}, _Picker.pickerPropTypes, _utils2.deprecatedPropTypes, {
+DatePicker.propTypes = (0, _extends2.default)({}, _Picker.pickerPropTypes, _utils3.deprecatedPropTypes, {
   calendarDefaultDate: _propTypes.default.instanceOf(Date),
   defaultValue: _propTypes.default.instanceOf(Date),
   shouldDisableDate: _propTypes.default.func,

package/cjs/DateRangePicker/DateRangePicker.js

@@ -12,7 +12,7 @@ var _isNil = _interopRequireDefault(require("lodash/isNil"));
 var _omit = _interopRequireDefault(require("lodash/omit"));
 var _pick = _interopRequireDefault(require("lodash/pick"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _Calendar = _interopRequireDefault(require("@rsuite/icons/legacy/Calendar"));
+var _Calendar = _interopRequireDefault(require("@rsuite/icons/Calendar"));
 var _Time = _interopRequireDefault(require("@rsuite/icons/Time"));
 var _Toolbar = _interopRequireDefault(require("../DatePicker/Toolbar"));
 var _PredefinedRanges = _interopRequireDefault(require("../DatePicker/PredefinedRanges"));

package/cjs/Drawer/Drawer.js

@@ -6,13 +6,12 @@ exports.__esModule = true;
 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 _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _Slide = _interopRequireDefault(require("../Animation/Slide"));
 var _Modal = _interopRequireDefault(require("../Modal"));
 var _hooks = require("../internals/hooks");
 var _utils = require("../internals/utils");
-var _DrawerContext = _interopRequireDefault(require("./DrawerContext"));
 var _propTypes2 = require("../internals/propTypes");
 var _DrawerBody = _interopRequireDefault(require("./DrawerBody"));
 var _DrawerHeader = _interopRequireDefault(require("./DrawerHeader"));
@@ -20,8 +19,6 @@ var _DrawerActions = _interopRequireDefault(require("./DrawerActions"));
 var _DrawerFooter = _interopRequireDefault(require("./DrawerFooter"));
 var _DrawerTitle = _interopRequireDefault(require("./DrawerTitle"));
 var _excluded = ["className", "placement", "classPrefix", "animation", "closeButton"];
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 /**
  * The Drawer component is used to display extra content from a main content.
  * @see https://rsuitejs.com/components/drawer
@@ -44,22 +41,16 @@ var Drawer = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var animationProps = {
     placement: placement
   };
-  var contextValue = (0, _react.useMemo)(function () {
-    return {
-      closeButton: closeButton,
-      isDrawer: true
-    };
-  }, [closeButton]);
-  return /*#__PURE__*/_react.default.createElement(_DrawerContext.default.Provider, {
-    value: contextValue
-  }, /*#__PURE__*/_react.default.createElement(_Modal.default, (0, _extends2.default)({}, rest, {
+  return /*#__PURE__*/_react.default.createElement(_Modal.default, (0, _extends2.default)({}, rest, {
     ref: ref,
     overflow: false,
     classPrefix: classPrefix,
     className: classes,
     animation: animation,
-    animationProps: animationProps
-  })));
+    animationProps: animationProps,
+    isDrawer: true,
+    closeButton: closeButton
+  }));
 });
 _DrawerBody.default.displayName = 'DrawerBody';
 _DrawerHeader.default.displayName = 'DrawerHeader';

package/cjs/Dropdown/Dropdown.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import DropdownMenu from './DropdownMenu';
 import { TypeAttributes, WithAsProps, RsRefForwardingComponent } from '../internals/types';
-import { IconProps } from '@rsuite/icons/lib/Icon';
+import { IconProps } from '@rsuite/icons/Icon';
 import DropdownItem from './DropdownItem';
 import Button from '../Button';
 import DropdownSeparator from './DropdownSeparator';

package/cjs/Dropdown/DropdownItem.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { IconProps } from '@rsuite/icons/lib/Icon';
+import { IconProps } from '@rsuite/icons/Icon';
 import type { RsRefForwardingComponent, WithAsProps } from '../internals/types';
 export interface DropdownMenuItemProps<T = any> extends WithAsProps, Omit<React.HTMLAttributes<HTMLElement>, 'onSelect'> {
     /** Active the current option */

package/cjs/Dropdown/DropdownMenu.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { StandardProps } from '../internals/types';
-import { IconProps } from '@rsuite/icons/lib/Icon';
+import { IconProps } from '@rsuite/icons/Icon';
 export interface DropdownMenuProps<T = string> extends StandardProps {
     /** Define the title as a submenu */
     title?: React.ReactNode;

package/cjs/Dropdown/DropdownMenu.js

@@ -16,8 +16,8 @@ var _propTypes = require("../internals/propTypes");
 var _hooks = require("../internals/hooks");
 var _utils = require("../internals/utils");
 var _propTypes2 = _interopRequireDefault(require("prop-types"));
-var _AngleLeft = _interopRequireDefault(require("@rsuite/icons/legacy/AngleLeft"));
-var _AngleRight = _interopRequireDefault(require("@rsuite/icons/legacy/AngleRight"));
+var _PagePrevious = _interopRequireDefault(require("@rsuite/icons/PagePrevious"));
+var _PageNext = _interopRequireDefault(require("@rsuite/icons/PageNext"));
 var _DropdownContext = _interopRequireDefault(require("./DropdownContext"));
 var _Nav = _interopRequireDefault(require("../Nav"));
 var _NavContext = _interopRequireDefault(require("../Nav/NavContext"));
@@ -115,7 +115,7 @@ var DropdownMenu = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
     icon = _omit.icon,
     disabled = _omit.disabled,
     menuProps = (0, _objectWithoutPropertiesLoose2.default)(_omit, _excluded2);
-  var Icon = rtl ? _AngleLeft.default : _AngleRight.default;
+  var Icon = rtl ? _PagePrevious.default : _PageNext.default;
   return /*#__PURE__*/_react.default.createElement(_Menu.default, {
     openMenuOn: ['mouseover', 'click'],
     renderMenuButton: function renderMenuButton(_ref, buttonRef) {

package/cjs/Dropdown/DropdownToggle.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import Button from '../Button';
-import { IconProps } from '@rsuite/icons/lib/Icon';
+import { IconProps } from '@rsuite/icons/Icon';
 import { WithAsProps, RsRefForwardingComponent, TypeAttributes } from '../internals/types';
 export interface DropdownToggleProps extends WithAsProps {
     icon?: React.ReactElement<IconProps>;

package/cjs/FormControl/hooks/useField.js

@@ -22,6 +22,9 @@ function getErrorMessage(error) {
   if (error !== null && error !== void 0 && error.array && ((_error$array = error.array) === null || _error$array === void 0 ? void 0 : _error$array.length) > 0) {
     return error.array[0].errorMessage;
   }
+  if ( /*#__PURE__*/(0, _react.isValidElement)(error)) {
+    return error;
+  }
   return error === null || error === void 0 ? void 0 : error.errorMessage;
 }
 function useField(props) {

package/cjs/FormHelpText/FormHelpText.js

@@ -12,7 +12,7 @@ var _Tooltip = _interopRequireDefault(require("../Tooltip"));
 var _Whisper = _interopRequireDefault(require("../Whisper"));
 var _hooks = require("../internals/hooks");
 var _FormGroup = require("../FormGroup");
-var _HelpO = _interopRequireDefault(require("@rsuite/icons/legacy/HelpO"));
+var _HelpOutline = _interopRequireDefault(require("@rsuite/icons/HelpOutline"));
 var _excluded = ["as", "classPrefix", "className", "tooltip", "children", "id"];
 /**
  * The `<Form.HelpText>` component is used to display help information in the form.
@@ -48,7 +48,7 @@ var FormHelpText = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
       role: "img",
       "aria-label": "help",
       className: classes
-    }, /*#__PURE__*/_react.default.createElement(_HelpO.default, {
+    }, /*#__PURE__*/_react.default.createElement(_HelpOutline.default, {
       "aria-hidden": true
     })));
   }

package/cjs/IconButton/IconButton.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { IconProps } from '@rsuite/icons/lib/Icon';
+import { IconProps } from '@rsuite/icons/Icon';
 import { RsRefForwardingComponent } from '../internals/types';
 import Button, { ButtonProps } from '../Button';
 export interface IconButtonProps extends ButtonProps {

package/cjs/Modal/Modal.d.ts

@@ -27,6 +27,10 @@ export interface ModalProps extends BaseModalProps, Pick<React.HTMLAttributes<HT
     dialogAs?: React.ElementType;
     /** Automatically sets the height when the body content is too long. */
     overflow?: boolean;
+    /** Indicates if the component should be displayed as a drawer */
+    isDrawer?: boolean;
+    /** Custom close button, used when rendered as a Drawer */
+    closeButton?: React.ReactNode | boolean;
 }
 interface ModalComponent extends RsRefForwardingComponent<'div', ModalProps> {
     Body: typeof ModalBody;

package/cjs/Modal/Modal.js

@@ -24,9 +24,8 @@ var _ModalTitle = _interopRequireDefault(require("./ModalTitle"));
 var _ModalFooter = _interopRequireDefault(require("./ModalFooter"));
 var _utils2 = require("./utils");
 var _propTypes2 = require("../internals/propTypes");
-var _DrawerContext = _interopRequireDefault(require("../Drawer/DrawerContext"));
 var _templateObject, _templateObject2, _templateObject3;
-var _excluded = ["animation", "animationProps", "animationTimeout", "aria-labelledby", "aria-describedby", "backdropClassName", "backdrop", "className", "children", "classPrefix", "dialogClassName", "dialogStyle", "dialogAs", "enforceFocus", "full", "overflow", "open", "onClose", "onEntered", "onEntering", "onExited", "role", "size", "id"],
+var _excluded = ["animation", "animationProps", "animationTimeout", "aria-labelledby", "aria-describedby", "backdropClassName", "backdrop", "className", "children", "classPrefix", "dialogClassName", "dialogStyle", "dialogAs", "enforceFocus", "full", "overflow", "open", "onClose", "onEntered", "onEntering", "onExited", "role", "size", "id", "isDrawer", "closeButton"],
   _excluded2 = ["className"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -69,6 +68,9 @@ var Modal = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     _props$size = props.size,
     size = _props$size === void 0 ? 'sm' : _props$size,
     idProp = props.id,
+    _props$isDrawer = props.isDrawer,
+    isDrawer = _props$isDrawer === void 0 ? false : _props$isDrawer,
+    closeButton = props.closeButton,
     rest = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   var inClass = {
     in: open && !animation
@@ -85,11 +87,6 @@ var Modal = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var dialogRef = (0, _react.useRef)(null);
   var transitionEndListener = (0, _react.useRef)();
 
-  // Render Modal as Drawer
-  var _ref = (0, _react.useContext)(_DrawerContext.default) || {},
-    _ref$isDrawer = _ref.isDrawer,
-    isDrawer = _ref$isDrawer === void 0 ? false : _ref$isDrawer;
-
   // The style of the Modal body will be updated with the size of the window or container.
   var _useBodyStyles = (0, _utils2.useBodyStyles)(dialogRef, {
       overflow: overflow,
@@ -106,9 +103,11 @@ var Modal = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       onModalClose: onClose,
       getBodyStyles: function getBodyStyles() {
         return bodyStyles;
-      }
+      },
+      closeButton: closeButton,
+      isDrawer: isDrawer
     };
-  }, [dialogId, onClose, bodyStyles]);
+  }, [dialogId, onClose, closeButton, isDrawer, bodyStyles]);
   var handleExited = (0, _react.useCallback)(function (node) {
     var _transitionEndListene;
     onExited === null || onExited === void 0 ? void 0 : onExited(node);
@@ -164,8 +163,8 @@ var Modal = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   });
   var sizeKey = 'width';
   if (isDrawer) {
-    var _ref2 = animationProps || {},
-      placement = _ref2.placement;
+    var _ref = animationProps || {},
+      placement = _ref.placement;
     // The width or height of the drawer depends on the placement.
     sizeKey = placement === 'top' || placement === 'bottom' ? 'height' : 'width';
   }
@@ -206,7 +205,7 @@ var Modal = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     onClick: backdrop ? handleBackdropClick : undefined,
     onMouseDown: handleMouseDown
   }), function (transitionProps, transitionRef) {
-    var _ref3;
+    var _ref2;
     var transitionClassName = transitionProps.className,
       transitionRest = (0, _objectWithoutPropertiesLoose2.default)(transitionProps, _excluded2);
     return /*#__PURE__*/_react.default.createElement(Dialog, (0, _extends2.default)({
@@ -214,7 +213,7 @@ var Modal = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       id: dialogId,
       "aria-labelledby": ariaLabelledby !== null && ariaLabelledby !== void 0 ? ariaLabelledby : dialogId + "-title",
       "aria-describedby": ariaDescribedby,
-      style: (_ref3 = {}, _ref3[sizeKey] = modalSizes.includes(size) ? undefined : size, _ref3)
+      style: (_ref2 = {}, _ref2[sizeKey] = modalSizes.includes(size) ? undefined : size, _ref2)
     }, transitionRest, (0, _pick.default)(rest, Object.keys(_ModalDialog.modalDialogPropTypes)), {
       ref: (0, _utils.mergeRefs)(dialogRef, transitionRef),
       classPrefix: classPrefix,

package/cjs/Modal/ModalBody.js

@@ -12,12 +12,10 @@ var _hooks = require("../internals/hooks");
 var _ModalContext = require("./ModalContext");
 var _IconButton = _interopRequireDefault(require("../IconButton"));
 var _Close = _interopRequireDefault(require("@rsuite/icons/Close"));
-var _DrawerContext = _interopRequireDefault(require("../Drawer/DrawerContext"));
 var _excluded = ["as", "classPrefix", "className", "style", "children"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 var ModalBody = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
-  var _context$getBodyStyle, _useContext;
   var _props$as = props.as,
     Component = _props$as === void 0 ? 'div' : _props$as,
     _props$classPrefix = props.classPrefix,
@@ -32,8 +30,11 @@ var ModalBody = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     prefix = _useClassNames.prefix;
   var classes = merge(className, withClassPrefix());
   var context = (0, _react.useContext)(_ModalContext.ModalContext);
-  var bodyStyles = context === null || context === void 0 ? void 0 : (_context$getBodyStyle = context.getBodyStyles) === null || _context$getBodyStyle === void 0 ? void 0 : _context$getBodyStyle.call(context);
-  var closeButton = (_useContext = (0, _react.useContext)(_DrawerContext.default)) === null || _useContext === void 0 ? void 0 : _useContext.closeButton;
+  var _ref = context || {},
+    getBodyStyles = _ref.getBodyStyles,
+    closeButton = _ref.closeButton,
+    onModalClose = _ref.onModalClose;
+  var bodyStyles = getBodyStyles === null || getBodyStyles === void 0 ? void 0 : getBodyStyles();
   var buttonElement = null;
   if (closeButton) {
     buttonElement = typeof closeButton === 'boolean' ? /*#__PURE__*/_react.default.createElement(_IconButton.default, {
@@ -41,7 +42,7 @@ var ModalBody = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       appearance: "subtle",
       size: "sm",
       className: prefix('close'),
-      onClick: context === null || context === void 0 ? void 0 : context.onModalClose
+      onClick: onModalClose
     }) : closeButton;
   }
   return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {