carbon-react 110.9.1 → 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/carousel/carousel.component.d.ts

@@ -0,0 +1,25 @@
+import React from "react";
+import { TagProps } from "../../__internal__/utils/helpers/tags/tags";
+export interface CarouselProps extends TagProps {
+    /** Individual tabs */
+    children?: React.ReactNode;
+    /** [legacy] Custom className */
+    className?: string;
+    /** Enables the next button */
+    enableNextButton?: boolean;
+    /** Enables the previous button */
+    enablePreviousButton?: boolean;
+    /** Enables the slide selector */
+    enableSlideSelector?: boolean;
+    /** The selected tab on page load */
+    initialSlideIndex?: number | string;
+    /** Action to be called on slide change */
+    onSlideChange?: (index: number, transitionDirection: string) => void;
+    /** The selected slide */
+    slideIndex?: number | string;
+}
+export declare const Carousel: {
+    ({ children, className, enableSlideSelector, enablePreviousButton, enableNextButton, initialSlideIndex, onSlideChange, slideIndex, ...props }: CarouselProps): JSX.Element;
+    displayName: string;
+};
+export default Carousel;

package/esm/components/carousel/carousel.component.js

@@ -2,16 +2,13 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 import React, { useCallback, useEffect, useRef, useState, useMemo } from "react";
 import PropTypes from "prop-types";
-import { compact } from "lodash";
-import { withTheme } from "styled-components";
 import tagComponent from "../../__internal__/utils/helpers/tags/tags";
-import Slide from "./slide/slide.component";
 import { CarouselPreviousButtonWrapperStyle, CarouselNextButtonWrapperStyle, CarouselButtonStyle, CarouselStyledIconRight, CarouselStyledIconLeft, CarouselSelectorWrapperStyle, CarouselSelectorInputWrapperStyle, CarouselSelectorInputStyle, CarouselSelectorLabelStyle, CarouselWrapperStyle, CarouselSliderWrapper } from "./carousel.style";
 import guid from "../../__internal__/utils/helpers/guid";
 const NEXT = "next";
 const PREVIOUS = "previous";
 
-const BaseCarousel = ({
+const Carousel = ({
   children,
   className,
   enableSlideSelector = true,
@@ -24,10 +21,10 @@ const BaseCarousel = ({
 }) => {
   const [selectedSlideIndex, setSelectedSlideIndex] = useState(Number(slideIndex) || Number(initialSlideIndex));
   const transitionDirection = useRef(NEXT);
-  const lastSlideIndexProp = useRef(props.slideIndex);
-  const id = guid();
+  const lastSlideIndexProp = useRef(slideIndex);
+  const id = useMemo(() => guid(), []);
   const numOfSlides = useMemo(() => {
-    return Array.isArray(children) ? compact(children).length : 1;
+    return React.Children.toArray(children).filter(child => /*#__PURE__*/React.isValidElement(child)).length;
   }, [children]);
   const handleSlideChange = useCallback(newIndex => {
     setSelectedSlideIndex(newIndex);
@@ -133,32 +130,19 @@ const BaseCarousel = ({
   }, children), nextButton()), slideSelector());
 };
 
-BaseCarousel.propTypes = {
-  /** [legacy] Custom className */
-  className: PropTypes.string,
-
-  /** The selected tab on page load */
-  initialSlideIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-
-  /** The selected slide */
-  slideIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-
-  /** Individual tabs */
-  children: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
-
-  /** Enables the slide selector */
-  enableSlideSelector: PropTypes.bool,
-
-  /** Enables the previous button */
-  enablePreviousButton: PropTypes.bool,
-
-  /** Enables the next button */
-  enableNextButton: PropTypes.bool,
-
-  /** Action to be called on slide change */
-  onSlideChange: PropTypes.func
+Carousel.propTypes = {
+  "children": PropTypes.node,
+  "className": PropTypes.string,
+  "data-component": PropTypes.string,
+  "data-element": PropTypes.string,
+  "data-role": PropTypes.string,
+  "enableNextButton": PropTypes.bool,
+  "enablePreviousButton": PropTypes.bool,
+  "enableSlideSelector": PropTypes.bool,
+  "initialSlideIndex": PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  "onSlideChange": PropTypes.func,
+  "slideIndex": PropTypes.oneOfType([PropTypes.number, PropTypes.string])
 };
-const Carousel = withTheme(BaseCarousel);
+export { Carousel };
 Carousel.displayName = "Carousel";
-export default BaseCarousel;
-export { Carousel, Slide };
+export default Carousel;

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

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+declare const CarouselNavigationStyle: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare const CarouselPreviousButtonWrapperStyle: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare const CarouselNextButtonWrapperStyle: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare const CarouselStyledIcon: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../icon").IconProps & import("react").RefAttributes<HTMLSpanElement>>, any, {}, never>;
+declare const CarouselStyledIconLeft: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../icon").IconProps & import("react").RefAttributes<HTMLSpanElement>>, any, {}, never>;
+declare const CarouselStyledIconRight: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../icon").IconProps & import("react").RefAttributes<HTMLSpanElement>>, any, {}, never>;
+declare const CarouselButtonStyle: import("styled-components").StyledComponent<"button", any, {
+    type: "button";
+}, "type">;
+declare const CarouselSelectorInputStyle: import("styled-components").StyledComponent<"input", any, {}, never>;
+declare const CarouselSelectorLabelStyle: import("styled-components").StyledComponent<"label", any, {}, never>;
+declare const CarouselSelectorWrapperStyle: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare const CarouselSelectorInputWrapperStyle: import("styled-components").StyledComponent<"span", any, {}, never>;
+interface CarouselSliderWrapperProps {
+    elementIndex: number;
+}
+declare const CarouselSliderWrapper: import("styled-components").StyledComponent<"div", any, CarouselSliderWrapperProps, never>;
+declare const CarouselWrapperStyle: import("styled-components").StyledComponent<"div", any, {}, never>;
+export { CarouselNavigationStyle, CarouselNextButtonWrapperStyle, CarouselPreviousButtonWrapperStyle, CarouselButtonStyle, CarouselStyledIcon, CarouselStyledIconLeft, CarouselStyledIconRight, CarouselSelectorWrapperStyle, CarouselSelectorInputWrapperStyle, CarouselSelectorInputStyle, CarouselSelectorLabelStyle, CarouselWrapperStyle, CarouselSliderWrapper, };

package/esm/components/carousel/index.d.ts

@@ -1 +1,4 @@
-export { Carousel, Slide } from "./carousel";
+export { Carousel } from "./carousel.component";
+export { default as Slide } from "./slide";
+export type { CarouselProps } from "./carousel.component";
+export type { SlideProps } from "./slide";

package/esm/components/carousel/index.js

@@ -1 +1,2 @@
-export { Carousel, Slide } from "./carousel.component";
+export { Carousel } from "./carousel.component";
+export { default as Slide } from "./slide";

package/esm/components/carousel/slide/index.d.ts

@@ -1 +1,2 @@
-export { default } from "./slide";
+export { default } from "./slide.component";
+export type { SlideProps } from "./slide.component";

package/esm/components/carousel/slide/slide.component.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+export interface SlideProps {
+    children?: React.ReactNode;
+    onClick?: (ev: React.MouseEvent<HTMLDivElement>) => void;
+}
+declare const Slide: (props: SlideProps) => JSX.Element;
+export default Slide;

package/esm/components/carousel/slide/slide.component.js

@@ -2,13 +2,14 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 /* eslint-disable react/prop-types */
 import React from "react";
+import PropTypes from "prop-types";
 import tagComponent from "../../../__internal__/utils/helpers/tags/tags";
 import { SlideStyle } from "./slide.style";
-import baseTheme from "../../../style/themes/base";
 
 const Slide = props => /*#__PURE__*/React.createElement(SlideStyle, _extends({}, props, tagComponent("slide", props)));
 
-Slide.defaultProps = {
-  theme: baseTheme
+Slide.propTypes = {
+  "children": PropTypes.node,
+  "onClick": PropTypes.func
 };
 export default Slide;

package/esm/components/carousel/slide/slide.style.d.ts

@@ -0,0 +1,2 @@
+declare const SlideStyle: import("styled-components").StyledComponent<"div", any, {}, never>;
+export { SlideStyle };

package/esm/components/carousel/slide.config.d.ts

@@ -0,0 +1,3 @@
+declare const slideAnimation: import("styled-components").FlattenSimpleInterpolation;
+declare const fadeAnimation: import("styled-components").FlattenSimpleInterpolation;
+export { slideAnimation, fadeAnimation };

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

@@ -53,8 +53,8 @@ Tile.propTypes = {
   /** Styled system spacing props */
   ...propTypes.space,
 
-  /** Sets the theme of the tile - either 'tile' or 'transparent' */
-  variant: PropTypes.oneOf(["tile", "transparent"]),
+  /** Sets the theme of the tile - either 'tile', 'transparent' or 'active' */
+  variant: PropTypes.oneOf(["tile", "transparent", "active"]),
 
   /**
    * The content to render within the tile. Each child will be wrapped with

package/esm/components/tile/tile.config.js

@@ -1,2 +1,2 @@
 export const TILE_ORIENTATIONS = ["horizontal", "vertical"];
-export const TILE_THEMES = ["tile", "transparent"];
+export const TILE_THEMES = ["tile", "transparent", "active"];

package/esm/components/tile/tile.d.ts

@@ -2,8 +2,8 @@ import * as React from "react";
 import { SpaceProps } from "styled-system";
 
 export interface TileProps extends SpaceProps {
-  /** Sets the theme of the tile - either 'tile' or 'transparent' */
-  variant?: "tile" | "transparent";
+  /** Sets the theme of the tile - either 'tile', 'transparent' or 'active' */
+  variant?: "tile" | "transparent" | "active";
   /**
    * The content to render within the tile. Each child will be wrapped with
    * a TileContent wrapper, which allows any individual child component to take a

package/esm/components/tile/tile.style.js

@@ -64,8 +64,21 @@ const StyledTile = styled.div`
     ${space}
 
     box-sizing: border-box;
-    background-color: ${tileTheme === "tile" ? "var(--colorsUtilityYang100)" : "transparent"};
     border: 1px solid var(--colorsUtilityMajor100);
+
+    ${tileTheme === "tile" && css`
+      background-color: var(--colorsUtilityYang100);
+    `}
+
+    ${tileTheme === "transparent" && css`
+      background-color: transparent;
+    `}
+
+    ${tileTheme === "active" && css`
+      background-color: var(--colorsActionMajor025);
+      border-color: var(--colorsActionMajor500);
+    `}
+
     display: flex;
     flex-direction: ${isHorizontal ? "row" : "column"};
     position: relative;

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;
+});