carbon-react 110.6.0 → 110.7.0

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

@@ -400,6 +400,7 @@ CheckableInput.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/__internal__/input/input.component.js

@@ -434,6 +434,7 @@ Input.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/accordion/accordion-group/accordion-group.component.js

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

package/esm/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/esm/components/alert/alert.component.js

@@ -19,34 +19,39 @@ Alert.propTypes = {
   "aria-label": PropTypes.string,
   "aria-labelledby": PropTypes.string,
   "ariaRole": PropTypes.string,
+  "bespokeFocusTrap": PropTypes.func,
   "children": PropTypes.node,
+  "className": PropTypes.string,
   "contentPadding": PropTypes.shape({
     "p": PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8]),
     "px": PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8]),
     "py": PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8])
   }),
+  "data-component": PropTypes.string,
+  "data-element": PropTypes.string,
+  "data-role": PropTypes.string,
   "disableAutoFocus": PropTypes.bool,
   "disableClose": PropTypes.bool,
   "disableEscKey": PropTypes.bool,
   "disableFocusTrap": PropTypes.bool,
   "enableBackgroundUI": PropTypes.bool,
   "focusableContainers": PropTypes.arrayOf(PropTypes.shape({
-    "current": function (props, propName) {
+    "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
   })),
   "focusFirstElement": PropTypes.shape({
-    "current": function (props, propName) {
+    "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
   }),
   "height": PropTypes.string,
   "help": PropTypes.string,

package/esm/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/esm/components/button/button.component.d.ts

@@ -6,9 +6,9 @@ export declare type ButtonTypes = "primary" | "secondary" | "tertiary" | "dashed
 export declare type SizeOptions = "small" | "medium" | "large";
 export declare type ButtonIconPosition = "before" | "after";
 export interface ButtonProps extends SpaceProps {
-    /** Prop to specify the aria-label text.
-     *  Only to be used in Button when only an icon is rendered.
-     * This is required to comply with WCAG 4.1.2 - Buttons must have discernible text
+    /**
+     * Prop to specify the aria-label attribute of the component
+     * Defaults to the iconType, when the component has only an icon
      */
     "aria-label"?: string;
     /** Color variants for new business themes: "primary" | "secondary" | "tertiary" | "darkBackground" */

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

@@ -141,7 +141,7 @@ const Button = /*#__PURE__*/React.forwardRef(({
     if (typeof activeRef === "function") activeRef(reference);
   }, [ref, forwardRef]);
   return /*#__PURE__*/React.createElement(StyledButton, _extends({
-    "aria-label": !children && iconType ? ariaLabel || iconType : undefined,
+    "aria-label": !children && iconType ? ariaLabel || iconType : ariaLabel,
     as: !disabled && href ? "a" : "button",
     onKeyDown: href ? handleLinkKeyDown : undefined,
     draggable: false,

package/esm/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/esm/components/dialog/dialog.component.js

@@ -18,14 +18,14 @@ const Dialog = ({
   children,
   open,
   height,
-  size,
+  size = "medium",
   title,
   disableEscKey,
   subtitle,
-  disableAutoFocus,
+  disableAutoFocus = false,
   focusFirstElement,
   onCancel,
-  showCloseIcon,
+  showCloseIcon = true,
   bespokeFocusTrap,
   disableClose,
   help,
@@ -46,6 +46,11 @@ const Dialog = ({
     current: subtitleId
   } = useRef(createGuid());
   const centerDialog = useCallback(() => {
+    /* istanbul ignore if */
+    if (!dialogRef.current) {
+      return;
+    }
+
     const {
       width: dialogWidth,
       height: dialogHeight
@@ -174,91 +179,54 @@ const Dialog = ({
 };
 
 Dialog.propTypes = {
-  /** Prop to specify the aria-describedby property of the Dialog component */
   "aria-describedby": PropTypes.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.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.string,
-
-  /** Dialog content */
-  children: PropTypes.node,
-
-  /** Custom class name  */
-  className: PropTypes.string,
-
-  /** 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 Dialog */
-  disableEscKey: PropTypes.bool,
-
-  /** Determines if the Dialog can be closed */
-  disableClose: PropTypes.bool,
-
-  /** Allows developers to specify a specific height for the dialog. */
-  height: PropTypes.string,
-
-  /** Adds Help tooltip to Header */
-  help: PropTypes.string,
-
-  /** Title displayed at top of dialog */
-  title: PropTypes.node,
-
-  /** Subtitle displayed at top of dialog */
-  subtitle: PropTypes.string,
-
-  /** Size of dialog, default size is 750px */
-  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
+  "ariaRole": PropTypes.string,
+  "bespokeFocusTrap": PropTypes.func,
+  "children": PropTypes.node,
+  "className": PropTypes.string,
+  "contentPadding": PropTypes.shape({
+    "p": PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8]),
+    "px": PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8]),
+    "py": PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8])
   }),
-
-  /** Disables auto focus functionality on child elements */
-  disableAutoFocus: PropTypes.bool,
-
-  /**
-   * Function to replace focus trap
-   * @ignore
-   * @private
-   */
-  bespokeFocusTrap: PropTypes.func,
-
-  /** The ARIA role to be applied to the Dialog container */
-  role: PropTypes.string,
-
-  /** Padding to be set on the Dialog content */
-  contentPadding: PropTypes.shape({
-    p: PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8]),
-    px: PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8]),
-    py: PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8])
+  "data-component": PropTypes.string,
+  "data-element": PropTypes.string,
+  "data-role": PropTypes.string,
+  "disableAutoFocus": PropTypes.bool,
+  "disableClose": PropTypes.bool,
+  "disableEscKey": PropTypes.bool,
+  "disableFocusTrap": 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
+  })),
+  "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
   }),
-
-  /** 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
-  }))
-};
-Dialog.defaultProps = {
-  size: "medium",
-  showCloseIcon: true,
-  disableAutoFocus: false
+  "height": PropTypes.string,
+  "help": PropTypes.string,
+  "onCancel": PropTypes.func,
+  "open": PropTypes.bool.isRequired,
+  "role": PropTypes.string,
+  "showCloseIcon": PropTypes.bool,
+  "size": PropTypes.oneOf(["auto", "extra-large", "extra-small", "large", "medium-large", "medium-small", "medium", "small"]),
+  "subtitle": PropTypes.string,
+  "timeout": PropTypes.number,
+  "title": PropTypes.node
 };
+export { Dialog };
 export default Dialog;

package/esm/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/esm/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/esm/components/dialog/index.d.ts

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

package/esm/components/dialog/index.js

@@ -1 +1 @@
-export { default } from "./dialog.component.js";
+export { default } from "./dialog.component";