( ({ className, ...rest }, ref) => { return

- }, + } ) CCarouselCaption.propTypes = { diff --git a/packages/coreui-react/src/components/carousel/CCarouselContext.ts b/packages/coreui-react/src/components/carousel/CCarouselContext.ts new file mode 100644 index 00000000..6e21932b --- /dev/null +++ b/packages/coreui-react/src/components/carousel/CCarouselContext.ts @@ -0,0 +1,8 @@ +import { createContext } from 'react' + +export interface CCarouselContextProps { + setAnimating: (a: boolean) => void + setCustomInterval: (a: boolean | number) => void +} + +export const CCarouselContext = createContext({} as CCarouselContextProps) \ No newline at end of file diff --git a/packages/coreui-react/src/components/carousel/CCarouselItem.tsx b/packages/coreui-react/src/components/carousel/CCarouselItem.tsx index 3b8744cc..90f4f6ca 100644 --- a/packages/coreui-react/src/components/carousel/CCarouselItem.tsx +++ b/packages/coreui-react/src/components/carousel/CCarouselItem.tsx @@ -3,7 +3,9 @@ import PropTypes from 'prop-types' import classNames from 'classnames' import { useForkedRef } from '../../hooks' -import { CCarouselContext } from './CCarousel' + +import { CCarouselContext } from './CCarouselContext' + export interface CCarouselItemProps extends HTMLAttributes { /** * @ignore @@ -29,7 +31,7 @@ export const CCarouselItem = forwardRef( const carouselItemRef = useRef(null) const forkedRef = useForkedRef(ref, carouselItemRef) - const prevActive = useRef() + const prevActive = useRef(undefined) const [directionClassName, setDirectionClassName] = useState() const [orderClassName, setOrderClassName] = useState() const [activeClassName, setActiveClassName] = useState(active && 'active') @@ -101,7 +103,7 @@ export const CCarouselItem = forwardRef( activeClassName, directionClassName, orderClassName, - className, + className )} ref={forkedRef} {...rest} @@ -109,7 +111,7 @@ export const CCarouselItem = 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 4abb647b..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 { render, fireEvent, getByText } from '@testing-library/react' import '@testing-library/jest-dom' -import { CCarousel, CCarouselCaption, CCarouselItem } from '../../../index' +import { CCarousel, CCarouselCaption, CCarouselItem } from '../index' test('loads and displays CCarousel component', async () => { const { container } = render( 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 a70c90ea..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' -import { CCloseButton } from '../../../index' +import { CCloseButton } from '../index' test('loads and displays CCloseButton component', async () => { const { container } = render() diff --git a/packages/coreui-react/src/components/collapse/__tests__/CCollapse.spec.tsx b/packages/coreui-react/src/components/collapse/__tests__/CCollapse.spec.tsx index 7d701afe..faee720d 100644 --- a/packages/coreui-react/src/components/collapse/__tests__/CCollapse.spec.tsx +++ b/packages/coreui-react/src/components/collapse/__tests__/CCollapse.spec.tsx @@ -1,7 +1,7 @@ import React from 'react' -import { render, screen } from '@testing-library/react' +import { render, screen, act } from '@testing-library/react' import '@testing-library/jest-dom' -import { CCollapse } from '../../../index' +import { CCollapse } from '../index' test('loads and displays CCollapse component', async () => { const { container } = render(Test) @@ -15,26 +15,45 @@ 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') - await new Promise((r) => setTimeout(r, 1000)) + + 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') - await new Promise((r) => setTimeout(r, 1000)) + + 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/dropdown/CDropdown.tsx b/packages/coreui-react/src/components/dropdown/CDropdown.tsx index 076c1812..2d8a7bbd 100644 --- a/packages/coreui-react/src/components/dropdown/CDropdown.tsx +++ b/packages/coreui-react/src/components/dropdown/CDropdown.tsx @@ -1,15 +1,18 @@ import React, { - createContext, ElementType, forwardRef, HTMLAttributes, - RefObject, + useCallback, useEffect, + useMemo, useRef, useState, } from 'react' import PropTypes from 'prop-types' import classNames from 'classnames' +import type { Options } from '@popperjs/core' + +import { CDropdownContext } from './CDropdownContext' import { PolymorphicRefForwardingComponent } from '../../helpers' import { useForkedRef, usePopper } from '../../hooks' @@ -22,91 +25,152 @@ 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 + /** - * Component used for the root node. Either a string to use a HTML element or a component. + * Determines the root node component (native HTML element or a custom React component) for the React Dropdown. */ as?: ElementType + /** - * 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. + * 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 + /** - * 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`. + * 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 */ 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 + /** - * Sets a specified direction and location of the dropdown menu. + * Specifies the direction of the React Dropdown. */ direction?: 'center' | 'dropup' | 'dropup-center' | 'dropend' | 'dropstart' + /** - * Offset of the dropdown menu relative to its target. + * Defines x and y offsets ([x, y]) for the React Dropdown Menu relative to its target. + * + * @example + * // Offset the menu 10px in X and 5px in Y direction + * + * ... + * */ 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 + /** - * Generates dropdown menu using createPortal. + * 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 - dropdownMenuRef: RefObject - setVisible: React.Dispatch> - portal: boolean -} - -export const CDropdownContext = createContext({} as ContextProps) - export const CDropdown: PolymorphicRefForwardingComponent<'div', CDropdownProps> = forwardRef< HTMLDivElement | HTMLLIElement, CDropdownProps @@ -126,79 +190,105 @@ export const CDropdown: PolymorphicRefForwardingComponent<'div', CDropdownProps> onShow, placement = 'bottom-start', popper = true, + popperConfig, portal = false, variant = 'btn-group', visible = false, ...rest }, - ref, + ref ) => { const dropdownRef = useRef(null) - // eslint-disable-next-line @typescript-eslint/no-explicit-any - const dropdownToggleRef = useRef(null) const dropdownMenuRef = useRef(null) const forkedRef = useForkedRef(ref, dropdownRef) + const [dropdownToggleElement, setDropdownToggleElement] = useState(null) const [_visible, setVisible] = useState(visible) const { initPopper, destroyPopper } = usePopper() - const Component = variant === 'nav-item' ? 'li' : as - - // Disable popper if responsive aligment is set. - if (typeof alignment === 'object') { - popper = false - } + const dropdownToggleRef = useCallback((node: HTMLElement | null) => { + if (node) { + setDropdownToggleElement(node) + } + }, []) - const contextValues = { - alignment, - container, - dark, - dropdownToggleRef, - dropdownMenuRef, - popper, - portal, - variant, - visible: _visible, - setVisible, - } + const allowPopperUse = popper && typeof alignment !== 'object' + const Component = variant === 'nav-item' ? 'li' : as - const popperConfig = { - modifiers: [ - { - name: 'offset', - options: { - offset: offset, + const computedPopperConfig: Partial = useMemo(() => { + const defaultPopperConfig = { + modifiers: [ + { + name: 'offset', + options: { + offset, + }, }, - }, - ], - placement: getPlacement(placement, direction, alignment, isRTL(dropdownMenuRef.current)), - } + ], + placement: getPlacement(placement, direction, alignment, isRTL(dropdownMenuRef.current)), + } + + return { + ...defaultPopperConfig, + ...(typeof popperConfig === 'function' ? popperConfig(defaultPopperConfig) : popperConfig), + } + }, [offset, placement, direction, alignment, popperConfig]) useEffect(() => { - setVisible(visible) + if (visible) { + handleShow() + } else { + handleHide() + } }, [visible]) useEffect(() => { - if (_visible && dropdownToggleRef.current && dropdownMenuRef.current) { - dropdownToggleRef.current.focus() - popper && initPopper(dropdownToggleRef.current, dropdownMenuRef.current, popperConfig) + const toggleElement = dropdownToggleElement + const menuElement = dropdownMenuRef.current + if (allowPopperUse && menuElement && toggleElement && _visible) { + initPopper(toggleElement, menuElement, computedPopperConfig) + } + }, [dropdownToggleElement]) + + const handleShow = () => { + const toggleElement = dropdownToggleElement + const menuElement = dropdownMenuRef.current + + if (toggleElement && menuElement) { + setVisible(true) + + if (allowPopperUse) { + initPopper(toggleElement, menuElement, computedPopperConfig) + } + + toggleElement.focus() + toggleElement.addEventListener('keydown', handleKeydown) + menuElement.addEventListener('keydown', handleKeydown) + window.addEventListener('mouseup', handleMouseUp) window.addEventListener('keyup', handleKeyup) - dropdownToggleRef.current.addEventListener('keydown', handleKeydown) - dropdownMenuRef.current.addEventListener('keydown', handleKeydown) - onShow && onShow() + + onShow?.() } + } - return () => { - popper && destroyPopper() - window.removeEventListener('mouseup', handleMouseUp) - window.removeEventListener('keyup', handleKeyup) - dropdownToggleRef.current && - dropdownToggleRef.current.removeEventListener('keydown', handleKeydown) - dropdownMenuRef.current && - dropdownMenuRef.current.removeEventListener('keydown', handleKeydown) - onHide && onHide() + const handleHide = () => { + setVisible(false) + + const toggleElement = dropdownToggleElement + const menuElement = dropdownMenuRef.current + + if (allowPopperUse) { + destroyPopper() } - }, [_visible]) + + toggleElement?.removeEventListener('keydown', handleKeydown) + menuElement?.removeEventListener('keydown', handleKeydown) + + window.removeEventListener('mouseup', handleMouseUp) + window.removeEventListener('keyup', handleKeyup) + + onHide?.() + } const handleKeydown = (event: KeyboardEvent) => { if ( @@ -209,7 +299,7 @@ export const CDropdown: PolymorphicRefForwardingComponent<'div', CDropdownProps> event.preventDefault() const target = event.target as HTMLElement const items: HTMLElement[] = Array.from( - dropdownMenuRef.current.querySelectorAll('.dropdown-item:not(.disabled):not(:disabled)'), + dropdownMenuRef.current.querySelectorAll('.dropdown-item:not(.disabled):not(:disabled)') ) getNextActiveElement(items, target, event.key === 'ArrowDown', true).focus() } @@ -221,16 +311,16 @@ export const CDropdown: PolymorphicRefForwardingComponent<'div', CDropdownProps> } if (event.key === 'Escape') { - setVisible(false) + handleHide() } } const handleMouseUp = (event: Event) => { - if (!dropdownToggleRef.current || !dropdownMenuRef.current) { + if (!dropdownToggleElement || !dropdownMenuRef.current) { return } - if (dropdownToggleRef.current.contains(event.target as HTMLElement)) { + if (dropdownToggleElement.contains(event.target as HTMLElement)) { return } @@ -239,11 +329,25 @@ export const CDropdown: PolymorphicRefForwardingComponent<'div', CDropdownProps> (autoClose === 'inside' && dropdownMenuRef.current.contains(event.target as HTMLElement)) || (autoClose === 'outside' && !dropdownMenuRef.current.contains(event.target as HTMLElement)) ) { - setTimeout(() => setVisible(false), 1) + setTimeout(() => handleHide(), 1) return } } + const contextValues = { + alignment, + container, + dark, + dropdownMenuRef, + dropdownToggleRef, + handleHide, + handleShow, + popper: allowPopperUse, + portal, + variant, + visible: _visible, + } + return ( {variant === 'input-group' ? ( @@ -258,7 +362,7 @@ export const CDropdown: PolymorphicRefForwardingComponent<'div', CDropdownProps> [`${direction}`]: direction && direction !== 'center' && direction !== 'dropup-center', }, - className, + className )} {...rest} ref={forkedRef} @@ -268,7 +372,7 @@ export const CDropdown: PolymorphicRefForwardingComponent<'div', CDropdownProps> )} ) - }, + } ) const alignmentDirection = PropTypes.oneOf(['start', 'end']) @@ -297,6 +401,7 @@ CDropdown.propTypes = { 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..d46b69d2 --- /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 + dropdownMenuRef: RefObject + dropdownToggleRef: (node: HTMLElement | null) => void + handleHide?: () => void + handleShow?: () => void + 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 c9fa58de..57b86e1e 100644 --- a/packages/coreui-react/src/components/dropdown/CDropdownDivider.tsx +++ b/packages/coreui-react/src/components/dropdown/CDropdownDivider.tsx @@ -12,7 +12,7 @@ export interface CDropdownDividerProps extends HTMLAttributes { export const CDropdownDivider = forwardRef( ({ className, ...rest }, ref) => { return

- }, + } ) CDropdownDivider.propTypes = { diff --git a/packages/coreui-react/src/components/dropdown/CDropdownHeader.tsx b/packages/coreui-react/src/components/dropdown/CDropdownHeader.tsx index 0315a0eb..89e53673 100644 --- a/packages/coreui-react/src/components/dropdown/CDropdownHeader.tsx +++ b/packages/coreui-react/src/components/dropdown/CDropdownHeader.tsx @@ -23,7 +23,7 @@ export const CDropdownHeader: PolymorphicRefForwardingComponent<'h6', CDropdownH {children} ) - }, + } ) CDropdownHeader.propTypes = { diff --git a/packages/coreui-react/src/components/dropdown/CDropdownItemPlain.tsx b/packages/coreui-react/src/components/dropdown/CDropdownItemPlain.tsx index 5b22bd40..bc4ae0bb 100644 --- a/packages/coreui-react/src/components/dropdown/CDropdownItemPlain.tsx +++ b/packages/coreui-react/src/components/dropdown/CDropdownItemPlain.tsx @@ -25,7 +25,7 @@ export const CDropdownItemPlain: PolymorphicRefForwardingComponent< {children} ) - }, + } ) CDropdownItemPlain.propTypes = { diff --git a/packages/coreui-react/src/components/dropdown/CDropdownMenu.tsx b/packages/coreui-react/src/components/dropdown/CDropdownMenu.tsx index 35a4e98a..59442d63 100644 --- a/packages/coreui-react/src/components/dropdown/CDropdownMenu.tsx +++ b/packages/coreui-react/src/components/dropdown/CDropdownMenu.tsx @@ -2,8 +2,8 @@ import React, { ElementType, forwardRef, HTMLAttributes, useContext } from 'reac import PropTypes from 'prop-types' import classNames from 'classnames' -import { CDropdownContext } from './CDropdown' import { CConditionalPortal } from '../conditional-portal' +import { CDropdownContext } from './CDropdownContext' import { PolymorphicRefForwardingComponent } from '../../helpers' import { useForkedRef } from '../../hooks' @@ -38,11 +38,10 @@ export const CDropdownMenu: PolymorphicRefForwardingComponent<'ul', CDropdownMen show: visible, }, alignment && getAlignmentClassNames(alignment), - className, + className )} ref={forkedRef} role="menu" - aria-hidden={!visible} {...(!popper && { 'data-coreui-popper': 'static' })} {...(dark && { 'data-coreui-theme': 'dark' })} {...rest} @@ -58,7 +57,7 @@ export const CDropdownMenu: PolymorphicRefForwardingComponent<'ul', CDropdownMen ) - }, + } ) CDropdownMenu.propTypes = { diff --git a/packages/coreui-react/src/components/dropdown/CDropdownToggle.tsx b/packages/coreui-react/src/components/dropdown/CDropdownToggle.tsx index 5689c0f4..def263e5 100644 --- a/packages/coreui-react/src/components/dropdown/CDropdownToggle.tsx +++ b/packages/coreui-react/src/components/dropdown/CDropdownToggle.tsx @@ -3,8 +3,7 @@ import PropTypes from 'prop-types' import classNames from 'classnames' import { CButton, CButtonProps } from '../button/CButton' - -import { CDropdownContext } from './CDropdown' +import { CDropdownContext } from './CDropdownContext' import { triggerPropType } from '../../props' import type { Triggers } from '../../types' @@ -46,18 +45,24 @@ export const CDropdownToggle: FC = ({ trigger = 'click', ...rest }) => { - const { dropdownToggleRef, variant, visible, setVisible } = useContext(CDropdownContext) + const { dropdownToggleRef, handleHide, handleShow, variant, visible } = + useContext(CDropdownContext) const triggers = { ...((trigger === 'click' || trigger.includes('click')) && { onClick: (event: React.MouseEvent) => { event.preventDefault() - setVisible(!visible) + + if (visible) { + handleHide?.() + } else { + handleShow?.() + } }, }), ...((trigger === 'focus' || trigger.includes('focus')) && { - onFocus: () => setVisible(true), - onBlur: () => setVisible(false), + onFocus: () => handleShow?.(), + onBlur: () => handleHide?.(), }), } @@ -69,42 +74,38 @@ export const CDropdownToggle: FC = ({ 'dropdown-toggle-split': split, show: visible, }, - className, + className ), 'aria-expanded': visible, ...(!rest.disabled && { ...triggers }), } - 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} - - ) - } + 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} - {split && Toggle Dropdown} - + ) } - return + return ( + + {children} + {split && Toggle Dropdown} + + ) } 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 d45f8c9d..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,5 +1,5 @@ import * as React from 'react' -import { render, screen, fireEvent } from '@testing-library/react' +import { render, screen, fireEvent, waitFor } from '@testing-library/react' import '@testing-library/jest-dom' import { CDropdown, @@ -9,7 +9,7 @@ import { CDropdownItemPlain, CDropdownHeader, CDropdownDivider, -} from '../../../index' +} from '../index' test('loads and displays CDropdown component', async () => { const { container } = render(Test) @@ -52,26 +52,50 @@ test('CDropdown customize', async () => { // jest.useRealTimers() // }) -test('CDropdown click', async () => { +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 + + +

, ) - expect(screen.getByText('Test')).not.toHaveClass('show') - const el = screen.getByText('Test') - if (el !== null) { - fireEvent.click(el) //click on element - } - jest.runAllTimers() - expect(screen.getByText('Test').closest('div')).toHaveClass('show') - fireEvent.mouseUp(document.body) //click outside - await new Promise((r) => setTimeout(r, 1000)) - expect(screen.getByText('Test').closest('div')).not.toHaveClass('show') + + // Ensure the dropdown is initially closed + const toggleButton = screen.getByText('Test') + expect(toggleButton).toBeInTheDocument() + + // Assuming the 'show' class is applied to the CDropdownMenu + const dropdownMenu = screen.getByRole('menu', { hidden: true }) // Adjust role if different + expect(dropdownMenu).not.toHaveClass('show') + + // Click on the toggle to open the dropdown + fireEvent.click(toggleButton) + + // Wait for the dropdown menu to become visible + await waitFor(() => { + const openedMenu = screen.getByRole('menu') // Adjust role if different + expect(openedMenu).toBeVisible() + expect(openedMenu).toHaveClass('show') + }) + + // Click outside the dropdown to close it + const externalArea = screen.getByTestId('external-area') + fireEvent.mouseUp(externalArea) + + // Wait for the dropdown menu to be hidden + await waitFor(() => { + const closedMenu = screen.getByRole('menu', { hidden: true }) // Adjust role if different + expect(closedMenu).not.toHaveClass('show') + }) }) test('CDropdown example', async () => { diff --git a/packages/coreui-react/src/components/dropdown/__tests__/CDropdownDivider.spec.tsx b/packages/coreui-react/src/components/dropdown/__tests__/CDropdownDivider.spec.tsx index bc5f6667..98b9de48 100644 --- a/packages/coreui-react/src/components/dropdown/__tests__/CDropdownDivider.spec.tsx +++ b/packages/coreui-react/src/components/dropdown/__tests__/CDropdownDivider.spec.tsx @@ -1,7 +1,7 @@ import * as React from 'react' import { render } from '@testing-library/react' import '@testing-library/jest-dom' -import { CDropdownDivider } from '../../../index' +import { CDropdownDivider } from '../index' test('loads and displays CDropdownDivider component', async () => { const { container } = render() diff --git a/packages/coreui-react/src/components/dropdown/__tests__/CDropdownHeader.spec.tsx b/packages/coreui-react/src/components/dropdown/__tests__/CDropdownHeader.spec.tsx index fe11ca28..602b8d26 100644 --- a/packages/coreui-react/src/components/dropdown/__tests__/CDropdownHeader.spec.tsx +++ b/packages/coreui-react/src/components/dropdown/__tests__/CDropdownHeader.spec.tsx @@ -1,7 +1,7 @@ import * as React from 'react' import { render } from '@testing-library/react' import '@testing-library/jest-dom' -import { CDropdownHeader } from '../../../index' +import { CDropdownHeader } from '../index' test('loads and displays CDropdownHeader component', async () => { const { container } = render(Test) diff --git a/packages/coreui-react/src/components/dropdown/__tests__/CDropdownItem.spec.tsx b/packages/coreui-react/src/components/dropdown/__tests__/CDropdownItem.spec.tsx index 88091d6f..f484cc2f 100644 --- a/packages/coreui-react/src/components/dropdown/__tests__/CDropdownItem.spec.tsx +++ b/packages/coreui-react/src/components/dropdown/__tests__/CDropdownItem.spec.tsx @@ -1,7 +1,7 @@ import * as React from 'react' import { render } from '@testing-library/react' import '@testing-library/jest-dom' -import { CDropdownItem } from '../../../index' +import { CDropdownItem } from '../index' test('loads and displays CDropdownItem component', async () => { const { container } = render(Test) diff --git a/packages/coreui-react/src/components/dropdown/__tests__/CDropdownItemPlain.spec.tsx b/packages/coreui-react/src/components/dropdown/__tests__/CDropdownItemPlain.spec.tsx index 8407502c..b1aafd07 100644 --- a/packages/coreui-react/src/components/dropdown/__tests__/CDropdownItemPlain.spec.tsx +++ b/packages/coreui-react/src/components/dropdown/__tests__/CDropdownItemPlain.spec.tsx @@ -1,7 +1,7 @@ import * as React from 'react' import { render } from '@testing-library/react' import '@testing-library/jest-dom' -import { CDropdownItemPlain } from '../../../index' +import { CDropdownItemPlain } from '../index' test('loads and displays CDropdownItemPlain component', async () => { const { container } = render(Test) diff --git a/packages/coreui-react/src/components/dropdown/__tests__/CDropdownMenu.spec.tsx b/packages/coreui-react/src/components/dropdown/__tests__/CDropdownMenu.spec.tsx index 73300334..8b630833 100644 --- a/packages/coreui-react/src/components/dropdown/__tests__/CDropdownMenu.spec.tsx +++ b/packages/coreui-react/src/components/dropdown/__tests__/CDropdownMenu.spec.tsx @@ -1,7 +1,7 @@ import * as React from 'react' import { render } from '@testing-library/react' import '@testing-library/jest-dom' -import { CDropdown, CDropdownMenu } from '../../../index' +import { CDropdown, CDropdownMenu } from '../index' test('loads and displays CDropdownMenu component', async () => { const { container } = render(Test) diff --git a/packages/coreui-react/src/components/dropdown/__tests__/CDropdownToggle.spec.tsx b/packages/coreui-react/src/components/dropdown/__tests__/CDropdownToggle.spec.tsx index 5d9db7e7..341c1048 100644 --- a/packages/coreui-react/src/components/dropdown/__tests__/CDropdownToggle.spec.tsx +++ b/packages/coreui-react/src/components/dropdown/__tests__/CDropdownToggle.spec.tsx @@ -1,7 +1,7 @@ import * as React from 'react' import { render } from '@testing-library/react' import '@testing-library/jest-dom' -import { CDropdownToggle } from '../../../index' +import { CDropdownToggle } from '../index' test('loads and displays CDropdownToggle component', async () => { const { container } = render(Test) diff --git a/packages/coreui-react/src/components/dropdown/__tests__/__snapshots__/CDropdown.spec.tsx.snap b/packages/coreui-react/src/components/dropdown/__tests__/__snapshots__/CDropdown.spec.tsx.snap index f6741bfd..ed01b1d9 100644 --- a/packages/coreui-react/src/components/dropdown/__tests__/__snapshots__/CDropdown.spec.tsx.snap +++ b/packages/coreui-react/src/components/dropdown/__tests__/__snapshots__/CDropdown.spec.tsx.snap @@ -24,7 +24,6 @@ exports[`CDropdown example 1`] = ` Test

First slide label

Second slide label

Third slide label

First slide label

Second slide label

Third slide label

React Modal title