[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": "^8.12.1",
-    "@typescript-eslint/parser": "^8.12.1",
+    "@typescript-eslint/eslint-plugin": "^8.18.1",
+    "@typescript-eslint/parser": "^8.18.1",
     "eslint": "8.57.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.2.1",
     "eslint-plugin-react": "^7.37.2",
-    "eslint-plugin-react-hooks": "^5.0.0",
-    "eslint-plugin-unicorn": "^56.0.0",
-    "lerna": "^8.1.8",
+    "eslint-plugin-react-hooks": "^5.1.0",
+    "eslint-plugin-unicorn": "^56.0.1",
+    "lerna": "^8.1.9",
     "npm-run-all": "^4.1.5",
-    "prettier": "^3.3.3"
+    "prettier": "^3.4.2"
   },
   "overrides": {
     "gatsby-remark-external-links": {

packages/coreui-react/package.json

@@ -46,26 +46,26 @@
     "prop-types": "^15.8.1"
   },
   "devDependencies": {
-    "@rollup/plugin-commonjs": "^28.0.1",
-    "@rollup/plugin-node-resolve": "^15.3.0",
-    "@rollup/plugin-typescript": "^12.1.1",
-    "@testing-library/jest-dom": "^6.6.2",
-    "@testing-library/react": "^16.0.1",
+    "@rollup/plugin-commonjs": "^28.0.2",
+    "@rollup/plugin-node-resolve": "^16.0.0",
+    "@rollup/plugin-typescript": "^12.1.2",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.1.0",
     "@types/jest": "^29.5.14",
-    "@types/react": "18.3.12",
-    "@types/react-dom": "^18.3.1",
-    "@types/react-transition-group": "^4.4.11",
+    "@types/react": "18.3.17",
+    "@types/react-dom": "^18.3.5",
+    "@types/react-transition-group": "^4.4.12",
     "classnames": "^2.5.1",
     "cross-env": "^7.0.3",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-transition-group": "^4.4.5",
-    "rollup": "^4.24.2",
+    "rollup": "^4.28.1",
     "ts-jest": "^29.2.5",
-    "tslib": "^2.8.0",
-    "typescript": "^5.6.3"
+    "tslib": "^2.8.1",
+    "typescript": "^5.7.2"
   },
   "peerDependencies": {
     "react": ">=17",

packages/coreui-react/src/components/accordion/CAccordion.tsx

@@ -2,78 +2,25 @@ import React, { createContext, forwardRef, HTMLAttributes, useState } from 'reac
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
-import { mergeClassNames } from '../../utils'
-
 export interface CAccordionProps extends HTMLAttributes<HTMLDivElement> {
   /**
-   * Determines which accordion item is currently active (expanded) by default.
-   * Accepts a number or string corresponding to the `itemKey` of the desired accordion item.
-   *
-   * @example
-   * <CAccordion activeItemKey="1">...</CAccordion>
+   * The active item key.
    */
   activeItemKey?: number | string
-
   /**
-   * 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.
-   *
-   * @default false
-   *
-   * @example
-   * <CAccordion alwaysOpen>...</CAccordion>
+   * Make accordion items stay open when another item is opened
    */
   alwaysOpen?: boolean
-
   /**
-   * Allows you to apply custom CSS classes to the React Accordion for enhanced styling and theming.
-   *
-   * @example
-   * <CAccordion className="my-custom-accordion">...</CAccordion>
+   * A string of all className you want applied to the base component.
    */
   className?: 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.
-   *
-   * @example
-   * const customClasses = {
-   *   ACCORDION: 'custom-accordion',
-   *   ACCORDION_FLUSH: 'custom-accordion-flush'
-   * }
-   * <CAccordion customClassNames={customClasses}>...</CAccordion>
-   */
-  customClassNames?: Partial<typeof ACCORDION_CLASS_NAMES>
-
-  /**
-   * 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.
-   *
-   * @default false
-   *
-   * @example
-   * <CAccordion flush>...</CAccordion>
+   * Removes the default background-color, some borders, and some rounded corners to render accordions edge-to-edge with their parent container.
    */
   flush?: boolean
 }
 
-export const ACCORDION_CLASS_NAMES = {
-  /**
-   * Base class for the accordion container.
-   */
-  ACCORDION: 'accordion',
-
-  /**
-   * Applied when the `flush` prop is enabled.
-   */
-  ACCORDION_FLUSH: 'accordion-flush',
-}
-
 export interface CAccordionContextProps {
   _activeItemKey?: number | string
   alwaysOpen?: boolean
@@ -83,24 +30,12 @@ export interface CAccordionContextProps {
 export const CAccordionContext = createContext({} as CAccordionContextProps)
 
 export const CAccordion = forwardRef<HTMLDivElement, CAccordionProps>(
-  (
-    { children, activeItemKey, alwaysOpen = false, className, customClassNames, flush, ...rest },
-    ref,
-  ) => {
+  ({ children, activeItemKey, alwaysOpen = false, className, flush, ...rest }, ref) => {
     const [_activeItemKey, setActiveKey] = useState(activeItemKey)
 
-    const mergedClassNames = mergeClassNames<typeof ACCORDION_CLASS_NAMES>(
-      ACCORDION_CLASS_NAMES,
-      customClassNames,
-    )
-
     return (
       <div
-        className={classNames(
-          mergedClassNames.ACCORDION,
-          { [mergedClassNames.ACCORDION_FLUSH]: flush },
-          className,
-        )}
+        className={classNames('accordion', { 'accordion-flush': flush }, className)}
         {...rest}
         ref={ref}
       >

packages/coreui-react/src/components/accordion/CAccordionBody.tsx

@@ -5,60 +5,21 @@ import classNames from 'classnames'
 import { CAccordionItemContext } from './CAccordionItem'
 
 import { CCollapse } from './../collapse/CCollapse'
-import { mergeClassNames } from '../../utils'
 
 export interface CAccordionBodyProps extends HTMLAttributes<HTMLDivElement> {
   /**
-   * Allows you to apply custom CSS classes to the React Accordion Body for enhanced styling and theming.
-   *
-   * @example
-   * <CAccordionBody className="custom-accordion-body">...</CAccordionBody>
+   * A string of all className you want applied to the base component.
    */
   className?: 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.
-   *
-   * @example
-   * const customClasses = {
-   *   ACCORDION_COLLAPSE: 'custom-collapse-class',
-   *   ACCORDION_BODY: 'custom-body-class',
-   * }
-   * <CAccordionBody customClassNames={customClasses}>...</CAccordionBody>
-   */
-  customClassNames?: Partial<typeof ACCORDION_BODY_CLASS_NAMES>
-}
-
-export const ACCORDION_BODY_CLASS_NAMES = {
-  /**
-   * Used for managing collapsible behavior in the accordion body.
-   */
-  ACCORDION_COLLAPSE: 'accordion-collapse',
-
-  /**
-   * Styles the main content container inside the accordion.
-   */
-  ACCORDION_BODY: 'accordion-body',
 }
 
 export const CAccordionBody = forwardRef<HTMLDivElement, CAccordionBodyProps>(
-  ({ children, className, customClassNames, ...rest }, ref) => {
-    const { id, visible } = useContext(CAccordionItemContext)
-
-    const mergedClassNames = mergeClassNames<typeof ACCORDION_BODY_CLASS_NAMES>(
-      ACCORDION_BODY_CLASS_NAMES,
-      customClassNames,
-    )
+  ({ children, className, ...rest }, ref) => {
+    const { visible } = useContext(CAccordionItemContext)
 
     return (
-      <CCollapse id={id} className={mergedClassNames.ACCORDION_COLLAPSE} visible={visible}>
-        <div className={classNames(mergedClassNames.ACCORDION_BODY, className)} {...rest} ref={ref}>
+      <CCollapse className="accordion-collapse" visible={visible}>
+        <div className={classNames('accordion-body', className)} {...rest} ref={ref}>
           {children}
         </div>
       </CCollapse>

packages/coreui-react/src/components/accordion/CAccordionButton.tsx

@@ -4,49 +4,21 @@ import classNames from 'classnames'
 
 import { CAccordionItemContext } from './CAccordionItem'
 
-import { mergeClassNames } from '../../utils'
-
 export interface CAccordionButtonProps extends HTMLAttributes<HTMLButtonElement> {
   /**
-   * Styles the clickable element in the accordion header.
+   * A string of all className you want applied to the base component.
    */
   className?: 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.
-   *
-   * @example
-   * const customClasses = {
-   *   ACCORDION_BUTTON: 'custom-button-class',
-   * }
-   * <CAccordionButton customClassNames={customClasses}>...</CAccordionButton>
-   */
-  customClassNames?: Partial<typeof CLASS_NAMES>
-}
-
-export const CLASS_NAMES = {
-  ACCORDION_BUTTON: 'accordion-button',
 }
 
 export const CAccordionButton = forwardRef<HTMLButtonElement, CAccordionButtonProps>(
-  ({ children, className, customClassNames, ...rest }, ref) => {
+  ({ children, className, ...rest }, ref) => {
     const { id, visible, setVisible } = useContext(CAccordionItemContext)
 
-    const mergedClassNames = mergeClassNames<typeof CLASS_NAMES>(CLASS_NAMES, customClassNames)
-
     return (
       <button
         type="button"
-        className={classNames(
-          mergedClassNames.ACCORDION_BUTTON,
-          { collapsed: !visible },
-          className,
-        )}
+        className={classNames('accordion-button', { collapsed: !visible }, className)}
         aria-controls={id}
         aria-expanded={visible}
         onClick={() => setVisible(!visible)}

packages/coreui-react/src/components/accordion/CAccordionHeader.tsx

@@ -3,55 +3,19 @@ import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
 import { CAccordionButton } from './CAccordionButton'
-import { mergeClassNames } from '../../utils'
 
 export interface CAccordionHeaderProps extends HTMLAttributes<HTMLDivElement> {
   /**
    * A string of all className you want applied to the base component.
    */
   className?: 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.
-   *
-   * @example
-   * const customClasses = {
-   *   ACCORDION_HEADER: 'custom-header-class',
-   *   ACCORDION_BUTTON: 'custom-button-class',
-   * }
-   * <CAccordionHeader customClassNames={customClasses}>...</CAccordionHeader>
-   */
-  customClassNames?: Partial<typeof ACCORDION_HEADER_CLASS_NAMES>
-}
-
-export const ACCORDION_HEADER_CLASS_NAMES = {
-  /**
-   * Styles the header container of an accordion item.
-   */
-  ACCORDION_HEADER: 'accordion-header',
-
-  /**
-   * Styles the clickable element in the accordion header.
-   */
-  ACCORDION_BUTTON: 'accordion-button',
 }
 
 export const CAccordionHeader = forwardRef<HTMLDivElement, CAccordionHeaderProps>(
-  ({ children, className, customClassNames, ...rest }, ref) => {
-    const mergedClassNames = mergeClassNames<typeof ACCORDION_HEADER_CLASS_NAMES>(
-      ACCORDION_HEADER_CLASS_NAMES,
-      customClassNames,
-    )
+  ({ children, className, ...rest }, ref) => {
     return (
-      <div className={classNames(mergedClassNames.ACCORDION_HEADER, className)} {...rest} ref={ref}>
-        <CAccordionButton className={mergedClassNames.ACCORDION_HEADER}>
-          {children}
-        </CAccordionButton>
+      <div className={classNames('accordion-header', className)} {...rest} ref={ref}>
+        <CAccordionButton>{children}</CAccordionButton>
       </div>
     )
   },