carbon-react 106.7.0 → 107.1.1

package/lib/components/confirm/confirm.component.js

@@ -11,8 +11,6 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _guid = _interopRequireDefault(require("../../__internal__/utils/helpers/guid"));
 
-var _logger = _interopRequireDefault(require("../../__internal__/utils/logger"));
-
 var _heading = _interopRequireDefault(require("../heading"));
 
 var _dialog = _interopRequireDefault(require("../dialog"));
@@ -35,15 +33,12 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 
 function _extends() { _extends = Object.assign || 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); }
 
-let deprecatedWarnTriggered = false;
-
 const Confirm = ({
   "aria-labelledby": ariaLabelledBy,
   "aria-describedby": ariaDescribedBy,
   "aria-label": ariaLabel,
   open,
   children,
-  destructive,
   cancelButtonDestructive,
   confirmButtonDestructive,
   cancelButtonType,
@@ -64,12 +59,6 @@ const Confirm = ({
   title,
   ...rest
 }) => {
-  if (!deprecatedWarnTriggered && destructive) {
-    deprecatedWarnTriggered = true;
-
-    _logger.default.deprecate("`destructive` prop is deprecated and will soon be removed. Please use `cancelButtonDestructive` and `confirmButtonDestructive` props.");
-  }
-
   const l = (0, _useLocale.default)();
   const {
     current: titleId
@@ -97,7 +86,7 @@ const Confirm = ({
       onClick: onCancel,
       "data-element": "cancel",
       buttonType: cancelButtonType,
-      destructive: destructive || cancelButtonDestructive,
+      destructive: cancelButtonDestructive,
       disabled: disableCancel,
       iconType: cancelButtonIconType,
       iconPosition: cancelButtonIconPosition
@@ -108,7 +97,7 @@ const Confirm = ({
     onClick: onConfirm,
     "data-element": "confirm",
     buttonType: confirmButtonType,
-    destructive: destructive || confirmButtonDestructive,
+    destructive: confirmButtonDestructive,
     disabled: isLoadingConfirm || disableConfirm,
     ml: 2,
     iconType: confirmButtonIconType,
@@ -152,7 +141,6 @@ const Confirm = ({
 Confirm.defaultProps = {
   size: "extra-small",
   showCloseIcon: false,
-  destructive: false,
   cancelButtonDestructive: false,
   confirmButtonDestructive: false,
   iconType: null,
@@ -220,9 +208,6 @@ Confirm.propTypes = {
   /** Customise the cancel button label */
   cancelLabel: _propTypes.default.string,
 
-  /** Apply destructive style to the buttons */
-  destructive: _propTypes.default.bool,
-
   /** Apply destructive style to the cancel button */
   cancelButtonDestructive: _propTypes.default.bool,
 

package/lib/components/confirm/confirm.d.ts

@@ -21,8 +21,6 @@ export interface ConfirmProps extends DialogProps {
   cancelLabel?: string;
   /** Customise the confirm button label */
   confirmLabel?: string;
-  /** Apply destructive style to the buttons */
-  destructive?: boolean;
   /** Apply destructive style to the cancel button */
   cancelButtonDestructive?: boolean;
   /** Apply destructive style to the confirm button */

package/lib/components/date/date.component.js

@@ -29,6 +29,8 @@ var _datePicker = _interopRequireDefault(require("./__internal__/date-picker"));
 
 var _dateRange = _interopRequireDefault(require("../date-range/date-range.context"));
 
+var _clickAwayWrapper = _interopRequireDefault(require("../../__internal__/click-away-wrapper"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
@@ -259,23 +261,6 @@ const DateInput = ({
     }
   };
 
-  (0, _react.useEffect)(() => {
-    const fnClosePicker = ev => {
-      if (open && !_events.default.composedPath(ev).includes(parentRef.current) && !_events.default.composedPath(ev).includes(pickerRef.current)) {
-        alreadyFocused.current = true;
-        inputRef.current.focus();
-        isBlurBlocked.current = false;
-        inputRef.current.blur();
-        setOpen(false);
-        alreadyFocused.current = false;
-      }
-    };
-
-    document.addEventListener("mousedown", fnClosePicker);
-    return function cleanup() {
-      document.removeEventListener("mousedown", fnClosePicker);
-    };
-  }, [open]);
   (0, _react.useEffect)(() => {
     const [matchedFormat, matchedValue] = (0, _utils.findMatchedFormatAndValue)(value, formats);
 
@@ -307,7 +292,22 @@ const DateInput = ({
     return value;
   };
 
-  return /*#__PURE__*/_react.default.createElement(_date.default, _extends({
+  const handleClickAway = () => {
+    if (open) {
+      alreadyFocused.current = true;
+      inputRef.current.focus();
+      isBlurBlocked.current = false;
+      inputRef.current.blur();
+      setOpen(false);
+      alreadyFocused.current = false;
+    }
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_clickAwayWrapper.default, {
+    handleClickAway: handleClickAway,
+    eventTypeId: "mousedown",
+    targets: [parentRef, pickerRef]
+  }, /*#__PURE__*/_react.default.createElement(_date.default, _extends({
     ref: wrapperRef,
     role: "presentation",
     size: size,
@@ -347,13 +347,13 @@ const DateInput = ({
     ref: pickerRef,
     pickerMouseDown: handlePickerMouseDown,
     open: open
-  }));
+  })));
 };
 
 DateInput.propTypes = { ..._textbox.default.propTypes,
   ...marginPropTypes,
 
-  /** Pass any props that match the [DayPickerProps](https://react-day-picker.js.org/api/DayPicker)
+  /** Pass any props that match the [DayPickerProps](https://react-day-picker-v7.netlify.app/docs/getting-started/)
    * interface to override default behaviors
    * */
   pickerProps: _propTypes.default.object,

package/lib/components/date/date.d.ts

@@ -2,6 +2,15 @@ import * as React from "react";
 import { DayPickerProps } from "react-day-picker";
 import { TextboxProps } from "../textbox/textbox";
 
+export interface DateChangeEvent {
+  target: {
+    value: {
+      formattedValue: string;
+      rawValue: string;
+    };
+  };
+}
+
 export interface DateInputProps
   extends Omit<
     TextboxProps,
@@ -31,7 +40,7 @@ export interface DateInputProps
   /** Maximum possible date YYYY-MM-DD */
   maxDate?: string;
   /** Specify a callback triggered on change */
-  onChange: (ev: React.ChangeEvent<HTMLInputElement>) => void;
+  onChange: (ev: DateChangeEvent) => void;
   /** The current date string */
   value: string;
   /** Pass any props that match the DayPickerProps interface to override default behaviors */

package/lib/components/date/index.d.ts

@@ -1 +1,2 @@
 export { default } from "./date";
+export type { DateChangeEvent } from "./date";

package/lib/components/date-range/date-range.d.ts

@@ -2,7 +2,7 @@ import * as React from "react";
 import { MarginProps } from "styled-system";
 import { DateInputProps } from "../date/date";
 
-interface DateRangeChangeEvent {
+export interface DateRangeChangeEvent {
   target: {
     value: [
       {
@@ -19,7 +19,7 @@ interface DateRangeChangeEvent {
 
 export interface DateRangeProps extends MarginProps {
   /** Props for the child end Date component */
-  endDateProps?: DateInputProps;
+  endDateProps?: Partial<DateInputProps>;
   /** Optional label for endDate field */
   endLabel?: string;
   /**
@@ -51,7 +51,7 @@ export interface DateRangeProps extends MarginProps {
   /** Specify a callback triggered on blur */
   onBlur?: (ev: DateRangeChangeEvent) => void;
   /** Props for the child start Date component */
-  startDateProps?: DateInputProps;
+  startDateProps?: Partial<DateInputProps>;
   /** Optional label for startDate field */
   startLabel?: string;
   /**

package/lib/components/date-range/index.d.ts

@@ -1,2 +1,3 @@
 export { default } from "./date-range";
 export { default as DateRangeContext } from "./date-range-context";
+export type { DateRangeChangeEvent } from "./date-range";

package/lib/components/dialog-full-screen/content.style.js

@@ -93,16 +93,10 @@ const StyledContent = _styledComponents.default.div`
 
   ${({
   hasHeader
-}) => !hasHeader && `
-    padding-top: 0;
-    margin-top: -25px;
-
-    .carbon-app-wrapper {
-      max-width: 100%;
-      padding: 0;
-      height: 70px;
-    }
-  `}
+}) => !hasHeader && (0, _styledComponents.css)`
+      padding-top: 0;
+      margin-top: -25px;
+    `}
 `;
 var _default = StyledContent;
 exports.default = _default;

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

@@ -1,64 +1,44 @@
 export default Heading;
-declare class Heading extends React.Component<any, any, any> {
-    constructor(props: any);
-    constructor(props: any, context: any);
-    get help(): JSX.Element | null;
-    get back(): JSX.Element | null;
-    get subheader(): JSX.Element | null;
-    get separator(): JSX.Element | null;
-    get divider(): JSX.Element | null;
-    get pills(): JSX.Element | null;
-    render(): JSX.Element | null;
-}
+declare function Heading({ children, backLink, divider, help, helpAriaLabel, helpLink, pills, separator, subheader, subtitleId, title, titleId, ...rest }: {
+    [x: string]: any;
+    children: any;
+    backLink: any;
+    divider?: boolean | undefined;
+    help: any;
+    helpAriaLabel: any;
+    helpLink: any;
+    pills: any;
+    separator?: boolean | undefined;
+    subheader: any;
+    subtitleId: any;
+    title: any;
+    titleId: any;
+}): JSX.Element | null;
 declare namespace Heading {
     const propTypes: {
-        /**
-         * Children elements
-         */
+        /** Child elements */
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        /**
-         * Defines the title for the heading.
-         */
+        /** Defines the title for the heading. */
         title: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        /**
-         * Defines the title id for the heading.
-         */
+        /** Defines the title id for the heading. */
         titleId: PropTypes.Requireable<string>;
-        /**
-         * Defines the subheader for the heading.
-         */
+        /** Defines the subheader for the heading. */
         subheader: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        /**
-         * Defines the subtitle id for the heading.
-         */
+        /** Defines the subtitle id for the heading. */
         subtitleId: PropTypes.Requireable<string>;
-        /**
-         * Defines the help text for the heading.
-         */
+        /** Defines the help text for the heading. */
         help: PropTypes.Requireable<string>;
-        /**
-         * Defines the help link for the heading.
-         */
+        /** Defines the help link for the heading. */
         helpLink: PropTypes.Requireable<string>;
-        /**
-         * Defines the a href for the back link.
-         */
+        /** Defines the a href for the back link. */
         backLink: PropTypes.Requireable<string | ((...args: any[]) => any)>;
-        /**
-         * Adds a divider below the heading and the content.
-         */
+        /** Adds a divider below the heading and the content. */
         divider: PropTypes.Requireable<boolean>;
-        /**
-         * Adds a separator between the title and the subheader.
-         */
+        /** Adds a separator between the title and the subheader. */
         separator: PropTypes.Requireable<boolean>;
-        /**
-         * Pills that will be added after the title.
-         */
+        /** Pills that will be added after the title. */
         pills: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        /**
-         * Aria label for rendered help component
-         */
+        /** Aria label for rendered help component */
         helpAriaLabel: PropTypes.Requireable<string>;
         marginBottom?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
         margin?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
@@ -75,10 +55,5 @@ declare namespace Heading {
         marginY?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
         my?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
     };
-    namespace defaultProps {
-        const divider: boolean;
-        const separator: boolean;
-    }
 }
-import React from "react";
 import PropTypes from "prop-types";

package/lib/components/heading/heading.component.js

@@ -21,204 +21,120 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 function _extends() { _extends = Object.assign || 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); }
 
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
-
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
-
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
-function _possibleConstructorReturn(self, call) { if (call && (typeof call === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
-
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
-
 const marginPropTypes = (0, _utils.filterStyledSystemMarginProps)(_propTypes2.default.space);
 
-let Heading = /*#__PURE__*/function (_React$Component) {
-  _inherits(Heading, _React$Component);
-
-  var _super = _createSuper(Heading);
-
-  function Heading() {
-    _classCallCheck(this, Heading);
-
-    return _super.apply(this, arguments);
-  }
-
-  _createClass(Heading, [{
-    key: "help",
-    get: function () {
-      if (!this.props.help && !this.props.helpLink) {
-        return null;
-      }
-
-      return /*#__PURE__*/_react.default.createElement(_heading.StyledHeaderHelp, {
-        "data-element": "help",
-        tooltipPosition: "right",
-        href: this.props.helpLink,
-        ariaLabel: this.props.helpAriaLabel
-      }, this.props.help);
-    }
-  }, {
-    key: "back",
-    get: function () {
-      if (!this.props.backLink) {
-        return null;
-      }
-
-      let props;
-
-      if (typeof this.props.backLink === "string") {
-        props = {
-          href: this.props.backLink
-        };
-      } else {
-        props = {
-          onClick: this.props.backLink
-        };
-      }
-
-      return /*#__PURE__*/_react.default.createElement(_heading.StyledHeadingBackButton // this event allows an element to be focusable on click event on IE
-      , _extends({
-        onMouseDown: e => e.currentTarget.focus(),
-        "data-element": "back"
-      }, props), /*#__PURE__*/_react.default.createElement(_heading.StyledHeadingIcon, {
-        type: "chevron_left",
-        divider: this.props.divider
-      }));
-    }
-  }, {
-    key: "subheader",
-    get: function () {
-      if (!this.props.subheader) {
-        return null;
-      }
-
-      return /*#__PURE__*/_react.default.createElement(_heading.StyledSubHeader, {
-        "data-element": "subtitle",
-        id: this.props.subtitleId,
-        hasBackLink: !!this.props.backLink,
-        hasSeparator: this.props.separator
-      }, this.props.subheader);
-    }
-  }, {
-    key: "separator",
-    get: function () {
-      return this.props.separator ? /*#__PURE__*/_react.default.createElement(_heading.StyledSeparator, null) : null;
-    }
-  }, {
-    key: "divider",
-    get: function () {
-      return this.props.divider ? /*#__PURE__*/_react.default.createElement(_heading.StyledDivider, {
-        "data-element": "divider"
-      }) : null;
-    }
-  }, {
-    key: "pills",
-    get: function () {
-      return this.props.pills ? /*#__PURE__*/_react.default.createElement(_heading.StyledHeadingPills, {
-        "data-element": "pills"
-      }, this.props.pills) : null;
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      if (!this.props.title) {
-        return null;
-      }
-
-      const marginProps = (0, _utils.filterStyledSystemMarginProps)(this.props);
-      return /*#__PURE__*/_react.default.createElement(_heading.StyledHeading, _extends({}, (0, _tags.default)("heading", this.props), marginProps), /*#__PURE__*/_react.default.createElement(_heading.StyledHeader, {
-        "data-element": "header-container",
-        divider: this.props.divider,
-        subheader: this.props.subheader,
-        hasBackLink: !!this.props.backLink
-      }, this.back, /*#__PURE__*/_react.default.createElement(_heading.StyledHeaderContent, null, /*#__PURE__*/_react.default.createElement(_heading.StyledHeadingTitle, {
-        withMargin: this.props.pills || this.props.help,
-        variant: "h1",
-        "data-element": "title",
-        id: this.props.titleId
-      }, this.props.title), this.help, this.pills), this.separator, this.subheader), this.divider, this.props.children);
-    }
-  }]);
-
-  return Heading;
-}(_react.default.Component);
+const Heading = ({
+  children,
+  backLink,
+  divider = true,
+  help,
+  helpAriaLabel,
+  helpLink,
+  pills,
+  separator = false,
+  subheader,
+  subtitleId,
+  title,
+  titleId,
+  ...rest
+}) => {
+  const getHelp = () => {
+    return /*#__PURE__*/_react.default.createElement(_heading.StyledHeaderHelp, {
+      "data-element": "help",
+      tooltipPosition: "right",
+      href: helpLink,
+      ariaLabel: helpAriaLabel
+    }, help);
+  };
+
+  const getBackButton = () => {
+    const backButtonProps = typeof backLink === "string" ? {
+      href: backLink
+    } : {
+      onClick: backLink
+    };
+    return /*#__PURE__*/_react.default.createElement(_heading.StyledHeadingBackButton // this event allows an element to be focusable on click event on IE
+    , _extends({
+      onMouseDown: e => e.currentTarget.focus(),
+      "data-element": "back"
+    }, backButtonProps), /*#__PURE__*/_react.default.createElement(_heading.StyledHeadingIcon, {
+      type: "chevron_left",
+      divider: divider
+    }));
+  };
+
+  const getSubheader = () => {
+    return /*#__PURE__*/_react.default.createElement(_heading.StyledSubHeader, {
+      "data-element": "subtitle",
+      id: subtitleId,
+      hasBackLink: !!backLink,
+      hasSeparator: separator
+    }, subheader);
+  };
+
+  const getPills = () => {
+    return /*#__PURE__*/_react.default.createElement(_heading.StyledHeadingPills, {
+      "data-element": "pills"
+    }, pills);
+  };
+
+  const marginProps = (0, _utils.filterStyledSystemMarginProps)(rest);
+  const dataAttributes = {
+    "data-element": rest["data-element"],
+    "data-role": rest["data-role"]
+  };
+  return title ? /*#__PURE__*/_react.default.createElement(_heading.StyledHeading, _extends({}, (0, _tags.default)("heading", dataAttributes), marginProps), /*#__PURE__*/_react.default.createElement(_heading.StyledHeader, {
+    "data-element": "header-container",
+    divider: divider,
+    subheader: subheader,
+    hasBackLink: !!backLink
+  }, backLink && getBackButton(), /*#__PURE__*/_react.default.createElement(_heading.StyledHeaderContent, null, /*#__PURE__*/_react.default.createElement(_heading.StyledHeadingTitle, {
+    withMargin: pills || help,
+    variant: "h1",
+    "data-element": "title",
+    id: titleId
+  }, title), (help || helpLink) && getHelp(), pills && getPills()), separator && /*#__PURE__*/_react.default.createElement(_heading.StyledSeparator, null), subheader && getSubheader()), divider && /*#__PURE__*/_react.default.createElement(_heading.StyledDivider, {
+    "data-element": "divider"
+  }), children) : null;
+};
 
 Heading.propTypes = { ...marginPropTypes,
 
-  /**
-   * Children elements
-   */
+  /** Child elements */
   children: _propTypes.default.node,
 
-  /**
-   * Defines the title for the heading.
-   */
+  /** Defines the title for the heading. */
   title: _propTypes.default.node,
 
-  /**
-   * Defines the title id for the heading.
-   */
+  /** Defines the title id for the heading. */
   titleId: _propTypes.default.string,
 
-  /**
-   * Defines the subheader for the heading.
-   */
+  /** Defines the subheader for the heading. */
   subheader: _propTypes.default.node,
 
-  /**
-   * Defines the subtitle id for the heading.
-   */
+  /** Defines the subtitle id for the heading. */
   subtitleId: _propTypes.default.string,
 
-  /**
-   * Defines the help text for the heading.
-   */
+  /** Defines the help text for the heading. */
   help: _propTypes.default.string,
 
-  /**
-   * Defines the help link for the heading.
-   */
+  /** Defines the help link for the heading. */
   helpLink: _propTypes.default.string,
 
-  /**
-   * Defines the a href for the back link.
-   */
+  /** Defines the a href for the back link. */
   backLink: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.func]),
 
-  /**
-   * Adds a divider below the heading and the content.
-   */
+  /** Adds a divider below the heading and the content. */
   divider: _propTypes.default.bool,
 
-  /**
-   * Adds a separator between the title and the subheader.
-   */
+  /** Adds a separator between the title and the subheader. */
   separator: _propTypes.default.bool,
 
-  /**
-   * Pills that will be added after the title.
-   */
+  /** Pills that will be added after the title. */
   pills: _propTypes.default.node,
 
-  /**
-   * Aria label for rendered help component
-   */
+  /** Aria label for rendered help component */
   helpAriaLabel: _propTypes.default.string
 };
-Heading.defaultProps = {
-  divider: true,
-  separator: false
-};
 var _default = Heading;
 exports.default = _default;

package/lib/components/heading/heading.d.ts

@@ -2,8 +2,8 @@ import * as React from "react";
 import { MarginProps } from "styled-system";
 
 export interface HeadingProps extends MarginProps {
-  /** Custom className */
-  className?: string;
+  /** Child elements */
+  children?: React.ReactNode;
   /** Defines the title for the heading. */
   title?: React.ReactNode;
   /** Defines the title id for the heading. */
@@ -24,8 +24,10 @@ export interface HeadingProps extends MarginProps {
   separator?: boolean;
   /** Pills that will be added after the title. */
   pills?: React.ReactNode;
+  /** Aria label for rendered help component */
+  helpAriaLabel?: string;
 }
 
-declare class Heading extends React.Component<HeadingProps> {}
+declare function Heading(props: HeadingProps): JSX.Element | null;
 
 export default Heading;