carbon-react 144.18.0 → 144.20.0

package/esm/components/action-popover/action-popover-menu-button/action-popover-menu-button.component.d.ts

@@ -4,6 +4,8 @@ import { IconType } from "../../icon";
 export declare type ActionPopoverMenuButtonAria = {
     "aria-haspopup": string;
     "aria-label": string;
+    "aria-labelledby"?: string;
+    "aria-describedby"?: string;
     "aria-controls": string;
     "aria-expanded": string;
 };
@@ -26,7 +28,7 @@ export interface ActionPopoverMenuButtonProps {
     tabIndex: number;
 }
 export declare const ActionPopoverMenuButton: {
-    ({ buttonType, iconType, iconPosition, size, children, ...props }: ActionPopoverMenuButtonProps): React.JSX.Element;
+    ({ buttonType, iconType, iconPosition, size, children, ariaAttributes, ...props }: ActionPopoverMenuButtonProps): React.JSX.Element;
     displayName: string;
 };
 export default ActionPopoverMenuButton;

package/esm/components/action-popover/action-popover-menu-button/action-popover-menu-button.component.js

@@ -9,12 +9,13 @@ export const ActionPopoverMenuButton = ({
   iconPosition,
   size,
   children,
+  ariaAttributes,
   ...props
 }) => /*#__PURE__*/React.createElement(MenuButtonOverrideWrapper, null, /*#__PURE__*/React.createElement(Button, _extends({
   buttonType: buttonType,
   iconType: iconType,
   iconPosition: iconPosition,
   size: size
-}, props), children));
+}, ariaAttributes, props), children));
 ActionPopoverMenuButton.displayName = "ActionPopoverMenuButton";
 export default ActionPopoverMenuButton;

package/esm/components/action-popover/action-popover.component.d.ts

@@ -7,6 +7,8 @@ export interface RenderButtonProps {
     ariaAttributes: {
         "aria-haspopup": string;
         "aria-label": string;
+        "aria-labelledby"?: string;
+        "aria-describedby"?: string;
         "aria-controls": string;
         "aria-expanded": string;
     };
@@ -32,6 +34,10 @@ export interface ActionPopoverProps extends MarginProps {
     rightAlignMenu?: boolean;
     /** Prop to specify an aria-label for the component */
     "aria-label"?: string;
+    /** Prop to specify an aria-labelledby for the component */
+    "aria-labelledby"?: string;
+    /** Prop to specify an aria-describedby for the component */
+    "aria-describedby"?: string;
 }
-export declare const ActionPopover: ({ children, id, onOpen, onClose, rightAlignMenu, renderButton, placement, horizontalAlignment, submenuPosition, "aria-label": ariaLabel, ...rest }: ActionPopoverProps) => React.JSX.Element;
+export declare const ActionPopover: ({ children, id, onOpen, onClose, rightAlignMenu, renderButton, placement, horizontalAlignment, submenuPosition, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, ...rest }: ActionPopoverProps) => React.JSX.Element;
 export default ActionPopover;

package/esm/components/action-popover/action-popover.component.js

@@ -26,6 +26,8 @@ export const ActionPopover = ({
   horizontalAlignment = "left",
   submenuPosition = "left",
   "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  "aria-describedby": ariaDescribedBy,
   ...rest
 }) => {
   const l = useLocale();
@@ -143,6 +145,8 @@ export const ActionPopover = ({
         ariaAttributes: {
           "aria-haspopup": "true",
           "aria-label": ariaLabel || l.actionPopover.ariaLabel(),
+          "aria-labelledby": ariaLabelledBy,
+          "aria-describedby": ariaDescribedBy,
           "aria-controls": menuID,
           "aria-expanded": `${isOpen}`
         }
@@ -152,6 +156,8 @@ export const ActionPopover = ({
       role: "button",
       "aria-haspopup": "true",
       "aria-label": ariaLabel || l.actionPopover.ariaLabel(),
+      "aria-labelledby": ariaLabelledBy,
+      "aria-describedby": ariaDescribedBy,
       "aria-controls": menuID,
       "aria-expanded": isOpen,
       tabIndex: isOpen ? -1 : 0,

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

@@ -1,10 +1,11 @@
 import React from "react";
 import { MarginProps } from "styled-system";
+import { ModalProps } from "../modal";
 export interface AdvancedColor {
     label: string;
     value: string;
 }
-export interface AdvancedColorPickerProps extends MarginProps {
+export interface AdvancedColorPickerProps extends MarginProps, Pick<ModalProps, "restoreFocusOnClose"> {
     /** Prop to specify the aria-describedby property of the component */
     "aria-describedby"?: string;
     /**
@@ -39,5 +40,5 @@ export interface AdvancedColorPickerProps extends MarginProps {
     /** Prop for `selectedColor` containing pre-selected color for `controlled` use */
     selectedColor?: string;
 }
-export declare const AdvancedColorPicker: ({ "aria-describedby": ariaDescribedBy, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, availableColors, defaultColor, name, onOpen, onClose, onChange, onBlur, open, role, selectedColor, ...props }: AdvancedColorPickerProps) => React.JSX.Element;
+export declare const AdvancedColorPicker: ({ "aria-describedby": ariaDescribedBy, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, availableColors, defaultColor, name, onOpen, onClose, onChange, onBlur, open, role, selectedColor, restoreFocusOnClose, ...props }: AdvancedColorPickerProps) => React.JSX.Element;
 export default AdvancedColorPicker;

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

@@ -24,6 +24,7 @@ export const AdvancedColorPicker = ({
   open = false,
   role,
   selectedColor,
+  restoreFocusOnClose = true,
   ...props
 }) => {
   const [dialogOpen, setDialogOpen] = useState();
@@ -142,7 +143,8 @@ export const AdvancedColorPicker = ({
     onCancel: handleOnClose,
     bespokeFocusTrap: handleFocus,
     focusFirstElement: selectedColorRef,
-    role: role
+    role: role,
+    restoreFocusOnClose: restoreFocusOnClose
   }, /*#__PURE__*/React.createElement(StyledAdvancedColorPickerPreview, {
     "data-element": "color-picker-preview",
     color: currentColor

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

@@ -40,6 +40,7 @@ const Dialog = /*#__PURE__*/forwardRef(({
   focusableContainers,
   topModalOverride,
   closeButtonDataProps,
+  restoreFocusOnClose = true,
   ...rest
 }, ref) => {
   if (!deprecatedClassNameWarningShown && className) {
@@ -101,7 +102,8 @@ const Dialog = /*#__PURE__*/forwardRef(({
     disableEscKey: disableEscKey,
     disableClose: disableClose,
     className: className ? `${className} carbon-dialog` : "carbon-dialog",
-    topModalOverride: topModalOverride
+    topModalOverride: topModalOverride,
+    restoreFocusOnClose: restoreFocusOnClose
   }, /*#__PURE__*/React.createElement(FocusTrap, {
     autoFocus: !disableAutoFocus,
     focusFirstElement: focusFirstElement,
@@ -182,6 +184,7 @@ if (process.env.NODE_ENV !== "production") {
     "help": PropTypes.string,
     "onCancel": PropTypes.func,
     "open": PropTypes.bool.isRequired,
+    "restoreFocusOnClose": PropTypes.bool,
     "role": PropTypes.string,
     "showCloseIcon": PropTypes.bool,
     "size": PropTypes.oneOf(["auto", "extra-large", "extra-small", "large", "maximise", "medium-large", "medium-small", "medium", "small"]),

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

@@ -55,5 +55,5 @@ export interface DialogFullScreenProps extends ModalProps {
     /** 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, topModalOverride, closeButtonDataProps, ...rest }: DialogFullScreenProps) => React.JSX.Element;
+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, topModalOverride, closeButtonDataProps, restoreFocusOnClose, ...rest }: DialogFullScreenProps) => React.JSX.Element;
 export default DialogFullScreen;

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

@@ -37,6 +37,7 @@ export const DialogFullScreen = ({
   focusableSelectors,
   topModalOverride,
   closeButtonDataProps,
+  restoreFocusOnClose = true,
   ...rest
 }) => {
   const locale = useLocale();
@@ -87,7 +88,8 @@ export const DialogFullScreen = ({
     open: open,
     onCancel: onCancel,
     disableEscKey: disableEscKey,
-    topModalOverride: topModalOverride
+    topModalOverride: topModalOverride,
+    restoreFocusOnClose: restoreFocusOnClose
   }, componentTags), /*#__PURE__*/React.createElement(FocusTrap, {
     autoFocus: !disableAutoFocus,
     focusFirstElement: focusFirstElement,

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

@@ -21,6 +21,10 @@ export interface ModalProps extends Omit<TagProps, "data-component"> {
     timeout?: number;
     /** Manually override the internal modal stacking order to set this as top */
     topModalOverride?: boolean;
+    /** Enables the automatic restoration of focus to the element that invoked
+     * the modal when the modal is closed.
+     */
+    restoreFocusOnClose?: boolean;
 }
-declare const Modal: ({ children, "data-element": dataElement, "data-role": dataRole, open, onCancel, disableEscKey, disableClose, enableBackgroundUI, timeout, topModalOverride, ...rest }: ModalProps) => React.JSX.Element;
+declare const Modal: ({ children, "data-element": dataElement, "data-role": dataRole, open, onCancel, disableEscKey, disableClose, enableBackgroundUI, timeout, topModalOverride, restoreFocusOnClose, ...rest }: ModalProps) => React.JSX.Element;
 export default Modal;

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

@@ -21,6 +21,7 @@ const Modal = ({
   enableBackgroundUI = false,
   timeout = 300,
   topModalOverride,
+  restoreFocusOnClose = true,
   ...rest
 }) => {
   if (!deprecatedClassNameWarningShown && rest.className) {
@@ -65,7 +66,7 @@ const Modal = ({
     modalRef: ref,
     setTriggerRefocusFlag,
     topModalOverride,
-    focusCallToActionElement: document.activeElement
+    focusCallToActionElement: restoreFocusOnClose ? document.activeElement : undefined
   });
   let background;
   let content;

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

@@ -5,7 +5,7 @@ import { TagProps } from "../../__internal__/utils/helpers/tags/tags";
 declare type CustomRefObject<T> = {
     current?: T | null;
 };
-export interface SidebarProps extends PaddingProps, Omit<TagProps, "data-component">, WidthProps, Pick<ModalProps, "topModalOverride"> {
+export interface SidebarProps extends PaddingProps, Omit<TagProps, "data-component">, WidthProps, Pick<ModalProps, "topModalOverride" | "restoreFocusOnClose"> {
     /** Prop to specify the aria-describedby property of the component */
     "aria-describedby"?: string;
     /**

package/esm/components/sidebar/sidebar.component.js

@@ -38,6 +38,7 @@ const Sidebar = /*#__PURE__*/React.forwardRef(({
   width,
   headerPadding = {},
   topModalOverride,
+  restoreFocusOnClose = true,
   ...rest
 }, ref) => {
   const locale = useLocale();
@@ -93,7 +94,8 @@ const Sidebar = /*#__PURE__*/React.forwardRef(({
     onCancel: onCancel,
     disableEscKey: disableEscKey,
     enableBackgroundUI: enableBackgroundUI,
-    topModalOverride: topModalOverride
+    topModalOverride: topModalOverride,
+    restoreFocusOnClose: restoreFocusOnClose
   }, enableBackgroundUI ? sidebar : /*#__PURE__*/React.createElement(FocusTrap, {
     wrapperRef: sidebarRef,
     isOpen: open,
@@ -449,6 +451,7 @@ if (process.env.NODE_ENV !== "production") {
       "toString": PropTypes.func.isRequired,
       "valueOf": PropTypes.func.isRequired
     }), PropTypes.string]),
+    "restoreFocusOnClose": PropTypes.bool,
     "role": PropTypes.string,
     "size": PropTypes.oneOf(["extra-large", "extra-small", "large", "medium-large", "medium-small", "medium", "small"]),
     "topModalOverride": PropTypes.bool,

package/esm/components/vertical-menu/vertical-menu-full-screen/vertical-menu-full-screen.component.js

@@ -32,7 +32,8 @@ export const VerticalMenuFullScreen = ({
     open: isOpen,
     closeModal: handleKeyDown,
     modalRef: menuWrapperRef,
-    topModalOverride: true
+    topModalOverride: true,
+    focusCallToActionElement: document.activeElement
   });
 
   // TODO remove this as part of FE-5650

package/lib/components/action-popover/action-popover-menu-button/action-popover-menu-button.component.d.ts

@@ -4,6 +4,8 @@ import { IconType } from "../../icon";
 export declare type ActionPopoverMenuButtonAria = {
     "aria-haspopup": string;
     "aria-label": string;
+    "aria-labelledby"?: string;
+    "aria-describedby"?: string;
     "aria-controls": string;
     "aria-expanded": string;
 };
@@ -26,7 +28,7 @@ export interface ActionPopoverMenuButtonProps {
     tabIndex: number;
 }
 export declare const ActionPopoverMenuButton: {
-    ({ buttonType, iconType, iconPosition, size, children, ...props }: ActionPopoverMenuButtonProps): React.JSX.Element;
+    ({ buttonType, iconType, iconPosition, size, children, ariaAttributes, ...props }: ActionPopoverMenuButtonProps): React.JSX.Element;
     displayName: string;
 };
 export default ActionPopoverMenuButton;

package/lib/components/action-popover/action-popover-menu-button/action-popover-menu-button.component.js

@@ -16,13 +16,14 @@ const ActionPopoverMenuButton = ({
   iconPosition,
   size,
   children,
+  ariaAttributes,
   ...props
 }) => /*#__PURE__*/_react.default.createElement(_actionPopover.MenuButtonOverrideWrapper, null, /*#__PURE__*/_react.default.createElement(_button.default, _extends({
   buttonType: buttonType,
   iconType: iconType,
   iconPosition: iconPosition,
   size: size
-}, props), children));
+}, ariaAttributes, props), children));
 exports.ActionPopoverMenuButton = ActionPopoverMenuButton;
 ActionPopoverMenuButton.displayName = "ActionPopoverMenuButton";
 var _default = exports.default = ActionPopoverMenuButton;

package/lib/components/action-popover/action-popover.component.d.ts

@@ -7,6 +7,8 @@ export interface RenderButtonProps {
     ariaAttributes: {
         "aria-haspopup": string;
         "aria-label": string;
+        "aria-labelledby"?: string;
+        "aria-describedby"?: string;
         "aria-controls": string;
         "aria-expanded": string;
     };
@@ -32,6 +34,10 @@ export interface ActionPopoverProps extends MarginProps {
     rightAlignMenu?: boolean;
     /** Prop to specify an aria-label for the component */
     "aria-label"?: string;
+    /** Prop to specify an aria-labelledby for the component */
+    "aria-labelledby"?: string;
+    /** Prop to specify an aria-describedby for the component */
+    "aria-describedby"?: string;
 }
-export declare const ActionPopover: ({ children, id, onOpen, onClose, rightAlignMenu, renderButton, placement, horizontalAlignment, submenuPosition, "aria-label": ariaLabel, ...rest }: ActionPopoverProps) => React.JSX.Element;
+export declare const ActionPopover: ({ children, id, onOpen, onClose, rightAlignMenu, renderButton, placement, horizontalAlignment, submenuPosition, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, ...rest }: ActionPopoverProps) => React.JSX.Element;
 export default ActionPopover;

package/lib/components/action-popover/action-popover.component.js

@@ -35,6 +35,8 @@ const ActionPopover = ({
   horizontalAlignment = "left",
   submenuPosition = "left",
   "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  "aria-describedby": ariaDescribedBy,
   ...rest
 }) => {
   const l = (0, _useLocale.default)();
@@ -152,6 +154,8 @@ const ActionPopover = ({
         ariaAttributes: {
           "aria-haspopup": "true",
           "aria-label": ariaLabel || l.actionPopover.ariaLabel(),
+          "aria-labelledby": ariaLabelledBy,
+          "aria-describedby": ariaDescribedBy,
           "aria-controls": menuID,
           "aria-expanded": `${isOpen}`
         }
@@ -161,6 +165,8 @@ const ActionPopover = ({
       role: "button",
       "aria-haspopup": "true",
       "aria-label": ariaLabel || l.actionPopover.ariaLabel(),
+      "aria-labelledby": ariaLabelledBy,
+      "aria-describedby": ariaDescribedBy,
       "aria-controls": menuID,
       "aria-expanded": isOpen,
       tabIndex: isOpen ? -1 : 0,

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

@@ -1,10 +1,11 @@
 import React from "react";
 import { MarginProps } from "styled-system";
+import { ModalProps } from "../modal";
 export interface AdvancedColor {
     label: string;
     value: string;
 }
-export interface AdvancedColorPickerProps extends MarginProps {
+export interface AdvancedColorPickerProps extends MarginProps, Pick<ModalProps, "restoreFocusOnClose"> {
     /** Prop to specify the aria-describedby property of the component */
     "aria-describedby"?: string;
     /**
@@ -39,5 +40,5 @@ export interface AdvancedColorPickerProps extends MarginProps {
     /** Prop for `selectedColor` containing pre-selected color for `controlled` use */
     selectedColor?: string;
 }
-export declare const AdvancedColorPicker: ({ "aria-describedby": ariaDescribedBy, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, availableColors, defaultColor, name, onOpen, onClose, onChange, onBlur, open, role, selectedColor, ...props }: AdvancedColorPickerProps) => React.JSX.Element;
+export declare const AdvancedColorPicker: ({ "aria-describedby": ariaDescribedBy, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, availableColors, defaultColor, name, onOpen, onClose, onChange, onBlur, open, role, selectedColor, restoreFocusOnClose, ...props }: AdvancedColorPickerProps) => React.JSX.Element;
 export default AdvancedColorPicker;

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

@@ -33,6 +33,7 @@ const AdvancedColorPicker = ({
   open = false,
   role,
   selectedColor,
+  restoreFocusOnClose = true,
   ...props
 }) => {
   const [dialogOpen, setDialogOpen] = (0, _react.useState)();
@@ -151,7 +152,8 @@ const AdvancedColorPicker = ({
     onCancel: handleOnClose,
     bespokeFocusTrap: handleFocus,
     focusFirstElement: selectedColorRef,
-    role: role
+    role: role,
+    restoreFocusOnClose: restoreFocusOnClose
   }, /*#__PURE__*/_react.default.createElement(_advancedColorPicker.StyledAdvancedColorPickerPreview, {
     "data-element": "color-picker-preview",
     color: currentColor

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

@@ -49,6 +49,7 @@ const Dialog = exports.Dialog = /*#__PURE__*/(0, _react.forwardRef)(({
   focusableContainers,
   topModalOverride,
   closeButtonDataProps,
+  restoreFocusOnClose = true,
   ...rest
 }, ref) => {
   if (!deprecatedClassNameWarningShown && className) {
@@ -110,7 +111,8 @@ const Dialog = exports.Dialog = /*#__PURE__*/(0, _react.forwardRef)(({
     disableEscKey: disableEscKey,
     disableClose: disableClose,
     className: className ? `${className} carbon-dialog` : "carbon-dialog",
-    topModalOverride: topModalOverride
+    topModalOverride: topModalOverride,
+    restoreFocusOnClose: restoreFocusOnClose
   }, /*#__PURE__*/_react.default.createElement(_focusTrap.default, {
     autoFocus: !disableAutoFocus,
     focusFirstElement: focusFirstElement,
@@ -191,6 +193,7 @@ if (process.env.NODE_ENV !== "production") {
     "help": _propTypes.default.string,
     "onCancel": _propTypes.default.func,
     "open": _propTypes.default.bool.isRequired,
+    "restoreFocusOnClose": _propTypes.default.bool,
     "role": _propTypes.default.string,
     "showCloseIcon": _propTypes.default.bool,
     "size": _propTypes.default.oneOf(["auto", "extra-large", "extra-small", "large", "maximise", "medium-large", "medium-small", "medium", "small"]),

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

@@ -55,5 +55,5 @@ export interface DialogFullScreenProps extends ModalProps {
     /** 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, topModalOverride, closeButtonDataProps, ...rest }: DialogFullScreenProps) => React.JSX.Element;
+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, topModalOverride, closeButtonDataProps, restoreFocusOnClose, ...rest }: DialogFullScreenProps) => React.JSX.Element;
 export default DialogFullScreen;

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

@@ -46,6 +46,7 @@ const DialogFullScreen = ({
   focusableSelectors,
   topModalOverride,
   closeButtonDataProps,
+  restoreFocusOnClose = true,
   ...rest
 }) => {
   const locale = (0, _useLocale.default)();
@@ -96,7 +97,8 @@ const DialogFullScreen = ({
     open: open,
     onCancel: onCancel,
     disableEscKey: disableEscKey,
-    topModalOverride: topModalOverride
+    topModalOverride: topModalOverride,
+    restoreFocusOnClose: restoreFocusOnClose
   }, componentTags), /*#__PURE__*/_react.default.createElement(_focusTrap.default, {
     autoFocus: !disableAutoFocus,
     focusFirstElement: focusFirstElement,

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

@@ -21,6 +21,10 @@ export interface ModalProps extends Omit<TagProps, "data-component"> {
     timeout?: number;
     /** Manually override the internal modal stacking order to set this as top */
     topModalOverride?: boolean;
+    /** Enables the automatic restoration of focus to the element that invoked
+     * the modal when the modal is closed.
+     */
+    restoreFocusOnClose?: boolean;
 }
-declare const Modal: ({ children, "data-element": dataElement, "data-role": dataRole, open, onCancel, disableEscKey, disableClose, enableBackgroundUI, timeout, topModalOverride, ...rest }: ModalProps) => React.JSX.Element;
+declare const Modal: ({ children, "data-element": dataElement, "data-role": dataRole, open, onCancel, disableEscKey, disableClose, enableBackgroundUI, timeout, topModalOverride, restoreFocusOnClose, ...rest }: ModalProps) => React.JSX.Element;
 export default Modal;

package/lib/components/modal/modal.component.js

@@ -30,6 +30,7 @@ const Modal = ({
   enableBackgroundUI = false,
   timeout = 300,
   topModalOverride,
+  restoreFocusOnClose = true,
   ...rest
 }) => {
   if (!deprecatedClassNameWarningShown && rest.className) {
@@ -74,7 +75,7 @@ const Modal = ({
     modalRef: ref,
     setTriggerRefocusFlag,
     topModalOverride,
-    focusCallToActionElement: document.activeElement
+    focusCallToActionElement: restoreFocusOnClose ? document.activeElement : undefined
   });
   let background;
   let content;

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

@@ -5,7 +5,7 @@ import { TagProps } from "../../__internal__/utils/helpers/tags/tags";
 declare type CustomRefObject<T> = {
     current?: T | null;
 };
-export interface SidebarProps extends PaddingProps, Omit<TagProps, "data-component">, WidthProps, Pick<ModalProps, "topModalOverride"> {
+export interface SidebarProps extends PaddingProps, Omit<TagProps, "data-component">, WidthProps, Pick<ModalProps, "topModalOverride" | "restoreFocusOnClose"> {
     /** Prop to specify the aria-describedby property of the component */
     "aria-describedby"?: string;
     /**

package/lib/components/sidebar/sidebar.component.js

@@ -46,6 +46,7 @@ const Sidebar = exports.Sidebar = /*#__PURE__*/_react.default.forwardRef(({
   width,
   headerPadding = {},
   topModalOverride,
+  restoreFocusOnClose = true,
   ...rest
 }, ref) => {
   const locale = (0, _useLocale.default)();
@@ -101,7 +102,8 @@ const Sidebar = exports.Sidebar = /*#__PURE__*/_react.default.forwardRef(({
     onCancel: onCancel,
     disableEscKey: disableEscKey,
     enableBackgroundUI: enableBackgroundUI,
-    topModalOverride: topModalOverride
+    topModalOverride: topModalOverride,
+    restoreFocusOnClose: restoreFocusOnClose
   }, enableBackgroundUI ? sidebar : /*#__PURE__*/_react.default.createElement(_focusTrap.default, {
     wrapperRef: sidebarRef,
     isOpen: open,
@@ -457,6 +459,7 @@ if (process.env.NODE_ENV !== "production") {
       "toString": _propTypes.default.func.isRequired,
       "valueOf": _propTypes.default.func.isRequired
     }), _propTypes.default.string]),
+    "restoreFocusOnClose": _propTypes.default.bool,
     "role": _propTypes.default.string,
     "size": _propTypes.default.oneOf(["extra-large", "extra-small", "large", "medium-large", "medium-small", "medium", "small"]),
     "topModalOverride": _propTypes.default.bool,

package/lib/components/vertical-menu/vertical-menu-full-screen/vertical-menu-full-screen.component.js

@@ -41,7 +41,8 @@ const VerticalMenuFullScreen = ({
     open: isOpen,
     closeModal: handleKeyDown,
     modalRef: menuWrapperRef,
-    topModalOverride: true
+    topModalOverride: true,
+    focusCallToActionElement: document.activeElement
   });
 
   // TODO remove this as part of FE-5650

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "144.18.0",
+  "version": "144.20.0",
   "description": "A library of reusable React components for easily building user interfaces.",
   "files": [
     "lib",