carbon-react 111.8.5 → 111.9.1

package/esm/__internal__/focus-trap/focus-trap-utils.js

@@ -41,6 +41,19 @@ const getRadioElementToFocus = (groupName, shiftKey) => {
 
 const getNextElement = (element, focusableElements, shiftKey) => {
   const currentIndex = focusableElements.indexOf(element);
+
+  if (currentIndex === -1) {
+    // we're not currently on a focusable element - most likely because the focusableElements come from a different focus trap!
+    // So we need to leave focus where it is.
+    // The exception is when the focus is on the document body - perhaps because the previously-focused element was dynamically removed.
+    // In that case focus the first element.
+    if (element === document.body) {
+      return focusableElements[0];
+    }
+
+    return element;
+  }
+
   const increment = shiftKey ? -1 : 1;
   let nextIndex = currentIndex;
   let foundElement;
@@ -61,7 +74,14 @@ const getNextElement = (element, focusableElements, shiftKey) => {
     if (nextElement === element) {
       // guard in case there is only one focusable element (or only a single radio group) in the trap.
       // If this happens we don't want to freeze the browser by looping forever, and it's OK to just focus
-      // the same element we're already on
+      // the same element we're already on.
+      // There is an exception though: if we're in a single radio group, we need to ensure we focus on
+      // the correct one. This may not be "element" if it's not currently focused (due to the focus actually
+      // being on a wrapper element and this function being called with the first/last element as "element").
+      if (isRadio(element) && document.activeElement !== element) {
+        return getRadioElementToFocus(element.getAttribute("name"), shiftKey);
+      }
+
       return element;
     }
 

package/esm/__internal__/focus-trap/focus-trap.component.js

@@ -94,6 +94,10 @@ const FocusTrap = ({
             elementToFocus = getNextElement(activeElement, focusableElements, ev.shiftKey);
           }
 
+          setElementFocus(elementToFocus);
+          ev.preventDefault();
+        } else if (activeElement === (wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current)) {
+          const elementToFocus = getNextElement(lastElement, focusableElements, ev.shiftKey);
           setElementFocus(elementToFocus);
           ev.preventDefault();
         } else {

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

@@ -20,6 +20,7 @@ const FlatTableCell = ({
   reportCellWidth,
   cellIndex,
   leftPosition,
+  rightPosition,
   width,
   truncate = false,
   title,
@@ -32,8 +33,10 @@ const FlatTableCell = ({
     }
   }, [reportCellWidth, cellIndex]);
   return /*#__PURE__*/React.createElement(StyledFlatTableCell, _extends({
-    leftPosition: leftPosition || 0,
+    leftPosition: leftPosition,
+    rightPosition: rightPosition,
     makeCellSticky: !!reportCellWidth,
+    className: reportCellWidth ? "isSticky" : undefined,
     ref: ref,
     align: align,
     "data-element": "flat-table-cell",
@@ -104,6 +107,13 @@ FlatTableCell.propTypes = {
    */
   leftPosition: PropTypes.number,
 
+  /**
+   * @private
+   * @ignore
+   * Sets the right position when sticky column found
+   */
+  rightPosition: PropTypes.number,
+
   /**
    * @private
    * @ignore

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

@@ -13,6 +13,7 @@ const StyledFlatTableCell = styled.td`
   theme,
   rowSpan,
   leftPosition,
+  rightPosition,
   makeCellSticky,
   colWidth,
   isTruncated,
@@ -73,7 +74,8 @@ const StyledFlatTableCell = styled.td`
     `}
 
     ${makeCellSticky && css`
-      left: ${leftPosition}px;
+      ${leftPosition !== undefined && `left: ${leftPosition}px;`}
+      ${rightPosition !== undefined && `right: ${rightPosition}px;`}
       position: sticky;
     `}
 

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

@@ -12,6 +12,7 @@ const FlatTableCheckbox = ({
   selectable = true,
   onClick,
   leftPosition,
+  rightPosition,
   cellIndex,
   reportCellWidth,
   ariaLabelledBy,
@@ -37,7 +38,9 @@ const FlatTableCheckbox = ({
   return /*#__PURE__*/React.createElement(StyledFlatTableCheckbox, _extends({
     ref: ref,
     makeCellSticky: !!reportCellWidth,
-    leftPosition: leftPosition || 0,
+    className: reportCellWidth ? "isSticky" : undefined,
+    leftPosition: leftPosition,
+    rightPosition: rightPosition,
     "data-element": dataElement,
     as: as
   }, rest), selectable && /*#__PURE__*/React.createElement(Checkbox, {
@@ -77,6 +80,13 @@ FlatTableCheckbox.propTypes = {
    */
   leftPosition: PropTypes.number,
 
+  /**
+   * @private
+   * @ignore
+   * Sets the right position when sticky column found
+   */
+  rightPosition: PropTypes.number,
+
   /**
    * @private
    * @ignore

package/esm/components/flat-table/flat-table-checkbox/flat-table-checkbox.style.js

@@ -4,6 +4,7 @@ const StyledFlatTableCheckbox = styled.td`
   ${({
   as,
   leftPosition,
+  rightPosition,
   makeCellSticky
 }) => css`
     ${as === "td" && css`
@@ -35,7 +36,6 @@ const StyledFlatTableCheckbox = styled.td`
       left: auto;
       padding: 0;
       text-align: left;
-      top: 0;
       user-select: none;
       vertical-align: middle;
       white-space: nowrap;
@@ -43,7 +43,8 @@ const StyledFlatTableCheckbox = styled.td`
 
     ${makeCellSticky && css`
       top: auto;
-      left: ${leftPosition}px;
+      ${leftPosition !== undefined && `left: ${leftPosition}px;`}
+      ${rightPosition !== undefined && `right: ${rightPosition}px;`}
       position: sticky;
     `}
   `}

package/esm/components/flat-table/flat-table-head/flat-table-head.style.js

@@ -3,13 +3,14 @@ import baseTheme from "../../../style/themes/base";
 import { StyledFlatTableRowHeader } from "../flat-table-row-header/flat-table-row-header.style";
 import StyledFlatTableCheckbox from "../flat-table-checkbox/flat-table-checkbox.style";
 const StyledFlatTableHead = styled.thead`
-  ${StyledFlatTableRowHeader}, ${StyledFlatTableCheckbox} {
-    border-left: none;
-    border-right: none;
-    font-weight: 700;
-    z-index: ${({
-  theme
-}) => theme.zIndex.overlay};
+  &&& {
+    ${StyledFlatTableCheckbox} {
+      border-left: none;
+      border-right: none;
+    }
+    ${StyledFlatTableRowHeader}, ${StyledFlatTableCheckbox} {
+      font-weight: 700;
+    }
   }
 `;
 StyledFlatTableHead.defaultProps = {

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

@@ -19,6 +19,7 @@ const FlatTableHeader = ({
   reportCellWidth,
   cellIndex,
   leftPosition,
+  rightPosition,
   ...rest
 }) => {
   const ref = useRef(null);
@@ -32,8 +33,10 @@ const FlatTableHeader = ({
   }, [reportCellWidth, cellIndex]);
   return /*#__PURE__*/React.createElement(StyledFlatTableHeader, _extends({
     ref: ref,
-    leftPosition: leftPosition || 0,
+    leftPosition: leftPosition,
+    rightPosition: rightPosition,
     makeCellSticky: !!reportCellWidth,
+    className: reportCellWidth ? "isSticky" : undefined,
     align: align,
     colorTheme: colorTheme,
     "data-element": "flat-table-header",
@@ -69,6 +72,13 @@ FlatTableHeader.propTypes = {
    */
   leftPosition: PropTypes.number,
 
+  /**
+   * @private
+   * @ignore
+   * Sets the right position when sticky column found
+   */
+  rightPosition: PropTypes.number,
+
   /**
    * @private
    * @ignore

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

@@ -15,6 +15,8 @@ export interface FlatTableHeaderProps extends PaddingProps {
   rowspan?: number | string;
   /** Sets a custom vertical right border */
   verticalBorder?: TableBorderSize;
+  /** Sets the color of the right border */
+  verticalBorderColor?: string;
   /** Column width, pass a number to set a fixed width in pixels */
   width?: number;
 }

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

@@ -1,6 +1,8 @@
 import styled, { css } from "styled-components";
 import { padding } from "styled-system";
 import getAlternativeBackgroundColor from "./flat-table-header-utils";
+import baseTheme from "../../../style/themes/base";
+import { toColor } from "../../../style/utils/color";
 const verticalBorderSizes = {
   small: "1px",
   medium: "2px",
@@ -12,9 +14,12 @@ const StyledFlatTableHeader = styled.th`
   alternativeBgColor,
   colWidth,
   leftPosition,
+  rightPosition,
   makeCellSticky,
   verticalBorder,
-  colorTheme
+  verticalBorderColor,
+  colorTheme,
+  theme
 }) => css`
     background-color: transparent;
     border-width: 0;
@@ -22,7 +27,6 @@ const StyledFlatTableHeader = styled.th`
     font-weight: 700;
     left: auto;
     text-align: ${align};
-    top: 0;
     user-select: none;
     vertical-align: middle;
     white-space: nowrap;
@@ -58,36 +62,41 @@ const StyledFlatTableHeader = styled.th`
       `};
 
     ${makeCellSticky && css`
-      left: ${leftPosition}px;
-      position: sticky;
-      &&& {
-        z-index: 1002;
-      }
-
-      &:first-child {
-        padding-right: 0.395em;
+        ${leftPosition !== undefined && `left: ${leftPosition}px;`}
+        ${rightPosition !== undefined && `right: ${rightPosition}px;`}
+        position: sticky;
+       
+        &:first-child {
+          padding-right: 0.395em;
 
-        /* Applies specific styling for Firefox. Increased padding is required to ensure no gap is present between
-        the th elements. This includes FlatTableHeader and FlatTableRowHeader */
-        @-moz-document url-prefix() {
-          padding-right: 2px;
-        }
+          /* Applies specific styling for Firefox. Increased padding is required to ensure no gap is present between
+          the th elements. This includes FlatTableHeader and FlatTableRowHeader */
+          @-moz-document url-prefix() {
+            padding-right: 2px;
+          }
 
-        /* Styling for safari. Increased padding is required to ensure no gap is present between
-        the th elements. This includes FlatTableHeader and FlatTableRowHeader  */
-        @media not all and (min-resolution:.001dpcm) {
-          @supports (-webkit-appearance:none) and (stroke-color:transparent) {
-            padding-right: 0.9em;
+          /* Styling for safari. Increased padding is required to ensure no gap is present between
+          the th elements. This includes FlatTableHeader and FlatTableRowHeader  */
+          @media not all and (min-resolution:.001dpcm) {
+            @supports (-webkit-appearance:none) and (stroke-color:transparent) {
+              padding-right: 0.9em;
+            }
           }
-        }
-    `}
+      `}
 
     &&& {
       ${verticalBorder && css`
           border-right-width: ${verticalBorderSizes[verticalBorder]};
         `}
+
+      ${verticalBorderColor && css`
+          border-right-color: ${toColor(theme, verticalBorderColor)};
+        `}
       }
     }
   `}
 `;
+StyledFlatTableHeader.defaultProps = {
+  theme: baseTheme
+};
 export default StyledFlatTableHeader;

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

@@ -2,6 +2,7 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 import React, { useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } 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";
@@ -35,13 +36,24 @@ const FlatTableRow = /*#__PURE__*/React.forwardRef(({
   let rowRef = useRef();
   if (ref) rowRef = ref;
   const firstColumnExpandable = expandableArea === "firstColumn";
-  const [stickyCellWidths, setStickyCellWidths] = useState([]);
+  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 rowHeaderIndex = useMemo(() => childrenArray.findIndex(child => child.type.displayName === FlatTableRowHeader.displayName), [childrenArray]);
+  const lhsRowHeaderIndex = useMemo(() => childrenArray.findIndex(child => child.type.displayName === FlatTableRowHeader.displayName && child.props.stickyAlignment !== "right"), [childrenArray]);
+  const rhsRowHeaderIndex = useMemo(() => childrenArray.findIndex(child => child.type.displayName === FlatTableRowHeader.displayName && child.props.stickyAlignment === "right"), [childrenArray]);
+  const noStickyColumnsOverlap = useMemo(() => {
+    const hasLhsColumn = lhsRowHeaderIndex !== -1;
+    const hasRhsColumn = rhsRowHeaderIndex !== -1;
+    if (!hasLhsColumn || !hasRhsColumn) return true;
+    return lhsRowHeaderIndex < rhsRowHeaderIndex;
+  }, [lhsRowHeaderIndex, rhsRowHeaderIndex]);
+  !noStickyColumnsOverlap ? process.env.NODE_ENV !== "production" ? invariant(false, `Do not render a right hand side \`${FlatTableRowHeader.displayName}\` before left hand side \`${FlatTableRowHeader.displayName}\``) : invariant(false) : void 0;
   const themeContext = useContext(FlatTableThemeContext);
   const reportCellWidth = useCallback((width, index) => {
-    const copiedArray = stickyCellWidths;
+    const isLeftSticky = index < lhsRowHeaderIndex;
+    const copiedArray = isLeftSticky ? leftStickyCellWidths : rightStickyCellWidths;
 
     if (copiedArray[index] !== undefined) {
       copiedArray[index] = width;
@@ -49,11 +61,14 @@ const FlatTableRow = /*#__PURE__*/React.forwardRef(({
       copiedArray.push(width);
     }
 
-    setStickyCellWidths(copiedArray);
-  }, [stickyCellWidths]);
+    if (isLeftSticky) {
+      setLeftStickyCellWidths(copiedArray);
+    } else {
+      setRightStickyCellWidths(copiedArray);
+    }
+  }, [lhsRowHeaderIndex, leftStickyCellWidths, rightStickyCellWidths]);
   let interactiveRowProps = {};
-
-  const firstCellIndex = () => childrenArray[0].type === FlatTableCheckbox ? 1 : 0;
+  const firstCellIndex = childrenArray[0].type === FlatTableCheckbox ? 1 : 0;
 
   const toggleExpanded = () => setIsExpanded(!isExpanded);
 
@@ -97,13 +112,22 @@ const FlatTableRow = /*#__PURE__*/React.forwardRef(({
     }
   }
 
+  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 (stickyCellWidths.length && rowHeaderIndex !== -1) {
-      setLeftPositions([0, ...Array.from({
-        length: rowHeaderIndex
-      }).map((_, index) => stickyCellWidths.slice(0, index + 1).reduce((a, b) => a + b, 0), 0)]);
+    if (rightStickyCellWidths.length && rhsRowHeaderIndex !== -1) {
+      buildPositionArray(setRightPositions, rightStickyCellWidths, childrenArray.length - (rhsRowHeaderIndex + 1));
     }
-  }, [rowHeaderIndex, stickyCellWidths]);
+  }, [rhsRowHeaderIndex, rightStickyCellWidths, childrenArray]);
   useEffect(() => {
     setIsExpanded(expanded);
   }, [expanded]);
@@ -117,9 +141,10 @@ const FlatTableRow = /*#__PURE__*/React.forwardRef(({
     highlighted: highlighted,
     selected: selected,
     onClick: handleClick,
-    firstCellIndex: firstCellIndex(),
+    firstCellIndex: firstCellIndex,
     ref: rowRef,
-    rowHeaderIndex: rowHeaderIndex,
+    lhsRowHeaderIndex: lhsRowHeaderIndex,
+    rhsRowHeaderIndex: rhsRowHeaderIndex,
     colorTheme: themeContext.colorTheme,
     size: themeContext.size,
     stickyOffset: stickyOffset,
@@ -127,15 +152,17 @@ const FlatTableRow = /*#__PURE__*/React.forwardRef(({
     horizontalBorderColor: horizontalBorderColor,
     horizontalBorderSize: horizontalBorderSize,
     applyBorderLeft: applyBorderLeft,
-    draggable: draggable
+    draggable: draggable,
+    totalChildren: childrenArray.length
   }, interactiveRowProps, rest), React.Children.map(children, (child, index) => {
     return child && /*#__PURE__*/React.cloneElement(child, {
-      expandable: expandable && index === firstCellIndex(),
-      onClick: expandable && index === firstCellIndex() && firstColumnExpandable ? () => toggleExpanded() : undefined,
-      onKeyDown: expandable && index === firstCellIndex() && firstColumnExpandable ? handleCellKeyDown : undefined,
+      expandable: expandable && index === firstCellIndex,
+      onClick: expandable && index === firstCellIndex && firstColumnExpandable ? () => toggleExpanded() : undefined,
+      onKeyDown: expandable && index === firstCellIndex && firstColumnExpandable ? handleCellKeyDown : undefined,
       cellIndex: index,
-      reportCellWidth: index < rowHeaderIndex ? reportCellWidth : undefined,
+      reportCellWidth: index < lhsRowHeaderIndex || rhsRowHeaderIndex !== -1 && index > rhsRowHeaderIndex ? reportCellWidth : undefined,
       leftPosition: leftPositions[index],
+      rightPosition: rightPositions[childrenArray.length - (index + 1)],
       ...child.props
     });
   }));

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

@@ -11,22 +11,31 @@ const horizontalBorderSizes = {
   large: "4px"
 };
 
-const stickyColumnFocusStyling = (index, theme) => {
+const getLeftStickyStyling = index => index === 0 && css`
+    &:first-of-type::before {
+      border-left: 3px solid var(--colorsSemanticFocus500);
+    }
+  `;
+
+const getRightStickyStyling = (index, totalChildren) => index === totalChildren - 1 && css`
+    &:last-of-type {
+      border-right: 2px solid var(--colorsSemanticFocus500);
+    }
+  `;
+
+const stickyColumnFocusStyling = theme => {
   return `
-    border-left: 2px solid
-      ${index === 0 ? "var(--colorsSemanticFocus500)" : "var(--colorsUtilityMajor100)"};
       width: calc(100% + 1px);
-      top: 0;
-      z-index: ${theme.zIndex.overlay + 2};
+      z-index: ${theme.zIndex.overlay};
       :before {
         content: "";
         border-top: 2px solid var(--colorsSemanticFocus500);
         border-bottom: 2px solid var(--colorsSemanticFocus500);
         display: block;
-        left: 0px;
+        left: -2px;
         top: 0px;
         height: calc(100% - 3px);
-        width: 101%;
+        width: 103%;
         position: absolute;
         z-index: ${theme.zIndex.overlay};
       }
@@ -51,6 +60,20 @@ const borderColor = colorTheme => {
   }
 };
 
+const verticalBorderColor = colorTheme => {
+  switch (colorTheme) {
+    case "transparent-base":
+      return "var(--colorsUtilityMajor025)";
+
+    case "transparent-white":
+      return "var(--colorsUtilityYang100)";
+    // default theme is "dark"
+
+    default:
+      return "var(--colorsUtilityMajor100)";
+  }
+};
+
 const StyledFlatTableRow = styled.tr`
   ${({
   bgColor,
@@ -59,7 +82,9 @@ const StyledFlatTableRow = styled.tr`
   stickyOffset,
   isRowInteractive,
   isFirstColumnInteractive,
-  rowHeaderIndex,
+  lhsRowHeaderIndex,
+  rhsRowHeaderIndex,
+  totalChildren,
   firstCellIndex,
   colorTheme,
   expandable,
@@ -105,6 +130,31 @@ const StyledFlatTableRow = styled.tr`
         `}
       }
 
+      ${StyledFlatTableRowHeader} + td {
+        border-left: none;
+      }
+
+      ${lhsRowHeaderIndex !== -1 && css`
+        ${StyledFlatTableRowHeader}:nth-child(${lhsRowHeaderIndex + 1}) {
+          border-right: 2px solid ${verticalBorderColor(colorTheme)};
+        }
+      `}
+
+      ${rhsRowHeaderIndex !== -1 && css`
+        ${StyledFlatTableRowHeader}:nth-child(${rhsRowHeaderIndex + 1}) {
+          border-left: 2px solid ${verticalBorderColor(colorTheme)};
+        }
+        ${StyledFlatTableHeader}:nth-child(${rhsRowHeaderIndex}) {
+          border-right: none;
+        }
+      `}
+
+      ${rhsRowHeaderIndex === totalChildren - 1 && css`
+        td:last-of-type {
+          border-right: none;
+        }
+      `}
+
       ${StyledFlatTableHeader} {
         border-bottom: 1px solid ${borderColor(colorTheme)};
 
@@ -157,17 +207,27 @@ const StyledFlatTableRow = styled.tr`
             }
           }
 
+          td:first-of-type:not(:nth-child(${lhsRowHeaderIndex + 2}))::before {
+            border-left: 3px solid var(--colorsSemanticFocus500);
+          }
+
+          td:last-of-type:not(:nth-child(${rhsRowHeaderIndex})) {
+            border-right: 2px solid var(--colorsSemanticFocus500);
+          }
+
           ${StyledFlatTableRowHeader} {
-            ${stickyColumnFocusStyling(rowHeaderIndex, theme)}
+            ${getLeftStickyStyling(lhsRowHeaderIndex)}
+            ${getRightStickyStyling(rhsRowHeaderIndex, totalChildren)}
+            ${stickyColumnFocusStyling(theme)}
           }
 
-          ${![-1, 0].includes(rowHeaderIndex) && css`
+          ${![-1, 0].includes(lhsRowHeaderIndex) && css`
             ${Array.from({
-    length: rowHeaderIndex
+    length: lhsRowHeaderIndex
   }).map((_, index) => {
     return `
                 td:nth-of-type(${index + 1}) {
-                  ${stickyColumnFocusStyling(index, theme)}
+                  ${stickyColumnFocusStyling(theme)}
                 }
               `;
   })}
@@ -197,16 +257,6 @@ const StyledFlatTableRow = styled.tr`
         }
       `}
 
-      ${![-1, 0].includes(rowHeaderIndex) && css`
-        td:nth-of-type(${rowHeaderIndex + 1}) {
-          border-left: 1px solid
-            ${customBorderColor || "var(--colorsUtilityMajor100)"};
-        }
-
-        th:nth-of-type(${rowHeaderIndex + 2}) {
-          border-left: 1px solid ${customBorderColor || borderColor(colorTheme)};
-        }
-      `}
 
       ${applyBorderLeft && css`
         th:first-of-type {

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

@@ -1,6 +1,6 @@
 function _extends() { _extends = Object.assign || 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, { useCallback } from "react";
 import PropTypes from "prop-types";
 import styledSystemPropTypes from "@styled-system/prop-types";
 import { filterStyledSystemPaddingProps } from "../../../style/utils";
@@ -18,22 +18,32 @@ const FlatTableRowHeader = ({
   onClick,
   onKeyDown,
   leftPosition,
+  rightPosition,
   truncate,
   title,
+  stickyAlignment = "left",
   ...rest
 }) => {
+  const handleOnClick = useCallback(ev => {
+    if (expandable && onClick) onClick(ev);
+  }, [expandable, onClick]);
+  const handleOnKeyDown = useCallback(ev => {
+    if (expandable && onKeyDown) onKeyDown(ev);
+  }, [expandable, onKeyDown]);
   return /*#__PURE__*/React.createElement(StyledFlatTableRowHeader, _extends({
-    leftPosition: leftPosition || 0,
+    leftPosition: stickyAlignment === "left" ? leftPosition || 0 : undefined,
+    rightPosition: stickyAlignment === "right" ? rightPosition || 0 : undefined,
     align: align,
     "data-element": "flat-table-row-header",
     colWidth: width,
     py: py || "10px",
     px: px || 3,
-    onClick: expandable && onClick ? onClick : undefined,
+    onClick: handleOnClick,
     tabIndex: expandable && onClick ? 0 : undefined,
-    onKeyDown: expandable && onKeyDown ? onKeyDown : undefined,
+    onKeyDown: handleOnKeyDown,
     isTruncated: truncate,
-    expandable: expandable
+    expandable: expandable,
+    stickyAlignment: stickyAlignment
   }, rest), /*#__PURE__*/React.createElement(StyledFlatTableRowHeaderContent, {
     title: truncate && !title && typeof children === "string" ? children : title,
     expandable: expandable
@@ -83,7 +93,22 @@ FlatTableRowHeader.propTypes = {
   verticalBorder: PropTypes.oneOf(["small", "medium", "large"]),
 
   /** Sets a vertical right border color, provide design token, any color from palette or any valid css color value. */
-  verticalBorderColor: PropTypes.string
+  verticalBorderColor: PropTypes.string,
+
+  /** Defines whether the column should be sticky on the left or right hand side of the Table */
+  stickyAlignment: PropTypes.oneOf(["left", "right"]),
+
+  /**
+   * @private
+   * @ignore
+   */
+  leftPosition: PropTypes.number,
+
+  /**
+   * @private
+   * @ignore
+   */
+  rightPosition: PropTypes.number
 };
 FlatTableRowHeader.displayName = "FlatTableRowHeader";
 export default FlatTableRowHeader;

package/esm/components/flat-table/flat-table-row-header/flat-table-row-header.d.ts

@@ -16,6 +16,8 @@ export interface FlatTableRowHeaderProps extends PaddingProps {
   verticalBorder?: TableBorderSize;
   /** Sets the color of the right border */
   verticalBorderColor?: string;
+  /** Defines whether the column should be sticky on the left or right hand side of the Table */
+  stickyAlignment?: "left" | "right";
 }
 
 declare function FlatTableRowHeader(