Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Appearance settings

Commit 8c66f37

Browse filesBrowse files
mrholekmrholek
committed
refactor(CDropdown, CPopover, CTooltip): update the container property typings
1 parent 8730020 commit 8c66f37
Copy full SHA for 8c66f37

File tree

8 files changed

+14
-12
lines changed
Filter options

8 files changed

+14
-12
lines changed

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

Copy file name to clipboardExpand all lines: packages/coreui-react/src/components/conditional-portal/CConditionalPortal.tsx
+6-4Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,9 @@ import React, { FC, ReactNode, useEffect, useState } from 'react'
22
import { createPortal } from 'react-dom'
33
import PropTypes from 'prop-types'
44

5-
const getContainer = (container?: Element | (() => Element | null) | null) => {
5+
const getContainer = (
6+
container?: DocumentFragment | Element | (() => DocumentFragment | Element | null) | null,
7+
) => {
68
if (container) {
79
return typeof container === 'function' ? container() : container
810
}
@@ -20,11 +22,11 @@ export interface CConditionalPortalProps {
2022
*
2123
* @since v4.11.0
2224
*/
23-
container?: Element | (() => Element | null) | null
25+
container?: DocumentFragment | Element | (() => DocumentFragment | Element | null) | null
2426
/**
2527
* Render some children into a different part of the DOM
2628
*/
27-
portal: boolean | any
29+
portal: boolean
2830
}
2931

3032
export const CConditionalPortal: FC<CConditionalPortalProps> = ({
@@ -48,7 +50,7 @@ export const CConditionalPortal: FC<CConditionalPortalProps> = ({
4850
CConditionalPortal.propTypes = {
4951
children: PropTypes.node,
5052
container: PropTypes.any, // HTMLElement
51-
portal: PropTypes.bool,
53+
portal: PropTypes.bool.isRequired,
5254
}
5355

5456
CConditionalPortal.displayName = 'CConditionalPortal'

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

Copy file name to clipboardExpand all lines: packages/coreui-react/src/components/dropdown/CDropdown.tsx
+1-1Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ export interface CDropdownProps extends HTMLAttributes<HTMLDivElement | HTMLLIEl
4848
*
4949
* @since v4.11.0
5050
*/
51-
container?: Element | (() => Element | null) | null
51+
container?: DocumentFragment | Element | (() => DocumentFragment | Element | null) | null
5252
/**
5353
* Sets a darker color scheme to match a dark navbar.
5454
*/

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

Copy file name to clipboardExpand all lines: packages/coreui-react/src/components/popover/CPopover.tsx
+1-1Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ export interface CPopoverProps extends Omit<HTMLAttributes<HTMLDivElement>, 'tit
2424
*
2525
* @since v4.11.0
2626
*/
27-
container?: Element | (() => Element | null) | null
27+
container?: DocumentFragment | Element | (() => DocumentFragment | Element | null) | null
2828
/**
2929
* Content node for your component.
3030
*/

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

Copy file name to clipboardExpand all lines: packages/coreui-react/src/components/tooltip/CTooltip.tsx
+1-1Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ export interface CTooltipProps extends Omit<HTMLAttributes<HTMLDivElement>, 'con
2424
*
2525
* @since v4.11.0
2626
*/
27-
container?: Element | (() => Element | null) | null
27+
container?: DocumentFragment | Element | (() => DocumentFragment | Element | null) | null
2828
/**
2929
* Content node for your component.
3030
*/

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

Copy file name to clipboardExpand all lines: packages/docs/content/api/CConditionalPortal.api.mdx
+2-2Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,5 +7,5 @@ import CConditionalPortal from '@coreui/react/src/components/conditional-portal/
77

88
| Property | Description | Type | Default |
99
| --- | --- | --- | --- |
10-
| **container** **_v4.11.0+_** | An HTML element or function that returns a single element, with `document.body` as the default. | `Element` \| `(() => Element)` | - |
11-
| **portal** | Render some children into a different part of the DOM | `any` | - |
10+
| **container** **_v4.11.0+_** | An HTML element or function that returns a single element, with `document.body` as the default. | `DocumentFragment` \| `Element` \| `(() => DocumentFragment` \| `Element)` | - |
11+
| **portal** | Render some children into a different part of the DOM | `boolean` | - |

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

Copy file name to clipboardExpand all lines: packages/docs/content/api/CDropdown.api.mdx
+1-1Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import CDropdown from '@coreui/react/src/components/dropdown/CDropdown'
1111
| **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 |
1212
| **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 |
1313
| **className** | A string of all className you want applied to the base component. | `string` | - |
14-
| **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)` | - |
14+
| **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)` | - |
1515
| **dark** | Sets a darker color scheme to match a dark navbar. | `boolean` | - |
1616
| **direction** | Sets a specified direction and location of the dropdown menu. | `'center'` \| `'dropup'` \| `'dropup-center'` \| `'dropend'` \| `'dropstart'` | - |
1717
| **offset** | Offset of the dropdown menu relative to its target. | `[number, number]` | [0, 2] |

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

Copy file name to clipboardExpand all lines: packages/docs/content/api/CPopover.api.mdx
+1-1Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import CPopover from '@coreui/react/src/components/popover/CPopover'
99
| --- | --- | --- | --- |
1010
| **animation** **_4.9.0+_** | Apply a CSS fade transition to the popover. | `boolean` | true |
1111
| **className** | A string of all className you want applied to the component. | `string` | - |
12-
| **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)` | - |
12+
| **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)` | - |
1313
| **content** | Content node for your component. | `ReactNode` | - |
1414
| **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 |
1515
| **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

Copy file name to clipboardExpand all lines: packages/docs/content/api/CTooltip.api.mdx
+1-1Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import CTooltip from '@coreui/react/src/components/tooltip/CTooltip'
99
| --- | --- | --- | --- |
1010
| **animation** **_4.9.0+_** | Apply a CSS fade transition to the tooltip. | `boolean` | true |
1111
| **className** | A string of all className you want applied to the component. | `string` | - |
12-
| **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)` | - |
12+
| **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)` | - |
1313
| **content** | Content node for your component. | `ReactNode` | - |
1414
| **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 |
1515
| **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'] |

0 commit comments

Comments
0 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.