feat: Add ref support to ModalBody component (#841)

* feat: Forward ref to ModalBody

* chore: Bump version minor

Author: pawelgrimm

CHANGELOG.md

@@ -2,6 +2,10 @@
 
 Reactist follows [semantic versioning](https://semver.org/) and doesn't introduce breaking changes (API-wise) in minor or patch releases. However, the appearance of a component might change in a minor or patch release so keep an eye on redesigns and make sure your app still looks and feels like you expect it.
 
+# v25.2.0
+
+-   [Feat] Add `ref` support to `ModalBody` component
+
 # v25.1.1
 
 -   [Fix] Restrict focus locking in the `Modal` component to its containing document/iframe.

package-lock.json

@@ -6,7 +6,7 @@
         "email": "henning@doist.com",
         "url": "http://doist.com"
     },
-    "version": "25.1.1",
+    "version": "25.2.0",
     "license": "MIT",
     "homepage": "https://github.com/Doist/reactist#readme",
     "repository": {

package.json

@@ -14,6 +14,7 @@ import { IconButtonProps, IconButton } from '../button'
 
 import styles from './modal.module.css'
 import type { ObfuscatedClassName } from '../utils/common-types'
+import { forwardRef } from 'react'
 
 type ModalWidth = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'full'
 type ModalHeightMode = 'expand' | 'fitContent'
@@ -426,19 +427,23 @@ export interface ModalBodyProps extends DivProps, ObfuscatedClassName {
  * Renders the body of a modal.
  *
  * Convenient to use alongside ModalHeader and/or ModalFooter as needed. It ensures, among other
- * things, that the contet of the modal body expands or contracts depending on the modal height
+ * things, that the content of the modal body expands or contracts depending on the modal height
  * setting or the size of the content. The body content also automatically scrolls when it's too
  * large to fit the available space.
  *
  * @see Modal
  * @see ModalHeader
  * @see ModalFooter
  */
-export function ModalBody({ exceptionallySetClassName, children, ...props }: ModalBodyProps) {
+export const ModalBody = forwardRef<HTMLDivElement, ModalBodyProps>(function ModalBody(
+    { exceptionallySetClassName, children, ...props },
+    ref,
+) {
     const { height } = React.useContext(ModalContext)
     return (
         <Box
             {...props}
+            ref={ref}
             className={exceptionallySetClassName}
             flexGrow={height === 'expand' ? 1 : 0}
             height={height === 'expand' ? 'full' : undefined}
@@ -449,7 +454,7 @@ export function ModalBody({ exceptionallySetClassName, children, ...props }: Mod
             </Box>
         </Box>
     )
-}
+})
 
 //
 // ModalFooter