carbon-react 143.2.5 → 144.0.1

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/menu/__internal__/submenu/submenu.style.js

@@ -21,6 +21,7 @@ const StyledSubmenuWrapper = exports.StyledSubmenuWrapper = _styledComponents.de
   position: relative;
   width: fit-content;
   max-width: inherit;
+  height: inherit;
 
   ${({
   isSubmenuOpen,
@@ -33,7 +34,8 @@ const StyledSubmenuWrapper = exports.StyledSubmenuWrapper = _styledComponents.de
   inFullscreenView,
   menuType,
   asPassiveItem
-}) => inFullscreenView && (0, _styledComponents.css)`
+}) => (0, _styledComponents.css)`
+    ${inFullscreenView && (0, _styledComponents.css)`
       width: 100%;
 
       ${asPassiveItem && menuType && (0, _styledComponents.css)`
@@ -43,6 +45,10 @@ const StyledSubmenuWrapper = exports.StyledSubmenuWrapper = _styledComponents.de
         }
       `}
     `}
+    ${!inFullscreenView && (0, _styledComponents.css)`
+      display: flex;
+    `}
+  `}
 `;
 const StyledSubmenu = exports.StyledSubmenu = _styledComponents.default.ul`
   ${({
@@ -58,6 +64,7 @@ const StyledSubmenu = exports.StyledSubmenu = _styledComponents.default.ul`
     ${!inFullscreenView && menuType && (0, _styledComponents.css)`
       box-shadow: var(--boxShadow100);
       position: absolute;
+      top: 100%;
       background-color: ${variant === "default" ? _menu2.default[menuType].submenuItemBackground : _menu2.default[menuType].background};
 
       min-width: 100%;
@@ -179,10 +186,6 @@ const StyledSubmenu = exports.StyledSubmenu = _styledComponents.default.ul`
         > a,
         > button {
           padding: 11px 16px 12px;
-
-          :has([data-component="icon"]) {
-            padding: 9px 16px 7px;
-          }
         }
       `}
 

package/lib/components/menu/menu-item/menu-item.component.d.ts

@@ -3,7 +3,7 @@ import { FlexboxProps, LayoutProps, MaxWidthProps, PaddingProps } from "styled-s
 import { IconType } from "../../icon";
 import { TagProps } from "../../../__internal__/utils/helpers/tags";
 export declare type VariantType = "default" | "alternate";
-interface MenuItemBaseProps extends Omit<TagProps, "data-component">, LayoutProps, FlexboxProps, PaddingProps {
+interface MenuItemBaseProps extends Omit<TagProps, "data-component">, Pick<LayoutProps, "width" | "maxWidth" | "minWidth">, FlexboxProps, PaddingProps {
     /** Custom className */
     className?: string;
     /** onClick handler */

package/lib/components/menu/menu-item/menu-item.component.js

@@ -46,6 +46,7 @@ const MenuItem = ({
 }) => {
   !(icon || children) ? process.env.NODE_ENV !== "production" ? (0, _invariant.default)(false, "Either prop `icon` must be defined or this node must have `children`.") : (0, _invariant.default)(false) : void 0;
   !(children || ariaLabel || typeof submenu === "string") ? process.env.NODE_ENV !== "production" ? (0, _invariant.default)(false, "If no text is provided an `ariaLabel` should be given to facilitate accessibility.") : (0, _invariant.default)(false) : void 0;
+  !(typeof submenu === "boolean" || submenu === undefined || children && typeof submenu === "string" && submenu.length) ? process.env.NODE_ENV !== "production" ? (0, _invariant.default)(false, "You should not pass `children` when `submenu` is an empty string") : (0, _invariant.default)(false) : void 0;
   const {
     inFullscreenView,
     registerItem,
@@ -191,7 +192,8 @@ const MenuItem = ({
     placeholderTabIndex: asPassiveItem
   }, paddingProps, {
     asDiv: hasInput || as === "div",
-    hasInput: hasInput
+    hasInput: hasInput,
+    inSubmenu: !!handleSubmenuKeyDown
   }), children));
 };
 exports.MenuItem = MenuItem;

package/lib/components/menu/menu-item/menu-item.style.d.ts

@@ -15,6 +15,7 @@ interface StyledMenuItemWrapperProps extends Pick<MenuWithChildren, "href" | "sh
     asDiv?: boolean;
     hasInput?: boolean;
     menuItemVariant?: Pick<MenuWithChildren, "variant">["variant"];
+    inSubmenu?: boolean;
 }
 declare const StyledMenuItemWrapper: import("styled-components").StyledComponent<"a", any, {
     as: import("react").ForwardRefExoticComponent<import("../../link").LinkProps & import("react").RefAttributes<HTMLButtonElement | HTMLLinkElement>>;

package/lib/components/menu/menu-item/menu-item.style.js

@@ -103,7 +103,8 @@ const StyledMenuItemWrapper = _styledComponents.default.a.attrs({
   overrideColor,
   asPassiveItem,
   asDiv,
-  hasInput
+  hasInput,
+  inSubmenu
 }) => (0, _styledComponents.css)`
     display: flex;
     align-items: center;
@@ -116,6 +117,9 @@ const StyledMenuItemWrapper = _styledComponents.default.a.attrs({
     a,
     button {
       cursor: pointer;
+      min-height: 40px;
+      height: 100%;
+      box-sizing: border-box;
     }
 
     a:focus,
@@ -132,7 +136,7 @@ const StyledMenuItemWrapper = _styledComponents.default.a.attrs({
         button:has([data-component="icon"]):not(:has(button))
         ${_link.StyledContent} {
         position: relative;
-        top: -2px;
+        top: -1px;
       }
     `}
 
@@ -152,11 +156,16 @@ const StyledMenuItemWrapper = _styledComponents.default.a.attrs({
 
     ${!inFullscreenView && (0, _styledComponents.css)`
       max-width: inherit;
+      width: inherit;
+      height: inherit;
 
       > a,
       > button {
         display: flex;
         align-items: center;
+        ${!inSubmenu ? "justify-content: center;" : ""}
+        width: inherit;
+        max-width: inherit;
       }
 
       && {
@@ -203,15 +212,29 @@ const StyledMenuItemWrapper = _styledComponents.default.a.attrs({
 
     ${asPassiveItem ? `
         ${!inFullscreenView && `
-          > a:not(:has(button)) {
-            padding: 11px 16px 12px;
-          }
+            > a:not(:has(button)) {
+              padding: 11px 16px;
+            }
 
-          > a ${_button.default}:not(.search-button) {
-            min-height: 17px;
-            padding: 9px 0px 11px; 
-          }
-        `}
+            > a:has(${_button.default}:not(.search-button)) {
+             height: 100%;
+             
+             ${_link.StyledContent} {
+                height: inherit;
+
+                div {
+                  height: inherit;
+                }
+              }
+
+              ${_button.default} {
+                min-height: 40px;
+                padding: 10px 0px;
+                box-sizing: border-box;
+                height: 100%;
+              }
+            }
+          `}
 
         ${_iconButton.default} {
           > span {
@@ -227,28 +250,37 @@ const StyledMenuItemWrapper = _styledComponents.default.a.attrs({
           }
         }
       ` : `
-        a,
-        ${_link.StyledLink} a,
-        button,
-        ${_link.StyledLink} button {
-       
-          padding: ${inFullscreenView ? "0px 16px" : "11px 16px 12px"};
-
-          :has([data-component="icon"]) {
-            padding: 9px 16px 7px;
-          }
-        }
+        ${hasSubmenu || maxWidth ? `
+              a,
+              ${_link.StyledLink} a,
+              button,
+              ${_link.StyledLink} button {
+                padding: 11px 16px ${hasSubmenu && maxWidth ? "12px" : "10px"};
+              }
+            ` : `
+              a,
+              ${_link.StyledLink} a,
+              button,
+              ${_link.StyledLink} button {
+                padding: ${!inFullscreenView ? "11px" : "0px"} 16px;
+              }
+            `}
       `}
 
     button,
-    ${_link.StyledLink} button {
-      height: 40px;
+    ${_link.StyledLink} button,
+    a,
+    ${_link.StyledLink} a {
       margin: 0px;
       text-align: left;
 
       ${inFullscreenView && (0, _styledComponents.css)`
         height: auto;
         white-space: normal;
+
+        ${_icon.default} {
+          top: -2px;
+        }
       `}
     }
 
@@ -267,6 +299,8 @@ const StyledMenuItemWrapper = _styledComponents.default.a.attrs({
       ${!inFullscreenView && (0, _styledComponents.css)`
         a > ${_icon.default}, button > ${_icon.default} {
           display: inline-block;
+          height: 18px;
+          top: -2px;
         }
       `}
     }
@@ -370,7 +404,7 @@ const StyledMenuItemWrapper = _styledComponents.default.a.attrs({
         a::before,
         button::before {
           display: block;
-          margin-top: -2px;
+          margin-top: -1px;
           pointer-events: none;
           position: absolute;
           right: ${props => parsePadding((0, _styledSystem.padding)(props)).iconSpacing};

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

@@ -2,7 +2,7 @@ import React from "react";
 import { LayoutProps, FlexboxProps } from "styled-system";
 import { TagProps } from "../../__internal__/utils/helpers/tags";
 import { MenuType } from "./__internal__/menu.context";
-export interface MenuProps extends TagProps, LayoutProps, FlexboxProps {
+export interface MenuProps extends TagProps, Pick<LayoutProps, "width" | "minWidth" | "maxWidth" | "overflow" | "overflowX" | "verticalAlign">, FlexboxProps {
     /** Children elements */
     children: React.ReactNode;
     /** Defines the color scheme of the component */

package/lib/components/menu/menu.style.js

@@ -19,6 +19,8 @@ const StyledMenuWrapper = exports.StyledMenuWrapper = _styledComponents.default.
   padding: 0;
   outline: none;
   display: flex;
+  align-items: stretch;
+  min-height: 40px;
 
   ${_styledSystem.layout}
   ${_styledSystem.flexbox}
@@ -41,6 +43,13 @@ const StyledMenuWrapper = exports.StyledMenuWrapper = _styledComponents.default.
   }
 `;
 const StyledMenuItem = exports.StyledMenuItem = _styledComponents.default.li`
+  display: flex;
+  ${({
+  maxWidth
+}) => maxWidth && (0, _styledComponents.css)`
+      align-items: stretch;
+    `}
+
   ${_styledSystem.layout}
   ${_styledSystem.flexbox}
 
@@ -54,6 +63,10 @@ const StyledMenuItem = exports.StyledMenuItem = _styledComponents.default.li`
     ${inSubmenu && (0, _styledComponents.css)`
       display: list-item;
     `}
+
+    ${!inSubmenu && (0, _styledComponents.css)`
+      height: inherit;
+    `}
   `}
 
   ${({

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": "143.2.5",
+  "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
-        }
-      })
-    })
-  };
-};