[pull] main from coreui:main

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": "^7.10.0",
-    "@typescript-eslint/parser": "^7.10.0",
+    "@typescript-eslint/eslint-plugin": "^7.15.0",
+    "@typescript-eslint/parser": "^7.15.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": "^7.34.3",
     "eslint-plugin-react-hooks": "^4.6.2",
-    "eslint-plugin-unicorn": "^51.0.1",
-    "lerna": "^8.1.3",
+    "eslint-plugin-unicorn": "^54.0.0",
+    "lerna": "^8.1.6",
     "npm-run-all": "^4.1.5",
-    "prettier": "^3.2.5"
+    "prettier": "^3.3.2"
   },
   "overrides": {
     "gatsby-remark-external-links": {

packages/coreui-react/package.json

@@ -46,11 +46,11 @@
     "prop-types": "^15.8.1"
   },
   "devDependencies": {
-    "@rollup/plugin-commonjs": "^25.0.8",
+    "@rollup/plugin-commonjs": "^26.0.1",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-typescript": "^11.1.6",
-    "@testing-library/jest-dom": "^6.4.5",
-    "@testing-library/react": "^14.3.1",
+    "@testing-library/jest-dom": "^6.4.6",
+    "@testing-library/react": "^16.0.0",
     "@types/jest": "^29.5.12",
     "@types/react": "18.3.3",
     "@types/react-dom": "^18.3.0",
@@ -63,9 +63,9 @@
     "react-dom": "^18.3.1",
     "react-transition-group": "^4.4.5",
     "rollup": "^4.18.0",
-    "ts-jest": "^29.1.3",
-    "tslib": "^2.6.2",
-    "typescript": "^5.4.5"
+    "ts-jest": "^29.1.5",
+    "tslib": "^2.6.3",
+    "typescript": "^5.5.3"
   },
   "peerDependencies": {
     "react": ">=17",

packages/coreui-react/src/components/button-group/__tests__/CButtonGroup.spec.tsx

@@ -11,9 +11,9 @@ test('loads and displays CButtonGroup component', async () => {
 test('CButtonGroup customize', async () => {
   const { container } = render(
     <CButtonGroup className="bazinga" size="lg" vertical={false}>
-      <CButton>Test A</CButton>
-      <CButton>Test B</CButton>
-      <CButton>Test C</CButton>
+      <CButton color="primary">Test A</CButton>
+      <CButton color="primary">Test B</CButton>
+      <CButton color="primary">Test C</CButton>
     </CButtonGroup>,
   )
   expect(container).toMatchSnapshot()
@@ -25,9 +25,9 @@ test('CButtonGroup customize', async () => {
 test('CButtonGroup customize vertical', async () => {
   const { container } = render(
     <CButtonGroup className="bazinga" size="lg" vertical={true}>
-      <CButton>Test A</CButton>
-      <CButton>Test B</CButton>
-      <CButton>Test C</CButton>
+      <CButton color="primary">Test A</CButton>
+      <CButton color="primary">Test B</CButton>
+      <CButton color="primary">Test C</CButton>
     </CButtonGroup>,
   )
   expect(container).toMatchSnapshot()

packages/coreui-react/src/components/button-group/__tests__/CButtonToolbar.spec.tsx

@@ -12,14 +12,14 @@ test('CButtonToolbar customize', async () => {
   const { container } = render(
     <CButtonToolbar className="bazinga" role="group" aria-label="Bazinga">
       <CButtonGroup role="group">
-        <CButton>1</CButton>
-        <CButton>2</CButton>
-        <CButton>3</CButton>
+        <CButton color="primary">1</CButton>
+        <CButton color="primary">2</CButton>
+        <CButton color="primary">3</CButton>
       </CButtonGroup>
       <CButtonGroup role="group">
-        <CButton>A</CButton>
-        <CButton>B</CButton>
-        <CButton>C</CButton>
+        <CButton color="primary">A</CButton>
+        <CButton color="primary">B</CButton>
+        <CButton color="primary">C</CButton>
       </CButtonGroup>
     </CButtonToolbar>,
   )

packages/coreui-react/src/components/button/CButton.tsx

@@ -74,8 +74,11 @@ export const CButton: PolymorphicRefForwardingComponent<'button', CButtonProps>
         {...(!rest.href && { type: type })}
         className={classNames(
           'btn',
-          variant ? `btn-${variant}-${color}` : `btn-${color}`,
-          { [`btn-${size}`]: size },
+          {
+            [`btn-${color}`]: color && !variant,
+            [`btn-${variant}-${color}`]: color && variant,
+            [`btn-${size}`]: size,
+          },
           shape,
           className,
         )}

packages/coreui-react/src/components/button/__tests__/CButton.spec.tsx

@@ -4,7 +4,7 @@ import '@testing-library/jest-dom'
 import { CButton } from '../../../index'
 
 test('loads and displays CButton component', async () => {
-  const { container } = render(<CButton>Test</CButton>)
+  const { container } = render(<CButton color="primary">Test</CButton>)
   expect(container).toMatchSnapshot()
 })
 

packages/coreui-react/src/components/dropdown/__tests__/CDropdownToggle.spec.tsx

@@ -10,7 +10,7 @@ test('loads and displays CDropdownToggle component', async () => {
 
 test('CDropdownToggle customize', async () => {
   const { container } = render(
-    <CDropdownToggle caret={true} split={true} trigger="focus">
+    <CDropdownToggle caret={true} color="primary" split={true} trigger="focus">
       Test
     </CDropdownToggle>,
   )

packages/coreui-react/src/components/dropdown/__tests__/__snapshots__/CDropdown.spec.tsx.snap

@@ -17,7 +17,7 @@ exports[`CDropdown example 1`] = `
   >
     <button
       aria-expanded="false"
-      class="btn btn-primary dropdown-toggle"
+      class="btn dropdown-toggle"
       tabindex="0"
       type="button"
     >

packages/coreui-react/src/components/dropdown/__tests__/__snapshots__/CDropdownToggle.spec.tsx.snap

@@ -20,7 +20,7 @@ exports[`CDropdownToggle customize 1`] = `
 exports[`loads and displays CDropdownToggle component 1`] = `
 <div>
   <button
-    class="btn btn-primary dropdown-toggle"
+    class="btn dropdown-toggle"
     tabindex="0"
     type="button"
   >

packages/coreui-react/src/components/modal/__tests__/CModal.spec.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { render, fireEvent } from '@testing-library/react'
-import '@testing-library/jest-dom/extend-expect'
+import '@testing-library/jest-dom'
 import { CModal } from '../../../index'
 
 test('loads and displays CModal component', async () => {

packages/coreui-react/src/components/nav/__tests__/__snapshots__/CNavItem.spec.tsx.snap

@@ -2,35 +2,39 @@
 
 exports[`CNavItem customize 1`] = `
 <div>
-  <li
+  <h3
     class="nav-item bazinga"
   >
-    <h3
+    <a
       aria-current="page"
+      aria-disabled="true"
       class="nav-link bazinga active disabled"
       disabled=""
       href="/bazinga"
+      tabindex="-1"
     >
       Test
-    </h3>
-  </li>
+    </a>
+  </h3>
 </div>
 `;
 
 exports[`CNavItem customize 2`] = `
 <div>
-  <li
+  <h3
     class="nav-item bazinga"
   >
-    <h3
+    <a
       aria-current="page"
+      aria-disabled="true"
       class="nav-link bazinga active disabled"
       disabled=""
       href="/bazinga"
+      tabindex="-1"
     >
       Test
-    </h3>
-  </li>
+    </a>
+  </h3>
 </div>
 `;
 

packages/coreui-react/src/components/popover/CPopover.tsx

@@ -149,6 +149,7 @@ export const CPopover = forwardRef<HTMLDivElement, CPopoverProps>(
             }
 
             initPopper(togglerRef.current, popoverRef.current, popperConfig)
+            popoverRef.current.style.removeProperty('display')
             popoverRef.current.classList.add('show')
             onShow && onShow()
           }
@@ -160,6 +161,10 @@ export const CPopover = forwardRef<HTMLDivElement, CPopoverProps>(
           popoverRef.current.classList.remove('show')
           onHide && onHide()
           executeAfterTransition(() => {
+            if (popoverRef.current) {
+              popoverRef.current.style.display = 'none'
+            }
+
             destroyPopper()
             setMounted(false)
           }, popoverRef.current)
@@ -193,6 +198,9 @@ export const CPopover = forwardRef<HTMLDivElement, CPopoverProps>(
               id={uID.current}
               ref={forkedRef}
               role="tooltip"
+              style={{
+                display: 'none',
+              }}
               {...rest}
             >
               <div className="popover-arrow"></div>

packages/coreui-react/src/components/popover/__tests__/CPopover.spec.tsx

@@ -6,7 +6,7 @@ import { CPopover, CButton } from '../../../index'
 test('loads and displays CPopover component', async () => {
   const { container } = render(
     <CPopover content="A">
-      <CButton>Test</CButton>
+      <CButton color="primary">Test</CButton>
     </CPopover>,
   )
   expect(container).toMatchSnapshot()
@@ -17,7 +17,7 @@ test('CPopover customize', async () => {
   let arr, element
   const { container } = render(
     <CPopover content="content" title="title" trigger="click" placement="right">
-      <CButton>Test</CButton>
+      <CButton color="primary">Test</CButton>
     </CPopover>,
     { container: document.body },
   )

packages/coreui-react/src/components/popover/__tests__/__snapshots__/CPopover.spec.tsx.snap

@@ -3,11 +3,33 @@
 exports[`CPopover customize 1`] = `
 <body>
   <button
+    aria-describedby="popover744956"
     class="btn btn-primary"
     type="button"
   >
     Test
   </button>
+  <div
+    class="popover bs-popover-auto fade show"
+    id="popover744956"
+    role="tooltip"
+    style="position: absolute; left: 0px; top: 0px; margin: 0px;"
+  >
+    <div
+      class="popover-arrow"
+      style="position: absolute;"
+    />
+    <div
+      class="popover-header"
+    >
+      title
+    </div>
+    <div
+      class="popover-body"
+    >
+      content
+    </div>
+  </div>
 </body>
 `;
 

packages/coreui-react/src/components/sidebar/__tests__/__snapshots__/CSidebarBrand.spec.tsx.snap

@@ -2,21 +2,21 @@
 
 exports[`CSidebarBrand customize 1`] = `
 <div>
-  <div
+  <a
     class="sidebar-brand bazinga"
   >
     Test
-  </div>
+  </a>
 </div>
 `;
 
 exports[`loads and displays CSidebarBrand component 1`] = `
 <div>
-  <div
+  <a
     class="sidebar-brand"
     color="primary"
   >
     Test
-  </div>
+  </a>
 </div>
 `;

packages/coreui-react/src/components/sidebar/__tests__/__snapshots__/CSidebarNav.spec.tsx.snap

@@ -4,14 +4,18 @@ exports[`CSidebarNav customize 1`] = `
 <div>
   <ul
     class="sidebar-nav bazinga"
-  />
+  >
+    Test
+  </ul>
 </div>
 `;
 
 exports[`loads and displays CSidebarNav component 1`] = `
 <div>
   <ul
     class="sidebar-nav"
-  />
+  >
+    Test
+  </ul>
 </div>
 `;

packages/coreui-react/src/components/tabs/__tests__/__snapshots__/CTabPane.spec.tsx.snap

@@ -3,7 +3,7 @@
 exports[`CTabPane customize 1`] = `
 <div>
   <div
-    class="tab-pane fade active show bazinga"
+    class="tab-pane active fade show bazinga"
   >
     Test
   </div>

packages/coreui-react/src/components/toast/__tests__/__snapshots__/CToaster.spec.tsx.snap

@@ -6,7 +6,7 @@ exports[`CToaster customize 1`] = `
     class="toaster toast-container bazinga"
   />
   <button
-    class="btn btn-primary"
+    class="btn"
     type="button"
   >
     Send a toast

packages/coreui-react/src/components/tooltip/CTooltip.tsx

@@ -144,6 +144,7 @@ export const CTooltip = forwardRef<HTMLDivElement, CTooltipProps>(
             }
 
             initPopper(togglerRef.current, tooltipRef.current, popperConfig)
+            tooltipRef.current.style.removeProperty('display')
             tooltipRef.current.classList.add('show')
             onShow && onShow()
           }
@@ -155,6 +156,10 @@ export const CTooltip = forwardRef<HTMLDivElement, CTooltipProps>(
           tooltipRef.current.classList.remove('show')
           onHide && onHide()
           executeAfterTransition(() => {
+            if (tooltipRef.current) {
+              tooltipRef.current.style.display = 'none'
+            }
+
             destroyPopper()
             setMounted(false)
           }, tooltipRef.current)
@@ -192,6 +197,9 @@ export const CTooltip = forwardRef<HTMLDivElement, CTooltipProps>(
               id={uID.current}
               ref={forkedRef}
               role="tooltip"
+              style={{
+                display: 'none',
+              }}
               {...rest}
             >
               <div className="tooltip-arrow"></div>

packages/coreui-react/src/components/tooltip/__tests__/__snapshots__/CTooltip.spec.tsx.snap

@@ -3,6 +3,7 @@
 exports[`CTooltip customize 1`] = `
 <div>
   <a
+    aria-describedby="tooltip97108"
     class="link"
   >
     Test

packages/coreui-react/src/components/widgets/__tests__/__snapshots__/CWidgetStatsC.spec.tsx.snap

@@ -9,7 +9,7 @@ exports[`CWidgetStatsC customize 1`] = `
       class="card-body"
     >
       <div
-        class="text-end mb-4"
+        class="text-end mb-4 text-white text-opacity-75"
       >
         icon
       </div>