carbon-react 140.1.0 → 140.2.0

package/esm/__internal__/character-count/character-count.component.d.ts

@@ -1,5 +1,6 @@
 import React from "react";
 interface CharacterCountProps {
+    ariaLive?: "off" | "polite";
     value: number;
     debouncedValue?: number;
     limit: number;
@@ -7,5 +8,5 @@ interface CharacterCountProps {
     isOverLimit: boolean;
     visuallyHiddenHintId?: string;
 }
-declare const CharacterCount: ({ value, debouncedValue, limit, isDebouncedOverLimit, isOverLimit, visuallyHiddenHintId, }: CharacterCountProps) => React.JSX.Element;
+declare const CharacterCount: ({ ariaLive, value, debouncedValue, limit, isDebouncedOverLimit, isOverLimit, visuallyHiddenHintId, }: CharacterCountProps) => React.JSX.Element;
 export default CharacterCount;

package/esm/__internal__/character-count/character-count.component.js

@@ -3,6 +3,7 @@ import PropTypes from "prop-types";
 import { StyledCharacterCountWrapper, StyledCharacterCount, VisuallyHiddenCharacterCount, VisuallyHiddenHint } from "./character-count.style";
 import useLocale from "../../hooks/__internal__/useLocale";
 const CharacterCount = ({
+  ariaLive = "off",
   value,
   debouncedValue = value,
   limit,
@@ -25,7 +26,8 @@ const CharacterCount = ({
     "data-element": "character-count"
   }, !isOverLimit ? l.characterCount.charactersLeft(limitMinusValue, getFormatNumber(limitMinusValue, l.locale())) : l.characterCount.tooManyCharacters(valueMinusLimit, getFormatNumber(valueMinusLimit, l.locale()))), /*#__PURE__*/React.createElement(VisuallyHiddenCharacterCount, {
     "data-element": "visually-hidden-character-count",
-    "aria-live": "polite"
+    "data-role": "visually-hidden-character-count",
+    "aria-live": ariaLive
   }, !isDebouncedOverLimit ? l.characterCount.charactersLeft(debouncedLimitMinusValue, getFormatNumber(debouncedLimitMinusValue, l.locale())) : l.characterCount.tooManyCharacters(debouncedValueMinusLimit, getFormatNumber(debouncedValueMinusLimit, l.locale()))));
 };
 export default CharacterCount;

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

@@ -49,6 +49,7 @@ export const Heading = ({
   const getSubheader = () => {
     return /*#__PURE__*/React.createElement(StyledSubHeader, {
       "data-element": "subtitle",
+      "data-role": "subtitle",
       id: subtitleId,
       hasBackLink: !!backLink,
       hasSeparator: separator
@@ -74,7 +75,9 @@ export const Heading = ({
     variant: headingType,
     "data-element": "title",
     id: titleId
-  }, title), (help || helpLink) && getHelp(), pills && getPills()), separator && /*#__PURE__*/React.createElement(StyledSeparator, null), subheader && getSubheader()), divider && /*#__PURE__*/React.createElement(StyledDivider, {
+  }, title), (help || helpLink) && getHelp(), pills && getPills()), separator && /*#__PURE__*/React.createElement(StyledSeparator, {
+    "data-role": "heading-separator"
+  }), subheader && getSubheader()), divider && /*#__PURE__*/React.createElement(StyledDivider, {
     "data-element": "divider"
   }), children) : null;
 };

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

@@ -26,7 +26,8 @@ export const SettingsRow = ({
   };
   return /*#__PURE__*/React.createElement(StyledSettingsRow, _extends({
     className: className,
-    hasDivider: divider
+    hasDivider: divider,
+    "data-role": "settings-row"
   }, tagComponent("settings-row", rest), {
     m: 0
   }, filterStyledSystemMarginProps(rest)), /*#__PURE__*/React.createElement(StyledSettingsRowHeader, null, heading()), /*#__PURE__*/React.createElement(StyledSettingsRowInput, null, children));

package/esm/components/text-editor/text-editor.component.js

@@ -66,7 +66,7 @@ const TextEditor = /*#__PURE__*/React.forwardRef(({
     info,
     label: labelText
   });
-  const [characterCount, visuallyHiddenHintId] = useCharacterCount(getContent(value).getPlainText(""), characterLimit);
+  const [characterCount, visuallyHiddenHintId] = useCharacterCount(getContent(value).getPlainText(""), characterLimit, isFocused ? "polite" : "off");
   const combinedAriaDescribedBy = [ariaDescribedBy, inputHint ? inputHintId.current : undefined, visuallyHiddenHintId].filter(Boolean).join(" ");
   if (rows && (typeof rows !== "number" || rows < 2)) {
     // eslint-disable-next-line no-console

package/esm/components/textarea/textarea.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, { useRef, useEffect, useContext, useCallback } from "react";
+import React, { useRef, useEffect, useContext, useCallback, useState } from "react";
 import PropTypes from "prop-types";
 import { InputPresentation } from "../../__internal__/input";
 import FormField from "../../__internal__/form-field";
@@ -28,6 +28,8 @@ const Textarea = /*#__PURE__*/React.forwardRef(({
   children,
   characterLimit,
   onChange,
+  onFocus,
+  onBlur,
   disabled = false,
   labelInline,
   labelAlign,
@@ -79,6 +81,21 @@ const Textarea = /*#__PURE__*/React.forwardRef(({
       ref(inputElement);
     }
   }, [ref]);
+  const [characterCountAriaLive, setCharacterCountAriaLive] = useState("off");
+
+  // This block of code has been covered in a Playwright test.
+  // istanbul ignore next
+  const handleFocus = ev => {
+    if (characterLimit) setCharacterCountAriaLive("polite");
+    onFocus?.(ev);
+  };
+
+  // This block of code has been covered in a Playwright test.
+  // istanbul ignore next
+  const handleBlur = ev => {
+    if (characterLimit) setCharacterCountAriaLive("off");
+    onBlur?.(ev);
+  };
   if (!deprecateUncontrolledWarnTriggered && !onChange) {
     deprecateUncontrolledWarnTriggered = true;
     Logger.deprecate("Uncontrolled behaviour in `Textarea` is deprecated and support will soon be removed. Please make sure all your inputs are controlled.");
@@ -120,7 +137,7 @@ const Textarea = /*#__PURE__*/React.forwardRef(({
     label,
     fieldHelp
   });
-  const [characterCount, visuallyHiddenHintId] = useCharacterCount(value, characterLimit);
+  const [characterCount, visuallyHiddenHintId] = useCharacterCount(value, characterLimit, characterCountAriaLive);
   useEffect(() => {
     if (rows) {
       minHeight.current = internalRef?.current?.scrollHeight || 0;
@@ -169,6 +186,8 @@ const Textarea = /*#__PURE__*/React.forwardRef(({
     value: value,
     ref: callbackRef,
     onChange: onChange,
+    onFocus: handleFocus,
+    onBlur: handleBlur,
     disabled: disabled,
     readOnly: readOnly,
     placeholder: disabled ? "" : placeholder,

package/esm/components/textbox/textbox.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, useRef } from "react";
+import React, { useContext, useRef, useState } from "react";
 import PropTypes from "prop-types";
 import { filterStyledSystemMarginProps } from "../../style/utils";
 import { Input, InputPresentation } from "../../__internal__/input";
@@ -78,7 +78,22 @@ const Textbox = /*#__PURE__*/React.forwardRef(({
 }, ref) => {
   const characterCountValue = typeof value === "string" ? value : "";
   const [uniqueId, uniqueName] = useUniqueId(id, name);
-  const [characterCount, visuallyHiddenHintId] = useCharacterCount(characterCountValue, characterLimit);
+  const [characterCountAriaLive, setCharacterCountAriaLive] = useState("off");
+
+  // This block of code has been covered in a Playwright test.
+  // istanbul ignore next
+  const handleFocus = ev => {
+    if (characterLimit) setCharacterCountAriaLive("polite");
+    onFocus?.(ev);
+  };
+
+  // This block of code has been covered in a Playwright test.
+  // istanbul ignore next
+  const handleBlur = ev => {
+    if (characterLimit) setCharacterCountAriaLive("off");
+    onBlur?.(ev);
+  };
+  const [characterCount, visuallyHiddenHintId] = useCharacterCount(characterCountValue, characterLimit, characterCountAriaLive);
   const {
     validationRedesignOptIn
   } = useContext(NewValidationContext);
@@ -137,11 +152,11 @@ const Textbox = /*#__PURE__*/React.forwardRef(({
     id: uniqueId,
     ref: ref,
     name: uniqueName,
-    onBlur: onBlur,
+    onBlur: handleBlur,
     onChange: onChange,
     onChangeDeferred: onChangeDeferred,
     onClick: disabled || readOnly ? undefined : onClick,
-    onFocus: onFocus,
+    onFocus: handleFocus,
     onMouseDown: disabled || readOnly ? undefined : onMouseDown,
     placeholder: disabled || readOnly ? "" : placeholder,
     readOnly: readOnly,

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/esm/hooks/__internal__/useCharacterCount/useCharacterCount.d.ts

@@ -1,2 +1,2 @@
-declare const useCharacterCount: (value?: string, characterLimit?: number) => [JSX.Element | null, string | undefined];
+declare const useCharacterCount: (value?: string, characterLimit?: number, characterCountAriaLive?: "off" | "polite") => [JSX.Element | null, string | undefined];
 export default useCharacterCount;

package/esm/hooks/__internal__/useCharacterCount/useCharacterCount.js

@@ -2,7 +2,7 @@ import React, { useMemo, useRef, useEffect, useState } from "react";
 import CharacterCount from "../../../__internal__/character-count";
 import guid from "../../../__internal__/utils/helpers/guid";
 import useDebounce from "../useDebounce";
-const useCharacterCount = (value = "", characterLimit) => {
+const useCharacterCount = (value = "", characterLimit, characterCountAriaLive) => {
   const isCharacterLimitValid = typeof characterLimit === "number" && !Number.isNaN(characterLimit);
   const [debouncedValue, setDebouncedValue] = useState(value);
   const debounceWaitTime = 2000;
@@ -28,6 +28,7 @@ const useCharacterCount = (value = "", characterLimit) => {
     return false;
   }, [debouncedValue, characterLimit, isCharacterLimitValid]);
   return [isCharacterLimitValid ? /*#__PURE__*/React.createElement(CharacterCount, {
+    ariaLive: characterCountAriaLive,
     isOverLimit: isOverLimit,
     isDebouncedOverLimit: isDebouncedOverLimit,
     value: value.length,

package/lib/__internal__/character-count/character-count.component.d.ts

@@ -1,5 +1,6 @@
 import React from "react";
 interface CharacterCountProps {
+    ariaLive?: "off" | "polite";
     value: number;
     debouncedValue?: number;
     limit: number;
@@ -7,5 +8,5 @@ interface CharacterCountProps {
     isOverLimit: boolean;
     visuallyHiddenHintId?: string;
 }
-declare const CharacterCount: ({ value, debouncedValue, limit, isDebouncedOverLimit, isOverLimit, visuallyHiddenHintId, }: CharacterCountProps) => React.JSX.Element;
+declare const CharacterCount: ({ ariaLive, value, debouncedValue, limit, isDebouncedOverLimit, isOverLimit, visuallyHiddenHintId, }: CharacterCountProps) => React.JSX.Element;
 export default CharacterCount;

package/lib/__internal__/character-count/character-count.component.js

@@ -10,6 +10,7 @@ var _characterCount = require("./character-count.style");
 var _useLocale = _interopRequireDefault(require("../../hooks/__internal__/useLocale"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const CharacterCount = ({
+  ariaLive = "off",
   value,
   debouncedValue = value,
   limit,
@@ -32,7 +33,8 @@ const CharacterCount = ({
     "data-element": "character-count"
   }, !isOverLimit ? l.characterCount.charactersLeft(limitMinusValue, getFormatNumber(limitMinusValue, l.locale())) : l.characterCount.tooManyCharacters(valueMinusLimit, getFormatNumber(valueMinusLimit, l.locale()))), /*#__PURE__*/_react.default.createElement(_characterCount.VisuallyHiddenCharacterCount, {
     "data-element": "visually-hidden-character-count",
-    "aria-live": "polite"
+    "data-role": "visually-hidden-character-count",
+    "aria-live": ariaLive
   }, !isDebouncedOverLimit ? l.characterCount.charactersLeft(debouncedLimitMinusValue, getFormatNumber(debouncedLimitMinusValue, l.locale())) : l.characterCount.tooManyCharacters(debouncedValueMinusLimit, getFormatNumber(debouncedValueMinusLimit, l.locale()))));
 };
 var _default = exports.default = CharacterCount;

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

@@ -56,6 +56,7 @@ const Heading = ({
   const getSubheader = () => {
     return /*#__PURE__*/_react.default.createElement(_heading.StyledSubHeader, {
       "data-element": "subtitle",
+      "data-role": "subtitle",
       id: subtitleId,
       hasBackLink: !!backLink,
       hasSeparator: separator
@@ -81,7 +82,9 @@ const Heading = ({
     variant: headingType,
     "data-element": "title",
     id: titleId
-  }, title), (help || helpLink) && getHelp(), pills && getPills()), separator && /*#__PURE__*/_react.default.createElement(_heading.StyledSeparator, null), subheader && getSubheader()), divider && /*#__PURE__*/_react.default.createElement(_heading.StyledDivider, {
+  }, title), (help || helpLink) && getHelp(), pills && getPills()), separator && /*#__PURE__*/_react.default.createElement(_heading.StyledSeparator, {
+    "data-role": "heading-separator"
+  }), subheader && getSubheader()), divider && /*#__PURE__*/_react.default.createElement(_heading.StyledDivider, {
     "data-element": "divider"
   }), children) : null;
 };

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

@@ -33,7 +33,8 @@ const SettingsRow = ({
   };
   return /*#__PURE__*/_react.default.createElement(_settingsRow.StyledSettingsRow, _extends({
     className: className,
-    hasDivider: divider
+    hasDivider: divider,
+    "data-role": "settings-row"
   }, (0, _tags.default)("settings-row", rest), {
     m: 0
   }, (0, _utils.filterStyledSystemMarginProps)(rest)), /*#__PURE__*/_react.default.createElement(_settingsRow.StyledSettingsRowHeader, null, heading()), /*#__PURE__*/_react.default.createElement(_settingsRow.StyledSettingsRowInput, null, children));

package/lib/components/text-editor/text-editor.component.js

@@ -75,7 +75,7 @@ const TextEditor = exports.TextEditor = /*#__PURE__*/_react.default.forwardRef((
     info,
     label: labelText
   });
-  const [characterCount, visuallyHiddenHintId] = (0, _useCharacterCount.default)((0, _utils.getContent)(value).getPlainText(""), characterLimit);
+  const [characterCount, visuallyHiddenHintId] = (0, _useCharacterCount.default)((0, _utils.getContent)(value).getPlainText(""), characterLimit, isFocused ? "polite" : "off");
   const combinedAriaDescribedBy = [ariaDescribedBy, inputHint ? inputHintId.current : undefined, visuallyHiddenHintId].filter(Boolean).join(" ");
   if (rows && (typeof rows !== "number" || rows < 2)) {
     // eslint-disable-next-line no-console

package/lib/components/textarea/textarea.component.js

@@ -37,6 +37,8 @@ const Textarea = exports.OriginalTextarea = exports.Textarea = /*#__PURE__*/_rea
   children,
   characterLimit,
   onChange,
+  onFocus,
+  onBlur,
   disabled = false,
   labelInline,
   labelAlign,
@@ -88,6 +90,21 @@ const Textarea = exports.OriginalTextarea = exports.Textarea = /*#__PURE__*/_rea
       ref(inputElement);
     }
   }, [ref]);
+  const [characterCountAriaLive, setCharacterCountAriaLive] = (0, _react.useState)("off");
+
+  // This block of code has been covered in a Playwright test.
+  // istanbul ignore next
+  const handleFocus = ev => {
+    if (characterLimit) setCharacterCountAriaLive("polite");
+    onFocus?.(ev);
+  };
+
+  // This block of code has been covered in a Playwright test.
+  // istanbul ignore next
+  const handleBlur = ev => {
+    if (characterLimit) setCharacterCountAriaLive("off");
+    onBlur?.(ev);
+  };
   if (!deprecateUncontrolledWarnTriggered && !onChange) {
     deprecateUncontrolledWarnTriggered = true;
     _logger.default.deprecate("Uncontrolled behaviour in `Textarea` is deprecated and support will soon be removed. Please make sure all your inputs are controlled.");
@@ -129,7 +146,7 @@ const Textarea = exports.OriginalTextarea = exports.Textarea = /*#__PURE__*/_rea
     label,
     fieldHelp
   });
-  const [characterCount, visuallyHiddenHintId] = (0, _useCharacterCount.default)(value, characterLimit);
+  const [characterCount, visuallyHiddenHintId] = (0, _useCharacterCount.default)(value, characterLimit, characterCountAriaLive);
   (0, _react.useEffect)(() => {
     if (rows) {
       minHeight.current = internalRef?.current?.scrollHeight || 0;
@@ -178,6 +195,8 @@ const Textarea = exports.OriginalTextarea = exports.Textarea = /*#__PURE__*/_rea
     value: value,
     ref: callbackRef,
     onChange: onChange,
+    onFocus: handleFocus,
+    onBlur: handleBlur,
     disabled: disabled,
     readOnly: readOnly,
     placeholder: disabled ? "" : placeholder,

package/lib/components/textbox/textbox.component.js

@@ -87,7 +87,22 @@ const Textbox = exports.Textbox = /*#__PURE__*/_react.default.forwardRef(({
 }, ref) => {
   const characterCountValue = typeof value === "string" ? value : "";
   const [uniqueId, uniqueName] = (0, _useUniqueId.default)(id, name);
-  const [characterCount, visuallyHiddenHintId] = (0, _useCharacterCount.default)(characterCountValue, characterLimit);
+  const [characterCountAriaLive, setCharacterCountAriaLive] = (0, _react.useState)("off");
+
+  // This block of code has been covered in a Playwright test.
+  // istanbul ignore next
+  const handleFocus = ev => {
+    if (characterLimit) setCharacterCountAriaLive("polite");
+    onFocus?.(ev);
+  };
+
+  // This block of code has been covered in a Playwright test.
+  // istanbul ignore next
+  const handleBlur = ev => {
+    if (characterLimit) setCharacterCountAriaLive("off");
+    onBlur?.(ev);
+  };
+  const [characterCount, visuallyHiddenHintId] = (0, _useCharacterCount.default)(characterCountValue, characterLimit, characterCountAriaLive);
   const {
     validationRedesignOptIn
   } = (0, _react.useContext)(_newValidation.default);
@@ -146,11 +161,11 @@ const Textbox = exports.Textbox = /*#__PURE__*/_react.default.forwardRef(({
     id: uniqueId,
     ref: ref,
     name: uniqueName,
-    onBlur: onBlur,
+    onBlur: handleBlur,
     onChange: onChange,
     onChangeDeferred: onChangeDeferred,
     onClick: disabled || readOnly ? undefined : onClick,
-    onFocus: onFocus,
+    onFocus: handleFocus,
     onMouseDown: disabled || readOnly ? undefined : onMouseDown,
     placeholder: disabled || readOnly ? "" : placeholder,
     readOnly: readOnly,

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/lib/hooks/__internal__/useCharacterCount/useCharacterCount.d.ts

@@ -1,2 +1,2 @@
-declare const useCharacterCount: (value?: string, characterLimit?: number) => [JSX.Element | null, string | undefined];
+declare const useCharacterCount: (value?: string, characterLimit?: number, characterCountAriaLive?: "off" | "polite") => [JSX.Element | null, string | undefined];
 export default useCharacterCount;

package/lib/hooks/__internal__/useCharacterCount/useCharacterCount.js

@@ -11,7 +11,7 @@ var _useDebounce = _interopRequireDefault(require("../useDebounce"));
 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; }
-const useCharacterCount = (value = "", characterLimit) => {
+const useCharacterCount = (value = "", characterLimit, characterCountAriaLive) => {
   const isCharacterLimitValid = typeof characterLimit === "number" && !Number.isNaN(characterLimit);
   const [debouncedValue, setDebouncedValue] = (0, _react.useState)(value);
   const debounceWaitTime = 2000;
@@ -37,6 +37,7 @@ const useCharacterCount = (value = "", characterLimit) => {
     return false;
   }, [debouncedValue, characterLimit, isCharacterLimitValid]);
   return [isCharacterLimitValid ? /*#__PURE__*/_react.default.createElement(_characterCount.default, {
+    ariaLive: characterCountAriaLive,
     isOverLimit: isOverLimit,
     isDebouncedOverLimit: isDebouncedOverLimit,
     value: value.length,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "140.1.0",
+  "version": "140.2.0",
   "description": "A library of reusable React components for easily building user interfaces.",
   "files": [
     "lib",
@@ -88,6 +88,7 @@
     "@storybook/react": "^7.6.4",
     "@storybook/react-webpack5": "^7.6.4",
     "@storybook/theming": "^7.6.4",
+    "@testing-library/dom": "^9.0.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^12.1.5",
     "@testing-library/react-hooks": "^8.0.1",
@@ -202,7 +203,8 @@
     "styled-system": "^5.1.5"
   },
   "overrides": {
-    "playwright-core": "$@playwright/experimental-ct-react17"
+    "playwright-core": "$@playwright/experimental-ct-react17",
+    "@testing-library/dom": "$@testing-library/dom"
   },
   "config": {
     "commitizen": {