carbon-react 134.2.0 → 135.1.0

package/esm/components/badge/badge.component.js

@@ -9,8 +9,8 @@ export const Badge = ({
   color = "--colorsActionMajor500",
   onClick
 }) => {
-  const shouldDisplayCounter = counter > 0;
-  const counterToDisplay = counter > 99 ? 99 : counter;
+  const shouldDisplayCounter = +counter > 0;
+  const counterToDisplay = +counter > 99 ? 99 : counter;
   const renderCorrectBadge = () => {
     const props = onClick ? {
       buttonType: "secondary",
@@ -20,6 +20,7 @@ export const Badge = ({
     };
     if (shouldDisplayCounter) {
       return /*#__PURE__*/React.createElement(StyledBadge, _extends({
+        "data-role": "badge",
         "data-component": "badge",
         color: color
       }, props), onClick && /*#__PURE__*/React.createElement(StyledCrossIcon, {

package/esm/components/multi-action-button/multi-action-button.component.d.ts

@@ -7,5 +7,5 @@ export interface MultiActionButtonProps extends WidthProps, Omit<SplitButtonProp
     /** Second text child, renders under main text, only when size is "large" */
     subtext?: string;
 }
-export declare const MultiActionButton: ({ align, disabled, buttonType, size, children, text, subtext, width, onClick, "data-element": dataElement, "data-role": dataRole, ...rest }: MultiActionButtonProps) => React.JSX.Element;
+export declare const MultiActionButton: ({ align, position, disabled, buttonType, size, children, text, subtext, width, onClick, "data-element": dataElement, "data-role": dataRole, ...rest }: MultiActionButtonProps) => React.JSX.Element;
 export default MultiActionButton;

package/esm/components/multi-action-button/multi-action-button.component.js

@@ -11,6 +11,7 @@ import { filterStyledSystemMarginProps, filterOutStyledSystemSpacingProps } from
 import useChildButtons from "../../hooks/__internal__/useChildButtons";
 export const MultiActionButton = ({
   align = "left",
+  position = "left",
   disabled,
   buttonType,
   size,
@@ -53,7 +54,7 @@ export const MultiActionButton = ({
     ...filterOutStyledSystemSpacingProps(rest)
   };
   const renderAdditionalButtons = () => /*#__PURE__*/React.createElement(Popover, {
-    placement: "bottom-end",
+    placement: position === "left" ? "bottom-start" : /* istanbul ignore next */"bottom-end",
     reference: buttonNode,
     middleware: [offset(6), flip({
       fallbackStrategy: "initialPlacement"

package/esm/components/multi-action-button/multi-action-button.config.d.ts

@@ -1,3 +1,4 @@
 export declare const MULTI_ACTION_BUTTON_ALIGNMENTS: string[];
 export declare const MULTI_ACTION_BUTTON_SIZES: string[];
 export declare const MULTI_ACTION_BUTTON_THEMES: string[];
+export declare const MULTI_ACTION_BUTTON_POSITIONS: string[];

package/esm/components/multi-action-button/multi-action-button.config.js

@@ -1,3 +1,4 @@
 export const MULTI_ACTION_BUTTON_ALIGNMENTS = ["left", "right"];
 export const MULTI_ACTION_BUTTON_SIZES = ["small", "medium", "large"];
-export const MULTI_ACTION_BUTTON_THEMES = ["primary", "secondary", "tertiary"];
+export const MULTI_ACTION_BUTTON_THEMES = ["primary", "secondary", "tertiary"];
+export const MULTI_ACTION_BUTTON_POSITIONS = ["left", "right"];

package/esm/components/portal/portal.js

@@ -60,6 +60,7 @@ export const Portal = ({
       node = document.createElement("div");
       node.classList.add(portalClassName);
       node.setAttribute("data-portal-exit", uniqueId);
+      node.setAttribute("data-role", "carbon-portal-exit");
       if (id !== undefined) {
         node.setAttribute("id", id);
       }

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

@@ -20,12 +20,14 @@ export interface SplitButtonProps extends React.ButtonHTMLAttributes<HTMLButtonE
     iconPosition?: "before" | "after";
     /** Defines an Icon type within the button */
     iconType?: IconType;
-    /** The size of the buttons in the SplitButton. */
+    /** The size of the buttons. */
     size?: "small" | "medium" | "large";
     /** Second text child, renders under main text, only when size is "large" */
     subtext?: string;
-    /** The text to be displayed in the SplitButton. */
+    /** The text to be displayed in the main button. */
     text: string;
+    /** Sets rendering position of menu */
+    position?: "left" | "right";
 }
-export declare const SplitButton: ({ align, buttonType, children, disabled, iconPosition, iconType, onClick, size, subtext, text, "data-element": dataElement, "data-role": dataRole, "aria-label": ariaLabel, ...rest }: SplitButtonProps) => React.JSX.Element;
+export declare const SplitButton: ({ align, position, buttonType, children, disabled, iconPosition, iconType, onClick, size, subtext, text, "data-element": dataElement, "data-role": dataRole, "aria-label": ariaLabel, ...rest }: SplitButtonProps) => React.JSX.Element;
 export default SplitButton;

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

@@ -19,6 +19,7 @@ import useLocale from "../../hooks/__internal__/useLocale";
 const CONTENT_WIDTH_RATIO = 0.75;
 export const SplitButton = ({
   align = "left",
+  position = "right",
   buttonType = "secondary",
   children,
   disabled = false,
@@ -105,7 +106,7 @@ export const SplitButton = ({
   function renderAdditionalButtons() {
     if (!showAdditionalButtons) return null;
     return /*#__PURE__*/React.createElement(Popover, {
-      placement: "bottom-end",
+      placement: position === "left" ? /* istanbul ignore next */"bottom-start" : "bottom-end",
       reference: buttonNode,
       middleware: [offset(6), flip({
         fallbackStrategy: "initialPlacement"

package/esm/components/split-button/split-button.config.d.ts

@@ -2,3 +2,4 @@ export declare const SPLIT_BUTTON_ICON_POSITIONS: string[];
 export declare const SPLIT_BUTTON_THEMES: string[];
 export declare const SPLIT_BUTTON_SIZES: string[];
 export declare const SPLIT_BUTTON_ALIGNMENTS: string[];
+export declare const SPLIT_BUTTON_POSITIONS: string[];

package/esm/components/split-button/split-button.config.js

@@ -1,4 +1,5 @@
 export const SPLIT_BUTTON_ICON_POSITIONS = ["before", "after"];
 export const SPLIT_BUTTON_THEMES = ["primary", "secondary"];
 export const SPLIT_BUTTON_SIZES = ["small", "medium", "large"];
-export const SPLIT_BUTTON_ALIGNMENTS = ["left", "right"];
+export const SPLIT_BUTTON_ALIGNMENTS = ["left", "right"];
+export const SPLIT_BUTTON_POSITIONS = ["left", "right"];

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

@@ -26,8 +26,6 @@ export interface ToastProps {
     closeButtonDataProps?: Pick<TagProps, "data-role" | "data-element">;
     /** Time for Toast to remain on screen */
     timeout?: string | number;
-    /** Centers the Toast on the screen */
-    isCenter?: boolean;
     /** Target Portal ID where the Toast will render */
     targetPortalId?: string;
     /** Maximum toast width */

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

@@ -9,15 +9,12 @@ 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 Logger from "../../__internal__/utils/logger";
-let isDeprecationWarningTriggered = false;
 const Toast = /*#__PURE__*/React.forwardRef(({
-  align,
+  align = "center",
   alignY,
   children,
   className,
   id,
-  isCenter = true,
   maxWidth,
   onDismiss,
   open = true,
@@ -41,10 +38,6 @@ const Toast = /*#__PURE__*/React.forwardRef(({
   if (ref && typeof ref === "object" && "current" in ref) {
     refToPass = ref;
   }
-  if (isCenter !== undefined && !isDeprecationWarningTriggered) {
-    isDeprecationWarningTriggered = true;
-    Logger.deprecate(`isCenter prop in ${Toast.displayName} is being deprecated in favour of the align prop.`);
-  }
   const dismissToast = useCallback(ev => {
     if (onDismiss && Events.isEscKey(ev)) {
       ev.stopImmediatePropagation();
@@ -131,7 +124,6 @@ const Toast = /*#__PURE__*/React.forwardRef(({
       isNotification: isNotification,
       className: className
     }, tagComponent(restProps["data-component"] || "toast", restProps), {
-      isCenter: isCenter,
       variant: toastVariant,
       id: id,
       maxWidth: maxWidth,
@@ -140,25 +132,26 @@ const Toast = /*#__PURE__*/React.forwardRef(({
       tabIndex,
       onBlur: () => setTabIndex(undefined)
     }), !isNotice && /*#__PURE__*/React.createElement(TypeIcon, {
-      variant: isNotification ? "info" : variant
+      variant: isNotification ? "info" : variant,
+      "data-role": "toast-type-icon"
     }, /*#__PURE__*/React.createElement(Icon, {
       type: toastIcon
     })), /*#__PURE__*/React.createElement(StyledToastContent, {
       isNotice: isNotice,
-      isDismiss: !!onDismiss
+      isDismiss: !!onDismiss,
+      "data-role": "toast-content"
     }, children), renderCloseIcon()));
   }
   return /*#__PURE__*/React.createElement(StyledPortal, {
     id: targetPortalId,
     align: align,
     alignY: alignY,
-    isCenter: isCenter,
     isNotice: isNotice
   }, /*#__PURE__*/React.createElement(ToastWrapper, {
     align: align,
-    isCenter: isCenter,
     ref: refToPass,
-    isNotice: isNotice
+    isNotice: isNotice,
+    "data-role": "toast-wrapper"
   }, /*#__PURE__*/React.createElement(TransitionGroup, null, renderToastContent())));
 });
 if (process.env.NODE_ENV !== "production") {
@@ -174,7 +167,6 @@ if (process.env.NODE_ENV !== "production") {
     "data-component": PropTypes.string,
     "disableAutoFocus": PropTypes.bool,
     "id": PropTypes.string,
-    "isCenter": PropTypes.bool,
     "maxWidth": PropTypes.string,
     "onDismiss": PropTypes.func,
     "open": PropTypes.bool,

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

@@ -4,7 +4,6 @@ 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?: "left" | "right" | "center" | undefined;
     alignY?: "bottom" | "top" | "center" | undefined;
-    isCenter?: boolean | undefined;
     isNotice?: boolean | undefined;
 }, never>;
 declare type ToastVariants = MessageVariant;
@@ -12,7 +11,6 @@ declare type ToastStyleProps = {
     align?: "left" | "center" | "right";
     alignY?: "top" | "center" | "bottom";
     maxWidth?: string;
-    isCenter?: boolean;
     isNotice?: boolean;
     isNotification?: boolean;
     variant: ToastVariants;
@@ -24,7 +22,6 @@ declare const StyledToastContent: import("styled-components").StyledComponent<"d
 }, never>;
 declare const ToastWrapper: import("styled-components").StyledComponent<"div", any, {
     align?: "left" | "right" | "center" | undefined;
-    isCenter?: boolean | undefined;
     isNotice?: boolean | undefined;
 }, never>;
 export { StyledPortal, StyledToast, TypeIcon, StyledToastContent, ToastWrapper, };

package/esm/components/toast/toast.style.js

@@ -7,7 +7,6 @@ import StyledIcon from "../icon/icon.style";
 const StyledPortal = styled(Portal)`
   ${({
   theme,
-  isCenter,
   isNotice,
   align,
   alignY
@@ -16,11 +15,6 @@ const StyledPortal = styled(Portal)`
     top: 0;
     z-index: ${theme.zIndex.notification};
 
-    ${isCenter && css`
-      margin-left: 50%;
-      transform: translateX(-50%);
-    `}
-
     ${align === "left" && css`
       left: 0;
       transform: translateX(50%);
@@ -82,7 +76,6 @@ const iconPositionStyles = css`
 const StyledToast = styled.div`
   ${({
   maxWidth,
-  isCenter,
   align,
   isNotification,
   alignY,
@@ -113,8 +106,8 @@ const StyledToast = styled.div`
     margin-bottom: ${alignY === "bottom" && !isNotice ? "30px" : "0"};
     max-width: ${!maxWidth ? "300px" : maxWidth};
     position: relative;
-    margin-right: ${isCenter || align === "right" ? "auto" : "30px"};
-    margin-left: ${isCenter || align === "left" ? "auto" : "30px"};
+    margin-right: ${align === "center" || align === "right" ? "auto" : "30px"};
+    margin-left: ${align === "center" || align === "left" ? "auto" : "30px"};
 
     ${isNotification && css`
       border: 1px solid var(--colorsSemanticInfo500);
@@ -134,8 +127,8 @@ const StyledToast = styled.div`
     &${animationName}-enter${animationName}-enter-active {
     opacity: 1;
     transform: ${({
-  isCenter
-}) => isCenter ? " scale(1) translateY(0)" : "scale(1)"};
+  align
+}) => align === "center" ? " scale(1) translateY(0)" : "scale(1)"};
     transition: all 300ms cubic-bezier(0.25, 0.25, 0, 1.5);
   }
 
@@ -225,16 +218,6 @@ const ToastWrapper = styled.div`
       display: flex;
     `}
 
-  ${({
-  isCenter
-}) => isCenter && css`
-      position: relative;
-      width: auto;
-      height: auto;
-      justify-content: center;
-      display: flex;
-    `}
-
   ${({
   isNotice
 }) => isNotice && css`

package/lib/components/badge/badge.component.js

@@ -16,8 +16,8 @@ const Badge = ({
   color = "--colorsActionMajor500",
   onClick
 }) => {
-  const shouldDisplayCounter = counter > 0;
-  const counterToDisplay = counter > 99 ? 99 : counter;
+  const shouldDisplayCounter = +counter > 0;
+  const counterToDisplay = +counter > 99 ? 99 : counter;
   const renderCorrectBadge = () => {
     const props = onClick ? {
       buttonType: "secondary",
@@ -27,6 +27,7 @@ const Badge = ({
     };
     if (shouldDisplayCounter) {
       return /*#__PURE__*/_react.default.createElement(_badge.StyledBadge, _extends({
+        "data-role": "badge",
         "data-component": "badge",
         color: color
       }, props), onClick && /*#__PURE__*/_react.default.createElement(_badge.StyledCrossIcon, {

package/lib/components/multi-action-button/multi-action-button.component.d.ts

@@ -7,5 +7,5 @@ export interface MultiActionButtonProps extends WidthProps, Omit<SplitButtonProp
     /** Second text child, renders under main text, only when size is "large" */
     subtext?: string;
 }
-export declare const MultiActionButton: ({ align, disabled, buttonType, size, children, text, subtext, width, onClick, "data-element": dataElement, "data-role": dataRole, ...rest }: MultiActionButtonProps) => React.JSX.Element;
+export declare const MultiActionButton: ({ align, position, disabled, buttonType, size, children, text, subtext, width, onClick, "data-element": dataElement, "data-role": dataRole, ...rest }: MultiActionButtonProps) => React.JSX.Element;
 export default MultiActionButton;

package/lib/components/multi-action-button/multi-action-button.component.js

@@ -20,6 +20,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 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 MultiActionButton = ({
   align = "left",
+  position = "left",
   disabled,
   buttonType,
   size,
@@ -62,7 +63,7 @@ const MultiActionButton = ({
     ...(0, _utils.filterOutStyledSystemSpacingProps)(rest)
   };
   const renderAdditionalButtons = () => /*#__PURE__*/_react.default.createElement(_popover.default, {
-    placement: "bottom-end",
+    placement: position === "left" ? "bottom-start" : /* istanbul ignore next */"bottom-end",
     reference: buttonNode,
     middleware: [(0, _dom.offset)(6), (0, _dom.flip)({
       fallbackStrategy: "initialPlacement"

package/lib/components/multi-action-button/multi-action-button.config.d.ts

@@ -1,3 +1,4 @@
 export declare const MULTI_ACTION_BUTTON_ALIGNMENTS: string[];
 export declare const MULTI_ACTION_BUTTON_SIZES: string[];
 export declare const MULTI_ACTION_BUTTON_THEMES: string[];
+export declare const MULTI_ACTION_BUTTON_POSITIONS: string[];

package/lib/components/multi-action-button/multi-action-button.config.js

@@ -3,7 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.MULTI_ACTION_BUTTON_THEMES = exports.MULTI_ACTION_BUTTON_SIZES = exports.MULTI_ACTION_BUTTON_ALIGNMENTS = void 0;
+exports.MULTI_ACTION_BUTTON_THEMES = exports.MULTI_ACTION_BUTTON_SIZES = exports.MULTI_ACTION_BUTTON_POSITIONS = exports.MULTI_ACTION_BUTTON_ALIGNMENTS = void 0;
 const MULTI_ACTION_BUTTON_ALIGNMENTS = exports.MULTI_ACTION_BUTTON_ALIGNMENTS = ["left", "right"];
 const MULTI_ACTION_BUTTON_SIZES = exports.MULTI_ACTION_BUTTON_SIZES = ["small", "medium", "large"];
-const MULTI_ACTION_BUTTON_THEMES = exports.MULTI_ACTION_BUTTON_THEMES = ["primary", "secondary", "tertiary"];
+const MULTI_ACTION_BUTTON_THEMES = exports.MULTI_ACTION_BUTTON_THEMES = ["primary", "secondary", "tertiary"];
+const MULTI_ACTION_BUTTON_POSITIONS = exports.MULTI_ACTION_BUTTON_POSITIONS = ["left", "right"];

package/lib/components/portal/portal.js

@@ -69,6 +69,7 @@ const Portal = ({
       node = document.createElement("div");
       node.classList.add(portalClassName);
       node.setAttribute("data-portal-exit", uniqueId);
+      node.setAttribute("data-role", "carbon-portal-exit");
       if (id !== undefined) {
         node.setAttribute("id", id);
       }

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

@@ -20,12 +20,14 @@ export interface SplitButtonProps extends React.ButtonHTMLAttributes<HTMLButtonE
     iconPosition?: "before" | "after";
     /** Defines an Icon type within the button */
     iconType?: IconType;
-    /** The size of the buttons in the SplitButton. */
+    /** The size of the buttons. */
     size?: "small" | "medium" | "large";
     /** Second text child, renders under main text, only when size is "large" */
     subtext?: string;
-    /** The text to be displayed in the SplitButton. */
+    /** The text to be displayed in the main button. */
     text: string;
+    /** Sets rendering position of menu */
+    position?: "left" | "right";
 }
-export declare const SplitButton: ({ align, buttonType, children, disabled, iconPosition, iconType, onClick, size, subtext, text, "data-element": dataElement, "data-role": dataRole, "aria-label": ariaLabel, ...rest }: SplitButtonProps) => React.JSX.Element;
+export declare const SplitButton: ({ align, position, buttonType, children, disabled, iconPosition, iconType, onClick, size, subtext, text, "data-element": dataElement, "data-role": dataRole, "aria-label": ariaLabel, ...rest }: SplitButtonProps) => React.JSX.Element;
 export default SplitButton;

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

@@ -28,6 +28,7 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 const CONTENT_WIDTH_RATIO = 0.75;
 const SplitButton = ({
   align = "left",
+  position = "right",
   buttonType = "secondary",
   children,
   disabled = false,
@@ -114,7 +115,7 @@ const SplitButton = ({
   function renderAdditionalButtons() {
     if (!showAdditionalButtons) return null;
     return /*#__PURE__*/_react.default.createElement(_popover.default, {
-      placement: "bottom-end",
+      placement: position === "left" ? /* istanbul ignore next */"bottom-start" : "bottom-end",
       reference: buttonNode,
       middleware: [(0, _dom.offset)(6), (0, _dom.flip)({
         fallbackStrategy: "initialPlacement"

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

@@ -2,3 +2,4 @@ export declare const SPLIT_BUTTON_ICON_POSITIONS: string[];
 export declare const SPLIT_BUTTON_THEMES: string[];
 export declare const SPLIT_BUTTON_SIZES: string[];
 export declare const SPLIT_BUTTON_ALIGNMENTS: string[];
+export declare const SPLIT_BUTTON_POSITIONS: string[];

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

@@ -3,8 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.SPLIT_BUTTON_THEMES = exports.SPLIT_BUTTON_SIZES = exports.SPLIT_BUTTON_ICON_POSITIONS = exports.SPLIT_BUTTON_ALIGNMENTS = void 0;
+exports.SPLIT_BUTTON_THEMES = exports.SPLIT_BUTTON_SIZES = exports.SPLIT_BUTTON_POSITIONS = exports.SPLIT_BUTTON_ICON_POSITIONS = exports.SPLIT_BUTTON_ALIGNMENTS = void 0;
 const SPLIT_BUTTON_ICON_POSITIONS = exports.SPLIT_BUTTON_ICON_POSITIONS = ["before", "after"];
 const SPLIT_BUTTON_THEMES = exports.SPLIT_BUTTON_THEMES = ["primary", "secondary"];
 const SPLIT_BUTTON_SIZES = exports.SPLIT_BUTTON_SIZES = ["small", "medium", "large"];
-const SPLIT_BUTTON_ALIGNMENTS = exports.SPLIT_BUTTON_ALIGNMENTS = ["left", "right"];
+const SPLIT_BUTTON_ALIGNMENTS = exports.SPLIT_BUTTON_ALIGNMENTS = ["left", "right"];
+const SPLIT_BUTTON_POSITIONS = exports.SPLIT_BUTTON_POSITIONS = ["left", "right"];

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

@@ -26,8 +26,6 @@ export interface ToastProps {
     closeButtonDataProps?: Pick<TagProps, "data-role" | "data-element">;
     /** Time for Toast to remain on screen */
     timeout?: string | number;
-    /** Centers the Toast on the screen */
-    isCenter?: boolean;
     /** Target Portal ID where the Toast will render */
     targetPortalId?: string;
     /** Maximum toast width */

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

@@ -14,19 +14,16 @@ 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(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; }
 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 = exports.Toast = /*#__PURE__*/_react.default.forwardRef(({
-  align,
+  align = "center",
   alignY,
   children,
   className,
   id,
-  isCenter = true,
   maxWidth,
   onDismiss,
   open = true,
@@ -50,10 +47,6 @@ const Toast = exports.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();
@@ -140,7 +133,6 @@ const Toast = exports.Toast = /*#__PURE__*/_react.default.forwardRef(({
       isNotification: isNotification,
       className: className
     }, (0, _tags.default)(restProps["data-component"] || "toast", restProps), {
-      isCenter: isCenter,
       variant: toastVariant,
       id: id,
       maxWidth: maxWidth,
@@ -149,25 +141,26 @@ const Toast = exports.Toast = /*#__PURE__*/_react.default.forwardRef(({
       tabIndex,
       onBlur: () => setTabIndex(undefined)
     }), !isNotice && /*#__PURE__*/_react.default.createElement(_toast.TypeIcon, {
-      variant: isNotification ? "info" : variant
+      variant: isNotification ? "info" : variant,
+      "data-role": "toast-type-icon"
     }, /*#__PURE__*/_react.default.createElement(_icon.default, {
       type: toastIcon
     })), /*#__PURE__*/_react.default.createElement(_toast.StyledToastContent, {
       isNotice: isNotice,
-      isDismiss: !!onDismiss
+      isDismiss: !!onDismiss,
+      "data-role": "toast-content"
     }, children), renderCloseIcon()));
   }
   return /*#__PURE__*/_react.default.createElement(_toast.StyledPortal, {
     id: targetPortalId,
     align: align,
     alignY: alignY,
-    isCenter: isCenter,
     isNotice: isNotice
   }, /*#__PURE__*/_react.default.createElement(_toast.ToastWrapper, {
     align: align,
-    isCenter: isCenter,
     ref: refToPass,
-    isNotice: isNotice
+    isNotice: isNotice,
+    "data-role": "toast-wrapper"
   }, /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.TransitionGroup, null, renderToastContent())));
 });
 if (process.env.NODE_ENV !== "production") {
@@ -183,7 +176,6 @@ if (process.env.NODE_ENV !== "production") {
     "data-component": _propTypes.default.string,
     "disableAutoFocus": _propTypes.default.bool,
     "id": _propTypes.default.string,
-    "isCenter": _propTypes.default.bool,
     "maxWidth": _propTypes.default.string,
     "onDismiss": _propTypes.default.func,
     "open": _propTypes.default.bool,

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

@@ -4,7 +4,6 @@ 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?: "left" | "right" | "center" | undefined;
     alignY?: "bottom" | "top" | "center" | undefined;
-    isCenter?: boolean | undefined;
     isNotice?: boolean | undefined;
 }, never>;
 declare type ToastVariants = MessageVariant;
@@ -12,7 +11,6 @@ declare type ToastStyleProps = {
     align?: "left" | "center" | "right";
     alignY?: "top" | "center" | "bottom";
     maxWidth?: string;
-    isCenter?: boolean;
     isNotice?: boolean;
     isNotification?: boolean;
     variant: ToastVariants;
@@ -24,7 +22,6 @@ declare const StyledToastContent: import("styled-components").StyledComponent<"d
 }, never>;
 declare const ToastWrapper: import("styled-components").StyledComponent<"div", any, {
     align?: "left" | "right" | "center" | undefined;
-    isCenter?: boolean | undefined;
     isNotice?: boolean | undefined;
 }, never>;
 export { StyledPortal, StyledToast, TypeIcon, StyledToastContent, ToastWrapper, };

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

@@ -22,7 +22,6 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 const StyledPortal = exports.StyledPortal = (0, _styledComponents.default)(_portal.default)`
   ${({
   theme,
-  isCenter,
   isNotice,
   align,
   alignY
@@ -31,11 +30,6 @@ const StyledPortal = exports.StyledPortal = (0, _styledComponents.default)(_port
     top: 0;
     z-index: ${theme.zIndex.notification};
 
-    ${isCenter && (0, _styledComponents.css)`
-      margin-left: 50%;
-      transform: translateX(-50%);
-    `}
-
     ${align === "left" && (0, _styledComponents.css)`
       left: 0;
       transform: translateX(50%);
@@ -97,7 +91,6 @@ const iconPositionStyles = (0, _styledComponents.css)`
 const StyledToast = exports.StyledToast = _styledComponents.default.div`
   ${({
   maxWidth,
-  isCenter,
   align,
   isNotification,
   alignY,
@@ -128,8 +121,8 @@ const StyledToast = exports.StyledToast = _styledComponents.default.div`
     margin-bottom: ${alignY === "bottom" && !isNotice ? "30px" : "0"};
     max-width: ${!maxWidth ? "300px" : maxWidth};
     position: relative;
-    margin-right: ${isCenter || align === "right" ? "auto" : "30px"};
-    margin-left: ${isCenter || align === "left" ? "auto" : "30px"};
+    margin-right: ${align === "center" || align === "right" ? "auto" : "30px"};
+    margin-left: ${align === "center" || align === "left" ? "auto" : "30px"};
 
     ${isNotification && (0, _styledComponents.css)`
       border: 1px solid var(--colorsSemanticInfo500);
@@ -149,8 +142,8 @@ const StyledToast = exports.StyledToast = _styledComponents.default.div`
     &${animationName}-enter${animationName}-enter-active {
     opacity: 1;
     transform: ${({
-  isCenter
-}) => isCenter ? " scale(1) translateY(0)" : "scale(1)"};
+  align
+}) => align === "center" ? " scale(1) translateY(0)" : "scale(1)"};
     transition: all 300ms cubic-bezier(0.25, 0.25, 0, 1.5);
   }
 
@@ -240,16 +233,6 @@ const ToastWrapper = exports.ToastWrapper = _styledComponents.default.div`
       display: flex;
     `}
 
-  ${({
-  isCenter
-}) => isCenter && (0, _styledComponents.css)`
-      position: relative;
-      width: auto;
-      height: auto;
-      justify-content: center;
-      display: flex;
-    `}
-
   ${({
   isNotice
 }) => isNotice && (0, _styledComponents.css)`

package/package.json

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

package/esm/components/carousel/carousel.component.d.ts

@@ -1,25 +0,0 @@
-import React from "react";
-import { TagProps } from "../../__internal__/utils/helpers/tags/tags";
-export interface CarouselProps extends TagProps {
-    /** Individual tabs */
-    children?: React.ReactNode;
-    /** [legacy] Custom className */
-    className?: string;
-    /** Enables the next button */
-    enableNextButton?: boolean;
-    /** Enables the previous button */
-    enablePreviousButton?: boolean;
-    /** Enables the slide selector */
-    enableSlideSelector?: boolean;
-    /** The selected tab on page load */
-    initialSlideIndex?: number | string;
-    /** Action to be called on slide change */
-    onSlideChange?: (index: number, transitionDirection: string) => void;
-    /** The selected slide */
-    slideIndex?: number | string;
-}
-export declare const Carousel: {
-    ({ children, className, enableSlideSelector, enablePreviousButton, enableNextButton, initialSlideIndex, onSlideChange, slideIndex, ...props }: CarouselProps): React.JSX.Element;
-    displayName: string;
-};
-export default Carousel;