carbon-react 110.11.1 → 111.0.1

package/esm/__internal__/popover/popover.component.d.ts

@@ -1,19 +1,14 @@
 import React from "react";
-import { State } from "@popperjs/core";
-declare type PopoverModifier = {
-    name: string;
-    options?: Record<string, unknown>;
-    enabled?: boolean;
-};
+import { Placement, Middleware } from "@floating-ui/dom";
 export interface PopoverProps {
     children: React.ReactElement;
-    placement?: "auto" | "auto-start" | "auto-end" | "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "right" | "right-start" | "right-end" | "left" | "left-start" | "left-end";
+    placement?: Placement;
     disableBackgroundUI?: boolean;
-    modifiers?: PopoverModifier[];
-    onFirstUpdate?: (state: Partial<State>) => void;
+    middleware?: Middleware[];
     disablePortal?: boolean;
     reference: React.RefObject<HTMLElement>;
     isOpen?: boolean;
+    animationFrame?: boolean;
 }
-declare const Popover: ({ children, placement, disablePortal, reference, onFirstUpdate, modifiers, disableBackgroundUI, isOpen, }: PopoverProps) => JSX.Element;
+declare const Popover: ({ children, placement, disablePortal, reference, middleware, disableBackgroundUI, isOpen, animationFrame, }: PopoverProps) => JSX.Element;
 export default Popover;

package/esm/__internal__/popover/popover.component.js

@@ -1,21 +1,24 @@
-import React, { useContext, useEffect, useLayoutEffect, useRef } from "react";
+import React, { useContext, useEffect, useRef } from "react";
 import PropTypes from "prop-types";
 import ReactDOM from "react-dom";
-import { createPopper } from "@popperjs/core";
-import useResizeObserver from "../../hooks/__internal__/useResizeObserver";
+import { flip } from "@floating-ui/dom";
+import useFloating from "../../hooks/__internal__/useFloating";
 import { StyledBackdrop, StyledPopoverContent } from "./popover.style";
 import CarbonScopedTokensProvider from "../../style/design-tokens/carbon-scoped-tokens-provider/carbon-scoped-tokens-provider.component";
 import { ModalContext } from "../../components/modal/modal.component";
+const defaultMiddleware = [flip({
+  fallbackStrategy: "initialPlacement"
+})];
 
 const Popover = ({
   children,
   placement,
   disablePortal,
   reference,
-  onFirstUpdate,
-  modifiers,
+  middleware = defaultMiddleware,
   disableBackgroundUI,
-  isOpen = true
+  isOpen = true,
+  animationFrame
 }) => {
   var _reference$current;
 
@@ -31,56 +34,27 @@ const Popover = ({
     mountNode.appendChild(elementDOM.current);
   }
 
-  const popperInstance = useRef(null);
-  const popperRef = useRef(null);
-  let content;
-  let popperElementRef;
   const childRef = React.Children.only(children).ref;
+  const innerRef = useRef(null);
+  const floatingReference = childRef || innerRef;
+  let content;
 
   if (childRef) {
     content = children;
-    popperElementRef = childRef;
   } else {
     content = /*#__PURE__*/React.cloneElement(children, {
-      ref: popperRef
+      ref: floatingReference
     });
-    popperElementRef = popperRef;
   }
 
-  useResizeObserver(reference, () => {
-    var _popperInstance$curre;
-
-    popperInstance === null || popperInstance === void 0 ? void 0 : (_popperInstance$curre = popperInstance.current) === null || _popperInstance$curre === void 0 ? void 0 : _popperInstance$curre.update();
+  useFloating({
+    isOpen,
+    reference,
+    floating: floatingReference,
+    placement,
+    middleware,
+    animationFrame
   });
-  useEffect(() => {
-    if (isOpen) {
-      var _popperInstance$curre2;
-
-      popperInstance === null || popperInstance === void 0 ? void 0 : (_popperInstance$curre2 = popperInstance.current) === null || _popperInstance$curre2 === void 0 ? void 0 : _popperInstance$curre2.update();
-    }
-  }, [isOpen]);
-  useLayoutEffect(() => {
-    if (reference.current) {
-      popperInstance.current = createPopper(reference.current, popperElementRef.current, {
-        placement,
-        onFirstUpdate,
-        modifiers: [{
-          name: "computeStyles",
-          options: {
-            gpuAcceleration: false,
-            roundOffsets: false
-          }
-        }, ...(modifiers || [])]
-      });
-    }
-
-    return () => {
-      if (popperInstance.current) {
-        popperInstance.current.destroy();
-        popperInstance.current = null;
-      }
-    };
-  }, [modifiers, onFirstUpdate, placement, popperElementRef, reference]);
   useEffect(() => {
     return () => {
       if (!disablePortal) {
@@ -89,12 +63,17 @@ const Popover = ({
       }
     };
   }, [disablePortal, mountNode]);
-  content = /*#__PURE__*/React.createElement(StyledPopoverContent, {
-    isOpen: isOpen
-  }, content);
+
+  if (!disableBackgroundUI) {
+    content = /*#__PURE__*/React.createElement(StyledPopoverContent, {
+      isOpen: isOpen
+    }, content);
+  }
 
   if (disableBackgroundUI) {
-    content = /*#__PURE__*/React.createElement(StyledBackdrop, null, content);
+    content = /*#__PURE__*/React.createElement(StyledPopoverContent, {
+      isOpen: isOpen
+    }, /*#__PURE__*/React.createElement(StyledBackdrop, null, content));
   }
 
   if (disablePortal) {
@@ -105,17 +84,17 @@ const Popover = ({
 };
 
 Popover.propTypes = {
+  "animationFrame": PropTypes.bool,
   "children": PropTypes.element.isRequired,
   "disableBackgroundUI": PropTypes.bool,
   "disablePortal": PropTypes.bool,
   "isOpen": PropTypes.bool,
-  "modifiers": PropTypes.arrayOf(PropTypes.shape({
-    "enabled": PropTypes.bool,
+  "middleware": PropTypes.arrayOf(PropTypes.shape({
+    "fn": PropTypes.func.isRequired,
     "name": PropTypes.string.isRequired,
-    "options": PropTypes.object
+    "options": PropTypes.any
   })),
-  "onFirstUpdate": PropTypes.func,
-  "placement": PropTypes.oneOf(["auto-end", "auto-start", "auto", "bottom-end", "bottom-start", "bottom", "left-end", "left-start", "left", "right-end", "right-start", "right", "top-end", "top-start", "top"]),
+  "placement": PropTypes.any,
   "reference": PropTypes.shape({
     "current": PropTypes.oneOfType([PropTypes.oneOf([null]), function (props, propName) {
       if (props[propName] == null) {

package/esm/components/action-popover/action-popover.style.js

@@ -60,7 +60,7 @@ const StyledMenuItem = styled.button`
 }) => !isDisabled && css`
       &:focus,
       &:hover {
-        background-color: var(--colorsUtilityMajor025);
+        background-color: var(--colorsUtilityMajor100);
       }
       && ${StyledIcon} {
         cursor: pointer;

package/esm/components/date/__internal__/date-picker/date-picker.component.js

@@ -3,12 +3,16 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 import React, { useMemo } from "react";
 import PropTypes from "prop-types";
 import DayPicker from "react-day-picker";
+import { flip, offset } from "@floating-ui/dom";
 import { getDisabledDays } from "../utils";
 import Popover from "../../../../__internal__/popover";
 import useLocale from "../../../../hooks/__internal__/useLocale";
 import Navbar from "../navbar";
 import Weekday from "../weekday";
 import StyledDayPicker from "./day-picker.style";
+const popoverMiddleware = [offset(3), flip({
+  fallbackStrategy: "initialPlacement"
+})];
 const DatePicker = /*#__PURE__*/React.forwardRef(({
   inputElement,
   minDate,
@@ -49,17 +53,6 @@ const DatePicker = /*#__PURE__*/React.forwardRef(({
   } : {
     width: "abbreviated"
   }).substring(0, 3)), [l, localize]);
-  const popoverModifiers = useMemo(() => [{
-    name: "offset",
-    options: {
-      offset: [0, 3]
-    }
-  }, {
-    name: "preventOverflow",
-    options: {
-      mainAxis: false
-    }
-  }], []);
 
   const handleDayClick = (date, {
     disabled
@@ -88,7 +81,7 @@ const DatePicker = /*#__PURE__*/React.forwardRef(({
   return /*#__PURE__*/React.createElement(Popover, {
     placement: "bottom-start",
     reference: inputElement,
-    modifiers: popoverModifiers,
+    middleware: popoverMiddleware,
     disablePortal: disablePortal
   }, /*#__PURE__*/React.createElement(StyledDayPicker, {
     ref: ref,

package/esm/components/date/__internal__/date-picker/day-picker.style.js

@@ -179,7 +179,7 @@ const StyledDayPicker = styled.div`
   ${addReactDayPickerStyles}
 
   position: absolute;
-  height: 352px;
+  height: 346px;
   width: 352px;
   z-index: ${({
   theme

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

@@ -13,23 +13,23 @@ const horizontalBorderSizes = {
 
 const stickyColumnFocusStyling = (index, theme) => {
   return `
-    border-bottom: 1px solid transparent;
-    border-left: 1px solid
+    border-left: 2px solid
       ${index === 0 ? "var(--colorsSemanticFocus500)" : "var(--colorsUtilityMajor100)"};
-    background-clip: padding-box;
-    z-index: ${theme.zIndex.overlay + 2};
-
-    :before {
-      content: "";
-      border-top: 2px solid var(--colorsSemanticFocus500);
-      border-bottom: 2px solid var(--colorsSemanticFocus500);
-      display: block;
-      left: 0px;
-      top: -1px;
-      height: calc(100% - 1px);
-      width: 101%;
-      position: absolute;
-      z-index: ${theme.zIndex.overlay};
+      width: calc(100% + 1px);
+      top: 0;
+      z-index: ${theme.zIndex.overlay + 2};
+      :before {
+        content: "";
+        border-top: 2px solid var(--colorsSemanticFocus500);
+        border-bottom: 2px solid var(--colorsSemanticFocus500);
+        display: block;
+        left: 0px;
+        top: 0px;
+        height: calc(100% - 3px);
+        width: 101%;
+        position: absolute;
+        z-index: ${theme.zIndex.overlay};
+      }
     }
   `;
 };
@@ -87,7 +87,6 @@ const StyledFlatTableRow = styled.tr`
       min-width: 100%;
       table-layout: fixed;
       width: auto;
-      outline: 2px solid #0000;
 
       [data-component="icon"]:not([color]) {
         color: var(--colorsActionMinor500);
@@ -134,7 +133,7 @@ const StyledFlatTableRow = styled.tr`
             position: absolute;
             left: 0px;
             right: 0px;
-            top: -1px;
+            top: 0;
             bottom: 0px;
             border: 2px solid var(--colorsSemanticFocus500);
             pointer-events: none;
@@ -149,7 +148,7 @@ const StyledFlatTableRow = styled.tr`
           @media not all and (min-resolution: 0.001dpcm) {
             @supports (-webkit-appearance: none) and (stroke-color: transparent) {
               outline: 2px solid var(--colorsSemanticFocus500);
-              outline-offset: -1px;
+              outline-offset: -2px;
               position: static;
               :after {
                 content: none;

package/esm/components/heading/heading.component.d.ts

@@ -0,0 +1,31 @@
+import React from "react";
+import { MarginProps } from "styled-system";
+import { TagProps } from "../../__internal__/utils/helpers/tags/tags";
+export interface HeadingProps extends MarginProps, TagProps {
+    /** Child elements */
+    children?: React.ReactNode;
+    /** Defines the title for the heading. */
+    title?: React.ReactNode;
+    /** Defines the title id for the heading. */
+    titleId?: string;
+    /** Defines the subheader for the heading. */
+    subheader?: React.ReactNode;
+    /** Defines the subtitle id for the heading. */
+    subtitleId?: string;
+    /** Defines the help text for the heading. */
+    help?: string;
+    /** Defines the help link for the heading. */
+    helpLink?: string;
+    /** Defines the a href for the back link. */
+    backLink?: string | ((ev: React.MouseEvent<HTMLAnchorElement> | React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLAnchorElement> | React.KeyboardEvent<HTMLButtonElement>) => void);
+    /** Adds a divider below the heading and the content. */
+    divider?: boolean;
+    /** Adds a separator between the title and the subheader. */
+    separator?: boolean;
+    /** Pills that will be added after the title. */
+    pills?: React.ReactNode;
+    /** Aria label for rendered help component */
+    helpAriaLabel?: string;
+}
+export declare const Heading: ({ children, backLink, divider, help, helpAriaLabel, helpLink, pills, separator, subheader, subtitleId, title, titleId, ...rest }: HeadingProps) => JSX.Element | null;
+export default Heading;

package/esm/components/heading/heading.component.js

@@ -2,12 +2,10 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 import React from "react";
 import PropTypes from "prop-types";
-import styledSystemPropTypes from "@styled-system/prop-types";
 import { filterStyledSystemMarginProps } from "../../style/utils";
 import tagComponent from "../../__internal__/utils/helpers/tags/tags";
 import { StyledHeading, StyledHeadingIcon, StyledSubHeader, StyledHeader, StyledSeparator, StyledHeaderHelp, StyledHeadingTitle, StyledDivider, StyledHeaderContent, StyledHeadingBackButton, StyledHeadingPills } from "./heading.style";
 import useLocale from "../../hooks/__internal__/useLocale";
-const marginPropTypes = filterStyledSystemMarginProps(styledSystemPropTypes.space);
 
 const Heading = ({
   children,
@@ -47,8 +45,7 @@ const Heading = ({
       "data-element": "back",
       onMouseDown: e => e.currentTarget.focus()
     }, backButtonProps), /*#__PURE__*/React.createElement(StyledHeadingIcon, {
-      type: "chevron_left",
-      divider: divider
+      type: "chevron_left"
     }));
   };
 
@@ -75,10 +72,10 @@ const Heading = ({
   return title ? /*#__PURE__*/React.createElement(StyledHeading, _extends({}, tagComponent("heading", dataAttributes), marginProps), /*#__PURE__*/React.createElement(StyledHeader, {
     "data-element": "header-container",
     divider: divider,
-    subheader: subheader,
+    subheader: !!subheader,
     hasBackLink: !!backLink
   }, backLink && getBackButton(), /*#__PURE__*/React.createElement(StyledHeaderContent, null, /*#__PURE__*/React.createElement(StyledHeadingTitle, {
-    withMargin: pills || help,
+    withMargin: !!pills || !!help,
     variant: "h1",
     "data-element": "title",
     id: titleId
@@ -87,42 +84,176 @@ const Heading = ({
   }), children) : null;
 };
 
-Heading.propTypes = { ...marginPropTypes,
-
-  /** Child elements */
-  children: PropTypes.node,
-
-  /** Defines the title for the heading. */
-  title: PropTypes.node,
-
-  /** Defines the title id for the heading. */
-  titleId: PropTypes.string,
-
-  /** Defines the subheader for the heading. */
-  subheader: PropTypes.node,
-
-  /** Defines the subtitle id for the heading. */
-  subtitleId: PropTypes.string,
-
-  /** Defines the help text for the heading. */
-  help: PropTypes.string,
-
-  /** Defines the help link for the heading. */
-  helpLink: PropTypes.string,
-
-  /** Defines the a href for the back link. */
-  backLink: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
-
-  /** Adds a divider below the heading and the content. */
-  divider: PropTypes.bool,
-
-  /** Adds a separator between the title and the subheader. */
-  separator: PropTypes.bool,
-
-  /** Pills that will be added after the title. */
-  pills: PropTypes.node,
-
-  /** Aria label for rendered help component */
-  helpAriaLabel: PropTypes.string
+Heading.propTypes = {
+  "backLink": PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+  "children": PropTypes.node,
+  "data-component": PropTypes.string,
+  "data-element": PropTypes.string,
+  "data-role": PropTypes.string,
+  "divider": PropTypes.bool,
+  "help": PropTypes.string,
+  "helpAriaLabel": PropTypes.string,
+  "helpLink": PropTypes.string,
+  "m": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "margin": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginBottom": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginLeft": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginRight": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginTop": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginX": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginY": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "mb": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "ml": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "mr": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "mt": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "mx": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "my": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "pills": PropTypes.node,
+  "separator": PropTypes.bool,
+  "subheader": PropTypes.node,
+  "subtitleId": PropTypes.string,
+  "title": PropTypes.node,
+  "titleId": PropTypes.string
 };
+export { Heading };
 export default Heading;

package/esm/components/heading/heading.style.d.ts

@@ -1,15 +1,29 @@
-export const StyledHeadingIcon: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../icon").IconProps & import("react").RefAttributes<HTMLSpanElement>>, any, {}, never>;
-export const StyledHeading: import("styled-components").StyledComponent<"div", any, {}, never>;
-export const StyledSubHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
-export const StyledHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
-export const StyledSeparator: import("styled-components").StyledComponent<"hr", any, {}, never>;
-export const StyledHeaderHelp: import("styled-components").StyledComponent<{
+/// <reference types="react" />
+import Typography from "../typography";
+declare const StyledHeading: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare const StyledHeaderContent: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare type StyledHeaderProps = {
+    divider?: boolean;
+    subheader?: boolean;
+    hasBackLink?: boolean;
+};
+declare const StyledHeader: import("styled-components").StyledComponent<"div", any, StyledHeaderProps, never>;
+declare const StyledHeadingBackButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../link").LinkProps & import("react").RefAttributes<HTMLButtonElement | HTMLLinkElement>>, any, {}, never>;
+declare type StyledHeadingTitleProps = {
+    withMargin?: boolean;
+};
+declare const StyledHeadingTitle: import("styled-components").StyledComponent<typeof Typography, any, StyledHeadingTitleProps, never>;
+declare const StyledHeadingPills: import("styled-components").StyledComponent<"span", any, {}, never>;
+declare type StyledSubHeaderProps = {
+    hasBackLink?: boolean;
+    hasSeparator?: boolean;
+};
+declare const StyledSubHeader: import("styled-components").StyledComponent<"div", any, StyledSubHeaderProps, never>;
+declare const StyledHeadingIcon: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../icon").IconProps & import("react").RefAttributes<HTMLSpanElement>>, any, {}, never>;
+declare const StyledSeparator: import("styled-components").StyledComponent<"hr", any, {}, never>;
+declare const StyledDivider: import("styled-components").StyledComponent<({ adaptiveMxBreakpoint, ml, mr, ...rest }: import("../hr").HrProps) => JSX.Element, any, {}, never>;
+declare const StyledHeaderHelp: import("styled-components").StyledComponent<{
     ({ as, ariaLabel, children, className, href, helpId, isFocused, tabIndex, tooltipBgColor, tooltipFontColor, tooltipFlipOverrides, tooltipId, tooltipPosition, type, ...rest }: import("../help").HelpProps): JSX.Element;
     displayName: string;
 }, any, {}, never>;
-export const StyledHeadingTitle: import("styled-components").StyledComponent<typeof Typography, any, {}, never>;
-export const StyledDivider: import("styled-components").StyledComponent<({ adaptiveMxBreakpoint, ml, mr, ...rest }: import("../hr").HrProps) => JSX.Element, any, {}, never>;
-export const StyledHeaderContent: import("styled-components").StyledComponent<"div", any, {}, never>;
-export const StyledHeadingBackButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../link").LinkProps & import("react").RefAttributes<HTMLButtonElement | HTMLLinkElement>>, any, {}, never>;
-export const StyledHeadingPills: import("styled-components").StyledComponent<"span", any, {}, never>;
-import Typography from "../typography";
+export { StyledHeadingIcon, StyledHeading, StyledSubHeader, StyledHeader, StyledSeparator, StyledHeaderHelp, StyledHeadingTitle, StyledDivider, StyledHeaderContent, StyledHeadingBackButton, StyledHeadingPills, };

package/esm/components/heading/index.d.ts

@@ -1 +1,2 @@
-export { default } from "./heading";
+export { default } from "./heading.component";
+export type { HeadingProps } from "./heading.component";