feat(CAccordion): allow defining custom class names and overriding existing ones

Author: mrholek

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

@@ -89,16 +89,16 @@ export const CAccordion = forwardRef<HTMLDivElement, CAccordionProps>(
   ) => {
     const [_activeItemKey, setActiveKey] = useState(activeItemKey)
 
-    const _classNames = mergeClassNames<typeof ACCORDION_CLASS_NAMES>(
+    const mergedClassNames = mergeClassNames<typeof ACCORDION_CLASS_NAMES>(
       ACCORDION_CLASS_NAMES,
       customClassNames,
     )
 
     return (
       <div
         className={classNames(
-          _classNames.ACCORDION,
-          { [_classNames.ACCORDION_FLUSH]: flush },
+          mergedClassNames.ACCORDION,
+          { [mergedClassNames.ACCORDION_FLUSH]: flush },
           className,
         )}
         {...rest}

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

@@ -51,14 +51,14 @@ export const CAccordionBody = forwardRef<HTMLDivElement, CAccordionBodyProps>(
   ({ children, className, customClassNames, ...rest }, ref) => {
     const { id, visible } = useContext(CAccordionItemContext)
 
-    const _classNames = mergeClassNames<typeof ACCORDION_BODY_CLASS_NAMES>(
+    const mergedClassNames = mergeClassNames<typeof ACCORDION_BODY_CLASS_NAMES>(
       ACCORDION_BODY_CLASS_NAMES,
       customClassNames,
     )
 
     return (
-      <CCollapse id={id} className={_classNames.ACCORDION_COLLAPSE} visible={visible}>
-        <div className={classNames(_classNames.ACCORDION_BODY, className)} {...rest} ref={ref}>
+      <CCollapse id={id} className={mergedClassNames.ACCORDION_COLLAPSE} visible={visible}>
+        <div className={classNames(mergedClassNames.ACCORDION_BODY, className)} {...rest} ref={ref}>
           {children}
         </div>
       </CCollapse>

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

@@ -36,12 +36,17 @@ export const CLASS_NAMES = {
 export const CAccordionButton = forwardRef<HTMLButtonElement, CAccordionButtonProps>(
   ({ children, className, customClassNames, ...rest }, ref) => {
     const { id, visible, setVisible } = useContext(CAccordionItemContext)
-    const _classNames = mergeClassNames<typeof CLASS_NAMES>(CLASS_NAMES, customClassNames)
+
+    const mergedClassNames = mergeClassNames<typeof CLASS_NAMES>(CLASS_NAMES, customClassNames)
 
     return (
       <button
         type="button"
-        className={classNames(_classNames.ACCORDION_BUTTON, { collapsed: !visible }, className)}
+        className={classNames(
+          mergedClassNames.ACCORDION_BUTTON,
+          { collapsed: !visible },
+          className,
+        )}
         aria-controls={id}
         aria-expanded={visible}
         onClick={() => setVisible(!visible)}

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

@@ -43,13 +43,15 @@ export const ACCORDION_HEADER_CLASS_NAMES = {
 
 export const CAccordionHeader = forwardRef<HTMLDivElement, CAccordionHeaderProps>(
   ({ children, className, customClassNames, ...rest }, ref) => {
-    const _classNames = mergeClassNames<typeof ACCORDION_HEADER_CLASS_NAMES>(
+    const mergedClassNames = mergeClassNames<typeof ACCORDION_HEADER_CLASS_NAMES>(
       ACCORDION_HEADER_CLASS_NAMES,
       customClassNames,
     )
     return (
-      <div className={classNames(_classNames.ACCORDION_HEADER, className)} {...rest} ref={ref}>
-        <CAccordionButton className={_classNames.ACCORDION_HEADER}>{children}</CAccordionButton>
+      <div className={classNames(mergedClassNames.ACCORDION_HEADER, className)} {...rest} ref={ref}>
+        <CAccordionButton className={mergedClassNames.ACCORDION_HEADER}>
+          {children}
+        </CAccordionButton>
       </div>
     )
   },

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

@@ -65,21 +65,23 @@ export const CAccordionItem = forwardRef<HTMLDivElement, CAccordionItemProps>(
     const { _activeItemKey, alwaysOpen, setActiveKey } = useContext(CAccordionContext)
     const [visible, setVisible] = useState(Boolean(_activeItemKey === _itemKey.current))
 
-    const _classNames = mergeClassNames<typeof ACCORDION_ITEM_CLASS_NAMES>(
+    const mergedClassNames = mergeClassNames<typeof ACCORDION_ITEM_CLASS_NAMES>(
       ACCORDION_ITEM_CLASS_NAMES,
       customClassNames,
     )
 
     useEffect(() => {
-      !alwaysOpen && visible && setActiveKey(_itemKey.current)
+      if (!alwaysOpen && visible) {
+        setActiveKey(_itemKey.current)
+      }
     }, [visible])
 
     useEffect(() => {
       setVisible(Boolean(_activeItemKey === _itemKey.current))
     }, [_activeItemKey])
 
     return (
-      <div className={classNames(_classNames.ACCORDION_ITEM, className)} {...rest} ref={ref}>
+      <div className={classNames(mergedClassNames.ACCORDION_ITEM, className)} {...rest} ref={ref}>
         <CAccordionItemContext.Provider value={{ id, setVisible, visible }}>
           {children}
         </CAccordionItemContext.Provider>