refactor(CSidebarNav): move the context outside the component

Author: mrholek

packages/coreui-react/src/components/nav/CNavGroup.tsx

@@ -16,7 +16,7 @@ import type { TransitionStatus } from 'react-transition-group'
 
 import { PolymorphicRefForwardingComponent } from '../../helpers'
 
-import { CNavContext } from '../sidebar/CSidebarNav'
+import { CSidebarNavContext } from '../sidebar/CSidebarNavContext'
 
 export interface CNavGroupProps extends HTMLAttributes<HTMLDivElement | HTMLLIElement> {
   /**
@@ -62,7 +62,7 @@ export const CNavGroup: PolymorphicRefForwardingComponent<'li', CNavGroupProps>
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const navItemsRef = useRef<any>(null)
 
-  const { visibleGroup, setVisibleGroup } = useContext(CNavContext)
+  const { visibleGroup, setVisibleGroup } = useContext(CSidebarNavContext)
 
   const [_visible, setVisible] = useState(
     Boolean(visible || (idx && visibleGroup && isInVisibleGroup(visibleGroup, idx))),

packages/coreui-react/src/components/nav/CNavLink.tsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
 import { CLinkProps, CLink } from '../link/CLink'
-import { CNavContext } from '../sidebar/CSidebarNav'
+import { CSidebarNavContext } from '../sidebar/CSidebarNavContext'
 
 import { PolymorphicRefForwardingComponent } from '../../helpers'
 import { useForkedRef } from '../../hooks'
@@ -26,7 +26,7 @@ export const CNavLink: PolymorphicRefForwardingComponent<'a', CNavLinkProps> = f
   const navLinkRef = useRef<HTMLAnchorElement>(null)
   const forkedRef = useForkedRef(ref, navLinkRef)
 
-  const { setVisibleGroup } = useContext(CNavContext)
+  const { setVisibleGroup } = useContext(CSidebarNavContext)
 
   useEffect(() => {
     rest.active = navLinkRef.current?.classList.contains('active')

packages/coreui-react/src/components/sidebar/CSidebarNav.tsx

@@ -1,5 +1,4 @@
 import React, {
-  createContext,
   ElementType,
   forwardRef,
   HTMLAttributes,
@@ -13,6 +12,9 @@ import classNames from 'classnames'
 import type { CNavGroupProps } from '../nav/CNavGroup'
 import type { CNavLinkProps } from '../nav/CNavLink'
 import type { CNavItemProps } from '../nav/CNavItem'
+
+import { CSidebarNavContext } from './CSidebarNavContext'
+
 import { PolymorphicRefForwardingComponent } from '../../helpers'
 
 export interface CSidebarNavProps extends HTMLAttributes<HTMLUListElement> {
@@ -28,13 +30,6 @@ export interface CSidebarNavProps extends HTMLAttributes<HTMLUListElement> {
   className?: string
 }
 
-interface ContextProps {
-  visibleGroup: string
-  setVisibleGroup: React.Dispatch<React.SetStateAction<string | undefined>>
-}
-
-export const CNavContext = createContext({} as ContextProps)
-
 const isNavElement = (
   child: ReactNode
 ): child is ReactElement<CNavGroupProps | CNavLinkProps | CNavItemProps> => {
@@ -82,11 +77,11 @@ export const CSidebarNav: PolymorphicRefForwardingComponent<'ul', CSidebarNavPro
   }
 
   return (
-    <CNavContext.Provider value={CNavContextValues}>
+    <CSidebarNavContext.Provider value={CNavContextValues}>
       <Component className={classNames('sidebar-nav', className)} ref={ref} {...rest}>
         {recursiveClone(children)}
       </Component>
-    </CNavContext.Provider>
+    </CSidebarNavContext.Provider>
   )
 })
 

packages/coreui-react/src/components/sidebar/CSidebarNavContext.ts

@@ -0,0 +1,8 @@
+import { createContext } from 'react'
+
+export interface CSidebarNavContextProps {
+  visibleGroup: string
+  setVisibleGroup: React.Dispatch<React.SetStateAction<string | undefined>>
+}
+
+export const CSidebarNavContext = createContext({} as CSidebarNavContextProps)