carbon-react 144.19.0 → 144.20.1

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

@@ -32,9 +32,9 @@ export interface ButtonProps extends SpaceProps, TagProps {
     href?: string;
     /** Defines an Icon position related to the children: "before" | "after" */
     iconPosition?: ButtonIconPosition;
-    /** Provides a tooltip message when the icon is hovered. */
+    /** [Legacy] Provides a tooltip message when the icon is hovered. */
     iconTooltipMessage?: string;
-    /** Provides positioning when the tooltip is displayed. */
+    /** [Legacy] Provides positioning when the tooltip is displayed. */
     iconTooltipPosition?: TooltipPositions;
     /** Defines an Icon type within the button */
     iconType?: IconType;

package/esm/components/checkbox/checkbox-group/checkbox-group.component.d.ts

@@ -5,8 +5,8 @@ export interface CheckboxGroupProps extends ValidationProps, MarginProps {
     /** The content for the CheckboxGroup Legend */
     legend?: string;
     /**
-     * The content for the CheckboxGroup Help tooltip,
-     * will be rendered as hint text when `validationRedesignOptIn` is true.
+     * The content for the CheckboxGroup hint text,
+     * will only be rendered when `validationRedesignOptIn` is true.
      */
     legendHelp?: string;
     /** [Legacy] When true, legend is placed inline with the checkboxes */
@@ -27,7 +27,7 @@ export interface CheckboxGroupProps extends ValidationProps, MarginProps {
     isOptional?: boolean;
     /** [Legacy] Overrides the default tooltip */
     tooltipPosition?: "top" | "bottom" | "left" | "right";
-    /** When true, Checkboxes are in line */
+    /** When true, Checkboxes are inline */
     inline?: boolean;
 }
 export declare const CheckboxGroup: {

package/esm/components/checkbox/checkbox-group/checkbox-group.component.js

@@ -40,7 +40,6 @@ export const CheckboxGroup = props => {
     legendSpacing: legendSpacing,
     error: error,
     warning: warning,
-    info: info,
     isRequired: required,
     isOptional: isOptional
   }, tagComponent("checkboxgroup", props), {

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

@@ -12,13 +12,13 @@ export interface CheckboxProps extends CommonCheckableInputProps, MarginProps {
     "data-element"?: string;
     /** Identifier used for testing purposes, applied to the root element of the component. */
     "data-role"?: string;
-    /** Aria label for rendered help component */
+    /** [Legacy] Aria label for rendered help component */
     helpAriaLabel?: string;
     /** When true label is inline */
     labelInline?: boolean;
     /** Accepts a callback function which is triggered on click event */
     onClick?: (ev: React.MouseEvent<HTMLInputElement>) => void;
-    /** Overrides the default tooltip position */
+    /** [Legacy] Overrides the default tooltip position */
     tooltipPosition?: "top" | "bottom" | "left" | "right";
     /** The value of the checkbox, passed on form submit */
     value?: string;

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/icon/icon.component.d.ts

@@ -14,19 +14,19 @@ export interface IconProps extends Omit<StyledIconProps, "type">, MarginProps, O
     id?: string;
     /** The ARIA role to be applied to the Icon */
     role?: string;
-    /** The message to be displayed within the tooltip */
+    /** [Legacy] The message to be displayed within the tooltip */
     tooltipMessage?: React.ReactNode;
-    /** The position to display the tooltip */
+    /** [Legacy] The position to display the tooltip */
     tooltipPosition?: TooltipPositions;
-    /** Control whether the tooltip is visible */
+    /** [Legacy] Control whether the tooltip is visible */
     tooltipVisible?: boolean;
-    /** Override background color of the Tooltip, provide any color from palette or any valid css color value. */
+    /** [Legacy] Override background color of the Tooltip, provide any color from palette or any valid css color value. */
     tooltipBgColor?: string;
-    /** Override font color of the Tooltip, provide any color from palette or any valid css color value. */
+    /** [Legacy] Override font color of the Tooltip, provide any color from palette or any valid css color value. */
     tooltipFontColor?: string;
-    /** Overrides the default flip behaviour of the Tooltip */
+    /** [Legacy] Overrides the default flip behaviour of the Tooltip */
     tooltipFlipOverrides?: TooltipPositions[];
-    /** Id passed to the tooltip container, used for accessibility purposes */
+    /** [Legacy] Id passed to the tooltip container, used for accessibility purposes */
     tooltipId?: string;
     /**
      * Icon type

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

@@ -12,9 +12,9 @@ export interface LinkProps extends StyledLinkProps, React.AriaAttributes {
     onKeyDown?: (ev: React.KeyboardEvent<HTMLAnchorElement> | React.KeyboardEvent<HTMLButtonElement>) => void;
     /** Function called when a mouse down event triggers. */
     onMouseDown?: (ev: React.MouseEvent<HTMLAnchorElement> | React.MouseEvent<HTMLButtonElement>) => void;
-    /** A message to display as a tooltip to the link. */
+    /** [Legacy] A message to display as a tooltip to the link. */
     tooltipMessage?: string;
-    /** Positions the tooltip with the link. */
+    /** [Legacy] Positions the tooltip with the link. */
     tooltipPosition?: "bottom" | "left" | "right" | "top";
     /** Child content to render in the link. */
     children?: React.ReactNode;

package/esm/components/loader/loader-square.style.js

@@ -10,7 +10,7 @@ const loaderAnimation = keyframes`
     transform: scale(1);
   }
 `;
-const getDimentions = (size, roundedCornersOptOut) => {
+const getDimensions = (size, roundedCornersOptOut) => {
   let width;
   let marginRight;
   switch (size) {
@@ -44,7 +44,7 @@ const StyledLoaderSquare = styled.div`
     animation: ${loaderAnimation} 1s infinite ease-in-out both;
     background-color: ${backgroundColor};
     display: inline-block;
-    ${getDimentions(size, theme.roundedCornersOptOut)}
+    ${getDimensions(size, theme.roundedCornersOptOut)}
 
     ${isInsideButton && css`
       background-color: ${isActive ? "var(--colorsUtilityYang100)" : "var(--colorsSemanticNeutral500)"};

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/portrait/portrait.component.d.ts

@@ -24,21 +24,21 @@ export interface PortraitProps extends MarginProps {
     darkBackground?: boolean;
     /** Prop for `onClick` events. */
     onClick?: (ev: React.MouseEvent<HTMLElement>) => void;
-    /** The message to be displayed within the tooltip */
+    /** [Legacy] The message to be displayed within the tooltip */
     tooltipMessage?: React.ReactNode;
-    /** The id attribute to use for the tooltip */
+    /** [Legacy] The id attribute to use for the tooltip */
     tooltipId?: string;
-    /** Whether to to show the Tooltip */
+    /** [Legacy] Whether to to show the Tooltip */
     tooltipIsVisible?: boolean;
-    /** Sets position of the tooltip */
+    /** [Legacy] Sets position of the tooltip */
     tooltipPosition?: "top" | "bottom" | "left" | "right";
-    /** Defines the message type */
+    /** [Legacy] Defines the message type */
     tooltipType?: string;
-    /** Defines the size of the tooltip content */
+    /** [Legacy] Defines the size of the tooltip content */
     tooltipSize?: "medium" | "large";
-    /** Override background color of the Tooltip, provide any color from palette or any valid css color value. */
+    /** [Legacy] Override background color of the Tooltip, provide any color from palette or any valid css color value. */
     tooltipBgColor?: string;
-    /** Override font color of the Tooltip, provide any color from palette or any valid css color value. */
+    /** [Legacy] Override font color of the Tooltip, provide any color from palette or any valid css color value. */
     tooltipFontColor?: string;
 }
 declare const Portrait: ({ alt, name, darkBackground, gravatar, iconType, initials, shape, size, src, onClick, tooltipMessage, tooltipId, tooltipIsVisible, tooltipPosition, tooltipType, tooltipSize, tooltipBgColor, tooltipFontColor, ...rest }: PortraitProps) => React.JSX.Element;

package/esm/components/radio-button/radio-button-group/radio-button-group.component.d.ts

@@ -15,8 +15,8 @@ export interface RadioButtonGroupProps extends ValidationProps, MarginProps {
     /** The content for the RadioGroup Legend */
     legend?: string;
     /**
-     * The content for the RadioButtonGroup Legend Help tooltip,
-     * will be rendered as hint text when `validationRedesignOptIn` is true.
+     * The content for the RadioButtonGroup hint text,
+     * will only be rendered when `validationRedesignOptIn` is true.
      */
     legendHelp?: string;
     /** [Legacy] Text alignment of legend when inline */

package/esm/components/radio-button/radio-button-group/radio-button-group.component.js

@@ -61,7 +61,6 @@ export const RadioButtonGroup = props => {
     legend: legend,
     error: error,
     warning: warning,
-    info: info,
     inline: inlineLegend,
     legendWidth: legendWidth,
     legendAlign: legendAlign,
@@ -99,8 +98,6 @@ export const RadioButtonGroup = props => {
       labelSpacing,
       error: !!error,
       warning: !!warning,
-      info: !!info,
-      required,
       ...child.props
     });
   }))))) : /*#__PURE__*/React.createElement(TooltipProvider, {

package/esm/components/radio-button/radio-button.component.d.ts

@@ -15,9 +15,9 @@ export interface RadioButtonProps extends Omit<CommonCheckableInputProps, "requi
     onClick?: (ev: React.MouseEvent<HTMLInputElement>) => void;
     /** the value of the Radio Button, passed on form submit */
     value: string;
-    /** Overrides the default tooltip position */
+    /** [Legacy] Overrides the default tooltip position */
     tooltipPosition?: "top" | "bottom" | "left" | "right";
-    /** Aria label for rendered help component */
+    /** [Legacy] Aria label for rendered help component */
     helpAriaLabel?: string;
 }
 export declare const RadioButton: React.ForwardRefExoticComponent<RadioButtonProps & InternalRadioButtonProps & React.RefAttributes<HTMLInputElement>>;

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

@@ -52,23 +52,19 @@ const RadioButton = /*#__PURE__*/React.forwardRef(({
     event.target.focus();
   }, [onChange]);
   const validationProps = {
-    disabled,
-    inputWidth,
     error,
     warning,
     info
   };
   const commonProps = {
     ...validationProps,
+    disabled,
+    inputWidth,
     fieldHelpInline,
     labelSpacing
   };
   const inputProps = {
-    ...(validationRedesignOptIn ? {
-      ...validationProps
-    } : {
-      ...commonProps
-    }),
+    ...commonProps,
     autoFocus,
     checked,
     fieldHelp,
@@ -101,12 +97,7 @@ const RadioButton = /*#__PURE__*/React.forwardRef(({
     inline: inline,
     reverse: reverse,
     size: size
-  }, validationRedesignOptIn ? {
-    ...validationProps
-  } : {
-    ...commonProps,
-    fieldHelp
-  }, marginProps), /*#__PURE__*/React.createElement(CheckableInput, inputProps, /*#__PURE__*/React.createElement(RadioButtonSvg, null)));
+  }, commonProps, marginProps), /*#__PURE__*/React.createElement(CheckableInput, inputProps, /*#__PURE__*/React.createElement(RadioButtonSvg, null)));
   return /*#__PURE__*/React.createElement(React.Fragment, null, validationRedesignOptIn ? componentToRender : /*#__PURE__*/React.createElement(TooltipProvider, {
     helpAriaLabel: helpAriaLabel,
     tooltipPosition: tooltipPosition

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

@@ -58,7 +58,7 @@ export interface SearchProps extends ValidationProps, MarginProps {
     variant?: "default" | "dark";
     /** Input tabindex */
     tabIndex?: number;
-    /** Overrides the default tooltip position */
+    /** [Legacy] Overrides the default tooltip position */
     tooltipPosition?: "top" | "bottom" | "left" | "right";
 }
 export declare type SearchHandle = {

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/tile/tile.style.js

@@ -36,7 +36,7 @@ const getBorderRadius = roundness => {
       return "var(--borderRadius100)";
   }
 };
-const getHeighlightVariant = variant => {
+const getHighlightVariant = variant => {
   switch (variant) {
     case "success":
       return "var(--colorsSemanticPositive500)";
@@ -115,7 +115,7 @@ export const StyledHighlight = styled.div`
   position: relative;
   background: ${({
   variant
-}) => getHeighlightVariant(variant)};
+}) => getHighlightVariant(variant)};
   border-radius: ${({
   roundness
 }) => getBorderRadius(roundness)};

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

@@ -32,9 +32,9 @@ export interface ButtonProps extends SpaceProps, TagProps {
     href?: string;
     /** Defines an Icon position related to the children: "before" | "after" */
     iconPosition?: ButtonIconPosition;
-    /** Provides a tooltip message when the icon is hovered. */
+    /** [Legacy] Provides a tooltip message when the icon is hovered. */
     iconTooltipMessage?: string;
-    /** Provides positioning when the tooltip is displayed. */
+    /** [Legacy] Provides positioning when the tooltip is displayed. */
     iconTooltipPosition?: TooltipPositions;
     /** Defines an Icon type within the button */
     iconType?: IconType;

package/lib/components/checkbox/checkbox-group/checkbox-group.component.d.ts

@@ -5,8 +5,8 @@ export interface CheckboxGroupProps extends ValidationProps, MarginProps {
     /** The content for the CheckboxGroup Legend */
     legend?: string;
     /**
-     * The content for the CheckboxGroup Help tooltip,
-     * will be rendered as hint text when `validationRedesignOptIn` is true.
+     * The content for the CheckboxGroup hint text,
+     * will only be rendered when `validationRedesignOptIn` is true.
      */
     legendHelp?: string;
     /** [Legacy] When true, legend is placed inline with the checkboxes */
@@ -27,7 +27,7 @@ export interface CheckboxGroupProps extends ValidationProps, MarginProps {
     isOptional?: boolean;
     /** [Legacy] Overrides the default tooltip */
     tooltipPosition?: "top" | "bottom" | "left" | "right";
-    /** When true, Checkboxes are in line */
+    /** When true, Checkboxes are inline */
     inline?: boolean;
 }
 export declare const CheckboxGroup: {

package/lib/components/checkbox/checkbox-group/checkbox-group.component.js

@@ -49,7 +49,6 @@ const CheckboxGroup = props => {
     legendSpacing: legendSpacing,
     error: error,
     warning: warning,
-    info: info,
     isRequired: required,
     isOptional: isOptional
   }, (0, _tags.default)("checkboxgroup", props), {

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

@@ -12,13 +12,13 @@ export interface CheckboxProps extends CommonCheckableInputProps, MarginProps {
     "data-element"?: string;
     /** Identifier used for testing purposes, applied to the root element of the component. */
     "data-role"?: string;
-    /** Aria label for rendered help component */
+    /** [Legacy] Aria label for rendered help component */
     helpAriaLabel?: string;
     /** When true label is inline */
     labelInline?: boolean;
     /** Accepts a callback function which is triggered on click event */
     onClick?: (ev: React.MouseEvent<HTMLInputElement>) => void;
-    /** Overrides the default tooltip position */
+    /** [Legacy] Overrides the default tooltip position */
     tooltipPosition?: "top" | "bottom" | "left" | "right";
     /** The value of the checkbox, passed on form submit */
     value?: string;

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/icon/icon.component.d.ts

@@ -14,19 +14,19 @@ export interface IconProps extends Omit<StyledIconProps, "type">, MarginProps, O
     id?: string;
     /** The ARIA role to be applied to the Icon */
     role?: string;
-    /** The message to be displayed within the tooltip */
+    /** [Legacy] The message to be displayed within the tooltip */
     tooltipMessage?: React.ReactNode;
-    /** The position to display the tooltip */
+    /** [Legacy] The position to display the tooltip */
     tooltipPosition?: TooltipPositions;
-    /** Control whether the tooltip is visible */
+    /** [Legacy] Control whether the tooltip is visible */
     tooltipVisible?: boolean;
-    /** Override background color of the Tooltip, provide any color from palette or any valid css color value. */
+    /** [Legacy] Override background color of the Tooltip, provide any color from palette or any valid css color value. */
     tooltipBgColor?: string;
-    /** Override font color of the Tooltip, provide any color from palette or any valid css color value. */
+    /** [Legacy] Override font color of the Tooltip, provide any color from palette or any valid css color value. */
     tooltipFontColor?: string;
-    /** Overrides the default flip behaviour of the Tooltip */
+    /** [Legacy] Overrides the default flip behaviour of the Tooltip */
     tooltipFlipOverrides?: TooltipPositions[];
-    /** Id passed to the tooltip container, used for accessibility purposes */
+    /** [Legacy] Id passed to the tooltip container, used for accessibility purposes */
     tooltipId?: string;
     /**
      * Icon type

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

@@ -12,9 +12,9 @@ export interface LinkProps extends StyledLinkProps, React.AriaAttributes {
     onKeyDown?: (ev: React.KeyboardEvent<HTMLAnchorElement> | React.KeyboardEvent<HTMLButtonElement>) => void;
     /** Function called when a mouse down event triggers. */
     onMouseDown?: (ev: React.MouseEvent<HTMLAnchorElement> | React.MouseEvent<HTMLButtonElement>) => void;
-    /** A message to display as a tooltip to the link. */
+    /** [Legacy] A message to display as a tooltip to the link. */
     tooltipMessage?: string;
-    /** Positions the tooltip with the link. */
+    /** [Legacy] Positions the tooltip with the link. */
     tooltipPosition?: "bottom" | "left" | "right" | "top";
     /** Child content to render in the link. */
     children?: React.ReactNode;

package/lib/components/loader/loader-square.style.js

@@ -19,7 +19,7 @@ const loaderAnimation = (0, _styledComponents.keyframes)`
     transform: scale(1);
   }
 `;
-const getDimentions = (size, roundedCornersOptOut) => {
+const getDimensions = (size, roundedCornersOptOut) => {
   let width;
   let marginRight;
   switch (size) {
@@ -53,7 +53,7 @@ const StyledLoaderSquare = _styledComponents.default.div`
     animation: ${loaderAnimation} 1s infinite ease-in-out both;
     background-color: ${backgroundColor};
     display: inline-block;
-    ${getDimentions(size, theme.roundedCornersOptOut)}
+    ${getDimensions(size, theme.roundedCornersOptOut)}
 
     ${isInsideButton && (0, _styledComponents.css)`
       background-color: ${isActive ? "var(--colorsUtilityYang100)" : "var(--colorsSemanticNeutral500)"};

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/portrait/portrait.component.d.ts

@@ -24,21 +24,21 @@ export interface PortraitProps extends MarginProps {
     darkBackground?: boolean;
     /** Prop for `onClick` events. */
     onClick?: (ev: React.MouseEvent<HTMLElement>) => void;
-    /** The message to be displayed within the tooltip */
+    /** [Legacy] The message to be displayed within the tooltip */
     tooltipMessage?: React.ReactNode;
-    /** The id attribute to use for the tooltip */
+    /** [Legacy] The id attribute to use for the tooltip */
     tooltipId?: string;
-    /** Whether to to show the Tooltip */
+    /** [Legacy] Whether to to show the Tooltip */
     tooltipIsVisible?: boolean;
-    /** Sets position of the tooltip */
+    /** [Legacy] Sets position of the tooltip */
     tooltipPosition?: "top" | "bottom" | "left" | "right";
-    /** Defines the message type */
+    /** [Legacy] Defines the message type */
     tooltipType?: string;
-    /** Defines the size of the tooltip content */
+    /** [Legacy] Defines the size of the tooltip content */
     tooltipSize?: "medium" | "large";
-    /** Override background color of the Tooltip, provide any color from palette or any valid css color value. */
+    /** [Legacy] Override background color of the Tooltip, provide any color from palette or any valid css color value. */
     tooltipBgColor?: string;
-    /** Override font color of the Tooltip, provide any color from palette or any valid css color value. */
+    /** [Legacy] Override font color of the Tooltip, provide any color from palette or any valid css color value. */
     tooltipFontColor?: string;
 }
 declare const Portrait: ({ alt, name, darkBackground, gravatar, iconType, initials, shape, size, src, onClick, tooltipMessage, tooltipId, tooltipIsVisible, tooltipPosition, tooltipType, tooltipSize, tooltipBgColor, tooltipFontColor, ...rest }: PortraitProps) => React.JSX.Element;

package/lib/components/radio-button/radio-button-group/radio-button-group.component.d.ts

@@ -15,8 +15,8 @@ export interface RadioButtonGroupProps extends ValidationProps, MarginProps {
     /** The content for the RadioGroup Legend */
     legend?: string;
     /**
-     * The content for the RadioButtonGroup Legend Help tooltip,
-     * will be rendered as hint text when `validationRedesignOptIn` is true.
+     * The content for the RadioButtonGroup hint text,
+     * will only be rendered when `validationRedesignOptIn` is true.
      */
     legendHelp?: string;
     /** [Legacy] Text alignment of legend when inline */

package/lib/components/radio-button/radio-button-group/radio-button-group.component.js

@@ -70,7 +70,6 @@ const RadioButtonGroup = props => {
     legend: legend,
     error: error,
     warning: warning,
-    info: info,
     inline: inlineLegend,
     legendWidth: legendWidth,
     legendAlign: legendAlign,
@@ -108,8 +107,6 @@ const RadioButtonGroup = props => {
       labelSpacing,
       error: !!error,
       warning: !!warning,
-      info: !!info,
-      required,
       ...child.props
     });
   }))))) : /*#__PURE__*/_react.default.createElement(_tooltipProvider.TooltipProvider, {

package/lib/components/radio-button/radio-button.component.d.ts

@@ -15,9 +15,9 @@ export interface RadioButtonProps extends Omit<CommonCheckableInputProps, "requi
     onClick?: (ev: React.MouseEvent<HTMLInputElement>) => void;
     /** the value of the Radio Button, passed on form submit */
     value: string;
-    /** Overrides the default tooltip position */
+    /** [Legacy] Overrides the default tooltip position */
     tooltipPosition?: "top" | "bottom" | "left" | "right";
-    /** Aria label for rendered help component */
+    /** [Legacy] Aria label for rendered help component */
     helpAriaLabel?: string;
 }
 export declare const RadioButton: React.ForwardRefExoticComponent<RadioButtonProps & InternalRadioButtonProps & React.RefAttributes<HTMLInputElement>>;

package/lib/components/radio-button/radio-button.component.js

@@ -61,23 +61,19 @@ const RadioButton = exports.RadioButton = /*#__PURE__*/_react.default.forwardRef
     event.target.focus();
   }, [onChange]);
   const validationProps = {
-    disabled,
-    inputWidth,
     error,
     warning,
     info
   };
   const commonProps = {
     ...validationProps,
+    disabled,
+    inputWidth,
     fieldHelpInline,
     labelSpacing
   };
   const inputProps = {
-    ...(validationRedesignOptIn ? {
-      ...validationProps
-    } : {
-      ...commonProps
-    }),
+    ...commonProps,
     autoFocus,
     checked,
     fieldHelp,
@@ -110,12 +106,7 @@ const RadioButton = exports.RadioButton = /*#__PURE__*/_react.default.forwardRef
     inline: inline,
     reverse: reverse,
     size: size
-  }, validationRedesignOptIn ? {
-    ...validationProps
-  } : {
-    ...commonProps,
-    fieldHelp
-  }, marginProps), /*#__PURE__*/_react.default.createElement(_checkableInput.default, inputProps, /*#__PURE__*/_react.default.createElement(_radioButtonSvg.default, null)));
+  }, commonProps, marginProps), /*#__PURE__*/_react.default.createElement(_checkableInput.default, inputProps, /*#__PURE__*/_react.default.createElement(_radioButtonSvg.default, null)));
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, validationRedesignOptIn ? componentToRender : /*#__PURE__*/_react.default.createElement(_tooltipProvider.TooltipProvider, {
     helpAriaLabel: helpAriaLabel,
     tooltipPosition: tooltipPosition

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

@@ -58,7 +58,7 @@ export interface SearchProps extends ValidationProps, MarginProps {
     variant?: "default" | "dark";
     /** Input tabindex */
     tabIndex?: number;
-    /** Overrides the default tooltip position */
+    /** [Legacy] Overrides the default tooltip position */
     tooltipPosition?: "top" | "bottom" | "left" | "right";
 }
 export declare type SearchHandle = {

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/tile/tile.style.js

@@ -45,7 +45,7 @@ const getBorderRadius = roundness => {
       return "var(--borderRadius100)";
   }
 };
-const getHeighlightVariant = variant => {
+const getHighlightVariant = variant => {
   switch (variant) {
     case "success":
       return "var(--colorsSemanticPositive500)";
@@ -124,7 +124,7 @@ const StyledHighlight = exports.StyledHighlight = _styledComponents.default.div`
   position: relative;
   background: ${({
   variant
-}) => getHeighlightVariant(variant)};
+}) => getHighlightVariant(variant)};
   border-radius: ${({
   roundness
 }) => getBorderRadius(roundness)};

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.1",
   "description": "A library of reusable React components for easily building user interfaces.",
   "files": [
     "lib",