carbon-react 119.4.0 → 119.4.2

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;

package/lib/components/flat-table/flat-table.component.js

@@ -3,13 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.FlatTableThemeContext = void 0;
+exports.default = exports.FlatTableThemeContext = exports.FlatTable = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _propTypes2 = _interopRequireDefault(require("@styled-system/prop-types"));
 var _flatTable = require("./flat-table.style");
 var _drawer = require("../drawer");
-var _utils = require("../../style/utils");
 var _events = _interopRequireDefault(require("../../__internal__/utils/helpers/events/events"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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); }
@@ -19,19 +17,18 @@ const FlatTableThemeContext = /*#__PURE__*/_react.default.createContext({
   setSelectedId: () => {}
 });
 exports.FlatTableThemeContext = FlatTableThemeContext;
-const marginPropTypes = (0, _utils.filterStyledSystemMarginProps)(_propTypes2.default.space);
 const FOCUSABLE_ROW_AND_CELL_QUERY = "tbody tr, tbody tr td, tbody tr th";
 const FlatTable = _ref => {
   let {
     caption,
     children,
     hasStickyHead,
-    colorTheme,
+    colorTheme = "dark",
     footer,
     hasStickyFooter = false,
     height,
     isZebra,
-    size,
+    size = "medium",
     hasMaxHeight = false,
     ariaDescribedby,
     minHeight,
@@ -50,17 +47,18 @@ const FlatTable = _ref => {
   const tableStylingProps = {
     caption,
     isZebra,
-    size
+    size,
+    "aria-describedby": ariaDescribedby
   };
-  if (ariaDescribedby) {
-    tableStylingProps["aria-describedby"] = ariaDescribedby;
-  }
+  const {
+    isInSidebar
+  } = (0, _react.useContext)(_drawer.DrawerSidebarContext);
   (0, _react.useLayoutEffect)(() => {
     const findRow = (rows, isFirstCol) => rows.find((row, index) => {
       const cells = Array.from(row.querySelectorAll("td, th"));
       const cell = isFirstCol ? cells.shift() : cells.pop();
       const rowSpan = cell?.getAttribute("rowspan");
-      return rowSpan >= index + 1;
+      return rowSpan && Number(rowSpan) >= index + 1;
     });
 
     /* istanbul ignore else */
@@ -146,86 +144,48 @@ const FlatTable = _ref => {
       setSelectedId(focusableArray[0]?.getAttribute("id") || "");
     }
   }, [selectedId]);
-  return /*#__PURE__*/_react.default.createElement(_drawer.DrawerSidebarContext.Consumer, null, _ref2 => {
-    let {
-      isInSidebar
-    } = _ref2;
-    return /*#__PURE__*/_react.default.createElement(_flatTable.StyledFlatTableWrapper, _extends({
-      ref: wrapperRef,
-      "data-component": "flat-table-wrapper",
-      isInSidebar: isInSidebar,
-      hasStickyHead: hasStickyHead,
-      colorTheme: colorTheme,
-      minHeight: minHeight,
-      overflowY: !isInSidebar && (hasStickyHead || hasStickyFooter) ? "auto" : undefined,
-      height: addDefaultHeight && !hasMaxHeight ? "99%" : height,
-      maxHeight: hasMaxHeight ? "100%" : undefined,
-      display: "flex",
-      flexDirection: "column",
-      justifyContent: hasStickyFooter || height ? "space-between" : undefined,
-      tabIndex: "0",
-      role: "region",
-      overflowX: width ? "hidden" : undefined,
-      width: width,
-      hasStickyFooter: hasStickyFooter,
-      hasVerticalScrollbar: hasVerticalScrollbar,
-      hasHorizontalScrollbar: hasHorizontalScrollbar,
-      hasFooter: !!footer,
-      firstColRowSpanIndex: firstColRowSpanIndex,
-      lastColRowSpanIndex: lastColRowSpanIndex,
-      onKeyDown: handleKeyDown
-    }, rest), /*#__PURE__*/_react.default.createElement(_flatTable.StyledTableContainer, {
-      overflowX: overflowX,
-      width: width
-    }, /*#__PURE__*/_react.default.createElement(_flatTable.StyledFlatTable, _extends({
-      ref: tableRef,
-      "data-component": "flat-table"
-    }, tableStylingProps), caption ? /*#__PURE__*/_react.default.createElement("caption", null, caption) : null, /*#__PURE__*/_react.default.createElement(FlatTableThemeContext.Provider, {
-      value: {
-        colorTheme,
-        size,
-        setSelectedId,
-        selectedId
-      }
-    }, children))), footer && /*#__PURE__*/_react.default.createElement(_flatTable.StyledFlatTableFooter, {
-      hasStickyFooter: hasStickyFooter
-    }, footer));
-  });
-};
-FlatTable.propTypes = {
-  ...marginPropTypes,
-  /** The HTML id of the element that contains a description of this table. */
-  ariaDescribedby: _propTypes.default.string,
-  /** A string to render as the table's caption */
-  caption: _propTypes.default.string,
-  /** FlatTableHead and FlatTableBody */
-  children: _propTypes.default.node.isRequired,
-  /** If true, the header does not scroll with the content */
-  hasStickyHead: _propTypes.default.bool,
-  /** `FlatTable` color theme */
-  colorTheme: _propTypes.default.oneOf(["light", "transparent-base", "transparent-white", "dark"]),
-  /** Content to be rendered at the foot of the table */
-  footer: _propTypes.default.node,
-  /** If true, the header does not scroll with the content */
-  hasStickyFooter: _propTypes.default.bool,
-  /** Set the height of the table. String can be any valid CSS string, numbers will be converted to pixels. */
-  height: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
-  /** Set the min-height of the table. A string can be any valid CSS string, numbers will be converted to pixels. */
-  minHeight: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
-  /** Toggles the zebra striping for the table rows */
-  isZebra: _propTypes.default.bool,
-  /** Used to define the tables size Renders as: 'compact', 'small', 'medium', 'large' and 'extraLarge' */
-  size: _propTypes.default.oneOf(["compact", "small", "medium", "large", "extraLarge"]),
-  /** Applies max-height of 100% to FlatTable if true */
-  hasMaxHeight: _propTypes.default.bool,
-  /** Set the overflow X of the table wrapper. Any valid CSS string */
-  overflowX: _propTypes.default.string,
-  /** Width of the table. Any valid CSS string */
-  width: _propTypes.default.string
-};
-FlatTable.defaultProps = {
-  colorTheme: "dark",
-  size: "medium"
+  return /*#__PURE__*/_react.default.createElement(_flatTable.StyledFlatTableWrapper, _extends({
+    ref: wrapperRef,
+    "data-component": "flat-table-wrapper",
+    isInSidebar: isInSidebar,
+    hasStickyHead: hasStickyHead,
+    colorTheme: colorTheme,
+    minHeight: minHeight,
+    overflowY: !isInSidebar && (hasStickyHead || hasStickyFooter) ? "auto" : undefined,
+    height: addDefaultHeight && !hasMaxHeight ? "99%" : height,
+    maxHeight: hasMaxHeight ? "100%" : undefined,
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: hasStickyFooter || height ? "space-between" : undefined,
+    tabIndex: 0,
+    role: "region",
+    overflowX: width ? "hidden" : undefined,
+    width: width,
+    hasStickyFooter: hasStickyFooter,
+    hasVerticalScrollbar: hasVerticalScrollbar,
+    hasHorizontalScrollbar: hasHorizontalScrollbar,
+    footer: !!footer,
+    firstColRowSpanIndex: firstColRowSpanIndex,
+    lastColRowSpanIndex: lastColRowSpanIndex,
+    onKeyDown: handleKeyDown
+  }, rest), /*#__PURE__*/_react.default.createElement(_flatTable.StyledTableContainer, {
+    overflowX: overflowX,
+    width: width
+  }, /*#__PURE__*/_react.default.createElement(_flatTable.StyledFlatTable, _extends({
+    ref: tableRef,
+    "data-component": "flat-table"
+  }, tableStylingProps), caption ? /*#__PURE__*/_react.default.createElement("caption", null, caption) : null, /*#__PURE__*/_react.default.createElement(FlatTableThemeContext.Provider, {
+    value: {
+      colorTheme,
+      size,
+      setSelectedId,
+      selectedId
+    }
+  }, children))), footer && /*#__PURE__*/_react.default.createElement(_flatTable.StyledFlatTableFooter, {
+    hasStickyFooter: hasStickyFooter
+  }, footer));
 };
+exports.FlatTable = FlatTable;
+FlatTable.displayName = "FlatTable";
 var _default = FlatTable;
 exports.default = _default;

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

@@ -0,0 +1,2 @@
+export declare const FLAT_TABLE_THEMES: readonly ["light", "dark", "transparent-base", "transparent-white"];
+export declare const FLAT_TABLE_SIZES: readonly ["compact", "small", "medium", "large"];

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

@@ -0,0 +1,15 @@
+import { FlatTableProps } from "./flat-table.component";
+import { DrawerSidebarContextProps } from "../drawer";
+declare const StyledTableContainer: import("styled-components").StyledComponent<"div", any, Pick<FlatTableProps, "width" | "overflowX">, never>;
+declare const StyledFlatTable: import("styled-components").StyledComponent<"table", any, Pick<FlatTableProps, "caption" | "isZebra"> & {
+    size: NonNullable<FlatTableProps["size"]>;
+}, never>;
+interface StyledFlatTableWrapperProps extends Pick<FlatTableProps, "hasStickyFooter" | "colorTheme" | "hasStickyHead" | "footer">, Partial<DrawerSidebarContextProps> {
+    hasHorizontalScrollbar: boolean;
+    hasVerticalScrollbar: boolean;
+    lastColRowSpanIndex: number;
+    firstColRowSpanIndex: number;
+}
+declare const StyledFlatTableWrapper: import("styled-components").StyledComponent<"div", any, import("../box").BoxProps & StyledFlatTableWrapperProps, never>;
+declare const StyledFlatTableFooter: import("styled-components").StyledComponent<"div", any, Pick<FlatTableProps, "hasStickyFooter">, never>;
+export { StyledFlatTableWrapper, StyledFlatTable, StyledFlatTableFooter, StyledTableContainer, };

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

@@ -110,9 +110,6 @@ const StyledFlatTable = _styledComponents.default.table`
 }}
 `;
 exports.StyledFlatTable = StyledFlatTable;
-StyledFlatTable.defaultProps = {
-  size: "medium"
-};
 const StyledFlatTableWrapper = (0, _styledComponents.default)(_box.default)`
   border-top-left-radius: var(--borderRadius100);
   border-top-right-radius: var(--borderRadius100);
@@ -312,9 +309,9 @@ const StyledFlatTableWrapper = (0, _styledComponents.default)(_box.default)`
 
   ${_ref14 => {
   let {
-    hasFooter
+    footer
   } = _ref14;
-  return hasFooter && (0, _styledComponents.css)`
+  return footer && (0, _styledComponents.css)`
     tr:last-child:focus {
       :after {
         border-bottom-left-radius: var(--borderRadius000);
@@ -325,65 +322,45 @@ const StyledFlatTableWrapper = (0, _styledComponents.default)(_box.default)`
 
   ${_ref15 => {
   let {
-    hasFooter
+    footer,
+    firstColRowSpanIndex,
+    lastColRowSpanIndex,
+    hasHorizontalScrollbar,
+    hasVerticalScrollbar
   } = _ref15;
-  return !hasFooter && (0, _styledComponents.css)`
+  return !footer && (0, _styledComponents.css)`
       tbody {
-        ${_ref16 => {
-    let {
-      firstColRowSpanIndex
-    } = _ref16;
-    return firstColRowSpanIndex >= 0 && (0, _styledComponents.css)`
-            ${_flatTableRow.default}:nth-of-type(${firstColRowSpanIndex + 1}) {
-              th:first-child,
-              td:first-child {
-                border-bottom-left-radius: var(--borderRadius100);
-              }
+        ${firstColRowSpanIndex >= 0 && (0, _styledComponents.css)`
+          ${_flatTableRow.default}:nth-of-type(${firstColRowSpanIndex + 1}) {
+            th:first-child,
+            td:first-child {
+              border-bottom-left-radius: var(--borderRadius100);
             }
-          `;
-  }}
+          }
+        `}
 
-        ${_ref17 => {
-    let {
-      lastColRowSpanIndex,
-      hasHorizontalScrollbar
-    } = _ref17;
-    return lastColRowSpanIndex >= 0 && !hasHorizontalScrollbar && (0, _styledComponents.css)`
-            ${_flatTableRow.default}:nth-of-type(${lastColRowSpanIndex + 1}) {
-              th:last-child,
-              td:last-child {
-                border-bottom-right-radius: var(--borderRadius100);
-              }
+        ${lastColRowSpanIndex >= 0 && !hasHorizontalScrollbar && (0, _styledComponents.css)`
+          ${_flatTableRow.default}:nth-of-type(${lastColRowSpanIndex + 1}) {
+            th:last-child,
+            td:last-child {
+              border-bottom-right-radius: var(--borderRadius100);
             }
-          `;
-  }}
+          }
+        `}
 
         ${_flatTableRow.default}:last-of-type {
-          ${_ref18 => {
-    let {
-      hasHorizontalScrollbar,
-      firstColRowSpanIndex
-    } = _ref18;
-    return !hasHorizontalScrollbar && firstColRowSpanIndex === -1 && (0, _styledComponents.css)`
-              th:first-child,
-              td:first-child {
-                border-bottom-left-radius: var(--borderRadius100);
-              }
-            `;
-  }}
-          ${_ref19 => {
-    let {
-      hasVerticalScrollbar,
-      hasHorizontalScrollbar,
-      lastColRowSpanIndex
-    } = _ref19;
-    return !hasVerticalScrollbar && !hasHorizontalScrollbar && lastColRowSpanIndex === -1 && (0, _styledComponents.css)`
-              th:last-child,
-              td:last-child {
-                border-bottom-right-radius: var(--borderRadius100);
-              }
-            `;
-  }}
+          ${!hasHorizontalScrollbar && firstColRowSpanIndex === -1 && (0, _styledComponents.css)`
+            th:first-child,
+            td:first-child {
+              border-bottom-left-radius: var(--borderRadius100);
+            }
+          `}
+          ${!hasVerticalScrollbar && !hasHorizontalScrollbar && lastColRowSpanIndex === -1 && (0, _styledComponents.css)`
+            th:last-child,
+            td:last-child {
+              border-bottom-right-radius: var(--borderRadius100);
+            }
+          `}
         }
       }
     `;
@@ -394,11 +371,11 @@ StyledFlatTableWrapper.defaultProps = {
   theme: _themes.baseTheme
 };
 const StyledFlatTableFooter = _styledComponents.default.div`
-  ${_ref20 => {
+  ${_ref16 => {
   let {
     hasStickyFooter,
     theme
-  } = _ref20;
+  } = _ref16;
   return hasStickyFooter && (0, _styledComponents.css)`
       position: sticky;
       bottom: 0px;

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

@@ -1,13 +1,22 @@
-export type TableBorderSize = "small" | "medium" | "large";
-
-export { default as FlatTable } from "./flat-table";
-export { default as FlatTableHead } from "./flat-table-head";
-export { default as FlatTableHeader } from "./flat-table-header";
-export { default as FlatTableBody } from "./flat-table-body";
-export { default as FlatTableBodyDraggable } from "./flat-table-body-draggable";
-export { default as FlatTableRow } from "./flat-table-row";
-export { default as FlatTableRowHeader } from "./flat-table-row-header";
-export { default as FlatTableCell } from "./flat-table-cell";
-export { default as FlatTableCheckbox } from "./flat-table-checkbox";
-export { default as Sort } from "./sort";
-export * from "./flat-table";
+export { default as FlatTable } from "./flat-table.component";
+export { default as FlatTableHead } from "./flat-table-head/flat-table-head.component";
+export { default as FlatTableHeader } from "./flat-table-header/flat-table-header.component";
+export { default as FlatTableBody } from "./flat-table-body/flat-table-body.component";
+export { default as FlatTableRow } from "./flat-table-row/flat-table-row.component";
+export { default as FlatTableRowHeader } from "./flat-table-row-header/flat-table-row-header.component";
+export { default as FlatTableCell } from "./flat-table-cell/flat-table-cell.component";
+export { default as FlatTableCheckbox } from "./flat-table-checkbox/flat-table-checkbox.component";
+export { default as FlatTableBodyDraggable } from "./flat-table-body-draggable/flat-table-body-draggable.component";
+export { default as Sort } from "./sort/sort.component";
+export declare type TableBorderSize = "small" | "medium" | "large";
+export declare type TableCellAlign = "left" | "center" | "right";
+export type { FlatTableProps } from "./flat-table.component";
+export type { FlatTableHeadProps } from "./flat-table-head";
+export type { FlatTableHeaderProps } from "./flat-table-header";
+export type { FlatTableBodyProps } from "./flat-table-body";
+export type { FlatTableBodyDraggableProps } from "./flat-table-body-draggable";
+export type { FlatTableRowProps } from "./flat-table-row";
+export type { FlatTableRowHeaderProps } from "./flat-table-row-header";
+export type { FlatTableCellProps } from "./flat-table-cell";
+export type { FlatTableCheckboxProps } from "./flat-table-checkbox";
+export type { SortProps } from "./sort";