carbon-react 119.7.0 → 119.7.2

package/esm/__internal__/checkable-input/checkable-input.component.d.ts

@@ -4,6 +4,8 @@ import { ValidationProps } from "../validations";
 export interface CommonCheckableInputProps extends ValidationProps, CommonHiddenCheckableInputProps {
     /** If true, the component will be disabled */
     disabled?: boolean;
+    /** @private @ignore */
+    loading?: boolean;
     /** Help content to be displayed under an input */
     fieldHelp?: React.ReactNode;
     /**

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

@@ -14,6 +14,7 @@ const CheckableInput = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     checked,
     children,
     disabled,
+    loading,
     error,
     fieldHelp,
     fieldHelpInline,
@@ -57,6 +58,7 @@ const CheckableInput = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   const isRadio = type === "radio";
   const formFieldProps = {
     disabled,
+    loading,
     error,
     fieldHelp,
     fieldHelpInline,
@@ -217,6 +219,7 @@ CheckableInput.propTypes = {
   "labelWidth": PropTypes.number,
   "lang": PropTypes.string,
   "list": PropTypes.string,
+  "loading": PropTypes.bool,
   "max": PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   "maxLength": PropTypes.number,
   "min": PropTypes.oneOfType([PropTypes.number, PropTypes.string]),

package/esm/__internal__/form-field/form-field.component.d.ts

@@ -7,6 +7,8 @@ import { IconType } from "../../components/icon";
 interface CommonFormFieldProps extends MarginProps, ValidationProps {
     /** If true, the component will be disabled */
     disabled?: boolean;
+    /** @private @ignore */
+    loading?: boolean;
     /** Help content to be displayed under an input */
     fieldHelp?: React.ReactNode;
     /** The unique id of the Help component tooltip, used for accessibility */
@@ -59,7 +61,7 @@ export interface FormFieldProps extends CommonFormFieldProps, TagProps {
     useValidationIcon?: boolean;
 }
 declare const FormField: {
-    ({ children, "data-component": dataComponent, disabled, fieldHelp: fieldHelpContent, fieldHelpInline, error, warning, info, tooltipId, fieldHelpId, label, labelId, labelAlign, labelHelp, labelHelpIcon, labelInline, labelSpacing, labelWidth, labelAs, id, reverse, isOptional, useValidationIcon, adaptiveLabelBreakpoint, isRequired, validationIconId, validationRedesignOptIn, ...rest }: FormFieldProps): React.JSX.Element;
+    ({ children, "data-component": dataComponent, disabled, loading, fieldHelp: fieldHelpContent, fieldHelpInline, error, warning, info, tooltipId, fieldHelpId, label, labelId, labelAlign, labelHelp, labelHelpIcon, labelInline, labelSpacing, labelWidth, labelAs, id, reverse, isOptional, useValidationIcon, adaptiveLabelBreakpoint, isRequired, validationIconId, validationRedesignOptIn, ...rest }: FormFieldProps): React.JSX.Element;
     displayName: string;
 };
 export default FormField;

package/esm/__internal__/form-field/form-field.component.js

@@ -14,6 +14,7 @@ const FormField = _ref => {
     children,
     "data-component": dataComponent,
     disabled,
+    loading,
     fieldHelp: fieldHelpContent,
     fieldHelpInline,
     error,
@@ -46,7 +47,7 @@ const FormField = _ref => {
       warning: !!warning,
       info: !!info
     };
-    if (!disabled) return undefined;
+    if (!(disabled && !loading)) return undefined;
     return Object.keys(validationProps).find(propName => validationProps[propName]);
   }, [error, warning, info, disabled]);
   !(invalidValidationProp === undefined) ? process.env.NODE_ENV !== "production" ? invariant(false, `Prop \`${invalidValidationProp}\` cannot be used in conjunction with \`disabled\`. ` + "Use `readOnly` if you require users to see validations with a non-interactive field") : invariant(false) : void 0;

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

@@ -235,6 +235,7 @@ Checkbox.propTypes = {
   "labelWidth": PropTypes.number,
   "lang": PropTypes.string,
   "list": PropTypes.string,
+  "loading": PropTypes.bool,
   "m": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
     "__@toStringTag": PropTypes.string.isRequired,
     "description": PropTypes.string,

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

@@ -1,5 +1,5 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-import React, { useRef, useEffect, useLayoutEffect, useCallback, useContext } from "react";
+import React, { useRef, useEffect, useLayoutEffect, useCallback } from "react";
 import PropTypes from "prop-types";
 import createGuid from "../../__internal__/utils/helpers/guid";
 import Modal from "../modal";
@@ -12,7 +12,7 @@ import IconButton from "../icon-button";
 import Icon from "../icon";
 import useLocale from "../../hooks/__internal__/useLocale";
 import useIsStickyFooterForm from "../../hooks/__internal__/useIsStickyFooterForm";
-import TopModalContext from "../carbon-provider/top-modal-context";
+import useModalAria from "../../hooks/__internal__/useModalAria/useModalAria";
 const PADDING_VALUES = [0, 1, 2, 3, 4, 5, 6, 7, 8];
 export const Dialog = _ref => {
   let {
@@ -49,9 +49,7 @@ export const Dialog = _ref => {
     current: subtitleId
   } = useRef(createGuid());
   const hasStickyFooter = useIsStickyFooterForm(children);
-  const {
-    topModal
-  } = useContext(TopModalContext);
+  const isTopModal = useModalAria(dialogRef);
   const centerDialog = useCallback(() => {
     /* istanbul ignore if */
     if (!dialogRef.current) {
@@ -162,7 +160,7 @@ export const Dialog = _ref => {
     isOpen: open,
     additionalWrapperRefs: focusableContainers
   }, /*#__PURE__*/React.createElement(StyledDialog, _extends({
-    "aria-modal": topModal?.contains(dialogRef.current) ? true : undefined,
+    "aria-modal": isTopModal ? true : undefined,
     ref: dialogRef,
     topMargin: TOP_MARGIN
   }, dialogProps, {

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

@@ -1,5 +1,5 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-import React, { useRef, useContext } from "react";
+import React, { useRef } from "react";
 import PropTypes from "prop-types";
 import createGuid from "../../__internal__/utils/helpers/guid";
 import Modal from "../modal";
@@ -12,7 +12,7 @@ import IconButton from "../icon-button";
 import Icon from "../icon";
 import useLocale from "../../hooks/__internal__/useLocale";
 import useIsStickyFooterForm from "../../hooks/__internal__/useIsStickyFooterForm";
-import TopModalContext from "../carbon-provider/top-modal-context";
+import useModalAria from "../../hooks/__internal__/useModalAria/useModalAria";
 export const DialogFullScreen = _ref => {
   let {
     "aria-describedby": ariaDescribedBy,
@@ -48,9 +48,7 @@ export const DialogFullScreen = _ref => {
     current: subtitleId
   } = useRef(createGuid());
   const hasStickyFooter = useIsStickyFooterForm(children);
-  const {
-    topModal
-  } = useContext(TopModalContext);
+  const isTopModal = useModalAria(dialogRef);
   const closeIcon = () => {
     if (!showCloseIcon || !onCancel) return null;
     return /*#__PURE__*/React.createElement(IconButton, {
@@ -96,7 +94,7 @@ export const DialogFullScreen = _ref => {
     additionalWrapperRefs: focusableContainers,
     focusableSelectors: focusableSelectors
   }, /*#__PURE__*/React.createElement(StyledDialogFullScreen, _extends({
-    "aria-modal": role === "dialog" && topModal?.contains(dialogRef.current) ? true : undefined
+    "aria-modal": role === "dialog" && isTopModal ? true : undefined
   }, ariaProps, {
     ref: dialogRef,
     "data-element": "dialog-full-screen",

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

@@ -240,6 +240,7 @@ RadioButton.propTypes = {
   "labelWidth": PropTypes.number,
   "lang": PropTypes.string,
   "list": PropTypes.string,
+  "loading": PropTypes.bool,
   "m": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
     "__@toStringTag": PropTypes.string.isRequired,
     "description": PropTypes.string,

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

@@ -1,5 +1,5 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-import React, { useCallback, useContext, useRef } from "react";
+import React, { useCallback, useRef } from "react";
 import PropTypes from "prop-types";
 import Modal from "../modal";
 import StyledSidebar from "./sidebar.style";
@@ -12,7 +12,7 @@ import createGuid from "../../__internal__/utils/helpers/guid";
 import useLocale from "../../hooks/__internal__/useLocale";
 import { filterStyledSystemPaddingProps } from "../../style/utils";
 import useIsStickyFooterForm from "../../hooks/__internal__/useIsStickyFooterForm";
-import TopModalContext from "../carbon-provider/top-modal-context";
+import useModalAria from "../../hooks/__internal__/useModalAria/useModalAria";
 
 // TODO FE-5408 will investigate why React.RefObject<T> produces a failed prop type when current = null
 
@@ -52,9 +52,7 @@ const Sidebar = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     if (typeof ref === "object") ref.current = reference;
     if (typeof ref === "function") ref(reference);
   }, [ref]);
-  const {
-    topModal
-  } = useContext(TopModalContext);
+  const isTopModal = useModalAria(sidebarRef);
   const closeIcon = () => {
     if (!onCancel) return null;
     return /*#__PURE__*/React.createElement(IconButton, {
@@ -71,7 +69,7 @@ const Sidebar = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     "data-role": rest["data-role"]
   };
   const sidebar = /*#__PURE__*/React.createElement(StyledSidebar, _extends({
-    "aria-modal": !enableBackgroundUI && topModal?.contains(sidebarRef.current),
+    "aria-modal": !enableBackgroundUI && isTopModal,
     "aria-describedby": ariaDescribedBy,
     "aria-label": ariaLabel,
     "aria-labelledby": !ariaLabelledBy && !ariaLabel ? headerId : ariaLabelledBy,

package/esm/components/switch/switch.component.js

@@ -99,6 +99,7 @@ const Switch = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     warning,
     info,
     disabled: disabled || loading,
+    loading,
     checked: isControlled ? checked : checkedInternal,
     label,
     labelHelp,
@@ -143,6 +144,7 @@ const Switch = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     error,
     warning,
     disabled: disabled || loading,
+    loading,
     checked: isControlled ? checked : checkedInternal,
     onBlur,
     onFocus,

package/esm/components/toast/toast.component.js

@@ -58,8 +58,11 @@ const Toast = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   useEffect(() => {
     if (!disableAutoFocus) {
       if (open) {
-        focusedElementBeforeOpening.current = document.activeElement;
-        toastContentNodeRef.current?.focus();
+        // setTimeout needed as otherwise this runs before the ref is populated
+        setTimeout(() => {
+          focusedElementBeforeOpening.current = document.activeElement;
+          toastContentNodeRef.current?.focus();
+        }, 0);
       } else if (focusedElementBeforeOpening.current) {
         focusedElementBeforeOpening.current.focus();
         focusedElementBeforeOpening.current = null;

package/esm/hooks/__internal__/useModalAria/index.d.ts

@@ -0,0 +1 @@
+export { default } from "./useModalAria";

package/esm/hooks/__internal__/useModalAria/index.js

@@ -0,0 +1 @@
+export { default } from "./useModalAria";

package/esm/hooks/__internal__/useModalAria/useModalAria.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export default function useModalAria(containerRef: React.RefObject<HTMLDivElement>): boolean | undefined;

package/esm/hooks/__internal__/useModalAria/useModalAria.js

@@ -0,0 +1,45 @@
+import { useContext, useEffect } from "react";
+import TopModalContext from "../../../components/carbon-provider/top-modal-context";
+export default function useModalAria(containerRef) {
+  const {
+    topModal
+  } = useContext(TopModalContext);
+  const isTopModal = topModal?.contains(containerRef.current);
+  useEffect(() => {
+    const originalValues = [];
+    const hideNonTopModalElements = rootElement => {
+      if (!rootElement.contains(topModal)) {
+        originalValues.push({
+          element: rootElement,
+          "aria-hidden": rootElement.getAttribute("aria-hidden"),
+          inert: rootElement.getAttribute("inert")
+        });
+        rootElement.setAttribute("aria-hidden", "true");
+        rootElement.setAttribute("inert", "");
+      } else if (rootElement !== topModal) {
+        Array.from(rootElement.children).forEach(hideNonTopModalElements);
+      }
+    };
+    if (isTopModal) {
+      hideNonTopModalElements(document.body);
+    }
+    return () => originalValues.forEach(_ref => {
+      let {
+        element,
+        "aria-hidden": ariaHidden,
+        inert
+      } = _ref;
+      if (ariaHidden === null) {
+        element.removeAttribute("aria-hidden");
+      } else {
+        element.setAttribute("aria-hidden", ariaHidden);
+      }
+      if (inert === null) {
+        element.removeAttribute("inert");
+      } else {
+        element.setAttribute("inert", inert);
+      }
+    });
+  }, [topModal, isTopModal]);
+  return isTopModal;
+}

package/lib/__internal__/checkable-input/checkable-input.component.d.ts

@@ -4,6 +4,8 @@ import { ValidationProps } from "../validations";
 export interface CommonCheckableInputProps extends ValidationProps, CommonHiddenCheckableInputProps {
     /** If true, the component will be disabled */
     disabled?: boolean;
+    /** @private @ignore */
+    loading?: boolean;
     /** Help content to be displayed under an input */
     fieldHelp?: React.ReactNode;
     /**

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

@@ -23,6 +23,7 @@ const CheckableInput = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     checked,
     children,
     disabled,
+    loading,
     error,
     fieldHelp,
     fieldHelpInline,
@@ -66,6 +67,7 @@ const CheckableInput = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   const isRadio = type === "radio";
   const formFieldProps = {
     disabled,
+    loading,
     error,
     fieldHelp,
     fieldHelpInline,
@@ -226,6 +228,7 @@ CheckableInput.propTypes = {
   "labelWidth": _propTypes.default.number,
   "lang": _propTypes.default.string,
   "list": _propTypes.default.string,
+  "loading": _propTypes.default.bool,
   "max": _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
   "maxLength": _propTypes.default.number,
   "min": _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),

package/lib/__internal__/form-field/form-field.component.d.ts

@@ -7,6 +7,8 @@ import { IconType } from "../../components/icon";
 interface CommonFormFieldProps extends MarginProps, ValidationProps {
     /** If true, the component will be disabled */
     disabled?: boolean;
+    /** @private @ignore */
+    loading?: boolean;
     /** Help content to be displayed under an input */
     fieldHelp?: React.ReactNode;
     /** The unique id of the Help component tooltip, used for accessibility */
@@ -59,7 +61,7 @@ export interface FormFieldProps extends CommonFormFieldProps, TagProps {
     useValidationIcon?: boolean;
 }
 declare const FormField: {
-    ({ children, "data-component": dataComponent, disabled, fieldHelp: fieldHelpContent, fieldHelpInline, error, warning, info, tooltipId, fieldHelpId, label, labelId, labelAlign, labelHelp, labelHelpIcon, labelInline, labelSpacing, labelWidth, labelAs, id, reverse, isOptional, useValidationIcon, adaptiveLabelBreakpoint, isRequired, validationIconId, validationRedesignOptIn, ...rest }: FormFieldProps): React.JSX.Element;
+    ({ children, "data-component": dataComponent, disabled, loading, fieldHelp: fieldHelpContent, fieldHelpInline, error, warning, info, tooltipId, fieldHelpId, label, labelId, labelAlign, labelHelp, labelHelpIcon, labelInline, labelSpacing, labelWidth, labelAs, id, reverse, isOptional, useValidationIcon, adaptiveLabelBreakpoint, isRequired, validationIconId, validationRedesignOptIn, ...rest }: FormFieldProps): React.JSX.Element;
     displayName: string;
 };
 export default FormField;

package/lib/__internal__/form-field/form-field.component.js

@@ -23,6 +23,7 @@ const FormField = _ref => {
     children,
     "data-component": dataComponent,
     disabled,
+    loading,
     fieldHelp: fieldHelpContent,
     fieldHelpInline,
     error,
@@ -55,7 +56,7 @@ const FormField = _ref => {
       warning: !!warning,
       info: !!info
     };
-    if (!disabled) return undefined;
+    if (!(disabled && !loading)) return undefined;
     return Object.keys(validationProps).find(propName => validationProps[propName]);
   }, [error, warning, info, disabled]);
   !(invalidValidationProp === undefined) ? process.env.NODE_ENV !== "production" ? (0, _invariant.default)(false, `Prop \`${invalidValidationProp}\` cannot be used in conjunction with \`disabled\`. ` + "Use `readOnly` if you require users to see validations with a non-interactive field") : (0, _invariant.default)(false) : void 0;

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

@@ -245,6 +245,7 @@ Checkbox.propTypes = {
   "labelWidth": _propTypes.default.number,
   "lang": _propTypes.default.string,
   "list": _propTypes.default.string,
+  "loading": _propTypes.default.bool,
   "m": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
     "__@toStringTag": _propTypes.default.string.isRequired,
     "description": _propTypes.default.string,

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

@@ -17,7 +17,7 @@ var _iconButton = _interopRequireDefault(require("../icon-button"));
 var _icon = _interopRequireDefault(require("../icon"));
 var _useLocale = _interopRequireDefault(require("../../hooks/__internal__/useLocale"));
 var _useIsStickyFooterForm = _interopRequireDefault(require("../../hooks/__internal__/useIsStickyFooterForm"));
-var _topModalContext = _interopRequireDefault(require("../carbon-provider/top-modal-context"));
+var _useModalAria = _interopRequireDefault(require("../../hooks/__internal__/useModalAria/useModalAria"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -58,9 +58,7 @@ const Dialog = _ref => {
     current: subtitleId
   } = (0, _react.useRef)((0, _guid.default)());
   const hasStickyFooter = (0, _useIsStickyFooterForm.default)(children);
-  const {
-    topModal
-  } = (0, _react.useContext)(_topModalContext.default);
+  const isTopModal = (0, _useModalAria.default)(dialogRef);
   const centerDialog = (0, _react.useCallback)(() => {
     /* istanbul ignore if */
     if (!dialogRef.current) {
@@ -171,7 +169,7 @@ const Dialog = _ref => {
     isOpen: open,
     additionalWrapperRefs: focusableContainers
   }, /*#__PURE__*/_react.default.createElement(_dialog.StyledDialog, _extends({
-    "aria-modal": topModal?.contains(dialogRef.current) ? true : undefined,
+    "aria-modal": isTopModal ? true : undefined,
     ref: dialogRef,
     topMargin: _dialog2.TOP_MARGIN
   }, dialogProps, {

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

@@ -17,7 +17,7 @@ var _iconButton = _interopRequireDefault(require("../icon-button"));
 var _icon = _interopRequireDefault(require("../icon"));
 var _useLocale = _interopRequireDefault(require("../../hooks/__internal__/useLocale"));
 var _useIsStickyFooterForm = _interopRequireDefault(require("../../hooks/__internal__/useIsStickyFooterForm"));
-var _topModalContext = _interopRequireDefault(require("../carbon-provider/top-modal-context"));
+var _useModalAria = _interopRequireDefault(require("../../hooks/__internal__/useModalAria/useModalAria"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -57,9 +57,7 @@ const DialogFullScreen = _ref => {
     current: subtitleId
   } = (0, _react.useRef)((0, _guid.default)());
   const hasStickyFooter = (0, _useIsStickyFooterForm.default)(children);
-  const {
-    topModal
-  } = (0, _react.useContext)(_topModalContext.default);
+  const isTopModal = (0, _useModalAria.default)(dialogRef);
   const closeIcon = () => {
     if (!showCloseIcon || !onCancel) return null;
     return /*#__PURE__*/_react.default.createElement(_iconButton.default, {
@@ -105,7 +103,7 @@ const DialogFullScreen = _ref => {
     additionalWrapperRefs: focusableContainers,
     focusableSelectors: focusableSelectors
   }, /*#__PURE__*/_react.default.createElement(_dialogFullScreen.default, _extends({
-    "aria-modal": role === "dialog" && topModal?.contains(dialogRef.current) ? true : undefined
+    "aria-modal": role === "dialog" && isTopModal ? true : undefined
   }, ariaProps, {
     ref: dialogRef,
     "data-element": "dialog-full-screen",

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

@@ -250,6 +250,7 @@ RadioButton.propTypes = {
   "labelWidth": _propTypes.default.number,
   "lang": _propTypes.default.string,
   "list": _propTypes.default.string,
+  "loading": _propTypes.default.bool,
   "m": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
     "__@toStringTag": _propTypes.default.string.isRequired,
     "description": _propTypes.default.string,

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

@@ -17,7 +17,7 @@ var _guid = _interopRequireDefault(require("../../__internal__/utils/helpers/gui
 var _useLocale = _interopRequireDefault(require("../../hooks/__internal__/useLocale"));
 var _utils = require("../../style/utils");
 var _useIsStickyFooterForm = _interopRequireDefault(require("../../hooks/__internal__/useIsStickyFooterForm"));
-var _topModalContext = _interopRequireDefault(require("../carbon-provider/top-modal-context"));
+var _useModalAria = _interopRequireDefault(require("../../hooks/__internal__/useModalAria/useModalAria"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -61,9 +61,7 @@ const Sidebar = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     if (typeof ref === "object") ref.current = reference;
     if (typeof ref === "function") ref(reference);
   }, [ref]);
-  const {
-    topModal
-  } = (0, _react.useContext)(_topModalContext.default);
+  const isTopModal = (0, _useModalAria.default)(sidebarRef);
   const closeIcon = () => {
     if (!onCancel) return null;
     return /*#__PURE__*/_react.default.createElement(_iconButton.default, {
@@ -80,7 +78,7 @@ const Sidebar = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     "data-role": rest["data-role"]
   };
   const sidebar = /*#__PURE__*/_react.default.createElement(_sidebar.default, _extends({
-    "aria-modal": !enableBackgroundUI && topModal?.contains(sidebarRef.current),
+    "aria-modal": !enableBackgroundUI && isTopModal,
     "aria-describedby": ariaDescribedBy,
     "aria-label": ariaLabel,
     "aria-labelledby": !ariaLabelledBy && !ariaLabel ? headerId : ariaLabelledBy,

package/lib/components/switch/switch.component.js

@@ -108,6 +108,7 @@ const Switch = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     warning,
     info,
     disabled: disabled || loading,
+    loading,
     checked: isControlled ? checked : checkedInternal,
     label,
     labelHelp,
@@ -152,6 +153,7 @@ const Switch = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     error,
     warning,
     disabled: disabled || loading,
+    loading,
     checked: isControlled ? checked : checkedInternal,
     onBlur,
     onFocus,

package/lib/components/toast/toast.component.js

@@ -67,8 +67,11 @@ const Toast = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   (0, _react.useEffect)(() => {
     if (!disableAutoFocus) {
       if (open) {
-        focusedElementBeforeOpening.current = document.activeElement;
-        toastContentNodeRef.current?.focus();
+        // setTimeout needed as otherwise this runs before the ref is populated
+        setTimeout(() => {
+          focusedElementBeforeOpening.current = document.activeElement;
+          toastContentNodeRef.current?.focus();
+        }, 0);
       } else if (focusedElementBeforeOpening.current) {
         focusedElementBeforeOpening.current.focus();
         focusedElementBeforeOpening.current = null;

package/lib/hooks/__internal__/useModalAria/index.d.ts

@@ -0,0 +1 @@
+export { default } from "./useModalAria";

package/lib/hooks/__internal__/useModalAria/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _useModalAria.default;
+  }
+});
+var _useModalAria = _interopRequireDefault(require("./useModalAria"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/hooks/__internal__/useModalAria/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "../../../../esm/hooks/__internal__/useModalAria/index.js",
+  "main": "./index.js",
+  "types": "./index.d.ts"
+}

package/lib/hooks/__internal__/useModalAria/useModalAria.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export default function useModalAria(containerRef: React.RefObject<HTMLDivElement>): boolean | undefined;

package/lib/hooks/__internal__/useModalAria/useModalAria.js

@@ -0,0 +1,52 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useModalAria;
+var _react = require("react");
+var _topModalContext = _interopRequireDefault(require("../../../components/carbon-provider/top-modal-context"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function useModalAria(containerRef) {
+  const {
+    topModal
+  } = (0, _react.useContext)(_topModalContext.default);
+  const isTopModal = topModal?.contains(containerRef.current);
+  (0, _react.useEffect)(() => {
+    const originalValues = [];
+    const hideNonTopModalElements = rootElement => {
+      if (!rootElement.contains(topModal)) {
+        originalValues.push({
+          element: rootElement,
+          "aria-hidden": rootElement.getAttribute("aria-hidden"),
+          inert: rootElement.getAttribute("inert")
+        });
+        rootElement.setAttribute("aria-hidden", "true");
+        rootElement.setAttribute("inert", "");
+      } else if (rootElement !== topModal) {
+        Array.from(rootElement.children).forEach(hideNonTopModalElements);
+      }
+    };
+    if (isTopModal) {
+      hideNonTopModalElements(document.body);
+    }
+    return () => originalValues.forEach(_ref => {
+      let {
+        element,
+        "aria-hidden": ariaHidden,
+        inert
+      } = _ref;
+      if (ariaHidden === null) {
+        element.removeAttribute("aria-hidden");
+      } else {
+        element.setAttribute("aria-hidden", ariaHidden);
+      }
+      if (inert === null) {
+        element.removeAttribute("inert");
+      } else {
+        element.setAttribute("inert", inert);
+      }
+    });
+  }, [topModal, isTopModal]);
+  return isTopModal;
+}

package/package.json

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