carbon-react 114.16.0 → 114.17.1

package/esm/__internal__/focus-trap/focus-trap.component.d.ts

@@ -1,12 +1,12 @@
 import React from "react";
-declare type CustomRefObject<T> = {
+export declare type CustomRefObject<T> = {
     current?: T | null;
 };
 export interface FocusTrapProps {
     children: React.ReactNode;
     autoFocus?: boolean;
     /** provide a custom first element to focus */
-    focusFirstElement?: CustomRefObject<HTMLElement> | HTMLElement;
+    focusFirstElement?: CustomRefObject<HTMLElement> | HTMLElement | null;
     /** a custom callback that will override the default focus trap behaviour */
     bespokeTrap?: (ev: KeyboardEvent, firstElement?: HTMLElement, lastElement?: HTMLElement) => void;
     /** optional selector to identify the focusable elements, if not provided a default selector is used */

package/esm/__internal__/focus-trap/index.d.ts

@@ -1,2 +1,2 @@
 export { default } from "./focus-trap.component";
-export type { FocusTrapProps } from "./focus-trap.component";
+export type { CustomRefObject, FocusTrapProps } from "./focus-trap.component";

package/esm/components/advanced-color-picker/advanced-color-picker-cell.style.d.ts

@@ -0,0 +1,4 @@
+declare const StyledAdvancedColorPickerCell: import("styled-components").StyledComponent<"button", any, {
+    type: "button";
+}, "type">;
+export default StyledAdvancedColorPickerCell;

package/esm/components/advanced-color-picker/advanced-color-picker.component.d.ts

@@ -0,0 +1,43 @@
+import React from "react";
+import { MarginProps } from "styled-system";
+export interface AdvancedColor {
+    label: string;
+    value: string;
+}
+export interface AdvancedColorPickerProps extends MarginProps {
+    /** Prop to specify the aria-describedby property of the component */
+    "aria-describedby"?: 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"?: 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"?: string;
+    /** Prop for `availableColors` containing array of objects of colors */
+    availableColors: AdvancedColor[];
+    /** Prop for `defaultColor` containing the default color for `uncontrolled` use */
+    defaultColor: string;
+    /** Specifies the name prop to be applied to each color in the group */
+    name: string;
+    /** Prop for `onBlur` event */
+    onBlur?: (ev: React.FocusEvent<HTMLInputElement>) => void;
+    /** Prop for `onChange` event */
+    onChange?: (ev: React.ChangeEvent<HTMLInputElement>) => void;
+    /** Prop for `onClose` event */
+    onClose?: (ev: React.MouseEvent<HTMLElement>) => void;
+    /** Prop for `onOpen` event */
+    onOpen?: (ev: React.MouseEvent<HTMLElement>) => void;
+    /** Prop for `open` status */
+    open?: boolean;
+    /** The ARIA role to be applied to the component container */
+    role?: string;
+    /** Prop for `selectedColor` containing pre-selected color for `controlled` use */
+    selectedColor?: string;
+}
+declare const AdvancedColorPicker: ({ "aria-describedby": ariaDescribedBy, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, availableColors, defaultColor, name, onOpen, onClose, onChange, onBlur, open, role, selectedColor, ...props }: AdvancedColorPickerProps) => JSX.Element;
+export default AdvancedColorPicker;

package/esm/components/advanced-color-picker/advanced-color-picker.component.js

@@ -2,36 +2,31 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 import React, { useState, useEffect, useCallback, useRef } from "react";
 import PropTypes from "prop-types";
-import styledSystemPropTypes from "@styled-system/prop-types";
 import { StyledAdvancedColorPickerWrapper, StyledAdvancedColorPickerCell, StyledAdvancedColorPickerPreview, DialogStyle } from "./advanced-color-picker.style";
 import { SimpleColorPicker, SimpleColor } from "../simple-color-picker";
 import Events from "../../__internal__/utils/helpers/events";
 import { filterStyledSystemMarginProps } from "../../style/utils";
-const marginPropTypes = filterStyledSystemMarginProps(styledSystemPropTypes.space);
 
 const AdvancedColorPicker = ({
   "aria-describedby": ariaDescribedBy,
   "aria-label": ariaLabel,
   "aria-labelledby": ariaLabelledBy,
+  availableColors,
+  defaultColor,
   name,
-  open,
   onOpen,
   onClose,
   onChange,
   onBlur,
-  availableColors,
-  defaultColor,
-  selectedColor,
+  open = false,
   role,
+  selectedColor,
   ...props
 }) => {
-  const isOpen = open || false;
   const [dialogOpen, setDialogOpen] = useState();
   const currentColor = selectedColor || defaultColor;
-  const [selectedColorRef, setSelectedColorRef] = useState();
-  const gridItemRefs = useRef(Array.from({
-    length: availableColors.length
-  }, () => /*#__PURE__*/React.createRef()));
+  const [selectedColorRef, setSelectedColorRef] = useState(null);
+  const simpleColorPickerData = useRef(null);
   const colors = availableColors.map(({
     value,
     label
@@ -39,21 +34,28 @@ const AdvancedColorPicker = ({
     return {
       value,
       label,
-      ref: gridItemRefs.current[index]
+      getRef: () =>
+      /* Fallback to null to satisfy the TypeScript compiler */
+
+      /* istanbul ignore next */
+      simpleColorPickerData.current ? simpleColorPickerData.current.gridItemRefs[index] : null
     };
   });
   useEffect(() => {
-    if (dialogOpen || isOpen) {
-      const selected = colors.find(c => currentColor === c.value);
-      setSelectedColorRef(selected.ref.current);
+    if (dialogOpen || open) {
+      const newColor = colors === null || colors === void 0 ? void 0 : colors.find(c => currentColor === c.value);
+      /* istanbul ignore else */
+
+      if (newColor) {
+        setSelectedColorRef(newColor.getRef());
+      }
     }
-  }, [colors, currentColor, dialogOpen, isOpen]);
+  }, [colors, currentColor, dialogOpen, open]);
   const handleFocus = useCallback((e, firstFocusableElement) => {
+    /* istanbul ignore else */
     if (e.key === "Tab") {
-      /* istanbul ignore else */
       if (e.shiftKey) {
-        /* istanbul ignore else */
-        if (document.activeElement === firstFocusableElement) {
+        if (document.activeElement === firstFocusableElement && selectedColorRef) {
           selectedColorRef.focus();
           e.preventDefault();
         }
@@ -78,8 +80,14 @@ const AdvancedColorPicker = ({
     }
   }, [onClose]);
   const handleOnChange = useCallback(e => {
-    const selected = colors.find(c => e.target.value === c.value);
-    setSelectedColorRef(selected.ref.current);
+    const newColor = colors === null || colors === void 0 ? void 0 : colors.find(c => e.target.value === c.value);
+    /* istanbul ignore else */
+
+    if (newColor) {
+      setSelectedColorRef(newColor.getRef());
+    }
+    /* istanbul ignore else */
+
 
     if (onChange) {
       onChange(e);
@@ -109,12 +117,12 @@ const AdvancedColorPicker = ({
     onClick: handleOnOpen,
     onKeyDown: handleOnKeyDown,
     color: currentColor,
-    tabIndex: "0"
+    tabIndex: 0
   }), /*#__PURE__*/React.createElement(DialogStyle, {
     "aria-describedby": ariaDescribedBy,
     "aria-label": ariaLabel,
     "aria-labelledby": ariaLabelledBy,
-    open: dialogOpen || isOpen,
+    open: dialogOpen || open,
     size: "auto",
     onCancel: handleOnClose,
     bespokeFocusTrap: handleFocus,
@@ -128,69 +136,190 @@ const AdvancedColorPicker = ({
     legend: "",
     onChange: handleOnChange,
     onBlur: handleOnBlur,
-    onKeyDown: handleColorOnKeyDown
-  }, colors.map(({
+    onKeyDown: handleColorOnKeyDown,
+    ref: simpleColorPickerData
+  }, colors === null || colors === void 0 ? void 0 : colors.map(({
     value,
-    label,
-    ref
+    label
   }) => /*#__PURE__*/React.createElement(SimpleColor, {
     value: value,
     key: value,
     "aria-label": label,
     id: value,
-    defaultChecked: value === currentColor,
-    ref: ref
+    defaultChecked: value === currentColor
   })))));
 };
 
 AdvancedColorPicker.propTypes = {
-  /** Filtered styled system margin props */
-  ...marginPropTypes,
-
-  /** 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,
-
-  /** Specifies the name prop to be applied to each color in the group */
-  name: PropTypes.string.isRequired,
-
-  /** Prop for `availableColors` containing array of objects of colors */
-  availableColors: PropTypes.array.isRequired,
-
-  /** Prop for `defaultColor` containing the default color for `uncontrolled` use */
-  defaultColor: PropTypes.string.isRequired,
-
-  /** Prop for `selectedColor` containing pre-selected color for `controlled` use */
-  selectedColor: PropTypes.string,
-
-  /** Prop for `onChange` event */
-  onChange: PropTypes.func,
-
-  /** Prop for `onOpen` event */
-  onOpen: PropTypes.func,
-
-  /** Prop for `onClose` event */
-  onClose: PropTypes.func,
-
-  /** Prop for `open` status */
-  open: PropTypes.bool,
-
-  /** Prop for `onBlur` event */
-  onBlur: PropTypes.func,
-
-  /** The ARIA role to be applied to the container */
-  role: PropTypes.string
+  "availableColors": PropTypes.arrayOf(PropTypes.shape({
+    "label": PropTypes.string.isRequired,
+    "value": PropTypes.string.isRequired
+  })).isRequired,
+  "defaultColor": PropTypes.string.isRequired,
+  "m": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "margin": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginBottom": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginLeft": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginRight": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginTop": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginX": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginY": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "mb": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "ml": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "mr": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "mt": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "mx": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "my": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "name": PropTypes.string.isRequired,
+  "onBlur": PropTypes.func,
+  "onChange": PropTypes.func,
+  "onClose": PropTypes.func,
+  "onOpen": PropTypes.func,
+  "open": PropTypes.bool,
+  "role": PropTypes.string,
+  "selectedColor": PropTypes.string
 };
 export default AdvancedColorPicker;

package/esm/components/advanced-color-picker/advanced-color-picker.style.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import StyledAdvancedColorPickerCell from "./advanced-color-picker-cell.style";
+declare const StyledAdvancedColorPickerWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare const StyledAdvancedColorPickerPreview: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare const DialogStyle: import("styled-components").StyledComponent<({ className, children, open, height, size, title, disableEscKey, subtitle, disableAutoFocus, focusFirstElement, focusableSelectors, onCancel, showCloseIcon, bespokeFocusTrap, disableClose, help, role, contentPadding, focusableContainers, ...rest }: import("../dialog/dialog.component").DialogProps) => JSX.Element, any, {}, never>;
+export { StyledAdvancedColorPickerWrapper, StyledAdvancedColorPickerCell, StyledAdvancedColorPickerPreview, DialogStyle, };

package/esm/components/advanced-color-picker/index.d.ts

@@ -1 +1,2 @@
-export { default } from "./advanced-color-picker";
+export { default } from "./advanced-color-picker.component";
+export type { AdvancedColorPickerProps } from "./advanced-color-picker.component";

package/esm/components/alert/alert.component.js

@@ -45,15 +45,21 @@ Alert.propTypes = {
     }
   })),
   "focusableSelectors": PropTypes.string,
-  "focusFirstElement": PropTypes.shape({
-    "current": PropTypes.oneOfType([PropTypes.oneOf([null]), function (props, propName) {
+  "focusFirstElement": PropTypes.oneOfType([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");
+    }
+  }, PropTypes.shape({
+    "current": function (props, propName) {
       if (props[propName] == null) {
-        return new Error("Prop '" + propName + "' is required but wasn't specified");
+        return null;
       } 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,
   "onCancel": PropTypes.func,

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

@@ -142,15 +142,21 @@ Confirm.propTypes = {
   "disableCancel": PropTypes.bool,
   "disableConfirm": PropTypes.bool,
   "disableEscKey": PropTypes.bool,
-  "focusFirstElement": PropTypes.shape({
-    "current": PropTypes.oneOfType([PropTypes.oneOf([null]), function (props, propName) {
+  "focusFirstElement": PropTypes.oneOfType([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");
+    }
+  }, PropTypes.shape({
+    "current": function (props, propName) {
       if (props[propName] == null) {
-        return new Error("Prop '" + propName + "' is required but wasn't specified");
+        return null;
       } 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,
   "iconType": PropTypes.oneOf(["error", "warning"]),
   "isLoadingConfirm": PropTypes.bool,

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

@@ -2,11 +2,9 @@ import React from "react";
 import { ModalProps } from "../modal";
 import { TagProps } from "../../__internal__/utils/helpers/tags/tags";
 import { DialogSizes } from "./dialog.config";
+import { CustomRefObject } from "../../__internal__/focus-trap";
 declare const PADDING_VALUES: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8];
 declare type PaddingValues = typeof PADDING_VALUES[number];
-declare type CustomRefObject<T> = {
-    current?: T | null;
-};
 export interface ContentPaddingInterface {
     p?: PaddingValues;
     py?: PaddingValues;
@@ -37,7 +35,7 @@ export interface DialogProps extends ModalProps, TagProps {
      */
     bespokeFocusTrap?: (ev: KeyboardEvent, firstElement?: HTMLElement, lastElement?: HTMLElement) => void;
     /** Optional reference to an element meant to be focused on open */
-    focusFirstElement?: React.MutableRefObject<HTMLElement | null>;
+    focusFirstElement?: CustomRefObject<HTMLElement> | HTMLElement | null;
     /** Optional selector to identify the focusable elements, if not provided a default selector is used */
     focusableSelectors?: string;
     /** Allows developers to specify a specific height for the dialog. */

package/esm/components/dialog/dialog.component.js

@@ -220,15 +220,21 @@ Dialog.propTypes = {
     }
   })),
   "focusableSelectors": PropTypes.string,
-  "focusFirstElement": PropTypes.shape({
-    "current": PropTypes.oneOfType([PropTypes.oneOf([null]), function (props, propName) {
+  "focusFirstElement": PropTypes.oneOfType([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");
+    }
+  }, PropTypes.shape({
+    "current": function (props, propName) {
       if (props[propName] == null) {
-        return new Error("Prop '" + propName + "' is required but wasn't specified");
+        return null;
       } 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,
   "onCancel": PropTypes.func,

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

@@ -1,5 +1,6 @@
 import React from "react";
 import { ModalProps } from "../modal";
+import { CustomRefObject } from "../../__internal__/focus-trap";
 export interface DialogFullScreenProps extends ModalProps {
     /** Prop to specify the aria-describedby property of the DialogFullscreen component */
     "aria-describedby"?: string;
@@ -23,7 +24,7 @@ export interface DialogFullScreenProps extends ModalProps {
     /** remove padding from content */
     disableContentPadding?: boolean;
     /** Optional reference to an element meant to be focused on open */
-    focusFirstElement?: React.MutableRefObject<HTMLElement | null>;
+    focusFirstElement?: CustomRefObject<HTMLElement> | HTMLElement | null;
     /**
      * Function to replace focus trap
      * @ignore
@@ -45,7 +46,7 @@ export interface DialogFullScreenProps extends ModalProps {
     /** 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>[];
+    focusableContainers?: CustomRefObject<HTMLElement>[];
     /** Optional selector to identify the focusable elements, if not provided a default selector is used */
     focusableSelectors?: string;
     /** A custom close event handler */

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

@@ -135,24 +135,30 @@ DialogFullScreen.propTypes = {
   "disableEscKey": PropTypes.bool,
   "enableBackgroundUI": PropTypes.bool,
   "focusableContainers": PropTypes.arrayOf(PropTypes.shape({
-    "current": PropTypes.oneOfType([PropTypes.oneOf([null]), function (props, propName) {
+    "current": function (props, propName) {
       if (props[propName] == null) {
-        return new Error("Prop '" + propName + "' is required but wasn't specified");
+        return null;
       } else if (typeof props[propName] !== 'object' || props[propName].nodeType !== 1) {
         return new Error("Expected prop '" + propName + "' to be of type Element");
       }
-    }]).isRequired
+    }
   })),
   "focusableSelectors": PropTypes.string,
-  "focusFirstElement": PropTypes.shape({
-    "current": PropTypes.oneOfType([PropTypes.oneOf([null]), function (props, propName) {
+  "focusFirstElement": PropTypes.oneOfType([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");
+    }
+  }, PropTypes.shape({
+    "current": function (props, propName) {
       if (props[propName] == null) {
-        return new Error("Prop '" + propName + "' is required but wasn't specified");
+        return null;
       } 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,

package/esm/components/menu/__internal__/submenu/submenu.component.js

@@ -43,6 +43,7 @@ const Submenu = /*#__PURE__*/React.forwardRef(({
   const [submenuItemIds, setSubmenuItemIds] = useState([]);
   const [characterString, setCharacterString] = useState("");
   const shiftTabPressed = useRef(false);
+  const focusFirstMenuItemOnOpen = useRef(false);
   const registerItem = useCallback(id => {
     setSubmenuItemIds(prevState => {
       return [...prevState, id];
@@ -109,6 +110,7 @@ const Submenu = /*#__PURE__*/React.forwardRef(({
       if (Events.isEnterKey(event) || Events.isSpaceKey(event) || Events.isDownKey(event) || Events.isUpKey(event)) {
         event.preventDefault();
         openSubmenu();
+        focusFirstMenuItemOnOpen.current = !href;
       }
     }
 
@@ -212,10 +214,11 @@ const Submenu = /*#__PURE__*/React.forwardRef(({
     }
   }, [submenuItemIds, submenuOpen, href, numberOfChildren, submenuFocusId, findCurrentIndex, openSubmenu, closeSubmenu, onKeyDown, characterString, restartCharacterTimeout, startCharacterTimeout]);
   useEffect(() => {
-    if (submenuOpen && !href && !submenuFocusId && submenuItemIds.length) {
+    if (focusFirstMenuItemOnOpen.current && submenuOpen && !submenuFocusId && submenuItemIds.length) {
+      focusFirstMenuItemOnOpen.current = false;
       setSubmenuFocusId(submenuItemIds[0]);
     }
-  }, [submenuOpen, href, submenuFocusId, submenuItemIds]);
+  }, [submenuOpen, submenuFocusId, submenuItemIds]);
 
   const handleClickAway = () => {
     document.removeEventListener("click", handleClickAway);