carbon-react 119.4.0 → 119.4.2

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

@@ -1,12 +1,9 @@
 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 PropTypes from "prop-types";
-import styledSystemPropTypes from "@styled-system/prop-types";
 import StyledFlatTableHeader from "./flat-table-header.style";
-import { filterStyledSystemPaddingProps } from "../../../style/utils";
 import { FlatTableThemeContext } from "../flat-table.component";
-const paddingPropTypes = filterStyledSystemPaddingProps(styledSystemPropTypes.space);
-const FlatTableHeader = _ref => {
+export const FlatTableHeader = _ref => {
   let {
     align,
     children,
@@ -38,56 +35,17 @@ const FlatTableHeader = _ref => {
     className: reportCellWidth ? "isSticky" : undefined,
     align: align,
     colorTheme: colorTheme,
-    "data-element": "flat-table-header",
-    colSpan: colspan,
-    rowSpan: rowspan,
+    "data-element": "flat-table-header"
+  }, colspan !== undefined && {
+    colSpan: Number(colspan)
+  }, rowspan !== undefined && {
+    rowSpan: Number(rowspan)
+  }, {
     colWidth: width,
     py: py,
     px: px
   }, rest), /*#__PURE__*/React.createElement("div", null, children));
 };
-FlatTableHeader.propTypes = {
-  /** Styled system padding props */
-  ...paddingPropTypes,
-  /** Content alignment */
-  align: PropTypes.oneOf(["center", "left", "right"]),
-  /** Header content */
-  children: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
-  /** Number of columns that a header cell should span */
-  colspan: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  /** Number of rows that a header cell should span */
-  rowspan: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  /** Column width, pass a number to set a fixed width in pixels */
-  width: PropTypes.number,
-  /**
-   * @private
-   * @ignore
-   * Sets the left position when sticky column found
-   */
-  leftPosition: PropTypes.number,
-  /**
-   * @private
-   * @ignore
-   * Sets the right position when sticky column found
-   */
-  rightPosition: PropTypes.number,
-  /**
-   * @private
-   * @ignore
-   * Index of cell within row
-   */
-  cellIndex: PropTypes.number,
-  /**
-   * @private
-   * @ignore
-   * Callback to report the offsetWidth
-   */
-  reportCellWidth: PropTypes.func,
-  /** If true sets alternative background color */
-  alternativeBgColor: PropTypes.bool,
-  /** Sets a custom vertical right border */
-  verticalBorder: PropTypes.oneOf(["small", "medium", "large"])
-};
 FlatTableHeader.defaultProps = {
   align: "left"
 };

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

@@ -0,0 +1,10 @@
+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 {
+    makeCellSticky: boolean;
+    colWidth?: number;
+    colorTheme: FlatTableProps["colorTheme"];
+}
+declare const StyledFlatTableHeader: import("styled-components").StyledComponent<"th", any, StyledFlatTableHeaderProps, never>;
+export default StyledFlatTableHeader;

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

@@ -1,2 +1,2 @@
-export { default } from "./flat-table-header";
-export * from "./flat-table-header";
+export { default } from "./flat-table-header.component";
+export type { FlatTableHeaderProps } from "./flat-table-header.component";

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

@@ -0,0 +1,18 @@
+import React from "react";
+export interface FlatTableRowDraggableProps {
+    /** Array of FlatTableRow. */
+    children: React.ReactNode;
+    /** ID for use in drag and drop functionality */
+    id?: number | string;
+    /** function to find an item in the list of draggable items */
+    findItem?: (id?: number | string) => Record<string, unknown>;
+    /** function to reposition an item in the list of draggable items */
+    moveItem?: (id?: number | string, index?: number) => void;
+    /** item is draggable */
+    draggable?: boolean;
+}
+export declare const FlatTableRowDraggable: {
+    ({ children, id, findItem, moveItem, }: 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

@@ -1,6 +1,6 @@
 import React from "react";
-import { useDrop, useDrag } from "react-dnd";
 import PropTypes from "prop-types";
+import { useDrop, useDrag } from "react-dnd";
 const FlatTableRowDraggable = _ref => {
   let {
     children,
@@ -8,7 +8,7 @@ const FlatTableRowDraggable = _ref => {
     findItem,
     moveItem
   } = _ref;
-  const originalIndex = findItem(id).index;
+  const originalIndex = Number(findItem?.(id).index);
   const [{
     isDragging
   }, drag] = useDrag({
@@ -27,22 +27,19 @@ const FlatTableRowDraggable = _ref => {
       } = monitor.getItem();
       const didDrop = monitor.didDrop();
       if (!didDrop) {
-        moveItem(droppedId, oIndex);
+        moveItem?.(droppedId, Number(oIndex));
       }
     }
   });
   const [, drop] = useDrop({
     accept: "flatTableRow",
     canDrop: () => false,
-    hover(_ref2) {
-      let {
-        id: draggedId
-      } = _ref2;
-      if (draggedId !== id) {
+    hover(item) {
+      if (item?.id !== id && findItem) {
         const {
           index: overIndex
         } = findItem(id);
-        moveItem(draggedId, overIndex);
+        moveItem?.(item?.id, Number(overIndex));
       }
     }
   });
@@ -54,15 +51,12 @@ const FlatTableRowDraggable = _ref => {
   });
 };
 FlatTableRowDraggable.propTypes = {
-  /** Array of FlatTableHeader or FlatTableCell. FlatTableRowHeader could also be passed. */
-  children: PropTypes.node.isRequired,
-  /** ID for use in drag and drop functionality */
-  id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  /** function to find an item in the list of draggable items */
-  findItem: PropTypes.func.isRequired,
-  /** function to reposition an item in the list of draggable items */
-  moveItem: PropTypes.func.isRequired,
-  /** item is draggable */
-  draggable: PropTypes.bool
+  "children": PropTypes.node,
+  "draggable": PropTypes.bool,
+  "findItem": PropTypes.func,
+  "id": PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  "moveItem": PropTypes.func
 };
+export { FlatTableRowDraggable };
+FlatTableRowDraggable.displayName = "FlatTableRowDraggable";
 export default FlatTableRowDraggable;

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

@@ -0,0 +1,56 @@
+import React from "react";
+import { TableBorderSize } from "..";
+import { FlatTableRowDraggableProps } from "./__internal__/flat-table-row-draggable.component";
+export interface FlatTableRowProps {
+    /** Overrides default cell color, provide design token, any color from palette or any valid css color value. */
+    bgColor?: string;
+    /** Array of FlatTableHeader or FlatTableCell. FlatTableRowHeader could also be passed. */
+    children: React.ReactNode;
+    /** Allows the row to be expanded, must be used with the `subRows` prop. */
+    expandable?: boolean;
+    /** Sets an expandable row to be expanded on start */
+    expanded?: boolean;
+    /** Area to click to open sub rows when expandable. Default is `wholeRow` */
+    expandableArea?: "wholeRow" | "firstColumn";
+    /** Allows developers to manually control highlighted state for the row. */
+    highlighted?: boolean;
+    /** Sets the color of the bottom border in the row */
+    horizontalBorderColor?: string;
+    /** Sets the weight of the bottom border in the row */
+    horizontalBorderSize?: TableBorderSize;
+    /** Function to handle click event. If provided the Component could be focused with tab key. */
+    onClick?: (ev: React.MouseEvent<HTMLElement>) => void;
+    /** Allows developers to manually control selected state for the row. */
+    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
+     * @ignore
+     */
+    findItem?: FlatTableRowDraggableProps["findItem"];
+    /**
+     * @private
+     * @ignore
+     */
+    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 default FlatTableRow;

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

@@ -35,16 +35,18 @@ const FlatTableRow = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   } = _ref;
   const internalId = useRef(id ?? guid());
   const [isExpanded, setIsExpanded] = useState(expanded);
-  let rowRef = useRef();
-  if (ref) rowRef = ref;
+  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 => 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 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 [tabIndex, setTabIndex] = useState(-1);
   const noStickyColumnsOverlap = useMemo(() => {
     const hasLhsColumn = lhsRowHeaderIndex !== -1;
@@ -59,6 +61,9 @@ const FlatTableRow = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     setSelectedId,
     selectedId
   } = useContext(FlatTableThemeContext);
+  const {
+    isInSidebar
+  } = useContext(DrawerSidebarContext);
   const reportCellWidth = useCallback((width, index) => {
     const isLeftSticky = index < lhsRowHeaderIndex;
     const copiedArray = isLeftSticky ? leftStickyCellWidths : rightStickyCellWidths;
@@ -74,7 +79,7 @@ const FlatTableRow = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     }
   }, [lhsRowHeaderIndex, leftStickyCellWidths, rightStickyCellWidths]);
   let interactiveRowProps = {};
-  const firstCellIndex = childrenArray[0].type === FlatTableCheckbox ? 1 : 0;
+  const firstCellIndex = /*#__PURE__*/React.isValidElement(childrenArray[0]) && childrenArray[0].type === FlatTableCheckbox ? 1 : 0;
   const toggleExpanded = () => setIsExpanded(!isExpanded);
   function onKeyDown(ev) {
     const isEnterOrSpaceKey = Event.isEnterKey(ev) || Event.isSpaceKey(ev);
@@ -130,13 +135,13 @@ const FlatTableRow = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   }, [expanded]);
   useEffect(() => {
     if (highlighted || selected) {
-      setSelectedId(internalId.current);
+      setSelectedId(String(internalId.current));
     }
   }, [highlighted, selected, setSelectedId]);
   useEffect(() => {
     setTabIndex(selectedId === internalId.current ? 0 : -1);
   }, [selectedId]);
-  const rowComponent = isInSidebar => /*#__PURE__*/React.createElement(StyledFlatTableRow, _extends({
+  const rowComponent = () => /*#__PURE__*/React.createElement(StyledFlatTableRow, _extends({
     isInSidebar: isInSidebar,
     expandable: expandable,
     isSubRow: isSubRow,
@@ -158,9 +163,9 @@ const FlatTableRow = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     applyBorderLeft: applyBorderLeft,
     draggable: draggable,
     totalChildren: childrenArray.length,
-    id: internalId.current
+    id: String(internalId.current)
   }, interactiveRowProps, rest), React.Children.map(children, (child, index) => {
-    return child && /*#__PURE__*/React.cloneElement(child, {
+    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,
@@ -171,69 +176,40 @@ const FlatTableRow = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       ...child.props
     });
   }));
-  const draggableComponent = isInSidebar => /*#__PURE__*/React.createElement(FlatTableRowDraggable, {
+  const draggableComponent = () => /*#__PURE__*/React.createElement(FlatTableRowDraggable, {
     id: internalId.current,
     moveItem: moveItem,
     findItem: findItem
-  }, rowComponent(isInSidebar));
-  return /*#__PURE__*/React.createElement(DrawerSidebarContext.Consumer, null, _ref2 => {
-    let {
-      isInSidebar
-    } = _ref2;
-    return /*#__PURE__*/React.createElement(React.Fragment, null, draggable ? draggableComponent(isInSidebar) : rowComponent(isInSidebar), isExpanded && subRows && React.Children.map(subRows, (child, index) => child && /*#__PURE__*/React.cloneElement(child, {
-      isSubRow: true,
-      isFirstSubRow: index === 0,
+  }, 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
-    })));
-  });
+    })
+  })));
 });
 FlatTableRow.propTypes = {
-  /** Overrides default cell color, provide design token, any color from palette or any valid css color value. */
-  bgColor: PropTypes.string,
-  /** Array of FlatTableHeader or FlatTableCell. FlatTableRowHeader could also be passed. */
-  children: PropTypes.node.isRequired,
-  /** Function to handle click event. If provided the Component could be focused with tab key. */
-  onClick: PropTypes.func,
-  /** Allows developers to manually control highlighted state for the row. */
-  highlighted: PropTypes.bool,
-  /** Allows developers to manually control selected state for the row. */
-  selected: PropTypes.bool,
-  /** Allows the row to be expanded, must be used with the `subRows` prop. */
-  expandable: PropTypes.bool,
-  /** Sub rows to be shown when the row is expanded, must be used with the `expandable` prop. */
-  subRows: PropTypes.arrayOf(PropTypes.node),
-  /** Area to click to open sub rows when expandable. Default is `wholeRow` */
-  expandableArea: PropTypes.oneOf(["wholeRow", "firstColumn"]),
-  /** Sets an expandable row to be expanded on start */
-  expanded: PropTypes.bool,
-  /** Sets the color of the bottom border in the row, provide design token, any color from palette or any valid css color value. */
-  horizontalBorderColor: PropTypes.string,
-  /** Sets the weight of the bottom border in the row */
-  horizontalBorderSize: PropTypes.oneOf(["small", "medium", "large"]),
-  /** @ignore @private */
-  isSubRow: PropTypes.bool,
-  /** @ignore @private */
-  isFirstSubRow: PropTypes.bool,
-  /** @ignore @private position in header if multiple rows */
-  stickyOffset: PropTypes.number,
-  /** @ignore @private applies a border-left to the first child */
-  applyBorderLeft: PropTypes.bool,
-  /** ID for use in drag and drop functionality
-   * @private
-   * @ignore
-   */
-  id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  /**
-   * @private
-   * @ignore
-   */
-  findItem: PropTypes.func,
-  /**
-   * @private
-   * @ignore
-   */
-  moveItem: PropTypes.func,
-  /** @ignore @private position in header if multiple rows */
-  draggable: PropTypes.bool
+  "applyBorderLeft": PropTypes.bool,
+  "bgColor": PropTypes.string,
+  "children": PropTypes.node,
+  "draggable": PropTypes.bool,
+  "expandable": PropTypes.bool,
+  "expandableArea": PropTypes.oneOf(["firstColumn", "wholeRow"]),
+  "expanded": PropTypes.bool,
+  "findItem": PropTypes.func,
+  "highlighted": PropTypes.bool,
+  "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 };
+FlatTableRow.displayName = "FlatTableRow";
 export default FlatTableRow;

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

@@ -0,0 +1,18 @@
+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"> {
+    isRowInteractive?: boolean;
+    isFirstColumnInteractive?: boolean;
+    lhsRowHeaderIndex: number;
+    rhsRowHeaderIndex: number;
+    totalChildren: number;
+    firstCellIndex: number;
+    colorTheme: FlatTableProps["colorTheme"];
+    isExpanded?: boolean;
+    isInSidebar?: boolean;
+    size: FlatTableProps["size"];
+    isDragging?: boolean;
+    horizontalBorderSize: NonNullable<FlatTableRowProps["horizontalBorderSize"]>;
+}
+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

@@ -161,7 +161,7 @@ const StyledFlatTableRow = styled.tr`
         `}
       }
 
-      ${stickyOffset > 0 && css`
+      ${stickyOffset !== undefined && stickyOffset > 0 && css`
         && th {
           top: ${stickyOffset}px;
         }
@@ -379,7 +379,6 @@ const StyledFlatTableRow = styled.tr`
 }}
 `;
 StyledFlatTableRow.defaultProps = {
-  theme: baseTheme,
-  horizontalBorderSize: "small"
+  theme: baseTheme
 };
 export default StyledFlatTableRow;

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

@@ -1,2 +1,2 @@
-export { default } from "./flat-table-row";
-export * from "./flat-table-row";
+export { default } from "./flat-table-row.component";
+export type { FlatTableRowProps } from "./flat-table-row.component";

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

@@ -0,0 +1,71 @@
+import React from "react";
+import { PaddingProps } from "styled-system";
+import { TableBorderSize, TableCellAlign } from "..";
+export interface FlatTableRowHeaderProps extends PaddingProps {
+    /** Content alignment */
+    align?: TableCellAlign;
+    /** RowHeader content */
+    children?: React.ReactNode;
+    /** Column width, pass a number to set a fixed width in pixels */
+    width?: number;
+    /** Truncate cell content and add ellipsis to any text that overflows */
+    truncate?: boolean;
+    /** Title text to display if cell content truncates */
+    title?: string;
+    /** Sets a custom vertical right border */
+    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";
+    /** Number of columns that a header cell should span */
+    colspan?: number | string;
+    /** Number of rows that a header cell should span */
+    rowspan?: number | string;
+    /** Sets an id string on the DOM 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;
+    displayName: string;
+};
+export default FlatTableRowHeader;

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

@@ -1,14 +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, useEffect, useContext, useState, useRef } from "react";
 import PropTypes from "prop-types";
-import styledSystemPropTypes from "@styled-system/prop-types";
-import { filterStyledSystemPaddingProps } from "../../../style/utils";
 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";
-const paddingPropTypes = filterStyledSystemPaddingProps(styledSystemPropTypes.space);
-const FlatTableRowHeader = _ref => {
+export const FlatTableRowHeader = _ref => {
   let {
     align = "left",
     children,
@@ -23,6 +20,8 @@ const FlatTableRowHeader = _ref => {
     truncate,
     title,
     stickyAlignment = "left",
+    colspan,
+    rowspan,
     ...rest
   } = _ref;
   const id = useRef(guid());
@@ -44,16 +43,20 @@ const FlatTableRowHeader = _ref => {
     rightPosition: stickyAlignment === "right" ? rightPosition || 0 : undefined,
     align: align,
     "data-element": "flat-table-row-header",
-    colWidth: width,
+    width: width,
     py: py || "10px",
     px: px || 3,
     onClick: handleOnClick,
     tabIndex: expandable && onClick ? tabIndex : undefined,
     onKeyDown: handleOnKeyDown,
-    isTruncated: truncate,
+    truncate: truncate,
     expandable: expandable,
     stickyAlignment: stickyAlignment,
     id: id.current
+  }, colspan !== undefined && {
+    colSpan: Number(colspan)
+  }, rowspan !== undefined && {
+    rowSpan: Number(rowspan)
   }, rest), /*#__PURE__*/React.createElement(StyledFlatTableRowHeaderContent, {
     title: truncate && !title && typeof children === "string" ? children : title,
     expandable: expandable
@@ -63,50 +66,5 @@ const FlatTableRowHeader = _ref => {
     mr: "8px"
   }), children));
 };
-FlatTableRowHeader.propTypes = {
-  /** Styled system padding props */
-  ...paddingPropTypes,
-  /** Content alignment */
-  align: PropTypes.oneOf(["center", "left", "right"]),
-  /** RowHeader content */
-  children: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
-  /** Column width, pass a number to set a fixed width in pixels */
-  width: PropTypes.number,
-  /** Truncate cell content and add ellipsis to any text that overflows */
-  truncate: PropTypes.bool,
-  /** Title text to display if cell content truncates */
-  title: PropTypes.string,
-  /**
-   * @private
-   * @ignore
-   */
-  expandable: PropTypes.bool,
-  /**
-   * @private
-   * @ignore
-   */
-  onClick: PropTypes.func,
-  /**
-   * @private
-   * @ignore
-   */
-  onKeyDown: PropTypes.func,
-  /** Sets a custom vertical right border */
-  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,
-  /** 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.style.d.ts

@@ -0,0 +1,6 @@
+import { FlatTableRowHeaderProps } from "./flat-table-row-header.component";
+declare const StyledFlatTableRowHeader: import("styled-components").StyledComponent<"th", any, FlatTableRowHeaderProps, never>;
+declare const StyledFlatTableRowHeaderContent: import("styled-components").StyledComponent<"div", any, {
+    expandable?: boolean | undefined;
+}, never>;
+export { StyledFlatTableRowHeader, StyledFlatTableRowHeaderContent };