carbon-react 119.6.4 → 119.7.1

package/esm/__internal__/fieldset/fieldset.component.js

@@ -1,8 +1,9 @@
 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 from "react";
+import React, { useContext } from "react";
 import PropTypes from "prop-types";
 import { StyledFieldset, StyledLegend, StyledLegendContent } from "./fieldset.style";
 import ValidationIcon from "../validations/validation-icon.component";
+import { NewValidationContext } from "../../components/carbon-provider/carbon-provider.component";
 import { InputGroupBehaviour, InputGroupContext } from "../input-behaviour";
 import useFormSpacing from "../../hooks/__internal__/useFormSpacing";
 const Fieldset = _ref => {
@@ -20,6 +21,9 @@ const Fieldset = _ref => {
     blockGroupBehaviour,
     ...rest
   } = _ref;
+  const {
+    validationRedesignOptIn
+  } = useContext(NewValidationContext);
   const marginProps = useFormSpacing(rest);
   return /*#__PURE__*/React.createElement(InputGroupBehaviour, {
     blockGroupBehaviour: blockGroupBehaviour
@@ -39,7 +43,7 @@ const Fieldset = _ref => {
       rightPadding: legendSpacing
     }, /*#__PURE__*/React.createElement(StyledLegendContent, {
       isRequired: isRequired
-    }, legend, /*#__PURE__*/React.createElement(ValidationIcon, {
+    }, legend, !validationRedesignOptIn && /*#__PURE__*/React.createElement(ValidationIcon, {
       error: error,
       warning: warning,
       info: info,

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

@@ -9,6 +9,7 @@ import { TooltipProvider } from "../../__internal__/tooltip-provider";
 import { CheckboxGroupContext } from "./checkbox-group.component";
 import Logger from "../../__internal__/utils/logger";
 import useFormSpacing from "../../hooks/__internal__/useFormSpacing";
+import { NewValidationContext } from "../carbon-provider/carbon-provider.component";
 let deprecateInputRefWarnTriggered = false;
 let deprecateUncontrolledWarnTriggered = false;
 const Checkbox = /*#__PURE__*/React.forwardRef((_ref, ref) => {
@@ -47,6 +48,9 @@ const Checkbox = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     inputRef,
     ...rest
   } = _ref;
+  const {
+    validationRedesignOptIn
+  } = useContext(NewValidationContext);
   const largeScreen = useIsAboveBreakpoint(adaptiveSpacingBreakpoint);
   const adaptiveSpacingSmallScreen = !!(adaptiveSpacingBreakpoint && !largeScreen);
   const checkboxGroupContext = useContext(CheckboxGroupContext);
@@ -110,7 +114,8 @@ const Checkbox = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     info: contextInfo || info,
     fieldHelpInline: fieldHelpInline,
     reverse: reverse,
-    size: size
+    size: size,
+    applyNewValidation: validationRedesignOptIn
   }, marginProps), /*#__PURE__*/React.createElement(CheckableInput, inputProps, /*#__PURE__*/React.createElement(CheckboxSvg, null))));
 });
 Checkbox.propTypes = {

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

@@ -8,6 +8,7 @@ export interface StyledCheckboxProps extends ValidationProps, MarginProps {
     labelSpacing?: 1 | 2;
     reverse?: boolean;
     adaptiveSpacingSmallScreen?: boolean;
+    applyNewValidation?: boolean;
 }
 declare const StyledCheckbox: import("styled-components").StyledComponent<"div", any, StyledCheckboxProps, never>;
 export default StyledCheckbox;

package/esm/components/checkbox/checkbox.style.js

@@ -20,7 +20,8 @@ const StyledCheckbox = styled.div`
     inputWidth,
     reverse,
     size,
-    adaptiveSpacingSmallScreen
+    adaptiveSpacingSmallScreen,
+    applyNewValidation
   } = _ref;
   return css`
     ${adaptiveSpacingSmallScreen && "margin-left: 0;"}
@@ -41,6 +42,8 @@ const StyledCheckbox = styled.div`
         ${info && `border: 1px solid var(--colorsSemanticInfo500);`}
         ${warning && `border: 1px solid var(--colorsSemanticCaution500);`}
         ${error && `border: 2px solid var(--colorsSemanticNegative500);`}
+
+        ${warning && applyNewValidation && `border: 1px solid var(--colorsUtilityMajor300);`}
       `}
     }
 

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

@@ -14,6 +14,8 @@ export interface RadioButtonGroupProps extends ValidationProps, MarginProps {
     labelSpacing?: 1 | 2;
     /** The content for the RadioGroup Legend */
     legend?: string;
+    /** The content for the hint text of the RadioGroup Legend */
+    legendHelp?: string;
     /** Text alignment of legend when inline */
     legendAlign?: "left" | "right";
     /** When true, legend is placed in line with the radiobuttons */

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

@@ -1,20 +1,25 @@
 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 from "react";
+import React, { useContext } from "react";
 import PropTypes from "prop-types";
 import tagComponent from "../../__internal__/utils/helpers/tags/tags";
 import Fieldset from "../../__internal__/fieldset";
-import RadioButtonGroupStyle from "./radio-button-group.style";
+import RadioButtonGroupStyle, { StyledHintText } from "./radio-button-group.style";
 import RadioButtonMapper from "../../__internal__/radio-button-mapper/radio-button-mapper.component";
 import useIsAboveBreakpoint from "../../hooks/__internal__/useIsAboveBreakpoint";
 import { filterStyledSystemMarginProps } from "../../style/utils";
 import { TooltipProvider } from "../../__internal__/tooltip-provider";
 import Logger from "../../__internal__/utils/logger";
+import { NewValidationContext } from "../carbon-provider/carbon-provider.component";
+import ValidationMessage from "../../__internal__/validation-message/validation-message.component";
+import Box from "../../components/box";
+import { ErrorBorder } from "../../components/textbox/textbox.style";
 let deprecateUncontrolledWarnTriggered = false;
 export const RadioButtonGroup = props => {
   const {
     children,
     name,
     legend,
+    legendHelp,
     error,
     warning,
     info,
@@ -32,6 +37,9 @@ export const RadioButtonGroup = props => {
     required,
     tooltipPosition
   } = props;
+  const {
+    validationRedesignOptIn
+  } = useContext(NewValidationContext);
   if (!deprecateUncontrolledWarnTriggered && !onChange) {
     deprecateUncontrolledWarnTriggered = true;
     Logger.deprecate("Uncontrolled behaviour in `Radio Button` is deprecated and support will soon be removed. Please make sure all your inputs are controlled.");
@@ -47,7 +55,51 @@ export const RadioButtonGroup = props => {
   if (adaptiveSpacingBreakpoint && !isAboveSpacingBreakpoint) {
     marginLeft = undefined;
   }
-  return /*#__PURE__*/React.createElement(TooltipProvider, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, validationRedesignOptIn ? /*#__PURE__*/React.createElement(Fieldset, _extends({
+    legend: legend,
+    error: error,
+    warning: warning,
+    info: info,
+    inline: inlineLegend,
+    legendWidth: legendWidth,
+    legendAlign: legendAlign,
+    legendSpacing: legendSpacing,
+    isRequired: required
+  }, tagComponent("radiogroup", props), marginProps, {
+    ml: marginLeft,
+    blockGroupBehaviour: !(error || warning)
+  }), legendHelp && /*#__PURE__*/React.createElement(StyledHintText, null, legendHelp), /*#__PURE__*/React.createElement(Box, {
+    position: "relative"
+  }, /*#__PURE__*/React.createElement(ValidationMessage, {
+    error: error,
+    warning: warning
+  }), (error || warning) && /*#__PURE__*/React.createElement(ErrorBorder, {
+    inline: inline,
+    warning: !!(!error && warning)
+  }), /*#__PURE__*/React.createElement(RadioButtonGroupStyle, {
+    "data-component": "radio-button-group",
+    role: "radiogroup",
+    inline: inline,
+    legendInline: inlineLegend
+  }, /*#__PURE__*/React.createElement(RadioButtonMapper, {
+    name: name,
+    onBlur: onBlur,
+    onChange: onChange,
+    value: value
+  }, React.Children.map(children, child => {
+    if (! /*#__PURE__*/React.isValidElement(child)) {
+      return child;
+    }
+    return /*#__PURE__*/React.cloneElement(child, {
+      inline,
+      labelSpacing,
+      error: !!error,
+      warning: !!warning,
+      info: !!info,
+      required,
+      ...child.props
+    });
+  }))))) : /*#__PURE__*/React.createElement(TooltipProvider, {
     tooltipPosition: tooltipPosition
   }, /*#__PURE__*/React.createElement(Fieldset, _extends({
     legend: legend,
@@ -85,7 +137,7 @@ export const RadioButtonGroup = props => {
       required,
       ...child.props
     });
-  })))));
+  }))))));
 };
 RadioButtonGroup.displayName = "RadioButtonGroup";
 export default RadioButtonGroup;

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

@@ -1,3 +1,4 @@
+export declare const StyledHintText: import("styled-components").StyledComponent<"div", any, {}, never>;
 declare const RadioButtonGroupStyle: import("styled-components").StyledComponent<"div", any, {
     inline?: boolean | undefined;
     legendInline?: boolean | undefined;

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

@@ -1,4 +1,10 @@
 import styled, { css } from "styled-components";
+export const StyledHintText = styled.div`
+  margin-top: -4px;
+  margin-bottom: 8px;
+  color: var(--colorsUtilityYin055);
+  font-size: 14px;
+`;
 const RadioButtonGroupStyle = styled.div`
   ${_ref => {
   let {

package/esm/components/radio-button/radio-button.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 } from "react";
+import React, { useCallback, useContext } from "react";
 import PropTypes from "prop-types";
 import invariant from "invariant";
 import RadioButtonStyle from "./radio-button.style";
@@ -8,6 +8,7 @@ import RadioButtonSvg from "./radio-button-svg.component";
 import { filterStyledSystemMarginProps } from "../../style/utils";
 import { TooltipProvider } from "../../__internal__/tooltip-provider";
 import Logger from "../../__internal__/utils/logger";
+import { NewValidationContext } from "../carbon-provider/carbon-provider.component";
 let deprecateInputRefWarnTriggered = false;
 const RadioButton = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
@@ -43,6 +44,9 @@ const RadioButton = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     inputRef,
     ...props
   } = _ref;
+  const {
+    validationRedesignOptIn
+  } = useContext(NewValidationContext);
   const marginProps = filterStyledSystemMarginProps(props);
   const handleChange = useCallback(event => {
     /* istanbul ignore else */
@@ -57,17 +61,24 @@ const RadioButton = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     deprecateInputRefWarnTriggered = true;
     Logger.deprecate("The `inputRef` prop in `RadioButton` component is deprecated and will soon be removed. Please use `ref` instead.");
   }
-  const commonProps = {
+  const validationProps = {
     disabled,
-    fieldHelpInline,
     inputWidth,
-    labelSpacing,
     error,
     warning,
     info
   };
+  const commonProps = {
+    ...validationProps,
+    fieldHelpInline,
+    labelSpacing
+  };
   const inputProps = {
-    ...commonProps,
+    ...(validationRedesignOptIn ? {
+      ...validationProps
+    } : {
+      ...commonProps
+    }),
     autoFocus,
     checked,
     fieldHelp,
@@ -94,17 +105,24 @@ const RadioButton = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     ...props
   };
   !!props.children ? process.env.NODE_ENV !== "production" ? invariant(false, "This component is meant to be used as a self-closing tag. " + "You should probably use the label prop instead.") : invariant(false) : void 0;
-  return /*#__PURE__*/React.createElement(TooltipProvider, {
-    helpAriaLabel: helpAriaLabel,
-    tooltipPosition: tooltipPosition
-  }, /*#__PURE__*/React.createElement(RadioButtonStyle, _extends({
+  const componentToRender = /*#__PURE__*/React.createElement(RadioButtonStyle, _extends({
+    applyNewValidation: validationRedesignOptIn,
     "data-component": dataComponent,
     "data-role": dataRole,
     "data-element": dataElement,
     inline: inline,
     reverse: reverse,
     size: size
-  }, commonProps, marginProps), /*#__PURE__*/React.createElement(CheckableInput, inputProps, /*#__PURE__*/React.createElement(RadioButtonSvg, null))));
+  }, validationRedesignOptIn ? {
+    ...validationProps
+  } : {
+    ...commonProps,
+    fieldHelp
+  }, 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
+  }, componentToRender));
 });
 RadioButton.propTypes = {
   "about": 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/textbox/textbox.style.d.ts

@@ -1,5 +1,6 @@
 declare const ErrorBorder: import("styled-components").StyledComponent<"span", any, {
     warning: boolean;
+    inline?: boolean | undefined;
 }, never>;
 declare const StyledInputHint: import("styled-components").StyledComponent<"p", any, {}, never>;
 declare const StyledHintText: import("styled-components").StyledComponent<"div", any, {}, never>;

package/esm/components/textbox/textbox.style.js

@@ -2,7 +2,8 @@ import styled, { css } from "styled-components";
 const ErrorBorder = styled.span`
   ${_ref => {
   let {
-    warning
+    warning,
+    inline
   } = _ref;
   return css`
       position: absolute;
@@ -10,7 +11,7 @@ const ErrorBorder = styled.span`
       width: 2px;
       background-color: ${warning ? "var(--colorsSemanticCaution500)" : "var(--colorsSemanticNegative500)"};
       left: -12px;
-      bottom: 0px;
+      bottom: ${inline ? "10px" : "0px"};
       top: 0px;
     `;
 }}

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__/fieldset/fieldset.component.js

@@ -4,13 +4,16 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _fieldset = require("./fieldset.style");
 var _validationIcon = _interopRequireDefault(require("../validations/validation-icon.component"));
+var _carbonProvider = require("../../components/carbon-provider/carbon-provider.component");
 var _inputBehaviour = require("../input-behaviour");
 var _useFormSpacing = _interopRequireDefault(require("../../hooks/__internal__/useFormSpacing"));
 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; }
 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); }
 const Fieldset = _ref => {
   let {
@@ -27,6 +30,9 @@ const Fieldset = _ref => {
     blockGroupBehaviour,
     ...rest
   } = _ref;
+  const {
+    validationRedesignOptIn
+  } = (0, _react.useContext)(_carbonProvider.NewValidationContext);
   const marginProps = (0, _useFormSpacing.default)(rest);
   return /*#__PURE__*/_react.default.createElement(_inputBehaviour.InputGroupBehaviour, {
     blockGroupBehaviour: blockGroupBehaviour
@@ -46,7 +52,7 @@ const Fieldset = _ref => {
       rightPadding: legendSpacing
     }, /*#__PURE__*/_react.default.createElement(_fieldset.StyledLegendContent, {
       isRequired: isRequired
-    }, legend, /*#__PURE__*/_react.default.createElement(_validationIcon.default, {
+    }, legend, !validationRedesignOptIn && /*#__PURE__*/_react.default.createElement(_validationIcon.default, {
       error: error,
       warning: warning,
       info: info,

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

@@ -14,6 +14,7 @@ var _tooltipProvider = require("../../__internal__/tooltip-provider");
 var _checkboxGroup = require("./checkbox-group.component");
 var _logger = _interopRequireDefault(require("../../__internal__/utils/logger"));
 var _useFormSpacing = _interopRequireDefault(require("../../hooks/__internal__/useFormSpacing"));
+var _carbonProvider = require("../carbon-provider/carbon-provider.component");
 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; }
@@ -56,6 +57,9 @@ const Checkbox = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     inputRef,
     ...rest
   } = _ref;
+  const {
+    validationRedesignOptIn
+  } = (0, _react.useContext)(_carbonProvider.NewValidationContext);
   const largeScreen = (0, _useIsAboveBreakpoint.default)(adaptiveSpacingBreakpoint);
   const adaptiveSpacingSmallScreen = !!(adaptiveSpacingBreakpoint && !largeScreen);
   const checkboxGroupContext = (0, _react.useContext)(_checkboxGroup.CheckboxGroupContext);
@@ -119,7 +123,8 @@ const Checkbox = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     info: contextInfo || info,
     fieldHelpInline: fieldHelpInline,
     reverse: reverse,
-    size: size
+    size: size,
+    applyNewValidation: validationRedesignOptIn
   }, marginProps), /*#__PURE__*/_react.default.createElement(_checkableInput.default, inputProps, /*#__PURE__*/_react.default.createElement(_checkboxSvg.default, null))));
 });
 exports.Checkbox = Checkbox;

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

@@ -8,6 +8,7 @@ export interface StyledCheckboxProps extends ValidationProps, MarginProps {
     labelSpacing?: 1 | 2;
     reverse?: boolean;
     adaptiveSpacingSmallScreen?: boolean;
+    applyNewValidation?: boolean;
 }
 declare const StyledCheckbox: import("styled-components").StyledComponent<"div", any, StyledCheckboxProps, never>;
 export default StyledCheckbox;

package/lib/components/checkbox/checkbox.style.js

@@ -29,7 +29,8 @@ const StyledCheckbox = _styledComponents.default.div`
     inputWidth,
     reverse,
     size,
-    adaptiveSpacingSmallScreen
+    adaptiveSpacingSmallScreen,
+    applyNewValidation
   } = _ref;
   return (0, _styledComponents.css)`
     ${adaptiveSpacingSmallScreen && "margin-left: 0;"}
@@ -50,6 +51,8 @@ const StyledCheckbox = _styledComponents.default.div`
         ${info && `border: 1px solid var(--colorsSemanticInfo500);`}
         ${warning && `border: 1px solid var(--colorsSemanticCaution500);`}
         ${error && `border: 2px solid var(--colorsSemanticNegative500);`}
+
+        ${warning && applyNewValidation && `border: 1px solid var(--colorsUtilityMajor300);`}
       `}
     }
 

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

@@ -14,6 +14,8 @@ export interface RadioButtonGroupProps extends ValidationProps, MarginProps {
     labelSpacing?: 1 | 2;
     /** The content for the RadioGroup Legend */
     legend?: string;
+    /** The content for the hint text of the RadioGroup Legend */
+    legendHelp?: string;
     /** Text alignment of legend when inline */
     legendAlign?: "left" | "right";
     /** When true, legend is placed in line with the radiobuttons */

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

@@ -4,17 +4,23 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.RadioButtonGroup = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _tags = _interopRequireDefault(require("../../__internal__/utils/helpers/tags/tags"));
 var _fieldset = _interopRequireDefault(require("../../__internal__/fieldset"));
-var _radioButtonGroup = _interopRequireDefault(require("./radio-button-group.style"));
+var _radioButtonGroup = _interopRequireWildcard(require("./radio-button-group.style"));
 var _radioButtonMapper = _interopRequireDefault(require("../../__internal__/radio-button-mapper/radio-button-mapper.component"));
 var _useIsAboveBreakpoint = _interopRequireDefault(require("../../hooks/__internal__/useIsAboveBreakpoint"));
 var _utils = require("../../style/utils");
 var _tooltipProvider = require("../../__internal__/tooltip-provider");
 var _logger = _interopRequireDefault(require("../../__internal__/utils/logger"));
+var _carbonProvider = require("../carbon-provider/carbon-provider.component");
+var _validationMessage = _interopRequireDefault(require("../../__internal__/validation-message/validation-message.component"));
+var _box = _interopRequireDefault(require("../../components/box"));
+var _textbox = require("../../components/textbox/textbox.style");
 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; }
 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); }
 let deprecateUncontrolledWarnTriggered = false;
 const RadioButtonGroup = props => {
@@ -22,6 +28,7 @@ const RadioButtonGroup = props => {
     children,
     name,
     legend,
+    legendHelp,
     error,
     warning,
     info,
@@ -39,6 +46,9 @@ const RadioButtonGroup = props => {
     required,
     tooltipPosition
   } = props;
+  const {
+    validationRedesignOptIn
+  } = (0, _react.useContext)(_carbonProvider.NewValidationContext);
   if (!deprecateUncontrolledWarnTriggered && !onChange) {
     deprecateUncontrolledWarnTriggered = true;
     _logger.default.deprecate("Uncontrolled behaviour in `Radio Button` is deprecated and support will soon be removed. Please make sure all your inputs are controlled.");
@@ -54,7 +64,51 @@ const RadioButtonGroup = props => {
   if (adaptiveSpacingBreakpoint && !isAboveSpacingBreakpoint) {
     marginLeft = undefined;
   }
-  return /*#__PURE__*/_react.default.createElement(_tooltipProvider.TooltipProvider, {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, validationRedesignOptIn ? /*#__PURE__*/_react.default.createElement(_fieldset.default, _extends({
+    legend: legend,
+    error: error,
+    warning: warning,
+    info: info,
+    inline: inlineLegend,
+    legendWidth: legendWidth,
+    legendAlign: legendAlign,
+    legendSpacing: legendSpacing,
+    isRequired: required
+  }, (0, _tags.default)("radiogroup", props), marginProps, {
+    ml: marginLeft,
+    blockGroupBehaviour: !(error || warning)
+  }), legendHelp && /*#__PURE__*/_react.default.createElement(_radioButtonGroup.StyledHintText, null, legendHelp), /*#__PURE__*/_react.default.createElement(_box.default, {
+    position: "relative"
+  }, /*#__PURE__*/_react.default.createElement(_validationMessage.default, {
+    error: error,
+    warning: warning
+  }), (error || warning) && /*#__PURE__*/_react.default.createElement(_textbox.ErrorBorder, {
+    inline: inline,
+    warning: !!(!error && warning)
+  }), /*#__PURE__*/_react.default.createElement(_radioButtonGroup.default, {
+    "data-component": "radio-button-group",
+    role: "radiogroup",
+    inline: inline,
+    legendInline: inlineLegend
+  }, /*#__PURE__*/_react.default.createElement(_radioButtonMapper.default, {
+    name: name,
+    onBlur: onBlur,
+    onChange: onChange,
+    value: value
+  }, _react.default.Children.map(children, child => {
+    if (! /*#__PURE__*/_react.default.isValidElement(child)) {
+      return child;
+    }
+    return /*#__PURE__*/_react.default.cloneElement(child, {
+      inline,
+      labelSpacing,
+      error: !!error,
+      warning: !!warning,
+      info: !!info,
+      required,
+      ...child.props
+    });
+  }))))) : /*#__PURE__*/_react.default.createElement(_tooltipProvider.TooltipProvider, {
     tooltipPosition: tooltipPosition
   }, /*#__PURE__*/_react.default.createElement(_fieldset.default, _extends({
     legend: legend,
@@ -92,7 +146,7 @@ const RadioButtonGroup = props => {
       required,
       ...child.props
     });
-  })))));
+  }))))));
 };
 exports.RadioButtonGroup = RadioButtonGroup;
 RadioButtonGroup.displayName = "RadioButtonGroup";

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

@@ -1,3 +1,4 @@
+export declare const StyledHintText: import("styled-components").StyledComponent<"div", any, {}, never>;
 declare const RadioButtonGroupStyle: import("styled-components").StyledComponent<"div", any, {
     inline?: boolean | undefined;
     legendInline?: boolean | undefined;

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

@@ -3,10 +3,17 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.StyledHintText = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 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; }
+const StyledHintText = _styledComponents.default.div`
+  margin-top: -4px;
+  margin-bottom: 8px;
+  color: var(--colorsUtilityYin055);
+  font-size: 14px;
+`;
+exports.StyledHintText = StyledHintText;
 const RadioButtonGroupStyle = _styledComponents.default.div`
   ${_ref => {
   let {

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

@@ -13,6 +13,7 @@ var _radioButtonSvg = _interopRequireDefault(require("./radio-button-svg.compone
 var _utils = require("../../style/utils");
 var _tooltipProvider = require("../../__internal__/tooltip-provider");
 var _logger = _interopRequireDefault(require("../../__internal__/utils/logger"));
+var _carbonProvider = require("../carbon-provider/carbon-provider.component");
 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; }
@@ -52,6 +53,9 @@ const RadioButton = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     inputRef,
     ...props
   } = _ref;
+  const {
+    validationRedesignOptIn
+  } = (0, _react.useContext)(_carbonProvider.NewValidationContext);
   const marginProps = (0, _utils.filterStyledSystemMarginProps)(props);
   const handleChange = (0, _react.useCallback)(event => {
     /* istanbul ignore else */
@@ -66,17 +70,24 @@ const RadioButton = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     deprecateInputRefWarnTriggered = true;
     _logger.default.deprecate("The `inputRef` prop in `RadioButton` component is deprecated and will soon be removed. Please use `ref` instead.");
   }
-  const commonProps = {
+  const validationProps = {
     disabled,
-    fieldHelpInline,
     inputWidth,
-    labelSpacing,
     error,
     warning,
     info
   };
+  const commonProps = {
+    ...validationProps,
+    fieldHelpInline,
+    labelSpacing
+  };
   const inputProps = {
-    ...commonProps,
+    ...(validationRedesignOptIn ? {
+      ...validationProps
+    } : {
+      ...commonProps
+    }),
     autoFocus,
     checked,
     fieldHelp,
@@ -103,17 +114,24 @@ const RadioButton = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     ...props
   };
   !!props.children ? process.env.NODE_ENV !== "production" ? (0, _invariant.default)(false, "This component is meant to be used as a self-closing tag. " + "You should probably use the label prop instead.") : (0, _invariant.default)(false) : void 0;
-  return /*#__PURE__*/_react.default.createElement(_tooltipProvider.TooltipProvider, {
-    helpAriaLabel: helpAriaLabel,
-    tooltipPosition: tooltipPosition
-  }, /*#__PURE__*/_react.default.createElement(_radioButton.default, _extends({
+  const componentToRender = /*#__PURE__*/_react.default.createElement(_radioButton.default, _extends({
+    applyNewValidation: validationRedesignOptIn,
     "data-component": dataComponent,
     "data-role": dataRole,
     "data-element": dataElement,
     inline: inline,
     reverse: reverse,
     size: size
-  }, commonProps, marginProps), /*#__PURE__*/_react.default.createElement(_checkableInput.default, inputProps, /*#__PURE__*/_react.default.createElement(_radioButtonSvg.default, null))));
+  }, validationRedesignOptIn ? {
+    ...validationProps
+  } : {
+    ...commonProps,
+    fieldHelp
+  }, 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
+  }, componentToRender));
 });
 exports.RadioButton = RadioButton;
 RadioButton.propTypes = {

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/textbox/textbox.style.d.ts

@@ -1,5 +1,6 @@
 declare const ErrorBorder: import("styled-components").StyledComponent<"span", any, {
     warning: boolean;
+    inline?: boolean | undefined;
 }, never>;
 declare const StyledInputHint: import("styled-components").StyledComponent<"p", any, {}, never>;
 declare const StyledHintText: import("styled-components").StyledComponent<"div", any, {}, never>;

package/lib/components/textbox/textbox.style.js

@@ -10,7 +10,8 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 const ErrorBorder = _styledComponents.default.span`
   ${_ref => {
   let {
-    warning
+    warning,
+    inline
   } = _ref;
   return (0, _styledComponents.css)`
       position: absolute;
@@ -18,7 +19,7 @@ const ErrorBorder = _styledComponents.default.span`
       width: 2px;
       background-color: ${warning ? "var(--colorsSemanticCaution500)" : "var(--colorsSemanticNegative500)"};
       left: -12px;
-      bottom: 0px;
+      bottom: ${inline ? "10px" : "0px"};
       top: 0px;
     `;
 }}

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