carbon-react 109.1.0 → 109.1.3

package/lib/components/help/help.component.js

@@ -3,14 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.Help = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _propTypes2 = _interopRequireDefault(require("@styled-system/prop-types"));
-
 var _icon = _interopRequireDefault(require("../icon"));
 
 var _tags = _interopRequireDefault(require("../../__internal__/utils/helpers/tags/tags"));
@@ -23,8 +21,6 @@ var _tooltipProvider = require("../../__internal__/tooltip-provider");
 
 var _utils = require("../../style/utils");
 
-var _help2 = require("./help.config");
-
 var _guid = _interopRequireDefault(require("../../__internal__/utils/helpers/guid"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -35,23 +31,21 @@ 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); }
 
-const marginPropTypes = (0, _utils.filterStyledSystemMarginProps)(_propTypes2.default.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 = (0, _react.useRef)((0, _guid.default)());
@@ -61,23 +55,25 @@ const Help = ({
     helpAriaLabel
   } = (0, _react.useContext)(_tooltipProvider.TooltipContext);
   (0, _react.useEffect)(() => {
+    function handleKeyPress(ev) {
+      if (_events.default.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";
+  const tagType = as || href && "a" || "div";
 
-  function handleKeyPress(ev) {
-    if (_events.default.isEscKey(ev)) {
-      helpElement.current.blur();
-      updateTooltipVisible(false);
-    }
-  }
-
-  function handleFocusBlur(bool) {
+  function handleFocusBlur(isVisible) {
     return () => {
-      updateTooltipVisible(bool);
+      updateTooltipVisible(isVisible);
     };
   }
 
@@ -90,7 +86,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),
@@ -117,68 +115,177 @@ const Help = ({
   }));
 };
 
-Help.propTypes = { ...marginPropTypes,
-
-  /** [Legacy] A custom class name for the component. */
-  className: _propTypes.default.string,
-
-  /** Message to display in tooltip */
-  children: _propTypes.default.node,
-
-  /** The unique id of the component */
-  helpId: _propTypes.default.string,
-
-  /** Overrides the default tabindex of the component */
-  tabIndex: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
-
-  /** Overrides the default 'as' attribute of the Help component */
-  as: _propTypes.default.string,
-
-  /** Position of tooltip relative to target */
-  tooltipPosition: _propTypes.default.oneOf(["bottom", "left", "right", "top"]),
-
-  /** A path for the anchor */
-  href: _propTypes.default.string,
-
-  /** A boolean received from IconWrapper */
-  isFocused: _propTypes.default.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.default.string,
-
-  /** Override background color of the Tooltip, provide any color from palette or any valid css color value. */
-  tooltipBgColor: _propTypes.default.string,
-
-  /** Override font color of the Tooltip, provide any color from palette or any valid css color value. */
-  tooltipFontColor: _propTypes.default.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 => _help2.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.default.string,
-
-  /** Aria label */
-  ariaLabel: _propTypes.default.string
-};
-Help.defaultProps = {
-  tooltipPosition: "top",
-  tabIndex: 0,
-  type: "help"
+exports.Help = Help;
+Help.propTypes = {
+  "ariaLabel": _propTypes.default.string,
+  "as": _propTypes.default.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.default.node,
+  "className": _propTypes.default.string,
+  "helpId": _propTypes.default.string,
+  "href": _propTypes.default.string,
+  "isFocused": _propTypes.default.bool,
+  "m": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "margin": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "marginBottom": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "marginLeft": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "marginRight": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "marginTop": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "marginX": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "marginY": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "mb": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "ml": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "mr": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "mt": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "mx": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "my": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "tabIndex": _propTypes.default.number,
+  "tooltipBgColor": _propTypes.default.string,
+  "tooltipFlipOverrides": _propTypes.default.arrayOf(_propTypes.default.oneOf(["bottom", "left", "right", "top"])),
+  "tooltipFontColor": _propTypes.default.string,
+  "tooltipId": _propTypes.default.string,
+  "tooltipPosition": _propTypes.default.oneOf(["bottom", "left", "right", "top"]),
+  "type": _propTypes.default.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"])
 };
+Help.displayName = "Help";
 var _default = Help;
 exports.default = _default;

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

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

package/lib/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/lib/components/help/index.d.ts

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

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

@@ -27,7 +27,7 @@ var _scrollableBlock = _interopRequireDefault(require("../../scrollable-block"))
 
 var _submenu2 = _interopRequireDefault(require("./submenu.context"));
 
-var _clickAwayWrapper = _interopRequireDefault(require("../../../../__internal__/click-away-wrapper"));
+var _useClickAwayListener = _interopRequireDefault(require("../../../../hooks/__internal__/useClickAwayListener"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -232,6 +232,7 @@ const Submenu = /*#__PURE__*/_react.default.forwardRef(({
     } // eslint-disable-next-line react-hooks/exhaustive-deps
 
   }, [characterString]);
+  (0, _useClickAwayListener.default)([submenuRef], handleClickAway);
 
   if (inFullscreenView) {
     return /*#__PURE__*/_react.default.createElement(_submenu.StyledSubmenuWrapper, {
@@ -265,10 +266,7 @@ const Submenu = /*#__PURE__*/_react.default.forwardRef(({
     }, child))));
   }
 
-  return /*#__PURE__*/_react.default.createElement(_clickAwayWrapper.default, {
-    handleClickAway: handleClickAway,
-    targets: [submenuRef]
-  }, /*#__PURE__*/_react.default.createElement(_submenu.StyledSubmenuWrapper, {
+  return /*#__PURE__*/_react.default.createElement(_submenu.StyledSubmenuWrapper, {
     "data-component": "submenu-wrapper",
     onMouseOver: !clickToOpen ? () => openSubmenu() : undefined,
     onMouseLeave: () => closeSubmenu(),
@@ -306,7 +304,7 @@ const Submenu = /*#__PURE__*/_react.default.forwardRef(({
       updateFocusIndex: setSubmenuFocusIndex,
       itemIndex: child.type === _menuItem2.default ? index : undefined
     }
-  }, child)))));
+  }, child))));
 });
 
 Submenu.propTypes = {

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

@@ -9,6 +9,8 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _useClickAwayListener = _interopRequireDefault(require("../../hooks/__internal__/useClickAwayListener"));
+
 var _multiActionButton = require("./multi-action-button.style");
 
 var _button = _interopRequireWildcard(require("../button"));
@@ -125,31 +127,20 @@ const MultiActionButton = ({
       (_additionalButtons$cu = additionalButtons.current[nextIndex].current) === null || _additionalButtons$cu === void 0 ? void 0 : _additionalButtons$cu.focus();
     }
   }, [buttonChildren, hideButtons]);
-  const handleClickOutside = (0, _react.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 = (0, _react.useCallback)(() => {
     /* istanbul ignore else */
     if (!listening.current) {
-      document.addEventListener("click", handleClickOutside);
       document.addEventListener("keydown", handleKeyDown);
       listening.current = true;
     }
-  }, [handleKeyDown, handleClickOutside]);
+  }, [handleKeyDown]);
   const removeListeners = (0, _react.useCallback)(() => {
     /* istanbul ignore else */
     if (listening.current) {
-      document.removeEventListener("click", handleClickOutside);
       document.removeEventListener("keydown", handleKeyDown);
       listening.current = false;
     }
-  }, [handleKeyDown, handleClickOutside]);
+  }, [handleKeyDown]);
   (0, _react.useEffect)(() => {
     if (showAdditionalButtons) {
       addListeners();
@@ -220,6 +211,7 @@ const MultiActionButton = ({
     ref: buttonContainer
   }, childrenWithProps()));
 
+  (0, _useClickAwayListener.default)([ref], hideButtons);
   return /*#__PURE__*/_react.default.createElement(_multiActionButton.StyledMultiActionButton, _extends({
     "aria-haspopup": "true",
     onMouseLeave: hideButtons,

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

package/lib/components/popover-container/popover-container.component.js

@@ -15,11 +15,13 @@ var _popoverContainer = require("./popover-container.style");
 
 var _icon = _interopRequireDefault(require("../icon"));
 
+var _popover = _interopRequireDefault(require("../../__internal__/popover"));
+
 var _guid = _interopRequireDefault(require("../../__internal__/utils/helpers/guid"));
 
 var _utils = require("../../style/utils");
 
-var _clickAwayWrapper = _interopRequireDefault(require("../../__internal__/click-away-wrapper"));
+var _useClickAwayListener = _interopRequireDefault(require("../../hooks/__internal__/useClickAwayListener"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -80,6 +82,19 @@ renderClose.propTypes = {
   "tabIndex": _propTypes.default.number.isRequired
 };
 
+const offset = ({
+  reference
+}) => {
+  return [0, -reference.height];
+};
+
+const popperModifiers = [{
+  name: "offset",
+  options: {
+    offset
+  }
+}];
+
 const PopoverContainer = ({
   children,
   title,
@@ -106,7 +121,11 @@ const PopoverContainer = ({
   const popoverContainerId = title ? `PopoverContainer_${guid.current}` : undefined;
   const isOpen = isControlled ? open : isOpenInternal;
   (0, _react.useEffect)(() => {
-    if (isOpen && closeButtonRef.current) closeButtonRef.current.focus();
+    if (isOpen && closeButtonRef.current) setTimeout(() => {
+      var _closeButtonRef$curre;
+
+      return (_closeButtonRef$curre = closeButtonRef.current) === null || _closeButtonRef$curre === void 0 ? void 0 : _closeButtonRef$curre.focus();
+    }, 0);
   }, [isOpen]);
 
   const handleOpenButtonClick = e => {
@@ -138,19 +157,15 @@ const PopoverContainer = ({
     onClick: handleCloseButtonClick,
     ref: closeButtonRef,
     "aria-label": closeButtonAriaLabel
-  }; // TODO: Assign proper type after ClickAwayWrapper has been refactored
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  };
 
   const handleClickAway = e => {
     if (!isControlled) setIsOpenInternal(false);
     if (onClose) onClose(e);
   };
 
-  return /*#__PURE__*/_react.default.createElement(_clickAwayWrapper.default, {
-    targets: [ref],
-    handleClickAway: handleClickAway,
-    eventTypeId: "mousedown"
-  }, /*#__PURE__*/_react.default.createElement(_popoverContainer.PopoverContainerWrapperStyle, {
+  (0, _useClickAwayListener.default)([ref], handleClickAway, "mousedown");
+  return /*#__PURE__*/_react.default.createElement(_popoverContainer.PopoverContainerWrapperStyle, {
     "data-component": "popover-container",
     role: "region",
     "aria-labelledby": popoverContainerId,
@@ -164,12 +179,15 @@ const PopoverContainer = ({
     mountOnEnter: true,
     unmountOnExit: true,
     nodeRef: popoverContentNodeRef
-  }, state => /*#__PURE__*/_react.default.createElement(_popoverContainer.PopoverContainerContentStyle, _extends({
+  }, state => isOpen && /*#__PURE__*/_react.default.createElement(_popover.default, _extends({
+    reference: openButtonRef,
+    placement: position === "right" ? "bottom-start" : "bottom-end"
+  }, shouldCoverButton && {
+    modifiers: popperModifiers
+  }), /*#__PURE__*/_react.default.createElement(_popoverContainer.PopoverContainerContentStyle, _extends({
     "data-element": "popover-container-content",
     role: "dialog",
     animationState: state,
-    position: position,
-    shouldCoverButton: shouldCoverButton,
     "aria-labelledby": popoverContainerId,
     "aria-label": containerAriaLabel,
     "aria-describedby": ariaDescribedBy,

package/lib/components/popover-container/popover-container.style.d.ts

@@ -3,8 +3,6 @@ import IconButton from "../icon-button";
 declare const PopoverContainerWrapperStyle: import("styled-components").StyledComponent<"div", any, {}, never>;
 declare const PopoverContainerHeaderStyle: import("styled-components").StyledComponent<"div", any, {}, never>;
 declare type PopoverContainerContentStyleProps = {
-    shouldCoverButton?: boolean;
-    position?: "left" | "right";
     animationState?: TransitionStatus;
 };
 declare const PopoverContainerContentStyle: import("styled-components").StyledComponent<"div", any, PopoverContainerContentStyleProps, never>;

package/lib/components/popover-container/popover-container.style.js

@@ -40,14 +40,6 @@ const PopoverContainerContentStyle = _styledComponents.default.div`
   theme
 }) => theme.zIndex.popover};
 
-  ${({
-  shouldCoverButton
-}) => shouldCoverButton && "top: 0"}
-
-  ${({
-  position
-}) => position === "left" ? "right: 0" : "left: 0"};
-
   ${({
   animationState
 }) => {

package/lib/components/split-button/split-button.component.js

@@ -13,6 +13,8 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _propTypes2 = _interopRequireDefault(require("@styled-system/prop-types"));
 
+var _useClickAwayListener = _interopRequireDefault(require("../../hooks/__internal__/useClickAwayListener"));
+
 var _icon = _interopRequireDefault(require("../icon"));
 
 var _button = _interopRequireWildcard(require("../button"));
@@ -80,13 +82,6 @@ const SplitButton = ({
     if (isToggleButtonFocused.current) return;
     setShowAdditionalButtons(false);
   }, []);
-  const handleClickOutside = (0, _react.useCallback)(({
-    target
-  }) => {
-    if (!splitButtonNode.current.contains(target) && buttonContainer.current && !buttonContainer.current.contains(target)) {
-      hideButtons();
-    }
-  }, [hideButtons]);
   const handleKeyDown = (0, _react.useCallback)(ev => {
     const numOfChildren = children.length - 1;
     const currentIndex = additionalButtons.current.findIndex(node => node.current === document.activeElement);
@@ -119,19 +114,17 @@ const SplitButton = ({
   const addListeners = (0, _react.useCallback)(() => {
     /* istanbul ignore else */
     if (!listening.current) {
-      document.addEventListener("click", handleClickOutside);
       document.addEventListener("keydown", handleKeyDown);
       listening.current = true;
     }
-  }, [handleKeyDown, handleClickOutside]);
+  }, [handleKeyDown]);
   const removeListeners = (0, _react.useCallback)(() => {
     /* istanbul ignore else */
     if (listening.current) {
-      document.removeEventListener("click", handleClickOutside);
       document.removeEventListener("keydown", handleKeyDown);
       listening.current = false;
     }
-  }, [handleKeyDown, handleClickOutside]);
+  }, [handleKeyDown]);
   (0, _react.useEffect)(() => {
     if (showAdditionalButtons) {
       addListeners();
@@ -291,6 +284,7 @@ const SplitButton = ({
     }, childrenWithProps()));
   }
 
+  (0, _useClickAwayListener.default)([splitButtonNode], hideButtons);
   return /*#__PURE__*/_react.default.createElement(_splitButton.default, _extends({
     "aria-haspopup": "true",
     onMouseLeave: hideButtons,

package/lib/hooks/__internal__/useClickAwayListener/index.d.ts

@@ -0,0 +1 @@
+export { default } from "./useClickAwayListener";