carbon-react 144.19.0 → 144.20.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/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.19.0",
+  "version": "144.20.0",
   "description": "A library of reusable React components for easily building user interfaces.",
   "files": [
     "lib",