carbon-react 104.7.1 → 104.9.0

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

@@ -63,8 +63,8 @@ const CheckableInput = ({
   } = (0, _react.useRef)(inputId || (0, _guid.default)());
   const {
     labelId,
-    tooltipId,
     fieldHelpId,
+    validationIconId,
     ariaDescribedBy,
     ariaLabelledBy
   } = (0, _useInputAccessibility.default)({
@@ -73,7 +73,6 @@ const CheckableInput = ({
     warning,
     info,
     label,
-    labelHelp,
     fieldHelp
   });
   const isRadio = type === "radio";
@@ -82,7 +81,6 @@ const CheckableInput = ({
     error,
     fieldHelp,
     fieldHelpInline,
-    tooltipId,
     fieldHelpId,
     id,
     info,
@@ -96,6 +94,7 @@ const CheckableInput = ({
     name: id,
     reverse,
     warning,
+    validationIconId,
     // We don't want an asterisk on each radio control, only the legend
     // However, we still want the input element to receive the required prop
     isRequired: isRadio ? undefined : required,

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

@@ -1,5 +1,5 @@
 export default FormField;
-declare function FormField({ children, disabled, fieldHelp: fieldHelpContent, fieldHelpInline, error, warning, info, tooltipId, fieldHelpId, helpTabIndex, label, labelId, labelAlign, labelHelp, labelHelpIcon, labelInline, labelSpacing, labelWidth, id, reverse, isOptional, useValidationIcon, adaptiveLabelBreakpoint, isRequired, ...rest }: {
+declare function FormField({ children, disabled, fieldHelp: fieldHelpContent, fieldHelpInline, error, warning, info, tooltipId, fieldHelpId, helpTabIndex, label, labelId, labelAlign, labelHelp, labelHelpIcon, labelInline, labelSpacing, labelWidth, id, reverse, isOptional, useValidationIcon, adaptiveLabelBreakpoint, isRequired, validationIconId, ...rest }: {
     [x: string]: any;
     children: any;
     disabled: any;
@@ -25,6 +25,7 @@ declare function FormField({ children, disabled, fieldHelp: fieldHelpContent, fi
     useValidationIcon: any;
     adaptiveLabelBreakpoint: any;
     isRequired: any;
+    validationIconId: any;
 }): JSX.Element;
 declare namespace FormField {
     const propTypes: {
@@ -58,6 +59,8 @@ declare namespace FormField {
         adaptiveLabelBreakpoint: PropTypes.Requireable<number>;
         /** Flag to configure component as mandatory */
         isRequired: PropTypes.Requireable<boolean>;
+        /** Id of the validation icon */
+        validationIconId: PropTypes.Requireable<string>;
     };
 }
 import PropTypes from "prop-types";

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

@@ -60,6 +60,7 @@ const FormField = ({
   useValidationIcon,
   adaptiveLabelBreakpoint,
   isRequired,
+  validationIconId,
   ...rest
 }) => {
   const context = (0, _react.useContext)(_tab.TabContext);
@@ -103,7 +104,8 @@ const FormField = ({
     useValidationIcon: useValidationIcon,
     pr: !reverse ? labelSpacing : undefined,
     pl: reverse ? labelSpacing : undefined,
-    isRequired: isRequired
+    isRequired: isRequired,
+    validationIconId: validationIconId
   }, label), fieldHelpInline && fieldHelp, !reverse && children), !fieldHelpInline && fieldHelp);
 };
 
@@ -150,7 +152,10 @@ FormField.propTypes = {
   adaptiveLabelBreakpoint: _propTypes.default.number,
 
   /** Flag to configure component as mandatory */
-  isRequired: _propTypes.default.bool
+  isRequired: _propTypes.default.bool,
+
+  /** Id of the validation icon */
+  validationIconId: _propTypes.default.string
 };
 var _default = FormField;
 exports.default = _default;

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

@@ -33,6 +33,8 @@ export interface CommonFormFieldPropTypes
   labelWidth?: number;
   /** If true the label switches position with the input */
   reverse?: boolean;
+  /** Id of the validation icon */
+  validationIconId?: string;
 }
 
 export interface FormFieldPropTypes extends CommonFormFieldPropTypes {

package/lib/__internal__/input-icon-toggle/input-icon-toggle.component.d.ts

@@ -1,5 +1,5 @@
 export default InputIconToggle;
-declare function InputIconToggle({ disabled, readOnly, size, inputIcon: type, onClick, onFocus, onBlur, onMouseDown, error, warning, info, useValidationIcon, align, iconTabIndex, tooltipId, }: {
+declare function InputIconToggle({ disabled, readOnly, size, inputIcon: type, onClick, onFocus, onBlur, onMouseDown, error, warning, info, useValidationIcon, align, iconTabIndex, validationIconId, }: {
     disabled: any;
     readOnly: any;
     size: any;
@@ -14,7 +14,7 @@ declare function InputIconToggle({ disabled, readOnly, size, inputIcon: type, on
     useValidationIcon: any;
     align: any;
     iconTabIndex: any;
-    tooltipId: any;
+    validationIconId: any;
 }): JSX.Element | null;
 declare namespace InputIconToggle {
     namespace propTypes {
@@ -32,7 +32,7 @@ declare namespace InputIconToggle {
         const align: PropTypes.Requireable<string>;
         const useValidationIcon: PropTypes.Requireable<boolean>;
         const iconTabIndex: PropTypes.Requireable<number>;
-        const tooltipId: PropTypes.Requireable<string>;
+        const validationIconId: PropTypes.Requireable<string>;
     }
 }
 import PropTypes from "prop-types";

package/lib/__internal__/input-icon-toggle/input-icon-toggle.component.js

@@ -41,7 +41,7 @@ const InputIconToggle = ({
   useValidationIcon,
   align,
   iconTabIndex,
-  tooltipId
+  validationIconId
 }) => {
   if (useValidationIcon && !disabled && shouldDisplayValidationIcon({
     error,
@@ -60,7 +60,7 @@ const InputIconToggle = ({
       onBlur: onBlur,
       isPartOfInput: true,
       tabIndex: iconTabIndex,
-      tooltipId: tooltipId,
+      iconId: validationIconId,
       tooltipPosition: align === "right" ? "left" : "right"
     }));
   }
@@ -74,8 +74,7 @@ const InputIconToggle = ({
       onMouseDown: onMouseDown,
       tabIndex: iconTabIndex
     }, /*#__PURE__*/_react.default.createElement(_icon.default, {
-      type: type,
-      tooltipId: tooltipId
+      type: type
     }));
   }
 
@@ -97,7 +96,9 @@ InputIconToggle.propTypes = {
   align: _propTypes.default.oneOf(["left", "right"]),
   useValidationIcon: _propTypes.default.bool,
   iconTabIndex: _propTypes.default.number,
-  tooltipId: _propTypes.default.string
+
+  /** Id of the validation icon */
+  validationIconId: _propTypes.default.string
 };
 var _default = InputIconToggle;
 exports.default = _default;

package/lib/__internal__/input-icon-toggle/input-icon-toggle.d.ts

@@ -16,6 +16,8 @@ export interface InputIconToggleProps {
   useValidationIcon?: boolean;
   iconTabIndex?: number;
   tooltipId?: string;
+  /** Id of the validation icon */
+  validationIconId?: string;
 }
 declare function InputIconToggle(props: InputIconToggleProps): JSX.Element;
 

package/lib/__internal__/label/label.component.d.ts

@@ -1,5 +1,5 @@
 declare var _default: React.MemoExoticComponent<{
-    ({ disabled, inline, align, width, optional, labelId, tooltipId, children, error, warning, info, help, helpIcon, helpTabIndex, useValidationIcon, htmlFor, pr, pl, isRequired, }: {
+    ({ disabled, inline, align, width, optional, labelId, tooltipId, children, error, warning, info, help, helpIcon, helpTabIndex, useValidationIcon, htmlFor, pr, pl, isRequired, validationIconId, }: {
         disabled: any;
         inline: any;
         align?: string | undefined;
@@ -19,6 +19,7 @@ declare var _default: React.MemoExoticComponent<{
         pr: any;
         pl: any;
         isRequired: any;
+        validationIconId: any;
     }): JSX.Element;
     propTypes: {
         /** Label width */
@@ -59,6 +60,8 @@ declare var _default: React.MemoExoticComponent<{
         pl: PropTypes.Requireable<number>;
         /** Flag to configure component as mandatory */
         isRequired: PropTypes.Requireable<boolean>;
+        /** Id of the validation icon */
+        validationIconId: PropTypes.Requireable<string>;
     };
 }>;
 export default _default;

package/lib/__internal__/label/label.component.js

@@ -63,11 +63,11 @@ const Label = ({
   htmlFor,
   pr,
   pl,
-  isRequired
+  isRequired,
+  validationIconId
 }) => {
+  const [isFocused, setFocus] = (0, _react.useState)(false);
   const {
-    hasFocus,
-    hasMouseOver,
     onMouseEnter,
     onMouseLeave
   } = (0, _react.useContext)(_inputBehaviour.InputContext);
@@ -87,6 +87,11 @@ const Label = ({
   };
 
   const icon = () => {
+    const wrapperProps = {
+      onFocus: () => setFocus(true),
+      onBlur: () => setFocus(false)
+    };
+
     if (useValidationIcon && shouldDisplayValidationIcon({
       error,
       warning,
@@ -100,6 +105,7 @@ const Label = ({
         inline
       });
       return /*#__PURE__*/_react.default.createElement(_iconWrapper.default, null, /*#__PURE__*/_react.default.createElement(_validationIcon.default, {
+        iconId: validationIconId,
         tooltipId: tooltipId,
         error: error,
         warning: warning,
@@ -109,11 +115,11 @@ const Label = ({
       }));
     }
 
-    return help && /*#__PURE__*/_react.default.createElement(_iconWrapper.default, null, /*#__PURE__*/_react.default.createElement(_help.default, {
+    return help && /*#__PURE__*/_react.default.createElement(_iconWrapper.default, wrapperProps, /*#__PURE__*/_react.default.createElement(_help.default, {
       tooltipId: tooltipId,
       tabIndex: helpTabIndex,
       type: helpIcon,
-      isFocused: hasFocus || hasMouseOver
+      isFocused: isFocused
     }, help));
   };
 
@@ -191,7 +197,10 @@ Label.propTypes = {
   pl: _propTypes.default.oneOf([1, 2]),
 
   /** Flag to configure component as mandatory */
-  isRequired: _propTypes.default.bool
+  isRequired: _propTypes.default.bool,
+
+  /** Id of the validation icon */
+  validationIconId: _propTypes.default.string
 };
 
 var _default = /*#__PURE__*/_react.default.memo(Label);

package/lib/__internal__/label/label.d.ts

@@ -34,6 +34,8 @@ export interface LabelPropTypes extends ValidationPropTypes {
   pr?: 1 | 2;
   /** Padding left, integer multiplied by base spacing constant (8) */
   pl?: 1 | 2;
+  /** Id of the validation icon */
+  validationIconId?: string;
 }
 
 declare function Label(props: LabelPropTypes): JSX.Element;

package/lib/__internal__/tooltip-provider/index.js

@@ -5,12 +5,18 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.TooltipProvider = exports.TooltipContext = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _guid = _interopRequireDefault(require("../utils/helpers/guid/guid"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (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 TooltipContext = /*#__PURE__*/_react.default.createContext({});
 
 exports.TooltipContext = TooltipContext;
@@ -21,18 +27,22 @@ const TooltipProvider = ({
   helpAriaLabel,
   focusable = true,
   tooltipVisible,
-  disabled = false,
+  disabled,
   target
-}) => /*#__PURE__*/_react.default.createElement(TooltipContext.Provider, {
-  value: {
-    tooltipPosition,
-    helpAriaLabel,
-    focusable,
-    tooltipVisible,
-    disabled,
-    target
-  }
-}, children);
+}) => {
+  const tooltipId = (0, _react.useRef)((0, _guid.default)());
+  return /*#__PURE__*/_react.default.createElement(TooltipContext.Provider, {
+    value: {
+      tooltipPosition,
+      helpAriaLabel,
+      focusable,
+      tooltipVisible,
+      disabled,
+      tooltipId,
+      target
+    }
+  }, children);
+};
 
 exports.TooltipProvider = TooltipProvider;
 TooltipProvider.propTypes = {

package/lib/components/anchor-navigation/anchor-navigation-item/anchor-navigation-item.style.js

@@ -5,14 +5,16 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _themes = require("../../../style/themes");
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
 
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 const StyledNavigationItem = _styledComponents.default.li`
   width: 100%;
 
@@ -20,52 +22,32 @@ const StyledNavigationItem = _styledComponents.default.li`
     cursor: pointer;
     display: block;
     text-decoration: none;
-    color: ${({
-  theme
-}) => theme.text.color};
+    color: var(--colorsUtilityYin090);
     background-color: transparent;
-    border-left: 3px solid ${({
-  theme
-}) => theme.disabled.background};
+    border-left: var(--sizing050) solid var(--colorsActionMinor100);
     font-weight: 700;
     padding: 12px 24px;
 
     &:focus {
-      outline: none;
-      position: relative;
-
-      &:before {
-        content: "";
-        position: absolute;
-        top: 0;
-        bottom: 0;
-        left: -3px;
-        right: 0;
-        z-index: 1;
-        box-shadow: 0 0 6px ${({
-  theme
-}) => theme.colors.focus};
-      }
+      outline: var(--borderWidth300) solid var(--colorsSemanticFocus500);
     }
 
     &:hover {
       background-color: ${({
-  isSelected,
-  theme
-}) => !isSelected && theme.anchorNavigation.navItemHoverBackground};
+  isSelected
+}) => !isSelected && "var(--colorsActionMinor100)"};
     }
 
     ${({
-  isSelected,
-  theme
+  isSelected
 }) => isSelected && (0, _styledComponents.css)`
-        background-color: ${theme.colors.white};
-        border-left-color: ${theme.colors.primary};
+        background-color: var(--colorsActionMinorYang100);
+        border-left-color: var(--colorsActionMajor500);
       `}
   }
 `;
-StyledNavigationItem.defaultProps = {
-  theme: _themes.baseTheme
+StyledNavigationItem.propTypes = {
+  isSelected: _propTypes.default.bool
 };
 var _default = StyledNavigationItem;
 exports.default = _default;

package/lib/components/anchor-navigation/anchor-navigation.style.js

@@ -7,8 +7,6 @@ exports.StyledContent = exports.StyledNavigation = exports.StyledAnchorNavigatio
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _themes = require("../../style/themes");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const StyledAnchorNavigation = _styledComponents.default.div`
@@ -20,9 +18,6 @@ exports.StyledAnchorNavigation = StyledAnchorNavigation;
 const StyledNavigation = _styledComponents.default.ul`
   position: sticky;
   top: 32px;
-  box-shadow: inset 3px 0px 0px 0px ${({
-  theme
-}) => theme.disabled.background};
   list-style: none;
   margin: 0;
   padding: 0;
@@ -33,13 +28,4 @@ const StyledContent = _styledComponents.default.div`
   flex: 1;
   margin-left: 32px;
 `;
-exports.StyledContent = StyledContent;
-StyledAnchorNavigation.defaultProps = {
-  theme: _themes.baseTheme
-};
-StyledNavigation.defaultProps = {
-  theme: _themes.baseTheme
-};
-StyledContent.defaultProps = {
-  theme: _themes.baseTheme
-};
+exports.StyledContent = StyledContent;

package/lib/components/anchor-navigation/anchor-section-divider/anchor-section-divider.style.js

@@ -7,20 +7,13 @@ exports.default = void 0;
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _themes = require("../../../style/themes");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const StyledAnchorDivider = _styledComponents.default.div.attrs({
   "data-element": "anchor-navigation-divider"
 })`
-  background-color: ${({
-  theme
-}) => theme.anchorNavigation.divider};
+  background-color: var(--colorsActionMinor200);
   height: 1px;
 `;
-StyledAnchorDivider.defaultProps = {
-  theme: _themes.baseTheme
-};
 var _default = StyledAnchorDivider;
 exports.default = _default;

package/lib/components/app-wrapper/app-wrapper.component.js

@@ -17,6 +17,8 @@ var _ether = require("../../__internal__/utils/ether");
 
 var _appWrapper = _interopRequireDefault(require("./app-wrapper.style"));
 
+var _logger = _interopRequireDefault(require("../../__internal__/utils/logger"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _extends() { _extends = Object.assign || 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); }
@@ -41,9 +43,11 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 
 function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
 
+let deprecatedWarnTriggered = false;
 /**
  * Manages the width and containment of your application.
  */
+
 let AppWrapper = /*#__PURE__*/function (_React$Component) {
   _inherits(AppWrapper, _React$Component);
 
@@ -56,6 +60,13 @@ let AppWrapper = /*#__PURE__*/function (_React$Component) {
 
     _this = _super.call(this, ...args);
     _this.classes = _this.classes.bind(_assertThisInitialized(_this));
+
+    if (!deprecatedWarnTriggered) {
+      deprecatedWarnTriggered = true; // eslint-disable-next-line max-len
+
+      _logger.default.deprecate("`AppWrapper` component is now deprecated and will soon be removed. Please use the `Box` component instead.");
+    }
+
     return _this;
   }
   /**

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

@@ -29,6 +29,8 @@ var _form = _interopRequireDefault(require("../form"));
 
 var _dialog2 = require("./dialog.config");
 
+var _useLocale = _interopRequireDefault(require("../../hooks/__internal__/useLocale"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
@@ -56,6 +58,7 @@ const Dialog = ({
   role = "dialog",
   ...rest
 }) => {
+  const locale = (0, _useLocale.default)();
   const dialogRef = (0, _react.useRef)();
   const innerContentRef = (0, _react.useRef)();
   const titleRef = (0, _react.useRef)();
@@ -124,7 +127,7 @@ const Dialog = ({
     if (!showCloseIcon || !onCancel) return null;
     return /*#__PURE__*/_react.default.createElement(_iconButton.default, {
       "data-element": "close",
-      "aria-label": "Close button",
+      "aria-label": locale.dialog.ariaLabels.close(),
       onAction: onCancel,
       disabled: disableClose
     }, /*#__PURE__*/_react.default.createElement(_icon.default, {

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

@@ -27,6 +27,8 @@ var _iconButton = _interopRequireDefault(require("../icon-button"));
 
 var _icon = _interopRequireDefault(require("../icon"));
 
+var _useLocale = _interopRequireDefault(require("../../hooks/__internal__/useLocale"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
@@ -56,6 +58,7 @@ const DialogFullScreen = ({
   role = "dialog",
   ...rest
 }) => {
+  const locale = (0, _useLocale.default)();
   const dialogRef = (0, _react.useRef)();
   const headingRef = (0, _react.useRef)();
   const {
@@ -69,7 +72,7 @@ const DialogFullScreen = ({
     if (!showCloseIcon || !onCancel) return null;
     return /*#__PURE__*/_react.default.createElement(_iconButton.default, {
       "data-element": "close",
-      "aria-label": "Close button",
+      "aria-label": locale.dialogFullScreen.ariaLabels.close(),
       onAction: onCancel
     }, /*#__PURE__*/_react.default.createElement(_icon.default, {
       type: "close"

package/lib/components/help/help.component.js

@@ -139,7 +139,7 @@ Help.propTypes = { ...marginPropTypes,
   /** A path for the anchor */
   href: _propTypes.default.string,
 
-  /** Overrides the visibility of the Tooltip if true */
+  /** A boolean received from IconWrapper */
   isFocused: _propTypes.default.bool,
 
   /** <a href="https://brand.sage.com/d/NdbrveWvNheA/foundations#/icons/icons" target="_blank">List of supported icons</a>

package/lib/components/help/help.d.ts

@@ -13,7 +13,7 @@ export interface HelpProps extends MarginProps {
   helpId?: string;
   /** A path for the anchor */
   href?: string;
-  /** Overrides the visibility of the Tooltip if true */
+  /** A boolean received from IconWrapper */
   isFocused?: boolean;
   /** Overrides the default tabindex of the component */
   tabIndex?: number | string;

package/lib/components/menu/__internal__/submenu/submenu.style.js

@@ -44,11 +44,15 @@ const StyledSubmenuWrapper = _styledComponents.default.div`
   menuType,
   asPassiveItem,
   theme
-}) => inFullscreenView && asPassiveItem && (0, _styledComponents.css)`
-      ${_menuItem.default} {
-        outline: none;
-        color: ${theme.menu[menuType].title};
-      }
+}) => inFullscreenView && (0, _styledComponents.css)`
+      width: 100%;
+
+      ${asPassiveItem && (0, _styledComponents.css)`
+        ${_menuItem.default} {
+          outline: none;
+          color: ${theme.menu[menuType].title};
+        }
+      `}
     `}
 `;
 exports.StyledSubmenuWrapper = StyledSubmenuWrapper;
@@ -75,7 +79,7 @@ const StyledSubmenu = _styledComponents.default.ul`
 
     ${inFullscreenView && (0, _styledComponents.css)`
       ${_menu.StyledMenuItem} {
-        width: 100vw;
+        width: 100%;
       }
     `}
 
@@ -126,7 +130,7 @@ const StyledSubmenu = _styledComponents.default.ul`
         margin-right: 5px;
       }
 
-      ${_search.default} [data-component="icon"] {
+      ${_search.default} span > [data-component="icon"] {
         color: ${theme.menu[menuType].searchIcon};
 
         &:hover {

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

@@ -106,10 +106,10 @@ const MenuFullscreen = ({
     type: "close",
     color: iconColors[menuType]
   }))), /*#__PURE__*/_react.default.createElement(_box.default, {
-    overflow: "auto",
+    overflowY: "auto",
     scrollVariant: scrollVariants[menuType],
-    width: "100vw",
-    height: "100vh"
+    width: "100%",
+    height: "calc(100% - 40px)"
   }, /*#__PURE__*/_react.default.createElement(_menu.StyledMenuWrapper, {
     "data-component": "menu",
     menuType: menuType,

package/lib/components/menu/menu-full-screen/menu-full-screen.style.js

@@ -13,6 +13,12 @@ var _iconButton = _interopRequireDefault(require("../../icon-button/icon-button.
 
 var _box = _interopRequireDefault(require("../../box"));
 
+var _search = _interopRequireDefault(require("../../search/search.style"));
+
+var _icon = _interopRequireDefault(require("../../icon/icon.style"));
+
+var _button = _interopRequireDefault(require("../../button/button.style"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
@@ -23,6 +29,8 @@ const StyledMenuFullscreen = _styledComponents.default.div`
   position: fixed;
   top: 0;
   bottom: 0;
+  height: 100vh;
+  width: 100%;
 
   a,
   button,
@@ -39,6 +47,45 @@ const StyledMenuFullscreen = _styledComponents.default.div`
     background-color: ${theme.menu[menuType].background};
     z-index: ${theme.zIndex.fullScreenModal};
 
+    ${menuType === "dark" && (0, _styledComponents.css)`
+      ${_search.default} span > [data-component="icon"] {
+        color: ${theme.menu.dark.searchIcon};
+
+        &:hover {
+          color: ${theme.menu.dark.searchIconHover};
+        }
+      }
+    `}
+
+    ${menuType === "light" && (0, _styledComponents.css)`
+      ${_search.default} span > [data-component="icon"] {
+        color: ${theme.search.icon};
+
+        &:hover {
+          color: ${theme.search.iconHover};
+        }
+      }
+    `}
+
+    ${_search.default} {
+      ${_icon.default} {
+        display: inline-flex;
+        margin-right: 0;
+        bottom: auto;
+      }
+
+      ${_button.default} {
+        display: flex;
+        line-height: normal;
+        padding-bottom: 0;
+
+        &:focus {
+          outline: solid 3px var(--colorsSemanticFocus500);
+          box-shadow: none;
+        }
+      }
+    }
+
     ${isOpen && (0, _styledComponents.css)`
       visibility: visible;
       ${startPosition}: 0;
@@ -47,7 +94,7 @@ const StyledMenuFullscreen = _styledComponents.default.div`
 
     ${!isOpen && (0, _styledComponents.css)`
       visibility: hidden;
-      ${startPosition}: -100vw;
+      ${startPosition}: -100%;
       transition: all 0.3s ease;
     `}
   `}

package/lib/components/menu/menu-item/menu-item.style.js

@@ -218,7 +218,6 @@ const StyledMenuItemWrapper = _styledComponents.default.a`
 
     ${inFullscreenView && (0, _styledComponents.css)`
       ${as === "div" && (0, _styledComponents.css)`
-        width: 100vw;
         cursor: default;
         padding: 0 16px;
 
@@ -226,14 +225,6 @@ const StyledMenuItemWrapper = _styledComponents.default.a`
           background: transparent;
         }
       `}
-
-      a,
-      ${_link.StyledLink} a,
-      button,
-      ${_link.StyledLink} button {
-        width: 100vw;
-        box-sizing: border-box;
-      }
     `}
   `}
 `;

package/lib/components/menu/menu-test.stories.js

@@ -0,0 +1,132 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MenuFullScreenStory = exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _addonActions = require("@storybook/addon-actions");
+
+var _ = require(".");
+
+var _menuItem = _interopRequireDefault(require("./menu-item"));
+
+var _menuFullScreen = _interopRequireDefault(require("./menu-full-screen"));
+
+var _search = _interopRequireDefault(require("../search"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (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; }
+
+/* eslint-disable react/prop-types */
+var _default = {
+  title: "Menu/Test",
+  parameters: {
+    info: {
+      disable: true
+    },
+    chromatic: {
+      disable: false
+    }
+  },
+  argTypes: {
+    menuType: {
+      options: ["light", "dark"],
+      control: {
+        type: "select"
+      }
+    },
+    startPosition: {
+      options: ["left", "right"],
+      control: {
+        type: "select"
+      }
+    },
+    searchVariant: {
+      options: ["default", "dark"],
+      control: {
+        type: "select"
+      }
+    },
+    searchButton: {
+      options: [true, false],
+      control: {
+        type: "boolean"
+      }
+    }
+  }
+};
+exports.default = _default;
+
+const MenuFullScreenStory = ({
+  menuType,
+  startPosition,
+  searchVariant,
+  searchButton
+}) => {
+  const [isOpen, setIsOpen] = (0, _react.useState)(true);
+
+  const onClose = evt => {
+    setIsOpen(false);
+    (0, _addonActions.action)("close icon clicked")(evt);
+  };
+
+  const handleOpen = () => {
+    setIsOpen(true);
+    (0, _addonActions.action)("open")();
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_.Menu, {
+    menuType: menuType
+  }, /*#__PURE__*/_react.default.createElement(_menuItem.default, {
+    onClick: handleOpen
+  }, "Menu"), /*#__PURE__*/_react.default.createElement(_menuFullScreen.default, {
+    startPosition: startPosition,
+    isOpen: isOpen,
+    onClose: onClose
+  }, /*#__PURE__*/_react.default.createElement(_menuItem.default, {
+    href: "#"
+  }, "Menu Item One"), /*#__PURE__*/_react.default.createElement(_menuItem.default, {
+    onClick: evt => (0, _addonActions.action)("submenu item clicked")(evt),
+    submenu: "Menu Item Two"
+  }, /*#__PURE__*/_react.default.createElement(_menuItem.default, {
+    href: "#"
+  }, "Submenu Item One"), /*#__PURE__*/_react.default.createElement(_menuItem.default, {
+    href: "#"
+  }, "Submenu Item Two")), /*#__PURE__*/_react.default.createElement(_menuItem.default, {
+    variant: "alternate"
+  }, /*#__PURE__*/_react.default.createElement(_search.default, {
+    placeholder: "Search...",
+    variant: searchVariant,
+    defaultValue: "",
+    searchButton: searchButton
+  })), /*#__PURE__*/_react.default.createElement(_menuItem.default, {
+    href: "#"
+  }, "Menu Item Three"), /*#__PURE__*/_react.default.createElement(_menuItem.default, {
+    href: "#"
+  }, "Menu Item Four"), /*#__PURE__*/_react.default.createElement(_menuItem.default, {
+    submenu: "Menu Item Five"
+  }, /*#__PURE__*/_react.default.createElement(_menuItem.default, {
+    href: "#"
+  }, "Submenu Item One"), /*#__PURE__*/_react.default.createElement(_menuItem.default, {
+    href: "#"
+  }, "Submenu Item Two")), /*#__PURE__*/_react.default.createElement(_menuItem.default, {
+    href: "#"
+  }, "Menu Item Six")));
+};
+
+exports.MenuFullScreenStory = MenuFullScreenStory;
+MenuFullScreenStory.story = {
+  name: "fullscreen menu",
+  args: {
+    menuType: "light",
+    startPosition: "left",
+    searchVariant: "default",
+    searchButton: true
+  }
+};

package/lib/components/menu/menu.style.js

@@ -13,6 +13,8 @@ var _verticalDivider = require("../vertical-divider/vertical-divider.style");
 
 var _themes = require("../../style/themes");
 
+var _link = require("../link/link.style");
+
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
 
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (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; }
@@ -46,12 +48,6 @@ const StyledMenuWrapper = _styledComponents.default.ul`
       top: -1px;
     }
   }
-
-  ${({
-  inFullscreenView
-}) => inFullscreenView && (0, _styledComponents.css)`
-      padding-bottom: 24px;
-    `}
 `;
 exports.StyledMenuWrapper = StyledMenuWrapper;
 const StyledMenuItem = _styledComponents.default.li`
@@ -71,6 +67,17 @@ const StyledMenuItem = _styledComponents.default.li`
 }) => inFullscreenView && (0, _styledComponents.css)`
       padding-top: 16px;
       padding-bottom: 16px;
+
+      a,
+      ${_link.StyledLink} a,
+      button,
+      ${_link.StyledLink} button,
+      > span,
+      > div,
+      [data-component="submenu-wrapper"] > ${_link.StyledLink} {
+        width: 100%;
+        box-sizing: border-box;
+      }
     `}
 `;
 exports.StyledMenuItem = StyledMenuItem;

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

@@ -25,6 +25,8 @@ var _box = _interopRequireDefault(require("../box"));
 
 var _sidebar2 = require("./sidebar.config");
 
+var _useLocale = _interopRequireDefault(require("../../hooks/__internal__/useLocale"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
@@ -52,13 +54,14 @@ const Sidebar = /*#__PURE__*/_react.default.forwardRef(({
   role = "dialog",
   ...rest
 }, ref) => {
+  const locale = (0, _useLocale.default)();
   let sidebarRef = (0, _react.useRef)();
   if (ref) sidebarRef = ref;
 
   const closeIcon = () => {
     if (!onCancel) return null;
     return /*#__PURE__*/_react.default.createElement(_iconButton.default, {
-      "aria-label": "close",
+      "aria-label": locale.sidebar.ariaLabels.close(),
       onAction: onCancel,
       "data-element": "close"
     }, /*#__PURE__*/_react.default.createElement(_icon.default, {

package/lib/components/textarea/textarea.component.js

@@ -105,7 +105,7 @@ const Textarea = ({
 
   const {
     labelId,
-    tooltipId,
+    validationIconId,
     fieldHelpId,
     ariaDescribedBy,
     ariaLabelledBy
@@ -115,7 +115,6 @@ const Textarea = ({
     warning,
     info,
     label,
-    labelHelp,
     fieldHelp
   });
   (0, _react.useEffect)(() => {
@@ -176,7 +175,6 @@ const Textarea = ({
     labelWidth: labelWidth,
     labelHelp: labelHelp,
     labelSpacing: labelSpacing,
-    tooltipId: tooltipId,
     isRequired: props.required,
     useValidationIcon: validationOnLabel,
     adaptiveLabelBreakpoint: adaptiveLabelBreakpoint
@@ -214,6 +212,7 @@ const Textarea = ({
     error: error,
     warning: warning,
     info: info,
+    validationIconId: validationIconId,
     useValidationIcon: !validationOnLabel
   }))), characterCount())));
 };

package/lib/components/textbox/textbox.component.js

@@ -94,7 +94,7 @@ const Textbox = ({
   const [maxLength, characterCount] = (0, _useCharacterCount.default)(value, characterLimit, warnOverLimit, enforceCharacterLimit);
   const {
     labelId: internalLabelId,
-    tooltipId,
+    validationIconId,
     fieldHelpId,
     ariaDescribedBy
   } = (0, _useInputAccessibility.default)({
@@ -111,7 +111,6 @@ const Textbox = ({
     helpAriaLabel: helpAriaLabel,
     tooltipPosition: tooltipPosition
   }, /*#__PURE__*/_react.default.createElement(_inputBehaviour.InputBehaviour, null, /*#__PURE__*/_react.default.createElement(_formField.default, _extends({
-    tooltipId: tooltipId,
     disabled: disabled,
     fieldHelp: fieldHelp,
     fieldHelpId: fieldHelpId,
@@ -133,7 +132,8 @@ const Textbox = ({
     isRequired: required,
     "data-component": dataComponent,
     "data-role": dataRole,
-    "data-element": dataElement
+    "data-element": dataElement,
+    validationIconId: validationIconId
   }, (0, _utils.filterStyledSystemMarginProps)(props)), /*#__PURE__*/_react.default.createElement(_input.InputPresentation, {
     align: align,
     disabled: disabled,
@@ -182,7 +182,7 @@ const Textbox = ({
     size: size,
     useValidationIcon: !validationOnLabel,
     warning: warning,
-    tooltipId: tooltipId
+    validationIconId: validationIconId
   }))), characterCount));
 };
 

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

@@ -25,6 +25,8 @@ var _modalManager = _interopRequireDefault(require("../modal/__internal__/modal-
 
 var _events = _interopRequireDefault(require("../../__internal__/utils/helpers/events"));
 
+var _useLocale = _interopRequireDefault(require("../../hooks/__internal__/useLocale"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
@@ -47,6 +49,7 @@ const Toast = ({
   variant,
   ...restProps
 }) => {
+  const locale = (0, _useLocale.default)();
   const toastRef = (0, _react.useRef)();
   const timer = (0, _react.useRef)();
   const componentClasses = (0, _react.useMemo)(() => {
@@ -85,6 +88,7 @@ const Toast = ({
   function renderCloseIcon() {
     if (!onDismiss) return null;
     return /*#__PURE__*/_react.default.createElement(_iconButton.default, {
+      "aria-label": locale.toast.ariaLabels.close(),
       "data-element": "close",
       onAction: onDismiss
     }, /*#__PURE__*/_react.default.createElement(_icon.default, {

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

@@ -1,14 +1,13 @@
-export default function useInputAccessibility({ id, error, warning, info, label, labelHelp, fieldHelp, }: {
+export default function useInputAccessibility({ id, error, warning, info, label, fieldHelp, }: {
     id: any;
     error: any;
     warning: any;
     info: any;
     label: any;
-    labelHelp: any;
     fieldHelp: any;
 }): {
     labelId: string | undefined;
-    tooltipId: string | undefined;
+    validationIconId: string | undefined;
     fieldHelpId: string | undefined;
     ariaDescribedBy: string;
     ariaLabelledBy: string | undefined;

package/lib/hooks/__internal__/useInputAccessibility/useInputAccessibility.js

@@ -11,17 +11,16 @@ function useInputAccessibility({
   warning,
   info,
   label,
-  labelHelp,
   fieldHelp
 }) {
   const labelId = label ? `${id}-label` : undefined;
-  const tooltipId = [error, warning, info, labelHelp].filter(validation => typeof validation === "string").length ? `${id}-tooltip` : undefined;
+  const validationIconId = [error, warning, info].filter(validation => typeof validation === "string").length ? `${id}-validation-icon` : undefined;
   const fieldHelpId = fieldHelp ? `${id}-field-help` : undefined;
-  const ariaDescribedBy = [fieldHelpId, tooltipId].filter(Boolean).join(" ");
+  const ariaDescribedBy = [fieldHelpId, validationIconId].filter(Boolean).join(" ");
   const ariaLabelledBy = labelId;
   return {
     labelId,
-    tooltipId,
+    validationIconId,
     fieldHelpId,
     ariaDescribedBy,
     ariaLabelledBy

package/lib/locales/en-gb.js

@@ -28,6 +28,16 @@ var _default = {
   date: {
     dateFnsLocale: () => _dateFnsLocales.enGB
   },
+  dialog: {
+    ariaLabels: {
+      close: () => "Close"
+    }
+  },
+  dialogFullScreen: {
+    ariaLabels: {
+      close: () => "Close"
+    }
+  },
   errors: {
     messages: {
       formSummary:
@@ -85,6 +95,11 @@ var _default = {
   link: {
     skipLinkLabel: () => "Skip to main content"
   },
+  sidebar: {
+    ariaLabels: {
+      close: () => "Close"
+    }
+  },
   switch: {
     on: () => "ON",
     off: () => "OFF"
@@ -106,6 +121,11 @@ var _default = {
   tileSelect: {
     deselect: () => "Deselect"
   },
+  toast: {
+    ariaLabels: {
+      close: () => "Close"
+    }
+  },
   wizards: {
     multiStep: {
       buttons: {

package/lib/locales/locale.d.ts

@@ -19,6 +19,16 @@ interface Locale {
   date: {
     dateFnsLocale: () => DateFnsLocale;
   };
+  dialog: {
+    ariaLabels: {
+      close: () => string;
+    };
+  };
+  dialogFullScreen: {
+    ariaLabels: {
+      close: () => string;
+    };
+  };
   errors: {
     messages: {
       formSummary: (
@@ -53,6 +63,14 @@ interface Locale {
     placeholder: () => string;
     noResultsForTerm: (term: string) => string;
   };
+  link: {
+    skipLinkLabel: () => string;
+  };
+  sidebar: {
+    ariaLabels: {
+      close: () => string;
+    };
+  };
   switch: {
     on: () => string;
     off: () => string;
@@ -74,6 +92,11 @@ interface Locale {
   tileSelect: {
     deselect: () => string;
   };
+  toast: {
+    ariaLabels: {
+      close: () => string;
+    };
+  };
   wizards: {
     multiStep: {
       buttons: {

package/lib/locales/pl-pl.js

@@ -28,6 +28,16 @@ var _default = {
   date: {
     dateFnsLocale: () => _dateFnsLocales.pl
   },
+  dialog: {
+    ariaLabels: {
+      close: () => "Zamknij"
+    }
+  },
+  dialogFullScreen: {
+    ariaLabels: {
+      close: () => "Zamknij"
+    }
+  },
   errors: {
     messages: {
       formSummary:
@@ -83,6 +93,11 @@ var _default = {
   link: {
     skipLinkLabel: () => "Przejdź do treści"
   },
+  sidebar: {
+    ariaLabels: {
+      close: () => "Zamknij"
+    }
+  },
   switch: {
     on: () => "WŁ",
     off: () => "WYŁ"
@@ -104,6 +119,11 @@ var _default = {
   tileSelect: {
     deselect: () => "Odznacz"
   },
+  toast: {
+    ariaLabels: {
+      close: () => "Zamknij"
+    }
+  },
   wizards: {
     multiStep: {
       buttons: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "104.7.1",
+  "version": "104.9.0",
   "description": "A library of reusable React components for easily building user interfaces.",
   "engineStrict": true,
   "engines": {