carbon-react 142.7.0 → 142.8.0

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

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