carbon-react 153.0.0-beta.1 → 153.0.0

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

@@ -72,8 +72,14 @@ const MenuItem = ({
   } = submenuContext;
   const focusFromMenu = focusId === menuItemId.current;
   const focusFromSubmenu = submenuFocusId ? submenuFocusId === menuItemId.current : undefined;
-  const ref = (0, _react.useRef)(null);
-  const firstFocusableChild = ref.current?.querySelector(_focusTrapUtils.defaultFocusableSelectors) ?? null;
+  const [ref, setRef] = (0, _react.useState)(null);
+  const [firstFocusableChild, setFirstFocusableChild] = (0, _react.useState)(null);
+  (0, _react.useLayoutEffect)(() => {
+    const firstFocusable = ref?.querySelector(_focusTrapUtils.defaultFocusableSelectors) ?? null;
+    if (firstFocusable !== firstFocusableChild) {
+      setFirstFocusableChild(firstFocusable);
+    }
+  }, [ref]);
   (0, _react.useEffect)(() => {
     const id = menuItemId.current;
 
@@ -94,7 +100,7 @@ const MenuItem = ({
         firstFocusableChild.focus();
         return;
       }
-      ref.current?.focus();
+      ref?.focus();
     }
   }, [firstFocusableChild, focusFromMenu, focusFromSubmenu]);
   const handleFocus = event => {
@@ -108,7 +114,7 @@ const MenuItem = ({
   const handleKeyDown = event => {
     onKeyDown?.(event);
     if (_events.default.isEscKey(event)) {
-      ref.current?.focus();
+      ref?.focus();
     }
     handleSubmenuKeyDown?.(event);
   };
@@ -123,7 +129,7 @@ const MenuItem = ({
     selected,
     onKeyDown: !inFullscreenView ? handleKeyDown : undefined,
     overrideColor,
-    ref
+    ref: setRef
   };
   if (overriddenVariant === "alternate" && isChildOfSegment && variant === "alternate" && ["white", "black"].includes(menuType)) {
     elementProps.overrideColor = true;
@@ -162,7 +168,7 @@ const MenuItem = ({
     }, rest), children));
   }
   const paddingProps = (0, _utils.filterStyledSystemPaddingProps)(rest);
-  const hasInput = !!ref.current?.querySelector("[data-element='input']");
+  const hasInput = !!ref?.querySelector("[data-element='input']");
   return /*#__PURE__*/_react.default.createElement(_menu2.StyledMenuItem, _extends({
     "data-component": "menu-item",
     "data-element": dataElement,

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

@@ -1,7 +1,11 @@
 import React from "react";
 import { MarginProps } from "styled-system";
 import { TagProps } from "../../__internal__/utils/helpers/tags/tags";
-export type MessageVariant = "error" | "info" | "success" | "warning" | "neutral";
+export interface TypeIconProps {
+    transparent?: boolean;
+    variant: MessageVariant;
+}
+export type MessageVariant = "error" | "info" | "success" | "warning" | "neutral" | "ai";
 export interface MessageProps extends MarginProps, TagProps {
     /** Set the component's content */
     children?: React.ReactNode;

package/lib/components/message/message.component.js

@@ -6,12 +6,12 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.Message = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _typography = _interopRequireDefault(require("../typography"));
-var _message = _interopRequireDefault(require("./message.style"));
-var _typeIcon = _interopRequireDefault(require("./__internal__/type-icon/type-icon.component"));
-var _messageContent = _interopRequireDefault(require("./__internal__/message-content/message-content.component"));
+var _content = _interopRequireDefault(require("../content"));
+var _message = _interopRequireWildcard(require("./message.style"));
 var _tags = _interopRequireDefault(require("../../__internal__/utils/helpers/tags/tags"));
 var _icon = _interopRequireDefault(require("../icon"));
 var _iconButton = _interopRequireDefault(require("../icon-button"));
+var _aiIcon = _interopRequireDefault(require("../../__internal__/ai-icon"));
 var _utils = require("../../style/utils");
 var _useLocale = _interopRequireDefault(require("../../hooks/__internal__/useLocale"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -31,38 +31,52 @@ const Message = exports.Message = /*#__PURE__*/_react.default.forwardRef(({
   width,
   ...props
 }, ref) => {
-  const messageRef = (0, _react.useRef)(null);
-  const refToPass = ref || messageRef;
+  const localRef = (0, _react.useRef)(null);
+  const messageRef = ref || localRef;
+  const locale = (0, _useLocale.default)();
   const marginProps = (0, _utils.filterStyledSystemMarginProps)(props);
-  const l = (0, _useLocale.default)();
-  const renderCloseIcon = () => {
-    if (!showCloseIcon || !onDismiss) return null;
-    return /*#__PURE__*/_react.default.createElement(_iconButton.default, {
-      "data-element": "close",
-      "aria-label": closeButtonAriaLabel || l.message.closeButtonAriaLabel(),
-      onClick: onDismiss
-    }, /*#__PURE__*/_react.default.createElement(_icon.default, {
-      type: "close"
-    }));
+  const VARIANT_ICON_MAP = {
+    neutral: "info",
+    success: "tick_circle",
+    error: "error",
+    warning: "warning",
+    info: "info"
   };
-  return open ? /*#__PURE__*/_react.default.createElement(_message.default, _extends({}, (0, _tags.default)("Message", props), {
+  if (!open) {
+    return null;
+  }
+  return /*#__PURE__*/_react.default.createElement(_message.default, _extends({}, (0, _tags.default)("Message", props), {
     transparent: transparent,
     variant: variant,
     id: id,
     width: width,
-    ref: refToPass
+    ref: messageRef
   }, marginProps, {
     tabIndex: -1
-  }), /*#__PURE__*/_react.default.createElement(_typeIcon.default, {
+  }), /*#__PURE__*/_react.default.createElement(_message.TypeIconStyle, {
     variant: variant,
     transparent: transparent
-  }), /*#__PURE__*/_react.default.createElement(_typography.default, {
+  }, variant === "ai" ? /*#__PURE__*/_react.default.createElement(_aiIcon.default, {
+    "data-role": "ai-icon"
+  }) : /*#__PURE__*/_react.default.createElement(_icon.default, {
+    "data-role": "category-icon",
+    type: VARIANT_ICON_MAP[variant]
+  })), /*#__PURE__*/_react.default.createElement(_typography.default, {
     screenReaderOnly: true
-  }, l.message[variant]()), /*#__PURE__*/_react.default.createElement(_messageContent.default, {
-    showCloseIcon: showCloseIcon,
-    title: title,
-    reduceLeftPadding: transparent
-  }, children), renderCloseIcon()) : null;
+  }, locale.message?.[variant]?.()), /*#__PURE__*/_react.default.createElement(_message.MessageContent, {
+    "data-element": "message-content",
+    "data-role": "message-content"
+  }, !showCloseIcon || !onDismiss ? /*#__PURE__*/_react.default.createElement(_content.default, {
+    title: title
+  }, children) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_content.default, {
+    title: title
+  }, children), /*#__PURE__*/_react.default.createElement(_iconButton.default, {
+    "data-element": "close",
+    "aria-label": closeButtonAriaLabel || locale.message.closeButtonAriaLabel(),
+    onClick: onDismiss
+  }, /*#__PURE__*/_react.default.createElement(_icon.default, {
+    type: "close"
+  })))));
 });
 Message.displayName = "Message";
 var _default = exports.default = Message;

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

@@ -1,9 +1,12 @@
 import { MarginProps } from "styled-system";
-import { MessageVariant } from "./message.component";
+import { MessageVariant, TypeIconProps } from "./message.component";
 type MessageStyleProps = {
     variant?: MessageVariant;
     transparent?: boolean;
     width?: string;
 };
 declare const MessageStyle: import("styled-components").StyledComponent<"div", any, MessageStyleProps & MarginProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>>, never>;
+declare const MessageContent: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare const TypeIconStyle: import("styled-components").StyledComponent<"div", any, TypeIconProps, never>;
 export default MessageStyle;
+export { MessageContent, TypeIconStyle };

package/lib/components/message/message.style.js

@@ -3,11 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.TypeIconStyle = exports.MessageContent = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _styledSystem = require("styled-system");
 var _base = _interopRequireDefault(require("../../style/themes/base"));
-var _iconButton = _interopRequireDefault(require("../icon-button/icon-button.style"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -16,13 +15,12 @@ const messageVariants = {
   info: "var(--colorsSemanticInfo500)",
   success: "var(--colorsSemanticPositive500)",
   warning: "var(--colorsSemanticCaution500)",
-  neutral: "var(--colorsSemanticNeutral500)"
+  neutral: "var(--colorsSemanticNeutral500)",
+  ai: "var(--colorsUtilityYin100)"
 };
 const MessageStyle = _styledComponents.default.div`
   position: relative;
   display: flex;
-  justify-content: flex-start;
-  align-content: center;
   border-radius: var(--borderRadius100);
   overflow: hidden;
   border: 1px solid ${({
@@ -42,19 +40,46 @@ const MessageStyle = _styledComponents.default.div`
       background: transparent;
     `}
 
-  ${_iconButton.default} {
-    position: absolute;
-    right: 20px;
-    top: 50%;
-    transform: translateY(-50%);
-  }
-
   ${({
   width
 }) => width && `width: ${width};`}
-
   ${_styledSystem.margin}
 `;
+const MessageContent = exports.MessageContent = _styledComponents.default.div`
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: var(--spacing200);
+  gap: var(--spacing300);
+`;
+const TypeIconStyle = exports.TypeIconStyle = _styledComponents.default.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: ${({
+  variant
+}) => messageVariants[variant]};
+  min-width: 30px;
+
+  span {
+    &:before {
+      color: var(--colorsUtilityYang100);
+    }
+  }
+
+  ${({
+  transparent,
+  variant
+}) => transparent && (0, _styledComponents.css)`
+      background-color: transparent;
+      span {
+        &:before {
+          color: ${messageVariants[variant]};
+        }
+      }
+    `}
+`;
 MessageStyle.defaultProps = {
   theme: _base.default
 };

package/lib/components/portrait/portrait.style.js

@@ -30,7 +30,6 @@ const StyledCustomImg = exports.StyledCustomImg = _styledComponents.default.img`
 `;
 
 // && is used here to increase the specificity
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
 const StyledIcon = exports.StyledIcon = (0, _styledComponents.default)(_icon.default)`
   && {
     color: inherit;

package/lib/components/preview/preview.style.js

@@ -72,7 +72,7 @@ const StyledPreviewPlaceholder = exports.StyledPreviewPlaceholder = _styledCompo
       animation: ${shimmer} 2s ease infinite;
 
       ${isLastLine && shape === "text" && (0, _styledComponents.css)`
-        width: calc(; ${width || getWidth(shape)}*0.8);
+        width: calc(${width || getWidth(shape)}*0.8);
       `}
 
       ${shape === "circle" && (0, _styledComponents.css)`

package/lib/components/select/__internal__/select-textbox/select-textbox.component.js

@@ -79,7 +79,7 @@ const SelectTextbox = /*#__PURE__*/_react.default.forwardRef(({
       isInputInSelect: true
     }
   }, /*#__PURE__*/_react.default.createElement(_textbox.default, _extends({
-    ariaDescribedBy: ariaDescribedBy,
+    "aria-describedby": ariaDescribedBy,
     "aria-label": ariaLabel,
     "data-element": "select-input",
     "data-role": "select-textbox",

package/lib/components/select/simple-select/simple-select.component.js

@@ -351,7 +351,7 @@ const SimpleSelect = exports.SimpleSelect = /*#__PURE__*/_react.default.forwardR
     "aria-controls": selectListId.current,
     activeDescendantId: activeDescendantId,
     ariaLabelledby: ariaLabelledby,
-    ariaDescribedBy: ariaDescribedBy,
+    "aria-describedby": ariaDescribedBy,
     isOpen: isOpen
   }, getTextboxProps()))), selectList);
 });

package/lib/components/split-button/split-button-toggle.style.d.ts

@@ -3,6 +3,7 @@ type StyledSplitButtonToggleProps = {
     disabled: boolean;
     displayed: boolean;
     size: "small" | "medium" | "large";
+    isWhite?: boolean;
 };
 declare const StyledSplitButtonToggle: import("styled-components").StyledComponent<"button", any, import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & Omit<import("../button").ButtonProps, "buttonType"> & {
     iconOnly?: boolean | undefined;

package/lib/components/split-button/split-button-toggle.style.js

@@ -21,12 +21,13 @@ const StyledSplitButtonToggle = (0, _styledComponents.default)(_button.default)`
   buttonType,
   disabled,
   displayed,
-  size
+  size,
+  isWhite
 }) => (0, _styledComponents.css)`
     border-top-left-radius: var(--borderRadius000);
     border-bottom-left-radius: var(--borderRadius000);
 
-    ${!disabled && displayed ? (0, _styledComponents.css)`
+    ${!disabled && displayed && !isWhite ? (0, _styledComponents.css)`
           background-color: var(--colorsActionMajor500);
           border-color: var(--colorsActionMajor500);
 
@@ -39,6 +40,21 @@ const StyledSplitButtonToggle = (0, _styledComponents.default)(_button.default)`
             border-left-color: var(--colorsSemanticFocus500);
           }
         ` : ""}
+
+    ${!disabled && displayed && isWhite ? (0, _styledComponents.css)`
+          background-color: var(--colorsActionMajorYang100);
+          border-color: var(--colorsActionMajorYang100);
+
+          &,
+          ${_icon.default} {
+            color: var(--colorsYin100);
+          }
+
+          &:focus {
+            border-left-color: var(--colorsSemanticFocus500);
+          }
+        ` : ""}
+
     ${!disabled && buttonType === "primary" && `
       position: relative;
       &::before {
@@ -72,6 +88,18 @@ const StyledSplitButtonToggle = (0, _styledComponents.default)(_button.default)`
         color: var(--colorsActionMajorYang100);
       }
     }
+
+    ${!disabled && isWhite && `
+      &:focus {
+        background-color: var(--colorsActionMajorYang100);
+        border-color: var(--colorsActionMajorYang100);
+
+        &,
+        ${_icon.default} {
+          color: var(--colorsYin100);
+        }
+      }
+    `}
   `}
 `;
 StyledSplitButtonToggle.defaultProps = {

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

@@ -25,6 +25,8 @@ export interface SplitButtonProps extends React.ButtonHTMLAttributes<HTMLButtonE
     text: string;
     /** Sets rendering position of menu */
     position?: "left" | "right";
+    /** Renders the white variant of the secondary split button */
+    isWhite?: boolean;
 }
 export type SplitButtonHandle = {
     /** Programmatically focus the main button */

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

@@ -41,6 +41,7 @@ const SplitButton = exports.SplitButton = /*#__PURE__*/(0, _react.forwardRef)(({
   "data-element": dataElement,
   "data-role": dataRole,
   "aria-label": ariaLabel,
+  isWhite = false,
   ...rest
 }, ref) => {
   const locale = (0, _useLocale.default)();
@@ -51,6 +52,7 @@ const SplitButton = exports.SplitButton = /*#__PURE__*/(0, _react.forwardRef)(({
   const {
     isInFlatTable
   } = (0, _react.useContext)(_flatTable.default);
+  const shouldRenderIsWhiteVariant = buttonType === "secondary" && isWhite;
   (0, _react.useImperativeHandle)(ref, () => ({
     focusMainButton() {
       mainButtonRef.current?.focus();
@@ -85,12 +87,14 @@ const SplitButton = exports.SplitButton = /*#__PURE__*/(0, _react.forwardRef)(({
     onClick: handleMainClick,
     size,
     subtext,
+    isWhite: shouldRenderIsWhiteVariant,
     ...(0, _utils.filterOutStyledSystemSpacingProps)(rest)
   };
   const handleToggleClick = () => {
     showButtons();
   };
   const toggleButtonProps = {
+    isWhite: shouldRenderIsWhiteVariant,
     disabled,
     displayed: showAdditionalButtons,
     onTouchStart: showButtons,

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

@@ -8,7 +8,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _tags = _interopRequireDefault(require("../../__internal__/utils/helpers/tags"));
 var _input = require("../../__internal__/input");
 var _formField = _interopRequireDefault(require("../../__internal__/form-field"));
-var _useCharacterCount = _interopRequireDefault(require("../../hooks/__internal__/useCharacterCount"));
+var _useCharacterCount = _interopRequireDefault(require("../../hooks/useCharacterCount"));
 var _input2 = _interopRequireDefault(require("../../__internal__/input/input.component"));
 var _inputBehaviour = require("../../__internal__/input-behaviour");
 var _inputIconToggle = _interopRequireDefault(require("../../__internal__/input-icon-toggle"));
@@ -28,9 +28,12 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 let deprecateUncontrolledWarnTriggered = false;
+let deprecatedAriaDescribedByWarnTriggered = false;
 let warnBorderRadiusArrayTooLarge = false;
 const Textarea = exports.OriginalTextarea = exports.Textarea = /*#__PURE__*/_react.default.forwardRef(({
   "aria-labelledby": ariaLabelledBy,
+  "aria-describedby": ariaDescribedByProp,
+  ariaDescribedBy: ariaDescribedByPropDeprecated,
   autoFocus,
   inputHint,
   fieldHelp,
@@ -112,6 +115,10 @@ const Textarea = exports.OriginalTextarea = exports.Textarea = /*#__PURE__*/_rea
     deprecateUncontrolledWarnTriggered = true;
     _logger.default.deprecate("Uncontrolled behaviour in `Textarea` is deprecated and support will soon be removed. Please make sure all your inputs are controlled.");
   }
+  if (!deprecatedAriaDescribedByWarnTriggered && ariaDescribedByPropDeprecated) {
+    deprecatedAriaDescribedByWarnTriggered = true;
+    _logger.default.deprecate("The `ariaDescribedBy` prop in `Textarea` is deprecated and will soon be removed, please use `aria-describedby` instead.");
+  }
   if (Array.isArray(borderRadius) && borderRadius.length > 4 && !warnBorderRadiusArrayTooLarge) {
     // eslint-disable-next-line no-console
     console.warn("The `borderRadius` prop in `Textarea` component only supports up to 4 values.");
@@ -181,7 +188,7 @@ const Textarea = exports.OriginalTextarea = exports.Textarea = /*#__PURE__*/_rea
   const hasIconInside = !!(inputIcon || validationId && !validationOnLabel);
   const hintId = (0, _react.useRef)((0, _guid.default)());
   const inputHintId = inputHint ? hintId.current : undefined;
-  const combinedAriaDescribedBy = [ariaDescribedBy, inputHintId, visuallyHiddenHintId].filter(Boolean).join(" ");
+  const combinedAriaDescribedBy = [ariaDescribedBy, inputHintId, visuallyHiddenHintId, ariaDescribedByProp || ariaDescribedByPropDeprecated].filter(Boolean).join(" ");
   const input = /*#__PURE__*/_react.default.createElement(_input.InputPresentation, {
     disabled: disabled,
     readOnly: readOnly,
@@ -195,7 +202,7 @@ const Textarea = exports.OriginalTextarea = exports.Textarea = /*#__PURE__*/_rea
   }, /*#__PURE__*/_react.default.createElement(_input2.default, _extends({
     "aria-invalid": !!error,
     "aria-labelledby": ariaLabelledBy,
-    ariaDescribedBy: combinedAriaDescribedBy,
+    "aria-describedby": combinedAriaDescribedBy,
     autoFocus: autoFocus,
     name: name,
     value: value,

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

@@ -17,7 +17,7 @@ var _utils = require("../../style/utils");
 var _newValidation = _interopRequireDefault(require("../carbon-provider/__internal__/new-validation.context"));
 var _numeralDate = _interopRequireDefault(require("../numeral-date/__internal__/numeral-date.context"));
 var _logger = _interopRequireDefault(require("../../__internal__/utils/logger"));
-var _useCharacterCount = _interopRequireDefault(require("../../hooks/__internal__/useCharacterCount"));
+var _useCharacterCount = _interopRequireDefault(require("../../hooks/useCharacterCount"));
 var _useUniqueId = _interopRequireDefault(require("../../hooks/__internal__/useUniqueId"));
 var _guid = _interopRequireDefault(require("../../__internal__/utils/helpers/guid"));
 var _useInputAccessibility = _interopRequireDefault(require("../../hooks/__internal__/useInputAccessibility/useInputAccessibility"));
@@ -32,8 +32,11 @@ const SIZE_DEFAULT = exports.SIZE_DEFAULT = "medium";
 const LABEL_WIDTH_DEFAULT = exports.LABEL_WIDTH_DEFAULT = 30;
 const LABEL_VALIDATION_DEFAULT = exports.LABEL_VALIDATION_DEFAULT = false;
 let deprecateUncontrolledWarnTriggered = false;
+let deprecatedAriaDescribedByWarnTriggered = false;
 const Textbox = exports.Textbox = /*#__PURE__*/_react.default.forwardRef(({
   "aria-labelledby": ariaLabelledBy,
+  "aria-describedby": ariaDescribedByProp,
+  ariaDescribedBy: ariaDescribedByDeprecated,
   align = ALIGN_DEFAULT,
   autoFocus,
   children,
@@ -115,6 +118,10 @@ const Textbox = exports.Textbox = /*#__PURE__*/_react.default.forwardRef(({
     deprecateUncontrolledWarnTriggered = true;
     _logger.default.deprecate("Uncontrolled behaviour in `Textbox` is deprecated and support will soon be removed. Please make sure all your inputs are controlled.");
   }
+  if (!deprecatedAriaDescribedByWarnTriggered && ariaDescribedByDeprecated) {
+    deprecatedAriaDescribedByWarnTriggered = true;
+    _logger.default.deprecate("The `ariaDescribedBy` prop in `Textbox` is deprecated and will soon be removed, please use `aria-describedby` instead.");
+  }
   const {
     labelId,
     validationId,
@@ -131,7 +138,7 @@ const Textbox = exports.Textbox = /*#__PURE__*/_react.default.forwardRef(({
   });
   const hintId = (0, _react.useRef)((0, _guid.default)());
   const inputHintId = inputHint ? hintId.current : undefined;
-  const combinedAriaDescribedBy = [ariaDescribedBy, inputHintId, visuallyHiddenHintId].filter(Boolean).join(" ");
+  const combinedAriaDescribedBy = [ariaDescribedBy, inputHintId, visuallyHiddenHintId, ariaDescribedByProp || ariaDescribedByDeprecated].filter(Boolean).join(" ");
   const hasIconInside = !!(inputIcon || validationId && !validationOnLabel);
   const input = /*#__PURE__*/_react.default.createElement(_input.InputPresentation, {
     align: align,
@@ -155,7 +162,7 @@ const Textbox = exports.Textbox = /*#__PURE__*/_react.default.forwardRef(({
     align: align,
     "aria-invalid": !!error,
     "aria-labelledby": ariaLabelledBy,
-    ariaDescribedBy: combinedAriaDescribedBy,
+    "aria-describedby": combinedAriaDescribedBy,
     autoFocus: autoFocus,
     deferTimeout: deferTimeout,
     disabled: disabled,

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

@@ -1,6 +1,6 @@
 import { SpaceProps } from "styled-system";
 import { TileProps } from "./tile.component";
-declare const StyledTile: import("styled-components").StyledComponent<"div", any, Pick<TileProps, "width" | "height" | "variant" | "roundness" | "borderWidth" | "borderVariant" | "highlightVariant"> & {
+declare const StyledTile: import("styled-components").StyledComponent<"div", any, Pick<TileProps, "width" | "height" | "variant" | "highlightVariant" | "roundness" | "borderWidth" | "borderVariant"> & {
     isHorizontal?: boolean | undefined;
 } & SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol>, never>;
 export default StyledTile;

package/lib/components/time/index.d.ts

@@ -1,2 +1,2 @@
 export { default as Time } from "./time.component";
-export type { TimeValue, TimeProps, TimeHandle, ToggleValue, } from "./time.component";
+export type { TimeValue, TimeProps, TimeHandle, ToggleValue, TimeInputEvent, } from "./time.component";

package/lib/components/time/time.component.js

@@ -78,6 +78,21 @@ const Time = /*#__PURE__*/_react.default.forwardRef(({
   const minsAriaLabel = minutesAriaLabel || locale.time.minutesAriaLabelText();
   const hoursRef = (0, _react.useRef)(null);
   const minsRef = (0, _react.useRef)(null);
+  (0, _react.useEffect)(() => {
+    const updates = [...inputValues];
+    if (inputValues[0] !== hourValue) {
+      updates[0] = hourValue;
+    }
+    if (inputValues[1] !== minuteValue) {
+      updates[1] = minuteValue;
+    }
+    if (inputValues[0] !== hourValue || inputValues[1] !== minuteValue) {
+      setInputValues(updates);
+      const formattedHours = hourValue.length ? hourValue.padStart(2, "0") : hourValue;
+      const formattedMinutes = minuteValue.length ? minuteValue.padStart(2, "0") : minuteValue;
+      setFormattedInputValues([formattedHours, formattedMinutes]);
+    }
+  }, [hourValue, minuteValue, inputValues]);
   const computedValidations = (hrs, mins) => {
     const hoursIsString = typeof hrs === "string";
     const minutesIsString = typeof mins === "string";

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

@@ -9,6 +9,7 @@ var _reactTransitionGroup = require("react-transition-group");
 var _icon = _interopRequireDefault(require("../icon"));
 var _tags = _interopRequireDefault(require("../../__internal__/utils/helpers/tags/tags"));
 var _toast = require("./toast.style");
+var _message = require("../message/message.style");
 var _iconButton = _interopRequireDefault(require("../icon-button"));
 var _events = _interopRequireDefault(require("../../__internal__/utils/helpers/events"));
 var _useLocale = _interopRequireDefault(require("../../hooks/__internal__/useLocale"));
@@ -141,7 +142,7 @@ const Toast = exports.Toast = /*#__PURE__*/_react.default.forwardRef(({
     }, !disableAutoFocus && {
       tabIndex,
       onBlur: () => setTabIndex(undefined)
-    }), !isNotice && /*#__PURE__*/_react.default.createElement(_toast.TypeIcon, {
+    }), !isNotice && /*#__PURE__*/_react.default.createElement(_message.TypeIconStyle, {
       variant: isNotification ? "info" : variant,
       "data-role": "toast-type-icon"
     }, /*#__PURE__*/_react.default.createElement(_icon.default, {

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

@@ -1,12 +1,11 @@
 /// <reference types="react" />
-import TypeIcon from "../message/__internal__/type-icon/type-icon.style";
 import { MessageVariant } from "../message/message.component";
 declare const StyledPortal: import("styled-components").StyledComponent<({ children, className, id, onReposition, inertOptOut, }: import("../portal/portal").PortalProps) => import("react").JSX.Element, any, {
     align?: "center" | "left" | "right" | undefined;
     alignY?: "center" | "top" | "bottom" | undefined;
     isNotice?: boolean | undefined;
 }, never>;
-type ToastVariants = MessageVariant;
+type ToastVariants = Exclude<MessageVariant, "ai">;
 type ToastStyleProps = {
     align?: "left" | "center" | "right";
     alignY?: "top" | "center" | "bottom";
@@ -24,4 +23,4 @@ declare const ToastWrapper: import("styled-components").StyledComponent<"div", a
     align?: "center" | "left" | "right" | undefined;
     isNotice?: boolean | undefined;
 }, never>;
-export { StyledPortal, StyledToast, TypeIcon, StyledToastContent, ToastWrapper, };
+export { StyledPortal, StyledToast, StyledToastContent, ToastWrapper };

package/lib/components/toast/toast.style.js

@@ -4,14 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ToastWrapper = exports.StyledToastContent = exports.StyledToast = exports.StyledPortal = void 0;
-Object.defineProperty(exports, "TypeIcon", {
-  enumerable: true,
-  get: function () {
-    return _typeIcon.default;
-  }
-});
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
-var _typeIcon = _interopRequireDefault(require("../message/__internal__/type-icon/type-icon.style"));
 var _iconButton = _interopRequireDefault(require("../icon-button/icon-button.style"));
 var _portal = _interopRequireDefault(require("../portal/portal"));
 var _base = _interopRequireDefault(require("../../style/themes/base"));

package/lib/components/vertical-menu/vertical-menu-full-screen/vertical-menu-full-screen.component.d.ts

@@ -12,5 +12,5 @@ export interface VerticalMenuFullScreenProps extends TagProps {
     /** A callback to be called when the close icon is clicked or enter is pressed when focused */
     onClose: (ev: React.KeyboardEvent<HTMLButtonElement> | React.MouseEvent<HTMLButtonElement> | KeyboardEvent) => void;
 }
-export declare const VerticalMenuFullScreen: ({ "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, children, isOpen, onClose, ...rest }: VerticalMenuFullScreenProps) => React.JSX.Element | null;
+export declare const VerticalMenuFullScreen: ({ "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, children, isOpen, onClose, ...rest }: VerticalMenuFullScreenProps) => React.JSX.Element;
 export default VerticalMenuFullScreen;