diff --git a/packages/coreui-react/src/components/tooltip/__tests__/__snapshots__/CTooltip.spec.tsx.snap b/packages/coreui-react/src/components/tooltip/__tests__/__snapshots__/CTooltip.spec.tsx.snap index aed23818..ad0c7594 100644 --- a/packages/coreui-react/src/components/tooltip/__tests__/__snapshots__/CTooltip.spec.tsx.snap +++ b/packages/coreui-react/src/components/tooltip/__tests__/__snapshots__/CTooltip.spec.tsx.snap @@ -3,7 +3,6 @@ exports[`CTooltip customize 1`] = `

Set aligment of dropdown menu.

Specifies the alignment of the React Dropdown Menu within this React Dropdown.

+ + Toggle dropdown + + Action + Another Action + +`} /> @@ -32,7 +40,7 @@ import CDropdown from '@coreui/react/src/components/dropdown/CDropdown' -

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.

@@ -42,13 +50,15 @@ import CDropdown from '@coreui/react/src/components/dropdown/CDropdown' -

Configure the auto close behavior of the dropdown:

Configures automatic closing behavior for the React 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.
{`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.

+ `} /> @@ -58,7 +68,7 @@ import CDropdown from '@coreui/react/src/components/dropdown/CDropdown' -

A string of all className you want applied to the base component.

Adds custom classes to the React Dropdown root element.

@@ -68,7 +78,11 @@ import CDropdown from '@coreui/react/src/components/dropdown/CDropdown' -

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`}.

+ `} /> @@ -78,7 +92,7 @@ import CDropdown from '@coreui/react/src/components/dropdown/CDropdown' -

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.

@@ -88,7 +102,7 @@ import CDropdown from '@coreui/react/src/components/dropdown/CDropdown' -

Sets a specified direction and location of the dropdown menu.

Specifies the direction of the React Dropdown.

@@ -98,7 +112,11 @@ import CDropdown from '@coreui/react/src/components/dropdown/CDropdown' -

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.

+ + ... +`} /> @@ -108,7 +126,7 @@ import CDropdown from '@coreui/react/src/components/dropdown/CDropdown' -

Callback fired when the component requests to be hidden.

Callback fired right before the React Dropdown becomes hidden.

@@ -118,17 +136,17 @@ import CDropdown from '@coreui/react/src/components/dropdown/CDropdown' -

Callback fired when the component requests to be shown.

Callback fired immediately after the React Dropdown is displayed.

placement # {`bottom-start`} - {`'auto'`}, {`'top-end'`}, {`'top'`}, {`'top-start'`}, {`'bottom-end'`}, {`'bottom'`}, {`'bottom-start'`}, {`'right-start'`}, {`'right'`}, {`'right-end'`}, {`'left-start'`}, {`'left'`}, {`'left-end'`} + {`'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'`} -

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.

@@ -138,7 +156,28 @@ import CDropdown from '@coreui/react/src/components/dropdown/CDropdown' -

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.

+ + + + popperConfig#5.5.0+ + - + {`Partial\`}, {`((defaultPopperConfig: Partial\) => Partial\)`} + + + +

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

+ ...`} /> @@ -148,7 +187,7 @@ import CDropdown from '@coreui/react/src/components/dropdown/CDropdown' -

Generates dropdown menu using createPortal.

Renders the React Dropdown Menu using a React Portal, allowing it to escape the DOM hierarchy for improved positioning.

@@ -158,7 +197,7 @@ import CDropdown from '@coreui/react/src/components/dropdown/CDropdown' -

Set the dropdown variant to an btn-group, dropdown, input-group, and nav-item.

Defines the visual variant of the React Dropdown

@@ -168,7 +207,17 @@ import CDropdown from '@coreui/react/src/components/dropdown/CDropdown' -

Toggle the visibility of dropdown menu component.

Controls the visibility of the React Dropdown Menu:

{`true`} - Visible
{`false`} - Hidden

+ + ... +`} /> diff --git a/packages/docs/content/api/CPopover.api.mdx b/packages/docs/content/api/CPopover.api.mdx index dad73c4c..f12c0577 100644 --- a/packages/docs/content/api/CPopover.api.mdx +++ b/packages/docs/content/api/CPopover.api.mdx @@ -22,7 +22,7 @@ import CPopover from '@coreui/react/src/components/popover/CPopover' -

Apply a CSS fade transition to the popover.

Adds a fade transition animation to the React Popover.

@@ -32,17 +32,24 @@ import CPopover from '@coreui/react/src/components/popover/CPopover' -

A string of all className you want applied to the component.

Custom class name(s) for additional styling.

container#4.11.0+ - - + {`document.body`} {`Element`}, {`DocumentFragment`}, {`(() => Element | DocumentFragment)`} -

Appends the react popover to a specific element. You can pass an HTML element or function that returns a single element. By default {`document.body`}.

Defines the container element to which the React Popover is appended.
+Accepts:

A DOM element ({`HTMLElement`} or {`DocumentFragment`})
A function that returns a single element
{`null`} (defaults to {`document.body`})

+ ...`} /> @@ -52,7 +59,7 @@ import CPopover from '@coreui/react/src/components/popover/CPopover' -

Content node for your component.

Main content of the React Popover. It can be a string or any valid React node.

@@ -62,17 +69,26 @@ import CPopover from '@coreui/react/src/components/popover/CPopover' -

The delay for displaying and hiding the popover (in milliseconds). When a numerical value is provided, the delay applies to both the hide and show actions. The object structure for specifying the delay is as follows: delay: {`{ 'show': 500, 'hide': 100 }`}.

Delay (in milliseconds) before showing or hiding the React Popover.

If a number is provided, that delay applies to both "show" and "hide".
If an object is provided, use separate values for "show" and "hide".

+ ... + +// Delays 500ms on show and 100ms on hide +...`} /> fallbackPlacements#4.9.0+ {`['top', 'right', 'bottom', 'left']`} - {`Placements`}, {`Placements[]`} + {`'top', 'right', 'bottom', 'left'`}, {`('top', 'right', 'bottom', 'left')[]`} -

Specify the desired order of fallback placements by providing a list of placements as an array. The placements should be prioritized based on preference.

Specifies the fallback placements when the preferred {`placement`} cannot be met.

@@ -82,7 +98,12 @@ import CPopover from '@coreui/react/src/components/popover/CPopover' -

Offset of the popover relative to its target.

Offset of the React Popover relative to its toggle element, in the form {`[x, y]`}.

+ ... + +// Offset the menu 5px in both X and Y direction +...`} /> @@ -92,7 +113,7 @@ import CPopover from '@coreui/react/src/components/popover/CPopover' -

Callback fired when the component requests to be hidden.

Invoked when the React Popover is about to hide.

@@ -102,7 +123,7 @@ import CPopover from '@coreui/react/src/components/popover/CPopover' -

Callback fired when the component requests to be shown.

Invoked when the React Popover is about to show.

@@ -112,7 +133,29 @@ import CPopover from '@coreui/react/src/components/popover/CPopover' -

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.

Placement of the React Popover. Popper.js may override this based on available space.

+ + + + popperConfig#5.5.0+ + - + {`Partial\`}, {`((defaultPopperConfig: Partial\) => Partial\)`} + + + +

Allows customization of the Popper.js configuration for the React Popover.
+Can be an object or a function returning a modified configuration.
+Learn more

+ ({ + ...defaultConfig, + strategy: 'fixed', + modifiers: [ + ...defaultConfig.modifiers, + { name: 'computeStyles', options: { adaptive: false } }, + ], + })} +>...`} /> @@ -122,17 +165,22 @@ import CPopover from '@coreui/react/src/components/popover/CPopover' -

Title node for your component.

Title for the React Popover header. Can be a string or any valid React node.

trigger# {`click`} - {`'hover'`}, {`'focus'`}, {`'click'`} + {`'hover'`}, {`'focus'`}, {`'click'`}, {`('hover' | 'focus' | 'click')[]`} -

Sets which event handlers you’d like provided to your toggle prop. You can specify one trigger or an array of them.

Determines which events trigger the visibility of the React Popover. Can be a single trigger or an array of triggers.

+ ... + +// Hover + click combined +...`} /> @@ -142,7 +190,11 @@ import CPopover from '@coreui/react/src/components/popover/CPopover' -

Toggle the visibility of popover component.

Controls the visibility of the React Popover.

{`true`} shows the popover.
{`false`} hides the popover.

diff --git a/packages/docs/content/api/CTooltip.api.mdx b/packages/docs/content/api/CTooltip.api.mdx index b11865cb..74a7e295 100644 --- a/packages/docs/content/api/CTooltip.api.mdx +++ b/packages/docs/content/api/CTooltip.api.mdx @@ -22,7 +22,7 @@ import CTooltip from '@coreui/react/src/components/tooltip/CTooltip' -

Apply a CSS fade transition to the tooltip.

Enables or disables the CSS fade transition for the React Tooltip.

@@ -32,17 +32,23 @@ import CTooltip from '@coreui/react/src/components/tooltip/CTooltip' -

A string of all className you want applied to the component.

Adds a custom class name to the React Tooltip container. Useful for overriding default styles or applying additional design choices.

container#4.11.0+ - - + {`document.body`} {`Element`}, {`DocumentFragment`}, {`(() => Element | DocumentFragment)`} -

Appends the react tooltip to a specific element. You can pass an HTML element or function that returns a single element. By default {`document.body`}.

Appends the React Tooltip to a specific element instead of the default {`document.body`}. You may pass:

A DOM element ({`HTMLElement`} or {`DocumentFragment`})
A function that returns a single element
{`null`}

+ ...`} /> @@ -52,7 +58,7 @@ import CTooltip from '@coreui/react/src/components/tooltip/CTooltip' -

Content node for your component.

Content to be displayed within the React Tooltip. Can be a string or any valid React node.

@@ -62,17 +68,26 @@ import CTooltip from '@coreui/react/src/components/tooltip/CTooltip' -

The delay for displaying and hiding the tooltip (in milliseconds). When a numerical value is provided, the delay applies to both the hide and show actions. The object structure for specifying the delay is as follows: delay: {`{ 'show': 500, 'hide': 100 }`}.

The delay (in milliseconds) before showing or hiding the React Tooltip.

If provided as a number, the delay is applied to both "show" and "hide".
If provided as an object, it should have distinct "show" and "hide" values.

Specify the desired order of fallback placements by providing a list of placements as an array. The placements should be prioritized based on preference.

Array of fallback placements for the React Tooltip to use when the preferred placement cannot be achieved. These placements are tried in order.

@@ -82,7 +97,12 @@ import CTooltip from '@coreui/react/src/components/tooltip/CTooltip' -

Offset of the tooltip relative to its target.

Adjusts the offset of the React Tooltip relative to its target. Expects a tuple {`[x-axis, y-axis]`}.

+ ... + +// Offset the menu 5px in both X and Y direction +...`} /> @@ -92,7 +112,7 @@ import CTooltip from '@coreui/react/src/components/tooltip/CTooltip' -

Callback fired when the component requests to be hidden.

Callback fired immediately after the React Tooltip is hidden.

@@ -102,7 +122,7 @@ import CTooltip from '@coreui/react/src/components/tooltip/CTooltip' -

Callback fired when the component requests to be shown.

Callback fired immediately after the React Tooltip is shown.

@@ -112,17 +132,42 @@ import CTooltip from '@coreui/react/src/components/tooltip/CTooltip' -

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.

Initial placement of the React Tooltip. Note that Popper.js modifiers may alter this placement automatically if there's insufficient space in the chosen position.

+ + + + popperConfig#5.5.0+ + - + {`Partial\`}, {`((defaultPopperConfig: Partial\) => Partial\)`} + + + +

Customize the Popper.js configuration used to position the React Tooltip. Pass either an object or a function returning a modified config. Learn more

+ ({ + ...defaultConfig, + strategy: 'fixed', + modifiers: [ + ...defaultConfig.modifiers, + { name: 'computeStyles', options: { adaptive: false } }, + ], + })} +>...`} /> trigger# {`['hover', 'focus']`} - {`'hover'`}, {`'focus'`}, {`'click'`} + {`'hover'`}, {`'focus'`}, {`'click'`}, {`('hover' | 'focus' | 'click')[]`} -

Sets which event handlers you’d like provided to your toggle prop. You can specify one trigger or an array of them.

Determines the events that toggle the visibility of the React Tooltip. Can be a single trigger or an array of triggers.

+ ... + +// Hover + click combined +...`} /> @@ -132,7 +177,11 @@ import CTooltip from '@coreui/react/src/components/tooltip/CTooltip' -

Toggle the visibility of tooltip component.

Controls the visibility of the React Tooltip.

{`true`} to show the tooltip.
{`false`} to hide the tooltip.

diff --git a/packages/docs/content/components/tooltip/index.mdx b/packages/docs/content/components/tooltip/index.mdx index 772c6bf7..32a24dd1 100644 --- a/packages/docs/content/components/tooltip/index.mdx +++ b/packages/docs/content/components/tooltip/index.mdx @@ -18,6 +18,8 @@ Hover over the links below to see tooltips: You can customize the appearance of tooltips using [CSS variables](./styling/#css-variables). We set a custom `style` to scope our custom appearance and use it to override some of the local CSS variables. + + ### Directions Hover over the buttons below to see the four tooltips directions: top, right, bottom, and left. Directions are mirrored when using CoreUI in RTL. From 161bbd18637a8de895b2d26842a6b69e32d7207b Mon Sep 17 00:00:00 2001 From: mrholek Date: Tue, 28 Jan 2025 16:04:37 +0100 Subject: [PATCH 14/50] fix(CAccordion): add a missing ID attribute to the accordion collapse items --- .../src/components/accordion/CAccordionBody.tsx | 6 +++--- .../src/components/accordion/CAccordionItem.tsx | 14 +++++++++----- 2 files changed, 12 insertions(+), 8 deletions(-) diff --git a/packages/coreui-react/src/components/accordion/CAccordionBody.tsx b/packages/coreui-react/src/components/accordion/CAccordionBody.tsx index 532f3ff6..a1e17d76 100644 --- a/packages/coreui-react/src/components/accordion/CAccordionBody.tsx +++ b/packages/coreui-react/src/components/accordion/CAccordionBody.tsx @@ -15,16 +15,16 @@ export interface CAccordionBodyProps extends HTMLAttributes { export const CAccordionBody = forwardRef( ({ children, className, ...rest }, ref) => { - const { visible } = useContext(CAccordionItemContext) + const { id, visible } = useContext(CAccordionItemContext) return ( - +

{children}

) - }, + } ) CAccordionBody.propTypes = { diff --git a/packages/coreui-react/src/components/accordion/CAccordionItem.tsx b/packages/coreui-react/src/components/accordion/CAccordionItem.tsx index b87c1509..12933a2f 100644 --- a/packages/coreui-react/src/components/accordion/CAccordionItem.tsx +++ b/packages/coreui-react/src/components/accordion/CAccordionItem.tsx @@ -22,6 +22,10 @@ export interface CAccordionItemContextProps { export const CAccordionItemContext = createContext({} as CAccordionItemContextProps) export interface CAccordionItemProps extends HTMLAttributes { + /** + * The id global attribute defines an identifier (ID) that must be unique in the whole document. + */ + id?: string /** * A string of all className you want applied to the base component. */ @@ -33,9 +37,9 @@ export interface CAccordionItemProps extends HTMLAttributes { } export const CAccordionItem = forwardRef( - ({ children, className, itemKey, ...rest }, ref) => { - const id = useId() - const _itemKey = useRef(itemKey ?? id) + ({ children, className, id, itemKey, ...rest }, ref) => { + const _id = id ?? useId() + const _itemKey = useRef(itemKey ?? _id) const { _activeItemKey, alwaysOpen, setActiveKey } = useContext(CAccordionContext) const [visible, setVisible] = useState(Boolean(_activeItemKey === _itemKey.current)) @@ -52,12 +56,12 @@ export const CAccordionItem = forwardRef( return (

- + {children}

) - }, + } ) CAccordionItem.propTypes = { From 35276cbfcab3cba71e811e150a818c680d7a7f2d Mon Sep 17 00:00:00 2001 From: mrholek Date: Thu, 6 Feb 2025 18:53:00 +0100 Subject: [PATCH 15/50] docs: update API documentation --- packages/docs/content/api/CSidebar.api.mdx | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/packages/docs/content/api/CSidebar.api.mdx b/packages/docs/content/api/CSidebar.api.mdx index c4a30525..f6ff8f25 100644 --- a/packages/docs/content/api/CSidebar.api.mdx +++ b/packages/docs/content/api/CSidebar.api.mdx @@ -15,6 +15,16 @@ import CSidebar from '@coreui/react/src/components/sidebar/CSidebar' + + as# + - + {`(ElementType & 'symbol')`}, {`(ElementType & 'object')`}, {`(ElementType & 'div')`}, {`(ElementType & 'slot')`}, {`(ElementType & 'style')`}, {`... 174 more ...`}, {`(ElementType & FunctionComponent\<...>)`} + + + +

Component used for the root node. Either a string to use a HTML element or a component.

+ + className# - From 58ace1bc1dce0de099946e9fbe60f1bca30c104d Mon Sep 17 00:00:00 2001 From: mrholek Date: Thu, 6 Feb 2025 18:56:07 +0100 Subject: [PATCH 16/50] fix(useColorModes): replace `globalThis` with `window` for SSR support --- packages/coreui-react/src/hooks/useColorModes.ts | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/coreui-react/src/hooks/useColorModes.ts b/packages/coreui-react/src/hooks/useColorModes.ts index 4995f18b..b6c63a80 100644 --- a/packages/coreui-react/src/hooks/useColorModes.ts +++ b/packages/coreui-react/src/hooks/useColorModes.ts @@ -7,13 +7,13 @@ interface UseColorModesOutput { } const getStoredTheme = (localStorageItemName: string) => - typeof globalThis !== 'undefined' && localStorage.getItem(localStorageItemName) + typeof window !== 'undefined' && localStorage.getItem(localStorageItemName) const setStoredTheme = (localStorageItemName: string, colorMode: string) => localStorage.setItem(localStorageItemName, colorMode) const getPreferredColorScheme = (localStorageItemName: string) => { - if (typeof globalThis === 'undefined') { + if (typeof window === 'undefined') { return 'light' } @@ -23,12 +23,12 @@ const getPreferredColorScheme = (localStorageItemName: string) => { return storedTheme } - return globalThis.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light' + return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light' } const setTheme = (colorMode: string) => { document.documentElement.dataset.coreuiTheme = - colorMode === 'auto' && globalThis.matchMedia('(prefers-color-scheme: dark)').matches + colorMode === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : colorMode @@ -51,7 +51,7 @@ export const useColorModes = ( }, [colorMode]) useEffect(() => { - globalThis.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => { + window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => { const storedTheme = getStoredTheme(localStorageItemName) if (storedTheme !== 'light' && storedTheme !== 'dark' && colorMode) { setTheme(colorMode) From d2ca48d45f3a3dbcdd5d82f211942b17a9746d95 Mon Sep 17 00:00:00 2001 From: mrholek Date: Thu, 6 Feb 2025 23:45:39 +0100 Subject: [PATCH 17/50] chore: update dependencies and devDependencies MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit @docsearch/css ^3.8.2 → ^3.8.3 @docsearch/react ^3.8.2 → ^3.8.3 @testing-library/react ^16.1.0 → ^16.2.0 @typescript-eslint/parser ^8.19.1 → ^8.23.0 eslint ^9.17.0 → ^9.19.0 eslint-config-prettier ^9.1.0 → ^10.0.1 eslint-plugin-prettier ^5.2.1 → ^5.2.3 eslint-plugin-react ^7.37.3 → ^7.37.4 gatsby ^5.14.0 → ^5.14.1 react-markdown ^9.0.1 → ^9.0.3 rollup ^4.29.1 → ^4.34.4 sass ^1.83.0 → ^1.84.0 typescript ^5.7.2 → ^5.7.3 typescript-eslint ^8.19.1 → ^8.23.0 --- package.json | 12 ++++++------ packages/coreui-icons-react | 2 +- packages/coreui-react-chartjs | 2 +- packages/coreui-react/package.json | 6 +++--- packages/docs/package.json | 10 +++++----- 5 files changed, 16 insertions(+), 16 deletions(-) diff --git a/package.json b/package.json index 35896cb8..6f1a9ffd 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.19.1", - "eslint": "^9.17.0", - "eslint-config-prettier": "^9.1.0", - "eslint-plugin-prettier": "^5.2.1", - "eslint-plugin-react": "^7.37.3", + "@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", "npm-run-all": "^4.1.5", "prettier": "^3.4.2", - "typescript-eslint": "^8.19.1" + "typescript-eslint": "^8.23.0" }, "overrides": { "gatsby-remark-external-links": { diff --git a/packages/coreui-icons-react b/packages/coreui-icons-react index 22805807..aad2d31c 160000 --- a/packages/coreui-icons-react +++ b/packages/coreui-icons-react @@ -1 +1 @@ -Subproject commit 228058071d45ab6dcc2701f4217a1e093de21504 +Subproject commit aad2d31c3cd8ca4d3ed7457ef02730f60038b6e8 diff --git a/packages/coreui-react-chartjs b/packages/coreui-react-chartjs index d4a86d6a..c6077716 160000 --- a/packages/coreui-react-chartjs +++ b/packages/coreui-react-chartjs @@ -1 +1 @@ -Subproject commit d4a86d6ab408dde565cf44fe6b2c0b4b5a8dd310 +Subproject commit c6077716da130a1ba8f97346f2d98c60ea2cca3e diff --git a/packages/coreui-react/package.json b/packages/coreui-react/package.json index b3387502..8d5016a0 100644 --- a/packages/coreui-react/package.json +++ b/packages/coreui-react/package.json @@ -51,7 +51,7 @@ "@rollup/plugin-typescript": "^12.1.2", "@testing-library/dom": "^10.4.0", "@testing-library/jest-dom": "^6.6.3", - "@testing-library/react": "^16.1.0", + "@testing-library/react": "^16.2.0", "@types/jest": "^29.5.14", "@types/prop-types": "15.7.13", "@types/react": "^18.3.18", @@ -64,10 +64,10 @@ "react": "^18.3.1", "react-dom": "^18.3.1", "react-transition-group": "^4.4.5", - "rollup": "^4.29.1", + "rollup": "^4.34.4", "ts-jest": "^29.2.5", "tslib": "^2.8.1", - "typescript": "^5.7.2" + "typescript": "^5.7.3" }, "peerDependencies": { "react": ">=17", diff --git a/packages/docs/package.json b/packages/docs/package.json index 96c754ce..736e46e2 100644 --- a/packages/docs/package.json +++ b/packages/docs/package.json @@ -30,12 +30,12 @@ "@coreui/icons-react": "^2.3.0", "@coreui/react-chartjs": "^3.0.0", "@coreui/utils": "^2.0.2", - "@docsearch/css": "^3.8.2", - "@docsearch/react": "^3.8.2", + "@docsearch/css": "^3.8.3", + "@docsearch/react": "^3.8.3", "@mdx-js/mdx": "^3.1.0", "@mdx-js/react": "^3.1.0", "@stackblitz/sdk": "^1.11.0", - "gatsby": "^5.14.0", + "gatsby": "^5.14.1", "gatsby-plugin-google-tagmanager": "^5.14.0", "gatsby-plugin-image": "^3.14.0", "gatsby-plugin-manifest": "^5.14.0", @@ -56,9 +56,9 @@ "react-docgen-typescript": "^2.2.2", "react-dom": "^18.3.1", "react-imask": "^7.6.1", - "react-markdown": "^9.0.1", + "react-markdown": "^9.0.3", "rimraf": "^6.0.1", - "sass": "^1.83.0", + "sass": "^1.84.0", "showdown": "^2.1.0" }, "devDependencies": { From 92609b249c14cbe09f73f52cc2fa4a3ce53f51c5 Mon Sep 17 00:00:00 2001 From: mrholek Date: Fri, 7 Feb 2025 00:07:31 +0100 Subject: [PATCH 18/50] refactor(CDropdown): remove `aria-hidden` to improve component accessibility --- packages/coreui-react/src/components/dropdown/CDropdownMenu.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/coreui-react/src/components/dropdown/CDropdownMenu.tsx b/packages/coreui-react/src/components/dropdown/CDropdownMenu.tsx index 35a4e98a..34e8d507 100644 --- a/packages/coreui-react/src/components/dropdown/CDropdownMenu.tsx +++ b/packages/coreui-react/src/components/dropdown/CDropdownMenu.tsx @@ -42,7 +42,6 @@ export const CDropdownMenu: PolymorphicRefForwardingComponent<'ul', CDropdownMen )} ref={forkedRef} role="menu" - aria-hidden={!visible} {...(!popper && { 'data-coreui-popper': 'static' })} {...(dark && { 'data-coreui-theme': 'dark' })} {...rest} From 9f24e2f2910ca3ba48b89cee43063724486b9603 Mon Sep 17 00:00:00 2001 From: mrholek Date: Fri, 7 Feb 2025 12:55:27 +0100 Subject: [PATCH 19/50] chore: update the current year to 2025 --- LICENSE | 2 +- README.md | 2 +- packages/coreui-react/LICENSE | 2 +- packages/coreui-react/README.md | 2 +- packages/docs/content/components/footer.mdx | 2 +- 5 files changed, 5 insertions(+), 5 deletions(-) diff --git a/LICENSE b/LICENSE index 94e4f4d1..fbb053e0 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ MIT License -Copyright (c) 2024 creativeLabs Łukasz Holeczek +Copyright (c) 2025 creativeLabs Łukasz Holeczek Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/README.md b/README.md index f1d28a27..f5ede001 100644 --- a/README.md +++ b/README.md @@ -227,4 +227,4 @@ CoreUI is an MIT-licensed open source project and is completely free to use. How ## Copyright and license -Copyright 2024 creativeLabs Łukasz Holeczek. Code released under the [MIT License](https://github.com/coreui/coreui-react/blob/main/LICENSE). Docs released under [Creative Commons](https://creativecommons.org/licenses/by/3.0/). \ No newline at end of file +Copyright 2025 creativeLabs Łukasz Holeczek. Code released under the [MIT License](https://github.com/coreui/coreui-react/blob/main/LICENSE). Docs released under [Creative Commons](https://creativecommons.org/licenses/by/3.0/). \ No newline at end of file diff --git a/packages/coreui-react/LICENSE b/packages/coreui-react/LICENSE index 94e4f4d1..fbb053e0 100644 --- a/packages/coreui-react/LICENSE +++ b/packages/coreui-react/LICENSE @@ -1,6 +1,6 @@ MIT License -Copyright (c) 2024 creativeLabs Łukasz Holeczek +Copyright (c) 2025 creativeLabs Łukasz Holeczek Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/packages/coreui-react/README.md b/packages/coreui-react/README.md index 0dec4d28..7df877fd 100644 --- a/packages/coreui-react/README.md +++ b/packages/coreui-react/README.md @@ -259,4 +259,4 @@ Thanks to all the backers and sponsors! Support this project by [becoming a back ## Copyright and license -Copyright 2024 creativeLabs Łukasz Holeczek. Code released under the [MIT License](https://github.com/coreui/coreui-react/blob/main/LICENSE). Docs released under [Creative Commons](https://creativecommons.org/licenses/by/3.0/). +Copyright 2025 creativeLabs Łukasz Holeczek. Code released under the [MIT License](https://github.com/coreui/coreui-react/blob/main/LICENSE). Docs released under [Creative Commons](https://creativecommons.org/licenses/by/3.0/). diff --git a/packages/docs/content/components/footer.mdx b/packages/docs/content/components/footer.mdx index 4adaf8d4..5d36a1e6 100644 --- a/packages/docs/content/components/footer.mdx +++ b/packages/docs/content/components/footer.mdx @@ -15,7 +15,7 @@ import { CFooter, CLink } from '@coreui/react'

Powered by From be8ae228b3da7f6b5d0daf5abb59ed747ed8e3c7 Mon Sep 17 00:00:00 2001 From: mrholek Date: Fri, 7 Feb 2025 12:56:51 +0100 Subject: [PATCH 20/50] release: v5.5.0 --- README.md | 2 +- lerna.json | 2 +- packages/coreui-react/README.md | 2 +- packages/coreui-react/package.json | 2 +- packages/docs/package.json | 2 +- 5 files changed, 5 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index f5ede001..b6a3fc41 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.4.1.zip) +- [Download the latest release](https://github.com/coreui/coreui-react/archive/v5.5.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 6fea4400..8b1ec4d7 100644 --- a/lerna.json +++ b/lerna.json @@ -1,6 +1,6 @@ { "npmClient": "yarn", "packages": ["packages/*"], - "version": "5.4.1", + "version": "5.5.0", "$schema": "node_modules/lerna/schemas/lerna-schema.json" } diff --git a/packages/coreui-react/README.md b/packages/coreui-react/README.md index 7df877fd..55bcc2e7 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.4.1.zip) +- [Download the latest release](https://github.com/coreui/coreui-react/archive/v5.5.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 8d5016a0..bd2ce657 100644 --- a/packages/coreui-react/package.json +++ b/packages/coreui-react/package.json @@ -1,6 +1,6 @@ { "name": "@coreui/react", - "version": "5.4.1", + "version": "5.5.0", "description": "UI Components Library for React.js", "keywords": [ "react", diff --git a/packages/docs/package.json b/packages/docs/package.json index 736e46e2..905b2984 100644 --- a/packages/docs/package.json +++ b/packages/docs/package.json @@ -1,6 +1,6 @@ { "name": "@coreui/react-docs", - "version": "5.4.1", + "version": "5.5.0", "private": true, "description": "", "homepage": "https://coreui.io/react/", From ef0e750557f4327b5b6f887ed36151f79dffd152 Mon Sep 17 00:00:00 2001 From: mrholek Date: Sun, 16 Feb 2025 14:21:38 +0100 Subject: [PATCH 21/50] docs: update content --- .../docs/content/components/alert/index.mdx | 7 +- .../content/components/button-group/index.mdx | 6 +- .../docs/content/components/button/index.mdx | 7 +- .../docs/content/components/callout/index.mdx | 7 +- .../docs/content/components/card/index.mdx | 7 +- .../content/components/list-group/index.mdx | 7 +- packages/docs/content/customize/sass.mdx | 83 ++++++++++++++++-- packages/docs/src/components/Callout.tsx | 85 ++++++++++++++++++- packages/docs/src/components/ScssDocs.tsx | 26 ++++-- 9 files changed, 183 insertions(+), 52 deletions(-) diff --git a/packages/docs/content/components/alert/index.mdx b/packages/docs/content/components/alert/index.mdx index 92ce7cbb..d6e4064a 100644 --- a/packages/docs/content/components/alert/index.mdx +++ b/packages/docs/content/components/alert/index.mdx @@ -13,12 +13,7 @@ React Alert is prepared for any length of text, as well as an optional close but - - Using color to add meaning only provides a visual indication, which will not be conveyed to - users of assistive technologies – such as screen readers. Ensure that information denoted by the - color is either obvious from the content itself (e.g. the visible text), or is included through - alternative means, such as additional text hidden with the `.visually-hidden` class. - + ### Live example diff --git a/packages/docs/content/components/button-group/index.mdx b/packages/docs/content/components/button-group/index.mdx index 7fda6db8..78b875ad 100644 --- a/packages/docs/content/components/button-group/index.mdx +++ b/packages/docs/content/components/button-group/index.mdx @@ -12,10 +12,10 @@ Wrap a series of `` components in ``. - - For assistive technologies (ex. screen readers) to communicate that a series of buttons are grouped, a proper role attribute has to be provided. For button groups, this should be role="group", while toolbars should have a role="toolbar". +Ensure the correct role and provide a label}> + For assistive technologies (ex. screen readers) to communicate that a series of buttons are grouped, a proper `role` attribute has to be provided. For button groups, this should be `role="group"`, while toolbars should have a `role="toolbar"`. - Besides, groups and toolbars should be provided an understandable label, as most assistive technologies will otherwise not declare them, despite the appearance of the specific role attribute. In the following examples provided here, we apply aria-label, but options such as aria-labelledby can also be used. + Besides, groups and toolbars should be provided an understandable label, as most assistive technologies will otherwise not declare them, despite the appearance of the specific role attribute. In the following examples provided here, we apply `aria-label`, but options such as `aria-labelledby` can also be used. These classes can also be added to groups of links, as an alternative to the [`CNav`](./../navs-tabs/#base-nav) components. diff --git a/packages/docs/content/components/button/index.mdx b/packages/docs/content/components/button/index.mdx index 78144289..4d615ebb 100644 --- a/packages/docs/content/components/button/index.mdx +++ b/packages/docs/content/components/button/index.mdx @@ -12,12 +12,7 @@ CoreUI includes a bunch of predefined buttons components, each serving its own s - - Using color to add meaning only provides a visual indication, which will not be conveyed to users - of assistive technologies – such as screen readers. Ensure that information denoted by the color - is either obvious from the content itself (e.g. the visible text), or is included through - alternative means, such as additional text hidden with the `.visually-hidden` class. - + ## Disable text wrapping diff --git a/packages/docs/content/components/callout/index.mdx b/packages/docs/content/components/callout/index.mdx index b158e7a3..9463a3c5 100644 --- a/packages/docs/content/components/callout/index.mdx +++ b/packages/docs/content/components/callout/index.mdx @@ -12,12 +12,7 @@ Callout component is prepared for any length of text, as well as an optional ele - - Using color to add meaning only provides a visual indication, which will not be conveyed to - users of assistive technologies – such as screen readers. Ensure that information denoted by the - color is either obvious from the content itself (e.g. the visible text), or is included through - alternative means, such as additional text hidden with the `.visually-hidden` class. - + ## API diff --git a/packages/docs/content/components/card/index.mdx b/packages/docs/content/components/card/index.mdx index 97f8d81b..93f1b34e 100644 --- a/packages/docs/content/components/card/index.mdx +++ b/packages/docs/content/components/card/index.mdx @@ -140,12 +140,7 @@ Use `color` property to change the appearance of a card. - - Using color to add meaning only provides a visual indication, which will not be conveyed to - users of assistive technologies – such as screen readers. Ensure that information denoted by the - color is either obvious from the content itself (e.g. the visible text), or is included through - alternative means, such as additional text hidden with the `.visually-hidden` class. - + ### Border diff --git a/packages/docs/content/components/list-group/index.mdx b/packages/docs/content/components/list-group/index.mdx index 4137b3b4..f1f61ffb 100644 --- a/packages/docs/content/components/list-group/index.mdx +++ b/packages/docs/content/components/list-group/index.mdx @@ -54,12 +54,7 @@ Contextual classes also work with ``s or ` -

-`; - -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/__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/__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

Conveying meaning to assistive technologies

{title}

{title}

First slide label

Second slide label

Third slide label

First slide label

Second slide label

Third slide label

React Modal title