carbon-react 110.6.1 → 110.7.0

package/esm/components/navigation-bar/navigation-bar.component.js

@@ -29,6 +29,7 @@ NavigationBar.propTypes = {
   "alignContent": PropTypes.oneOfType([PropTypes.oneOf(["-moz-initial", "baseline", "center", "end", "flex-end", "flex-start", "inherit", "initial", "normal", "revert", "space-around", "space-between", "space-evenly", "start", "stretch", "unset"]), PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.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.shape({
     "__@iterator": PropTypes.func.isRequired,
     "anchor": PropTypes.func.isRequired,
+    "at": PropTypes.func.isRequired,
     "big": PropTypes.func.isRequired,
     "blink": PropTypes.func.isRequired,
     "bold": PropTypes.func.isRequired,
@@ -78,6 +79,7 @@ NavigationBar.propTypes = {
   })])), PropTypes.object, PropTypes.shape({
     "__@iterator": PropTypes.func.isRequired,
     "anchor": PropTypes.func.isRequired,
+    "at": PropTypes.func.isRequired,
     "big": PropTypes.func.isRequired,
     "blink": PropTypes.func.isRequired,
     "bold": PropTypes.func.isRequired,
@@ -128,6 +130,7 @@ NavigationBar.propTypes = {
   "alignItems": PropTypes.oneOfType([PropTypes.oneOf(["-moz-initial", "baseline", "center", "end", "flex-end", "flex-start", "inherit", "initial", "normal", "revert", "self-end", "self-start", "start", "stretch", "unset"]), PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf(["-moz-initial", "baseline", "center", "end", "flex-end", "flex-start", "inherit", "initial", "normal", "revert", "self-end", "self-start", "start", "stretch", "unset", null]), PropTypes.shape({
     "__@iterator": PropTypes.func.isRequired,
     "anchor": PropTypes.func.isRequired,
+    "at": PropTypes.func.isRequired,
     "big": PropTypes.func.isRequired,
     "blink": PropTypes.func.isRequired,
     "bold": PropTypes.func.isRequired,
@@ -177,6 +180,7 @@ NavigationBar.propTypes = {
   })])), PropTypes.object, PropTypes.shape({
     "__@iterator": PropTypes.func.isRequired,
     "anchor": PropTypes.func.isRequired,
+    "at": PropTypes.func.isRequired,
     "big": PropTypes.func.isRequired,
     "blink": PropTypes.func.isRequired,
     "bold": PropTypes.func.isRequired,
@@ -227,6 +231,7 @@ NavigationBar.propTypes = {
   "alignSelf": PropTypes.oneOfType([PropTypes.oneOf(["-moz-initial", "auto", "baseline", "center", "end", "flex-end", "flex-start", "inherit", "initial", "normal", "revert", "self-end", "self-start", "start", "stretch", "unset"]), PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf(["-moz-initial", "auto", "baseline", "center", "end", "flex-end", "flex-start", "inherit", "initial", "normal", "revert", "self-end", "self-start", "start", "stretch", "unset", null]), PropTypes.shape({
     "__@iterator": PropTypes.func.isRequired,
     "anchor": PropTypes.func.isRequired,
+    "at": PropTypes.func.isRequired,
     "big": PropTypes.func.isRequired,
     "blink": PropTypes.func.isRequired,
     "bold": PropTypes.func.isRequired,
@@ -276,6 +281,7 @@ NavigationBar.propTypes = {
   })])), PropTypes.object, PropTypes.shape({
     "__@iterator": PropTypes.func.isRequired,
     "anchor": PropTypes.func.isRequired,
+    "at": PropTypes.func.isRequired,
     "big": PropTypes.func.isRequired,
     "blink": PropTypes.func.isRequired,
     "bold": PropTypes.func.isRequired,
@@ -328,6 +334,7 @@ NavigationBar.propTypes = {
   "flex": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
     "__@iterator": PropTypes.func.isRequired,
     "anchor": PropTypes.func.isRequired,
+    "at": PropTypes.func.isRequired,
     "big": PropTypes.func.isRequired,
     "blink": PropTypes.func.isRequired,
     "bold": PropTypes.func.isRequired,
@@ -377,6 +384,7 @@ NavigationBar.propTypes = {
   }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
     "__@iterator": PropTypes.func.isRequired,
     "anchor": PropTypes.func.isRequired,
+    "at": PropTypes.func.isRequired,
     "big": PropTypes.func.isRequired,
     "blink": PropTypes.func.isRequired,
     "bold": PropTypes.func.isRequired,
@@ -427,6 +435,7 @@ NavigationBar.propTypes = {
   "flexBasis": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
     "__@iterator": PropTypes.func.isRequired,
     "anchor": PropTypes.func.isRequired,
+    "at": PropTypes.func.isRequired,
     "big": PropTypes.func.isRequired,
     "blink": PropTypes.func.isRequired,
     "bold": PropTypes.func.isRequired,
@@ -476,6 +485,7 @@ NavigationBar.propTypes = {
   }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
     "__@iterator": PropTypes.func.isRequired,
     "anchor": PropTypes.func.isRequired,
+    "at": PropTypes.func.isRequired,
     "big": PropTypes.func.isRequired,
     "blink": PropTypes.func.isRequired,
     "bold": PropTypes.func.isRequired,
@@ -559,6 +569,7 @@ NavigationBar.propTypes = {
   "justifyContent": PropTypes.oneOfType([PropTypes.oneOf(["-moz-initial", "center", "end", "flex-end", "flex-start", "inherit", "initial", "left", "normal", "revert", "right", "space-around", "space-between", "space-evenly", "start", "stretch", "unset"]), PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf(["-moz-initial", "center", "end", "flex-end", "flex-start", "inherit", "initial", "left", "normal", "revert", "right", "space-around", "space-between", "space-evenly", "start", "stretch", "unset", null]), PropTypes.shape({
     "__@iterator": PropTypes.func.isRequired,
     "anchor": PropTypes.func.isRequired,
+    "at": PropTypes.func.isRequired,
     "big": PropTypes.func.isRequired,
     "blink": PropTypes.func.isRequired,
     "bold": PropTypes.func.isRequired,
@@ -608,6 +619,7 @@ NavigationBar.propTypes = {
   })])), PropTypes.object, PropTypes.shape({
     "__@iterator": PropTypes.func.isRequired,
     "anchor": PropTypes.func.isRequired,
+    "at": PropTypes.func.isRequired,
     "big": PropTypes.func.isRequired,
     "blink": PropTypes.func.isRequired,
     "bold": PropTypes.func.isRequired,
@@ -658,6 +670,7 @@ NavigationBar.propTypes = {
   "justifyItems": PropTypes.oneOfType([PropTypes.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.arrayOf(PropTypes.oneOfType([PropTypes.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.shape({
     "__@iterator": PropTypes.func.isRequired,
     "anchor": PropTypes.func.isRequired,
+    "at": PropTypes.func.isRequired,
     "big": PropTypes.func.isRequired,
     "blink": PropTypes.func.isRequired,
     "bold": PropTypes.func.isRequired,
@@ -707,6 +720,7 @@ NavigationBar.propTypes = {
   })])), PropTypes.object, PropTypes.shape({
     "__@iterator": PropTypes.func.isRequired,
     "anchor": PropTypes.func.isRequired,
+    "at": PropTypes.func.isRequired,
     "big": PropTypes.func.isRequired,
     "blink": PropTypes.func.isRequired,
     "bold": PropTypes.func.isRequired,
@@ -757,6 +771,7 @@ NavigationBar.propTypes = {
   "justifySelf": PropTypes.oneOfType([PropTypes.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.arrayOf(PropTypes.oneOfType([PropTypes.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.shape({
     "__@iterator": PropTypes.func.isRequired,
     "anchor": PropTypes.func.isRequired,
+    "at": PropTypes.func.isRequired,
     "big": PropTypes.func.isRequired,
     "blink": PropTypes.func.isRequired,
     "bold": PropTypes.func.isRequired,
@@ -806,6 +821,7 @@ NavigationBar.propTypes = {
   })])), PropTypes.object, PropTypes.shape({
     "__@iterator": PropTypes.func.isRequired,
     "anchor": PropTypes.func.isRequired,
+    "at": PropTypes.func.isRequired,
     "big": PropTypes.func.isRequired,
     "blink": PropTypes.func.isRequired,
     "bold": PropTypes.func.isRequired,

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

@@ -0,0 +1,4 @@
+export default StyledSearch;
+export const StyledSearchButton: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const StyledButtonIcon: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare const StyledSearch: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -600,6 +600,7 @@ SplitButton.propTypes = {
   "role": PropTypes.oneOfType([PropTypes.oneOf(["alert", "alertdialog", "application", "article", "banner", "button", "cell", "checkbox", "columnheader", "combobox", "complementary", "contentinfo", "definition", "dialog", "directory", "document", "feed", "figure", "form", "grid", "gridcell", "group", "heading", "img", "link", "list", "listbox", "listitem", "log", "main", "marquee", "math", "menu", "menubar", "menuitem", "menuitemcheckbox", "menuitemradio", "navigation", "none", "note", "option", "presentation", "progressbar", "radio", "radiogroup", "region", "row", "rowgroup", "rowheader", "scrollbar", "search", "searchbox", "separator", "slider", "spinbutton", "status", "switch", "tab", "table", "tablist", "tabpanel", "term", "textbox", "timer", "toolbar", "tooltip", "tree", "treegrid", "treeitem"]), PropTypes.shape({
     "__@iterator": PropTypes.func.isRequired,
     "anchor": PropTypes.func.isRequired,
+    "at": PropTypes.func.isRequired,
     "big": PropTypes.func.isRequired,
     "blink": PropTypes.func.isRequired,
     "bold": PropTypes.func.isRequired,

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

@@ -0,0 +1,3 @@
+export const MIN_HEIGHT: 40;
+export default StyledTextarea;
+declare const StyledTextarea: import("styled-components").StyledComponent<"div", any, {}, never>;

package/esm/components/textbox/textbox.component.js

@@ -646,6 +646,7 @@ Textbox.propTypes = {
   "role": PropTypes.oneOfType([PropTypes.oneOf(["alert", "alertdialog", "application", "article", "banner", "button", "cell", "checkbox", "columnheader", "combobox", "complementary", "contentinfo", "definition", "dialog", "directory", "document", "feed", "figure", "form", "grid", "gridcell", "group", "heading", "img", "link", "list", "listbox", "listitem", "log", "main", "marquee", "math", "menu", "menubar", "menuitem", "menuitemcheckbox", "menuitemradio", "navigation", "none", "note", "option", "presentation", "progressbar", "radio", "radiogroup", "region", "row", "rowgroup", "rowheader", "scrollbar", "search", "searchbox", "separator", "slider", "spinbutton", "status", "switch", "tab", "table", "tablist", "tabpanel", "term", "textbox", "timer", "toolbar", "tooltip", "tree", "treegrid", "treeitem"]), PropTypes.shape({
     "__@iterator": PropTypes.func.isRequired,
     "anchor": PropTypes.func.isRequired,
+    "at": PropTypes.func.isRequired,
     "big": PropTypes.func.isRequired,
     "blink": PropTypes.func.isRequired,
     "bold": PropTypes.func.isRequired,

package/lib/__internal__/checkable-input/checkable-input.component.js

@@ -420,6 +420,7 @@ CheckableInput.propTypes = {
   "role": _propTypes.default.oneOfType([_propTypes.default.oneOf(["alert", "alertdialog", "application", "article", "banner", "button", "cell", "checkbox", "columnheader", "combobox", "complementary", "contentinfo", "definition", "dialog", "directory", "document", "feed", "figure", "form", "grid", "gridcell", "group", "heading", "img", "link", "list", "listbox", "listitem", "log", "main", "marquee", "math", "menu", "menubar", "menuitem", "menuitemcheckbox", "menuitemradio", "navigation", "none", "note", "option", "presentation", "progressbar", "radio", "radiogroup", "region", "row", "rowgroup", "rowheader", "scrollbar", "search", "searchbox", "separator", "slider", "spinbutton", "status", "switch", "tab", "table", "tablist", "tabpanel", "term", "textbox", "timer", "toolbar", "tooltip", "tree", "treegrid", "treeitem"]), _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/__internal__/input/input.component.js

@@ -451,6 +451,7 @@ Input.propTypes = {
   "role": _propTypes.default.oneOfType([_propTypes.default.oneOf(["alert", "alertdialog", "application", "article", "banner", "button", "cell", "checkbox", "columnheader", "combobox", "complementary", "contentinfo", "definition", "dialog", "directory", "document", "feed", "figure", "form", "grid", "gridcell", "group", "heading", "img", "link", "list", "listbox", "listitem", "log", "main", "marquee", "math", "menu", "menubar", "menuitem", "menuitemcheckbox", "menuitemradio", "navigation", "none", "note", "option", "presentation", "progressbar", "radio", "radiogroup", "region", "row", "rowgroup", "rowheader", "scrollbar", "search", "searchbox", "separator", "slider", "spinbutton", "status", "switch", "tab", "table", "tablist", "tabpanel", "term", "textbox", "timer", "toolbar", "tooltip", "tree", "treegrid", "treeitem"]), _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/accordion/accordion-group/accordion-group.component.js

@@ -92,6 +92,7 @@ AccordionGroup.propTypes = {
   "children": _propTypes.default.oneOfType([_propTypes.default.element, _propTypes.default.shape({
     "__@iterator": _propTypes.default.func.isRequired,
     "__@unscopables": _propTypes.default.func.isRequired,
+    "at": _propTypes.default.func.isRequired,
     "concat": _propTypes.default.func.isRequired,
     "copyWithin": _propTypes.default.func.isRequired,
     "entries": _propTypes.default.func.isRequired,

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

@@ -1,4 +1,4 @@
 /// <reference types="react" />
-import { DialogProps } from "../dialog/dialog";
+import { DialogProps } from "../dialog";
 export declare const Alert: ({ children, size, ...rest }: DialogProps) => JSX.Element;
 export default Alert;

package/lib/components/alert/alert.component.js

@@ -31,34 +31,39 @@ Alert.propTypes = {
   "aria-label": _propTypes.default.string,
   "aria-labelledby": _propTypes.default.string,
   "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])
   }),
+  "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": function (props, propName) {
+    "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": function (props, propName) {
+    "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
   }),
   "height": _propTypes.default.string,
   "help": _propTypes.default.string,

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

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

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 }; }