carbon-react 110.6.1 → 110.8.0

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

@@ -0,0 +1,59 @@
+import React from "react";
+import { ModalProps } from "../modal";
+import { TagProps } from "../../__internal__/utils/helpers/tags/tags";
+declare type PaddingValues = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
+export interface ContentPaddingInterface {
+    p?: PaddingValues;
+    py?: PaddingValues;
+    px?: PaddingValues;
+}
+declare type DialogSizes = "auto" | "extra-small" | "small" | "medium-small" | "medium" | "medium-large" | "large" | "extra-large";
+export interface DialogProps extends ModalProps, TagProps {
+    /** Custom class name  */
+    className?: string;
+    /** Prop to specify the aria-describedby property of the Dialog component */
+    "aria-describedby"?: string;
+    /**
+     * Prop to specify the aria-label of the Dialog component.
+     * To be used only when the title prop is not defined, and the component is not labelled by any internal element.
+     */
+    "aria-label"?: string;
+    /**
+     * Prop to specify the aria-labelledby property of the Dialog component
+     * To be used when the title prop is a custom React Node,
+     * or the component is labelled by an internal element other than the title.
+     */
+    "aria-labelledby"?: string;
+    disableAutoFocus?: boolean;
+    disableFocusTrap?: boolean;
+    /**
+     * Function to replace focus trap
+     * @ignore
+     * @private
+     */
+    bespokeFocusTrap?: (ev: KeyboardEvent, firstElement?: HTMLElement, lastElement?: HTMLElement) => void;
+    /** Optional reference to an element meant to be focused on open */
+    focusFirstElement?: React.MutableRefObject<HTMLElement | null>;
+    /** Allows developers to specify a specific height for the dialog. */
+    height?: string;
+    /** Adds Help tooltip to Header */
+    help?: string;
+    /** A custom close event handler */
+    onCancel?: (ev: React.KeyboardEvent<HTMLElement> | React.MouseEvent<HTMLButtonElement>) => void;
+    /** Determines if the close icon is shown */
+    showCloseIcon?: boolean;
+    /** Size of dialog, default size is 750px */
+    size?: DialogSizes;
+    /** Subtitle displayed at top of dialog */
+    subtitle?: string;
+    /** Title displayed at top of dialog */
+    title?: React.ReactNode;
+    /** The ARIA role to be applied to the Dialog container */
+    role?: string;
+    /** Padding to be set on the Dialog content */
+    contentPadding?: ContentPaddingInterface;
+    /** an optional array of refs to containers whose content should also be reachable by tabbing from the dialog */
+    focusableContainers?: React.MutableRefObject<HTMLElement | null>[];
+}
+export declare const Dialog: ({ className, children, open, height, size, title, disableEscKey, subtitle, disableAutoFocus, focusFirstElement, onCancel, showCloseIcon, bespokeFocusTrap, disableClose, help, role, contentPadding, focusableContainers, ...rest }: DialogProps) => JSX.Element;
+export default Dialog;

package/lib/components/dialog/dialog.component.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.Dialog = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
@@ -42,14 +42,14 @@ const Dialog = ({
   children,
   open,
   height,
-  size,
+  size = "medium",
   title,
   disableEscKey,
   subtitle,
-  disableAutoFocus,
+  disableAutoFocus = false,
   focusFirstElement,
   onCancel,
-  showCloseIcon,
+  showCloseIcon = true,
   bespokeFocusTrap,
   disableClose,
   help,
@@ -70,6 +70,11 @@ const Dialog = ({
     current: subtitleId
   } = (0, _react.useRef)((0, _guid.default)());
   const centerDialog = (0, _react.useCallback)(() => {
+    /* istanbul ignore if */
+    if (!dialogRef.current) {
+      return;
+    }
+
     const {
       width: dialogWidth,
       height: dialogHeight
@@ -197,93 +202,56 @@ const Dialog = ({
   }, contentPadding), children)))));
 };
 
+exports.Dialog = Dialog;
 Dialog.propTypes = {
-  /** Prop to specify the aria-describedby property of the Dialog component */
   "aria-describedby": _propTypes.default.string,
-
-  /**
-   * Prop to specify the aria-label of the Dialog component.
-   * To be used only when the title prop is not defined, and the component is not labelled by any internal element.
-   */
   "aria-label": _propTypes.default.string,
-
-  /**
-   * Prop to specify the aria-labelledby property of the Dialog component
-   * To be used when the title prop is a custom React Node,
-   * or the component is labelled by an internal element other than the title.
-   */
   "aria-labelledby": _propTypes.default.string,
-
-  /** Dialog content */
-  children: _propTypes.default.node,
-
-  /** Custom class name  */
-  className: _propTypes.default.string,
-
-  /** Controls the open state of the component */
-  open: _propTypes.default.bool.isRequired,
-
-  /** A custom close event handler */
-  onCancel: _propTypes.default.func,
-
-  /** Determines if the Esc Key closes the Dialog */
-  disableEscKey: _propTypes.default.bool,
-
-  /** Determines if the Dialog can be closed */
-  disableClose: _propTypes.default.bool,
-
-  /** Allows developers to specify a specific height for the dialog. */
-  height: _propTypes.default.string,
-
-  /** Adds Help tooltip to Header */
-  help: _propTypes.default.string,
-
-  /** Title displayed at top of dialog */
-  title: _propTypes.default.node,
-
-  /** Subtitle displayed at top of dialog */
-  subtitle: _propTypes.default.string,
-
-  /** Size of dialog, default size is 750px */
-  size: _propTypes.default.oneOf(["auto", "extra-small", "small", "medium-small", "medium", "medium-large", "large", "extra-large"]),
-
-  /** Determines if the close icon is shown */
-  showCloseIcon: _propTypes.default.bool,
-
-  /** Optional reference to an element meant to be focused on open */
-  focusFirstElement: _propTypes.default.shape({
-    current: _propTypes.default.any
+  "ariaRole": _propTypes.default.string,
+  "bespokeFocusTrap": _propTypes.default.func,
+  "children": _propTypes.default.node,
+  "className": _propTypes.default.string,
+  "contentPadding": _propTypes.default.shape({
+    "p": _propTypes.default.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8]),
+    "px": _propTypes.default.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8]),
+    "py": _propTypes.default.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8])
   }),
-
-  /** Disables auto focus functionality on child elements */
-  disableAutoFocus: _propTypes.default.bool,
-
-  /**
-   * Function to replace focus trap
-   * @ignore
-   * @private
-   */
-  bespokeFocusTrap: _propTypes.default.func,
-
-  /** The ARIA role to be applied to the Dialog container */
-  role: _propTypes.default.string,
-
-  /** Padding to be set on the Dialog content */
-  contentPadding: _propTypes.default.shape({
-    p: _propTypes.default.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8]),
-    px: _propTypes.default.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8]),
-    py: _propTypes.default.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8])
+  "data-component": _propTypes.default.string,
+  "data-element": _propTypes.default.string,
+  "data-role": _propTypes.default.string,
+  "disableAutoFocus": _propTypes.default.bool,
+  "disableClose": _propTypes.default.bool,
+  "disableEscKey": _propTypes.default.bool,
+  "disableFocusTrap": _propTypes.default.bool,
+  "enableBackgroundUI": _propTypes.default.bool,
+  "focusableContainers": _propTypes.default.arrayOf(_propTypes.default.shape({
+    "current": _propTypes.default.oneOfType([_propTypes.default.oneOf([null]), function (props, propName) {
+      if (props[propName] == null) {
+        return new Error("Prop '" + propName + "' is required but wasn't specified");
+      } else if (typeof props[propName] !== 'object' || props[propName].nodeType !== 1) {
+        return new Error("Expected prop '" + propName + "' to be of type Element");
+      }
+    }]).isRequired
+  })),
+  "focusFirstElement": _propTypes.default.shape({
+    "current": _propTypes.default.oneOfType([_propTypes.default.oneOf([null]), function (props, propName) {
+      if (props[propName] == null) {
+        return new Error("Prop '" + propName + "' is required but wasn't specified");
+      } else if (typeof props[propName] !== 'object' || props[propName].nodeType !== 1) {
+        return new Error("Expected prop '" + propName + "' to be of type Element");
+      }
+    }]).isRequired
   }),
-
-  /** an optional array of refs to containers whose content should also be reachable by tabbing from the dialog */
-  focusableContainers: _propTypes.default.arrayOf(_propTypes.default.shape({
-    current: _propTypes.default.any
-  }))
-};
-Dialog.defaultProps = {
-  size: "medium",
-  showCloseIcon: true,
-  disableAutoFocus: false
+  "height": _propTypes.default.string,
+  "help": _propTypes.default.string,
+  "onCancel": _propTypes.default.func,
+  "open": _propTypes.default.bool.isRequired,
+  "role": _propTypes.default.string,
+  "showCloseIcon": _propTypes.default.bool,
+  "size": _propTypes.default.oneOf(["auto", "extra-large", "extra-small", "large", "medium-large", "medium-small", "medium", "small"]),
+  "subtitle": _propTypes.default.string,
+  "timeout": _propTypes.default.number,
+  "title": _propTypes.default.node
 };
 var _default = Dialog;
 exports.default = _default;

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

@@ -0,0 +1,5 @@
+export declare const DIALOG_SIZES: string[];
+export declare const TOP_MARGIN = 20;
+export declare const CONTENT_TOP_PADDING = 24;
+export declare const HORIZONTAL_PADDING = 32;
+export declare const CONTENT_BOTTOM_PADDING = 30;

package/lib/components/dialog/dialog.style.d.ts

@@ -0,0 +1,25 @@
+import { ContentPaddingInterface } from "./dialog.component";
+declare const dialogSizes: {
+    auto: string;
+    "extra-small": string;
+    small: string;
+    "medium-small": string;
+    medium: string;
+    "medium-large": string;
+    large: string;
+    "extra-large": string;
+};
+declare type DialogStyleProps = {
+    topMargin: number;
+    size?: keyof typeof dialogSizes;
+    dialogHeight?: string;
+};
+declare const DialogStyle: import("styled-components").StyledComponent<"div", any, DialogStyleProps & ContentPaddingInterface, never>;
+declare type DialogTitleStyleProps = {
+    showCloseIcon?: boolean;
+    hasSubtitle?: boolean;
+};
+declare const DialogTitleStyle: import("styled-components").StyledComponent<"div", any, DialogTitleStyleProps, never>;
+declare const DialogContentStyle: import("styled-components").StyledComponent<"div", any, ContentPaddingInterface, never>;
+declare const DialogInnerContentStyle: import("styled-components").StyledComponent<"div", any, ContentPaddingInterface, never>;
+export { DialogStyle, DialogTitleStyle, DialogContentStyle, DialogInnerContentStyle, };

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

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

package/lib/components/dialog/index.js

@@ -6,10 +6,10 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
   enumerable: true,
   get: function () {
-    return _dialogComponent.default;
+    return _dialog.default;
   }
 });
 
-var _dialogComponent = _interopRequireDefault(require("./dialog.component.js"));
+var _dialog = _interopRequireDefault(require("./dialog.component"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/components/dismissible-box/dismissible-box.component.js

@@ -42,6 +42,7 @@ DismissibleBox.propTypes = {
   "alignContent": _propTypes.default.oneOfType([_propTypes.default.oneOf(["-moz-initial", "baseline", "center", "end", "flex-end", "flex-start", "inherit", "initial", "normal", "revert", "space-around", "space-between", "space-evenly", "start", "stretch", "unset"]), _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf(["-moz-initial", "baseline", "center", "end", "flex-end", "flex-start", "inherit", "initial", "normal", "revert", "space-around", "space-between", "space-evenly", "start", "stretch", "unset", null]), _propTypes.default.shape({
     "__@iterator": _propTypes.default.func.isRequired,
     "anchor": _propTypes.default.func.isRequired,
+    "at": _propTypes.default.func.isRequired,
     "big": _propTypes.default.func.isRequired,
     "blink": _propTypes.default.func.isRequired,
     "bold": _propTypes.default.func.isRequired,
@@ -91,6 +92,7 @@ DismissibleBox.propTypes = {
   })])), _propTypes.default.object, _propTypes.default.shape({
     "__@iterator": _propTypes.default.func.isRequired,
     "anchor": _propTypes.default.func.isRequired,
+    "at": _propTypes.default.func.isRequired,
     "big": _propTypes.default.func.isRequired,
     "blink": _propTypes.default.func.isRequired,
     "bold": _propTypes.default.func.isRequired,
@@ -141,6 +143,7 @@ DismissibleBox.propTypes = {
   "alignItems": _propTypes.default.oneOfType([_propTypes.default.oneOf(["-moz-initial", "baseline", "center", "end", "flex-end", "flex-start", "inherit", "initial", "normal", "revert", "self-end", "self-start", "start", "stretch", "unset"]), _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf(["-moz-initial", "baseline", "center", "end", "flex-end", "flex-start", "inherit", "initial", "normal", "revert", "self-end", "self-start", "start", "stretch", "unset", null]), _propTypes.default.shape({
     "__@iterator": _propTypes.default.func.isRequired,
     "anchor": _propTypes.default.func.isRequired,
+    "at": _propTypes.default.func.isRequired,
     "big": _propTypes.default.func.isRequired,
     "blink": _propTypes.default.func.isRequired,
     "bold": _propTypes.default.func.isRequired,
@@ -190,6 +193,7 @@ DismissibleBox.propTypes = {
   })])), _propTypes.default.object, _propTypes.default.shape({
     "__@iterator": _propTypes.default.func.isRequired,
     "anchor": _propTypes.default.func.isRequired,
+    "at": _propTypes.default.func.isRequired,
     "big": _propTypes.default.func.isRequired,
     "blink": _propTypes.default.func.isRequired,
     "bold": _propTypes.default.func.isRequired,
@@ -240,6 +244,7 @@ DismissibleBox.propTypes = {
   "alignSelf": _propTypes.default.oneOfType([_propTypes.default.oneOf(["-moz-initial", "auto", "baseline", "center", "end", "flex-end", "flex-start", "inherit", "initial", "normal", "revert", "self-end", "self-start", "start", "stretch", "unset"]), _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf(["-moz-initial", "auto", "baseline", "center", "end", "flex-end", "flex-start", "inherit", "initial", "normal", "revert", "self-end", "self-start", "start", "stretch", "unset", null]), _propTypes.default.shape({
     "__@iterator": _propTypes.default.func.isRequired,
     "anchor": _propTypes.default.func.isRequired,
+    "at": _propTypes.default.func.isRequired,
     "big": _propTypes.default.func.isRequired,
     "blink": _propTypes.default.func.isRequired,
     "bold": _propTypes.default.func.isRequired,
@@ -289,6 +294,7 @@ DismissibleBox.propTypes = {
   })])), _propTypes.default.object, _propTypes.default.shape({
     "__@iterator": _propTypes.default.func.isRequired,
     "anchor": _propTypes.default.func.isRequired,
+    "at": _propTypes.default.func.isRequired,
     "big": _propTypes.default.func.isRequired,
     "blink": _propTypes.default.func.isRequired,
     "bold": _propTypes.default.func.isRequired,
@@ -375,6 +381,7 @@ DismissibleBox.propTypes = {
   "bottom": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
     "__@iterator": _propTypes.default.func.isRequired,
     "anchor": _propTypes.default.func.isRequired,
+    "at": _propTypes.default.func.isRequired,
     "big": _propTypes.default.func.isRequired,
     "blink": _propTypes.default.func.isRequired,
     "bold": _propTypes.default.func.isRequired,
@@ -424,6 +431,7 @@ DismissibleBox.propTypes = {
   }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
     "__@iterator": _propTypes.default.func.isRequired,
     "anchor": _propTypes.default.func.isRequired,
+    "at": _propTypes.default.func.isRequired,
     "big": _propTypes.default.func.isRequired,
     "blink": _propTypes.default.func.isRequired,
     "bold": _propTypes.default.func.isRequired,
@@ -487,6 +495,7 @@ DismissibleBox.propTypes = {
   "flex": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
     "__@iterator": _propTypes.default.func.isRequired,
     "anchor": _propTypes.default.func.isRequired,
+    "at": _propTypes.default.func.isRequired,
     "big": _propTypes.default.func.isRequired,
     "blink": _propTypes.default.func.isRequired,
     "bold": _propTypes.default.func.isRequired,
@@ -536,6 +545,7 @@ DismissibleBox.propTypes = {
   }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
     "__@iterator": _propTypes.default.func.isRequired,
     "anchor": _propTypes.default.func.isRequired,
+    "at": _propTypes.default.func.isRequired,
     "big": _propTypes.default.func.isRequired,
     "blink": _propTypes.default.func.isRequired,
     "bold": _propTypes.default.func.isRequired,
@@ -586,6 +596,7 @@ DismissibleBox.propTypes = {
   "flexBasis": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
     "__@iterator": _propTypes.default.func.isRequired,
     "anchor": _propTypes.default.func.isRequired,
+    "at": _propTypes.default.func.isRequired,
     "big": _propTypes.default.func.isRequired,
     "blink": _propTypes.default.func.isRequired,
     "bold": _propTypes.default.func.isRequired,
@@ -635,6 +646,7 @@ DismissibleBox.propTypes = {
   }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
     "__@iterator": _propTypes.default.func.isRequired,
     "anchor": _propTypes.default.func.isRequired,
+    "at": _propTypes.default.func.isRequired,
     "big": _propTypes.default.func.isRequired,
     "blink": _propTypes.default.func.isRequired,
     "bold": _propTypes.default.func.isRequired,
@@ -718,6 +730,7 @@ DismissibleBox.propTypes = {
   "height": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
     "__@iterator": _propTypes.default.func.isRequired,
     "anchor": _propTypes.default.func.isRequired,
+    "at": _propTypes.default.func.isRequired,
     "big": _propTypes.default.func.isRequired,
     "blink": _propTypes.default.func.isRequired,
     "bold": _propTypes.default.func.isRequired,
@@ -767,6 +780,7 @@ DismissibleBox.propTypes = {
   }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
     "__@iterator": _propTypes.default.func.isRequired,
     "anchor": _propTypes.default.func.isRequired,
+    "at": _propTypes.default.func.isRequired,
     "big": _propTypes.default.func.isRequired,
     "blink": _propTypes.default.func.isRequired,
     "bold": _propTypes.default.func.isRequired,
@@ -817,6 +831,7 @@ DismissibleBox.propTypes = {
   "justifyItems": _propTypes.default.oneOfType([_propTypes.default.oneOf(["-moz-initial", "baseline", "center", "end", "flex-end", "flex-start", "inherit", "initial", "left", "legacy", "normal", "revert", "right", "self-end", "self-start", "start", "stretch", "unset"]), _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf(["-moz-initial", "baseline", "center", "end", "flex-end", "flex-start", "inherit", "initial", "left", "legacy", "normal", "revert", "right", "self-end", "self-start", "start", "stretch", "unset", null]), _propTypes.default.shape({
     "__@iterator": _propTypes.default.func.isRequired,
     "anchor": _propTypes.default.func.isRequired,
+    "at": _propTypes.default.func.isRequired,
     "big": _propTypes.default.func.isRequired,
     "blink": _propTypes.default.func.isRequired,
     "bold": _propTypes.default.func.isRequired,
@@ -866,6 +881,7 @@ DismissibleBox.propTypes = {
   })])), _propTypes.default.object, _propTypes.default.shape({
     "__@iterator": _propTypes.default.func.isRequired,
     "anchor": _propTypes.default.func.isRequired,
+    "at": _propTypes.default.func.isRequired,
     "big": _propTypes.default.func.isRequired,
     "blink": _propTypes.default.func.isRequired,
     "bold": _propTypes.default.func.isRequired,
@@ -916,6 +932,7 @@ DismissibleBox.propTypes = {
   "justifySelf": _propTypes.default.oneOfType([_propTypes.default.oneOf(["-moz-initial", "auto", "baseline", "center", "end", "flex-end", "flex-start", "inherit", "initial", "left", "normal", "revert", "right", "self-end", "self-start", "start", "stretch", "unset"]), _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf(["-moz-initial", "auto", "baseline", "center", "end", "flex-end", "flex-start", "inherit", "initial", "left", "normal", "revert", "right", "self-end", "self-start", "start", "stretch", "unset", null]), _propTypes.default.shape({
     "__@iterator": _propTypes.default.func.isRequired,
     "anchor": _propTypes.default.func.isRequired,
+    "at": _propTypes.default.func.isRequired,
     "big": _propTypes.default.func.isRequired,
     "blink": _propTypes.default.func.isRequired,
     "bold": _propTypes.default.func.isRequired,
@@ -965,6 +982,7 @@ DismissibleBox.propTypes = {
   })])), _propTypes.default.object, _propTypes.default.shape({
     "__@iterator": _propTypes.default.func.isRequired,
     "anchor": _propTypes.default.func.isRequired,
+    "at": _propTypes.default.func.isRequired,
     "big": _propTypes.default.func.isRequired,
     "blink": _propTypes.default.func.isRequired,
     "bold": _propTypes.default.func.isRequired,
@@ -1015,6 +1033,7 @@ DismissibleBox.propTypes = {
   "left": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
     "__@iterator": _propTypes.default.func.isRequired,
     "anchor": _propTypes.default.func.isRequired,
+    "at": _propTypes.default.func.isRequired,
     "big": _propTypes.default.func.isRequired,
     "blink": _propTypes.default.func.isRequired,
     "bold": _propTypes.default.func.isRequired,
@@ -1064,6 +1083,7 @@ DismissibleBox.propTypes = {
   }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
     "__@iterator": _propTypes.default.func.isRequired,
     "anchor": _propTypes.default.func.isRequired,
+    "at": _propTypes.default.func.isRequired,
     "big": _propTypes.default.func.isRequired,
     "blink": _propTypes.default.func.isRequired,
     "bold": _propTypes.default.func.isRequired,
@@ -1202,6 +1222,7 @@ DismissibleBox.propTypes = {
   "maxHeight": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
     "__@iterator": _propTypes.default.func.isRequired,
     "anchor": _propTypes.default.func.isRequired,
+    "at": _propTypes.default.func.isRequired,
     "big": _propTypes.default.func.isRequired,
     "blink": _propTypes.default.func.isRequired,
     "bold": _propTypes.default.func.isRequired,
@@ -1251,6 +1272,7 @@ DismissibleBox.propTypes = {
   }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
     "__@iterator": _propTypes.default.func.isRequired,
     "anchor": _propTypes.default.func.isRequired,
+    "at": _propTypes.default.func.isRequired,
     "big": _propTypes.default.func.isRequired,
     "blink": _propTypes.default.func.isRequired,
     "bold": _propTypes.default.func.isRequired,
@@ -1301,6 +1323,7 @@ DismissibleBox.propTypes = {
   "maxWidth": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
     "__@iterator": _propTypes.default.func.isRequired,
     "anchor": _propTypes.default.func.isRequired,
+    "at": _propTypes.default.func.isRequired,
     "big": _propTypes.default.func.isRequired,
     "blink": _propTypes.default.func.isRequired,
     "bold": _propTypes.default.func.isRequired,
@@ -1350,6 +1373,7 @@ DismissibleBox.propTypes = {
   }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
     "__@iterator": _propTypes.default.func.isRequired,
     "anchor": _propTypes.default.func.isRequired,
+    "at": _propTypes.default.func.isRequired,
     "big": _propTypes.default.func.isRequired,
     "blink": _propTypes.default.func.isRequired,
     "bold": _propTypes.default.func.isRequired,
@@ -1411,6 +1435,7 @@ DismissibleBox.propTypes = {
   "minHeight": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
     "__@iterator": _propTypes.default.func.isRequired,
     "anchor": _propTypes.default.func.isRequired,
+    "at": _propTypes.default.func.isRequired,
     "big": _propTypes.default.func.isRequired,
     "blink": _propTypes.default.func.isRequired,
     "bold": _propTypes.default.func.isRequired,
@@ -1460,6 +1485,7 @@ DismissibleBox.propTypes = {
   }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
     "__@iterator": _propTypes.default.func.isRequired,
     "anchor": _propTypes.default.func.isRequired,
+    "at": _propTypes.default.func.isRequired,
     "big": _propTypes.default.func.isRequired,
     "blink": _propTypes.default.func.isRequired,
     "bold": _propTypes.default.func.isRequired,
@@ -1510,6 +1536,7 @@ DismissibleBox.propTypes = {
   "minWidth": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
     "__@iterator": _propTypes.default.func.isRequired,
     "anchor": _propTypes.default.func.isRequired,
+    "at": _propTypes.default.func.isRequired,
     "big": _propTypes.default.func.isRequired,
     "blink": _propTypes.default.func.isRequired,
     "bold": _propTypes.default.func.isRequired,
@@ -1559,6 +1586,7 @@ DismissibleBox.propTypes = {
   }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
     "__@iterator": _propTypes.default.func.isRequired,
     "anchor": _propTypes.default.func.isRequired,
+    "at": _propTypes.default.func.isRequired,
     "big": _propTypes.default.func.isRequired,
     "blink": _propTypes.default.func.isRequired,
     "bold": _propTypes.default.func.isRequired,
@@ -1665,6 +1693,7 @@ DismissibleBox.propTypes = {
   "opacity": _propTypes.default.oneOfType([_propTypes.default.oneOf(["-moz-initial", "inherit", "initial", "revert", "unset"]), _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf(["-moz-initial", "inherit", "initial", "revert", "unset", null]), _propTypes.default.shape({
     "__@iterator": _propTypes.default.func.isRequired,
     "anchor": _propTypes.default.func.isRequired,
+    "at": _propTypes.default.func.isRequired,
     "big": _propTypes.default.func.isRequired,
     "blink": _propTypes.default.func.isRequired,
     "bold": _propTypes.default.func.isRequired,
@@ -1714,6 +1743,7 @@ DismissibleBox.propTypes = {
   })])), _propTypes.default.object, _propTypes.default.shape({
     "__@iterator": _propTypes.default.func.isRequired,
     "anchor": _propTypes.default.func.isRequired,
+    "at": _propTypes.default.func.isRequired,
     "big": _propTypes.default.func.isRequired,
     "blink": _propTypes.default.func.isRequired,
     "bold": _propTypes.default.func.isRequired,
@@ -1779,6 +1809,7 @@ DismissibleBox.propTypes = {
   "overflow": _propTypes.default.oneOfType([_propTypes.default.oneOf(["-moz-hidden-unscrollable", "-moz-initial", "auto", "clip", "hidden", "inherit", "initial", "revert", "scroll", "unset", "visible"]), _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf(["-moz-hidden-unscrollable", "-moz-initial", "auto", "clip", "hidden", "inherit", "initial", "revert", "scroll", "unset", "visible", null]), _propTypes.default.shape({
     "__@iterator": _propTypes.default.func.isRequired,
     "anchor": _propTypes.default.func.isRequired,
+    "at": _propTypes.default.func.isRequired,
     "big": _propTypes.default.func.isRequired,
     "blink": _propTypes.default.func.isRequired,
     "bold": _propTypes.default.func.isRequired,
@@ -1828,6 +1859,7 @@ DismissibleBox.propTypes = {
   })])), _propTypes.default.object, _propTypes.default.shape({
     "__@iterator": _propTypes.default.func.isRequired,
     "anchor": _propTypes.default.func.isRequired,
+    "at": _propTypes.default.func.isRequired,
     "big": _propTypes.default.func.isRequired,
     "blink": _propTypes.default.func.isRequired,
     "bold": _propTypes.default.func.isRequired,
@@ -2036,6 +2068,7 @@ DismissibleBox.propTypes = {
   "right": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
     "__@iterator": _propTypes.default.func.isRequired,
     "anchor": _propTypes.default.func.isRequired,
+    "at": _propTypes.default.func.isRequired,
     "big": _propTypes.default.func.isRequired,
     "blink": _propTypes.default.func.isRequired,
     "bold": _propTypes.default.func.isRequired,
@@ -2085,6 +2118,7 @@ DismissibleBox.propTypes = {
   }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
     "__@iterator": _propTypes.default.func.isRequired,
     "anchor": _propTypes.default.func.isRequired,
+    "at": _propTypes.default.func.isRequired,
     "big": _propTypes.default.func.isRequired,
     "blink": _propTypes.default.func.isRequired,
     "bold": _propTypes.default.func.isRequired,
@@ -2136,6 +2170,7 @@ DismissibleBox.propTypes = {
   "size": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
     "__@iterator": _propTypes.default.func.isRequired,
     "anchor": _propTypes.default.func.isRequired,
+    "at": _propTypes.default.func.isRequired,
     "big": _propTypes.default.func.isRequired,
     "blink": _propTypes.default.func.isRequired,
     "bold": _propTypes.default.func.isRequired,
@@ -2185,6 +2220,7 @@ DismissibleBox.propTypes = {
   }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
     "__@iterator": _propTypes.default.func.isRequired,
     "anchor": _propTypes.default.func.isRequired,
+    "at": _propTypes.default.func.isRequired,
     "big": _propTypes.default.func.isRequired,
     "blink": _propTypes.default.func.isRequired,
     "bold": _propTypes.default.func.isRequired,
@@ -2236,6 +2272,7 @@ DismissibleBox.propTypes = {
   "top": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
     "__@iterator": _propTypes.default.func.isRequired,
     "anchor": _propTypes.default.func.isRequired,
+    "at": _propTypes.default.func.isRequired,
     "big": _propTypes.default.func.isRequired,
     "blink": _propTypes.default.func.isRequired,
     "bold": _propTypes.default.func.isRequired,
@@ -2285,6 +2322,7 @@ DismissibleBox.propTypes = {
   }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
     "__@iterator": _propTypes.default.func.isRequired,
     "anchor": _propTypes.default.func.isRequired,
+    "at": _propTypes.default.func.isRequired,
     "big": _propTypes.default.func.isRequired,
     "blink": _propTypes.default.func.isRequired,
     "bold": _propTypes.default.func.isRequired,
@@ -2336,6 +2374,7 @@ DismissibleBox.propTypes = {
   "verticalAlign": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
     "__@iterator": _propTypes.default.func.isRequired,
     "anchor": _propTypes.default.func.isRequired,
+    "at": _propTypes.default.func.isRequired,
     "big": _propTypes.default.func.isRequired,
     "blink": _propTypes.default.func.isRequired,
     "bold": _propTypes.default.func.isRequired,
@@ -2385,6 +2424,7 @@ DismissibleBox.propTypes = {
   }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
     "__@iterator": _propTypes.default.func.isRequired,
     "anchor": _propTypes.default.func.isRequired,
+    "at": _propTypes.default.func.isRequired,
     "big": _propTypes.default.func.isRequired,
     "blink": _propTypes.default.func.isRequired,
     "bold": _propTypes.default.func.isRequired,

package/lib/components/form/__internal__/form-summary.component.js

@@ -53,19 +53,26 @@ Summary.propTypes = {
   warnings: _propTypes.default.number
 };
 
-const FormSummary = props => /*#__PURE__*/_react.default.createElement(_formSummary.StyledFormSummary, {
-  showSummary: props.errors > 0 || props.warnings > 0,
-  "data-element": "form-summary"
-}, /*#__PURE__*/_react.default.createElement(Summary, _extends({
-  type: "errors"
-}, props)), /*#__PURE__*/_react.default.createElement(Summary, _extends({
-  type: "warnings"
-}, props)), props.children);
+const FormSummary = ({
+  fullWidth,
+  ...props
+}) => {
+  return /*#__PURE__*/_react.default.createElement(_formSummary.StyledFormSummary, {
+    showSummary: props.errors || props.warnings,
+    "data-element": "form-summary",
+    fullWidth: fullWidth
+  }, /*#__PURE__*/_react.default.createElement(Summary, _extends({
+    type: "errors"
+  }, props)), /*#__PURE__*/_react.default.createElement(Summary, _extends({
+    type: "warnings"
+  }, props)), props.children);
+};
 
 FormSummary.propTypes = {
   children: _propTypes.default.node,
   errors: _propTypes.default.number,
-  warnings: _propTypes.default.number
+  warnings: _propTypes.default.number,
+  fullWidth: _propTypes.default.bool
 };
 var _default = FormSummary;
 exports.default = _default;

package/lib/components/form/__internal__/form-summary.d.ts

@@ -7,6 +7,8 @@ export interface FormSummaryProps {
   errors?: number;
   /** The total number of warnings present in the form */
   warnings?: number;
+  /** Applies full width styling */
+  fullWidth?: boolean;
 }
 
 declare function FormSummary(props: FormSummaryProps): JSX.Element;