carbon-react 119.4.0 → 119.4.2

package/esm/components/navigation-bar/fixed-navigation-bar.context.js

@@ -0,0 +1,31 @@
+import React, { createContext, useState, useCallback } from "react";
+import useResizeObserver from "../../hooks/__internal__/useResizeObserver/useResizeObserver";
+const FixedNavigationBarContext = /*#__PURE__*/createContext({});
+export const FixedNavigationBarContextProvider = _ref => {
+  let {
+    position,
+    orientation,
+    offset,
+    children,
+    navbarElement
+  } = _ref;
+  const [navbarHeight, setNavbarHeight] = useState(navbarElement?.offsetHeight);
+  const updateHeight = useCallback(() => setNavbarHeight(navbarElement?.offsetHeight), [navbarElement]);
+  useResizeObserver({
+    current: navbarElement
+  }, updateHeight);
+  let submenuMaxHeight;
+  if (position === "fixed") {
+    if (orientation === "top" && navbarHeight !== undefined) {
+      submenuMaxHeight = `calc(100vh - ${navbarHeight}px - ${offset})`;
+    } else if (orientation === "bottom") {
+      submenuMaxHeight = offset;
+    }
+  }
+  return /*#__PURE__*/React.createElement(FixedNavigationBarContext.Provider, {
+    value: {
+      submenuMaxHeight
+    }
+  }, children);
+};
+export default FixedNavigationBarContext;

package/esm/components/navigation-bar/navigation-bar.component.d.ts

@@ -18,6 +18,8 @@ export interface NavigationBarProps extends PaddingProps, FlexboxProps {
     offset?: string;
     /** Defines whether the navigation bar should be positioned top or bottom */
     orientation?: Orientation;
+    /** @private @ignore set to true only when rendering the GlobalHeader component */
+    isGlobal?: boolean;
 }
-export declare const NavigationBar: ({ navigationType, isLoading, children, ariaLabel, position, offset, orientation, ...props }: NavigationBarProps) => JSX.Element;
+export declare const NavigationBar: ({ navigationType, isLoading, children, ariaLabel, position, offset, orientation, isGlobal, ...props }: NavigationBarProps) => JSX.Element;
 export default NavigationBar;

package/esm/components/navigation-bar/navigation-bar.component.js

@@ -1,7 +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 from "react";
+import React, { useState } from "react";
 import PropTypes from "prop-types";
 import StyledNavigationBar from "./navigation-bar.style";
+import { FixedNavigationBarContextProvider } from "./fixed-navigation-bar.context";
 const NavigationBar = _ref => {
   let {
     navigationType = "light",
@@ -11,17 +12,27 @@ const NavigationBar = _ref => {
     position,
     offset = "0",
     orientation,
+    isGlobal,
     ...props
   } = _ref;
+  const [navbarElement, setNavbarElement] = useState(null);
   return /*#__PURE__*/React.createElement(StyledNavigationBar, _extends({
     role: "navigation",
-    "aria-label": ariaLabel,
-    navigationType: navigationType,
-    "data-component": "navigation-bar",
-    position: position,
-    offset: offset,
-    orientation: orientation
-  }, props), !isLoading && children);
+    "data-component": isGlobal ? "global-header" : "navigation-bar",
+    "aria-label": isGlobal ? "Global Header" : ariaLabel,
+    navigationType: isGlobal ? "black" : navigationType,
+    orientation: isGlobal ? "top" : orientation,
+    offset: isGlobal ? "0px" : offset,
+    position: isGlobal ? "fixed" : position
+  }, props, {
+    isGlobal: isGlobal,
+    ref: setNavbarElement
+  }), /*#__PURE__*/React.createElement(FixedNavigationBarContextProvider, {
+    orientation: isGlobal ? "top" : orientation,
+    offset: isGlobal ? "0px" : offset,
+    position: isGlobal ? "fixed" : position,
+    navbarElement: navbarElement
+  }, !isLoading && children));
 };
 NavigationBar.propTypes = {
   "alignContent": PropTypes.oneOfType([PropTypes.oneOf(["-moz-initial", "baseline", "center", "end", "flex-end", "flex-start", "inherit", "initial", "normal", "revert", "space-around", "space-between", "space-evenly", "start", "stretch", "unset"]), PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf(["-moz-initial", "baseline", "center", "end", "flex-end", "flex-start", "inherit", "initial", "normal", "revert", "space-around", "space-between", "space-evenly", "start", "stretch", "unset", null]), PropTypes.shape({
@@ -563,6 +574,7 @@ NavigationBar.propTypes = {
     "valueOf": PropTypes.func.isRequired
   })]),
   "flexWrap": PropTypes.oneOfType([PropTypes.oneOf(["-moz-initial", "inherit", "initial", "nowrap", "revert", "unset", "wrap-reverse", "wrap"]), PropTypes.arrayOf(PropTypes.oneOf(["-moz-initial", "inherit", "initial", "nowrap", "revert", "unset", "wrap-reverse", "wrap", null])), PropTypes.object]),
+  "isGlobal": PropTypes.bool,
   "isLoading": PropTypes.bool,
   "justifyContent": PropTypes.oneOfType([PropTypes.oneOf(["-moz-initial", "center", "end", "flex-end", "flex-start", "inherit", "initial", "left", "normal", "revert", "right", "space-around", "space-between", "space-evenly", "start", "stretch", "unset"]), PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf(["-moz-initial", "center", "end", "flex-end", "flex-start", "inherit", "initial", "left", "normal", "revert", "right", "space-around", "space-between", "space-evenly", "start", "stretch", "unset", null]), PropTypes.shape({
     "__@iterator": PropTypes.func.isRequired,

package/esm/components/navigation-bar/navigation-bar.style.d.ts

@@ -9,6 +9,8 @@ export declare type StyledNavigationBarProps = PaddingProps & FlexboxProps & {
     offset?: string;
     /** Defines whether the navigation bar should be positioned top or bottom */
     orientation?: Orientation;
+    /** set to true only when rendering the GlobalHeader component */
+    isGlobal?: boolean;
 };
 declare const StyledNavigationBar: import("styled-components").StyledComponent<"nav", any, PaddingProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & FlexboxProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & {
     /** Color scheme of navigation component */
@@ -19,5 +21,7 @@ declare const StyledNavigationBar: import("styled-components").StyledComponent<"
     offset?: string | undefined;
     /** Defines whether the navigation bar should be positioned top or bottom */
     orientation?: Orientation | undefined;
+    /** set to true only when rendering the GlobalHeader component */
+    isGlobal?: boolean | undefined;
 }, never>;
 export default StyledNavigationBar;

package/esm/components/navigation-bar/navigation-bar.style.js

@@ -55,11 +55,12 @@ const StyledNavigationBar = styled.nav`
   ${_ref2 => {
   let {
     navigationType,
-    theme
+    theme,
+    isGlobal
   } = _ref2;
   return css`
     min-height: 40px;
-    z-index: ${theme.zIndex.nav};
+    z-index: ${isGlobal ? theme.zIndex.globalNav : theme.zIndex.nav};
 
     ${navigationType === "light" && css`
       background-color: var(--colorsComponentsMenuSpringStandard500);

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

@@ -8,11 +8,26 @@ 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;
+  });
 };
 var _default = setupResizeObserverMock;
 exports.default = _default;

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.FlatTableBody = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -17,9 +17,10 @@ const FlatTableBody = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     ref: ref
   }, rest), children);
 });
+exports.FlatTableBody = FlatTableBody;
 FlatTableBody.propTypes = {
-  /** Array of FlatTableRow. */
-  children: _propTypes.default.node.isRequired
+  "children": _propTypes.default.node
 };
+FlatTableBody.displayName = "FlatTableBody";
 var _default = FlatTableBody;
 exports.default = _default;

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

@@ -3,11 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.FlatTableBodyDraggable = void 0;
 var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
 var _reactDnd = require("react-dnd");
 var _reactDndHtml5Backend = require("react-dnd-html5-backend");
-var _propTypes = _interopRequireDefault(require("prop-types"));
 var _icon = _interopRequireDefault(require("../../icon/icon.style"));
 var _flatTableBodyDraggable = _interopRequireDefault(require("./flat-table-body-draggable.style"));
 var _flatTableCell = _interopRequireDefault(require("../flat-table-cell/flat-table-cell.component"));
@@ -29,7 +29,7 @@ const DropTarget = _ref => {
     },
     drop() {
       setIsDragging(false);
-      getOrder();
+      getOrder?.();
     }
   });
   return /*#__PURE__*/_react.default.createElement(_flatTableBodyDraggable.default, _extends({
@@ -38,10 +38,6 @@ const DropTarget = _ref => {
     isDragging: isDragging
   }, rest), children);
 };
-DropTarget.propTypes = {
-  children: _propTypes.default.node.isRequired,
-  getOrder: _propTypes.default.func
-};
 const FlatTableBodyDraggable = _ref2 => {
   let {
     children,
@@ -58,7 +54,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.default.isValidElement(item) && `${item.props.id}` === id)[0];
     return {
       draggableItem,
       index: draggableItems.indexOf(draggableItem)
@@ -79,14 +75,14 @@ const FlatTableBodyDraggable = _ref2 => {
     if (!getOrder) {
       return;
     }
-    const draggableItemIds = draggableItems.map(draggableItem => draggableItem.props.id);
+    const draggableItemIds = draggableItems.map(draggableItem => /*#__PURE__*/_react.default.isValidElement(draggableItem) && draggableItem.props.id);
     getOrder(draggableItemIds);
   };
   return /*#__PURE__*/_react.default.createElement(_reactDnd.DndProvider, {
     backend: _reactDndHtml5Backend.HTML5Backend
   }, /*#__PURE__*/_react.default.createElement(DropTarget, _extends({
     getOrder: getItemsId
-  }, rest), draggableItems.map(item => /*#__PURE__*/_react.default.cloneElement(item, {
+  }, rest), draggableItems.map(item => /*#__PURE__*/_react.default.isValidElement(item) && /*#__PURE__*/_react.default.cloneElement(item, {
     id: `${item.props.id}`,
     moveItem,
     findItem,
@@ -97,11 +93,6 @@ const FlatTableBodyDraggable = _ref2 => {
     type: "drag"
   })), item.props.children]))));
 };
-FlatTableBodyDraggable.propTypes = {
-  /** Callback fired when order is changed */
-  getOrder: _propTypes.default.func,
-  /** Array of FlatTableRow. */
-  children: _propTypes.default.node.isRequired
-};
+exports.FlatTableBodyDraggable = FlatTableBodyDraggable;
 var _default = FlatTableBodyDraggable;
 exports.default = _default;

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

@@ -3,12 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.FlatTableCell = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _propTypes2 = _interopRequireDefault(require("@styled-system/prop-types"));
 var _flatTableCell = require("./flat-table-cell.style");
-var _utils = require("../../../style/utils");
 var _icon = _interopRequireDefault(require("../../icon"));
 var _flatTable = require("../flat-table.component");
 var _guid = _interopRequireDefault(require("../../../__internal__/utils/helpers/guid"));
@@ -16,13 +14,10 @@ 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 FlatTableCell = _ref => {
   let {
     align = "left",
     children,
-    colspan,
-    rowspan,
     pl,
     expandable = false,
     onClick,
@@ -34,6 +29,8 @@ const FlatTableCell = _ref => {
     width,
     truncate = false,
     title,
+    colspan,
+    rowspan,
     ...rest
   } = _ref;
   const ref = (0, _react.useRef)(null);
@@ -58,8 +55,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,
@@ -68,6 +63,10 @@ const FlatTableCell = _ref => {
     isTruncated: truncate,
     expandable: expandable,
     id: id.current
+  }, colspan !== undefined && {
+    colSpan: Number(colspan)
+  }, rowspan !== undefined && {
+    rowSpan: Number(rowspan)
   }, rest), /*#__PURE__*/_react.default.createElement(_flatTableCell.StyledCellContent, {
     title: truncate && !title && typeof children === "string" ? children : title,
     expandable: expandable
@@ -77,67 +76,7 @@ const FlatTableCell = _ref => {
     mr: "8px"
   }), children));
 };
-FlatTableCell.propTypes = {
-  /** Styled system padding props */
-  ...paddingPropTypes,
-  /** Content alignment */
-  align: _propTypes.default.oneOf(["center", "left", "right"]),
-  /** Cell content */
-  children: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.string]),
-  /** Number of columns that a cell should span */
-  colspan: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
-  /** Number of rows that a cell should span */
-  rowspan: _propTypes.default.oneOfType([_propTypes.default.number, _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,
-  /**
-   * @private
-   * @ignore
-   * Sets the left position when sticky column found
-   */
-  leftPosition: _propTypes.default.number,
-  /**
-   * @private
-   * @ignore
-   * Sets the right position when sticky column found
-   */
-  rightPosition: _propTypes.default.number,
-  /**
-   * @private
-   * @ignore
-   * Index of cell within row
-   */
-  cellIndex: _propTypes.default.number,
-  /**
-   * @private
-   * @ignore
-   * Callback to report the offsetWidth
-   */
-  reportCellWidth: _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
-};
+exports.FlatTableCell = FlatTableCell;
 FlatTableCell.displayName = "FlatTableCell";
 var _default = FlatTableCell;
 exports.default = _default;

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.FlatTableCheckbox = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _flatTableCheckbox = _interopRequireDefault(require("./flat-table-checkbox.style"));
@@ -61,44 +61,7 @@ const FlatTableCheckbox = _ref => {
     onKeyDown: handleKeyDown
   }));
 };
-FlatTableCheckbox.propTypes = {
-  /** Prop to polymorphically render either a 'th' or 'td' element */
-  as: _propTypes.default.oneOf(["td", "th"]),
-  /** Prop to set checked prop on Checkbox */
-  checked: _propTypes.default.bool,
-  /** Callback to be called onChange in Checkbox */
-  onChange: _propTypes.default.func,
-  /** Callback function to be called when click event received */
-  onClick: _propTypes.default.func,
-  /** Whether to render the checkbox or not, defaults to true */
-  selectable: _propTypes.default.bool,
-  /** The id of the element that labels the input */
-  ariaLabelledBy: _propTypes.default.string,
-  /**
-   * @private
-   * @ignore
-   * Sets the left position when sticky column found
-   */
-  leftPosition: _propTypes.default.number,
-  /**
-   * @private
-   * @ignore
-   * Sets the right position when sticky column found
-   */
-  rightPosition: _propTypes.default.number,
-  /**
-   * @private
-   * @ignore
-   * Index of cell within row
-   */
-  cellIndex: _propTypes.default.number,
-  /**
-   * @private
-   * @ignore
-   * Callback to report the offsetWidth
-   */
-  reportCellWidth: _propTypes.default.func
-};
+exports.FlatTableCheckbox = FlatTableCheckbox;
 FlatTableCheckbox.displayName = "FlatTableCheckbox";
 var _default = FlatTableCheckbox;
 exports.default = _default;

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