carbon-react 120.2.1 → 120.3.1

package/esm/components/definition-list/__internal__/dl.context.d.ts

@@ -1,6 +1,12 @@
 import React from "react";
-interface DlContextProps {
+export declare type ElementAlignment = "left" | "center" | "right";
+export interface DlContextProps {
+    /** Render the DefinitionList as a single column */
     asSingleColumn?: boolean;
+    /** This string will specify the text align styling of the `<dt></dt>`. */
+    dtTextAlign?: ElementAlignment;
+    /** This string will specify the text align styling of the `<dd></dd>`. */
+    ddTextAlign?: ElementAlignment;
 }
 declare const _default: React.Context<DlContextProps>;
 export default _default;

package/esm/components/definition-list/dd.component.js

@@ -1,7 +1,8 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-import React from "react";
+import React, { useContext } from "react";
 import PropTypes from "prop-types";
 import { StyledDd } from "./definition-list.style";
+import DlContext from "./__internal__/dl.context";
 const Dd = ({
   children,
   ...rest
@@ -9,7 +10,14 @@ const Dd = ({
   const {
     mb
   } = rest;
+  const {
+    asSingleColumn,
+    ddTextAlign
+  } = useContext(DlContext);
   return /*#__PURE__*/React.createElement(StyledDd, _extends({
+    "data-element": "dd",
+    asSingleColumn: asSingleColumn,
+    ddTextAlign: ddTextAlign,
     mb: mb || 2
   }, rest), children);
 };

package/esm/components/definition-list/definition-list.style.d.ts

@@ -1,22 +1,4 @@
-export interface StyledDlProps {
-    /** Render the DefinitionList as a single column */
-    asSingleColumn?: boolean;
-    /** This value will specify the width of the `StyledDtDiv` as a percentage. The remaining space will be taken up
-        by the `StyledDdDiv`. This prop has no effect when `asSingleColumn` is set.
-     */
-    w?: number;
-}
-export declare type ElementAlignment = "left" | "center" | "right";
-export declare const StyledDl: import("styled-components").StyledComponent<"dl", any, StyledDlProps, never>;
-export interface StyledDtDivProps {
-    /** This string will specify the text align styling of the `<dt></dt>`. */
-    dtTextAlign?: ElementAlignment;
-}
-export declare const StyledDtDiv: import("styled-components").StyledComponent<"div", any, StyledDtDivProps, never>;
-export interface StyledDdDivProps {
-    /** This string will specify the text align styling of the `<dd></dd>`. */
-    ddTextAlign?: ElementAlignment;
-}
-export declare const StyledDdDiv: import("styled-components").StyledComponent<"div", any, StyledDdDivProps, never>;
-export declare const StyledDt: import("styled-components").StyledComponent<"dt", any, {}, never>;
-export declare const StyledDd: import("styled-components").StyledComponent<"dd", any, {}, never>;
+import { DlProps } from "./dl.component";
+export declare const StyledDl: import("styled-components").StyledComponent<"dl", any, Omit<DlProps, "dtTextAlign" | "ddTextAlign">, never>;
+export declare const StyledDt: import("styled-components").StyledComponent<"dt", any, Pick<DlProps, "dtTextAlign" | "asSingleColumn">, never>;
+export declare const StyledDd: import("styled-components").StyledComponent<"dd", any, Pick<DlProps, "ddTextAlign" | "asSingleColumn">, never>;

package/esm/components/definition-list/definition-list.style.js

@@ -26,30 +26,22 @@ export const StyledDl = styled.dl`
 StyledDl.defaultProps = {
   theme: baseTheme
 };
-export const StyledDtDiv = styled.div`
+export const StyledDt = styled.dt`
   ${space}
+  font-size: var(--fontSizes100);
+  font-weight: 700;
+  color: var(--colorsUtilityYin090);
+  ${({
+  asSingleColumn
+}) => !asSingleColumn && css`
+      grid-column: 1;
+    `}
   ${({
   dtTextAlign
 }) => css`
     text-align: ${dtTextAlign};
   `}
 `;
-StyledDtDiv.defaultProps = {
-  theme: baseTheme
-};
-export const StyledDdDiv = styled.div`
-  ${({
-  ddTextAlign
-}) => css`
-    text-align: ${ddTextAlign};
-  `}
-`;
-export const StyledDt = styled.dt`
-  ${space}
-  font-size: var(--fontSizes100);
-  font-weight: 700;
-  color: var(--colorsUtilityYin090);
-`;
 StyledDt.defaultProps = {
   theme: baseTheme
 };
@@ -58,6 +50,16 @@ export const StyledDd = styled.dd`
   font-weight: var(--fontWeights400);
   color: var(--colorsUtilityYin065);
   margin-left: 0px;
+  ${({
+  asSingleColumn
+}) => !asSingleColumn && css`
+      grid-column: 2;
+    `}
+  ${({
+  ddTextAlign
+}) => css`
+    text-align: ${ddTextAlign};
+  `}
 
   ${StyledButton} {
     padding: 0;

package/esm/components/definition-list/dl.component.d.ts

@@ -1,11 +1,15 @@
 import React from "react";
 import { SpaceProps } from "styled-system";
-import { StyledDtDivProps, StyledDdDivProps, StyledDlProps } from "./definition-list.style";
-export interface DlProps extends SpaceProps, StyledDlProps, StyledDtDivProps, StyledDdDivProps {
+import { DlContextProps } from "./__internal__/dl.context";
+export interface DlProps extends SpaceProps, DlContextProps {
     /** HTML id attribute of the input */
     id?: string;
     /** prop to render children. */
     children: React.ReactNode;
+    /** This value will specify the width of the `StyledDtDiv` as a percentage. The remaining space will be taken up
+      by the `StyledDdDiv`. This prop has no effect when `asSingleColumn` is set.
+    */
+    w?: number;
 }
 declare const Dl: {
     ({ children, w, dtTextAlign, ddTextAlign, asSingleColumn, ...rest }: DlProps): React.JSX.Element;

package/esm/components/definition-list/dl.component.js

@@ -1,10 +1,7 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 import React from "react";
 import PropTypes from "prop-types";
-import { isElement, isFragment } from "react-is";
-import { StyledDl, StyledDtDiv, StyledDdDiv } from "./definition-list.style";
-import Dt from "./dt.component";
-import Dd from "./dd.component";
+import { StyledDl } from "./definition-list.style";
 import DlContext from "./__internal__/dl.context";
 const Dl = ({
   children,
@@ -13,54 +10,16 @@ const Dl = ({
   ddTextAlign = "left",
   asSingleColumn = false,
   ...rest
-}) => {
-  const dlComponent = [];
-  const listChildren = React.Children.toArray(children);
-  let key = "";
-  const composeDlComponent = childrenArray => {
-    let dtLabel;
-    let ddContent = [];
-    let isLastChild;
-    let nextItemIsNotDd;
-    childrenArray.forEach((child, index) => {
-      if (isFragment(child)) {
-        composeDlComponent(child.props.children);
-      } else {
-        if (isElement(child) && child.type === Dt) {
-          dtLabel = child;
-        }
-        if (isElement(child) && child.type === Dd) {
-          ddContent.push(child);
-        }
-        isLastChild = index === childrenArray.length - 1;
-        const originalKey = isElement(child) && child.props.key;
-        const nextItem = childrenArray[index + 1];
-        const isNextItemDt = isElement(nextItem) && nextItem.type === Dt;
-        nextItemIsNotDd = !isLastChild && (isNextItemDt || isFragment(nextItem));
-        if (dtLabel && (nextItemIsNotDd || isLastChild)) {
-          key = `${key + 1}`;
-          dlComponent.push( /*#__PURE__*/React.createElement(React.Fragment, {
-            key: originalKey || key
-          }, /*#__PURE__*/React.createElement(StyledDtDiv, {
-            dtTextAlign: dtTextAlign
-          }, dtLabel), /*#__PURE__*/React.createElement(StyledDdDiv, {
-            ddTextAlign: ddTextAlign
-          }, ddContent)));
-          ddContent = [];
-        }
-      }
-    });
-    return dlComponent;
-  };
-  return /*#__PURE__*/React.createElement(StyledDl, _extends({
-    w: w,
-    "data-component": "dl",
-    asSingleColumn: asSingleColumn
-  }, rest), /*#__PURE__*/React.createElement(DlContext.Provider, {
-    value: {
-      asSingleColumn
-    }
-  }, composeDlComponent(listChildren)));
-};
+}) => /*#__PURE__*/React.createElement(StyledDl, _extends({
+  w: w,
+  "data-component": "dl",
+  asSingleColumn: asSingleColumn
+}, rest), /*#__PURE__*/React.createElement(DlContext.Provider, {
+  value: {
+    asSingleColumn,
+    dtTextAlign,
+    ddTextAlign
+  }
+}, children));
 Dl.displayName = "Dl";
 export default Dl;

package/esm/components/definition-list/dt.component.js

@@ -8,7 +8,8 @@ const Dt = ({
   ...rest
 }) => {
   const {
-    asSingleColumn
+    asSingleColumn,
+    dtTextAlign
   } = useContext(DlContext);
   const {
     mb,
@@ -17,7 +18,9 @@ const Dt = ({
   return /*#__PURE__*/React.createElement(StyledDt, _extends({
     "data-element": "dt",
     mb: mb || asSingleColumn ? undefined : 2,
-    pr: pr || asSingleColumn ? undefined : 3
+    pr: pr || asSingleColumn ? undefined : 3,
+    dtTextAlign: dtTextAlign,
+    asSingleColumn: asSingleColumn
   }, rest), children);
 };
 Dt.displayName = "Dt";

package/esm/components/flat-table/__internal__/index.d.ts

@@ -1,2 +1,2 @@
-export { default as useCalculateStickyCells } from "./use-calculate-sticky-cells";
+export { default as useTableCell } from "./use-table-cell";
 export { default as buildPositionMap } from "./build-position-map";

package/esm/components/flat-table/__internal__/index.js

@@ -1,2 +1,2 @@
-export { default as useCalculateStickyCells } from "./use-calculate-sticky-cells";
+export { default as useTableCell } from "./use-table-cell";
 export { default as buildPositionMap } from "./build-position-map";

package/esm/components/flat-table/__internal__/{use-calculate-sticky-cells.d.ts → use-table-cell.d.ts}

@@ -8,5 +8,8 @@ declare const _default: (id: string) => {
     onKeyDown: ((ev: import("react").KeyboardEvent<HTMLElement>) => void) | undefined;
     isFirstCell: boolean;
     isExpandableCell: boolean | undefined;
+    tabIndex: number;
+    isInHighlightedRow: boolean | undefined;
+    isInSelectedRow: boolean | undefined;
 };
 export default _default;

package/esm/components/flat-table/__internal__/{use-calculate-sticky-cells.js → use-table-cell.js}

@@ -1,6 +1,11 @@
-import { useContext } from "react";
+import { useContext, useEffect, useState } from "react";
 import FlatTableRowContext from "../flat-table-row/__internal__/flat-table-row-context";
+import { FlatTableThemeContext } from "../flat-table.component";
 export default (id => {
+  const {
+    getTabStopElementId
+  } = useContext(FlatTableThemeContext);
+  const [tabIndex, setTabIndex] = useState(-1);
   const {
     expandable,
     firstCellId,
@@ -8,13 +13,23 @@ export default (id => {
     leftPositions,
     rightPositions,
     onClick,
-    onKeyDown
+    onKeyDown,
+    highlighted,
+    selected
   } = useContext(FlatTableRowContext);
   const leftPosition = leftPositions[id];
   const rightPosition = rightPositions[id];
   const makeCellSticky = leftPosition !== undefined || rightPosition !== undefined;
   const isFirstCell = id === firstCellId;
   const isExpandableCell = expandable && isFirstCell && firstColumnExpandable;
+  useEffect(() => {
+    const tabstopTimer = setTimeout(() => {
+      setTabIndex(isExpandableCell && getTabStopElementId() === id ? 0 : -1);
+    }, 0);
+    return () => {
+      clearTimeout(tabstopTimer);
+    };
+  }, [getTabStopElementId, isExpandableCell, id]);
   return {
     expandable,
     leftPosition,
@@ -23,6 +38,9 @@ export default (id => {
     onClick,
     onKeyDown,
     isFirstCell,
-    isExpandableCell
+    isExpandableCell,
+    tabIndex,
+    isInHighlightedRow: highlighted,
+    isInSelectedRow: selected
   };
 });

package/esm/components/flat-table/flat-table-cell/flat-table-cell.component.js

@@ -1,11 +1,10 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-import React, { useRef, useState, useEffect, useContext } from "react";
+import React, { useRef } from "react";
 import PropTypes from "prop-types";
 import { StyledFlatTableCell, StyledCellContent } from "./flat-table-cell.style";
 import Icon from "../../icon";
-import { FlatTableThemeContext } from "../flat-table.component";
 import guid from "../../../__internal__/utils/helpers/guid";
-import useCalculateStickyCells from "../__internal__/use-calculate-sticky-cells";
+import useTableCell from "../__internal__/use-table-cell";
 export const FlatTableCell = ({
   align = "left",
   children,
@@ -18,12 +17,7 @@ export const FlatTableCell = ({
   id,
   ...rest
 }) => {
-  const ref = useRef(null);
   const internalId = useRef(id || guid());
-  const [tabIndex, setTabIndex] = useState(-1);
-  const {
-    selectedId
-  } = useContext(FlatTableThemeContext);
   const {
     leftPosition,
     rightPosition,
@@ -32,17 +26,16 @@ export const FlatTableCell = ({
     onKeyDown,
     isFirstCell,
     isExpandableCell,
-    makeCellSticky
-  } = useCalculateStickyCells(internalId.current);
-  useEffect(() => {
-    setTabIndex(isExpandableCell && selectedId === internalId.current ? 0 : -1);
-  }, [selectedId, isExpandableCell]);
+    makeCellSticky,
+    isInHighlightedRow,
+    isInSelectedRow,
+    tabIndex
+  } = useTableCell(internalId.current);
   return /*#__PURE__*/React.createElement(StyledFlatTableCell, _extends({
     leftPosition: leftPosition,
     rightPosition: rightPosition,
     makeCellSticky: makeCellSticky,
     className: makeCellSticky ? "isSticky" : undefined,
-    ref: ref,
     align: align,
     "data-element": "flat-table-cell",
     pl: pl,
@@ -56,6 +49,9 @@ export const FlatTableCell = ({
     colSpan: Number(colspan)
   }, rowspan !== undefined && {
     rowSpan: Number(rowspan)
+  }, {
+    "data-selected": isInSelectedRow && isExpandableCell,
+    "data-highlighted": isInHighlightedRow && isExpandableCell
   }, rest, {
     id: internalId.current
   }), /*#__PURE__*/React.createElement(StyledCellContent, {

package/esm/components/flat-table/flat-table-header/flat-table-header.component.js

@@ -4,7 +4,7 @@ import PropTypes from "prop-types";
 import StyledFlatTableHeader from "./flat-table-header.style";
 import { FlatTableThemeContext } from "../flat-table.component";
 import guid from "../../../__internal__/utils/helpers/guid";
-import useCalculateStickyCells from "../__internal__/use-calculate-sticky-cells";
+import useTableCell from "../__internal__/use-table-cell";
 export const FlatTableHeader = ({
   align,
   children,
@@ -25,7 +25,7 @@ export const FlatTableHeader = ({
     leftPosition,
     rightPosition,
     makeCellSticky
-  } = useCalculateStickyCells(internalId.current);
+  } = useTableCell(internalId.current);
   return /*#__PURE__*/React.createElement(StyledFlatTableHeader, _extends({
     ref: ref,
     leftPosition: leftPosition,

package/esm/components/flat-table/flat-table-row/__internal__/flat-table-row-context.d.ts

@@ -7,6 +7,8 @@ export interface FlatTableRowContextProps {
     leftPositions: Record<string, number>;
     rightPositions: Record<string, number>;
     firstColumnExpandable?: boolean;
+    highlighted?: boolean;
+    selected?: boolean;
 }
 declare const _default: React.Context<FlatTableRowContextProps>;
 export default _default;

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

@@ -93,8 +93,7 @@ const FlatTableRow = /*#__PURE__*/React.forwardRef(({
   const {
     colorTheme,
     size,
-    setSelectedId,
-    selectedId
+    getTabStopElementId
   } = useContext(FlatTableThemeContext);
   const {
     isInSidebar
@@ -141,13 +140,8 @@ const FlatTableRow = /*#__PURE__*/React.forwardRef(({
     setIsExpanded(expanded);
   }, [expanded]);
   useEffect(() => {
-    if (highlighted || selected) {
-      setSelectedId(internalId.current);
-    }
-  }, [highlighted, selected, setSelectedId]);
-  useEffect(() => {
-    setTabIndex(selectedId === internalId.current ? 0 : -1);
-  }, [selectedId]);
+    setTabIndex(getTabStopElementId() === internalId.current ? 0 : -1);
+  }, [getTabStopElementId]);
   const {
     isSubRow,
     firstRowId,
@@ -183,7 +177,9 @@ const FlatTableRow = /*#__PURE__*/React.forwardRef(({
     horizontalBorderSize: horizontalBorderSize,
     draggable: draggable,
     totalChildren: cellsArray.length,
-    id: internalId.current
+    id: internalId.current,
+    "data-selected": selected && expandableArea === "wholeRow",
+    "data-highlighted": highlighted && expandableArea === "wholeRow"
   }, interactiveRowProps, rest), /*#__PURE__*/React.createElement(FlatTableRowContext.Provider, {
     value: {
       firstCellId,
@@ -192,7 +188,9 @@ const FlatTableRow = /*#__PURE__*/React.forwardRef(({
       rightPositions,
       firstColumnExpandable,
       onKeyDown: handleCellKeyDown,
-      onClick: () => toggleExpanded()
+      onClick: () => toggleExpanded(),
+      highlighted,
+      selected
     }
   }, children));
   const draggableComponent = () => /*#__PURE__*/React.createElement(FlatTableRowDraggable, {

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

@@ -1,12 +1,11 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-import React, { useCallback, useContext, useState, useRef, useEffect } from "react";
+import React, { useCallback, useRef } from "react";
 import PropTypes from "prop-types";
 import Icon from "../../icon";
 import { StyledFlatTableRowHeader, StyledFlatTableRowHeaderContent } from "./flat-table-row-header.style";
-import { FlatTableThemeContext } from "../flat-table.component";
 import guid from "../../../__internal__/utils/helpers/guid";
 import tagComponent from "../../../__internal__/utils/helpers/tags/tags";
-import useCalculateStickyCells from "../__internal__/use-calculate-sticky-cells";
+import useTableCell from "../__internal__/use-table-cell";
 export const FlatTableRowHeader = ({
   align = "left",
   children,
@@ -22,10 +21,6 @@ export const FlatTableRowHeader = ({
   ...rest
 }) => {
   const internalId = useRef(id || guid());
-  const [tabIndex, setTabIndex] = useState(-1);
-  const {
-    selectedId
-  } = useContext(FlatTableThemeContext);
   const {
     leftPosition,
     rightPosition,
@@ -33,11 +28,11 @@ export const FlatTableRowHeader = ({
     onClick,
     onKeyDown,
     isFirstCell,
-    isExpandableCell
-  } = useCalculateStickyCells(internalId.current);
-  useEffect(() => {
-    setTabIndex(isExpandableCell && selectedId === internalId.current ? 0 : -1);
-  }, [selectedId, isExpandableCell]);
+    isExpandableCell,
+    tabIndex,
+    isInHighlightedRow,
+    isInSelectedRow
+  } = useTableCell(internalId.current);
   const handleOnClick = useCallback(ev => {
     if (isExpandableCell && onClick) onClick(ev);
   }, [isExpandableCell, onClick]);
@@ -67,6 +62,9 @@ export const FlatTableRowHeader = ({
     colSpan: Number(colspan)
   }, rowspan !== undefined && {
     rowSpan: Number(rowspan)
+  }, {
+    "data-selected": isInSelectedRow && isExpandableCell,
+    "data-highlighted": isInHighlightedRow && isExpandableCell
   }, rest, {
     id: internalId.current
   }), /*#__PURE__*/React.createElement(StyledFlatTableRowHeaderContent, {

package/esm/components/flat-table/flat-table.component.d.ts

@@ -31,8 +31,7 @@ export interface FlatTableProps extends MarginProps {
     width?: string;
 }
 export interface FlatTableThemeContextProps extends Pick<FlatTableProps, "colorTheme" | "size"> {
-    selectedId?: string;
-    setSelectedId: (id: string) => void;
+    getTabStopElementId: () => string;
 }
 export declare const FlatTableThemeContext: React.Context<FlatTableThemeContextProps>;
 export declare const FlatTable: {

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

@@ -5,7 +5,7 @@ import { StyledFlatTableWrapper, StyledFlatTable, StyledFlatTableFooter, StyledT
 import { DrawerSidebarContext } from "../drawer";
 import Events from "../../__internal__/utils/helpers/events/events";
 export const FlatTableThemeContext = /*#__PURE__*/React.createContext({
-  setSelectedId: () => {}
+  getTabStopElementId: () => ""
 });
 const FOCUSABLE_ROW_AND_CELL_QUERY = "tbody tr[tabindex], tbody tr td[tabindex], tbody tr th[tabindex]";
 export const FlatTable = ({
@@ -31,7 +31,6 @@ export const FlatTable = ({
   const [hasHorizontalScrollbar, setHasHorizontalScrollbar] = useState(false);
   const [firstColRowSpanIndex, setFirstColRowSpanIndex] = useState(-1);
   const [lastColRowSpanIndex, setLastColRowSpanIndex] = useState(-1);
-  const [selectedId, setSelectedId] = useState("");
   const addDefaultHeight = !height && (hasStickyHead || hasStickyFooter);
   const tableStylingProps = {
     caption,
@@ -124,32 +123,14 @@ export const FlatTable = ({
       }
     }
   };
-  useLayoutEffect(() => {
-    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);
+  const getTabStopElementId = () => {
+    const focusableElements = Array.from(tableRef.current?.querySelectorAll(FOCUSABLE_ROW_AND_CELL_QUERY) || /* istanbul ignore next */[]);
 
-    /* istanbul ignore else */
-    if (wrapperRef.current) {
-      observer.observe(wrapperRef.current, {
-        subtree: true,
-        childList: true,
-        attributes: true
-      });
-    }
-    return () => observer.disconnect();
-  }, [selectedId]);
+    // if no other row is selected/ highlighted, we need to make the first row/ cell a tab stop
+    const focusableElement = focusableElements.find(el => el.getAttribute("data-selected") === "true" || el.getAttribute("data-highlighted") === "true") || focusableElements[0];
+    const currentlySelectedId = focusableElement?.getAttribute("id") || "";
+    return currentlySelectedId;
+  };
   return /*#__PURE__*/React.createElement(StyledFlatTableWrapper, _extends({
     ref: wrapperRef,
     "data-component": "flat-table-wrapper",
@@ -184,8 +165,7 @@ export const FlatTable = ({
     value: {
       colorTheme,
       size,
-      setSelectedId,
-      selectedId
+      getTabStopElementId
     }
   }, children))), footer && /*#__PURE__*/React.createElement(StyledFlatTableFooter, {
     hasStickyFooter: hasStickyFooter

package/lib/components/definition-list/__internal__/dl.context.d.ts

@@ -1,6 +1,12 @@
 import React from "react";
-interface DlContextProps {
+export declare type ElementAlignment = "left" | "center" | "right";
+export interface DlContextProps {
+    /** Render the DefinitionList as a single column */
     asSingleColumn?: boolean;
+    /** This string will specify the text align styling of the `<dt></dt>`. */
+    dtTextAlign?: ElementAlignment;
+    /** This string will specify the text align styling of the `<dd></dd>`. */
+    ddTextAlign?: ElementAlignment;
 }
 declare const _default: React.Context<DlContextProps>;
 export default _default;

package/lib/components/definition-list/dd.component.js

@@ -4,10 +4,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _definitionList = require("./definition-list.style");
+var _dl = _interopRequireDefault(require("./__internal__/dl.context"));
 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; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 const Dd = ({
   children,
@@ -16,7 +19,14 @@ const Dd = ({
   const {
     mb
   } = rest;
+  const {
+    asSingleColumn,
+    ddTextAlign
+  } = (0, _react.useContext)(_dl.default);
   return /*#__PURE__*/_react.default.createElement(_definitionList.StyledDd, _extends({
+    "data-element": "dd",
+    asSingleColumn: asSingleColumn,
+    ddTextAlign: ddTextAlign,
     mb: mb || 2
   }, rest), children);
 };

package/lib/components/definition-list/definition-list.style.d.ts

@@ -1,22 +1,4 @@
-export interface StyledDlProps {
-    /** Render the DefinitionList as a single column */
-    asSingleColumn?: boolean;
-    /** This value will specify the width of the `StyledDtDiv` as a percentage. The remaining space will be taken up
-        by the `StyledDdDiv`. This prop has no effect when `asSingleColumn` is set.
-     */
-    w?: number;
-}
-export declare type ElementAlignment = "left" | "center" | "right";
-export declare const StyledDl: import("styled-components").StyledComponent<"dl", any, StyledDlProps, never>;
-export interface StyledDtDivProps {
-    /** This string will specify the text align styling of the `<dt></dt>`. */
-    dtTextAlign?: ElementAlignment;
-}
-export declare const StyledDtDiv: import("styled-components").StyledComponent<"div", any, StyledDtDivProps, never>;
-export interface StyledDdDivProps {
-    /** This string will specify the text align styling of the `<dd></dd>`. */
-    ddTextAlign?: ElementAlignment;
-}
-export declare const StyledDdDiv: import("styled-components").StyledComponent<"div", any, StyledDdDivProps, never>;
-export declare const StyledDt: import("styled-components").StyledComponent<"dt", any, {}, never>;
-export declare const StyledDd: import("styled-components").StyledComponent<"dd", any, {}, never>;
+import { DlProps } from "./dl.component";
+export declare const StyledDl: import("styled-components").StyledComponent<"dl", any, Omit<DlProps, "dtTextAlign" | "ddTextAlign">, never>;
+export declare const StyledDt: import("styled-components").StyledComponent<"dt", any, Pick<DlProps, "dtTextAlign" | "asSingleColumn">, never>;
+export declare const StyledDd: import("styled-components").StyledComponent<"dd", any, Pick<DlProps, "ddTextAlign" | "asSingleColumn">, never>;

package/lib/components/definition-list/definition-list.style.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StyledDtDiv = exports.StyledDt = exports.StyledDl = exports.StyledDdDiv = exports.StyledDd = void 0;
+exports.StyledDt = exports.StyledDl = exports.StyledDd = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _styledSystem = require("styled-system");
 var _button = _interopRequireDefault(require("../button/button.style"));
@@ -36,32 +36,22 @@ exports.StyledDl = StyledDl;
 StyledDl.defaultProps = {
   theme: _themes.baseTheme
 };
-const StyledDtDiv = _styledComponents.default.div`
+const StyledDt = _styledComponents.default.dt`
   ${_styledSystem.space}
+  font-size: var(--fontSizes100);
+  font-weight: 700;
+  color: var(--colorsUtilityYin090);
+  ${({
+  asSingleColumn
+}) => !asSingleColumn && (0, _styledComponents.css)`
+      grid-column: 1;
+    `}
   ${({
   dtTextAlign
 }) => (0, _styledComponents.css)`
     text-align: ${dtTextAlign};
   `}
 `;
-exports.StyledDtDiv = StyledDtDiv;
-StyledDtDiv.defaultProps = {
-  theme: _themes.baseTheme
-};
-const StyledDdDiv = _styledComponents.default.div`
-  ${({
-  ddTextAlign
-}) => (0, _styledComponents.css)`
-    text-align: ${ddTextAlign};
-  `}
-`;
-exports.StyledDdDiv = StyledDdDiv;
-const StyledDt = _styledComponents.default.dt`
-  ${_styledSystem.space}
-  font-size: var(--fontSizes100);
-  font-weight: 700;
-  color: var(--colorsUtilityYin090);
-`;
 exports.StyledDt = StyledDt;
 StyledDt.defaultProps = {
   theme: _themes.baseTheme
@@ -71,6 +61,16 @@ const StyledDd = _styledComponents.default.dd`
   font-weight: var(--fontWeights400);
   color: var(--colorsUtilityYin065);
   margin-left: 0px;
+  ${({
+  asSingleColumn
+}) => !asSingleColumn && (0, _styledComponents.css)`
+      grid-column: 2;
+    `}
+  ${({
+  ddTextAlign
+}) => (0, _styledComponents.css)`
+    text-align: ${ddTextAlign};
+  `}
 
   ${_button.default} {
     padding: 0;

package/lib/components/definition-list/dl.component.d.ts

@@ -1,11 +1,15 @@
 import React from "react";
 import { SpaceProps } from "styled-system";
-import { StyledDtDivProps, StyledDdDivProps, StyledDlProps } from "./definition-list.style";
-export interface DlProps extends SpaceProps, StyledDlProps, StyledDtDivProps, StyledDdDivProps {
+import { DlContextProps } from "./__internal__/dl.context";
+export interface DlProps extends SpaceProps, DlContextProps {
     /** HTML id attribute of the input */
     id?: string;
     /** prop to render children. */
     children: React.ReactNode;
+    /** This value will specify the width of the `StyledDtDiv` as a percentage. The remaining space will be taken up
+      by the `StyledDdDiv`. This prop has no effect when `asSingleColumn` is set.
+    */
+    w?: number;
 }
 declare const Dl: {
     ({ children, w, dtTextAlign, ddTextAlign, asSingleColumn, ...rest }: DlProps): React.JSX.Element;

package/lib/components/definition-list/dl.component.js

@@ -6,10 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _reactIs = require("react-is");
 var _definitionList = require("./definition-list.style");
-var _dt = _interopRequireDefault(require("./dt.component"));
-var _dd = _interopRequireDefault(require("./dd.component"));
 var _dl = _interopRequireDefault(require("./__internal__/dl.context"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
@@ -20,55 +17,17 @@ const Dl = ({
   ddTextAlign = "left",
   asSingleColumn = false,
   ...rest
-}) => {
-  const dlComponent = [];
-  const listChildren = _react.default.Children.toArray(children);
-  let key = "";
-  const composeDlComponent = childrenArray => {
-    let dtLabel;
-    let ddContent = [];
-    let isLastChild;
-    let nextItemIsNotDd;
-    childrenArray.forEach((child, index) => {
-      if ((0, _reactIs.isFragment)(child)) {
-        composeDlComponent(child.props.children);
-      } else {
-        if ((0, _reactIs.isElement)(child) && child.type === _dt.default) {
-          dtLabel = child;
-        }
-        if ((0, _reactIs.isElement)(child) && child.type === _dd.default) {
-          ddContent.push(child);
-        }
-        isLastChild = index === childrenArray.length - 1;
-        const originalKey = (0, _reactIs.isElement)(child) && child.props.key;
-        const nextItem = childrenArray[index + 1];
-        const isNextItemDt = (0, _reactIs.isElement)(nextItem) && nextItem.type === _dt.default;
-        nextItemIsNotDd = !isLastChild && (isNextItemDt || (0, _reactIs.isFragment)(nextItem));
-        if (dtLabel && (nextItemIsNotDd || isLastChild)) {
-          key = `${key + 1}`;
-          dlComponent.push( /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
-            key: originalKey || key
-          }, /*#__PURE__*/_react.default.createElement(_definitionList.StyledDtDiv, {
-            dtTextAlign: dtTextAlign
-          }, dtLabel), /*#__PURE__*/_react.default.createElement(_definitionList.StyledDdDiv, {
-            ddTextAlign: ddTextAlign
-          }, ddContent)));
-          ddContent = [];
-        }
-      }
-    });
-    return dlComponent;
-  };
-  return /*#__PURE__*/_react.default.createElement(_definitionList.StyledDl, _extends({
-    w: w,
-    "data-component": "dl",
-    asSingleColumn: asSingleColumn
-  }, rest), /*#__PURE__*/_react.default.createElement(_dl.default.Provider, {
-    value: {
-      asSingleColumn
-    }
-  }, composeDlComponent(listChildren)));
-};
+}) => /*#__PURE__*/_react.default.createElement(_definitionList.StyledDl, _extends({
+  w: w,
+  "data-component": "dl",
+  asSingleColumn: asSingleColumn
+}, rest), /*#__PURE__*/_react.default.createElement(_dl.default.Provider, {
+  value: {
+    asSingleColumn,
+    dtTextAlign,
+    ddTextAlign
+  }
+}, children));
 Dl.displayName = "Dl";
 var _default = Dl;
 exports.default = _default;

package/lib/components/definition-list/dt.component.js

@@ -17,7 +17,8 @@ const Dt = ({
   ...rest
 }) => {
   const {
-    asSingleColumn
+    asSingleColumn,
+    dtTextAlign
   } = (0, _react.useContext)(_dl.default);
   const {
     mb,
@@ -26,7 +27,9 @@ const Dt = ({
   return /*#__PURE__*/_react.default.createElement(_definitionList.StyledDt, _extends({
     "data-element": "dt",
     mb: mb || asSingleColumn ? undefined : 2,
-    pr: pr || asSingleColumn ? undefined : 3
+    pr: pr || asSingleColumn ? undefined : 3,
+    dtTextAlign: dtTextAlign,
+    asSingleColumn: asSingleColumn
   }, rest), children);
 };
 Dt.displayName = "Dt";

package/lib/components/flat-table/__internal__/index.d.ts

@@ -1,2 +1,2 @@
-export { default as useCalculateStickyCells } from "./use-calculate-sticky-cells";
+export { default as useTableCell } from "./use-table-cell";
 export { default as buildPositionMap } from "./build-position-map";

package/lib/components/flat-table/__internal__/index.js

@@ -9,12 +9,12 @@ Object.defineProperty(exports, "buildPositionMap", {
     return _buildPositionMap.default;
   }
 });
-Object.defineProperty(exports, "useCalculateStickyCells", {
+Object.defineProperty(exports, "useTableCell", {
   enumerable: true,
   get: function () {
-    return _useCalculateStickyCells.default;
+    return _useTableCell.default;
   }
 });
-var _useCalculateStickyCells = _interopRequireDefault(require("./use-calculate-sticky-cells"));
+var _useTableCell = _interopRequireDefault(require("./use-table-cell"));
 var _buildPositionMap = _interopRequireDefault(require("./build-position-map"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/components/flat-table/__internal__/{use-calculate-sticky-cells.d.ts → use-table-cell.d.ts}

@@ -8,5 +8,8 @@ declare const _default: (id: string) => {
     onKeyDown: ((ev: import("react").KeyboardEvent<HTMLElement>) => void) | undefined;
     isFirstCell: boolean;
     isExpandableCell: boolean | undefined;
+    tabIndex: number;
+    isInHighlightedRow: boolean | undefined;
+    isInSelectedRow: boolean | undefined;
 };
 export default _default;

package/lib/components/flat-table/__internal__/{use-calculate-sticky-cells.js → use-table-cell.js}

@@ -6,8 +6,13 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = require("react");
 var _flatTableRowContext = _interopRequireDefault(require("../flat-table-row/__internal__/flat-table-row-context"));
+var _flatTable = require("../flat-table.component");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 var _default = id => {
+  const {
+    getTabStopElementId
+  } = (0, _react.useContext)(_flatTable.FlatTableThemeContext);
+  const [tabIndex, setTabIndex] = (0, _react.useState)(-1);
   const {
     expandable,
     firstCellId,
@@ -15,13 +20,23 @@ var _default = id => {
     leftPositions,
     rightPositions,
     onClick,
-    onKeyDown
+    onKeyDown,
+    highlighted,
+    selected
   } = (0, _react.useContext)(_flatTableRowContext.default);
   const leftPosition = leftPositions[id];
   const rightPosition = rightPositions[id];
   const makeCellSticky = leftPosition !== undefined || rightPosition !== undefined;
   const isFirstCell = id === firstCellId;
   const isExpandableCell = expandable && isFirstCell && firstColumnExpandable;
+  (0, _react.useEffect)(() => {
+    const tabstopTimer = setTimeout(() => {
+      setTabIndex(isExpandableCell && getTabStopElementId() === id ? 0 : -1);
+    }, 0);
+    return () => {
+      clearTimeout(tabstopTimer);
+    };
+  }, [getTabStopElementId, isExpandableCell, id]);
   return {
     expandable,
     leftPosition,
@@ -30,7 +45,10 @@ var _default = id => {
     onClick,
     onKeyDown,
     isFirstCell,
-    isExpandableCell
+    isExpandableCell,
+    tabIndex,
+    isInHighlightedRow: highlighted,
+    isInSelectedRow: selected
   };
 };
 exports.default = _default;

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

@@ -8,9 +8,8 @@ var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _flatTableCell = require("./flat-table-cell.style");
 var _icon = _interopRequireDefault(require("../../icon"));
-var _flatTable = require("../flat-table.component");
 var _guid = _interopRequireDefault(require("../../../__internal__/utils/helpers/guid"));
-var _useCalculateStickyCells = _interopRequireDefault(require("../__internal__/use-calculate-sticky-cells"));
+var _useTableCell = _interopRequireDefault(require("../__internal__/use-table-cell"));
 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; }
@@ -27,12 +26,7 @@ const FlatTableCell = ({
   id,
   ...rest
 }) => {
-  const ref = (0, _react.useRef)(null);
   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,
@@ -41,17 +35,16 @@ const FlatTableCell = ({
     onKeyDown,
     isFirstCell,
     isExpandableCell,
-    makeCellSticky
-  } = (0, _useCalculateStickyCells.default)(internalId.current);
-  (0, _react.useEffect)(() => {
-    setTabIndex(isExpandableCell && selectedId === internalId.current ? 0 : -1);
-  }, [selectedId, isExpandableCell]);
+    makeCellSticky,
+    isInHighlightedRow,
+    isInSelectedRow,
+    tabIndex
+  } = (0, _useTableCell.default)(internalId.current);
   return /*#__PURE__*/_react.default.createElement(_flatTableCell.StyledFlatTableCell, _extends({
     leftPosition: leftPosition,
     rightPosition: rightPosition,
     makeCellSticky: makeCellSticky,
     className: makeCellSticky ? "isSticky" : undefined,
-    ref: ref,
     align: align,
     "data-element": "flat-table-cell",
     pl: pl,
@@ -65,6 +58,9 @@ const FlatTableCell = ({
     colSpan: Number(colspan)
   }, rowspan !== undefined && {
     rowSpan: Number(rowspan)
+  }, {
+    "data-selected": isInSelectedRow && isExpandableCell,
+    "data-highlighted": isInHighlightedRow && isExpandableCell
   }, rest, {
     id: internalId.current
   }), /*#__PURE__*/_react.default.createElement(_flatTableCell.StyledCellContent, {

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

@@ -9,7 +9,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _flatTableHeader = _interopRequireDefault(require("./flat-table-header.style"));
 var _flatTable = require("../flat-table.component");
 var _guid = _interopRequireDefault(require("../../../__internal__/utils/helpers/guid"));
-var _useCalculateStickyCells = _interopRequireDefault(require("../__internal__/use-calculate-sticky-cells"));
+var _useTableCell = _interopRequireDefault(require("../__internal__/use-table-cell"));
 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; }
@@ -34,7 +34,7 @@ const FlatTableHeader = ({
     leftPosition,
     rightPosition,
     makeCellSticky
-  } = (0, _useCalculateStickyCells.default)(internalId.current);
+  } = (0, _useTableCell.default)(internalId.current);
   return /*#__PURE__*/_react.default.createElement(_flatTableHeader.default, _extends({
     ref: ref,
     leftPosition: leftPosition,

package/lib/components/flat-table/flat-table-row/__internal__/flat-table-row-context.d.ts

@@ -7,6 +7,8 @@ export interface FlatTableRowContextProps {
     leftPositions: Record<string, number>;
     rightPositions: Record<string, number>;
     firstColumnExpandable?: boolean;
+    highlighted?: boolean;
+    selected?: boolean;
 }
 declare const _default: React.Context<FlatTableRowContextProps>;
 export default _default;

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

@@ -102,8 +102,7 @@ const FlatTableRow = /*#__PURE__*/_react.default.forwardRef(({
   const {
     colorTheme,
     size,
-    setSelectedId,
-    selectedId
+    getTabStopElementId
   } = (0, _react.useContext)(_flatTable.FlatTableThemeContext);
   const {
     isInSidebar
@@ -150,13 +149,8 @@ const FlatTableRow = /*#__PURE__*/_react.default.forwardRef(({
     setIsExpanded(expanded);
   }, [expanded]);
   (0, _react.useEffect)(() => {
-    if (highlighted || selected) {
-      setSelectedId(internalId.current);
-    }
-  }, [highlighted, selected, setSelectedId]);
-  (0, _react.useEffect)(() => {
-    setTabIndex(selectedId === internalId.current ? 0 : -1);
-  }, [selectedId]);
+    setTabIndex(getTabStopElementId() === internalId.current ? 0 : -1);
+  }, [getTabStopElementId]);
   const {
     isSubRow,
     firstRowId,
@@ -192,7 +186,9 @@ const FlatTableRow = /*#__PURE__*/_react.default.forwardRef(({
     horizontalBorderSize: horizontalBorderSize,
     draggable: draggable,
     totalChildren: cellsArray.length,
-    id: internalId.current
+    id: internalId.current,
+    "data-selected": selected && expandableArea === "wholeRow",
+    "data-highlighted": highlighted && expandableArea === "wholeRow"
   }, interactiveRowProps, rest), /*#__PURE__*/_react.default.createElement(_flatTableRowContext.default.Provider, {
     value: {
       firstCellId,
@@ -201,7 +197,9 @@ const FlatTableRow = /*#__PURE__*/_react.default.forwardRef(({
       rightPositions,
       firstColumnExpandable,
       onKeyDown: handleCellKeyDown,
-      onClick: () => toggleExpanded()
+      onClick: () => toggleExpanded(),
+      highlighted,
+      selected
     }
   }, children));
   const draggableComponent = () => /*#__PURE__*/_react.default.createElement(_flatTableRowDraggable.default, {

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

@@ -8,10 +8,9 @@ var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 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"));
+var _useTableCell = _interopRequireDefault(require("../__internal__/use-table-cell"));
 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; }
@@ -31,10 +30,6 @@ const FlatTableRowHeader = ({
   ...rest
 }) => {
   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,
@@ -42,11 +37,11 @@ const FlatTableRowHeader = ({
     onClick,
     onKeyDown,
     isFirstCell,
-    isExpandableCell
-  } = (0, _useCalculateStickyCells.default)(internalId.current);
-  (0, _react.useEffect)(() => {
-    setTabIndex(isExpandableCell && selectedId === internalId.current ? 0 : -1);
-  }, [selectedId, isExpandableCell]);
+    isExpandableCell,
+    tabIndex,
+    isInHighlightedRow,
+    isInSelectedRow
+  } = (0, _useTableCell.default)(internalId.current);
   const handleOnClick = (0, _react.useCallback)(ev => {
     if (isExpandableCell && onClick) onClick(ev);
   }, [isExpandableCell, onClick]);
@@ -76,6 +71,9 @@ const FlatTableRowHeader = ({
     colSpan: Number(colspan)
   }, rowspan !== undefined && {
     rowSpan: Number(rowspan)
+  }, {
+    "data-selected": isInSelectedRow && isExpandableCell,
+    "data-highlighted": isInHighlightedRow && isExpandableCell
   }, rest, {
     id: internalId.current
   }), /*#__PURE__*/_react.default.createElement(_flatTableRowHeader.StyledFlatTableRowHeaderContent, {

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

@@ -31,8 +31,7 @@ export interface FlatTableProps extends MarginProps {
     width?: string;
 }
 export interface FlatTableThemeContextProps extends Pick<FlatTableProps, "colorTheme" | "size"> {
-    selectedId?: string;
-    setSelectedId: (id: string) => void;
+    getTabStopElementId: () => string;
 }
 export declare const FlatTableThemeContext: React.Context<FlatTableThemeContextProps>;
 export declare const FlatTable: {

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

@@ -14,7 +14,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 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; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 const FlatTableThemeContext = /*#__PURE__*/_react.default.createContext({
-  setSelectedId: () => {}
+  getTabStopElementId: () => ""
 });
 exports.FlatTableThemeContext = FlatTableThemeContext;
 const FOCUSABLE_ROW_AND_CELL_QUERY = "tbody tr[tabindex], tbody tr td[tabindex], tbody tr th[tabindex]";
@@ -41,7 +41,6 @@ const FlatTable = ({
   const [hasHorizontalScrollbar, setHasHorizontalScrollbar] = (0, _react.useState)(false);
   const [firstColRowSpanIndex, setFirstColRowSpanIndex] = (0, _react.useState)(-1);
   const [lastColRowSpanIndex, setLastColRowSpanIndex] = (0, _react.useState)(-1);
-  const [selectedId, setSelectedId] = (0, _react.useState)("");
   const addDefaultHeight = !height && (hasStickyHead || hasStickyFooter);
   const tableStylingProps = {
     caption,
@@ -134,32 +133,14 @@ const FlatTable = ({
       }
     }
   };
-  (0, _react.useLayoutEffect)(() => {
-    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);
+  const getTabStopElementId = () => {
+    const focusableElements = Array.from(tableRef.current?.querySelectorAll(FOCUSABLE_ROW_AND_CELL_QUERY) || /* istanbul ignore next */[]);
 
-    /* istanbul ignore else */
-    if (wrapperRef.current) {
-      observer.observe(wrapperRef.current, {
-        subtree: true,
-        childList: true,
-        attributes: true
-      });
-    }
-    return () => observer.disconnect();
-  }, [selectedId]);
+    // if no other row is selected/ highlighted, we need to make the first row/ cell a tab stop
+    const focusableElement = focusableElements.find(el => el.getAttribute("data-selected") === "true" || el.getAttribute("data-highlighted") === "true") || focusableElements[0];
+    const currentlySelectedId = focusableElement?.getAttribute("id") || "";
+    return currentlySelectedId;
+  };
   return /*#__PURE__*/_react.default.createElement(_flatTable.StyledFlatTableWrapper, _extends({
     ref: wrapperRef,
     "data-component": "flat-table-wrapper",
@@ -194,8 +175,7 @@ const FlatTable = ({
     value: {
       colorTheme,
       size,
-      setSelectedId,
-      selectedId
+      getTabStopElementId
     }
   }, children))), footer && /*#__PURE__*/_react.default.createElement(_flatTable.StyledFlatTableFooter, {
     hasStickyFooter: hasStickyFooter

package/package.json

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