carbon-react 119.12.2 → 120.1.0

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

@@ -1,8 +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, { useLayoutEffect, useRef, useContext } from "react";
+import React, { useRef, useContext } from "react";
 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";
 export const FlatTableHeader = ({
   align,
   children,
@@ -11,27 +13,25 @@ export const FlatTableHeader = ({
   width,
   py,
   px,
-  reportCellWidth,
-  cellIndex,
-  leftPosition,
-  rightPosition,
+  id,
   ...rest
 }) => {
   const ref = useRef(null);
+  const internalId = useRef(id || guid());
   const {
     colorTheme
   } = useContext(FlatTableThemeContext);
-  useLayoutEffect(() => {
-    if (ref.current && reportCellWidth) {
-      reportCellWidth(ref.current.offsetWidth, cellIndex);
-    }
-  }, [reportCellWidth, cellIndex]);
+  const {
+    leftPosition,
+    rightPosition,
+    makeCellSticky
+  } = useCalculateStickyCells(internalId.current);
   return /*#__PURE__*/React.createElement(StyledFlatTableHeader, _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"
@@ -43,7 +43,9 @@ export const FlatTableHeader = ({
     colWidth: width,
     py: py,
     px: px
-  }, rest), /*#__PURE__*/React.createElement("div", null, children));
+  }, rest, {
+    id: internalId.current
+  }), /*#__PURE__*/React.createElement("div", null, children));
 };
 FlatTableHeader.defaultProps = {
   align: "left"

package/esm/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/esm/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/esm/components/flat-table/flat-table-row/__internal__/flat-table-row-context.js

@@ -0,0 +1,6 @@
+import { createContext } from "react";
+export default /*#__PURE__*/createContext({
+  firstCellId: "",
+  leftPositions: {},
+  rightPositions: {}
+});

package/esm/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/esm/components/flat-table/flat-table-row/__internal__/flat-table-row-draggable.component.js

@@ -5,7 +5,8 @@ const FlatTableRowDraggable = ({
   children,
   id,
   findItem,
-  moveItem
+  moveItem,
+  rowRef
 }) => {
   const originalIndex = Number(findItem?.(id).index);
   const [{
@@ -46,7 +47,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;
+        }
+      }
+    }
   });
 };
 FlatTableRowDraggable.propTypes = {
@@ -54,7 +65,10 @@ FlatTableRowDraggable.propTypes = {
   "draggable": PropTypes.bool,
   "findItem": PropTypes.func,
   "id": PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  "moveItem": PropTypes.func
+  "moveItem": PropTypes.func,
+  "rowRef": PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
+    "current": PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.object]).isRequired
+  })])
 };
 export { FlatTableRowDraggable };
 FlatTableRowDraggable.displayName = "FlatTableRowDraggable";

package/esm/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/esm/components/flat-table/flat-table-row/__internal__/sub-row-provider.js

@@ -0,0 +1,28 @@
+import React, { createContext, useCallback, useState } from "react";
+export const SubRowContext = /*#__PURE__*/createContext({
+  isSubRow: false,
+  firstRowId: "",
+  addRow: () => {},
+  removeRow: () => {}
+});
+const SubRowProvider = ({
+  children
+}) => {
+  const [rowIds, setRowIds] = useState([]);
+  const addRow = useCallback(id => {
+    setRowIds(p => [...p, id]);
+  }, []);
+  const removeRow = useCallback(id => {
+    setRowIds(p => p.filter(rowId => rowId !== id));
+  }, []);
+  return /*#__PURE__*/React.createElement(SubRowContext.Provider, {
+    value: {
+      isSubRow: true,
+      firstRowId: rowIds[0],
+      addRow,
+      removeRow
+    }
+  }, children);
+};
+SubRowProvider.displayName = "SubRowProvider";
+export default SubRowProvider;

package/esm/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/esm/components/flat-table/flat-table-row/flat-table-row.component.js

@@ -1,52 +1,88 @@
 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, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import React, { useContext, useEffect, useMemo, useRef, useState, useLayoutEffect } from "react";
 import PropTypes from "prop-types";
 import invariant from "invariant";
 import Event from "../../../__internal__/utils/helpers/events";
 import StyledFlatTableRow from "./flat-table-row.style";
 import { DrawerSidebarContext } from "../../drawer";
-import FlatTableCheckbox from "../flat-table-checkbox";
 import FlatTableRowHeader from "../flat-table-row-header";
 import FlatTableRowDraggable from "./__internal__/flat-table-row-draggable.component";
 import { FlatTableThemeContext } from "../flat-table.component";
 import guid from "../../../__internal__/utils/helpers/guid";
+import FlatTableRowContext from "./__internal__/flat-table-row-context";
+import SubRowProvider, { SubRowContext } from "./__internal__/sub-row-provider";
+import { buildPositionMap } from "../__internal__";
+import { FlatTableHeadContext } from "../flat-table-head/flat-table-head.component";
 const FlatTableRow = /*#__PURE__*/React.forwardRef(({
   children,
   onClick,
   expandable,
   expandableArea = "wholeRow",
   expanded = false,
-  isSubRow,
-  isFirstSubRow,
-  stickyOffset,
   highlighted,
   selected,
   subRows,
   bgColor,
   horizontalBorderColor,
   horizontalBorderSize = "small",
-  applyBorderLeft,
   id,
   draggable,
   findItem,
   moveItem,
   ...rest
 }, ref) => {
-  const internalId = useRef(id ?? guid());
+  const internalId = useRef(id ? String(id) : guid());
   const [isExpanded, setIsExpanded] = useState(expanded);
   let rowRef = useRef(null);
   if (ref) {
     rowRef = ref;
   }
   const firstColumnExpandable = expandableArea === "firstColumn";
-  const [leftStickyCellWidths, setLeftStickyCellWidths] = useState([]);
-  const [rightStickyCellWidths, setRightStickyCellWidths] = useState([]);
-  const [leftPositions, setLeftPositions] = useState([]);
-  const [rightPositions, setRightPositions] = useState([]);
-  const childrenArray = useMemo(() => React.Children.toArray(children), [children]);
-  const lhsRowHeaderIndex = useMemo(() => childrenArray.findIndex(child => /*#__PURE__*/React.isValidElement(child) && child.type.displayName === FlatTableRowHeader.displayName && child.props.stickyAlignment !== "right"), [childrenArray]);
-  const rhsRowHeaderIndex = useMemo(() => childrenArray.findIndex(child => /*#__PURE__*/React.isValidElement(child) && child.type.displayName === FlatTableRowHeader.displayName && child.props.stickyAlignment === "right"), [childrenArray]);
+  const [leftPositions, setLeftPositions] = useState({});
+  const [rightPositions, setRightPositions] = useState({});
+  const [firstCellIndex, setFirstCellIndex] = useState(0);
+  const [lhsRowHeaderIndex, setLhsRowHeaderIndex] = useState(-1);
+  const [rhsRowHeaderIndex, setRhsRowHeaderIndex] = useState(-1);
+  const [firstCellId, setFirstCellId] = useState(null);
+  const [cellsArray, setCellsArray] = useState([]);
   const [tabIndex, setTabIndex] = useState(-1);
+  let interactiveRowProps = {};
+  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 = buildPositionMap(cellArray.slice(0, lhsRowHeaderIndex + 1), "offsetWidth");
+      if (checkForPositionUpdates(updatedLeftPositions, leftPositions)) {
+        setLeftPositions(updatedLeftPositions);
+      }
+    }
+    if (rhsIndex !== -1) {
+      const updatedRightPositions = buildPositionMap(cellArray.slice(rhsRowHeaderIndex, cellArray.length).reverse(), "offsetWidth");
+      if (checkForPositionUpdates(updatedRightPositions, rightPositions)) {
+        setRightPositions(updatedRightPositions);
+      }
+    }
+  }, [children, leftPositions, lhsRowHeaderIndex, rhsRowHeaderIndex, rightPositions]);
   const noStickyColumnsOverlap = useMemo(() => {
     const hasLhsColumn = lhsRowHeaderIndex !== -1;
     const hasRhsColumn = rhsRowHeaderIndex !== -1;
@@ -63,22 +99,9 @@ const FlatTableRow = /*#__PURE__*/React.forwardRef(({
   const {
     isInSidebar
   } = useContext(DrawerSidebarContext);
-  const reportCellWidth = 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.isValidElement(childrenArray[0]) && childrenArray[0].type === FlatTableCheckbox ? 1 : 0;
+  const {
+    stickyOffsets
+  } = useContext(FlatTableHeadContext);
   const toggleExpanded = () => setIsExpanded(!isExpanded);
   function onKeyDown(ev) {
     const isEnterOrSpaceKey = Event.isEnterKey(ev) || Event.isSpaceKey(ev);
@@ -114,32 +137,31 @@ const FlatTableRow = /*#__PURE__*/React.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)]);
-  };
-  useLayoutEffect(() => {
-    if (leftStickyCellWidths.length && lhsRowHeaderIndex !== -1) {
-      buildPositionArray(setLeftPositions, leftStickyCellWidths, lhsRowHeaderIndex);
-    }
-  }, [lhsRowHeaderIndex, leftStickyCellWidths]);
-  useLayoutEffect(() => {
-    if (rightStickyCellWidths.length && rhsRowHeaderIndex !== -1) {
-      buildPositionArray(setRightPositions, rightStickyCellWidths, childrenArray.length - (rhsRowHeaderIndex + 1));
-    }
-  }, [rhsRowHeaderIndex, rightStickyCellWidths, childrenArray]);
   useEffect(() => {
     setIsExpanded(expanded);
   }, [expanded]);
   useEffect(() => {
     if (highlighted || selected) {
-      setSelectedId(String(internalId.current));
+      setSelectedId(internalId.current);
     }
   }, [highlighted, selected, setSelectedId]);
   useEffect(() => {
     setTabIndex(selectedId === internalId.current ? 0 : -1);
   }, [selectedId]);
+  const {
+    isSubRow,
+    firstRowId,
+    addRow,
+    removeRow
+  } = useContext(SubRowContext);
+  useEffect(() => {
+    const rowId = internalId.current;
+    addRow(rowId);
+    return () => {
+      removeRow(rowId);
+    };
+  }, [addRow, removeRow]);
+  const isFirstSubRow = firstRowId === internalId.current;
   const rowComponent = () => /*#__PURE__*/React.createElement(StyledFlatTableRow, _extends({
     isInSidebar: isInSidebar,
     expandable: expandable,
@@ -155,41 +177,33 @@ const FlatTableRow = /*#__PURE__*/React.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.Children.map(children, (child, index) => {
-    return /*#__PURE__*/React.isValidElement(child) && /*#__PURE__*/React.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.createElement(FlatTableRowContext.Provider, {
+    value: {
+      firstCellId,
+      expandable,
+      leftPositions,
+      rightPositions,
+      firstColumnExpandable,
+      onKeyDown: handleCellKeyDown,
+      onClick: () => toggleExpanded()
+    }
+  }, children));
   const draggableComponent = () => /*#__PURE__*/React.createElement(FlatTableRowDraggable, {
     id: internalId.current,
     moveItem: moveItem,
-    findItem: findItem
+    findItem: findItem,
+    rowRef: rowRef
   }, rowComponent());
-  return /*#__PURE__*/React.createElement(React.Fragment, null, draggable ? draggableComponent() : rowComponent(), isExpanded && subRows && React.Children.map(subRows, (child, index) => child && /*#__PURE__*/React.cloneElement(child, {
-    isSubRow: true,
-    isFirstSubRow: index === 0,
-    ...( /*#__PURE__*/React.isValidElement(child) && {
-      ...child.props
-    })
-  })));
+  return /*#__PURE__*/React.createElement(React.Fragment, null, draggable ? draggableComponent() : rowComponent(), isExpanded && subRows && /*#__PURE__*/React.createElement(SubRowProvider, null, subRows));
 });
 FlatTableRow.propTypes = {
-  "applyBorderLeft": PropTypes.bool,
   "bgColor": PropTypes.string,
   "children": PropTypes.node,
   "draggable": PropTypes.bool,
@@ -201,12 +215,9 @@ FlatTableRow.propTypes = {
   "horizontalBorderColor": PropTypes.string,
   "horizontalBorderSize": PropTypes.oneOf(["large", "medium", "small"]),
   "id": PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  "isFirstSubRow": PropTypes.bool,
-  "isSubRow": PropTypes.bool,
   "moveItem": PropTypes.func,
   "onClick": PropTypes.func,
   "selected": PropTypes.bool,
-  "stickyOffset": PropTypes.number,
   "subRows": PropTypes.node
 };
 export { FlatTableRow };

package/esm/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/esm/components/flat-table/flat-table-row/flat-table-row.style.js

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

package/esm/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;