carbon-react 114.11.0 → 114.12.1

package/esm/components/dialog/dialog.component.js

@@ -117,7 +117,7 @@ const Dialog = ({
     return /*#__PURE__*/React.createElement(IconButton, {
       "data-element": "close",
       "aria-label": locale.dialog.ariaLabels.close(),
-      onAction: onCancel,
+      onClick: onCancel,
       disabled: disableClose
     }, /*#__PURE__*/React.createElement(Icon, {
       type: "close"

package/esm/components/dialog-full-screen/dialog-full-screen.component.js

@@ -58,7 +58,7 @@ const DialogFullScreen = ({
     return /*#__PURE__*/React.createElement(IconButton, {
       "data-element": "close",
       "aria-label": locale.dialogFullScreen.ariaLabels.close(),
-      onAction: onCancel
+      onClick: onCancel
     }, /*#__PURE__*/React.createElement(Icon, {
       type: "close"
     }));

package/esm/components/dismissible-box/dismissible-box.component.js

@@ -16,7 +16,7 @@ const DismissibleBox = ({
 }, rest), children, /*#__PURE__*/React.createElement("span", {
   "data-element": "close-button-wrapper"
 }, /*#__PURE__*/React.createElement(IconButton, {
-  onAction: onClose,
+  onClick: onClose,
   "aria-label": "close-button",
   ml: 3
 }, /*#__PURE__*/React.createElement(Icon, {

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

@@ -14,10 +14,12 @@ export interface IconButtonProps extends SpaceProps {
     onMouseEnter?: (ev: React.MouseEvent<HTMLButtonElement>) => void;
     /** Callback triggered on mouse leave */
     onMouseLeave?: (ev: React.MouseEvent<HTMLButtonElement>) => void;
-    /** Action callback */
-    onAction: (e: React.KeyboardEvent<HTMLButtonElement> | React.MouseEvent<HTMLButtonElement>) => void;
+    /** [DEPRECATED - use `onClick` instead] Action callback */
+    onAction?: (e: React.KeyboardEvent<HTMLButtonElement> | React.MouseEvent<HTMLButtonElement>) => void;
     /** Set the button to disabled */
     disabled?: boolean;
+    /** Callback triggered on click */
+    onClick?: (e: React.KeyboardEvent<HTMLButtonElement> | React.MouseEvent<HTMLButtonElement>) => void;
 }
 declare const IconButton: React.ForwardRefExoticComponent<IconButtonProps & React.RefAttributes<HTMLButtonElement>>;
 export default IconButton;

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

@@ -2,19 +2,29 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 import React, { useState, useCallback, useContext } from "react";
 import PropTypes from "prop-types";
+import invariant from "invariant";
 import Events from "../../__internal__/utils/helpers/events";
 import StyledIconButton from "./icon-button.style";
 import { TooltipProvider } from "../../__internal__/tooltip-provider";
 import { ButtonBarContext } from "../button-bar/button-bar.component";
+import Logger from "../../__internal__/utils/logger";
+let onActionButtonWarnTriggered = false;
 const IconButton = /*#__PURE__*/React.forwardRef(({
   "aria-label": ariaLabel,
   onAction,
+  onClick,
   children,
   disabled,
   ...rest
 }, ref) => {
   var _internalRef$querySel;
 
+  if (!onActionButtonWarnTriggered && onAction) {
+    onActionButtonWarnTriggered = true;
+    Logger.deprecate("The `onAction` callback for the `IconButton` component is deprecated and will soon be removed. Please use `onClick` instead");
+  }
+
+  !!(onClick && onAction) ? process.env.NODE_ENV !== "production" ? invariant(false, "onClick and onAction have both been set, please use onClick as onAction will soon be deprecated") : invariant(false) : void 0;
   const [internalRef, setInternalRef] = useState();
   const context = useContext(ButtonBarContext);
   const ariaLabelValue = Object.keys(context).length ? ariaLabel || (internalRef === null || internalRef === void 0 ? void 0 : (_internalRef$querySel = internalRef.querySelector("[data-component='icon']")) === null || _internalRef$querySel === void 0 ? void 0 : _internalRef$querySel.getAttribute("type")) || undefined : ariaLabel;
@@ -22,14 +32,14 @@ const IconButton = /*#__PURE__*/React.forwardRef(({
   const handleKeyDown = e => {
     if (Events.isEnterKey(e) || Events.isSpaceKey(e)) {
       e.preventDefault();
-      onAction(e);
-    } else {
-      e.stopPropagation();
+      onAction === null || onAction === void 0 ? void 0 : onAction(e);
+      onClick === null || onClick === void 0 ? void 0 : onClick(e);
     }
   };
 
   const handleOnClick = e => {
-    onAction(e);
+    onAction === null || onAction === void 0 ? void 0 : onAction(e);
+    onClick === null || onClick === void 0 ? void 0 : onClick(e);
   };
 
   const setRefs = useCallback(reference => {
@@ -210,8 +220,9 @@ IconButton.propTypes = {
     "toString": PropTypes.func.isRequired,
     "valueOf": PropTypes.func.isRequired
   }), PropTypes.string]),
-  "onAction": PropTypes.func.isRequired,
+  "onAction": PropTypes.func,
   "onBlur": PropTypes.func,
+  "onClick": PropTypes.func,
   "onFocus": PropTypes.func,
   "onMouseEnter": PropTypes.func,
   "onMouseLeave": PropTypes.func,

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { StyledImageProps } from "./image.style";
 export declare const Image: {
-    ({ alt, src, children, ...rest }: StyledImageProps): JSX.Element;
+    ({ alt, decorative, src, children, ...rest }: StyledImageProps): JSX.Element;
     displayName: string;
 };
 export default Image;

package/esm/components/image/image.component.js

@@ -7,14 +7,16 @@ import { StyledImage } from "./image.style";
 
 const Image = ({
   alt,
+  decorative = false,
   src,
   children,
   ...rest
 }) => {
   !(!src || !children) ? process.env.NODE_ENV !== "production" ? invariant(false, "The 'Image' component renders as an 'img' element when the 'src' prop is used and therefore does not accept children.") : invariant(false) : void 0;
-  !(!src || alt && typeof alt === "string") ? process.env.NODE_ENV !== "production" ? invariant(false, "Please provide an 'alt' string when rendering the 'Image' component as an 'img' element.") : invariant(false) : void 0;
+  !(!src || alt && typeof alt === "string" || decorative) ? process.env.NODE_ENV !== "production" ? invariant(false, "Please use the 'decorative' prop if the 'alt' text should be an empty value or provide an 'alt' string when rendering the 'Image' component as an 'img' element.") : invariant(false) : void 0;
   return /*#__PURE__*/React.createElement(StyledImage, _extends({
     alt: alt,
+    decorative: decorative,
     src: src
   }, rest), children);
 };
@@ -527,6 +529,7 @@ Image.propTypes = {
     "valueOf": PropTypes.func.isRequired
   }), PropTypes.string]),
   "children": PropTypes.node,
+  "decorative": PropTypes.bool,
   "display": PropTypes.oneOfType([PropTypes.oneOf(["-moz-initial", "-ms-flexbox", "-ms-grid", "-ms-inline-flexbox", "-ms-inline-grid", "-webkit-flex", "-webkit-inline-flex", "block", "contents", "flex", "flow-root", "flow", "grid", "inherit", "initial", "inline-block", "inline-flex", "inline-grid", "inline-list-item", "inline-table", "inline", "list-item", "none", "revert", "ruby-base-container", "ruby-base", "ruby-text-container", "ruby-text", "ruby", "run-in", "table-caption", "table-cell", "table-column-group", "table-column", "table-footer-group", "table-header-group", "table-row-group", "table-row", "table", "unset"]), PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf(["-moz-initial", "-ms-flexbox", "-ms-grid", "-ms-inline-flexbox", "-ms-inline-grid", "-webkit-flex", "-webkit-inline-flex", "block", "contents", "flex", "flow-root", "flow", "grid", "inherit", "initial", "inline-block", "inline-flex", "inline-grid", "inline-list-item", "inline-table", "inline", "list-item", "none", "revert", "ruby-base-container", "ruby-base", "ruby-text-container", "ruby-text", "ruby", "run-in", "table-caption", "table-cell", "table-column-group", "table-column", "table-footer-group", "table-header-group", "table-row-group", "table-row", "table", "unset", null]), PropTypes.shape({
     "__@iterator": PropTypes.func.isRequired,
     "anchor": PropTypes.func.isRequired,

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

@@ -3,6 +3,8 @@ import { MarginProps, BackgroundProps, LayoutProps } from "styled-system";
 export interface StyledImageProps extends MarginProps, BackgroundProps, LayoutProps {
     /** HTML alt property to display when an img fails to load */
     alt?: string;
+    /** Prop to specify if the image is decorative  */
+    decorative?: boolean;
     /** Any valid file path, passing this will render the component as an img element */
     src?: string;
     /** HTML hidden property to indicate whether to remain hidden visually and from screen readers */

package/esm/components/link-preview/link-preview.component.js

@@ -55,7 +55,7 @@ const LinkPreview = ({
     lines: 4
   }, /*#__PURE__*/React.createElement(StyledTitle, null, title), /*#__PURE__*/React.createElement(StyledDescription, null, /*#__PURE__*/React.createElement("div", null, description)), /*#__PURE__*/React.createElement(StyledUrl, null, displayUrl()))), onClose && as === "div" && /*#__PURE__*/React.createElement(StyledCloseIconWrapper, null, /*#__PURE__*/React.createElement(IconButton, {
     "aria-label": "link preview close button",
-    onAction: () => onClose(url)
+    onClick: () => onClose(url)
   }, /*#__PURE__*/React.createElement(Icon, {
     type: "close"
   }))));

package/esm/components/menu/menu-full-screen/menu-full-screen.component.js

@@ -63,7 +63,7 @@ const MenuFullscreen = ({
     startPosition: startPosition
   }, /*#__PURE__*/React.createElement(IconButton, {
     "aria-label": "menu fullscreen close button",
-    onAction: onClose,
+    onClick: onClose,
     "data-element": "close"
   }, /*#__PURE__*/React.createElement(Icon, {
     type: "close",

package/esm/components/message/message.component.js

@@ -32,7 +32,7 @@ const Message = ({
     return /*#__PURE__*/React.createElement(IconButton, {
       "data-element": "close",
       "aria-label": closeButtonAriaLabel || l.message.closeButtonAriaLabel(),
-      onAction: onDismiss
+      onClick: onDismiss
     }, /*#__PURE__*/React.createElement(Icon, {
       type: "close"
     }));

package/esm/components/pill/pill.component.js

@@ -32,7 +32,7 @@ const Pill = ({
   maxWidth: maxWidth,
   wrapText: wrapText
 }, rest), children, onDelete && /*#__PURE__*/React.createElement(IconButton, {
-  onAction: onDelete,
+  onClick: onDelete,
   "data-element": "close",
   "aria-label": ariaLabelOfRemoveButton
 }, /*#__PURE__*/React.createElement(Icon, {

package/esm/components/pod/pod.component.js

@@ -122,7 +122,7 @@ const Pod = /*#__PURE__*/React.forwardRef(({
     noBorder: !border,
     size: size,
     variant: variant,
-    onAction: processPodAction(onUndo)
+    onClick: processPodAction(onUndo)
   }, /*#__PURE__*/React.createElement(Icon, {
     type: "undo"
   })), !softDelete && onEdit && /*#__PURE__*/React.createElement(StyledEditAction, _extends({}, editEvents, {
@@ -152,7 +152,7 @@ const Pod = /*#__PURE__*/React.forwardRef(({
     noBorder: !border,
     size: size,
     variant: variant,
-    onAction: processPodAction(onDelete)
+    onClick: processPodAction(onDelete)
   }, /*#__PURE__*/React.createElement(Icon, {
     type: "delete"
   }))));

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

@@ -22,7 +22,7 @@ const renderOpen = ({
   "aria-haspopup": ariaHasPopup
 }) => /*#__PURE__*/React.createElement(PopoverContainerOpenIcon, {
   tabIndex: tabIndex,
-  onAction: onClick,
+  onClick: onClick,
   "data-element": dataElement,
   ref: ref,
   "aria-label": ariaLabel,
@@ -54,7 +54,7 @@ const renderClose = ({
 }) => /*#__PURE__*/React.createElement(PopoverContainerCloseIcon, {
   "data-element": dataElement,
   tabIndex: tabIndex,
-  onAction: onClick,
+  onClick: onClick,
   ref: ref,
   "aria-label": ariaLabel
 }, /*#__PURE__*/React.createElement(Icon, {

package/esm/components/sidebar/sidebar.component.js

@@ -58,7 +58,7 @@ const Sidebar = /*#__PURE__*/React.forwardRef(({
     if (!onCancel) return null;
     return /*#__PURE__*/React.createElement(IconButton, {
       "aria-label": locale.sidebar.ariaLabels.close(),
-      onAction: onCancel,
+      onClick: onCancel,
       "data-element": "close"
     }, /*#__PURE__*/React.createElement(Icon, {
       type: "close"

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

@@ -82,7 +82,7 @@ const Toast = /*#__PURE__*/React.forwardRef(({
     return /*#__PURE__*/React.createElement(IconButton, {
       "aria-label": locale.toast.ariaLabels.close(),
       "data-element": "close",
-      onAction: onDismiss,
+      onClick: onDismiss,
       ref: closeIconRef
     }, /*#__PURE__*/React.createElement(Icon, {
       type: "close"

package/esm/components/vertical-menu/vertical-menu-full-screen.component.js

@@ -51,7 +51,7 @@ const VerticalMenuFullScreen = ({
     boxSizing: "border-box"
   }, /*#__PURE__*/React.createElement(IconButton, {
     "aria-label": l.verticalMenuFullScreen.ariaLabels.close(),
-    onAction: onClose,
+    onClick: onClose,
     "data-element": "close"
   }, /*#__PURE__*/React.createElement(Icon, {
     type: "close",

package/lib/components/dialog/dialog.component.js

@@ -144,7 +144,7 @@ const Dialog = ({
     return /*#__PURE__*/_react.default.createElement(_iconButton.default, {
       "data-element": "close",
       "aria-label": locale.dialog.ariaLabels.close(),
-      onAction: onCancel,
+      onClick: onCancel,
       disabled: disableClose
     }, /*#__PURE__*/_react.default.createElement(_icon.default, {
       type: "close"

package/lib/components/dialog-full-screen/dialog-full-screen.component.js

@@ -84,7 +84,7 @@ const DialogFullScreen = ({
     return /*#__PURE__*/_react.default.createElement(_iconButton.default, {
       "data-element": "close",
       "aria-label": locale.dialogFullScreen.ariaLabels.close(),
-      onAction: onCancel
+      onClick: onCancel
     }, /*#__PURE__*/_react.default.createElement(_icon.default, {
       type: "close"
     }));

package/lib/components/dismissible-box/dismissible-box.component.js

@@ -29,7 +29,7 @@ const DismissibleBox = ({
 }, rest), children, /*#__PURE__*/_react.default.createElement("span", {
   "data-element": "close-button-wrapper"
 }, /*#__PURE__*/_react.default.createElement(_iconButton.default, {
-  onAction: onClose,
+  onClick: onClose,
   "aria-label": "close-button",
   ml: 3
 }, /*#__PURE__*/_react.default.createElement(_icon.default, {

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

@@ -14,10 +14,12 @@ export interface IconButtonProps extends SpaceProps {
     onMouseEnter?: (ev: React.MouseEvent<HTMLButtonElement>) => void;
     /** Callback triggered on mouse leave */
     onMouseLeave?: (ev: React.MouseEvent<HTMLButtonElement>) => void;
-    /** Action callback */
-    onAction: (e: React.KeyboardEvent<HTMLButtonElement> | React.MouseEvent<HTMLButtonElement>) => void;
+    /** [DEPRECATED - use `onClick` instead] Action callback */
+    onAction?: (e: React.KeyboardEvent<HTMLButtonElement> | React.MouseEvent<HTMLButtonElement>) => void;
     /** Set the button to disabled */
     disabled?: boolean;
+    /** Callback triggered on click */
+    onClick?: (e: React.KeyboardEvent<HTMLButtonElement> | React.MouseEvent<HTMLButtonElement>) => void;
 }
 declare const IconButton: React.ForwardRefExoticComponent<IconButtonProps & React.RefAttributes<HTMLButtonElement>>;
 export default IconButton;

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

@@ -9,6 +9,8 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _invariant = _interopRequireDefault(require("invariant"));
+
 var _events = _interopRequireDefault(require("../../__internal__/utils/helpers/events"));
 
 var _iconButton = _interopRequireDefault(require("./icon-button.style"));
@@ -17,6 +19,8 @@ var _tooltipProvider = require("../../__internal__/tooltip-provider");
 
 var _buttonBar = require("../button-bar/button-bar.component");
 
+var _logger = _interopRequireDefault(require("../../__internal__/utils/logger"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
@@ -25,15 +29,25 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 
 function _extends() { _extends = Object.assign || 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 onActionButtonWarnTriggered = false;
+
 const IconButton = /*#__PURE__*/_react.default.forwardRef(({
   "aria-label": ariaLabel,
   onAction,
+  onClick,
   children,
   disabled,
   ...rest
 }, ref) => {
   var _internalRef$querySel;
 
+  if (!onActionButtonWarnTriggered && onAction) {
+    onActionButtonWarnTriggered = true;
+
+    _logger.default.deprecate("The `onAction` callback for the `IconButton` component is deprecated and will soon be removed. Please use `onClick` instead");
+  }
+
+  !!(onClick && onAction) ? process.env.NODE_ENV !== "production" ? (0, _invariant.default)(false, "onClick and onAction have both been set, please use onClick as onAction will soon be deprecated") : (0, _invariant.default)(false) : void 0;
   const [internalRef, setInternalRef] = (0, _react.useState)();
   const context = (0, _react.useContext)(_buttonBar.ButtonBarContext);
   const ariaLabelValue = Object.keys(context).length ? ariaLabel || (internalRef === null || internalRef === void 0 ? void 0 : (_internalRef$querySel = internalRef.querySelector("[data-component='icon']")) === null || _internalRef$querySel === void 0 ? void 0 : _internalRef$querySel.getAttribute("type")) || undefined : ariaLabel;
@@ -41,14 +55,14 @@ const IconButton = /*#__PURE__*/_react.default.forwardRef(({
   const handleKeyDown = e => {
     if (_events.default.isEnterKey(e) || _events.default.isSpaceKey(e)) {
       e.preventDefault();
-      onAction(e);
-    } else {
-      e.stopPropagation();
+      onAction === null || onAction === void 0 ? void 0 : onAction(e);
+      onClick === null || onClick === void 0 ? void 0 : onClick(e);
     }
   };
 
   const handleOnClick = e => {
-    onAction(e);
+    onAction === null || onAction === void 0 ? void 0 : onAction(e);
+    onClick === null || onClick === void 0 ? void 0 : onClick(e);
   };
 
   const setRefs = (0, _react.useCallback)(reference => {
@@ -230,8 +244,9 @@ IconButton.propTypes = {
     "toString": _propTypes.default.func.isRequired,
     "valueOf": _propTypes.default.func.isRequired
   }), _propTypes.default.string]),
-  "onAction": _propTypes.default.func.isRequired,
+  "onAction": _propTypes.default.func,
   "onBlur": _propTypes.default.func,
+  "onClick": _propTypes.default.func,
   "onFocus": _propTypes.default.func,
   "onMouseEnter": _propTypes.default.func,
   "onMouseLeave": _propTypes.default.func,

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { StyledImageProps } from "./image.style";
 export declare const Image: {
-    ({ alt, src, children, ...rest }: StyledImageProps): JSX.Element;
+    ({ alt, decorative, src, children, ...rest }: StyledImageProps): JSX.Element;
     displayName: string;
 };
 export default Image;

package/lib/components/image/image.component.js

@@ -19,14 +19,16 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 const Image = ({
   alt,
+  decorative = false,
   src,
   children,
   ...rest
 }) => {
   !(!src || !children) ? process.env.NODE_ENV !== "production" ? (0, _invariant.default)(false, "The 'Image' component renders as an 'img' element when the 'src' prop is used and therefore does not accept children.") : (0, _invariant.default)(false) : void 0;
-  !(!src || alt && typeof alt === "string") ? process.env.NODE_ENV !== "production" ? (0, _invariant.default)(false, "Please provide an 'alt' string when rendering the 'Image' component as an 'img' element.") : (0, _invariant.default)(false) : void 0;
+  !(!src || alt && typeof alt === "string" || decorative) ? process.env.NODE_ENV !== "production" ? (0, _invariant.default)(false, "Please use the 'decorative' prop if the 'alt' text should be an empty value or provide an 'alt' string when rendering the 'Image' component as an 'img' element.") : (0, _invariant.default)(false) : void 0;
   return /*#__PURE__*/_react.default.createElement(_image.StyledImage, _extends({
     alt: alt,
+    decorative: decorative,
     src: src
   }, rest), children);
 };
@@ -540,6 +542,7 @@ Image.propTypes = {
     "valueOf": _propTypes.default.func.isRequired
   }), _propTypes.default.string]),
   "children": _propTypes.default.node,
+  "decorative": _propTypes.default.bool,
   "display": _propTypes.default.oneOfType([_propTypes.default.oneOf(["-moz-initial", "-ms-flexbox", "-ms-grid", "-ms-inline-flexbox", "-ms-inline-grid", "-webkit-flex", "-webkit-inline-flex", "block", "contents", "flex", "flow-root", "flow", "grid", "inherit", "initial", "inline-block", "inline-flex", "inline-grid", "inline-list-item", "inline-table", "inline", "list-item", "none", "revert", "ruby-base-container", "ruby-base", "ruby-text-container", "ruby-text", "ruby", "run-in", "table-caption", "table-cell", "table-column-group", "table-column", "table-footer-group", "table-header-group", "table-row-group", "table-row", "table", "unset"]), _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf(["-moz-initial", "-ms-flexbox", "-ms-grid", "-ms-inline-flexbox", "-ms-inline-grid", "-webkit-flex", "-webkit-inline-flex", "block", "contents", "flex", "flow-root", "flow", "grid", "inherit", "initial", "inline-block", "inline-flex", "inline-grid", "inline-list-item", "inline-table", "inline", "list-item", "none", "revert", "ruby-base-container", "ruby-base", "ruby-text-container", "ruby-text", "ruby", "run-in", "table-caption", "table-cell", "table-column-group", "table-column", "table-footer-group", "table-header-group", "table-row-group", "table-row", "table", "unset", null]), _propTypes.default.shape({
     "__@iterator": _propTypes.default.func.isRequired,
     "anchor": _propTypes.default.func.isRequired,

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

@@ -3,6 +3,8 @@ import { MarginProps, BackgroundProps, LayoutProps } from "styled-system";
 export interface StyledImageProps extends MarginProps, BackgroundProps, LayoutProps {
     /** HTML alt property to display when an img fails to load */
     alt?: string;
+    /** Prop to specify if the image is decorative  */
+    decorative?: boolean;
     /** Any valid file path, passing this will render the component as an img element */
     src?: string;
     /** HTML hidden property to indicate whether to remain hidden visually and from screen readers */

package/lib/components/link-preview/link-preview.component.js

@@ -72,7 +72,7 @@ const LinkPreview = ({
     lines: 4
   }, /*#__PURE__*/_react.default.createElement(_linkPreview.StyledTitle, null, title), /*#__PURE__*/_react.default.createElement(_linkPreview.StyledDescription, null, /*#__PURE__*/_react.default.createElement("div", null, description)), /*#__PURE__*/_react.default.createElement(_linkPreview.StyledUrl, null, displayUrl()))), onClose && as === "div" && /*#__PURE__*/_react.default.createElement(_linkPreview.StyledCloseIconWrapper, null, /*#__PURE__*/_react.default.createElement(_iconButton.default, {
     "aria-label": "link preview close button",
-    onAction: () => onClose(url)
+    onClick: () => onClose(url)
   }, /*#__PURE__*/_react.default.createElement(_icon.default, {
     type: "close"
   }))));

package/lib/components/menu/menu-full-screen/menu-full-screen.component.js

@@ -87,7 +87,7 @@ const MenuFullscreen = ({
     startPosition: startPosition
   }, /*#__PURE__*/_react.default.createElement(_iconButton.default, {
     "aria-label": "menu fullscreen close button",
-    onAction: onClose,
+    onClick: onClose,
     "data-element": "close"
   }, /*#__PURE__*/_react.default.createElement(_icon.default, {
     type: "close",

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

@@ -50,7 +50,7 @@ const Message = ({
     return /*#__PURE__*/_react.default.createElement(_iconButton.default, {
       "data-element": "close",
       "aria-label": closeButtonAriaLabel || l.message.closeButtonAriaLabel(),
-      onAction: onDismiss
+      onClick: onDismiss
     }, /*#__PURE__*/_react.default.createElement(_icon.default, {
       type: "close"
     }));

package/lib/components/pill/pill.component.js

@@ -46,7 +46,7 @@ const Pill = ({
   maxWidth: maxWidth,
   wrapText: wrapText
 }, rest), children, onDelete && /*#__PURE__*/_react.default.createElement(_iconButton.default, {
-  onAction: onDelete,
+  onClick: onDelete,
   "data-element": "close",
   "aria-label": ariaLabelOfRemoveButton
 }, /*#__PURE__*/_react.default.createElement(_icon.default, {

package/lib/components/pod/pod.component.js

@@ -145,7 +145,7 @@ const Pod = /*#__PURE__*/_react.default.forwardRef(({
     noBorder: !border,
     size: size,
     variant: variant,
-    onAction: processPodAction(onUndo)
+    onClick: processPodAction(onUndo)
   }, /*#__PURE__*/_react.default.createElement(_icon.default, {
     type: "undo"
   })), !softDelete && onEdit && /*#__PURE__*/_react.default.createElement(_pod.StyledEditAction, _extends({}, editEvents, {
@@ -175,7 +175,7 @@ const Pod = /*#__PURE__*/_react.default.forwardRef(({
     noBorder: !border,
     size: size,
     variant: variant,
-    onAction: processPodAction(onDelete)
+    onClick: processPodAction(onDelete)
   }, /*#__PURE__*/_react.default.createElement(_icon.default, {
     type: "delete"
   }))));

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

@@ -44,7 +44,7 @@ const renderOpen = ({
   "aria-haspopup": ariaHasPopup
 }) => /*#__PURE__*/_react.default.createElement(_popoverContainer.PopoverContainerOpenIcon, {
   tabIndex: tabIndex,
-  onAction: onClick,
+  onClick: onClick,
   "data-element": dataElement,
   ref: ref,
   "aria-label": ariaLabel,
@@ -76,7 +76,7 @@ const renderClose = ({
 }) => /*#__PURE__*/_react.default.createElement(_popoverContainer.PopoverContainerCloseIcon, {
   "data-element": dataElement,
   tabIndex: tabIndex,
-  onAction: onClick,
+  onClick: onClick,
   ref: ref,
   "aria-label": ariaLabel
 }, /*#__PURE__*/_react.default.createElement(_icon.default, {

package/lib/components/sidebar/sidebar.component.js

@@ -87,7 +87,7 @@ const Sidebar = /*#__PURE__*/_react.default.forwardRef(({
     if (!onCancel) return null;
     return /*#__PURE__*/_react.default.createElement(_iconButton.default, {
       "aria-label": locale.sidebar.ariaLabels.close(),
-      onAction: onCancel,
+      onClick: onCancel,
       "data-element": "close"
     }, /*#__PURE__*/_react.default.createElement(_icon.default, {
       type: "close"

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

@@ -105,7 +105,7 @@ const Toast = /*#__PURE__*/_react.default.forwardRef(({
     return /*#__PURE__*/_react.default.createElement(_iconButton.default, {
       "aria-label": locale.toast.ariaLabels.close(),
       "data-element": "close",
-      onAction: onDismiss,
+      onClick: onDismiss,
       ref: closeIconRef
     }, /*#__PURE__*/_react.default.createElement(_icon.default, {
       type: "close"

package/lib/components/vertical-menu/vertical-menu-full-screen.component.js

@@ -75,7 +75,7 @@ const VerticalMenuFullScreen = ({
     boxSizing: "border-box"
   }, /*#__PURE__*/_react.default.createElement(_iconButton.default, {
     "aria-label": l.verticalMenuFullScreen.ariaLabels.close(),
-    onAction: onClose,
+    onClick: onClose,
     "data-element": "close"
   }, /*#__PURE__*/_react.default.createElement(_icon.default, {
     type: "close",

package/package.json

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