carbon-react 119.4.1 → 119.4.2

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

@@ -3,10 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.FlatTableRowDraggable = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _reactDnd = require("react-dnd");
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _reactDnd = require("react-dnd");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const FlatTableRowDraggable = _ref => {
   let {
@@ -15,7 +15,7 @@ const FlatTableRowDraggable = _ref => {
     findItem,
     moveItem
   } = _ref;
-  const originalIndex = findItem(id).index;
+  const originalIndex = Number(findItem?.(id).index);
   const [{
     isDragging
   }, drag] = (0, _reactDnd.useDrag)({
@@ -34,22 +34,19 @@ const FlatTableRowDraggable = _ref => {
       } = monitor.getItem();
       const didDrop = monitor.didDrop();
       if (!didDrop) {
-        moveItem(droppedId, oIndex);
+        moveItem?.(droppedId, Number(oIndex));
       }
     }
   });
   const [, drop] = (0, _reactDnd.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));
       }
     }
   });
@@ -60,17 +57,14 @@ const FlatTableRowDraggable = _ref => {
     ref: node => drag(drop(node))
   });
 };
+exports.FlatTableRowDraggable = FlatTableRowDraggable;
 FlatTableRowDraggable.propTypes = {
-  /** Array of FlatTableHeader or FlatTableCell. FlatTableRowHeader could also be passed. */
-  children: _propTypes.default.node.isRequired,
-  /** ID for use in drag and drop functionality */
-  id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
-  /** function to find an item in the list of draggable items */
-  findItem: _propTypes.default.func.isRequired,
-  /** function to reposition an item in the list of draggable items */
-  moveItem: _propTypes.default.func.isRequired,
-  /** item is draggable */
-  draggable: _propTypes.default.bool
+  "children": _propTypes.default.node,
+  "draggable": _propTypes.default.bool,
+  "findItem": _propTypes.default.func,
+  "id": _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
+  "moveItem": _propTypes.default.func
 };
+FlatTableRowDraggable.displayName = "FlatTableRowDraggable";
 var _default = FlatTableRowDraggable;
 exports.default = _default;

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.FlatTableRow = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _invariant = _interopRequireDefault(require("invariant"));
@@ -44,16 +44,18 @@ const FlatTableRow = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   } = _ref;
   const internalId = (0, _react.useRef)(id ?? (0, _guid.default)());
   const [isExpanded, setIsExpanded] = (0, _react.useState)(expanded);
-  let rowRef = (0, _react.useRef)();
-  if (ref) rowRef = ref;
+  let rowRef = (0, _react.useRef)(null);
+  if (ref) {
+    rowRef = ref;
+  }
   const firstColumnExpandable = expandableArea === "firstColumn";
   const [leftStickyCellWidths, setLeftStickyCellWidths] = (0, _react.useState)([]);
   const [rightStickyCellWidths, setRightStickyCellWidths] = (0, _react.useState)([]);
   const [leftPositions, setLeftPositions] = (0, _react.useState)([]);
   const [rightPositions, setRightPositions] = (0, _react.useState)([]);
   const childrenArray = (0, _react.useMemo)(() => _react.default.Children.toArray(children), [children]);
-  const lhsRowHeaderIndex = (0, _react.useMemo)(() => childrenArray.findIndex(child => child.type.displayName === _flatTableRowHeader.default.displayName && child.props.stickyAlignment !== "right"), [childrenArray]);
-  const rhsRowHeaderIndex = (0, _react.useMemo)(() => childrenArray.findIndex(child => child.type.displayName === _flatTableRowHeader.default.displayName && child.props.stickyAlignment === "right"), [childrenArray]);
+  const lhsRowHeaderIndex = (0, _react.useMemo)(() => childrenArray.findIndex(child => /*#__PURE__*/_react.default.isValidElement(child) && child.type.displayName === _flatTableRowHeader.default.displayName && child.props.stickyAlignment !== "right"), [childrenArray]);
+  const rhsRowHeaderIndex = (0, _react.useMemo)(() => childrenArray.findIndex(child => /*#__PURE__*/_react.default.isValidElement(child) && child.type.displayName === _flatTableRowHeader.default.displayName && child.props.stickyAlignment === "right"), [childrenArray]);
   const [tabIndex, setTabIndex] = (0, _react.useState)(-1);
   const noStickyColumnsOverlap = (0, _react.useMemo)(() => {
     const hasLhsColumn = lhsRowHeaderIndex !== -1;
@@ -68,6 +70,9 @@ const FlatTableRow = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     setSelectedId,
     selectedId
   } = (0, _react.useContext)(_flatTable.FlatTableThemeContext);
+  const {
+    isInSidebar
+  } = (0, _react.useContext)(_drawer.DrawerSidebarContext);
   const reportCellWidth = (0, _react.useCallback)((width, index) => {
     const isLeftSticky = index < lhsRowHeaderIndex;
     const copiedArray = isLeftSticky ? leftStickyCellWidths : rightStickyCellWidths;
@@ -83,7 +88,7 @@ const FlatTableRow = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     }
   }, [lhsRowHeaderIndex, leftStickyCellWidths, rightStickyCellWidths]);
   let interactiveRowProps = {};
-  const firstCellIndex = childrenArray[0].type === _flatTableCheckbox.default ? 1 : 0;
+  const firstCellIndex = /*#__PURE__*/_react.default.isValidElement(childrenArray[0]) && childrenArray[0].type === _flatTableCheckbox.default ? 1 : 0;
   const toggleExpanded = () => setIsExpanded(!isExpanded);
   function onKeyDown(ev) {
     const isEnterOrSpaceKey = _events.default.isEnterKey(ev) || _events.default.isSpaceKey(ev);
@@ -139,13 +144,13 @@ const FlatTableRow = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   }, [expanded]);
   (0, _react.useEffect)(() => {
     if (highlighted || selected) {
-      setSelectedId(internalId.current);
+      setSelectedId(String(internalId.current));
     }
   }, [highlighted, selected, setSelectedId]);
   (0, _react.useEffect)(() => {
     setTabIndex(selectedId === internalId.current ? 0 : -1);
   }, [selectedId]);
-  const rowComponent = isInSidebar => /*#__PURE__*/_react.default.createElement(_flatTableRow.default, _extends({
+  const rowComponent = () => /*#__PURE__*/_react.default.createElement(_flatTableRow.default, _extends({
     isInSidebar: isInSidebar,
     expandable: expandable,
     isSubRow: isSubRow,
@@ -167,9 +172,9 @@ const FlatTableRow = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     applyBorderLeft: applyBorderLeft,
     draggable: draggable,
     totalChildren: childrenArray.length,
-    id: internalId.current
+    id: String(internalId.current)
   }, interactiveRowProps, rest), _react.default.Children.map(children, (child, index) => {
-    return child && /*#__PURE__*/_react.default.cloneElement(child, {
+    return /*#__PURE__*/_react.default.isValidElement(child) && /*#__PURE__*/_react.default.cloneElement(child, {
       expandable: expandable && index === firstCellIndex,
       onClick: expandable && index === firstCellIndex && firstColumnExpandable ? () => toggleExpanded() : undefined,
       onKeyDown: expandable && index === firstCellIndex && firstColumnExpandable ? handleCellKeyDown : undefined,
@@ -180,70 +185,41 @@ const FlatTableRow = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
       ...child.props
     });
   }));
-  const draggableComponent = isInSidebar => /*#__PURE__*/_react.default.createElement(_flatTableRowDraggable.default, {
+  const draggableComponent = () => /*#__PURE__*/_react.default.createElement(_flatTableRowDraggable.default, {
     id: internalId.current,
     moveItem: moveItem,
     findItem: findItem
-  }, rowComponent(isInSidebar));
-  return /*#__PURE__*/_react.default.createElement(_drawer.DrawerSidebarContext.Consumer, null, _ref2 => {
-    let {
-      isInSidebar
-    } = _ref2;
-    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, draggable ? draggableComponent(isInSidebar) : rowComponent(isInSidebar), isExpanded && subRows && _react.default.Children.map(subRows, (child, index) => child && /*#__PURE__*/_react.default.cloneElement(child, {
-      isSubRow: true,
-      isFirstSubRow: index === 0,
+  }, rowComponent());
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, draggable ? draggableComponent() : rowComponent(), isExpanded && subRows && _react.default.Children.map(subRows, (child, index) => child && /*#__PURE__*/_react.default.cloneElement(child, {
+    isSubRow: true,
+    isFirstSubRow: index === 0,
+    ...( /*#__PURE__*/_react.default.isValidElement(child) && {
       ...child.props
-    })));
-  });
+    })
+  })));
 });
+exports.FlatTableRow = FlatTableRow;
 FlatTableRow.propTypes = {
-  /** Overrides default cell color, provide design token, any color from palette or any valid css color value. */
-  bgColor: _propTypes.default.string,
-  /** Array of FlatTableHeader or FlatTableCell. FlatTableRowHeader could also be passed. */
-  children: _propTypes.default.node.isRequired,
-  /** Function to handle click event. If provided the Component could be focused with tab key. */
-  onClick: _propTypes.default.func,
-  /** Allows developers to manually control highlighted state for the row. */
-  highlighted: _propTypes.default.bool,
-  /** Allows developers to manually control selected state for the row. */
-  selected: _propTypes.default.bool,
-  /** Allows the row to be expanded, must be used with the `subRows` prop. */
-  expandable: _propTypes.default.bool,
-  /** Sub rows to be shown when the row is expanded, must be used with the `expandable` prop. */
-  subRows: _propTypes.default.arrayOf(_propTypes.default.node),
-  /** Area to click to open sub rows when expandable. Default is `wholeRow` */
-  expandableArea: _propTypes.default.oneOf(["wholeRow", "firstColumn"]),
-  /** Sets an expandable row to be expanded on start */
-  expanded: _propTypes.default.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.default.string,
-  /** Sets the weight of the bottom border in the row */
-  horizontalBorderSize: _propTypes.default.oneOf(["small", "medium", "large"]),
-  /** @ignore @private */
-  isSubRow: _propTypes.default.bool,
-  /** @ignore @private */
-  isFirstSubRow: _propTypes.default.bool,
-  /** @ignore @private position in header if multiple rows */
-  stickyOffset: _propTypes.default.number,
-  /** @ignore @private applies a border-left to the first child */
-  applyBorderLeft: _propTypes.default.bool,
-  /** ID for use in drag and drop functionality
-   * @private
-   * @ignore
-   */
-  id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
-  /**
-   * @private
-   * @ignore
-   */
-  findItem: _propTypes.default.func,
-  /**
-   * @private
-   * @ignore
-   */
-  moveItem: _propTypes.default.func,
-  /** @ignore @private position in header if multiple rows */
-  draggable: _propTypes.default.bool
+  "applyBorderLeft": _propTypes.default.bool,
+  "bgColor": _propTypes.default.string,
+  "children": _propTypes.default.node,
+  "draggable": _propTypes.default.bool,
+  "expandable": _propTypes.default.bool,
+  "expandableArea": _propTypes.default.oneOf(["firstColumn", "wholeRow"]),
+  "expanded": _propTypes.default.bool,
+  "findItem": _propTypes.default.func,
+  "highlighted": _propTypes.default.bool,
+  "horizontalBorderColor": _propTypes.default.string,
+  "horizontalBorderSize": _propTypes.default.oneOf(["large", "medium", "small"]),
+  "id": _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
+  "isFirstSubRow": _propTypes.default.bool,
+  "isSubRow": _propTypes.default.bool,
+  "moveItem": _propTypes.default.func,
+  "onClick": _propTypes.default.func,
+  "selected": _propTypes.default.bool,
+  "stickyOffset": _propTypes.default.number,
+  "subRows": _propTypes.default.node
 };
+FlatTableRow.displayName = "FlatTableRow";
 var _default = FlatTableRow;
 exports.default = _default;

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

@@ -170,7 +170,7 @@ const StyledFlatTableRow = _styledComponents.default.tr`
         `}
       }
 
-      ${stickyOffset > 0 && (0, _styledComponents.css)`
+      ${stickyOffset !== undefined && stickyOffset > 0 && (0, _styledComponents.css)`
         && th {
           top: ${stickyOffset}px;
         }
@@ -388,8 +388,7 @@ const StyledFlatTableRow = _styledComponents.default.tr`
 }}
 `;
 StyledFlatTableRow.defaultProps = {
-  theme: _themes.baseTheme,
-  horizontalBorderSize: "small"
+  theme: _themes.baseTheme
 };
 var _default = StyledFlatTableRow;
 exports.default = _default;

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

@@ -3,11 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.FlatTableRowHeader = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _propTypes2 = _interopRequireDefault(require("@styled-system/prop-types"));
-var _utils = require("../../../style/utils");
 var _icon = _interopRequireDefault(require("../../icon"));
 var _flatTableRowHeader = require("./flat-table-row-header.style");
 var _flatTable = require("../flat-table.component");
@@ -16,7 +14,6 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-const paddingPropTypes = (0, _utils.filterStyledSystemPaddingProps)(_propTypes2.default.space);
 const FlatTableRowHeader = _ref => {
   let {
     align = "left",
@@ -32,6 +29,8 @@ const FlatTableRowHeader = _ref => {
     truncate,
     title,
     stickyAlignment = "left",
+    colspan,
+    rowspan,
     ...rest
   } = _ref;
   const id = (0, _react.useRef)((0, _guid.default)());
@@ -53,16 +52,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.default.createElement(_flatTableRowHeader.StyledFlatTableRowHeaderContent, {
     title: truncate && !title && typeof children === "string" ? children : title,
     expandable: expandable
@@ -72,51 +75,7 @@ const FlatTableRowHeader = _ref => {
     mr: "8px"
   }), children));
 };
-FlatTableRowHeader.propTypes = {
-  /** Styled system padding props */
-  ...paddingPropTypes,
-  /** Content alignment */
-  align: _propTypes.default.oneOf(["center", "left", "right"]),
-  /** RowHeader content */
-  children: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.string]),
-  /** Column width, pass a number to set a fixed width in pixels */
-  width: _propTypes.default.number,
-  /** Truncate cell content and add ellipsis to any text that overflows */
-  truncate: _propTypes.default.bool,
-  /** Title text to display if cell content truncates */
-  title: _propTypes.default.string,
-  /**
-   * @private
-   * @ignore
-   */
-  expandable: _propTypes.default.bool,
-  /**
-   * @private
-   * @ignore
-   */
-  onClick: _propTypes.default.func,
-  /**
-   * @private
-   * @ignore
-   */
-  onKeyDown: _propTypes.default.func,
-  /** Sets a custom vertical right border */
-  verticalBorder: _propTypes.default.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.default.string,
-  /** Defines whether the column should be sticky on the left or right hand side of the Table */
-  stickyAlignment: _propTypes.default.oneOf(["left", "right"]),
-  /**
-   * @private
-   * @ignore
-   */
-  leftPosition: _propTypes.default.number,
-  /**
-   * @private
-   * @ignore
-   */
-  rightPosition: _propTypes.default.number
-};
+exports.FlatTableRowHeader = FlatTableRowHeader;
 FlatTableRowHeader.displayName = "FlatTableRowHeader";
 var _default = FlatTableRowHeader;
 exports.default = _default;

package/lib/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 };

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

@@ -21,10 +21,10 @@ const StyledFlatTableRowHeader = _styledComponents.default.th`
   let {
     align,
     theme,
-    colWidth,
+    width,
     leftPosition,
     rightPosition,
-    isTruncated,
+    truncate,
     expandable,
     verticalBorder,
     verticalBorderColor,
@@ -44,22 +44,22 @@ const StyledFlatTableRowHeader = _styledComponents.default.th`
     padding: 0;
     z-index: ${_base.default.zIndex.overlay};
 
-    ${colWidth && (0, _styledComponents.css)`
-      width: ${colWidth}px;
+    ${width && (0, _styledComponents.css)`
+      width: ${width}px;
     `}
 
     &&&& {
       > div {
         box-sizing: border-box;
 
-        ${isTruncated && (0, _styledComponents.css)`
+        ${truncate && (0, _styledComponents.css)`
           text-overflow: ellipsis;
           overflow: hidden;
           white-space: nowrap;
         `}
 
-        ${colWidth && (0, _styledComponents.css)`
-          width: ${colWidth}px;
+        ${width && (0, _styledComponents.css)`
+          width: ${width}px;
         `}
  
         ${_styledSystem.padding}

package/lib/components/flat-table/flat-table-row-header/index.d.ts

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

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

@@ -0,0 +1,42 @@
+import React from "react";
+import { MarginProps } from "styled-system";
+export interface FlatTableProps extends MarginProps {
+    /** The HTML id of the element that contains a description of this table. */
+    ariaDescribedby?: string;
+    /** A string to render as the table's caption */
+    caption?: string;
+    /** FlatTableHead and FlatTableBody */
+    children: React.ReactNode;
+    /** `FlatTable` color theme */
+    colorTheme?: "light" | "transparent-base" | "transparent-white" | "dark";
+    /** Content to be rendered at the foot of the table */
+    footer?: React.ReactNode;
+    /** If true, the header does not scroll with the content */
+    hasStickyFooter?: boolean;
+    /** If true, the header does not scroll with the content */
+    hasStickyHead?: boolean;
+    /** Set the height of the table. String can be any valid CSS string, numbers will be converted to pixels. */
+    height?: string | number;
+    /** Set the min-height of the table. String can be any valid CSS string, numbers will be converted to pixels. */
+    minHeight?: string | number;
+    /** Toggles the zebra striping for the table rows */
+    isZebra?: boolean;
+    /** Used to define the tables size Renders as: 'compact', 'small', 'medium', 'large' and 'extraLarge' */
+    size?: "compact" | "small" | "medium" | "large" | "extraLarge";
+    /** Applies max-height of 100% to FlatTable if true */
+    hasMaxHeight?: boolean;
+    /** Set the overflow X of the table wrapper. Any valid CSS string */
+    overflowX?: string;
+    /** Width of the table. Any valid CSS string */
+    width?: string;
+}
+export interface FlatTableThemeContextProps extends Pick<FlatTableProps, "colorTheme" | "size"> {
+    selectedId?: string;
+    setSelectedId: (id: string) => void;
+}
+export declare const FlatTableThemeContext: React.Context<FlatTableThemeContextProps>;
+export declare const FlatTable: {
+    ({ caption, children, hasStickyHead, colorTheme, footer, hasStickyFooter, height, isZebra, size, hasMaxHeight, ariaDescribedby, minHeight, overflowX, width, ...rest }: FlatTableProps): React.JSX.Element;
+    displayName: string;
+};
+export default FlatTable;