[pull] main from coreui:main

README.md

@@ -46,7 +46,7 @@
 
 Several quick start options are available:
 
-- [Download the latest release](https://github.com/coreui/coreui-react/archive/v5.2.0.zip)
+- [Download the latest release](https://github.com/coreui/coreui-react/archive/v5.3.0.zip)
 - Clone the repo: `git clone https://github.com/coreui/coreui-react.git`
 - Install with [npm](https://www.npmjs.com/): `npm install @coreui/react`
 - Install with [yarn](https://yarnpkg.com/): `yarn add @coreui/react`

lerna.json

@@ -1,6 +1,6 @@
 {
   "npmClient": "yarn",
   "packages": ["packages/*"],
-  "version": "5.2.0",
+  "version": "5.3.0",
   "$schema": "node_modules/lerna/schemas/lerna-schema.json"
 }

package.json

@@ -26,13 +26,13 @@
     "@typescript-eslint/parser": "^7.15.0",
     "eslint": "8.57.0",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-prettier": "^5.1.3",
-    "eslint-plugin-react": "^7.34.3",
+    "eslint-plugin-prettier": "^5.2.1",
+    "eslint-plugin-react": "^7.35.0",
     "eslint-plugin-react-hooks": "^4.6.2",
-    "eslint-plugin-unicorn": "^54.0.0",
-    "lerna": "^8.1.6",
+    "eslint-plugin-unicorn": "^55.0.0",
+    "lerna": "^8.1.7",
     "npm-run-all": "^4.1.5",
-    "prettier": "^3.3.2"
+    "prettier": "^3.3.3"
   },
   "overrides": {
     "gatsby-remark-external-links": {

packages/coreui-react/README.md

@@ -46,7 +46,7 @@
 
 Several quick start options are available:
 
-- [Download the latest release](https://github.com/coreui/coreui-react/archive/v5.2.0.zip)
+- [Download the latest release](https://github.com/coreui/coreui-react/archive/v5.3.0.zip)
 - Clone the repo: `git clone https://github.com/coreui/coreui-react.git`
 - Install with [npm](https://www.npmjs.com/): `npm install @coreui/react`
 - Install with [yarn](https://yarnpkg.com/): `yarn add @coreui/react`

packages/coreui-react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coreui/react",
-  "version": "5.2.0",
+  "version": "5.3.0",
   "description": "UI Components Library for React.js",
   "keywords": [
     "react",
@@ -49,7 +49,7 @@
     "@rollup/plugin-commonjs": "^26.0.1",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-typescript": "^11.1.6",
-    "@testing-library/jest-dom": "^6.4.6",
+    "@testing-library/jest-dom": "^6.4.8",
     "@testing-library/react": "^16.0.0",
     "@types/jest": "^29.5.12",
     "@types/react": "18.3.3",
@@ -62,10 +62,10 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-transition-group": "^4.4.5",
-    "rollup": "^4.18.0",
-    "ts-jest": "^29.1.5",
+    "rollup": "^4.19.2",
+    "ts-jest": "^29.2.4",
     "tslib": "^2.6.3",
-    "typescript": "^5.5.3"
+    "typescript": "^5.5.4"
   },
   "peerDependencies": {
     "react": ">=17",

packages/coreui-react/src/components/conditional-portal/CConditionalPortal.tsx

@@ -2,7 +2,9 @@ import React, { FC, ReactNode, useEffect, useState } from 'react'
 import { createPortal } from 'react-dom'
 import PropTypes from 'prop-types'
 
-const getContainer = (container?: Element | (() => Element | null) | null) => {
+const getContainer = (
+  container?: DocumentFragment | Element | (() => DocumentFragment | Element | null) | null,
+) => {
   if (container) {
     return typeof container === 'function' ? container() : container
   }
@@ -18,13 +20,13 @@ export interface CConditionalPortalProps {
   /**
    * An HTML element or function that returns a single element, with `document.body` as the default.
    *
-   * @since v4.11.0
+   * @since 4.11.0
    */
-  container?: Element | (() => Element | null) | null
+  container?: DocumentFragment | Element | (() => DocumentFragment | Element | null) | null
   /**
    * Render some children into a different part of the DOM
    */
-  portal: boolean | any
+  portal: boolean
 }
 
 export const CConditionalPortal: FC<CConditionalPortalProps> = ({
@@ -48,7 +50,7 @@ export const CConditionalPortal: FC<CConditionalPortalProps> = ({
 CConditionalPortal.propTypes = {
   children: PropTypes.node,
   container: PropTypes.any, // HTMLElement
-  portal: PropTypes.bool,
+  portal: PropTypes.bool.isRequired,
 }
 
 CConditionalPortal.displayName = 'CConditionalPortal'

packages/coreui-react/src/components/dropdown/CDropdown.tsx

@@ -46,9 +46,9 @@ export interface CDropdownProps extends HTMLAttributes<HTMLDivElement | HTMLLIEl
   /**
    * Appends the react dropdown menu to a specific element. You can pass an HTML element or function that returns a single element. By default `document.body`.
    *
-   * @since v4.11.0
+   * @since 4.11.0
    */
-  container?: Element | (() => Element | null) | null
+  container?: DocumentFragment | Element | (() => DocumentFragment | Element | null) | null
   /**
    * Sets a darker color scheme to match a dark navbar.
    */

packages/coreui-react/src/components/dropdown/CDropdownToggle.tsx

@@ -21,7 +21,7 @@ export interface CDropdownToggleProps extends Omit<CButtonProps, 'type'> {
   /**
    * If a dropdown `variant` is set to `nav-item` then render the toggler as a link instead of a button.
    *
-   * @since v5.0.0
+   * @since 5.0.0
    */
   navLink?: boolean
   /**

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([

packages/coreui-react/src/components/popover/CPopover.tsx

@@ -22,9 +22,9 @@ export interface CPopoverProps extends Omit<HTMLAttributes<HTMLDivElement>, 'tit
   /**
    * Appends the react popover to a specific element. You can pass an HTML element or function that returns a single element. By default `document.body`.
    *
-   * @since v4.11.0
+   * @since 4.11.0
    */
-  container?: Element | (() => Element | null) | null
+  container?: DocumentFragment | Element | (() => DocumentFragment | Element | null) | null
   /**
    * Content node for your component.
    */

packages/coreui-react/src/components/tooltip/CTooltip.tsx

@@ -22,9 +22,9 @@ export interface CTooltipProps extends Omit<HTMLAttributes<HTMLDivElement>, 'con
   /**
    * Appends the react tooltip to a specific element. You can pass an HTML element or function that returns a single element. By default `document.body`.
    *
-   * @since v4.11.0
+   * @since 4.11.0
    */
-  container?: Element | (() => Element | null) | null
+  container?: DocumentFragment | Element | (() => DocumentFragment | Element | null) | null
   /**
    * Content node for your component.
    */

packages/docs/build/api.js → packages/docs/build/api.mjs

@@ -2,10 +2,13 @@
 
 'use strict'
 
-const fs = require('node:fs').promises
-const path = require('node:path')
-const globby = require('globby')
-const docgen = require('react-docgen-typescript')
+import { globby } from 'globby'
+import { writeFile } from 'node:fs/promises'
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+import { parse } from 'react-docgen-typescript'
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url))
 
 const GLOB = [
   '**/src/**/*.tsx',
@@ -79,9 +82,9 @@ async function createMdx(file, filename, name, props) {
     const deprecated = value.tags.deprecated ? ` **_Deprecated ${value.tags.deprecated}+_**` : ''
     const description = value.description || '-'
     const type = value.type
-      ? (value.type.name.includes('ReactElement')
+      ? value.type.name.includes('ReactElement')
         ? 'ReactElement'
-        : value.type.name)
+        : value.type.name
       : ''
     const defaultValue = value.defaultValue
       ? value.defaultValue.value.replace('undefined', '-')
@@ -97,13 +100,11 @@ async function createMdx(file, filename, name, props) {
     index++
   }
 
-  await fs
-    .writeFile(`content/api/${filename}.api.mdx`, content, {
-      encoding: 'utf8',
-    })
-    .then(() => {
-      console.log(`File created: ${filename}.api.mdx`)
-    })
+  await writeFile(`content/api/${filename}.api.mdx`, content, {
+    encoding: 'utf8',
+  }).then(() => {
+    console.log(`File created: ${filename}.api.mdx`)
+  })
 }
 
 async function main() {
@@ -113,7 +114,8 @@ async function main() {
     await Promise.all(
       files.map((file) => {
         console.log(file)
-        const props = docgen.parse(file, options)
+        // const props = docgen.parse(file, options)
+        const props = parse(file, options)
         if (props && typeof props[0] !== 'undefined') {
           const filename = path.basename(file, '.tsx')
           createMdx(file, filename, props[0].displayName, props[0].props)

packages/docs/content/api/CConditionalPortal.api.mdx

@@ -7,5 +7,5 @@ import CConditionalPortal from '@coreui/react/src/components/conditional-portal/
 
 | Property | Description | Type | Default |
 | --- | --- | --- | --- |
-| **container** **_v4.11.0+_** | An HTML element or function that returns a single element, with `document.body` as the default. | `Element` \| `(() => Element)` | - |
-| **portal** | Render some children into a different part of the DOM | `any` | - |
+| **container** **_4.11.0+_** | An HTML element or function that returns a single element, with `document.body` as the default. | `DocumentFragment` \| `Element` \| `(() => DocumentFragment` \| `Element)` | - |
+| **portal** | Render some children into a different part of the DOM | `boolean` | - |

packages/docs/content/api/CDropdown.api.mdx

@@ -11,7 +11,7 @@ import CDropdown from '@coreui/react/src/components/dropdown/CDropdown'
 | **as** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'div')` \| `(ElementType & 'slot')` \| `(ElementType & 'style')` \| `... 174 more ...` \| `(ElementType & FunctionComponent<...>)` | div |
 | **autoClose** | Configure the auto close behavior of the dropdown:<br/>- `true` - the dropdown will be closed by clicking outside or inside the dropdown menu.<br/>- `false` - the dropdown will be closed by clicking the toggle button and manually calling hide or toggle method. (Also will not be closed by pressing esc key)<br/>- `'inside'` - the dropdown will be closed (only) by clicking inside the dropdown menu.<br/>- `'outside'` - the dropdown will be closed (only) by clicking outside the dropdown menu. | `boolean` \| `'inside'` \| `'outside'` | true |
 | **className** | A string of all className you want applied to the base component. | `string` | - |
-| **container** **_v4.11.0+_** | Appends the react dropdown menu to a specific element. You can pass an HTML element or function that returns a single element. By default `document.body`. | `Element` \| `(() => Element)` | - |
+| **container** **_4.11.0+_** | Appends the react dropdown menu 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)` | - |
 | **dark** | Sets a darker color scheme to match a dark navbar. | `boolean` | - |
 | **direction** | Sets a specified  direction and ___location of the dropdown menu. | `'center'` \| `'dropup'` \| `'dropup-center'` \| `'dropend'` \| `'dropstart'` | - |
 | **offset** | Offset of the dropdown menu relative to its target. | `[number, number]` | [0, 2] |

packages/docs/content/api/CDropdownToggle.api.mdx

@@ -15,7 +15,7 @@ import CDropdownToggle from '@coreui/react/src/components/dropdown/CDropdownTogg
 | **custom** | Create a custom toggler which accepts any content. | `boolean` | - |
 | **disabled** | Toggle the disabled state for the component. | `boolean` | - |
 | **href** | The href attribute specifies the URL of the page the link goes to. | `string` | - |
-| **navLink** **_v5.0.0+_** | If a dropdown `variant` is set to `nav-item` then render the toggler as a link instead of a button. | `boolean` | true |
+| **navLink** **_5.0.0+_** | If a dropdown `variant` is set to `nav-item` then render the toggler as a link instead of a button. | `boolean` | true |
 | **role** | The role attribute describes the role of an element in programs that can make use of it, such as screen readers or magnifiers. | `string` | - |
 | **shape** | Select the shape of the component. | `'rounded'` \| `'rounded-top'` \| `'rounded-end'` \| `'rounded-bottom'` \| `'rounded-start'` \| `'rounded-circle'` \| `'rounded-pill'` \| `'rounded-0'` \| `'rounded-1'` \| `'rounded-2'` \| `'rounded-3'` \| `string` | - |
 | **size** | Size the component small or large. | `'sm'` \| `'lg'` | - |

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` | - |

packages/docs/content/api/CPopover.api.mdx

@@ -9,7 +9,7 @@ import CPopover from '@coreui/react/src/components/popover/CPopover'
 | --- | --- | --- | --- |
 | **animation** **_4.9.0+_** | Apply a CSS fade transition to the popover. | `boolean` | true |
 | **className** | A string of all className you want applied to the component. | `string` | - |
-| **container** **_v4.11.0+_** | Appends the react popover to a specific element. You can pass an HTML element or function that returns a single element. By default `document.body`. | `Element` \| `(() => Element)` | - |
+| **container** **_4.11.0+_** | Appends the react popover 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)` | - |
 | **content** | Content node for your component. | `ReactNode` | - |
 | **delay** **_4.9.0+_** | The delay for displaying and hiding the popover (in milliseconds). When a numerical value is provided, the delay applies to both the hide and show actions. The object structure for specifying the delay is as follows: delay: `{ 'show': 500, 'hide': 100 }`. | `number` \| `{ show: number; hide: number; }` | 0 |
 | **fallbackPlacements** **_4.9.0+_** | Specify the desired order of fallback placements by providing a list of placements as an array. The placements should be prioritized based on preference. | `Placements` \| `Placements[]` | ['top', 'right', 'bottom', 'left'] |

packages/docs/content/api/CTooltip.api.mdx

@@ -9,7 +9,7 @@ import CTooltip from '@coreui/react/src/components/tooltip/CTooltip'
 | --- | --- | --- | --- |
 | **animation** **_4.9.0+_** | Apply a CSS fade transition to the tooltip. | `boolean` | true |
 | **className** | A string of all className you want applied to the component. | `string` | - |
-| **container** **_v4.11.0+_** | Appends the react tooltip to a specific element. You can pass an HTML element or function that returns a single element. By default `document.body`. | `Element` \| `(() => Element)` | - |
+| **container** **_4.11.0+_** | Appends the react tooltip 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)` | - |
 | **content** | Content node for your component. | `ReactNode` | - |
 | **delay** **_4.9.0+_** | The delay for displaying and hiding the tooltip (in milliseconds). When a numerical value is provided, the delay applies to both the hide and show actions. The object structure for specifying the delay is as follows: delay: `{ 'show': 500, 'hide': 100 }`. | `number` \| `{ show: number; hide: number; }` | 0 |
 | **fallbackPlacements** **_4.9.0+_** | Specify the desired order of fallback placements by providing a list of placements as an array. The placements should be prioritized based on preference. | `Placements` \| `Placements[]` | ['top', 'right', 'bottom', 'left'] |