carbon-react 125.12.2 → 126.0.0

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

@@ -43,8 +43,6 @@ export interface CheckableInputProps extends CommonCheckableInputProps {
     type: string;
     /** Value passed to the input */
     value?: string;
-    /** Text alignment of the label */
-    labelAlign?: "left" | "right";
     /** When true label is inline */
     labelInline?: boolean;
 }

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

@@ -23,7 +23,6 @@ const CheckableInput = /*#__PURE__*/React.forwardRef(({
   value,
   inputWidth,
   label,
-  labelAlign,
   labelHelp,
   labelInline = true,
   labelSpacing = 1,
@@ -65,7 +64,6 @@ const CheckableInput = /*#__PURE__*/React.forwardRef(({
     id,
     info,
     label,
-    labelAlign,
     labelHelp,
     labelHelpIcon: "info",
     labelId,
@@ -210,7 +208,6 @@ CheckableInput.propTypes = {
   "itemScope": PropTypes.bool,
   "itemType": PropTypes.string,
   "label": PropTypes.node,
-  "labelAlign": PropTypes.oneOf(["left", "right"]),
   "labelHelp": PropTypes.node,
   "labelInline": PropTypes.bool,
   "labelSpacing": PropTypes.oneOf([1, 2]),

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

@@ -34,8 +34,6 @@ export interface ButtonToggleGroupProps extends MarginProps, TagProps {
     labelWidth?: number;
     /** If true all ButtonToggle children will flex to the full width of the ButtonToggleGroup parent */
     fullWidth?: boolean;
-    /** The alignment for the text in the label. */
-    labelAlign?: "left" | "right";
     /** Callback triggered by pressing one of the child buttons. Use with controlled components to set the value prop to the value argument */
     onChange?: (ev: React.MouseEvent<HTMLButtonElement>, value?: string, name?: string) => void;
     /** Determines which child button is selected when the component is used as a controlled component */
@@ -63,7 +61,7 @@ declare type ButtonToggleGroupContextType = {
 };
 export declare const ButtonToggleGroupContext: React.Context<ButtonToggleGroupContextType>;
 declare const ButtonToggleGroup: {
-    ({ children, fieldHelp, fieldHelpInline, "aria-label": ariaLabel, label, labelHelp, labelSpacing, inputWidth, fullWidth, labelInline, labelWidth, labelAlign, name, onChange, value, "data-component": dataComponent, "data-element": dataElement, "data-role": dataRole, helpAriaLabel, id, allowDeselect, className, ...props }: ButtonToggleGroupProps): React.JSX.Element;
+    ({ children, fieldHelp, fieldHelpInline, "aria-label": ariaLabel, label, labelHelp, labelSpacing, inputWidth, fullWidth, labelInline, labelWidth, name, onChange, value, "data-component": dataComponent, "data-element": dataElement, "data-role": dataRole, helpAriaLabel, id, allowDeselect, className, ...props }: ButtonToggleGroupProps): React.JSX.Element;
     displayName: string;
 };
 export default ButtonToggleGroup;

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

@@ -32,7 +32,6 @@ const ButtonToggleGroup = ({
   fullWidth,
   labelInline,
   labelWidth,
-  labelAlign,
   name,
   onChange,
   value,
@@ -119,7 +118,6 @@ const ButtonToggleGroup = ({
     fieldHelpInline: fieldHelpInline,
     labelInline: labelInline,
     labelWidth: labelWidth,
-    labelAlign: labelAlign,
     labelId: labelId.current,
     "data-component": dataComponent,
     "data-role": dataRole,

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

@@ -14,8 +14,6 @@ export interface CheckboxProps extends CommonCheckableInputProps, MarginProps {
     "data-role"?: string;
     /** Aria label for rendered help component */
     helpAriaLabel?: string;
-    /** Text alignment of the label */
-    labelAlign?: "left" | "right";
     /** When true label is inline */
     labelInline?: boolean;
     /** Accepts a callback function which is triggered on click event */

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

@@ -230,7 +230,6 @@ Checkbox.propTypes = {
   "itemScope": PropTypes.bool,
   "itemType": PropTypes.string,
   "label": PropTypes.node,
-  "labelAlign": PropTypes.oneOf(["left", "right"]),
   "labelHelp": PropTypes.node,
   "labelInline": PropTypes.bool,
   "labelSpacing": PropTypes.oneOf([1, 2]),

package/esm/components/portal/portal.d.ts

@@ -12,6 +12,12 @@ export interface PortalProps {
     id?: string;
     /** Callback function triggered when parent element is scrolled or window resized. */
     onReposition?: () => void;
+    /** A flag to ensure the portal content will remain interactive with by both mouse
+     * users and screenreader users, even if a modal is opened outside of or on top of
+     * the portal.
+     * To be used with caution.
+     */
+    inertOptOut?: boolean;
 }
-declare const Portal: ({ children, className, id, onReposition }: PortalProps) => React.JSX.Element;
+declare const Portal: ({ children, className, id, onReposition, inertOptOut, }: PortalProps) => React.JSX.Element;
 export default Portal;

package/esm/components/portal/portal.js

@@ -1,14 +1,26 @@
 import React, { useContext, useEffect, useMemo, useState } from "react";
 import ReactDOM from "react-dom";
+import styled, { css } from "styled-components";
 import guid from "../../__internal__/utils/helpers/guid";
 import CarbonScopedTokensProvider from "../../style/design-tokens/carbon-scoped-tokens-provider/carbon-scoped-tokens-provider.component";
 import StyledPortalEntrance from "./portal.style";
 export const PortalContext = /*#__PURE__*/React.createContext({});
+const Container = styled.div`
+  ${({
+  theme
+}) => css`
+     {
+      position: relative;
+      z-index: ${theme.zIndex.aboveAll};
+    }
+  `}
+`;
 const Portal = ({
   children,
   className,
   id,
-  onReposition
+  onReposition,
+  inertOptOut
 }) => {
   const [portalNode, setPortalNode] = useState(null);
   const uniqueId = useMemo(() => guid(), []);
@@ -51,6 +63,9 @@ const Portal = ({
       if (id !== undefined) {
         node.setAttribute("id", id);
       }
+      if (inertOptOut) {
+        node.setAttribute("data-not-inert", "true");
+      }
       setPortalNode(node);
       let mainNode = document.body;
       const rootDiv = document.getElementById("root");
@@ -64,8 +79,9 @@ const Portal = ({
     }
     return node;
   };
+  const portalContent = inertOptOut ? /*#__PURE__*/React.createElement(Container, null, children) : children;
   return /*#__PURE__*/React.createElement(StyledPortalEntrance, {
     "data-portal-entrance": uniqueId
-  }, /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React.createElement(CarbonScopedTokensProvider, null, children), getPortalContainer()));
+  }, /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React.createElement(CarbonScopedTokensProvider, null, portalContent), getPortalContainer()));
 };
 export default Portal;

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

@@ -12,8 +12,6 @@ export interface RadioButtonProps extends CommonCheckableInputProps, MarginProps
     "data-element"?: string;
     /** Identifier used for testing purposes, applied to the root element of the component. */
     "data-role"?: string;
-    /** Text alignment of the label */
-    labelAlign?: "left" | "right";
     /** Accepts a callback function which is triggered on click event */
     onClick?: (ev: React.MouseEvent<HTMLInputElement>) => void;
     /** the value of the Radio Button, passed on form submit */

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

@@ -21,7 +21,6 @@ const RadioButton = /*#__PURE__*/React.forwardRef(({
   inputWidth,
   label,
   labelHelp,
-  labelAlign,
   labelSpacing = 1,
   labelWidth,
   name,
@@ -85,7 +84,6 @@ const RadioButton = /*#__PURE__*/React.forwardRef(({
     onChange: handleChange,
     onBlur,
     onFocus,
-    labelAlign,
     labelInline: true,
     labelWidth,
     label,
@@ -232,7 +230,6 @@ RadioButton.propTypes = {
   "itemScope": PropTypes.bool,
   "itemType": PropTypes.string,
   "label": PropTypes.node,
-  "labelAlign": PropTypes.oneOf(["left", "right"]),
   "labelHelp": PropTypes.node,
   "labelSpacing": PropTypes.oneOf([1, 2]),
   "labelWidth": PropTypes.number,

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

@@ -12,8 +12,6 @@ export interface SwitchProps extends CommonCheckableInputProps, MarginProps {
     adaptiveLabelBreakpoint?: number;
     /** Set the default value of the Switch if component is meant to be used as uncontrolled */
     defaultChecked?: boolean;
-    /** Text alignment of the label */
-    labelAlign?: "left" | "right";
     /** When true label is inline */
     labelInline?: boolean;
     /** Triggers loading animation */

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

@@ -280,7 +280,6 @@ Switch.propTypes = {
   "itemScope": PropTypes.bool,
   "itemType": PropTypes.string,
   "label": PropTypes.node,
-  "labelAlign": PropTypes.oneOf(["left", "right"]),
   "labelHelp": PropTypes.node,
   "labelInline": PropTypes.bool,
   "labelSpacing": PropTypes.oneOf([1, 2]),

package/esm/components/time/__internal__/time-toggle/time-toggle.style.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 declare const _default: import("styled-components").StyledComponent<{
-    ({ children, fieldHelp, fieldHelpInline, "aria-label": ariaLabel, label, labelHelp, labelSpacing, inputWidth, fullWidth, labelInline, labelWidth, labelAlign, name, onChange, value, "data-component": dataComponent, "data-element": dataElement, "data-role": dataRole, helpAriaLabel, id, allowDeselect, className, ...props }: import("../../../button-toggle").ButtonToggleGroupProps): import("react").JSX.Element;
+    ({ children, fieldHelp, fieldHelpInline, "aria-label": ariaLabel, label, labelHelp, labelSpacing, inputWidth, fullWidth, labelInline, labelWidth, name, onChange, value, "data-component": dataComponent, "data-element": dataElement, "data-role": dataRole, helpAriaLabel, id, allowDeselect, className, ...props }: import("../../../button-toggle").ButtonToggleGroupProps): import("react").JSX.Element;
     displayName: string;
 }, any, {
     disabled?: boolean | undefined;

package/esm/components/toast/toast.style.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import TypeIcon from "../message/type-icon/type-icon.style";
 import { MessageVariant } from "../message/message.component";
-declare const StyledPortal: import("styled-components").StyledComponent<({ children, className, id, onReposition }: import("../portal/portal").PortalProps) => import("react").JSX.Element, any, {
+declare const StyledPortal: import("styled-components").StyledComponent<({ children, className, id, onReposition, inertOptOut, }: import("../portal/portal").PortalProps) => import("react").JSX.Element, any, {
     align?: "left" | "right" | "center" | undefined;
     alignY?: "bottom" | "top" | "center" | undefined;
     isCenter?: boolean | undefined;

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

@@ -8,6 +8,10 @@ export default function useModalAria(containerRef) {
   useEffect(() => {
     const originalValues = [];
     const hideNonTopModalElements = rootElement => {
+      if (rootElement.dataset.notInert === "true") {
+        // stop recursing, and do nothing, if the container has the "data-not-inert" flag
+        return;
+      }
       if (!rootElement.contains(topModal)) {
         originalValues.push({
           element: rootElement,
@@ -17,13 +21,18 @@ export default function useModalAria(containerRef) {
         // need to manually call the blur event on any currently-focused element that might be inside the element
         // we're making inert, since Firefox fails to do this, which can result in the focus styles remaining on
         // an input that is no longer focused
-        if (rootElement.contains(document.activeElement)) {
-          document.activeElement?.blur();
+        if (rootElement.contains(document.activeElement) && document.activeElement instanceof HTMLElement) {
+          document.activeElement.blur();
         }
         rootElement.setAttribute("aria-hidden", "true");
         rootElement.setAttribute("inert", "");
       } else if (rootElement !== topModal) {
-        Array.from(rootElement.children).forEach(hideNonTopModalElements);
+        Array.from(rootElement.children).forEach(node => {
+          // istanbul ignore else
+          if (node instanceof HTMLElement) {
+            hideNonTopModalElements(node);
+          }
+        });
       }
     };
     if (isTopModal) {

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

@@ -43,8 +43,6 @@ export interface CheckableInputProps extends CommonCheckableInputProps {
     type: string;
     /** Value passed to the input */
     value?: string;
-    /** Text alignment of the label */
-    labelAlign?: "left" | "right";
     /** When true label is inline */
     labelInline?: boolean;
 }

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

@@ -32,7 +32,6 @@ const CheckableInput = /*#__PURE__*/_react.default.forwardRef(({
   value,
   inputWidth,
   label,
-  labelAlign,
   labelHelp,
   labelInline = true,
   labelSpacing = 1,
@@ -74,7 +73,6 @@ const CheckableInput = /*#__PURE__*/_react.default.forwardRef(({
     id,
     info,
     label,
-    labelAlign,
     labelHelp,
     labelHelpIcon: "info",
     labelId,
@@ -219,7 +217,6 @@ CheckableInput.propTypes = {
   "itemScope": _propTypes.default.bool,
   "itemType": _propTypes.default.string,
   "label": _propTypes.default.node,
-  "labelAlign": _propTypes.default.oneOf(["left", "right"]),
   "labelHelp": _propTypes.default.node,
   "labelInline": _propTypes.default.bool,
   "labelSpacing": _propTypes.default.oneOf([1, 2]),

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

@@ -34,8 +34,6 @@ export interface ButtonToggleGroupProps extends MarginProps, TagProps {
     labelWidth?: number;
     /** If true all ButtonToggle children will flex to the full width of the ButtonToggleGroup parent */
     fullWidth?: boolean;
-    /** The alignment for the text in the label. */
-    labelAlign?: "left" | "right";
     /** Callback triggered by pressing one of the child buttons. Use with controlled components to set the value prop to the value argument */
     onChange?: (ev: React.MouseEvent<HTMLButtonElement>, value?: string, name?: string) => void;
     /** Determines which child button is selected when the component is used as a controlled component */
@@ -63,7 +61,7 @@ declare type ButtonToggleGroupContextType = {
 };
 export declare const ButtonToggleGroupContext: React.Context<ButtonToggleGroupContextType>;
 declare const ButtonToggleGroup: {
-    ({ children, fieldHelp, fieldHelpInline, "aria-label": ariaLabel, label, labelHelp, labelSpacing, inputWidth, fullWidth, labelInline, labelWidth, labelAlign, name, onChange, value, "data-component": dataComponent, "data-element": dataElement, "data-role": dataRole, helpAriaLabel, id, allowDeselect, className, ...props }: ButtonToggleGroupProps): React.JSX.Element;
+    ({ children, fieldHelp, fieldHelpInline, "aria-label": ariaLabel, label, labelHelp, labelSpacing, inputWidth, fullWidth, labelInline, labelWidth, name, onChange, value, "data-component": dataComponent, "data-element": dataElement, "data-role": dataRole, helpAriaLabel, id, allowDeselect, className, ...props }: ButtonToggleGroupProps): React.JSX.Element;
     displayName: string;
 };
 export default ButtonToggleGroup;

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

@@ -41,7 +41,6 @@ const ButtonToggleGroup = ({
   fullWidth,
   labelInline,
   labelWidth,
-  labelAlign,
   name,
   onChange,
   value,
@@ -128,7 +127,6 @@ const ButtonToggleGroup = ({
     fieldHelpInline: fieldHelpInline,
     labelInline: labelInline,
     labelWidth: labelWidth,
-    labelAlign: labelAlign,
     labelId: labelId.current,
     "data-component": dataComponent,
     "data-role": dataRole,

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

@@ -14,8 +14,6 @@ export interface CheckboxProps extends CommonCheckableInputProps, MarginProps {
     "data-role"?: string;
     /** Aria label for rendered help component */
     helpAriaLabel?: string;
-    /** Text alignment of the label */
-    labelAlign?: "left" | "right";
     /** When true label is inline */
     labelInline?: boolean;
     /** Accepts a callback function which is triggered on click event */

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

@@ -239,7 +239,6 @@ Checkbox.propTypes = {
   "itemScope": _propTypes.default.bool,
   "itemType": _propTypes.default.string,
   "label": _propTypes.default.node,
-  "labelAlign": _propTypes.default.oneOf(["left", "right"]),
   "labelHelp": _propTypes.default.node,
   "labelInline": _propTypes.default.bool,
   "labelSpacing": _propTypes.default.oneOf([1, 2]),

package/lib/components/portal/portal.d.ts

@@ -12,6 +12,12 @@ export interface PortalProps {
     id?: string;
     /** Callback function triggered when parent element is scrolled or window resized. */
     onReposition?: () => void;
+    /** A flag to ensure the portal content will remain interactive with by both mouse
+     * users and screenreader users, even if a modal is opened outside of or on top of
+     * the portal.
+     * To be used with caution.
+     */
+    inertOptOut?: boolean;
 }
-declare const Portal: ({ children, className, id, onReposition }: PortalProps) => React.JSX.Element;
+declare const Portal: ({ children, className, id, onReposition, inertOptOut, }: PortalProps) => React.JSX.Element;
 export default Portal;

package/lib/components/portal/portal.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.PortalContext = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactDom = _interopRequireDefault(require("react-dom"));
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _guid = _interopRequireDefault(require("../../__internal__/utils/helpers/guid"));
 var _carbonScopedTokensProvider = _interopRequireDefault(require("../../style/design-tokens/carbon-scoped-tokens-provider/carbon-scoped-tokens-provider.component"));
 var _portal = _interopRequireDefault(require("./portal.style"));
@@ -13,11 +14,22 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const PortalContext = exports.PortalContext = /*#__PURE__*/_react.default.createContext({});
+const Container = _styledComponents.default.div`
+  ${({
+  theme
+}) => (0, _styledComponents.css)`
+     {
+      position: relative;
+      z-index: ${theme.zIndex.aboveAll};
+    }
+  `}
+`;
 const Portal = ({
   children,
   className,
   id,
-  onReposition
+  onReposition,
+  inertOptOut
 }) => {
   const [portalNode, setPortalNode] = (0, _react.useState)(null);
   const uniqueId = (0, _react.useMemo)(() => (0, _guid.default)(), []);
@@ -60,6 +72,9 @@ const Portal = ({
       if (id !== undefined) {
         node.setAttribute("id", id);
       }
+      if (inertOptOut) {
+        node.setAttribute("data-not-inert", "true");
+      }
       setPortalNode(node);
       let mainNode = document.body;
       const rootDiv = document.getElementById("root");
@@ -73,8 +88,9 @@ const Portal = ({
     }
     return node;
   };
+  const portalContent = inertOptOut ? /*#__PURE__*/_react.default.createElement(Container, null, children) : children;
   return /*#__PURE__*/_react.default.createElement(_portal.default, {
     "data-portal-entrance": uniqueId
-  }, /*#__PURE__*/_reactDom.default.createPortal( /*#__PURE__*/_react.default.createElement(_carbonScopedTokensProvider.default, null, children), getPortalContainer()));
+  }, /*#__PURE__*/_reactDom.default.createPortal( /*#__PURE__*/_react.default.createElement(_carbonScopedTokensProvider.default, null, portalContent), getPortalContainer()));
 };
 var _default = exports.default = Portal;

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

@@ -12,8 +12,6 @@ export interface RadioButtonProps extends CommonCheckableInputProps, MarginProps
     "data-element"?: string;
     /** Identifier used for testing purposes, applied to the root element of the component. */
     "data-role"?: string;
-    /** Text alignment of the label */
-    labelAlign?: "left" | "right";
     /** Accepts a callback function which is triggered on click event */
     onClick?: (ev: React.MouseEvent<HTMLInputElement>) => void;
     /** the value of the Radio Button, passed on form submit */

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

@@ -30,7 +30,6 @@ const RadioButton = exports.RadioButton = /*#__PURE__*/_react.default.forwardRef
   inputWidth,
   label,
   labelHelp,
-  labelAlign,
   labelSpacing = 1,
   labelWidth,
   name,
@@ -94,7 +93,6 @@ const RadioButton = exports.RadioButton = /*#__PURE__*/_react.default.forwardRef
     onChange: handleChange,
     onBlur,
     onFocus,
-    labelAlign,
     labelInline: true,
     labelWidth,
     label,
@@ -241,7 +239,6 @@ RadioButton.propTypes = {
   "itemScope": _propTypes.default.bool,
   "itemType": _propTypes.default.string,
   "label": _propTypes.default.node,
-  "labelAlign": _propTypes.default.oneOf(["left", "right"]),
   "labelHelp": _propTypes.default.node,
   "labelSpacing": _propTypes.default.oneOf([1, 2]),
   "labelWidth": _propTypes.default.number,

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

@@ -12,8 +12,6 @@ export interface SwitchProps extends CommonCheckableInputProps, MarginProps {
     adaptiveLabelBreakpoint?: number;
     /** Set the default value of the Switch if component is meant to be used as uncontrolled */
     defaultChecked?: boolean;
-    /** Text alignment of the label */
-    labelAlign?: "left" | "right";
     /** When true label is inline */
     labelInline?: boolean;
     /** Triggers loading animation */

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

@@ -289,7 +289,6 @@ Switch.propTypes = {
   "itemScope": _propTypes.default.bool,
   "itemType": _propTypes.default.string,
   "label": _propTypes.default.node,
-  "labelAlign": _propTypes.default.oneOf(["left", "right"]),
   "labelHelp": _propTypes.default.node,
   "labelInline": _propTypes.default.bool,
   "labelSpacing": _propTypes.default.oneOf([1, 2]),

package/lib/components/time/__internal__/time-toggle/time-toggle.style.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 declare const _default: import("styled-components").StyledComponent<{
-    ({ children, fieldHelp, fieldHelpInline, "aria-label": ariaLabel, label, labelHelp, labelSpacing, inputWidth, fullWidth, labelInline, labelWidth, labelAlign, name, onChange, value, "data-component": dataComponent, "data-element": dataElement, "data-role": dataRole, helpAriaLabel, id, allowDeselect, className, ...props }: import("../../../button-toggle").ButtonToggleGroupProps): import("react").JSX.Element;
+    ({ children, fieldHelp, fieldHelpInline, "aria-label": ariaLabel, label, labelHelp, labelSpacing, inputWidth, fullWidth, labelInline, labelWidth, name, onChange, value, "data-component": dataComponent, "data-element": dataElement, "data-role": dataRole, helpAriaLabel, id, allowDeselect, className, ...props }: import("../../../button-toggle").ButtonToggleGroupProps): import("react").JSX.Element;
     displayName: string;
 }, any, {
     disabled?: boolean | undefined;

package/lib/components/toast/toast.style.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import TypeIcon from "../message/type-icon/type-icon.style";
 import { MessageVariant } from "../message/message.component";
-declare const StyledPortal: import("styled-components").StyledComponent<({ children, className, id, onReposition }: import("../portal/portal").PortalProps) => import("react").JSX.Element, any, {
+declare const StyledPortal: import("styled-components").StyledComponent<({ children, className, id, onReposition, inertOptOut, }: import("../portal/portal").PortalProps) => import("react").JSX.Element, any, {
     align?: "left" | "right" | "center" | undefined;
     alignY?: "bottom" | "top" | "center" | undefined;
     isCenter?: boolean | undefined;

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

@@ -15,6 +15,10 @@ function useModalAria(containerRef) {
   (0, _react.useEffect)(() => {
     const originalValues = [];
     const hideNonTopModalElements = rootElement => {
+      if (rootElement.dataset.notInert === "true") {
+        // stop recursing, and do nothing, if the container has the "data-not-inert" flag
+        return;
+      }
       if (!rootElement.contains(topModal)) {
         originalValues.push({
           element: rootElement,
@@ -24,13 +28,18 @@ function useModalAria(containerRef) {
         // need to manually call the blur event on any currently-focused element that might be inside the element
         // we're making inert, since Firefox fails to do this, which can result in the focus styles remaining on
         // an input that is no longer focused
-        if (rootElement.contains(document.activeElement)) {
-          document.activeElement?.blur();
+        if (rootElement.contains(document.activeElement) && document.activeElement instanceof HTMLElement) {
+          document.activeElement.blur();
         }
         rootElement.setAttribute("aria-hidden", "true");
         rootElement.setAttribute("inert", "");
       } else if (rootElement !== topModal) {
-        Array.from(rootElement.children).forEach(hideNonTopModalElements);
+        Array.from(rootElement.children).forEach(node => {
+          // istanbul ignore else
+          if (node instanceof HTMLElement) {
+            hideNonTopModalElements(node);
+          }
+        });
       }
     };
     if (isTopModal) {

package/package.json

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