carbon-react 120.0.0 → 120.1.0

package/lib/components/flat-table/flat-table-row/flat-table-row.component.d.ts

@@ -24,18 +24,6 @@ export interface FlatTableRowProps {
     selected?: boolean;
     /** Sub rows to be shown when the row is expanded, must be used with the `expandable` prop. */
     subRows?: React.ReactNode;
-    /** @ignore @private */
-    isSubRow?: boolean;
-    /** @ignore @private */
-    isFirstSubRow?: boolean;
-    /** @ignore @private position in header if multiple rows */
-    stickyOffset?: number;
-    /** @ignore @private applies a border-left to the first child */
-    applyBorderLeft?: boolean;
-    /** ID for use in drag and drop functionality
-     * @private
-     * @ignore
-     */
     id?: string | number;
     /**
      * @private
@@ -49,8 +37,6 @@ export interface FlatTableRowProps {
     moveItem?: FlatTableRowDraggableProps["moveItem"];
     /** @ignore @private position in header if multiple rows */
     draggable?: boolean;
-    /** @ignore @private */
-    ref?: React.RefObject<HTMLTableRowElement>;
 }
-export declare const FlatTableRow: React.ForwardRefExoticComponent<Pick<FlatTableRowProps, "draggable" | "id" | "children" | "onClick" | "selected" | "bgColor" | "expanded" | "findItem" | "moveItem" | "highlighted" | "expandable" | "horizontalBorderColor" | "stickyOffset" | "isSubRow" | "isFirstSubRow" | "applyBorderLeft" | "horizontalBorderSize" | "expandableArea" | "subRows"> & React.RefAttributes<HTMLTableRowElement>>;
+export declare const FlatTableRow: React.ForwardRefExoticComponent<FlatTableRowProps & React.RefAttributes<HTMLTableRowElement>>;
 export default FlatTableRow;

package/lib/components/flat-table/flat-table-row/flat-table-row.component.js

@@ -10,11 +10,14 @@ var _invariant = _interopRequireDefault(require("invariant"));
 var _events = _interopRequireDefault(require("../../../__internal__/utils/helpers/events"));
 var _flatTableRow = _interopRequireDefault(require("./flat-table-row.style"));
 var _drawer = require("../../drawer");
-var _flatTableCheckbox = _interopRequireDefault(require("../flat-table-checkbox"));
 var _flatTableRowHeader = _interopRequireDefault(require("../flat-table-row-header"));
 var _flatTableRowDraggable = _interopRequireDefault(require("./__internal__/flat-table-row-draggable.component"));
 var _flatTable = require("../flat-table.component");
 var _guid = _interopRequireDefault(require("../../../__internal__/utils/helpers/guid"));
+var _flatTableRowContext = _interopRequireDefault(require("./__internal__/flat-table-row-context"));
+var _subRowProvider = _interopRequireWildcard(require("./__internal__/sub-row-provider"));
+var _internal__ = require("../__internal__");
+var _flatTableHead = require("../flat-table-head/flat-table-head.component");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -25,37 +28,70 @@ const FlatTableRow = /*#__PURE__*/_react.default.forwardRef(({
   expandable,
   expandableArea = "wholeRow",
   expanded = false,
-  isSubRow,
-  isFirstSubRow,
-  stickyOffset,
   highlighted,
   selected,
   subRows,
   bgColor,
   horizontalBorderColor,
   horizontalBorderSize = "small",
-  applyBorderLeft,
   id,
   draggable,
   findItem,
   moveItem,
   ...rest
 }, ref) => {
-  const internalId = (0, _react.useRef)(id ?? (0, _guid.default)());
+  const internalId = (0, _react.useRef)(id ? String(id) : (0, _guid.default)());
   const [isExpanded, setIsExpanded] = (0, _react.useState)(expanded);
   let rowRef = (0, _react.useRef)(null);
   if (ref) {
     rowRef = ref;
   }
   const firstColumnExpandable = expandableArea === "firstColumn";
-  const [leftStickyCellWidths, setLeftStickyCellWidths] = (0, _react.useState)([]);
-  const [rightStickyCellWidths, setRightStickyCellWidths] = (0, _react.useState)([]);
-  const [leftPositions, setLeftPositions] = (0, _react.useState)([]);
-  const [rightPositions, setRightPositions] = (0, _react.useState)([]);
-  const childrenArray = (0, _react.useMemo)(() => _react.default.Children.toArray(children), [children]);
-  const lhsRowHeaderIndex = (0, _react.useMemo)(() => childrenArray.findIndex(child => /*#__PURE__*/_react.default.isValidElement(child) && child.type.displayName === _flatTableRowHeader.default.displayName && child.props.stickyAlignment !== "right"), [childrenArray]);
-  const rhsRowHeaderIndex = (0, _react.useMemo)(() => childrenArray.findIndex(child => /*#__PURE__*/_react.default.isValidElement(child) && child.type.displayName === _flatTableRowHeader.default.displayName && child.props.stickyAlignment === "right"), [childrenArray]);
+  const [leftPositions, setLeftPositions] = (0, _react.useState)({});
+  const [rightPositions, setRightPositions] = (0, _react.useState)({});
+  const [firstCellIndex, setFirstCellIndex] = (0, _react.useState)(0);
+  const [lhsRowHeaderIndex, setLhsRowHeaderIndex] = (0, _react.useState)(-1);
+  const [rhsRowHeaderIndex, setRhsRowHeaderIndex] = (0, _react.useState)(-1);
+  const [firstCellId, setFirstCellId] = (0, _react.useState)(null);
+  const [cellsArray, setCellsArray] = (0, _react.useState)([]);
   const [tabIndex, setTabIndex] = (0, _react.useState)(-1);
+  let interactiveRowProps = {};
+  (0, _react.useLayoutEffect)(() => {
+    const checkForPositionUpdates = (updated, current) => {
+      const updatedKeys = Object.keys(updated);
+      const currentKeys = Object.keys(current);
+      if (updatedKeys.length !== currentKeys.length) {
+        return true;
+      }
+      return updatedKeys.some(key => updated[key] !== current[key]);
+    };
+    const cells = rowRef.current?.querySelectorAll("th, td");
+    const cellArray = Array.from(cells || []);
+    setCellsArray(cellArray);
+    const firstIndex = cellArray.findIndex(cell => cell.getAttribute("data-component") !== "flat-table-checkbox");
+    const lhsIndex = cellArray.findIndex(cell => cell.getAttribute("data-sticky-align") === "left");
+    const rhsIndex = cellArray.findIndex(cell => cell.getAttribute("data-sticky-align") === "right");
+    setLhsRowHeaderIndex(lhsIndex);
+    setRhsRowHeaderIndex(rhsIndex);
+    if (firstIndex !== -1) {
+      setFirstCellIndex(firstIndex);
+      setFirstCellId(cellArray[firstIndex].getAttribute("id"));
+    } else {
+      setFirstCellIndex(0);
+    }
+    if (lhsIndex !== -1) {
+      const updatedLeftPositions = (0, _internal__.buildPositionMap)(cellArray.slice(0, lhsRowHeaderIndex + 1), "offsetWidth");
+      if (checkForPositionUpdates(updatedLeftPositions, leftPositions)) {
+        setLeftPositions(updatedLeftPositions);
+      }
+    }
+    if (rhsIndex !== -1) {
+      const updatedRightPositions = (0, _internal__.buildPositionMap)(cellArray.slice(rhsRowHeaderIndex, cellArray.length).reverse(), "offsetWidth");
+      if (checkForPositionUpdates(updatedRightPositions, rightPositions)) {
+        setRightPositions(updatedRightPositions);
+      }
+    }
+  }, [children, leftPositions, lhsRowHeaderIndex, rhsRowHeaderIndex, rightPositions]);
   const noStickyColumnsOverlap = (0, _react.useMemo)(() => {
     const hasLhsColumn = lhsRowHeaderIndex !== -1;
     const hasRhsColumn = rhsRowHeaderIndex !== -1;
@@ -72,22 +108,9 @@ const FlatTableRow = /*#__PURE__*/_react.default.forwardRef(({
   const {
     isInSidebar
   } = (0, _react.useContext)(_drawer.DrawerSidebarContext);
-  const reportCellWidth = (0, _react.useCallback)((width, index) => {
-    const isLeftSticky = index < lhsRowHeaderIndex;
-    const copiedArray = isLeftSticky ? leftStickyCellWidths : rightStickyCellWidths;
-    if (copiedArray[index] !== undefined) {
-      copiedArray[index] = width;
-    } else {
-      copiedArray.push(width);
-    }
-    if (isLeftSticky) {
-      setLeftStickyCellWidths(copiedArray);
-    } else {
-      setRightStickyCellWidths(copiedArray);
-    }
-  }, [lhsRowHeaderIndex, leftStickyCellWidths, rightStickyCellWidths]);
-  let interactiveRowProps = {};
-  const firstCellIndex = /*#__PURE__*/_react.default.isValidElement(childrenArray[0]) && childrenArray[0].type === _flatTableCheckbox.default ? 1 : 0;
+  const {
+    stickyOffsets
+  } = (0, _react.useContext)(_flatTableHead.FlatTableHeadContext);
   const toggleExpanded = () => setIsExpanded(!isExpanded);
   function onKeyDown(ev) {
     const isEnterOrSpaceKey = _events.default.isEnterKey(ev) || _events.default.isSpaceKey(ev);
@@ -123,32 +146,31 @@ const FlatTableRow = /*#__PURE__*/_react.default.forwardRef(({
       toggleExpanded();
     }
   }
-  const buildPositionArray = (setter, widthsArray, length) => {
-    setter([0, ...Array.from({
-      length
-    }).map((_, index) => widthsArray.slice(0, index + 1).reduce((a, b) => a + b, 0), 0)]);
-  };
-  (0, _react.useLayoutEffect)(() => {
-    if (leftStickyCellWidths.length && lhsRowHeaderIndex !== -1) {
-      buildPositionArray(setLeftPositions, leftStickyCellWidths, lhsRowHeaderIndex);
-    }
-  }, [lhsRowHeaderIndex, leftStickyCellWidths]);
-  (0, _react.useLayoutEffect)(() => {
-    if (rightStickyCellWidths.length && rhsRowHeaderIndex !== -1) {
-      buildPositionArray(setRightPositions, rightStickyCellWidths, childrenArray.length - (rhsRowHeaderIndex + 1));
-    }
-  }, [rhsRowHeaderIndex, rightStickyCellWidths, childrenArray]);
   (0, _react.useEffect)(() => {
     setIsExpanded(expanded);
   }, [expanded]);
   (0, _react.useEffect)(() => {
     if (highlighted || selected) {
-      setSelectedId(String(internalId.current));
+      setSelectedId(internalId.current);
     }
   }, [highlighted, selected, setSelectedId]);
   (0, _react.useEffect)(() => {
     setTabIndex(selectedId === internalId.current ? 0 : -1);
   }, [selectedId]);
+  const {
+    isSubRow,
+    firstRowId,
+    addRow,
+    removeRow
+  } = (0, _react.useContext)(_subRowProvider.SubRowContext);
+  (0, _react.useEffect)(() => {
+    const rowId = internalId.current;
+    addRow(rowId);
+    return () => {
+      removeRow(rowId);
+    };
+  }, [addRow, removeRow]);
+  const isFirstSubRow = firstRowId === internalId.current;
   const rowComponent = () => /*#__PURE__*/_react.default.createElement(_flatTableRow.default, _extends({
     isInSidebar: isInSidebar,
     expandable: expandable,
@@ -164,42 +186,34 @@ const FlatTableRow = /*#__PURE__*/_react.default.forwardRef(({
     rhsRowHeaderIndex: rhsRowHeaderIndex,
     colorTheme: colorTheme,
     size: size,
-    stickyOffset: stickyOffset,
+    stickyOffset: stickyOffsets[internalId.current],
     bgColor: bgColor,
     horizontalBorderColor: horizontalBorderColor,
     horizontalBorderSize: horizontalBorderSize,
-    applyBorderLeft: applyBorderLeft,
     draggable: draggable,
-    totalChildren: childrenArray.length,
-    id: String(internalId.current)
-  }, interactiveRowProps, rest), _react.default.Children.map(children, (child, index) => {
-    return /*#__PURE__*/_react.default.isValidElement(child) && /*#__PURE__*/_react.default.cloneElement(child, {
-      expandable: expandable && index === firstCellIndex,
-      onClick: expandable && index === firstCellIndex && firstColumnExpandable ? () => toggleExpanded() : undefined,
-      onKeyDown: expandable && index === firstCellIndex && firstColumnExpandable ? handleCellKeyDown : undefined,
-      cellIndex: index,
-      reportCellWidth: index < lhsRowHeaderIndex || rhsRowHeaderIndex !== -1 && index > rhsRowHeaderIndex ? reportCellWidth : undefined,
-      leftPosition: leftPositions[index],
-      rightPosition: rightPositions[childrenArray.length - (index + 1)],
-      ...child.props
-    });
-  }));
+    totalChildren: cellsArray.length,
+    id: internalId.current
+  }, interactiveRowProps, rest), /*#__PURE__*/_react.default.createElement(_flatTableRowContext.default.Provider, {
+    value: {
+      firstCellId,
+      expandable,
+      leftPositions,
+      rightPositions,
+      firstColumnExpandable,
+      onKeyDown: handleCellKeyDown,
+      onClick: () => toggleExpanded()
+    }
+  }, children));
   const draggableComponent = () => /*#__PURE__*/_react.default.createElement(_flatTableRowDraggable.default, {
     id: internalId.current,
     moveItem: moveItem,
-    findItem: findItem
+    findItem: findItem,
+    rowRef: rowRef
   }, rowComponent());
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, draggable ? draggableComponent() : rowComponent(), isExpanded && subRows && _react.default.Children.map(subRows, (child, index) => child && /*#__PURE__*/_react.default.cloneElement(child, {
-    isSubRow: true,
-    isFirstSubRow: index === 0,
-    ...( /*#__PURE__*/_react.default.isValidElement(child) && {
-      ...child.props
-    })
-  })));
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, draggable ? draggableComponent() : rowComponent(), isExpanded && subRows && /*#__PURE__*/_react.default.createElement(_subRowProvider.default, null, subRows));
 });
 exports.FlatTableRow = FlatTableRow;
 FlatTableRow.propTypes = {
-  "applyBorderLeft": _propTypes.default.bool,
   "bgColor": _propTypes.default.string,
   "children": _propTypes.default.node,
   "draggable": _propTypes.default.bool,
@@ -211,12 +225,9 @@ FlatTableRow.propTypes = {
   "horizontalBorderColor": _propTypes.default.string,
   "horizontalBorderSize": _propTypes.default.oneOf(["large", "medium", "small"]),
   "id": _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
-  "isFirstSubRow": _propTypes.default.bool,
-  "isSubRow": _propTypes.default.bool,
   "moveItem": _propTypes.default.func,
   "onClick": _propTypes.default.func,
   "selected": _propTypes.default.bool,
-  "stickyOffset": _propTypes.default.number,
   "subRows": _propTypes.default.node
 };
 FlatTableRow.displayName = "FlatTableRow";

package/lib/components/flat-table/flat-table-row/flat-table-row.style.d.ts

@@ -1,6 +1,6 @@
 import { FlatTableProps } from "..";
 import { FlatTableRowProps } from "./flat-table-row.component";
-interface StyledFlatTableRowProps extends Pick<FlatTableRowProps, "bgColor" | "horizontalBorderColor" | "stickyOffset" | "expandable" | "selected" | "highlighted" | "isSubRow" | "isFirstSubRow" | "applyBorderLeft" | "draggable"> {
+interface StyledFlatTableRowProps extends Pick<FlatTableRowProps, "bgColor" | "horizontalBorderColor" | "expandable" | "selected" | "highlighted" | "draggable"> {
     isRowInteractive?: boolean;
     isFirstColumnInteractive?: boolean;
     lhsRowHeaderIndex: number;
@@ -13,6 +13,9 @@ interface StyledFlatTableRowProps extends Pick<FlatTableRowProps, "bgColor" | "h
     size: FlatTableProps["size"];
     isDragging?: boolean;
     horizontalBorderSize: NonNullable<FlatTableRowProps["horizontalBorderSize"]>;
+    isSubRow?: boolean;
+    isFirstSubRow?: boolean;
+    stickyOffset?: number;
 }
 declare const StyledFlatTableRow: import("styled-components").StyledComponent<"tr", any, StyledFlatTableRowProps, never>;
 export default StyledFlatTableRow;

package/lib/components/flat-table/flat-table-row/flat-table-row.style.js

@@ -124,7 +124,6 @@ const StyledFlatTableRow = _styledComponents.default.tr`
   isFirstSubRow,
   size,
   theme,
-  applyBorderLeft,
   isDragging,
   draggable
 }) => {
@@ -197,7 +196,7 @@ const StyledFlatTableRow = _styledComponents.default.tr`
         `}
       }
 
-      ${stickyOffset !== undefined && stickyOffset > 0 && (0, _styledComponents.css)`
+      ${stickyOffset !== undefined && (0, _styledComponents.css)`
         && th {
           top: ${stickyOffset}px;
         }
@@ -309,13 +308,6 @@ const StyledFlatTableRow = _styledComponents.default.tr`
         }
       `}
 
-
-      ${applyBorderLeft && (0, _styledComponents.css)`
-        th:first-of-type {
-          border-left: 1px solid ${customBorderColor || borderColor(colorTheme)};
-        }
-      `}
-
       ${isInSidebar && (0, _styledComponents.css)`
         ${allCellTypes} {
           background-color: ${bgColor || "var(--colorsUtilityMajor040)"};

package/lib/components/flat-table/flat-table-row-header/flat-table-row-header.component.d.ts

@@ -1,7 +1,8 @@
 import React from "react";
 import { PaddingProps } from "styled-system";
 import { TableBorderSize, TableCellAlign } from "..";
-export interface FlatTableRowHeaderProps extends PaddingProps {
+import { TagProps } from "../../../__internal__/utils/helpers/tags/tags";
+export interface FlatTableRowHeaderProps extends PaddingProps, TagProps {
     /** Content alignment */
     align?: TableCellAlign;
     /** RowHeader content */
@@ -22,50 +23,11 @@ export interface FlatTableRowHeaderProps extends PaddingProps {
     colspan?: number | string;
     /** Number of rows that a header cell should span */
     rowspan?: number | string;
-    /** Sets an id string on the DOM element */
+    /** Sets an id string on the element */
     id?: string;
-    /**
-     * @private
-     * @ignore
-     */
-    expandable?: boolean;
-    /**
-     * @private
-     * @ignore
-     */
-    onClick?: (ev: React.MouseEvent<HTMLElement>) => void;
-    /**
-     * @private
-     * @ignore
-     */
-    onKeyDown?: (ev: React.KeyboardEvent<HTMLElement>) => void;
-    /**
-     * @private
-     * @ignore
-     * Sets the left position when sticky column found
-     */
-    leftPosition?: number;
-    /**
-     * @private
-     * @ignore
-     * Sets the right position when sticky column found
-     */
-    rightPosition?: number;
-    /**
-     * @private
-     * @ignore
-     * Index of cell within row
-     */
-    cellIndex?: number;
-    /**
-     * @private
-     * @ignore
-     * Callback to report the offsetWidth
-     */
-    reportCellWidth?: (offset: number, index?: number) => void;
 }
 export declare const FlatTableRowHeader: {
-    ({ align, children, width, py, px, expandable, onClick, onKeyDown, leftPosition, rightPosition, truncate, title, stickyAlignment, colspan, rowspan, ...rest }: FlatTableRowHeaderProps): React.JSX.Element;
+    ({ align, children, width, py, px, truncate, title, stickyAlignment, colspan, rowspan, id, ...rest }: FlatTableRowHeaderProps): React.JSX.Element;
     displayName: string;
 };
 export default FlatTableRowHeader;

package/lib/components/flat-table/flat-table-row-header/flat-table-row-header.component.js

@@ -10,6 +10,8 @@ var _icon = _interopRequireDefault(require("../../icon"));
 var _flatTableRowHeader = require("./flat-table-row-header.style");
 var _flatTable = require("../flat-table.component");
 var _guid = _interopRequireDefault(require("../../../__internal__/utils/helpers/guid"));
+var _tags = _interopRequireDefault(require("../../../__internal__/utils/helpers/tags/tags"));
+var _useCalculateStickyCells = _interopRequireDefault(require("../__internal__/use-calculate-sticky-cells"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -20,55 +22,66 @@ const FlatTableRowHeader = ({
   width,
   py,
   px,
-  expandable = false,
-  onClick,
-  onKeyDown,
-  leftPosition,
-  rightPosition,
   truncate,
   title,
   stickyAlignment = "left",
   colspan,
   rowspan,
+  id,
   ...rest
 }) => {
-  const id = (0, _react.useRef)((0, _guid.default)());
+  const internalId = (0, _react.useRef)(id || (0, _guid.default)());
   const [tabIndex, setTabIndex] = (0, _react.useState)(-1);
   const {
     selectedId
   } = (0, _react.useContext)(_flatTable.FlatTableThemeContext);
+  const {
+    leftPosition,
+    rightPosition,
+    expandable,
+    onClick,
+    onKeyDown,
+    isFirstCell,
+    isExpandableCell
+  } = (0, _useCalculateStickyCells.default)(internalId.current);
+  (0, _react.useEffect)(() => {
+    setTabIndex(isExpandableCell && selectedId === internalId.current ? 0 : -1);
+  }, [selectedId, isExpandableCell]);
   const handleOnClick = (0, _react.useCallback)(ev => {
-    if (expandable && onClick) onClick(ev);
-  }, [expandable, onClick]);
+    if (isExpandableCell && onClick) onClick(ev);
+  }, [isExpandableCell, onClick]);
   const handleOnKeyDown = (0, _react.useCallback)(ev => {
-    if (expandable && onKeyDown) onKeyDown(ev);
-  }, [expandable, onKeyDown]);
-  (0, _react.useEffect)(() => {
-    setTabIndex(selectedId === id.current ? 0 : -1);
-  }, [selectedId]);
+    if (isExpandableCell && onKeyDown) {
+      onKeyDown(ev);
+    }
+  }, [isExpandableCell, onKeyDown]);
   return /*#__PURE__*/_react.default.createElement(_flatTableRowHeader.StyledFlatTableRowHeader, _extends({
     leftPosition: stickyAlignment === "left" ? leftPosition || 0 : undefined,
     rightPosition: stickyAlignment === "right" ? rightPosition || 0 : undefined,
-    align: align,
+    align: align
+  }, (0, _tags.default)("flat-table-row-header", {
     "data-element": "flat-table-row-header",
+    ...rest
+  }), {
     width: width,
     py: py || "10px",
     px: px || 3,
     onClick: handleOnClick,
-    tabIndex: expandable && onClick ? tabIndex : undefined,
+    tabIndex: isExpandableCell ? tabIndex : undefined,
     onKeyDown: handleOnKeyDown,
     truncate: truncate,
     expandable: expandable,
-    stickyAlignment: stickyAlignment,
-    id: id.current
+    stickyAlignment: stickyAlignment
   }, colspan !== undefined && {
     colSpan: Number(colspan)
   }, rowspan !== undefined && {
     rowSpan: Number(rowspan)
-  }, rest), /*#__PURE__*/_react.default.createElement(_flatTableRowHeader.StyledFlatTableRowHeaderContent, {
+  }, rest, {
+    id: internalId.current
+  }), /*#__PURE__*/_react.default.createElement(_flatTableRowHeader.StyledFlatTableRowHeaderContent, {
     title: truncate && !title && typeof children === "string" ? children : title,
     expandable: expandable
-  }, expandable && /*#__PURE__*/_react.default.createElement(_icon.default, {
+  }, expandable && isFirstCell && /*#__PURE__*/_react.default.createElement(_icon.default, {
     type: "chevron_down_thick",
     bgSize: "extra-small",
     mr: "8px"

package/lib/components/flat-table/flat-table-row-header/flat-table-row-header.style.d.ts

@@ -1,5 +1,11 @@
 import { FlatTableRowHeaderProps } from "./flat-table-row-header.component";
-declare const StyledFlatTableRowHeader: import("styled-components").StyledComponent<"th", any, FlatTableRowHeaderProps, never>;
+declare const StyledFlatTableRowHeader: import("styled-components").StyledComponent<"th", any, {
+    "data-sticky-align": "left" | "right" | undefined;
+} & FlatTableRowHeaderProps & {
+    expandable?: boolean | undefined;
+    leftPosition?: number | undefined;
+    rightPosition?: number | undefined;
+}, "data-sticky-align">;
 declare const StyledFlatTableRowHeaderContent: import("styled-components").StyledComponent<"div", any, {
     expandable?: boolean | undefined;
 }, never>;

package/lib/components/flat-table/flat-table-row-header/flat-table-row-header.style.js

@@ -16,7 +16,11 @@ const verticalBorderSizes = {
   medium: "2px",
   large: "4px"
 };
-const StyledFlatTableRowHeader = _styledComponents.default.th`
+const StyledFlatTableRowHeader = _styledComponents.default.th.attrs(({
+  stickyAlignment
+}) => ({
+  "data-sticky-align": stickyAlignment
+}))`
   ${({
   align,
   theme,

package/lib/components/flat-table/flat-table.component.js

@@ -17,7 +17,7 @@ const FlatTableThemeContext = /*#__PURE__*/_react.default.createContext({
   setSelectedId: () => {}
 });
 exports.FlatTableThemeContext = FlatTableThemeContext;
-const FOCUSABLE_ROW_AND_CELL_QUERY = "tbody tr, tbody tr td, tbody tr th";
+const FOCUSABLE_ROW_AND_CELL_QUERY = "tbody tr[tabindex], tbody tr td[tabindex], tbody tr th[tabindex]";
 const FlatTable = ({
   caption,
   children,
@@ -108,7 +108,7 @@ const FlatTable = ({
     if (!focusableElements) {
       return;
     }
-    const focusableElementsArray = Array.from(focusableElements).filter(el => el.getAttribute("tabindex") !== null);
+    const focusableElementsArray = Array.from(focusableElements);
     const currentFocusIndex = focusableElementsArray.findIndex(el => el === document.activeElement);
     if (_events.default.isDownKey(ev)) {
       ev.preventDefault();
@@ -135,13 +135,30 @@ const FlatTable = ({
     }
   };
   (0, _react.useLayoutEffect)(() => {
-    const focusableElements = tableRef.current?.querySelectorAll(FOCUSABLE_ROW_AND_CELL_QUERY);
+    const findSelectedId = () => {
+      const firstfocusableElement = tableRef.current?.querySelector(FOCUSABLE_ROW_AND_CELL_QUERY);
+
+      // if no other menu item is selected, we need to make the first row a tab stop
+      if (firstfocusableElement && !selectedId) {
+        const currentlySelectedId = firstfocusableElement?.getAttribute("id");
+
+        /* istanbul ignore else */
+        if (currentlySelectedId && selectedId !== currentlySelectedId) {
+          setSelectedId(currentlySelectedId);
+        }
+      }
+    };
+    const observer = new MutationObserver(findSelectedId);
 
-    // if no other menu item is selected, we need to make the first row a tab stop
-    if (focusableElements && !selectedId) {
-      const focusableArray = Array.from(focusableElements).filter(el => el.getAttribute("tabindex") !== null);
-      setSelectedId(focusableArray[0]?.getAttribute("id") || "");
+    /* istanbul ignore else */
+    if (wrapperRef.current) {
+      observer.observe(wrapperRef.current, {
+        subtree: true,
+        childList: true,
+        attributes: true
+      });
     }
+    return () => observer.disconnect();
   }, [selectedId]);
   return /*#__PURE__*/_react.default.createElement(_flatTable.StyledFlatTableWrapper, _extends({
     ref: wrapperRef,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "120.0.0",
+  "version": "120.1.0",
   "description": "A library of reusable React components for easily building user interfaces.",
   "files": [
     "lib",