carbon-react 120.3.0 → 120.4.0

package/lib/components/flat-table/__internal__/{use-calculate-sticky-cells.js → use-table-cell.js}

@@ -6,8 +6,13 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = require("react");
 var _flatTableRowContext = _interopRequireDefault(require("../flat-table-row/__internal__/flat-table-row-context"));
+var _flatTable = require("../flat-table.component");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 var _default = id => {
+  const {
+    getTabStopElementId
+  } = (0, _react.useContext)(_flatTable.FlatTableThemeContext);
+  const [tabIndex, setTabIndex] = (0, _react.useState)(-1);
   const {
     expandable,
     firstCellId,
@@ -15,13 +20,23 @@ var _default = id => {
     leftPositions,
     rightPositions,
     onClick,
-    onKeyDown
+    onKeyDown,
+    highlighted,
+    selected
   } = (0, _react.useContext)(_flatTableRowContext.default);
   const leftPosition = leftPositions[id];
   const rightPosition = rightPositions[id];
   const makeCellSticky = leftPosition !== undefined || rightPosition !== undefined;
   const isFirstCell = id === firstCellId;
   const isExpandableCell = expandable && isFirstCell && firstColumnExpandable;
+  (0, _react.useEffect)(() => {
+    const tabstopTimer = setTimeout(() => {
+      setTabIndex(isExpandableCell && getTabStopElementId() === id ? 0 : -1);
+    }, 0);
+    return () => {
+      clearTimeout(tabstopTimer);
+    };
+  }, [getTabStopElementId, isExpandableCell, id]);
   return {
     expandable,
     leftPosition,
@@ -30,7 +45,10 @@ var _default = id => {
     onClick,
     onKeyDown,
     isFirstCell,
-    isExpandableCell
+    isExpandableCell,
+    tabIndex,
+    isInHighlightedRow: highlighted,
+    isInSelectedRow: selected
   };
 };
 exports.default = _default;

package/lib/components/flat-table/flat-table-cell/flat-table-cell.component.js

@@ -8,9 +8,8 @@ var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _flatTableCell = require("./flat-table-cell.style");
 var _icon = _interopRequireDefault(require("../../icon"));
-var _flatTable = require("../flat-table.component");
 var _guid = _interopRequireDefault(require("../../../__internal__/utils/helpers/guid"));
-var _useCalculateStickyCells = _interopRequireDefault(require("../__internal__/use-calculate-sticky-cells"));
+var _useTableCell = _interopRequireDefault(require("../__internal__/use-table-cell"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -27,12 +26,7 @@ const FlatTableCell = ({
   id,
   ...rest
 }) => {
-  const ref = (0, _react.useRef)(null);
   const internalId = (0, _react.useRef)(id || (0, _guid.default)());
-  const [tabIndex, setTabIndex] = (0, _react.useState)(-1);
-  const {
-    selectedId
-  } = (0, _react.useContext)(_flatTable.FlatTableThemeContext);
   const {
     leftPosition,
     rightPosition,
@@ -41,17 +35,16 @@ const FlatTableCell = ({
     onKeyDown,
     isFirstCell,
     isExpandableCell,
-    makeCellSticky
-  } = (0, _useCalculateStickyCells.default)(internalId.current);
-  (0, _react.useEffect)(() => {
-    setTabIndex(isExpandableCell && selectedId === internalId.current ? 0 : -1);
-  }, [selectedId, isExpandableCell]);
+    makeCellSticky,
+    isInHighlightedRow,
+    isInSelectedRow,
+    tabIndex
+  } = (0, _useTableCell.default)(internalId.current);
   return /*#__PURE__*/_react.default.createElement(_flatTableCell.StyledFlatTableCell, _extends({
     leftPosition: leftPosition,
     rightPosition: rightPosition,
     makeCellSticky: makeCellSticky,
     className: makeCellSticky ? "isSticky" : undefined,
-    ref: ref,
     align: align,
     "data-element": "flat-table-cell",
     pl: pl,
@@ -65,6 +58,9 @@ const FlatTableCell = ({
     colSpan: Number(colspan)
   }, rowspan !== undefined && {
     rowSpan: Number(rowspan)
+  }, {
+    "data-selected": isInSelectedRow && isExpandableCell,
+    "data-highlighted": isInHighlightedRow && isExpandableCell
   }, rest, {
     id: internalId.current
   }), /*#__PURE__*/_react.default.createElement(_flatTableCell.StyledCellContent, {

package/lib/components/flat-table/flat-table-header/flat-table-header.component.js

@@ -9,7 +9,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _flatTableHeader = _interopRequireDefault(require("./flat-table-header.style"));
 var _flatTable = require("../flat-table.component");
 var _guid = _interopRequireDefault(require("../../../__internal__/utils/helpers/guid"));
-var _useCalculateStickyCells = _interopRequireDefault(require("../__internal__/use-calculate-sticky-cells"));
+var _useTableCell = _interopRequireDefault(require("../__internal__/use-table-cell"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -34,7 +34,7 @@ const FlatTableHeader = ({
     leftPosition,
     rightPosition,
     makeCellSticky
-  } = (0, _useCalculateStickyCells.default)(internalId.current);
+  } = (0, _useTableCell.default)(internalId.current);
   return /*#__PURE__*/_react.default.createElement(_flatTableHeader.default, _extends({
     ref: ref,
     leftPosition: leftPosition,

package/lib/components/flat-table/flat-table-row/__internal__/flat-table-row-context.d.ts

@@ -7,6 +7,8 @@ export interface FlatTableRowContextProps {
     leftPositions: Record<string, number>;
     rightPositions: Record<string, number>;
     firstColumnExpandable?: boolean;
+    highlighted?: boolean;
+    selected?: boolean;
 }
 declare const _default: React.Context<FlatTableRowContextProps>;
 export default _default;

package/lib/components/flat-table/flat-table-row/flat-table-row.component.js

@@ -102,8 +102,7 @@ const FlatTableRow = /*#__PURE__*/_react.default.forwardRef(({
   const {
     colorTheme,
     size,
-    setSelectedId,
-    selectedId
+    getTabStopElementId
   } = (0, _react.useContext)(_flatTable.FlatTableThemeContext);
   const {
     isInSidebar
@@ -150,13 +149,8 @@ const FlatTableRow = /*#__PURE__*/_react.default.forwardRef(({
     setIsExpanded(expanded);
   }, [expanded]);
   (0, _react.useEffect)(() => {
-    if (highlighted || selected) {
-      setSelectedId(internalId.current);
-    }
-  }, [highlighted, selected, setSelectedId]);
-  (0, _react.useEffect)(() => {
-    setTabIndex(selectedId === internalId.current ? 0 : -1);
-  }, [selectedId]);
+    setTabIndex(getTabStopElementId() === internalId.current ? 0 : -1);
+  }, [getTabStopElementId]);
   const {
     isSubRow,
     firstRowId,
@@ -192,7 +186,9 @@ const FlatTableRow = /*#__PURE__*/_react.default.forwardRef(({
     horizontalBorderSize: horizontalBorderSize,
     draggable: draggable,
     totalChildren: cellsArray.length,
-    id: internalId.current
+    id: internalId.current,
+    "data-selected": selected && expandableArea === "wholeRow",
+    "data-highlighted": highlighted && expandableArea === "wholeRow"
   }, interactiveRowProps, rest), /*#__PURE__*/_react.default.createElement(_flatTableRowContext.default.Provider, {
     value: {
       firstCellId,
@@ -201,7 +197,9 @@ const FlatTableRow = /*#__PURE__*/_react.default.forwardRef(({
       rightPositions,
       firstColumnExpandable,
       onKeyDown: handleCellKeyDown,
-      onClick: () => toggleExpanded()
+      onClick: () => toggleExpanded(),
+      highlighted,
+      selected
     }
   }, children));
   const draggableComponent = () => /*#__PURE__*/_react.default.createElement(_flatTableRowDraggable.default, {

package/lib/components/flat-table/flat-table-row-header/flat-table-row-header.component.js

@@ -8,10 +8,9 @@ var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _icon = _interopRequireDefault(require("../../icon"));
 var _flatTableRowHeader = require("./flat-table-row-header.style");
-var _flatTable = require("../flat-table.component");
 var _guid = _interopRequireDefault(require("../../../__internal__/utils/helpers/guid"));
 var _tags = _interopRequireDefault(require("../../../__internal__/utils/helpers/tags/tags"));
-var _useCalculateStickyCells = _interopRequireDefault(require("../__internal__/use-calculate-sticky-cells"));
+var _useTableCell = _interopRequireDefault(require("../__internal__/use-table-cell"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -31,10 +30,6 @@ const FlatTableRowHeader = ({
   ...rest
 }) => {
   const internalId = (0, _react.useRef)(id || (0, _guid.default)());
-  const [tabIndex, setTabIndex] = (0, _react.useState)(-1);
-  const {
-    selectedId
-  } = (0, _react.useContext)(_flatTable.FlatTableThemeContext);
   const {
     leftPosition,
     rightPosition,
@@ -42,11 +37,11 @@ const FlatTableRowHeader = ({
     onClick,
     onKeyDown,
     isFirstCell,
-    isExpandableCell
-  } = (0, _useCalculateStickyCells.default)(internalId.current);
-  (0, _react.useEffect)(() => {
-    setTabIndex(isExpandableCell && selectedId === internalId.current ? 0 : -1);
-  }, [selectedId, isExpandableCell]);
+    isExpandableCell,
+    tabIndex,
+    isInHighlightedRow,
+    isInSelectedRow
+  } = (0, _useTableCell.default)(internalId.current);
   const handleOnClick = (0, _react.useCallback)(ev => {
     if (isExpandableCell && onClick) onClick(ev);
   }, [isExpandableCell, onClick]);
@@ -76,6 +71,9 @@ const FlatTableRowHeader = ({
     colSpan: Number(colspan)
   }, rowspan !== undefined && {
     rowSpan: Number(rowspan)
+  }, {
+    "data-selected": isInSelectedRow && isExpandableCell,
+    "data-highlighted": isInHighlightedRow && isExpandableCell
   }, rest, {
     id: internalId.current
   }), /*#__PURE__*/_react.default.createElement(_flatTableRowHeader.StyledFlatTableRowHeaderContent, {

package/lib/components/flat-table/flat-table.component.d.ts

@@ -31,8 +31,7 @@ export interface FlatTableProps extends MarginProps {
     width?: string;
 }
 export interface FlatTableThemeContextProps extends Pick<FlatTableProps, "colorTheme" | "size"> {
-    selectedId?: string;
-    setSelectedId: (id: string) => void;
+    getTabStopElementId: () => string;
 }
 export declare const FlatTableThemeContext: React.Context<FlatTableThemeContextProps>;
 export declare const FlatTable: {

package/lib/components/flat-table/flat-table.component.js

@@ -14,7 +14,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 const FlatTableThemeContext = /*#__PURE__*/_react.default.createContext({
-  setSelectedId: () => {}
+  getTabStopElementId: () => ""
 });
 exports.FlatTableThemeContext = FlatTableThemeContext;
 const FOCUSABLE_ROW_AND_CELL_QUERY = "tbody tr[tabindex], tbody tr td[tabindex], tbody tr th[tabindex]";
@@ -41,7 +41,6 @@ const FlatTable = ({
   const [hasHorizontalScrollbar, setHasHorizontalScrollbar] = (0, _react.useState)(false);
   const [firstColRowSpanIndex, setFirstColRowSpanIndex] = (0, _react.useState)(-1);
   const [lastColRowSpanIndex, setLastColRowSpanIndex] = (0, _react.useState)(-1);
-  const [selectedId, setSelectedId] = (0, _react.useState)("");
   const addDefaultHeight = !height && (hasStickyHead || hasStickyFooter);
   const tableStylingProps = {
     caption,
@@ -134,32 +133,14 @@ const FlatTable = ({
       }
     }
   };
-  (0, _react.useLayoutEffect)(() => {
-    const findSelectedId = () => {
-      const firstfocusableElement = tableRef.current?.querySelector(FOCUSABLE_ROW_AND_CELL_QUERY);
-
-      // if no other menu item is selected, we need to make the first row a tab stop
-      if (firstfocusableElement && !selectedId) {
-        const currentlySelectedId = firstfocusableElement?.getAttribute("id");
-
-        /* istanbul ignore else */
-        if (currentlySelectedId && selectedId !== currentlySelectedId) {
-          setSelectedId(currentlySelectedId);
-        }
-      }
-    };
-    const observer = new MutationObserver(findSelectedId);
+  const getTabStopElementId = () => {
+    const focusableElements = Array.from(tableRef.current?.querySelectorAll(FOCUSABLE_ROW_AND_CELL_QUERY) || /* istanbul ignore next */[]);
 
-    /* istanbul ignore else */
-    if (wrapperRef.current) {
-      observer.observe(wrapperRef.current, {
-        subtree: true,
-        childList: true,
-        attributes: true
-      });
-    }
-    return () => observer.disconnect();
-  }, [selectedId]);
+    // if no other row is selected/ highlighted, we need to make the first row/ cell a tab stop
+    const focusableElement = focusableElements.find(el => el.getAttribute("data-selected") === "true" || el.getAttribute("data-highlighted") === "true") || focusableElements[0];
+    const currentlySelectedId = focusableElement?.getAttribute("id") || "";
+    return currentlySelectedId;
+  };
   return /*#__PURE__*/_react.default.createElement(_flatTable.StyledFlatTableWrapper, _extends({
     ref: wrapperRef,
     "data-component": "flat-table-wrapper",
@@ -194,8 +175,7 @@ const FlatTable = ({
     value: {
       colorTheme,
       size,
-      setSelectedId,
-      selectedId
+      getTabStopElementId
     }
   }, children))), footer && /*#__PURE__*/_react.default.createElement(_flatTable.StyledFlatTableFooter, {
     hasStickyFooter: hasStickyFooter

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

@@ -1,6 +1,6 @@
 import React from "react";
 import { MarginProps } from "styled-system";
-export declare type MessageVariant = "error" | "info" | "success" | "warning";
+export declare type MessageVariant = "error" | "info" | "success" | "warning" | "neutral";
 export interface MessageProps extends MarginProps {
     /** set content to component */
     children?: React.ReactNode;

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

@@ -227,7 +227,7 @@ Message.propTypes = {
   "showCloseIcon": _propTypes.default.bool,
   "title": _propTypes.default.node,
   "transparent": _propTypes.default.bool,
-  "variant": _propTypes.default.oneOf(["error", "info", "success", "warning"])
+  "variant": _propTypes.default.oneOf(["error", "info", "neutral", "success", "warning"])
 };
 Message.displayName = "Message";
 var _default = Message;

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

@@ -13,9 +13,10 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 const messageVariants = {
   error: "var(--colorsSemanticNegative500)",
-  info: "var(--colorsSemanticNeutral500)",
+  info: "var(--colorsSemanticInfo500)",
   success: "var(--colorsSemanticPositive500)",
-  warning: "var(--colorsSemanticCaution500)"
+  warning: "var(--colorsSemanticCaution500)",
+  neutral: "var(--colorsSemanticNeutral500)"
 };
 const MessageStyle = _styledComponents.default.div`
   position: relative;

package/lib/components/message/type-icon/type-icon.component.js

@@ -13,11 +13,16 @@ const TypeIcon = ({
   variant = "info",
   transparent = false
 }) => {
+  function iconToRender() {
+    if (variant === "neutral") return "info";
+    if (variant === "success") return "tick_circle";
+    return variant;
+  }
   return /*#__PURE__*/_react.default.createElement(_typeIcon.default, {
     variant: variant,
     transparent: transparent
   }, /*#__PURE__*/_react.default.createElement(_icon.default, {
-    type: variant
+    type: iconToRender()
   }));
 };
 var _default = TypeIcon;

package/lib/components/message/type-icon/type-icon.style.js

@@ -9,9 +9,11 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 const messageVariants = {
   error: "var(--colorsSemanticNegative500)",
-  info: "var(--colorsSemanticNeutral500)",
+  info: "var(--colorsSemanticInfo500)",
   success: "var(--colorsSemanticPositive500)",
-  warning: "var(--colorsSemanticCaution500)"
+  warning: "var(--colorsSemanticCaution500)",
+  neutral: "var(--colorsSemanticNeutral500)",
+  notification: "var(--colorsSemanticInfo500)"
 };
 const TypeIconStyle = _styledComponents.default.div`
   align-items: center;

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

@@ -1,6 +1,9 @@
 import React from "react";
-declare type ToastVariants = "error" | "info" | "success" | "warning" | "notice";
+declare type ToastVariants = "error" | "info" | "success" | "warning" | "notice" | "neutral" | "notification";
+declare type AlignOptions = "left" | "center" | "right";
 export interface ToastProps {
+    /** Sets the alignment of the component. */
+    align?: AlignOptions;
     /** The rendered children of the component. */
     children: React.ReactNode;
     /** Customizes the appearance in the DLS theme */

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

@@ -14,11 +14,14 @@ var _iconButton = _interopRequireDefault(require("../icon-button"));
 var _events = _interopRequireDefault(require("../../__internal__/utils/helpers/events"));
 var _useLocale = _interopRequireDefault(require("../../hooks/__internal__/useLocale"));
 var _useModalManager = _interopRequireDefault(require("../../hooks/__internal__/useModalManager"));
+var _logger = _interopRequireDefault(require("../../__internal__/utils/logger"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+let isDeprecationWarningTriggered = false;
 const Toast = /*#__PURE__*/_react.default.forwardRef(({
+  align,
   children,
   className,
   id,
@@ -33,6 +36,7 @@ const Toast = /*#__PURE__*/_react.default.forwardRef(({
   ...restProps
 }, ref) => {
   const isNotice = variant === "notice";
+  const isNotification = variant === "notification";
   const locale = (0, _useLocale.default)();
   const toastRef = (0, _react.useRef)(null);
   const timer = (0, _react.useRef)(null);
@@ -44,6 +48,10 @@ const Toast = /*#__PURE__*/_react.default.forwardRef(({
   if (ref && typeof ref === "object" && "current" in ref) {
     refToPass = ref;
   }
+  if (isCenter !== undefined && !isDeprecationWarningTriggered) {
+    isDeprecationWarningTriggered = true;
+    _logger.default.deprecate(`isCenter prop in ${Toast.displayName} is being deprecated in favour of the align prop.`);
+  }
   const dismissToast = (0, _react.useCallback)(ev => {
     if (onDismiss && _events.default.isEscKey(ev)) {
       ev.stopImmediatePropagation();
@@ -96,10 +104,19 @@ const Toast = /*#__PURE__*/_react.default.forwardRef(({
       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;
-    if (variant !== "notice") {
+    if (!isNotice && !isNotification) {
       toastVariant = variant;
     }
     return /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.CSSTransition, {
@@ -112,7 +129,9 @@ const Toast = /*#__PURE__*/_react.default.forwardRef(({
       },
       nodeRef: toastContentNodeRef
     }, /*#__PURE__*/_react.default.createElement(_toast.ToastStyle, _extends({
+      align: align,
       isNotice: isNotice,
+      isNotification: isNotification,
       className: className
     }, (0, _tags.default)(restProps["data-component"] || "toast", restProps), {
       isCenter: isCenter,
@@ -123,10 +142,10 @@ const Toast = /*#__PURE__*/_react.default.forwardRef(({
     }, !disableAutoFocus && {
       tabIndex,
       onBlur: () => setTabIndex(undefined)
-    }), variant !== "notice" && /*#__PURE__*/_react.default.createElement(_toast.TypeIcon, {
-      variant: variant
+    }), !isNotice && /*#__PURE__*/_react.default.createElement(_toast.TypeIcon, {
+      variant: isNotification ? "info" : variant
     }, /*#__PURE__*/_react.default.createElement(_icon.default, {
-      type: variant
+      type: toastIcon
     })), /*#__PURE__*/_react.default.createElement(_toast.ToastContentStyle, {
       isNotice: isNotice,
       isDismiss: !!onDismiss
@@ -134,9 +153,11 @@ const Toast = /*#__PURE__*/_react.default.forwardRef(({
   }
   return /*#__PURE__*/_react.default.createElement(_toast.StyledPortal, {
     id: targetPortalId,
+    align: align,
     isCenter: isCenter,
     isNotice: isNotice
   }, /*#__PURE__*/_react.default.createElement(_toast.ToastWrapper, {
+    align: align,
     isCenter: isCenter,
     ref: refToPass,
     isNotice: isNotice
@@ -144,6 +165,7 @@ const Toast = /*#__PURE__*/_react.default.forwardRef(({
 });
 exports.Toast = Toast;
 Toast.propTypes = {
+  "align": _propTypes.default.oneOf(["center", "left", "right"]),
   "children": _propTypes.default.node,
   "className": _propTypes.default.string,
   "data-component": _propTypes.default.string,
@@ -155,7 +177,7 @@ Toast.propTypes = {
   "open": _propTypes.default.bool,
   "targetPortalId": _propTypes.default.string,
   "timeout": _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
-  "variant": _propTypes.default.oneOf(["error", "info", "notice", "success", "warning"])
+  "variant": _propTypes.default.oneOf(["error", "info", "neutral", "notice", "notification", "success", "warning"])
 };
 Toast.displayName = "Toast";
 var _default = Toast;

package/lib/components/toast/toast.config.js

@@ -5,5 +5,5 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.TOAST_COLORS = void 0;
 // eslint-disable-next-line import/prefer-default-export
-const TOAST_COLORS = ["error", "info", "success", "warning"];
+const TOAST_COLORS = ["error", "info", "success", "warning", "neutral", "notification"];
 exports.TOAST_COLORS = TOAST_COLORS;

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

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 import TypeIcon from "../message/type-icon/type-icon.style";
 declare const StyledPortal: import("styled-components").StyledComponent<({ children, className, id, onReposition }: import("../portal/portal").PortalProps) => import("react").JSX.Element, any, {
+    align?: "left" | "right" | "center" | undefined;
     isCenter?: boolean | undefined;
     isNotice?: boolean | undefined;
 }, never>;
@@ -8,15 +9,18 @@ declare const ToastStyle: import("styled-components").StyledComponent<"div", any
     variant?: import("../message/message.component").MessageVariant | undefined;
     transparent?: boolean | undefined;
 } & import("styled-system").MarginProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & {
+    align?: "left" | "right" | "center" | undefined;
     maxWidth?: string | undefined;
     isCenter?: boolean | undefined;
     isNotice?: boolean | undefined;
+    isNotification?: boolean | undefined;
 }, never>;
 declare const ToastContentStyle: import("styled-components").StyledComponent<"div", any, Pick<import("../message/message-content/message-content.component").MessageContentProps, "showCloseIcon"> & {
     isNotice?: boolean | undefined;
     isDismiss?: boolean | undefined;
 }, never>;
 declare const ToastWrapper: import("styled-components").StyledComponent<"div", any, {
+    align?: "left" | "right" | "center" | undefined;
     isCenter?: boolean | undefined;
     isNotice?: boolean | undefined;
 }, never>;

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

@@ -25,7 +25,8 @@ const StyledPortal = (0, _styledComponents.default)(_portal.default)`
   ${({
   theme,
   isCenter,
-  isNotice
+  isNotice,
+  align
 }) => (0, _styledComponents.css)`
     position: fixed;
     top: 0;
@@ -37,6 +38,22 @@ const StyledPortal = (0, _styledComponents.default)(_portal.default)`
       transform: translateX(-50%);
     `}
 
+    ${align === "left" && (0, _styledComponents.css)`
+      left: 12%;
+      transform: translateX(-50%);
+    `}
+
+    ${align === "center" && (0, _styledComponents.css)`
+      margin-left: 50%;
+      transform: translateX(-50%);
+    `}
+
+    ${align === "right" && (0, _styledComponents.css)`
+      display: flex;
+      right: 0;
+      transform: translateX(-50%);
+    `}
+
     ${isNotice && (0, _styledComponents.css)`
       bottom: 0;
       top: auto;
@@ -53,7 +70,9 @@ const alternativeAnimationName = ".toast-alternative";
 const ToastStyle = (0, _styledComponents.default)(_message.default)`
   ${({
   maxWidth,
-  isCenter
+  isCenter,
+  align,
+  isNotification
 }) => (0, _styledComponents.css)`
     box-shadow: 0 10px 30px 0 rgba(0, 20, 29, 0.1),
       0 30px 60px 0 rgba(0, 20, 29, 0.1);
@@ -61,7 +80,11 @@ const ToastStyle = (0, _styledComponents.default)(_message.default)`
     margin-top: 30px;
     max-width: ${!maxWidth ? "300px" : maxWidth};
     position: relative;
-    margin-right: ${isCenter ? "auto" : "30px"};
+    margin-right: ${isCenter || align === "right" ? "auto" : "30px"};
+
+    ${isNotification && (0, _styledComponents.css)`
+      border: 1px solid var(--colorsSemanticInfo500);
+    `}
   `}
 
   :focus {
@@ -157,6 +180,16 @@ const ToastContentStyle = (0, _styledComponents.default)(_messageContent.default
 `;
 exports.ToastContentStyle = ToastContentStyle;
 const ToastWrapper = _styledComponents.default.div`
+  ${({
+  align
+}) => align && (0, _styledComponents.css)`
+      position: relative;
+      width: auto;
+      height: auto;
+      justify-content: ${align};
+      display: flex;
+    `}
+
   ${({
   isCenter
 }) => isCenter && (0, _styledComponents.css)`

package/package.json

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