From d46f8e0a16fe7baeddd4a9849565864f598eef92 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jonas=20G=C3=B6bel?= <33429771+JonasGoebel@users.noreply.github.com> Date: Thu, 29 Feb 2024 16:43:27 +0100 Subject: [PATCH 001/164] Fixed typo yyou -> you --- packages/docs/content/forms/input-mask.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/docs/content/forms/input-mask.mdx b/packages/docs/content/forms/input-mask.mdx index 8c682e77..5f005cd6 100644 --- a/packages/docs/content/forms/input-mask.mdx +++ b/packages/docs/content/forms/input-mask.mdx @@ -1,7 +1,7 @@ --- title: React Input Mask name: Input mask -description: React input masks allow you to regulate the format of data entered. Yyou can enhance data entry accuracy by implementing react input masks for fields with consistent formatting requirements. This ensures that users input data correctly, such as accurately formatted phone numbers in a designated phone number field. +description: React input masks allow you to regulate the format of data entered. You can enhance data entry accuracy by implementing react input masks for fields with consistent formatting requirements. This ensures that users input data correctly, such as accurately formatted phone numbers in a designated phone number field. menu: Forms route: /forms/input-mask --- From 93da79593b8d50dd9944f5559a2237fa1f5ecbea Mon Sep 17 00:00:00 2001 From: mrholek Date: Wed, 6 Mar 2024 19:49:44 +0100 Subject: [PATCH 002/164] chore: update dependencies and devDependencies MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit @typescript-eslint/eslint-plugin ^6.15.0 → ^7.1.1 @typescript-eslint/parser ^6.15.0 → ^7.1.1 eslint 8.56.0 → 8.57.0 eslint-plugin-prettier ^5.1.2 → ^5.1.3 eslint-plugin-react ^7.33.2 → ^7.34.0 eslint-plugin-unicorn ^50.0.1 → ^51.0.1 lerna ^8.0.1 → ^8.1.2 prettier ^3.1.1 → ^3.2.5 --- package.json | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/package.json b/package.json index 958a6a08..b9367afa 100644 --- a/package.json +++ b/package.json @@ -22,17 +22,17 @@ "test:update": "npm-run-all charts:test:update icons:test:update lib:test:update" }, "devDependencies": { - "@typescript-eslint/eslint-plugin": "^6.15.0", - "@typescript-eslint/parser": "^6.15.0", - "eslint": "8.56.0", + "@typescript-eslint/eslint-plugin": "^7.1.1", + "@typescript-eslint/parser": "^7.1.1", + "eslint": "8.57.0", "eslint-config-prettier": "^9.1.0", - "eslint-plugin-prettier": "^5.1.2", - "eslint-plugin-react": "^7.33.2", + "eslint-plugin-prettier": "^5.1.3", + "eslint-plugin-react": "^7.34.0", "eslint-plugin-react-hooks": "^4.6.0", - "eslint-plugin-unicorn": "^50.0.1", - "lerna": "^8.0.1", + "eslint-plugin-unicorn": "^51.0.1", + "lerna": "^8.1.2", "npm-run-all": "^4.1.5", - "prettier": "^3.1.1" + "prettier": "^3.2.5" }, "overrides": { "gatsby-remark-external-links": { From 48ed83f796db263f9e2e302eefd56cdbf63b0bf0 Mon Sep 17 00:00:00 2001 From: mrholek Date: Wed, 6 Mar 2024 19:50:49 +0100 Subject: [PATCH 003/164] chore: update dependencies and devDependencies MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit @rollup/plugin-typescript ^11.1.5 → ^11.1.6 @testing-library/jest-dom ^6.1.5 → ^6.4.2 @testing-library/react ^14.1.2 → ^14.2.1 @types/jest ^29.5.11 → ^29.5.12 @types/react 18.2.45 → 18.2.63 @types/react-dom ^18.2.18 → ^18.2.20 classnames ^2.3.2 → ^2.5.1 rollup ^4.9.1 → ^4.12.1 ts-jest ^29.1.1 → ^29.1.2 typescript ^5.3.3 → ^5.4.2 --- packages/coreui-react/package.json | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/packages/coreui-react/package.json b/packages/coreui-react/package.json index 42b93517..37ada8ef 100644 --- a/packages/coreui-react/package.json +++ b/packages/coreui-react/package.json @@ -48,24 +48,24 @@ "devDependencies": { "@rollup/plugin-commonjs": "^25.0.7", "@rollup/plugin-node-resolve": "^15.2.3", - "@rollup/plugin-typescript": "^11.1.5", - "@testing-library/jest-dom": "^6.1.5", - "@testing-library/react": "^14.1.2", - "@types/jest": "^29.5.11", - "@types/react": "18.2.45", - "@types/react-dom": "^18.2.18", + "@rollup/plugin-typescript": "^11.1.6", + "@testing-library/jest-dom": "^6.4.2", + "@testing-library/react": "^14.2.1", + "@types/jest": "^29.5.12", + "@types/react": "18.2.63", + "@types/react-dom": "^18.2.20", "@types/react-transition-group": "^4.4.10", - "classnames": "^2.3.2", + "classnames": "^2.5.1", "cross-env": "^7.0.3", "jest": "^29.7.0", "jest-environment-jsdom": "^29.7.0", "react": "^18.2.0", "react-dom": "^18.2.0", "react-transition-group": "^4.4.5", - "rollup": "^4.9.1", - "ts-jest": "^29.1.1", + "rollup": "^4.12.1", + "ts-jest": "^29.1.2", "tslib": "^2.6.2", - "typescript": "^5.3.3" + "typescript": "^5.4.2" }, "peerDependencies": { "react": ">=17", From 2075aba10090bbfb564d44d5518d83ff05fc5832 Mon Sep 17 00:00:00 2001 From: mrholek Date: Wed, 6 Mar 2024 19:53:56 +0100 Subject: [PATCH 004/164] chore: update dependencies and devDependencies MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit gatsby ^5.13.1 → ^5.13.3 gatsby-plugin-google-tagmanager ^5.13.0 → ^5.13.1 gatsby-plugin-image ^3.13.0 → ^3.13.1 gatsby-plugin-manifest ^5.13.0 → ^5.13.1 gatsby-plugin-mdx ^5.13.0 → ^5.13.1 gatsby-plugin-offline ^6.13.0 → ^6.13.1 gatsby-plugin-react-helmet ^6.13.0 → ^6.13.1 gatsby-plugin-sass ^6.13.0 → ^6.13.1 gatsby-plugin-sharp ^5.13.0 → ^5.13.1 gatsby-plugin-sitemap ^6.13.0 → ^6.13.1 gatsby-remark-autolink-headers ^6.13.0 → ^6.13.1 gatsby-source-filesystem ^5.13.0 → ^5.13.1 gatsby-transformer-sharp ^5.13.0 → ^5.13.1 react-imask ^7.2.1 → ^7.5.0 sass ^1.69.5 → ^1.71.1 --- packages/docs/package.json | 30 +++++++++++++++--------------- 1 file changed, 15 insertions(+), 15 deletions(-) diff --git a/packages/docs/package.json b/packages/docs/package.json index b5848723..d3246edb 100644 --- a/packages/docs/package.json +++ b/packages/docs/package.json @@ -34,20 +34,20 @@ "@mdx-js/mdx": "^2.3.0", "@mdx-js/react": "^2.3.0", "@types/react-helmet": "^6.1.11", - "gatsby": "^5.13.1", - "gatsby-plugin-google-tagmanager": "^5.13.0", - "gatsby-plugin-image": "^3.13.0", - "gatsby-plugin-manifest": "^5.13.0", - "gatsby-plugin-mdx": "^5.13.0", - "gatsby-plugin-offline": "^6.13.0", - "gatsby-plugin-react-helmet": "^6.13.0", - "gatsby-plugin-sass": "^6.13.0", - "gatsby-plugin-sharp": "^5.13.0", - "gatsby-plugin-sitemap": "^6.13.0", - "gatsby-remark-autolink-headers": "^6.13.0", + "gatsby": "^5.13.3", + "gatsby-plugin-google-tagmanager": "^5.13.1", + "gatsby-plugin-image": "^3.13.1", + "gatsby-plugin-manifest": "^5.13.1", + "gatsby-plugin-mdx": "^5.13.1", + "gatsby-plugin-offline": "^6.13.1", + "gatsby-plugin-react-helmet": "^6.13.1", + "gatsby-plugin-sass": "^6.13.1", + "gatsby-plugin-sharp": "^5.13.1", + "gatsby-plugin-sitemap": "^6.13.1", + "gatsby-remark-autolink-headers": "^6.13.1", "gatsby-remark-external-links": "^0.0.4", - "gatsby-source-filesystem": "^5.13.0", - "gatsby-transformer-sharp": "^5.13.0", + "gatsby-source-filesystem": "^5.13.1", + "gatsby-transformer-sharp": "^5.13.1", "glob": "^7.2.3", "globby": "^11.1.0", "prism-react-renderer": "^2.3.1", @@ -57,9 +57,9 @@ "react-docgen-typescript": "^2.2.2", "react-dom": "^18.2.0", "react-helmet": "^6.1.0", - "react-imask": "^7.2.1", + "react-imask": "^7.5.0", "rimraf": "^5.0.5", - "sass": "^1.69.5" + "sass": "^1.71.1" }, "devDependencies": { "npm-run-all": "^4.1.5" From 1f6810c19729b233b85e982a59cc654ab536e765 Mon Sep 17 00:00:00 2001 From: mrholek Date: Wed, 6 Mar 2024 19:56:50 +0100 Subject: [PATCH 005/164] docs: update current year --- 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 027b8813..94e4f4d1 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ MIT License -Copyright (c) 2023 creativeLabs Łukasz Holeczek +Copyright (c) 2024 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 6667eae7..35dca082 100644 --- a/README.md +++ b/README.md @@ -226,4 +226,4 @@ CoreUI is an MIT-licensed open source project and is completely free to use. How ## Copyright and license -Copyright 2023 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 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 diff --git a/packages/coreui-react/LICENSE b/packages/coreui-react/LICENSE index 027b8813..94e4f4d1 100644 --- a/packages/coreui-react/LICENSE +++ b/packages/coreui-react/LICENSE @@ -1,6 +1,6 @@ MIT License -Copyright (c) 2023 creativeLabs Łukasz Holeczek +Copyright (c) 2024 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 77b1731b..4e7b42a9 100644 --- a/packages/coreui-react/README.md +++ b/packages/coreui-react/README.md @@ -258,4 +258,4 @@ Thanks to all the backers and sponsors! Support this project by [becoming a back ## Copyright and license -Copyright 2023 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 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/). diff --git a/packages/docs/content/components/footer.mdx b/packages/docs/content/components/footer.mdx index a1b380c8..93af9b9b 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/src/index'
CoreUI - © 2023 creativeLabs. + © 2024 creativeLabs.
Powered by From 5775ccf431a25ce77b86306ebdff16daf5891bb0 Mon Sep 17 00:00:00 2001 From: mrholek Date: Thu, 7 Mar 2024 00:05:10 +0100 Subject: [PATCH 006/164] refactor(CBadge): update badge colors --- packages/coreui-react/src/components/badge/CBadge.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/coreui-react/src/components/badge/CBadge.tsx b/packages/coreui-react/src/components/badge/CBadge.tsx index 3618b1cc..e9bcac36 100644 --- a/packages/coreui-react/src/components/badge/CBadge.tsx +++ b/packages/coreui-react/src/components/badge/CBadge.tsx @@ -65,7 +65,7 @@ export const CBadge: PolymorphicRefForwardingComponent<'span', CBadgeProps> = fo className={classNames( 'badge', { - [`bg-${color}`]: color, + [`text-bg-${color}`]: color, 'position-absolute translate-middle': position, 'top-0': position?.includes('top'), 'top-100': position?.includes('bottom'), From ba92758316407ca7c25111d06ee31fc178474571 Mon Sep 17 00:00:00 2001 From: mrholek Date: Thu, 7 Mar 2024 00:33:21 +0100 Subject: [PATCH 007/164] chore: update dependencies and devDependencies MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit @coreui/coreui ^5.0.0-rc.1 → ^5.0.0-rc-2 @docsearch/css ^3.5.2 → ^3.6.0 --- packages/docs/package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/docs/package.json b/packages/docs/package.json index d3246edb..af9573c2 100644 --- a/packages/docs/package.json +++ b/packages/docs/package.json @@ -25,12 +25,12 @@ }, "dependencies": { "@coreui/chartjs": "^4.0.0-rc.0", - "@coreui/coreui": "^5.0.0-rc.1", + "@coreui/coreui": "^5.0.0-rc-2", "@coreui/icons": "^3.0.1", "@coreui/icons-react": "^2.2.1", "@coreui/react-chartjs": "^3.0.0-rc.0", "@coreui/utils": "^2.0.2", - "@docsearch/css": "^3.5.2", + "@docsearch/css": "^3.6.0", "@mdx-js/mdx": "^2.3.0", "@mdx-js/react": "^2.3.0", "@types/react-helmet": "^6.1.11", From 504e892cb259815c81abd5da627a2ea1b20decda Mon Sep 17 00:00:00 2001 From: mrholek Date: Thu, 7 Mar 2024 11:44:54 +0100 Subject: [PATCH 008/164] docs: update API documentation --- packages/docs/content/api/CAlertHeading.api.mdx | 2 +- packages/docs/content/api/CBadge.api.mdx | 2 +- packages/docs/content/api/CButton.api.mdx | 2 +- packages/docs/content/api/CCardHeader.api.mdx | 2 +- packages/docs/content/api/CCardImage.api.mdx | 2 +- packages/docs/content/api/CCardSubtitle.api.mdx | 2 +- packages/docs/content/api/CCardText.api.mdx | 2 +- packages/docs/content/api/CCardTitle.api.mdx | 2 +- packages/docs/content/api/CDropdown.api.mdx | 2 +- packages/docs/content/api/CDropdownHeader.api.mdx | 2 +- packages/docs/content/api/CDropdownItem.api.mdx | 2 +- packages/docs/content/api/CDropdownItemPlain.api.mdx | 2 +- packages/docs/content/api/CDropdownMenu.api.mdx | 2 +- packages/docs/content/api/CDropdownToggle.api.mdx | 2 +- packages/docs/content/api/CFormFeedback.api.mdx | 2 +- packages/docs/content/api/CFormText.api.mdx | 2 +- packages/docs/content/api/CHeaderBrand.api.mdx | 2 +- packages/docs/content/api/CHeaderNav.api.mdx | 2 +- packages/docs/content/api/CInputGroupText.api.mdx | 2 +- packages/docs/content/api/CLink.api.mdx | 2 +- packages/docs/content/api/CListGroup.api.mdx | 2 +- packages/docs/content/api/CListGroupItem.api.mdx | 2 +- packages/docs/content/api/CModalTitle.api.mdx | 2 +- packages/docs/content/api/CNav.api.mdx | 2 +- packages/docs/content/api/CNavGroup.api.mdx | 2 +- packages/docs/content/api/CNavGroupItems.api.mdx | 2 +- packages/docs/content/api/CNavItem.api.mdx | 2 +- packages/docs/content/api/CNavLink.api.mdx | 2 +- packages/docs/content/api/CNavTitle.api.mdx | 2 +- packages/docs/content/api/CNavbar.api.mdx | 2 +- packages/docs/content/api/CNavbarBrand.api.mdx | 2 +- packages/docs/content/api/CNavbarNav.api.mdx | 2 +- packages/docs/content/api/COffcanvasTitle.api.mdx | 2 +- packages/docs/content/api/CPlaceholder.api.mdx | 2 +- packages/docs/content/api/CSidebarBrand.api.mdx | 1 + packages/docs/content/api/CSidebarNav.api.mdx | 2 +- packages/docs/content/api/CSpinner.api.mdx | 2 +- 37 files changed, 37 insertions(+), 36 deletions(-) diff --git a/packages/docs/content/api/CAlertHeading.api.mdx b/packages/docs/content/api/CAlertHeading.api.mdx index a3eff526..25150dea 100644 --- a/packages/docs/content/api/CAlertHeading.api.mdx +++ b/packages/docs/content/api/CAlertHeading.api.mdx @@ -7,5 +7,5 @@ import CAlertHeading from '@coreui/react/src/components/alert/CAlertHeading' | Property | Description | Type | Default | | --- | --- | --- | --- | -| **as** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'h4')` \| `(ElementType & 'slot')` \| `(ElementType & 'style')` \| `... 173 more ...` \| `(ElementType & FunctionComponent<...>)` | - | +| **as** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'h4')` \| `(ElementType & 'slot')` \| `(ElementType & 'style')` \| `... 174 more ...` \| `(ElementType & FunctionComponent<...>)` | - | | **className** | A string of all className you want applied to the base component. | `string` | - | diff --git a/packages/docs/content/api/CBadge.api.mdx b/packages/docs/content/api/CBadge.api.mdx index e5140402..018998c7 100644 --- a/packages/docs/content/api/CBadge.api.mdx +++ b/packages/docs/content/api/CBadge.api.mdx @@ -7,7 +7,7 @@ import CBadge from '@coreui/react/src/components/badge/CBadge' | Property | Description | Type | Default | | --- | --- | --- | --- | -| **as** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'span')` \| `(ElementType & 'slot')` \| `(ElementType & 'style')` \| `... 173 more ...` \| `(ElementType & FunctionComponent<...>)` | - | +| **as** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'span')` \| `(ElementType & 'slot')` \| `(ElementType & 'style')` \| `... 174 more ...` \| `(ElementType & FunctionComponent<...>)` | - | | **className** | A string of all className you want applied to the component. | `string` | - | | **color** | Sets the color context of the component to one of CoreUI’s themed colors. | `'primary'` \| `'secondary'` \| `'success'` \| `'danger'` \| `'warning'` \| `'info'` \| `'dark'` \| `'light'` \| `string` | - | | **position** | Position badge in one of the corners of a link or button. | `'top-start'` \| `'top-end'` \| `'bottom-end'` \| `'bottom-start'` | - | diff --git a/packages/docs/content/api/CButton.api.mdx b/packages/docs/content/api/CButton.api.mdx index f397ac3e..68209926 100644 --- a/packages/docs/content/api/CButton.api.mdx +++ b/packages/docs/content/api/CButton.api.mdx @@ -8,7 +8,7 @@ import CButton from '@coreui/react/src/components/button/CButton' | Property | Description | Type | Default | | --- | --- | --- | --- | | **active** | Toggle the active state for the component. | `boolean` | - | -| **as** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'button')` \| `(ElementType & 'cite')` \| `(ElementType & 'data')` \| `... 173 more ...` \| `(ElementType & FunctionComponent<...>)` | button | +| **as** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'button')` \| `(ElementType & 'cite')` \| `(ElementType & 'data')` \| `... 174 more ...` \| `(ElementType & FunctionComponent<...>)` | button | | **className** | A string of all className you want applied to the base component. | `string` | - | | **color** | Sets the color context of the component to one of CoreUI’s themed colors. | `'primary'` \| `'secondary'` \| `'success'` \| `'danger'` \| `'warning'` \| `'info'` \| `'dark'` \| `'light'` \| `string` | - | | **disabled** | Toggle the disabled state for the component. | `boolean` | - | diff --git a/packages/docs/content/api/CCardHeader.api.mdx b/packages/docs/content/api/CCardHeader.api.mdx index e1c2cd92..6b860868 100644 --- a/packages/docs/content/api/CCardHeader.api.mdx +++ b/packages/docs/content/api/CCardHeader.api.mdx @@ -7,5 +7,5 @@ import CCardHeader from '@coreui/react/src/components/card/CCardHeader' | Property | Description | Type | Default | | --- | --- | --- | --- | -| **as** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'div')` \| `(ElementType & 'slot')` \| `(ElementType & 'style')` \| `... 173 more ...` \| `(ElementType & FunctionComponent<...>)` | - | +| **as** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'div')` \| `(ElementType & 'slot')` \| `(ElementType & 'style')` \| `... 174 more ...` \| `(ElementType & FunctionComponent<...>)` | - | | **className** | A string of all className you want applied to the base component. | `string` | - | diff --git a/packages/docs/content/api/CCardImage.api.mdx b/packages/docs/content/api/CCardImage.api.mdx index 04b80516..beb4d840 100644 --- a/packages/docs/content/api/CCardImage.api.mdx +++ b/packages/docs/content/api/CCardImage.api.mdx @@ -7,6 +7,6 @@ import CCardImage from '@coreui/react/src/components/card/CCardImage' | Property | Description | Type | Default | | --- | --- | --- | --- | -| **as** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'img')` \| `(ElementType & 'slot')` \| `(ElementType & 'style')` \| `... 173 more ...` \| `(ElementType & FunctionComponent<...>)` | - | +| **as** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'img')` \| `(ElementType & 'slot')` \| `(ElementType & 'style')` \| `... 174 more ...` \| `(ElementType & FunctionComponent<...>)` | - | | **className** | A string of all className you want applied to the base component. | `string` | - | | **orientation** | Optionally orientate the image to the top, bottom, or make it overlaid across the card. | `'top'` \| `'bottom'` | - | diff --git a/packages/docs/content/api/CCardSubtitle.api.mdx b/packages/docs/content/api/CCardSubtitle.api.mdx index 1171869d..0abb9a3c 100644 --- a/packages/docs/content/api/CCardSubtitle.api.mdx +++ b/packages/docs/content/api/CCardSubtitle.api.mdx @@ -7,5 +7,5 @@ import CCardSubtitle from '@coreui/react/src/components/card/CCardSubtitle' | Property | Description | Type | Default | | --- | --- | --- | --- | -| **as** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'h6')` \| `(ElementType & 'slot')` \| `(ElementType & 'style')` \| `... 173 more ...` \| `(ElementType & FunctionComponent<...>)` | - | +| **as** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'h6')` \| `(ElementType & 'slot')` \| `(ElementType & 'style')` \| `... 174 more ...` \| `(ElementType & FunctionComponent<...>)` | - | | **className** | A string of all className you want applied to the component. | `string` | - | diff --git a/packages/docs/content/api/CCardText.api.mdx b/packages/docs/content/api/CCardText.api.mdx index 9775fd93..da5e9199 100644 --- a/packages/docs/content/api/CCardText.api.mdx +++ b/packages/docs/content/api/CCardText.api.mdx @@ -7,5 +7,5 @@ import CCardText from '@coreui/react/src/components/card/CCardText' | Property | Description | Type | Default | | --- | --- | --- | --- | -| **as** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'p')` \| `(ElementType & 'slot')` \| `(ElementType & 'style')` \| `... 173 more ...` \| `(ElementType & FunctionComponent<...>)` | - | +| **as** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'p')` \| `(ElementType & 'slot')` \| `(ElementType & 'style')` \| `... 174 more ...` \| `(ElementType & FunctionComponent<...>)` | - | | **className** | A string of all className you want applied to the component. | `string` | - | diff --git a/packages/docs/content/api/CCardTitle.api.mdx b/packages/docs/content/api/CCardTitle.api.mdx index 246bf145..718ea102 100644 --- a/packages/docs/content/api/CCardTitle.api.mdx +++ b/packages/docs/content/api/CCardTitle.api.mdx @@ -7,5 +7,5 @@ import CCardTitle from '@coreui/react/src/components/card/CCardTitle' | Property | Description | Type | Default | | --- | --- | --- | --- | -| **as** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'h5')` \| `(ElementType & 'slot')` \| `(ElementType & 'style')` \| `... 173 more ...` \| `(ElementType & FunctionComponent<...>)` | - | +| **as** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'h5')` \| `(ElementType & 'slot')` \| `(ElementType & 'style')` \| `... 174 more ...` \| `(ElementType & FunctionComponent<...>)` | - | | **className** | A string of all className you want applied to the component. | `string` | - | diff --git a/packages/docs/content/api/CDropdown.api.mdx b/packages/docs/content/api/CDropdown.api.mdx index c0561fc7..f9c7bd9b 100644 --- a/packages/docs/content/api/CDropdown.api.mdx +++ b/packages/docs/content/api/CDropdown.api.mdx @@ -8,7 +8,7 @@ import CDropdown from '@coreui/react/src/components/dropdown/CDropdown' | Property | Description | Type | Default | | --- | --- | --- | --- | | **alignment** | Set aligment of dropdown menu. | `'start'` \| `'end'` \| `{ xs: 'start'` \| `'end' }` \| `{ sm: 'start'` \| `'end' }` \| `{ md: 'start'` \| `'end' }` \| `{ lg: 'start'` \| `'end' }` \| `{ xl: 'start'` \| `'end'}` \| `{ xxl: 'start'` \| `'end'}` | - | -| **as** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'div')` \| `(ElementType & 'slot')` \| `(ElementType & 'style')` \| `... 173 more ...` \| `(ElementType & FunctionComponent<...>)` | div | +| **as** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'div')` \| `(ElementType & 'slot')` \| `(ElementType & 'style')` \| `... 174 more ...` \| `(ElementType & FunctionComponent<...>)` | div | | **autoClose** | Configure the auto close behavior of the dropdown:
- `true` - the dropdown will be closed by clicking outside or inside the dropdown menu.
- `false` - the dropdown will be closed by clicking the toggle button and manually calling hide or toggle method. (Also will not be closed by pressing esc key)
- `'inside'` - the dropdown will be closed (only) by clicking inside the dropdown menu.
- `'outside'` - the dropdown will be closed (only) by clicking outside the dropdown menu. | `boolean` \| `'inside'` \| `'outside'` | true | | **className** | A string of all className you want applied to the base component. | `string` | - | | **container** **_v4.11.0+_** | Appends the react dropdown menu to a specific element. You can pass an HTML element or function that returns a single element. By default `document.body`. | `Element` \| `(() => Element)` | - | diff --git a/packages/docs/content/api/CDropdownHeader.api.mdx b/packages/docs/content/api/CDropdownHeader.api.mdx index e0d5a9c1..f8f2f909 100644 --- a/packages/docs/content/api/CDropdownHeader.api.mdx +++ b/packages/docs/content/api/CDropdownHeader.api.mdx @@ -7,5 +7,5 @@ import CDropdownHeader from '@coreui/react/src/components/dropdown/CDropdownHead | Property | Description | Type | Default | | --- | --- | --- | --- | -| **as** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'h6')` \| `(ElementType & 'slot')` \| `(ElementType & 'style')` \| `... 173 more ...` \| `(ElementType & FunctionComponent<...>)` | - | +| **as** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'h6')` \| `(ElementType & 'slot')` \| `(ElementType & 'style')` \| `... 174 more ...` \| `(ElementType & FunctionComponent<...>)` | - | | **className** | A string of all className you want applied to the component. | `string` | - | diff --git a/packages/docs/content/api/CDropdownItem.api.mdx b/packages/docs/content/api/CDropdownItem.api.mdx index 753be2e7..a3aa0617 100644 --- a/packages/docs/content/api/CDropdownItem.api.mdx +++ b/packages/docs/content/api/CDropdownItem.api.mdx @@ -8,7 +8,7 @@ import CDropdownItem from '@coreui/react/src/components/dropdown/CDropdownItem' | Property | Description | Type | Default | | --- | --- | --- | --- | | **active** | Toggle the active state for the component. | `boolean` | - | -| **as** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'a')` \| `(ElementType & 'cite')` \| `(ElementType & 'data')` \| `... 173 more ...` \| `(ElementType & FunctionComponent<...>)` | a | +| **as** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'a')` \| `(ElementType & 'cite')` \| `(ElementType & 'data')` \| `... 174 more ...` \| `(ElementType & FunctionComponent<...>)` | a | | **className** | A string of all className you want applied to the component. | `string` | - | | **disabled** | Toggle the disabled state for the component. | `boolean` | - | | **href** | The href attribute specifies the URL of the page the link goes to. | `string` | - | diff --git a/packages/docs/content/api/CDropdownItemPlain.api.mdx b/packages/docs/content/api/CDropdownItemPlain.api.mdx index c6fca064..64737fa7 100644 --- a/packages/docs/content/api/CDropdownItemPlain.api.mdx +++ b/packages/docs/content/api/CDropdownItemPlain.api.mdx @@ -7,5 +7,5 @@ import CDropdownItemPlain from '@coreui/react/src/components/dropdown/CDropdownI | Property | Description | Type | Default | | --- | --- | --- | --- | -| **as** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'span')` \| `(ElementType & 'slot')` \| `(ElementType & 'style')` \| `... 173 more ...` \| `(ElementType & FunctionComponent<...>)` | - | +| **as** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'span')` \| `(ElementType & 'slot')` \| `(ElementType & 'style')` \| `... 174 more ...` \| `(ElementType & FunctionComponent<...>)` | - | | **className** | A string of all className you want applied to the component. | `string` | - | diff --git a/packages/docs/content/api/CDropdownMenu.api.mdx b/packages/docs/content/api/CDropdownMenu.api.mdx index e6b34e93..05b746f4 100644 --- a/packages/docs/content/api/CDropdownMenu.api.mdx +++ b/packages/docs/content/api/CDropdownMenu.api.mdx @@ -7,5 +7,5 @@ import CDropdownMenu from '@coreui/react/src/components/dropdown/CDropdownMenu' | Property | Description | Type | Default | | --- | --- | --- | --- | -| **as** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'ul')` \| `(ElementType & 'slot')` \| `(ElementType & 'style')` \| `... 173 more ...` \| `(ElementType & FunctionComponent<...>)` | - | +| **as** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'ul')` \| `(ElementType & 'slot')` \| `(ElementType & 'style')` \| `... 174 more ...` \| `(ElementType & FunctionComponent<...>)` | - | | **className** | A string of all className you want applied to the base component. | `string` | - | diff --git a/packages/docs/content/api/CDropdownToggle.api.mdx b/packages/docs/content/api/CDropdownToggle.api.mdx index d03bfb4e..b37bdc9c 100644 --- a/packages/docs/content/api/CDropdownToggle.api.mdx +++ b/packages/docs/content/api/CDropdownToggle.api.mdx @@ -15,7 +15,7 @@ import CDropdownToggle from '@coreui/react/src/components/dropdown/CDropdownTogg | **custom** | Create a custom toggler which accepts any content. | `boolean` | - | | **disabled** | Toggle the disabled state for the component. | `boolean` | - | | **href** | The href attribute specifies the URL of the page the link goes to. | `string` | - | -| **navLink** **_v5.0.0-rc.1+_** | If a dropdown `variant` is set to `nav-item` then render the toggler as a link instead of a button. | `boolean` | true | +| **navLink** **_v5.0.0-rc.2+_** | If a dropdown `variant` is set to `nav-item` then render the toggler as a link instead of a button. | `boolean` | true | | **role** | The role attribute describes the role of an element in programs that can make use of it, such as screen readers or magnifiers. | `string` | - | | **shape** | Select the shape of the component. | `'rounded'` \| `'rounded-top'` \| `'rounded-end'` \| `'rounded-bottom'` \| `'rounded-start'` \| `'rounded-circle'` \| `'rounded-pill'` \| `'rounded-0'` \| `'rounded-1'` \| `'rounded-2'` \| `'rounded-3'` \| `string` | - | | **size** | Size the component small or large. | `'sm'` \| `'lg'` | - | diff --git a/packages/docs/content/api/CFormFeedback.api.mdx b/packages/docs/content/api/CFormFeedback.api.mdx index d508d28b..f763006a 100644 --- a/packages/docs/content/api/CFormFeedback.api.mdx +++ b/packages/docs/content/api/CFormFeedback.api.mdx @@ -7,7 +7,7 @@ import CFormFeedback from '@coreui/react/src/components/form/CFormFeedback' | Property | Description | Type | Default | | --- | --- | --- | --- | -| **as** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'div')` \| `(ElementType & 'slot')` \| `(ElementType & 'style')` \| `... 173 more ...` \| `(ElementType & FunctionComponent<...>)` | - | +| **as** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'div')` \| `(ElementType & 'slot')` \| `(ElementType & 'style')` \| `... 174 more ...` \| `(ElementType & FunctionComponent<...>)` | - | | **className** | A string of all className you want applied to the component. | `string` | - | | **invalid** | Method called immediately after the `value` prop changes. | `boolean` | - | | **tooltip** | If your form layout allows it, you can display validation feedback in a styled tooltip. | `boolean` | - | diff --git a/packages/docs/content/api/CFormText.api.mdx b/packages/docs/content/api/CFormText.api.mdx index 7007d300..98e40c42 100644 --- a/packages/docs/content/api/CFormText.api.mdx +++ b/packages/docs/content/api/CFormText.api.mdx @@ -7,5 +7,5 @@ import CFormText from '@coreui/react/src/components/form/CFormText' | Property | Description | Type | Default | | --- | --- | --- | --- | -| **as** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'div')` \| `(ElementType & 'slot')` \| `(ElementType & 'style')` \| `... 173 more ...` \| `(ElementType & FunctionComponent<...>)` | - | +| **as** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'div')` \| `(ElementType & 'slot')` \| `(ElementType & 'style')` \| `... 174 more ...` \| `(ElementType & FunctionComponent<...>)` | - | | **className** | A string of all className you want applied to the component. | `string` | - | diff --git a/packages/docs/content/api/CHeaderBrand.api.mdx b/packages/docs/content/api/CHeaderBrand.api.mdx index 7e0eed91..7d81e72d 100644 --- a/packages/docs/content/api/CHeaderBrand.api.mdx +++ b/packages/docs/content/api/CHeaderBrand.api.mdx @@ -7,5 +7,5 @@ import CHeaderBrand from '@coreui/react/src/components/header/CHeaderBrand' | Property | Description | Type | Default | | --- | --- | --- | --- | -| **as** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'a')` \| `(ElementType & 'slot')` \| `(ElementType & 'style')` \| `... 173 more ...` \| `(ElementType & FunctionComponent<...>)` | - | +| **as** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'a')` \| `(ElementType & 'slot')` \| `(ElementType & 'style')` \| `... 174 more ...` \| `(ElementType & FunctionComponent<...>)` | - | | **className** | A string of all className you want applied to the component. | `string` | - | diff --git a/packages/docs/content/api/CHeaderNav.api.mdx b/packages/docs/content/api/CHeaderNav.api.mdx index 724b98a7..e839f694 100644 --- a/packages/docs/content/api/CHeaderNav.api.mdx +++ b/packages/docs/content/api/CHeaderNav.api.mdx @@ -7,5 +7,5 @@ import CHeaderNav from '@coreui/react/src/components/header/CHeaderNav' | Property | Description | Type | Default | | --- | --- | --- | --- | -| **as** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'ul')` \| `(ElementType & 'slot')` \| `(ElementType & 'style')` \| `... 173 more ...` \| `(ElementType & FunctionComponent<...>)` | - | +| **as** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'ul')` \| `(ElementType & 'slot')` \| `(ElementType & 'style')` \| `... 174 more ...` \| `(ElementType & FunctionComponent<...>)` | - | | **className** | A string of all className you want applied to the component. | `string` | - | diff --git a/packages/docs/content/api/CInputGroupText.api.mdx b/packages/docs/content/api/CInputGroupText.api.mdx index f3bd82e5..b76f7fd8 100644 --- a/packages/docs/content/api/CInputGroupText.api.mdx +++ b/packages/docs/content/api/CInputGroupText.api.mdx @@ -7,5 +7,5 @@ import CInputGroupText from '@coreui/react/src/components/form/CInputGroupText' | Property | Description | Type | Default | | --- | --- | --- | --- | -| **as** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'span')` \| `(ElementType & 'form')` \| `(ElementType & 'slot')` \| `... 173 more ...` \| `(ElementType & FunctionComponent<...>)` | - | +| **as** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'span')` \| `(ElementType & 'form')` \| `(ElementType & 'slot')` \| `... 174 more ...` \| `(ElementType & FunctionComponent<...>)` | - | | **className** | A string of all className you want applied to the component. | `string` | - | diff --git a/packages/docs/content/api/CLink.api.mdx b/packages/docs/content/api/CLink.api.mdx index 001aeb90..e2993154 100644 --- a/packages/docs/content/api/CLink.api.mdx +++ b/packages/docs/content/api/CLink.api.mdx @@ -8,7 +8,7 @@ import CLink from '@coreui/react/src/components/link/CLink' | Property | Description | Type | Default | | --- | --- | --- | --- | | **active** | Toggle the active state for the component. | `boolean` | - | -| **as** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'a')` \| `(ElementType & 'cite')` \| `(ElementType & 'data')` \| `... 173 more ...` \| `(ElementType & FunctionComponent<...>)` | - | +| **as** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'a')` \| `(ElementType & 'cite')` \| `(ElementType & 'data')` \| `... 174 more ...` \| `(ElementType & FunctionComponent<...>)` | - | | **className** | A string of all className you want applied to the component. | `string` | - | | **disabled** | Toggle the disabled state for the component. | `boolean` | - | | **href** | The href attribute specifies the URL of the page the link goes to. | `string` | - | diff --git a/packages/docs/content/api/CListGroup.api.mdx b/packages/docs/content/api/CListGroup.api.mdx index f8c39cd4..b2bbff7e 100644 --- a/packages/docs/content/api/CListGroup.api.mdx +++ b/packages/docs/content/api/CListGroup.api.mdx @@ -7,7 +7,7 @@ import CListGroup from '@coreui/react/src/components/list-group/CListGroup' | Property | Description | Type | Default | | --- | --- | --- | --- | -| **as** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'ul')` \| `(ElementType & 'slot')` \| `(ElementType & 'style')` \| `... 173 more ...` \| `(ElementType & FunctionComponent<...>)` | - | +| **as** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'ul')` \| `(ElementType & 'slot')` \| `(ElementType & 'style')` \| `... 174 more ...` \| `(ElementType & FunctionComponent<...>)` | - | | **className** | A string of all className you want applied to the component. | `string` | - | | **flush** | Remove some borders and rounded corners to render list group items edge-to-edge in a parent component (e.g., ``). | `boolean` | - | | **layout** | Specify a layout type. | `'horizontal'` \| `'horizontal-sm'` \| `'horizontal-md'` \| `'horizontal-lg'` \| `'horizontal-xl'` \| `'horizontal-xxl'` | - | diff --git a/packages/docs/content/api/CListGroupItem.api.mdx b/packages/docs/content/api/CListGroupItem.api.mdx index 25828447..b39ab4f1 100644 --- a/packages/docs/content/api/CListGroupItem.api.mdx +++ b/packages/docs/content/api/CListGroupItem.api.mdx @@ -8,7 +8,7 @@ import CListGroupItem from '@coreui/react/src/components/list-group/CListGroupIt | Property | Description | Type | Default | | --- | --- | --- | --- | | **active** | Toggle the active state for the component. | `boolean` | - | -| **as** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'li')` \| `(ElementType & 'slot')` \| `(ElementType & 'style')` \| `... 173 more ...` \| `(ElementType & FunctionComponent<...>)` | li | +| **as** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'li')` \| `(ElementType & 'slot')` \| `(ElementType & 'style')` \| `... 174 more ...` \| `(ElementType & FunctionComponent<...>)` | li | | **className** | A string of all className you want applied to the component. | `string` | - | | **color** | Sets the color context of the component to one of CoreUI’s themed colors. | `'primary'` \| `'secondary'` \| `'success'` \| `'danger'` \| `'warning'` \| `'info'` \| `'dark'` \| `'light'` \| `string` | - | | **disabled** | Toggle the disabled state for the component. | `boolean` | - | diff --git a/packages/docs/content/api/CModalTitle.api.mdx b/packages/docs/content/api/CModalTitle.api.mdx index 6cf2e604..c476b185 100644 --- a/packages/docs/content/api/CModalTitle.api.mdx +++ b/packages/docs/content/api/CModalTitle.api.mdx @@ -7,5 +7,5 @@ import CModalTitle from '@coreui/react/src/components/modal/CModalTitle' | Property | Description | Type | Default | | --- | --- | --- | --- | -| **as** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'h5')` \| `(ElementType & 'slot')` \| `(ElementType & 'style')` \| `... 173 more ...` \| `(ElementType & FunctionComponent<...>)` | - | +| **as** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'h5')` \| `(ElementType & 'slot')` \| `(ElementType & 'style')` \| `... 174 more ...` \| `(ElementType & FunctionComponent<...>)` | - | | **className** | A string of all className you want applied to the base component. | `string` | - | diff --git a/packages/docs/content/api/CNav.api.mdx b/packages/docs/content/api/CNav.api.mdx index f95dce53..9bb57841 100644 --- a/packages/docs/content/api/CNav.api.mdx +++ b/packages/docs/content/api/CNav.api.mdx @@ -7,7 +7,7 @@ import CNav from '@coreui/react/src/components/nav/CNav' | Property | Description | Type | Default | | --- | --- | --- | --- | -| **as** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'ul')` \| `(ElementType & 'slot')` \| `(ElementType & 'style')` \| `... 173 more ...` \| `(ElementType & FunctionComponent<...>)` | - | +| **as** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'ul')` \| `(ElementType & 'slot')` \| `(ElementType & 'style')` \| `... 174 more ...` \| `(ElementType & FunctionComponent<...>)` | - | | **className** | A string of all className you want applied to the base component. | `string` | - | | **layout** | Specify a layout type for component. | `'fill'` \| `'justified'` | - | | **variant** | Set the nav variant to tabs or pills. | `'pills'` \| `'tabs'` \| `'underline'` \| `'underline-border'` | - | diff --git a/packages/docs/content/api/CNavGroup.api.mdx b/packages/docs/content/api/CNavGroup.api.mdx index 5439e6c8..db5b84c4 100644 --- a/packages/docs/content/api/CNavGroup.api.mdx +++ b/packages/docs/content/api/CNavGroup.api.mdx @@ -7,7 +7,7 @@ import CNavGroup from '@coreui/react/src/components/nav/CNavGroup' | Property | Description | Type | Default | | --- | --- | --- | --- | -| **as** **_5.0.0-rc.1+_** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'li')` \| `(ElementType & 'slot')` \| `(ElementType & 'style')` \| `... 173 more ...` \| `(ElementType & FunctionComponent<...>)` | - | +| **as** **_5.0.0-rc.2+_** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'li')` \| `(ElementType & 'slot')` \| `(ElementType & 'style')` \| `... 174 more ...` \| `(ElementType & FunctionComponent<...>)` | - | | **className** | A string of all className you want applied to the component. | `string` | - | | **compact** | Make nav group more compact by cutting all `padding` in half. | `boolean` | - | | **toggler** | Set group toggler label. | `ReactNode` | - | diff --git a/packages/docs/content/api/CNavGroupItems.api.mdx b/packages/docs/content/api/CNavGroupItems.api.mdx index 898cbef2..9ca3a4c1 100644 --- a/packages/docs/content/api/CNavGroupItems.api.mdx +++ b/packages/docs/content/api/CNavGroupItems.api.mdx @@ -7,5 +7,5 @@ import CNavGroupItems from '@coreui/react/src/components/nav/CNavGroupItems' | Property | Description | Type | Default | | --- | --- | --- | --- | -| **as** **_5.0.0-rc.1+_** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'ul')` \| `(ElementType & 'slot')` \| `(ElementType & 'style')` \| `... 173 more ...` \| `(ElementType & FunctionComponent<...>)` | - | +| **as** **_5.0.0-rc.2+_** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'ul')` \| `(ElementType & 'slot')` \| `(ElementType & 'style')` \| `... 174 more ...` \| `(ElementType & FunctionComponent<...>)` | - | | **className** | A string of all className you want applied to the component. | `string` | - | diff --git a/packages/docs/content/api/CNavItem.api.mdx b/packages/docs/content/api/CNavItem.api.mdx index 11fa9ec0..831cef8a 100644 --- a/packages/docs/content/api/CNavItem.api.mdx +++ b/packages/docs/content/api/CNavItem.api.mdx @@ -8,7 +8,7 @@ import CNavItem from '@coreui/react/src/components/nav/CNavItem' | Property | Description | Type | Default | | --- | --- | --- | --- | | **active** | Toggle the active state for the component. | `boolean` | - | -| **as** **_5.0.0-rc.1+_** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'li')` \| `(ElementType & 'cite')` \| `(ElementType & 'data')` \| `... 173 more ...` \| `(ElementType & FunctionComponent<...>)` | - | +| **as** **_5.0.0-rc.2+_** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'li')` \| `(ElementType & 'cite')` \| `(ElementType & 'data')` \| `... 174 more ...` \| `(ElementType & FunctionComponent<...>)` | - | | **className** | A string of all className you want applied to the component. | `string` | - | | **disabled** | Toggle the disabled state for the component. | `boolean` | - | | **href** | The href attribute specifies the URL of the page the link goes to. | `string` | - | diff --git a/packages/docs/content/api/CNavLink.api.mdx b/packages/docs/content/api/CNavLink.api.mdx index 0d15284f..6d4c07e2 100644 --- a/packages/docs/content/api/CNavLink.api.mdx +++ b/packages/docs/content/api/CNavLink.api.mdx @@ -8,7 +8,7 @@ import CNavLink from '@coreui/react/src/components/nav/CNavLink' | Property | Description | Type | Default | | --- | --- | --- | --- | | **active** | Toggle the active state for the component. | `boolean` | - | -| **as** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'a')` \| `(ElementType & 'cite')` \| `(ElementType & 'data')` \| `... 173 more ...` \| `(ElementType & FunctionComponent<...>)` | - | +| **as** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'a')` \| `(ElementType & 'cite')` \| `(ElementType & 'data')` \| `... 174 more ...` \| `(ElementType & FunctionComponent<...>)` | - | | **className** | A string of all className you want applied to the component. | `string` | - | | **disabled** | Toggle the disabled state for the component. | `boolean` | - | | **href** | The href attribute specifies the URL of the page the link goes to. | `string` | - | diff --git a/packages/docs/content/api/CNavTitle.api.mdx b/packages/docs/content/api/CNavTitle.api.mdx index 68192eba..74c2c7b6 100644 --- a/packages/docs/content/api/CNavTitle.api.mdx +++ b/packages/docs/content/api/CNavTitle.api.mdx @@ -7,5 +7,5 @@ import CNavTitle from '@coreui/react/src/components/nav/CNavTitle' | Property | Description | Type | Default | | --- | --- | --- | --- | -| **as** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'li')` \| `(ElementType & 'slot')` \| `(ElementType & 'style')` \| `... 173 more ...` \| `(ElementType & FunctionComponent<...>)` | - | +| **as** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'li')` \| `(ElementType & 'slot')` \| `(ElementType & 'style')` \| `... 174 more ...` \| `(ElementType & FunctionComponent<...>)` | - | | **className** | A string of all className you want applied to the component. | `string` | - | diff --git a/packages/docs/content/api/CNavbar.api.mdx b/packages/docs/content/api/CNavbar.api.mdx index f235686f..67a11a51 100644 --- a/packages/docs/content/api/CNavbar.api.mdx +++ b/packages/docs/content/api/CNavbar.api.mdx @@ -7,7 +7,7 @@ import CNavbar from '@coreui/react/src/components/navbar/CNavbar' | Property | Description | Type | Default | | --- | --- | --- | --- | -| **as** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'nav')` \| `(ElementType & 'slot')` \| `(ElementType & 'style')` \| `... 173 more ...` \| `(ElementType & FunctionComponent<...>)` | - | +| **as** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'nav')` \| `(ElementType & 'slot')` \| `(ElementType & 'style')` \| `... 174 more ...` \| `(ElementType & FunctionComponent<...>)` | - | | **className** | A string of all className you want applied to the component. | `string` | - | | **color** | Sets the color context of the component to one of CoreUI’s themed colors. | `'primary'` \| `'secondary'` \| `'success'` \| `'danger'` \| `'warning'` \| `'info'` \| `'dark'` \| `'light'` \| `string` | - | | **colorScheme** | Sets if the color of text should be colored for a light or dark background. | `'dark'` \| `'light'` | - | diff --git a/packages/docs/content/api/CNavbarBrand.api.mdx b/packages/docs/content/api/CNavbarBrand.api.mdx index 1ef425dc..ba23022d 100644 --- a/packages/docs/content/api/CNavbarBrand.api.mdx +++ b/packages/docs/content/api/CNavbarBrand.api.mdx @@ -7,6 +7,6 @@ import CNavbarBrand from '@coreui/react/src/components/navbar/CNavbarBrand' | Property | Description | Type | Default | | --- | --- | --- | --- | -| **as** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'a')` \| `(ElementType & 'slot')` \| `(ElementType & 'style')` \| `... 173 more ...` \| `(ElementType & FunctionComponent<...>)` | - | +| **as** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'a')` \| `(ElementType & 'slot')` \| `(ElementType & 'style')` \| `... 174 more ...` \| `(ElementType & FunctionComponent<...>)` | - | | **className** | A string of all className you want applied to the component. | `string` | - | | **href** | The href attribute specifies the URL of the page the link goes to. | `string` | - | diff --git a/packages/docs/content/api/CNavbarNav.api.mdx b/packages/docs/content/api/CNavbarNav.api.mdx index 8efac9d7..0d7f3c28 100644 --- a/packages/docs/content/api/CNavbarNav.api.mdx +++ b/packages/docs/content/api/CNavbarNav.api.mdx @@ -7,5 +7,5 @@ import CNavbarNav from '@coreui/react/src/components/navbar/CNavbarNav' | Property | Description | Type | Default | | --- | --- | --- | --- | -| **as** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'ul')` \| `(ElementType & 'slot')` \| `(ElementType & 'style')` \| `... 173 more ...` \| `(ElementType & FunctionComponent<...>)` | - | +| **as** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'ul')` \| `(ElementType & 'slot')` \| `(ElementType & 'style')` \| `... 174 more ...` \| `(ElementType & FunctionComponent<...>)` | - | | **className** | A string of all className you want applied to the component. | `string` | - | diff --git a/packages/docs/content/api/COffcanvasTitle.api.mdx b/packages/docs/content/api/COffcanvasTitle.api.mdx index 847c6683..ed737933 100644 --- a/packages/docs/content/api/COffcanvasTitle.api.mdx +++ b/packages/docs/content/api/COffcanvasTitle.api.mdx @@ -7,5 +7,5 @@ import COffcanvasTitle from '@coreui/react/src/components/offcanvas/COffcanvasTi | Property | Description | Type | Default | | --- | --- | --- | --- | -| **as** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'h5')` \| `(ElementType & 'slot')` \| `(ElementType & 'style')` \| `... 173 more ...` \| `(ElementType & FunctionComponent<...>)` | - | +| **as** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'h5')` \| `(ElementType & 'slot')` \| `(ElementType & 'style')` \| `... 174 more ...` \| `(ElementType & FunctionComponent<...>)` | - | | **className** | A string of all className you want applied to the component. | `string` | - | diff --git a/packages/docs/content/api/CPlaceholder.api.mdx b/packages/docs/content/api/CPlaceholder.api.mdx index 8f003ae2..d7907a96 100644 --- a/packages/docs/content/api/CPlaceholder.api.mdx +++ b/packages/docs/content/api/CPlaceholder.api.mdx @@ -8,7 +8,7 @@ import CPlaceholder from '@coreui/react/src/components/placeholder/CPlaceholder' | Property | Description | Type | Default | | --- | --- | --- | --- | | **animation** | Set animation type to better convey the perception of something being actively loaded. | `'glow'` \| `'wave'` | - | -| **as** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'span')` \| `(ElementType & 'slot')` \| `(ElementType & 'style')` \| `... 173 more ...` \| `(ElementType & FunctionComponent<...>)` | - | +| **as** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'span')` \| `(ElementType & 'slot')` \| `(ElementType & 'style')` \| `... 174 more ...` \| `(ElementType & FunctionComponent<...>)` | - | | **className** | A string of all className you want applied to the component. | `string` | - | | **color** | Sets the color context of the component to one of CoreUI’s themed colors. | `'primary'` \| `'secondary'` \| `'success'` \| `'danger'` \| `'warning'` \| `'info'` \| `'dark'` \| `'light'` \| `string` | - | | **lg** | The number of columns on large devices (\<1200px). | `number` | - | diff --git a/packages/docs/content/api/CSidebarBrand.api.mdx b/packages/docs/content/api/CSidebarBrand.api.mdx index c570b066..ef2124a1 100644 --- a/packages/docs/content/api/CSidebarBrand.api.mdx +++ b/packages/docs/content/api/CSidebarBrand.api.mdx @@ -7,4 +7,5 @@ import CSidebarBrand from '@coreui/react/src/components/sidebar/CSidebarBrand' | Property | Description | Type | Default | | --- | --- | --- | --- | +| **as** **_5.0.0-rc.2+_** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'a')` \| `(ElementType & 'slot')` \| `(ElementType & 'style')` \| `... 174 more ...` \| `(ElementType & FunctionComponent<...>)` | - | | **className** | A string of all className you want applied to the component. | `string` | - | diff --git a/packages/docs/content/api/CSidebarNav.api.mdx b/packages/docs/content/api/CSidebarNav.api.mdx index 6aeb03b5..e81dfd7d 100644 --- a/packages/docs/content/api/CSidebarNav.api.mdx +++ b/packages/docs/content/api/CSidebarNav.api.mdx @@ -7,5 +7,5 @@ import CSidebarNav from '@coreui/react/src/components/sidebar/CSidebarNav' | Property | Description | Type | Default | | --- | --- | --- | --- | -| **as** **_5.0.0-rc.1+_** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'ul')` \| `(ElementType & 'slot')` \| `(ElementType & 'style')` \| `... 173 more ...` \| `(ElementType & FunctionComponent<...>)` | - | +| **as** **_5.0.0-rc.2+_** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'ul')` \| `(ElementType & 'slot')` \| `(ElementType & 'style')` \| `... 174 more ...` \| `(ElementType & FunctionComponent<...>)` | - | | **className** | A string of all className you want applied to the component. | `string` | - | diff --git a/packages/docs/content/api/CSpinner.api.mdx b/packages/docs/content/api/CSpinner.api.mdx index 7d36aafc..4ff6306f 100644 --- a/packages/docs/content/api/CSpinner.api.mdx +++ b/packages/docs/content/api/CSpinner.api.mdx @@ -7,7 +7,7 @@ import CSpinner from '@coreui/react/src/components/spinner/CSpinner' | Property | Description | Type | Default | | --- | --- | --- | --- | -| **as** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'div')` \| `(ElementType & 'slot')` \| `(ElementType & 'style')` \| `... 173 more ...` \| `(ElementType & FunctionComponent<...>)` | - | +| **as** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'div')` \| `(ElementType & 'slot')` \| `(ElementType & 'style')` \| `... 174 more ...` \| `(ElementType & FunctionComponent<...>)` | - | | **className** | A string of all className you want applied to the component. | `string` | - | | **color** | Sets the color context of the component to one of CoreUI’s themed colors. | `'primary'` \| `'secondary'` \| `'success'` \| `'danger'` \| `'warning'` \| `'info'` \| `'dark'` \| `'light'` \| `string` | - | | **size** | Size the component small. | `'sm'` | - | From 0c32d1cd766ff7a5bfe4ab96ef8ba7ddbe408762 Mon Sep 17 00:00:00 2001 From: mrholek Date: Thu, 7 Mar 2024 11:45:53 +0100 Subject: [PATCH 009/164] release: v5.0.0-rc.2 --- README.md | 2 +- lerna.json | 2 +- packages/coreui-react/README.md | 2 +- packages/coreui-react/package.json | 4 ++-- .../coreui-react/src/components/dropdown/CDropdownToggle.tsx | 2 +- packages/coreui-react/src/components/nav/CNavGroup.tsx | 2 +- packages/coreui-react/src/components/nav/CNavGroupItems.tsx | 2 +- packages/coreui-react/src/components/nav/CNavItem.tsx | 2 +- .../coreui-react/src/components/sidebar/CSidebarBrand.tsx | 2 +- packages/coreui-react/src/components/sidebar/CSidebarNav.tsx | 2 +- packages/docs/package.json | 2 +- 11 files changed, 12 insertions(+), 12 deletions(-) diff --git a/README.md b/README.md index 35dca082..900b1cf1 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.0.0-rc.1.zip) +- [Download the latest release](https://github.com/coreui/coreui-react/archive/v5.0.0-rc.2.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 fed1a749..49a8b937 100644 --- a/lerna.json +++ b/lerna.json @@ -1,6 +1,6 @@ { "npmClient": "yarn", "packages": ["packages/*"], - "version": "5.0.0-rc.1", + "version": "5.0.0-rc.2", "$schema": "node_modules/lerna/schemas/lerna-schema.json" } diff --git a/packages/coreui-react/README.md b/packages/coreui-react/README.md index 4e7b42a9..c0ec6ae7 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.0.0-rc.1.zip) +- [Download the latest release](https://github.com/coreui/coreui-react/archive/v5.0.0-rc.2.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 37ada8ef..7fead0c6 100644 --- a/packages/coreui-react/package.json +++ b/packages/coreui-react/package.json @@ -1,6 +1,6 @@ { "name": "@coreui/react", - "version": "5.0.0-rc.1", + "version": "5.0.0-rc.2", "description": "UI Components Library for React.js", "keywords": [ "react", @@ -41,7 +41,7 @@ "test:update": "jest --coverage --updateSnapshot" }, "dependencies": { - "@coreui/coreui": "^5.0.0-rc.1", + "@coreui/coreui": "^5.0.0-rc.2", "@popperjs/core": "^2.11.8", "prop-types": "^15.8.1" }, diff --git a/packages/coreui-react/src/components/dropdown/CDropdownToggle.tsx b/packages/coreui-react/src/components/dropdown/CDropdownToggle.tsx index 74890108..c30558d4 100644 --- a/packages/coreui-react/src/components/dropdown/CDropdownToggle.tsx +++ b/packages/coreui-react/src/components/dropdown/CDropdownToggle.tsx @@ -21,7 +21,7 @@ export interface CDropdownToggleProps extends Omit { /** * If a dropdown `variant` is set to `nav-item` then render the toggler as a link instead of a button. * - * @since v5.0.0-rc.1 + * @since v5.0.0-rc.2 */ navLink?: boolean /** diff --git a/packages/coreui-react/src/components/nav/CNavGroup.tsx b/packages/coreui-react/src/components/nav/CNavGroup.tsx index 6184e153..bed1074f 100644 --- a/packages/coreui-react/src/components/nav/CNavGroup.tsx +++ b/packages/coreui-react/src/components/nav/CNavGroup.tsx @@ -22,7 +22,7 @@ export interface CNavGroupProps extends HTMLAttributes { /** * Component used for the root node. Either a string to use a HTML element or a component. * - * @since 5.0.0-rc.1 + * @since 5.0.0-rc.2 */ as?: ElementType } diff --git a/packages/coreui-react/src/components/sidebar/CSidebarBrand.tsx b/packages/coreui-react/src/components/sidebar/CSidebarBrand.tsx index 722dceea..8e11349a 100644 --- a/packages/coreui-react/src/components/sidebar/CSidebarBrand.tsx +++ b/packages/coreui-react/src/components/sidebar/CSidebarBrand.tsx @@ -8,7 +8,7 @@ export interface CSidebarBrandProps extends HTMLAttributes { /** * Component used for the root node. Either a string to use a HTML element or a component. * - * @since 5.0.0-rc.1 + * @since 5.0.0-rc.2 */ as?: ElementType /** diff --git a/packages/docs/package.json b/packages/docs/package.json index af9573c2..d57872ae 100644 --- a/packages/docs/package.json +++ b/packages/docs/package.json @@ -1,6 +1,6 @@ { "name": "@coreui/react-docs", - "version": "5.0.0-rc.1", + "version": "5.0.0-rc.2", "private": true, "description": "", "homepage": "https://coreui.io/react/", From f287b5b9a6df130a840eeec63e8ddfc6094adcb1 Mon Sep 17 00:00:00 2001 From: mrholek Date: Fri, 22 Mar 2024 10:44:14 +0100 Subject: [PATCH 010/164] refactor(CBadge, CCard): improve background and text color handling --- .../src/components/badge/CBadge.tsx | 12 +++- .../src/components/card/CCard.tsx | 11 +++- packages/docs/content/components/badge.mdx | 16 ++++- packages/docs/content/components/card.mdx | 61 +++++++++++++++++++ .../docs/src/styles/_component-examples.scss | 5 ++ 5 files changed, 101 insertions(+), 4 deletions(-) diff --git a/packages/coreui-react/src/components/badge/CBadge.tsx b/packages/coreui-react/src/components/badge/CBadge.tsx index e9bcac36..a38a8aeb 100644 --- a/packages/coreui-react/src/components/badge/CBadge.tsx +++ b/packages/coreui-react/src/components/badge/CBadge.tsx @@ -35,6 +35,13 @@ export interface CBadgeProps extends HTMLAttributes = fo position, shape, size, + textBgColor, textColor, ...rest }, @@ -65,7 +73,7 @@ export const CBadge: PolymorphicRefForwardingComponent<'span', CBadgeProps> = fo className={classNames( 'badge', { - [`text-bg-${color}`]: color, + [`bg-${color}`]: color, 'position-absolute translate-middle': position, 'top-0': position?.includes('top'), 'top-100': position?.includes('bottom'), @@ -73,6 +81,7 @@ export const CBadge: PolymorphicRefForwardingComponent<'span', CBadgeProps> = fo 'start-0': position?.includes('start'), [`badge-${size}`]: size, [`text-${textColor}`]: textColor, + [`text-bg-${textBgColor}`]: textBgColor, }, shape, className, @@ -94,6 +103,7 @@ CBadge.propTypes = { position: PropTypes.oneOf(['top-start', 'top-end', 'bottom-end', 'bottom-start']), shape: shapePropType, size: PropTypes.oneOf(['sm']), + textBgColor: colorPropType, textColor: textColorsPropType, } diff --git a/packages/coreui-react/src/components/card/CCard.tsx b/packages/coreui-react/src/components/card/CCard.tsx index 81c5bce7..8abc51d8 100644 --- a/packages/coreui-react/src/components/card/CCard.tsx +++ b/packages/coreui-react/src/components/card/CCard.tsx @@ -22,10 +22,17 @@ export interface CCardProps extends HTMLAttributes { * @type 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | 'primary-emphasis' | 'secondary-emphasis' | 'success-emphasis' | 'danger-emphasis' | 'warning-emphasis' | 'info-emphasis' | 'light-emphasis' | 'body' | 'body-emphasis' | 'body-secondary' | 'body-tertiary' | 'black' | 'black-50' | 'white' | 'white-50' | string */ textColor?: string + /** + * Sets the component's color scheme to one of CoreUI's themed colors, ensuring the text color contrast adheres to the WCAG 4.5:1 contrast ratio standard for accessibility. + * + * @type 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string + * @since 5.0.0-rc.3 + */ + textBgColor?: Colors } export const CCard = forwardRef( - ({ children, className, color, textColor, ...rest }, ref) => { + ({ children, className, color, textBgColor, textColor, ...rest }, ref) => { return (
( { [`bg-${color}`]: color, [`text-${textColor}`]: textColor, + [`text-bg-${textBgColor}`]: textBgColor, }, className, )} @@ -49,6 +57,7 @@ CCard.propTypes = { children: PropTypes.node, className: PropTypes.string, color: colorPropType, + textBgColor: colorPropType, textColor: PropTypes.string, } diff --git a/packages/docs/content/components/badge.mdx b/packages/docs/content/components/badge.mdx index e7efa268..10501457 100644 --- a/packages/docs/content/components/badge.mdx +++ b/packages/docs/content/components/badge.mdx @@ -99,10 +99,22 @@ Add any of the below-mentioned `color` props to modify the presentation of a rea danger warning info -light +light dark ``` +You can also apply contextual variations with the `textBgColor` property, which automatically sets the text color to ensure compliance with the WCAG 4.5:1 contrast ratio standard for enhanced accessibility. + +```jsx preview +primary +success +danger +warning +info +light +dark +``` + ## Pill badges Apply the `shape="rounded-pill"` prop to make badges rounded. @@ -113,7 +125,7 @@ Apply the `shape="rounded-pill"` prop to make badges rounded. danger warning info -light +light dark ``` diff --git a/packages/docs/content/components/card.mdx b/packages/docs/content/components/card.mdx index 5399718e..93e199c7 100644 --- a/packages/docs/content/components/card.mdx +++ b/packages/docs/content/components/card.mdx @@ -446,6 +446,67 @@ Cards include various options for customizing their backgrounds, borders, and co Use `color` property to change the appearance of a card. + + <> + {[ + { color: 'primary' }, + { color: 'secondary' }, + { color: 'success' }, + { color: 'danger' }, + { color: 'warning' }, + { color: 'info' }, + { color: 'light' }, + { color: 'dark' }, + ].map((item, index) => ( + + Header + + {item.color} card title + Some quick example text to build on the card title and make up the bulk of the card's content. + + + ))} + + + +You can also apply contextual variations with the `textBgColor` property, which automatically sets the text color to ensure compliance with the WCAG 4.5:1 contrast ratio standard for enhanced accessibility. + + +```jsx +<> + {[ + { color: 'primary' }, + { color: 'secondary' }, + { color: 'success' }, + { color: 'danger' }, + { color: 'warning' }, + { color: 'info' }, + { color: 'light' }, + { color: 'dark' }, + ].map((item, index) => ( + + Header + + {item.color} card title + + Some quick example text to build on the card title and make up the bulk of the card's + content. + + + + ))} + +``` <> {[ diff --git a/packages/docs/src/styles/_component-examples.scss b/packages/docs/src/styles/_component-examples.scss index dccc0281..ed1b36f2 100644 --- a/packages/docs/src/styles/_component-examples.scss +++ b/packages/docs/src/styles/_component-examples.scss @@ -73,6 +73,11 @@ margin-left: .5rem; } + // Badges + > .badge + .badge { + margin-left: .25rem; + } + // Buttons > .btn, > .btn-group { From 15eaf83036d7e946476a4d00e16842d8dc8843ef Mon Sep 17 00:00:00 2001 From: mrholek Date: Fri, 22 Mar 2024 10:52:35 +0100 Subject: [PATCH 011/164] chore: update dependencies and devDependencies MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit @coreui/coreui ^5.0.0-rc.2 → ^5.0.0-rc.3 @testing-library/react ^14.2.1 → ^14.2.2 @types/react 18.2.63 → 18.2.67 @types/react-dom ^18.2.20 → ^18.2.22 @typescript-eslint/eslint-plugin ^7.1.1 → ^7.3.1 @typescript-eslint/parser ^7.1.1 → ^7.3.1 eslint-plugin-react ^7.34.0 → ^7.34.1 rollup ^4.12.1 → ^4.13.0 sass ^1.71.1 → ^1.72.0 typescript ^5.4.2 → ^5.4.3 --- package.json | 6 +++--- packages/coreui-react/package.json | 12 ++++++------ packages/docs/package.json | 2 +- 3 files changed, 10 insertions(+), 10 deletions(-) diff --git a/package.json b/package.json index b9367afa..e331742e 100644 --- a/package.json +++ b/package.json @@ -22,12 +22,12 @@ "test:update": "npm-run-all charts:test:update icons:test:update lib:test:update" }, "devDependencies": { - "@typescript-eslint/eslint-plugin": "^7.1.1", - "@typescript-eslint/parser": "^7.1.1", + "@typescript-eslint/eslint-plugin": "^7.3.1", + "@typescript-eslint/parser": "^7.3.1", "eslint": "8.57.0", "eslint-config-prettier": "^9.1.0", "eslint-plugin-prettier": "^5.1.3", - "eslint-plugin-react": "^7.34.0", + "eslint-plugin-react": "^7.34.1", "eslint-plugin-react-hooks": "^4.6.0", "eslint-plugin-unicorn": "^51.0.1", "lerna": "^8.1.2", diff --git a/packages/coreui-react/package.json b/packages/coreui-react/package.json index 7fead0c6..7c75d7bf 100644 --- a/packages/coreui-react/package.json +++ b/packages/coreui-react/package.json @@ -41,7 +41,7 @@ "test:update": "jest --coverage --updateSnapshot" }, "dependencies": { - "@coreui/coreui": "^5.0.0-rc.2", + "@coreui/coreui": "^5.0.0-rc.3", "@popperjs/core": "^2.11.8", "prop-types": "^15.8.1" }, @@ -50,10 +50,10 @@ "@rollup/plugin-node-resolve": "^15.2.3", "@rollup/plugin-typescript": "^11.1.6", "@testing-library/jest-dom": "^6.4.2", - "@testing-library/react": "^14.2.1", + "@testing-library/react": "^14.2.2", "@types/jest": "^29.5.12", - "@types/react": "18.2.63", - "@types/react-dom": "^18.2.20", + "@types/react": "18.2.67", + "@types/react-dom": "^18.2.22", "@types/react-transition-group": "^4.4.10", "classnames": "^2.5.1", "cross-env": "^7.0.3", @@ -62,10 +62,10 @@ "react": "^18.2.0", "react-dom": "^18.2.0", "react-transition-group": "^4.4.5", - "rollup": "^4.12.1", + "rollup": "^4.13.0", "ts-jest": "^29.1.2", "tslib": "^2.6.2", - "typescript": "^5.4.2" + "typescript": "^5.4.3" }, "peerDependencies": { "react": ">=17", diff --git a/packages/docs/package.json b/packages/docs/package.json index d57872ae..ebce1172 100644 --- a/packages/docs/package.json +++ b/packages/docs/package.json @@ -59,7 +59,7 @@ "react-helmet": "^6.1.0", "react-imask": "^7.5.0", "rimraf": "^5.0.5", - "sass": "^1.71.1" + "sass": "^1.72.0" }, "devDependencies": { "npm-run-all": "^4.1.5" From 1bc024f8c800c3d40f1441ba8de103c053b61768 Mon Sep 17 00:00:00 2001 From: mrholek Date: Fri, 22 Mar 2024 12:03:22 +0100 Subject: [PATCH 012/164] chore: update dependencies and devDependencies --- packages/coreui-icons-react | 2 +- packages/coreui-react-chartjs | 2 +- packages/docs/package.json | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/coreui-icons-react b/packages/coreui-icons-react index 6c88b4ed..f2a34f48 160000 --- a/packages/coreui-icons-react +++ b/packages/coreui-icons-react @@ -1 +1 @@ -Subproject commit 6c88b4ed928e99a6a3358bcbcab82b5049774de8 +Subproject commit f2a34f48c9135bd15fe0588a905b5a76f121faab diff --git a/packages/coreui-react-chartjs b/packages/coreui-react-chartjs index d49b6340..1d65312f 160000 --- a/packages/coreui-react-chartjs +++ b/packages/coreui-react-chartjs @@ -1 +1 @@ -Subproject commit d49b6340fa630265af7e1377b5f086f172a73529 +Subproject commit 1d65312f25e85def26557a7a508de387873a1179 diff --git a/packages/docs/package.json b/packages/docs/package.json index ebce1172..c48c121e 100644 --- a/packages/docs/package.json +++ b/packages/docs/package.json @@ -25,7 +25,7 @@ }, "dependencies": { "@coreui/chartjs": "^4.0.0-rc.0", - "@coreui/coreui": "^5.0.0-rc-2", + "@coreui/coreui": "^5.0.0-rc.3", "@coreui/icons": "^3.0.1", "@coreui/icons-react": "^2.2.1", "@coreui/react-chartjs": "^3.0.0-rc.0", From e7deebdcad0f886034b57ce3c0d7736b75a889c1 Mon Sep 17 00:00:00 2001 From: mrholek Date: Fri, 22 Mar 2024 12:41:12 +0100 Subject: [PATCH 013/164] release: v5.0.0-rc.3 --- README.md | 2 +- lerna.json | 2 +- packages/coreui-react/README.md | 2 +- packages/coreui-react/package.json | 2 +- .../coreui-react/src/components/dropdown/CDropdownToggle.tsx | 2 +- packages/coreui-react/src/components/nav/CNavGroup.tsx | 2 +- packages/coreui-react/src/components/nav/CNavGroupItems.tsx | 2 +- packages/coreui-react/src/components/nav/CNavItem.tsx | 2 +- packages/coreui-react/src/components/sidebar/CSidebarBrand.tsx | 2 +- packages/coreui-react/src/components/sidebar/CSidebarNav.tsx | 2 +- packages/docs/content/api/CBadge.api.mdx | 1 + packages/docs/content/api/CCard.api.mdx | 1 + packages/docs/content/api/CDropdownToggle.api.mdx | 2 +- packages/docs/content/api/CNavGroup.api.mdx | 2 +- packages/docs/content/api/CNavGroupItems.api.mdx | 2 +- packages/docs/content/api/CNavItem.api.mdx | 2 +- packages/docs/content/api/CSidebarBrand.api.mdx | 2 +- packages/docs/content/api/CSidebarNav.api.mdx | 2 +- packages/docs/package.json | 2 +- 19 files changed, 19 insertions(+), 17 deletions(-) diff --git a/README.md b/README.md index 900b1cf1..713850cb 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.0.0-rc.2.zip) +- [Download the latest release](https://github.com/coreui/coreui-react/archive/v5.0.0-rc.3.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 49a8b937..2a068bcd 100644 --- a/lerna.json +++ b/lerna.json @@ -1,6 +1,6 @@ { "npmClient": "yarn", "packages": ["packages/*"], - "version": "5.0.0-rc.2", + "version": "5.0.0-rc.3", "$schema": "node_modules/lerna/schemas/lerna-schema.json" } diff --git a/packages/coreui-react/README.md b/packages/coreui-react/README.md index c0ec6ae7..32365b52 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.0.0-rc.2.zip) +- [Download the latest release](https://github.com/coreui/coreui-react/archive/v5.0.0-rc.3.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 7c75d7bf..1753f000 100644 --- a/packages/coreui-react/package.json +++ b/packages/coreui-react/package.json @@ -1,6 +1,6 @@ { "name": "@coreui/react", - "version": "5.0.0-rc.2", + "version": "5.0.0-rc.3", "description": "UI Components Library for React.js", "keywords": [ "react", diff --git a/packages/coreui-react/src/components/dropdown/CDropdownToggle.tsx b/packages/coreui-react/src/components/dropdown/CDropdownToggle.tsx index c30558d4..e3abc6ad 100644 --- a/packages/coreui-react/src/components/dropdown/CDropdownToggle.tsx +++ b/packages/coreui-react/src/components/dropdown/CDropdownToggle.tsx @@ -21,7 +21,7 @@ export interface CDropdownToggleProps extends Omit { /** * If a dropdown `variant` is set to `nav-item` then render the toggler as a link instead of a button. * - * @since v5.0.0-rc.2 + * @since v5.0.0-rc.3 */ navLink?: boolean /** diff --git a/packages/coreui-react/src/components/nav/CNavGroup.tsx b/packages/coreui-react/src/components/nav/CNavGroup.tsx index bed1074f..b94b8e26 100644 --- a/packages/coreui-react/src/components/nav/CNavGroup.tsx +++ b/packages/coreui-react/src/components/nav/CNavGroup.tsx @@ -22,7 +22,7 @@ export interface CNavGroupProps extends HTMLAttributes { /** * Component used for the root node. Either a string to use a HTML element or a component. * - * @since 5.0.0-rc.2 + * @since 5.0.0-rc.3 */ as?: ElementType } diff --git a/packages/coreui-react/src/components/sidebar/CSidebarBrand.tsx b/packages/coreui-react/src/components/sidebar/CSidebarBrand.tsx index 8e11349a..9f9e76e7 100644 --- a/packages/coreui-react/src/components/sidebar/CSidebarBrand.tsx +++ b/packages/coreui-react/src/components/sidebar/CSidebarBrand.tsx @@ -8,7 +8,7 @@ export interface CSidebarBrandProps extends HTMLAttributes { /** * Component used for the root node. Either a string to use a HTML element or a component. * - * @since 5.0.0-rc.2 + * @since 5.0.0-rc.3 */ as?: ElementType /** diff --git a/packages/docs/content/api/CBadge.api.mdx b/packages/docs/content/api/CBadge.api.mdx index 018998c7..286a33c2 100644 --- a/packages/docs/content/api/CBadge.api.mdx +++ b/packages/docs/content/api/CBadge.api.mdx @@ -13,4 +13,5 @@ import CBadge from '@coreui/react/src/components/badge/CBadge' | **position** | Position badge in one of the corners of a link or button. | `'top-start'` \| `'top-end'` \| `'bottom-end'` \| `'bottom-start'` | - | | **shape** | Select the shape of the component. | `'rounded'` \| `'rounded-top'` \| `'rounded-end'` \| `'rounded-bottom'` \| `'rounded-start'` \| `'rounded-circle'` \| `'rounded-pill'` \| `'rounded-0'` \| `'rounded-1'` \| `'rounded-2'` \| `'rounded-3'` \| `string` | - | | **size** | Size the component small. | `'sm'` | - | +| **textBgColor** **_5.0.0-rc.3+_** | Sets the component's color scheme to one of CoreUI's themed colors, ensuring the text color contrast adheres to the WCAG 4.5:1 contrast ratio standard for accessibility. | `'primary'` \| `'secondary'` \| `'success'` \| `'danger'` \| `'warning'` \| `'info'` \| `'dark'` \| `'light'` \| `string` | - | | **textColor** | Sets the text color of the component to one of CoreUI’s themed colors. | `'primary'` \| `'secondary'` \| `'success'` \| `'danger'` \| `'warning'` \| `'info'` \| `'dark'` \| `'light'` \| `'primary-emphasis'` \| `'secondary-emphasis'` \| `'success-emphasis'` \| `'danger-emphasis'` \| `'warning-emphasis'` \| `'info-emphasis'` \| `'light-emphasis'` \| `'body'` \| `'body-emphasis'` \| `'body-secondary'` \| `'body-tertiary'` \| `'black'` \| `'black-50'` \| `'white'` \| `'white-50'` \| `string` | - | diff --git a/packages/docs/content/api/CCard.api.mdx b/packages/docs/content/api/CCard.api.mdx index 098188b4..1478ea52 100644 --- a/packages/docs/content/api/CCard.api.mdx +++ b/packages/docs/content/api/CCard.api.mdx @@ -9,4 +9,5 @@ import CCard from '@coreui/react/src/components/card/CCard' | --- | --- | --- | --- | | **className** | A string of all className you want applied to the base component. | `string` | - | | **color** | Sets the color context of the component to one of CoreUI’s themed colors. | `'primary'` \| `'secondary'` \| `'success'` \| `'danger'` \| `'warning'` \| `'info'` \| `'dark'` \| `'light'` \| `string` | - | +| **textBgColor** **_5.0.0-rc.3+_** | Sets the component's color scheme to one of CoreUI's themed colors, ensuring the text color contrast adheres to the WCAG 4.5:1 contrast ratio standard for accessibility. | `'primary'` \| `'secondary'` \| `'success'` \| `'danger'` \| `'warning'` \| `'info'` \| `'dark'` \| `'light'` \| `string` | - | | **textColor** | Sets the text color context of the component to one of CoreUI’s themed colors. | `'primary'` \| `'secondary'` \| `'success'` \| `'danger'` \| `'warning'` \| `'info'` \| `'dark'` \| `'light'` \| `'primary-emphasis'` \| `'secondary-emphasis'` \| `'success-emphasis'` \| `'danger-emphasis'` \| `'warning-emphasis'` \| `'info-emphasis'` \| `'light-emphasis'` \| `'body'` \| `'body-emphasis'` \| `'body-secondary'` \| `'body-tertiary'` \| `'black'` \| `'black-50'` \| `'white'` \| `'white-50'` \| `string` | - | diff --git a/packages/docs/content/api/CDropdownToggle.api.mdx b/packages/docs/content/api/CDropdownToggle.api.mdx index b37bdc9c..1c555290 100644 --- a/packages/docs/content/api/CDropdownToggle.api.mdx +++ b/packages/docs/content/api/CDropdownToggle.api.mdx @@ -15,7 +15,7 @@ import CDropdownToggle from '@coreui/react/src/components/dropdown/CDropdownTogg | **custom** | Create a custom toggler which accepts any content. | `boolean` | - | | **disabled** | Toggle the disabled state for the component. | `boolean` | - | | **href** | The href attribute specifies the URL of the page the link goes to. | `string` | - | -| **navLink** **_v5.0.0-rc.2+_** | If a dropdown `variant` is set to `nav-item` then render the toggler as a link instead of a button. | `boolean` | true | +| **navLink** **_v5.0.0-rc.3+_** | If a dropdown `variant` is set to `nav-item` then render the toggler as a link instead of a button. | `boolean` | true | | **role** | The role attribute describes the role of an element in programs that can make use of it, such as screen readers or magnifiers. | `string` | - | | **shape** | Select the shape of the component. | `'rounded'` \| `'rounded-top'` \| `'rounded-end'` \| `'rounded-bottom'` \| `'rounded-start'` \| `'rounded-circle'` \| `'rounded-pill'` \| `'rounded-0'` \| `'rounded-1'` \| `'rounded-2'` \| `'rounded-3'` \| `string` | - | | **size** | Size the component small or large. | `'sm'` \| `'lg'` | - | diff --git a/packages/docs/content/api/CNavGroup.api.mdx b/packages/docs/content/api/CNavGroup.api.mdx index db5b84c4..348eeed5 100644 --- a/packages/docs/content/api/CNavGroup.api.mdx +++ b/packages/docs/content/api/CNavGroup.api.mdx @@ -7,7 +7,7 @@ import CNavGroup from '@coreui/react/src/components/nav/CNavGroup' | Property | Description | Type | Default | | --- | --- | --- | --- | -| **as** **_5.0.0-rc.2+_** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'li')` \| `(ElementType & 'slot')` \| `(ElementType & 'style')` \| `... 174 more ...` \| `(ElementType & FunctionComponent<...>)` | - | +| **as** **_5.0.0-rc.3+_** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'li')` \| `(ElementType & 'slot')` \| `(ElementType & 'style')` \| `... 174 more ...` \| `(ElementType & FunctionComponent<...>)` | - | | **className** | A string of all className you want applied to the component. | `string` | - | | **compact** | Make nav group more compact by cutting all `padding` in half. | `boolean` | - | | **toggler** | Set group toggler label. | `ReactNode` | - | diff --git a/packages/docs/content/api/CNavGroupItems.api.mdx b/packages/docs/content/api/CNavGroupItems.api.mdx index 9ca3a4c1..f70340b1 100644 --- a/packages/docs/content/api/CNavGroupItems.api.mdx +++ b/packages/docs/content/api/CNavGroupItems.api.mdx @@ -7,5 +7,5 @@ import CNavGroupItems from '@coreui/react/src/components/nav/CNavGroupItems' | Property | Description | Type | Default | | --- | --- | --- | --- | -| **as** **_5.0.0-rc.2+_** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'ul')` \| `(ElementType & 'slot')` \| `(ElementType & 'style')` \| `... 174 more ...` \| `(ElementType & FunctionComponent<...>)` | - | +| **as** **_5.0.0-rc.3+_** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'ul')` \| `(ElementType & 'slot')` \| `(ElementType & 'style')` \| `... 174 more ...` \| `(ElementType & FunctionComponent<...>)` | - | | **className** | A string of all className you want applied to the component. | `string` | - | diff --git a/packages/docs/content/api/CNavItem.api.mdx b/packages/docs/content/api/CNavItem.api.mdx index 831cef8a..fccc32e1 100644 --- a/packages/docs/content/api/CNavItem.api.mdx +++ b/packages/docs/content/api/CNavItem.api.mdx @@ -8,7 +8,7 @@ import CNavItem from '@coreui/react/src/components/nav/CNavItem' | Property | Description | Type | Default | | --- | --- | --- | --- | | **active** | Toggle the active state for the component. | `boolean` | - | -| **as** **_5.0.0-rc.2+_** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'li')` \| `(ElementType & 'cite')` \| `(ElementType & 'data')` \| `... 174 more ...` \| `(ElementType & FunctionComponent<...>)` | - | +| **as** **_5.0.0-rc.3+_** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'li')` \| `(ElementType & 'cite')` \| `(ElementType & 'data')` \| `... 174 more ...` \| `(ElementType & FunctionComponent<...>)` | - | | **className** | A string of all className you want applied to the component. | `string` | - | | **disabled** | Toggle the disabled state for the component. | `boolean` | - | | **href** | The href attribute specifies the URL of the page the link goes to. | `string` | - | diff --git a/packages/docs/content/api/CSidebarBrand.api.mdx b/packages/docs/content/api/CSidebarBrand.api.mdx index ef2124a1..13402f46 100644 --- a/packages/docs/content/api/CSidebarBrand.api.mdx +++ b/packages/docs/content/api/CSidebarBrand.api.mdx @@ -7,5 +7,5 @@ import CSidebarBrand from '@coreui/react/src/components/sidebar/CSidebarBrand' | Property | Description | Type | Default | | --- | --- | --- | --- | -| **as** **_5.0.0-rc.2+_** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'a')` \| `(ElementType & 'slot')` \| `(ElementType & 'style')` \| `... 174 more ...` \| `(ElementType & FunctionComponent<...>)` | - | +| **as** **_5.0.0-rc.3+_** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'a')` \| `(ElementType & 'slot')` \| `(ElementType & 'style')` \| `... 174 more ...` \| `(ElementType & FunctionComponent<...>)` | - | | **className** | A string of all className you want applied to the component. | `string` | - | diff --git a/packages/docs/content/api/CSidebarNav.api.mdx b/packages/docs/content/api/CSidebarNav.api.mdx index e81dfd7d..db24a79e 100644 --- a/packages/docs/content/api/CSidebarNav.api.mdx +++ b/packages/docs/content/api/CSidebarNav.api.mdx @@ -7,5 +7,5 @@ import CSidebarNav from '@coreui/react/src/components/sidebar/CSidebarNav' | Property | Description | Type | Default | | --- | --- | --- | --- | -| **as** **_5.0.0-rc.2+_** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'ul')` \| `(ElementType & 'slot')` \| `(ElementType & 'style')` \| `... 174 more ...` \| `(ElementType & FunctionComponent<...>)` | - | +| **as** **_5.0.0-rc.3+_** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'ul')` \| `(ElementType & 'slot')` \| `(ElementType & 'style')` \| `... 174 more ...` \| `(ElementType & FunctionComponent<...>)` | - | | **className** | A string of all className you want applied to the component. | `string` | - | diff --git a/packages/docs/package.json b/packages/docs/package.json index c48c121e..df3cbf53 100644 --- a/packages/docs/package.json +++ b/packages/docs/package.json @@ -1,6 +1,6 @@ { "name": "@coreui/react-docs", - "version": "5.0.0-rc.2", + "version": "5.0.0-rc.3", "private": true, "description": "", "homepage": "https://coreui.io/react/", From 8c1ad991ee878c9829f4aed596035af227c81850 Mon Sep 17 00:00:00 2001 From: mrholek Date: Thu, 28 Mar 2024 12:24:31 +0100 Subject: [PATCH 014/164] chore: update dependencies and devDependencies MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit @coreui/chartjs ^4.0.0-rc.0 → ^4.0.0 @coreui/coreui ^5.0.0-rc.3 → ^5.0.0 @coreui/react-chartjs ^3.0.0-rc.0 → ^3.0.0 @types/react 18.2.67 → 18.2.73 @typescript-eslint/eslint-plugin ^7.3.1 → ^7.4.0 @typescript-eslint/parser ^7.3.1 → ^7.4.0 rollup ^4.13.0 → ^4.13.1 --- package.json | 4 ++-- packages/coreui-icons-react | 2 +- packages/coreui-react-chartjs | 2 +- packages/coreui-react/package.json | 6 +++--- packages/docs/package.json | 6 +++--- 5 files changed, 10 insertions(+), 10 deletions(-) diff --git a/package.json b/package.json index e331742e..00387841 100644 --- a/package.json +++ b/package.json @@ -22,8 +22,8 @@ "test:update": "npm-run-all charts:test:update icons:test:update lib:test:update" }, "devDependencies": { - "@typescript-eslint/eslint-plugin": "^7.3.1", - "@typescript-eslint/parser": "^7.3.1", + "@typescript-eslint/eslint-plugin": "^7.4.0", + "@typescript-eslint/parser": "^7.4.0", "eslint": "8.57.0", "eslint-config-prettier": "^9.1.0", "eslint-plugin-prettier": "^5.1.3", diff --git a/packages/coreui-icons-react b/packages/coreui-icons-react index f2a34f48..bcbe37d7 160000 --- a/packages/coreui-icons-react +++ b/packages/coreui-icons-react @@ -1 +1 @@ -Subproject commit f2a34f48c9135bd15fe0588a905b5a76f121faab +Subproject commit bcbe37d75c46bfa18e8c1b3c903d60fe8f0b1222 diff --git a/packages/coreui-react-chartjs b/packages/coreui-react-chartjs index 1d65312f..c6077716 160000 --- a/packages/coreui-react-chartjs +++ b/packages/coreui-react-chartjs @@ -1 +1 @@ -Subproject commit 1d65312f25e85def26557a7a508de387873a1179 +Subproject commit c6077716da130a1ba8f97346f2d98c60ea2cca3e diff --git a/packages/coreui-react/package.json b/packages/coreui-react/package.json index 1753f000..99a538b4 100644 --- a/packages/coreui-react/package.json +++ b/packages/coreui-react/package.json @@ -41,7 +41,7 @@ "test:update": "jest --coverage --updateSnapshot" }, "dependencies": { - "@coreui/coreui": "^5.0.0-rc.3", + "@coreui/coreui": "^5.0.0", "@popperjs/core": "^2.11.8", "prop-types": "^15.8.1" }, @@ -52,7 +52,7 @@ "@testing-library/jest-dom": "^6.4.2", "@testing-library/react": "^14.2.2", "@types/jest": "^29.5.12", - "@types/react": "18.2.67", + "@types/react": "18.2.73", "@types/react-dom": "^18.2.22", "@types/react-transition-group": "^4.4.10", "classnames": "^2.5.1", @@ -62,7 +62,7 @@ "react": "^18.2.0", "react-dom": "^18.2.0", "react-transition-group": "^4.4.5", - "rollup": "^4.13.0", + "rollup": "^4.13.1", "ts-jest": "^29.1.2", "tslib": "^2.6.2", "typescript": "^5.4.3" diff --git a/packages/docs/package.json b/packages/docs/package.json index df3cbf53..d2a2fa9b 100644 --- a/packages/docs/package.json +++ b/packages/docs/package.json @@ -24,11 +24,11 @@ "clean": "gatsby clean" }, "dependencies": { - "@coreui/chartjs": "^4.0.0-rc.0", - "@coreui/coreui": "^5.0.0-rc.3", + "@coreui/chartjs": "^4.0.0", + "@coreui/coreui": "^5.0.0", "@coreui/icons": "^3.0.1", "@coreui/icons-react": "^2.2.1", - "@coreui/react-chartjs": "^3.0.0-rc.0", + "@coreui/react-chartjs": "^3.0.0", "@coreui/utils": "^2.0.2", "@docsearch/css": "^3.6.0", "@mdx-js/mdx": "^2.3.0", From 1888df5246e3a53f4fd43f383c3709fd24f24356 Mon Sep 17 00:00:00 2001 From: mrholek Date: Thu, 28 Mar 2024 12:49:28 +0100 Subject: [PATCH 015/164] release: v5.0.0 --- README.md | 2 +- lerna.json | 2 +- packages/coreui-react/README.md | 2 +- packages/coreui-react/package.json | 2 +- packages/coreui-react/src/components/badge/CBadge.tsx | 2 +- packages/coreui-react/src/components/card/CCard.tsx | 2 +- .../coreui-react/src/components/dropdown/CDropdownToggle.tsx | 2 +- packages/coreui-react/src/components/nav/CNavGroup.tsx | 2 +- packages/coreui-react/src/components/nav/CNavGroupItems.tsx | 2 +- packages/coreui-react/src/components/nav/CNavItem.tsx | 2 +- packages/coreui-react/src/components/sidebar/CSidebarBrand.tsx | 2 +- packages/coreui-react/src/components/sidebar/CSidebarNav.tsx | 2 +- packages/docs/content/api/CBadge.api.mdx | 2 +- packages/docs/content/api/CCard.api.mdx | 2 +- packages/docs/content/api/CDropdownToggle.api.mdx | 2 +- packages/docs/content/api/CNavGroup.api.mdx | 2 +- packages/docs/content/api/CNavGroupItems.api.mdx | 2 +- packages/docs/content/api/CNavItem.api.mdx | 2 +- packages/docs/content/api/CSidebarBrand.api.mdx | 2 +- packages/docs/content/api/CSidebarNav.api.mdx | 2 +- packages/docs/package.json | 2 +- 21 files changed, 21 insertions(+), 21 deletions(-) diff --git a/README.md b/README.md index 713850cb..3a12a807 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.0.0-rc.3.zip) +- [Download the latest release](https://github.com/coreui/coreui-react/archive/v5.0.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 2a068bcd..194343e3 100644 --- a/lerna.json +++ b/lerna.json @@ -1,6 +1,6 @@ { "npmClient": "yarn", "packages": ["packages/*"], - "version": "5.0.0-rc.3", + "version": "5.0.0", "$schema": "node_modules/lerna/schemas/lerna-schema.json" } diff --git a/packages/coreui-react/README.md b/packages/coreui-react/README.md index 32365b52..9b4f7007 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.0.0-rc.3.zip) +- [Download the latest release](https://github.com/coreui/coreui-react/archive/v5.0.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 99a538b4..90f90185 100644 --- a/packages/coreui-react/package.json +++ b/packages/coreui-react/package.json @@ -1,6 +1,6 @@ { "name": "@coreui/react", - "version": "5.0.0-rc.3", + "version": "5.0.0", "description": "UI Components Library for React.js", "keywords": [ "react", diff --git a/packages/coreui-react/src/components/badge/CBadge.tsx b/packages/coreui-react/src/components/badge/CBadge.tsx index a38a8aeb..c874f0e0 100644 --- a/packages/coreui-react/src/components/badge/CBadge.tsx +++ b/packages/coreui-react/src/components/badge/CBadge.tsx @@ -39,7 +39,7 @@ export interface CBadgeProps extends HTMLAttributes { * Sets the component's color scheme to one of CoreUI's themed colors, ensuring the text color contrast adheres to the WCAG 4.5:1 contrast ratio standard for accessibility. * * @type 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string - * @since 5.0.0-rc.3 + * @since 5.0.0 */ textBgColor?: Colors } diff --git a/packages/coreui-react/src/components/dropdown/CDropdownToggle.tsx b/packages/coreui-react/src/components/dropdown/CDropdownToggle.tsx index e3abc6ad..68c1cdef 100644 --- a/packages/coreui-react/src/components/dropdown/CDropdownToggle.tsx +++ b/packages/coreui-react/src/components/dropdown/CDropdownToggle.tsx @@ -21,7 +21,7 @@ export interface CDropdownToggleProps extends Omit { /** * If a dropdown `variant` is set to `nav-item` then render the toggler as a link instead of a button. * - * @since v5.0.0-rc.3 + * @since v5.0.0 */ navLink?: boolean /** diff --git a/packages/coreui-react/src/components/nav/CNavGroup.tsx b/packages/coreui-react/src/components/nav/CNavGroup.tsx index b94b8e26..776bf104 100644 --- a/packages/coreui-react/src/components/nav/CNavGroup.tsx +++ b/packages/coreui-react/src/components/nav/CNavGroup.tsx @@ -22,7 +22,7 @@ export interface CNavGroupProps extends HTMLAttributes { /** * Component used for the root node. Either a string to use a HTML element or a component. * - * @since 5.0.0-rc.3 + * @since 5.0.0 */ as?: ElementType } diff --git a/packages/coreui-react/src/components/sidebar/CSidebarBrand.tsx b/packages/coreui-react/src/components/sidebar/CSidebarBrand.tsx index 9f9e76e7..597818cd 100644 --- a/packages/coreui-react/src/components/sidebar/CSidebarBrand.tsx +++ b/packages/coreui-react/src/components/sidebar/CSidebarBrand.tsx @@ -8,7 +8,7 @@ export interface CSidebarBrandProps extends HTMLAttributes { /** * Component used for the root node. Either a string to use a HTML element or a component. * - * @since 5.0.0-rc.3 + * @since 5.0.0 */ as?: ElementType /** diff --git a/packages/docs/content/api/CBadge.api.mdx b/packages/docs/content/api/CBadge.api.mdx index 286a33c2..b8231272 100644 --- a/packages/docs/content/api/CBadge.api.mdx +++ b/packages/docs/content/api/CBadge.api.mdx @@ -13,5 +13,5 @@ import CBadge from '@coreui/react/src/components/badge/CBadge' | **position** | Position badge in one of the corners of a link or button. | `'top-start'` \| `'top-end'` \| `'bottom-end'` \| `'bottom-start'` | - | | **shape** | Select the shape of the component. | `'rounded'` \| `'rounded-top'` \| `'rounded-end'` \| `'rounded-bottom'` \| `'rounded-start'` \| `'rounded-circle'` \| `'rounded-pill'` \| `'rounded-0'` \| `'rounded-1'` \| `'rounded-2'` \| `'rounded-3'` \| `string` | - | | **size** | Size the component small. | `'sm'` | - | -| **textBgColor** **_5.0.0-rc.3+_** | Sets the component's color scheme to one of CoreUI's themed colors, ensuring the text color contrast adheres to the WCAG 4.5:1 contrast ratio standard for accessibility. | `'primary'` \| `'secondary'` \| `'success'` \| `'danger'` \| `'warning'` \| `'info'` \| `'dark'` \| `'light'` \| `string` | - | +| **textBgColor** **_5.0.0+_** | Sets the component's color scheme to one of CoreUI's themed colors, ensuring the text color contrast adheres to the WCAG 4.5:1 contrast ratio standard for accessibility. | `'primary'` \| `'secondary'` \| `'success'` \| `'danger'` \| `'warning'` \| `'info'` \| `'dark'` \| `'light'` \| `string` | - | | **textColor** | Sets the text color of the component to one of CoreUI’s themed colors. | `'primary'` \| `'secondary'` \| `'success'` \| `'danger'` \| `'warning'` \| `'info'` \| `'dark'` \| `'light'` \| `'primary-emphasis'` \| `'secondary-emphasis'` \| `'success-emphasis'` \| `'danger-emphasis'` \| `'warning-emphasis'` \| `'info-emphasis'` \| `'light-emphasis'` \| `'body'` \| `'body-emphasis'` \| `'body-secondary'` \| `'body-tertiary'` \| `'black'` \| `'black-50'` \| `'white'` \| `'white-50'` \| `string` | - | diff --git a/packages/docs/content/api/CCard.api.mdx b/packages/docs/content/api/CCard.api.mdx index 1478ea52..ea056e72 100644 --- a/packages/docs/content/api/CCard.api.mdx +++ b/packages/docs/content/api/CCard.api.mdx @@ -9,5 +9,5 @@ import CCard from '@coreui/react/src/components/card/CCard' | --- | --- | --- | --- | | **className** | A string of all className you want applied to the base component. | `string` | - | | **color** | Sets the color context of the component to one of CoreUI’s themed colors. | `'primary'` \| `'secondary'` \| `'success'` \| `'danger'` \| `'warning'` \| `'info'` \| `'dark'` \| `'light'` \| `string` | - | -| **textBgColor** **_5.0.0-rc.3+_** | Sets the component's color scheme to one of CoreUI's themed colors, ensuring the text color contrast adheres to the WCAG 4.5:1 contrast ratio standard for accessibility. | `'primary'` \| `'secondary'` \| `'success'` \| `'danger'` \| `'warning'` \| `'info'` \| `'dark'` \| `'light'` \| `string` | - | +| **textBgColor** **_5.0.0+_** | Sets the component's color scheme to one of CoreUI's themed colors, ensuring the text color contrast adheres to the WCAG 4.5:1 contrast ratio standard for accessibility. | `'primary'` \| `'secondary'` \| `'success'` \| `'danger'` \| `'warning'` \| `'info'` \| `'dark'` \| `'light'` \| `string` | - | | **textColor** | Sets the text color context of the component to one of CoreUI’s themed colors. | `'primary'` \| `'secondary'` \| `'success'` \| `'danger'` \| `'warning'` \| `'info'` \| `'dark'` \| `'light'` \| `'primary-emphasis'` \| `'secondary-emphasis'` \| `'success-emphasis'` \| `'danger-emphasis'` \| `'warning-emphasis'` \| `'info-emphasis'` \| `'light-emphasis'` \| `'body'` \| `'body-emphasis'` \| `'body-secondary'` \| `'body-tertiary'` \| `'black'` \| `'black-50'` \| `'white'` \| `'white-50'` \| `string` | - | diff --git a/packages/docs/content/api/CDropdownToggle.api.mdx b/packages/docs/content/api/CDropdownToggle.api.mdx index 1c555290..cdc7d534 100644 --- a/packages/docs/content/api/CDropdownToggle.api.mdx +++ b/packages/docs/content/api/CDropdownToggle.api.mdx @@ -15,7 +15,7 @@ import CDropdownToggle from '@coreui/react/src/components/dropdown/CDropdownTogg | **custom** | Create a custom toggler which accepts any content. | `boolean` | - | | **disabled** | Toggle the disabled state for the component. | `boolean` | - | | **href** | The href attribute specifies the URL of the page the link goes to. | `string` | - | -| **navLink** **_v5.0.0-rc.3+_** | If a dropdown `variant` is set to `nav-item` then render the toggler as a link instead of a button. | `boolean` | true | +| **navLink** **_v5.0.0+_** | If a dropdown `variant` is set to `nav-item` then render the toggler as a link instead of a button. | `boolean` | true | | **role** | The role attribute describes the role of an element in programs that can make use of it, such as screen readers or magnifiers. | `string` | - | | **shape** | Select the shape of the component. | `'rounded'` \| `'rounded-top'` \| `'rounded-end'` \| `'rounded-bottom'` \| `'rounded-start'` \| `'rounded-circle'` \| `'rounded-pill'` \| `'rounded-0'` \| `'rounded-1'` \| `'rounded-2'` \| `'rounded-3'` \| `string` | - | | **size** | Size the component small or large. | `'sm'` \| `'lg'` | - | diff --git a/packages/docs/content/api/CNavGroup.api.mdx b/packages/docs/content/api/CNavGroup.api.mdx index 348eeed5..31413677 100644 --- a/packages/docs/content/api/CNavGroup.api.mdx +++ b/packages/docs/content/api/CNavGroup.api.mdx @@ -7,7 +7,7 @@ import CNavGroup from '@coreui/react/src/components/nav/CNavGroup' | Property | Description | Type | Default | | --- | --- | --- | --- | -| **as** **_5.0.0-rc.3+_** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'li')` \| `(ElementType & 'slot')` \| `(ElementType & 'style')` \| `... 174 more ...` \| `(ElementType & FunctionComponent<...>)` | - | +| **as** **_5.0.0+_** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'li')` \| `(ElementType & 'slot')` \| `(ElementType & 'style')` \| `... 174 more ...` \| `(ElementType & FunctionComponent<...>)` | - | | **className** | A string of all className you want applied to the component. | `string` | - | | **compact** | Make nav group more compact by cutting all `padding` in half. | `boolean` | - | | **toggler** | Set group toggler label. | `ReactNode` | - | diff --git a/packages/docs/content/api/CNavGroupItems.api.mdx b/packages/docs/content/api/CNavGroupItems.api.mdx index f70340b1..467622bc 100644 --- a/packages/docs/content/api/CNavGroupItems.api.mdx +++ b/packages/docs/content/api/CNavGroupItems.api.mdx @@ -7,5 +7,5 @@ import CNavGroupItems from '@coreui/react/src/components/nav/CNavGroupItems' | Property | Description | Type | Default | | --- | --- | --- | --- | -| **as** **_5.0.0-rc.3+_** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'ul')` \| `(ElementType & 'slot')` \| `(ElementType & 'style')` \| `... 174 more ...` \| `(ElementType & FunctionComponent<...>)` | - | +| **as** **_5.0.0+_** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'ul')` \| `(ElementType & 'slot')` \| `(ElementType & 'style')` \| `... 174 more ...` \| `(ElementType & FunctionComponent<...>)` | - | | **className** | A string of all className you want applied to the component. | `string` | - | diff --git a/packages/docs/content/api/CNavItem.api.mdx b/packages/docs/content/api/CNavItem.api.mdx index fccc32e1..426df0b1 100644 --- a/packages/docs/content/api/CNavItem.api.mdx +++ b/packages/docs/content/api/CNavItem.api.mdx @@ -8,7 +8,7 @@ import CNavItem from '@coreui/react/src/components/nav/CNavItem' | Property | Description | Type | Default | | --- | --- | --- | --- | | **active** | Toggle the active state for the component. | `boolean` | - | -| **as** **_5.0.0-rc.3+_** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'li')` \| `(ElementType & 'cite')` \| `(ElementType & 'data')` \| `... 174 more ...` \| `(ElementType & FunctionComponent<...>)` | - | +| **as** **_5.0.0+_** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'li')` \| `(ElementType & 'cite')` \| `(ElementType & 'data')` \| `... 174 more ...` \| `(ElementType & FunctionComponent<...>)` | - | | **className** | A string of all className you want applied to the component. | `string` | - | | **disabled** | Toggle the disabled state for the component. | `boolean` | - | | **href** | The href attribute specifies the URL of the page the link goes to. | `string` | - | diff --git a/packages/docs/content/api/CSidebarBrand.api.mdx b/packages/docs/content/api/CSidebarBrand.api.mdx index 13402f46..bd665b8c 100644 --- a/packages/docs/content/api/CSidebarBrand.api.mdx +++ b/packages/docs/content/api/CSidebarBrand.api.mdx @@ -7,5 +7,5 @@ import CSidebarBrand from '@coreui/react/src/components/sidebar/CSidebarBrand' | Property | Description | Type | Default | | --- | --- | --- | --- | -| **as** **_5.0.0-rc.3+_** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'a')` \| `(ElementType & 'slot')` \| `(ElementType & 'style')` \| `... 174 more ...` \| `(ElementType & FunctionComponent<...>)` | - | +| **as** **_5.0.0+_** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'a')` \| `(ElementType & 'slot')` \| `(ElementType & 'style')` \| `... 174 more ...` \| `(ElementType & FunctionComponent<...>)` | - | | **className** | A string of all className you want applied to the component. | `string` | - | diff --git a/packages/docs/content/api/CSidebarNav.api.mdx b/packages/docs/content/api/CSidebarNav.api.mdx index db24a79e..52cc8df7 100644 --- a/packages/docs/content/api/CSidebarNav.api.mdx +++ b/packages/docs/content/api/CSidebarNav.api.mdx @@ -7,5 +7,5 @@ import CSidebarNav from '@coreui/react/src/components/sidebar/CSidebarNav' | Property | Description | Type | Default | | --- | --- | --- | --- | -| **as** **_5.0.0-rc.3+_** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'ul')` \| `(ElementType & 'slot')` \| `(ElementType & 'style')` \| `... 174 more ...` \| `(ElementType & FunctionComponent<...>)` | - | +| **as** **_5.0.0+_** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'ul')` \| `(ElementType & 'slot')` \| `(ElementType & 'style')` \| `... 174 more ...` \| `(ElementType & FunctionComponent<...>)` | - | | **className** | A string of all className you want applied to the component. | `string` | - | diff --git a/packages/docs/package.json b/packages/docs/package.json index d2a2fa9b..e8b587d9 100644 --- a/packages/docs/package.json +++ b/packages/docs/package.json @@ -1,6 +1,6 @@ { "name": "@coreui/react-docs", - "version": "5.0.0-rc.3", + "version": "5.0.0", "private": true, "description": "", "homepage": "https://coreui.io/react/", From 71fbeae06530f92080eb233265e179c24302779f Mon Sep 17 00:00:00 2001 From: mrholek Date: Sat, 6 Apr 2024 16:42:41 +0200 Subject: [PATCH 016/164] fix(CPopover, CTooltip): prevent setting the wrong component position on the initial transition --- .../src/components/popover/CPopover.tsx | 117 ++++++++---------- .../src/components/tooltip/CTooltip.tsx | 115 ++++++++--------- packages/coreui-react/src/hooks/usePopper.ts | 20 ++- 3 files changed, 116 insertions(+), 136 deletions(-) diff --git a/packages/coreui-react/src/components/popover/CPopover.tsx b/packages/coreui-react/src/components/popover/CPopover.tsx index 36b93afe..3f239a8b 100644 --- a/packages/coreui-react/src/components/popover/CPopover.tsx +++ b/packages/coreui-react/src/components/popover/CPopover.tsx @@ -1,13 +1,12 @@ import React, { forwardRef, HTMLAttributes, ReactNode, useRef, useEffect, useState } from 'react' import classNames from 'classnames' import PropTypes from 'prop-types' -import { Transition } from 'react-transition-group' import { CConditionalPortal } from '../conditional-portal' import { useForkedRef, usePopper } from '../../hooks' import { fallbackPlacementsPropType, triggerPropType } from '../../props' import type { Placements, Triggers } from '../../types' -import { getRTLPlacement, getTransitionDurationFromElement } from '../../utils' +import { executeAfterTransition, getRTLPlacement } from '../../utils' export interface CPopoverProps extends Omit, 'title' | 'content'> { /** @@ -101,6 +100,7 @@ export const CPopover = forwardRef( const uID = useRef(`popover${Math.floor(Math.random() * 1_000_000)}`) const { initPopper, destroyPopper } = usePopper() + const [mounted, setMounted] = useState(false) const [_visible, setVisible] = useState(visible) const _delay = typeof delay === 'number' ? { show: delay, hide: delay } : delay @@ -133,14 +133,39 @@ export const CPopover = forwardRef( setVisible(visible) }, [visible]) - const toggleVisible = (visible: boolean) => { - if (visible) { - setTimeout(() => setVisible(true), _delay.show) - return + useEffect(() => { + if (_visible) { + setMounted(true) + + if (popoverRef.current) { + popoverRef.current.classList.remove('fade', 'show') + destroyPopper() + } + + setTimeout(() => { + if (togglerRef.current && popoverRef.current) { + if (animation) { + popoverRef.current.classList.add('fade') + } + + initPopper(togglerRef.current, popoverRef.current, popperConfig) + popoverRef.current.classList.add('show') + onShow && onShow() + } + }, _delay.show) } - setTimeout(() => setVisible(false), _delay.hide) - } + return () => { + if (popoverRef.current) { + popoverRef.current.classList.remove('show') + onHide && onHide() + executeAfterTransition(() => { + destroyPopper() + setMounted(false) + }, popoverRef.current) + } + } + }, [_visible]) return ( <> @@ -150,71 +175,31 @@ export const CPopover = forwardRef( }), ref: togglerRef, ...((trigger === 'click' || trigger.includes('click')) && { - onClick: () => toggleVisible(!_visible), + onClick: () => setVisible(!_visible), }), ...((trigger === 'focus' || trigger.includes('focus')) && { - onFocus: () => toggleVisible(true), - onBlur: () => toggleVisible(false), + onFocus: () => setVisible(true), + onBlur: () => setVisible(false), }), ...((trigger === 'hover' || trigger.includes('hover')) && { - onMouseEnter: () => toggleVisible(true), - onMouseLeave: () => toggleVisible(false), + onMouseEnter: () => setVisible(true), + onMouseLeave: () => setVisible(false), }), })} - { - if (togglerRef.current && popoverRef.current) { - initPopper(togglerRef.current, popoverRef.current, popperConfig) - } - - onShow - }} - onEntering={() => { - if (togglerRef.current && popoverRef.current) { - popoverRef.current.style.display = 'initial' - } - }} - onExit={onHide} - onExited={() => { - destroyPopper() - }} - timeout={{ - enter: 0, - exit: popoverRef.current - ? getTransitionDurationFromElement(popoverRef.current) + 50 - : 200, - }} - unmountOnExit - > - {(state) => ( - - )} - + {mounted && ( + + )} ) diff --git a/packages/coreui-react/src/components/tooltip/CTooltip.tsx b/packages/coreui-react/src/components/tooltip/CTooltip.tsx index 07d88af6..b85c4961 100644 --- a/packages/coreui-react/src/components/tooltip/CTooltip.tsx +++ b/packages/coreui-react/src/components/tooltip/CTooltip.tsx @@ -1,13 +1,12 @@ import React, { forwardRef, HTMLAttributes, ReactNode, useRef, useEffect, useState } from 'react' import classNames from 'classnames' import PropTypes from 'prop-types' -import { Transition } from 'react-transition-group' import { CConditionalPortal } from '../conditional-portal' import { useForkedRef, usePopper } from '../../hooks' import { fallbackPlacementsPropType, triggerPropType } from '../../props' import type { Placements, Triggers } from '../../types' -import { getRTLPlacement, getTransitionDurationFromElement } from '../../utils' +import { executeAfterTransition, getRTLPlacement } from '../../utils' export interface CTooltipProps extends Omit, 'content'> { /** @@ -96,6 +95,7 @@ export const CTooltip = forwardRef( const uID = useRef(`tooltip${Math.floor(Math.random() * 1_000_000)}`) const { initPopper, destroyPopper } = usePopper() + const [mounted, setMounted] = useState(false) const [_visible, setVisible] = useState(visible) const _delay = typeof delay === 'number' ? { show: delay, hide: delay } : delay @@ -128,14 +128,39 @@ export const CTooltip = forwardRef( setVisible(visible) }, [visible]) - const toggleVisible = (visible: boolean) => { - if (visible) { - setTimeout(() => setVisible(true), _delay.show) - return + useEffect(() => { + if (_visible) { + setMounted(true) + + if (tooltipRef.current) { + tooltipRef.current.classList.remove('fade', 'show') + destroyPopper() + } + + setTimeout(() => { + if (togglerRef.current && tooltipRef.current) { + if (animation) { + tooltipRef.current.classList.add('fade') + } + + initPopper(togglerRef.current, tooltipRef.current, popperConfig) + tooltipRef.current.classList.add('show') + onShow && onShow() + } + }, _delay.show) } - setTimeout(() => setVisible(false), _delay.hide) - } + return () => { + if (tooltipRef.current) { + tooltipRef.current.classList.remove('show') + onHide && onHide() + executeAfterTransition(() => { + destroyPopper() + setMounted(false) + }, tooltipRef.current) + } + } + }, [_visible]) return ( <> @@ -145,70 +170,30 @@ export const CTooltip = forwardRef( }), ref: togglerRef, ...((trigger === 'click' || trigger.includes('click')) && { - onClick: () => toggleVisible(!_visible), + onClick: () => setVisible(!_visible), }), ...((trigger === 'focus' || trigger.includes('focus')) && { - onFocus: () => toggleVisible(true), - onBlur: () => toggleVisible(false), + onFocus: () => setVisible(true), + onBlur: () => setVisible(false), }), ...((trigger === 'hover' || trigger.includes('hover')) && { - onMouseEnter: () => toggleVisible(true), - onMouseLeave: () => toggleVisible(false), + onMouseEnter: () => setVisible(true), + onMouseLeave: () => setVisible(false), }), })} - { - if (togglerRef.current && tooltipRef.current) { - initPopper(togglerRef.current, tooltipRef.current, popperConfig) - } - - onShow - }} - onEntering={() => { - if (togglerRef.current && tooltipRef.current) { - tooltipRef.current.style.display = 'initial' - } - }} - onExit={onHide} - onExited={() => { - destroyPopper() - }} - timeout={{ - enter: 0, - exit: tooltipRef.current - ? getTransitionDurationFromElement(tooltipRef.current) + 50 - : 200, - }} - unmountOnExit - > - {(state) => ( - - )} - + {mounted && ( + + )} ) diff --git a/packages/coreui-react/src/hooks/usePopper.ts b/packages/coreui-react/src/hooks/usePopper.ts index 898a402e..26815ca3 100644 --- a/packages/coreui-react/src/hooks/usePopper.ts +++ b/packages/coreui-react/src/hooks/usePopper.ts @@ -2,12 +2,11 @@ import { useRef } from 'react' import { createPopper } from '@popperjs/core' import type { Instance, Options } from '@popperjs/core' -import { executeAfterTransition } from '../utils' - interface UsePopperOutput { popper: Instance | undefined initPopper: (reference: HTMLElement, popper: HTMLElement, options: Partial) => void destroyPopper: () => void + updatePopper: (options?: Partial) => void } export const usePopper = (): UsePopperOutput => { @@ -23,17 +22,28 @@ export const usePopper = (): UsePopperOutput => { const popperInstance = _popper.current if (popperInstance && el.current) { - executeAfterTransition(() => { - popperInstance.destroy() - }, el.current) + popperInstance.destroy() } _popper.current = undefined } + const updatePopper = (options?: Partial) => { + const popperInstance = _popper.current + + if (popperInstance && options) { + popperInstance.setOptions(options) + } + + if (popperInstance) { + popperInstance.update() + } + } + return { popper: _popper.current, initPopper, destroyPopper, + updatePopper, } } From e9e34e1d98510608c29540ceefe582a860e27ef3 Mon Sep 17 00:00:00 2001 From: mrholek Date: Sat, 6 Apr 2024 17:03:33 +0200 Subject: [PATCH 017/164] refactor(CTooltip): update the popper when content is changed --- packages/coreui-react/src/components/tooltip/CTooltip.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/coreui-react/src/components/tooltip/CTooltip.tsx b/packages/coreui-react/src/components/tooltip/CTooltip.tsx index b85c4961..18d0629f 100644 --- a/packages/coreui-react/src/components/tooltip/CTooltip.tsx +++ b/packages/coreui-react/src/components/tooltip/CTooltip.tsx @@ -94,7 +94,7 @@ export const CTooltip = forwardRef( const forkedRef = useForkedRef(ref, tooltipRef) const uID = useRef(`tooltip${Math.floor(Math.random() * 1_000_000)}`) - const { initPopper, destroyPopper } = usePopper() + const { initPopper, destroyPopper, updatePopper } = usePopper() const [mounted, setMounted] = useState(false) const [_visible, setVisible] = useState(visible) @@ -162,6 +162,10 @@ export const CTooltip = forwardRef( } }, [_visible]) + useEffect(() => { + updatePopper() + }, [content]) + return ( <> {React.cloneElement(children as React.ReactElement, { From bf0eafb5459787ce756924096ac4674dd8d46403 Mon Sep 17 00:00:00 2001 From: mrholek Date: Sun, 5 May 2024 17:30:58 +0200 Subject: [PATCH 018/164] fix: wrong schema markup --- packages/docs/src/components/Seo.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/docs/src/components/Seo.tsx b/packages/docs/src/components/Seo.tsx index 72a162f0..d09b930a 100644 --- a/packages/docs/src/components/Seo.tsx +++ b/packages/docs/src/components/Seo.tsx @@ -61,7 +61,7 @@ const SEO = ({ title, description, name, image, article }: SEOProps) => { {seo.name && ( )} From c038629442d9c3171b9a1aba0dfd97a6cbdf355a Mon Sep 17 00:00:00 2001 From: mrholek Date: Sun, 19 May 2024 22:24:22 +0200 Subject: [PATCH 019/164] chore: clean-up --- packages/docs/content/components/modal.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/docs/content/components/modal.mdx b/packages/docs/content/components/modal.mdx index 15760787..21f212d4 100644 --- a/packages/docs/content/components/modal.mdx +++ b/packages/docs/content/components/modal.mdx @@ -105,7 +105,7 @@ return ( onClose={() => setVisible(false)} aria-labelledby="LiveDemoExampleLabel" > - setVisible(false)}> + Modal title From 1f424df63c2bf0e050a94aa3003a7e188bf7c088 Mon Sep 17 00:00:00 2001 From: mrholek Date: Sat, 25 May 2024 11:59:25 +0200 Subject: [PATCH 020/164] chore: update dependencies and devDependencies MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit @coreui/coreui ^5.0.0 → ^5.0.1 @mdx-js/mdx ^2.3.0 → ^3.0.1 @mdx-js/react ^2.3.0 → ^3.0.1 @rollup/plugin-commonjs ^25.0.7 → ^25.0.8 @testing-library/jest-dom ^6.4.2 → ^6.4.5 @testing-library/react ^14.2.2 → ^14.3.1 @types/react 18.2.73 → 18.3.3 @types/react-dom ^18.2.22 → ^18.3.0 @typescript-eslint/eslint-plugin ^7.4.0 → ^7.10.0 @typescript-eslint/parser ^7.4.0 → ^7.10.0 eslint-plugin-react-hooks ^4.6.0 → ^4.6.2 gatsby ^5.13.3 → ^5.13.5 gatsby-plugin-offline ^6.13.1 → ^6.13.2 lerna ^8.1.2 → ^8.1.3 react ^18.2.0 → ^18.3.1 react-dom ^18.2.0 → ^18.3.1 react-imask ^7.5.0 → ^7.6.1 rimraf ^5.0.5 → ^5.0.7 rollup ^4.13.1 → ^4.18.0 sass ^1.72.0 → ^1.77.2 ts-jest ^29.1.2 → ^29.1.3 typescript ^5.4.3 → ^5.4.5 --- package.json | 8 ++++---- packages/coreui-react/package.json | 22 +++++++++++----------- 2 files changed, 15 insertions(+), 15 deletions(-) diff --git a/package.json b/package.json index 00387841..109914f1 100644 --- a/package.json +++ b/package.json @@ -22,15 +22,15 @@ "test:update": "npm-run-all charts:test:update icons:test:update lib:test:update" }, "devDependencies": { - "@typescript-eslint/eslint-plugin": "^7.4.0", - "@typescript-eslint/parser": "^7.4.0", + "@typescript-eslint/eslint-plugin": "^7.10.0", + "@typescript-eslint/parser": "^7.10.0", "eslint": "8.57.0", "eslint-config-prettier": "^9.1.0", "eslint-plugin-prettier": "^5.1.3", "eslint-plugin-react": "^7.34.1", - "eslint-plugin-react-hooks": "^4.6.0", + "eslint-plugin-react-hooks": "^4.6.2", "eslint-plugin-unicorn": "^51.0.1", - "lerna": "^8.1.2", + "lerna": "^8.1.3", "npm-run-all": "^4.1.5", "prettier": "^3.2.5" }, diff --git a/packages/coreui-react/package.json b/packages/coreui-react/package.json index 90f90185..e66f90bf 100644 --- a/packages/coreui-react/package.json +++ b/packages/coreui-react/package.json @@ -41,31 +41,31 @@ "test:update": "jest --coverage --updateSnapshot" }, "dependencies": { - "@coreui/coreui": "^5.0.0", + "@coreui/coreui": "^5.0.1", "@popperjs/core": "^2.11.8", "prop-types": "^15.8.1" }, "devDependencies": { - "@rollup/plugin-commonjs": "^25.0.7", + "@rollup/plugin-commonjs": "^25.0.8", "@rollup/plugin-node-resolve": "^15.2.3", "@rollup/plugin-typescript": "^11.1.6", - "@testing-library/jest-dom": "^6.4.2", - "@testing-library/react": "^14.2.2", + "@testing-library/jest-dom": "^6.4.5", + "@testing-library/react": "^14.3.1", "@types/jest": "^29.5.12", - "@types/react": "18.2.73", - "@types/react-dom": "^18.2.22", + "@types/react": "18.3.3", + "@types/react-dom": "^18.3.0", "@types/react-transition-group": "^4.4.10", "classnames": "^2.5.1", "cross-env": "^7.0.3", "jest": "^29.7.0", "jest-environment-jsdom": "^29.7.0", - "react": "^18.2.0", - "react-dom": "^18.2.0", + "react": "^18.3.1", + "react-dom": "^18.3.1", "react-transition-group": "^4.4.5", - "rollup": "^4.13.1", - "ts-jest": "^29.1.2", + "rollup": "^4.18.0", + "ts-jest": "^29.1.3", "tslib": "^2.6.2", - "typescript": "^5.4.3" + "typescript": "^5.4.5" }, "peerDependencies": { "react": ">=17", From 5633f3c25e56c289c9c025af05f7a33e8704d59c Mon Sep 17 00:00:00 2001 From: mrholek Date: Sat, 25 May 2024 12:02:03 +0200 Subject: [PATCH 021/164] feat(CTabPane): add the `transition` property to enable control of fade animation on panels --- .../coreui-react/src/components/tabs/CTabPane.tsx | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/packages/coreui-react/src/components/tabs/CTabPane.tsx b/packages/coreui-react/src/components/tabs/CTabPane.tsx index 7d66be7f..9cc2e15b 100644 --- a/packages/coreui-react/src/components/tabs/CTabPane.tsx +++ b/packages/coreui-react/src/components/tabs/CTabPane.tsx @@ -18,6 +18,12 @@ export interface CTabPaneProps extends HTMLAttributes { * Callback fired when the component requests to be shown. */ onShow?: () => void + /** + * Enable fade in and fade out transition. + * + * @since 5.1.0 + */ + transition?: boolean /** * Toggle the visibility of component. */ @@ -25,7 +31,7 @@ export interface CTabPaneProps extends HTMLAttributes { } export const CTabPane = forwardRef( - ({ children, className, onHide, onShow, visible, ...rest }, ref) => { + ({ children, className, onHide, onShow, transition = true, visible, ...rest }, ref) => { const tabPaneRef = useRef() const forkedRef = useForkedRef(ref, tabPaneRef) @@ -35,9 +41,9 @@ export const CTabPane = forwardRef(
Date: Sat, 25 May 2024 19:34:06 +0200 Subject: [PATCH 022/164] feat(CTabs): the initial release of the new react tabs component --- .../src/components/dropdown/CDropdown.tsx | 4 +- .../src/components/dropdown/utils.ts | 22 -- .../coreui-react/src/components/tabs/CTab.tsx | 56 +++ .../src/components/tabs/CTabList.tsx | 92 +++++ .../src/components/tabs/CTabPanel.tsx | 98 +++++ .../src/components/tabs/CTabs.tsx | 54 +++ .../coreui-react/src/components/tabs/index.ts | 6 +- .../src/utils/getNextActiveElement.ts | 23 ++ packages/coreui-react/src/utils/index.ts | 2 + packages/docs/content/api/CTab.api.mdx | 11 + packages/docs/content/api/CTabList.api.mdx | 12 + packages/docs/content/api/CTabPane.api.mdx | 1 + packages/docs/content/api/CTabPanel.api.mdx | 15 + packages/docs/content/api/CTabs.api.mdx | 12 + .../docs/content/api/CTabsContext.api.mdx | 10 + packages/docs/content/components/tabs.mdx | 347 ++++++++++++++++++ packages/docs/src/nav.tsx | 8 + 17 files changed, 748 insertions(+), 25 deletions(-) create mode 100644 packages/coreui-react/src/components/tabs/CTab.tsx create mode 100644 packages/coreui-react/src/components/tabs/CTabList.tsx create mode 100644 packages/coreui-react/src/components/tabs/CTabPanel.tsx create mode 100644 packages/coreui-react/src/components/tabs/CTabs.tsx create mode 100644 packages/coreui-react/src/utils/getNextActiveElement.ts create mode 100644 packages/docs/content/api/CTab.api.mdx create mode 100644 packages/docs/content/api/CTabList.api.mdx create mode 100644 packages/docs/content/api/CTabPanel.api.mdx create mode 100644 packages/docs/content/api/CTabs.api.mdx create mode 100644 packages/docs/content/api/CTabsContext.api.mdx create mode 100644 packages/docs/content/components/tabs.mdx diff --git a/packages/coreui-react/src/components/dropdown/CDropdown.tsx b/packages/coreui-react/src/components/dropdown/CDropdown.tsx index 303a793a..65101efc 100644 --- a/packages/coreui-react/src/components/dropdown/CDropdown.tsx +++ b/packages/coreui-react/src/components/dropdown/CDropdown.tsx @@ -15,10 +15,10 @@ import { PolymorphicRefForwardingComponent } from '../../helpers' import { useForkedRef, usePopper } from '../../hooks' import { placementPropType } from '../../props' import type { Placements } from '../../types' -import { isRTL } from '../../utils' +import { getNextActiveElement, isRTL } from '../../utils' import type { Alignments, Directions } from './types' -import { getNextActiveElement, getPlacement } from './utils' +import { getPlacement } from './utils' export interface CDropdownProps extends HTMLAttributes { /** diff --git a/packages/coreui-react/src/components/dropdown/utils.ts b/packages/coreui-react/src/components/dropdown/utils.ts index edddb0db..c9659636 100644 --- a/packages/coreui-react/src/components/dropdown/utils.ts +++ b/packages/coreui-react/src/components/dropdown/utils.ts @@ -19,28 +19,6 @@ export const getAlignmentClassNames = (alignment: Alignments) => { return classNames } -export const getNextActiveElement = ( - list: HTMLElement[], - activeElement: HTMLElement, - shouldGetNext: boolean, - isCycleAllowed: boolean, -) => { - const listLength = list.length - let index = list.indexOf(activeElement) - - if (index === -1) { - return !shouldGetNext && isCycleAllowed ? list[listLength - 1] : list[0] - } - - index += shouldGetNext ? 1 : -1 - - if (isCycleAllowed) { - index = (index + listLength) % listLength - } - - return list[Math.max(0, Math.min(index, listLength - 1))] -} - export const getPlacement = ( placement: Placement, direction: string | undefined, diff --git a/packages/coreui-react/src/components/tabs/CTab.tsx b/packages/coreui-react/src/components/tabs/CTab.tsx new file mode 100644 index 00000000..a2485297 --- /dev/null +++ b/packages/coreui-react/src/components/tabs/CTab.tsx @@ -0,0 +1,56 @@ +import React, { forwardRef, HTMLAttributes, useContext } from 'react' +import PropTypes from 'prop-types' +import classNames from 'classnames' + +import { TabsContext } from './CTabs' + +export interface CTabProps extends HTMLAttributes { + /** + * A string of all className you want applied to the base component. + */ + className?: string + /** + * Item key. + */ + itemKey?: number | string +} + +export const CTab = forwardRef( + ({ children, className, itemKey, ...rest }, ref) => { + const { _activeItemKey, setActiveKey, id } = useContext(TabsContext) + + const isActive = () => itemKey === _activeItemKey + + return ( + + ) + }, +) + +CTab.propTypes = { + children: PropTypes.node, + className: PropTypes.string, + itemKey: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), +} + +CTab.displayName = 'CTab' diff --git a/packages/coreui-react/src/components/tabs/CTabList.tsx b/packages/coreui-react/src/components/tabs/CTabList.tsx new file mode 100644 index 00000000..7f70938c --- /dev/null +++ b/packages/coreui-react/src/components/tabs/CTabList.tsx @@ -0,0 +1,92 @@ +import React, { forwardRef, HTMLAttributes, KeyboardEvent, useRef } from 'react' +import PropTypes from 'prop-types' +import classNames from 'classnames' + +import { useForkedRef } from '../../hooks' +import { getNextActiveElement } from '../../utils' + +export interface CTabListProps extends HTMLAttributes { + /** + * A string of all className you want applied to the base component. + */ + className?: string + /** + * Specify a layout type for component. + */ + layout?: 'fill' | 'justified' + /** + * Set the nav variant to tabs or pills. + */ + variant?: 'pills' | 'tabs' | 'underline' | 'underline-border' +} + +export const CTabList = forwardRef( + ({ children, className, layout, variant, ...rest }, ref) => { + const tabsRef = useRef(null) + const forkedRef = useForkedRef(ref, tabsRef) + + const handleKeydown = (event: KeyboardEvent) => { + if ( + tabsRef.current !== null && + (event.key === 'ArrowDown' || + event.key === 'ArrowUp' || + event.key === 'ArrowLeft' || + event.key === 'ArrowRight' || + event.key === 'Home' || + event.key === 'End') + ) { + event.preventDefault() + const target = event.target as HTMLElement + // eslint-disable-next-line unicorn/prefer-spread + const items: HTMLElement[] = Array.from( + tabsRef.current.querySelectorAll('.nav-link:not(.disabled):not(:disabled)'), + ) + + let nextActiveElement + + if (event.key === 'Home' || event.key === 'End') { + nextActiveElement = event.key === 'End' ? items.at(-1) : items[0] + } else { + nextActiveElement = getNextActiveElement( + items, + target, + event.key === 'ArrowDown' || event.key === 'ArrowRight', + true, + ) + } + + if (nextActiveElement) { + nextActiveElement.focus({ preventScroll: true }) + } + } + } + + return ( +
+ {children} +
+ ) + }, +) + +CTabList.propTypes = { + children: PropTypes.node, + className: PropTypes.string, + layout: PropTypes.oneOf(['fill', 'justified']), + variant: PropTypes.oneOf(['pills', 'tabs', 'underline', 'underline-border']), +} + +CTabList.displayName = 'CTabList' diff --git a/packages/coreui-react/src/components/tabs/CTabPanel.tsx b/packages/coreui-react/src/components/tabs/CTabPanel.tsx new file mode 100644 index 00000000..6a6d703e --- /dev/null +++ b/packages/coreui-react/src/components/tabs/CTabPanel.tsx @@ -0,0 +1,98 @@ +import React, { HTMLAttributes, forwardRef, useContext, useEffect, useRef, useState } from 'react' +import PropTypes from 'prop-types' +import classNames from 'classnames' +import { Transition } from 'react-transition-group' + +import { TabsContext } from './CTabs' +import { useForkedRef } from '../../hooks' +import { getTransitionDurationFromElement } from '../../utils' + +export interface CTabPanelProps extends HTMLAttributes { + /** + * A string of all className you want applied to the base component. + */ + className?: string + /** + * Item key. + */ + itemKey?: number | string + /** + * Callback fired when the component requests to be hidden. + */ + onHide?: () => void + /** + * Callback fired when the component requests to be shown. + */ + onShow?: () => void + /** + * Enable fade in and fade out transition. + */ + transition?: boolean + /** + * Toggle the visibility of component. + */ + visible?: boolean +} + +export const CTabPanel = forwardRef( + ({ children, className, itemKey, onHide, onShow, transition = true, visible, ...rest }, ref) => { + const { _activeItemKey, id } = useContext(TabsContext) + + const tabPaneRef = useRef() + const forkedRef = useForkedRef(ref, tabPaneRef) + + const [_visible, setVisible] = useState(visible || _activeItemKey === itemKey) + + useEffect(() => { + visible !== undefined && setVisible(visible) + }, [visible]) + + useEffect(() => { + setVisible(_activeItemKey === itemKey) + }, [_activeItemKey]) + + return ( + + {(state) => ( +
+ {children} +
+ )} + + ) + }, +) + +CTabPanel.propTypes = { + children: PropTypes.node, + className: PropTypes.string, + itemKey: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), + onHide: PropTypes.func, + onShow: PropTypes.func, + transition: PropTypes.bool, + visible: PropTypes.bool, +} + +CTabPanel.displayName = 'CTabPanel' diff --git a/packages/coreui-react/src/components/tabs/CTabs.tsx b/packages/coreui-react/src/components/tabs/CTabs.tsx new file mode 100644 index 00000000..8740e109 --- /dev/null +++ b/packages/coreui-react/src/components/tabs/CTabs.tsx @@ -0,0 +1,54 @@ +import React, { createContext, forwardRef, HTMLAttributes, useEffect, useId, useState } from 'react' +import PropTypes from 'prop-types' +import classNames from 'classnames' + +export interface CTabsProps extends Omit, 'onChange'> { + /** + * The active item key. + */ + activeItemKey?: number | string + /** + * A string of all className you want applied to the base component. + */ + className?: string + /** + * The callback is fired when the active tab changes. + */ + onChange?: (value: number | string) => void +} + +export interface TabsContextProps { + _activeItemKey?: number | string + setActiveKey: React.Dispatch> + id?: string +} + +export const TabsContext = createContext({} as TabsContextProps) + +export const CTabs = forwardRef( + ({ children, activeItemKey, className, onChange }, ref) => { + const id = useId() + const [_activeItemKey, setActiveKey] = useState(activeItemKey) + + useEffect(() => { + _activeItemKey && onChange && onChange(_activeItemKey) + }, [_activeItemKey]) + + return ( + +
+ {children} +
+ + ) + }, +) + +CTabs.propTypes = { + activeItemKey: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), + children: PropTypes.node, + className: PropTypes.string, + onChange: PropTypes.func, +} + +CTabs.displayName = 'CTabs' diff --git a/packages/coreui-react/src/components/tabs/index.ts b/packages/coreui-react/src/components/tabs/index.ts index 1962780c..0d2c6e06 100644 --- a/packages/coreui-react/src/components/tabs/index.ts +++ b/packages/coreui-react/src/components/tabs/index.ts @@ -1,4 +1,8 @@ +import { CTab } from './CTab' import { CTabContent } from './CTabContent' import { CTabPane } from './CTabPane' +import { CTabPanel } from './CTabPanel' +import { CTabList } from './CTabList' +import { CTabs } from './CTabs' -export { CTabContent, CTabPane } +export { CTab, CTabContent, CTabList, CTabPane, CTabPanel, CTabs } diff --git a/packages/coreui-react/src/utils/getNextActiveElement.ts b/packages/coreui-react/src/utils/getNextActiveElement.ts new file mode 100644 index 00000000..a80293ca --- /dev/null +++ b/packages/coreui-react/src/utils/getNextActiveElement.ts @@ -0,0 +1,23 @@ +const getNextActiveElement = ( + list: HTMLElement[], + activeElement: HTMLElement, + shouldGetNext: boolean, + isCycleAllowed: boolean, +) => { + const listLength = list.length + let index = list.indexOf(activeElement) + + if (index === -1) { + return !shouldGetNext && isCycleAllowed ? list[listLength - 1] : list[0] + } + + index += shouldGetNext ? 1 : -1 + + if (isCycleAllowed) { + index = (index + listLength) % listLength + } + + return list[Math.max(0, Math.min(index, listLength - 1))] +} + +export default getNextActiveElement diff --git a/packages/coreui-react/src/utils/index.ts b/packages/coreui-react/src/utils/index.ts index 10dbd154..bcdb558e 100644 --- a/packages/coreui-react/src/utils/index.ts +++ b/packages/coreui-react/src/utils/index.ts @@ -1,4 +1,5 @@ import executeAfterTransition from './executeAfterTransition' +import getNextActiveElement from './getNextActiveElement' import getRTLPlacement from './getRTLPlacement' import getTransitionDurationFromElement from './getTransitionDurationFromElement' import isInViewport from './isInViewport' @@ -6,6 +7,7 @@ import isRTL from './isRTL' export { executeAfterTransition, + getNextActiveElement, getRTLPlacement, getTransitionDurationFromElement, isInViewport, diff --git a/packages/docs/content/api/CTab.api.mdx b/packages/docs/content/api/CTab.api.mdx new file mode 100644 index 00000000..f0ba1fe6 --- /dev/null +++ b/packages/docs/content/api/CTab.api.mdx @@ -0,0 +1,11 @@ + +```jsx +import { CTab } from '@coreui/react' +// or +import CTab from '@coreui/react/src/components/tabs/CTab' +``` + +| Property | Description | Type | Default | +| --- | --- | --- | --- | +| **className** | A string of all className you want applied to the base component. | `string` | - | +| **itemKey** | Item key. | `string` \| `number` | - | diff --git a/packages/docs/content/api/CTabList.api.mdx b/packages/docs/content/api/CTabList.api.mdx new file mode 100644 index 00000000..0625b962 --- /dev/null +++ b/packages/docs/content/api/CTabList.api.mdx @@ -0,0 +1,12 @@ + +```jsx +import { CTabList } from '@coreui/react' +// or +import CTabList from '@coreui/react/src/components/tabs/CTabList' +``` + +| Property | Description | Type | Default | +| --- | --- | --- | --- | +| **className** | A string of all className you want applied to the base component. | `string` | - | +| **layout** | Specify a layout type for component. | `'fill'` \| `'justified'` | - | +| **variant** | Set the nav variant to tabs or pills. | `'pills'` \| `'tabs'` \| `'underline'` \| `'underline-border'` | - | diff --git a/packages/docs/content/api/CTabPane.api.mdx b/packages/docs/content/api/CTabPane.api.mdx index 9b2755bc..e37cc210 100644 --- a/packages/docs/content/api/CTabPane.api.mdx +++ b/packages/docs/content/api/CTabPane.api.mdx @@ -10,4 +10,5 @@ import CTabPane from '@coreui/react/src/components/tabs/CTabPane' | **className** | A string of all className you want applied to the base component. | `string` | - | | **onHide** | Callback fired when the component requests to be hidden. | `() => void` | - | | **onShow** | Callback fired when the component requests to be shown. | `() => void` | - | +| **transition** **_5.1.0+_** | Enable fade in and fade out transition. | `boolean` | true | | **visible** | Toggle the visibility of component. | `boolean` | - | diff --git a/packages/docs/content/api/CTabPanel.api.mdx b/packages/docs/content/api/CTabPanel.api.mdx new file mode 100644 index 00000000..02745245 --- /dev/null +++ b/packages/docs/content/api/CTabPanel.api.mdx @@ -0,0 +1,15 @@ + +```jsx +import { CTabPanel } from '@coreui/react' +// or +import CTabPanel from '@coreui/react/src/components/tabs/CTabPanel' +``` + +| Property | Description | Type | Default | +| --- | --- | --- | --- | +| **className** | A string of all className you want applied to the base component. | `string` | - | +| **itemKey** | Item key. | `string` \| `number` | - | +| **onHide** | Callback fired when the component requests to be hidden. | `() => void` | - | +| **onShow** | Callback fired when the component requests to be shown. | `() => void` | - | +| **transition** | Enable fade in and fade out transition. | `boolean` | true | +| **visible** | Toggle the visibility of component. | `boolean` | - | diff --git a/packages/docs/content/api/CTabs.api.mdx b/packages/docs/content/api/CTabs.api.mdx new file mode 100644 index 00000000..3a31ef16 --- /dev/null +++ b/packages/docs/content/api/CTabs.api.mdx @@ -0,0 +1,12 @@ + +```jsx +import { CTabs } from '@coreui/react' +// or +import CTabs from '@coreui/react/src/components/tabs/CTabs' +``` + +| Property | Description | Type | Default | +| --- | --- | --- | --- | +| **activeItemKey** | The active item key. | `string` \| `number` | - | +| **className** | A string of all className you want applied to the base component. | `string` | - | +| **onChange** | The callback is fired when the active tab changes. | `(value: string` \| `number) => void` | - | diff --git a/packages/docs/content/api/CTabsContext.api.mdx b/packages/docs/content/api/CTabsContext.api.mdx new file mode 100644 index 00000000..fc799c7c --- /dev/null +++ b/packages/docs/content/api/CTabsContext.api.mdx @@ -0,0 +1,10 @@ + +```jsx +import { CTabsContext } from '@coreui/react' +// or +import CTabsContext from '@coreui/react/src/components/tabs/CTabsContext' +``` + +| Property | Description | Type | Default | +| --- | --- | --- | --- | +| **activeItemKey** | The active item key. | `string` \| `number` | - | diff --git a/packages/docs/content/components/tabs.mdx b/packages/docs/content/components/tabs.mdx new file mode 100644 index 00000000..03fd7a76 --- /dev/null +++ b/packages/docs/content/components/tabs.mdx @@ -0,0 +1,347 @@ +--- +title: React Tabs Components +name: Tabs +description: The CoreUI React Tabs component provides a flexible and accessible way to create tabbed navigation in your application. It supports various styles and configurations to meet different design requirements. +menu: Components +route: /components/tabs +since: 5.1.0 +--- + +import { useState } from 'react' + +import { + CTab, + CTabContent, + CTabList, + CTabPanel, + CTabs, +} from '@coreui/react/src/index' + +## Example + +The basic React tabs example uses the `variant="tabs"` props to generate a tabbed interface. + +```jsx preview + + + Home + Profile + Contact + Disabled + + + + Home tab content + + + Profile tab content + + + Contact tab content + + + Disabled tab content + + + +``` + +## Available styles + +Change the style of ``'s component with modifiers and utilities. Mix and match as needed, or build your own. + +### Unstyled + +If you don’t provide the `variant` prop, the component will default to a basic style. + +```jsx preview + + + Home + Profile + Contact + Disabled + + + + Home tab content + + + Profile tab content + + + Contact tab content + + + Disabled tab content + + + +``` + +### Pills + +Take that same code, but use `variant="pills"` instead: + +```jsx preview + + + Home + Profile + Contact + Disabled + + + + Home tab content + + + Profile tab content + + + Contact tab content + + + Disabled tab content + + + +``` + +### Underline + +Take that same code, but use `variant="underline"` instead: + +```jsx preview + + + Home + Profile + Contact + Disabled + + + + Home tab content + + + Profile tab content + + + Contact tab content + + + Disabled tab content + + + +``` + +### Underline border + +Take that same code, but use `variant="underline-border"` instead: + +```jsx preview + + + Home + Profile + Contact + Disabled + + + + Home tab content + + + Profile tab content + + + Contact tab content + + + Disabled tab content + + + +``` + +### Fill and justify + +Force your ``'s contents to extend the full available width one of two modifier classes. To proportionately fill all available space use `layout="fill"`. Notice that all horizontal space is occupied, but not every nav item has the same width. + +```jsx preview + + + Home + Profile tab with longer content + Contact + Disabled + + + + Home tab content + + + Profile tab content + + + Contact tab content + + + Disabled tab content + + + +``` + +For equal-width elements, use `layout="justified"`. All horizontal space will be occupied by nav links, but unlike the `layout="fill"` above, every nav item will be the same width. + +```jsx preview + + + Home + Profile + Contact + Disabled + + + + Home tab content + + + Profile tab content + + + Contact tab content + + + Disabled tab content + + + +``` + +## Accessibility + +Dynamic tabbed interfaces, as described in the [WAI ARIA Authoring Practices](https://www.w3.org/TR/wai-aria-practices/#tabpanel), require `role="tablist"`, `role="tab"`, `role="tabpanel"`, and additional `aria-` attributes in order to convey their structure, functionality and current state to users of assistive technologies (such as screen readers). + +### WAI-ARIA Roles + +- The element that serves as the container for the set of tabs has the role `tablist`. +- Each element that serves as a tab has the role `tab` and is contained within the element with the role `tablist`. +- Each element that contains the content panel for a tab has the role `tabpanel`. +- If the tab list has a visible label, the element with the role `tablist` has `aria-labelledby` set to a value that refers to the labeling element. Otherwise, the `tablist` element has a label provided by `aria-label`. +- Each element with the role `tab` has the property `aria-controls` referring to its associated `tabpanel` element. +- The active tab element has the state `aria-selected` set to `true`, and all other tab elements have it set to `false`. +- Each element with the role `tabpanel` has the property `aria-labelledby` referring to its associated `tab` element. + +Our React Tabs component automatically manages all `role="..."` and `aria-` attributes for accessibility. It also handles the selected state by adding `aria-selected="true"` to the active tab. Additionally, you have the flexibility to manually set these attributes, as shown in the example below: + +```jsx + + + Home + Profile + Contact + Disabled + + + + Home tab content + + + Profile tab content + + + Contact tab content + + + Disabled tab content + + + +``` + +This example demonstrates how to manually set `aria-selected`, `aria-controls`, and `aria-labelledby` attributes on your ``'s and ``'s. + +### Keyboard Interaction + +**When focus enters the tab list:** + +Tab: It places focus on the active `tab` element. + +**When focus is on a tab element:** + +Tab: Moves focus to the next element in the tab sequence, typically the tabpanel unless the first focusable element inside the tabpanel is found earlier. + +Left Arrow: Moves focus to the previous tab. If on the first tab, it wraps around to the last tab. + +Right Arrow: Moves focus to the next tab. If on the last tab, it wraps around to the first tab. + +Home: Moves focus to the first tab. + +End: Moves focus to the last tab. + +## Customizing + +### CSS variables + +React tabs use local CSS variables on `.nav`, `.nav-tabs`, `.nav-pills`, `.nav-underline` and `.nav-underline-border` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too. + +On the `.nav` base class: + + + +On the `.nav-tabs` modifier class: + + + +On the `.nav-pills` modifier class: + + + +On the `.nav-underline` modifier class: + + + +On the `.nav-underline-border` modifier class: + + + +#### How to use CSS variables + +```jsx +const vars = { + '--my-css-var': 10, + '--my-another-css-var': "red" +} +return ... +``` + +### SASS variables + + + +## API + +### CTab + +`markdown:CTab.api.mdx` + +### CTabContent + +`markdown:CTabContent.api.mdx` + +### CTabList + +`markdown:CTabList.api.mdx` + +### CTabPanel + +`markdown:CTabPanel.api.mdx` + +### CTabs + +`markdown:CTabs.api.mdx` + diff --git a/packages/docs/src/nav.tsx b/packages/docs/src/nav.tsx index 2b3a062e..6aebda1d 100644 --- a/packages/docs/src/nav.tsx +++ b/packages/docs/src/nav.tsx @@ -293,6 +293,14 @@ const nav = [ name: 'Table', to: '/components/table/', }, + { + name: 'Tabs', + to: '/components/tabs/', + badge: { + color: 'success', + text: 'New', + }, + }, { name: 'Toast', to: '/components/toast/', From 8dc985366bd318966e44dd2befad457a3598f284 Mon Sep 17 00:00:00 2001 From: mrholek Date: Sat, 25 May 2024 19:38:49 +0200 Subject: [PATCH 023/164] chore: update dependencies and devDependencies --- packages/docs/package.json | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/packages/docs/package.json b/packages/docs/package.json index e8b587d9..ab551842 100644 --- a/packages/docs/package.json +++ b/packages/docs/package.json @@ -25,21 +25,21 @@ }, "dependencies": { "@coreui/chartjs": "^4.0.0", - "@coreui/coreui": "^5.0.0", + "@coreui/coreui": "^5.0.1", "@coreui/icons": "^3.0.1", "@coreui/icons-react": "^2.2.1", "@coreui/react-chartjs": "^3.0.0", "@coreui/utils": "^2.0.2", "@docsearch/css": "^3.6.0", - "@mdx-js/mdx": "^2.3.0", - "@mdx-js/react": "^2.3.0", + "@mdx-js/mdx": "^3.0.1", + "@mdx-js/react": "^3.0.1", "@types/react-helmet": "^6.1.11", - "gatsby": "^5.13.3", + "gatsby": "^5.13.5", "gatsby-plugin-google-tagmanager": "^5.13.1", "gatsby-plugin-image": "^3.13.1", "gatsby-plugin-manifest": "^5.13.1", "gatsby-plugin-mdx": "^5.13.1", - "gatsby-plugin-offline": "^6.13.1", + "gatsby-plugin-offline": "^6.13.2", "gatsby-plugin-react-helmet": "^6.13.1", "gatsby-plugin-sass": "^6.13.1", "gatsby-plugin-sharp": "^5.13.1", @@ -53,13 +53,13 @@ "prism-react-renderer": "^2.3.1", "prismjs": "^1.29.0", "prop-types": "^15.8.1", - "react": "^18.2.0", + "react": "^18.3.1", "react-docgen-typescript": "^2.2.2", - "react-dom": "^18.2.0", + "react-dom": "^18.3.1", "react-helmet": "^6.1.0", - "react-imask": "^7.5.0", - "rimraf": "^5.0.5", - "sass": "^1.72.0" + "react-imask": "^7.6.1", + "rimraf": "^5.0.7", + "sass": "^1.77.2" }, "devDependencies": { "npm-run-all": "^4.1.5" From 4617f9d8b1c39b1e559c0d6c20ec0e2f7d5038e2 Mon Sep 17 00:00:00 2001 From: mrholek Date: Sat, 25 May 2024 19:45:20 +0200 Subject: [PATCH 024/164] docs: improve layout, add tabs support to mdx files --- .../{gatsby-browser.js => gatsby-browser.tsx} | 0 .../{gatsby-config.js => gatsby-config.mjs} | 17 +- .../docs/{gatsby-node.js => gatsby-node.mjs} | 19 +- .../docs/{gatsby-ssr.js => gatsby-ssr.tsx} | 0 packages/docs/src/components/ScssDocs.tsx | 2 +- packages/docs/src/components/Toc.tsx | 68 +++-- .../docs/src/styles/_component-examples.scss | 15 +- packages/docs/src/styles/_layout.scss | 48 ++++ packages/docs/src/styles/_toc.scss | 47 +++- packages/docs/src/templates/DefaultLayout.tsx | 18 +- packages/docs/src/templates/DocsLayout.tsx | 91 ++++--- packages/remark-code-tabs/index.js | 244 ++++++++++++++++++ packages/remark-code-tabs/package.json | 19 ++ 13 files changed, 498 insertions(+), 90 deletions(-) rename packages/docs/{gatsby-browser.js => gatsby-browser.tsx} (100%) rename packages/docs/{gatsby-config.js => gatsby-config.mjs} (88%) rename packages/docs/{gatsby-node.js => gatsby-node.mjs} (73%) rename packages/docs/{gatsby-ssr.js => gatsby-ssr.tsx} (100%) create mode 100755 packages/remark-code-tabs/index.js create mode 100644 packages/remark-code-tabs/package.json diff --git a/packages/docs/gatsby-browser.js b/packages/docs/gatsby-browser.tsx similarity index 100% rename from packages/docs/gatsby-browser.js rename to packages/docs/gatsby-browser.tsx diff --git a/packages/docs/gatsby-config.js b/packages/docs/gatsby-config.mjs similarity index 88% rename from packages/docs/gatsby-config.js rename to packages/docs/gatsby-config.mjs index 5af7a215..93254870 100644 --- a/packages/docs/gatsby-config.js +++ b/packages/docs/gatsby-config.mjs @@ -1,4 +1,12 @@ -module.exports = { +import remarkGfm from 'remark-gfm' +import remarkCodeTabs from 'remark-code-tabs' + +import { dirname } from 'node:path' +import { fileURLToPath } from 'node:url' + +const __dirname = dirname(fileURLToPath(import.meta.url)) + +const config = { siteMetadata: { title: `CoreUI for React.js`, titleTemplate: `%s · React UI Components · CoreUI `, @@ -52,10 +60,7 @@ module.exports = { resolve: `gatsby-plugin-mdx`, options: { mdxOptions: { - remarkPlugins: [ - // Add GitHub Flavored Markdown (GFM) support - require(`remark-gfm`), - ], + remarkPlugins: [remarkGfm, remarkCodeTabs], }, gatsbyRemarkPlugins: [ { @@ -99,3 +104,5 @@ module.exports = { }, ], } + +export default config diff --git a/packages/docs/gatsby-node.js b/packages/docs/gatsby-node.mjs similarity index 73% rename from packages/docs/gatsby-node.js rename to packages/docs/gatsby-node.mjs index a93ffd30..97f4a8e1 100644 --- a/packages/docs/gatsby-node.js +++ b/packages/docs/gatsby-node.mjs @@ -1,7 +1,12 @@ -const path = require('node:path') -const { createFilePath } = require('gatsby-source-filesystem') +import { resolve } from 'node:path' +import { createFilePath } from 'gatsby-source-filesystem' -exports.onCreateNode = async ({ node, loadNodeContent, actions: { createNodeField }, getNode }) => { +export const onCreateNode = async ({ + node, + loadNodeContent, + actions: { createNodeField }, + getNode, +}) => { if (node.internal.type === 'Mdx') { const slug = createFilePath({ node, getNode }) @@ -22,7 +27,11 @@ exports.onCreateNode = async ({ node, loadNodeContent, actions: { createNodeFiel } } -exports.createPages = async ({ graphql, actions: { createPage, createRedirect }, reporter }) => { +export const createPages = async ({ + graphql, + actions: { createPage, createRedirect }, + reporter, +}) => { const result = await graphql(` query { allMdx { @@ -50,7 +59,7 @@ exports.createPages = async ({ graphql, actions: { createPage, createRedirect }, posts.forEach((node) => { createPage({ path: node.fields.slug, - component: `${path.resolve(`./src/templates/MdxLayout.tsx`)}?__contentFilePath=${ + component: `${resolve(`./src/templates/MdxLayout.tsx`)}?__contentFilePath=${ node.internal.contentFilePath }`, context: { id: node.id }, diff --git a/packages/docs/gatsby-ssr.js b/packages/docs/gatsby-ssr.tsx similarity index 100% rename from packages/docs/gatsby-ssr.js rename to packages/docs/gatsby-ssr.tsx diff --git a/packages/docs/src/components/ScssDocs.tsx b/packages/docs/src/components/ScssDocs.tsx index 45d649db..53c36b9f 100644 --- a/packages/docs/src/components/ScssDocs.tsx +++ b/packages/docs/src/components/ScssDocs.tsx @@ -43,7 +43,7 @@ const ScssDocs = ({ file, capture }: ScssDocsProps) => { return ( code && ( -
+
= ({ items }) => { - const toc = (items: TocItem[]) => { - return ( - items && - items.map((item, index) => { - if (Array.isArray(item.items)) { - return ( -
  • - {item.title} -
      {toc(item.items)}
    -
    • - ) - } +const toc = (items: TocItem[]) => { + return ( + items && + items.map((item, index) => { + if (Array.isArray(item.items)) { return (
  • {item.title} +
      {toc(item.items)}
    • ) - }) - ) - } + } + return ( +
  • + {item.title} +
    • + ) + }) + ) +} +const Toc: FC = ({ items }) => { + const [visible, setVisible] = useState(false) return (
    - On this page - -
      {toc(items)}
    -     + + On this page + + +
      {toc(items)}
    +     +
    ) } diff --git a/packages/docs/src/styles/_component-examples.scss b/packages/docs/src/styles/_component-examples.scss index ed1b36f2..3fe0496c 100644 --- a/packages/docs/src/styles/_component-examples.scss +++ b/packages/docs/src/styles/_component-examples.scss @@ -2,6 +2,14 @@ // Docs examples // +.tab-content .tab-pane { + @include border-top-radius(0); + + .highlight { + @include border-top-radius(0); + } +} + .docs-example-snippet { border: solid var(--cui-border-color); border-width: 1px 0; @@ -373,19 +381,20 @@ .highlight { position: relative; padding: .75rem ($cd-gutter-x * .5); - margin-bottom: 1rem; + margin: 0 ($cd-gutter-x * -.5) 1rem ($cd-gutter-x * -.5) ; border: 1px solid var(--cui-border-color); background-color: var(--cd-pre-bg); @include media-breakpoint-up(md) { padding: .75rem 1.25rem; + margin-right: 0; + margin-left: 0; @include border-radius(var(--cui-border-radius)); } pre { padding: .25rem 0 .875rem; margin-top: .8125rem; - margin-right: 1.875rem; margin-bottom: 0; overflow: overlay; white-space: pre; @@ -404,7 +413,7 @@ margin: 0 ($cd-gutter-x * -.5) $spacer; .highlight { - margin-bottom: 0; + margin: 0; } .docs-example ~ .highlight { diff --git a/packages/docs/src/styles/_layout.scss b/packages/docs/src/styles/_layout.scss index 38bfe8c4..2ee63995 100644 --- a/packages/docs/src/styles/_layout.scss +++ b/packages/docs/src/styles/_layout.scss @@ -3,4 +3,52 @@ @include ltr-rtl("padding-left", var(--cui-sidebar-occupy-start, 0)); will-change: auto; @include transition(padding .15s); + + > .container-lg { + --cui-gutter-x: 3rem; + } +} + +.docs-sidebar { + grid-area: sidebar; +} + +.docs-main { + grid-area: main; + + @include media-breakpoint-down(lg) { + max-width: 760px; + margin-inline: auto; + } + + @include media-breakpoint-up(md) { + display: grid; + grid-template-areas: + "intro" + "toc" + "content"; + grid-template-rows: auto auto 1fr; + gap: $grid-gutter-width; + } + + @include media-breakpoint-up(lg) { + grid-template-areas: + "intro toc" + "content toc"; + grid-template-rows: auto 1fr; + grid-template-columns: 4fr 1fr; + } +} + +.docs-intro { + grid-area: intro; +} + +.docs-toc { + grid-area: toc; +} + +.docs-content { + grid-area: content; + min-width: 1px; // Fix width when bd-content contains a `
    ` https://github.com/twbs/bootstrap/issues/25410
 }
diff --git a/packages/docs/src/styles/_toc.scss b/packages/docs/src/styles/_toc.scss
index 6178d193..8f6dc04d 100644
--- a/packages/docs/src/styles/_toc.scss
+++ b/packages/docs/src/styles/_toc.scss
@@ -39,4 +39,49 @@
       }
     }
   }
-}
\ No newline at end of file
+}
+
+.docs-toc-toggle {
+  display: flex;
+  align-items: center;
+
+  @include media-breakpoint-down(sm) {
+    justify-content: space-between;
+    width: 100%;
+  }
+
+  @include media-breakpoint-down(md) {
+    color: var(--cui-body-color);
+    border: 1px solid var(--cui-border-color);
+    @include border-radius(var(--cui-border-radius));
+
+    &:hover,
+    &:focus,
+    &:active,
+    &[aria-expanded="true"] {
+      color: var(--cui-primary);
+      background-color: var(--cui-body-bg);
+      border-color: var(--cui-primary);
+    }
+
+    &:focus,
+    &[aria-expanded="true"] {
+      box-shadow: 0 0 0 3px rgba(var(--cui-primary-rgb), .25);
+    }
+  }
+}
+
+.docs-toc-collapse {
+  @include media-breakpoint-down(md) {
+    nav {
+      padding: 1.25rem 1.25rem 1.25rem 1rem;
+      background-color: var(--cui-tertiary-bg);
+      border: 1px solid var(--cui-border-color);
+      @include border-radius(var(--cui-border-radius));
+    }
+  }
+
+  @include media-breakpoint-up(md) {
+    display: block !important; // stylelint-disable-line declaration-no-important
+  }
+}
diff --git a/packages/docs/src/templates/DefaultLayout.tsx b/packages/docs/src/templates/DefaultLayout.tsx
index 2065aa0e..83c5fd99 100644
--- a/packages/docs/src/templates/DefaultLayout.tsx
+++ b/packages/docs/src/templates/DefaultLayout.tsx
@@ -29,17 +29,15 @@ const DefaultLayout: FC = ({ children, data, pageContext, pa
     >
       
       
-      
    
+      
    
         
    
-        
    
-          {path === '/404/' ? (
-            {children}
-          ) : (
-            
-              {children}
-            
-          )}
-        
    
+        {path === '/404/' ? (
+          {children}
+        ) : (
+          
+            {children}
+          
+        )}
         
    
       
    
       
       )}
-    
+    
   )
 }
 
diff --git a/packages/docs/src/templates/DefaultLayout.tsx b/packages/docs/src/templates/DefaultLayout.tsx
index 007145cd..73022b43 100644
--- a/packages/docs/src/templates/DefaultLayout.tsx
+++ b/packages/docs/src/templates/DefaultLayout.tsx
@@ -1,10 +1,9 @@
 import React, { FC, useState } from 'react'
-import { Footer, Header, Sidebar, Seo } from '../components'
+import { Footer, Header, Sidebar } from '../components'
 import { CContainer } from '@coreui/react/src/'
 import DocsLayout from './DocsLayout'
 
 import { AppContext } from '../AppContext'
-import { Script } from 'gatsby'
 
 interface DefaultLayoutProps {
   children: any // eslint-disable-line @typescript-eslint/no-explicit-any
@@ -16,11 +15,6 @@ interface DefaultLayoutProps {
 
 const DefaultLayout: FC = ({ children, data, location, pageContext, path }) => {
   const [sidebarVisible, setSidebarVisible] = useState()
-
-  const title = pageContext.frontmatter ? pageContext.frontmatter.title : ''
-  const description = pageContext.frontmatter ? pageContext.frontmatter.description : ''
-  const name = pageContext.frontmatter ? pageContext.frontmatter.name : ''
-
   return (
      = ({ children, data, location, pageC
         setSidebarVisible,
       }}
     >
-      
       
       
    
         
    
@@ -41,29 +34,6 @@ const DefaultLayout: FC = ({ children, data, location, pageC
         )}
         
    
       
    
-      
         
   )
 }
diff --git a/packages/docs/src/templates/MdxLayout.tsx b/packages/docs/src/templates/MdxLayout.tsx
index b1d55b4c..52f43b0a 100644
--- a/packages/docs/src/templates/MdxLayout.tsx
+++ b/packages/docs/src/templates/MdxLayout.tsx
@@ -6,9 +6,10 @@ import {
   CodeBlock,
   ClassNamesDocs,
   Example,
-  JSXDocs,
   ExampleSnippet,
+  JSXDocs,
   ScssDocs,
+  Seo,
 } from '../components'
 
 import { CalloutProps } from '../components/Callout'
@@ -34,6 +35,14 @@ interface DataProps {
   }
 }
 
+interface PageContextType {
+  frontmatter: {
+    title: string
+    description: string
+    name: string
+  }
+}
+
 interface Toc {
   items: TocItem[]
 }
@@ -85,6 +94,21 @@ MdxLayout.displayName = 'MdxLayout'
 
 export default MdxLayout
 
+export const Head = ({ pageContext }: { pageContext: PageContextType }) => {
+  const { frontmatter } = pageContext
+
+  const title = frontmatter?.title || ''
+  const description = frontmatter?.description || ''
+  const name = frontmatter?.name || ''
+
+  return (
+    <>
+      
+      
+    
+  )
+}
+
 export const pageQuery = graphql`
   query PageQuery($id: String, $regex: String) {
     mdx(id: { eq: $id }) {

From e5c44d88d2ba4cf285acb6e7c515018a77a8c603 Mon Sep 17 00:00:00 2001
From: mrholek 
Date: Tue, 17 Dec 2024 13:23:10 +0100
Subject: [PATCH 091/164] build: add bundle analyzer

---
 packages/docs/gatsby-config.mjs | 4 +++-
 packages/docs/package.json      | 7 +++----
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/packages/docs/gatsby-config.mjs b/packages/docs/gatsby-config.mjs
index 93254870..c7a17ef7 100644
--- a/packages/docs/gatsby-config.mjs
+++ b/packages/docs/gatsby-config.mjs
@@ -19,7 +19,6 @@ const config = {
   },
   pathPrefix: `react/docs/`,
   plugins: [
-    `gatsby-plugin-react-helmet`,
     `gatsby-plugin-image`,
     {
       resolve: `gatsby-source-filesystem`,
@@ -102,6 +101,9 @@ const config = {
         id: `GTM-KX4JH47`,
       },
     },
+    {
+      resolve: `gatsby-plugin-webpack-bundle-analyser-v2`,
+    },
   ],
 }
 
diff --git a/packages/docs/package.json b/packages/docs/package.json
index bd396108..85c8dac6 100644
--- a/packages/docs/package.json
+++ b/packages/docs/package.json
@@ -30,21 +30,21 @@
     "@coreui/icons-react": "^2.3.0",
     "@coreui/react-chartjs": "^3.0.0",
     "@coreui/utils": "^2.0.2",
-    "@docsearch/css": "^3.6.2",
+    "@docsearch/css": "^3.8.1",
+    "@docsearch/react": "^3.8.1",
     "@mdx-js/mdx": "^3.1.0",
     "@mdx-js/react": "^3.1.0",
     "@stackblitz/sdk": "^1.11.0",
-    "@types/react-helmet": "^6.1.11",
     "gatsby": "^5.13.7",
     "gatsby-plugin-google-tagmanager": "^5.13.1",
     "gatsby-plugin-image": "^3.13.1",
     "gatsby-plugin-manifest": "^5.13.1",
     "gatsby-plugin-mdx": "^5.13.1",
     "gatsby-plugin-offline": "^6.13.3",
-    "gatsby-plugin-react-helmet": "^6.13.1",
     "gatsby-plugin-sass": "^6.13.1",
     "gatsby-plugin-sharp": "^5.13.1",
     "gatsby-plugin-sitemap": "^6.13.1",
+    "gatsby-plugin-webpack-bundle-analyser-v2": "^1.1.32",
     "gatsby-remark-autolink-headers": "^6.13.1",
     "gatsby-remark-external-links": "^0.0.4",
     "gatsby-source-filesystem": "^5.13.1",
@@ -56,7 +56,6 @@
     "react": "^18.3.1",
     "react-docgen-typescript": "^2.2.2",
     "react-dom": "^18.3.1",
-    "react-helmet": "^6.1.0",
     "react-imask": "^7.6.1",
     "react-markdown": "^9.0.1",
     "rimraf": "^6.0.1",

From f140536689bc20cbc34b3595306c7a49f4b17284 Mon Sep 17 00:00:00 2001
From: mrholek 
Date: Tue, 17 Dec 2024 14:42:53 +0100
Subject: [PATCH 092/164] build: update API generator

---
 packages/docs/build/api.mjs | 30 +++++++++++++++---------------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/packages/docs/build/api.mjs b/packages/docs/build/api.mjs
index 01045b9c..a1118348 100644
--- a/packages/docs/build/api.mjs
+++ b/packages/docs/build/api.mjs
@@ -294,7 +294,7 @@ const createMdx = async (file, component) => {
       .map((_type) => `\`${_type.trim()}\``)
       .join(', ')
 
-    const id = `${component.displayName.toLowerCase()}-${propName}`
+    const id = `${component.displayName.toLowerCase()}-${propName.replaceAll(/([a-z])([A-Z])/g, '$1-$2').toLowerCase()}`
     const anchor = `#`
 
     content += `      \n`
@@ -340,22 +340,22 @@ const main = async () => {
   try {
     const files = await globby(GLOB_PATTERNS, GLOBBY_OPTIONS)
 
-    await Promise.all(
-      files.map(async (file) => {
-        console.log(`Processing file: ${file}`)
-        let components
-        try {
-          components = parse(file, DOCGEN_OPTIONS)
-        } catch (parseError) {
-          console.error(`Failed to parse ${file}:`, parseError)
-          return
-        }
+    for (const file of files) {
+      console.log(`Processing file: ${file}`)
+      let components
+      try {
+        components = parse(file, DOCGEN_OPTIONS)
+      } catch (parseError) {
+        console.error(`Failed to parse ${file}:`, parseError)
+        continue // Skip to the next file
+      }
 
-        if (components && components.length > 0) {
-          await Promise.all(components.map((component) => createMdx(file, component)))
+      if (components && components.length > 0) {
+        for (const component of components) {
+          await createMdx(file, component) // Sequentially create MDX files
         }
-      }),
-    )
+      }
+    }
   } catch (error) {
     console.error('An error occurred:', error)
     process.exit(1)

From 720b173ff4b8f8608625fb128171b4affad7e167 Mon Sep 17 00:00:00 2001
From: mrholek 
Date: Tue, 17 Dec 2024 14:46:02 +0100
Subject: [PATCH 093/164] docs: update API documentation

---
 packages/docs/content/api/CAccordion.api.mdx  | 49 +++++--------------
 .../docs/content/api/CAccordionBody.api.mdx   | 28 ++---------
 .../docs/content/api/CAccordionButton.api.mdx | 25 ++--------
 .../docs/content/api/CAccordionHeader.api.mdx | 25 +---------
 .../docs/content/api/CAccordionItem.api.mdx   | 27 ++--------
 packages/docs/content/api/CAlert.api.mdx      |  8 +--
 .../docs/content/api/CAlertHeading.api.mdx    |  4 +-
 packages/docs/content/api/CAlertLink.api.mdx  |  4 +-
 packages/docs/content/api/CAvatar.api.mdx     |  8 +--
 packages/docs/content/api/CBackdrop.api.mdx   |  4 +-
 packages/docs/content/api/CBadge.api.mdx      | 12 ++---
 packages/docs/content/api/CBreadcrumb.api.mdx |  4 +-
 .../docs/content/api/CBreadcrumbItem.api.mdx  |  4 +-
 packages/docs/content/api/CButton.api.mdx     |  4 +-
 .../docs/content/api/CButtonGroup.api.mdx     |  4 +-
 .../docs/content/api/CButtonToolbar.api.mdx   |  4 +-
 packages/docs/content/api/CCallout.api.mdx    |  4 +-
 packages/docs/content/api/CCard.api.mdx       | 12 ++---
 packages/docs/content/api/CCardBody.api.mdx   |  4 +-
 packages/docs/content/api/CCardFooter.api.mdx |  4 +-
 packages/docs/content/api/CCardGroup.api.mdx  |  4 +-
 packages/docs/content/api/CCardHeader.api.mdx |  4 +-
 packages/docs/content/api/CCardImage.api.mdx  |  4 +-
 .../content/api/CCardImageOverlay.api.mdx     |  4 +-
 packages/docs/content/api/CCardLink.api.mdx   |  4 +-
 .../docs/content/api/CCardSubtitle.api.mdx    |  4 +-
 packages/docs/content/api/CCardText.api.mdx   |  4 +-
 packages/docs/content/api/CCardTitle.api.mdx  |  4 +-
 packages/docs/content/api/CCarousel.api.mdx   | 16 +++---
 .../docs/content/api/CCarouselCaption.api.mdx |  4 +-
 .../docs/content/api/CCarouselItem.api.mdx    |  4 +-
 packages/docs/content/api/CChart.api.mdx      | 24 ++++-----
 packages/docs/content/api/CCharts.api.mdx     | 24 ++++-----
 .../docs/content/api/CCloseButton.api.mdx     |  4 +-
 packages/docs/content/api/CCol.api.mdx        |  4 +-
 packages/docs/content/api/CCollapse.api.mdx   | 12 ++---
 packages/docs/content/api/CContainer.api.mdx  |  4 +-
 packages/docs/content/api/CDropdown.api.mdx   | 16 +++---
 .../docs/content/api/CDropdownDivider.api.mdx |  4 +-
 .../docs/content/api/CDropdownHeader.api.mdx  |  4 +-
 .../docs/content/api/CDropdownItem.api.mdx    |  4 +-
 .../content/api/CDropdownItemPlain.api.mdx    |  4 +-
 .../docs/content/api/CDropdownMenu.api.mdx    |  4 +-
 .../docs/content/api/CDropdownToggle.api.mdx  |  8 +--
 packages/docs/content/api/CFooter.api.mdx     |  4 +-
 packages/docs/content/api/CForm.api.mdx       |  4 +-
 packages/docs/content/api/CFormCheck.api.mdx  | 24 ++++-----
 .../api/CFormControlValidation.api.mdx        | 16 +++---
 .../content/api/CFormControlWrapper.api.mdx   | 20 ++++----
 .../docs/content/api/CFormFeedback.api.mdx    |  4 +-
 .../docs/content/api/CFormFloating.api.mdx    |  4 +-
 packages/docs/content/api/CFormInput.api.mdx  | 36 +++++++-------
 packages/docs/content/api/CFormLabel.api.mdx  |  8 +--
 packages/docs/content/api/CFormRange.api.mdx  | 12 ++---
 packages/docs/content/api/CFormSelect.api.mdx | 32 ++++++------
 packages/docs/content/api/CFormSwitch.api.mdx |  4 +-
 packages/docs/content/api/CFormText.api.mdx   |  4 +-
 .../docs/content/api/CFormTextarea.api.mdx    | 36 +++++++-------
 packages/docs/content/api/CHeader.api.mdx     |  4 +-
 .../docs/content/api/CHeaderBrand.api.mdx     |  4 +-
 .../docs/content/api/CHeaderDivider.api.mdx   |  4 +-
 packages/docs/content/api/CHeaderNav.api.mdx  |  4 +-
 packages/docs/content/api/CHeaderText.api.mdx |  4 +-
 .../docs/content/api/CHeaderToggler.api.mdx   |  4 +-
 packages/docs/content/api/CIcon.api.mdx       | 16 +++---
 packages/docs/content/api/CIconSvg.api.mdx    | 10 ++--
 packages/docs/content/api/CImage.api.mdx      |  4 +-
 packages/docs/content/api/CInputGroup.api.mdx |  4 +-
 .../docs/content/api/CInputGroupText.api.mdx  |  4 +-
 packages/docs/content/api/CLink.api.mdx       |  4 +-
 packages/docs/content/api/CListGroup.api.mdx  |  4 +-
 .../docs/content/api/CListGroupItem.api.mdx   |  4 +-
 packages/docs/content/api/CModal.api.mdx      | 20 ++++----
 packages/docs/content/api/CModalBody.api.mdx  |  4 +-
 .../docs/content/api/CModalContent.api.mdx    |  4 +-
 .../docs/content/api/CModalDialog.api.mdx     |  4 +-
 .../docs/content/api/CModalFooter.api.mdx     |  4 +-
 .../docs/content/api/CModalHeader.api.mdx     |  8 +--
 packages/docs/content/api/CModalTitle.api.mdx |  4 +-
 packages/docs/content/api/CNav.api.mdx        |  4 +-
 packages/docs/content/api/CNavGroup.api.mdx   |  4 +-
 .../docs/content/api/CNavGroupItems.api.mdx   |  4 +-
 packages/docs/content/api/CNavItem.api.mdx    |  4 +-
 packages/docs/content/api/CNavLink.api.mdx    |  4 +-
 packages/docs/content/api/CNavTitle.api.mdx   |  4 +-
 packages/docs/content/api/CNavbar.api.mdx     |  8 +--
 .../docs/content/api/CNavbarBrand.api.mdx     |  4 +-
 packages/docs/content/api/CNavbarNav.api.mdx  |  4 +-
 packages/docs/content/api/CNavbarText.api.mdx |  4 +-
 .../docs/content/api/CNavbarToggler.api.mdx   |  4 +-
 packages/docs/content/api/COffcanvas.api.mdx  | 12 ++---
 .../docs/content/api/COffcanvasBody.api.mdx   |  4 +-
 .../docs/content/api/COffcanvasHeader.api.mdx |  4 +-
 .../docs/content/api/COffcanvasTitle.api.mdx  |  4 +-
 packages/docs/content/api/CPagination.api.mdx |  4 +-
 .../docs/content/api/CPlaceholder.api.mdx     |  4 +-
 packages/docs/content/api/CPopover.api.mdx    | 16 +++---
 packages/docs/content/api/CProgress.api.mdx   |  8 +--
 .../docs/content/api/CProgressBar.api.mdx     |  4 +-
 .../docs/content/api/CProgressStacked.api.mdx |  4 +-
 packages/docs/content/api/CRow.api.mdx        |  4 +-
 packages/docs/content/api/CSidebar.api.mdx    | 20 ++++----
 .../docs/content/api/CSidebarBrand.api.mdx    |  4 +-
 .../docs/content/api/CSidebarFooter.api.mdx   |  4 +-
 .../docs/content/api/CSidebarHeader.api.mdx   |  4 +-
 packages/docs/content/api/CSidebarNav.api.mdx |  4 +-
 .../docs/content/api/CSidebarToggler.api.mdx  |  4 +-
 packages/docs/content/api/CSpinner.api.mdx    |  8 +--
 packages/docs/content/api/CTab.api.mdx        |  8 +--
 packages/docs/content/api/CTabContent.api.mdx |  4 +-
 packages/docs/content/api/CTabList.api.mdx    |  4 +-
 packages/docs/content/api/CTabPane.api.mdx    | 12 ++---
 packages/docs/content/api/CTabPanel.api.mdx   | 16 +++---
 packages/docs/content/api/CTable.api.mdx      | 24 ++++-----
 packages/docs/content/api/CTableBody.api.mdx  |  4 +-
 .../docs/content/api/CTableDataCell.api.mdx   |  4 +-
 packages/docs/content/api/CTableFoot.api.mdx  |  4 +-
 packages/docs/content/api/CTableHead.api.mdx  |  4 +-
 .../docs/content/api/CTableHeaderCell.api.mdx |  4 +-
 packages/docs/content/api/CTableRow.api.mdx   |  4 +-
 packages/docs/content/api/CTabs.api.mdx       | 12 ++---
 packages/docs/content/api/CToast.api.mdx      | 12 ++---
 packages/docs/content/api/CToastBody.api.mdx  |  4 +-
 packages/docs/content/api/CToastClose.api.mdx |  4 +-
 .../docs/content/api/CToastHeader.api.mdx     |  8 +--
 packages/docs/content/api/CToaster.api.mdx    |  4 +-
 packages/docs/content/api/CTooltip.api.mdx    | 16 +++---
 .../docs/content/api/CWidgetStatsA.api.mdx    |  4 +-
 .../docs/content/api/CWidgetStatsB.api.mdx    |  4 +-
 .../docs/content/api/CWidgetStatsC.api.mdx    |  4 +-
 .../docs/content/api/CWidgetStatsD.api.mdx    |  4 +-
 .../docs/content/api/CWidgetStatsE.api.mdx    |  4 +-
 .../docs/content/api/CWidgetStatsF.api.mdx    |  4 +-
 .../docs/content/api/CoreUIProvider.api.mdx   |  7 ---
 134 files changed, 485 insertions(+), 602 deletions(-)
 delete mode 100644 packages/docs/content/api/CoreUIProvider.api.mdx

diff --git a/packages/docs/content/api/CAccordion.api.mdx b/packages/docs/content/api/CAccordion.api.mdx
index 97e88506..971761dd 100644
--- a/packages/docs/content/api/CAccordion.api.mdx
+++ b/packages/docs/content/api/CAccordion.api.mdx
@@ -15,71 +15,44 @@ import CAccordion from '@coreui/react/src/components/accordion/CAccordion'
       
     
     
-      
-        activeItemKey#
+      
+        activeItemKey#
         undefined
         {`string`}, {`number`}
       
       
         
-          
    Determines which accordion item is currently active (expanded) by default.
    
-Accepts a number or string corresponding to the {`itemKey`} of the desired accordion item.
    
-        ...`} />
+          
    The active item key.
    
         
       
-      
-        alwaysOpen#
+      
+        alwaysOpen#
         {`false`}
         {`boolean`}
       
       
         
-          
    When set to {`true`}, multiple accordion items within the React Accordion can be open simultaneously.
    
-This is ideal for scenarios where users need to view multiple sections at once without collapsing others.
    
-        ...`} />
+          
    Make accordion items stay open when another item is opened
    
         
       
-      
-        className#
+      
+        className#
         undefined
         {`string`}
       
       
         
-          
    Allows you to apply custom CSS classes to the React Accordion for enhanced styling and theming.
    
-        ...`} />
-        
-      
-      
-        customClassNames#
-        undefined
-        {`Partial\<{ ACCORDION: string; ACCORDION_FLUSH: string; }>`}
-      
-      
-        
-          
    Allows overriding or extending the default CSS class names used in the component.
    
-
      
-
    • {`ACCORDION`}: Base class for the accordion component.
      • 
-
    • {`ACCORDION_FLUSH`}: Class applied when the {`flush`} prop is set to true, ensuring an edge-to-edge layout.
      • 
-
    
-
    Use this prop to customize the styles of specific parts of the accordion.
    
-        ...`} />
+          
    A string of all className you want applied to the base component.
    
         
       
       
         flush#
-        {`false`}
+        undefined
         {`boolean`}
       
       
         
-          
    When {`flush`} is set to {`true`}, the React Accordion renders edge-to-edge with its parent container,
    
-creating a seamless and modern look ideal for minimalist designs.
    
-        ...`} />
+          
    Removes the default background-color, some borders, and some rounded corners to render accordions edge-to-edge with their parent container.
    
         
       
     
diff --git a/packages/docs/content/api/CAccordionBody.api.mdx b/packages/docs/content/api/CAccordionBody.api.mdx
index b6eb9609..566d4aec 100644
--- a/packages/docs/content/api/CAccordionBody.api.mdx
+++ b/packages/docs/content/api/CAccordionBody.api.mdx
@@ -15,36 +15,14 @@ import CAccordionBody from '@coreui/react/src/components/accordion/CAccordionBod
       
     
     
-      
-        className#
+      
+        className#
         undefined
         {`string`}
       
       
         
-          
    Allows you to apply custom CSS classes to the React Accordion Body for enhanced styling and theming.
    
-        ...`} />
-        
-      
-      
-        customClassNames#
-        undefined
-        {`Partial\<{ ACCORDION_COLLAPSE: string; ACCORDION_BODY: string; }>`}
-      
-      
-        
-          
    Allows overriding or extending the default CSS class names used in the accordion body component.
    
-Accepts a partial object matching the shape of {`ACCORDION_BODY_CLASS_NAMES`}, which includes:
    
-
      
-
    • {`ACCORDION_COLLAPSE`}: Base class for the collapse container in the accordion body.
      • 
-
    • {`ACCORDION_BODY`}: Base class for the main content container inside the accordion body.
      • 
-
    
-
    Use this prop to customize the styles of specific parts of the accordion body.
    
-        ...`} />
+          
    A string of all className you want applied to the base component.
    
         
       
     
diff --git a/packages/docs/content/api/CAccordionButton.api.mdx b/packages/docs/content/api/CAccordionButton.api.mdx
index b9cc8d5a..21461dd2 100644
--- a/packages/docs/content/api/CAccordionButton.api.mdx
+++ b/packages/docs/content/api/CAccordionButton.api.mdx
@@ -15,33 +15,14 @@ import CAccordionButton from '@coreui/react/src/components/accordion/CAccordionB
       
     
     
-      
-        className#
+      
+        className#
         undefined
         {`string`}
       
       
         
-          
    Styles the clickable element in the accordion header.
    
-        
-      
-      
-        customClassNames#
-        undefined
-        {`Partial\<{ ACCORDION_BUTTON: string; }>`}
-      
-      
-        
-          
    Allows overriding or extending the default CSS class names used in the accordion button component.
    
-Accepts a partial object matching the shape of {`CLASS_NAMES`}, which includes:
    
-
      
-
    • {`ACCORDION_BUTTON`}: Base class for the accordion button.
      • 
-
    
-
    Use this prop to customize the styles of the accordion button.
    
-        ...`} />
+          
    A string of all className you want applied to the base component.
    
         
       
     
diff --git a/packages/docs/content/api/CAccordionHeader.api.mdx b/packages/docs/content/api/CAccordionHeader.api.mdx
index ad7cc0ed..e0ef9462 100644
--- a/packages/docs/content/api/CAccordionHeader.api.mdx
+++ b/packages/docs/content/api/CAccordionHeader.api.mdx
@@ -15,8 +15,8 @@ import CAccordionHeader from '@coreui/react/src/components/accordion/CAccordionH
       
     
     
-      
-        className#
+      
+        className#
         undefined
         {`string`}
       
@@ -25,27 +25,6 @@ import CAccordionHeader from '@coreui/react/src/components/accordion/CAccordionH
           
    A string of all className you want applied to the base component.
    
         
       
-      
-        customClassNames#
-        undefined
-        {`Partial\<{ ACCORDION_HEADER: string; ACCORDION_BUTTON: string; }>`}
-      
-      
-        
-          
    Allows overriding or extending the default CSS class names used in the accordion header component.
    
-Accepts a partial object matching the shape of {`ACCORDION_HEADER_CLASS_NAMES`}, which includes:
    
-
      
-
    • {`ACCORDION_HEADER`}: Base class for the accordion header container.
      • 
-
    • {`ACCORDION_BUTTON`}: Class applied to the button within the accordion header.
      • 
-
    
-
    Use this prop to customize the styles of specific parts of the accordion header.
    
-        ...`} />
-        
-      
     
   
 
    
diff --git a/packages/docs/content/api/CAccordionItem.api.mdx b/packages/docs/content/api/CAccordionItem.api.mdx
index 49049a00..f9adfbbc 100644
--- a/packages/docs/content/api/CAccordionItem.api.mdx
+++ b/packages/docs/content/api/CAccordionItem.api.mdx
@@ -15,8 +15,8 @@ import CAccordionItem from '@coreui/react/src/components/accordion/CAccordionIte
       
     
     
-      
-        className#
+      
+        className#
         undefined
         {`string`}
       
@@ -25,27 +25,8 @@ import CAccordionItem from '@coreui/react/src/components/accordion/CAccordionIte
           
    A string of all className you want applied to the base component.
    
         
       
-      
-        customClassNames#
-        undefined
-        {`Partial\<{ ACCORDION_ITEM: string; }>`}
-      
-      
-        
-          
    Allows overriding or extending the default CSS class names used in the accordion item component.
    
-Accepts a partial object matching the shape of {`ACCORDION_ITEM_CLASS_NAMES`}, which includes:
    
-
      
-
    • {`ACCORDION_ITEM`}: Base class for an individual accordion item.
      • 
-
    
-
    Use this prop to customize the styles of specific parts of the accordion item.
    
-        ...`} />
-        
-      
-      
-        itemKey#
+      
+        itemKey#
         undefined
         {`string`}, {`number`}
       
diff --git a/packages/docs/content/api/CAlert.api.mdx b/packages/docs/content/api/CAlert.api.mdx
index 85628676..01a98cb0 100644
--- a/packages/docs/content/api/CAlert.api.mdx
+++ b/packages/docs/content/api/CAlert.api.mdx
@@ -15,8 +15,8 @@ import CAlert from '@coreui/react/src/components/alert/CAlert'
       
     
     
-      
-        className#
+      
+        className#
         undefined
         {`string`}
       
@@ -45,8 +45,8 @@ import CAlert from '@coreui/react/src/components/alert/CAlert'
           
    Optionally add a close button to alert and allow it to self dismiss.
    
         
       
-      
-        onClose#
+      
+        onClose#
         undefined
         {`() => void`}
       
diff --git a/packages/docs/content/api/CAlertHeading.api.mdx b/packages/docs/content/api/CAlertHeading.api.mdx
index ff38b822..a6596378 100644
--- a/packages/docs/content/api/CAlertHeading.api.mdx
+++ b/packages/docs/content/api/CAlertHeading.api.mdx
@@ -25,8 +25,8 @@ import CAlertHeading from '@coreui/react/src/components/alert/CAlertHeading'
           
    Component used for the root node. Either a string to use a HTML element or a component.
    
         
       
-      
-        className#
+      
+        className#
         undefined
         {`string`}
       
diff --git a/packages/docs/content/api/CAlertLink.api.mdx b/packages/docs/content/api/CAlertLink.api.mdx
index b7a05875..bf1c8a5a 100644
--- a/packages/docs/content/api/CAlertLink.api.mdx
+++ b/packages/docs/content/api/CAlertLink.api.mdx
@@ -15,8 +15,8 @@ import CAlertLink from '@coreui/react/src/components/alert/CAlertLink'
       
     
     
-      
-        className#
+      
+        className#
         undefined
         {`string`}
       
diff --git a/packages/docs/content/api/CAvatar.api.mdx b/packages/docs/content/api/CAvatar.api.mdx
index 92eaeec3..485f06c4 100644
--- a/packages/docs/content/api/CAvatar.api.mdx
+++ b/packages/docs/content/api/CAvatar.api.mdx
@@ -15,8 +15,8 @@ import CAvatar from '@coreui/react/src/components/avatar/CAvatar'
       
     
     
-      
-        className#
+      
+        className#
         undefined
         {`string`}
       
@@ -75,8 +75,8 @@ import CAvatar from '@coreui/react/src/components/avatar/CAvatar'
           
    Sets the color context of the status indicator to one of CoreUI’s themed colors.
    
         
       
-      
-        textColor#
+      
+        textColor#
         undefined
         {`'primary'`}, {`'secondary'`}, {`'success'`}, {`'danger'`}, {`'warning'`}, {`'info'`}, {`'dark'`}, {`'light'`}, {`'primary-emphasis'`}, {`'secondary-emphasis'`}, {`'success-emphasis'`}, {`'danger-emphasis'`}, {`'warning-emphasis'`}, {`'info-emphasis'`}, {`'light-emphasis'`}, {`'body'`}, {`'body-emphasis'`}, {`'body-secondary'`}, {`'body-tertiary'`}, {`'black'`}, {`'black-50'`}, {`'white'`}, {`'white-50'`}, {`string`}
       
diff --git a/packages/docs/content/api/CBackdrop.api.mdx b/packages/docs/content/api/CBackdrop.api.mdx
index 468688cc..5e725a9d 100644
--- a/packages/docs/content/api/CBackdrop.api.mdx
+++ b/packages/docs/content/api/CBackdrop.api.mdx
@@ -15,8 +15,8 @@ import CBackdrop from '@coreui/react/src/components/backdrop/CBackdrop'
       
     
     
-      
-        className#
+      
+        className#
         {`modal-backdrop`}
         {`string`}
       
diff --git a/packages/docs/content/api/CBadge.api.mdx b/packages/docs/content/api/CBadge.api.mdx
index 68c20286..571d29ba 100644
--- a/packages/docs/content/api/CBadge.api.mdx
+++ b/packages/docs/content/api/CBadge.api.mdx
@@ -25,8 +25,8 @@ import CBadge from '@coreui/react/src/components/badge/CBadge'
           
    Component used for the root node. Either a string to use a HTML element or a component.
    
         
       
-      
-        className#
+      
+        className#
         undefined
         {`string`}
       
@@ -75,8 +75,8 @@ import CBadge from '@coreui/react/src/components/badge/CBadge'
           
    Size the component small.
    
         
       
-      
-        textBgColor#5.0.0+
+      
+        textBgColor#5.0.0+
         undefined
         {`'primary'`}, {`'secondary'`}, {`'success'`}, {`'danger'`}, {`'warning'`}, {`'info'`}, {`'dark'`}, {`'light'`}, {`string`}
       
@@ -85,8 +85,8 @@ import CBadge from '@coreui/react/src/components/badge/CBadge'
           
    Sets the component's color scheme to one of CoreUI's themed colors, ensuring the text color contrast adheres to the WCAG 4.5:1 contrast ratio standard for accessibility.
    
         
       
-      
-        textColor#
+      
+        textColor#
         undefined
         {`'primary'`}, {`'secondary'`}, {`'success'`}, {`'danger'`}, {`'warning'`}, {`'info'`}, {`'dark'`}, {`'light'`}, {`'primary-emphasis'`}, {`'secondary-emphasis'`}, {`'success-emphasis'`}, {`'danger-emphasis'`}, {`'warning-emphasis'`}, {`'info-emphasis'`}, {`'light-emphasis'`}, {`'body'`}, {`'body-emphasis'`}, {`'body-secondary'`}, {`'body-tertiary'`}, {`'black'`}, {`'black-50'`}, {`'white'`}, {`'white-50'`}, {`string`}
       
diff --git a/packages/docs/content/api/CBreadcrumb.api.mdx b/packages/docs/content/api/CBreadcrumb.api.mdx
index 2734c4d1..053af3ca 100644
--- a/packages/docs/content/api/CBreadcrumb.api.mdx
+++ b/packages/docs/content/api/CBreadcrumb.api.mdx
@@ -15,8 +15,8 @@ import CBreadcrumb from '@coreui/react/src/components/breadcrumb/CBreadcrumb'
       
     
     
-      
-        className#
+      
+        className#
         undefined
         {`string`}
       
diff --git a/packages/docs/content/api/CBreadcrumbItem.api.mdx b/packages/docs/content/api/CBreadcrumbItem.api.mdx
index 6da6d355..ac72b194 100644
--- a/packages/docs/content/api/CBreadcrumbItem.api.mdx
+++ b/packages/docs/content/api/CBreadcrumbItem.api.mdx
@@ -35,8 +35,8 @@ import CBreadcrumbItem from '@coreui/react/src/components/breadcrumb/CBreadcrumb
           
    Component used for the root node. Either a string to use a HTML element or a component.
    
         
       
-      
-        className#
+      
+        className#
         undefined
         {`string`}
       
diff --git a/packages/docs/content/api/CButton.api.mdx b/packages/docs/content/api/CButton.api.mdx
index 008c290d..47774ac8 100644
--- a/packages/docs/content/api/CButton.api.mdx
+++ b/packages/docs/content/api/CButton.api.mdx
@@ -35,8 +35,8 @@ import CButton from '@coreui/react/src/components/button/CButton'
           
    Component used for the root node. Either a string to use a HTML element or a component.
    
         
       
-      
-        className#
+      
+        className#
         undefined
         {`string`}
       
diff --git a/packages/docs/content/api/CButtonGroup.api.mdx b/packages/docs/content/api/CButtonGroup.api.mdx
index 696910a8..89726cff 100644
--- a/packages/docs/content/api/CButtonGroup.api.mdx
+++ b/packages/docs/content/api/CButtonGroup.api.mdx
@@ -15,8 +15,8 @@ import CButtonGroup from '@coreui/react/src/components/button-group/CButtonGroup
       
     
     
-      
-        className#
+      
+        className#
         undefined
         {`string`}
       
diff --git a/packages/docs/content/api/CButtonToolbar.api.mdx b/packages/docs/content/api/CButtonToolbar.api.mdx
index c95ae1f3..07124772 100644
--- a/packages/docs/content/api/CButtonToolbar.api.mdx
+++ b/packages/docs/content/api/CButtonToolbar.api.mdx
@@ -15,8 +15,8 @@ import CButtonToolbar from '@coreui/react/src/components/button-group/CButtonToo
       
     
     
-      
-        className#
+      
+        className#
         undefined
         {`string`}
       
diff --git a/packages/docs/content/api/CCallout.api.mdx b/packages/docs/content/api/CCallout.api.mdx
index c364fcdf..3300d21a 100644
--- a/packages/docs/content/api/CCallout.api.mdx
+++ b/packages/docs/content/api/CCallout.api.mdx
@@ -15,8 +15,8 @@ import CCallout from '@coreui/react/src/components/callout/CCallout'
       
     
     
-      
-        className#
+      
+        className#
         undefined
         {`string`}
       
diff --git a/packages/docs/content/api/CCard.api.mdx b/packages/docs/content/api/CCard.api.mdx
index 242fc436..4c47fb26 100644
--- a/packages/docs/content/api/CCard.api.mdx
+++ b/packages/docs/content/api/CCard.api.mdx
@@ -15,8 +15,8 @@ import CCard from '@coreui/react/src/components/card/CCard'
       
     
     
-      
-        className#
+      
+        className#
         undefined
         {`string`}
       
@@ -35,8 +35,8 @@ import CCard from '@coreui/react/src/components/card/CCard'
           
    Sets the color context of the component to one of CoreUI’s themed colors.
    
         
       
-      
-        textBgColor#5.0.0+
+      
+        textBgColor#5.0.0+
         undefined
         {`'primary'`}, {`'secondary'`}, {`'success'`}, {`'danger'`}, {`'warning'`}, {`'info'`}, {`'dark'`}, {`'light'`}, {`string`}
       
@@ -45,8 +45,8 @@ import CCard from '@coreui/react/src/components/card/CCard'
           
    Sets the component's color scheme to one of CoreUI's themed colors, ensuring the text color contrast adheres to the WCAG 4.5:1 contrast ratio standard for accessibility.
    
         
       
-      
-        textColor#
+      
+        textColor#
         undefined
         {`'primary'`}, {`'secondary'`}, {`'success'`}, {`'danger'`}, {`'warning'`}, {`'info'`}, {`'dark'`}, {`'light'`}, {`'primary-emphasis'`}, {`'secondary-emphasis'`}, {`'success-emphasis'`}, {`'danger-emphasis'`}, {`'warning-emphasis'`}, {`'info-emphasis'`}, {`'light-emphasis'`}, {`'body'`}, {`'body-emphasis'`}, {`'body-secondary'`}, {`'body-tertiary'`}, {`'black'`}, {`'black-50'`}, {`'white'`}, {`'white-50'`}, {`string`}
       
diff --git a/packages/docs/content/api/CCardBody.api.mdx b/packages/docs/content/api/CCardBody.api.mdx
index a0ba3a0e..59f7b5c8 100644
--- a/packages/docs/content/api/CCardBody.api.mdx
+++ b/packages/docs/content/api/CCardBody.api.mdx
@@ -15,8 +15,8 @@ import CCardBody from '@coreui/react/src/components/card/CCardBody'
       
     
     
-      
-        className#
+      
+        className#
         undefined
         {`string`}
       
diff --git a/packages/docs/content/api/CCardFooter.api.mdx b/packages/docs/content/api/CCardFooter.api.mdx
index e9fe9533..8c20dc0e 100644
--- a/packages/docs/content/api/CCardFooter.api.mdx
+++ b/packages/docs/content/api/CCardFooter.api.mdx
@@ -15,8 +15,8 @@ import CCardFooter from '@coreui/react/src/components/card/CCardFooter'
       
     
     
-      
-        className#
+      
+        className#
         undefined
         {`string`}
       
diff --git a/packages/docs/content/api/CCardGroup.api.mdx b/packages/docs/content/api/CCardGroup.api.mdx
index 1e9e115b..df4db1db 100644
--- a/packages/docs/content/api/CCardGroup.api.mdx
+++ b/packages/docs/content/api/CCardGroup.api.mdx
@@ -15,8 +15,8 @@ import CCardGroup from '@coreui/react/src/components/card/CCardGroup'
       
     
     
-      
-        className#
+      
+        className#
         undefined
         {`string`}
       
diff --git a/packages/docs/content/api/CCardHeader.api.mdx b/packages/docs/content/api/CCardHeader.api.mdx
index fc1e173b..b93f305c 100644
--- a/packages/docs/content/api/CCardHeader.api.mdx
+++ b/packages/docs/content/api/CCardHeader.api.mdx
@@ -25,8 +25,8 @@ import CCardHeader from '@coreui/react/src/components/card/CCardHeader'
           
    Component used for the root node. Either a string to use a HTML element or a component.
    
         
       
-      
-        className#
+      
+        className#
         undefined
         {`string`}
       
diff --git a/packages/docs/content/api/CCardImage.api.mdx b/packages/docs/content/api/CCardImage.api.mdx
index 80470cb5..153a3e9d 100644
--- a/packages/docs/content/api/CCardImage.api.mdx
+++ b/packages/docs/content/api/CCardImage.api.mdx
@@ -25,8 +25,8 @@ import CCardImage from '@coreui/react/src/components/card/CCardImage'
           
    Component used for the root node. Either a string to use a HTML element or a component.
    
         
       
-      
-        className#
+      
+        className#
         undefined
         {`string`}
       
diff --git a/packages/docs/content/api/CCardImageOverlay.api.mdx b/packages/docs/content/api/CCardImageOverlay.api.mdx
index 9b02e5a6..d65a2469 100644
--- a/packages/docs/content/api/CCardImageOverlay.api.mdx
+++ b/packages/docs/content/api/CCardImageOverlay.api.mdx
@@ -15,8 +15,8 @@ import CCardImageOverlay from '@coreui/react/src/components/card/CCardImageOverl
       
     
     
-      
-        className#
+      
+        className#
         undefined
         {`string`}
       
diff --git a/packages/docs/content/api/CCardLink.api.mdx b/packages/docs/content/api/CCardLink.api.mdx
index 2329b6c8..96f44171 100644
--- a/packages/docs/content/api/CCardLink.api.mdx
+++ b/packages/docs/content/api/CCardLink.api.mdx
@@ -15,8 +15,8 @@ import CCardLink from '@coreui/react/src/components/card/CCardLink'
       
     
     
-      
-        className#
+      
+        className#
         undefined
         {`string`}
       
diff --git a/packages/docs/content/api/CCardSubtitle.api.mdx b/packages/docs/content/api/CCardSubtitle.api.mdx
index 17ef812e..be9c5b47 100644
--- a/packages/docs/content/api/CCardSubtitle.api.mdx
+++ b/packages/docs/content/api/CCardSubtitle.api.mdx
@@ -25,8 +25,8 @@ import CCardSubtitle from '@coreui/react/src/components/card/CCardSubtitle'
           
    Component used for the root node. Either a string to use a HTML element or a component.
    
         
       
-      
-        className#
+      
+        className#
         undefined
         {`string`}
       
diff --git a/packages/docs/content/api/CCardText.api.mdx b/packages/docs/content/api/CCardText.api.mdx
index cd7180de..ea0d07ef 100644
--- a/packages/docs/content/api/CCardText.api.mdx
+++ b/packages/docs/content/api/CCardText.api.mdx
@@ -25,8 +25,8 @@ import CCardText from '@coreui/react/src/components/card/CCardText'
           
    Component used for the root node. Either a string to use a HTML element or a component.
    
         
       
-      
-        className#
+      
+        className#
         undefined
         {`string`}
       
diff --git a/packages/docs/content/api/CCardTitle.api.mdx b/packages/docs/content/api/CCardTitle.api.mdx
index d1bc0805..a37fd610 100644
--- a/packages/docs/content/api/CCardTitle.api.mdx
+++ b/packages/docs/content/api/CCardTitle.api.mdx
@@ -25,8 +25,8 @@ import CCardTitle from '@coreui/react/src/components/card/CCardTitle'
           
    Component used for the root node. Either a string to use a HTML element or a component.
    
         
       
-      
-        className#
+      
+        className#
         undefined
         {`string`}
       
diff --git a/packages/docs/content/api/CCarousel.api.mdx b/packages/docs/content/api/CCarousel.api.mdx
index 9fc5f84d..c23deeaa 100644
--- a/packages/docs/content/api/CCarousel.api.mdx
+++ b/packages/docs/content/api/CCarousel.api.mdx
@@ -15,8 +15,8 @@ import CCarousel from '@coreui/react/src/components/carousel/CCarousel'
       
     
     
-      
-        activeIndex#
+      
+        activeIndex#
         {`0`}
         {`number`}
       
@@ -25,8 +25,8 @@ import CCarousel from '@coreui/react/src/components/carousel/CCarousel'
           
    index of the active item.
    
         
       
-      
-        className#
+      
+        className#
         undefined
         {`string`}
       
@@ -75,8 +75,8 @@ import CCarousel from '@coreui/react/src/components/carousel/CCarousel'
           
    The amount of time to delay between automatically cycling an item. If false, carousel will not automatically cycle.
    
         
       
-      
-        onSlid#
+      
+        onSlid#
         undefined
         {`(active: number, direction: string) => void`}
       
@@ -85,8 +85,8 @@ import CCarousel from '@coreui/react/src/components/carousel/CCarousel'
           
    Callback fired when a slide transition end.
    
         
       
-      
-        onSlide#
+      
+        onSlide#
         undefined
         {`(active: number, direction: string) => void`}
       
diff --git a/packages/docs/content/api/CCarouselCaption.api.mdx b/packages/docs/content/api/CCarouselCaption.api.mdx
index a1fa0f31..9990fb72 100644
--- a/packages/docs/content/api/CCarouselCaption.api.mdx
+++ b/packages/docs/content/api/CCarouselCaption.api.mdx
@@ -15,8 +15,8 @@ import CCarouselCaption from '@coreui/react/src/components/carousel/CCarouselCap
       
     
     
-      
-        className#
+      
+        className#
         undefined
         {`string`}
       
diff --git a/packages/docs/content/api/CCarouselItem.api.mdx b/packages/docs/content/api/CCarouselItem.api.mdx
index 75b5046c..062cad22 100644
--- a/packages/docs/content/api/CCarouselItem.api.mdx
+++ b/packages/docs/content/api/CCarouselItem.api.mdx
@@ -15,8 +15,8 @@ import CCarouselItem from '@coreui/react/src/components/carousel/CCarouselItem'
       
     
     
-      
-        className#
+      
+        className#
         undefined
         {`string`}
       
diff --git a/packages/docs/content/api/CChart.api.mdx b/packages/docs/content/api/CChart.api.mdx
index c875f322..f19be174 100644
--- a/packages/docs/content/api/CChart.api.mdx
+++ b/packages/docs/content/api/CChart.api.mdx
@@ -15,8 +15,8 @@ import CChart from '@coreui/react-chartjs/src/CChart'
       
     
     
-      
-        className#
+      
+        className#
         undefined
         {`string`}
       
@@ -25,8 +25,8 @@ import CChart from '@coreui/react-chartjs/src/CChart'
           
    A string of all className you want applied to the base component.
    
         
       
-      
-        customTooltips#
+      
+        customTooltips#
         {`true`}
         {`boolean`}
       
@@ -45,8 +45,8 @@ import CChart from '@coreui/react-chartjs/src/CChart'
           
    The data object that is passed into the Chart.js chart (more info).
    
         
       
-      
-        fallbackContent#
+      
+        fallbackContent#
         undefined
         {`React.ReactNode`}
       
@@ -55,8 +55,8 @@ import CChart from '@coreui/react-chartjs/src/CChart'
           
    A fallback for when the canvas cannot be rendered. Can be used for accessible chart descriptions.
    
         
       
-      
-        getDatasetAtEvent#
+      
+        getDatasetAtEvent#
         undefined
         {`(dataset: InteractionItem[], event: React.MouseEvent\) => void`}
       
@@ -65,8 +65,8 @@ import CChart from '@coreui/react-chartjs/src/CChart'
           
    Proxy for Chart.js getDatasetAtEvent. Calls with dataset and triggering event.
    
         
       
-      
-        getElementAtEvent#
+      
+        getElementAtEvent#
         undefined
         {`(element: InteractionItem[], event: React.MouseEvent\) => void`}
       
@@ -75,8 +75,8 @@ import CChart from '@coreui/react-chartjs/src/CChart'
           
    Proxy for Chart.js getElementAtEvent. Calls with single element array and triggering event.
    
         
       
-      
-        getElementsAtEvent#
+      
+        getElementsAtEvent#
         undefined
         {`(elements: InteractionItem[], event: React.MouseEvent\) => void`}
       
diff --git a/packages/docs/content/api/CCharts.api.mdx b/packages/docs/content/api/CCharts.api.mdx
index ef3bafe1..51f32ed4 100644
--- a/packages/docs/content/api/CCharts.api.mdx
+++ b/packages/docs/content/api/CCharts.api.mdx
@@ -15,8 +15,8 @@ import CChartBar from '@coreui/react-chartjs/src/CCharts'
       
     
     
-      
-        className#
+      
+        className#
         undefined
         {`string`}
       
@@ -25,8 +25,8 @@ import CChartBar from '@coreui/react-chartjs/src/CCharts'
           
    A string of all className you want applied to the base component.
    
         
       
-      
-        customTooltips#
+      
+        customTooltips#
         {`true`}
         {`boolean`}
       
@@ -45,8 +45,8 @@ import CChartBar from '@coreui/react-chartjs/src/CCharts'
           
    The data object that is passed into the Chart.js chart (more info).
    
         
       
-      
-        fallbackContent#
+      
+        fallbackContent#
         undefined
         {`React.ReactNode`}
       
@@ -55,8 +55,8 @@ import CChartBar from '@coreui/react-chartjs/src/CCharts'
           
    A fallback for when the canvas cannot be rendered. Can be used for accessible chart descriptions.
    
         
       
-      
-        getDatasetAtEvent#
+      
+        getDatasetAtEvent#
         undefined
         {`(dataset: InteractionItem[], event: React.MouseEvent\) => void`}
       
@@ -65,8 +65,8 @@ import CChartBar from '@coreui/react-chartjs/src/CCharts'
           
    Proxy for Chart.js getDatasetAtEvent. Calls with dataset and triggering event.
    
         
       
-      
-        getElementAtEvent#
+      
+        getElementAtEvent#
         undefined
         {`(element: InteractionItem[], event: React.MouseEvent\) => void`}
       
@@ -75,8 +75,8 @@ import CChartBar from '@coreui/react-chartjs/src/CCharts'
           
    Proxy for Chart.js getElementAtEvent. Calls with single element array and triggering event.
    
         
       
-      
-        getElementsAtEvent#
+      
+        getElementsAtEvent#
         undefined
         {`(elements: InteractionItem[], event: React.MouseEvent\) => void`}
       
diff --git a/packages/docs/content/api/CCloseButton.api.mdx b/packages/docs/content/api/CCloseButton.api.mdx
index fba3e552..c6d34b32 100644
--- a/packages/docs/content/api/CCloseButton.api.mdx
+++ b/packages/docs/content/api/CCloseButton.api.mdx
@@ -15,8 +15,8 @@ import CCloseButton from '@coreui/react/src/components/close-button/CCloseButton
       
     
     
-      
-        className#
+      
+        className#
         undefined
         {`string`}
       
diff --git a/packages/docs/content/api/CCol.api.mdx b/packages/docs/content/api/CCol.api.mdx
index 90cba258..f9e0847f 100644
--- a/packages/docs/content/api/CCol.api.mdx
+++ b/packages/docs/content/api/CCol.api.mdx
@@ -15,8 +15,8 @@ import CCol from '@coreui/react/src/components/grid/CCol'
       
     
     
-      
-        className#
+      
+        className#
         undefined
         {`string`}
       
diff --git a/packages/docs/content/api/CCollapse.api.mdx b/packages/docs/content/api/CCollapse.api.mdx
index 997d55fd..08d54233 100644
--- a/packages/docs/content/api/CCollapse.api.mdx
+++ b/packages/docs/content/api/CCollapse.api.mdx
@@ -15,8 +15,8 @@ import CCollapse from '@coreui/react/src/components/collapse/CCollapse'
       
     
     
-      
-        className#
+      
+        className#
         undefined
         {`string`}
       
@@ -35,8 +35,8 @@ import CCollapse from '@coreui/react/src/components/collapse/CCollapse'
           
    Set horizontal collapsing to transition the width instead of height.
    
         
       
-      
-        onHide#
+      
+        onHide#
         undefined
         {`() => void`}
       
@@ -45,8 +45,8 @@ import CCollapse from '@coreui/react/src/components/collapse/CCollapse'
           
    Callback fired when the component requests to be hidden.
    
         
       
-      
-        onShow#
+      
+        onShow#
         undefined
         {`() => void`}
       
diff --git a/packages/docs/content/api/CContainer.api.mdx b/packages/docs/content/api/CContainer.api.mdx
index d98c8ead..48cafc0c 100644
--- a/packages/docs/content/api/CContainer.api.mdx
+++ b/packages/docs/content/api/CContainer.api.mdx
@@ -15,8 +15,8 @@ import CContainer from '@coreui/react/src/components/grid/CContainer'
       
     
     
-      
-        className#
+      
+        className#
         undefined
         {`string`}
       
diff --git a/packages/docs/content/api/CDropdown.api.mdx b/packages/docs/content/api/CDropdown.api.mdx
index 5262dcc9..e5393293 100644
--- a/packages/docs/content/api/CDropdown.api.mdx
+++ b/packages/docs/content/api/CDropdown.api.mdx
@@ -35,8 +35,8 @@ 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.
    
         
       
-      
-        autoClose#
+      
+        autoClose#
         {`true`}
         {`boolean`}, {`"inside"`}, {`"outside"`}
       
@@ -51,8 +51,8 @@ import CDropdown from '@coreui/react/src/components/dropdown/CDropdown'
 
         
       
-      
-        className#
+      
+        className#
         undefined
         {`string`}
       
@@ -101,8 +101,8 @@ import CDropdown from '@coreui/react/src/components/dropdown/CDropdown'
           
    Offset of the dropdown menu relative to its target.
    
         
       
-      
-        onHide#4.9.0+
+      
+        onHide#4.9.0+
         undefined
         {`() => void`}
       
@@ -111,8 +111,8 @@ import CDropdown from '@coreui/react/src/components/dropdown/CDropdown'
           
    Callback fired when the component requests to be hidden.
    
         
       
-      
-        onShow#
+      
+        onShow#
         undefined
         {`() => void`}
       
diff --git a/packages/docs/content/api/CDropdownDivider.api.mdx b/packages/docs/content/api/CDropdownDivider.api.mdx
index aaab8e37..dc8842ea 100644
--- a/packages/docs/content/api/CDropdownDivider.api.mdx
+++ b/packages/docs/content/api/CDropdownDivider.api.mdx
@@ -15,8 +15,8 @@ import CDropdownDivider from '@coreui/react/src/components/dropdown/CDropdownDiv
       
     
     
-      
-        className#
+      
+        className#
         undefined
         {`string`}
       
diff --git a/packages/docs/content/api/CDropdownHeader.api.mdx b/packages/docs/content/api/CDropdownHeader.api.mdx
index 7652f974..f4793433 100644
--- a/packages/docs/content/api/CDropdownHeader.api.mdx
+++ b/packages/docs/content/api/CDropdownHeader.api.mdx
@@ -25,8 +25,8 @@ import CDropdownHeader from '@coreui/react/src/components/dropdown/CDropdownHead
           
    Component used for the root node. Either a string to use a HTML element or a component.
    
         
       
-      
-        className#
+      
+        className#
         undefined
         {`string`}
       
diff --git a/packages/docs/content/api/CDropdownItem.api.mdx b/packages/docs/content/api/CDropdownItem.api.mdx
index 7bc03b89..c427f418 100644
--- a/packages/docs/content/api/CDropdownItem.api.mdx
+++ b/packages/docs/content/api/CDropdownItem.api.mdx
@@ -35,8 +35,8 @@ import CDropdownItem from '@coreui/react/src/components/dropdown/CDropdownItem'
           
    Component used for the root node. Either a string to use a HTML element or a component.
    
         
       
-      
-        className#
+      
+        className#
         undefined
         {`string`}
       
diff --git a/packages/docs/content/api/CDropdownItemPlain.api.mdx b/packages/docs/content/api/CDropdownItemPlain.api.mdx
index 074f67b0..a8be60ec 100644
--- a/packages/docs/content/api/CDropdownItemPlain.api.mdx
+++ b/packages/docs/content/api/CDropdownItemPlain.api.mdx
@@ -25,8 +25,8 @@ import CDropdownItemPlain from '@coreui/react/src/components/dropdown/CDropdownI
           
    Component used for the root node. Either a string to use a HTML element or a component.
    
         
       
-      
-        className#
+      
+        className#
         undefined
         {`string`}
       
diff --git a/packages/docs/content/api/CDropdownMenu.api.mdx b/packages/docs/content/api/CDropdownMenu.api.mdx
index cef37751..30989ae0 100644
--- a/packages/docs/content/api/CDropdownMenu.api.mdx
+++ b/packages/docs/content/api/CDropdownMenu.api.mdx
@@ -25,8 +25,8 @@ import CDropdownMenu from '@coreui/react/src/components/dropdown/CDropdownMenu'
           
    Component used for the root node. Either a string to use a HTML element or a component.
    
         
       
-      
-        className#
+      
+        className#
         undefined
         {`string`}
       
diff --git a/packages/docs/content/api/CDropdownToggle.api.mdx b/packages/docs/content/api/CDropdownToggle.api.mdx
index cd887421..9cb992f8 100644
--- a/packages/docs/content/api/CDropdownToggle.api.mdx
+++ b/packages/docs/content/api/CDropdownToggle.api.mdx
@@ -45,8 +45,8 @@ import CDropdownToggle from '@coreui/react/src/components/dropdown/CDropdownTogg
           
    Enables pseudo element caret on toggler.
    
         
       
-      
-        className#
+      
+        className#
         undefined
         {`string`}
       
@@ -95,8 +95,8 @@ import CDropdownToggle from '@coreui/react/src/components/dropdown/CDropdownTogg
           
    The href attribute specifies the URL of the page the link goes to.
    
         
       
-      
-        navLink#5.0.0+
+      
+        navLink#5.0.0+
         {`true`}
         {`boolean`}
       
diff --git a/packages/docs/content/api/CFooter.api.mdx b/packages/docs/content/api/CFooter.api.mdx
index d58c8223..f54439f0 100644
--- a/packages/docs/content/api/CFooter.api.mdx
+++ b/packages/docs/content/api/CFooter.api.mdx
@@ -15,8 +15,8 @@ import CFooter from '@coreui/react/src/components/footer/CFooter'
       
     
     
-      
-        className#
+      
+        className#
         undefined
         {`string`}
       
diff --git a/packages/docs/content/api/CForm.api.mdx b/packages/docs/content/api/CForm.api.mdx
index 076a0e96..5c6b86dc 100644
--- a/packages/docs/content/api/CForm.api.mdx
+++ b/packages/docs/content/api/CForm.api.mdx
@@ -15,8 +15,8 @@ import CForm from '@coreui/react/src/components/form/CForm'
       
     
     
-      
-        className#
+      
+        className#
         undefined
         {`string`}
       
diff --git a/packages/docs/content/api/CFormCheck.api.mdx b/packages/docs/content/api/CFormCheck.api.mdx
index 9427f66f..2798a834 100644
--- a/packages/docs/content/api/CFormCheck.api.mdx
+++ b/packages/docs/content/api/CFormCheck.api.mdx
@@ -25,8 +25,8 @@ import CFormCheck from '@coreui/react/src/components/form/CFormCheck'
           
    Create button-like checkboxes and radio buttons.
    
         
       
-      
-        className#
+      
+        className#
         undefined
         {`string`}
       
@@ -45,8 +45,8 @@ import CFormCheck from '@coreui/react/src/components/form/CFormCheck'
           
    Provide valuable, actionable feedback.
    
         
       
-      
-        feedbackInvalid#4.2.0+
+      
+        feedbackInvalid#4.2.0+
         undefined
         {`ReactNode`}
       
@@ -55,8 +55,8 @@ import CFormCheck from '@coreui/react/src/components/form/CFormCheck'
           
    Provide valuable, actionable feedback.
    
         
       
-      
-        feedbackValid#4.2.0+
+      
+        feedbackValid#4.2.0+
         undefined
         {`ReactNode`}
       
@@ -65,8 +65,8 @@ import CFormCheck from '@coreui/react/src/components/form/CFormCheck'
           
    Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, {`:invalid`} and {`:valid`}.
    
         
       
-      
-        floatingLabel#4.2.0+
+      
+        floatingLabel#4.2.0+
         undefined
         {`ReactNode`}
       
@@ -75,8 +75,8 @@ import CFormCheck from '@coreui/react/src/components/form/CFormCheck'
           
    Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, {`:invalid`} and {`:valid`}.
    
         
       
-      
-        hitArea#
+      
+        hitArea#
         undefined
         {`"full"`}
       
@@ -145,8 +145,8 @@ import CFormCheck from '@coreui/react/src/components/form/CFormCheck'
           
    Put checkboxes or radios on the opposite side.
    
         
       
-      
-        tooltipFeedback#4.2.0+
+      
+        tooltipFeedback#4.2.0+
         undefined
         {`boolean`}
       
diff --git a/packages/docs/content/api/CFormControlValidation.api.mdx b/packages/docs/content/api/CFormControlValidation.api.mdx
index e2fdfe60..49863167 100644
--- a/packages/docs/content/api/CFormControlValidation.api.mdx
+++ b/packages/docs/content/api/CFormControlValidation.api.mdx
@@ -25,8 +25,8 @@ import CFormControlValidation from '@coreui/react/src/components/form/CFormContr
           
    Provide valuable, actionable feedback.
    
         
       
-      
-        feedbackInvalid#4.2.0+
+      
+        feedbackInvalid#4.2.0+
         undefined
         {`ReactNode`}
       
@@ -35,8 +35,8 @@ import CFormControlValidation from '@coreui/react/src/components/form/CFormContr
           
    Provide valuable, actionable feedback.
    
         
       
-      
-        feedbackValid#4.2.0+
+      
+        feedbackValid#4.2.0+
         undefined
         {`ReactNode`}
       
@@ -45,8 +45,8 @@ import CFormControlValidation from '@coreui/react/src/components/form/CFormContr
           
    Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, {`:invalid`} and {`:valid`}.
    
         
       
-      
-        floatingLabel#4.2.0+
+      
+        floatingLabel#4.2.0+
         undefined
         {`ReactNode`}
       
@@ -65,8 +65,8 @@ import CFormControlValidation from '@coreui/react/src/components/form/CFormContr
           
    Set component validation state to invalid.
    
         
       
-      
-        tooltipFeedback#4.2.0+
+      
+        tooltipFeedback#4.2.0+
         undefined
         {`boolean`}
       
diff --git a/packages/docs/content/api/CFormControlWrapper.api.mdx b/packages/docs/content/api/CFormControlWrapper.api.mdx
index f0a44eaa..24b0d2ec 100644
--- a/packages/docs/content/api/CFormControlWrapper.api.mdx
+++ b/packages/docs/content/api/CFormControlWrapper.api.mdx
@@ -25,8 +25,8 @@ import CFormControlWrapper from '@coreui/react/src/components/form/CFormControlW
           
    Provide valuable, actionable feedback.
    
         
       
-      
-        feedbackInvalid#4.2.0+
+      
+        feedbackInvalid#4.2.0+
         undefined
         {`ReactNode`}
       
@@ -35,8 +35,8 @@ import CFormControlWrapper from '@coreui/react/src/components/form/CFormControlW
           
    Provide valuable, actionable feedback.
    
         
       
-      
-        feedbackValid#4.2.0+
+      
+        feedbackValid#4.2.0+
         undefined
         {`ReactNode`}
       
@@ -45,8 +45,8 @@ import CFormControlWrapper from '@coreui/react/src/components/form/CFormControlW
           
    Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, {`:invalid`} and {`:valid`}.
    
         
       
-      
-        floatingClassName#4.5.0+
+      
+        floatingClassName#4.5.0+
         undefined
         {`string`}
       
@@ -55,8 +55,8 @@ import CFormControlWrapper from '@coreui/react/src/components/form/CFormControlW
           
    A string of all className you want applied to the floating label wrapper.
    
         
       
-      
-        floatingLabel#4.2.0+
+      
+        floatingLabel#4.2.0+
         undefined
         {`ReactNode`}
       
@@ -95,8 +95,8 @@ import CFormControlWrapper from '@coreui/react/src/components/form/CFormControlW
           
    Add helper text to the component.
    
         
       
-      
-        tooltipFeedback#4.2.0+
+      
+        tooltipFeedback#4.2.0+
         undefined
         {`boolean`}
       
diff --git a/packages/docs/content/api/CFormFeedback.api.mdx b/packages/docs/content/api/CFormFeedback.api.mdx
index 845d95e2..db5b54fe 100644
--- a/packages/docs/content/api/CFormFeedback.api.mdx
+++ b/packages/docs/content/api/CFormFeedback.api.mdx
@@ -25,8 +25,8 @@ import CFormFeedback from '@coreui/react/src/components/form/CFormFeedback'
           
    Component used for the root node. Either a string to use a HTML element or a component.
    
         
       
-      
-        className#
+      
+        className#
         undefined
         {`string`}
       
diff --git a/packages/docs/content/api/CFormFloating.api.mdx b/packages/docs/content/api/CFormFloating.api.mdx
index c4539363..5f456c6c 100644
--- a/packages/docs/content/api/CFormFloating.api.mdx
+++ b/packages/docs/content/api/CFormFloating.api.mdx
@@ -15,8 +15,8 @@ import CFormFloating from '@coreui/react/src/components/form/CFormFloating'
       
     
     
-      
-        className#
+      
+        className#
         undefined
         {`string`}
       
diff --git a/packages/docs/content/api/CFormInput.api.mdx b/packages/docs/content/api/CFormInput.api.mdx
index b3ed91a0..c1e48174 100644
--- a/packages/docs/content/api/CFormInput.api.mdx
+++ b/packages/docs/content/api/CFormInput.api.mdx
@@ -15,8 +15,8 @@ import CFormInput from '@coreui/react/src/components/form/CFormInput'
       
     
     
-      
-        className#
+      
+        className#
         undefined
         {`string`}
       
@@ -55,8 +55,8 @@ import CFormInput from '@coreui/react/src/components/form/CFormInput'
           
    Provide valuable, actionable feedback.
    
         
       
-      
-        feedbackInvalid#4.2.0+
+      
+        feedbackInvalid#4.2.0+
         undefined
         {`ReactNode`}
       
@@ -65,8 +65,8 @@ import CFormInput from '@coreui/react/src/components/form/CFormInput'
           
    Provide valuable, actionable feedback.
    
         
       
-      
-        feedbackValid#4.2.0+
+      
+        feedbackValid#4.2.0+
         undefined
         {`ReactNode`}
       
@@ -75,8 +75,8 @@ import CFormInput from '@coreui/react/src/components/form/CFormInput'
           
    Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, {`:invalid`} and {`:valid`}.
    
         
       
-      
-        floatingClassName#4.5.0+
+      
+        floatingClassName#4.5.0+
         undefined
         {`string`}
       
@@ -85,8 +85,8 @@ import CFormInput from '@coreui/react/src/components/form/CFormInput'
           
    A string of all className you want applied to the floating label wrapper.
    
         
       
-      
-        floatingLabel#4.2.0+
+      
+        floatingLabel#4.2.0+
         undefined
         {`ReactNode`}
       
@@ -115,8 +115,8 @@ import CFormInput from '@coreui/react/src/components/form/CFormInput'
           
    Add a caption for a component.
    
         
       
-      
-        onChange#
+      
+        onChange#
         undefined
         {`ChangeEventHandler\`}
       
@@ -125,8 +125,8 @@ import CFormInput from '@coreui/react/src/components/form/CFormInput'
           
    Method called immediately after the {`value`} prop changes.
    
         
       
-      
-        plainText#
+      
+        plainText#
         undefined
         {`boolean`}
       
@@ -135,8 +135,8 @@ import CFormInput from '@coreui/react/src/components/form/CFormInput'
           
    Render the component styled as plain text. Removes the default form field styling and preserve the correct margin and padding. Recommend to use only along side {`readonly`}.
    
         
       
-      
-        readOnly#
+      
+        readOnly#
         undefined
         {`boolean`}
       
@@ -165,8 +165,8 @@ import CFormInput from '@coreui/react/src/components/form/CFormInput'
           
    Add helper text to the component.
    
         
       
-      
-        tooltipFeedback#4.2.0+
+      
+        tooltipFeedback#4.2.0+
         undefined
         {`boolean`}
       
diff --git a/packages/docs/content/api/CFormLabel.api.mdx b/packages/docs/content/api/CFormLabel.api.mdx
index fe2e2470..1f30c9e1 100644
--- a/packages/docs/content/api/CFormLabel.api.mdx
+++ b/packages/docs/content/api/CFormLabel.api.mdx
@@ -15,8 +15,8 @@ import CFormLabel from '@coreui/react/src/components/form/CFormLabel'
       
     
     
-      
-        className#
+      
+        className#
         undefined
         {`string`}
       
@@ -25,8 +25,8 @@ import CFormLabel from '@coreui/react/src/components/form/CFormLabel'
           
    A string of all className you want applied to the component.
    
         
       
-      
-        customClassName#
+      
+        customClassName#
         undefined
         {`string`}
       
diff --git a/packages/docs/content/api/CFormRange.api.mdx b/packages/docs/content/api/CFormRange.api.mdx
index b16951cb..ef1a9732 100644
--- a/packages/docs/content/api/CFormRange.api.mdx
+++ b/packages/docs/content/api/CFormRange.api.mdx
@@ -15,8 +15,8 @@ import CFormRange from '@coreui/react/src/components/form/CFormRange'
       
     
     
-      
-        className#
+      
+        className#
         undefined
         {`string`}
       
@@ -65,8 +65,8 @@ import CFormRange from '@coreui/react/src/components/form/CFormRange'
           
    Specifies the minimum value for the component.
    
         
       
-      
-        onChange#
+      
+        onChange#
         undefined
         {`ChangeEventHandler\`}
       
@@ -75,8 +75,8 @@ import CFormRange from '@coreui/react/src/components/form/CFormRange'
           
    Method called immediately after the {`value`} prop changes.
    
         
       
-      
-        readOnly#
+      
+        readOnly#
         undefined
         {`boolean`}
       
diff --git a/packages/docs/content/api/CFormSelect.api.mdx b/packages/docs/content/api/CFormSelect.api.mdx
index 45a1295f..90343476 100644
--- a/packages/docs/content/api/CFormSelect.api.mdx
+++ b/packages/docs/content/api/CFormSelect.api.mdx
@@ -15,8 +15,8 @@ import CFormSelect from '@coreui/react/src/components/form/CFormSelect'
       
     
     
-      
-        className#
+      
+        className#
         undefined
         {`string`}
       
@@ -35,8 +35,8 @@ import CFormSelect from '@coreui/react/src/components/form/CFormSelect'
           
    Provide valuable, actionable feedback.
    
         
       
-      
-        feedbackInvalid#4.2.0+
+      
+        feedbackInvalid#4.2.0+
         undefined
         {`ReactNode`}
       
@@ -45,8 +45,8 @@ import CFormSelect from '@coreui/react/src/components/form/CFormSelect'
           
    Provide valuable, actionable feedback.
    
         
       
-      
-        feedbackValid#4.2.0+
+      
+        feedbackValid#4.2.0+
         undefined
         {`ReactNode`}
       
@@ -55,8 +55,8 @@ import CFormSelect from '@coreui/react/src/components/form/CFormSelect'
           
    Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, {`:invalid`} and {`:valid`}.
    
         
       
-      
-        floatingClassName#4.5.0+
+      
+        floatingClassName#4.5.0+
         undefined
         {`string`}
       
@@ -65,8 +65,8 @@ import CFormSelect from '@coreui/react/src/components/form/CFormSelect'
           
    A string of all className you want applied to the floating label wrapper.
    
         
       
-      
-        floatingLabel#4.2.0+
+      
+        floatingLabel#4.2.0+
         undefined
         {`ReactNode`}
       
@@ -75,8 +75,8 @@ import CFormSelect from '@coreui/react/src/components/form/CFormSelect'
           
    Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, {`:invalid`} and {`:valid`}.
    
         
       
-      
-        htmlSize#
+      
+        htmlSize#
         undefined
         {`number`}
       
@@ -105,8 +105,8 @@ import CFormSelect from '@coreui/react/src/components/form/CFormSelect'
           
    Add a caption for a component.
    
         
       
-      
-        onChange#
+      
+        onChange#
         undefined
         {`ChangeEventHandler\`}
       
@@ -150,8 +150,8 @@ Examples:
    
           
    Add helper text to the component.
    
         
       
-      
-        tooltipFeedback#4.2.0+
+      
+        tooltipFeedback#4.2.0+
         undefined
         {`boolean`}
       
diff --git a/packages/docs/content/api/CFormSwitch.api.mdx b/packages/docs/content/api/CFormSwitch.api.mdx
index 3dfe443d..415810d4 100644
--- a/packages/docs/content/api/CFormSwitch.api.mdx
+++ b/packages/docs/content/api/CFormSwitch.api.mdx
@@ -15,8 +15,8 @@ import CFormSwitch from '@coreui/react/src/components/form/CFormSwitch'
       
     
     
-      
-        className#
+      
+        className#
         undefined
         {`string`}
       
diff --git a/packages/docs/content/api/CFormText.api.mdx b/packages/docs/content/api/CFormText.api.mdx
index 25e307a4..d029eefb 100644
--- a/packages/docs/content/api/CFormText.api.mdx
+++ b/packages/docs/content/api/CFormText.api.mdx
@@ -25,8 +25,8 @@ import CFormText from '@coreui/react/src/components/form/CFormText'
           
    Component used for the root node. Either a string to use a HTML element or a component.
    
         
       
-      
-        className#
+      
+        className#
         undefined
         {`string`}
       
diff --git a/packages/docs/content/api/CFormTextarea.api.mdx b/packages/docs/content/api/CFormTextarea.api.mdx
index 010175d7..8618fcb7 100644
--- a/packages/docs/content/api/CFormTextarea.api.mdx
+++ b/packages/docs/content/api/CFormTextarea.api.mdx
@@ -15,8 +15,8 @@ import CFormTextarea from '@coreui/react/src/components/form/CFormTextarea'
       
     
     
-      
-        className#
+      
+        className#
         undefined
         {`string`}
       
@@ -45,8 +45,8 @@ import CFormTextarea from '@coreui/react/src/components/form/CFormTextarea'
           
    Provide valuable, actionable feedback.
    
         
       
-      
-        feedbackInvalid#4.2.0+
+      
+        feedbackInvalid#4.2.0+
         undefined
         {`ReactNode`}
       
@@ -55,8 +55,8 @@ import CFormTextarea from '@coreui/react/src/components/form/CFormTextarea'
           
    Provide valuable, actionable feedback.
    
         
       
-      
-        feedbackValid#4.2.0+
+      
+        feedbackValid#4.2.0+
         undefined
         {`ReactNode`}
       
@@ -65,8 +65,8 @@ import CFormTextarea from '@coreui/react/src/components/form/CFormTextarea'
           
    Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, {`:invalid`} and {`:valid`}.
    
         
       
-      
-        floatingClassName#4.5.0+
+      
+        floatingClassName#4.5.0+
         undefined
         {`string`}
       
@@ -75,8 +75,8 @@ import CFormTextarea from '@coreui/react/src/components/form/CFormTextarea'
           
    A string of all className you want applied to the floating label wrapper.
    
         
       
-      
-        floatingLabel#4.2.0+
+      
+        floatingLabel#4.2.0+
         undefined
         {`ReactNode`}
       
@@ -105,8 +105,8 @@ import CFormTextarea from '@coreui/react/src/components/form/CFormTextarea'
           
    Add a caption for a component.
    
         
       
-      
-        onChange#
+      
+        onChange#
         undefined
         {`ChangeEventHandler\`}
       
@@ -115,8 +115,8 @@ import CFormTextarea from '@coreui/react/src/components/form/CFormTextarea'
           
    Method called immediately after the {`value`} prop changes.
    
         
       
-      
-        plainText#
+      
+        plainText#
         undefined
         {`boolean`}
       
@@ -125,8 +125,8 @@ import CFormTextarea from '@coreui/react/src/components/form/CFormTextarea'
           
    Render the component styled as plain text. Removes the default form field styling and preserve the correct margin and padding. Recommend to use only along side {`readonly`}.
    
         
       
-      
-        readOnly#
+      
+        readOnly#
         undefined
         {`boolean`}
       
@@ -145,8 +145,8 @@ import CFormTextarea from '@coreui/react/src/components/form/CFormTextarea'
           
    Add helper text to the component.
    
         
       
-      
-        tooltipFeedback#4.2.0+
+      
+        tooltipFeedback#4.2.0+
         undefined
         {`boolean`}
       
diff --git a/packages/docs/content/api/CHeader.api.mdx b/packages/docs/content/api/CHeader.api.mdx
index 7670d5b2..2b225673 100644
--- a/packages/docs/content/api/CHeader.api.mdx
+++ b/packages/docs/content/api/CHeader.api.mdx
@@ -15,8 +15,8 @@ import CHeader from '@coreui/react/src/components/header/CHeader'
       
     
     
-      
-        className#
+      
+        className#
         undefined
         {`string`}
       
diff --git a/packages/docs/content/api/CHeaderBrand.api.mdx b/packages/docs/content/api/CHeaderBrand.api.mdx
index bd517329..abfd6005 100644
--- a/packages/docs/content/api/CHeaderBrand.api.mdx
+++ b/packages/docs/content/api/CHeaderBrand.api.mdx
@@ -25,8 +25,8 @@ import CHeaderBrand from '@coreui/react/src/components/header/CHeaderBrand'
           
    Component used for the root node. Either a string to use a HTML element or a component.
    
         
       
-      
-        className#
+      
+        className#
         undefined
         {`string`}
       
diff --git a/packages/docs/content/api/CHeaderDivider.api.mdx b/packages/docs/content/api/CHeaderDivider.api.mdx
index 6916f36a..78046399 100644
--- a/packages/docs/content/api/CHeaderDivider.api.mdx
+++ b/packages/docs/content/api/CHeaderDivider.api.mdx
@@ -15,8 +15,8 @@ import CHeaderDivider from '@coreui/react/src/components/header/CHeaderDivider'
       
     
     
-      
-        className#
+      
+        className#
         undefined
         {`string`}
       
diff --git a/packages/docs/content/api/CHeaderNav.api.mdx b/packages/docs/content/api/CHeaderNav.api.mdx
index e7592905..6ce66614 100644
--- a/packages/docs/content/api/CHeaderNav.api.mdx
+++ b/packages/docs/content/api/CHeaderNav.api.mdx
@@ -25,8 +25,8 @@ import CHeaderNav from '@coreui/react/src/components/header/CHeaderNav'
           
    Component used for the root node. Either a string to use a HTML element or a component.
    
         
       
-      
-        className#
+      
+        className#
         undefined
         {`string`}
       
diff --git a/packages/docs/content/api/CHeaderText.api.mdx b/packages/docs/content/api/CHeaderText.api.mdx
index 51fa4f6d..e4bed1f7 100644
--- a/packages/docs/content/api/CHeaderText.api.mdx
+++ b/packages/docs/content/api/CHeaderText.api.mdx
@@ -15,8 +15,8 @@ import CHeaderText from '@coreui/react/src/components/header/CHeaderText'
       
     
     
-      
-        className#
+      
+        className#
         undefined
         {`string`}
       
diff --git a/packages/docs/content/api/CHeaderToggler.api.mdx b/packages/docs/content/api/CHeaderToggler.api.mdx
index b6318096..9294a16c 100644
--- a/packages/docs/content/api/CHeaderToggler.api.mdx
+++ b/packages/docs/content/api/CHeaderToggler.api.mdx
@@ -15,8 +15,8 @@ import CHeaderToggler from '@coreui/react/src/components/header/CHeaderToggler'
       
     
     
-      
-        className#
+      
+        className#
         undefined
         {`string`}
       
diff --git a/packages/docs/content/api/CIcon.api.mdx b/packages/docs/content/api/CIcon.api.mdx
index 3b6f21b5..9555a4ff 100644
--- a/packages/docs/content/api/CIcon.api.mdx
+++ b/packages/docs/content/api/CIcon.api.mdx
@@ -1,8 +1,8 @@
 
 ```jsx
-import { CIcon } from '@coreui/..'
+import { CIcon } from '@coreui/icons-react'
 // or
-import CIcon from '@coreui/../node_modules/@coreui/icons-react/src/CIcon'
+import CIcon from '@coreui/icons-react/src/CIcon'
 ```
 
 
    
@@ -15,8 +15,8 @@ import CIcon from '@coreui/../node_modules/@coreui/icons-react/src/CIcon'
       
     
     
-      
-        className#
+      
+        className#
         undefined
         {`string`}
       
@@ -35,8 +35,8 @@ import CIcon from '@coreui/../node_modules/@coreui/icons-react/src/CIcon'
           
    Use {`icon={...}`} instead of
    
         
       
-      
-        customClassName#
+      
+        customClassName#
         undefined
         {`string`}, {`string[]`}
       
@@ -105,8 +105,8 @@ import CIcon from '@coreui/../node_modules/@coreui/icons-react/src/CIcon'
           
    If defined component will be rendered using 'use' tag.
    
         
       
-      
-        viewBox#
+      
+        viewBox#
         undefined
         {`string`}
       
diff --git a/packages/docs/content/api/CIconSvg.api.mdx b/packages/docs/content/api/CIconSvg.api.mdx
index 6b19c7ea..cbbc7a1c 100644
--- a/packages/docs/content/api/CIconSvg.api.mdx
+++ b/packages/docs/content/api/CIconSvg.api.mdx
@@ -15,8 +15,8 @@ import CIconSvg from '@coreui/icons-react/src/CIconSvg'
       
     
     
-      
-        className#
+      
+        className#
         undefined
         {`string`}
       
@@ -25,8 +25,8 @@ import CIconSvg from '@coreui/icons-react/src/CIconSvg'
           
    A string of all className you want applied to the component.
    
         
       
-      
-        customClassName#
+      
+        customClassName#
         undefined
         {`string`}, {`string[]`}
       
@@ -78,5 +78,3 @@ import CIconSvg from '@coreui/icons-react/src/CIconSvg'
     
   
 
    
-/table>
-
    diff --git a/packages/docs/content/api/CImage.api.mdx b/packages/docs/content/api/CImage.api.mdx index ea5c6c03..67bd9ae3 100644 --- a/packages/docs/content/api/CImage.api.mdx +++ b/packages/docs/content/api/CImage.api.mdx @@ -25,8 +25,8 @@ import CImage from '@coreui/react/src/components/image/CImage'

    Set the horizontal aligment.

    - - className# + + className# undefined {`string`} diff --git a/packages/docs/content/api/CInputGroup.api.mdx b/packages/docs/content/api/CInputGroup.api.mdx index 2e7fc300..44487540 100644 --- a/packages/docs/content/api/CInputGroup.api.mdx +++ b/packages/docs/content/api/CInputGroup.api.mdx @@ -15,8 +15,8 @@ import CInputGroup from '@coreui/react/src/components/form/CInputGroup' - - className# + + className# undefined {`string`} diff --git a/packages/docs/content/api/CInputGroupText.api.mdx b/packages/docs/content/api/CInputGroupText.api.mdx index 5064e0c8..49bcb81e 100644 --- a/packages/docs/content/api/CInputGroupText.api.mdx +++ b/packages/docs/content/api/CInputGroupText.api.mdx @@ -25,8 +25,8 @@ import CInputGroupText from '@coreui/react/src/components/form/CInputGroupText'

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

    - - className# + + className# undefined {`string`} diff --git a/packages/docs/content/api/CLink.api.mdx b/packages/docs/content/api/CLink.api.mdx index 621c917b..765d243f 100644 --- a/packages/docs/content/api/CLink.api.mdx +++ b/packages/docs/content/api/CLink.api.mdx @@ -35,8 +35,8 @@ import CLink from '@coreui/react/src/components/link/CLink'

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

    - - className# + + className# undefined {`string`} diff --git a/packages/docs/content/api/CListGroup.api.mdx b/packages/docs/content/api/CListGroup.api.mdx index a43d46e4..9651e1c3 100644 --- a/packages/docs/content/api/CListGroup.api.mdx +++ b/packages/docs/content/api/CListGroup.api.mdx @@ -25,8 +25,8 @@ import CListGroup from '@coreui/react/src/components/list-group/CListGroup'

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

    - - className# + + className# undefined {`string`} diff --git a/packages/docs/content/api/CListGroupItem.api.mdx b/packages/docs/content/api/CListGroupItem.api.mdx index 84b91e1d..b80d7ab2 100644 --- a/packages/docs/content/api/CListGroupItem.api.mdx +++ b/packages/docs/content/api/CListGroupItem.api.mdx @@ -35,8 +35,8 @@ import CListGroupItem from '@coreui/react/src/components/list-group/CListGroupIt

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

    - - className# + + className# undefined {`string`} diff --git a/packages/docs/content/api/CModal.api.mdx b/packages/docs/content/api/CModal.api.mdx index 0e9608a9..5431acb5 100644 --- a/packages/docs/content/api/CModal.api.mdx +++ b/packages/docs/content/api/CModal.api.mdx @@ -35,8 +35,8 @@ import CModal from '@coreui/react/src/components/modal/CModal'

    Apply a backdrop on body while modal is open.

    - - className# + + className# undefined {`string`} @@ -85,8 +85,8 @@ import CModal from '@coreui/react/src/components/modal/CModal'

    Closes the modal when escape key is pressed.

    - - onClose# + + onClose# undefined {`() => void`} @@ -95,8 +95,8 @@ import CModal from '@coreui/react/src/components/modal/CModal'

    Callback fired when the component requests to be closed.

    - - onClosePrevented# + + onClosePrevented# undefined {`() => void`} @@ -105,8 +105,8 @@ import CModal from '@coreui/react/src/components/modal/CModal'

    Callback fired when the component requests to be closed.

    - - onShow# + + onShow# undefined {`() => void`} @@ -155,8 +155,8 @@ import CModal from '@coreui/react/src/components/modal/CModal'

    Remove animation to create modal that simply appear rather than fade in to view.

    - - unmountOnClose# + + unmountOnClose# {`true`} {`boolean`} diff --git a/packages/docs/content/api/CModalBody.api.mdx b/packages/docs/content/api/CModalBody.api.mdx index 42c701f2..4f47fab6 100644 --- a/packages/docs/content/api/CModalBody.api.mdx +++ b/packages/docs/content/api/CModalBody.api.mdx @@ -15,8 +15,8 @@ import CModalBody from '@coreui/react/src/components/modal/CModalBody' - - className# + + className# undefined {`string`} diff --git a/packages/docs/content/api/CModalContent.api.mdx b/packages/docs/content/api/CModalContent.api.mdx index 9b19d13b..45fc3002 100644 --- a/packages/docs/content/api/CModalContent.api.mdx +++ b/packages/docs/content/api/CModalContent.api.mdx @@ -15,8 +15,8 @@ import CModalContent from '@coreui/react/src/components/modal/CModalContent' - - className# + + className# undefined {`string`} diff --git a/packages/docs/content/api/CModalDialog.api.mdx b/packages/docs/content/api/CModalDialog.api.mdx index 768c38ca..a0486d4e 100644 --- a/packages/docs/content/api/CModalDialog.api.mdx +++ b/packages/docs/content/api/CModalDialog.api.mdx @@ -25,8 +25,8 @@ import CModalDialog from '@coreui/react/src/components/modal/CModalDialog'

    Align the modal in the center or top of the screen.

    - - className# + + className# undefined {`string`} diff --git a/packages/docs/content/api/CModalFooter.api.mdx b/packages/docs/content/api/CModalFooter.api.mdx index f413e986..73ee5ccd 100644 --- a/packages/docs/content/api/CModalFooter.api.mdx +++ b/packages/docs/content/api/CModalFooter.api.mdx @@ -15,8 +15,8 @@ import CModalFooter from '@coreui/react/src/components/modal/CModalFooter' - - className# + + className# undefined {`string`} diff --git a/packages/docs/content/api/CModalHeader.api.mdx b/packages/docs/content/api/CModalHeader.api.mdx index ca5db296..0dddfa96 100644 --- a/packages/docs/content/api/CModalHeader.api.mdx +++ b/packages/docs/content/api/CModalHeader.api.mdx @@ -15,8 +15,8 @@ import CModalHeader from '@coreui/react/src/components/modal/CModalHeader' - - className# + + className# undefined {`string`} @@ -25,8 +25,8 @@ import CModalHeader from '@coreui/react/src/components/modal/CModalHeader'

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

    - - closeButton# + + closeButton# {`true`} {`boolean`} diff --git a/packages/docs/content/api/CModalTitle.api.mdx b/packages/docs/content/api/CModalTitle.api.mdx index 7876d479..9b14bbb1 100644 --- a/packages/docs/content/api/CModalTitle.api.mdx +++ b/packages/docs/content/api/CModalTitle.api.mdx @@ -25,8 +25,8 @@ import CModalTitle from '@coreui/react/src/components/modal/CModalTitle'

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

    - - className# + + className# undefined {`string`} diff --git a/packages/docs/content/api/CNav.api.mdx b/packages/docs/content/api/CNav.api.mdx index 2d6cafd2..f87d8e1e 100644 --- a/packages/docs/content/api/CNav.api.mdx +++ b/packages/docs/content/api/CNav.api.mdx @@ -25,8 +25,8 @@ import CNav from '@coreui/react/src/components/nav/CNav'

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

    - - className# + + className# undefined {`string`} diff --git a/packages/docs/content/api/CNavGroup.api.mdx b/packages/docs/content/api/CNavGroup.api.mdx index 0e0714d6..59506032 100644 --- a/packages/docs/content/api/CNavGroup.api.mdx +++ b/packages/docs/content/api/CNavGroup.api.mdx @@ -25,8 +25,8 @@ import CNavGroup from '@coreui/react/src/components/nav/CNavGroup'

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

    - - className# + + className# undefined {`string`} diff --git a/packages/docs/content/api/CNavGroupItems.api.mdx b/packages/docs/content/api/CNavGroupItems.api.mdx index 3b0df119..eaca90f5 100644 --- a/packages/docs/content/api/CNavGroupItems.api.mdx +++ b/packages/docs/content/api/CNavGroupItems.api.mdx @@ -25,8 +25,8 @@ import CNavGroupItems from '@coreui/react/src/components/nav/CNavGroupItems'

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

    - - className# + + className# undefined {`string`} diff --git a/packages/docs/content/api/CNavItem.api.mdx b/packages/docs/content/api/CNavItem.api.mdx index 4e260edb..e635d32c 100644 --- a/packages/docs/content/api/CNavItem.api.mdx +++ b/packages/docs/content/api/CNavItem.api.mdx @@ -35,8 +35,8 @@ import CNavItem from '@coreui/react/src/components/nav/CNavItem'

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

    - - className# + + className# undefined {`string`} diff --git a/packages/docs/content/api/CNavLink.api.mdx b/packages/docs/content/api/CNavLink.api.mdx index 7e3c45c9..d6f838e3 100644 --- a/packages/docs/content/api/CNavLink.api.mdx +++ b/packages/docs/content/api/CNavLink.api.mdx @@ -35,8 +35,8 @@ import CNavLink from '@coreui/react/src/components/nav/CNavLink'

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

    - - className# + + className# undefined {`string`} diff --git a/packages/docs/content/api/CNavTitle.api.mdx b/packages/docs/content/api/CNavTitle.api.mdx index bab5f5f9..f9489cb0 100644 --- a/packages/docs/content/api/CNavTitle.api.mdx +++ b/packages/docs/content/api/CNavTitle.api.mdx @@ -25,8 +25,8 @@ import CNavTitle from '@coreui/react/src/components/nav/CNavTitle'

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

    - - className# + + className# undefined {`string`} diff --git a/packages/docs/content/api/CNavbar.api.mdx b/packages/docs/content/api/CNavbar.api.mdx index 1aaa1c87..662d80c2 100644 --- a/packages/docs/content/api/CNavbar.api.mdx +++ b/packages/docs/content/api/CNavbar.api.mdx @@ -25,8 +25,8 @@ import CNavbar from '@coreui/react/src/components/navbar/CNavbar'

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

    - - className# + + className# undefined {`string`} @@ -45,8 +45,8 @@ import CNavbar from '@coreui/react/src/components/navbar/CNavbar'

    Sets the color context of the component to one of CoreUI’s themed colors.

    - - colorScheme# + + colorScheme# undefined {`"dark"`}, {`"light"`} diff --git a/packages/docs/content/api/CNavbarBrand.api.mdx b/packages/docs/content/api/CNavbarBrand.api.mdx index cbb61ccf..bdd3e6f7 100644 --- a/packages/docs/content/api/CNavbarBrand.api.mdx +++ b/packages/docs/content/api/CNavbarBrand.api.mdx @@ -25,8 +25,8 @@ import CNavbarBrand from '@coreui/react/src/components/navbar/CNavbarBrand'

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

    - - className# + + className# undefined {`string`} diff --git a/packages/docs/content/api/CNavbarNav.api.mdx b/packages/docs/content/api/CNavbarNav.api.mdx index 577e403a..f7e05623 100644 --- a/packages/docs/content/api/CNavbarNav.api.mdx +++ b/packages/docs/content/api/CNavbarNav.api.mdx @@ -25,8 +25,8 @@ import CNavbarNav from '@coreui/react/src/components/navbar/CNavbarNav'

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

    - - className# + + className# undefined {`string`} diff --git a/packages/docs/content/api/CNavbarText.api.mdx b/packages/docs/content/api/CNavbarText.api.mdx index 158f710f..17ce32d4 100644 --- a/packages/docs/content/api/CNavbarText.api.mdx +++ b/packages/docs/content/api/CNavbarText.api.mdx @@ -15,8 +15,8 @@ import CNavbarText from '@coreui/react/src/components/navbar/CNavbarText' - - className# + + className# undefined {`string`} diff --git a/packages/docs/content/api/CNavbarToggler.api.mdx b/packages/docs/content/api/CNavbarToggler.api.mdx index 38e4b19a..7470ace3 100644 --- a/packages/docs/content/api/CNavbarToggler.api.mdx +++ b/packages/docs/content/api/CNavbarToggler.api.mdx @@ -15,8 +15,8 @@ import CNavbarToggler from '@coreui/react/src/components/navbar/CNavbarToggler' - - className# + + className# undefined {`string`} diff --git a/packages/docs/content/api/COffcanvas.api.mdx b/packages/docs/content/api/COffcanvas.api.mdx index 2b50ddc3..e2377df9 100644 --- a/packages/docs/content/api/COffcanvas.api.mdx +++ b/packages/docs/content/api/COffcanvas.api.mdx @@ -25,8 +25,8 @@ import COffcanvas from '@coreui/react/src/components/offcanvas/COffcanvas'

    Apply a backdrop on body while offcanvas is open.

    - - className# + + className# undefined {`string`} @@ -55,8 +55,8 @@ import COffcanvas from '@coreui/react/src/components/offcanvas/COffcanvas'

    Closes the offcanvas when escape key is pressed.

    - - onHide# + + onHide# undefined {`() => void`} @@ -65,8 +65,8 @@ import COffcanvas from '@coreui/react/src/components/offcanvas/COffcanvas'

    Callback fired when the component requests to be hidden.

    - - onShow# + + onShow# undefined {`() => void`} diff --git a/packages/docs/content/api/COffcanvasBody.api.mdx b/packages/docs/content/api/COffcanvasBody.api.mdx index a68dc896..29c8479a 100644 --- a/packages/docs/content/api/COffcanvasBody.api.mdx +++ b/packages/docs/content/api/COffcanvasBody.api.mdx @@ -15,8 +15,8 @@ import COffcanvasBody from '@coreui/react/src/components/offcanvas/COffcanvasBod - - className# + + className# undefined {`string`} diff --git a/packages/docs/content/api/COffcanvasHeader.api.mdx b/packages/docs/content/api/COffcanvasHeader.api.mdx index a505a208..c896e1b1 100644 --- a/packages/docs/content/api/COffcanvasHeader.api.mdx +++ b/packages/docs/content/api/COffcanvasHeader.api.mdx @@ -15,8 +15,8 @@ import COffcanvasHeader from '@coreui/react/src/components/offcanvas/COffcanvasH - - className# + + className# undefined {`string`} diff --git a/packages/docs/content/api/COffcanvasTitle.api.mdx b/packages/docs/content/api/COffcanvasTitle.api.mdx index 06c1ac6a..b22e4b6c 100644 --- a/packages/docs/content/api/COffcanvasTitle.api.mdx +++ b/packages/docs/content/api/COffcanvasTitle.api.mdx @@ -25,8 +25,8 @@ import COffcanvasTitle from '@coreui/react/src/components/offcanvas/COffcanvasTi

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

    - - className# + + className# undefined {`string`} diff --git a/packages/docs/content/api/CPagination.api.mdx b/packages/docs/content/api/CPagination.api.mdx index a0dfe5af..d969c7f0 100644 --- a/packages/docs/content/api/CPagination.api.mdx +++ b/packages/docs/content/api/CPagination.api.mdx @@ -25,8 +25,8 @@ import CPagination from '@coreui/react/src/components/pagination/CPagination'

    Set the alignment of pagination components.

    - - className# + + className# undefined {`string`} diff --git a/packages/docs/content/api/CPlaceholder.api.mdx b/packages/docs/content/api/CPlaceholder.api.mdx index 7ad82151..83565b12 100644 --- a/packages/docs/content/api/CPlaceholder.api.mdx +++ b/packages/docs/content/api/CPlaceholder.api.mdx @@ -35,8 +35,8 @@ import CPlaceholder from '@coreui/react/src/components/placeholder/CPlaceholder'

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

    - - className# + + className# undefined {`string`} diff --git a/packages/docs/content/api/CPopover.api.mdx b/packages/docs/content/api/CPopover.api.mdx index bfc98bd5..752bc171 100644 --- a/packages/docs/content/api/CPopover.api.mdx +++ b/packages/docs/content/api/CPopover.api.mdx @@ -25,8 +25,8 @@ import CPopover from '@coreui/react/src/components/popover/CPopover'

    Apply a CSS fade transition to the popover.

    - - className# + + className# undefined {`string`} @@ -65,8 +65,8 @@ 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 }`}.

    - - fallbackPlacements#4.9.0+ + + fallbackPlacements#4.9.0+ {`['top', 'right', 'bottom', 'left']`} {`Placements`}, {`Placements[]`} @@ -85,8 +85,8 @@ import CPopover from '@coreui/react/src/components/popover/CPopover'

    Offset of the popover relative to its target.

    - - onHide# + + onHide# undefined {`() => void`} @@ -95,8 +95,8 @@ import CPopover from '@coreui/react/src/components/popover/CPopover'

    Callback fired when the component requests to be hidden.

    - - onShow# + + onShow# undefined {`() => void`} diff --git a/packages/docs/content/api/CProgress.api.mdx b/packages/docs/content/api/CProgress.api.mdx index 47bc6fe7..3012a109 100644 --- a/packages/docs/content/api/CProgress.api.mdx +++ b/packages/docs/content/api/CProgress.api.mdx @@ -25,8 +25,8 @@ import CProgress from '@coreui/react/src/components/progress/CProgress'

    Use to animate the stripes right to left via CSS3 animations.

    - - className# + + className# undefined {`string`} @@ -55,8 +55,8 @@ import CProgress from '@coreui/react/src/components/progress/CProgress'

    Sets the height of the component. If you set that value the inner {``} will automatically resize accordingly.

    - - progressBarClassName#4.9.0+ + + progressBarClassName#4.9.0+ undefined {`string`} diff --git a/packages/docs/content/api/CProgressBar.api.mdx b/packages/docs/content/api/CProgressBar.api.mdx index 56197cb6..8a5e99f7 100644 --- a/packages/docs/content/api/CProgressBar.api.mdx +++ b/packages/docs/content/api/CProgressBar.api.mdx @@ -25,8 +25,8 @@ import CProgressBar from '@coreui/react/src/components/progress/CProgressBar'

    Use to animate the stripes right to left via CSS3 animations.

    - - className# + + className# undefined {`string`} diff --git a/packages/docs/content/api/CProgressStacked.api.mdx b/packages/docs/content/api/CProgressStacked.api.mdx index ce482129..81f146f0 100644 --- a/packages/docs/content/api/CProgressStacked.api.mdx +++ b/packages/docs/content/api/CProgressStacked.api.mdx @@ -15,8 +15,8 @@ import CProgressStacked from '@coreui/react/src/components/progress/CProgressSta - - className# + + className# undefined {`string`} diff --git a/packages/docs/content/api/CRow.api.mdx b/packages/docs/content/api/CRow.api.mdx index f8f3b137..46a6b5b6 100644 --- a/packages/docs/content/api/CRow.api.mdx +++ b/packages/docs/content/api/CRow.api.mdx @@ -15,8 +15,8 @@ import CRow from '@coreui/react/src/components/grid/CRow' - - className# + + className# undefined {`string`} diff --git a/packages/docs/content/api/CSidebar.api.mdx b/packages/docs/content/api/CSidebar.api.mdx index 7d7dd7d4..a0ae96ee 100644 --- a/packages/docs/content/api/CSidebar.api.mdx +++ b/packages/docs/content/api/CSidebar.api.mdx @@ -15,8 +15,8 @@ import CSidebar from '@coreui/react/src/components/sidebar/CSidebar' - - className# + + className# undefined {`string`} @@ -25,8 +25,8 @@ import CSidebar from '@coreui/react/src/components/sidebar/CSidebar'

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

    - - colorScheme# + + colorScheme# undefined {`'dark'`}, {`'light'`} @@ -45,8 +45,8 @@ import CSidebar from '@coreui/react/src/components/sidebar/CSidebar'

    Make sidebar narrow.

    - - onHide# + + onHide# undefined {`() => void`} @@ -55,8 +55,8 @@ import CSidebar from '@coreui/react/src/components/sidebar/CSidebar'

    Callback fired when the component requests to be hidden.

    - - onShow# + + onShow# undefined {`() => void`} @@ -65,8 +65,8 @@ import CSidebar from '@coreui/react/src/components/sidebar/CSidebar'

    Callback fired when the component requests to be shown.

    - - onVisibleChange# + + onVisibleChange# undefined {`(visible: boolean) => void`} diff --git a/packages/docs/content/api/CSidebarBrand.api.mdx b/packages/docs/content/api/CSidebarBrand.api.mdx index 55a39332..3494b5d8 100644 --- a/packages/docs/content/api/CSidebarBrand.api.mdx +++ b/packages/docs/content/api/CSidebarBrand.api.mdx @@ -25,8 +25,8 @@ import CSidebarBrand from '@coreui/react/src/components/sidebar/CSidebarBrand'

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

    - - className# + + className# undefined {`string`} diff --git a/packages/docs/content/api/CSidebarFooter.api.mdx b/packages/docs/content/api/CSidebarFooter.api.mdx index d3f357b2..745c2f6c 100644 --- a/packages/docs/content/api/CSidebarFooter.api.mdx +++ b/packages/docs/content/api/CSidebarFooter.api.mdx @@ -15,8 +15,8 @@ import CSidebarFooter from '@coreui/react/src/components/sidebar/CSidebarFooter' - - className# + + className# undefined {`string`} diff --git a/packages/docs/content/api/CSidebarHeader.api.mdx b/packages/docs/content/api/CSidebarHeader.api.mdx index ea6eaf7f..4379c56f 100644 --- a/packages/docs/content/api/CSidebarHeader.api.mdx +++ b/packages/docs/content/api/CSidebarHeader.api.mdx @@ -15,8 +15,8 @@ import CSidebarHeader from '@coreui/react/src/components/sidebar/CSidebarHeader' - - className# + + className# undefined {`string`} diff --git a/packages/docs/content/api/CSidebarNav.api.mdx b/packages/docs/content/api/CSidebarNav.api.mdx index dbc289a6..7bcb30df 100644 --- a/packages/docs/content/api/CSidebarNav.api.mdx +++ b/packages/docs/content/api/CSidebarNav.api.mdx @@ -25,8 +25,8 @@ import CSidebarNav from '@coreui/react/src/components/sidebar/CSidebarNav'

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

    - - className# + + className# undefined {`string`} diff --git a/packages/docs/content/api/CSidebarToggler.api.mdx b/packages/docs/content/api/CSidebarToggler.api.mdx index 4c39a565..59755018 100644 --- a/packages/docs/content/api/CSidebarToggler.api.mdx +++ b/packages/docs/content/api/CSidebarToggler.api.mdx @@ -15,8 +15,8 @@ import CSidebarToggler from '@coreui/react/src/components/sidebar/CSidebarToggle - - className# + + className# undefined {`string`} diff --git a/packages/docs/content/api/CSpinner.api.mdx b/packages/docs/content/api/CSpinner.api.mdx index c072502a..159c58a9 100644 --- a/packages/docs/content/api/CSpinner.api.mdx +++ b/packages/docs/content/api/CSpinner.api.mdx @@ -25,8 +25,8 @@ import CSpinner from '@coreui/react/src/components/spinner/CSpinner'

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

    - - className# + + className# undefined {`string`} @@ -65,8 +65,8 @@ import CSpinner from '@coreui/react/src/components/spinner/CSpinner'

    Set the button variant to an outlined button or a ghost button.

    - - visuallyHiddenLabel# + + visuallyHiddenLabel# {`Loading...`} {`string`} diff --git a/packages/docs/content/api/CTab.api.mdx b/packages/docs/content/api/CTab.api.mdx index 1d298ded..138639d0 100644 --- a/packages/docs/content/api/CTab.api.mdx +++ b/packages/docs/content/api/CTab.api.mdx @@ -15,8 +15,8 @@ import CTab from '@coreui/react/src/components/tabs/CTab' - - className# + + className# undefined {`string`} @@ -35,8 +35,8 @@ import CTab from '@coreui/react/src/components/tabs/CTab'

    Toggle the disabled state for the component.

    - - itemKey# + + itemKey# undefined {`string`}, {`number`} diff --git a/packages/docs/content/api/CTabContent.api.mdx b/packages/docs/content/api/CTabContent.api.mdx index c57cbae0..467a7d97 100644 --- a/packages/docs/content/api/CTabContent.api.mdx +++ b/packages/docs/content/api/CTabContent.api.mdx @@ -15,8 +15,8 @@ import CTabContent from '@coreui/react/src/components/tabs/CTabContent' - - className# + + className# undefined {`string`} diff --git a/packages/docs/content/api/CTabList.api.mdx b/packages/docs/content/api/CTabList.api.mdx index 176e4fb7..2be37d8c 100644 --- a/packages/docs/content/api/CTabList.api.mdx +++ b/packages/docs/content/api/CTabList.api.mdx @@ -15,8 +15,8 @@ import CTabList from '@coreui/react/src/components/tabs/CTabList' - - className# + + className# undefined {`string`} diff --git a/packages/docs/content/api/CTabPane.api.mdx b/packages/docs/content/api/CTabPane.api.mdx index 4d401d33..197dc805 100644 --- a/packages/docs/content/api/CTabPane.api.mdx +++ b/packages/docs/content/api/CTabPane.api.mdx @@ -15,8 +15,8 @@ import CTabPane from '@coreui/react/src/components/tabs/CTabPane' - - className# + + className# undefined {`string`} @@ -25,8 +25,8 @@ import CTabPane from '@coreui/react/src/components/tabs/CTabPane'

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

    - - onHide# + + onHide# undefined {`() => void`} @@ -35,8 +35,8 @@ import CTabPane from '@coreui/react/src/components/tabs/CTabPane'

    Callback fired when the component requests to be hidden.

    - - onShow# + + onShow# undefined {`() => void`} diff --git a/packages/docs/content/api/CTabPanel.api.mdx b/packages/docs/content/api/CTabPanel.api.mdx index f8f092dd..3b6f9bd6 100644 --- a/packages/docs/content/api/CTabPanel.api.mdx +++ b/packages/docs/content/api/CTabPanel.api.mdx @@ -15,8 +15,8 @@ import CTabPanel from '@coreui/react/src/components/tabs/CTabPanel' - - className# + + className# undefined {`string`} @@ -25,8 +25,8 @@ import CTabPanel from '@coreui/react/src/components/tabs/CTabPanel'

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

    - - itemKey# + + itemKey# undefined {`string`}, {`number`} @@ -35,8 +35,8 @@ import CTabPanel from '@coreui/react/src/components/tabs/CTabPanel'

    Item key.

    - - onHide# + + onHide# undefined {`() => void`} @@ -45,8 +45,8 @@ import CTabPanel from '@coreui/react/src/components/tabs/CTabPanel'

    Callback fired when the component requests to be hidden.

    - - onShow# + + onShow# undefined {`() => void`} diff --git a/packages/docs/content/api/CTable.api.mdx b/packages/docs/content/api/CTable.api.mdx index e8d0598b..75db1ece 100644 --- a/packages/docs/content/api/CTable.api.mdx +++ b/packages/docs/content/api/CTable.api.mdx @@ -25,8 +25,8 @@ import CTable from '@coreui/react/src/components/table/CTable'

    Set the vertical aligment.

    - - borderColor# + + borderColor# undefined {`'primary'`}, {`'secondary'`}, {`'success'`}, {`'danger'`}, {`'warning'`}, {`'info'`}, {`'dark'`}, {`'light'`}, {`string`} @@ -65,8 +65,8 @@ import CTable from '@coreui/react/src/components/table/CTable'

    Put the caption on the top if you set {`caption="top"`} of the table or set the text of the table caption.

    - - captionTop#4.3.0+ + + captionTop#4.3.0+ undefined {`string`} @@ -75,8 +75,8 @@ import CTable from '@coreui/react/src/components/table/CTable'

    Set the text of the table caption and the caption on the top of the table.

    - - className# + + className# undefined {`string`} @@ -180,8 +180,8 @@ or

    Add zebra-striping to any table row within the {``}.

    - - stripedColumns#4.3.0+ + + stripedColumns#4.3.0+ undefined {`boolean`} @@ -190,8 +190,8 @@ or

    Add zebra-striping to any table column.

    - - tableFootProps#4.3.0+ + + tableFootProps#4.3.0+ undefined {`CTableFootProps`} @@ -200,8 +200,8 @@ or

    Properties that will be passed to the table footer component.

    - - tableHeadProps#4.3.0+ + + tableHeadProps#4.3.0+ undefined {`CTableHeadProps`} diff --git a/packages/docs/content/api/CTableBody.api.mdx b/packages/docs/content/api/CTableBody.api.mdx index fa015ba9..c056b40d 100644 --- a/packages/docs/content/api/CTableBody.api.mdx +++ b/packages/docs/content/api/CTableBody.api.mdx @@ -15,8 +15,8 @@ import CTableBody from '@coreui/react/src/components/table/CTableBody' - - className# + + className# undefined {`string`} diff --git a/packages/docs/content/api/CTableDataCell.api.mdx b/packages/docs/content/api/CTableDataCell.api.mdx index 5c133fbd..7dcc4370 100644 --- a/packages/docs/content/api/CTableDataCell.api.mdx +++ b/packages/docs/content/api/CTableDataCell.api.mdx @@ -35,8 +35,8 @@ import CTableDataCell from '@coreui/react/src/components/table/CTableDataCell'

    Set the vertical aligment.

    - - className# + + className# undefined {`string`} diff --git a/packages/docs/content/api/CTableFoot.api.mdx b/packages/docs/content/api/CTableFoot.api.mdx index 005b256f..02c7a033 100644 --- a/packages/docs/content/api/CTableFoot.api.mdx +++ b/packages/docs/content/api/CTableFoot.api.mdx @@ -15,8 +15,8 @@ import CTableFoot from '@coreui/react/src/components/table/CTableFoot' - - className# + + className# undefined {`string`} diff --git a/packages/docs/content/api/CTableHead.api.mdx b/packages/docs/content/api/CTableHead.api.mdx index 2d4fdffb..b1473088 100644 --- a/packages/docs/content/api/CTableHead.api.mdx +++ b/packages/docs/content/api/CTableHead.api.mdx @@ -15,8 +15,8 @@ import CTableHead from '@coreui/react/src/components/table/CTableHead' - - className# + + className# undefined {`string`} diff --git a/packages/docs/content/api/CTableHeaderCell.api.mdx b/packages/docs/content/api/CTableHeaderCell.api.mdx index 8e4a1175..ec1078ab 100644 --- a/packages/docs/content/api/CTableHeaderCell.api.mdx +++ b/packages/docs/content/api/CTableHeaderCell.api.mdx @@ -15,8 +15,8 @@ import CTableHeaderCell from '@coreui/react/src/components/table/CTableHeaderCel - - className# + + className# undefined {`string`} diff --git a/packages/docs/content/api/CTableRow.api.mdx b/packages/docs/content/api/CTableRow.api.mdx index 7bd30762..21c4cc31 100644 --- a/packages/docs/content/api/CTableRow.api.mdx +++ b/packages/docs/content/api/CTableRow.api.mdx @@ -35,8 +35,8 @@ import CTableRow from '@coreui/react/src/components/table/CTableRow'

    Set the vertical aligment.

    - - className# + + className# undefined {`string`} diff --git a/packages/docs/content/api/CTabs.api.mdx b/packages/docs/content/api/CTabs.api.mdx index edade324..7a3a0d19 100644 --- a/packages/docs/content/api/CTabs.api.mdx +++ b/packages/docs/content/api/CTabs.api.mdx @@ -15,8 +15,8 @@ import CTabs from '@coreui/react/src/components/tabs/CTabs' - - activeItemKey# + + activeItemKey# undefined {`string`}, {`number`} @@ -25,8 +25,8 @@ import CTabs from '@coreui/react/src/components/tabs/CTabs'

    The active item key.

    - - className# + + className# undefined {`string`} @@ -35,8 +35,8 @@ import CTabs from '@coreui/react/src/components/tabs/CTabs'

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

    - - onChange# + + onChange# undefined {`(value: string | number) => void`} diff --git a/packages/docs/content/api/CToast.api.mdx b/packages/docs/content/api/CToast.api.mdx index ab94a25f..e05ba87d 100644 --- a/packages/docs/content/api/CToast.api.mdx +++ b/packages/docs/content/api/CToast.api.mdx @@ -35,8 +35,8 @@ import CToast from '@coreui/react/src/components/toast/CToast'

    Auto hide the toast.

    - - className# + + className# undefined {`string`} @@ -65,8 +65,8 @@ import CToast from '@coreui/react/src/components/toast/CToast'

    Delay hiding the toast (ms).

    - - onClose# + + onClose# undefined {`(index: number) => void`} @@ -75,8 +75,8 @@ import CToast from '@coreui/react/src/components/toast/CToast'

    Callback fired when the component requests to be closed.

    - - onShow# + + onShow# undefined {`(index: number) => void`} diff --git a/packages/docs/content/api/CToastBody.api.mdx b/packages/docs/content/api/CToastBody.api.mdx index 22ec20e3..467c581a 100644 --- a/packages/docs/content/api/CToastBody.api.mdx +++ b/packages/docs/content/api/CToastBody.api.mdx @@ -15,8 +15,8 @@ import CToastBody from '@coreui/react/src/components/toast/CToastBody' - - className# + + className# undefined {`string`} diff --git a/packages/docs/content/api/CToastClose.api.mdx b/packages/docs/content/api/CToastClose.api.mdx index 6b7e855e..6b865f4b 100644 --- a/packages/docs/content/api/CToastClose.api.mdx +++ b/packages/docs/content/api/CToastClose.api.mdx @@ -35,8 +35,8 @@ import CToastClose from '@coreui/react/src/components/toast/CToastClose'

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

    - - className# + + className# undefined {`string`} diff --git a/packages/docs/content/api/CToastHeader.api.mdx b/packages/docs/content/api/CToastHeader.api.mdx index 370dabac..c0c261fc 100644 --- a/packages/docs/content/api/CToastHeader.api.mdx +++ b/packages/docs/content/api/CToastHeader.api.mdx @@ -15,8 +15,8 @@ import CToastHeader from '@coreui/react/src/components/toast/CToastHeader' - - className# + + className# undefined {`string`} @@ -25,8 +25,8 @@ import CToastHeader from '@coreui/react/src/components/toast/CToastHeader'

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

    - - closeButton# + + closeButton# undefined {`boolean`} diff --git a/packages/docs/content/api/CToaster.api.mdx b/packages/docs/content/api/CToaster.api.mdx index 4550a356..3a86393c 100644 --- a/packages/docs/content/api/CToaster.api.mdx +++ b/packages/docs/content/api/CToaster.api.mdx @@ -15,8 +15,8 @@ import CToaster from '@coreui/react/src/components/toast/CToaster' - - className# + + className# undefined {`string`} diff --git a/packages/docs/content/api/CTooltip.api.mdx b/packages/docs/content/api/CTooltip.api.mdx index b6815ffa..335bf4d1 100644 --- a/packages/docs/content/api/CTooltip.api.mdx +++ b/packages/docs/content/api/CTooltip.api.mdx @@ -25,8 +25,8 @@ import CTooltip from '@coreui/react/src/components/tooltip/CTooltip'

    Apply a CSS fade transition to the tooltip.

    - - className# + + className# undefined {`string`} @@ -65,8 +65,8 @@ 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 }`}.

    - - fallbackPlacements#4.9.0+ + + fallbackPlacements#4.9.0+ {`['top', 'right', 'bottom', 'left']`} {`Placements`}, {`Placements[]`} @@ -85,8 +85,8 @@ import CTooltip from '@coreui/react/src/components/tooltip/CTooltip'

    Offset of the tooltip relative to its target.

    - - onHide# + + onHide# undefined {`() => void`} @@ -95,8 +95,8 @@ import CTooltip from '@coreui/react/src/components/tooltip/CTooltip'

    Callback fired when the component requests to be hidden.

    - - onShow# + + onShow# undefined {`() => void`} diff --git a/packages/docs/content/api/CWidgetStatsA.api.mdx b/packages/docs/content/api/CWidgetStatsA.api.mdx index 5f070ae2..f0eb8778 100644 --- a/packages/docs/content/api/CWidgetStatsA.api.mdx +++ b/packages/docs/content/api/CWidgetStatsA.api.mdx @@ -35,8 +35,8 @@ import CWidgetStatsA from '@coreui/react/src/components/widgets/CWidgetStatsA'

    Chart node for your component.

    - - className# + + className# undefined {`string`} diff --git a/packages/docs/content/api/CWidgetStatsB.api.mdx b/packages/docs/content/api/CWidgetStatsB.api.mdx index 95930531..36e042e0 100644 --- a/packages/docs/content/api/CWidgetStatsB.api.mdx +++ b/packages/docs/content/api/CWidgetStatsB.api.mdx @@ -15,8 +15,8 @@ import CWidgetCWidgetStatsB from '@coreui/react/src/components/widgets/CWidgetSt - - className# + + className# undefined {`string`} diff --git a/packages/docs/content/api/CWidgetStatsC.api.mdx b/packages/docs/content/api/CWidgetStatsC.api.mdx index 47c6e1ad..9485d07f 100644 --- a/packages/docs/content/api/CWidgetStatsC.api.mdx +++ b/packages/docs/content/api/CWidgetStatsC.api.mdx @@ -15,8 +15,8 @@ import CWidgetStatsCWidgetStatsC from '@coreui/react/src/components/widgets/CWid - - className# + + className# undefined {`string`} diff --git a/packages/docs/content/api/CWidgetStatsD.api.mdx b/packages/docs/content/api/CWidgetStatsD.api.mdx index 5680f8eb..9875979b 100644 --- a/packages/docs/content/api/CWidgetStatsD.api.mdx +++ b/packages/docs/content/api/CWidgetStatsD.api.mdx @@ -25,8 +25,8 @@ import CWidgetStatsD from '@coreui/react/src/components/widgets/CWidgetStatsD'

    Chart node for your component.

    - - className# + + className# undefined {`string`} diff --git a/packages/docs/content/api/CWidgetStatsE.api.mdx b/packages/docs/content/api/CWidgetStatsE.api.mdx index bd22c4ce..1af5918c 100644 --- a/packages/docs/content/api/CWidgetStatsE.api.mdx +++ b/packages/docs/content/api/CWidgetStatsE.api.mdx @@ -25,8 +25,8 @@ import CWidgetStatsE from '@coreui/react/src/components/widgets/CWidgetStatsE'

    Chart node for your component.

    - - className# + + className# undefined {`string`} diff --git a/packages/docs/content/api/CWidgetStatsF.api.mdx b/packages/docs/content/api/CWidgetStatsF.api.mdx index 146bd5d7..b3076836 100644 --- a/packages/docs/content/api/CWidgetStatsF.api.mdx +++ b/packages/docs/content/api/CWidgetStatsF.api.mdx @@ -15,8 +15,8 @@ import CWidgetStatsF from '@coreui/react/src/components/widgets/CWidgetStatsF' - - className# + + className# undefined {`string`} diff --git a/packages/docs/content/api/CoreUIProvider.api.mdx b/packages/docs/content/api/CoreUIProvider.api.mdx deleted file mode 100644 index 17f75a27..00000000 --- a/packages/docs/content/api/CoreUIProvider.api.mdx +++ /dev/null @@ -1,7 +0,0 @@ - -```jsx -import { CoreUIProvider } from '@coreui/src' -// or -import CoreUIProvider from '@coreuireact/src/api/coreuivider/CoreUIProvider' -``` - From 7ad6008230d72a9ddc40e0e39ed20968a96858ba Mon Sep 17 00:00:00 2001 From: mrholek Date: Wed, 18 Dec 2024 13:53:35 +0100 Subject: [PATCH 094/164] docs: update layout --- packages/docs/gatsby-browser.tsx | 11 +- packages/docs/gatsby-ssr.tsx | 11 +- packages/docs/src/components/Seo.tsx | 11 -- packages/docs/src/components/Sidebar.tsx | 4 +- packages/docs/src/templates/DefaultLayout.tsx | 27 +--- packages/docs/src/templates/DocsLayout.tsx | 118 ++++++++++-------- packages/docs/src/templates/MdxLayout.tsx | 78 ++++++------ 7 files changed, 125 insertions(+), 135 deletions(-) diff --git a/packages/docs/gatsby-browser.tsx b/packages/docs/gatsby-browser.tsx index 4791853e..9850d388 100644 --- a/packages/docs/gatsby-browser.tsx +++ b/packages/docs/gatsby-browser.tsx @@ -1,8 +1,13 @@ -import React from 'react' +import React, { ReactNode } from 'react' import '@docsearch/css' import DefaultLayout from './src/templates/DefaultLayout' +import DocsLayout from './src/templates/DocsLayout' import './src/styles/styles.scss' -export const wrapPageElement = ({ element, props }) => { - return {element} +export const wrapRootElement = ({ element }: { element: ReactNode }) => { + return {element} +} + +export const wrapPageElement = ({ element, props }: { element: ReactNode; props: any }) => { + return {element} } diff --git a/packages/docs/gatsby-ssr.tsx b/packages/docs/gatsby-ssr.tsx index 4791853e..9850d388 100644 --- a/packages/docs/gatsby-ssr.tsx +++ b/packages/docs/gatsby-ssr.tsx @@ -1,8 +1,13 @@ -import React from 'react' +import React, { ReactNode } from 'react' import '@docsearch/css' import DefaultLayout from './src/templates/DefaultLayout' +import DocsLayout from './src/templates/DocsLayout' import './src/styles/styles.scss' -export const wrapPageElement = ({ element, props }) => { - return {element} +export const wrapRootElement = ({ element }: { element: ReactNode }) => { + return {element} +} + +export const wrapPageElement = ({ element, props }: { element: ReactNode; props: any }) => { + return {element} } diff --git a/packages/docs/src/components/Seo.tsx b/packages/docs/src/components/Seo.tsx index 62f081b8..26cd82d0 100644 --- a/packages/docs/src/components/Seo.tsx +++ b/packages/docs/src/components/Seo.tsx @@ -40,27 +40,16 @@ const SEO = ({ title, description, name, image, article }: SEOProps) => { {formattedTitle} - {seo.url && } - {(article ? true : null) && } - {seo.title && } - {seo.description && } - {seo.image && } - - {twitterUsername && } - {seo.title && } - {seo.description && } - {seo.image && } - {seo.name && ( - )} + {seo.name && } ) } diff --git a/packages/docs/src/templates/MdxLayout.tsx b/packages/docs/src/templates/MdxLayout.tsx index 00aa6f11..4fddc174 100644 --- a/packages/docs/src/templates/MdxLayout.tsx +++ b/packages/docs/src/templates/MdxLayout.tsx @@ -98,11 +98,12 @@ export const Head = ({ pageContext }: { pageContext: PageContextType }) => { const title = frontmatter?.title || '' const description = frontmatter?.description || '' const name = frontmatter?.name || '' + const pro = frontmatter?.pro_component || false return ( <> - + ) }