carbon-react 109.0.2 → 109.1.2

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/inline-inputs/inline-inputs.component.d.ts

@@ -1,27 +1,23 @@
 import React from "react";
+import { StyledContentContainerProps, StyledInlineInputsProps } from "./inline-inputs.style";
 interface InlineInputsContextProps {
     ariaLabelledBy?: string;
 }
-declare type GutterOptions = "none" | "extra-small" | "small" | "medium-small" | "medium" | "medium-large" | "large" | "extra-large";
-export interface InlineInputsProps {
+export interface InlineInputsProps extends StyledContentContainerProps, StyledInlineInputsProps {
+    /** Breakpoint for adaptive label (inline label change to top aligned). Enables the adaptive behaviour when set */
+    adaptiveLabelBreakpoint?: number;
     /** Children elements */
     children?: React.ReactNode;
     /** [Legacy prop] A custom class name for the component. */
     className?: string;
-    /** Gutter prop gets passed down to Row component if false gutter value is "none" */
-    gutter?: GutterOptions;
     /** The id of the corresponding input control for the label */
     htmlFor?: string;
-    /** Width of the inline inputs container in percentage */
-    inputWidth?: number;
     /** Defines the label text for the heading. */
     label?: string;
-    /** Width of a label in percentage */
-    labelWidth?: number;
 }
 export declare const InlineInputsContext: React.Context<InlineInputsContextProps>;
 declare const InlineInputs: {
-    ({ label, htmlFor, children, className, gutter, inputWidth, labelWidth, }: InlineInputsProps): JSX.Element;
+    ({ adaptiveLabelBreakpoint, label, htmlFor, children, className, gutter, inputWidth, labelInline, labelWidth, }: InlineInputsProps): JSX.Element;
     displayName: string;
 };
 export default InlineInputs;

package/lib/components/inline-inputs/inline-inputs.component.js

@@ -15,6 +15,8 @@ var _inlineInputs = _interopRequireWildcard(require("./inline-inputs.style"));
 
 var _guid = _interopRequireDefault(require("../../__internal__/utils/helpers/guid"));
 
+var _useIsAboveBreakpoint = _interopRequireDefault(require("../../hooks/__internal__/useIsAboveBreakpoint"));
+
 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; }
@@ -39,21 +41,29 @@ const columnWrapper = (children, gutter, labelId) => {
 };
 
 const InlineInputs = ({
+  adaptiveLabelBreakpoint,
   label,
   htmlFor,
   children = null,
   className = "",
   gutter = "none",
   inputWidth,
+  labelInline = true,
   labelWidth
 }) => {
   const labelId = (0, _react.useRef)((0, _guid.default)());
+  const largeScreen = (0, _useIsAboveBreakpoint.default)(adaptiveLabelBreakpoint);
+  let inlineLabel = labelInline;
+
+  if (adaptiveLabelBreakpoint) {
+    inlineLabel = largeScreen;
+  }
 
   function renderLabel() {
     if (!label) return null;
     return /*#__PURE__*/_react.default.createElement(_label.default, {
       labelId: labelId.current,
-      inline: true,
+      inline: inlineLabel,
       htmlFor: htmlFor
     }, label);
   }
@@ -62,7 +72,8 @@ const InlineInputs = ({
     gutter: gutter,
     "data-component": "inline-inputs",
     className: className,
-    labelWidth: labelWidth
+    labelWidth: labelWidth,
+    labelInline: inlineLabel
   }, renderLabel(), /*#__PURE__*/_react.default.createElement(_inlineInputs.StyledContentContainer, {
     gutter: gutter,
     "data-element": "inline-inputs-container",
@@ -71,12 +82,14 @@ const InlineInputs = ({
 };
 
 InlineInputs.propTypes = {
+  "adaptiveLabelBreakpoint": _propTypes.default.number,
   "children": _propTypes.default.node,
   "className": _propTypes.default.string,
   "gutter": _propTypes.default.oneOf(["extra-large", "extra-small", "large", "medium-large", "medium-small", "medium", "none", "small"]),
   "htmlFor": _propTypes.default.string,
   "inputWidth": _propTypes.default.number,
   "label": _propTypes.default.string,
+  "labelInline": _propTypes.default.bool,
   "labelWidth": _propTypes.default.number
 };
 InlineInputs.displayName = "InlineInputs";

package/lib/components/inline-inputs/inline-inputs.style.d.ts

@@ -1,6 +1,21 @@
 import { InlineInputsProps } from "./inline-inputs.component";
-declare const StyledInlineInput: import("styled-components").StyledComponent<"div", any, Pick<InlineInputsProps, "gutter">, never>;
-declare const StyledContentContainer: import("styled-components").StyledComponent<"div", any, Pick<InlineInputsProps, "inputWidth" | "gutter">, never>;
-declare const StyledInlineInputs: import("styled-components").StyledComponent<"div", any, Pick<InlineInputsProps, "gutter" | "labelWidth">, never>;
+declare type GutterOptions = "none" | "extra-small" | "small" | "medium-small" | "medium" | "medium-large" | "large" | "extra-large";
+interface StyledInlineInputProps {
+    /** Gutter prop gets passed down to Row component if false gutter value is "none" */
+    gutter?: GutterOptions;
+}
+export interface StyledContentContainerProps extends StyledInlineInputProps {
+    /** Width of the inline inputs container in percentage */
+    inputWidth?: number;
+}
+export interface StyledInlineInputsProps extends StyledInlineInputProps {
+    /** Width of a label in percentage */
+    labelWidth?: number;
+    /** @ignore @private */
+    labelInline?: boolean;
+}
+declare const StyledInlineInput: import("styled-components").StyledComponent<"div", any, InlineInputsProps, never>;
+declare const StyledContentContainer: import("styled-components").StyledComponent<"div", any, InlineInputsProps, never>;
+declare const StyledInlineInputs: import("styled-components").StyledComponent<"div", any, InlineInputsProps, never>;
 export { StyledContentContainer, StyledInlineInput };
 export default StyledInlineInputs;

package/lib/components/inline-inputs/inline-inputs.style.js

@@ -61,12 +61,16 @@ const StyledContentContainer = _styledComponents.default.div`
 `;
 exports.StyledContentContainer = StyledContentContainer;
 const StyledInlineInputs = _styledComponents.default.div`
-  display: flex;
+  display: ${({
+  labelInline
+}) => labelInline ? `flex` : `block`};
   align-items: center;
 
   ${_label.StyledLabelContainer} {
     width: auto;
-    margin-bottom: 0;
+    margin-bottom: ${({
+  labelInline
+}) => labelInline ? `0px` : `8px`};
     padding-right: 16px;
     flex: 0 0 ${({
   labelWidth

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