carbon-react 119.4.0 → 119.4.2

package/esm/__spec_helper__/mock-resize-observer.js

@@ -2,10 +2,25 @@ const setupResizeObserverMock = () => {
   if (!window) {
     return;
   }
-  window.ResizeObserver = window.ResizeObserver || jest.fn().mockImplementation(() => ({
-    disconnect: jest.fn(),
-    observe: jest.fn(),
-    unobserve: jest.fn()
-  }));
+  window.ResizeObserver = window.ResizeObserver || jest.fn().mockImplementation(callback => {
+    let hasCalledCallback = false;
+    const observer = {
+      disconnect: jest.fn(),
+      // observe mock needs to actually call the callback straight away, as this is what a real ResizeObserver does
+      // and this behaviour is needed for the FixedNavigationBarContextProvider to work properly.
+      // Note that we must only call the callback once per ResizeObserver instance, to avoid stack overflows in
+      // react-virtual.
+      observe: jest.fn(target => {
+        if (!hasCalledCallback) {
+          hasCalledCallback = true;
+          callback([{
+            target
+          }], observer);
+        }
+      }),
+      unobserve: jest.fn()
+    };
+    return observer;
+  });
 };
 export default setupResizeObserverMock;

package/esm/__spec_helper__/test-utils.d.ts

@@ -6,7 +6,7 @@ import { mockMatchMedia } from "./mock-match-media";
 declare const toCSSCase: (str: string) => string;
 declare const assertStyleMatch: <Props>(styleSpec: {
     [key: string]: string | number | undefined;
-}, component: ReactWrapper<Props, {}, import("react").Component<{}, {}, any>> | ShallowWrapper<Props, {}, import("react").Component<{}, {}, any>> | ReactTestRendererJSON | ReactTestRendererJSON[] | null, opts?: jest.Options) => void;
+}, component: HTMLElement | ReactWrapper<Props, {}, import("react").Component<{}, {}, any>> | ShallowWrapper<Props, {}, import("react").Component<{}, {}, any>> | ReactTestRendererJSON | ReactTestRendererJSON[] | null, opts?: jest.Options) => void;
 declare const makeArrayKeys: (n: number) => number[];
 declare const keyboard: Record<string, () => void>;
 declare const simulate: {

package/esm/components/flat-table/cell-sizes.style.d.ts

@@ -0,0 +1,28 @@
+declare const _default: {
+    compact: {
+        height: string;
+        fontSize: string;
+        paddingSize: string;
+    };
+    small: {
+        height: string;
+        fontSize: string;
+        paddingSize: string;
+    };
+    medium: {
+        height: string;
+        fontSize: string;
+        paddingSize: string;
+    };
+    large: {
+        height: string;
+        fontSize: string;
+        paddingSize: string;
+    };
+    extraLarge: {
+        height: string;
+        fontSize: string;
+        paddingSize: string;
+    };
+};
+export default _default;

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

@@ -0,0 +1,7 @@
+import React from "react";
+export interface FlatTableBodyProps {
+    /** Array of FlatTableRow. */
+    children: React.ReactNode;
+}
+export declare const FlatTableBody: React.ForwardRefExoticComponent<FlatTableBodyProps & React.RefAttributes<HTMLTableSectionElement>>;
+export default FlatTableBody;

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

@@ -11,7 +11,8 @@ const FlatTableBody = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   }, rest), children);
 });
 FlatTableBody.propTypes = {
-  /** Array of FlatTableRow. */
-  children: PropTypes.node.isRequired
+  "children": PropTypes.node
 };
+export { FlatTableBody };
+FlatTableBody.displayName = "FlatTableBody";
 export default FlatTableBody;

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

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

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

@@ -0,0 +1,9 @@
+import React from "react";
+export interface FlatTableBodyDraggableProps {
+    /** Array of FlatTableRow. */
+    children: React.ReactNode;
+    /** Callback fired when order is changed */
+    getOrder?: (draggableItemIds?: number[]) => void;
+}
+export declare const FlatTableBodyDraggable: ({ children, getOrder, ...rest }: FlatTableBodyDraggableProps) => React.JSX.Element;
+export default FlatTableBodyDraggable;

package/esm/components/flat-table/flat-table-body-draggable/flat-table-body-draggable.component.js

@@ -1,8 +1,8 @@
 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, { useEffect, useState, useRef } from "react";
+import PropTypes from "prop-types";
 import { useDrop, DndProvider } from "react-dnd";
 import { HTML5Backend } from "react-dnd-html5-backend";
-import PropTypes from "prop-types";
 import StyledIcon from "../../icon/icon.style";
 import StyledFlatTableBodyDraggable from "./flat-table-body-draggable.style";
 import FlatTableCell from "../flat-table-cell/flat-table-cell.component";
@@ -20,7 +20,7 @@ const DropTarget = _ref => {
     },
     drop() {
       setIsDragging(false);
-      getOrder();
+      getOrder?.();
     }
   });
   return /*#__PURE__*/React.createElement(StyledFlatTableBodyDraggable, _extends({
@@ -29,11 +29,7 @@ const DropTarget = _ref => {
     isDragging: isDragging
   }, rest), children);
 };
-DropTarget.propTypes = {
-  children: PropTypes.node.isRequired,
-  getOrder: PropTypes.func
-};
-const FlatTableBodyDraggable = _ref2 => {
+export const FlatTableBodyDraggable = _ref2 => {
   let {
     children,
     getOrder,
@@ -49,7 +45,7 @@ const FlatTableBodyDraggable = _ref2 => {
     }
   }, [children]);
   const findItem = id => {
-    const draggableItem = draggableItems.filter(item => `${item.props.id}` === id)[0];
+    const draggableItem = draggableItems.filter(item => /*#__PURE__*/React.isValidElement(item) && `${item.props.id}` === id)[0];
     return {
       draggableItem,
       index: draggableItems.indexOf(draggableItem)
@@ -70,14 +66,14 @@ const FlatTableBodyDraggable = _ref2 => {
     if (!getOrder) {
       return;
     }
-    const draggableItemIds = draggableItems.map(draggableItem => draggableItem.props.id);
+    const draggableItemIds = draggableItems.map(draggableItem => /*#__PURE__*/React.isValidElement(draggableItem) && draggableItem.props.id);
     getOrder(draggableItemIds);
   };
   return /*#__PURE__*/React.createElement(DndProvider, {
     backend: HTML5Backend
   }, /*#__PURE__*/React.createElement(DropTarget, _extends({
     getOrder: getItemsId
-  }, rest), draggableItems.map(item => /*#__PURE__*/React.cloneElement(item, {
+  }, rest), draggableItems.map(item => /*#__PURE__*/React.isValidElement(item) && /*#__PURE__*/React.cloneElement(item, {
     id: `${item.props.id}`,
     moveItem,
     findItem,
@@ -88,10 +84,4 @@ const FlatTableBodyDraggable = _ref2 => {
     type: "drag"
   })), item.props.children]))));
 };
-FlatTableBodyDraggable.propTypes = {
-  /** Callback fired when order is changed */
-  getOrder: PropTypes.func,
-  /** Array of FlatTableRow. */
-  children: PropTypes.node.isRequired
-};
 export default FlatTableBodyDraggable;

package/esm/components/flat-table/flat-table-body-draggable/flat-table-body-draggable.style.d.ts

@@ -0,0 +1,4 @@
+declare const StyledFlatTableBodyDraggable: import("styled-components").StyledComponent<"tbody", any, {
+    isDragging: boolean;
+}, never>;
+export default StyledFlatTableBodyDraggable;

package/esm/components/flat-table/flat-table-body-draggable/index.d.ts

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

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

@@ -0,0 +1,69 @@
+import React from "react";
+import { PaddingProps } from "styled-system";
+import { TableBorderSize, TableCellAlign } from "..";
+export interface FlatTableCellProps extends PaddingProps {
+    /** Content alignment */
+    align?: TableCellAlign;
+    /** Cell content */
+    children?: React.ReactNode;
+    /** Number of columns that a cell should span */
+    colspan?: number | string;
+    /** Number of rows that a cell should span */
+    rowspan?: number | string;
+    /** 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;
+    /** Sets an id string on the DOM element */
+    id?: string;
+    /**
+     * @private
+     * @ignore
+     */
+    expandable?: boolean;
+    /**
+     * @private
+     * @ignore
+     */
+    onClick?: () => void;
+    /**
+     * @private
+     * @ignore
+     */
+    onKeyDown?: () => void;
+    /**
+     * @private
+     * @ignore
+     * Sets the left position when sticky column found
+     */
+    leftPosition?: number;
+    /**
+     * @private
+     * @ignore
+     * Sets the right position when sticky column found
+     */
+    rightPosition?: number;
+    /**
+     * @private
+     * @ignore
+     * Index of cell within row
+     */
+    cellIndex?: number;
+    /**
+     * @private
+     * @ignore
+     * Callback to report the offsetWidth
+     */
+    reportCellWidth?: (offset: number, index?: number) => void;
+}
+export declare const FlatTableCell: {
+    ({ align, children, pl, expandable, onClick, onKeyDown, reportCellWidth, cellIndex, leftPosition, rightPosition, width, truncate, title, colspan, rowspan, ...rest }: FlatTableCellProps): React.JSX.Element;
+    displayName: string;
+};
+export default FlatTableCell;

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

@@ -1,19 +1,14 @@
 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, useState, useEffect, useContext } from "react";
 import PropTypes from "prop-types";
-import styledSystemPropTypes from "@styled-system/prop-types";
 import { StyledFlatTableCell, StyledCellContent } from "./flat-table-cell.style";
-import { filterStyledSystemPaddingProps } from "../../../style/utils";
 import Icon from "../../icon";
 import { FlatTableThemeContext } from "../flat-table.component";
 import guid from "../../../__internal__/utils/helpers/guid";
-const paddingPropTypes = filterStyledSystemPaddingProps(styledSystemPropTypes.space);
-const FlatTableCell = _ref => {
+export const FlatTableCell = _ref => {
   let {
     align = "left",
     children,
-    colspan,
-    rowspan,
     pl,
     expandable = false,
     onClick,
@@ -25,6 +20,8 @@ const FlatTableCell = _ref => {
     width,
     truncate = false,
     title,
+    colspan,
+    rowspan,
     ...rest
   } = _ref;
   const ref = useRef(null);
@@ -49,8 +46,6 @@ const FlatTableCell = _ref => {
     ref: ref,
     align: align,
     "data-element": "flat-table-cell",
-    colSpan: colspan,
-    rowSpan: rowspan,
     pl: pl,
     onClick: expandable && onClick ? onClick : undefined,
     tabIndex: expandable && onClick ? tabIndex : undefined,
@@ -59,6 +54,10 @@ const FlatTableCell = _ref => {
     isTruncated: truncate,
     expandable: expandable,
     id: id.current
+  }, colspan !== undefined && {
+    colSpan: Number(colspan)
+  }, rowspan !== undefined && {
+    rowSpan: Number(rowspan)
   }, rest), /*#__PURE__*/React.createElement(StyledCellContent, {
     title: truncate && !title && typeof children === "string" ? children : title,
     expandable: expandable
@@ -68,66 +67,5 @@ const FlatTableCell = _ref => {
     mr: "8px"
   }), children));
 };
-FlatTableCell.propTypes = {
-  /** Styled system padding props */
-  ...paddingPropTypes,
-  /** Content alignment */
-  align: PropTypes.oneOf(["center", "left", "right"]),
-  /** Cell content */
-  children: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
-  /** Number of columns that a cell should span */
-  colspan: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  /** Number of rows that a 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,
-  /** 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,
-  /**
-   * @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,
-  /** 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
-};
 FlatTableCell.displayName = "FlatTableCell";
 export default FlatTableCell;

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

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

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

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

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

@@ -0,0 +1,45 @@
+import React from "react";
+import { TagProps } from "../../../__internal__/utils/helpers/tags";
+export interface FlatTableCheckboxProps extends TagProps {
+    /** Prop to polymorphically render either a 'th' or 'td' element */
+    as?: "td" | "th";
+    /** Prop to set checked prop on Checkbox */
+    checked?: boolean;
+    /** Callback to be called onChange in Checkbox */
+    onChange?: (ev: React.ChangeEvent<HTMLElement>) => void;
+    /** Whether to render the checkbox or not, defaults to true */
+    selectable?: boolean;
+    /** Callback function to be called when click event received */
+    onClick?: (ev: React.MouseEvent<HTMLElement>) => void;
+    /** The id of the element that labels the input */
+    ariaLabelledBy?: string;
+    /**
+     * @private
+     * @ignore
+     * Sets the left position when sticky column found
+     */
+    leftPosition?: number;
+    /**
+     * @private
+     * @ignore
+     * Sets the right position when sticky column found
+     */
+    rightPosition?: number;
+    /**
+     * @private
+     * @ignore
+     * Index of cell within row
+     */
+    cellIndex?: number;
+    /**
+     * @private
+     * @ignore
+     * Callback to report the offsetWidth
+     */
+    reportCellWidth?: (offset: number, index?: number) => void;
+}
+export declare const FlatTableCheckbox: {
+    ({ as, checked, onChange, selectable, onClick, leftPosition, rightPosition, cellIndex, reportCellWidth, ariaLabelledBy, ...rest }: FlatTableCheckboxProps): React.JSX.Element;
+    displayName: string;
+};
+export default FlatTableCheckbox;

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

@@ -4,7 +4,7 @@ import PropTypes from "prop-types";
 import StyledFlatTableCheckbox from "./flat-table-checkbox.style";
 import { Checkbox } from "../../checkbox";
 import Events from "../../../__internal__/utils/helpers/events/events";
-const FlatTableCheckbox = _ref => {
+export const FlatTableCheckbox = _ref => {
   let {
     as = "td",
     checked,
@@ -52,43 +52,5 @@ const FlatTableCheckbox = _ref => {
     onKeyDown: handleKeyDown
   }));
 };
-FlatTableCheckbox.propTypes = {
-  /** Prop to polymorphically render either a 'th' or 'td' element */
-  as: PropTypes.oneOf(["td", "th"]),
-  /** Prop to set checked prop on Checkbox */
-  checked: PropTypes.bool,
-  /** Callback to be called onChange in Checkbox */
-  onChange: PropTypes.func,
-  /** Callback function to be called when click event received */
-  onClick: PropTypes.func,
-  /** Whether to render the checkbox or not, defaults to true */
-  selectable: PropTypes.bool,
-  /** The id of the element that labels the input */
-  ariaLabelledBy: PropTypes.string,
-  /**
-   * @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
-};
 FlatTableCheckbox.displayName = "FlatTableCheckbox";
 export default FlatTableCheckbox;

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

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

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

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

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

@@ -0,0 +1,7 @@
+import React from "react";
+export interface FlatTableHeadProps {
+    /** Array of FlatTableRow. */
+    children: React.ReactNode;
+}
+export declare const FlatTableHead: ({ children, ...rest }: FlatTableHeadProps) => React.JSX.Element;
+export default FlatTableHead;

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

@@ -1,24 +1,23 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, useRef } from "react";
 import PropTypes from "prop-types";
 import StyledFlatTableHead from "./flat-table-head.style";
 import FlatTableRowHeader from "../flat-table-row-header";
 const getRefs = length => Array.from({
   length
 }, () => /*#__PURE__*/React.createRef());
-const FlatTableHead = _ref => {
+export const FlatTableHead = _ref => {
   let {
     children,
     ...rest
   } = _ref;
   const [rowHeights, setRowHeights] = useState([]);
-  const refs = getRefs(React.Children.count(children));
+  const refs = useRef(getRefs(React.Children.count(children)));
   let hasFlatTableRowHeader;
   useEffect(() => {
     if (React.Children.count(children) > 1) {
-      setRowHeights(refs.map(ref => ref.current.clientHeight));
+      setRowHeights(refs.current.map(ref => ref.current?.clientHeight || 0));
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [children]);
   if (React.Children.count(children) === 1) {
     return /*#__PURE__*/React.createElement(StyledFlatTableHead, rest, children);
   }
@@ -27,16 +26,12 @@ const FlatTableHead = _ref => {
        This is only needed when the preceding row has rowSpans applied, 
        as in any other use case the rows will all have FlatTableRowHeaders */
     const previousRowHasHeader = !!hasFlatTableRowHeader;
-    hasFlatTableRowHeader = React.Children.toArray(child.props.children).find(c => c.type === FlatTableRowHeader);
-    return /*#__PURE__*/React.cloneElement(child, {
-      ...child.props,
+    hasFlatTableRowHeader = /*#__PURE__*/React.isValidElement(child) && !!React.Children.toArray(child.props.children).find(c => /*#__PURE__*/React.isValidElement(c) && c.type.displayName === FlatTableRowHeader.displayName);
+    return /*#__PURE__*/React.isValidElement(child) && /*#__PURE__*/React.cloneElement(child, {
       stickyOffset: rowHeights.slice(0, index).reduce((a, b) => a + b, 0),
-      ref: refs[index],
+      ref: refs.current[index],
       applyBorderLeft: previousRowHasHeader && !hasFlatTableRowHeader
     });
   }));
 };
-FlatTableHead.propTypes = {
-  children: PropTypes.node.isRequired
-};
 export default FlatTableHead;

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

@@ -0,0 +1,2 @@
+declare const StyledFlatTableHead: import("styled-components").StyledComponent<"thead", any, {}, never>;
+export default StyledFlatTableHead;

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

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

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

@@ -0,0 +1,3 @@
+import { FlatTableProps } from "..";
+declare const getAlternativeBackgroundColor: (colorTheme: FlatTableProps["colorTheme"]) => "var(--colorsActionMinor100)" | "var(--colorsUtilityYang100)" | "var(--colorsUtilityMajor025)" | "var(--colorsActionMinor550)";
+export default getAlternativeBackgroundColor;

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

@@ -0,0 +1,55 @@
+import React from "react";
+import { PaddingProps } from "styled-system";
+import { TableBorderSize, TableCellAlign } from "..";
+export interface FlatTableHeaderProps extends PaddingProps {
+    /** Content alignment */
+    align?: TableCellAlign;
+    /** If true sets alternative background color */
+    alternativeBgColor?: boolean;
+    /** Header content */
+    children?: React.ReactNode;
+    /** 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 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;
+    /** Sets an id string on the DOM element */
+    id?: string;
+    /**
+     * @private
+     * @ignore
+     * Sets the left position when sticky column found
+     */
+    leftPosition?: number;
+    /**
+     * @private
+     * @ignore
+     * Sets the right position when sticky column found
+     */
+    rightPosition?: number;
+    /**
+     * @private
+     * @ignore
+     * Index of cell within row
+     */
+    cellIndex?: number;
+    /**
+     * @private
+     * @ignore
+     * Callback to report the offsetWidth
+     */
+    reportCellWidth?: (offset: number, index?: number) => void;
+}
+export declare const FlatTableHeader: {
+    ({ align, children, colspan, rowspan, width, py, px, reportCellWidth, cellIndex, leftPosition, rightPosition, ...rest }: FlatTableHeaderProps): React.JSX.Element;
+    defaultProps: {
+        align: string;
+    };
+    displayName: string;
+};
+export default FlatTableHeader;