carbon-react 123.0.1 → 123.2.0

package/esm/components/action-popover/action-popover-item/action-popover-item.component.js

@@ -110,6 +110,8 @@ export const ActionPopoverItem = ({
       alignSubmenu();
     }
   }, [alignSubmenu, submenu]);
+
+  // focuses item on opening of actionPopover submenu
   useEffect(() => {
     if (focusItem) {
       ref.current?.focus();

package/esm/components/action-popover/action-popover-menu/action-popover-menu.component.js

@@ -1,5 +1,5 @@
 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); }
-import React, { useCallback, useMemo, useContext, useState } from "react";
+import React, { useCallback, useMemo, useContext, useState, useEffect } from "react";
 import PropTypes from "prop-types";
 import invariant from "invariant";
 import { Menu } from "../action-popover.style";
@@ -32,7 +32,7 @@ const ActionPopoverMenu = /*#__PURE__*/React.forwardRef(({
       if (! /*#__PURE__*/React.isValidElement(child)) {
         return true;
       }
-      return child.type !== ActionPopoverItem && child.type !== ActionPopoverDivider;
+      return child.type.displayName !== ActionPopoverItem.displayName && child.type.displayName !== ActionPopoverDivider.displayName;
     });
     return !incorrectChild;
   }, [children]);
@@ -42,42 +42,82 @@ const ActionPopoverMenu = /*#__PURE__*/React.forwardRef(({
       return /*#__PURE__*/React.isValidElement(child) && child.type === ActionPopoverItem;
     });
   }, [children]);
+  const isItemDisabled = useCallback(value => {
+    const item = items[value];
+    // The invariant will be triggered before this else path can be explored, hence the ignore else.
+    // istanbul ignore else
+    return /*#__PURE__*/React.isValidElement(item) && item.props.disabled;
+  }, [items]);
+  const firstFocusableItem = items.findIndex((_, index) => !isItemDisabled(index));
+
+  // FIX-ME: FE-6248
+  // Once we no longer support Node 16, this function can be removed and `findLastIndex()` can be used in it's place.
+  // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/findLastIndex
+  function findLastFocusableItem() {
+    let lastFocusableItem = -1;
+    for (let i = items.length - 1; i >= 0; i--) {
+      if (!isItemDisabled(i)) {
+        lastFocusableItem = i;
+        break;
+      }
+    }
+    return lastFocusableItem;
+  }
+  const lastFocusableItem = findLastFocusableItem();
+  useEffect(() => {
+    if (isOpen && firstFocusableItem !== -1) setFocusIndex(firstFocusableItem);
+  }, [isOpen, firstFocusableItem, setFocusIndex]);
   const onKeyDown = useCallback(e => {
     if (Events.isTabKey(e)) {
       e.preventDefault();
-      // TAB: close menu and allow focus to change to next focusable element
+      // TAB: close menu and allow focus to change to the next focusable element
       focusButton();
       setOpen(false);
     } else if (Events.isDownKey(e)) {
-      // DOWN: focus next item or first
+      // DOWN: focus on the next item or first non-disabled item
       e.preventDefault();
       e.stopPropagation();
-      const indexValue = focusIndex < items.length - 1 ? focusIndex + 1 : 0;
+      let indexValue = focusIndex + 1;
+      while (indexValue < items.length && isItemDisabled(indexValue)) {
+        indexValue += 1;
+      }
+      if (indexValue >= items.length) {
+        indexValue = firstFocusableItem;
+      }
       setFocusIndex(indexValue);
     } else if (Events.isUpKey(e)) {
-      // UP: focus previous item or last
+      // UP: focus on the previous item or last non-disabled item
       e.preventDefault();
       e.stopPropagation();
-      const indexValue = focusIndex > 0 ? focusIndex - 1 : items.length - 1;
+      let indexValue = focusIndex - 1;
+      while (indexValue >= firstFocusableItem && isItemDisabled(indexValue)) {
+        indexValue -= 1;
+      }
+      if (indexValue < firstFocusableItem) {
+        indexValue = lastFocusableItem;
+      }
       setFocusIndex(indexValue);
     } else if (Events.isHomeKey(e)) {
-      // HOME: focus first item
+      // HOME: focus on the first non-disabled item
       e.preventDefault();
       e.stopPropagation();
-      setFocusIndex(0);
+      const indexValue = firstFocusableItem;
+      setFocusIndex(indexValue);
     } else if (Events.isEndKey(e)) {
-      // END: focus last item
+      // END: focus on the last non-disabled item
       e.preventDefault();
       e.stopPropagation();
-      setFocusIndex(items.length - 1);
+      const indexValue = lastFocusableItem;
+      setFocusIndex(indexValue);
     } else if (e.key.length === 1) {
-      // any printable character: focus the next item on the list that starts with that character
-      // selection should wrap to the start of the list
+      // Any printable character: focus on the next non-disabled item on the list that starts with that character
+      // Selection should wrap to the start of the list
       e.stopPropagation();
       let firstMatch;
       let nextMatch;
-      React.Children.forEach(items, (child, index) => {
-        if ( /*#__PURE__*/React.isValidElement(child) && child.props.children.toLowerCase().startsWith(e.key.toLowerCase())) {
+      items.forEach((item, index) => {
+        if ( /*#__PURE__*/React.isValidElement(item) && !isItemDisabled(index) && item.props.children.toLowerCase().startsWith(e.key.toLowerCase())) {
+          // istanbul ignore else
           if (firstMatch === undefined) {
             firstMatch = index;
           }
@@ -92,7 +132,7 @@ const ActionPopoverMenu = /*#__PURE__*/React.forwardRef(({
         setFocusIndex(firstMatch);
       }
     }
-  }, [focusButton, setOpen, focusIndex, items, setFocusIndex]);
+  }, [focusButton, setOpen, focusIndex, items, isItemDisabled, setFocusIndex, firstFocusableItem, lastFocusableItem]);
   const [childHasSubmenu, setChildHasSubmenu] = useState(false);
   const [childHasIcon, setChildHasIcon] = useState(false);
   const [currentSubmenuPosition, setCurrentSubmenuPosition] = useState(submenuPosition);

package/esm/components/action-popover/action-popover.component.js

@@ -118,8 +118,8 @@ export const ActionPopover = ({
       // There will be multiple document click listeners but we cant prevent propagation because it will interfere with
       // other instances on the same page
 
-      const isInMenu = menu.current && menu.current.contains(target);
-      const isInButton = buttonRef.current && buttonRef.current.contains(target);
+      const isInMenu = menu?.current?.contains(target);
+      const isInButton = buttonRef?.current?.contains(target);
       if (!isInMenu && !isInButton) {
         setOpen(false);
       }

package/esm/components/action-popover/action-popover.style.js

@@ -131,6 +131,14 @@ const StyledMenuItem = styled.button`
         cursor: not-allowed;
         color: var(--colorsUtilityYin030);
       }
+
+      :focus {
+        border: none;
+        outline: none;
+        -webkit-appearance: none;
+        -webkit-box-shadow: none;
+        box-shadow: none;
+      }
     `}
 
   ${({

package/esm/components/carousel/carousel.component.js

@@ -1,9 +1,11 @@
 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); }
 import React, { useCallback, useEffect, useRef, useState, useMemo } from "react";
 import PropTypes from "prop-types";
+import Logger from "../../__internal__/utils/logger";
 import tagComponent from "../../__internal__/utils/helpers/tags/tags";
 import { CarouselPreviousButtonWrapperStyle, CarouselNextButtonWrapperStyle, CarouselButtonStyle, CarouselStyledIconRight, CarouselStyledIconLeft, CarouselSelectorWrapperStyle, CarouselSelectorInputWrapperStyle, CarouselSelectorInputStyle, CarouselSelectorLabelStyle, CarouselWrapperStyle, CarouselSliderWrapper } from "./carousel.style";
 import guid from "../../__internal__/utils/helpers/guid";
+let deprecateWarnTriggered = false;
 const NEXT = "next";
 const PREVIOUS = "previous";
 export const Carousel = ({
@@ -17,6 +19,10 @@ export const Carousel = ({
   slideIndex,
   ...props
 }) => {
+  if (!deprecateWarnTriggered) {
+    deprecateWarnTriggered = true;
+    Logger.deprecate("The Carousel component is deprecated and will soon be removed.");
+  }
   const [selectedSlideIndex, setSelectedSlideIndex] = useState(Number(slideIndex) || Number(initialSlideIndex));
   const transitionDirection = useRef(NEXT);
   const lastSlideIndexProp = useRef(slideIndex);

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

@@ -1,6 +1,7 @@
 import React from "react";
 import { DialogProps } from "../dialog";
 import { IconType } from "../icon";
+import { TagProps } from "../../__internal__/utils/helpers/tags";
 export interface ConfirmProps extends Omit<DialogProps, "className" | "disableFocusTrap" | "bespokeFocusTrap" | "focusableSelectors" | "help" | "role" | "contentPadding" | "focusableContainers" | "ariaRole" | "timeout" | "enableBackgroundUI" | "disableClose"> {
     /** Color variants for new business themes: "primary" | "secondary" | "tertiary" | "dashed" | "darkBackground" */
     cancelButtonType?: "primary" | "secondary" | "tertiary" | "dashed" | "darkBackground";
@@ -22,6 +23,10 @@ export interface ConfirmProps extends Omit<DialogProps, "className" | "disableFo
     confirmButtonIconPosition?: "before" | "after";
     /** Defines an Icon type within the confirm button (see Icon for options) */
     confirmButtonIconType?: IconType;
+    /** Data tag prop bag for cancelButton */
+    cancelButtonDataProps?: TagProps;
+    /** Data tag prop bag for confirmButton */
+    confirmButtonDataProps?: TagProps;
     /** Makes cancel button disabled */
     disableCancel?: boolean;
     /** Makes confirm button disabled */
@@ -33,5 +38,5 @@ export interface ConfirmProps extends Omit<DialogProps, "className" | "disableFo
     /** A custom event handler when a confirmation takes place */
     onConfirm: (ev: React.MouseEvent<HTMLButtonElement>) => void;
 }
-export declare const Confirm: ({ "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-label": ariaLabel, open, children, cancelButtonDestructive, confirmButtonDestructive, cancelButtonType, confirmButtonType, cancelButtonIconType, cancelButtonIconPosition, confirmButtonIconType, confirmButtonIconPosition, cancelLabel, onCancel, disableCancel, onConfirm, isLoadingConfirm, disableConfirm, confirmLabel, iconType, subtitle, title, size, showCloseIcon, ...rest }: ConfirmProps) => React.JSX.Element;
+export declare const Confirm: ({ "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-label": ariaLabel, open, children, cancelButtonDestructive, confirmButtonDestructive, cancelButtonType, confirmButtonType, cancelButtonIconType, cancelButtonIconPosition, confirmButtonIconType, confirmButtonIconPosition, cancelButtonDataProps, confirmButtonDataProps, cancelLabel, onCancel, disableCancel, onConfirm, isLoadingConfirm, disableConfirm, confirmLabel, iconType, subtitle, title, size, showCloseIcon, ...rest }: ConfirmProps) => React.JSX.Element;
 export default Confirm;

package/esm/components/confirm/confirm.component.js

@@ -9,6 +9,7 @@ import Button from "../button/button.component";
 import Icon from "../icon";
 import Loader from "../loader";
 import useLocale from "../../hooks/__internal__/useLocale";
+import tagComponent from "../../__internal__/utils/helpers/tags";
 export const Confirm = ({
   "aria-labelledby": ariaLabelledBy,
   "aria-describedby": ariaDescribedBy,
@@ -23,6 +24,8 @@ export const Confirm = ({
   cancelButtonIconPosition,
   confirmButtonIconType,
   confirmButtonIconPosition,
+  cancelButtonDataProps,
+  confirmButtonDataProps,
   cancelLabel,
   onCancel,
   disableCancel,
@@ -57,26 +60,30 @@ export const Confirm = ({
   }
   const renderCancelButton = () => {
     if (!onCancel) return null;
-    return /*#__PURE__*/React.createElement(Button, {
+    return /*#__PURE__*/React.createElement(Button, _extends({
       onClick: onCancel,
-      "data-element": "cancel",
       buttonType: cancelButtonType,
       destructive: cancelButtonDestructive,
       disabled: disableCancel,
       iconType: cancelButtonIconType,
       iconPosition: cancelButtonIconPosition
-    }, cancelLabel || l.confirm.no());
+    }, tagComponent("cancel", {
+      "data-element": "cancel",
+      ...cancelButtonDataProps
+    })), cancelLabel || l.confirm.no());
   };
-  const renderConfirmButton = () => /*#__PURE__*/React.createElement(Button, {
+  const renderConfirmButton = () => /*#__PURE__*/React.createElement(Button, _extends({
     onClick: onConfirm,
-    "data-element": "confirm",
     buttonType: confirmButtonType,
     destructive: confirmButtonDestructive,
     disabled: isLoadingConfirm || disableConfirm,
     ml: 2,
     iconType: confirmButtonIconType,
     iconPosition: confirmButtonIconPosition
-  }, isLoadingConfirm ? /*#__PURE__*/React.createElement(Loader, {
+  }, tagComponent("confirm", {
+    "data-element": "confirm",
+    ...confirmButtonDataProps
+  })), isLoadingConfirm ? /*#__PURE__*/React.createElement(Loader, {
     isInsideButton: true,
     isActive: true
   }) : confirmLabel || l.confirm.yes());

package/lib/components/action-popover/action-popover-item/action-popover-item.component.js

@@ -119,6 +119,8 @@ const ActionPopoverItem = ({
       alignSubmenu();
     }
   }, [alignSubmenu, submenu]);
+
+  // focuses item on opening of actionPopover submenu
   (0, _react.useEffect)(() => {
     if (focusItem) {
       ref.current?.focus();

package/lib/components/action-popover/action-popover-menu/action-popover-menu.component.js

@@ -41,7 +41,7 @@ const ActionPopoverMenu = /*#__PURE__*/_react.default.forwardRef(({
       if (! /*#__PURE__*/_react.default.isValidElement(child)) {
         return true;
       }
-      return child.type !== _actionPopoverItem.default && child.type !== _actionPopoverDivider.default;
+      return child.type.displayName !== _actionPopoverItem.default.displayName && child.type.displayName !== _actionPopoverDivider.default.displayName;
     });
     return !incorrectChild;
   }, [children]);
@@ -51,42 +51,82 @@ const ActionPopoverMenu = /*#__PURE__*/_react.default.forwardRef(({
       return /*#__PURE__*/_react.default.isValidElement(child) && child.type === _actionPopoverItem.default;
     });
   }, [children]);
+  const isItemDisabled = (0, _react.useCallback)(value => {
+    const item = items[value];
+    // The invariant will be triggered before this else path can be explored, hence the ignore else.
+    // istanbul ignore else
+    return /*#__PURE__*/_react.default.isValidElement(item) && item.props.disabled;
+  }, [items]);
+  const firstFocusableItem = items.findIndex((_, index) => !isItemDisabled(index));
+
+  // FIX-ME: FE-6248
+  // Once we no longer support Node 16, this function can be removed and `findLastIndex()` can be used in it's place.
+  // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/findLastIndex
+  function findLastFocusableItem() {
+    let lastFocusableItem = -1;
+    for (let i = items.length - 1; i >= 0; i--) {
+      if (!isItemDisabled(i)) {
+        lastFocusableItem = i;
+        break;
+      }
+    }
+    return lastFocusableItem;
+  }
+  const lastFocusableItem = findLastFocusableItem();
+  (0, _react.useEffect)(() => {
+    if (isOpen && firstFocusableItem !== -1) setFocusIndex(firstFocusableItem);
+  }, [isOpen, firstFocusableItem, setFocusIndex]);
   const onKeyDown = (0, _react.useCallback)(e => {
     if (_events.default.isTabKey(e)) {
       e.preventDefault();
-      // TAB: close menu and allow focus to change to next focusable element
+      // TAB: close menu and allow focus to change to the next focusable element
       focusButton();
       setOpen(false);
     } else if (_events.default.isDownKey(e)) {
-      // DOWN: focus next item or first
+      // DOWN: focus on the next item or first non-disabled item
       e.preventDefault();
       e.stopPropagation();
-      const indexValue = focusIndex < items.length - 1 ? focusIndex + 1 : 0;
+      let indexValue = focusIndex + 1;
+      while (indexValue < items.length && isItemDisabled(indexValue)) {
+        indexValue += 1;
+      }
+      if (indexValue >= items.length) {
+        indexValue = firstFocusableItem;
+      }
       setFocusIndex(indexValue);
     } else if (_events.default.isUpKey(e)) {
-      // UP: focus previous item or last
+      // UP: focus on the previous item or last non-disabled item
       e.preventDefault();
       e.stopPropagation();
-      const indexValue = focusIndex > 0 ? focusIndex - 1 : items.length - 1;
+      let indexValue = focusIndex - 1;
+      while (indexValue >= firstFocusableItem && isItemDisabled(indexValue)) {
+        indexValue -= 1;
+      }
+      if (indexValue < firstFocusableItem) {
+        indexValue = lastFocusableItem;
+      }
       setFocusIndex(indexValue);
     } else if (_events.default.isHomeKey(e)) {
-      // HOME: focus first item
+      // HOME: focus on the first non-disabled item
       e.preventDefault();
       e.stopPropagation();
-      setFocusIndex(0);
+      const indexValue = firstFocusableItem;
+      setFocusIndex(indexValue);
     } else if (_events.default.isEndKey(e)) {
-      // END: focus last item
+      // END: focus on the last non-disabled item
       e.preventDefault();
       e.stopPropagation();
-      setFocusIndex(items.length - 1);
+      const indexValue = lastFocusableItem;
+      setFocusIndex(indexValue);
     } else if (e.key.length === 1) {
-      // any printable character: focus the next item on the list that starts with that character
-      // selection should wrap to the start of the list
+      // Any printable character: focus on the next non-disabled item on the list that starts with that character
+      // Selection should wrap to the start of the list
       e.stopPropagation();
       let firstMatch;
       let nextMatch;
-      _react.default.Children.forEach(items, (child, index) => {
-        if ( /*#__PURE__*/_react.default.isValidElement(child) && child.props.children.toLowerCase().startsWith(e.key.toLowerCase())) {
+      items.forEach((item, index) => {
+        if ( /*#__PURE__*/_react.default.isValidElement(item) && !isItemDisabled(index) && item.props.children.toLowerCase().startsWith(e.key.toLowerCase())) {
+          // istanbul ignore else
           if (firstMatch === undefined) {
             firstMatch = index;
           }
@@ -101,7 +141,7 @@ const ActionPopoverMenu = /*#__PURE__*/_react.default.forwardRef(({
         setFocusIndex(firstMatch);
       }
     }
-  }, [focusButton, setOpen, focusIndex, items, setFocusIndex]);
+  }, [focusButton, setOpen, focusIndex, items, isItemDisabled, setFocusIndex, firstFocusableItem, lastFocusableItem]);
   const [childHasSubmenu, setChildHasSubmenu] = (0, _react.useState)(false);
   const [childHasIcon, setChildHasIcon] = (0, _react.useState)(false);
   const [currentSubmenuPosition, setCurrentSubmenuPosition] = (0, _react.useState)(submenuPosition);

package/lib/components/action-popover/action-popover.component.js

@@ -127,8 +127,8 @@ const ActionPopover = ({
       // There will be multiple document click listeners but we cant prevent propagation because it will interfere with
       // other instances on the same page
 
-      const isInMenu = menu.current && menu.current.contains(target);
-      const isInButton = buttonRef.current && buttonRef.current.contains(target);
+      const isInMenu = menu?.current?.contains(target);
+      const isInButton = buttonRef?.current?.contains(target);
       if (!isInMenu && !isInButton) {
         setOpen(false);
       }

package/lib/components/action-popover/action-popover.style.js

@@ -143,6 +143,14 @@ const StyledMenuItem = _styledComponents.default.button`
         cursor: not-allowed;
         color: var(--colorsUtilityYin030);
       }
+
+      :focus {
+        border: none;
+        outline: none;
+        -webkit-appearance: none;
+        -webkit-box-shadow: none;
+        box-shadow: none;
+      }
     `}
 
   ${({

package/lib/components/carousel/carousel.component.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.Carousel = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _logger = _interopRequireDefault(require("../../__internal__/utils/logger"));
 var _tags = _interopRequireDefault(require("../../__internal__/utils/helpers/tags/tags"));
 var _carousel = require("./carousel.style");
 var _guid = _interopRequireDefault(require("../../__internal__/utils/helpers/guid"));
@@ -13,6 +14,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 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 deprecateWarnTriggered = false;
 const NEXT = "next";
 const PREVIOUS = "previous";
 const Carousel = ({
@@ -26,6 +28,10 @@ const Carousel = ({
   slideIndex,
   ...props
 }) => {
+  if (!deprecateWarnTriggered) {
+    deprecateWarnTriggered = true;
+    _logger.default.deprecate("The Carousel component is deprecated and will soon be removed.");
+  }
   const [selectedSlideIndex, setSelectedSlideIndex] = (0, _react.useState)(Number(slideIndex) || Number(initialSlideIndex));
   const transitionDirection = (0, _react.useRef)(NEXT);
   const lastSlideIndexProp = (0, _react.useRef)(slideIndex);

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

@@ -1,6 +1,7 @@
 import React from "react";
 import { DialogProps } from "../dialog";
 import { IconType } from "../icon";
+import { TagProps } from "../../__internal__/utils/helpers/tags";
 export interface ConfirmProps extends Omit<DialogProps, "className" | "disableFocusTrap" | "bespokeFocusTrap" | "focusableSelectors" | "help" | "role" | "contentPadding" | "focusableContainers" | "ariaRole" | "timeout" | "enableBackgroundUI" | "disableClose"> {
     /** Color variants for new business themes: "primary" | "secondary" | "tertiary" | "dashed" | "darkBackground" */
     cancelButtonType?: "primary" | "secondary" | "tertiary" | "dashed" | "darkBackground";
@@ -22,6 +23,10 @@ export interface ConfirmProps extends Omit<DialogProps, "className" | "disableFo
     confirmButtonIconPosition?: "before" | "after";
     /** Defines an Icon type within the confirm button (see Icon for options) */
     confirmButtonIconType?: IconType;
+    /** Data tag prop bag for cancelButton */
+    cancelButtonDataProps?: TagProps;
+    /** Data tag prop bag for confirmButton */
+    confirmButtonDataProps?: TagProps;
     /** Makes cancel button disabled */
     disableCancel?: boolean;
     /** Makes confirm button disabled */
@@ -33,5 +38,5 @@ export interface ConfirmProps extends Omit<DialogProps, "className" | "disableFo
     /** A custom event handler when a confirmation takes place */
     onConfirm: (ev: React.MouseEvent<HTMLButtonElement>) => void;
 }
-export declare const Confirm: ({ "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-label": ariaLabel, open, children, cancelButtonDestructive, confirmButtonDestructive, cancelButtonType, confirmButtonType, cancelButtonIconType, cancelButtonIconPosition, confirmButtonIconType, confirmButtonIconPosition, cancelLabel, onCancel, disableCancel, onConfirm, isLoadingConfirm, disableConfirm, confirmLabel, iconType, subtitle, title, size, showCloseIcon, ...rest }: ConfirmProps) => React.JSX.Element;
+export declare const Confirm: ({ "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-label": ariaLabel, open, children, cancelButtonDestructive, confirmButtonDestructive, cancelButtonType, confirmButtonType, cancelButtonIconType, cancelButtonIconPosition, confirmButtonIconType, confirmButtonIconPosition, cancelButtonDataProps, confirmButtonDataProps, cancelLabel, onCancel, disableCancel, onConfirm, isLoadingConfirm, disableConfirm, confirmLabel, iconType, subtitle, title, size, showCloseIcon, ...rest }: ConfirmProps) => React.JSX.Element;
 export default Confirm;

package/lib/components/confirm/confirm.component.js

@@ -14,6 +14,7 @@ var _button = _interopRequireDefault(require("../button/button.component"));
 var _icon = _interopRequireDefault(require("../icon"));
 var _loader = _interopRequireDefault(require("../loader"));
 var _useLocale = _interopRequireDefault(require("../../hooks/__internal__/useLocale"));
+var _tags = _interopRequireDefault(require("../../__internal__/utils/helpers/tags"));
 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; }
@@ -32,6 +33,8 @@ const Confirm = ({
   cancelButtonIconPosition,
   confirmButtonIconType,
   confirmButtonIconPosition,
+  cancelButtonDataProps,
+  confirmButtonDataProps,
   cancelLabel,
   onCancel,
   disableCancel,
@@ -66,26 +69,30 @@ const Confirm = ({
   }
   const renderCancelButton = () => {
     if (!onCancel) return null;
-    return /*#__PURE__*/_react.default.createElement(_button.default, {
+    return /*#__PURE__*/_react.default.createElement(_button.default, _extends({
       onClick: onCancel,
-      "data-element": "cancel",
       buttonType: cancelButtonType,
       destructive: cancelButtonDestructive,
       disabled: disableCancel,
       iconType: cancelButtonIconType,
       iconPosition: cancelButtonIconPosition
-    }, cancelLabel || l.confirm.no());
+    }, (0, _tags.default)("cancel", {
+      "data-element": "cancel",
+      ...cancelButtonDataProps
+    })), cancelLabel || l.confirm.no());
   };
-  const renderConfirmButton = () => /*#__PURE__*/_react.default.createElement(_button.default, {
+  const renderConfirmButton = () => /*#__PURE__*/_react.default.createElement(_button.default, _extends({
     onClick: onConfirm,
-    "data-element": "confirm",
     buttonType: confirmButtonType,
     destructive: confirmButtonDestructive,
     disabled: isLoadingConfirm || disableConfirm,
     ml: 2,
     iconType: confirmButtonIconType,
     iconPosition: confirmButtonIconPosition
-  }, isLoadingConfirm ? /*#__PURE__*/_react.default.createElement(_loader.default, {
+  }, (0, _tags.default)("confirm", {
+    "data-element": "confirm",
+    ...confirmButtonDataProps
+  })), isLoadingConfirm ? /*#__PURE__*/_react.default.createElement(_loader.default, {
     isInsideButton: true,
     isActive: true
   }) : confirmLabel || l.confirm.yes());

package/package.json

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