rsuite 5.73.0 → 5.73.1

package/CHANGELOG.md

@@ -1,3 +1,19 @@
+## [5.73.1](https://github.com/rsuite/rsuite/compare/v5.73.0...v5.73.1) (2024-10-25)
+
+
+### Bug Fixes
+
+* **Calendar:** fix not triggering the `onToggleTimeDropdown` event when collapsing the time panel ([#4009](https://github.com/rsuite/rsuite/issues/4009)) ([9e2d69e](https://github.com/rsuite/rsuite/commit/9e2d69e232b1317e00b856a470e97c2d7b4ddd37))
+* **CheckTree:** fix focus lost when search keyword matches selected item ([#4017](https://github.com/rsuite/rsuite/issues/4017)) ([119fed2](https://github.com/rsuite/rsuite/commit/119fed2778c2defb5cb772050cc52e9f72f63d87))
+* **Modal:** the style of Modal is messy when it's rendered inside of a Drawer ([#4016](https://github.com/rsuite/rsuite/issues/4016)) ([922ab04](https://github.com/rsuite/rsuite/commit/922ab04eb09f0437fa21db91b69cf7c8d9e407fc))
+
+
+### Features
+
+* **FormErrorMessage:** support display react element ([#4013](https://github.com/rsuite/rsuite/issues/4013)) ([50f22fc](https://github.com/rsuite/rsuite/commit/50f22fc104aa0e32c255aed4da89b6cb2c6a2447))
+
+
+
 # [5.73.0](https://github.com/rsuite/rsuite/compare/v5.72.0...v5.73.0) (2024-10-18)
 
 

package/CheckTree/styles/index.css

@@ -3627,7 +3627,6 @@ label:hover .rs-checkbox-control .rs-checkbox-inner::before {
   border-radius: 6px;
 }
 .rs-check-tree-node .rs-check-item.rs-checkbox-disabled .rs-checkbox-label {
-  cursor: not-allowed;
   color: #717273;
   color: var(--rs-text-disabled);
   background: none;

package/CheckTree/styles/index.less

@@ -103,7 +103,6 @@
 
     &.rs-checkbox-disabled {
       .rs-checkbox-label {
-        cursor: not-allowed;
         color: var(--rs-text-disabled);
         background: none;
       }

package/CheckTreePicker/styles/index.css

@@ -3627,7 +3627,6 @@ label:hover .rs-checkbox-control .rs-checkbox-inner::before {
   border-radius: 6px;
 }
 .rs-check-tree-node .rs-check-item.rs-checkbox-disabled .rs-checkbox-label {
-  cursor: not-allowed;
   color: #717273;
   color: var(--rs-text-disabled);
   background: none;

package/Checkbox/styles/mixin.less

@@ -29,7 +29,7 @@
   }
 
   &&-disabled label {
-    cursor: not-allowed;
+    cursor: @cursor-disabled;
   }
 
   // Disabled text styles.

package/RadioTile/styles/index.css

@@ -1,6 +1,67 @@
+:root,
+.rs-theme-light {
+  --rs-gray-200: #e5e5ea;
+  --rs-gray-300: #d9d9d9;
+  --rs-gray-400: #b6b7b8;
+  --rs-gray-600: #717273;
+  --rs-gray-800: #343434;
+  --rs-primary-200: #a6d7ff;
+  --rs-primary-500: #3498ff;
+  --rs-primary-900: #004299;
+  --rs-text-secondary: var(--rs-gray-600);
+  --rs-text-disabled: var(--rs-gray-600);
+  --rs-radio-tile-border: var(--rs-gray-300);
+  --rs-radio-tile-checked-color: var(--rs-primary-500);
+  --rs-radio-tile-checked-mark-color: #fff;
+  --rs-radio-tile-checked-disabled-color: var(--rs-primary-200);
+  --rs-radio-tile-icon-size: 32px;
+}
+.rs-theme-dark {
+  --rs-gray-200: #a4a9b3;
+  --rs-gray-300: #858b94;
+  --rs-gray-400: #6a6f76;
+  --rs-gray-600: #3c3f43;
+  --rs-gray-800: #1a1d24;
+  --rs-primary-200: #a6e9ff;
+  --rs-primary-500: #34c3ff;
+  --rs-primary-900: #006199;
+  --rs-text-secondary: var(--rs-gray-200);
+  --rs-text-disabled: var(--rs-gray-400);
+  --rs-radio-tile-border: var(--rs-gray-300);
+  --rs-radio-tile-checked-color: var(--rs-primary-500);
+  --rs-radio-tile-checked-mark-color: var(--rs-gray-800);
+  --rs-radio-tile-checked-disabled-color: var(--rs-primary-900);
+}
+.rs-theme-high-contrast {
+  --rs-gray-200: #a4a9b3;
+  --rs-gray-300: #858b94;
+  --rs-gray-400: #6a6f76;
+  --rs-gray-600: #3c3f43;
+  --rs-gray-800: #1a1d24;
+  --rs-primary-200: #fffa91;
+  --rs-primary-500: #ffff00;
+  --rs-primary-900: #8f9900;
+  --rs-text-secondary: var(--rs-gray-200);
+  --rs-text-disabled: var(--rs-gray-400);
+  --rs-radio-tile-border: var(--rs-gray-300);
+  --rs-radio-tile-checked-color: var(--rs-primary-500);
+  --rs-radio-tile-checked-mark-color: var(--rs-gray-800);
+  --rs-radio-tile-checked-disabled-color: var(--rs-primary-900);
+}
+/* stylelint-disable */
+*[class*='rs-'] {
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+}
+*[class*='rs-']::before,
+*[class*='rs-']::after {
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+}
 .rs-radio-tile {
   border-radius: 6px;
   overflow: hidden;
+  border: 2px solid #d9d9d9;
   border: 2px solid var(--rs-radio-tile-border);
   padding: 10px;
   position: relative;
@@ -10,9 +71,11 @@
   font-weight: bold;
 }
 .rs-radio-tile-content {
+  color: #717273;
   color: var(--rs-text-secondary);
 }
 .rs-radio-tile-mark {
+  background: #3498ff;
   background: var(--rs-radio-tile-checked-color);
   border-bottom-left-radius: 50%;
   height: 48px;
@@ -28,23 +91,28 @@
   font-size: 16px;
   top: 25px;
   left: 7px;
+  color: #fff;
   color: var(--rs-radio-tile-checked-mark-color);
 }
 .rs-radio-tile-checked .rs-radio-tile-mark {
   opacity: 1;
 }
 .rs-radio-tile-checked.rs-radio-tile-disabled {
+  border-color: #a6d7ff;
   border-color: var(--rs-radio-tile-checked-disabled-color);
 }
 .rs-radio-tile-checked.rs-radio-tile-disabled .rs-radio-tile-mark {
+  background-color: #a6d7ff;
   background-color: var(--rs-radio-tile-checked-disabled-color);
 }
 .rs-radio-tile-checked,
 .rs-radio-tile:hover:not(.rs-radio-tile-disabled) {
+  border: 2px solid #3498ff;
   border: 2px solid var(--rs-radio-tile-checked-color);
 }
 .rs-radio-tile-disabled,
 .rs-radio-tile-disabled .rs-radio-tile-content {
+  color: #717273;
   color: var(--rs-text-disabled);
   cursor: not-allowed;
 }
@@ -55,6 +123,7 @@
   position: absolute;
 }
 .rs-radio-tile-icon {
+  font-size: 32px;
   font-size: var(--rs-radio-tile-icon-size);
 }
 

package/RadioTile/styles/index.less

@@ -1,3 +1,5 @@
+@import '../../styles/common';
+
 .rs-radio-tile {
   border-radius: 6px;
   overflow: hidden;
@@ -53,7 +55,7 @@
   &-disabled,
   &-disabled &-content {
     color: var(--rs-text-disabled);
-    cursor: not-allowed;
+    cursor: @cursor-disabled;
   }
 
   input {

package/Rate/styles/index.less

@@ -94,7 +94,7 @@
   }
 
   &-disabled &-character {
-    cursor: not-allowed;
+    cursor: @cursor-disabled;
   }
 
   &-readonly &-character {

package/Slider/styles/index.less

@@ -19,7 +19,7 @@
 
   &-disabled {
     opacity: 0.5;
-    cursor: not-allowed;
+    cursor: @cursor-disabled;
 
     .rs-slider-bar,
     .rs-slider-handle::before {

package/TagInput/styles/index.css

@@ -3706,9 +3706,6 @@ textarea.rs-picker-search-input {
   left: 0;
   cursor: text;
 }
-.rs-picker-tag.rs-picker-disabled {
-  cursor: not-allowed;
-}
 .rs-picker-tag.rs-picker-disabled .rs-picker-toggle {
   position: absolute;
 }

package/TagPicker/styles/index.css

@@ -3706,9 +3706,6 @@ textarea.rs-picker-search-input {
   left: 0;
   cursor: text;
 }
-.rs-picker-tag.rs-picker-disabled {
-  cursor: not-allowed;
-}
 .rs-picker-tag.rs-picker-disabled .rs-picker-toggle {
   position: absolute;
 }

package/TagPicker/styles/index.less

@@ -13,8 +13,6 @@
   }
 
   &.rs-picker-disabled {
-    cursor: not-allowed;
-
     .rs-picker-toggle {
       position: absolute;
     }

package/Tree/styles/index.css

@@ -313,9 +313,6 @@
   display: block;
   bottom: -4px;
 }
-.rs-tree-node-drag-disabled.rs-tree-node-label {
-  cursor: not-allowed;
-}
 .rs-tree-node-disabled .rs-tree-node-label {
   background: none;
   color: #b6b7b8;

package/Tree/styles/index.less

@@ -135,12 +135,6 @@
     }
   }
 
-  &-drag-disabled {
-    &.rs-tree-node-label {
-      cursor: not-allowed;
-    }
-  }
-
   &-disabled {
     .rs-tree-node-label {
       background: none;

package/TreePicker/styles/index.css

@@ -313,9 +313,6 @@
   display: block;
   bottom: -4px;
 }
-.rs-tree-node-drag-disabled.rs-tree-node-label {
-  cursor: not-allowed;
-}
 .rs-tree-node-disabled .rs-tree-node-label {
   background: none;
   color: #b6b7b8;

package/cjs/Calendar/hooks/useCalendarState.d.ts

@@ -18,5 +18,5 @@ export declare const useCalendarState: (props: CalendarStateProps) => {
         onToggleTimeDropdown: (...args: any[]) => any;
         onToggleMonthDropdown: (...args: any[]) => any;
     };
-    reset: () => void;
+    reset: (...args: any[]) => any;
 };

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/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/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/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, {

package/cjs/Modal/ModalContext.d.ts

@@ -6,5 +6,9 @@ export interface ModalContextProps {
     onModalClose?: (event: React.MouseEvent<Element, MouseEvent>) => void;
     /** Pass the latest style to body. */
     getBodyStyles?: () => React.CSSProperties | null;
+    /** 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;
 }
 export declare const ModalContext: React.Context<ModalContextProps | null>;

package/cjs/Modal/ModalHeader.js

@@ -14,12 +14,10 @@ var _ModalContext = require("./ModalContext");
 var _CloseButton = _interopRequireDefault(require("../internals/CloseButton"));
 var _Close = _interopRequireDefault(require("@rsuite/icons/Close"));
 var _IconButton = _interopRequireDefault(require("../IconButton"));
-var _DrawerContext = _interopRequireDefault(require("../Drawer/DrawerContext"));
 var _excluded = ["as", "classPrefix", "className", "closeButton", "children", "onClose"];
 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 ModalHeader = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
-  var _useContext, _useContext2;
   var _props$as = props.as,
     Component = _props$as === void 0 ? 'div' : _props$as,
     _props$classPrefix = props.classPrefix,
@@ -35,8 +33,10 @@ var ModalHeader = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     withClassPrefix = _useClassNames.withClassPrefix,
     prefix = _useClassNames.prefix;
   var classes = merge(className, withClassPrefix());
-  var onModalClose = (_useContext = (0, _react.useContext)(_ModalContext.ModalContext)) === null || _useContext === void 0 ? void 0 : _useContext.onModalClose;
-  var isDrawer = (_useContext2 = (0, _react.useContext)(_DrawerContext.default)) === null || _useContext2 === void 0 ? void 0 : _useContext2.isDrawer;
+  var context = (0, _react.useContext)(_ModalContext.ModalContext);
+  var _ref = context || {},
+    isDrawer = _ref.isDrawer,
+    onModalClose = _ref.onModalClose;
   var buttonElement = isDrawer ? /*#__PURE__*/_react.default.createElement(_IconButton.default, {
     icon: /*#__PURE__*/_react.default.createElement(_Close.default, null),
     appearance: "subtle",

package/cjs/internals/hooks/useFocusVirtualListItem.d.ts

@@ -1,7 +1,10 @@
 /// <reference types="react" />
 /**
- * Virtualized list loses focus when scrolling or clicking options, causing the component to re-render.
- * To solve this problem, we need to refocus on the selected option after the component is re-rendered.
+ * Ensures that a virtualized list item retains focus after scrolling or clicking on options,
+ * preventing unnecessary re-renders and loss of focus. If the current focus is on an interactive
+ * element (such as input, textarea, select, button, or contenteditable), the focus is not shifted.
+ * @param focused - Boolean indicating if the item should be focused.
+ * @returns A ref to be attached to the list item element.
  */
 export declare function useFocusVirtualListItem<T extends HTMLElement>(focused?: boolean): import("react").RefObject<T>;
 export default useFocusVirtualListItem;

package/cjs/internals/hooks/useFocusVirtualListItem.js

@@ -6,19 +6,35 @@ exports.default = void 0;
 exports.useFocusVirtualListItem = useFocusVirtualListItem;
 var _react = require("react");
 /**
- * Virtualized list loses focus when scrolling or clicking options, causing the component to re-render.
- * To solve this problem, we need to refocus on the selected option after the component is re-rendered.
+ * Ensures that a virtualized list item retains focus after scrolling or clicking on options,
+ * preventing unnecessary re-renders and loss of focus. If the current focus is on an interactive
+ * element (such as input, textarea, select, button, or contenteditable), the focus is not shifted.
+ * @param focused - Boolean indicating if the item should be focused.
+ * @returns A ref to be attached to the list item element.
  */
 function useFocusVirtualListItem(focused) {
   var itemRef = (0, _react.useRef)(null);
   (0, _react.useEffect)(function () {
-    if (!focused) {
+    if (!focused || !itemRef.current) {
       return;
     }
-    if (document.activeElement !== itemRef.current) {
-      var _itemRef$current;
-      // Focus on the selected option.
-      (_itemRef$current = itemRef.current) === null || _itemRef$current === void 0 ? void 0 : _itemRef$current.focus();
+    var activeElement = document.activeElement;
+
+    // Helper function to determine if the element should retain focus
+    var isInteractiveElement = function isInteractiveElement(element) {
+      var tagName = element.tagName;
+      return tagName === 'INPUT' || tagName === 'TEXTAREA' || tagName === 'SELECT' || tagName === 'BUTTON' || element.isContentEditable || element.tabIndex >= 0 // Elements with tabindex are considered focusable
+      ;
+    };
+
+    // If the active element is an interactive one, don't shift focus.
+    if (activeElement && isInteractiveElement(activeElement)) {
+      return;
+    }
+
+    // If the currently focused element is not the target item, focus it.
+    if (activeElement !== itemRef.current) {
+      itemRef.current.focus();
     }
   }, [focused]);
   return itemRef;

package/dist/rsuite-no-reset-rtl.css

@@ -4485,7 +4485,6 @@ label:hover .rs-checkbox-control .rs-checkbox-inner::before {
   border-radius: 6px;
 }
 .rs-check-tree-node .rs-check-item.rs-checkbox-disabled .rs-checkbox-label {
-  cursor: not-allowed;
   color: #717273;
   color: var(--rs-text-disabled);
   background: none;
@@ -14381,9 +14380,6 @@ textarea.rs-inline-edit-sm .rs-plaintext {
   right: 0;
   cursor: text;
 }
-.rs-picker-tag.rs-picker-disabled {
-  cursor: not-allowed;
-}
 .rs-picker-tag.rs-picker-disabled .rs-picker-toggle {
   position: absolute;
 }
@@ -15505,9 +15501,6 @@ textarea.rs-inline-edit-sm .rs-plaintext {
   display: block;
   bottom: -4px;
 }
-.rs-tree-node-drag-disabled.rs-tree-node-label {
-  cursor: not-allowed;
-}
 .rs-tree-node-disabled .rs-tree-node-label {
   background: none;
   color: #b6b7b8;