carbon-react 110.10.0 → 110.10.1

package/esm/components/advanced-color-picker/advanced-color-picker.style.js

@@ -3,7 +3,7 @@ import { margin } from "styled-system";
 import StyledAdvancedColorPickerCell from "./advanced-color-picker-cell.style";
 import { StyledColorOptions } from "../simple-color-picker/simple-color-picker.style";
 import StyledSimpleColor from "../simple-color-picker/simple-color/simple-color.style";
-import { DialogContentStyle, DialogInnerContentStyle } from "../dialog/dialog.style";
+import { StyledDialogContent, StyledDialogInnerContent } from "../dialog/dialog.style";
 import Dialog from "../dialog/dialog.component";
 import StyledIconButton from "../icon-button/icon-button.style";
 import checkerBoardSvg from "../simple-color-picker/color-sample-box/checker-board.svg";
@@ -40,11 +40,11 @@ const StyledAdvancedColorPickerPreview = styled.div`
   }
 `;
 const DialogStyle = styled(Dialog)`
-  ${DialogContentStyle} {
+  ${StyledDialogContent} {
     padding: var(--spacing200);
   }
 
-  ${DialogInnerContentStyle} {
+  ${StyledDialogInnerContent} {
     padding: 0;
   }
 

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

@@ -1,17 +1,18 @@
 function _extends() { _extends = Object.assign || 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, useLayoutEffect, useCallback } from "react";
+import React, { useCallback, useEffect, useLayoutEffect, useRef } from "react";
 import PropTypes from "prop-types";
 import createGuid from "../../__internal__/utils/helpers/guid";
 import Modal from "../modal";
 import Heading from "../heading";
 import useResizeObserver from "../../hooks/__internal__/useResizeObserver";
-import { DialogStyle, DialogTitleStyle, DialogContentStyle, DialogInnerContentStyle } from "./dialog.style";
+import { StyledDialog, StyledDialogTitle, StyledDialogContent, StyledDialogInnerContent } from "./dialog.style";
 import FocusTrap from "../../__internal__/focus-trap";
 import IconButton from "../icon-button";
 import Icon from "../icon";
 import { TOP_MARGIN } from "./dialog.config";
 import useLocale from "../../hooks/__internal__/useLocale";
+import useIsStickyFooterForm from "../../hooks/__internal__/useIsStickyFooterForm";
 
 const Dialog = ({
   className,
@@ -45,6 +46,7 @@ const Dialog = ({
   const {
     current: subtitleId
   } = useRef(createGuid());
+  const hasStickyFooter = useIsStickyFooterForm(children);
   const centerDialog = useCallback(() => {
     /* istanbul ignore if */
     if (!dialogRef.current) {
@@ -118,7 +120,7 @@ const Dialog = ({
 
   const dialogTitle = () => {
     if (!title) return null;
-    return /*#__PURE__*/React.createElement(DialogTitleStyle, {
+    return /*#__PURE__*/React.createElement(StyledDialogTitle, {
       showCloseIcon: showCloseIcon,
       hasSubtitle: !!subtitle,
       ref: titleRef
@@ -164,7 +166,7 @@ const Dialog = ({
     wrapperRef: dialogRef,
     isOpen: open,
     additionalWrapperRefs: focusableContainers
-  }, /*#__PURE__*/React.createElement(DialogStyle, _extends({
+  }, /*#__PURE__*/React.createElement(StyledDialog, _extends({
     "aria-modal": true,
     ref: dialogRef,
     topMargin: TOP_MARGIN
@@ -173,7 +175,9 @@ const Dialog = ({
     "data-element": "dialog",
     "data-role": rest["data-role"],
     role: role
-  }, contentPadding), dialogTitle(), closeIcon(), /*#__PURE__*/React.createElement(DialogContentStyle, contentPadding, /*#__PURE__*/React.createElement(DialogInnerContentStyle, _extends({
+  }, contentPadding), dialogTitle(), closeIcon(), /*#__PURE__*/React.createElement(StyledDialogContent, _extends({}, contentPadding, {
+    hasStickyFooter: hasStickyFooter
+  }), /*#__PURE__*/React.createElement(StyledDialogInnerContent, _extends({
     ref: innerContentRef
   }, contentPadding), children)))));
 };

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

@@ -9,17 +9,19 @@ declare const dialogSizes: {
     large: string;
     "extra-large": string;
 };
-declare type DialogStyleProps = {
+declare type StyledDialogProps = {
     topMargin: number;
     size?: keyof typeof dialogSizes;
     dialogHeight?: string;
 };
-declare const DialogStyle: import("styled-components").StyledComponent<"div", any, DialogStyleProps & ContentPaddingInterface, never>;
-declare type DialogTitleStyleProps = {
+declare const StyledDialog: import("styled-components").StyledComponent<"div", any, StyledDialogProps & ContentPaddingInterface, never>;
+declare type StyledDialogTitleProps = {
     showCloseIcon?: boolean;
     hasSubtitle?: boolean;
 };
-declare const DialogTitleStyle: import("styled-components").StyledComponent<"div", any, DialogTitleStyleProps, never>;
-declare const DialogContentStyle: import("styled-components").StyledComponent<"div", any, ContentPaddingInterface, never>;
-declare const DialogInnerContentStyle: import("styled-components").StyledComponent<"div", any, ContentPaddingInterface, never>;
-export { DialogStyle, DialogTitleStyle, DialogContentStyle, DialogInnerContentStyle, };
+declare const StyledDialogTitle: import("styled-components").StyledComponent<"div", any, StyledDialogTitleProps, never>;
+declare const StyledDialogContent: import("styled-components").StyledComponent<"div", any, ContentPaddingInterface & {
+    hasStickyFooter: boolean;
+}, never>;
+declare const StyledDialogInnerContent: import("styled-components").StyledComponent<"div", any, ContentPaddingInterface, never>;
+export { StyledDialog, StyledDialogTitle, StyledDialogContent, StyledDialogInnerContent, };

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

@@ -63,7 +63,7 @@ const calculatePaddingTopInnerContent = ({
   p
 }) => [py, p].some(padding => padding !== undefined) ? 0 : `${CONTENT_TOP_PADDING}px`;
 
-const DialogStyle = styled.div`
+const StyledDialog = styled.div`
   background-color: var(--colorsUtilityMajor025);
   box-shadow: var(--boxShadow300);
   display: flex;
@@ -85,12 +85,6 @@ const DialogStyle = styled.div`
   size
 }) => size && css`
       width: ${dialogSizes[size]};
-
-      // IE10+ fix (caters for scrollbar width)
-      @media screen and (-ms-high-contrast: active),
-        screen and (-ms-high-contrast: none) {
-        width: $size - 16;
-      }
     `}
 
   ${({
@@ -125,7 +119,7 @@ const DialogStyle = styled.div`
     }
   }
 `;
-const DialogTitleStyle = styled.div`
+const StyledDialogTitle = styled.div`
   padding: 23px ${HORIZONTAL_PADDING}px 0;
   border-bottom: 1px solid #ccd6db;
   ${({
@@ -150,25 +144,29 @@ const DialogTitleStyle = styled.div`
     }
   }
 `;
-const DialogContentStyle = styled.div`
+const StyledDialogContent = styled.div`
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
-  overflow-y: auto;
+  ${({
+  hasStickyFooter
+}) => !hasStickyFooter && css`
+      overflow-y: auto;
+    `}
   width: 100%;
   flex: 1;
   padding: 0px ${HORIZONTAL_PADDING}px ${CONTENT_BOTTOM_PADDING}px;
   ${paddingFn}
 `;
-const DialogInnerContentStyle = styled.div`
+const StyledDialogInnerContent = styled.div`
   position: relative;
   flex: 1;
   padding-top: ${calculatePaddingTopInnerContent};
 `;
-DialogStyle.defaultProps = {
+StyledDialog.defaultProps = {
   theme: baseTheme
 };
-DialogContentStyle.defaultProps = {
+StyledDialogContent.defaultProps = {
   theme: baseTheme
 };
-export { DialogStyle, DialogTitleStyle, DialogContentStyle, DialogInnerContentStyle };
+export { StyledDialog, StyledDialogTitle, StyledDialogContent, StyledDialogInnerContent };

package/esm/components/dialog-full-screen/content.style.js

@@ -1,7 +1,11 @@
 import styled, { css } from "styled-components";
 import { StyledFormFooter, StyledFormContent } from "../form/form.style";
 const StyledContent = styled.div`
-  overflow-y: auto;
+  ${({
+  hasStickyFooter
+}) => !hasStickyFooter && css`
+      overflow-y: auto;
+    `}
   padding: 0 16px;
   flex: 1;
 

package/esm/components/dialog-full-screen/dialog-full-screen.component.js

@@ -12,6 +12,7 @@ import FocusTrap from "../../__internal__/focus-trap";
 import IconButton from "../icon-button";
 import Icon from "../icon";
 import useLocale from "../../hooks/__internal__/useLocale";
+import useIsStickyFooterForm from "../../hooks/__internal__/useIsStickyFooterForm";
 
 const DialogFullScreen = ({
   "aria-describedby": ariaDescribedBy,
@@ -44,6 +45,7 @@ const DialogFullScreen = ({
   const {
     current: subtitleId
   } = useRef(createGuid());
+  const hasStickyFooter = useIsStickyFooterForm(children);
 
   const closeIcon = () => {
     if (!showCloseIcon || !onCancel) return null;
@@ -57,7 +59,7 @@ const DialogFullScreen = ({
   };
 
   const dialogTitle = () => /*#__PURE__*/React.createElement(FullScreenHeading, {
-    hasContent: title,
+    hasContent: !!title,
     ref: headingRef
   }, typeof title === "string" ? /*#__PURE__*/React.createElement(Heading, {
     "data-element": "dialog-title",
@@ -100,7 +102,8 @@ const DialogFullScreen = ({
     hasHeader: title !== undefined,
     "data-element": "content",
     ref: contentRef,
-    disableContentPadding: disableContentPadding
+    disableContentPadding: disableContentPadding,
+    hasStickyFooter: hasStickyFooter
   }, children))));
 };
 

package/esm/components/form/__internal__/form-summary.component.d.ts

@@ -0,0 +1,14 @@
+export default FormSummary;
+declare function FormSummary({ fullWidth, ...props }: {
+    [x: string]: any;
+    fullWidth: any;
+}): JSX.Element;
+declare namespace FormSummary {
+    namespace propTypes {
+        const children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        const errors: PropTypes.Requireable<number>;
+        const warnings: PropTypes.Requireable<number>;
+        const fullWidth: PropTypes.Requireable<boolean>;
+    }
+}
+import PropTypes from "prop-types";

package/esm/components/form/__internal__/form-summary.style.d.ts

@@ -0,0 +1,3 @@
+export const StyledFormSummary: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const StyledMessagePrefix: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const StyledInternalSummary: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -0,0 +1,21 @@
+export default Form;
+declare function Form({ children, saveButton, leftSideButtons, rightSideButtons, errorCount, warningCount, onSubmit, buttonAlignment, stickyFooter, fieldSpacing, noValidate, height, fullWidthButtons, ...rest }: {
+    [x: string]: any;
+    children: any;
+    saveButton: any;
+    leftSideButtons: any;
+    rightSideButtons: any;
+    errorCount: any;
+    warningCount: any;
+    onSubmit: any;
+    buttonAlignment?: string | undefined;
+    stickyFooter: any;
+    fieldSpacing?: number | undefined;
+    noValidate?: boolean | undefined;
+    height: any;
+    fullWidthButtons?: boolean | undefined;
+}): JSX.Element;
+declare namespace Form {
+    const propTypes: any;
+    const displayName: string;
+}

package/esm/components/form/form.component.js

@@ -3,8 +3,8 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 import React, { useRef, useContext } from "react";
 import PropTypes from "prop-types";
 import styledSystemPropTypes from "@styled-system/prop-types";
-import { ModalContext } from "../modal/modal.component";
 import { SidebarContext } from "../sidebar/sidebar.component";
+import { ModalContext } from "../modal/modal.component";
 import FormSummary from "./__internal__/form-summary.component";
 import { StyledForm, StyledFormContent, StyledFormFooter, StyledLeftButtons, StyledRightButtons, StyledFullWidthButtons } from "./form.style";
 
@@ -41,7 +41,8 @@ const Form = ({
     fieldSpacing: fieldSpacing,
     noValidate: noValidate,
     isInSidebar: isInSidebar,
-    height: height
+    height: height,
+    isInModal: isInModal
   }, rest), /*#__PURE__*/React.createElement(StyledFormContent, {
     "data-element": "form-content",
     className: stickyFooter ? "sticky" : "",
@@ -52,7 +53,8 @@ const Form = ({
     className: stickyFooter ? "sticky" : "",
     ref: formFooterRef,
     stickyFooter: stickyFooter,
-    buttonAlignment: buttonAlignment
+    buttonAlignment: buttonAlignment,
+    isInModal: isInModal
   }, leftSideButtons && /*#__PURE__*/React.createElement(StyledLeftButtons, {
     buttonAlignment: buttonAlignment
   }, leftSideButtons), /*#__PURE__*/React.createElement(FormSummary, {
@@ -119,4 +121,5 @@ Form.propTypes = { ...styledSystemPropTypes.space,
   /** Applies styling for full width buttons. Please note that you will still need to pass the `fullWidth` prop to the button you compose */
   fullWidthButtons: PropTypes.bool
 };
+Form.displayName = "Form";
 export default Form;

package/esm/components/form/form.style.js

@@ -16,7 +16,7 @@ export const StyledFormContent = styled.div`
   isInModal
 }) => css`
     ${stickyFooter && css`
-      overflow-y: ${isInModal ? "visible" : "inherit"};
+      overflow-y: ${isInModal ? "auto" : "inherit"};
       flex: 1;
     `}
   `}
@@ -33,7 +33,8 @@ export const StyledFormFooter = styled.div`
 
   ${({
   stickyFooter,
-  fullWidthButtons
+  fullWidthButtons,
+  isInModal
 }) => css`
     ${!stickyFooter && css`
       margin-top: 48px;
@@ -46,7 +47,9 @@ export const StyledFormFooter = styled.div`
       padding: 16px 32px;
       width: 100%;
       z-index: 1000;
-      position: sticky;
+      ${!isInModal && css`
+        position: sticky;
+      `}
       bottom: 0;
     `}
 
@@ -65,8 +68,10 @@ const formBottomMargins = fieldSpacing => ({
   4: "var(--spacing400)",
   5: "var(--spacing500)",
   7: "var(--spacing700)"
-})[fieldSpacing];
+})[fieldSpacing]; // Accounts for height of the header of Modal parent, the height form footer and some additional spacing
 
+
+const HEIGHT_SPACING = 216;
 export const StyledForm = styled.form`
   ${space}
 
@@ -109,12 +114,17 @@ export const StyledForm = styled.form`
 
   ${({
   stickyFooter,
+  isInModal,
   isInSidebar
 }) => stickyFooter && css`
       display: flex;
       flex-direction: column;
       position: relative;
 
+      ${isInModal && css`
+        max-height: calc(100vh - ${HEIGHT_SPACING}px);
+      `}
+
       ${isInSidebar && css`
         min-height: 100%;
         ${StyledFormContent}.sticky {

package/esm/components/sidebar/sidebar.component.js

@@ -12,6 +12,7 @@ import Box from "../box";
 import createGuid from "../../__internal__/utils/helpers/guid";
 import useLocale from "../../hooks/__internal__/useLocale";
 import { filterStyledSystemPaddingProps } from "../../style/utils";
+import useIsStickyFooterForm from "../../hooks/__internal__/useIsStickyFooterForm";
 export const SidebarContext = /*#__PURE__*/React.createContext({});
 const Sidebar = /*#__PURE__*/React.forwardRef(({
   "aria-describedby": ariaDescribedBy,
@@ -33,6 +34,7 @@ const Sidebar = /*#__PURE__*/React.forwardRef(({
   const {
     current: titleId
   } = useRef(createGuid());
+  const hasStickyFooter = useIsStickyFooterForm(children);
   const sidebarRef = useRef(null);
   const setRefs = useCallback(reference => {
     sidebarRef.current = reference;
@@ -77,7 +79,7 @@ const Sidebar = /*#__PURE__*/React.forwardRef(({
     px: "var(--spacing400)"
   }, filterStyledSystemPaddingProps(rest), {
     scrollVariant: "light",
-    overflow: "auto",
+    overflow: hasStickyFooter ? undefined : "auto",
     flex: "1"
   }), /*#__PURE__*/React.createElement(SidebarContext.Provider, {
     value: {

package/esm/hooks/__internal__/useIsStickyFooterForm/index.d.ts

@@ -0,0 +1 @@
+export { default } from "./useIsStickyFooterForm";

package/esm/hooks/__internal__/useIsStickyFooterForm/index.js

@@ -0,0 +1 @@
+export { default } from "./useIsStickyFooterForm";

package/esm/hooks/__internal__/useIsStickyFooterForm/useIsStickyFooterForm.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+declare const _default: (children?: React.ReactNode) => boolean;
+export default _default;

package/esm/hooks/__internal__/useIsStickyFooterForm/useIsStickyFooterForm.js

@@ -0,0 +1,10 @@
+import React, { useMemo } from "react";
+import Form from "../../../components/form/form.component";
+export default (children => {
+  const isStickyFooterForm = useMemo(() => React.Children.toArray(children).some(child => {
+    var _child$type;
+
+    return /*#__PURE__*/React.isValidElement(child) && ((_child$type = child.type) === null || _child$type === void 0 ? void 0 : _child$type.displayName) === Form.displayName && child.props.stickyFooter;
+  }), [children]);
+  return isStickyFooterForm;
+});

package/lib/components/advanced-color-picker/advanced-color-picker.style.js

@@ -71,11 +71,11 @@ const StyledAdvancedColorPickerPreview = _styledComponents.default.div`
 `;
 exports.StyledAdvancedColorPickerPreview = StyledAdvancedColorPickerPreview;
 const DialogStyle = (0, _styledComponents.default)(_dialog2.default)`
-  ${_dialog.DialogContentStyle} {
+  ${_dialog.StyledDialogContent} {
     padding: var(--spacing200);
   }
 
-  ${_dialog.DialogInnerContentStyle} {
+  ${_dialog.StyledDialogInnerContent} {
     padding: 0;
   }
 

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

@@ -29,6 +29,8 @@ var _dialog2 = require("./dialog.config");
 
 var _useLocale = _interopRequireDefault(require("../../hooks/__internal__/useLocale"));
 
+var _useIsStickyFooterForm = _interopRequireDefault(require("../../hooks/__internal__/useIsStickyFooterForm"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
@@ -69,6 +71,7 @@ const Dialog = ({
   const {
     current: subtitleId
   } = (0, _react.useRef)((0, _guid.default)());
+  const hasStickyFooter = (0, _useIsStickyFooterForm.default)(children);
   const centerDialog = (0, _react.useCallback)(() => {
     /* istanbul ignore if */
     if (!dialogRef.current) {
@@ -142,7 +145,7 @@ const Dialog = ({
 
   const dialogTitle = () => {
     if (!title) return null;
-    return /*#__PURE__*/_react.default.createElement(_dialog.DialogTitleStyle, {
+    return /*#__PURE__*/_react.default.createElement(_dialog.StyledDialogTitle, {
       showCloseIcon: showCloseIcon,
       hasSubtitle: !!subtitle,
       ref: titleRef
@@ -188,7 +191,7 @@ const Dialog = ({
     wrapperRef: dialogRef,
     isOpen: open,
     additionalWrapperRefs: focusableContainers
-  }, /*#__PURE__*/_react.default.createElement(_dialog.DialogStyle, _extends({
+  }, /*#__PURE__*/_react.default.createElement(_dialog.StyledDialog, _extends({
     "aria-modal": true,
     ref: dialogRef,
     topMargin: _dialog2.TOP_MARGIN
@@ -197,7 +200,9 @@ const Dialog = ({
     "data-element": "dialog",
     "data-role": rest["data-role"],
     role: role
-  }, contentPadding), dialogTitle(), closeIcon(), /*#__PURE__*/_react.default.createElement(_dialog.DialogContentStyle, contentPadding, /*#__PURE__*/_react.default.createElement(_dialog.DialogInnerContentStyle, _extends({
+  }, contentPadding), dialogTitle(), closeIcon(), /*#__PURE__*/_react.default.createElement(_dialog.StyledDialogContent, _extends({}, contentPadding, {
+    hasStickyFooter: hasStickyFooter
+  }), /*#__PURE__*/_react.default.createElement(_dialog.StyledDialogInnerContent, _extends({
     ref: innerContentRef
   }, contentPadding), children)))));
 };

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

@@ -9,17 +9,19 @@ declare const dialogSizes: {
     large: string;
     "extra-large": string;
 };
-declare type DialogStyleProps = {
+declare type StyledDialogProps = {
     topMargin: number;
     size?: keyof typeof dialogSizes;
     dialogHeight?: string;
 };
-declare const DialogStyle: import("styled-components").StyledComponent<"div", any, DialogStyleProps & ContentPaddingInterface, never>;
-declare type DialogTitleStyleProps = {
+declare const StyledDialog: import("styled-components").StyledComponent<"div", any, StyledDialogProps & ContentPaddingInterface, never>;
+declare type StyledDialogTitleProps = {
     showCloseIcon?: boolean;
     hasSubtitle?: boolean;
 };
-declare const DialogTitleStyle: import("styled-components").StyledComponent<"div", any, DialogTitleStyleProps, never>;
-declare const DialogContentStyle: import("styled-components").StyledComponent<"div", any, ContentPaddingInterface, never>;
-declare const DialogInnerContentStyle: import("styled-components").StyledComponent<"div", any, ContentPaddingInterface, never>;
-export { DialogStyle, DialogTitleStyle, DialogContentStyle, DialogInnerContentStyle, };
+declare const StyledDialogTitle: import("styled-components").StyledComponent<"div", any, StyledDialogTitleProps, never>;
+declare const StyledDialogContent: import("styled-components").StyledComponent<"div", any, ContentPaddingInterface & {
+    hasStickyFooter: boolean;
+}, never>;
+declare const StyledDialogInnerContent: import("styled-components").StyledComponent<"div", any, ContentPaddingInterface, never>;
+export { StyledDialog, StyledDialogTitle, StyledDialogContent, StyledDialogInnerContent, };

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.DialogInnerContentStyle = exports.DialogContentStyle = exports.DialogTitleStyle = exports.DialogStyle = void 0;
+exports.StyledDialogInnerContent = exports.StyledDialogContent = exports.StyledDialogTitle = exports.StyledDialog = void 0;
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
@@ -83,7 +83,7 @@ const calculatePaddingTopInnerContent = ({
   p
 }) => [py, p].some(padding => padding !== undefined) ? 0 : `${_dialog.CONTENT_TOP_PADDING}px`;
 
-const DialogStyle = _styledComponents.default.div`
+const StyledDialog = _styledComponents.default.div`
   background-color: var(--colorsUtilityMajor025);
   box-shadow: var(--boxShadow300);
   display: flex;
@@ -105,12 +105,6 @@ const DialogStyle = _styledComponents.default.div`
   size
 }) => size && (0, _styledComponents.css)`
       width: ${dialogSizes[size]};
-
-      // IE10+ fix (caters for scrollbar width)
-      @media screen and (-ms-high-contrast: active),
-        screen and (-ms-high-contrast: none) {
-        width: $size - 16;
-      }
     `}
 
   ${({
@@ -145,8 +139,8 @@ const DialogStyle = _styledComponents.default.div`
     }
   }
 `;
-exports.DialogStyle = DialogStyle;
-const DialogTitleStyle = _styledComponents.default.div`
+exports.StyledDialog = StyledDialog;
+const StyledDialogTitle = _styledComponents.default.div`
   padding: 23px ${_dialog.HORIZONTAL_PADDING}px 0;
   border-bottom: 1px solid #ccd6db;
   ${({
@@ -171,27 +165,31 @@ const DialogTitleStyle = _styledComponents.default.div`
     }
   }
 `;
-exports.DialogTitleStyle = DialogTitleStyle;
-const DialogContentStyle = _styledComponents.default.div`
+exports.StyledDialogTitle = StyledDialogTitle;
+const StyledDialogContent = _styledComponents.default.div`
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
-  overflow-y: auto;
+  ${({
+  hasStickyFooter
+}) => !hasStickyFooter && (0, _styledComponents.css)`
+      overflow-y: auto;
+    `}
   width: 100%;
   flex: 1;
   padding: 0px ${_dialog.HORIZONTAL_PADDING}px ${_dialog.CONTENT_BOTTOM_PADDING}px;
   ${_styledSystem.padding}
 `;
-exports.DialogContentStyle = DialogContentStyle;
-const DialogInnerContentStyle = _styledComponents.default.div`
+exports.StyledDialogContent = StyledDialogContent;
+const StyledDialogInnerContent = _styledComponents.default.div`
   position: relative;
   flex: 1;
   padding-top: ${calculatePaddingTopInnerContent};
 `;
-exports.DialogInnerContentStyle = DialogInnerContentStyle;
-DialogStyle.defaultProps = {
+exports.StyledDialogInnerContent = StyledDialogInnerContent;
+StyledDialog.defaultProps = {
   theme: _base.default
 };
-DialogContentStyle.defaultProps = {
+StyledDialogContent.defaultProps = {
   theme: _base.default
 };

package/lib/components/dialog-full-screen/content.style.js

@@ -14,7 +14,11 @@ function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (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; }
 
 const StyledContent = _styledComponents.default.div`
-  overflow-y: auto;
+  ${({
+  hasStickyFooter
+}) => !hasStickyFooter && (0, _styledComponents.css)`
+      overflow-y: auto;
+    `}
   padding: 0 16px;
   flex: 1;
 

package/lib/components/dialog-full-screen/dialog-full-screen.component.js

@@ -29,6 +29,8 @@ var _icon = _interopRequireDefault(require("../icon"));
 
 var _useLocale = _interopRequireDefault(require("../../hooks/__internal__/useLocale"));
 
+var _useIsStickyFooterForm = _interopRequireDefault(require("../../hooks/__internal__/useIsStickyFooterForm"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
@@ -68,6 +70,7 @@ const DialogFullScreen = ({
   const {
     current: subtitleId
   } = (0, _react.useRef)((0, _guid.default)());
+  const hasStickyFooter = (0, _useIsStickyFooterForm.default)(children);
 
   const closeIcon = () => {
     if (!showCloseIcon || !onCancel) return null;
@@ -81,7 +84,7 @@ const DialogFullScreen = ({
   };
 
   const dialogTitle = () => /*#__PURE__*/_react.default.createElement(_fullScreenHeading.default, {
-    hasContent: title,
+    hasContent: !!title,
     ref: headingRef
   }, typeof title === "string" ? /*#__PURE__*/_react.default.createElement(_heading.default, {
     "data-element": "dialog-title",
@@ -124,7 +127,8 @@ const DialogFullScreen = ({
     hasHeader: title !== undefined,
     "data-element": "content",
     ref: contentRef,
-    disableContentPadding: disableContentPadding
+    disableContentPadding: disableContentPadding,
+    hasStickyFooter: hasStickyFooter
   }, children))));
 };
 

package/lib/components/form/__internal__/form-summary.component.d.ts

@@ -0,0 +1,14 @@
+export default FormSummary;
+declare function FormSummary({ fullWidth, ...props }: {
+    [x: string]: any;
+    fullWidth: any;
+}): JSX.Element;
+declare namespace FormSummary {
+    namespace propTypes {
+        const children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        const errors: PropTypes.Requireable<number>;
+        const warnings: PropTypes.Requireable<number>;
+        const fullWidth: PropTypes.Requireable<boolean>;
+    }
+}
+import PropTypes from "prop-types";

package/lib/components/form/__internal__/form-summary.style.d.ts

@@ -0,0 +1,3 @@
+export const StyledFormSummary: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const StyledMessagePrefix: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const StyledInternalSummary: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -0,0 +1,21 @@
+export default Form;
+declare function Form({ children, saveButton, leftSideButtons, rightSideButtons, errorCount, warningCount, onSubmit, buttonAlignment, stickyFooter, fieldSpacing, noValidate, height, fullWidthButtons, ...rest }: {
+    [x: string]: any;
+    children: any;
+    saveButton: any;
+    leftSideButtons: any;
+    rightSideButtons: any;
+    errorCount: any;
+    warningCount: any;
+    onSubmit: any;
+    buttonAlignment?: string | undefined;
+    stickyFooter: any;
+    fieldSpacing?: number | undefined;
+    noValidate?: boolean | undefined;
+    height: any;
+    fullWidthButtons?: boolean | undefined;
+}): JSX.Element;
+declare namespace Form {
+    const propTypes: any;
+    const displayName: string;
+}

package/lib/components/form/form.component.js

@@ -11,10 +11,10 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _propTypes2 = _interopRequireDefault(require("@styled-system/prop-types"));
 
-var _modal = require("../modal/modal.component");
-
 var _sidebar = require("../sidebar/sidebar.component");
 
+var _modal = require("../modal/modal.component");
+
 var _formSummary = _interopRequireDefault(require("./__internal__/form-summary.component"));
 
 var _form = require("./form.style");
@@ -60,7 +60,8 @@ const Form = ({
     fieldSpacing: fieldSpacing,
     noValidate: noValidate,
     isInSidebar: isInSidebar,
-    height: height
+    height: height,
+    isInModal: isInModal
   }, rest), /*#__PURE__*/_react.default.createElement(_form.StyledFormContent, {
     "data-element": "form-content",
     className: stickyFooter ? "sticky" : "",
@@ -71,7 +72,8 @@ const Form = ({
     className: stickyFooter ? "sticky" : "",
     ref: formFooterRef,
     stickyFooter: stickyFooter,
-    buttonAlignment: buttonAlignment
+    buttonAlignment: buttonAlignment,
+    isInModal: isInModal
   }, leftSideButtons && /*#__PURE__*/_react.default.createElement(_form.StyledLeftButtons, {
     buttonAlignment: buttonAlignment
   }, leftSideButtons), /*#__PURE__*/_react.default.createElement(_formSummary.default, {
@@ -138,5 +140,6 @@ Form.propTypes = { ..._propTypes2.default.space,
   /** Applies styling for full width buttons. Please note that you will still need to pass the `fullWidth` prop to the button you compose */
   fullWidthButtons: _propTypes.default.bool
 };
+Form.displayName = "Form";
 var _default = Form;
 exports.default = _default;

package/lib/components/form/form.style.js

@@ -41,7 +41,7 @@ const StyledFormContent = _styledComponents.default.div`
   isInModal
 }) => (0, _styledComponents.css)`
     ${stickyFooter && (0, _styledComponents.css)`
-      overflow-y: ${isInModal ? "visible" : "inherit"};
+      overflow-y: ${isInModal ? "auto" : "inherit"};
       flex: 1;
     `}
   `}
@@ -59,7 +59,8 @@ const StyledFormFooter = _styledComponents.default.div`
 
   ${({
   stickyFooter,
-  fullWidthButtons
+  fullWidthButtons,
+  isInModal
 }) => (0, _styledComponents.css)`
     ${!stickyFooter && (0, _styledComponents.css)`
       margin-top: 48px;
@@ -72,7 +73,9 @@ const StyledFormFooter = _styledComponents.default.div`
       padding: 16px 32px;
       width: 100%;
       z-index: 1000;
-      position: sticky;
+      ${!isInModal && (0, _styledComponents.css)`
+        position: sticky;
+      `}
       bottom: 0;
     `}
 
@@ -92,8 +95,10 @@ const formBottomMargins = fieldSpacing => ({
   4: "var(--spacing400)",
   5: "var(--spacing500)",
   7: "var(--spacing700)"
-})[fieldSpacing];
+})[fieldSpacing]; // Accounts for height of the header of Modal parent, the height form footer and some additional spacing
 
+
+const HEIGHT_SPACING = 216;
 const StyledForm = _styledComponents.default.form`
   ${_styledSystem.space}
 
@@ -136,12 +141,17 @@ const StyledForm = _styledComponents.default.form`
 
   ${({
   stickyFooter,
+  isInModal,
   isInSidebar
 }) => stickyFooter && (0, _styledComponents.css)`
       display: flex;
       flex-direction: column;
       position: relative;
 
+      ${isInModal && (0, _styledComponents.css)`
+        max-height: calc(100vh - ${HEIGHT_SPACING}px);
+      `}
+
       ${isInSidebar && (0, _styledComponents.css)`
         min-height: 100%;
         ${StyledFormContent}.sticky {

package/lib/components/sidebar/sidebar.component.js

@@ -29,6 +29,8 @@ var _useLocale = _interopRequireDefault(require("../../hooks/__internal__/useLoc
 
 var _utils = require("../../style/utils");
 
+var _useIsStickyFooterForm = _interopRequireDefault(require("../../hooks/__internal__/useIsStickyFooterForm"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
@@ -61,6 +63,7 @@ const Sidebar = /*#__PURE__*/_react.default.forwardRef(({
   const {
     current: titleId
   } = (0, _react.useRef)((0, _guid.default)());
+  const hasStickyFooter = (0, _useIsStickyFooterForm.default)(children);
   const sidebarRef = (0, _react.useRef)(null);
   const setRefs = (0, _react.useCallback)(reference => {
     sidebarRef.current = reference;
@@ -106,7 +109,7 @@ const Sidebar = /*#__PURE__*/_react.default.forwardRef(({
     px: "var(--spacing400)"
   }, (0, _utils.filterStyledSystemPaddingProps)(rest), {
     scrollVariant: "light",
-    overflow: "auto",
+    overflow: hasStickyFooter ? undefined : "auto",
     flex: "1"
   }), /*#__PURE__*/_react.default.createElement(SidebarContext.Provider, {
     value: {

package/lib/hooks/__internal__/useIsStickyFooterForm/index.d.ts

@@ -0,0 +1 @@
+export { default } from "./useIsStickyFooterForm";

package/lib/hooks/__internal__/useIsStickyFooterForm/index.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _useIsStickyFooterForm.default;
+  }
+});
+
+var _useIsStickyFooterForm = _interopRequireDefault(require("./useIsStickyFooterForm"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/hooks/__internal__/useIsStickyFooterForm/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "../../../../esm/hooks/__internal__/useIsStickyFooterForm/index.js",
+  "main": "./index.js",
+  "types": "./index.d.ts"
+}

package/lib/hooks/__internal__/useIsStickyFooterForm/useIsStickyFooterForm.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+declare const _default: (children?: React.ReactNode) => boolean;
+export default _default;

package/lib/hooks/__internal__/useIsStickyFooterForm/useIsStickyFooterForm.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _form = _interopRequireDefault(require("../../../components/form/form.component"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (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; }
+
+var _default = children => {
+  const isStickyFooterForm = (0, _react.useMemo)(() => _react.default.Children.toArray(children).some(child => {
+    var _child$type;
+
+    return /*#__PURE__*/_react.default.isValidElement(child) && ((_child$type = child.type) === null || _child$type === void 0 ? void 0 : _child$type.displayName) === _form.default.displayName && child.props.stickyFooter;
+  }), [children]);
+  return isStickyFooterForm;
+};
+
+exports.default = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "110.10.0",
+  "version": "110.10.1",
   "description": "A library of reusable React components for easily building user interfaces.",
   "files": [
     "lib",
@@ -64,8 +64,6 @@
     "@babel/types": "^7.16.0",
     "@commitlint/cli": "^11.0.0",
     "@commitlint/config-conventional": "^11.0.0",
-    "@cypress/react": "^5.12.0",
-    "@cypress/webpack-dev-server": "^1.8.4",
     "@sage/design-tokens": "^2.41.0",
     "@semantic-release/changelog": "^6.0.1",
     "@semantic-release/exec": "^6.0.2",
@@ -112,7 +110,7 @@
     "core-js": "^3.20.3",
     "cross-env": "^5.2.0",
     "css-loader": "4.0.0",
-    "cypress": "10.7.0",
+    "cypress": "10.8.0",
     "cypress-axe": "^1.0.0",
     "cypress-each": "^1.11.0",
     "cypress-plugin-tab": "^1.0.5",