carbon-react 123.1.0 → 123.2.1

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

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

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

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

package/esm/components/drawer/drawer.component.js

@@ -122,7 +122,8 @@ export const Drawer = ({
     animationDuration: animationDuration,
     className: getClassNames(),
     ref: drawerSidebarContentRef,
-    backgroundColor: backgroundColor
+    backgroundColor: backgroundColor,
+    "data-element": "drawer-content"
   }, stickyHeader && /*#__PURE__*/React.createElement(StyledSidebarHeader, {
     isExpanded: isExpanded
   }, title && /*#__PURE__*/React.createElement(StyledSidebarTitle, null, title), getControls()), !stickyHeader && /*#__PURE__*/React.createElement(React.Fragment, null, title && /*#__PURE__*/React.createElement(StyledSidebarTitle, null, title), getControls()), /*#__PURE__*/React.createElement(StyledDrawerSidebar, {

package/esm/components/navigation-bar/fixed-navigation-bar.context.d.ts

@@ -5,7 +5,7 @@ declare type FixedNavigationBarContextProps = {
 };
 declare const FixedNavigationBarContext: React.Context<FixedNavigationBarContextProps>;
 export interface FixedNavigationBarContextProviderProps extends Pick<NavigationBarProps, "position" | "orientation" | "offset" | "children"> {
-    navbarElement: HTMLElement | null;
+    navbarRef: React.RefObject<HTMLElement>;
 }
-export declare const FixedNavigationBarContextProvider: ({ position, orientation, offset, children, navbarElement, }: FixedNavigationBarContextProviderProps) => React.JSX.Element;
+export declare const FixedNavigationBarContextProvider: ({ position, orientation, offset, children, navbarRef, }: FixedNavigationBarContextProviderProps) => React.JSX.Element;
 export default FixedNavigationBarContext;

package/esm/components/navigation-bar/fixed-navigation-bar.context.js

@@ -1,4 +1,4 @@
-import React, { createContext, useState, useCallback } from "react";
+import React, { createContext, useState, useCallback, useEffect } from "react";
 import useResizeObserver from "../../hooks/__internal__/useResizeObserver/useResizeObserver";
 const FixedNavigationBarContext = /*#__PURE__*/createContext({});
 export const FixedNavigationBarContextProvider = ({
@@ -6,13 +6,14 @@ export const FixedNavigationBarContextProvider = ({
   orientation,
   offset,
   children,
-  navbarElement
+  navbarRef
 }) => {
-  const [navbarHeight, setNavbarHeight] = useState(navbarElement?.offsetHeight);
-  const updateHeight = useCallback(() => setNavbarHeight(navbarElement?.offsetHeight), [navbarElement]);
-  useResizeObserver({
-    current: navbarElement
-  }, updateHeight);
+  const [navbarHeight, setNavbarHeight] = useState(navbarRef.current?.offsetHeight);
+  const updateHeight = useCallback(() => setNavbarHeight(navbarRef.current?.offsetHeight), [navbarRef]);
+  useEffect(() => {
+    updateHeight();
+  }, [updateHeight]);
+  useResizeObserver(navbarRef, updateHeight);
   let submenuMaxHeight;
   if (position === "fixed") {
     if (orientation === "top" && navbarHeight !== undefined) {

package/esm/components/navigation-bar/navigation-bar.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, { useState } from "react";
+import React, { useRef } from "react";
 import PropTypes from "prop-types";
 import StyledNavigationBar from "./navigation-bar.style";
 import { FixedNavigationBarContextProvider } from "./fixed-navigation-bar.context";
@@ -9,13 +9,18 @@ const NavigationBar = ({
   children,
   ariaLabel,
   position,
-  offset = "0",
+  offset = "0px",
   orientation,
   isGlobal,
   ...props
 }) => {
-  const [navbarElement, setNavbarElement] = useState(null);
-  return /*#__PURE__*/React.createElement(StyledNavigationBar, _extends({
+  const navbarRef = useRef(null);
+  return /*#__PURE__*/React.createElement(FixedNavigationBarContextProvider, {
+    orientation: isGlobal ? "top" : orientation,
+    offset: isGlobal ? "0px" : offset,
+    position: isGlobal ? "fixed" : position,
+    navbarRef: navbarRef
+  }, /*#__PURE__*/React.createElement(StyledNavigationBar, _extends({
     role: "navigation",
     "data-component": isGlobal ? "global-header" : "navigation-bar",
     "aria-label": isGlobal ? "Global Header" : ariaLabel,
@@ -25,13 +30,8 @@ const NavigationBar = ({
     position: isGlobal ? "fixed" : position
   }, props, {
     isGlobal: isGlobal,
-    ref: setNavbarElement
-  }), /*#__PURE__*/React.createElement(FixedNavigationBarContextProvider, {
-    orientation: isGlobal ? "top" : orientation,
-    offset: isGlobal ? "0px" : offset,
-    position: isGlobal ? "fixed" : position,
-    navbarElement: navbarElement
-  }, !isLoading && children));
+    ref: navbarRef
+  }), !isLoading && children));
 };
 NavigationBar.propTypes = {
   "alignContent": PropTypes.oneOfType([PropTypes.oneOf(["-moz-initial", "baseline", "center", "end", "flex-end", "flex-start", "inherit", "initial", "normal", "revert", "space-around", "space-between", "space-evenly", "start", "stretch", "unset"]), PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf(["-moz-initial", "baseline", "center", "end", "flex-end", "flex-start", "inherit", "initial", "normal", "revert", "space-around", "space-between", "space-evenly", "start", "stretch", "unset", null]), PropTypes.shape({

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

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

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

@@ -14,6 +14,7 @@ var _button = _interopRequireDefault(require("../button/button.component"));
 var _icon = _interopRequireDefault(require("../icon"));
 var _loader = _interopRequireDefault(require("../loader"));
 var _useLocale = _interopRequireDefault(require("../../hooks/__internal__/useLocale"));
+var _tags = _interopRequireDefault(require("../../__internal__/utils/helpers/tags"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -32,6 +33,8 @@ const Confirm = ({
   cancelButtonIconPosition,
   confirmButtonIconType,
   confirmButtonIconPosition,
+  cancelButtonDataProps,
+  confirmButtonDataProps,
   cancelLabel,
   onCancel,
   disableCancel,
@@ -66,26 +69,30 @@ const Confirm = ({
   }
   const renderCancelButton = () => {
     if (!onCancel) return null;
-    return /*#__PURE__*/_react.default.createElement(_button.default, {
+    return /*#__PURE__*/_react.default.createElement(_button.default, _extends({
       onClick: onCancel,
-      "data-element": "cancel",
       buttonType: cancelButtonType,
       destructive: cancelButtonDestructive,
       disabled: disableCancel,
       iconType: cancelButtonIconType,
       iconPosition: cancelButtonIconPosition
-    }, cancelLabel || l.confirm.no());
+    }, (0, _tags.default)("cancel", {
+      "data-element": "cancel",
+      ...cancelButtonDataProps
+    })), cancelLabel || l.confirm.no());
   };
-  const renderConfirmButton = () => /*#__PURE__*/_react.default.createElement(_button.default, {
+  const renderConfirmButton = () => /*#__PURE__*/_react.default.createElement(_button.default, _extends({
     onClick: onConfirm,
-    "data-element": "confirm",
     buttonType: confirmButtonType,
     destructive: confirmButtonDestructive,
     disabled: isLoadingConfirm || disableConfirm,
     ml: 2,
     iconType: confirmButtonIconType,
     iconPosition: confirmButtonIconPosition
-  }, isLoadingConfirm ? /*#__PURE__*/_react.default.createElement(_loader.default, {
+  }, (0, _tags.default)("confirm", {
+    "data-element": "confirm",
+    ...confirmButtonDataProps
+  })), isLoadingConfirm ? /*#__PURE__*/_react.default.createElement(_loader.default, {
     isInsideButton: true,
     isActive: true
   }) : confirmLabel || l.confirm.yes());

package/lib/components/drawer/drawer.component.js

@@ -132,7 +132,8 @@ const Drawer = ({
     animationDuration: animationDuration,
     className: getClassNames(),
     ref: drawerSidebarContentRef,
-    backgroundColor: backgroundColor
+    backgroundColor: backgroundColor,
+    "data-element": "drawer-content"
   }, stickyHeader && /*#__PURE__*/_react.default.createElement(_drawer.StyledSidebarHeader, {
     isExpanded: isExpanded
   }, title && /*#__PURE__*/_react.default.createElement(_drawer.StyledSidebarTitle, null, title), getControls()), !stickyHeader && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, title && /*#__PURE__*/_react.default.createElement(_drawer.StyledSidebarTitle, null, title), getControls()), /*#__PURE__*/_react.default.createElement(_drawer.StyledDrawerSidebar, {

package/lib/components/navigation-bar/fixed-navigation-bar.context.d.ts

@@ -5,7 +5,7 @@ declare type FixedNavigationBarContextProps = {
 };
 declare const FixedNavigationBarContext: React.Context<FixedNavigationBarContextProps>;
 export interface FixedNavigationBarContextProviderProps extends Pick<NavigationBarProps, "position" | "orientation" | "offset" | "children"> {
-    navbarElement: HTMLElement | null;
+    navbarRef: React.RefObject<HTMLElement>;
 }
-export declare const FixedNavigationBarContextProvider: ({ position, orientation, offset, children, navbarElement, }: FixedNavigationBarContextProviderProps) => React.JSX.Element;
+export declare const FixedNavigationBarContextProvider: ({ position, orientation, offset, children, navbarRef, }: FixedNavigationBarContextProviderProps) => React.JSX.Element;
 export default FixedNavigationBarContext;

package/lib/components/navigation-bar/fixed-navigation-bar.context.js

@@ -15,13 +15,14 @@ const FixedNavigationBarContextProvider = ({
   orientation,
   offset,
   children,
-  navbarElement
+  navbarRef
 }) => {
-  const [navbarHeight, setNavbarHeight] = (0, _react.useState)(navbarElement?.offsetHeight);
-  const updateHeight = (0, _react.useCallback)(() => setNavbarHeight(navbarElement?.offsetHeight), [navbarElement]);
-  (0, _useResizeObserver.default)({
-    current: navbarElement
-  }, updateHeight);
+  const [navbarHeight, setNavbarHeight] = (0, _react.useState)(navbarRef.current?.offsetHeight);
+  const updateHeight = (0, _react.useCallback)(() => setNavbarHeight(navbarRef.current?.offsetHeight), [navbarRef]);
+  (0, _react.useEffect)(() => {
+    updateHeight();
+  }, [updateHeight]);
+  (0, _useResizeObserver.default)(navbarRef, updateHeight);
   let submenuMaxHeight;
   if (position === "fixed") {
     if (orientation === "top" && navbarHeight !== undefined) {

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

@@ -18,13 +18,18 @@ const NavigationBar = ({
   children,
   ariaLabel,
   position,
-  offset = "0",
+  offset = "0px",
   orientation,
   isGlobal,
   ...props
 }) => {
-  const [navbarElement, setNavbarElement] = (0, _react.useState)(null);
-  return /*#__PURE__*/_react.default.createElement(_navigationBar.default, _extends({
+  const navbarRef = (0, _react.useRef)(null);
+  return /*#__PURE__*/_react.default.createElement(_fixedNavigationBar.FixedNavigationBarContextProvider, {
+    orientation: isGlobal ? "top" : orientation,
+    offset: isGlobal ? "0px" : offset,
+    position: isGlobal ? "fixed" : position,
+    navbarRef: navbarRef
+  }, /*#__PURE__*/_react.default.createElement(_navigationBar.default, _extends({
     role: "navigation",
     "data-component": isGlobal ? "global-header" : "navigation-bar",
     "aria-label": isGlobal ? "Global Header" : ariaLabel,
@@ -34,13 +39,8 @@ const NavigationBar = ({
     position: isGlobal ? "fixed" : position
   }, props, {
     isGlobal: isGlobal,
-    ref: setNavbarElement
-  }), /*#__PURE__*/_react.default.createElement(_fixedNavigationBar.FixedNavigationBarContextProvider, {
-    orientation: isGlobal ? "top" : orientation,
-    offset: isGlobal ? "0px" : offset,
-    position: isGlobal ? "fixed" : position,
-    navbarElement: navbarElement
-  }, !isLoading && children));
+    ref: navbarRef
+  }), !isLoading && children));
 };
 exports.NavigationBar = NavigationBar;
 NavigationBar.propTypes = {

package/package.json

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