fix(carbon-design-system#15332) use toArray or checks for mapping chi…

…ldren (carbon-design-system#15333) * fix(carbon-design-system#15332) use toArray for mapping children * fix: Content switcher * fix: progress indicator * fix: typescript rules for ReactElement usage * fix: format diff test
danoro96 · Jan 18, 2024 · caf8b6c · caf8b6c
1 parent cf54496
commit caf8b6c
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 18 deletions.
diff --git a/packages/react/src/components/ContentSwitcher/ContentSwitcher.tsx b/packages/react/src/components/ContentSwitcher/ContentSwitcher.tsx
@@ -228,12 +228,12 @@ export default class ContentSwitcher extends React.Component<
         role="tablist"
         onChange={undefined}>
         {children &&
-          React.Children.map(children, (child: ReactElement, index) =>
-            React.cloneElement(child, {
+          React.Children.toArray(children).map((child, index) =>
+            React.cloneElement(child as ReactElement, {
               index,
               onClick: composeEventHandlers([
                 this.handleChildChange,
-                child.props.onClick,
+                (child as ReactElement).props.onClick,
               ]),
               onKeyDown: this.handleChildChange,
               selected: index === this.state.selectedIndex,

diff --git a/packages/react/src/components/ProgressIndicator/ProgressIndicator.js b/packages/react/src/components/ProgressIndicator/ProgressIndicator.js
@@ -56,6 +56,10 @@ function ProgressIndicator({
   return (
     <ul className={className} {...rest}>
       {React.Children.map(children, (child, index) => {
+        if (!React.isValidElement(child)) {
+          return null;
+        }
+
         // only setup click handlers if onChange event is passed
         const onClick = onChange ? () => onChange(index) : undefined;
         if (index === currentIndex) {

diff --git a/packages/react/src/components/UIShell/Switcher.tsx b/packages/react/src/components/UIShell/Switcher.tsx
@@ -109,27 +109,29 @@ const Switcher = forwardRef<HTMLUListElement, SwitcherProps>(function Switcher(
     }
   };
 
-  const childrenWithProps = React.Children.map(children, (child, index) => {
-    // only setup click handlers if onChange event is passed
-    if (
-      React.isValidElement(child) &&
-      child.type &&
-      getDisplayName(child.type) === 'Switcher'
-    ) {
+  const childrenWithProps = React.Children.toArray(children).map(
+    (child, index) => {
+      // only setup click handlers if onChange event is passed
+      if (
+        React.isValidElement(child) &&
+        child.type &&
+        getDisplayName(child.type) === 'Switcher'
+      ) {
+        return React.cloneElement(child as React.ReactElement<any>, {
+          handleSwitcherItemFocus,
+          index,
+          key: index,
+          expanded,
+        });
+      }
+
       return React.cloneElement(child as React.ReactElement<any>, {
-        handleSwitcherItemFocus,
         index,
         key: index,
         expanded,
       });
     }
-
-    return React.cloneElement(child as React.ReactElement<any>, {
-      index,
-      key: index,
-      expanded,
-    });
-  });
+  );
 
   return (
     <ul