diff --git a/README.md b/README.md index b6a3fc41..467a62fb 100644 --- a/README.md +++ b/README.md @@ -46,7 +46,7 @@ Several quick start options are available: -- [Download the latest release](https://github.com/coreui/coreui-react/archive/v5.5.0.zip) +- [Download the latest release](https://github.com/coreui/coreui-react/archive/v5.7.0.zip) - Clone the repo: `git clone https://github.com/coreui/coreui-react.git` - Install with [npm](https://www.npmjs.com/): `npm install @coreui/react` - Install with [yarn](https://yarnpkg.com/): `yarn add @coreui/react` diff --git a/lerna.json b/lerna.json index 8b1ec4d7..e456a603 100644 --- a/lerna.json +++ b/lerna.json @@ -1,6 +1,6 @@ { "npmClient": "yarn", "packages": ["packages/*"], - "version": "5.5.0", + "version": "5.7.0", "$schema": "node_modules/lerna/schemas/lerna-schema.json" } diff --git a/package.json b/package.json index 6f1a9ffd..e51bf9e0 100644 --- a/package.json +++ b/package.json @@ -22,18 +22,18 @@ "test:update": "npm-run-all charts:test:update icons:test:update lib:test:update" }, "devDependencies": { - "@typescript-eslint/parser": "^8.23.0", - "eslint": "^9.19.0", - "eslint-config-prettier": "^10.0.1", - "eslint-plugin-prettier": "^5.2.3", - "eslint-plugin-react": "^7.37.4", - "eslint-plugin-react-hooks": "^5.1.0", - "eslint-plugin-unicorn": "^56.0.1", - "globals": "^15.14.0", - "lerna": "^8.1.9", + "@typescript-eslint/parser": "^8.32.1", + "eslint": "^9.27.0", + "eslint-config-prettier": "^10.1.5", + "eslint-plugin-prettier": "^5.4.0", + "eslint-plugin-react": "^7.37.5", + "eslint-plugin-react-hooks": "^5.2.0", + "eslint-plugin-unicorn": "^59.0.1", + "globals": "^16.1.0", + "lerna": "^8.2.2", "npm-run-all": "^4.1.5", - "prettier": "^3.4.2", - "typescript-eslint": "^8.23.0" + "prettier": "^3.5.3", + "typescript-eslint": "^8.32.1" }, "overrides": { "gatsby-remark-external-links": { diff --git a/packages/coreui-react/README.md b/packages/coreui-react/README.md index 55bcc2e7..c98015a2 100644 --- a/packages/coreui-react/README.md +++ b/packages/coreui-react/README.md @@ -46,7 +46,7 @@ Several quick start options are available: -- [Download the latest release](https://github.com/coreui/coreui-react/archive/v5.5.0.zip) +- [Download the latest release](https://github.com/coreui/coreui-react/archive/v5.7.0.zip) - Clone the repo: `git clone https://github.com/coreui/coreui-react.git` - Install with [npm](https://www.npmjs.com/): `npm install @coreui/react` - Install with [yarn](https://yarnpkg.com/): `yarn add @coreui/react` diff --git a/packages/coreui-react/package.json b/packages/coreui-react/package.json index bd2ce657..6952b2c9 100644 --- a/packages/coreui-react/package.json +++ b/packages/coreui-react/package.json @@ -1,6 +1,6 @@ { "name": "@coreui/react", - "version": "5.5.0", + "version": "5.7.0", "description": "UI Components Library for React.js", "keywords": [ "react", @@ -41,21 +41,21 @@ "test:update": "jest --coverage --updateSnapshot" }, "dependencies": { - "@coreui/coreui": "^5.2.0", + "@coreui/coreui": "^5.4.0", "@popperjs/core": "^2.11.8", "prop-types": "^15.8.1" }, "devDependencies": { - "@rollup/plugin-commonjs": "^28.0.2", - "@rollup/plugin-node-resolve": "^16.0.0", + "@rollup/plugin-commonjs": "^28.0.3", + "@rollup/plugin-node-resolve": "^16.0.1", "@rollup/plugin-typescript": "^12.1.2", "@testing-library/dom": "^10.4.0", "@testing-library/jest-dom": "^6.6.3", - "@testing-library/react": "^16.2.0", + "@testing-library/react": "^16.3.0", "@types/jest": "^29.5.14", - "@types/prop-types": "15.7.13", - "@types/react": "^18.3.18", - "@types/react-dom": "^18.3.5", + "@types/prop-types": "15.7.14", + "@types/react": "^19.1.4", + "@types/react-dom": "^19.1.5", "@types/react-transition-group": "^4.4.12", "classnames": "^2.5.1", "cross-env": "^7.0.3", @@ -64,10 +64,10 @@ "react": "^18.3.1", "react-dom": "^18.3.1", "react-transition-group": "^4.4.5", - "rollup": "^4.34.4", - "ts-jest": "^29.2.5", + "rollup": "^4.41.0", + "ts-jest": "^29.3.4", "tslib": "^2.8.1", - "typescript": "^5.7.3" + "typescript": "^5.8.3" }, "peerDependencies": { "react": ">=17", diff --git a/packages/coreui-react/src/components/accordion/CAccordion.tsx b/packages/coreui-react/src/components/accordion/CAccordion.tsx index 9fe4c634..a3a275ae 100644 --- a/packages/coreui-react/src/components/accordion/CAccordion.tsx +++ b/packages/coreui-react/src/components/accordion/CAccordion.tsx @@ -1,7 +1,9 @@ -import React, { createContext, forwardRef, HTMLAttributes, useState } from 'react' +import React, { forwardRef, HTMLAttributes, useState } from 'react' import PropTypes from 'prop-types' import classNames from 'classnames' +import { CAccordionContext } from './CAccordionContext' + export interface CAccordionProps extends HTMLAttributes { /** * The active item key. @@ -21,14 +23,6 @@ export interface CAccordionProps extends HTMLAttributes { flush?: boolean } -export interface CAccordionContextProps { - _activeItemKey?: number | string - alwaysOpen?: boolean - setActiveKey: React.Dispatch> -} - -export const CAccordionContext = createContext({} as CAccordionContextProps) - export const CAccordion = forwardRef( ({ children, activeItemKey, alwaysOpen = false, className, flush, ...rest }, ref) => { const [_activeItemKey, setActiveKey] = useState(activeItemKey) @@ -48,8 +42,8 @@ export const CAccordion = forwardRef( ) CAccordion.propTypes = { - alwaysOpen: PropTypes.bool, activeItemKey: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), + alwaysOpen: PropTypes.bool, children: PropTypes.node, className: PropTypes.string, flush: PropTypes.bool, diff --git a/packages/coreui-react/src/components/accordion/CAccordionBody.tsx b/packages/coreui-react/src/components/accordion/CAccordionBody.tsx index a1e17d76..d98e8c43 100644 --- a/packages/coreui-react/src/components/accordion/CAccordionBody.tsx +++ b/packages/coreui-react/src/components/accordion/CAccordionBody.tsx @@ -2,9 +2,8 @@ import React, { forwardRef, HTMLAttributes, useContext } from 'react' import PropTypes from 'prop-types' import classNames from 'classnames' -import { CAccordionItemContext } from './CAccordionItem' - import { CCollapse } from './../collapse/CCollapse' +import { CAccordionItemContext } from './CAccordionItemContext' export interface CAccordionBodyProps extends HTMLAttributes { /** diff --git a/packages/coreui-react/src/components/accordion/CAccordionButton.tsx b/packages/coreui-react/src/components/accordion/CAccordionButton.tsx index 2a54e345..b5e9ca4c 100644 --- a/packages/coreui-react/src/components/accordion/CAccordionButton.tsx +++ b/packages/coreui-react/src/components/accordion/CAccordionButton.tsx @@ -2,7 +2,7 @@ import React, { forwardRef, HTMLAttributes, useContext } from 'react' import PropTypes from 'prop-types' import classNames from 'classnames' -import { CAccordionItemContext } from './CAccordionItem' +import { CAccordionItemContext } from './CAccordionItemContext' export interface CAccordionButtonProps extends HTMLAttributes { /** @@ -28,7 +28,7 @@ export const CAccordionButton = forwardRef ) - }, + } ) CAccordionButton.propTypes = { diff --git a/packages/coreui-react/src/components/accordion/CAccordionContext.ts b/packages/coreui-react/src/components/accordion/CAccordionContext.ts new file mode 100644 index 00000000..4b5aa46f --- /dev/null +++ b/packages/coreui-react/src/components/accordion/CAccordionContext.ts @@ -0,0 +1,9 @@ +import { createContext } from 'react' + +export interface CAccordionContextProps { + _activeItemKey?: number | string + alwaysOpen?: boolean + setActiveKey: React.Dispatch> +} + +export const CAccordionContext = createContext({} as CAccordionContextProps) diff --git a/packages/coreui-react/src/components/accordion/CAccordionItem.tsx b/packages/coreui-react/src/components/accordion/CAccordionItem.tsx index 12933a2f..f69fe197 100644 --- a/packages/coreui-react/src/components/accordion/CAccordionItem.tsx +++ b/packages/coreui-react/src/components/accordion/CAccordionItem.tsx @@ -1,5 +1,4 @@ import React, { - createContext, forwardRef, HTMLAttributes, useContext, @@ -11,15 +10,8 @@ import React, { import PropTypes from 'prop-types' import classNames from 'classnames' -import { CAccordionContext } from './CAccordion' - -export interface CAccordionItemContextProps { - id: string - setVisible: (a: boolean) => void - visible?: boolean -} - -export const CAccordionItemContext = createContext({} as CAccordionItemContextProps) +import { CAccordionContext } from './CAccordionContext' +import { CAccordionItemContext } from './CAccordionItemContext' export interface CAccordionItemProps extends HTMLAttributes { /** @@ -38,7 +30,8 @@ export interface CAccordionItemProps extends HTMLAttributes { export const CAccordionItem = forwardRef( ({ children, className, id, itemKey, ...rest }, ref) => { - const _id = id ?? useId() + const uniqueId = useId() + const _id = id ?? uniqueId const _itemKey = useRef(itemKey ?? _id) const { _activeItemKey, alwaysOpen, setActiveKey } = useContext(CAccordionContext) diff --git a/packages/coreui-react/src/components/accordion/CAccordionItemContext.ts b/packages/coreui-react/src/components/accordion/CAccordionItemContext.ts new file mode 100644 index 00000000..bbdeaf74 --- /dev/null +++ b/packages/coreui-react/src/components/accordion/CAccordionItemContext.ts @@ -0,0 +1,9 @@ +import { createContext } from 'react' + +export interface CAccordionItemContextProps { + id: string + setVisible: (a: boolean) => void + visible?: boolean +} + +export const CAccordionItemContext = createContext({} as CAccordionItemContextProps) diff --git a/packages/coreui-react/src/components/accordion/__tests__/CAccordion.spec.tsx b/packages/coreui-react/src/components/accordion/__tests__/CAccordion.spec.tsx index 761cd0ea..e1c8e342 100644 --- a/packages/coreui-react/src/components/accordion/__tests__/CAccordion.spec.tsx +++ b/packages/coreui-react/src/components/accordion/__tests__/CAccordion.spec.tsx @@ -1,7 +1,7 @@ import React from 'react' import { render, screen } from '@testing-library/react' import '@testing-library/jest-dom' -import { CAccordion } from '../../../index' +import { CAccordion } from '../index' test('loads and displays CAccordion component', async () => { const { container } = render(Test) diff --git a/packages/coreui-react/src/components/accordion/__tests__/CAccordionBody.spec.tsx b/packages/coreui-react/src/components/accordion/__tests__/CAccordionBody.spec.tsx index 519f0f13..795dc1d6 100644 --- a/packages/coreui-react/src/components/accordion/__tests__/CAccordionBody.spec.tsx +++ b/packages/coreui-react/src/components/accordion/__tests__/CAccordionBody.spec.tsx @@ -1,7 +1,7 @@ import React from 'react' import { render } from '@testing-library/react' import '@testing-library/jest-dom' -import { CAccordionBody } from '../../../index' +import { CAccordionBody } from '../index' test('loads and displays CAccordionBody component', async () => { const { container } = render(Test) diff --git a/packages/coreui-react/src/components/accordion/__tests__/CAccordionButton.spec.tsx b/packages/coreui-react/src/components/accordion/__tests__/CAccordionButton.spec.tsx index 1d40548c..265e06bb 100644 --- a/packages/coreui-react/src/components/accordion/__tests__/CAccordionButton.spec.tsx +++ b/packages/coreui-react/src/components/accordion/__tests__/CAccordionButton.spec.tsx @@ -1,7 +1,7 @@ import React from 'react' import { render } from '@testing-library/react' import '@testing-library/jest-dom' -import { CAccordionButton } from '../../../index' +import { CAccordionButton } from '../index' test('loads and displays CAccordionButton component', async () => { const { container } = render(Test) diff --git a/packages/coreui-react/src/components/accordion/__tests__/CAccordionHeader.spec.tsx b/packages/coreui-react/src/components/accordion/__tests__/CAccordionHeader.spec.tsx index ac833186..44458eae 100644 --- a/packages/coreui-react/src/components/accordion/__tests__/CAccordionHeader.spec.tsx +++ b/packages/coreui-react/src/components/accordion/__tests__/CAccordionHeader.spec.tsx @@ -1,7 +1,7 @@ import React from 'react' import { render } from '@testing-library/react' import '@testing-library/jest-dom' -import { CAccordionHeader } from '../../../index' +import { CAccordionHeader } from '../index' test('loads and displays CAccordionHeader component', async () => { const { container } = render(Test) diff --git a/packages/coreui-react/src/components/accordion/__tests__/CAccordionItem.spec.tsx b/packages/coreui-react/src/components/accordion/__tests__/CAccordionItem.spec.tsx index 10f693f3..d32330c5 100644 --- a/packages/coreui-react/src/components/accordion/__tests__/CAccordionItem.spec.tsx +++ b/packages/coreui-react/src/components/accordion/__tests__/CAccordionItem.spec.tsx @@ -1,7 +1,7 @@ import React from 'react' import { render } from '@testing-library/react' import '@testing-library/jest-dom' -import { CAccordionItem } from '../../../index' +import { CAccordionItem } from '../index' test('loads and displays CAccordionItem component', async () => { const { container } = render(Test) diff --git a/packages/coreui-react/src/components/alert/__tests__/CAlert.spec.tsx b/packages/coreui-react/src/components/alert/__tests__/CAlert.spec.tsx index a9581d0a..00e33441 100644 --- a/packages/coreui-react/src/components/alert/__tests__/CAlert.spec.tsx +++ b/packages/coreui-react/src/components/alert/__tests__/CAlert.spec.tsx @@ -1,41 +1,62 @@ import * as React from 'react' -import { render, fireEvent } from '@testing-library/react' +import { act, render, fireEvent } from '@testing-library/react' import '@testing-library/jest-dom' -import { CAlert } from '../../../index' +import { CAlert } from '../index' test('loads and displays CAlert component', async () => { - const { container } = render(Test) - expect(container).toMatchSnapshot() + let container: HTMLElement + await act(async () => { + const renderResult = render(Test) + container = renderResult.container + }) + expect(container!).toMatchSnapshot() }) test('CAlert customize', async () => { - const { container } = render( - - Test - , - ) - expect(container).toMatchSnapshot() - expect(container.firstChild).toHaveClass('bazinga') - expect(container.firstChild).toHaveClass('bg-secondary') - expect(container.firstChild).toHaveClass('text-white') - expect(container.firstChild).toHaveClass('alert-dismissible') + let container: HTMLElement + await act(async () => { + const renderResult = render( + + Test + + ) + container = renderResult.container + }) + expect(container!).toMatchSnapshot() + expect(container!.firstChild).toHaveClass('bazinga') + expect(container!.firstChild).toHaveClass('bg-secondary') + expect(container!.firstChild).toHaveClass('text-white') + expect(container!.firstChild).toHaveClass('alert-dismissible') }) test('CAlert click close button', async () => { jest.useFakeTimers() + const onClose = jest.fn() render( Test - , + ) + expect(onClose).toHaveBeenCalledTimes(0) + const btn = document.querySelector('.btn-close') + if (btn !== null) { - fireEvent.click(btn) + act(() => { + fireEvent.click(btn) + jest.runAllTimers() + }) } + expect(onClose).toHaveBeenCalledTimes(1) - jest.runAllTimers() - expect(onClose).toHaveBeenCalledTimes(1) + jest.useRealTimers() }) diff --git a/packages/coreui-react/src/components/alert/__tests__/CAlertHeading.spec.tsx b/packages/coreui-react/src/components/alert/__tests__/CAlertHeading.spec.tsx index f7308616..cbe90bf8 100644 --- a/packages/coreui-react/src/components/alert/__tests__/CAlertHeading.spec.tsx +++ b/packages/coreui-react/src/components/alert/__tests__/CAlertHeading.spec.tsx @@ -1,7 +1,7 @@ import * as React from 'react' import { render } from '@testing-library/react' import '@testing-library/jest-dom' -import { CAlertHeading } from '../../../index' +import { CAlertHeading } from '../index' test('loads and displays CAlertHeading component', async () => { const { container } = render(Test) diff --git a/packages/coreui-react/src/components/alert/__tests__/CAlertLink.spec.tsx b/packages/coreui-react/src/components/alert/__tests__/CAlertLink.spec.tsx index 47dc0afe..25c6bc04 100644 --- a/packages/coreui-react/src/components/alert/__tests__/CAlertLink.spec.tsx +++ b/packages/coreui-react/src/components/alert/__tests__/CAlertLink.spec.tsx @@ -1,7 +1,7 @@ import * as React from 'react' import { render } from '@testing-library/react' import '@testing-library/jest-dom' -import { CAlertLink } from '../../../index' +import { CAlertLink } from '../index' test('loads and displays CAlertLink component', async () => { const { container } = render(Test) diff --git a/packages/coreui-react/src/components/avatar/__tests__/CAvatar.spec.tsx b/packages/coreui-react/src/components/avatar/__tests__/CAvatar.spec.tsx index 3201afe4..2cc0b298 100644 --- a/packages/coreui-react/src/components/avatar/__tests__/CAvatar.spec.tsx +++ b/packages/coreui-react/src/components/avatar/__tests__/CAvatar.spec.tsx @@ -1,7 +1,7 @@ import * as React from 'react' import { render } from '@testing-library/react' import '@testing-library/jest-dom' -import { CAvatar } from '../../../index' +import { CAvatar } from '../index' test('loads and displays CAvatar component', async () => { const { container } = render(Test) diff --git a/packages/coreui-react/src/components/backdrop/__tests__/CBackdrop.spec.tsx b/packages/coreui-react/src/components/backdrop/__tests__/CBackdrop.spec.tsx index a5cc0290..60cab767 100644 --- a/packages/coreui-react/src/components/backdrop/__tests__/CBackdrop.spec.tsx +++ b/packages/coreui-react/src/components/backdrop/__tests__/CBackdrop.spec.tsx @@ -1,7 +1,7 @@ import * as React from 'react' import { render } from '@testing-library/react' import '@testing-library/jest-dom' -import { CBackdrop } from '../../../index' +import { CBackdrop } from '../index' test('loads and displays CBackdrop component', async () => { const { container } = render(Test) diff --git a/packages/coreui-react/src/components/badge/__tests__/CBadge.spec.tsx b/packages/coreui-react/src/components/badge/__tests__/CBadge.spec.tsx index 2f8a19dd..1473d6f7 100644 --- a/packages/coreui-react/src/components/badge/__tests__/CBadge.spec.tsx +++ b/packages/coreui-react/src/components/badge/__tests__/CBadge.spec.tsx @@ -1,7 +1,7 @@ import * as React from 'react' import { render } from '@testing-library/react' import '@testing-library/jest-dom' -import { CBadge } from '../../../index' +import { CBadge } from '../index' test('loads and displays CBadge component', async () => { const { container } = render(Test) diff --git a/packages/coreui-react/src/components/breadcrumb/__tests__/CBreadcrumb.spec.tsx b/packages/coreui-react/src/components/breadcrumb/__tests__/CBreadcrumb.spec.tsx index 396a3ce7..9254313c 100644 --- a/packages/coreui-react/src/components/breadcrumb/__tests__/CBreadcrumb.spec.tsx +++ b/packages/coreui-react/src/components/breadcrumb/__tests__/CBreadcrumb.spec.tsx @@ -1,7 +1,7 @@ import * as React from 'react' import { render } from '@testing-library/react' import '@testing-library/jest-dom' -import { CBreadcrumb, CBreadcrumbItem } from '../../../index' +import { CBreadcrumb, CBreadcrumbItem } from '../index' test('loads and displays CBreadcrumb component', async () => { const { container } = render() diff --git a/packages/coreui-react/src/components/breadcrumb/__tests__/CBreadcrumbItem.spec.tsx b/packages/coreui-react/src/components/breadcrumb/__tests__/CBreadcrumbItem.spec.tsx index 08c3c874..fff97974 100644 --- a/packages/coreui-react/src/components/breadcrumb/__tests__/CBreadcrumbItem.spec.tsx +++ b/packages/coreui-react/src/components/breadcrumb/__tests__/CBreadcrumbItem.spec.tsx @@ -1,7 +1,7 @@ import * as React from 'react' import { render } from '@testing-library/react' import '@testing-library/jest-dom' -import { CBreadcrumbItem } from '../../../index' +import { CBreadcrumbItem } from '../index' test('loads and displays CBreadcrumbItem component', async () => { const { container } = render(Test) 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 84671690..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' -import { CButtonGroup, CButton } from '../../../index' +import { CButton } from '../../button/CButton' +import { CButtonGroup } from '../index' test('loads and displays CButtonGroup component', async () => { const { container } = render() 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 f90c74cc..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' -import { CButtonToolbar, CButtonGroup, CButton } from '../../../index' +import { CButton } from '../../button/CButton' +import { CButtonToolbar, CButtonGroup } from '../index' test('loads and displays CButtonToolbar component', async () => { const { container } = render() diff --git a/packages/coreui-react/src/components/button/CButton.tsx b/packages/coreui-react/src/components/button/CButton.tsx index f8f5e17a..a12115d5 100644 --- a/packages/coreui-react/src/components/button/CButton.tsx +++ b/packages/coreui-react/src/components/button/CButton.tsx @@ -66,7 +66,7 @@ export const CButton: PolymorphicRefForwardingComponent<'button', CButtonProps> >( ( { children, as = 'button', className, color, shape, size, type = 'button', variant, ...rest }, - ref, + ref ) => { return ( {...(!rest.href && { type: type })} className={classNames( 'btn', + variant && color ? `btn-${variant}-${color}` : `btn-${variant}`, { [`btn-${color}`]: color && !variant, - [`btn-${variant}-${color}`]: color && variant, [`btn-${size}`]: size, }, shape, - className, + className )} {...rest} ref={ref} @@ -88,7 +88,7 @@ export const CButton: PolymorphicRefForwardingComponent<'button', CButtonProps> {children} ) - }, + } ) CButton.propTypes = { 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 27f3f8ce..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,7 +1,7 @@ import * as React from 'react' import { render } from '@testing-library/react' import '@testing-library/jest-dom' -import { CButton } from '../../../index' +import { CButton } from '../index' test('loads and displays CButton component', async () => { const { container } = render(Test) 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 64bb591f..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' -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__/CButtonClose.spec.tsx.snap b/packages/coreui-react/src/components/button/__tests__/__snapshots__/CButtonClose.spec.tsx.snap deleted file mode 100644 index 092b4a2d..00000000 --- a/packages/coreui-react/src/components/button/__tests__/__snapshots__/CButtonClose.spec.tsx.snap +++ /dev/null @@ -1,26 +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/__tests__/CCallout.spec.tsx b/packages/coreui-react/src/components/callout/__tests__/CCallout.spec.tsx index 86f63675..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' -import { CCallout } from '../../../index' +import { CCallout } from '../index' test('loads and displays CCallout component', async () => { const { container } = render(Test) 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 c22e6080..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' -import { CCard } from '../../../index' +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 8b79b9f5..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' -import { CCardBody } from '../../../index' +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 0b47f51f..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' -import { CCardFooter } from '../../../index' +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 a0228126..239c1fd9 100644 --- a/packages/coreui-react/src/components/card/__tests__/CCardGroup.spec.tsx +++ b/packages/coreui-react/src/components/card/__tests__/CCardGroup.spec.tsx @@ -12,7 +12,7 @@ import { CCardTitle, CCardText, CCardGroup, -} from '../../../index' +} from '../index' test('loads and displays CCardGroup component', async () => { const { container } = render(Test) 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 ffb43bab..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' -import { CCardHeader } from '../../../index' +import { CCardHeader } from '../index' test('loads and displays CCardHeader component', 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 88c20fd1..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' -import { CCardImage } from '../../../index' +import { CCardImage } from '../index' test('loads and displays CCardImage component', async () => { const { container } = render() 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 d161d9c2..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' -import { CCardImageOverlay } from '../../../index' +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 2251ac29..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' -import { CCardLink } from '../../../index' +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 a44165f4..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' -import { CCardSubtitle } from '../../../index' +import { CCardSubtitle } from '../index' test('loads and displays CCardSubtitle component', 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 06d2ca3a..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' -import { CCardText } from '../../../index' +import { CCardText } from '../index' test('loads and displays CCardText component', 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 ada47122..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' -import { CCardTitle } from '../../../index' +import { CCardTitle } from '../index' test('loads and displays CCardTitle component', 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 4e7e95ca..3d3186d3 100644 --- a/packages/coreui-react/src/components/carousel/CCarousel.tsx +++ b/packages/coreui-react/src/components/carousel/CCarousel.tsx @@ -1,6 +1,5 @@ import React, { Children, - createContext, forwardRef, HTMLAttributes, TouchEvent, @@ -14,6 +13,8 @@ import classNames from 'classnames' import { isInViewport } from '../../utils' import { useForkedRef } from '../../hooks' +import { CCarouselContext } from './CCarouselContext' + export interface CCarouselProps extends HTMLAttributes { /** * index of the active item. @@ -71,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( ( { @@ -96,7 +90,7 @@ export const CCarousel = forwardRef( wrap = true, ...rest }, - ref, + ref ) => { const carouselRef = useRef(null) const forkedRef = useForkedRef(ref, carouselRef) @@ -141,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 ) } } @@ -228,7 +222,7 @@ export const CCarousel = forwardRef( { 'carousel-fade': transition === 'crossfade', }, - className, + className )} {...(dark && { 'data-coreui-theme': 'dark' })} onMouseEnter={_pause} @@ -288,7 +282,7 @@ export const CCarousel = forwardRef( ) - }, + } ) CCarousel.propTypes = { diff --git a/packages/coreui-react/src/components/carousel/CCarouselCaption.tsx b/packages/coreui-react/src/components/carousel/CCarouselCaption.tsx index 6e1cd5d1..353a6b1b 100644 --- a/packages/coreui-react/src/components/carousel/CCarouselCaption.tsx +++ b/packages/coreui-react/src/components/carousel/CCarouselCaption.tsx @@ -12,7 +12,7 @@ export interface CCarouselCaptionProps extends HTMLAttributes { export const CCarouselCaption = forwardRef( ({ 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 ff9593b4..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,7 +1,7 @@ import React from 'react' 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 d757e1da..5b5e35d4 100644 --- a/packages/coreui-react/src/components/dropdown/CDropdown.tsx +++ b/packages/coreui-react/src/components/dropdown/CDropdown.tsx @@ -1,17 +1,10 @@ -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 type { Options } from '@popperjs/core' +import { CDropdownContext } from './CDropdownContext' + import { PolymorphicRefForwardingComponent } from '../../helpers' import { useForkedRef, usePopper } from '../../hooks' import { placementPropType } from '../../props' @@ -169,16 +162,6 @@ export interface CDropdownProps extends HTMLAttributes - dropdownMenuRef: RefObject - setVisible: React.Dispatch> - portal: boolean -} - -export const CDropdownContext = createContext({} as ContextProps) - export const CDropdown: PolymorphicRefForwardingComponent<'div', CDropdownProps> = forwardRef< HTMLDivElement | HTMLLIElement, CDropdownProps @@ -207,8 +190,7 @@ export const CDropdown: PolymorphicRefForwardingComponent<'div', CDropdownProps> ref ) => { const dropdownRef = useRef(null) - // eslint-disable-next-line @typescript-eslint/no-explicit-any - const dropdownToggleRef = useRef(null) + const dropdownToggleRef = useRef(null) const dropdownMenuRef = useRef(null) const forkedRef = useForkedRef(ref, dropdownRef) const [_visible, setVisible] = useState(visible) @@ -256,28 +238,45 @@ export const CDropdown: PolymorphicRefForwardingComponent<'div', CDropdownProps> }, [visible]) useEffect(() => { - if (_visible && dropdownToggleRef.current && dropdownMenuRef.current) { - dropdownToggleRef.current.focus() - popper && - initPopper(dropdownToggleRef.current, dropdownMenuRef.current, computedPopperConfig) + 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) - dropdownToggleRef.current.addEventListener('keydown', handleKeydown) - dropdownMenuRef.current.addEventListener('keydown', handleKeydown) - onShow && onShow() + + onShow?.() } return () => { - popper && destroyPopper() + if (popper) { + destroyPopper() + } + + toggleElement?.removeEventListener('keydown', handleKeydown) + menuElement?.removeEventListener('keydown', handleKeydown) + window.removeEventListener('mouseup', handleMouseUp) window.removeEventListener('keyup', handleKeyup) - dropdownToggleRef.current && - dropdownToggleRef.current.removeEventListener('keydown', handleKeydown) - dropdownMenuRef.current && - dropdownMenuRef.current.removeEventListener('keydown', handleKeydown) - onHide && onHide() + + onHide?.() } - }, [_visible]) + }, [ + computedPopperConfig, + destroyPopper, + dropdownMenuRef, + dropdownToggleRef, + initPopper, + _visible, + ]) const handleKeydown = (event: KeyboardEvent) => { if ( 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 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 34e8d507..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,7 +38,7 @@ export const CDropdownMenu: PolymorphicRefForwardingComponent<'ul', CDropdownMen show: visible, }, alignment && getAlignmentClassNames(alignment), - className, + className )} ref={forkedRef} role="menu" @@ -57,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..ee8dfe82 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' @@ -69,7 +68,7 @@ export const CDropdownToggle: FC = ({ 'dropdown-toggle-split': split, show: visible, }, - className, + className ), 'aria-expanded': visible, ...(!rest.disabled && { ...triggers }), 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 677e34bd..12b6e3cd 100644 --- a/packages/coreui-react/src/components/dropdown/__tests__/CDropdown.spec.tsx +++ b/packages/coreui-react/src/components/dropdown/__tests__/CDropdown.spec.tsx @@ -9,7 +9,7 @@ import { CDropdownItemPlain, CDropdownHeader, CDropdownDivider, -} from '../../../index' +} from '../index' test('loads and displays CDropdown component', async () => { const { container } = render(Test) 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