+
{children}
)
diff --git a/packages/coreui-react/src/components/button-group/__tests__/CButtonGroup.spec.tsx b/packages/coreui-react/src/components/button-group/__tests__/CButtonGroup.spec.tsx
index 69a0e795..b7bd6195 100644
--- a/packages/coreui-react/src/components/button-group/__tests__/CButtonGroup.spec.tsx
+++ b/packages/coreui-react/src/components/button-group/__tests__/CButtonGroup.spec.tsx
@@ -1,7 +1,8 @@
import * as React from 'react'
import { render } from '@testing-library/react'
-import '@testing-library/jest-dom/extend-expect'
-import { CButtonGroup, CButton } from '../../../index'
+import '@testing-library/jest-dom'
+import { CButton } from '../../button/CButton'
+import { CButtonGroup } from '../index'
test('loads and displays CButtonGroup component', async () => {
const { container } = render(
)
@@ -11,9 +12,9 @@ test('loads and displays CButtonGroup component', async () => {
test('CButtonGroup customize', async () => {
const { container } = render(
- Test A
- Test B
- Test C
+ Test A
+ Test B
+ Test C
,
)
expect(container).toMatchSnapshot()
@@ -25,9 +26,9 @@ test('CButtonGroup customize', async () => {
test('CButtonGroup customize vertical', async () => {
const { container } = render(
- Test A
- Test B
- Test C
+ Test A
+ Test B
+ Test C
,
)
expect(container).toMatchSnapshot()
diff --git a/packages/coreui-react/src/components/button-group/__tests__/CButtonToolbar.spec.tsx b/packages/coreui-react/src/components/button-group/__tests__/CButtonToolbar.spec.tsx
index 6b096d10..fd7706b8 100644
--- a/packages/coreui-react/src/components/button-group/__tests__/CButtonToolbar.spec.tsx
+++ b/packages/coreui-react/src/components/button-group/__tests__/CButtonToolbar.spec.tsx
@@ -1,7 +1,8 @@
import * as React from 'react'
import { render } from '@testing-library/react'
-import '@testing-library/jest-dom/extend-expect'
-import { CButtonToolbar, CButtonGroup, CButton } from '../../../index'
+import '@testing-library/jest-dom'
+import { CButton } from '../../button/CButton'
+import { CButtonToolbar, CButtonGroup } from '../index'
test('loads and displays CButtonToolbar component', async () => {
const { container } = render(
)
@@ -12,14 +13,14 @@ test('CButtonToolbar customize', async () => {
const { container } = render(
- 1
- 2
- 3
+ 1
+ 2
+ 3
- A
- B
- C
+ A
+ B
+ C
,
)
diff --git a/packages/coreui-react/src/components/button/CButton.tsx b/packages/coreui-react/src/components/button/CButton.tsx
index 91ffce22..cbb003d7 100644
--- a/packages/coreui-react/src/components/button/CButton.tsx
+++ b/packages/coreui-react/src/components/button/CButton.tsx
@@ -1,15 +1,22 @@
-import React, { ButtonHTMLAttributes, ElementType, forwardRef } from 'react'
+import React, { ElementType, forwardRef } from 'react'
import PropTypes from 'prop-types'
import classNames from 'classnames'
-import { Colors, Shapes, colorPropType } from '../Types'
-import { CLink } from '../link/CLink'
+import { CLink, CLinkProps } from '../link/CLink'
-export interface CButtonProps extends ButtonHTMLAttributes
{
+import { PolymorphicRefForwardingComponent } from '../../helpers'
+import { colorPropType } from '../../props'
+import type { Colors, Shapes } from '../../types'
+
+export interface CButtonProps extends Omit {
/**
* Toggle the active state for the component.
*/
active?: boolean
+ /**
+ * Component used for the root node. Either a string to use a HTML element or a component.
+ */
+ as?: ElementType
/**
* A string of all className you want applied to the base component.
*/
@@ -20,10 +27,6 @@ export interface CButtonProps extends ButtonHTMLAttributes {
* @type 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string
*/
color?: Colors
- /**
- * Component used for the root node. Either a string to use a HTML element or a component.
- */
- component?: string | ElementType
/**
* Toggle the disabled state for the component.
*/
@@ -57,48 +60,43 @@ export interface CButtonProps extends ButtonHTMLAttributes {
variant?: 'outline' | 'ghost'
}
-export const CButton = forwardRef(
+export const CButton: PolymorphicRefForwardingComponent<'button', CButtonProps> = forwardRef<
+ HTMLButtonElement | HTMLAnchorElement,
+ CButtonProps
+>(
(
- {
- children,
- className,
- color = 'primary',
- component = 'button',
- shape,
- size,
- type = 'button',
- variant,
- ...rest
- },
- ref,
+ { children, as = 'button', className, color, shape, size, type = 'button', variant, ...rest },
+ ref
) => {
- const _className = classNames(
- 'btn',
- variant ? `btn-${variant}-${color}` : `btn-${color}`,
- { [`btn-${size}`]: size },
- shape,
- className,
- )
-
return (
{children}
)
- },
+ }
)
CButton.propTypes = {
+ as: PropTypes.elementType,
children: PropTypes.node,
className: PropTypes.string,
color: colorPropType,
- component: PropTypes.elementType,
shape: PropTypes.string,
size: PropTypes.oneOf(['sm', 'lg']),
type: PropTypes.oneOf(['button', 'submit', 'reset']),
diff --git a/packages/coreui-react/src/components/button/__tests__/CButton.spec.tsx b/packages/coreui-react/src/components/button/__tests__/CButton.spec.tsx
index bdcef920..2c8211c2 100644
--- a/packages/coreui-react/src/components/button/__tests__/CButton.spec.tsx
+++ b/packages/coreui-react/src/components/button/__tests__/CButton.spec.tsx
@@ -1,16 +1,16 @@
import * as React from 'react'
import { render } from '@testing-library/react'
-import '@testing-library/jest-dom/extend-expect'
-import { CButton } from '../../../index'
+import '@testing-library/jest-dom'
+import { CButton } from '../index'
test('loads and displays CButton component', async () => {
- const { container } = render(Test)
+ const { container } = render(Test)
expect(container).toMatchSnapshot()
})
test('CButton customize witch href', async () => {
const { container } = render(
-
+
Test
,
)
@@ -23,7 +23,7 @@ test('CButton customize', async () => {
active={true}
className="bazinga"
color="warning"
- component="span"
+ as="span"
disabled={true}
role="bazinga"
shape="rounded"
diff --git a/packages/coreui-react/src/components/button/__tests__/CButtonClose.spec.tsx b/packages/coreui-react/src/components/button/__tests__/CButtonClose.spec.tsx
deleted file mode 100644
index 5c5e7fe2..00000000
--- a/packages/coreui-react/src/components/button/__tests__/CButtonClose.spec.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import * as React from 'react'
-import { render } from '@testing-library/react'
-import '@testing-library/jest-dom/extend-expect'
-import { CCloseButton } from '../../../index'
-
-test('loads and displays CCloseButton component', async () => {
- const { container } = render(Test)
- expect(container).toMatchSnapshot()
-})
-
-test('CCloseButton customize', async () => {
- const { container } = render(
-
- Test
- ,
- )
- expect(container).toMatchSnapshot()
- expect(container.firstChild).toHaveClass('bazinga')
- expect(container.firstChild).toHaveClass('btn')
- expect(container.firstChild).toHaveClass('btn-close')
- expect(container.firstChild).toHaveClass('btn-close-white')
- expect(container.firstChild).toHaveAttribute('disabled')
-})
diff --git a/packages/coreui-react/src/components/button/__tests__/__snapshots__/CButton.spec.tsx.snap b/packages/coreui-react/src/components/button/__tests__/__snapshots__/CButton.spec.tsx.snap
index b0728dd9..3c6dc128 100644
--- a/packages/coreui-react/src/components/button/__tests__/__snapshots__/CButton.spec.tsx.snap
+++ b/packages/coreui-react/src/components/button/__tests__/__snapshots__/CButton.spec.tsx.snap
@@ -19,7 +19,6 @@ exports[`CButton customize witch href 1`] = `
Test
diff --git a/packages/coreui-react/src/components/button/__tests__/__snapshots__/CButtonClose.spec.tsx.snap b/packages/coreui-react/src/components/button/__tests__/__snapshots__/CButtonClose.spec.tsx.snap
deleted file mode 100644
index 2dfc1981..00000000
--- a/packages/coreui-react/src/components/button/__tests__/__snapshots__/CButtonClose.spec.tsx.snap
+++ /dev/null
@@ -1,24 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CCloseButton customize 1`] = `
-
-
-
-`;
-
-exports[`loads and displays CCloseButton component 1`] = `
-
-
-
-`;
diff --git a/packages/coreui-react/src/components/callout/CCallout.tsx b/packages/coreui-react/src/components/callout/CCallout.tsx
index af730d79..d0f65224 100644
--- a/packages/coreui-react/src/components/callout/CCallout.tsx
+++ b/packages/coreui-react/src/components/callout/CCallout.tsx
@@ -2,7 +2,8 @@ import React, { forwardRef, HTMLAttributes } from 'react'
import PropTypes from 'prop-types'
import classNames from 'classnames'
-import { Colors, colorPropType } from '../Types'
+import { colorPropType } from '../../props'
+import type { Colors } from '../../types'
export interface CCalloutProps extends HTMLAttributes {
/**
@@ -19,16 +20,18 @@ export interface CCalloutProps extends HTMLAttributes {
export const CCallout = forwardRef(
({ children, className, color, ...rest }, ref) => {
- const _className = classNames(
- 'callout',
- {
- [`callout-${color}`]: color,
- },
- className,
- )
-
return (
-
+
{children}
)
diff --git a/packages/coreui-react/src/components/callout/__tests__/CCallout.spec.tsx b/packages/coreui-react/src/components/callout/__tests__/CCallout.spec.tsx
index bea539bd..637727c7 100644
--- a/packages/coreui-react/src/components/callout/__tests__/CCallout.spec.tsx
+++ b/packages/coreui-react/src/components/callout/__tests__/CCallout.spec.tsx
@@ -1,7 +1,7 @@
import * as React from 'react'
import { render } from '@testing-library/react'
-import '@testing-library/jest-dom/extend-expect'
-import { CCallout } from '../../../index'
+import '@testing-library/jest-dom'
+import { CCallout } from '../index'
test('loads and displays CCallout component', async () => {
const { container } = render(
Test)
diff --git a/packages/coreui-react/src/components/card/CCard.tsx b/packages/coreui-react/src/components/card/CCard.tsx
index 88160a96..7b42223e 100644
--- a/packages/coreui-react/src/components/card/CCard.tsx
+++ b/packages/coreui-react/src/components/card/CCard.tsx
@@ -2,7 +2,8 @@ import React, { forwardRef, HTMLAttributes } from 'react'
import PropTypes from 'prop-types'
import classNames from 'classnames'
-import { Colors, colorPropType } from '../Types'
+import { colorPropType } from '../../props'
+import type { Colors } from '../../types'
export interface CCardProps extends HTMLAttributes
{
/**
@@ -18,24 +19,34 @@ export interface CCardProps extends HTMLAttributes {
/**
* Sets the text color context of the component to one of CoreUI’s themed colors.
*
- * @type 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | 'white' | 'muted' | 'high-emphasis' | 'medium-emphasis' | 'disabled' | 'high-emphasis-inverse' | 'medium-emphasis-inverse' | 'disabled-inverse' | string
+ * @type 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | 'primary-emphasis' | 'secondary-emphasis' | 'success-emphasis' | 'danger-emphasis' | 'warning-emphasis' | 'info-emphasis' | 'light-emphasis' | 'body' | 'body-emphasis' | 'body-secondary' | 'body-tertiary' | 'black' | 'black-50' | 'white' | 'white-50' | string
*/
textColor?: string
+ /**
+ * Sets the component's color scheme to one of CoreUI's themed colors, ensuring the text color contrast adheres to the WCAG 4.5:1 contrast ratio standard for accessibility.
+ *
+ * @type 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string
+ * @since 5.0.0
+ */
+ textBgColor?: Colors
}
export const CCard = forwardRef(
- ({ children, className, color, textColor, ...rest }, ref) => {
- const _className = classNames(
- 'card',
- {
- [`bg-${color}`]: color,
- [`text-${textColor}`]: textColor,
- },
- className,
- )
-
+ ({ children, className, color, textBgColor, textColor, ...rest }, ref) => {
return (
-
+
{children}
)
@@ -46,6 +57,7 @@ CCard.propTypes = {
children: PropTypes.node,
className: PropTypes.string,
color: colorPropType,
+ textBgColor: colorPropType,
textColor: PropTypes.string,
}
diff --git a/packages/coreui-react/src/components/card/CCardBody.tsx b/packages/coreui-react/src/components/card/CCardBody.tsx
index 97b9c993..f977e837 100644
--- a/packages/coreui-react/src/components/card/CCardBody.tsx
+++ b/packages/coreui-react/src/components/card/CCardBody.tsx
@@ -11,10 +11,8 @@ export interface CCardBodyProps extends HTMLAttributes
{
export const CCardBody = forwardRef(
({ children, className, ...rest }, ref) => {
- const _className = classNames('card-body', className)
-
return (
-
+
{children}
)
diff --git a/packages/coreui-react/src/components/card/CCardFooter.tsx b/packages/coreui-react/src/components/card/CCardFooter.tsx
index 379f5c48..054f2851 100644
--- a/packages/coreui-react/src/components/card/CCardFooter.tsx
+++ b/packages/coreui-react/src/components/card/CCardFooter.tsx
@@ -11,10 +11,8 @@ export interface CCardFooterProps extends HTMLAttributes
{
export const CCardFooter = forwardRef(
({ children, className, ...rest }, ref) => {
- const _className = classNames('card-footer', className)
-
return (
-
+
{children}
)
diff --git a/packages/coreui-react/src/components/card/CCardGroup.tsx b/packages/coreui-react/src/components/card/CCardGroup.tsx
index d63b21b0..042e6ade 100644
--- a/packages/coreui-react/src/components/card/CCardGroup.tsx
+++ b/packages/coreui-react/src/components/card/CCardGroup.tsx
@@ -11,10 +11,8 @@ export interface CCardGroupProps extends HTMLAttributes
{
export const CCardGroup = forwardRef(
({ children, className, ...rest }, ref) => {
- const _className = classNames('card-group', className)
-
return (
-
+
{children}
)
diff --git a/packages/coreui-react/src/components/card/CCardHeader.tsx b/packages/coreui-react/src/components/card/CCardHeader.tsx
index ffc875ac..70b1e114 100644
--- a/packages/coreui-react/src/components/card/CCardHeader.tsx
+++ b/packages/coreui-react/src/components/card/CCardHeader.tsx
@@ -2,33 +2,34 @@ import React, { ElementType, forwardRef, HTMLAttributes } from 'react'
import PropTypes from 'prop-types'
import classNames from 'classnames'
+import { PolymorphicRefForwardingComponent } from '../../helpers'
+
export interface CCardHeaderProps extends HTMLAttributes
{
/**
- * A string of all className you want applied to the base component.
+ * Component used for the root node. Either a string to use a HTML element or a component.
*/
- className?: string
+ as?: ElementType
/**
- * Component used for the root node. Either a string to use a HTML element or a component.
+ * A string of all className you want applied to the base component.
*/
- component?: string | ElementType
+ className?: string
}
-export const CCardHeader = forwardRef(
- ({ children, component: Component = 'div', className, ...rest }, ref) => {
- const _className = classNames('card-header', className)
-
- return (
-
- {children}
-
- )
- },
-)
+export const CCardHeader: PolymorphicRefForwardingComponent<'div', CCardHeaderProps> = forwardRef<
+ HTMLDivElement,
+ CCardHeaderProps
+>(({ children, as: Component = 'div', className, ...rest }, ref) => {
+ return (
+
+ {children}
+
+ )
+})
CCardHeader.propTypes = {
+ as: PropTypes.elementType,
children: PropTypes.node,
className: PropTypes.string,
- component: PropTypes.elementType,
}
CCardHeader.displayName = 'CCardHeader'
diff --git a/packages/coreui-react/src/components/card/CCardImage.tsx b/packages/coreui-react/src/components/card/CCardImage.tsx
index 8080b36c..93462342 100644
--- a/packages/coreui-react/src/components/card/CCardImage.tsx
+++ b/packages/coreui-react/src/components/card/CCardImage.tsx
@@ -2,39 +2,43 @@ import React, { ElementType, forwardRef, ImgHTMLAttributes } from 'react'
import PropTypes from 'prop-types'
import classNames from 'classnames'
+import { PolymorphicRefForwardingComponent } from '../../helpers'
+
export interface CCardImageProps
extends ImgHTMLAttributes {
/**
- * A string of all className you want applied to the base component.
+ * Component used for the root node. Either a string to use a HTML element or a component.
*/
- className?: string
+ as?: ElementType
/**
- * Component used for the root node. Either a string to use a HTML element or a component.
+ * A string of all className you want applied to the base component.
*/
- component?: string | ElementType
+ className?: string
/**
* Optionally orientate the image to the top, bottom, or make it overlaid across the card.
*/
orientation?: 'top' | 'bottom'
}
-export const CCardImage = forwardRef<
+export const CCardImage: PolymorphicRefForwardingComponent<'img', CCardImageProps> = forwardRef<
HTMLImageElement | HTMLOrSVGElement | HTMLOrSVGImageElement,
CCardImageProps
->(({ children, className, component: Component = 'img', orientation, ...rest }, ref) => {
- const _className = classNames(orientation ? `card-img-${orientation}` : 'card-img', className)
-
+>(({ children, as: Component = 'img', className, orientation, ...rest }, ref) => {
return (
-
+
{children}
)
})
CCardImage.propTypes = {
+ as: PropTypes.elementType,
children: PropTypes.node,
className: PropTypes.string,
- component: PropTypes.elementType,
orientation: PropTypes.oneOf(['top', 'bottom']),
}
diff --git a/packages/coreui-react/src/components/card/CCardImageOverlay.tsx b/packages/coreui-react/src/components/card/CCardImageOverlay.tsx
index aa591888..7f8ba71a 100644
--- a/packages/coreui-react/src/components/card/CCardImageOverlay.tsx
+++ b/packages/coreui-react/src/components/card/CCardImageOverlay.tsx
@@ -11,10 +11,8 @@ export interface CCardImageOverlayProps extends HTMLAttributes {
export const CCardImageOverlay = forwardRef(
({ children, className, ...rest }, ref) => {
- const _className = classNames('card-img-overlay', className)
-
return (
-
+
{children}
)
diff --git a/packages/coreui-react/src/components/card/CCardLink.tsx b/packages/coreui-react/src/components/card/CCardLink.tsx
index 001da0f0..9bf10db0 100644
--- a/packages/coreui-react/src/components/card/CCardLink.tsx
+++ b/packages/coreui-react/src/components/card/CCardLink.tsx
@@ -17,10 +17,8 @@ export interface CCardLinkProps extends AnchorHTMLAttributes
export const CCardLink = forwardRef(
({ children, className, ...rest }, ref) => {
- const _className = classNames('card-link', className)
-
return (
-
+
{children}
)
diff --git a/packages/coreui-react/src/components/card/CCardSubtitle.tsx b/packages/coreui-react/src/components/card/CCardSubtitle.tsx
index 7f77c36b..0007ef27 100644
--- a/packages/coreui-react/src/components/card/CCardSubtitle.tsx
+++ b/packages/coreui-react/src/components/card/CCardSubtitle.tsx
@@ -2,32 +2,34 @@ import React, { ElementType, forwardRef, HTMLAttributes } from 'react'
import PropTypes from 'prop-types'
import classNames from 'classnames'
+import { PolymorphicRefForwardingComponent } from '../../helpers'
+
export interface CCardSubtitleProps extends HTMLAttributes {
/**
- * A string of all className you want applied to the component.
+ * Component used for the root node. Either a string to use a HTML element or a component.
*/
- className?: string
+ as?: ElementType
/**
- * Component used for the root node. Either a string to use a HTML element or a component.
+ * A string of all className you want applied to the component.
*/
- component?: string | ElementType
+ className?: string
}
-export const CCardSubtitle = forwardRef(
- ({ children, component: Component = 'h6', className, ...rest }, ref) => {
- const _className = classNames('card-subtitle', className)
- return (
-
- {children}
-
- )
- },
-)
+export const CCardSubtitle: PolymorphicRefForwardingComponent<'h6', CCardSubtitleProps> =
+ forwardRef(
+ ({ children, as: Component = 'h6', className, ...rest }, ref) => {
+ return (
+
+ {children}
+
+ )
+ },
+ )
CCardSubtitle.propTypes = {
+ as: PropTypes.elementType,
children: PropTypes.node,
className: PropTypes.string,
- component: PropTypes.elementType,
}
CCardSubtitle.displayName = 'CCardSubtitle'
diff --git a/packages/coreui-react/src/components/card/CCardText.tsx b/packages/coreui-react/src/components/card/CCardText.tsx
index dee8f9f9..6e8e03f4 100644
--- a/packages/coreui-react/src/components/card/CCardText.tsx
+++ b/packages/coreui-react/src/components/card/CCardText.tsx
@@ -2,33 +2,34 @@ import React, { ElementType, forwardRef, HTMLAttributes } from 'react'
import PropTypes from 'prop-types'
import classNames from 'classnames'
+import { PolymorphicRefForwardingComponent } from '../../helpers'
+
export interface CCardTextProps extends HTMLAttributes {
/**
- * A string of all className you want applied to the component.
+ * Component used for the root node. Either a string to use a HTML element or a component.
*/
- className?: string
+ as?: ElementType
/**
- * Component used for the root node. Either a string to use a HTML element or a component.
+ * A string of all className you want applied to the component.
*/
- component?: string | ElementType
+ className?: string
}
-export const CCardText = forwardRef(
- ({ children, component: Component = 'p', className, ...rest }, ref) => {
- const _className = classNames('card-text', className)
-
- return (
-
- {children}
-
- )
- },
-)
+export const CCardText: PolymorphicRefForwardingComponent<'p', CCardTextProps> = forwardRef<
+ HTMLParagraphElement,
+ CCardTextProps
+>(({ children, as: Component = 'p', className, ...rest }, ref) => {
+ return (
+
+ {children}
+
+ )
+})
CCardText.propTypes = {
+ as: PropTypes.elementType,
children: PropTypes.node,
className: PropTypes.string,
- component: PropTypes.elementType,
}
CCardText.displayName = 'CCardText'
diff --git a/packages/coreui-react/src/components/card/CCardTitle.tsx b/packages/coreui-react/src/components/card/CCardTitle.tsx
index ec2c2f3a..0b9e5ce1 100644
--- a/packages/coreui-react/src/components/card/CCardTitle.tsx
+++ b/packages/coreui-react/src/components/card/CCardTitle.tsx
@@ -2,33 +2,34 @@ import React, { ElementType, forwardRef, HTMLAttributes } from 'react'
import PropTypes from 'prop-types'
import classNames from 'classnames'
+import { PolymorphicRefForwardingComponent } from '../../helpers'
+
export interface CCardTitleProps extends HTMLAttributes {
/**
- * A string of all className you want applied to the component.
+ * Component used for the root node. Either a string to use a HTML element or a component.
*/
- className?: string
+ as?: ElementType
/**
- * Component used for the root node. Either a string to use a HTML element or a component.
+ * A string of all className you want applied to the component.
*/
- component?: string | ElementType
+ className?: string
}
-export const CCardTitle = forwardRef(
- ({ children, component: Component = 'h5', className, ...rest }, ref) => {
- const _className = classNames('card-title', className)
-
- return (
-
- {children}
-
- )
- },
-)
+export const CCardTitle: PolymorphicRefForwardingComponent<'h5', CCardTitleProps> = forwardRef<
+ HTMLHeadingElement,
+ CCardTitleProps
+>(({ children, as: Component = 'h5', className, ...rest }, ref) => {
+ return (
+
+ {children}
+
+ )
+})
CCardTitle.propTypes = {
+ as: PropTypes.elementType,
children: PropTypes.node,
className: PropTypes.string,
- component: PropTypes.elementType,
}
CCardTitle.displayName = 'CCardTitle'
diff --git a/packages/coreui-react/src/components/card/__tests__/CCard.spec.tsx b/packages/coreui-react/src/components/card/__tests__/CCard.spec.tsx
index 23cf4dee..6b4f9b11 100644
--- a/packages/coreui-react/src/components/card/__tests__/CCard.spec.tsx
+++ b/packages/coreui-react/src/components/card/__tests__/CCard.spec.tsx
@@ -1,7 +1,7 @@
import * as React from 'react'
import { render } from '@testing-library/react'
-import '@testing-library/jest-dom/extend-expect'
-import { CCard } from '../../../index'
+import '@testing-library/jest-dom'
+import { CCard } from '../index'
test('loads and displays CCard component', async () => {
const { container } = render(Test)
diff --git a/packages/coreui-react/src/components/card/__tests__/CCardBody.spec.tsx b/packages/coreui-react/src/components/card/__tests__/CCardBody.spec.tsx
index 4f767929..0bf1ccd9 100644
--- a/packages/coreui-react/src/components/card/__tests__/CCardBody.spec.tsx
+++ b/packages/coreui-react/src/components/card/__tests__/CCardBody.spec.tsx
@@ -1,7 +1,7 @@
import * as React from 'react'
import { render } from '@testing-library/react'
-import '@testing-library/jest-dom/extend-expect'
-import { CCardBody } from '../../../index'
+import '@testing-library/jest-dom'
+import { CCardBody } from '../index'
test('loads and displays CCardBody component', async () => {
const { container } = render(Test)
diff --git a/packages/coreui-react/src/components/card/__tests__/CCardFooter.spec.tsx b/packages/coreui-react/src/components/card/__tests__/CCardFooter.spec.tsx
index 2b26dbfb..991e3c7c 100644
--- a/packages/coreui-react/src/components/card/__tests__/CCardFooter.spec.tsx
+++ b/packages/coreui-react/src/components/card/__tests__/CCardFooter.spec.tsx
@@ -1,7 +1,7 @@
import * as React from 'react'
import { render } from '@testing-library/react'
-import '@testing-library/jest-dom/extend-expect'
-import { CCardFooter } from '../../../index'
+import '@testing-library/jest-dom'
+import { CCardFooter } from '../index'
test('loads and displays CCardFooter component', async () => {
const { container } = render(Test)
diff --git a/packages/coreui-react/src/components/card/__tests__/CCardGroup.spec.tsx b/packages/coreui-react/src/components/card/__tests__/CCardGroup.spec.tsx
index b943b4ca..239c1fd9 100644
--- a/packages/coreui-react/src/components/card/__tests__/CCardGroup.spec.tsx
+++ b/packages/coreui-react/src/components/card/__tests__/CCardGroup.spec.tsx
@@ -1,6 +1,6 @@
import * as React from 'react'
import { render } from '@testing-library/react'
-import '@testing-library/jest-dom/extend-expect'
+import '@testing-library/jest-dom'
import {
CCard,
CCardBody,
@@ -12,7 +12,7 @@ import {
CCardTitle,
CCardText,
CCardGroup,
-} from '../../../index'
+} from '../index'
test('loads and displays CCardGroup component', async () => {
const { container } = render(Test)
@@ -30,7 +30,7 @@ test('CCardGroup full example', async () => {
const { container } = render(
- Image
+ Image
Header
Title
diff --git a/packages/coreui-react/src/components/card/__tests__/CCardHeader.spec.tsx b/packages/coreui-react/src/components/card/__tests__/CCardHeader.spec.tsx
index 60d6b04d..0477b503 100644
--- a/packages/coreui-react/src/components/card/__tests__/CCardHeader.spec.tsx
+++ b/packages/coreui-react/src/components/card/__tests__/CCardHeader.spec.tsx
@@ -1,7 +1,7 @@
import * as React from 'react'
import { render } from '@testing-library/react'
-import '@testing-library/jest-dom/extend-expect'
-import { CCardHeader } from '../../../index'
+import '@testing-library/jest-dom'
+import { CCardHeader } from '../index'
test('loads and displays CCardHeader component', async () => {
const { container } = render(Test)
@@ -10,7 +10,7 @@ test('loads and displays CCardHeader component', async () => {
test('CCardHeader customize', async () => {
const { container } = render(
-
+
Test
,
)
diff --git a/packages/coreui-react/src/components/card/__tests__/CCardImage.spec.tsx b/packages/coreui-react/src/components/card/__tests__/CCardImage.spec.tsx
index a525ec68..e1214093 100644
--- a/packages/coreui-react/src/components/card/__tests__/CCardImage.spec.tsx
+++ b/packages/coreui-react/src/components/card/__tests__/CCardImage.spec.tsx
@@ -1,7 +1,7 @@
import * as React from 'react'
import { render } from '@testing-library/react'
-import '@testing-library/jest-dom/extend-expect'
-import { CCardImage } from '../../../index'
+import '@testing-library/jest-dom'
+import { CCardImage } from '../index'
test('loads and displays CCardImage component', async () => {
const { container } = render()
@@ -9,9 +9,7 @@ test('loads and displays CCardImage component', async () => {
})
test('CCardImage customize', async () => {
- const { container } = render(
- ,
- )
+ const { container } = render()
expect(container).toMatchSnapshot()
expect(container.firstChild).toHaveClass('bazinga')
expect(container.firstChild).toHaveClass('card-img-bottom')
diff --git a/packages/coreui-react/src/components/card/__tests__/CCardImageOverlay.spec.tsx b/packages/coreui-react/src/components/card/__tests__/CCardImageOverlay.spec.tsx
index f13a293c..6574856b 100644
--- a/packages/coreui-react/src/components/card/__tests__/CCardImageOverlay.spec.tsx
+++ b/packages/coreui-react/src/components/card/__tests__/CCardImageOverlay.spec.tsx
@@ -1,7 +1,7 @@
import * as React from 'react'
import { render } from '@testing-library/react'
-import '@testing-library/jest-dom/extend-expect'
-import { CCardImageOverlay } from '../../../index'
+import '@testing-library/jest-dom'
+import { CCardImageOverlay } from '../index'
test('loads and displays CCardImageOverlay component', async () => {
const { container } = render()
diff --git a/packages/coreui-react/src/components/card/__tests__/CCardLink.spec.tsx b/packages/coreui-react/src/components/card/__tests__/CCardLink.spec.tsx
index e498ed14..2373537f 100644
--- a/packages/coreui-react/src/components/card/__tests__/CCardLink.spec.tsx
+++ b/packages/coreui-react/src/components/card/__tests__/CCardLink.spec.tsx
@@ -1,7 +1,7 @@
import * as React from 'react'
import { render } from '@testing-library/react'
-import '@testing-library/jest-dom/extend-expect'
-import { CCardLink } from '../../../index'
+import '@testing-library/jest-dom'
+import { CCardLink } from '../index'
test('loads and displays CCardLink component', async () => {
const { container } = render(Test)
diff --git a/packages/coreui-react/src/components/card/__tests__/CCardSubtitle.spec.tsx b/packages/coreui-react/src/components/card/__tests__/CCardSubtitle.spec.tsx
index 1bb67f98..8a23f9c8 100644
--- a/packages/coreui-react/src/components/card/__tests__/CCardSubtitle.spec.tsx
+++ b/packages/coreui-react/src/components/card/__tests__/CCardSubtitle.spec.tsx
@@ -1,7 +1,7 @@
import * as React from 'react'
import { render } from '@testing-library/react'
-import '@testing-library/jest-dom/extend-expect'
-import { CCardSubtitle } from '../../../index'
+import '@testing-library/jest-dom'
+import { CCardSubtitle } from '../index'
test('loads and displays CCardSubtitle component', async () => {
const { container } = render(Test)
@@ -10,7 +10,7 @@ test('loads and displays CCardSubtitle component', async () => {
test('CCardSubtitle customize', async () => {
const { container } = render(
-
+
Test
,
)
diff --git a/packages/coreui-react/src/components/card/__tests__/CCardText.spec.tsx b/packages/coreui-react/src/components/card/__tests__/CCardText.spec.tsx
index f84fcd85..3cbb4ab2 100644
--- a/packages/coreui-react/src/components/card/__tests__/CCardText.spec.tsx
+++ b/packages/coreui-react/src/components/card/__tests__/CCardText.spec.tsx
@@ -1,7 +1,7 @@
import * as React from 'react'
import { render } from '@testing-library/react'
-import '@testing-library/jest-dom/extend-expect'
-import { CCardText } from '../../../index'
+import '@testing-library/jest-dom'
+import { CCardText } from '../index'
test('loads and displays CCardText component', async () => {
const { container } = render(Test)
@@ -10,7 +10,7 @@ test('loads and displays CCardText component', async () => {
test('CCardText customize', async () => {
const { container } = render(
-
+
Test
,
)
diff --git a/packages/coreui-react/src/components/card/__tests__/CCardTitle.spec.tsx b/packages/coreui-react/src/components/card/__tests__/CCardTitle.spec.tsx
index f0a3b184..9733a7f4 100644
--- a/packages/coreui-react/src/components/card/__tests__/CCardTitle.spec.tsx
+++ b/packages/coreui-react/src/components/card/__tests__/CCardTitle.spec.tsx
@@ -1,7 +1,7 @@
import * as React from 'react'
import { render } from '@testing-library/react'
-import '@testing-library/jest-dom/extend-expect'
-import { CCardTitle } from '../../../index'
+import '@testing-library/jest-dom'
+import { CCardTitle } from '../index'
test('loads and displays CCardTitle component', async () => {
const { container } = render(Test)
@@ -10,7 +10,7 @@ test('loads and displays CCardTitle component', async () => {
test('CCardTitle customize', async () => {
const { container } = render(
-
+
Test
,
)
diff --git a/packages/coreui-react/src/components/carousel/CCarousel.tsx b/packages/coreui-react/src/components/carousel/CCarousel.tsx
index 0791f052..3d3186d3 100644
--- a/packages/coreui-react/src/components/carousel/CCarousel.tsx
+++ b/packages/coreui-react/src/components/carousel/CCarousel.tsx
@@ -1,8 +1,8 @@
import React, {
Children,
- createContext,
forwardRef,
HTMLAttributes,
+ TouchEvent,
useState,
useEffect,
useRef,
@@ -10,17 +10,10 @@ import React, {
import PropTypes from 'prop-types'
import classNames from 'classnames'
-import { useForkedRef } from '../../utils/hooks'
+import { isInViewport } from '../../utils'
+import { useForkedRef } from '../../hooks'
-const isVisible = (element: HTMLDivElement) => {
- const rect = element.getBoundingClientRect()
- return (
- rect.top >= 0 &&
- rect.left >= 0 &&
- rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
- rect.right <= (window.innerWidth || document.documentElement.clientWidth)
- )
-}
+import { CCarouselContext } from './CCarouselContext'
export interface CCarouselProps extends HTMLAttributes {
/**
@@ -59,6 +52,12 @@ export interface CCarouselProps extends HTMLAttributes {
* If set to 'hover', pauses the cycling of the carousel on mouseenter and resumes the cycling of the carousel on mouseleave. If set to false, hovering over the carousel won't pause it.
*/
pause?: boolean | 'hover'
+ /**
+ * Set whether the carousel should support left/right swipe interactions on touchscreen devices.
+ *
+ * @since 4.5.0
+ */
+ touch?: boolean
/**
* Set type of the transition.
*/
@@ -73,13 +72,6 @@ interface DataType {
timeout?: null | ReturnType
}
-export interface ContextProps {
- setAnimating: (a: boolean) => void
- setCustomInterval: (a: boolean | number) => void
-}
-
-export const CCarouselContext = createContext({} as ContextProps)
-
export const CCarousel = forwardRef(
(
{
@@ -93,11 +85,12 @@ export const CCarousel = forwardRef(
onSlid,
onSlide,
pause = 'hover',
+ touch = true,
transition,
wrap = true,
...rest
},
- ref,
+ ref
) => {
const carouselRef = useRef(null)
const forkedRef = useForkedRef(ref, carouselRef)
@@ -108,6 +101,7 @@ export const CCarousel = forwardRef(
const [customInterval, setCustomInterval] = useState()
const [direction, setDirection] = useState('next')
const [itemsNumber, setItemsNumber] = useState(0)
+ const [touchPosition, setTouchPosition] = useState(null)
const [visible, setVisible] = useState()
useEffect(() => {
@@ -132,13 +126,6 @@ export const CCarousel = forwardRef(
}
})
- const _className = classNames(
- 'carousel slide',
- transition === 'crossfade' && 'carousel-fade',
- dark && 'carousel-dark',
- className,
- )
-
const cycle = () => {
_pause()
if (!wrap && active === itemsNumber - 1) {
@@ -148,7 +135,7 @@ export const CCarousel = forwardRef(
if (typeof interval === 'number') {
data.timeout = setTimeout(
() => nextItemWhenVisible(),
- typeof customInterval === 'number' ? customInterval : interval,
+ typeof customInterval === 'number' ? customInterval : interval
)
}
}
@@ -157,7 +144,7 @@ export const CCarousel = forwardRef(
const nextItemWhenVisible = () => {
// Don't call next when the page isn't visible
// or the carousel or its parent isn't visible
- if (!document.hidden && carouselRef.current && isVisible(carouselRef.current)) {
+ if (!document.hidden && carouselRef.current && isInViewport(carouselRef.current)) {
if (animating) {
return
}
@@ -195,18 +182,52 @@ export const CCarousel = forwardRef(
}
const handleScroll = () => {
- if (!document.hidden && carouselRef.current && isVisible(carouselRef.current)) {
+ if (!document.hidden && carouselRef.current && isInViewport(carouselRef.current)) {
setVisible(true)
} else {
setVisible(false)
}
}
+ const handleTouchMove = (e: TouchEvent) => {
+ const touchDown = touchPosition
+
+ if (touchDown === null) {
+ return
+ }
+
+ const currentTouch = e.touches[0].clientX
+ const diff = touchDown - currentTouch
+
+ if (diff > 5) {
+ handleControlClick('next')
+ }
+
+ if (diff < -5) {
+ handleControlClick('prev')
+ }
+
+ setTouchPosition(null)
+ }
+
+ const handleTouchStart = (e: TouchEvent) => {
+ const touchDown = e.touches[0].clientX
+ setTouchPosition(touchDown)
+ }
+
return (
@@ -217,25 +238,29 @@ export const CCarousel = forwardRef
(
}}
>
{indicators && (
-
+
{Array.from({ length: itemsNumber }, (_, i) => i).map((index) => {
return (
-
- {
!animating && handleIndicatorClick(index)
}}
- className={active === index ? 'active' : ''}
+ className={classNames({
+ active: active === index,
+ })}
data-coreui-target=""
+ {...(active === index && { 'aria-current': true })}
+ aria-label={`Slide ${index + 1}`}
/>
)
})}
-
+
)}
{Children.map(children, (child, index) => {
if (React.isValidElement(child)) {
- return React.cloneElement(child, {
+ return React.cloneElement(child as React.ReactElement
, {
active: active === index ? true : false,
direction: direction,
key: index,
@@ -257,7 +282,7 @@ export const CCarousel = forwardRef(
+
{children}
)
- },
+ }
)
CCarouselItem.propTypes = {
diff --git a/packages/coreui-react/src/components/carousel/__tests__/CCarousel.spec.tsx b/packages/coreui-react/src/components/carousel/__tests__/CCarousel.spec.tsx
index 37319040..c681e5b7 100644
--- a/packages/coreui-react/src/components/carousel/__tests__/CCarousel.spec.tsx
+++ b/packages/coreui-react/src/components/carousel/__tests__/CCarousel.spec.tsx
@@ -1,8 +1,7 @@
import React from 'react'
-import { render, fireEvent } from '@testing-library/react'
-import { getByText } from '@testing-library/dom'
-import '@testing-library/jest-dom/extend-expect'
-import { CCarousel, CCarouselCaption, CCarouselItem } from '../../../index'
+import { render, fireEvent, getByText } from '@testing-library/react'
+import '@testing-library/jest-dom'
+import { CCarousel, CCarouselCaption, CCarouselItem } from '../index'
test('loads and displays CCarousel component', async () => {
const { container } = render(
diff --git a/packages/coreui-react/src/components/carousel/__tests__/__snapshots__/CCarousel.spec.tsx.snap b/packages/coreui-react/src/components/carousel/__tests__/__snapshots__/CCarousel.spec.tsx.snap
index a7c3728d..5d9045b1 100644
--- a/packages/coreui-react/src/components/carousel/__tests__/__snapshots__/CCarousel.spec.tsx.snap
+++ b/packages/coreui-react/src/components/carousel/__tests__/__snapshots__/CCarousel.spec.tsx.snap
@@ -5,22 +5,26 @@ exports[`loads and displays CCarousel component 1`] = `
diff --git a/packages/coreui-react/src/components/close-button/CCloseButton.tsx b/packages/coreui-react/src/components/close-button/CCloseButton.tsx
index ea059e7a..18c49fed 100644
--- a/packages/coreui-react/src/components/close-button/CCloseButton.tsx
+++ b/packages/coreui-react/src/components/close-button/CCloseButton.tsx
@@ -7,33 +7,39 @@ export interface CCloseButtonProps extends HTMLAttributes {
* A string of all className you want applied to the base component.
*/
className?: string
+ /**
+ * Invert the default color.
+ */
+ dark?: boolean
/**
* Toggle the disabled state for the component.
*/
disabled?: boolean
/**
* Change the default color to white.
+ *
+ * @deprecated 5.0.0
*/
white?: boolean
}
export const CCloseButton = forwardRef(
- ({ className, disabled, white, ...rest }, ref) => {
- const _className = classNames(
- 'btn',
- 'btn-close',
- {
- 'btn-close-white': white,
- },
- disabled,
- className,
- )
+ ({ className, dark, disabled, white, ...rest }, ref) => {
return (
@@ -43,6 +49,7 @@ export const CCloseButton = forwardRef(
CCloseButton.propTypes = {
className: PropTypes.string,
+ dark: PropTypes.bool,
disabled: PropTypes.bool,
white: PropTypes.bool,
}
diff --git a/packages/coreui-react/src/components/close-button/__tests__/CCloseButton.spec.tsx b/packages/coreui-react/src/components/close-button/__tests__/CCloseButton.spec.tsx
index 08c88570..3eb0dbc0 100644
--- a/packages/coreui-react/src/components/close-button/__tests__/CCloseButton.spec.tsx
+++ b/packages/coreui-react/src/components/close-button/__tests__/CCloseButton.spec.tsx
@@ -1,7 +1,7 @@
import * as React from 'react'
import { render } from '@testing-library/react'
-import '@testing-library/jest-dom/extend-expect'
-import { CCloseButton } from '../../../index'
+import '@testing-library/jest-dom'
+import { CCloseButton } from '../index'
test('loads and displays CCloseButton component', async () => {
const { container } = render()
diff --git a/packages/coreui-react/src/components/close-button/__tests__/__snapshots__/CCloseButton.spec.tsx.snap b/packages/coreui-react/src/components/close-button/__tests__/__snapshots__/CCloseButton.spec.tsx.snap
index e611428c..6b584a17 100644
--- a/packages/coreui-react/src/components/close-button/__tests__/__snapshots__/CCloseButton.spec.tsx.snap
+++ b/packages/coreui-react/src/components/close-button/__tests__/__snapshots__/CCloseButton.spec.tsx.snap
@@ -6,6 +6,7 @@ exports[`CCloseButton customize 1`] = `
aria-label="Close"
class="btn btn-close btn-close-white bazinga"
disabled=""
+ type="button"
/>
`;
@@ -15,6 +16,7 @@ exports[`loads and displays CCloseButton component 1`] = `
{
const { container } = render(
Test)
@@ -16,26 +16,44 @@ test('CCollapse customize', async () => {
test('CCollapse use case test', async () => {
jest.useFakeTimers()
+
const { rerender } = render(
Test)
+
expect(screen.getByText('Test')).toHaveClass('collapse')
expect(screen.getByText('Test')).not.toHaveClass('show')
expect(screen.getByText('Test')).not.toHaveClass('collapsing')
- rerender(
Test)
+
+ act(() => {
+ rerender(
Test)
+ })
+
expect(screen.getByText('Test')).not.toHaveClass('collapse')
expect(screen.getByText('Test')).not.toHaveClass('show')
expect(screen.getByText('Test')).toHaveClass('collapsing')
- jest.runAllTimers()
+
+ act(() => {
+ jest.runAllTimers()
+ })
+
expect(screen.getByText('Test')).toHaveClass('collapse')
expect(screen.getByText('Test')).toHaveClass('show')
expect(screen.getByText('Test')).not.toHaveClass('collapsing')
- rerender(
Test)
+
+ act(() => {
+ rerender(
Test)
+ })
+
expect(screen.getByText('Test')).not.toHaveClass('collapse')
expect(screen.getByText('Test')).not.toHaveClass('show')
expect(screen.getByText('Test')).toHaveClass('collapsing')
- jest.runAllTimers()
+
+ act(() => {
+ jest.runAllTimers()
+ })
+
expect(screen.getByText('Test')).toHaveClass('collapse')
expect(screen.getByText('Test')).not.toHaveClass('show')
expect(screen.getByText('Test')).not.toHaveClass('collapsing')
- jest.runAllTimers()
+
jest.useRealTimers()
})
diff --git a/packages/coreui-react/src/components/conditional-portal/CConditionalPortal.tsx b/packages/coreui-react/src/components/conditional-portal/CConditionalPortal.tsx
new file mode 100644
index 00000000..ca9bea8c
--- /dev/null
+++ b/packages/coreui-react/src/components/conditional-portal/CConditionalPortal.tsx
@@ -0,0 +1,56 @@
+import React, { FC, ReactNode, useEffect, useState } from 'react'
+import { createPortal } from 'react-dom'
+import PropTypes from 'prop-types'
+
+const getContainer = (
+ container?: DocumentFragment | Element | (() => DocumentFragment | Element | null) | null,
+) => {
+ if (container) {
+ return typeof container === 'function' ? container() : container
+ }
+
+ return document.body
+}
+
+export interface CConditionalPortalProps {
+ /**
+ * @ignore
+ */
+ children: ReactNode
+ /**
+ * An HTML element or function that returns a single element, with `document.body` as the default.
+ *
+ * @since 4.11.0
+ */
+ container?: DocumentFragment | Element | (() => DocumentFragment | Element | null) | null
+ /**
+ * Render some children into a different part of the DOM
+ */
+ portal: boolean
+}
+
+export const CConditionalPortal: FC
= ({
+ children,
+ container,
+ portal,
+}) => {
+ const [_container, setContainer] = useState>(null)
+
+ useEffect(() => {
+ portal && setContainer(getContainer(container) || document.body)
+ }, [container, portal])
+
+ return typeof window !== 'undefined' && portal && _container ? (
+ createPortal(children, _container)
+ ) : (
+ <>{children}
+ )
+}
+
+CConditionalPortal.propTypes = {
+ children: PropTypes.node,
+ container: PropTypes.any, // HTMLElement
+ portal: PropTypes.bool.isRequired,
+}
+
+CConditionalPortal.displayName = 'CConditionalPortal'
diff --git a/packages/coreui-react/src/components/conditional-portal/index.ts b/packages/coreui-react/src/components/conditional-portal/index.ts
new file mode 100644
index 00000000..ab6cc3bc
--- /dev/null
+++ b/packages/coreui-react/src/components/conditional-portal/index.ts
@@ -0,0 +1,3 @@
+import { CConditionalPortal } from './CConditionalPortal'
+
+export { CConditionalPortal }
diff --git a/packages/coreui-react/src/components/dropdown/CDropdown.tsx b/packages/coreui-react/src/components/dropdown/CDropdown.tsx
index cc0e4760..5b5e35d4 100644
--- a/packages/coreui-react/src/components/dropdown/CDropdown.tsx
+++ b/packages/coreui-react/src/components/dropdown/CDropdown.tsx
@@ -1,127 +1,202 @@
-import React, {
- createContext,
- ElementType,
- forwardRef,
- HTMLAttributes,
- RefObject,
- useEffect,
- useRef,
- useState,
-} from 'react'
+import React, { ElementType, forwardRef, HTMLAttributes, useEffect, useRef, useState } from 'react'
import PropTypes from 'prop-types'
import classNames from 'classnames'
-import { Manager } from 'react-popper'
+import type { Options } from '@popperjs/core'
-import { Placements, placementPropType } from '../Types'
-import { useForkedRef } from '../../utils/hooks'
+import { CDropdownContext } from './CDropdownContext'
-export type Directions = 'start' | 'end'
+import { PolymorphicRefForwardingComponent } from '../../helpers'
+import { useForkedRef, usePopper } from '../../hooks'
+import { placementPropType } from '../../props'
+import type { Placements } from '../../types'
+import { getNextActiveElement, isRTL } from '../../utils'
-export type Breakpoints =
- | { xs: Directions }
- | { sm: Directions }
- | { md: Directions }
- | { lg: Directions }
- | { xl: Directions }
- | { xxl: Directions }
-
-export type Alignments = Directions | Breakpoints
+import type { Alignments, Directions } from './types'
+import { getPlacement } from './utils'
export interface CDropdownProps extends HTMLAttributes {
/**
- * Set aligment of dropdown menu.
+ * Specifies the alignment of the React Dropdown Menu within this React Dropdown.
+ *
+ * @example
+ * // Align dropdown menu to the end on large devices, otherwise start
+ *
+ * Toggle dropdown
+ *
+ * Action
+ * Another Action
+ *
+ *
*
* @type 'start' | 'end' | { xs: 'start' | 'end' } | { sm: 'start' | 'end' } | { md: 'start' | 'end' } | { lg: 'start' | 'end' } | { xl: 'start' | 'end'} | { xxl: 'start' | 'end'}
*/
alignment?: Alignments
+
/**
- * Configure the auto close behavior of the dropdown:
- * - `true` - the dropdown will be closed by clicking outside or inside the dropdown menu.
- * - `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)
- * - `'inside'` - the dropdown will be closed (only) by clicking inside the dropdown menu.
- * - `'outside'` - the dropdown will be closed (only) by clicking outside the dropdown menu.
+ * Determines the root node component (native HTML element or a custom React component) for the React Dropdown.
+ */
+ as?: ElementType
+
+ /**
+ * Configures automatic closing behavior for the React Dropdown:
+ * - `true` - Close on clicks inside or outside of the React Dropdown Menu.
+ * - `false` - Disable auto-close; manually call `hide` or `toggle` (also not closed by `Escape`).
+ * - `'inside'` - Close only when clicking inside the React Dropdown Menu.
+ * - `'outside'` - Close only when clicking outside the React Dropdown Menu.
+ *
+ * @example
+ * // Close only when user clicks outside of the menu
+ *
*/
autoClose?: 'inside' | 'outside' | boolean
+
/**
- * A string of all className you want applied to the base component.
+ * Adds custom classes to the React Dropdown root element.
*/
className?: string
+
/**
- * Component used for the root node. Either a string to use a HTML element or a component.
+ * Appends the React Dropdown Menu to a specific element. You can pass an HTML element or a function returning an element. Defaults to `document.body`.
+ *
+ * @example
+ * // Append the menu to a custom container
+ * const myContainer = document.getElementById('my-container')
+ *
+ *
+ *
+ * @since 4.11.0
*/
- component?: string | ElementType
+ container?: DocumentFragment | Element | (() => DocumentFragment | Element | null) | null
+
/**
- * Sets a darker color scheme to match a dark navbar.
+ * Applies a darker color scheme to the React Dropdown Menu, often used within dark navbars.
*/
dark?: boolean
+
+ /**
+ * Specifies the direction of the React Dropdown.
+ */
+ direction?: 'center' | 'dropup' | 'dropup-center' | 'dropend' | 'dropstart'
+
/**
- * Sets a specified direction and location of the dropdown menu.
+ * Defines x and y offsets ([x, y]) for the React Dropdown Menu relative to its target.
*
- * @type 'dropup' | 'dropend' | 'dropstart'
+ * @example
+ * // Offset the menu 10px in X and 5px in Y direction
+ *
+ * ...
+ *
*/
- direction?: 'dropup' | 'dropend' | 'dropstart'
+ offset?: [number, number]
+
/**
- * Callback fired when the component requests to be hidden.
+ * Callback fired right before the React Dropdown becomes hidden.
+ *
+ * @since 4.9.0
*/
onHide?: () => void
+
/**
- * Callback fired when the component requests to be shown.
+ * Callback fired immediately after the React Dropdown is displayed.
*/
onShow?: () => void
+
/**
- * Describes the placement of your component after Popper.js has applied all the modifiers that may have flipped or altered the originally provided placement property.
+ * Determines the placement of the React Dropdown Menu after Popper.js modifiers.
*
- * @type 'auto' | 'top-end' | 'top' | 'top-start' | 'bottom-end' | 'bottom' | 'bottom-start' | 'right-start' | 'right' | 'right-end' | 'left-start' | 'left' | 'left-end'
+ * @type 'auto' | 'auto-start' | 'auto-end' | 'top-end' | 'top' | 'top-start' | 'bottom-end' | 'bottom' | 'bottom-start' | 'right-start' | 'right' | 'right-end' | 'left-start' | 'left' | 'left-end'
*/
placement?: Placements
+
/**
- * If you want to disable dynamic positioning set this property to `true`.
+ * Enables or disables dynamic positioning via Popper.js for the React Dropdown Menu.
*/
popper?: boolean
+
+ /**
+ * Provides a custom Popper.js configuration or a function that returns a modified Popper.js configuration for advanced positioning of the React Dropdown Menu. [Read more](https://popper.js.org/docs/v2/constructors/#options)
+ *
+ * @example
+ * // Providing a custom popper config
+ * ...
+ *
+ * @since 5.5.0
+ */
+ popperConfig?: Partial | ((defaultPopperConfig: Partial) => Partial)
+
+ /**
+ * Renders the React Dropdown Menu using a React Portal, allowing it to escape the DOM hierarchy for improved positioning.
+ *
+ * @since 4.8.0
+ */
+ portal?: boolean
+
/**
- * Set the dropdown variant to an btn-group, dropdown, input-group, and nav-item.
+ * Defines the visual variant of the React Dropdown
*/
variant?: 'btn-group' | 'dropdown' | 'input-group' | 'nav-item'
+
/**
- * Toggle the visibility of dropdown menu component.
+ * Controls the visibility of the React Dropdown Menu:
+ * - `true` - Visible
+ * - `false` - Hidden
+ *
+ * @example
+ * // Programmatically manage the dropdown visibility
+ * const [visible, setVisible] = useState(false)
+ *
+ *
+ * ...
+ *
+ *
*/
visible?: boolean
}
-interface ContextProps extends CDropdownProps {
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
- dropdownToggleRef: RefObject | undefined
- setVisible: React.Dispatch>
-}
-
-export const CDropdownContext = createContext({} as ContextProps)
-
-export const CDropdown = forwardRef(
+export const CDropdown: PolymorphicRefForwardingComponent<'div', CDropdownProps> = forwardRef<
+ HTMLDivElement | HTMLLIElement,
+ CDropdownProps
+>(
(
{
children,
alignment,
+ as = 'div',
autoClose = true,
className,
+ container,
dark,
direction,
+ offset = [0, 2],
onHide,
onShow,
placement = 'bottom-start',
popper = true,
+ popperConfig,
+ portal = false,
variant = 'btn-group',
- component = 'div',
visible = false,
...rest
},
- ref,
+ ref
) => {
- const [_visible, setVisible] = useState(visible)
const dropdownRef = useRef(null)
- const dropdownToggleRef = useRef(null)
+ const dropdownToggleRef = useRef(null)
+ const dropdownMenuRef = useRef(null)
const forkedRef = useForkedRef(ref, dropdownRef)
+ const [_visible, setVisible] = useState(visible)
+ const { initPopper, destroyPopper } = usePopper()
- const Component = variant === 'nav-item' ? 'li' : component
+ const Component = variant === 'nav-item' ? 'li' : as
// Disable popper if responsive aligment is set.
if (typeof alignment === 'object') {
@@ -130,83 +205,178 @@ export const CDropdown = forwardRef = {
+ ...defaultPopperConfig,
+ ...(typeof popperConfig === 'function' ? popperConfig(defaultPopperConfig) : popperConfig),
+ }
useEffect(() => {
setVisible(visible)
}, [visible])
useEffect(() => {
- _visible && onShow && onShow()
- !_visible && onHide && onHide()
- }, [_visible])
-
- const dropdownContent = () => {
- return variant === 'input-group' ? (
- <>{children}
- ) : (
-
- {children}
-
- )
+ const toggleElement = dropdownToggleRef.current
+ const menuElement = dropdownMenuRef.current
+
+ if (_visible && toggleElement && menuElement) {
+ if (popper) {
+ initPopper(toggleElement, menuElement, computedPopperConfig)
+ }
+
+ toggleElement.focus()
+ toggleElement.addEventListener('keydown', handleKeydown)
+ menuElement.addEventListener('keydown', handleKeydown)
+
+ window.addEventListener('mouseup', handleMouseUp)
+ window.addEventListener('keyup', handleKeyup)
+
+ onShow?.()
+ }
+
+ return () => {
+ if (popper) {
+ destroyPopper()
+ }
+
+ toggleElement?.removeEventListener('keydown', handleKeydown)
+ menuElement?.removeEventListener('keydown', handleKeydown)
+
+ window.removeEventListener('mouseup', handleMouseUp)
+ window.removeEventListener('keyup', handleKeyup)
+
+ onHide?.()
+ }
+ }, [
+ computedPopperConfig,
+ destroyPopper,
+ dropdownMenuRef,
+ dropdownToggleRef,
+ initPopper,
+ _visible,
+ ])
+
+ const handleKeydown = (event: KeyboardEvent) => {
+ if (
+ _visible &&
+ dropdownMenuRef.current &&
+ (event.key === 'ArrowDown' || event.key === 'ArrowUp')
+ ) {
+ event.preventDefault()
+ const target = event.target as HTMLElement
+ const items: HTMLElement[] = Array.from(
+ dropdownMenuRef.current.querySelectorAll('.dropdown-item:not(.disabled):not(:disabled)')
+ )
+ getNextActiveElement(items, target, event.key === 'ArrowDown', true).focus()
+ }
}
- return popper ? (
-
- {dropdownContent()}
-
- ) : (
+ const handleKeyup = (event: KeyboardEvent) => {
+ if (autoClose === false) {
+ return
+ }
+
+ if (event.key === 'Escape') {
+ setVisible(false)
+ }
+ }
+
+ const handleMouseUp = (event: Event) => {
+ if (!dropdownToggleRef.current || !dropdownMenuRef.current) {
+ return
+ }
+
+ if (dropdownToggleRef.current.contains(event.target as HTMLElement)) {
+ return
+ }
+
+ if (
+ autoClose === true ||
+ (autoClose === 'inside' && dropdownMenuRef.current.contains(event.target as HTMLElement)) ||
+ (autoClose === 'outside' && !dropdownMenuRef.current.contains(event.target as HTMLElement))
+ ) {
+ setTimeout(() => setVisible(false), 1)
+ return
+ }
+ }
+
+ return (
- {dropdownContent()}
+ {variant === 'input-group' ? (
+ <>{children}
+ ) : (
+
+ {children}
+
+ )}
)
- },
+ }
)
const alignmentDirection = PropTypes.oneOf(['start', 'end'])
CDropdown.propTypes = {
- // @ts-expect-error TODO: we have to find a solution
alignment: PropTypes.oneOfType([
alignmentDirection,
- PropTypes.shape({ xs: alignmentDirection }),
- PropTypes.shape({ sm: alignmentDirection }),
- PropTypes.shape({ md: alignmentDirection }),
- PropTypes.shape({ lg: alignmentDirection }),
- PropTypes.shape({ xl: alignmentDirection }),
- PropTypes.shape({ xxl: alignmentDirection }),
+ PropTypes.shape({ xs: alignmentDirection.isRequired }),
+ PropTypes.shape({ sm: alignmentDirection.isRequired }),
+ PropTypes.shape({ md: alignmentDirection.isRequired }),
+ PropTypes.shape({ lg: alignmentDirection.isRequired }),
+ PropTypes.shape({ xl: alignmentDirection.isRequired }),
+ PropTypes.shape({ xxl: alignmentDirection.isRequired }),
]),
+ as: PropTypes.elementType,
autoClose: PropTypes.oneOfType([
PropTypes.bool,
PropTypes.oneOf<'inside' | 'outside'>(['inside', 'outside']),
]),
children: PropTypes.node,
className: PropTypes.string,
- component: PropTypes.elementType,
dark: PropTypes.bool,
- direction: PropTypes.oneOf(['dropup', 'dropend', 'dropstart']),
+ direction: PropTypes.oneOf(['center', 'dropup', 'dropup-center', 'dropend', 'dropstart']),
+ offset: PropTypes.any, // TODO: find good proptype
onHide: PropTypes.func,
onShow: PropTypes.func,
placement: placementPropType,
popper: PropTypes.bool,
+ popperConfig: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+ portal: PropTypes.bool,
variant: PropTypes.oneOf(['btn-group', 'dropdown', 'input-group', 'nav-item']),
visible: PropTypes.bool,
}
diff --git a/packages/coreui-react/src/components/dropdown/CDropdownContext.ts b/packages/coreui-react/src/components/dropdown/CDropdownContext.ts
new file mode 100644
index 00000000..81af43aa
--- /dev/null
+++ b/packages/coreui-react/src/components/dropdown/CDropdownContext.ts
@@ -0,0 +1,18 @@
+import { createContext, RefObject } from 'react'
+import { Alignments } from './types'
+
+export interface CDropdownContextProps {
+ alignment?: Alignments
+ container?: DocumentFragment | Element | (() => DocumentFragment | Element | null) | null
+ dark?: boolean
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ dropdownToggleRef: RefObject
+ dropdownMenuRef: RefObject
+ setVisible: React.Dispatch>
+ popper?: boolean
+ portal?: boolean
+ variant?: 'btn-group' | 'dropdown' | 'input-group' | 'nav-item'
+ visible?: boolean
+}
+
+export const CDropdownContext = createContext({} as CDropdownContextProps)
diff --git a/packages/coreui-react/src/components/dropdown/CDropdownDivider.tsx b/packages/coreui-react/src/components/dropdown/CDropdownDivider.tsx
index 589ee6e0..57b86e1e 100644
--- a/packages/coreui-react/src/components/dropdown/CDropdownDivider.tsx
+++ b/packages/coreui-react/src/components/dropdown/CDropdownDivider.tsx
@@ -11,10 +11,8 @@ export interface CDropdownDividerProps extends HTMLAttributes {
export const CDropdownDivider = forwardRef(
({ className, ...rest }, ref) => {
- const _className = classNames('dropdown-divider', className)
-
- return
- },
+ return
+ }
)
CDropdownDivider.propTypes = {
diff --git a/packages/coreui-react/src/components/dropdown/CDropdownHeader.tsx b/packages/coreui-react/src/components/dropdown/CDropdownHeader.tsx
index 4d43f379..89e53673 100644
--- a/packages/coreui-react/src/components/dropdown/CDropdownHeader.tsx
+++ b/packages/coreui-react/src/components/dropdown/CDropdownHeader.tsx
@@ -2,33 +2,34 @@ import React, { ElementType, forwardRef, HTMLAttributes } from 'react'
import PropTypes from 'prop-types'
import classNames from 'classnames'
+import { PolymorphicRefForwardingComponent } from '../../helpers'
+
export interface CDropdownHeaderProps extends HTMLAttributes {
/**
- * A string of all className you want applied to the component.
+ * Component used for the root node. Either a string to use a HTML element or a component.
*/
- className?: string
+ as?: ElementType
/**
- * Component used for the root node. Either a string to use a HTML element or a component.
+ * A string of all className you want applied to the component.
*/
- component?: string | ElementType
+ className?: string
}
-export const CDropdownHeader = forwardRef(
- ({ children, className, component: Component = 'h6', ...rest }, ref) => {
- const _className = classNames('dropdown-header', className)
-
- return (
-
- {children}
-
- )
- },
-)
+export const CDropdownHeader: PolymorphicRefForwardingComponent<'h6', CDropdownHeaderProps> =
+ forwardRef(
+ ({ children, as: Component = 'h6', className, ...rest }, ref) => {
+ return (
+
+ {children}
+
+ )
+ }
+ )
CDropdownHeader.propTypes = {
+ as: PropTypes.elementType,
children: PropTypes.node,
className: PropTypes.string,
- component: PropTypes.elementType,
}
CDropdownHeader.displayName = 'CDropdownHeader'
diff --git a/packages/coreui-react/src/components/dropdown/CDropdownItem.tsx b/packages/coreui-react/src/components/dropdown/CDropdownItem.tsx
index 46fa8f8d..4f58c00f 100644
--- a/packages/coreui-react/src/components/dropdown/CDropdownItem.tsx
+++ b/packages/coreui-react/src/components/dropdown/CDropdownItem.tsx
@@ -1,37 +1,33 @@
-import React, { ElementType, forwardRef } from 'react'
+import React, { forwardRef } from 'react'
import PropTypes from 'prop-types'
import classNames from 'classnames'
-import { CLinkProps } from '../link/CLink'
-import { CLink } from '../link/CLink'
+import { CLink, CLinkProps } from '../link/CLink'
+
+import { PolymorphicRefForwardingComponent } from '../../helpers'
export interface CDropdownItemProps extends CLinkProps {
/**
* A string of all className you want applied to the component.
*/
className?: string
- /**
- * Component used for the root node. Either a string to use a HTML element or a component.
- */
- component?: string | ElementType
}
-export const CDropdownItem = forwardRef(
- ({ children, className, component = 'a', ...rest }, ref) => {
- const _className = classNames('dropdown-item', className)
-
- return (
-
- {children}
-
- )
- },
-)
+export const CDropdownItem: PolymorphicRefForwardingComponent<'a', CDropdownItemProps> = forwardRef<
+ HTMLButtonElement | HTMLAnchorElement,
+ CDropdownItemProps
+>(({ children, as = 'a', className, ...rest }, ref) => {
+ return (
+
+ {children}
+
+ )
+})
CDropdownItem.propTypes = {
+ as: PropTypes.elementType,
children: PropTypes.node,
className: PropTypes.string,
- component: PropTypes.elementType,
}
CDropdownItem.displayName = 'CDropdownItem'
diff --git a/packages/coreui-react/src/components/dropdown/CDropdownItemPlain.tsx b/packages/coreui-react/src/components/dropdown/CDropdownItemPlain.tsx
index 564a7a96..bc4ae0bb 100644
--- a/packages/coreui-react/src/components/dropdown/CDropdownItemPlain.tsx
+++ b/packages/coreui-react/src/components/dropdown/CDropdownItemPlain.tsx
@@ -2,33 +2,36 @@ import React, { ElementType, forwardRef, HTMLAttributes } from 'react'
import PropTypes from 'prop-types'
import classNames from 'classnames'
+import { PolymorphicRefForwardingComponent } from '../../helpers'
+
export interface CDropdownItemPlainProps extends HTMLAttributes {
/**
- * A string of all className you want applied to the component.
+ * Component used for the root node. Either a string to use a HTML element or a component.
*/
- className?: string
+ as?: ElementType
/**
- * Component used for the root node. Either a string to use a HTML element or a component.
+ * A string of all className you want applied to the component.
*/
- component?: string | ElementType
+ className?: string
}
-export const CDropdownItemPlain = forwardRef(
- ({ children, className, component: Component = 'span', ...rest }, ref) => {
- const _className = classNames('dropdown-item-text', className)
-
+export const CDropdownItemPlain: PolymorphicRefForwardingComponent<
+ 'span',
+ CDropdownItemPlainProps
+> = forwardRef(
+ ({ children, as: Component = 'span', className, ...rest }, ref) => {
return (
-
+
{children}
)
- },
+ }
)
CDropdownItemPlain.propTypes = {
+ as: PropTypes.elementType,
children: PropTypes.node,
className: PropTypes.string,
- component: PropTypes.elementType,
}
CDropdownItemPlain.displayName = 'CDropdownItemPlain'
diff --git a/packages/coreui-react/src/components/dropdown/CDropdownMenu.tsx b/packages/coreui-react/src/components/dropdown/CDropdownMenu.tsx
index fff814ee..59442d63 100644
--- a/packages/coreui-react/src/components/dropdown/CDropdownMenu.tsx
+++ b/packages/coreui-react/src/components/dropdown/CDropdownMenu.tsx
@@ -1,168 +1,69 @@
-import React, { ElementType, FC, HTMLAttributes, useContext, useEffect, useRef } from 'react'
+import React, { ElementType, forwardRef, HTMLAttributes, useContext } from 'react'
import PropTypes from 'prop-types'
import classNames from 'classnames'
-import { Popper, PopperChildrenProps } from 'react-popper'
-import { Placements } from '../Types'
-import { Alignments, CDropdownContext } from './CDropdown'
+import { CConditionalPortal } from '../conditional-portal'
+import { CDropdownContext } from './CDropdownContext'
-export interface CDropdownMenuProps
- extends HTMLAttributes,
- Omit<
- PopperChildrenProps,
- | 'arrowProps'
- | 'forceUpdate'
- | 'hasPopperEscaped'
- | 'isReferenceHidden'
- | 'placement'
- | 'ref'
- | 'style'
- | 'update'
- > {
+import { PolymorphicRefForwardingComponent } from '../../helpers'
+import { useForkedRef } from '../../hooks'
+
+import { getAlignmentClassNames } from './utils'
+
+export interface CDropdownMenuProps extends HTMLAttributes {
/**
- * A string of all className you want applied to the base component.
+ * Component used for the root node. Either a string to use a HTML element or a component.
*/
- className?: string
+ as?: ElementType
/**
- * Component used for the root node. Either a string to use a HTML element or a component.
+ * A string of all className you want applied to the base component.
*/
- component?: string | ElementType
+ className?: string
}
-export const CDropdownMenu: FC = ({
- children,
- className,
- component: Component = 'ul',
- ...rest
-}) => {
- const {
- alignment,
- autoClose,
- dark,
- direction,
- dropdownToggleRef,
- placement,
- popper,
- visible,
- setVisible,
- } = useContext(CDropdownContext)
-
- const dropdownMenuRef = useRef(null)
-
- useEffect(() => {
- visible && window.addEventListener('mouseup', handleMouseUp)
- visible && window.addEventListener('keyup', handleKeyup)
-
- return () => {
- window.removeEventListener('mouseup', handleMouseUp)
- window.removeEventListener('keyup', handleKeyup)
- }
- }, [visible])
-
- const handleKeyup = (event: KeyboardEvent) => {
- if (autoClose === false) {
- return
- }
-
- if (event.key === 'Escape') {
- setVisible(false)
- }
- }
-
- const handleMouseUp = (event: Event) => {
- if (dropdownToggleRef && dropdownToggleRef.current.contains(event.target as HTMLElement)) {
- return
+export const CDropdownMenu: PolymorphicRefForwardingComponent<'ul', CDropdownMenuProps> =
+ forwardRef(
+ ({ children, as: Component = 'ul', className, ...rest }, ref) => {
+ const { alignment, container, dark, dropdownMenuRef, popper, portal, visible } =
+ useContext(CDropdownContext)
+
+ const forkedRef = useForkedRef(ref, dropdownMenuRef)
+
+ return (
+
+
+ {Component === 'ul'
+ ? React.Children.map(children, (child, index) => {
+ if (React.isValidElement(child)) {
+ return - {React.cloneElement(child)}
+ }
+ return
+ })
+ : children}
+
+
+ )
}
-
- if (
- autoClose === true ||
- (autoClose === 'inside' && dropdownMenuRef.current?.contains(event.target as HTMLElement)) ||
- (autoClose === 'outside' && !dropdownMenuRef.current?.contains(event.target as HTMLElement))
- ) {
- setTimeout(() => setVisible(false), 1)
- return
- }
- }
-
- let _placement: Placements = placement
-
- if (direction === 'dropup') {
- _placement = 'top-start'
- }
-
- if (direction === 'dropend') {
- _placement = 'right-start'
- }
-
- if (direction === 'dropstart') {
- _placement = 'left-start'
- }
-
- if (alignment === 'end') {
- _placement = 'bottom-end'
- }
-
- const alignmentClassNames = (alignment: Alignments) => {
- const classNames: string[] = []
- if (typeof alignment === 'object') {
- Object.keys(alignment).map((key) => {
- classNames.push(`dropdown-menu${key === 'xs' ? '' : `-${key}`}-${alignment[key]}`)
- })
- }
-
- if (typeof alignment === 'string') {
- classNames.push(`dropdown-menu-${alignment}`)
- }
-
- return classNames
- }
-
- const _className = classNames(
- 'dropdown-menu',
- {
- 'dropdown-menu-dark': dark,
- show: visible,
- },
- alignment && alignmentClassNames(alignment),
- className,
)
- const dropdownMenuComponent = (style?: React.CSSProperties, ref?: React.Ref) => {
- return (
-
- {Component === 'ul'
- ? React.Children.map(children, (child, index) => {
- if (React.isValidElement(child)) {
- return - {React.cloneElement(child)}
- }
- return
- })
- : children}
-
- )
- }
-
- return popper && visible ? (
-
- {({ ref, style }) => dropdownMenuComponent(style, ref)}
-
- ) : (
- dropdownMenuComponent()
- )
-}
-
CDropdownMenu.propTypes = {
+ as: PropTypes.elementType,
children: PropTypes.node,
className: PropTypes.string,
- component: PropTypes.elementType,
}
CDropdownMenu.displayName = 'CDropdownMenu'
diff --git a/packages/coreui-react/src/components/dropdown/CDropdownToggle.tsx b/packages/coreui-react/src/components/dropdown/CDropdownToggle.tsx
index 6e20d582..ee8dfe82 100644
--- a/packages/coreui-react/src/components/dropdown/CDropdownToggle.tsx
+++ b/packages/coreui-react/src/components/dropdown/CDropdownToggle.tsx
@@ -1,14 +1,12 @@
import React, { FC, useContext } from 'react'
import PropTypes from 'prop-types'
import classNames from 'classnames'
-import { Reference } from 'react-popper'
-
-import { useForkedRef } from '../../utils/hooks'
-
-import { Triggers, triggerPropType } from '../Types'
import { CButton, CButtonProps } from '../button/CButton'
-import { CDropdownContext } from './CDropdown'
+import { CDropdownContext } from './CDropdownContext'
+
+import { triggerPropType } from '../../props'
+import type { Triggers } from '../../types'
export interface CDropdownToggleProps extends Omit {
/**
@@ -19,6 +17,12 @@ export interface CDropdownToggleProps extends Omit {
* Create a custom toggler which accepts any content.
*/
custom?: boolean
+ /**
+ * If a dropdown `variant` is set to `nav-item` then render the toggler as a link instead of a button.
+ *
+ * @since 5.0.0
+ */
+ navLink?: boolean
/**
* Similarly, create split button dropdowns with virtually the same markup as single button dropdowns, but with the addition of `.dropdown-toggle-split` className for proper spacing around the dropdown caret.
*/
@@ -36,19 +40,12 @@ export const CDropdownToggle: FC = ({
caret = true,
custom,
className,
+ navLink = true,
split,
trigger = 'click',
...rest
}) => {
- const { dropdownToggleRef, popper, variant, visible, setVisible } = useContext(CDropdownContext)
- const _className = classNames(
- {
- 'dropdown-toggle': caret,
- 'dropdown-toggle-split': split,
- 'nav-link': variant === 'nav-item',
- },
- className,
- )
+ const { dropdownToggleRef, variant, visible, setVisible } = useContext(CDropdownContext)
const triggers = {
...((trigger === 'click' || trigger.includes('click')) && {
@@ -64,42 +61,49 @@ export const CDropdownToggle: FC = ({
}
const togglerProps = {
- className: _className,
+ className: classNames(
+ {
+ 'nav-link': variant === 'nav-item' && navLink,
+ 'dropdown-toggle': caret,
+ 'dropdown-toggle-split': split,
+ show: visible,
+ },
+ className
+ ),
'aria-expanded': visible,
...(!rest.disabled && { ...triggers }),
- ...triggers,
}
- // We use any because Toggler can be `a` as well as `button`.
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
- const Toggler = (ref?: React.Ref) => {
- return custom && React.isValidElement(children) ? (
- <>
- {React.cloneElement(children, {
- 'aria-expanded': visible,
- ...(!rest.disabled && { ...triggers }),
- ref: useForkedRef(ref, dropdownToggleRef),
- })}
-
- ) : variant === 'nav-item' ? (
-
- {children}
-
- ) : (
-
+ const Toggler = () => {
+ if (custom && React.isValidElement(children)) {
+ return (
+ <>
+ {React.cloneElement(children as React.ReactElement, {
+ 'aria-expanded': visible,
+ ...(!rest.disabled && { ...triggers }),
+ ref: dropdownToggleRef,
+ })}
+
+ )
+ }
+
+ if (variant === 'nav-item' && navLink) {
+ return (
+
+ {children}
+
+ )
+ }
+
+ return (
+
{children}
{split && Toggle Dropdown}
)
}
- return popper ? {({ ref }) => Toggler(ref)} : Toggler(dropdownToggleRef)
+ return
}
CDropdownToggle.propTypes = {
diff --git a/packages/coreui-react/src/components/dropdown/__tests__/CDropdown.spec.tsx b/packages/coreui-react/src/components/dropdown/__tests__/CDropdown.spec.tsx
index 3abf37ce..12b6e3cd 100644
--- a/packages/coreui-react/src/components/dropdown/__tests__/CDropdown.spec.tsx
+++ b/packages/coreui-react/src/components/dropdown/__tests__/CDropdown.spec.tsx
@@ -1,6 +1,6 @@
import * as React from 'react'
-import { render, screen, fireEvent } from '@testing-library/react'
-import '@testing-library/jest-dom/extend-expect'
+import { render, screen, fireEvent, waitFor } from '@testing-library/react'
+import '@testing-library/jest-dom'
import {
CDropdown,
CDropdownToggle,
@@ -9,7 +9,7 @@ import {
CDropdownItemPlain,
CDropdownHeader,
CDropdownDivider,
-} from '../../../index'
+} from '../index'
test('loads and displays CDropdown component', async () => {
const { container } = render(Test)
@@ -21,7 +21,7 @@ test('CDropdown customize', async () => {
{
expect(container.firstChild).toHaveClass('nav-item')
expect(container.firstChild).toHaveClass('dropdown')
expect(container.firstChild).toHaveClass('dropstart')
- expect(container.firstChild).toHaveClass('show')
})
-test('CDropdown change visible prop', async () => {
- jest.useFakeTimers()
- const { rerender } = render(Test)
- expect(screen.getByText('Test')).not.toHaveClass('show')
- rerender(Test)
- jest.runAllTimers()
- expect(screen.getByText('Test')).toHaveClass('show')
- rerender(Test)
- expect(screen.getByText('Test')).not.toHaveClass('show')
- jest.runAllTimers()
- jest.useRealTimers()
-})
+// test('CDropdown change visible prop', async () => {
+// jest.useFakeTimers()
+// const { rerender } = render(Test)
+// expect(screen.getByText('Test')).not.toHaveClass('show')
+// rerender(Test)
+// jest.runAllTimers()
+// expect(screen.getByText('Test')).toHaveClass('show')
+// rerender(Test)
+// expect(screen.getByText('Test')).not.toHaveClass('show')
+// jest.runAllTimers()
+// jest.useRealTimers()
+// })
-test('CDropdown click', async () => {
- jest.useFakeTimers()
+test('CDropdown opens on toggle click and closes on clicking outside', async () => {
render(
-
- Test
-
- A
- B
-
- ,
+
+ {/* External element to simulate clicking outside the dropdown */}
+
External Area
+
+ {/* The dropdown component */}
+
+ Test
+
+ A
+ B
+
+
+
-
Test
@@ -17,14 +17,13 @@ exports[`CDropdown example 1`] = `
>
-
-