fix side-nav TS errors (#1834)

mongodb · Jul 10, 2023 · 9a83d83 · 9a83d83
1 parent 0dfd10b
commit 9a83d83
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 9 deletions.
diff --git a/packages/side-nav/src/SideNavGroup/SideNavGroup.tsx b/packages/side-nav/src/SideNavGroup/SideNavGroup.tsx
@@ -49,19 +49,21 @@ function SideNavGroup({
   const renderedChildren = useMemo(() => {
     const checkForNestedGroups = (children: React.ReactNode) => {
       return React.Children.map(children, child => {
+        if ((child as React.ReactElement)?.props?.children) {
+          checkForNestedGroups((child as React.ReactElement).props.children);
+          return child;
+        }
+
         if (
           isComponentType(child, 'SideNavGroup') ||
           isComponentType(child, 'SideNavItem')
         ) {
           return React.cloneElement(child, {
             indentLevel: indentLevel + 1,
           });
-        } else if ((child as React.ReactElement)?.props?.children) {
-          checkForNestedGroups((child as React.ReactElement).props.children);
-          return child;
-        } else {
-          return child;
         }
+
+        return child;
       });
     };
 
@@ -96,7 +98,7 @@ function SideNavGroup({
 
   // render the provided glyph with appropriate aria roles
   const accessibleGlyph =
-    glyph && isComponentGlyph(glyph)
+    glyph && isComponentGlyph(glyph as React.ReactElement)
       ? React.cloneElement(glyph, {
           className: glyph.props.className,
           role: 'presentation',

diff --git a/packages/side-nav/src/SideNavGroup/SideNavGroup.types.ts b/packages/side-nav/src/SideNavGroup/SideNavGroup.types.ts
@@ -19,7 +19,7 @@ interface SideNavGroupBaseProps extends HTMLElementProps<'li'> {
    *
    * @type `<Icon />`
    */
-  glyph?: React.ReactNode;
+  glyph?: React.ReactElement;
 
   /**
    * Manually overrides automatic detection of whether a group contains an active item.

diff --git a/packages/side-nav/src/SideNavItem/SideNavItem.tsx b/packages/side-nav/src/SideNavItem/SideNavItem.tsx
@@ -84,7 +84,7 @@ const SideNavItem: ExtendableBox<
       };
 
   const accessibleGlyph =
-    glyph && isComponentGlyph(glyph)
+    glyph && isComponentGlyph(glyph as React.ReactElement)
       ? React.cloneElement(glyph, { 'aria-hidden': true })
       : null;
 

diff --git a/packages/side-nav/src/SideNavItem/SideNavItem.types.ts b/packages/side-nav/src/SideNavItem/SideNavItem.types.ts
@@ -47,7 +47,7 @@ export interface SideNavItemProps {
    *
    * @type `<Icon />`
    */
-  glyph?: React.ReactNode;
+  glyph?: React.ReactElement;
 
   /**
    * Changes the indentation. Will not work if `<SideNavItem>` is a child of `<SideNavGroup>`.