feat(CModal): add the container property to allow appending the modal to a specific element

mrholek · mrholek · commit 8730020fa848 · 2024-08-02T12:49:24.000+02:00
diff --git a/packages/coreui-react/src/components/modal/CModal.tsx b/packages/coreui-react/src/components/modal/CModal.tsx
@@ -31,14 +31,20 @@ export interface CModalProps extends HTMLAttributes<HTMLDivElement> {
    * A string of all className you want applied to the base component.
    */
   className?: string
+  /**
+   * Appends the react modal to a specific element. You can pass an HTML element or function that returns a single element. By default `document.body`.
+   *
+   * @since 5.3.0
+   */
+  container?: DocumentFragment | Element | (() => DocumentFragment | Element | null) | null
   /**
    * @ignore
    */
   duration?: number
   /**
    * Puts the focus on the modal when shown.
    *
-   * @since v4.10.0
+   * @since 4.10.0
    */
   focus?: boolean
   /**
@@ -101,6 +107,7 @@ export const CModal = forwardRef<HTMLDivElement, CModalProps>(
       alignment,
       backdrop = true,
       className,
+      container,
       duration = 150,
       focus = true,
       fullscreen,
@@ -223,7 +230,7 @@ export const CModal = forwardRef<HTMLDivElement, CModalProps>(
           timeout={transition ? duration : 0}
         >
           {(state) => (
-            <CConditionalPortal portal={portal}>
+            <CConditionalPortal container={container} portal={portal}>
               <CModalContext.Provider value={contextValues}>
                 <div
                   className={classNames(
@@ -259,7 +266,7 @@ export const CModal = forwardRef<HTMLDivElement, CModalProps>(
           )}
         </Transition>
         {backdrop && (
-          <CConditionalPortal portal={portal}>
+          <CConditionalPortal container={container} portal={portal}>
             <CBackdrop visible={_visible} />
           </CConditionalPortal>
         )}
@@ -273,6 +280,7 @@ CModal.propTypes = {
   backdrop: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf<'static'>(['static'])]),
   children: PropTypes.node,
   className: PropTypes.string,
+  container: PropTypes.any, // HTMLElement
   duration: PropTypes.number,
   focus: PropTypes.bool,
   fullscreen: PropTypes.oneOfType([
diff --git a/packages/docs/content/api/CModal.api.mdx b/packages/docs/content/api/CModal.api.mdx
@@ -10,7 +10,8 @@ import CModal from '@coreui/react/src/components/modal/CModal'
 | **alignment** | Align the modal in the center or top of the screen. | `'top'` \| `'center'` | - |
 | **backdrop** | Apply a backdrop on body while modal is open. | `boolean` \| `'static'` | true |
 | **className** | A string of all className you want applied to the base component. | `string` | - |
-| **focus** **_v4.10.0+_** | Puts the focus on the modal when shown. | `boolean` | true |
+| **container** **_5.3.0+_** | Appends the react modal to a specific element. You can pass an HTML element or function that returns a single element. By default `document.body`. | `Element` \| `DocumentFragment` \| `(() => Element` \| `DocumentFragment)` | - |
+| **focus** **_4.10.0+_** | Puts the focus on the modal when shown. | `boolean` | true |
 | **fullscreen** | Set modal to covers the entire user viewport. | `boolean` \| `'sm'` \| `'md'` \| `'lg'` \| `'xl'` \| `'xxl'` | - |
 | **keyboard** | Closes the modal when escape key is pressed. | `boolean` | true |
 | **onClose** | Callback fired when the component requests to be closed. | `() => void` | - |
