From 61494900fab97d337a15c7e58148406f623e034d Mon Sep 17 00:00:00 2001
From: Niraj Sah <nirajsahy4aj@gmail.com>
Date: Tue, 7 Nov 2023 07:52:46 +0530
Subject: [PATCH] feat(component): replaced  ->  component (#15084)

---
 .../{SideNavItems.js => SideNavItems.tsx}     | 38 +++++++++++++++----
 1 file changed, 30 insertions(+), 8 deletions(-)
 rename packages/react/src/components/UIShell/{SideNavItems.js => SideNavItems.tsx} (62%)

diff --git a/packages/react/src/components/UIShell/SideNavItems.js b/packages/react/src/components/UIShell/SideNavItems.tsx
similarity index 62%
rename from packages/react/src/components/UIShell/SideNavItems.js
rename to packages/react/src/components/UIShell/SideNavItems.tsx
index 200b9a8062a5..f16a95c97fdf 100644
--- a/packages/react/src/components/UIShell/SideNavItems.js
+++ b/packages/react/src/components/UIShell/SideNavItems.tsx
@@ -11,7 +11,26 @@ import React from 'react';
 import { CARBON_SIDENAV_ITEMS } from './_utils';
 import { usePrefix } from '../../internal/usePrefix';
 
-const SideNavItems = ({
+interface SideNavItemsProps {
+  /**
+   * Provide a single icon as the child to `SideNavIcon` to render in the
+   * container
+   */
+  children: React.ReactNode;
+
+  /**
+   * Provide an optional class to be applied to the containing node
+   */
+  className?: string;
+
+  /**
+   * Property to indicate if the side nav container is open (or not). Use to
+   * keep local state and styling in step with the SideNav expansion state.
+   */
+  isSideNavExpanded?: boolean;
+}
+
+const SideNavItems: React.FC<SideNavItemsProps> = ({
   className: customClassName,
   children,
   isSideNavExpanded,
@@ -21,13 +40,16 @@ const SideNavItems = ({
   const childrenWithExpandedState = React.Children.map(children, (child) => {
     if (React.isValidElement(child)) {
       // avoid spreading `isSideNavExpanded` to non-Carbon UI Shell children
-      return React.cloneElement(child, {
-        ...(CARBON_SIDENAV_ITEMS.includes(child.type?.displayName)
-          ? {
-              isSideNavExpanded,
-            }
-          : {}),
-      });
+      const childType = child.type as React.ComponentType;
+      if (childType && childType.displayName) {
+        return React.cloneElement(child, {
+          ...(CARBON_SIDENAV_ITEMS.includes(childType.displayName)
+            ? {
+                isSideNavExpanded,
+              }
+            : {}),
+        });
+      }
     }
   });
   return <ul className={className}>{childrenWithExpandedState}</ul>;