carbon-react 154.3.2 → 154.4.0-beta.0

package/esm/components/time/time.component.js

@@ -1,274 +1 @@
-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); }
-import React, { useCallback, useImperativeHandle, useRef, useState, useEffect } from "react";
-import guid from "../../__internal__/utils/helpers/guid";
-import useLocale from "../../hooks/__internal__/useLocale";
-import tagComponent from "../../__internal__/utils/helpers/tags/tags";
-import useInputAccessibility from "../../hooks/__internal__/useInputAccessibility";
-import { filterStyledSystemMarginProps } from "../../style/utils";
-import Logger from "../../__internal__/utils/logger";
-import Fieldset from "../../__internal__/fieldset";
-import Box from "../box";
-import ErrorBorder from "../textbox/textbox.style";
-import ValidationMessage from "../../__internal__/validation-message";
-import Number from "../number";
-import Typography from "../typography";
-import StyledLabel from "./time.style";
-import { TimeToggle } from "./__internal__/time-toggle";
-import HintText from "../../__internal__/hint-text";
-let deprecateOptionalWarnTriggered = false;
-const Time = /*#__PURE__*/React.forwardRef(({
-  label,
-  labelAlign,
-  fieldLabelsAlign,
-  size = "medium",
-  inputHint,
-  hoursInputProps = {},
-  minutesInputProps = {},
-  value,
-  name,
-  onChange,
-  onBlur,
-  required,
-  isOptional,
-  disabled,
-  readOnly,
-  toggleProps = {},
-  ...rest
-}, ref) => {
-  if (!deprecateOptionalWarnTriggered && isOptional) {
-    deprecateOptionalWarnTriggered = true;
-    Logger.deprecate("`isOptional` is deprecated in Time and support will soon be removed. If the value of this component is not required, use the `required` prop and set it to false instead.");
-  }
-  const {
-    id: hoursInputId,
-    label: hoursLabel,
-    "aria-label": hoursAriaLabel,
-    error: hoursError,
-    warning: hoursWarning
-  } = hoursInputProps;
-  const {
-    id: minutesInputId,
-    label: minutesLabel,
-    "aria-label": minutesAriaLabel,
-    error: minutesError,
-    warning: minutesWarning
-  } = minutesInputProps;
-  const internalHrsId = useRef(hoursInputId || guid());
-  const internalMinsId = useRef(minutesInputId || guid());
-  const inputHintId = useRef(inputHint ? guid() : undefined);
-  const internalId = useRef(`${internalHrsId.current} ${internalMinsId.current}`);
-  const {
-    hours: hourValue,
-    minutes: minuteValue,
-    period: toggleValue
-  } = value;
-  const formattedHoursValue = hourValue.length ? hourValue.padStart(2, "0") : hourValue;
-  const formattedMinutesValue = minuteValue.length ? minuteValue.padStart(2, "0") : minuteValue;
-  const [inputValues, setInputValues] = useState([hourValue, minuteValue]);
-  const [formattedInputValues, setFormattedInputValues] = useState([formattedHoursValue, formattedMinutesValue]);
-  const locale = useLocale();
-  const showToggle = toggleValue !== undefined;
-  const [period, setPeriod] = useState(toggleValue);
-  const hrsLabel = hoursLabel || locale.time.hoursLabelText();
-  const minsLabel = minutesLabel || locale.time.minutesLabelText();
-  const hrsAriaLabel = hoursAriaLabel || locale.time.hoursAriaLabelText();
-  const minsAriaLabel = minutesAriaLabel || locale.time.minutesAriaLabelText();
-  const hoursRef = useRef(null);
-  const minsRef = useRef(null);
-  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";
-    if (!hoursIsString && !minutesIsString) {
-      return hrs || mins;
-    }
-    if (hoursIsString && !minutesIsString) {
-      return hrs;
-    }
-    if (minutesIsString && !hoursIsString) {
-      return mins;
-    }
-    return `${hrs} ${mins}`;
-  };
-  const error = computedValidations(hoursError, minutesError);
-  const warning = computedValidations(hoursWarning, minutesWarning);
-  const hasValidationFailure = !!(error || warning);
-  const {
-    validationId,
-    ariaDescribedBy
-  } = useInputAccessibility({
-    id: internalId.current,
-    validationRedesignOptIn: true,
-    error,
-    warning
-  });
-  const combinedAriaDescribedBy = [ariaDescribedBy, inputHintId.current].filter(Boolean).join(" ");
-  useImperativeHandle(ref, () => ({
-    focusHoursInput() {
-      hoursRef.current?.focus();
-    },
-    focusMinutesInput() {
-      minsRef.current?.focus();
-    }
-  }), []);
-  const handleChange = (ev, inputName) => {
-    const hours = inputName === "hrs" ? ev.target.value : inputValues[0];
-    const minutes = inputName === "mins" ? ev.target.value : inputValues[1];
-    setInputValues([hours, minutes]);
-    const formattedHours = hours.length ? hours.padStart(2, "0") : hours;
-    const formattedMinutes = minutes.length ? minutes.padStart(2, "0") : minutes;
-    setFormattedInputValues([formattedHours, formattedMinutes]);
-    onChange({
-      target: {
-        name,
-        id: internalId.current,
-        value: {
-          hours,
-          minutes,
-          period,
-          formattedHours,
-          formattedMinutes
-        }
-      }
-    });
-  };
-  const handlePeriodChange = periodName => {
-    const [hours, minutes] = inputValues;
-    const [formattedHours, formattedMinutes] = formattedInputValues;
-    setPeriod(periodName);
-    onChange({
-      target: {
-        name,
-        id: internalId.current,
-        value: {
-          hours,
-          minutes,
-          period: periodName,
-          formattedHours,
-          formattedMinutes
-        }
-      }
-    });
-  };
-  const handleBlur = useCallback(ev => {
-    setTimeout(() => {
-      const [hours, minutes] = inputValues;
-      const [formattedHours, formattedMinutes] = formattedInputValues;
-      const timeValueObj = {
-        hours,
-        minutes,
-        period,
-        formattedHours,
-        formattedMinutes
-      };
-      if (hoursRef.current !== document.activeElement && minsRef.current !== document.activeElement) {
-        onBlur?.(ev, timeValueObj);
-      }
-    });
-  }, [formattedInputValues, inputValues, onBlur, period]);
-  return /*#__PURE__*/React.createElement(Fieldset, _extends({
-    legend: label,
-    legendMargin: {
-      mb: 0
-    },
-    width: "min-content",
-    legendAlign: labelAlign,
-    isRequired: required,
-    isOptional: isOptional,
-    isDisabled: disabled,
-    name: name,
-    id: internalId.current
-  }, rest, filterStyledSystemMarginProps(rest), tagComponent("time", rest), {
-    "aria-describedby": inputHint ? combinedAriaDescribedBy : ariaDescribedBy
-  }), inputHint && /*#__PURE__*/React.createElement(HintText, {
-    align: labelAlign,
-    id: inputHintId.current,
-    isDisabled: disabled
-  }, inputHint), /*#__PURE__*/React.createElement(Box, {
-    position: "relative",
-    mt: inputHint ? 0 : 1
-  }, /*#__PURE__*/React.createElement(ValidationMessage, {
-    validationId: validationId,
-    error: error,
-    warning: warning
-  }), hasValidationFailure && /*#__PURE__*/React.createElement(ErrorBorder, {
-    warning: !!(!error && warning)
-  }), /*#__PURE__*/React.createElement(Box, {
-    display: "flex"
-  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(StyledLabel, {
-    "aria-label": hrsAriaLabel,
-    htmlFor: internalHrsId.current,
-    disabled: disabled,
-    align: fieldLabelsAlign
-  }, hrsLabel), /*#__PURE__*/React.createElement(Number, _extends({}, hoursInputProps, {
-    label: undefined,
-    "data-component": "hours",
-    ref: hoursRef,
-    value: hourValue,
-    onChange: ev => handleChange(ev, "hrs"),
-    onBlur: handleBlur,
-    id: internalHrsId.current,
-    size: size,
-    error: !!hoursError,
-    warning: !!hoursWarning,
-    disabled: disabled,
-    readOnly: readOnly,
-    my: 0 // prevents any form spacing being applied
-  }))), /*#__PURE__*/React.createElement(Box, {
-    display: "flex",
-    flexDirection: "column",
-    justifyContent: "center",
-    mx: 1,
-    "aria-hidden": "true"
-  }, /*#__PURE__*/React.createElement("span", null, "\xA0"), /*#__PURE__*/React.createElement(Typography, {
-    isDisabled: disabled,
-    variant: "span",
-    mb: "-4px"
-  }, ":")), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(StyledLabel, {
-    "aria-label": minsAriaLabel,
-    htmlFor: internalMinsId.current,
-    disabled: disabled,
-    align: fieldLabelsAlign
-  }, minsLabel), /*#__PURE__*/React.createElement(Number, _extends({}, minutesInputProps, {
-    label: undefined,
-    "data-component": "minutes",
-    ref: minsRef,
-    value: minuteValue,
-    onChange: ev => handleChange(ev, "mins"),
-    onBlur: handleBlur,
-    id: internalMinsId.current,
-    size: size,
-    error: !!minutesError,
-    warning: !!minutesWarning,
-    disabled: disabled,
-    readOnly: readOnly,
-    my: 0 // prevents any form spacing being applied
-  }))), showToggle && /*#__PURE__*/React.createElement(Box, {
-    display: "flex",
-    flexDirection: "column",
-    justifyContent: "flex-end",
-    width: "max-content"
-  }, /*#__PURE__*/React.createElement(TimeToggle, {
-    toggleProps: toggleProps,
-    size: size,
-    onChange: handlePeriodChange,
-    toggleValue: toggleValue,
-    disabled: disabled || readOnly
-  })))));
-});
-Time.displayName = "Time";
-export default Time;
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import r,{useRef as n,useState as i,useEffect as o,useImperativeHandle as l,useCallback as a}from"react";import s from"../../__internal__/utils/helpers/guid/index.js";import u from"../../hooks/__internal__/useLocale/useLocale.js";import d from"../../__internal__/utils/helpers/tags/tags.js";import m from"../../hooks/__internal__/useInputAccessibility/useInputAccessibility.js";import"../../style/utils/filter-styled-system-padding-props.js";import c from"../../style/utils/filter-styled-system-margin-props.js";import p from"../../__internal__/utils/logger/index.js";import f from"../../__internal__/fieldset/fieldset.component.js";import{Box as g}from"../box/box.component.js";import b from"../textbox/textbox.style.js";import h from"../../__internal__/validation-message/validation-message.component.js";import{Number as y}from"../number/number.component.js";import{Typography as O}from"../typography/typography.component.js";import j from"./time.style.js";import v from"./__internal__/time-toggle/time-toggle.component.js";import{HintText as _}from"../../__internal__/hint-text/hint-text.component.js";function x(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function w(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},n=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),n.forEach((function(t){x(e,t,r[t])}))}return e}function P(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))})),e}let I=!1;const S=r.forwardRef(((r,x)=>{var{label:S,labelAlign:D,fieldLabelsAlign:A,size:L="medium",inputHint:C,hoursInputProps:T={},minutesInputProps:B={},value:H,name:k,onChange:q,onBlur:z,required:E,isOptional:M,disabled:$,readOnly:R,toggleProps:F={}}=r,N=function(e,t){if(null==e)return{};var r,n,i=function(e,t){if(null==e)return{};var r,n,i={},o=Object.keys(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||(i[r]=e[r]);return i}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(i[r]=e[r])}return i}(r,["label","labelAlign","fieldLabelsAlign","size","inputHint","hoursInputProps","minutesInputProps","value","name","onChange","onBlur","required","isOptional","disabled","readOnly","toggleProps"]);!I&&M&&(I=!0,p.deprecate("`isOptional` is deprecated in Time and support will soon be removed. If the value of this component is not required, use the `required` prop and set it to false instead."));const{id:V,label:G,"aria-label":J,error:K,warning:Q}=T,{id:U,label:W,"aria-label":X,error:Y,warning:Z}=B,ee=n(V||s()),te=n(U||s()),re=n(C?s():void 0),ne=n(`${ee.current} ${te.current}`),{hours:ie,minutes:oe,period:le}=H,ae=ie.length?ie.padStart(2,"0"):ie,se=oe.length?oe.padStart(2,"0"):oe,[ue,de]=i([ie,oe]),[me,ce]=i([ae,se]),pe=u(),fe=void 0!==le,[ge,be]=i(le),he=G||pe.time.hoursLabelText(),ye=W||pe.time.minutesLabelText(),Oe=J||pe.time.hoursAriaLabelText(),je=X||pe.time.minutesAriaLabelText(),ve=n(null),_e=n(null);o((()=>{const e=[...ue];if(ue[0]!==ie&&(e[0]=ie),ue[1]!==oe&&(e[1]=oe),ue[0]!==ie||ue[1]!==oe){de(e);const t=ie.length?ie.padStart(2,"0"):ie,r=oe.length?oe.padStart(2,"0"):oe;ce([t,r])}}),[ie,oe,ue]);const xe=(e,t)=>{const r="string"==typeof e,n="string"==typeof t;return r||n?r&&!n?e:n&&!r?t:`${e} ${t}`:e||t},we=xe(K,Y),Pe=xe(Q,Z),Ie=!(!we&&!Pe),{validationId:Se,ariaDescribedBy:De}=m({id:ne.current,validationRedesignOptIn:!0,error:we,warning:Pe}),Ae=[De,re.current].filter(Boolean).join(" ");l(x,(()=>({focusHoursInput(){var e;null===(e=ve.current)||void 0===e||e.focus()},focusMinutesInput(){var e;null===(e=_e.current)||void 0===e||e.focus()}})),[]);const Le=(e,t)=>{const r="hrs"===t?e.target.value:ue[0],n="mins"===t?e.target.value:ue[1];de([r,n]);const i=r.length?r.padStart(2,"0"):r,o=n.length?n.padStart(2,"0"):n;ce([i,o]),q({target:{name:k,id:ne.current,value:{hours:r,minutes:n,period:ge,formattedHours:i,formattedMinutes:o}}})},Ce=a((e=>{setTimeout((()=>{const[t,r]=ue,[n,i]=me,o={hours:t,minutes:r,period:ge,formattedHours:n,formattedMinutes:i};ve.current!==document.activeElement&&_e.current!==document.activeElement&&(null==z||z(e,o))}))}),[me,ue,z,ge]);return e(f,P(w({legend:S,legendMargin:{mb:0},width:"min-content",legendAlign:D,isRequired:E,isOptional:M,isDisabled:$,name:k,id:ne.current},N,c(N),d("time",N)),{"aria-describedby":C?Ae:De,children:[C&&t(_,{align:D,id:re.current,isDisabled:$,children:C}),e(g,{position:"relative",mt:C?0:1,children:[t(h,{validationId:Se,error:we,warning:Pe}),Ie&&t(b,{warning:!(we||!Pe)}),e(g,{display:"flex",children:[e("div",{children:[t(j,{"aria-label":Oe,htmlFor:ee.current,disabled:$,align:A,children:he}),t(y,P(w({},T),{label:void 0,"data-component":"hours",ref:ve,value:ie,onChange:e=>Le(e,"hrs"),onBlur:Ce,id:ee.current,size:L,error:!!K,warning:!!Q,disabled:$,readOnly:R,my:0}))]}),e(g,{display:"flex",flexDirection:"column",justifyContent:"center",mx:1,"aria-hidden":"true",children:[t("span",{children:" "}),t(O,{isDisabled:$,variant:"span",mb:"-4px",children:":"})]}),e("div",{children:[t(j,{"aria-label":je,htmlFor:te.current,disabled:$,align:A,children:ye}),t(y,P(w({},B),{label:void 0,"data-component":"minutes",ref:_e,value:oe,onChange:e=>Le(e,"mins"),onBlur:Ce,id:te.current,size:L,error:!!Y,warning:!!Z,disabled:$,readOnly:R,my:0}))]}),fe&&t(g,{display:"flex",flexDirection:"column",justifyContent:"flex-end",width:"max-content",children:t(v,{toggleProps:F,size:L,onChange:e=>{const[t,r]=ue,[n,i]=me;be(e),q({target:{name:k,id:ne.current,value:{hours:t,minutes:r,period:e,formattedHours:n,formattedMinutes:i}}})},toggleValue:le,disabled:$||R})})]})]})]}))}));S.displayName="Time";export{S as default};

package/esm/components/time/time.style.js

@@ -1,8 +1 @@
-import styled from "styled-components";
-import Label from "../../__internal__/label";
-const StyledLabel = styled(Label)`
-  label {
-    font-weight: var(--fontWeights400);
-  }
-`;
-export default StyledLabel;
+import e from"styled-components";import t from"../../__internal__/label/label.component.js";const o=e(t).withConfig({displayName:"time.style__StyledLabel",componentId:"sc-d31e7cbe-0"})(["label{font-weight:var(--fontWeights400);}"]);export{o as default};

package/esm/components/toast/index.js

@@ -1 +1 @@
-export { default } from "./toast.component";
+export{Toast as default}from"./toast.component.js";

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

@@ -1,167 +1 @@
-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); }
-import React, { useCallback, useEffect, useRef, useState } from "react";
-import { TransitionGroup, CSSTransition } from "react-transition-group";
-import Icon from "../icon";
-import tagComponent from "../../__internal__/utils/helpers/tags/tags";
-import { StyledToast, StyledToastContent, ToastWrapper, StyledPortal } from "./toast.style";
-import { TypeIconStyle as TypeIcon } from "../message/message.style";
-import IconButton from "../icon-button";
-import Events from "../../__internal__/utils/helpers/events";
-import useLocale from "../../hooks/__internal__/useLocale";
-import useModalManager from "../../hooks/__internal__/useModalManager";
-import guid from "../../__internal__/utils/helpers/guid";
-import Typography from "../typography";
-export const Toast = /*#__PURE__*/React.forwardRef(({
-  align = "center",
-  alignY,
-  children,
-  id,
-  maxWidth,
-  onDismiss,
-  open = true,
-  targetPortalId,
-  timeout,
-  variant = "success",
-  disableAutoFocus,
-  closeButtonDataProps,
-  ...restProps
-}, ref) => {
-  const isNotice = variant === "notice";
-  const isNotification = variant === "notification";
-  const locale = useLocale();
-  const toastIconId = useRef(guid());
-  const toastContentId = useRef(guid());
-  const toastRef = useRef(null);
-  const timer = useRef(null);
-  const toastContentNodeRef = useRef(null);
-  const closeIconRef = useRef(null);
-  const focusedElementBeforeOpening = useRef(null);
-  const [tabIndex, setTabIndex] = useState(0);
-  const ariaLabelledBy = `${!isNotice && toastIconId.current} ${toastContentId.current}`;
-  let refToPass = toastRef;
-  if (ref && typeof ref === "object" && "current" in ref) {
-    refToPass = ref;
-  }
-  const dismissToast = useCallback(ev => {
-    if (onDismiss && Events.isEscKey(ev)) {
-      ev.stopImmediatePropagation();
-      onDismiss(ev);
-    }
-  }, [onDismiss]);
-  useModalManager({
-    open,
-    closeModal: dismissToast,
-    modalRef: refToPass,
-    topModalOverride: true
-  });
-  useEffect(() => {
-    /* istanbul ignore next */
-    if (timer.current) clearTimeout(timer.current);
-    if (!timeout || !open || !onDismiss) {
-      return;
-    }
-    timer.current = setTimeout(() => onDismiss(), +timeout);
-  }, [onDismiss, open, timeout]);
-  useEffect(() => {
-    if (!disableAutoFocus) {
-      if (open) {
-        // 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;
-        setTabIndex(0);
-      }
-    }
-  }, [open, onDismiss, disableAutoFocus]);
-  useEffect(() => {
-    return () => {
-      if (focusedElementBeforeOpening.current) {
-        focusedElementBeforeOpening.current.focus();
-      }
-    };
-  }, []);
-  function renderCloseIcon() {
-    return /*#__PURE__*/React.createElement(IconButton, _extends({
-      "aria-label": locale.toast.ariaLabels.close(),
-      onClick: onDismiss,
-      ref: closeIconRef
-    }, tagComponent("close", {
-      "data-element": "close",
-      ...closeButtonDataProps
-    })), /*#__PURE__*/React.createElement(Icon, {
-      type: "close"
-    }));
-  }
-  const iconToRender = {
-    notification: "alert",
-    neutral: "info",
-    success: "tick_circle",
-    error: "error",
-    info: "info",
-    warning: "warning"
-  };
-  const toastIcon = iconToRender[variant] || "none";
-  function renderToastContent() {
-    if (!open) return null;
-    let toastVariant = "success";
-    if (!isNotice && !isNotification) {
-      toastVariant = variant;
-    }
-    return /*#__PURE__*/React.createElement(CSSTransition, {
-      enter: true,
-      classNames: isNotice ? "toast-alternative" : "toast",
-      timeout: {
-        appear: 1600,
-        enter: 1500,
-        exit: 500
-      },
-      nodeRef: toastContentNodeRef
-    }, /*#__PURE__*/React.createElement(StyledToast, _extends({
-      align: align,
-      alignY: alignY,
-      isNotice: isNotice,
-      isNotification: isNotification
-    }, tagComponent("toast", restProps), {
-      variant: toastVariant,
-      id: id,
-      maxWidth: maxWidth,
-      ref: toastContentNodeRef
-    }, !disableAutoFocus && {
-      tabIndex,
-      onBlur: () => setTabIndex(undefined)
-    }), !isNotice && /*#__PURE__*/React.createElement(TypeIcon, {
-      variant: isNotification ? "info" : variant,
-      "data-role": "toast-type-icon"
-    }, /*#__PURE__*/React.createElement(Icon, {
-      type: toastIcon
-    }), /*#__PURE__*/React.createElement(Typography, {
-      screenReaderOnly: true,
-      id: toastIconId.current
-    }, locale.toast[variant]())), /*#__PURE__*/React.createElement(StyledToastContent, {
-      isNotice: isNotice,
-      isDismiss: !!onDismiss,
-      "data-role": "toast-content",
-      id: toastContentId.current
-    }, children), onDismiss && renderCloseIcon()));
-  }
-  return /*#__PURE__*/React.createElement(StyledPortal, {
-    id: targetPortalId,
-    align: align,
-    alignY: alignY,
-    isNotice: isNotice
-  }, /*#__PURE__*/React.createElement(ToastWrapper, {
-    align: align,
-    ref: refToPass,
-    isNotice: isNotice,
-    "data-role": "toast-wrapper",
-    role: "region",
-    "aria-hidden": !open,
-    "aria-labelledby": open ? ariaLabelledBy : undefined
-  }, /*#__PURE__*/React.createElement(TransitionGroup, null, renderToastContent())));
-});
-Toast.displayName = "Toast";
-export default Toast;
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import r,{useRef as n,useState as o,useCallback as i,useEffect as a}from"react";import{TransitionGroup as c,CSSTransition as l}from"react-transition-group";import s from"../icon/icon.component.js";import u from"../../__internal__/utils/helpers/tags/tags.js";import{StyledPortal as p,ToastWrapper as f,StyledToast as m,StyledToastContent as d}from"./toast.style.js";import{TypeIconStyle as b}from"../message/message.style.js";import g from"../icon-button/icon-button.component.js";import y from"../../__internal__/utils/helpers/events/events.js";import O from"../../hooks/__internal__/useLocale/useLocale.js";import j from"../../hooks/__internal__/useModalManager/useModalManager.js";import h from"../../__internal__/utils/helpers/guid/index.js";import{Typography as v}from"../typography/typography.component.js";function _(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function P(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},n=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),n.forEach((function(t){_(e,t,r[t])}))}return e}function w(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))})),e}const x=r.forwardRef(((r,_)=>{var{align:x="center",alignY:D,children:k,id:N,maxWidth:M,onDismiss:S,open:E=!0,targetPortalId:I,timeout:R,variant:T="success",disableAutoFocus:Y,closeButtonDataProps:B}=r,L=function(e,t){if(null==e)return{};var r,n,o=function(e,t){if(null==e)return{};var r,n,o={},i=Object.keys(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}(r,["align","alignY","children","id","maxWidth","onDismiss","open","targetPortalId","timeout","variant","disableAutoFocus","closeButtonDataProps"]);const W="notice"===T,A="notification"===T,F=O(),$=n(h()),C=n(h()),K=n(null),q=n(null),z=n(null),G=n(null),H=n(null),[J,Q]=o(0),U=`${!W&&$.current} ${C.current}`;let V=K;_&&"object"==typeof _&&"current"in _&&(V=_);const X=i((e=>{S&&y.isEscKey(e)&&(e.stopImmediatePropagation(),S(e))}),[S]);j({open:E,closeModal:X,modalRef:V,topModalOverride:!0}),a((()=>{q.current&&clearTimeout(q.current),R&&E&&S&&(q.current=setTimeout((()=>S()),+R))}),[S,E,R]),a((()=>{Y||(E?setTimeout((()=>{var e;H.current=document.activeElement,null===(e=z.current)||void 0===e||e.focus()}),0):H.current&&(H.current.focus(),H.current=null,Q(0)))}),[E,S,Y]),a((()=>()=>{H.current&&H.current.focus()}),[]);const Z={notification:"alert",neutral:"info",success:"tick_circle",error:"error",info:"info",warning:"warning"}[T]||"none";return e(p,{id:I,align:x,alignY:D,isNotice:W,children:e(f,{align:x,ref:V,isNotice:W,"data-role":"toast-wrapper",role:"region","aria-hidden":!E,"aria-labelledby":E?U:void 0,children:e(c,{children:function(){if(!E)return null;let r="success";return W||A||(r=T),e(l,{enter:!0,classNames:W?"toast-alternative":"toast",timeout:{appear:1600,enter:1500,exit:500},nodeRef:z,children:t(m,w(P(w(P({align:x,alignY:D,isNotice:W,isNotification:A},u("toast",L)),{variant:r,id:N,maxWidth:M,ref:z}),!Y&&{tabIndex:J,onBlur:()=>Q(void 0)}),{children:[!W&&t(b,{variant:A?"info":T,"data-role":"toast-type-icon",children:[e(s,{type:Z}),e(v,{screenReaderOnly:!0,id:$.current,children:F.toast[T]()})]}),e(d,{isNotice:W,isDismiss:!!S,"data-role":"toast-content",id:C.current,children:k}),S&&e(g,w(P({"aria-label":F.toast.ariaLabels.close(),onClick:S,ref:G},u("close",P({"data-element":"close"},B))),{children:e(s,{type:"close"})}))]}))})}()})})})}));x.displayName="Toast";export{x as Toast,x as default};

package/esm/components/toast/toast.config.js

@@ -1,2 +1 @@
-// eslint-disable-next-line import/prefer-default-export
-export const TOAST_COLORS = ["error", "info", "success", "warning", "neutral", "notification"];
+const n=["error","info","success","warning","neutral","notification"];export{n as TOAST_COLORS};

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

@@ -2,7 +2,7 @@
 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;
+    alignY?: "center" | "bottom" | "top" | undefined;
     isNotice?: boolean | undefined;
 }, never>;
 type ToastVariants = Exclude<MessageVariant, "ai">;