refactor(CDropdown, CPopover, CTooltip): update the container property typings

Author: mrholek

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
   }
@@ -20,11 +22,11 @@ export interface CConditionalPortalProps {
    *
    * @since v4.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

@@ -48,7 +48,7 @@ export interface CDropdownProps extends HTMLAttributes<HTMLDivElement | HTMLLIEl
    *
    * @since v4.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/popover/CPopover.tsx

@@ -24,7 +24,7 @@ export interface CPopoverProps extends Omit<HTMLAttributes<HTMLDivElement>, 'tit
    *
    * @since v4.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

@@ -24,7 +24,7 @@ export interface CTooltipProps extends Omit<HTMLAttributes<HTMLDivElement>, 'con
    *
    * @since v4.11.0
    */
-  container?: Element | (() => Element | null) | null
+  container?: DocumentFragment | Element | (() => DocumentFragment | Element | null) | null
   /**
    * Content node for your component.
    */

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** **_v4.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** **_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` \| `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/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** **_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` \| `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** **_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` \| `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'] |