carbon-react 120.0.0 → 120.1.0

package/lib/components/flat-table/__internal__/use-calculate-sticky-cells.js

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _flatTableRowContext = _interopRequireDefault(require("../flat-table-row/__internal__/flat-table-row-context"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _default = id => {
+  const {
+    expandable,
+    firstCellId,
+    firstColumnExpandable,
+    leftPositions,
+    rightPositions,
+    onClick,
+    onKeyDown
+  } = (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;
+  return {
+    expandable,
+    leftPosition,
+    rightPosition,
+    makeCellSticky,
+    onClick,
+    onKeyDown,
+    isFirstCell,
+    isExpandableCell
+  };
+};
+exports.default = _default;

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

@@ -20,50 +20,11 @@ export interface FlatTableCellProps extends PaddingProps {
     verticalBorder?: TableBorderSize;
     /** Sets the color of the right border */
     verticalBorderColor?: 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?: () => void;
-    /**
-     * @private
-     * @ignore
-     */
-    onKeyDown?: () => 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 FlatTableCell: {
-    ({ align, children, pl, expandable, onClick, onKeyDown, reportCellWidth, cellIndex, leftPosition, rightPosition, width, truncate, title, colspan, rowspan, ...rest }: FlatTableCellProps): React.JSX.Element;
+    ({ align, children, pl, width, truncate, title, colspan, rowspan, id, ...rest }: FlatTableCellProps): React.JSX.Element;
     displayName: string;
 };
 export default FlatTableCell;

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

@@ -10,6 +10,7 @@ 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"));
 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; }
@@ -18,58 +19,58 @@ const FlatTableCell = ({
   align = "left",
   children,
   pl,
-  expandable = false,
-  onClick,
-  onKeyDown,
-  reportCellWidth,
-  cellIndex,
-  leftPosition,
-  rightPosition,
   width,
   truncate = false,
   title,
   colspan,
   rowspan,
+  id,
   ...rest
 }) => {
   const ref = (0, _react.useRef)(null);
-  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);
-  (0, _react.useLayoutEffect)(() => {
-    if (ref.current && reportCellWidth) {
-      reportCellWidth(ref.current.offsetWidth, cellIndex);
-    }
-  }, [reportCellWidth, cellIndex]);
+  const {
+    leftPosition,
+    rightPosition,
+    expandable,
+    onClick,
+    onKeyDown,
+    isFirstCell,
+    isExpandableCell,
+    makeCellSticky
+  } = (0, _useCalculateStickyCells.default)(internalId.current);
   (0, _react.useEffect)(() => {
-    setTabIndex(selectedId === id.current ? 0 : -1);
-  }, [selectedId]);
+    setTabIndex(isExpandableCell && selectedId === internalId.current ? 0 : -1);
+  }, [selectedId, isExpandableCell]);
   return /*#__PURE__*/_react.default.createElement(_flatTableCell.StyledFlatTableCell, _extends({
     leftPosition: leftPosition,
     rightPosition: rightPosition,
-    makeCellSticky: !!reportCellWidth,
-    className: reportCellWidth ? "isSticky" : undefined,
+    makeCellSticky: makeCellSticky,
+    className: makeCellSticky ? "isSticky" : undefined,
     ref: ref,
     align: align,
     "data-element": "flat-table-cell",
     pl: pl,
-    onClick: expandable && onClick ? onClick : undefined,
-    tabIndex: expandable && onClick ? tabIndex : undefined,
-    onKeyDown: expandable && onKeyDown ? onKeyDown : undefined,
+    onClick: isExpandableCell ? onClick : undefined,
+    tabIndex: isExpandableCell ? tabIndex : undefined,
+    onKeyDown: isExpandableCell ? onKeyDown : undefined,
     colWidth: width,
     isTruncated: truncate,
-    expandable: expandable,
-    id: id.current
+    expandable: expandable
   }, colspan !== undefined && {
     colSpan: Number(colspan)
   }, rowspan !== undefined && {
     rowSpan: Number(rowspan)
-  }, rest), /*#__PURE__*/_react.default.createElement(_flatTableCell.StyledCellContent, {
+  }, rest, {
+    id: internalId.current
+  }), /*#__PURE__*/_react.default.createElement(_flatTableCell.StyledCellContent, {
     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-cell/flat-table-cell.style.d.ts

@@ -1,10 +1,15 @@
 import { PaddingProps } from "styled-system";
 import { FlatTableCellProps } from "./flat-table-cell.component";
-interface StyledFlatTableCellProps extends Pick<FlatTableCellProps, "align" | "leftPosition" | "rightPosition" | "expandable" | "verticalBorder" | "verticalBorderColor">, PaddingProps {
+interface StyledFlatTableCellProps extends Pick<FlatTableCellProps, "align" | "verticalBorder" | "verticalBorderColor">, PaddingProps {
     makeCellSticky: boolean;
     colWidth?: number;
     isTruncated: boolean;
+    leftPosition: number;
+    rightPosition: number;
+    expandable?: boolean;
 }
 declare const StyledFlatTableCell: import("styled-components").StyledComponent<"td", any, StyledFlatTableCellProps, never>;
-declare const StyledCellContent: import("styled-components").StyledComponent<"div", any, Pick<FlatTableCellProps, "expandable">, never>;
+declare const StyledCellContent: import("styled-components").StyledComponent<"div", any, {
+    expandable?: boolean | undefined;
+}, never>;
 export { StyledFlatTableCell, StyledCellContent };

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

@@ -13,33 +13,11 @@ export interface FlatTableCheckboxProps extends TagProps {
     onClick?: (ev: React.MouseEvent<HTMLElement>) => void;
     /** The id of the element that labels the input */
     ariaLabelledBy?: string;
-    /**
-     * @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;
+    /** Sets an id string on the element */
+    id?: string;
 }
 export declare const FlatTableCheckbox: {
-    ({ as, checked, onChange, selectable, onClick, leftPosition, rightPosition, cellIndex, reportCellWidth, ariaLabelledBy, ...rest }: FlatTableCheckboxProps): React.JSX.Element;
+    ({ as, checked, onChange, selectable, onClick, ariaLabelledBy, id, ...rest }: FlatTableCheckboxProps): React.JSX.Element;
     displayName: string;
 };
 export default FlatTableCheckbox;

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

@@ -9,6 +9,9 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _flatTableCheckbox = _interopRequireDefault(require("./flat-table-checkbox.style"));
 var _checkbox = require("../../checkbox");
 var _events = _interopRequireDefault(require("../../../__internal__/utils/helpers/events/events"));
+var _tags = _interopRequireDefault(require("../../../__internal__/utils/helpers/tags"));
+var _guid = _interopRequireDefault(require("../../../__internal__/utils/helpers/guid"));
+var _flatTableRowContext = _interopRequireDefault(require("../flat-table-row/__internal__/flat-table-row-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; }
@@ -19,19 +22,19 @@ const FlatTableCheckbox = ({
   onChange,
   selectable = true,
   onClick,
-  leftPosition,
-  rightPosition,
-  cellIndex,
-  reportCellWidth,
   ariaLabelledBy,
+  id,
   ...rest
 }) => {
   const ref = (0, _react.useRef)(null);
-  (0, _react.useLayoutEffect)(() => {
-    if (ref.current && reportCellWidth) {
-      reportCellWidth(ref.current.offsetWidth, cellIndex);
-    }
-  }, [reportCellWidth, cellIndex]);
+  const internalId = (0, _react.useRef)(id || (0, _guid.default)());
+  const {
+    leftPositions,
+    rightPositions
+  } = (0, _react.useContext)(_flatTableRowContext.default);
+  const leftPosition = leftPositions[internalId.current];
+  const rightPosition = rightPositions[internalId.current];
+  const makeCellSticky = leftPosition !== undefined || rightPosition !== undefined;
   const dataElement = `flat-table-checkbox-${as === "td" ? "cell" : "header"}`;
   const handleClick = event => {
     event.stopPropagation();
@@ -44,13 +47,17 @@ const FlatTableCheckbox = ({
   };
   return /*#__PURE__*/_react.default.createElement(_flatTableCheckbox.default, _extends({
     ref: ref,
-    makeCellSticky: !!reportCellWidth,
-    className: reportCellWidth ? "isSticky" : undefined,
+    makeCellSticky: makeCellSticky,
+    className: makeCellSticky ? "isSticky" : undefined,
     leftPosition: leftPosition,
     rightPosition: rightPosition,
-    "data-element": dataElement,
     as: as
-  }, rest), selectable && /*#__PURE__*/_react.default.createElement(_checkbox.Checkbox, {
+  }, (0, _tags.default)("flat-table-checkbox", {
+    "data-element": dataElement,
+    ...rest
+  }), {
+    id: internalId.current
+  }), selectable && /*#__PURE__*/_react.default.createElement(_checkbox.Checkbox, {
     checked: checked,
     onChange: onChange,
     name: "flat-table-checkbox",

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

@@ -1,6 +1,8 @@
 import { FlatTableCheckboxProps } from "./flat-table-checkbox.component";
-interface StyledFlatTableCheckboxProps extends Pick<FlatTableCheckboxProps, "as" | "leftPosition" | "rightPosition"> {
+interface StyledFlatTableCheckboxProps extends Pick<FlatTableCheckboxProps, "as"> {
     makeCellSticky: boolean;
+    leftPosition: number;
+    rightPosition: number;
 }
 declare const StyledFlatTableCheckbox: import("styled-components").StyledComponent<"td", any, StyledFlatTableCheckboxProps, never>;
 export default StyledFlatTableCheckbox;

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

@@ -3,5 +3,9 @@ export interface FlatTableHeadProps {
     /** Array of FlatTableRow. */
     children: React.ReactNode;
 }
+interface FlatTableHeadContextProps {
+    stickyOffsets: Record<string, number>;
+}
+export declare const FlatTableHeadContext: React.Context<FlatTableHeadContextProps>;
 export declare const FlatTableHead: ({ children, ...rest }: FlatTableHeadProps) => React.JSX.Element;
 export default FlatTableHead;

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

@@ -3,44 +3,42 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.FlatTableHead = void 0;
+exports.default = exports.FlatTableHeadContext = exports.FlatTableHead = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _flatTableHead = _interopRequireDefault(require("./flat-table-head.style"));
-var _flatTableRowHeader = _interopRequireDefault(require("../flat-table-row-header"));
+var _internal__ = require("../__internal__");
 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; }
-const getRefs = length => Array.from({
-  length
-}, () => /*#__PURE__*/_react.default.createRef());
+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 FlatTableHeadContext = /*#__PURE__*/_react.default.createContext({
+  stickyOffsets: {}
+});
+exports.FlatTableHeadContext = FlatTableHeadContext;
 const FlatTableHead = ({
   children,
   ...rest
 }) => {
-  const [rowHeights, setRowHeights] = (0, _react.useState)([]);
-  const refs = (0, _react.useRef)(getRefs(_react.default.Children.count(children)));
-  let hasFlatTableRowHeader;
+  const ref = (0, _react.useRef)(null);
+  const [stickyOffsets, setStickyOffsets] = (0, _react.useState)({});
   (0, _react.useEffect)(() => {
-    if (_react.default.Children.count(children) > 1) {
-      setRowHeights(refs.current.map(ref => ref.current?.clientHeight || 0));
+    const headerRows = ref.current?.querySelectorAll("tr");
+
+    /* istanbul ignore else */
+    if (headerRows) {
+      setStickyOffsets((0, _internal__.buildPositionMap)(Array.from(headerRows), "offsetHeight"));
+    } else {
+      setStickyOffsets({});
     }
   }, [children]);
-  if (_react.default.Children.count(children) === 1) {
-    return /*#__PURE__*/_react.default.createElement(_flatTableHead.default, rest, children);
-  }
-  return /*#__PURE__*/_react.default.createElement(_flatTableHead.default, rest, _react.default.Children.map(children, (child, index) => {
-    /* Applies left border if preceding row has a FlatTableRowHeader and current one does not. 
-       This is only needed when the preceding row has rowSpans applied, 
-       as in any other use case the rows will all have FlatTableRowHeaders */
-    const previousRowHasHeader = !!hasFlatTableRowHeader;
-    hasFlatTableRowHeader = /*#__PURE__*/_react.default.isValidElement(child) && !!_react.default.Children.toArray(child.props.children).find(c => /*#__PURE__*/_react.default.isValidElement(c) && c.type.displayName === _flatTableRowHeader.default.displayName);
-    return /*#__PURE__*/_react.default.isValidElement(child) && /*#__PURE__*/_react.default.cloneElement(child, {
-      stickyOffset: rowHeights.slice(0, index).reduce((a, b) => a + b, 0),
-      ref: refs.current[index],
-      applyBorderLeft: previousRowHasHeader && !hasFlatTableRowHeader
-    });
-  }));
+  return /*#__PURE__*/_react.default.createElement(_flatTableHead.default, _extends({
+    ref: ref
+  }, rest), /*#__PURE__*/_react.default.createElement(FlatTableHeadContext.Provider, {
+    value: {
+      stickyOffsets
+    }
+  }, children));
 };
 exports.FlatTableHead = FlatTableHead;
 var _default = FlatTableHead;

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

@@ -18,35 +18,11 @@ export interface FlatTableHeaderProps extends PaddingProps {
     verticalBorderColor?: string;
     /** Column width, pass a number to set a fixed width in pixels */
     width?: number;
-    /** Sets an id string on the DOM element */
+    /** Sets an id string on the element */
     id?: string;
-    /**
-     * @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 FlatTableHeader: {
-    ({ align, children, colspan, rowspan, width, py, px, reportCellWidth, cellIndex, leftPosition, rightPosition, ...rest }: FlatTableHeaderProps): React.JSX.Element;
+    ({ align, children, colspan, rowspan, width, py, px, id, ...rest }: FlatTableHeaderProps): React.JSX.Element;
     defaultProps: {
         align: string;
     };

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

@@ -8,6 +8,8 @@ var _react = _interopRequireWildcard(require("react"));
 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"));
 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,27 +22,25 @@ const FlatTableHeader = ({
   width,
   py,
   px,
-  reportCellWidth,
-  cellIndex,
-  leftPosition,
-  rightPosition,
+  id,
   ...rest
 }) => {
   const ref = (0, _react.useRef)(null);
+  const internalId = (0, _react.useRef)(id || (0, _guid.default)());
   const {
     colorTheme
   } = (0, _react.useContext)(_flatTable.FlatTableThemeContext);
-  (0, _react.useLayoutEffect)(() => {
-    if (ref.current && reportCellWidth) {
-      reportCellWidth(ref.current.offsetWidth, cellIndex);
-    }
-  }, [reportCellWidth, cellIndex]);
+  const {
+    leftPosition,
+    rightPosition,
+    makeCellSticky
+  } = (0, _useCalculateStickyCells.default)(internalId.current);
   return /*#__PURE__*/_react.default.createElement(_flatTableHeader.default, _extends({
     ref: ref,
     leftPosition: leftPosition,
     rightPosition: rightPosition,
-    makeCellSticky: !!reportCellWidth,
-    className: reportCellWidth ? "isSticky" : undefined,
+    makeCellSticky: makeCellSticky,
+    className: makeCellSticky ? "isSticky" : undefined,
     align: align,
     colorTheme: colorTheme,
     "data-element": "flat-table-header"
@@ -52,7 +52,9 @@ const FlatTableHeader = ({
     colWidth: width,
     py: py,
     px: px
-  }, rest), /*#__PURE__*/_react.default.createElement("div", null, children));
+  }, rest, {
+    id: internalId.current
+  }), /*#__PURE__*/_react.default.createElement("div", null, children));
 };
 exports.FlatTableHeader = FlatTableHeader;
 FlatTableHeader.defaultProps = {

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

@@ -1,10 +1,12 @@
 import { PaddingProps } from "styled-system";
 import { FlatTableHeaderProps } from "./flat-table-header.component";
 import { FlatTableProps } from "..";
-interface StyledFlatTableHeaderProps extends Pick<FlatTableHeaderProps, "align" | "leftPosition" | "rightPosition" | "verticalBorder" | "verticalBorderColor" | "alternativeBgColor">, PaddingProps {
+interface StyledFlatTableHeaderProps extends Pick<FlatTableHeaderProps, "align" | "verticalBorder" | "verticalBorderColor" | "alternativeBgColor">, PaddingProps {
     makeCellSticky: boolean;
     colWidth?: number;
     colorTheme: FlatTableProps["colorTheme"];
+    leftPosition: number;
+    rightPosition: number;
 }
 declare const StyledFlatTableHeader: import("styled-components").StyledComponent<"th", any, StyledFlatTableHeaderProps, never>;
 export default StyledFlatTableHeader;

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

@@ -0,0 +1,12 @@
+import React from "react";
+export interface FlatTableRowContextProps {
+    expandable?: boolean;
+    onClick?: (ev?: React.MouseEvent<HTMLElement>) => void;
+    onKeyDown?: (ev: React.KeyboardEvent<HTMLElement>) => void;
+    firstCellId: string | null;
+    leftPositions: Record<string, number>;
+    rightPositions: Record<string, number>;
+    firstColumnExpandable?: boolean;
+}
+declare const _default: React.Context<FlatTableRowContextProps>;
+export default _default;

package/lib/components/flat-table/flat-table-row/__internal__/flat-table-row-context.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _default = /*#__PURE__*/(0, _react.createContext)({
+  firstCellId: "",
+  leftPositions: {},
+  rightPositions: {}
+});
+exports.default = _default;

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

@@ -10,9 +10,11 @@ export interface FlatTableRowDraggableProps {
     moveItem?: (id?: number | string, index?: number) => void;
     /** item is draggable */
     draggable?: boolean;
+    /** ref for row element */
+    rowRef?: React.ForwardedRef<HTMLTableRowElement | null>;
 }
 export declare const FlatTableRowDraggable: {
-    ({ children, id, findItem, moveItem, }: FlatTableRowDraggableProps): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+    ({ children, id, findItem, moveItem, rowRef, }: FlatTableRowDraggableProps): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
     displayName: string;
 };
 export default FlatTableRowDraggable;

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

@@ -12,7 +12,8 @@ const FlatTableRowDraggable = ({
   children,
   id,
   findItem,
-  moveItem
+  moveItem,
+  rowRef
 }) => {
   const originalIndex = Number(findItem?.(id).index);
   const [{
@@ -53,7 +54,17 @@ const FlatTableRowDraggable = ({
     key: originalIndex,
     id,
     isDragging,
-    ref: node => drag(drop(node))
+    ref: node => {
+      drag(drop(node));
+      /* istanbul ignore else */
+      if (rowRef) {
+        if (typeof rowRef === "function") {
+          rowRef(node);
+        } else {
+          rowRef.current = node;
+        }
+      }
+    }
   });
 };
 exports.FlatTableRowDraggable = FlatTableRowDraggable;
@@ -62,7 +73,10 @@ FlatTableRowDraggable.propTypes = {
   "draggable": _propTypes.default.bool,
   "findItem": _propTypes.default.func,
   "id": _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
-  "moveItem": _propTypes.default.func
+  "moveItem": _propTypes.default.func,
+  "rowRef": _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.shape({
+    "current": _propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.object]).isRequired
+  })])
 };
 FlatTableRowDraggable.displayName = "FlatTableRowDraggable";
 var _default = FlatTableRowDraggable;

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

@@ -0,0 +1,15 @@
+import React from "react";
+export interface SubRowContextProps {
+    isSubRow?: boolean;
+    firstRowId: string;
+    addRow: (id: string) => void;
+    removeRow: (id: string) => void;
+}
+export declare const SubRowContext: React.Context<SubRowContextProps>;
+declare const SubRowProvider: {
+    ({ children }: {
+        children: React.ReactNode;
+    }): React.JSX.Element;
+    displayName: string;
+};
+export default SubRowProvider;

package/lib/components/flat-table/flat-table-row/__internal__/sub-row-provider.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.SubRowContext = void 0;
+var _react = _interopRequireWildcard(require("react"));
+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; }
+const SubRowContext = /*#__PURE__*/(0, _react.createContext)({
+  isSubRow: false,
+  firstRowId: "",
+  addRow: () => {},
+  removeRow: () => {}
+});
+exports.SubRowContext = SubRowContext;
+const SubRowProvider = ({
+  children
+}) => {
+  const [rowIds, setRowIds] = (0, _react.useState)([]);
+  const addRow = (0, _react.useCallback)(id => {
+    setRowIds(p => [...p, id]);
+  }, []);
+  const removeRow = (0, _react.useCallback)(id => {
+    setRowIds(p => p.filter(rowId => rowId !== id));
+  }, []);
+  return /*#__PURE__*/_react.default.createElement(SubRowContext.Provider, {
+    value: {
+      isSubRow: true,
+      firstRowId: rowIds[0],
+      addRow,
+      removeRow
+    }
+  }, children);
+};
+SubRowProvider.displayName = "SubRowProvider";
+var _default = SubRowProvider;
+exports.default = _default;