carbon-react 140.2.0 → 141.0.1

package/esm/__internal__/input/input-presentation.component.js

@@ -43,7 +43,8 @@ const InputPresentation = ({
   };
   return /*#__PURE__*/React.createElement(StyledInputPresentationContainer, {
     inputWidth: inputWidth,
-    maxWidth: maxWidth
+    maxWidth: maxWidth,
+    "data-role": "input-presentation-container"
   }, positionedChildren, /*#__PURE__*/React.createElement(InputPresentationStyle, {
     hasFocus: hasFocus,
     role: "presentation",

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

@@ -1,5 +1,5 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-import React, { useContext, useMemo, useState } from "react";
+import React, { useContext, useEffect, useMemo, useState } from "react";
 import PropTypes from "prop-types";
 import Icon from "../icon";
 import MenuContext from "../menu/__internal__/menu.context";
@@ -83,6 +83,11 @@ const Link = /*#__PURE__*/React.forwardRef(({
       "data-role": "link-anchor"
     }, /*#__PURE__*/React.createElement(React.Fragment, null, renderLinkIcon(), /*#__PURE__*/React.createElement(StyledContent, null, isSkipLink ? l.link.skipLinkLabel() : children), renderLinkIcon("right")));
   };
+  useEffect(() => {
+    if (disabled || !(href || onClick)) {
+      setHasFocus(false);
+    }
+  }, [disabled, href, onClick]);
   return /*#__PURE__*/React.createElement(StyledLink, _extends({
     isSkipLink: isSkipLink,
     disabled: disabled,

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/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/lib/__internal__/input/input-presentation.component.js

@@ -52,7 +52,8 @@ const InputPresentation = ({
   };
   return /*#__PURE__*/_react.default.createElement(_inputPresentation.StyledInputPresentationContainer, {
     inputWidth: inputWidth,
-    maxWidth: maxWidth
+    maxWidth: maxWidth,
+    "data-role": "input-presentation-container"
   }, positionedChildren, /*#__PURE__*/_react.default.createElement(_inputPresentation.default, {
     hasFocus: hasFocus,
     role: "presentation",

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

@@ -92,6 +92,11 @@ const Link = exports.Link = /*#__PURE__*/_react.default.forwardRef(({
       "data-role": "link-anchor"
     }, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, renderLinkIcon(), /*#__PURE__*/_react.default.createElement(_link.StyledContent, null, isSkipLink ? l.link.skipLinkLabel() : children), renderLinkIcon("right")));
   };
+  (0, _react.useEffect)(() => {
+    if (disabled || !(href || onClick)) {
+      setHasFocus(false);
+    }
+  }, [disabled, href, onClick]);
   return /*#__PURE__*/_react.default.createElement(_link.StyledLink, _extends({
     isSkipLink: isSkipLink,
     disabled: disabled,

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/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/package.json

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