carbon-react 114.12.0 → 114.12.2

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

@@ -1,11 +1,24 @@
 import styled, { css } from "styled-components";
-import { space, layout, flexbox, position } from "styled-system";
+import { space, layout, flexbox, position as positionFn } from "styled-system";
 import Logger from "../../__internal__/utils/logger";
 import BaseTheme from "../../style/themes/base";
 import styledColor from "../../style/utils/color";
 import boxConfig from "./box.config";
 const GAP_VALUES = [0, 1, 2, 3, 4, 5, 6, 7, 8];
 let isDeprecationWarningTriggered = false;
+
+const calculatePosition = props => {
+  const {
+    position,
+    ...rest
+  } = positionFn(props);
+  return {
+    position,
+    zIndex: ["sticky", "fixed"].includes(position) ? 1 : undefined,
+    ...rest
+  };
+};
+
 export const Box = styled.div`
   ${() => {
   if (!isDeprecationWarningTriggered) {
@@ -19,7 +32,7 @@ export const Box = styled.div`
   ${space}
   ${layout}
   ${flexbox}
-  ${position}
+  ${calculatePosition}
 
   ${({
   color,

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/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/box/box.component.js

@@ -25,6 +25,19 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 
 const GAP_VALUES = [0, 1, 2, 3, 4, 5, 6, 7, 8];
 let isDeprecationWarningTriggered = false;
+
+const calculatePosition = props => {
+  const {
+    position,
+    ...rest
+  } = (0, _styledSystem.position)(props);
+  return {
+    position,
+    zIndex: ["sticky", "fixed"].includes(position) ? 1 : undefined,
+    ...rest
+  };
+};
+
 const Box = _styledComponents.default.div`
   ${() => {
   if (!isDeprecationWarningTriggered) {
@@ -39,7 +52,7 @@ const Box = _styledComponents.default.div`
   ${_styledSystem.space}
   ${_styledSystem.layout}
   ${_styledSystem.flexbox}
-  ${_styledSystem.position}
+  ${calculatePosition}
 
   ${({
   color,

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/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.12.0",
+  "version": "114.12.2",
   "description": "A library of reusable React components for easily building user interfaces.",
   "files": [
     "lib",