carbon-react 140.1.1 → 141.0.0

package/esm/components/anchor-navigation/anchor-navigation.component.d.ts

@@ -1,5 +1,6 @@
 import React from "react";
-export interface AnchorNavigationProps {
+import { TagProps } from "../../__internal__/utils/helpers/tags";
+export interface AnchorNavigationProps extends Omit<TagProps, "data-component"> {
     /** Child elements */
     children?: React.ReactNode;
     /** The AnchorNavigationItems components to be rendered in the sticky navigation.
@@ -8,7 +9,7 @@ export interface AnchorNavigationProps {
     stickyNavigation?: React.ReactNode;
 }
 declare const AnchorNavigation: {
-    ({ children, stickyNavigation, }: AnchorNavigationProps): JSX.Element;
+    ({ children, stickyNavigation, "data-element": dataElement, "data-role": dataRole, }: AnchorNavigationProps): JSX.Element;
     displayName: string;
 };
 export default AnchorNavigation;

package/esm/components/anchor-navigation/anchor-navigation.component.js

@@ -11,7 +11,9 @@ const SECTION_VISIBILITY_OFFSET = 200;
 const SCROLL_THROTTLE = 100;
 const AnchorNavigation = ({
   children,
-  stickyNavigation
+  stickyNavigation,
+  "data-element": dataElement,
+  "data-role": dataRole
 }) => {
   !isFragment(stickyNavigation) ? process.env.NODE_ENV !== "production" ? invariant(false, "`stickyNavigation` prop in `AnchorNavigation` should be a React Fragment.") : invariant(false) : void 0;
   const hasCorrectItemStructure = useMemo(() => {
@@ -45,13 +47,14 @@ const AnchorNavigation = ({
     setSelectedIndex(indexOfSmallestNegativeTopOffset);
   }, []);
   const scrollHandler = useMemo(() => throttle(() => {
+    /* istanbul ignore else */
     if (isUserScroll.current) {
       setSelectedAnchorBasedOnScroll();
     } else {
       if (isUserScrollTimer.current !== undefined) {
         window.clearTimeout(isUserScrollTimer.current);
       }
-      isUserScrollTimer.current = setTimeout( /* istanbul ignore next */() => {
+      isUserScrollTimer.current = setTimeout(() => {
         isUserScroll.current = true;
       }, SCROLL_THROTTLE + 50);
     }
@@ -106,7 +109,9 @@ const AnchorNavigation = ({
   };
   return /*#__PURE__*/React.createElement(StyledAnchorNavigation, {
     ref: contentRef,
-    "data-component": "anchor-navigation"
+    "data-component": "anchor-navigation",
+    "data-element": dataElement,
+    "data-role": dataRole
   }, /*#__PURE__*/React.createElement(StyledNavigation, {
     ref: navigationRef,
     "data-element": "anchor-sticky-navigation"
@@ -121,6 +126,8 @@ const AnchorNavigation = ({
 if (process.env.NODE_ENV !== "production") {
   AnchorNavigation.propTypes = {
     "children": PropTypes.node,
+    "data-element": PropTypes.string,
+    "data-role": PropTypes.string,
     "stickyNavigation": PropTypes.node
   };
 }

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

@@ -1,6 +1,7 @@
 import { DateInputProps } from "./date.component";
-interface StyledDateInputProps extends Pick<DateInputProps, "inputWidth" | "size" | "maxWidth" | "labelInline"> {
+interface StyledDateInputProps extends Pick<DateInputProps, "inputWidth" | "maxWidth" | "labelInline"> {
     applyDateRangeStyling?: boolean;
+    size: Required<DateInputProps>["size"];
 }
 declare const StyledDateInput: import("styled-components").StyledComponent<"div", any, StyledDateInputProps, never>;
 export default StyledDateInput;

package/esm/components/date/date.style.js

@@ -19,7 +19,7 @@ const StyledDateInput = styled.div`
     width: ${({
   inputWidth,
   maxWidth,
-  size = "medium"
+  size
 }) => maxWidth || inputWidth ? "" : datePickerWidth[size]};
 
     ${StyledInput} {
@@ -30,11 +30,11 @@ const StyledDateInput = styled.div`
   ${({
   applyDateRangeStyling,
   maxWidth,
-  size = "medium",
+  size,
   labelInline
 }) => applyDateRangeStyling && !labelInline && css`
       ${FieldLineStyle} {
-        max-width: ${maxWidth || datePickerWidth[size]}};
+        max-width: ${maxWidth || datePickerWidth[size]};
       }
 
       ${StyledValidationMessage}, ${StyledLabel} {

package/esm/components/date-range/date-range.component.d.ts

@@ -16,7 +16,7 @@ export interface DateRangeChangeEvent {
 }
 export interface DateRangeProps extends StyledDateRangeProps, MarginProps, TagProps {
     /** Props for the child end Date component */
-    endDateProps?: Partial<DateInputProps>;
+    endDateProps?: Omit<Partial<DateInputProps>, "required">;
     /** Optional label for endDate field */
     endLabel?: string;
     /**
@@ -50,7 +50,7 @@ export interface DateRangeProps extends StyledDateRangeProps, MarginProps, TagPr
     /** Specify a callback triggered on blur */
     onBlur?: (ev: DateRangeChangeEvent) => void;
     /** Props for the child start Date component */
-    startDateProps?: Partial<DateInputProps>;
+    startDateProps?: Omit<Partial<DateInputProps>, "required">;
     /** Optional label for startDate field */
     startLabel?: string;
     /**

package/esm/components/draggable/__internal__/drop-target.component.d.ts

@@ -4,5 +4,5 @@ interface DropTargetProps extends Omit<DraggableContainerProps, "getOrder"> {
     children?: React.ReactNode;
     getOrder: (movedItemId?: string | number | undefined) => void;
 }
-declare const DropTarget: ({ children, getOrder, ...rest }: DropTargetProps) => React.JSX.Element;
+declare const DropTarget: ({ "data-element": dataElement, "data-role": dataRole, children, getOrder, ...rest }: DropTargetProps) => React.JSX.Element;
 export default DropTarget;

package/esm/components/draggable/__internal__/drop-target.component.js

@@ -4,6 +4,8 @@ import PropTypes from "prop-types";
 import { useDrop } from "react-dnd";
 import { StyledDraggableContainer } from "../draggable-item/draggable-item.style";
 const DropTarget = ({
+  "data-element": dataElement,
+  "data-role": dataRole,
   children,
   getOrder,
   ...rest
@@ -18,7 +20,10 @@ const DropTarget = ({
     }
   });
   return /*#__PURE__*/React.createElement(StyledDraggableContainer, _extends({
-    ref: drop
+    ref: drop,
+    "data-component": "draggable-container",
+    "data-element": dataElement,
+    "data-role": dataRole
   }, rest), children);
 };
 export default DropTarget;

package/esm/components/draggable/draggable-container.component.d.ts

@@ -1,6 +1,7 @@
 import React from "react";
 import { MarginProps } from "styled-system";
-export interface DraggableContainerProps extends MarginProps {
+import { TagProps } from "../../__internal__/utils/helpers/tags";
+export interface DraggableContainerProps extends MarginProps, Omit<TagProps, "data-component"> {
     /** Callback fired when order is changed */
     getOrder?: (draggableItemIds?: (string | number | undefined)[], movedItemId?: string | number | undefined) => void;
     /**
@@ -11,7 +12,7 @@ export interface DraggableContainerProps extends MarginProps {
     children?: React.ReactNode;
 }
 declare const DraggableContainer: {
-    ({ children, getOrder, ...rest }: DraggableContainerProps): JSX.Element;
+    ({ "data-element": dataElement, "data-role": dataRole, children, getOrder, ...rest }: DraggableContainerProps): JSX.Element;
     displayName: string;
 };
 export default DraggableContainer;

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

@@ -8,6 +8,8 @@ import { filterStyledSystemMarginProps } from "../../style/utils";
 import DraggableItem from "./draggable-item/draggable-item.component";
 import DropTarget from "./__internal__/drop-target.component";
 const DraggableContainer = ({
+  "data-element": dataElement,
+  "data-role": dataRole = "draggable-container",
   children,
   getOrder,
   ...rest
@@ -39,6 +41,8 @@ const DraggableContainer = ({
       draggableItem,
       index
     } = findItem(id);
+
+    // istanbul ignore if
     if (!draggableItem) return;
     const copyOfDraggableItems = [...draggableItems];
     copyOfDraggableItems.splice(index, 1);
@@ -56,6 +60,8 @@ const DraggableContainer = ({
   return /*#__PURE__*/React.createElement(DndProvider, {
     backend: HTML5Backend
   }, /*#__PURE__*/React.createElement(DropTarget, _extends({
+    "data-element": dataElement,
+    "data-role": dataRole,
     getOrder: getItemsId
   }, marginProps), draggableItems.map(item => {
     return /*#__PURE__*/React.isValidElement(item) && /*#__PURE__*/React.cloneElement(item, {
@@ -68,6 +74,8 @@ const DraggableContainer = ({
 if (process.env.NODE_ENV !== "production") {
   DraggableContainer.propTypes = {
     "children": PropTypes.node,
+    "data-element": PropTypes.string,
+    "data-role": PropTypes.string,
     "getOrder": PropTypes.func,
     "m": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
       "__@toStringTag": PropTypes.string.isRequired,

package/esm/components/draggable/draggable-item/draggable-item.component.js

@@ -57,6 +57,7 @@ const DraggableItem = ({
   const paddingProps = filterStyledSystemPaddingProps(rest);
   return /*#__PURE__*/React.createElement(StyledDraggableItem, _extends({
     "data-element": "draggable",
+    "data-role": "draggable-item",
     isDragging: isDragging,
     ref: node => drag(drop(node)),
     py: py

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

@@ -14,8 +14,6 @@ export interface IconButtonProps extends SpaceProps {
     onMouseEnter?: (ev: React.MouseEvent<HTMLButtonElement>) => void;
     /** Callback triggered on mouse leave */
     onMouseLeave?: (ev: 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 */

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

@@ -1,38 +1,24 @@
 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, { useState, useCallback } 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 Logger from "../../__internal__/utils/logger";
-let onActionButtonWarnTriggered = false;
 const IconButton = /*#__PURE__*/React.forwardRef(({
   "aria-label": ariaLabel,
-  onAction,
   onClick,
   children,
   disabled,
   ...rest
 }, ref) => {
-  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 ariaLabelValue = ariaLabel || internalRef?.querySelector("[data-component='icon']")?.getAttribute("type") || "";
   const handleKeyDown = e => {
     if (Events.isEnterKey(e) || Events.isSpaceKey(e)) {
       e.preventDefault();
-      onAction?.(e);
       onClick?.(e);
     }
   };
-  const handleOnClick = e => {
-    onAction?.(e);
-    onClick?.(e);
-  };
   const setRefs = useCallback(reference => {
     setInternalRef(reference);
     if (!ref) return;
@@ -44,7 +30,7 @@ const IconButton = /*#__PURE__*/React.forwardRef(({
   }, rest, {
     "aria-label": ariaLabelValue,
     onKeyDown: handleKeyDown,
-    onClick: handleOnClick,
+    onClick: onClick,
     ref: setRefs,
     disabled: disabled
   }), /*#__PURE__*/React.createElement(TooltipProvider, {
@@ -212,7 +198,6 @@ if (process.env.NODE_ENV !== "production") {
       "toString": PropTypes.func.isRequired,
       "valueOf": PropTypes.func.isRequired
     }), PropTypes.string]),
-    "onAction": PropTypes.func,
     "onBlur": PropTypes.func,
     "onClick": PropTypes.func,
     "onFocus": PropTypes.func,

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

@@ -1,7 +1,7 @@
 import React from "react";
 import { LayoutProps, FlexboxProps } from "styled-system";
 import { TagProps } from "../../__internal__/utils/helpers/tags";
-import MenuContext, { MenuType } from "./__internal__/menu.context";
+import { MenuType } from "./__internal__/menu.context";
 export interface MenuProps extends TagProps, LayoutProps, FlexboxProps {
     /** Children elements */
     children: React.ReactNode;
@@ -9,5 +9,4 @@ export interface MenuProps extends TagProps, LayoutProps, FlexboxProps {
     menuType?: MenuType;
 }
 export declare const Menu: ({ menuType, children, ...rest }: MenuProps) => React.JSX.Element;
-export { MenuContext };
 export default Menu;

package/esm/components/menu/menu.component.js

@@ -59,5 +59,4 @@ export const Menu = ({
     }
   }, children));
 };
-export { MenuContext };
 export default Menu;

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

@@ -4,7 +4,7 @@ import { IconType } from "../icon";
 export declare type PortraitShapes = "circle" | "square";
 export declare type PortraitSizes = "XS" | "S" | "M" | "ML" | "L" | "XL" | "XXL";
 export interface PortraitProps extends MarginProps {
-    /** An email address registered with Gravatar. */
+    /** (Deprecated) An email address registered with Gravatar. */
     gravatar?: string;
     /** A custom image URL. */
     src?: string;

package/esm/components/portrait/portrait.component.js

@@ -3,12 +3,14 @@ import React, { useEffect, useState, useContext } from "react";
 import PropTypes from "prop-types";
 import MD5 from "crypto-js/md5";
 import invariant from "invariant";
+import Logger from "../../__internal__/utils/logger";
 import Tooltip from "../tooltip";
 import tagComponent from "../../__internal__/utils/helpers/tags/tags";
 import { PORTRAIT_SIZE_PARAMS } from "./portrait.config";
 import { StyledCustomImg, StyledIcon, StyledPortraitContainer, StyledPortraitInitials, StyledPortraitGravatar } from "./portrait.style";
 import { filterStyledSystemMarginProps } from "../../style/utils";
 import RoundedCornersOptOutContext from "../carbon-provider/__internal__/new-validation.context";
+let deprecatedGravatarWarnTriggered = false;
 const Portrait = ({
   alt,
   name,
@@ -36,6 +38,10 @@ const Portrait = ({
   } = useContext(RoundedCornersOptOutContext);
   const defaultShape = roundedCornersOptOut ? "square" : "circle";
   !!(src && gravatar) ? process.env.NODE_ENV !== "production" ? invariant(false, "The `src` prop cannot be used in conjunction with the `gravatar` prop." + " Please use one or the other.") : invariant(false) : void 0;
+  const logGravatarDeprecationWarning = () => {
+    deprecatedGravatarWarnTriggered = true;
+    Logger.deprecate("The `gravatar` prop has been deprecated and will soon be removed.");
+  };
   useEffect(() => {
     setExternalError(false);
   }, [gravatar, src]);
@@ -74,6 +80,7 @@ const Portrait = ({
       portrait = /*#__PURE__*/React.createElement(StyledPortraitGravatar, {
         src: gravatarSrc(),
         alt: alt || name || "",
+        onLoad: () => !deprecatedGravatarWarnTriggered && logGravatarDeprecationWarning(),
         onError: () => setExternalError(true)
       });
     }

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

@@ -10,7 +10,7 @@ export interface ProfileProps extends MarginProps {
     alt?: string;
     /** Define the name to display. */
     name?: string;
-    /** Define the email to use (will check Gravatar for image). */
+    /** Define the email to use. */
     email?: string;
     /** Define read-only text to display. */
     text?: string;

package/esm/components/profile/profile.component.js

@@ -60,6 +60,7 @@ export const Profile = ({
     }, name), email && /*#__PURE__*/React.createElement(ProfileEmailStyle, {
       href: `mailto: ${email}`,
       size: size,
+      "data-role": "email-link",
       darkBackground: darkBackground,
       "data-element": "email"
     }, email), text && /*#__PURE__*/React.createElement(ProfileTextStyle, {

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

@@ -5,7 +5,7 @@ import { TagProps } from "../../__internal__/utils/helpers/tags/tags";
 declare type CustomRefObject<T> = {
     current?: T | null;
 };
-export interface SidebarProps extends PaddingProps, TagProps, WidthProps, Pick<ModalProps, "topModalOverride"> {
+export interface SidebarProps extends PaddingProps, Omit<TagProps, "data-component">, WidthProps, Pick<ModalProps, "topModalOverride"> {
     /** Prop to specify the aria-describedby property of the component */
     "aria-describedby"?: string;
     /**

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

@@ -20,6 +20,8 @@ const Sidebar = /*#__PURE__*/React.forwardRef(({
   "aria-describedby": ariaDescribedBy,
   "aria-label": ariaLabel,
   "aria-labelledby": ariaLabelledBy,
+  "data-element": dataElement = "sidebar",
+  "data-role": dataRole,
   open,
   bespokeFocusTrap,
   disableAutoFocus = false,
@@ -62,20 +64,17 @@ const Sidebar = /*#__PURE__*/React.forwardRef(({
       type: "close"
     }));
   };
-  const componentTags = {
-    "data-component": "sidebar",
-    "data-element": rest["data-element"],
-    "data-role": rest["data-role"]
-  };
   const sidebar = /*#__PURE__*/React.createElement(StyledSidebar, _extends({
     "aria-modal": !enableBackgroundUI && isTopModal,
     "aria-describedby": ariaDescribedBy,
     "aria-label": ariaLabel,
     "aria-labelledby": !ariaLabelledBy && !ariaLabel ? headerId : ariaLabelledBy,
+    "data-component": "sidebar",
+    "data-element": dataElement,
+    "data-role": dataRole,
     ref: setRefs,
     position: position,
     size: size,
-    "data-element": "sidebar",
     onCancel: onCancel,
     role: role
   }, filterStyledSystemPaddingProps(rest), {
@@ -86,6 +85,7 @@ const Sidebar = /*#__PURE__*/React.forwardRef(({
     id: headerId
   }), header), !header && closeIcon(), /*#__PURE__*/React.createElement(Box, _extends({
     "data-element": "sidebar-content",
+    "data-role": "sidebar-content",
     pt: "var(--spacing300)",
     pb: "var(--spacing400)",
     px: "var(--spacing400)"
@@ -98,13 +98,13 @@ const Sidebar = /*#__PURE__*/React.forwardRef(({
       isInSidebar: true
     }
   }, children)));
-  return /*#__PURE__*/React.createElement(Modal, _extends({
+  return /*#__PURE__*/React.createElement(Modal, {
     open: open,
     onCancel: onCancel,
     disableEscKey: disableEscKey,
     enableBackgroundUI: enableBackgroundUI,
     topModalOverride: topModalOverride
-  }, componentTags), enableBackgroundUI ? sidebar : /*#__PURE__*/React.createElement(FocusTrap, {
+  }, enableBackgroundUI ? sidebar : /*#__PURE__*/React.createElement(FocusTrap, {
     wrapperRef: sidebarRef,
     isOpen: open,
     additionalWrapperRefs: focusableContainers,
@@ -121,7 +121,6 @@ if (process.env.NODE_ENV !== "production") {
     "aria-labelledby": PropTypes.string,
     "bespokeFocusTrap": PropTypes.func,
     "children": PropTypes.node,
-    "data-component": PropTypes.string,
     "data-element": PropTypes.string,
     "data-role": PropTypes.string,
     "disableAutoFocus": PropTypes.bool,

package/esm/components/vertical-divider/vertical-divider.component.js

@@ -1,7 +1,7 @@
 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, { useContext } from "react";
 import PropTypes from "prop-types";
-import { MenuContext } from "../menu/menu.component";
+import MenuContext from "../menu/__internal__/menu.context";
 import { StyledVerticalWrapper, StyledDivider } from "./vertical-divider.style";
 const VerticalDivider = ({
   h,

package/lib/components/anchor-navigation/anchor-navigation.component.d.ts

@@ -1,5 +1,6 @@
 import React from "react";
-export interface AnchorNavigationProps {
+import { TagProps } from "../../__internal__/utils/helpers/tags";
+export interface AnchorNavigationProps extends Omit<TagProps, "data-component"> {
     /** Child elements */
     children?: React.ReactNode;
     /** The AnchorNavigationItems components to be rendered in the sticky navigation.
@@ -8,7 +9,7 @@ export interface AnchorNavigationProps {
     stickyNavigation?: React.ReactNode;
 }
 declare const AnchorNavigation: {
-    ({ children, stickyNavigation, }: AnchorNavigationProps): JSX.Element;
+    ({ children, stickyNavigation, "data-element": dataElement, "data-role": dataRole, }: AnchorNavigationProps): JSX.Element;
     displayName: string;
 };
 export default AnchorNavigation;

package/lib/components/anchor-navigation/anchor-navigation.component.js

@@ -20,7 +20,9 @@ const SECTION_VISIBILITY_OFFSET = 200;
 const SCROLL_THROTTLE = 100;
 const AnchorNavigation = ({
   children,
-  stickyNavigation
+  stickyNavigation,
+  "data-element": dataElement,
+  "data-role": dataRole
 }) => {
   !(0, _reactIs.isFragment)(stickyNavigation) ? process.env.NODE_ENV !== "production" ? (0, _invariant.default)(false, "`stickyNavigation` prop in `AnchorNavigation` should be a React Fragment.") : (0, _invariant.default)(false) : void 0;
   const hasCorrectItemStructure = (0, _react.useMemo)(() => {
@@ -54,13 +56,14 @@ const AnchorNavigation = ({
     setSelectedIndex(indexOfSmallestNegativeTopOffset);
   }, []);
   const scrollHandler = (0, _react.useMemo)(() => (0, _throttle.default)(() => {
+    /* istanbul ignore else */
     if (isUserScroll.current) {
       setSelectedAnchorBasedOnScroll();
     } else {
       if (isUserScrollTimer.current !== undefined) {
         window.clearTimeout(isUserScrollTimer.current);
       }
-      isUserScrollTimer.current = setTimeout( /* istanbul ignore next */() => {
+      isUserScrollTimer.current = setTimeout(() => {
         isUserScroll.current = true;
       }, SCROLL_THROTTLE + 50);
     }
@@ -115,7 +118,9 @@ const AnchorNavigation = ({
   };
   return /*#__PURE__*/_react.default.createElement(_anchorNavigation.StyledAnchorNavigation, {
     ref: contentRef,
-    "data-component": "anchor-navigation"
+    "data-component": "anchor-navigation",
+    "data-element": dataElement,
+    "data-role": dataRole
   }, /*#__PURE__*/_react.default.createElement(_anchorNavigation.StyledNavigation, {
     ref: navigationRef,
     "data-element": "anchor-sticky-navigation"
@@ -130,6 +135,8 @@ const AnchorNavigation = ({
 if (process.env.NODE_ENV !== "production") {
   AnchorNavigation.propTypes = {
     "children": _propTypes.default.node,
+    "data-element": _propTypes.default.string,
+    "data-role": _propTypes.default.string,
     "stickyNavigation": _propTypes.default.node
   };
 }

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

@@ -1,6 +1,7 @@
 import { DateInputProps } from "./date.component";
-interface StyledDateInputProps extends Pick<DateInputProps, "inputWidth" | "size" | "maxWidth" | "labelInline"> {
+interface StyledDateInputProps extends Pick<DateInputProps, "inputWidth" | "maxWidth" | "labelInline"> {
     applyDateRangeStyling?: boolean;
+    size: Required<DateInputProps>["size"];
 }
 declare const StyledDateInput: import("styled-components").StyledComponent<"div", any, StyledDateInputProps, never>;
 export default StyledDateInput;

package/lib/components/date/date.style.js

@@ -28,7 +28,7 @@ const StyledDateInput = _styledComponents.default.div`
     width: ${({
   inputWidth,
   maxWidth,
-  size = "medium"
+  size
 }) => maxWidth || inputWidth ? "" : datePickerWidth[size]};
 
     ${_input.default} {
@@ -39,11 +39,11 @@ const StyledDateInput = _styledComponents.default.div`
   ${({
   applyDateRangeStyling,
   maxWidth,
-  size = "medium",
+  size,
   labelInline
 }) => applyDateRangeStyling && !labelInline && (0, _styledComponents.css)`
       ${_formField.FieldLineStyle} {
-        max-width: ${maxWidth || datePickerWidth[size]}};
+        max-width: ${maxWidth || datePickerWidth[size]};
       }
 
       ${_validationMessage.default}, ${_label.default} {

package/lib/components/date-range/date-range.component.d.ts

@@ -16,7 +16,7 @@ export interface DateRangeChangeEvent {
 }
 export interface DateRangeProps extends StyledDateRangeProps, MarginProps, TagProps {
     /** Props for the child end Date component */
-    endDateProps?: Partial<DateInputProps>;
+    endDateProps?: Omit<Partial<DateInputProps>, "required">;
     /** Optional label for endDate field */
     endLabel?: string;
     /**
@@ -50,7 +50,7 @@ export interface DateRangeProps extends StyledDateRangeProps, MarginProps, TagPr
     /** Specify a callback triggered on blur */
     onBlur?: (ev: DateRangeChangeEvent) => void;
     /** Props for the child start Date component */
-    startDateProps?: Partial<DateInputProps>;
+    startDateProps?: Omit<Partial<DateInputProps>, "required">;
     /** Optional label for startDate field */
     startLabel?: string;
     /**

package/lib/components/draggable/__internal__/drop-target.component.d.ts

@@ -4,5 +4,5 @@ interface DropTargetProps extends Omit<DraggableContainerProps, "getOrder"> {
     children?: React.ReactNode;
     getOrder: (movedItemId?: string | number | undefined) => void;
 }
-declare const DropTarget: ({ children, getOrder, ...rest }: DropTargetProps) => React.JSX.Element;
+declare const DropTarget: ({ "data-element": dataElement, "data-role": dataRole, children, getOrder, ...rest }: DropTargetProps) => React.JSX.Element;
 export default DropTarget;

package/lib/components/draggable/__internal__/drop-target.component.js

@@ -11,6 +11,8 @@ var _draggableItem = require("../draggable-item/draggable-item.style");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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 DropTarget = ({
+  "data-element": dataElement,
+  "data-role": dataRole,
   children,
   getOrder,
   ...rest
@@ -25,7 +27,10 @@ const DropTarget = ({
     }
   });
   return /*#__PURE__*/_react.default.createElement(_draggableItem.StyledDraggableContainer, _extends({
-    ref: drop
+    ref: drop,
+    "data-component": "draggable-container",
+    "data-element": dataElement,
+    "data-role": dataRole
   }, rest), children);
 };
 var _default = exports.default = DropTarget;

package/lib/components/draggable/draggable-container.component.d.ts

@@ -1,6 +1,7 @@
 import React from "react";
 import { MarginProps } from "styled-system";
-export interface DraggableContainerProps extends MarginProps {
+import { TagProps } from "../../__internal__/utils/helpers/tags";
+export interface DraggableContainerProps extends MarginProps, Omit<TagProps, "data-component"> {
     /** Callback fired when order is changed */
     getOrder?: (draggableItemIds?: (string | number | undefined)[], movedItemId?: string | number | undefined) => void;
     /**
@@ -11,7 +12,7 @@ export interface DraggableContainerProps extends MarginProps {
     children?: React.ReactNode;
 }
 declare const DraggableContainer: {
-    ({ children, getOrder, ...rest }: DraggableContainerProps): JSX.Element;
+    ({ "data-element": dataElement, "data-role": dataRole, children, getOrder, ...rest }: DraggableContainerProps): JSX.Element;
     displayName: string;
 };
 export default DraggableContainer;

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

@@ -17,6 +17,8 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 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); }
 const DraggableContainer = ({
+  "data-element": dataElement,
+  "data-role": dataRole = "draggable-container",
   children,
   getOrder,
   ...rest
@@ -48,6 +50,8 @@ const DraggableContainer = ({
       draggableItem,
       index
     } = findItem(id);
+
+    // istanbul ignore if
     if (!draggableItem) return;
     const copyOfDraggableItems = [...draggableItems];
     copyOfDraggableItems.splice(index, 1);
@@ -65,6 +69,8 @@ const DraggableContainer = ({
   return /*#__PURE__*/_react.default.createElement(_reactDnd.DndProvider, {
     backend: _reactDndHtml5Backend.HTML5Backend
   }, /*#__PURE__*/_react.default.createElement(_dropTarget.default, _extends({
+    "data-element": dataElement,
+    "data-role": dataRole,
     getOrder: getItemsId
   }, marginProps), draggableItems.map(item => {
     return /*#__PURE__*/_react.default.isValidElement(item) && /*#__PURE__*/_react.default.cloneElement(item, {
@@ -77,6 +83,8 @@ const DraggableContainer = ({
 if (process.env.NODE_ENV !== "production") {
   DraggableContainer.propTypes = {
     "children": _propTypes.default.node,
+    "data-element": _propTypes.default.string,
+    "data-role": _propTypes.default.string,
     "getOrder": _propTypes.default.func,
     "m": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
       "__@toStringTag": _propTypes.default.string.isRequired,

package/lib/components/draggable/draggable-item/draggable-item.component.js

@@ -64,6 +64,7 @@ const DraggableItem = ({
   const paddingProps = (0, _utils.filterStyledSystemPaddingProps)(rest);
   return /*#__PURE__*/_react.default.createElement(_draggableItem.StyledDraggableItem, _extends({
     "data-element": "draggable",
+    "data-role": "draggable-item",
     isDragging: isDragging,
     ref: node => drag(drop(node)),
     py: py

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

@@ -14,8 +14,6 @@ export interface IconButtonProps extends SpaceProps {
     onMouseEnter?: (ev: React.MouseEvent<HTMLButtonElement>) => void;
     /** Callback triggered on mouse leave */
     onMouseLeave?: (ev: 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 */

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

@@ -6,42 +6,28 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 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"));
 var _tooltipProvider = require("../../__internal__/tooltip-provider");
-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 onActionButtonWarnTriggered = false;
 const IconButton = /*#__PURE__*/_react.default.forwardRef(({
   "aria-label": ariaLabel,
-  onAction,
   onClick,
   children,
   disabled,
   ...rest
 }, ref) => {
-  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 ariaLabelValue = ariaLabel || internalRef?.querySelector("[data-component='icon']")?.getAttribute("type") || "";
   const handleKeyDown = e => {
     if (_events.default.isEnterKey(e) || _events.default.isSpaceKey(e)) {
       e.preventDefault();
-      onAction?.(e);
       onClick?.(e);
     }
   };
-  const handleOnClick = e => {
-    onAction?.(e);
-    onClick?.(e);
-  };
   const setRefs = (0, _react.useCallback)(reference => {
     setInternalRef(reference);
     if (!ref) return;
@@ -53,7 +39,7 @@ const IconButton = /*#__PURE__*/_react.default.forwardRef(({
   }, rest, {
     "aria-label": ariaLabelValue,
     onKeyDown: handleKeyDown,
-    onClick: handleOnClick,
+    onClick: onClick,
     ref: setRefs,
     disabled: disabled
   }), /*#__PURE__*/_react.default.createElement(_tooltipProvider.TooltipProvider, {
@@ -221,7 +207,6 @@ if (process.env.NODE_ENV !== "production") {
       "toString": _propTypes.default.func.isRequired,
       "valueOf": _propTypes.default.func.isRequired
     }), _propTypes.default.string]),
-    "onAction": _propTypes.default.func,
     "onBlur": _propTypes.default.func,
     "onClick": _propTypes.default.func,
     "onFocus": _propTypes.default.func,

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

@@ -1,7 +1,7 @@
 import React from "react";
 import { LayoutProps, FlexboxProps } from "styled-system";
 import { TagProps } from "../../__internal__/utils/helpers/tags";
-import MenuContext, { MenuType } from "./__internal__/menu.context";
+import { MenuType } from "./__internal__/menu.context";
 export interface MenuProps extends TagProps, LayoutProps, FlexboxProps {
     /** Children elements */
     children: React.ReactNode;
@@ -9,5 +9,4 @@ export interface MenuProps extends TagProps, LayoutProps, FlexboxProps {
     menuType?: MenuType;
 }
 export declare const Menu: ({ menuType, children, ...rest }: MenuProps) => React.JSX.Element;
-export { MenuContext };
 export default Menu;

package/lib/components/menu/menu.component.js

@@ -3,14 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Menu = void 0;
-Object.defineProperty(exports, "MenuContext", {
-  enumerable: true,
-  get: function () {
-    return _menu2.default;
-  }
-});
-exports.default = void 0;
+exports.default = exports.Menu = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _menu = require("./menu.style");

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

@@ -4,7 +4,7 @@ import { IconType } from "../icon";
 export declare type PortraitShapes = "circle" | "square";
 export declare type PortraitSizes = "XS" | "S" | "M" | "ML" | "L" | "XL" | "XXL";
 export interface PortraitProps extends MarginProps {
-    /** An email address registered with Gravatar. */
+    /** (Deprecated) An email address registered with Gravatar. */
     gravatar?: string;
     /** A custom image URL. */
     src?: string;

package/lib/components/portrait/portrait.component.js

@@ -8,6 +8,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _md = _interopRequireDefault(require("crypto-js/md5"));
 var _invariant = _interopRequireDefault(require("invariant"));
+var _logger = _interopRequireDefault(require("../../__internal__/utils/logger"));
 var _tooltip = _interopRequireDefault(require("../tooltip"));
 var _tags = _interopRequireDefault(require("../../__internal__/utils/helpers/tags/tags"));
 var _portrait = require("./portrait.config");
@@ -18,6 +19,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 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 deprecatedGravatarWarnTriggered = false;
 const Portrait = ({
   alt,
   name,
@@ -45,6 +47,10 @@ const Portrait = ({
   } = (0, _react.useContext)(_newValidation.default);
   const defaultShape = roundedCornersOptOut ? "square" : "circle";
   !!(src && gravatar) ? process.env.NODE_ENV !== "production" ? (0, _invariant.default)(false, "The `src` prop cannot be used in conjunction with the `gravatar` prop." + " Please use one or the other.") : (0, _invariant.default)(false) : void 0;
+  const logGravatarDeprecationWarning = () => {
+    deprecatedGravatarWarnTriggered = true;
+    _logger.default.deprecate("The `gravatar` prop has been deprecated and will soon be removed.");
+  };
   (0, _react.useEffect)(() => {
     setExternalError(false);
   }, [gravatar, src]);
@@ -83,6 +89,7 @@ const Portrait = ({
       portrait = /*#__PURE__*/_react.default.createElement(_portrait2.StyledPortraitGravatar, {
         src: gravatarSrc(),
         alt: alt || name || "",
+        onLoad: () => !deprecatedGravatarWarnTriggered && logGravatarDeprecationWarning(),
         onError: () => setExternalError(true)
       });
     }

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

@@ -10,7 +10,7 @@ export interface ProfileProps extends MarginProps {
     alt?: string;
     /** Define the name to display. */
     name?: string;
-    /** Define the email to use (will check Gravatar for image). */
+    /** Define the email to use. */
     email?: string;
     /** Define read-only text to display. */
     text?: string;

package/lib/components/profile/profile.component.js

@@ -67,6 +67,7 @@ const Profile = ({
     }, name), email && /*#__PURE__*/_react.default.createElement(_profile.ProfileEmailStyle, {
       href: `mailto: ${email}`,
       size: size,
+      "data-role": "email-link",
       darkBackground: darkBackground,
       "data-element": "email"
     }, email), text && /*#__PURE__*/_react.default.createElement(_profile.ProfileTextStyle, {

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

@@ -5,7 +5,7 @@ import { TagProps } from "../../__internal__/utils/helpers/tags/tags";
 declare type CustomRefObject<T> = {
     current?: T | null;
 };
-export interface SidebarProps extends PaddingProps, TagProps, WidthProps, Pick<ModalProps, "topModalOverride"> {
+export interface SidebarProps extends PaddingProps, Omit<TagProps, "data-component">, WidthProps, Pick<ModalProps, "topModalOverride"> {
     /** Prop to specify the aria-describedby property of the component */
     "aria-describedby"?: string;
     /**

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

@@ -28,6 +28,8 @@ const Sidebar = exports.Sidebar = /*#__PURE__*/_react.default.forwardRef(({
   "aria-describedby": ariaDescribedBy,
   "aria-label": ariaLabel,
   "aria-labelledby": ariaLabelledBy,
+  "data-element": dataElement = "sidebar",
+  "data-role": dataRole,
   open,
   bespokeFocusTrap,
   disableAutoFocus = false,
@@ -70,20 +72,17 @@ const Sidebar = exports.Sidebar = /*#__PURE__*/_react.default.forwardRef(({
       type: "close"
     }));
   };
-  const componentTags = {
-    "data-component": "sidebar",
-    "data-element": rest["data-element"],
-    "data-role": rest["data-role"]
-  };
   const sidebar = /*#__PURE__*/_react.default.createElement(_sidebar.default, _extends({
     "aria-modal": !enableBackgroundUI && isTopModal,
     "aria-describedby": ariaDescribedBy,
     "aria-label": ariaLabel,
     "aria-labelledby": !ariaLabelledBy && !ariaLabel ? headerId : ariaLabelledBy,
+    "data-component": "sidebar",
+    "data-element": dataElement,
+    "data-role": dataRole,
     ref: setRefs,
     position: position,
     size: size,
-    "data-element": "sidebar",
     onCancel: onCancel,
     role: role
   }, (0, _utils.filterStyledSystemPaddingProps)(rest), {
@@ -94,6 +93,7 @@ const Sidebar = exports.Sidebar = /*#__PURE__*/_react.default.forwardRef(({
     id: headerId
   }), header), !header && closeIcon(), /*#__PURE__*/_react.default.createElement(_box.default, _extends({
     "data-element": "sidebar-content",
+    "data-role": "sidebar-content",
     pt: "var(--spacing300)",
     pb: "var(--spacing400)",
     px: "var(--spacing400)"
@@ -106,13 +106,13 @@ const Sidebar = exports.Sidebar = /*#__PURE__*/_react.default.forwardRef(({
       isInSidebar: true
     }
   }, children)));
-  return /*#__PURE__*/_react.default.createElement(_modal.default, _extends({
+  return /*#__PURE__*/_react.default.createElement(_modal.default, {
     open: open,
     onCancel: onCancel,
     disableEscKey: disableEscKey,
     enableBackgroundUI: enableBackgroundUI,
     topModalOverride: topModalOverride
-  }, componentTags), enableBackgroundUI ? sidebar : /*#__PURE__*/_react.default.createElement(_focusTrap.default, {
+  }, enableBackgroundUI ? sidebar : /*#__PURE__*/_react.default.createElement(_focusTrap.default, {
     wrapperRef: sidebarRef,
     isOpen: open,
     additionalWrapperRefs: focusableContainers,
@@ -129,7 +129,6 @@ if (process.env.NODE_ENV !== "production") {
     "aria-labelledby": _propTypes.default.string,
     "bespokeFocusTrap": _propTypes.default.func,
     "children": _propTypes.default.node,
-    "data-component": _propTypes.default.string,
     "data-element": _propTypes.default.string,
     "data-role": _propTypes.default.string,
     "disableAutoFocus": _propTypes.default.bool,

package/lib/components/vertical-divider/vertical-divider.component.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.VerticalDivider = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _menu = require("../menu/menu.component");
+var _menu = _interopRequireDefault(require("../menu/__internal__/menu.context"));
 var _verticalDivider = require("./vertical-divider.style");
 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); }
@@ -21,7 +21,7 @@ const VerticalDivider = ({
 }) => {
   const {
     inMenu
-  } = (0, _react.useContext)(_menu.MenuContext);
+  } = (0, _react.useContext)(_menu.default);
   return /*#__PURE__*/_react.default.createElement(_verticalDivider.StyledVerticalWrapper, _extends({
     "data-component": "vertical-divider",
     "data-role": "vertical-divider",

package/package.json

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