carbon-react 109.1.0 → 109.1.3

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

@@ -10,7 +10,7 @@ export interface LabelProps extends ValidationProps, StyledLabelProps, StyledLab
     /** Icon type */
     helpIcon?: IconType;
     /** Overrides the default tabindex of the Help component */
-    helpTabIndex?: string;
+    helpTabIndex?: number | string;
     /** A string that represents the ID of another form element */
     htmlFor?: string;
     /** The unique id of the label element */

package/esm/__internal__/label/label.component.js

@@ -98,7 +98,7 @@ const Label = ({
 
     return help && /*#__PURE__*/React.createElement(StyledIconWrapper, wrapperProps, /*#__PURE__*/React.createElement(Help, {
       tooltipId: tooltipId,
-      tabIndex: helpTabIndex,
+      tabIndex: Number(helpTabIndex),
       type: helpIcon,
       isFocused: isFocused
     }, help));
@@ -129,7 +129,7 @@ Label.propTypes = {
   "error": PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
   "help": PropTypes.node,
   "helpIcon": PropTypes.oneOf(["add", "admin", "alert", "analysis", "arrow_down", "arrow_left_boxed", "arrow_left_right_small", "arrow_left_small", "arrow_left", "arrow_right_small", "arrow_right", "arrow_up", "arrow", "attach", "bank", "basket_with_squares", "basket", "bin", "block_arrow_right", "blocked_square", "blocked", "bold", "boxed_shapes", "bulk_destroy", "bullet_list_dotted", "bullet_list_numbers", "bullet_list", "business", "calendar_today", "calendar", "call", "camera", "card_view", "caret_down", "caret_large_down", "caret_large_left", "caret_large_right", "caret_large_up", "caret_left", "caret_right", "caret_up", "cart", "chart_bar", "chart_line", "chart_pie", "chat_notes", "chat", "chevron_down_thick", "chevron_down", "chevron_left_thick", "chevron_left", "chevron_right_thick", "chevron_right", "chevron_up_thick", "chevron_up", "circle_with_dots", "circles_connection", "clock", "close", "coins", "collaborate", "computer_clock", "connect", "contacts", "copy", "create", "credit_card_slash", "credit_card", "cross_circle", "cross", "csv", "delete", "delivery", "disconnect", "disputed", "document_right_align", "document_tick", "document_vertical_lines", "download", "draft", "drag_vertical", "drag", "dropdown", "duplicate", "edit", "edited", "ellipsis_horizontal", "ellipsis_vertical", "email_switch", "email", "entry", "envelope_dollar", "envelope_euro", "error_square", "error", "euro", "expand", "factory", "favourite_lined", "favourite", "fax", "feedback", "file_excel", "file_generic", "file_image", "file_pdf", "file_word", "files_leaning", "filter_new", "filter", "fit_height", "fit_width", "flag", "folder", "gift", "go", "graph", "grid", "help", "hide", "home", "image", "in_progress", "in_transit", "individual", "info", "italic", "key", "ledger_arrow_left", "ledger_arrow_right", "ledger", "lightbulb_off", "lightbulb_on", "link", "list_view", "location", "locked", "logout", "lookup", "marker", "message", "minus_large", "minus", "mobile", "money_bag", "none", "old_warning", "pause_circle", "pause", "pdf", "people_switch", "people", "person_info", "person_tick", "person", "phone", "piggy_bank", "play_circle", "play", "plus_large", "plus", "pound", "print", "progress", "progressed", "question_hollow", "question_mark", "question", "refresh_clock", "refresh", "remove", "sage_coin", "save", "scan", "search", "services", "settings_old", "settings", "share", "shop", "sort_down", "sort_up", "spanner", "split_container", "split", "square_dot", "squares_nine", "stacked_boxes", "stacked_squares", "submitted", "sync", "tag", "talk", "three_boxes", "tick_circle", "tick", "true_tick", "undo", "unlocked", "upload", "uploaded", "video", "view", "warning"]),
-  "helpTabIndex": PropTypes.string,
+  "helpTabIndex": PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   "htmlFor": PropTypes.string,
   "info": PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
   "inline": PropTypes.bool,

package/esm/components/checkbox/checkbox-group.component.js

@@ -14,7 +14,6 @@ export const CheckboxGroupContext = /*#__PURE__*/React.createContext({});
 const CheckboxGroup = props => {
   const {
     children,
-    groupName,
     legend,
     error,
     warning,
@@ -45,7 +44,6 @@ const CheckboxGroup = props => {
     legendInline: legendInline
   }, /*#__PURE__*/React.createElement(CheckboxGroupContext.Provider, {
     value: {
-      inputName: groupName,
       error: !!error,
       warning: !!warning,
       info: !!info
@@ -75,9 +73,6 @@ CheckboxGroup.propTypes = {
   /** The Checkboxes to be rendered in the group */
   children: PropTypes.node.isRequired,
 
-  /** Specifies the name prop to be applied to each button in the group */
-  groupName: PropTypes.string.isRequired,
-
   /** Indicate that error has occurred
   Pass string to display icon, tooltip and red border
   Pass true boolean to only display red border */

package/esm/components/checkbox/checkbox-group.d.ts

@@ -15,8 +15,6 @@ interface CheckboxGroupProps extends ValidationProps, MarginProps {
   legendSpacing?: 1 | 2;
   /** The Checkboxes to be rendered in the group */
   children: React.ReactNode;
-  /** Specifies the name prop to be applied to each button in the group */
-  groupName: string;
   /** Spacing between label and a field for inline label, given number will be multiplied by base spacing unit (8) */
   labelSpacing?: 1 | 2;
   /** Flag to configure component as mandatory */

package/esm/components/checkbox/checkbox.component.js

@@ -51,8 +51,7 @@ const Checkbox = ({
   const {
     error: contextError,
     warning: contextWarning,
-    info: contextInfo,
-    inputName
+    info: contextInfo
   } = useContext(CheckboxGroupContext);
   const inputProps = {
     onClick,
@@ -80,7 +79,6 @@ const Checkbox = ({
     inputWidth,
     labelWidth,
     tooltipPosition,
-    inputName,
     ...props
   };
   return /*#__PURE__*/React.createElement(TooltipProvider, {

package/esm/components/date/date.component.js

@@ -12,7 +12,7 @@ import StyledDateInput from "./date.style";
 import Textbox from "../textbox";
 import DatePicker from "./__internal__/date-picker";
 import DateRangeContext from "../date-range/date-range.context";
-import ClickAwayWrapper from "../../__internal__/click-away-wrapper";
+import useClickAwayListener from "../../hooks/__internal__/useClickAwayListener";
 const marginPropTypes = filterStyledSystemMarginProps(styledSystemPropTypes.space);
 
 const DateInput = ({
@@ -277,11 +277,8 @@ const DateInput = ({
     }
   };
 
-  return /*#__PURE__*/React.createElement(ClickAwayWrapper, {
-    handleClickAway: handleClickAway,
-    eventTypeId: "mousedown",
-    targets: [parentRef, pickerRef]
-  }, /*#__PURE__*/React.createElement(StyledDateInput, _extends({
+  useClickAwayListener([parentRef, pickerRef], handleClickAway, "mousedown");
+  return /*#__PURE__*/React.createElement(StyledDateInput, _extends({
     ref: wrapperRef,
     role: "presentation",
     size: size,
@@ -321,7 +318,7 @@ const DateInput = ({
     ref: pickerRef,
     pickerMouseDown: handlePickerMouseDown,
     open: open
-  })));
+  }));
 };
 
 DateInput.propTypes = { ...Textbox.propTypes,

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

@@ -33,7 +33,8 @@ const Sort = ({
     sortType: sortType,
     "aria-labelledby": id.current
   }, children, sortType && /*#__PURE__*/React.createElement(Icon, {
-    type: sortType === "ascending" ? "sort_up" : "sort_down"
+    type: sortType === "ascending" ? "sort_up" : "sort_down",
+    color: "--colorsUtilityMajor200"
   })), !sortType && /*#__PURE__*/React.createElement(StyledSpaceHolder, null));
 };
 

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

@@ -12,7 +12,6 @@ const StyledSort = styled.div`
     width: 16px;
     height: 16px;
     padding-left: 6px;
-    color: var(--colorsUtilityMajor200);
   }
 
   :hover {

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

@@ -0,0 +1,43 @@
+import React from "react";
+import { MarginProps } from "styled-system";
+import { IconType } from "../icon";
+import { TooltipPositions } from "../tooltip/tooltip.config";
+export interface HelpProps extends MarginProps {
+    /** Overrides the default 'as' attribute of the Help component */
+    as?: keyof JSX.IntrinsicElements;
+    /** Aria label */
+    ariaLabel?: string;
+    /** The message to be displayed within the tooltip */
+    children?: React.ReactNode;
+    /** [Legacy] A custom class name for the component. */
+    className?: string;
+    /** The unique id of the component (used with aria-describedby for accessibility) */
+    helpId?: string;
+    /** A path for the anchor */
+    href?: string;
+    /** A boolean received from IconWrapper */
+    isFocused?: boolean;
+    /** Overrides the default tabindex of the component */
+    tabIndex?: number;
+    /** Override background color of the Tooltip, provide any color from palette or any valid css color value. */
+    tooltipBgColor?: string;
+    /** Override font color of the Tooltip, provide any color from palette or any valid css color value. */
+    tooltipFontColor?: string;
+    /** Overrides the default flip behaviour of the Tooltip,
+     *  must be an array containing some or all of ["top", "bottom", "left", "right"]
+     * (see https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements)
+     */
+    tooltipFlipOverrides?: TooltipPositions[];
+    /** Id passed to the tooltip container, used for accessibility purposes */
+    tooltipId?: string;
+    /** Position of tooltip relative to target */
+    tooltipPosition?: TooltipPositions;
+    /** Help Icon type */
+    type?: IconType;
+    [key: string]: any;
+}
+export declare const Help: {
+    ({ as, ariaLabel, children, className, href, helpId, isFocused, tabIndex, tooltipBgColor, tooltipFontColor, tooltipFlipOverrides, tooltipId, tooltipPosition, type, ...rest }: HelpProps): JSX.Element;
+    displayName: string;
+};
+export default Help;

package/esm/components/help/help.component.js

@@ -1,33 +1,30 @@
 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); }
 
-import React, { useContext, useEffect, useState, useRef } from "react";
+import React, { useContext, useEffect, useRef, useState } from "react";
 import PropTypes from "prop-types";
-import styledSystemPropTypes from "@styled-system/prop-types";
 import Icon from "../icon";
 import tagComponent from "../../__internal__/utils/helpers/tags/tags";
 import StyledHelp from "./help.style";
 import Events from "../../__internal__/utils/helpers/events";
 import { TooltipContext } from "../../__internal__/tooltip-provider";
 import { filterStyledSystemMarginProps } from "../../style/utils";
-import { HELP_POSITIONS } from "./help.config";
 import guid from "../../__internal__/utils/helpers/guid";
-const marginPropTypes = filterStyledSystemMarginProps(styledSystemPropTypes.space);
 
 const Help = ({
+  as,
+  ariaLabel = "help",
+  children,
   className,
   href,
   helpId,
-  children,
-  tabIndex,
-  as,
-  tooltipPosition,
   isFocused,
-  type,
-  tooltipId,
+  tabIndex = 0,
   tooltipBgColor,
   tooltipFontColor,
   tooltipFlipOverrides,
-  ariaLabel = "help",
+  tooltipId,
+  tooltipPosition = "top",
+  type = "help",
   ...rest
 }) => {
   const defaultTooltipId = useRef(guid());
@@ -37,23 +34,25 @@ const Help = ({
     helpAriaLabel
   } = useContext(TooltipContext);
   useEffect(() => {
+    function handleKeyPress(ev) {
+      if (Events.isEscKey(ev)) {
+        var _helpElement$current;
+
+        helpElement === null || helpElement === void 0 ? void 0 : (_helpElement$current = helpElement.current) === null || _helpElement$current === void 0 ? void 0 : _helpElement$current.blur();
+        updateTooltipVisible(false);
+      }
+    }
+
     document.addEventListener("keydown", handleKeyPress);
     return function cleanup() {
       document.removeEventListener("keydown", handleKeyPress);
     };
   });
-  const tagType = as || href && "a";
-
-  function handleKeyPress(ev) {
-    if (Events.isEscKey(ev)) {
-      helpElement.current.blur();
-      updateTooltipVisible(false);
-    }
-  }
+  const tagType = as || href && "a" || "div";
 
-  function handleFocusBlur(bool) {
+  function handleFocusBlur(isVisible) {
     return () => {
-      updateTooltipVisible(bool);
+      updateTooltipVisible(isVisible);
     };
   }
 
@@ -66,7 +65,9 @@ const Help = ({
     id: helpId,
     ref: helpElement,
     onClick: () => {
-      helpElement.current.focus();
+      var _helpElement$current2;
+
+      helpElement === null || helpElement === void 0 ? void 0 : (_helpElement$current2 = helpElement.current) === null || _helpElement$current2 === void 0 ? void 0 : _helpElement$current2.focus();
     },
     onFocus: handleFocusBlur(true),
     onBlur: handleFocusBlur(false),
@@ -93,67 +94,176 @@ const Help = ({
   }));
 };
 
-Help.propTypes = { ...marginPropTypes,
-
-  /** [Legacy] A custom class name for the component. */
-  className: PropTypes.string,
-
-  /** Message to display in tooltip */
-  children: PropTypes.node,
-
-  /** The unique id of the component */
-  helpId: PropTypes.string,
-
-  /** Overrides the default tabindex of the component */
-  tabIndex: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-
-  /** Overrides the default 'as' attribute of the Help component */
-  as: PropTypes.string,
-
-  /** Position of tooltip relative to target */
-  tooltipPosition: PropTypes.oneOf(["bottom", "left", "right", "top"]),
-
-  /** A path for the anchor */
-  href: PropTypes.string,
-
-  /** A boolean received from IconWrapper */
-  isFocused: PropTypes.bool,
-
-  /** <a href="https://brand.sage.com/d/NdbrveWvNheA/foundations#/icons/icons" target="_blank">List of supported icons</a>
-   *
-   * Icon to display, can be received from label component
-   *
-   */
-  type: PropTypes.string,
-
-  /** Override background color of the Tooltip, provide any color from palette or any valid css color value. */
-  tooltipBgColor: PropTypes.string,
-
-  /** Override font color of the Tooltip, provide any color from palette or any valid css color value. */
-  tooltipFontColor: PropTypes.string,
-
-  /** Overrides the default flip behaviour of the Tooltip, must be an array containing some or all of ["top", "bottom", "left", "right"] (see https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements) */
-  tooltipFlipOverrides: (props, propName, componentName) => {
-    const prop = props[propName];
-    const isValid = prop && Array.isArray(prop) && prop.every(placement => HELP_POSITIONS.includes(placement));
-
-    if (!prop || isValid) {
-      return null;
-    }
-
-    return new Error( // eslint-disable-next-line max-len
-    `The \`${propName}\` prop supplied to \`${componentName}\` must be an array containing some or all of ["top", "bottom", "left", "right"].`);
-  },
-
-  /** Id passed to the tooltip container, used for accessibility purposes. */
-  tooltipId: PropTypes.string,
-
-  /** Aria label */
-  ariaLabel: PropTypes.string
-};
-Help.defaultProps = {
-  tooltipPosition: "top",
-  tabIndex: 0,
-  type: "help"
+Help.propTypes = {
+  "ariaLabel": PropTypes.string,
+  "as": PropTypes.oneOf(["a", "abbr", "address", "animate", "animateMotion", "animateTransform", "area", "article", "aside", "audio", "b", "base", "bdi", "bdo", "big", "blockquote", "body", "br", "button", "canvas", "caption", "circle", "cite", "clipPath", "code", "col", "colgroup", "data", "datalist", "dd", "defs", "del", "desc", "details", "dfn", "dialog", "div", "dl", "dt", "ellipse", "em", "embed", "feBlend", "feColorMatrix", "feComponentTransfer", "feComposite", "feConvolveMatrix", "feDiffuseLighting", "feDisplacementMap", "feDistantLight", "feDropShadow", "feFlood", "feFuncA", "feFuncB", "feFuncG", "feFuncR", "feGaussianBlur", "feImage", "feMerge", "feMergeNode", "feMorphology", "feOffset", "fePointLight", "feSpecularLighting", "feSpotLight", "feTile", "feTurbulence", "fieldset", "figcaption", "figure", "filter", "footer", "foreignObject", "form", "g", "h1", "h2", "h3", "h4", "h5", "h6", "head", "header", "hgroup", "hr", "html", "i", "iframe", "image", "img", "input", "ins", "kbd", "keygen", "label", "legend", "li", "line", "linearGradient", "link", "main", "map", "mark", "marker", "mask", "menu", "menuitem", "meta", "metadata", "meter", "mpath", "nav", "noindex", "noscript", "object", "ol", "optgroup", "option", "output", "p", "param", "path", "pattern", "picture", "polygon", "polyline", "pre", "progress", "q", "radialGradient", "rect", "rp", "rt", "ruby", "s", "samp", "script", "section", "select", "slot", "small", "source", "span", "stop", "strong", "style", "sub", "summary", "sup", "svg", "switch", "symbol", "table", "tbody", "td", "template", "text", "textarea", "textPath", "tfoot", "th", "thead", "time", "title", "tr", "track", "tspan", "u", "ul", "use", "var", "video", "view", "wbr", "webview"]),
+  "children": PropTypes.node,
+  "className": PropTypes.string,
+  "helpId": PropTypes.string,
+  "href": PropTypes.string,
+  "isFocused": PropTypes.bool,
+  "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]),
+  "tabIndex": PropTypes.number,
+  "tooltipBgColor": PropTypes.string,
+  "tooltipFlipOverrides": PropTypes.arrayOf(PropTypes.oneOf(["bottom", "left", "right", "top"])),
+  "tooltipFontColor": PropTypes.string,
+  "tooltipId": PropTypes.string,
+  "tooltipPosition": PropTypes.oneOf(["bottom", "left", "right", "top"]),
+  "type": PropTypes.oneOf(["add", "admin", "alert", "analysis", "arrow_down", "arrow_left_boxed", "arrow_left_right_small", "arrow_left_small", "arrow_left", "arrow_right_small", "arrow_right", "arrow_up", "arrow", "attach", "bank", "basket_with_squares", "basket", "bin", "block_arrow_right", "blocked_square", "blocked", "bold", "boxed_shapes", "bulk_destroy", "bullet_list_dotted", "bullet_list_numbers", "bullet_list", "business", "calendar_today", "calendar", "call", "camera", "card_view", "caret_down", "caret_large_down", "caret_large_left", "caret_large_right", "caret_large_up", "caret_left", "caret_right", "caret_up", "cart", "chart_bar", "chart_line", "chart_pie", "chat_notes", "chat", "chevron_down_thick", "chevron_down", "chevron_left_thick", "chevron_left", "chevron_right_thick", "chevron_right", "chevron_up_thick", "chevron_up", "circle_with_dots", "circles_connection", "clock", "close", "coins", "collaborate", "computer_clock", "connect", "contacts", "copy", "create", "credit_card_slash", "credit_card", "cross_circle", "cross", "csv", "delete", "delivery", "disconnect", "disputed", "document_right_align", "document_tick", "document_vertical_lines", "download", "draft", "drag_vertical", "drag", "dropdown", "duplicate", "edit", "edited", "ellipsis_horizontal", "ellipsis_vertical", "email_switch", "email", "entry", "envelope_dollar", "envelope_euro", "error_square", "error", "euro", "expand", "factory", "favourite_lined", "favourite", "fax", "feedback", "file_excel", "file_generic", "file_image", "file_pdf", "file_word", "files_leaning", "filter_new", "filter", "fit_height", "fit_width", "flag", "folder", "gift", "go", "graph", "grid", "help", "hide", "home", "image", "in_progress", "in_transit", "individual", "info", "italic", "key", "ledger_arrow_left", "ledger_arrow_right", "ledger", "lightbulb_off", "lightbulb_on", "link", "list_view", "location", "locked", "logout", "lookup", "marker", "message", "minus_large", "minus", "mobile", "money_bag", "none", "old_warning", "pause_circle", "pause", "pdf", "people_switch", "people", "person_info", "person_tick", "person", "phone", "piggy_bank", "play_circle", "play", "plus_large", "plus", "pound", "print", "progress", "progressed", "question_hollow", "question_mark", "question", "refresh_clock", "refresh", "remove", "sage_coin", "save", "scan", "search", "services", "settings_old", "settings", "share", "shop", "sort_down", "sort_up", "spanner", "split_container", "split", "square_dot", "squares_nine", "stacked_boxes", "stacked_squares", "submitted", "sync", "tag", "talk", "three_boxes", "tick_circle", "tick", "true_tick", "undo", "unlocked", "upload", "uploaded", "video", "view", "warning"])
 };
+export { Help };
+Help.displayName = "Help";
 export default Help;

package/esm/components/help/help.config.d.ts

@@ -0,0 +1 @@
+export declare const HELP_POSITIONS: string[];

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

@@ -1,2 +1,5 @@
+interface StyledHelpProps {
+    href?: string;
+}
+declare const StyledHelp: import("styled-components").StyledComponent<"div", any, StyledHelpProps, never>;
 export default StyledHelp;
-declare const StyledHelp: import("styled-components").StyledComponent<"div", any, {}, never>;

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

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

package/esm/components/menu/__internal__/submenu/submenu.component.js

@@ -12,7 +12,7 @@ import MenuItem from "../../menu-item";
 import { characterNavigation } from "../keyboard-navigation";
 import ScrollableBlock from "../../scrollable-block";
 import SubmenuContext from "./submenu.context";
-import ClickAwayWrapper from "../../../../__internal__/click-away-wrapper";
+import useClickAwayListener from "../../../../hooks/__internal__/useClickAwayListener";
 const Submenu = /*#__PURE__*/React.forwardRef(({
   children,
   className,
@@ -205,6 +205,7 @@ const Submenu = /*#__PURE__*/React.forwardRef(({
     } // eslint-disable-next-line react-hooks/exhaustive-deps
 
   }, [characterString]);
+  useClickAwayListener([submenuRef], handleClickAway);
 
   if (inFullscreenView) {
     return /*#__PURE__*/React.createElement(StyledSubmenuWrapper, {
@@ -238,10 +239,7 @@ const Submenu = /*#__PURE__*/React.forwardRef(({
     }, child))));
   }
 
-  return /*#__PURE__*/React.createElement(ClickAwayWrapper, {
-    handleClickAway: handleClickAway,
-    targets: [submenuRef]
-  }, /*#__PURE__*/React.createElement(StyledSubmenuWrapper, {
+  return /*#__PURE__*/React.createElement(StyledSubmenuWrapper, {
     "data-component": "submenu-wrapper",
     onMouseOver: !clickToOpen ? () => openSubmenu() : undefined,
     onMouseLeave: () => closeSubmenu(),
@@ -279,7 +277,7 @@ const Submenu = /*#__PURE__*/React.forwardRef(({
       updateFocusIndex: setSubmenuFocusIndex,
       itemIndex: child.type === MenuItem ? index : undefined
     }
-  }, child)))));
+  }, child))));
 });
 Submenu.propTypes = {
   /** Children elements */

package/esm/components/multi-action-button/multi-action-button.component.js

@@ -2,6 +2,7 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 import React, { useCallback, useEffect, useState, useRef, useMemo } from "react";
 import PropTypes from "prop-types";
+import useClickAwayListener from "../../hooks/__internal__/useClickAwayListener";
 import { StyledMultiActionButton, StyledButtonChildrenContainer } from "./multi-action-button.style";
 import Button, { ButtonWithForwardRef } from "../button";
 import Events from "../../__internal__/utils/helpers/events";
@@ -105,31 +106,20 @@ const MultiActionButton = ({
       (_additionalButtons$cu = additionalButtons.current[nextIndex].current) === null || _additionalButtons$cu === void 0 ? void 0 : _additionalButtons$cu.focus();
     }
   }, [buttonChildren, hideButtons]);
-  const handleClickOutside = useCallback(({
-    target
-  }) => {
-    var _ref$current, _buttonContainer$curr;
-
-    if (!((_ref$current = ref.current) !== null && _ref$current !== void 0 && _ref$current.contains(target)) && !((_buttonContainer$curr = buttonContainer.current) !== null && _buttonContainer$curr !== void 0 && _buttonContainer$curr.contains(target))) {
-      hideButtons();
-    }
-  }, [hideButtons]);
   const addListeners = useCallback(() => {
     /* istanbul ignore else */
     if (!listening.current) {
-      document.addEventListener("click", handleClickOutside);
       document.addEventListener("keydown", handleKeyDown);
       listening.current = true;
     }
-  }, [handleKeyDown, handleClickOutside]);
+  }, [handleKeyDown]);
   const removeListeners = useCallback(() => {
     /* istanbul ignore else */
     if (listening.current) {
-      document.removeEventListener("click", handleClickOutside);
       document.removeEventListener("keydown", handleKeyDown);
       listening.current = false;
     }
-  }, [handleKeyDown, handleClickOutside]);
+  }, [handleKeyDown]);
   useEffect(() => {
     if (showAdditionalButtons) {
       addListeners();
@@ -200,6 +190,7 @@ const MultiActionButton = ({
     ref: buttonContainer
   }, childrenWithProps()));
 
+  useClickAwayListener([ref], hideButtons);
   return /*#__PURE__*/React.createElement(StyledMultiActionButton, _extends({
     "aria-haspopup": "true",
     onMouseLeave: hideButtons,

package/esm/components/popover-container/popover-container.component.d.ts

@@ -36,7 +36,7 @@ export interface PopoverContainerProps extends PaddingProps {
     /** Sets the popover container dialog header name */
     title?: string;
     /** Callback fires when close icon clicked */
-    onClose?: (ev: React.MouseEvent<HTMLElement>) => void;
+    onClose?: (ev: React.MouseEvent<HTMLElement> | Event) => void;
     /** if `true` the popover-container is open */
     open?: boolean;
     /** Callback fires when open component is clicked */