feat(component): replaced -> component (carbon-design-system#15084)

packages/react/src/components/UIShell/SideNavItems.js → 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>;