carbon-react 111.16.0 → 111.18.0

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

@@ -22,6 +22,8 @@ export interface CardProps extends MarginProps {
     children: React.ReactNode;
     /** Flag to indicate if card is draggable */
     draggable?: boolean;
+    /** Height of the component (any valid CSS value) */
+    height?: string;
     /** Flag to indicate if card is interactive */
     interactive?: boolean;
     /** Size of card for applying padding */
@@ -32,7 +34,7 @@ export interface CardProps extends MarginProps {
     hoverBoxShadow?: BoxShadowsType;
 }
 declare const Card: {
-    ({ "data-element": dataElement, "data-role": dataRole, dataRole: oldDataRole, action, children, cardWidth, draggable, interactive, spacing, boxShadow, hoverBoxShadow, ...rest }: CardProps): JSX.Element;
+    ({ "data-element": dataElement, "data-role": dataRole, dataRole: oldDataRole, action, children, cardWidth, draggable, height, interactive, spacing, boxShadow, hoverBoxShadow, ...rest }: CardProps): JSX.Element;
     displayName: string;
 };
 export default Card;

package/esm/components/card/card.component.js

@@ -22,6 +22,7 @@ const Card = ({
   children,
   cardWidth = "500px",
   draggable,
+  height,
   interactive,
   spacing = "medium",
   boxShadow,
@@ -60,7 +61,8 @@ const Card = ({
     spacing: spacing,
     boxShadow: boxShadow,
     hoverBoxShadow: hoverBoxShadow,
-    onClick: interactive && !draggable ? action : undefined
+    onClick: interactive && !draggable ? action : undefined,
+    height: height
   }, interactive && {
     tabIndex: 0,
     type: "button"
@@ -78,6 +80,7 @@ Card.propTypes = {
   "data-role": PropTypes.string,
   "dataRole": PropTypes.string,
   "draggable": PropTypes.bool,
+  "height": PropTypes.string,
   "hoverBoxShadow": PropTypes.any,
   "interactive": PropTypes.bool,
   "m": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({

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

@@ -7,6 +7,7 @@ export interface StyledCardProps extends MarginProps {
     cardWidth: string;
     interactive: boolean;
     draggable: boolean;
+    height?: string;
     spacing: CardSpacing;
     boxShadow?: BoxShadowsType;
     hoverBoxShadow?: BoxShadowsType;

package/esm/components/card/card.style.js

@@ -11,6 +11,7 @@ const StyledCard = styled.div`
   cardWidth,
   interactive,
   draggable,
+  height,
   spacing,
   boxShadow = "boxShadow050",
   hoverBoxShadow = "boxShadow100"
@@ -19,12 +20,16 @@ const StyledCard = styled.div`
     border: none;
     box-shadow: var(--${boxShadow});
     color: var(--colorsUtilityYin090);
+    display: flex;
+    flex-direction: column;
+    height: ${height};
+    justify-content: space-between;
     margin: 25px;
+    outline: none;
     padding: ${paddingSizes[spacing]};
     transition: all 0.3s ease-in-out;
     vertical-align: top;
     width: ${cardWidth};
-    outline: none;
     ${margin}
 
     ${interactive && css`

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

@@ -0,0 +1,37 @@
+import React from "react";
+import { DialogProps } from "../dialog";
+import { IconType } from "../icon";
+export interface ConfirmProps extends Omit<DialogProps, "className" | "disableFocusTrap" | "bespokeFocusTrap" | "focusableSelectors" | "help" | "role" | "contentPadding" | "focusableContainers" | "ariaRole" | "timeout" | "enableBackgroundUI" | "disableClose"> {
+    /** Color variants for new business themes: "primary" | "secondary" | "tertiary" | "dashed" | "darkBackground" */
+    cancelButtonType?: "primary" | "secondary" | "tertiary" | "dashed" | "darkBackground";
+    /** Color variants for new business themes: "primary" | "secondary" | "tertiary" | "dashed" | "darkBackground" */
+    confirmButtonType?: "primary" | "secondary" | "tertiary" | "dashed" | "darkBackground";
+    /** Customise the cancel button label */
+    cancelLabel?: string;
+    /** Customise the confirm button label */
+    confirmLabel?: string;
+    /** Apply destructive style to the cancel button */
+    cancelButtonDestructive?: boolean;
+    /** Apply destructive style to the confirm button */
+    confirmButtonDestructive?: boolean;
+    /** Defines a cancel button Icon position related to the children: "before" | "after" */
+    cancelButtonIconPosition?: "before" | "after";
+    /** Defines an Icon type within the cancel button (see Icon for options) */
+    cancelButtonIconType?: IconType;
+    /** Defines a cancel button Icon position related to the children: "before" | "after" */
+    confirmButtonIconPosition?: "before" | "after";
+    /** Defines an Icon type within the confirm button (see Icon for options) */
+    confirmButtonIconType?: IconType;
+    /** Makes cancel button disabled */
+    disableCancel?: boolean;
+    /** Makes confirm button disabled */
+    disableConfirm?: boolean;
+    /** Defines an Icon type within the button (see Icon for options) */
+    iconType?: "error" | "warning";
+    /** Adds isLoading state into confirm button */
+    isLoadingConfirm?: boolean;
+    /** A custom event handler when a confirmation takes place */
+    onConfirm: (ev: React.MouseEvent<HTMLButtonElement>) => void;
+}
+export declare const Confirm: ({ "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-label": ariaLabel, open, children, cancelButtonDestructive, confirmButtonDestructive, cancelButtonType, confirmButtonType, cancelButtonIconType, cancelButtonIconPosition, confirmButtonIconType, confirmButtonIconPosition, cancelLabel, onCancel, disableCancel, onConfirm, isLoadingConfirm, disableConfirm, confirmLabel, iconType, subtitle, title, size, showCloseIcon, ...rest }: ConfirmProps) => JSX.Element;
+export default Confirm;

package/esm/components/confirm/confirm.component.js

@@ -17,10 +17,10 @@ const Confirm = ({
   "aria-label": ariaLabel,
   open,
   children,
-  cancelButtonDestructive,
-  confirmButtonDestructive,
-  cancelButtonType,
-  confirmButtonType,
+  cancelButtonDestructive = false,
+  confirmButtonDestructive = false,
+  cancelButtonType = "secondary",
+  confirmButtonType = "primary",
   cancelButtonIconType,
   cancelButtonIconPosition,
   confirmButtonIconType,
@@ -35,6 +35,8 @@ const Confirm = ({
   iconType,
   subtitle,
   title,
+  size = "extra-small",
+  showCloseIcon = false,
   ...rest
 }) => {
   const l = useLocale();
@@ -112,122 +114,53 @@ const Confirm = ({
     subtitle: subtitle,
     title: getTitle(),
     "data-component": "confirm",
-    role: "alertdialog"
+    role: "alertdialog",
+    size: size,
+    showCloseIcon: showCloseIcon
   }, ariaProps, rest), children, /*#__PURE__*/React.createElement(StyledConfirmButtons, null, renderCancelButton(), renderConfirmButton()));
 };
 
-Confirm.defaultProps = {
-  size: "extra-small",
-  showCloseIcon: false,
-  cancelButtonDestructive: false,
-  confirmButtonDestructive: false,
-  iconType: null,
-  cancelButtonType: "secondary",
-  confirmButtonType: "primary"
-};
 Confirm.propTypes = {
-  /** Prop to specify the aria-describedby property of the component */
   "aria-describedby": PropTypes.string,
-
-  /**
-   * Prop to specify the aria-label of the 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.string,
-
-  /**
-   * Prop to specify the aria-labeledby property of the 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.string,
-
-  /** Confirm content */
-  children: PropTypes.node,
-
-  /** Controls the open state of the component */
-  open: PropTypes.bool.isRequired,
-
-  /** A custom close event handler */
-  onCancel: PropTypes.func,
-
-  /** Determines if the Esc Key closes the Confirm */
-  disableEscKey: PropTypes.bool,
-
-  /** Allows developers to specify a specific height for the Confirm. */
-  height: PropTypes.string,
-
-  /** Title displayed at top of component */
-  title: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
-
-  /** Subtitle displayed at top of component */
-  subtitle: PropTypes.string,
-
-  /** Size of component */
-  size: PropTypes.oneOf(["auto", "extra-small", "small", "medium-small", "medium", "medium-large", "large", "extra-large"]),
-
-  /** Determines if the close icon is shown */
-  showCloseIcon: PropTypes.bool,
-
-  /** Optional reference to an element meant to be focused on open */
-  focusFirstElement: PropTypes.shape({
-    current: PropTypes.any
+  "cancelButtonDestructive": PropTypes.bool,
+  "cancelButtonIconPosition": PropTypes.oneOf(["after", "before"]),
+  "cancelButtonIconType": PropTypes.oneOf(["add", "admin", "alert_on", "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", "box_arrow_left", "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", "palm_tree", "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_thick", "tick", "true_tick", "u_turn_left", "u_turn_right", "undo", "unlocked", "upload", "uploaded", "video", "view", "warning"]),
+  "cancelButtonType": PropTypes.oneOf(["darkBackground", "dashed", "primary", "secondary", "tertiary"]),
+  "cancelLabel": PropTypes.string,
+  "children": PropTypes.node,
+  "confirmButtonDestructive": PropTypes.bool,
+  "confirmButtonIconPosition": PropTypes.oneOf(["after", "before"]),
+  "confirmButtonIconType": PropTypes.oneOf(["add", "admin", "alert_on", "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", "box_arrow_left", "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", "palm_tree", "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_thick", "tick", "true_tick", "u_turn_left", "u_turn_right", "undo", "unlocked", "upload", "uploaded", "video", "view", "warning"]),
+  "confirmButtonType": PropTypes.oneOf(["darkBackground", "dashed", "primary", "secondary", "tertiary"]),
+  "confirmLabel": PropTypes.string,
+  "data-component": PropTypes.string,
+  "data-element": PropTypes.string,
+  "data-role": PropTypes.string,
+  "disableAutoFocus": PropTypes.bool,
+  "disableCancel": PropTypes.bool,
+  "disableConfirm": PropTypes.bool,
+  "disableEscKey": PropTypes.bool,
+  "focusFirstElement": PropTypes.shape({
+    "current": PropTypes.oneOfType([PropTypes.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
   }),
-
-  /** Disables auto focus functionality on child elements */
-  disableAutoFocus: PropTypes.bool,
-
-  /** A custom event handler when a confirmation takes place */
-  onConfirm: PropTypes.func.isRequired,
-
-  /** Customise the confirm button label */
-  confirmLabel: PropTypes.string,
-
-  /** Customise the cancel button label */
-  cancelLabel: PropTypes.string,
-
-  /** Apply destructive style to the cancel button */
-  cancelButtonDestructive: PropTypes.bool,
-
-  /** Apply destructive style to the confirm button */
-  confirmButtonDestructive: PropTypes.bool,
-
-  /** Defines a cancel button Icon position related to the children: "before" | "after" */
-  cancelButtonIconPosition: PropTypes.oneOf(["before", "after"]),
-
-  /**
-   * <a href="https://brand.sage.com/d/NdbrveWvNheA/foundations#/icons/icons" target="_blank">List of supported icons</a>
-   *
-   *  Defines an Icon type within the cancel button (see Icon for options)
-   * */
-  cancelButtonIconType: PropTypes.string,
-
-  /** Defines a confirm button Icon position related to the children: "before" | "after" */
-  confirmButtonIconPosition: PropTypes.oneOf(["before", "after"]),
-
-  /**
-   *  <a href="https://brand.sage.com/d/NdbrveWvNheA/foundations#/icons/icons" target="_blank">List of supported icons</a>
-   *
-   * Defines an Icon type within the confirm button (see Icon for options)
-   * */
-  confirmButtonIconType: PropTypes.string,
-
-  /** Defines an Icon type within the button (see Icon for options) */
-  iconType: PropTypes.oneOf(["error", "warning"]),
-
-  /** Makes cancel button disabled */
-  disableCancel: PropTypes.bool,
-
-  /** Makes confirm button disabled */
-  disableConfirm: PropTypes.bool,
-
-  /** Color variants for new business themes: "primary" | "secondary" | "tertiary" | "dashed" | "darkBackground" */
-  cancelButtonType: PropTypes.oneOf(["primary", "secondary", "tertiary", "dashed", "darkBackground"]),
-
-  /** Color variants for new business themes: "primary" | "secondary" | "tertiary" | "dashed" | "darkBackground" */
-  confirmButtonType: PropTypes.oneOf(["primary", "secondary", "tertiary", "dashed", "darkBackground"]),
-
-  /** Adds isLoading state into confirm button */
-  isLoadingConfirm: PropTypes.bool
+  "height": PropTypes.string,
+  "iconType": PropTypes.oneOf(["error", "warning"]),
+  "isLoadingConfirm": PropTypes.bool,
+  "onCancel": PropTypes.func,
+  "onConfirm": PropTypes.func.isRequired,
+  "open": PropTypes.bool.isRequired,
+  "showCloseIcon": PropTypes.bool,
+  "size": PropTypes.oneOf(["auto", "extra-large", "extra-small", "large", "medium-large", "medium-small", "medium", "small"]),
+  "subtitle": PropTypes.string,
+  "title": PropTypes.node
 };
+export { Confirm };
 export default Confirm;

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

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

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

@@ -0,0 +1,5 @@
+import { ConfirmProps } from ".";
+export declare const StyledConfirmButtons: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledConfirmHeading: import("styled-components").StyledComponent<"div", any, {
+    type: ConfirmProps["iconType"];
+}, never>;

package/esm/components/confirm/confirm.style.js

@@ -1,5 +1,4 @@
 import styled, { css } from "styled-components";
-import PropTypes from "prop-types";
 import StyledIcon from "../icon/icon.style";
 import { StyledHeadingTitle } from "../heading/heading.style";
 export const StyledConfirmButtons = styled.div`
@@ -29,7 +28,4 @@ export const StyledConfirmHeading = styled.div`
         color: var(--colorsSemanticNegative500);
       `}
   }
-`;
-StyledConfirmHeading.propTypes = {
-  type: PropTypes.oneOf(["error", "warning"])
-};
+`;

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

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

package/esm/components/dialog-full-screen/content.style.d.ts

@@ -0,0 +1,7 @@
+declare type StyledContentProps = {
+    hasHeader: boolean;
+    hasStickyFooter: boolean;
+    disableContentPadding?: boolean;
+};
+declare const StyledContent: import("styled-components").StyledComponent<"div", any, StyledContentProps, never>;
+export default StyledContent;

package/esm/components/dialog-full-screen/dialog-full-screen.component.d.ts

@@ -0,0 +1,55 @@
+import React from "react";
+import { ModalProps } from "../modal";
+export interface DialogFullScreenProps extends ModalProps {
+    /** Prop to specify the aria-describedby property of the DialogFullscreen component */
+    "aria-describedby"?: string;
+    /**
+     * Prop to specify the aria-label of the DialogFullscreen 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 DialogFullscreen 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;
+    /** Child elements */
+    children?: React.ReactNode;
+    /** Reference to the scrollable content element */
+    contentRef?: React.ForwardedRef<HTMLDivElement>;
+    /** Disables auto focus functionality on child elements */
+    disableAutoFocus?: boolean;
+    /** remove padding from content */
+    disableContentPadding?: boolean;
+    /** Optional reference to an element meant to be focused on open */
+    focusFirstElement?: React.MutableRefObject<HTMLElement | null>;
+    /**
+     * Function to replace focus trap
+     * @ignore
+     * @private
+     */
+    bespokeFocusTrap?: (ev: KeyboardEvent, firstElement?: HTMLElement, lastElement?: HTMLElement) => void;
+    /** Container for components to be displayed in the header */
+    headerChildren?: React.ReactNode;
+    /** Adds Help tooltip to Header */
+    help?: string;
+    /** For legacy styling when used with Pages component. Do not use this unless using Pages within a DialogFullScreen */
+    pagesStyling?: boolean;
+    /** Determines if the close icon is shown */
+    showCloseIcon?: boolean;
+    /** 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 DialogFullscreen container */
+    role?: string;
+    /** an optional array of refs to containers whose content should also be reachable by tabbing from the dialog */
+    focusableContainers?: React.MutableRefObject<HTMLElement | null>[];
+    /** Optional selector to identify the focusable elements, if not provided a default selector is used */
+    focusableSelectors?: string;
+    /** A custom close event handler */
+    onCancel?: (ev: React.KeyboardEvent<HTMLElement> | React.MouseEvent<HTMLButtonElement>) => void;
+}
+export declare const DialogFullScreen: ({ "aria-describedby": ariaDescribedBy, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, disableAutoFocus, focusFirstElement, bespokeFocusTrap, open, children, title, subtitle, pagesStyling, headerChildren, showCloseIcon, disableContentPadding, disableEscKey, onCancel, contentRef, help, role, focusableContainers, focusableSelectors, ...rest }: DialogFullScreenProps) => JSX.Element;
+export default DialogFullScreen;

package/esm/components/dialog-full-screen/dialog-full-screen.component.js

@@ -19,7 +19,7 @@ const DialogFullScreen = ({
   "aria-describedby": ariaDescribedBy,
   "aria-label": ariaLabel,
   "aria-labelledby": ariaLabelledBy,
-  disableAutoFocus,
+  disableAutoFocus = false,
   focusFirstElement,
   bespokeFocusTrap,
   open,
@@ -28,7 +28,7 @@ const DialogFullScreen = ({
   subtitle,
   pagesStyling,
   headerChildren,
-  showCloseIcon,
+  showCloseIcon = true,
   disableContentPadding,
   disableEscKey,
   onCancel,
@@ -115,89 +115,54 @@ const DialogFullScreen = ({
   }, children))));
 };
 
-DialogFullScreen.defaultProps = {
-  showCloseIcon: true,
-  disableAutoFocus: false
-};
 DialogFullScreen.propTypes = {
-  /** Prop to specify the aria-describedby property of the DialogFullscreen component */
   "aria-describedby": PropTypes.string,
-
-  /**
-   * Prop to specify the aria-label of the DialogFullscreen 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.string,
-
-  /**
-   * Prop to specify the aria-labelledby property of the DialogFullscreen 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.string,
-
-  /** Controls the open state of the component */
-  open: PropTypes.bool.isRequired,
-
-  /** A custom close event handler */
-  onCancel: PropTypes.func,
-
-  /** Optional reference to an element meant to be focused on open */
-  focusFirstElement: PropTypes.shape({
-    current: PropTypes.any
-  }),
-
-  /** Disables auto focus functionality on child elements */
-  disableAutoFocus: PropTypes.bool,
-
-  /**
-   * Function to replace focus trap
-   * @ignore
-   * @private
-   */
-  bespokeFocusTrap: PropTypes.func,
-
-  /** Determines if the Esc Key closes the Dialog */
-  disableEscKey: PropTypes.bool,
-
-  /** Adds Help tooltip to Header */
-  help: PropTypes.string,
-
-  /** remove padding from content */
-  disableContentPadding: PropTypes.bool,
-
-  /** Child elements */
-  children: PropTypes.node,
-
-  /** Title displayed at top of dialog */
-  title: PropTypes.node,
-
-  /** Subtitle displayed at top of dialog */
-  subtitle: PropTypes.string,
-
-  /** Determines if the close icon is shown */
-  showCloseIcon: PropTypes.bool,
-
-  /** Container for components to be displayed in the header */
-  headerChildren: PropTypes.node,
-
-  /** For legacy styling when used with Pages component. Do not use this unless using Pages within a DialogFullScreen */
-  pagesStyling: PropTypes.bool,
-
-  /** Reference to the scrollable content element */
-  contentRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
-    current: PropTypes.instanceOf(Element)
+  "ariaRole": PropTypes.string,
+  "bespokeFocusTrap": PropTypes.func,
+  "children": PropTypes.node,
+  "className": PropTypes.string,
+  "contentRef": PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
+    "current": PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.object]).isRequired
   })]),
-
-  /** The ARIA role to be applied to the DialogFullscreen container */
-  role: PropTypes.string,
-
-  /** an optional array of refs to containers whose content should also be reachable by tabbing from the dialog */
-  focusableContainers: PropTypes.arrayOf(PropTypes.shape({
-    current: PropTypes.any
+  "data-component": PropTypes.string,
+  "data-element": PropTypes.string,
+  "data-role": PropTypes.string,
+  "disableAutoFocus": PropTypes.bool,
+  "disableClose": PropTypes.bool,
+  "disableContentPadding": PropTypes.bool,
+  "disableEscKey": PropTypes.bool,
+  "enableBackgroundUI": PropTypes.bool,
+  "focusableContainers": PropTypes.arrayOf(PropTypes.shape({
+    "current": PropTypes.oneOfType([PropTypes.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
   })),
-
-  /** Optional selector to identify the focusable elements, if not provided a default selector is used */
-  focusableSelectors: PropTypes.string
+  "focusableSelectors": PropTypes.string,
+  "focusFirstElement": PropTypes.shape({
+    "current": PropTypes.oneOfType([PropTypes.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
+  }),
+  "headerChildren": PropTypes.node,
+  "help": PropTypes.string,
+  "onCancel": PropTypes.func,
+  "open": PropTypes.bool.isRequired,
+  "pagesStyling": PropTypes.bool,
+  "role": PropTypes.string,
+  "showCloseIcon": PropTypes.bool,
+  "subtitle": PropTypes.string,
+  "timeout": PropTypes.number,
+  "title": PropTypes.node
 };
+export { DialogFullScreen };
 export default DialogFullScreen;

package/esm/components/dialog-full-screen/dialog-full-screen.style.d.ts

@@ -0,0 +1,4 @@
+declare const StyledDialogFullScreen: import("styled-components").StyledComponent<"div", any, {
+    pagesStyling?: boolean | undefined;
+}, never>;
+export default StyledDialogFullScreen;

package/esm/components/dialog-full-screen/index.d.ts

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

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

@@ -1,11 +1,12 @@
 import React from "react";
+import { TagProps } from "../../__internal__/utils/helpers/tags";
 export interface ModalContextProps {
     isInModal?: boolean;
     isAnimationComplete?: boolean;
     triggerRefocusFlag?: boolean;
 }
 export declare const ModalContext: React.Context<ModalContextProps>;
-export interface ModalProps {
+export interface ModalProps extends TagProps {
     /** Custom class name  */
     className?: string;
     /** Modal content */

package/esm/components/modal/modal.component.js

@@ -100,6 +100,9 @@ Modal.propTypes = {
   "ariaRole": PropTypes.string,
   "children": PropTypes.node,
   "className": PropTypes.string,
+  "data-component": PropTypes.string,
+  "data-element": PropTypes.string,
+  "data-role": PropTypes.string,
   "disableClose": PropTypes.bool,
   "disableEscKey": PropTypes.bool,
   "enableBackgroundUI": PropTypes.bool,

package/esm/components/tile/tile-footer/tile-footer.component.js

@@ -6,8 +6,7 @@ import styledSystemPropTypes from "@styled-system/prop-types";
 import StyledTileFooter from "./tile-footer.style";
 import { filterStyledSystemPaddingProps } from "../../../style/utils";
 const paddingPropTypes = filterStyledSystemPaddingProps(styledSystemPropTypes.space);
-
-const TileFooter = ({
+export const TileFooter = ({
   variant,
   children,
   ...props
@@ -17,11 +16,10 @@ const TileFooter = ({
     variant: variant
   }, props), children);
 };
-
 TileFooter.propTypes = { ...paddingPropTypes,
 
-  /** set which background color variant should be used */
-  variant: PropTypes.oneOf(["default", "transparent"]),
+  /** Sets which background color variant should be used */
+  variant: PropTypes.oneOf(["default", "black", "transparent"]),
   children: PropTypes.node
 };
 export default TileFooter;

package/esm/components/tile/tile-footer/tile-footer.d.ts

@@ -3,7 +3,7 @@ import { PaddingProps } from "styled-system";
 
 export interface TileFooterProps extends PaddingProps {
   /** set which background color variant should be used */
-  variant?: "default" | "transparent";
+  variant?: "default" | "black" | "transparent";
 }
 
 declare function TileFooter(