carbon-react 142.7.0 → 142.8.1

package/esm/__internal__/validations/validation-icon.component.js

@@ -69,8 +69,7 @@ export const ValidationIcon = ({
       setTriggeredByIcon(false);
       if (onBlur) onBlur(e);
     },
-    isPartOfInput: isPartOfInput,
-    "data-role": `validation-icon-${validationType}`
+    isPartOfInput: isPartOfInput
   }, filterStyledSystemMarginProps(rest)), /*#__PURE__*/React.createElement(Icon, {
     "aria-describedby": validationTooltipId.current,
     key: `${validationType}-icon`,

package/esm/__spec_helper__/mock-match-media.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="jest" />
 export declare const setupMatchMediaMock: () => void;
 export declare const mockMatchMedia: (matches: boolean) => {
-    removeEventListener: jest.Mock<any, any>;
+    removeEventListener: jest.Mock<any, any, any>;
 };

package/esm/components/dialog/dialog.component.js

@@ -1,5 +1,5 @@
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import React, { useRef, useEffect, useLayoutEffect, useCallback, useImperativeHandle, forwardRef } from "react";
+import React, { useRef, useEffect, useLayoutEffect, useCallback, useImperativeHandle, forwardRef, useState } from "react";
 import PropTypes from "prop-types";
 import createGuid from "../../__internal__/utils/helpers/guid";
 import Modal from "../modal";
@@ -46,6 +46,8 @@ const Dialog = /*#__PURE__*/forwardRef(({
   const containerRef = useRef(null);
   const innerContentRef = useRef(null);
   const titleRef = useRef(null);
+  const [breakpointOffset, setBreakpointOffset] = useState(undefined);
+  const isDialogMaximised = size === "maximise";
   const listenersAdded = useRef(false);
   const {
     current: titleId
@@ -78,9 +80,15 @@ const Dialog = /*#__PURE__*/forwardRef(({
     if (midPointX < 0) {
       midPointX = 0;
     }
+    if (isDialogMaximised) {
+      const breakPoint = window.innerWidth > 960 ? 32 : 16;
+      midPointX = breakPoint;
+      midPointY = breakPoint;
+      setBreakpointOffset(breakPoint);
+    }
     containerRef.current.style.top = `${midPointY}px`;
     containerRef.current.style.left = `${midPointX}px`;
-  }, []);
+  }, [size]);
   useResizeObserver(innerContentRef, centerDialog, !open);
   const addListeners = useCallback(() => {
     /* istanbul ignore else */
@@ -172,7 +180,7 @@ const Dialog = /*#__PURE__*/forwardRef(({
     "data-role": dataRole,
     "aria-modal": isTopModal ? true : undefined,
     ref: containerRef,
-    topMargin: TOP_MARGIN
+    topMargin: isDialogMaximised && breakpointOffset ? breakpointOffset * 2 : TOP_MARGIN
   }, dialogProps, {
     role: role,
     tabIndex: -1
@@ -243,7 +251,7 @@ if (process.env.NODE_ENV !== "production") {
     "open": PropTypes.bool.isRequired,
     "role": PropTypes.string,
     "showCloseIcon": PropTypes.bool,
-    "size": PropTypes.oneOf(["auto", "extra-large", "extra-small", "large", "medium-large", "medium-small", "medium", "small"]),
+    "size": PropTypes.oneOf(["auto", "extra-large", "extra-small", "large", "maximise", "medium-large", "medium-small", "medium", "small"]),
     "subtitle": PropTypes.node,
     "timeout": PropTypes.number,
     "title": PropTypes.node,

package/esm/components/dialog/dialog.config.d.ts

@@ -1,4 +1,4 @@
-export declare const DIALOG_SIZES: readonly ["auto", "extra-small", "small", "medium-small", "medium", "medium-large", "large", "extra-large"];
+export declare const DIALOG_SIZES: readonly ["auto", "extra-small", "small", "medium-small", "medium", "medium-large", "large", "extra-large", "maximise"];
 export declare const TOP_MARGIN = 20;
 export declare const CONTENT_TOP_PADDING = 24;
 export declare const HORIZONTAL_PADDING = 32;

package/esm/components/dialog/dialog.config.js

@@ -1,4 +1,4 @@
-export const DIALOG_SIZES = ["auto", "extra-small", "small", "medium-small", "medium", "medium-large", "large", "extra-large"];
+export const DIALOG_SIZES = ["auto", "extra-small", "small", "medium-small", "medium", "medium-large", "large", "extra-large", "maximise"];
 export const TOP_MARGIN = 20;
 export const CONTENT_TOP_PADDING = 24;
 export const HORIZONTAL_PADDING = 32;

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

@@ -6,7 +6,11 @@ declare type StyledDialogProps = {
     dialogHeight?: string;
     backgroundColor: string;
 };
-declare const StyledDialog: import("styled-components").StyledComponent<"div", any, StyledDialogProps & ContentPaddingInterface, never>;
+declare const StyledDialog: import("styled-components").StyledComponent<"div", any, {
+    isDialogMaximised: boolean;
+    isDialogMaximisedSmallViewport: boolean;
+    isDialogMaximisedLargeViewport: boolean;
+} & StyledDialogProps & ContentPaddingInterface, "isDialogMaximised" | "isDialogMaximisedSmallViewport" | "isDialogMaximisedLargeViewport">;
 declare type StyledDialogTitleProps = {
     showCloseIcon?: boolean;
     hasSubtitle?: boolean;

package/esm/components/dialog/dialog.style.js

@@ -20,7 +20,19 @@ const calculatePaddingTopInnerContent = ({
   py,
   p
 }) => [py, p].some(padding => padding !== undefined) ? 0 : `${CONTENT_TOP_PADDING}px`;
-const StyledDialog = styled.div`
+const StyledDialog = styled.div.attrs(({
+  topMargin,
+  size
+}) => {
+  const isDialogMaximised = size === "maximise";
+  const isDialogMaximisedSmallViewport = topMargin === 32;
+  const isDialogMaximisedLargeViewport = topMargin === 64;
+  return {
+    isDialogMaximised,
+    isDialogMaximisedSmallViewport,
+    isDialogMaximisedLargeViewport
+  };
+})`
   box-shadow: var(--boxShadow300);
   display: flex;
   flex-direction: column;
@@ -33,6 +45,9 @@ const StyledDialog = styled.div`
   max-height: ${({
   topMargin
 }) => `calc(100vh - ${topMargin}px)`};
+  ${({
+  isDialogMaximised
+}) => isDialogMaximised && "height: 100%"};
 
   &:focus {
     outline: none;
@@ -45,9 +60,10 @@ const StyledDialog = styled.div`
     `}
 
   ${({
-  size
+  size,
+  topMargin
 }) => size && css`
-      max-width: ${dialogSizes[size]};
+      max-width: ${size === "maximise" ? `calc(100vw - ${topMargin}px)` : dialogSizes[size]};
       width: 100%;
     `}
 
@@ -57,7 +73,17 @@ const StyledDialog = styled.div`
       height: ${dialogHeight}px;
     `}
 
+  /* We're overriding the max-height on the form content to account for a larger height when in a smaller viewport.
+  TODO: Remove this upon the completion of FE-6643. */
   ${StyledForm} {
+    ${({
+  isDialogMaximised,
+  isDialogMaximisedSmallViewport
+}) => isDialogMaximised && css`
+        ${isDialogMaximisedSmallViewport && "max-height: calc(100vh - 184px);"}
+        height: 100%;
+      `}
+
     padding-bottom: 0px;
     box-sizing: border-box;
   }

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

@@ -76,6 +76,13 @@ const Submenu = /*#__PURE__*/React.forwardRef(({
     }
     startCharacterTimeout();
   }, [startCharacterTimeout]);
+  useEffect(() => {
+    return () => {
+      if (characterTimer.current) {
+        clearTimeout(characterTimer.current);
+      }
+    };
+  }, []);
   const openSubmenu = useCallback(() => {
     setSubmenuOpen(true);
     setOpenSubmenuId(submenuId.current);

package/lib/__internal__/validations/validation-icon.component.js

@@ -78,8 +78,7 @@ const ValidationIcon = ({
       setTriggeredByIcon(false);
       if (onBlur) onBlur(e);
     },
-    isPartOfInput: isPartOfInput,
-    "data-role": `validation-icon-${validationType}`
+    isPartOfInput: isPartOfInput
   }, (0, _utils.filterStyledSystemMarginProps)(rest)), /*#__PURE__*/_react.default.createElement(_icon.default, {
     "aria-describedby": validationTooltipId.current,
     key: `${validationType}-icon`,

package/lib/__spec_helper__/mock-match-media.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="jest" />
 export declare const setupMatchMediaMock: () => void;
 export declare const mockMatchMedia: (matches: boolean) => {
-    removeEventListener: jest.Mock<any, any>;
+    removeEventListener: jest.Mock<any, any, any>;
 };

package/lib/components/dialog/dialog.component.js

@@ -55,6 +55,8 @@ const Dialog = exports.Dialog = /*#__PURE__*/(0, _react.forwardRef)(({
   const containerRef = (0, _react.useRef)(null);
   const innerContentRef = (0, _react.useRef)(null);
   const titleRef = (0, _react.useRef)(null);
+  const [breakpointOffset, setBreakpointOffset] = (0, _react.useState)(undefined);
+  const isDialogMaximised = size === "maximise";
   const listenersAdded = (0, _react.useRef)(false);
   const {
     current: titleId
@@ -87,9 +89,15 @@ const Dialog = exports.Dialog = /*#__PURE__*/(0, _react.forwardRef)(({
     if (midPointX < 0) {
       midPointX = 0;
     }
+    if (isDialogMaximised) {
+      const breakPoint = window.innerWidth > 960 ? 32 : 16;
+      midPointX = breakPoint;
+      midPointY = breakPoint;
+      setBreakpointOffset(breakPoint);
+    }
     containerRef.current.style.top = `${midPointY}px`;
     containerRef.current.style.left = `${midPointX}px`;
-  }, []);
+  }, [size]);
   (0, _useResizeObserver.default)(innerContentRef, centerDialog, !open);
   const addListeners = (0, _react.useCallback)(() => {
     /* istanbul ignore else */
@@ -181,7 +189,7 @@ const Dialog = exports.Dialog = /*#__PURE__*/(0, _react.forwardRef)(({
     "data-role": dataRole,
     "aria-modal": isTopModal ? true : undefined,
     ref: containerRef,
-    topMargin: _dialog2.TOP_MARGIN
+    topMargin: isDialogMaximised && breakpointOffset ? breakpointOffset * 2 : _dialog2.TOP_MARGIN
   }, dialogProps, {
     role: role,
     tabIndex: -1
@@ -252,7 +260,7 @@ if (process.env.NODE_ENV !== "production") {
     "open": _propTypes.default.bool.isRequired,
     "role": _propTypes.default.string,
     "showCloseIcon": _propTypes.default.bool,
-    "size": _propTypes.default.oneOf(["auto", "extra-large", "extra-small", "large", "medium-large", "medium-small", "medium", "small"]),
+    "size": _propTypes.default.oneOf(["auto", "extra-large", "extra-small", "large", "maximise", "medium-large", "medium-small", "medium", "small"]),
     "subtitle": _propTypes.default.node,
     "timeout": _propTypes.default.number,
     "title": _propTypes.default.node,

package/lib/components/dialog/dialog.config.d.ts

@@ -1,4 +1,4 @@
-export declare const DIALOG_SIZES: readonly ["auto", "extra-small", "small", "medium-small", "medium", "medium-large", "large", "extra-large"];
+export declare const DIALOG_SIZES: readonly ["auto", "extra-small", "small", "medium-small", "medium", "medium-large", "large", "extra-large", "maximise"];
 export declare const TOP_MARGIN = 20;
 export declare const CONTENT_TOP_PADDING = 24;
 export declare const HORIZONTAL_PADDING = 32;

package/lib/components/dialog/dialog.config.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.TOP_MARGIN = exports.HORIZONTAL_PADDING = exports.DIALOG_SIZES = exports.CONTENT_TOP_PADDING = exports.CONTENT_BOTTOM_PADDING = void 0;
-const DIALOG_SIZES = exports.DIALOG_SIZES = ["auto", "extra-small", "small", "medium-small", "medium", "medium-large", "large", "extra-large"];
+const DIALOG_SIZES = exports.DIALOG_SIZES = ["auto", "extra-small", "small", "medium-small", "medium", "medium-large", "large", "extra-large", "maximise"];
 const TOP_MARGIN = exports.TOP_MARGIN = 20;
 const CONTENT_TOP_PADDING = exports.CONTENT_TOP_PADDING = 24;
 const HORIZONTAL_PADDING = exports.HORIZONTAL_PADDING = 32;

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

@@ -6,7 +6,11 @@ declare type StyledDialogProps = {
     dialogHeight?: string;
     backgroundColor: string;
 };
-declare const StyledDialog: import("styled-components").StyledComponent<"div", any, StyledDialogProps & ContentPaddingInterface, never>;
+declare const StyledDialog: import("styled-components").StyledComponent<"div", any, {
+    isDialogMaximised: boolean;
+    isDialogMaximisedSmallViewport: boolean;
+    isDialogMaximisedLargeViewport: boolean;
+} & StyledDialogProps & ContentPaddingInterface, "isDialogMaximised" | "isDialogMaximisedSmallViewport" | "isDialogMaximisedLargeViewport">;
 declare type StyledDialogTitleProps = {
     showCloseIcon?: boolean;
     hasSubtitle?: boolean;

package/lib/components/dialog/dialog.style.js

@@ -29,7 +29,19 @@ const calculatePaddingTopInnerContent = ({
   py,
   p
 }) => [py, p].some(padding => padding !== undefined) ? 0 : `${_dialog.CONTENT_TOP_PADDING}px`;
-const StyledDialog = exports.StyledDialog = _styledComponents.default.div`
+const StyledDialog = exports.StyledDialog = _styledComponents.default.div.attrs(({
+  topMargin,
+  size
+}) => {
+  const isDialogMaximised = size === "maximise";
+  const isDialogMaximisedSmallViewport = topMargin === 32;
+  const isDialogMaximisedLargeViewport = topMargin === 64;
+  return {
+    isDialogMaximised,
+    isDialogMaximisedSmallViewport,
+    isDialogMaximisedLargeViewport
+  };
+})`
   box-shadow: var(--boxShadow300);
   display: flex;
   flex-direction: column;
@@ -42,6 +54,9 @@ const StyledDialog = exports.StyledDialog = _styledComponents.default.div`
   max-height: ${({
   topMargin
 }) => `calc(100vh - ${topMargin}px)`};
+  ${({
+  isDialogMaximised
+}) => isDialogMaximised && "height: 100%"};
 
   &:focus {
     outline: none;
@@ -54,9 +69,10 @@ const StyledDialog = exports.StyledDialog = _styledComponents.default.div`
     `}
 
   ${({
-  size
+  size,
+  topMargin
 }) => size && (0, _styledComponents.css)`
-      max-width: ${dialogSizes[size]};
+      max-width: ${size === "maximise" ? `calc(100vw - ${topMargin}px)` : dialogSizes[size]};
       width: 100%;
     `}
 
@@ -66,7 +82,17 @@ const StyledDialog = exports.StyledDialog = _styledComponents.default.div`
       height: ${dialogHeight}px;
     `}
 
+  /* We're overriding the max-height on the form content to account for a larger height when in a smaller viewport.
+  TODO: Remove this upon the completion of FE-6643. */
   ${_form.StyledForm} {
+    ${({
+  isDialogMaximised,
+  isDialogMaximisedSmallViewport
+}) => isDialogMaximised && (0, _styledComponents.css)`
+        ${isDialogMaximisedSmallViewport && "max-height: calc(100vh - 184px);"}
+        height: 100%;
+      `}
+
     padding-bottom: 0px;
     box-sizing: border-box;
   }

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

@@ -85,6 +85,13 @@ const Submenu = /*#__PURE__*/_react.default.forwardRef(({
     }
     startCharacterTimeout();
   }, [startCharacterTimeout]);
+  (0, _react.useEffect)(() => {
+    return () => {
+      if (characterTimer.current) {
+        clearTimeout(characterTimer.current);
+      }
+    };
+  }, []);
   const openSubmenu = (0, _react.useCallback)(() => {
     setSubmenuOpen(true);
     setOpenSubmenuId(submenuId.current);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "142.7.0",
+  "version": "142.8.1",
   "description": "A library of reusable React components for easily building user interfaces.",
   "files": [
     "lib",
@@ -11,8 +11,8 @@
   "scripts": {
     "start": "node ./scripts/check_node_version.mjs && cross-env storybook dev -p 9001 -c .storybook",
     "start:debug-theme": "cross-env STORYBOOK_DEBUG_THEME=true npm run start",
-    "test": "jest --config=./jest.config.json",
-    "test-update": "jest --config=./jest.config.json --updateSnapshot",
+    "test": "jest --config=./jest.config.ts",
+    "test-update": "jest --config=./jest.config.ts --updateSnapshot",
     "format": "prettier --write './{src,playwright}/**/*.{js,jsx,ts,tsx}'",
     "lint": "eslint ./src ./playwright",
     "build": "node ./scripts/build.js",
@@ -90,7 +90,7 @@
     "@storybook/theming": "^8.2.6",
     "@storybook/types": "^8.2.6",
     "@testing-library/dom": "^9.0.0",
-    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/jest-dom": "^6.5.0",
     "@testing-library/react": "^12.1.5",
     "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/user-event": "^14.5.1",
@@ -99,7 +99,7 @@
     "@types/enzyme": "3.10.13",
     "@types/glob": "^8.1.0",
     "@types/invariant": "^2.2.37",
-    "@types/jest": "^27.5.0",
+    "@types/jest": "^29.5.0",
     "@types/lodash": "^4.14.202",
     "@types/node": "^20.9.0",
     "@types/react": "^17.0.59",
@@ -149,11 +149,12 @@
     "file-loader": "^6.2.0",
     "fs-extra": "^10.1.0",
     "husky": "^8.0.3",
-    "jest": "^27.5.1",
+    "jest": "^29.5.0",
     "jest-canvas-mock": "^2.5.2",
-    "jest-environment-jsdom": "^27.5.1",
+    "jest-environment-jsdom": "^29.5.0",
     "jest-fetch-mock": "^3.0.3",
     "jest-styled-components": "^6.3.4",
+    "jsdom": "^21.1.0",
     "jsdom-testing-mocks": "^1.11.0",
     "lint-staged": "^11.2.6",
     "mockdate": "^2.0.5",
@@ -205,7 +206,8 @@
   },
   "overrides": {
     "playwright-core": "$@playwright/experimental-ct-react17",
-    "@testing-library/dom": "$@testing-library/dom"
+    "@testing-library/dom": "$@testing-library/dom",
+    "jsdom": "$jsdom"
   },
   "config": {
     "commitizen": {