fix(flat-table-row): update sticky column functionality to support wr…

…apping row headers

Updates functionality to use `child.type.displayName` instead of `child.type`. This will allow
wrapping of the `FlatTableRowHeader` component as the wrapper component can set its `displayName` to
`FlatTableRowHeader.displayName` to ensure the required columns are sticky.

fix #5208

src/components/flat-table/flat-table-row/flat-table-row.component.js

@@ -3,6 +3,7 @@ import React, {
   useContext,
   useEffect,
   useLayoutEffect,
+  useMemo,
   useRef,
   useState,
 } from "react";
@@ -48,9 +49,15 @@ const FlatTableRow = React.forwardRef(
     const firstColumnExpandable = expandableArea === "firstColumn";
     const [stickyCellWidths, setStickyCellWidths] = useState([]);
     const [leftPositions, setLeftPositions] = useState([]);
-    const childrenArray = React.Children.toArray(children);
-    const rowHeaderIndex = childrenArray.findIndex(
-      (child) => child.type === FlatTableRowHeader
+    const childrenArray = useMemo(() => React.Children.toArray(children), [
+      children,
+    ]);
+    const rowHeaderIndex = useMemo(
+      () =>
+        childrenArray.findIndex(
+          (child) => child.type.displayName === FlatTableRowHeader.displayName
+        ),
+      [childrenArray]
     );
     const themeContext = useContext(FlatTableThemeContext);
 

src/components/flat-table/flat-table-row/flat-table-row.spec.js

@@ -1469,6 +1469,34 @@ describe("FlatTableRow", () => {
       );
     });
   });
+
+  describe("wrapping FlatTableRowHeader", () => {
+    it("calculates the rowHeaderIndex as expected", () => {
+      // eslint-disable-next-line react/prop-types
+      const FlatTableRowHeaderWrapper = ({ children }) => (
+        <FlatTableRowHeader>{children}</FlatTableRowHeader>
+      );
+      FlatTableRowHeaderWrapper.displayName = FlatTableRowHeader.displayName;
+      const rowHeaderIndex = mount(
+        <table>
+          <thead>
+            <FlatTableRow>
+              <FlatTableCell>Foo</FlatTableCell>
+              <FlatTableCell>Foo</FlatTableCell>
+              <FlatTableCell>Foo</FlatTableCell>
+              <FlatTableRowHeaderWrapper>Foo</FlatTableRowHeaderWrapper>
+              <FlatTableCell>Foo</FlatTableCell>
+              <FlatTableCell>Foo</FlatTableCell>
+            </FlatTableRow>
+          </thead>
+        </table>
+      )
+        .find(StyledFlatTableRow)
+        .prop("rowHeaderIndex");
+
+      expect(rowHeaderIndex).toEqual(3);
+    });
+  });
 });
 
 function renderFlatTableRow(props = {}, renderer = mount) {

src/components/flat-table/flat-table.stories.mdx

@@ -2159,6 +2159,87 @@ of the button control.
   </Story>
 </Canvas>
 
+## Wrapping FlatTableRowHeaders
+
+The `FlatTableRow` relies on specific child composition to identify sticky columns. If you need to wrap the `FlatTableRowHeader` you will need to set the `displayName` of the wrapper to `FlatTableRowHeader.displayName`.
+
+<Canvas>
+  <Story
+    name="wrapping row headers"
+    parameters={{ chromatic: { disable: true } }}
+  >
+    {() => {
+      const FlatTableRowHeaderWrapper = ({ children, ...rest }) => (
+        <FlatTableRowHeader {...rest}>
+          {children}
+        </FlatTableRowHeader>
+      );
+      FlatTableRowHeaderWrapper.displayName = FlatTableRowHeader.displayName
+      return (
+        <FlatTable width="310px" overflowX="auto">
+          <FlatTableHead>
+            <FlatTableRow>
+              <FlatTableHeader>Name</FlatTableHeader>
+              <FlatTableRowHeaderWrapper>Location</FlatTableRowHeaderWrapper>
+              <FlatTableHeader>Relationship Status</FlatTableHeader>
+              <FlatTableHeader>Dependents</FlatTableHeader>
+            </FlatTableRow>
+          </FlatTableHead>
+          <FlatTableBody>
+            <FlatTableRow>
+              <FlatTableCell>John Doe</FlatTableCell>
+              <FlatTableRowHeaderWrapper>London</FlatTableRowHeaderWrapper>
+              <FlatTableCell>Single</FlatTableCell>
+              <FlatTableCell>
+                <ActionPopover>
+                  <ActionPopoverItem onClick={() => {}} icon="edit">
+                    Edit
+                  </ActionPopoverItem>
+                </ActionPopover>
+              </FlatTableCell>
+            </FlatTableRow>
+            <FlatTableRow>
+              <FlatTableCell>Jane Doe</FlatTableCell>
+              <FlatTableRowHeaderWrapper>York</FlatTableRowHeaderWrapper>
+              <FlatTableCell>Married</FlatTableCell>
+              <FlatTableCell>
+                <ActionPopover>
+                  <ActionPopoverItem onClick={() => {}} icon="edit">
+                    Edit
+                  </ActionPopoverItem>
+                </ActionPopover>
+              </FlatTableCell>
+            </FlatTableRow>
+            <FlatTableRow>
+              <FlatTableCell>John Smith</FlatTableCell>
+              <FlatTableRowHeaderWrapper>Edinburgh</FlatTableRowHeaderWrapper>
+              <FlatTableCell>Single</FlatTableCell>
+              <FlatTableCell>
+                <ActionPopover>
+                  <ActionPopoverItem onClick={() => {}} icon="edit">
+                    Edit
+                  </ActionPopoverItem>
+                </ActionPopover>
+              </FlatTableCell>
+            </FlatTableRow>
+            <FlatTableRow>
+              <FlatTableCell>Jane Smith</FlatTableCell>
+              <FlatTableRowHeaderWrapper>Newcastle</FlatTableRowHeaderWrapper>
+              <FlatTableCell>Married</FlatTableCell>
+              <FlatTableCell>
+                <ActionPopover>
+                  <ActionPopoverItem onClick={() => {}} icon="edit">
+                    Edit
+                  </ActionPopoverItem>
+                </ActionPopover>
+              </FlatTableCell>
+            </FlatTableRow>
+          </FlatTableBody>
+        </FlatTable>
+)}}
+  </Story>
+</Canvas>
+
 ## Props
 
 ### FlatTable