fix(Navigation): implement item provider to detect parents

Author: matthprost

packages/plus/src/components/Navigation/components/Item.tsx

@@ -29,10 +29,10 @@ import type {
 } from 'react'
 import {
   Children,
-  cloneElement,
   isValidElement,
   memo,
   useCallback,
+  useContext,
   useEffect,
   useMemo,
   useReducer,
@@ -41,6 +41,7 @@ import type { PascalToCamelCaseWithoutSuffix } from '../../../types'
 import { useNavigation } from '../NavigationProvider'
 import { ANIMATION_DURATION, shrinkHeight } from '../constants'
 import type { PinUnPinType } from '../types'
+import { ItemContext, ItemProvider } from './ItemProvider'
 
 const RelativeDiv = styled.div`
   position: relative;
@@ -325,10 +326,6 @@ type ItemProps = {
    * You don't need to use this prop it's used internally to control the type of the item
    */
   type?: ItemType
-  /**
-   * You don't need to use this prop it's used internally to control if the item has a parent
-   */
-  hasParents?: boolean
   /**
    * You don't need to use this prop it's used internally for pinned item to be reorganized with drag and drop
    */
@@ -372,7 +369,6 @@ export const Item = memo(
     active,
     noPinButton,
     type = 'default',
-    hasParents,
     as,
     disabled,
     noExpand = false,
@@ -387,6 +383,9 @@ export const Item = memo(
       )
     }
 
+    const itemProvider = useContext(ItemContext)
+    const hasParents = !!itemProvider
+
     const {
       expanded,
       locales,
@@ -528,14 +527,6 @@ export const Item = memo(
 
     // This content is when the navigation is expanded
     if (expanded || (!expanded && animation === 'expand')) {
-      const renderChildren = Children.map(children, child =>
-        isValidElement<ItemProps>(child)
-          ? cloneElement(child, {
-              hasParents: true,
-            })
-          : child,
-      )
-
       return (
         <>
           <Container
@@ -708,14 +699,18 @@ export const Item = memo(
           {children ? (
             <>
               {!noExpand ? (
-                <Expandable
-                  opened={internalExpanded}
-                  animationDuration={expandableAnimationDuration}
-                >
-                  <PaddedStack>{renderChildren}</PaddedStack>
-                </Expandable>
+                <ItemProvider>
+                  <Expandable
+                    opened={internalExpanded}
+                    animationDuration={expandableAnimationDuration}
+                  >
+                    <PaddedStack>{children}</PaddedStack>
+                  </Expandable>
+                </ItemProvider>
               ) : (
-                <PaddedStack>{renderChildren}</PaddedStack>
+                <ItemProvider>
+                  <PaddedStack>{children}</PaddedStack>
+                </ItemProvider>
               )}
             </>
           ) : null}
@@ -755,13 +750,7 @@ export const Item = memo(
               }
               placement="right"
             >
-              {Children.map(children, child =>
-                isValidElement<ItemProps>(child)
-                  ? cloneElement(child, {
-                      hasParents: true,
-                    })
-                  : child,
-              )}
+              <ItemProvider>{children}</ItemProvider>
             </StyledMenu>
           ) : (
             <Tooltip text={label} placement="right" tabIndex={-1}>

packages/plus/src/components/Navigation/components/ItemProvider.tsx

@@ -0,0 +1,15 @@
+import type { ReactNode } from 'react'
+import { createContext, useMemo } from 'react'
+
+// Create the context with a default value
+export const ItemContext = createContext(false)
+
+type ItemProviderProps = {
+  children: ReactNode
+}
+
+export const ItemProvider = ({ children }: ItemProviderProps) => {
+  const value = useMemo(() => true, [])
+
+  return <ItemContext.Provider value={value}>{children}</ItemContext.Provider>
+}

packages/plus/src/components/Navigation/components/PinnedItems.tsx

@@ -150,7 +150,6 @@ export const PinnedItems = ({
                     onClickPinUnpin={
                       items[itemId]?.onClickPinUnpin ?? undefined
                     }
-                    hasParents
                   />
                 </RelativeDiv>
               ) : null,