carbon-react 144.0.0 → 144.1.0

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

@@ -4,18 +4,14 @@ import StyledFormField from "../../__internal__/form-field/form-field.style";
 import baseTheme from "../../style/themes/base";
 import StyledSearch from "../search/search.style";
 import StyledTextarea from "../textarea/textarea.style";
-export const StyledFormContent = styled.div`
-  ${({
+export const StyledFormContent = styled.div(({
   stickyFooter,
   isInModal
-}) => css`
-    ${stickyFooter && css`
-      /* Take responsibility for handling overflow away from parent modal */
-      overflow-y: ${isInModal ? "auto" : "inherit"};
-      flex: 1;
-    `}
-  `}
-`;
+}) => stickyFooter && isInModal && css`
+      flex-grow: 1;
+      min-height: 0;
+      overflow-y: auto;
+    `);
 export const StyledFormFooter = styled.div`
   align-items: center;
   display: flex;
@@ -30,8 +26,7 @@ export const StyledFormFooter = styled.div`
 
   ${({
   stickyFooter,
-  fullWidthButtons,
-  isInModal
+  fullWidthButtons
 }) => css`
     ${!stickyFooter && css`
       margin-top: 48px;
@@ -44,9 +39,7 @@ export const StyledFormFooter = styled.div`
       padding: 16px 32px;
       width: 100%;
       z-index: 1000;
-      ${!isInModal && css`
-        position: sticky;
-      `}
+      position: sticky;
       bottom: 0;
     `}
 
@@ -61,9 +54,6 @@ export const StyledFormFooter = styled.div`
 StyledFormFooter.defaultProps = {
   theme: baseTheme
 };
-
-// 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}
 
@@ -80,19 +70,16 @@ export const StyledForm = styled.form`
 
   ${({
   stickyFooter,
-  isInModal,
-  isInSidebar
+  isInModal
 }) => stickyFooter && css`
       display: flex;
       flex-direction: column;
       position: relative;
 
       ${isInModal && css`
-        max-height: calc(100vh - ${HEIGHT_SPACING}px);
-      `}
-
-      ${isInSidebar && css`
-        min-height: 100%;
+        flex-grow: 1;
+        min-height: 0;
+        height: 100%;
       `}
     `}
 `;

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

@@ -1,13 +1,12 @@
 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, { useCallback, useRef, useMemo } from "react";
+import React, { useCallback, useRef } from "react";
 import PropTypes from "prop-types";
 import Modal from "../modal";
-import StyledSidebar from "./sidebar.style";
+import { StyledSidebar, StyledSidebarContent } from "./sidebar.style";
 import IconButton from "../icon-button";
 import Icon from "../icon";
 import FocusTrap from "../../__internal__/focus-trap";
 import SidebarHeader from "./__internal__/sidebar-header";
-import Box from "../box";
 import createGuid from "../../__internal__/utils/helpers/guid";
 import useLocale from "../../hooks/__internal__/useLocale";
 import { filterStyledSystemPaddingProps } from "../../style/utils";
@@ -45,7 +44,6 @@ const Sidebar = /*#__PURE__*/React.forwardRef(({
   const {
     current: headerId
   } = useRef(createGuid());
-  const hasStickyFooter = useMemo(() => React.Children.toArray(children).some(child => /*#__PURE__*/React.isValidElement(child) && child.props.stickyFooter), [children]);
   const sidebarRef = useRef(null);
   const setRefs = useCallback(reference => {
     sidebarRef.current = reference;
@@ -64,7 +62,7 @@ const Sidebar = /*#__PURE__*/React.forwardRef(({
       type: "close"
     }));
   };
-  const sidebar = /*#__PURE__*/React.createElement(StyledSidebar, _extends({
+  const sidebar = /*#__PURE__*/React.createElement(StyledSidebar, {
     "aria-modal": !enableBackgroundUI && isTopModal,
     "aria-describedby": ariaDescribedBy,
     "aria-label": ariaLabel,
@@ -76,24 +74,16 @@ const Sidebar = /*#__PURE__*/React.forwardRef(({
     position: position,
     size: size,
     onCancel: onCancel,
-    role: role
-  }, filterStyledSystemPaddingProps(rest), {
+    role: role,
     width: width
-  }), header && /*#__PURE__*/React.createElement(SidebarHeader, _extends({
+  }, header && /*#__PURE__*/React.createElement(SidebarHeader, _extends({
     closeIcon: closeIcon()
   }, headerPadding, {
     id: headerId
-  }), header), !header && closeIcon(), /*#__PURE__*/React.createElement(Box, _extends({
+  }), header), !header && closeIcon(), /*#__PURE__*/React.createElement(StyledSidebarContent, _extends({
     "data-element": "sidebar-content",
-    "data-role": "sidebar-content",
-    pt: "var(--spacing300)",
-    pb: "var(--spacing400)",
-    px: "var(--spacing400)"
-  }, filterStyledSystemPaddingProps(rest), {
-    scrollVariant: "light",
-    overflow: hasStickyFooter ? undefined : "auto",
-    flex: "1"
-  }), /*#__PURE__*/React.createElement(SidebarContext.Provider, {
+    "data-role": "sidebar-content"
+  }, filterStyledSystemPaddingProps(rest)), /*#__PURE__*/React.createElement(SidebarContext.Provider, {
     value: {
       isInSidebar: true
     }

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

@@ -9,7 +9,3 @@ export declare const SIDEBAR_SIZES_CSS: {
 };
 export declare const SIDEBAR_SIZES: string[];
 export declare const SIDEBAR_ALIGNMENTS: string[];
-export declare const SIDEBAR_TOP_SPACING = "27px";
-export declare const SIDEBAR_BOTTOM_SPACING = "var(--spacing400)";
-export declare const SIDEBAR_LEFT_PADDING = "var(--spacing400)";
-export declare const SIDEBAR_RIGHT_PADDING = "var(--spacing400)";

package/esm/components/sidebar/sidebar.config.js

@@ -8,8 +8,4 @@ export const SIDEBAR_SIZES_CSS = {
   "extra-large": "814px"
 };
 export const SIDEBAR_SIZES = ["extra-small", "small", "medium-small", "medium", "medium-large", "large", "extra-large"];
-export const SIDEBAR_ALIGNMENTS = ["left", "right"];
-export const SIDEBAR_TOP_SPACING = "27px";
-export const SIDEBAR_BOTTOM_SPACING = "var(--spacing400)";
-export const SIDEBAR_LEFT_PADDING = "var(--spacing400)";
-export const SIDEBAR_RIGHT_PADDING = "var(--spacing400)";
+export const SIDEBAR_ALIGNMENTS = ["left", "right"];

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

@@ -1,4 +1,6 @@
 import { PaddingProps } from "styled-system";
 import { SidebarProps } from "./sidebar.component";
-declare const StyledSidebar: import("styled-components").StyledComponent<"div", any, Pick<SidebarProps, "width" | "onCancel" | "size" | "position"> & PaddingProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>>, never>;
-export default StyledSidebar;
+declare type StyledSidebarProps = Pick<SidebarProps, "onCancel" | "position" | "size" | "width">;
+declare const StyledSidebar: import("styled-components").StyledComponent<"div", any, StyledSidebarProps, never>;
+declare const StyledSidebarContent: import("styled-components").StyledComponent<"div", any, PaddingProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>>, never>;
+export { StyledSidebar, StyledSidebarContent };

package/esm/components/sidebar/sidebar.style.js

@@ -1,25 +1,16 @@
 import styled, { css } from "styled-components";
+import { padding as paddingFn } from "styled-system";
 import computeSizing from "../../style/utils/element-sizing";
 import baseTheme from "../../style/themes/base";
 import StyledIconButton from "../icon-button/icon-button.style";
-import { calculateFormSpacingValues, calculateWidthValue } from "../../style/utils/form-style-utils";
-import { StyledFormContent, StyledFormFooter } from "../form/form.style";
 import { SIDEBAR_SIZES_CSS } from "./sidebar.config";
+import { StyledForm, StyledFormContent } from "../form/form.style";
 const StyledSidebar = styled.div`
   // prevents outline being added in safari
   :focus {
     outline: none;
   }
 
-  ${StyledFormContent} {
-    ${props => calculateFormSpacingValues(props, true, "sidebar")}
-  }
-
-  ${StyledFormFooter}.sticky {
-    ${calculateWidthValue}
-    ${props => calculateFormSpacingValues(props, false, "sidebar")}
-  }
-
   ${({
   onCancel,
   position,
@@ -58,7 +49,30 @@ const StyledSidebar = styled.div`
     `}
   `}
 `;
+const StyledSidebarContent = styled.div`
+  box-sizing: border-box;
+  display: block;
+  overflow-y: auto;
+  flex-grow: 1;
+
+  padding: var(--spacing300) var(--spacing400) var(--spacing400);
+  ${paddingFn}
+
+  &:has(${StyledForm}.sticky) {
+    display: flex;
+    flex-direction: column;
+    overflow-y: hidden;
+    padding: 0;
+
+    ${StyledForm}.sticky {
+      ${StyledFormContent} {
+        padding: var(--spacing300) var(--spacing400) var(--spacing400);
+        ${paddingFn}
+      }
+    }
+  }
+`;
 StyledSidebar.defaultProps = {
   theme: baseTheme
 };
-export default StyledSidebar;
+export { StyledSidebar, StyledSidebarContent };

package/esm/components/typography/typography.style.js

@@ -55,23 +55,27 @@ const getLineHeight = variant => {
     case "h1-large":
       return "40px";
     case "h1":
-    case "segment-subheader":
-      return "31px";
+      return "30px";
     case "h2":
-      return "29px";
+      return "27.5px";
     case "h3":
+      return "25px";
+    case "h4":
+      return "22.5px";
+    case "h5":
+      return "20px";
     case "segment-header":
-      return "26px";
+      return "25px";
+    case "segment-header-small":
+      return "22.5px";
+    case "segment-subheader":
+      return "24px";
     case "big":
       return "24px";
-    case "h4":
-    case "segment-header-small":
-      return "23px";
     case "small":
     case "sub":
     case "sup":
       return "20px";
-    case "h5":
     case "segment-subheader-alt":
     case "p":
     case "span":

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

@@ -68,10 +68,6 @@ const DialogStyle = exports.DialogStyle = (0, _styledComponents.default)(_dialog
     padding: var(--spacing200);
   }
 
-  ${_dialog.StyledDialogInnerContent} {
-    padding: 0;
-  }
-
   ${_simpleColorPicker.StyledColorOptions} {
     max-width: 285px;
     ${_simpleColor.StyledSimpleColor} {

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

@@ -10,9 +10,7 @@ var _guid = _interopRequireDefault(require("../../__internal__/utils/helpers/gui
 var _modal = _interopRequireDefault(require("../modal"));
 var _heading = _interopRequireDefault(require("../heading"));
 var _tags = _interopRequireDefault(require("../../__internal__/utils/helpers/tags"));
-var _useResizeObserver = _interopRequireDefault(require("../../hooks/__internal__/useResizeObserver"));
 var _dialog = require("./dialog.style");
-var _dialog2 = require("./dialog.config");
 var _focusTrap = _interopRequireDefault(require("../../__internal__/focus-trap"));
 var _iconButton = _interopRequireDefault(require("../icon-button"));
 var _icon = _interopRequireDefault(require("../icon"));
@@ -53,11 +51,7 @@ const Dialog = exports.Dialog = /*#__PURE__*/(0, _react.forwardRef)(({
 }, ref) => {
   const locale = (0, _useLocale.default)();
   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
   } = (0, _react.useRef)((0, _guid.default)());
@@ -70,93 +64,29 @@ const Dialog = exports.Dialog = /*#__PURE__*/(0, _react.forwardRef)(({
       containerRef.current?.focus();
     }
   }), []);
-  const centerDialog = (0, _react.useCallback)(() => {
-    /* istanbul ignore if */
-    if (!containerRef.current) {
-      return;
-    }
-    const {
-      width: dialogWidth,
-      height: dialogHeight
-    } = containerRef.current.getBoundingClientRect();
-    let midPointY = window.innerHeight / 2;
-    let midPointX = window.innerWidth / 2;
-    midPointY -= dialogHeight / 2;
-    midPointX -= dialogWidth / 2;
-    if (midPointY < _dialog2.TOP_MARGIN) {
-      midPointY = _dialog2.TOP_MARGIN;
-    }
-    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 */
-    if (!listenersAdded.current) {
-      window.addEventListener("resize", centerDialog);
-      listenersAdded.current = true;
-    }
-  }, [centerDialog]);
-  const removeListeners = (0, _react.useCallback)(() => {
-    if (listenersAdded.current) {
-      window.removeEventListener("resize", centerDialog);
-      listenersAdded.current = false;
-    }
-  }, [centerDialog]);
-  (0, _react.useEffect)(() => {
-    if (open) {
-      addListeners();
-    }
-    if (!open) {
-      removeListeners();
-    }
-    return () => {
-      removeListeners();
-    };
-  }, [open, addListeners, removeListeners]);
-  (0, _react.useLayoutEffect)(() => {
-    if (open) {
-      centerDialog();
-    }
-  }, [centerDialog, open, height]);
-  const closeIcon = () => {
-    if (!showCloseIcon || !onCancel) return null;
-    return /*#__PURE__*/_react.default.createElement(_iconButton.default, _extends({
-      "aria-label": locale.dialog.ariaLabels.close(),
-      onClick: onCancel,
-      disabled: disableClose
-    }, (0, _tags.default)("close", {
-      "data-element": "close",
-      ...closeButtonDataProps
-    })), /*#__PURE__*/_react.default.createElement(_icon.default, {
-      type: "close"
-    }));
-  };
-  const dialogTitle = () => {
-    if (!title) return null;
-    return /*#__PURE__*/_react.default.createElement(_dialog.StyledDialogTitle, {
-      showCloseIcon: showCloseIcon,
-      hasSubtitle: !!subtitle,
-      ref: titleRef
-    }, typeof title === "string" ? /*#__PURE__*/_react.default.createElement(_heading.default, {
-      "data-element": "dialog-title",
-      title: title,
-      titleId: titleId,
-      subheader: subtitle,
-      subtitleId: subtitleId,
-      divider: false,
-      help: help
-    }) : title);
-  };
+  const closeIcon = showCloseIcon && onCancel && /*#__PURE__*/_react.default.createElement(_iconButton.default, _extends({
+    "aria-label": locale.dialog.ariaLabels.close(),
+    onClick: onCancel,
+    disabled: disableClose
+  }, (0, _tags.default)("close", {
+    "data-element": "close",
+    ...closeButtonDataProps
+  })), /*#__PURE__*/_react.default.createElement(_icon.default, {
+    type: "close"
+  }));
+  const dialogTitle = title && /*#__PURE__*/_react.default.createElement(_dialog.StyledDialogTitle, {
+    showCloseIcon: showCloseIcon,
+    hasSubtitle: !!subtitle,
+    ref: titleRef
+  }, typeof title === "string" ? /*#__PURE__*/_react.default.createElement(_heading.default, {
+    "data-element": "dialog-title",
+    title: title,
+    titleId: titleId,
+    subheader: subtitle,
+    subtitleId: subtitleId,
+    divider: false,
+    help: help
+  }) : title);
   let dialogHeight = height;
   if (height && height.match(/px$/)) {
     dialogHeight = height.replace("px", "");
@@ -183,25 +113,21 @@ const Dialog = exports.Dialog = /*#__PURE__*/(0, _react.forwardRef)(({
     wrapperRef: containerRef,
     isOpen: open,
     additionalWrapperRefs: focusableContainers
-  }, /*#__PURE__*/_react.default.createElement(_dialog.StyledDialog, _extends({
+  }, /*#__PURE__*/_react.default.createElement(_dialog.DialogPositioner, null, /*#__PURE__*/_react.default.createElement(_dialog.StyledDialog, _extends({
     "data-component": dataComponent,
     "data-element": dataElement,
     "data-role": dataRole,
     "aria-modal": isTopModal ? true : undefined,
-    ref: containerRef,
-    topMargin: isDialogMaximised && breakpointOffset ? breakpointOffset * 2 : _dialog2.TOP_MARGIN
+    ref: containerRef
   }, dialogProps, {
     role: role,
     tabIndex: -1
   }, contentPadding, {
     backgroundColor: greyBackground ? "var(--colorsUtilityMajor025)" : "var(--colorsUtilityYang100)"
-  }), dialogTitle(), closeIcon(), /*#__PURE__*/_react.default.createElement(_dialog.StyledDialogContent, _extends({}, contentPadding, {
+  }), dialogTitle, closeIcon, /*#__PURE__*/_react.default.createElement(_dialog.StyledDialogContent, _extends({}, contentPadding, {
     "data-role": "dialog-content",
     tabIndex: -1
-  }), /*#__PURE__*/_react.default.createElement(_dialog.StyledDialogInnerContent, _extends({
-    "data-role": "dialog-inner-content",
-    ref: innerContentRef
-  }, contentPadding), children)))));
+  }), children)))));
 });
 if (process.env.NODE_ENV !== "production") {
   Dialog.propTypes = {

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

@@ -1,6 +1,2 @@
 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;
-export declare const CONTENT_BOTTOM_PADDING = 30;
 export declare type DialogSizes = typeof DIALOG_SIZES[number];

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

@@ -3,9 +3,5 @@
 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", "maximise"];
-const TOP_MARGIN = exports.TOP_MARGIN = 20;
-const CONTENT_TOP_PADDING = exports.CONTENT_TOP_PADDING = 24;
-const HORIZONTAL_PADDING = exports.HORIZONTAL_PADDING = 32;
-const CONTENT_BOTTOM_PADDING = exports.CONTENT_BOTTOM_PADDING = 30;
+exports.DIALOG_SIZES = void 0;
+const DIALOG_SIZES = exports.DIALOG_SIZES = ["auto", "extra-small", "small", "medium-small", "medium", "medium-large", "large", "extra-large", "maximise"];

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

@@ -1,21 +1,13 @@
-import { DialogSizes } from "./dialog.config";
-import { ContentPaddingInterface } from "./dialog.component";
-declare type StyledDialogProps = {
-    topMargin: number;
-    size?: DialogSizes;
-    dialogHeight?: string;
+import { ContentPaddingInterface, DialogProps } from "./dialog.component";
+declare const DialogPositioner: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare const StyledDialog: import("styled-components").StyledComponent<"div", any, Required<Pick<DialogProps, "size">> & {
+    dialogHeight?: string | undefined;
     backgroundColor: string;
-};
-declare const StyledDialog: import("styled-components").StyledComponent<"div", any, {
-    isDialogMaximised: boolean;
-    isDialogMaximisedSmallViewport: boolean;
-    isDialogMaximisedLargeViewport: boolean;
-} & StyledDialogProps & ContentPaddingInterface, "isDialogMaximised" | "isDialogMaximisedSmallViewport" | "isDialogMaximisedLargeViewport">;
+} & ContentPaddingInterface, never>;
 declare type StyledDialogTitleProps = {
     showCloseIcon?: boolean;
     hasSubtitle?: boolean;
 };
 declare const StyledDialogTitle: import("styled-components").StyledComponent<"div", any, StyledDialogTitleProps, never>;
 declare const StyledDialogContent: import("styled-components").StyledComponent<"div", any, ContentPaddingInterface, never>;
-declare const StyledDialogInnerContent: import("styled-components").StyledComponent<"div", any, ContentPaddingInterface, never>;
-export { StyledDialog, StyledDialogTitle, StyledDialogContent, StyledDialogInnerContent, };
+export { DialogPositioner, StyledDialog, StyledDialogTitle, StyledDialogContent, };