carbon-react 144.0.0 → 144.0.1

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

@@ -8,88 +8,46 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _form = require("../form/form.style");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function computePadding() {
+  return (0, _styledComponents.css)`
+    padding: 0 16px;
+    @media screen and (min-width: 600px) {
+      padding: 0 24px;
+    }
+    @media screen and (min-width: 960px) {
+      padding: 0 32px;
+    }
+    @media screen and (min-width: 1260px) {
+      padding: 0 40px;
+    }
+  `;
+}
 const StyledContent = _styledComponents.default.div`
+  box-sizing: border-box;
+  display: block;
   overflow-y: auto;
-  padding: 0 16px;
-  flex: 1;
 
-  /* Delegate handling overflow to child form if it has a sticky footer */
-  &:has(${_form.StyledFormContent}.sticky) {
-    overflow-y: inherit;
-  }
+  flex: 1;
+  width: 100%;
 
   ${({
   disableContentPadding
-}) => (0, _styledComponents.css)`
-    ${!disableContentPadding && (0, _styledComponents.css)`
-      @media screen and (min-width: 600px) {
-        padding: 0 24px;
-      }
-      @media screen and (min-width: 960px) {
-        padding: 0 32px;
-      }
-      @media screen and (min-width: 1260px) {
-        padding: 0 40px;
-      }
+}) => disableContentPadding ? "padding: 0" : computePadding()}
 
-      ${_form.StyledFormContent}.sticky {
-        padding-right: 16px;
-        padding-left: 16px;
-        margin-right: -16px;
-        margin-left: -16px;
-
-        @media screen and (min-width: 600px) {
-          padding-right: 24px;
-          padding-left: 24px;
-          margin-right: -24px;
-          margin-left: -24px;
-        }
-        @media screen and (min-width: 960px) {
-          padding-right: 32px;
-          padding-left: 32px;
-          margin-right: -32px;
-          margin-left: -32px;
-        }
-        @media screen and (min-width: 1260px) {
-          padding-right: 40px;
-          padding-left: 40px;
-          margin-right: -40px;
-          margin-left: -40px;
-        }
-      }
+  &:has(${_form.StyledForm}.sticky) {
+    display: flex;
+    flex-direction: column;
+    overflow-y: hidden;
+    padding: 0;
 
-      ${_form.StyledFormFooter}.sticky {
-        padding: 16px;
-
-        margin-right: -16px;
-        margin-left: -16px;
-        width: calc(100% + 32px);
-
-        @media screen and (min-width: 600px) {
-          padding: 16px 24px;
-          margin-right: -24px;
-          margin-left: -24px;
-          width: calc(100% + 48px);
-        }
-        @media screen and (min-width: 960px) {
-          padding: 16px 32px;
-          margin-right: -32px;
-          margin-left: -32px;
-          width: calc(100% + 64px);
-        }
-        @media screen and (min-width: 1260px) {
-          padding: 16px 40px;
-          margin-right: -40px;
-          margin-left: -40px;
-          width: calc(100% + 80px);
-        }
+    ${_form.StyledForm}.sticky {
+      ${_form.StyledFormContent} {
+        ${({
+  disableContentPadding
+}) => disableContentPadding ? "padding: 0" : computePadding()}
       }
-    `}
-
-    ${disableContentPadding && (0, _styledComponents.css)`
-      padding: 0;
-    `}
-  `}
+    }
+  }
 
   ${({
   hasHeader

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

@@ -10,7 +10,6 @@ var _content = _interopRequireDefault(require("./content.style"));
 var _iconButton = _interopRequireDefault(require("../icon-button/icon-button.style"));
 var _fullScreenHeading = _interopRequireDefault(require("../../__internal__/full-screen-heading/full-screen-heading.style"));
 var _heading = require("../heading/heading.style");
-var _form = require("../form/form.style");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -31,10 +30,6 @@ const StyledDialogFullScreen = _styledComponents.default.div`
   display: flex;
   flex-direction: column;
 
-  ${_form.StyledForm} {
-    min-height: 100%;
-  }
-
   ${_heading.StyledHeaderContent} {
     align-items: baseline;
   }

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

@@ -6,12 +6,11 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.Form = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _sidebar = _interopRequireDefault(require("../sidebar/__internal__/sidebar.context"));
-var _modal = _interopRequireDefault(require("../modal/__internal__/modal.context"));
 var _formSummary = _interopRequireDefault(require("./__internal__/form-summary.component"));
 var _form = require("./form.style");
 var _form2 = require("./form.config");
 var _formSpacingProvider = _interopRequireDefault(require("../../__internal__/form-spacing-provider"));
+var _modal = _interopRequireDefault(require("../modal/__internal__/modal.context"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -33,45 +32,37 @@ const Form = ({
   footerPadding = {},
   ...rest
 }) => {
-  const {
-    isInSidebar
-  } = (0, _react.useContext)(_sidebar.default);
+  const formRef = (0, _react.useRef)(null);
+  const formFooterRef = (0, _react.useRef)(null);
   const {
     isInModal
   } = (0, _react.useContext)(_modal.default);
-  const formRef = (0, _react.useRef)(null);
-  const formFooterRef = (0, _react.useRef)(null);
-  const hasPadding = !!Object.keys(footerPadding).length;
   const renderFooter = !!(saveButton || leftSideButtons || rightSideButtons || errorCount || warningCount);
-  const classNames = `${stickyFooter ? "sticky" : ""} ${hasPadding ? "padded" : ""}`.trimEnd();
   return /*#__PURE__*/_react.default.createElement(_form.StyledForm, _extends({
     ref: formRef,
+    className: stickyFooter ? "sticky" : "",
     stickyFooter: stickyFooter,
     onSubmit: onSubmit,
     "data-component": "form",
     fieldSpacing: fieldSpacing,
     noValidate: noValidate,
-    isInSidebar: isInSidebar,
     height: height,
     isInModal: isInModal
   }, rest), /*#__PURE__*/_react.default.createElement(_form.StyledFormContent, {
     "data-element": "form-content",
     "data-role": "form-content",
-    className: stickyFooter ? "sticky" : "",
     stickyFooter: stickyFooter,
-    isInModal: isInModal,
-    tabIndex: -1
+    tabIndex: -1,
+    isInModal: isInModal
   }, /*#__PURE__*/_react.default.createElement(_formSpacingProvider.default, {
     marginBottom: _form2.formSpacing[fieldSpacing]
   }, children)), renderFooter && /*#__PURE__*/_react.default.createElement(_form.StyledFormFooter, _extends({
     "data-element": "form-footer",
     "data-role": "form-footer",
-    className: classNames,
     ref: formFooterRef,
     stickyFooter: stickyFooter,
     buttonAlignment: buttonAlignment,
-    fullWidthButtons: fullWidthButtons,
-    isInModal: isInModal
+    fullWidthButtons: fullWidthButtons
   }, footerPadding), leftSideButtons && /*#__PURE__*/_react.default.createElement(_form.StyledLeftButtons, {
     "data-role": "form-left-buttons",
     buttonAlignment: buttonAlignment

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

@@ -4,17 +4,21 @@ interface StyledFormContentProps {
     isInModal?: boolean;
 }
 export declare const StyledFormContent: import("styled-components").StyledComponent<"div", any, StyledFormContentProps, never>;
-interface ButtonProps extends StyledFormContentProps {
-    buttonAlignment?: FormButtonAlignment;
+interface StyledFormFooterProps {
+    stickyFooter?: boolean;
     fullWidthButtons?: boolean;
+    buttonAlignment?: FormButtonAlignment;
 }
-export declare const StyledFormFooter: import("styled-components").StyledComponent<"div", any, ButtonProps, never>;
+export declare const StyledFormFooter: import("styled-components").StyledComponent<"div", any, StyledFormFooterProps, never>;
 interface StyledFormProps extends StyledFormContentProps {
     height?: string;
     fieldSpacing: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7;
-    isInSidebar?: boolean;
 }
 export declare const StyledForm: import("styled-components").StyledComponent<"form", any, StyledFormProps, never>;
-export declare const StyledRightButtons: import("styled-components").StyledComponent<"div", any, ButtonProps, never>;
-export declare const StyledLeftButtons: import("styled-components").StyledComponent<"div", any, ButtonProps, never>;
+export declare const StyledRightButtons: import("styled-components").StyledComponent<"div", any, {
+    buttonAlignment?: "left" | "right" | undefined;
+}, never>;
+export declare const StyledLeftButtons: import("styled-components").StyledComponent<"div", any, {
+    buttonAlignment?: "left" | "right" | undefined;
+}, never>;
 export {};

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

@@ -13,18 +13,14 @@ var _textarea = _interopRequireDefault(require("../textarea/textarea.style"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const StyledFormContent = exports.StyledFormContent = _styledComponents.default.div`
-  ${({
+const StyledFormContent = exports.StyledFormContent = _styledComponents.default.div(({
   stickyFooter,
   isInModal
-}) => (0, _styledComponents.css)`
-    ${stickyFooter && (0, _styledComponents.css)`
-      /* Take responsibility for handling overflow away from parent modal */
-      overflow-y: ${isInModal ? "auto" : "inherit"};
-      flex: 1;
-    `}
-  `}
-`;
+}) => stickyFooter && isInModal && (0, _styledComponents.css)`
+      flex-grow: 1;
+      min-height: 0;
+      overflow-y: auto;
+    `);
 const StyledFormFooter = exports.StyledFormFooter = _styledComponents.default.div`
   align-items: center;
   display: flex;
@@ -39,8 +35,7 @@ const StyledFormFooter = exports.StyledFormFooter = _styledComponents.default.di
 
   ${({
   stickyFooter,
-  fullWidthButtons,
-  isInModal
+  fullWidthButtons
 }) => (0, _styledComponents.css)`
     ${!stickyFooter && (0, _styledComponents.css)`
       margin-top: 48px;
@@ -53,9 +48,7 @@ const StyledFormFooter = exports.StyledFormFooter = _styledComponents.default.di
       padding: 16px 32px;
       width: 100%;
       z-index: 1000;
-      ${!isInModal && (0, _styledComponents.css)`
-        position: sticky;
-      `}
+      position: sticky;
       bottom: 0;
     `}
 
@@ -70,9 +63,6 @@ const StyledFormFooter = exports.StyledFormFooter = _styledComponents.default.di
 StyledFormFooter.defaultProps = {
   theme: _base.default
 };
-
-// Accounts for height of the header of Modal parent, the height form footer and some additional spacing
-const HEIGHT_SPACING = 216;
 const StyledForm = exports.StyledForm = _styledComponents.default.form`
   ${_styledSystem.space}
 
@@ -89,19 +79,16 @@ const StyledForm = exports.StyledForm = _styledComponents.default.form`
 
   ${({
   stickyFooter,
-  isInModal,
-  isInSidebar
+  isInModal
 }) => 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%;
+        flex-grow: 1;
+        min-height: 0;
+        height: 100%;
       `}
     `}
 `;

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

@@ -7,12 +7,11 @@ exports.default = exports.Sidebar = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _modal = _interopRequireDefault(require("../modal"));
-var _sidebar = _interopRequireDefault(require("./sidebar.style"));
+var _sidebar = require("./sidebar.style");
 var _iconButton = _interopRequireDefault(require("../icon-button"));
 var _icon = _interopRequireDefault(require("../icon"));
 var _focusTrap = _interopRequireDefault(require("../../__internal__/focus-trap"));
 var _sidebarHeader = _interopRequireDefault(require("./__internal__/sidebar-header"));
-var _box = _interopRequireDefault(require("../box"));
 var _guid = _interopRequireDefault(require("../../__internal__/utils/helpers/guid"));
 var _useLocale = _interopRequireDefault(require("../../hooks/__internal__/useLocale"));
 var _utils = require("../../style/utils");
@@ -53,7 +52,6 @@ const Sidebar = exports.Sidebar = /*#__PURE__*/_react.default.forwardRef(({
   const {
     current: headerId
   } = (0, _react.useRef)((0, _guid.default)());
-  const hasStickyFooter = (0, _react.useMemo)(() => _react.default.Children.toArray(children).some(child => /*#__PURE__*/_react.default.isValidElement(child) && child.props.stickyFooter), [children]);
   const sidebarRef = (0, _react.useRef)(null);
   const setRefs = (0, _react.useCallback)(reference => {
     sidebarRef.current = reference;
@@ -72,7 +70,7 @@ const Sidebar = exports.Sidebar = /*#__PURE__*/_react.default.forwardRef(({
       type: "close"
     }));
   };
-  const sidebar = /*#__PURE__*/_react.default.createElement(_sidebar.default, _extends({
+  const sidebar = /*#__PURE__*/_react.default.createElement(_sidebar.StyledSidebar, {
     "aria-modal": !enableBackgroundUI && isTopModal,
     "aria-describedby": ariaDescribedBy,
     "aria-label": ariaLabel,
@@ -84,24 +82,16 @@ const Sidebar = exports.Sidebar = /*#__PURE__*/_react.default.forwardRef(({
     position: position,
     size: size,
     onCancel: onCancel,
-    role: role
-  }, (0, _utils.filterStyledSystemPaddingProps)(rest), {
+    role: role,
     width: width
-  }), header && /*#__PURE__*/_react.default.createElement(_sidebarHeader.default, _extends({
+  }, header && /*#__PURE__*/_react.default.createElement(_sidebarHeader.default, _extends({
     closeIcon: closeIcon()
   }, headerPadding, {
     id: headerId
-  }), header), !header && closeIcon(), /*#__PURE__*/_react.default.createElement(_box.default, _extends({
+  }), header), !header && closeIcon(), /*#__PURE__*/_react.default.createElement(_sidebar.StyledSidebarContent, _extends({
     "data-element": "sidebar-content",
-    "data-role": "sidebar-content",
-    pt: "var(--spacing300)",
-    pb: "var(--spacing400)",
-    px: "var(--spacing400)"
-  }, (0, _utils.filterStyledSystemPaddingProps)(rest), {
-    scrollVariant: "light",
-    overflow: hasStickyFooter ? undefined : "auto",
-    flex: "1"
-  }), /*#__PURE__*/_react.default.createElement(_sidebar2.default.Provider, {
+    "data-role": "sidebar-content"
+  }, (0, _utils.filterStyledSystemPaddingProps)(rest)), /*#__PURE__*/_react.default.createElement(_sidebar2.default.Provider, {
     value: {
       isInSidebar: true
     }

package/lib/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/lib/components/sidebar/sidebar.config.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.SIDEBAR_TOP_SPACING = exports.SIDEBAR_SIZES_CSS = exports.SIDEBAR_SIZES = exports.SIDEBAR_RIGHT_PADDING = exports.SIDEBAR_LEFT_PADDING = exports.SIDEBAR_BOTTOM_SPACING = exports.SIDEBAR_ALIGNMENTS = void 0;
+exports.SIDEBAR_SIZES_CSS = exports.SIDEBAR_SIZES = exports.SIDEBAR_ALIGNMENTS = void 0;
 const SIDEBAR_SIZES_CSS = exports.SIDEBAR_SIZES_CSS = {
   "extra-small": "214px",
   small: "314px",
@@ -14,8 +14,4 @@ const SIDEBAR_SIZES_CSS = exports.SIDEBAR_SIZES_CSS = {
   "extra-large": "814px"
 };
 const SIDEBAR_SIZES = exports.SIDEBAR_SIZES = ["extra-small", "small", "medium-small", "medium", "medium-large", "large", "extra-large"];
-const SIDEBAR_ALIGNMENTS = exports.SIDEBAR_ALIGNMENTS = ["left", "right"];
-const SIDEBAR_TOP_SPACING = exports.SIDEBAR_TOP_SPACING = "27px";
-const SIDEBAR_BOTTOM_SPACING = exports.SIDEBAR_BOTTOM_SPACING = "var(--spacing400)";
-const SIDEBAR_LEFT_PADDING = exports.SIDEBAR_LEFT_PADDING = "var(--spacing400)";
-const SIDEBAR_RIGHT_PADDING = exports.SIDEBAR_RIGHT_PADDING = "var(--spacing400)";
+const SIDEBAR_ALIGNMENTS = exports.SIDEBAR_ALIGNMENTS = ["left", "right"];

package/lib/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/lib/components/sidebar/sidebar.style.js

@@ -3,32 +3,23 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.StyledSidebarContent = exports.StyledSidebar = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _styledSystem = require("styled-system");
 var _elementSizing = _interopRequireDefault(require("../../style/utils/element-sizing"));
 var _base = _interopRequireDefault(require("../../style/themes/base"));
 var _iconButton = _interopRequireDefault(require("../icon-button/icon-button.style"));
-var _formStyleUtils = require("../../style/utils/form-style-utils");
-var _form = require("../form/form.style");
 var _sidebar = require("./sidebar.config");
+var _form = require("../form/form.style");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const StyledSidebar = _styledComponents.default.div`
+const StyledSidebar = exports.StyledSidebar = _styledComponents.default.div`
   // prevents outline being added in safari
   :focus {
     outline: none;
   }
 
-  ${_form.StyledFormContent} {
-    ${props => (0, _formStyleUtils.calculateFormSpacingValues)(props, true, "sidebar")}
-  }
-
-  ${_form.StyledFormFooter}.sticky {
-    ${_formStyleUtils.calculateWidthValue}
-    ${props => (0, _formStyleUtils.calculateFormSpacingValues)(props, false, "sidebar")}
-  }
-
   ${({
   onCancel,
   position,
@@ -67,7 +58,29 @@ const StyledSidebar = _styledComponents.default.div`
     `}
   `}
 `;
+const StyledSidebarContent = exports.StyledSidebarContent = _styledComponents.default.div`
+  box-sizing: border-box;
+  display: block;
+  overflow-y: auto;
+  flex-grow: 1;
+
+  padding: var(--spacing300) var(--spacing400) var(--spacing400);
+  ${_styledSystem.padding}
+
+  &:has(${_form.StyledForm}.sticky) {
+    display: flex;
+    flex-direction: column;
+    overflow-y: hidden;
+    padding: 0;
+
+    ${_form.StyledForm}.sticky {
+      ${_form.StyledFormContent} {
+        padding: var(--spacing300) var(--spacing400) var(--spacing400);
+        ${_styledSystem.padding}
+      }
+    }
+  }
+`;
 StyledSidebar.defaultProps = {
   theme: _base.default
-};
-var _default = exports.default = StyledSidebar;
+};

package/package.json

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

package/esm/style/utils/form-style-utils.d.ts

@@ -1,21 +0,0 @@
-import { PaddingProps } from "styled-system";
-declare type ContainerComponent = "dialog" | "sidebar";
-export declare const calculateWidthValue: (props: PaddingProps) => string;
-export declare const calculateFormSpacingValues: (props: PaddingProps, isFormContent: boolean, containerComponent?: ContainerComponent) => {
-    "margin-top": string;
-    "padding-top": string;
-    "padding-bottom": string | undefined;
-    "padding-left": string;
-    "padding-right": string;
-    "margin-left": string;
-    "margin-right": string;
-} | {
-    ":not(.padded)"?: {
-        "padding-left": string;
-        "padding-right": string;
-    } | undefined;
-    "margin-bottom": string;
-    "margin-left": string;
-    "margin-right": string;
-};
-export {};

package/esm/style/utils/form-style-utils.js

@@ -1,92 +0,0 @@
-import { padding as paddingFn } from "styled-system";
-import { HORIZONTAL_PADDING, CONTENT_TOP_PADDING, CONTENT_BOTTOM_PADDING } from "../../components/dialog/dialog.config";
-import { SIDEBAR_TOP_SPACING, SIDEBAR_BOTTOM_SPACING, SIDEBAR_LEFT_PADDING, SIDEBAR_RIGHT_PADDING } from "../../components/sidebar/sidebar.config";
-const parsePadding = paddingString => {
-  const paddingValues = paddingString.split(/\s+/);
-  let paddingTop, paddingBottom, paddingLeft, paddingRight;
-  switch (paddingValues.length) {
-    case 1:
-      {
-        const [value] = paddingValues;
-        [paddingTop, paddingRight, paddingBottom, paddingLeft] = [value, value, value, value];
-        break;
-      }
-    case 2:
-      {
-        const [vertical, horizontal] = paddingValues;
-        [paddingTop, paddingRight, paddingBottom, paddingLeft] = [vertical, horizontal, vertical, horizontal];
-        break;
-      }
-    case 3:
-      {
-        const [top, horizontal, bottom] = paddingValues;
-        [paddingTop, paddingRight, paddingBottom, paddingLeft] = [top, horizontal, bottom, horizontal];
-        break;
-      }
-    case 4:
-      {
-        [paddingTop, paddingRight, paddingBottom, paddingLeft] = paddingValues;
-        break;
-      }
-    /* istanbul ignore next */
-    default:
-      break;
-  }
-  return {
-    paddingTop,
-    paddingBottom,
-    paddingLeft,
-    paddingRight
-  };
-};
-const calculatePadding = props => {
-  const {
-    padding,
-    ...individualPaddingProperties
-  } = paddingFn(props);
-  const result = padding ? parsePadding(padding) : {};
-  Object.assign(result, individualPaddingProperties);
-  return result;
-};
-export const calculateWidthValue = props => {
-  const {
-    paddingLeft,
-    paddingRight
-  } = calculatePadding(props);
-  const paddingValue = `(${paddingLeft ?? `${HORIZONTAL_PADDING}px`} + ${paddingRight ?? `${HORIZONTAL_PADDING}px`})`;
-  return `width: calc(100% + ${paddingValue});`;
-};
-export const calculateFormSpacingValues = (props, isFormContent, containerComponent = "dialog") => {
-  const {
-    paddingTop,
-    paddingBottom,
-    paddingLeft,
-    paddingRight
-  } = calculatePadding(props);
-  const isSidebar = containerComponent === "sidebar";
-  const spacingTopValue = paddingTop ?? (isSidebar ? SIDEBAR_TOP_SPACING : `${CONTENT_TOP_PADDING}px`);
-  const spacingRightValue = paddingRight ?? `${HORIZONTAL_PADDING}px`;
-  const spacingBottomValue = paddingBottom ?? (isSidebar ? SIDEBAR_BOTTOM_SPACING : `${CONTENT_BOTTOM_PADDING}px`);
-  const spacingLeftValue = paddingLeft ?? `${HORIZONTAL_PADDING}px`;
-  const setNegativeValue = value => `calc(-1 * ${value})`;
-  return {
-    "margin-left": setNegativeValue(spacingLeftValue),
-    "margin-right": setNegativeValue(spacingRightValue),
-    ...(isFormContent ? {
-      "margin-top": setNegativeValue(spacingTopValue),
-      "padding-top": spacingTopValue,
-      "padding-bottom": isSidebar ? undefined : spacingBottomValue,
-      "padding-left": spacingLeftValue,
-      "padding-right": spacingRightValue
-    } : {
-      "margin-bottom": setNegativeValue(spacingBottomValue),
-      ...(isSidebar && {
-        // if footer already has custom padding do not set
-        ":not(.padded)": {
-          "padding-left": SIDEBAR_LEFT_PADDING,
-          "padding-right": SIDEBAR_RIGHT_PADDING
-        }
-      })
-    })
-  };
-};

package/lib/style/utils/form-style-utils.d.ts

@@ -1,21 +0,0 @@
-import { PaddingProps } from "styled-system";
-declare type ContainerComponent = "dialog" | "sidebar";
-export declare const calculateWidthValue: (props: PaddingProps) => string;
-export declare const calculateFormSpacingValues: (props: PaddingProps, isFormContent: boolean, containerComponent?: ContainerComponent) => {
-    "margin-top": string;
-    "padding-top": string;
-    "padding-bottom": string | undefined;
-    "padding-left": string;
-    "padding-right": string;
-    "margin-left": string;
-    "margin-right": string;
-} | {
-    ":not(.padded)"?: {
-        "padding-left": string;
-        "padding-right": string;
-    } | undefined;
-    "margin-bottom": string;
-    "margin-left": string;
-    "margin-right": string;
-};
-export {};