refactor(CAccordion): move the context outside the component

mrholek · mrholek · commit adc116d9d436 · 2025-04-30T12:15:01.000+02:00
diff --git a/packages/coreui-react/src/components/accordion/CAccordion.tsx b/packages/coreui-react/src/components/accordion/CAccordion.tsx
@@ -1,7 +1,9 @@
-import React, { createContext, forwardRef, HTMLAttributes, useState } from 'react'
+import React, { forwardRef, HTMLAttributes, useState } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
+import { CAccordionContext } from './CAccordionContext'
+
 export interface CAccordionProps extends HTMLAttributes<HTMLDivElement> {
   /**
    * The active item key.
@@ -21,14 +23,6 @@ export interface CAccordionProps extends HTMLAttributes<HTMLDivElement> {
   flush?: boolean
 }
 
-export interface CAccordionContextProps {
-  _activeItemKey?: number | string
-  alwaysOpen?: boolean
-  setActiveKey: React.Dispatch<React.SetStateAction<number | string | undefined>>
-}
-
-export const CAccordionContext = createContext({} as CAccordionContextProps)
-
 export const CAccordion = forwardRef<HTMLDivElement, CAccordionProps>(
   ({ children, activeItemKey, alwaysOpen = false, className, flush, ...rest }, ref) => {
     const [_activeItemKey, setActiveKey] = useState(activeItemKey)
@@ -48,8 +42,8 @@ export const CAccordion = forwardRef<HTMLDivElement, CAccordionProps>(
 )
 
 CAccordion.propTypes = {
-  alwaysOpen: PropTypes.bool,
   activeItemKey: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  alwaysOpen: PropTypes.bool,
   children: PropTypes.node,
   className: PropTypes.string,
   flush: PropTypes.bool,
diff --git a/packages/coreui-react/src/components/accordion/CAccordionBody.tsx b/packages/coreui-react/src/components/accordion/CAccordionBody.tsx
@@ -2,9 +2,8 @@ import React, { forwardRef, HTMLAttributes, useContext } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
-import { CAccordionItemContext } from './CAccordionItem'
-
 import { CCollapse } from './../collapse/CCollapse'
+import { CAccordionItemContext } from './CAccordionItemContext'
 
 export interface CAccordionBodyProps extends HTMLAttributes<HTMLDivElement> {
   /**
diff --git a/packages/coreui-react/src/components/accordion/CAccordionButton.tsx b/packages/coreui-react/src/components/accordion/CAccordionButton.tsx
@@ -2,7 +2,7 @@ import React, { forwardRef, HTMLAttributes, useContext } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
-import { CAccordionItemContext } from './CAccordionItem'
+import { CAccordionItemContext } from './CAccordionItemContext'
 
 export interface CAccordionButtonProps extends HTMLAttributes<HTMLButtonElement> {
   /**
@@ -28,7 +28,7 @@ export const CAccordionButton = forwardRef<HTMLButtonElement, CAccordionButtonPr
         {children}
       </button>
     )
-  },
+  }
 )
 
 CAccordionButton.propTypes = {
diff --git a/packages/coreui-react/src/components/accordion/CAccordionContext.ts b/packages/coreui-react/src/components/accordion/CAccordionContext.ts
@@ -0,0 +1,9 @@
+import { createContext } from 'react'
+
+export interface CAccordionContextProps {
+  _activeItemKey?: number | string
+  alwaysOpen?: boolean
+  setActiveKey: React.Dispatch<React.SetStateAction<number | string | undefined>>
+}
+
+export const CAccordionContext = createContext({} as CAccordionContextProps)
diff --git a/packages/coreui-react/src/components/accordion/CAccordionItem.tsx b/packages/coreui-react/src/components/accordion/CAccordionItem.tsx
@@ -1,5 +1,4 @@
 import React, {
-  createContext,
   forwardRef,
   HTMLAttributes,
   useContext,
@@ -11,15 +10,8 @@ import React, {
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
-import { CAccordionContext } from './CAccordion'
-
-export interface CAccordionItemContextProps {
-  id: string
-  setVisible: (a: boolean) => void
-  visible?: boolean
-}
-
-export const CAccordionItemContext = createContext({} as CAccordionItemContextProps)
+import { CAccordionContext } from './CAccordionContext'
+import { CAccordionItemContext } from './CAccordionItemContext'
 
 export interface CAccordionItemProps extends HTMLAttributes<HTMLDivElement> {
   /**
@@ -38,7 +30,8 @@ export interface CAccordionItemProps extends HTMLAttributes<HTMLDivElement> {
 
 export const CAccordionItem = forwardRef<HTMLDivElement, CAccordionItemProps>(
   ({ children, className, id, itemKey, ...rest }, ref) => {
-    const _id = id ?? useId()
+    const uniqueId = useId()
+    const _id = id ?? uniqueId
     const _itemKey = useRef(itemKey ?? _id)
 
     const { _activeItemKey, alwaysOpen, setActiveKey } = useContext(CAccordionContext)
diff --git a/packages/coreui-react/src/components/accordion/CAccordionItemContext.ts b/packages/coreui-react/src/components/accordion/CAccordionItemContext.ts
@@ -0,0 +1,9 @@
+import { createContext } from 'react'
+
+export interface CAccordionItemContextProps {
+  id: string
+  setVisible: (a: boolean) => void
+  visible?: boolean
+}
+
+export const CAccordionItemContext = createContext({} as CAccordionItemContextProps)

Original file line number	Diff line number	Diff line change
`@@ -2,7 +2,7 @@ import React, { forwardRef, HTMLAttributes, useContext } from 'react'`
`2`	`2`	`import PropTypes from 'prop-types'`
`3`	`3`	`import classNames from 'classnames'`
`4`	`4`
`5`		`-import { CAccordionItemContext } from './CAccordionItem'`
	`5`	`+import { CAccordionItemContext } from './CAccordionItemContext'`
`6`	`6`
`7`	`7`	`export interface CAccordionButtonProps extends HTMLAttributes<HTMLButtonElement> {`
`8`	`8`	`/**`
`@@ -28,7 +28,7 @@ export const CAccordionButton = forwardRef<HTMLButtonElement, CAccordionButtonPr`
`28`	`28`	`{children}`
`29`	`29`	`</button>`
`30`	`30`	`)`
`31`		`- },`
	`31`	`+ }`
`32`	`32`	`)`
`33`	`33`
`34`	`34`	`CAccordionButton.propTypes = {`