rsuite 5.73.0 → 5.73.1

package/esm/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/esm/Calendar/hooks/useCalendarState.js

@@ -1,5 +1,5 @@
 'use client';
-import { useCallback, useMemo, useState } from 'react';
+import { useMemo, useState } from 'react';
 import { addMonths } from "../../internals/utils/date/index.js";
 import { useEventCallback } from "../../internals/hooks/index.js";
 export var CalendarState = /*#__PURE__*/function (CalendarState) {
@@ -11,9 +11,16 @@ export var useCalendarState = function useCalendarState(props) {
   var _useState = useState(props.defaultState),
     calendarState = _useState[0],
     setCalendarState = _useState[1];
-  var reset = useCallback(function () {
+  var reset = 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 = useEventCallback(function () {
     var _props$onMoveForward;
     (_props$onMoveForward = props.onMoveForward) === null || _props$onMoveForward === void 0 ? void 0 : _props$onMoveForward.call(props, addMonths(props.calendarDate, 1));
@@ -23,22 +30,22 @@ export var useCalendarState = function useCalendarState(props) {
     (_props$onMoveBackward = props.onMoveBackward) === null || _props$onMoveBackward === void 0 ? void 0 : _props$onMoveBackward.call(props, addMonths(props.calendarDate, -1));
   });
   var onToggleTimeDropdown = 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 = 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 = useMemo(function () {
     return {

package/esm/Drawer/Drawer.js

@@ -2,13 +2,12 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 var _excluded = ["className", "placement", "classPrefix", "animation", "closeButton"];
-import React, { useMemo } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import Slide from "../Animation/Slide.js";
 import Modal from "../Modal/index.js";
 import { useClassNames } from "../internals/hooks/index.js";
 import { deprecateComponent } from "../internals/utils/index.js";
-import DrawerContext from "./DrawerContext.js";
 import { oneOf } from "../internals/propTypes/index.js";
 import DrawerBody from "./DrawerBody.js";
 import DrawerHeader from "./DrawerHeader.js";
@@ -37,22 +36,16 @@ var Drawer = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var animationProps = {
     placement: placement
   };
-  var contextValue = useMemo(function () {
-    return {
-      closeButton: closeButton,
-      isDrawer: true
-    };
-  }, [closeButton]);
-  return /*#__PURE__*/React.createElement(DrawerContext.Provider, {
-    value: contextValue
-  }, /*#__PURE__*/React.createElement(Modal, _extends({}, rest, {
+  return /*#__PURE__*/React.createElement(Modal, _extends({}, rest, {
     ref: ref,
     overflow: false,
     classPrefix: classPrefix,
     className: classes,
     animation: animation,
-    animationProps: animationProps
-  })));
+    animationProps: animationProps,
+    isDrawer: true,
+    closeButton: closeButton
+  }));
 });
 DrawerBody.displayName = 'DrawerBody';
 DrawerHeader.displayName = 'DrawerHeader';

package/esm/FormControl/hooks/useField.js

@@ -1,6 +1,6 @@
 'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
-import { useCallback, useMemo } from 'react';
+import { isValidElement, useCallback, useMemo } from 'react';
 import get from 'lodash/get';
 import set from 'lodash/set';
 import { nameToPath } from "../utils.js";
@@ -17,6 +17,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__*/isValidElement(error)) {
+    return error;
+  }
   return error === null || error === void 0 ? void 0 : error.errorMessage;
 }
 function useField(props) {

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

@@ -3,9 +3,9 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 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"];
-import React, { useRef, useMemo, useState, useCallback, useContext } from 'react';
+import React, { useRef, useMemo, useState, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import pick from 'lodash/pick';
 import on from 'dom-lib/on';
@@ -22,7 +22,6 @@ import ModalTitle from "./ModalTitle.js";
 import ModalFooter from "./ModalFooter.js";
 import { useBodyStyles } from "./utils.js";
 import { deprecatePropType, oneOf } from "../internals/propTypes/index.js";
-import DrawerContext from "../Drawer/DrawerContext.js";
 var modalSizes = ['xs', 'sm', 'md', 'lg', 'full'];
 /**
  * The `Modal` component is used to show content in a layer above the app.
@@ -62,6 +61,9 @@ var Modal = /*#__PURE__*/React.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 = _objectWithoutPropertiesLoose(props, _excluded);
   var inClass = {
     in: open && !animation
@@ -78,11 +80,6 @@ var Modal = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var dialogRef = useRef(null);
   var transitionEndListener = useRef();
 
-  // Render Modal as Drawer
-  var _ref = useContext(DrawerContext) || {},
-    _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 = useBodyStyles(dialogRef, {
       overflow: overflow,
@@ -99,9 +96,11 @@ var Modal = /*#__PURE__*/React.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 = useCallback(function (node) {
     var _transitionEndListene;
     onExited === null || onExited === void 0 ? void 0 : onExited(node);
@@ -157,8 +156,8 @@ var Modal = /*#__PURE__*/React.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';
   }
@@ -199,7 +198,7 @@ var Modal = /*#__PURE__*/React.forwardRef(function (props, ref) {
     onClick: backdrop ? handleBackdropClick : undefined,
     onMouseDown: handleMouseDown
   }), function (transitionProps, transitionRef) {
-    var _ref3;
+    var _ref2;
     var transitionClassName = transitionProps.className,
       transitionRest = _objectWithoutPropertiesLoose(transitionProps, _excluded2);
     return /*#__PURE__*/React.createElement(Dialog, _extends({
@@ -207,7 +206,7 @@ var Modal = /*#__PURE__*/React.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, pick(rest, Object.keys(modalDialogPropTypes)), {
       ref: mergeRefs(dialogRef, transitionRef),
       classPrefix: classPrefix,

package/esm/Modal/ModalBody.js

@@ -8,9 +8,7 @@ import { useClassNames } from "../internals/hooks/index.js";
 import { ModalContext } from "./ModalContext.js";
 import IconButton from "../IconButton/index.js";
 import Close from '@rsuite/icons/Close';
-import DrawerContext from "../Drawer/DrawerContext.js";
 var ModalBody = /*#__PURE__*/React.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,
@@ -25,8 +23,11 @@ var ModalBody = /*#__PURE__*/React.forwardRef(function (props, ref) {
     prefix = _useClassNames.prefix;
   var classes = merge(className, withClassPrefix());
   var context = useContext(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 = useContext(DrawerContext)) === 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.createElement(IconButton, {
@@ -34,7 +35,7 @@ var ModalBody = /*#__PURE__*/React.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.createElement(Component, _extends({}, rest, {

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

@@ -10,9 +10,7 @@ import { ModalContext } from "./ModalContext.js";
 import CloseButton from "../internals/CloseButton/index.js";
 import Close from '@rsuite/icons/Close';
 import IconButton from "../IconButton/index.js";
-import DrawerContext from "../Drawer/DrawerContext.js";
 var ModalHeader = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var _useContext, _useContext2;
   var _props$as = props.as,
     Component = _props$as === void 0 ? 'div' : _props$as,
     _props$classPrefix = props.classPrefix,
@@ -28,8 +26,10 @@ var ModalHeader = /*#__PURE__*/React.forwardRef(function (props, ref) {
     withClassPrefix = _useClassNames.withClassPrefix,
     prefix = _useClassNames.prefix;
   var classes = merge(className, withClassPrefix());
-  var onModalClose = (_useContext = useContext(ModalContext)) === null || _useContext === void 0 ? void 0 : _useContext.onModalClose;
-  var isDrawer = (_useContext2 = useContext(DrawerContext)) === null || _useContext2 === void 0 ? void 0 : _useContext2.isDrawer;
+  var context = useContext(ModalContext);
+  var _ref = context || {},
+    isDrawer = _ref.isDrawer,
+    onModalClose = _ref.onModalClose;
   var buttonElement = isDrawer ? /*#__PURE__*/React.createElement(IconButton, {
     icon: /*#__PURE__*/React.createElement(Close, null),
     appearance: "subtle",

package/esm/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/esm/internals/hooks/useFocusVirtualListItem.js

@@ -2,19 +2,35 @@
 import { useRef, useEffect } from '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 function useFocusVirtualListItem(focused) {
   var itemRef = useRef(null);
   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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rsuite",
-  "version": "5.73.0",
+  "version": "5.73.1",
   "description": "A suite of react components",
   "main": "cjs/index.js",
   "module": "esm/index.js",

package/cjs/Drawer/DrawerContext.d.ts

@@ -1,9 +0,0 @@
-import React from 'react';
-export interface DrawerContextProps {
-    /** Custom close button */
-    closeButton?: React.ReactNode | boolean;
-    /** Render Modal as Drawer */
-    isDrawer: boolean;
-}
-declare const DrawerContext: React.Context<DrawerContextProps | null>;
-export default DrawerContext;

package/cjs/Drawer/DrawerContext.js

@@ -1,9 +0,0 @@
-'use client';
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-exports.__esModule = true;
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var DrawerContext = /*#__PURE__*/_react.default.createContext(null);
-var _default = exports.default = DrawerContext;

package/esm/Drawer/DrawerContext.d.ts

@@ -1,9 +0,0 @@
-import React from 'react';
-export interface DrawerContextProps {
-    /** Custom close button */
-    closeButton?: React.ReactNode | boolean;
-    /** Render Modal as Drawer */
-    isDrawer: boolean;
-}
-declare const DrawerContext: React.Context<DrawerContextProps | null>;
-export default DrawerContext;

package/esm/Drawer/DrawerContext.js

@@ -1,4 +0,0 @@
-'use client';
-import React from 'react';
-var DrawerContext = /*#__PURE__*/React.createContext(null);
-export default DrawerContext;