carbon-react 143.2.5 → 144.0.1

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

@@ -12,6 +12,7 @@ const StyledSubmenuWrapper = styled.div`
   position: relative;
   width: fit-content;
   max-width: inherit;
+  height: inherit;
 
   ${({
   isSubmenuOpen,
@@ -24,7 +25,8 @@ const StyledSubmenuWrapper = styled.div`
   inFullscreenView,
   menuType,
   asPassiveItem
-}) => inFullscreenView && css`
+}) => css`
+    ${inFullscreenView && css`
       width: 100%;
 
       ${asPassiveItem && menuType && css`
@@ -34,6 +36,10 @@ const StyledSubmenuWrapper = styled.div`
         }
       `}
     `}
+    ${!inFullscreenView && css`
+      display: flex;
+    `}
+  `}
 `;
 const StyledSubmenu = styled.ul`
   ${({
@@ -49,6 +55,7 @@ const StyledSubmenu = styled.ul`
     ${!inFullscreenView && menuType && css`
       box-shadow: var(--boxShadow100);
       position: absolute;
+      top: 100%;
       background-color: ${variant === "default" ? menuConfigVariants[menuType].submenuItemBackground : menuConfigVariants[menuType].background};
 
       min-width: 100%;
@@ -170,10 +177,6 @@ const StyledSubmenu = styled.ul`
         > a,
         > button {
           padding: 11px 16px 12px;
-
-          :has([data-component="icon"]) {
-            padding: 9px 16px 7px;
-          }
         }
       `}
 

package/esm/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/esm/components/menu/menu-item/menu-item.component.js

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

package/esm/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/esm/components/menu/menu-item/menu-item.style.js

@@ -94,7 +94,8 @@ const StyledMenuItemWrapper = styled.a.attrs({
   overrideColor,
   asPassiveItem,
   asDiv,
-  hasInput
+  hasInput,
+  inSubmenu
 }) => css`
     display: flex;
     align-items: center;
@@ -107,6 +108,9 @@ const StyledMenuItemWrapper = styled.a.attrs({
     a,
     button {
       cursor: pointer;
+      min-height: 40px;
+      height: 100%;
+      box-sizing: border-box;
     }
 
     a:focus,
@@ -123,7 +127,7 @@ const StyledMenuItemWrapper = styled.a.attrs({
         button:has([data-component="icon"]):not(:has(button))
         ${StyledContent} {
         position: relative;
-        top: -2px;
+        top: -1px;
       }
     `}
 
@@ -143,11 +147,16 @@ const StyledMenuItemWrapper = styled.a.attrs({
 
     ${!inFullscreenView && css`
       max-width: inherit;
+      width: inherit;
+      height: inherit;
 
       > a,
       > button {
         display: flex;
         align-items: center;
+        ${!inSubmenu ? "justify-content: center;" : ""}
+        width: inherit;
+        max-width: inherit;
       }
 
       && {
@@ -194,15 +203,29 @@ const StyledMenuItemWrapper = styled.a.attrs({
 
     ${asPassiveItem ? `
         ${!inFullscreenView && `
-          > a:not(:has(button)) {
-            padding: 11px 16px 12px;
-          }
+            > a:not(:has(button)) {
+              padding: 11px 16px;
+            }
 
-          > a ${StyledButton}:not(.search-button) {
-            min-height: 17px;
-            padding: 9px 0px 11px; 
-          }
-        `}
+            > a:has(${StyledButton}:not(.search-button)) {
+             height: 100%;
+             
+             ${StyledContent} {
+                height: inherit;
+
+                div {
+                  height: inherit;
+                }
+              }
+
+              ${StyledButton} {
+                min-height: 40px;
+                padding: 10px 0px;
+                box-sizing: border-box;
+                height: 100%;
+              }
+            }
+          `}
 
         ${StyledIconButton} {
           > span {
@@ -218,28 +241,37 @@ const StyledMenuItemWrapper = styled.a.attrs({
           }
         }
       ` : `
-        a,
-        ${StyledLink} a,
-        button,
-        ${StyledLink} button {
-       
-          padding: ${inFullscreenView ? "0px 16px" : "11px 16px 12px"};
-
-          :has([data-component="icon"]) {
-            padding: 9px 16px 7px;
-          }
-        }
+        ${hasSubmenu || maxWidth ? `
+              a,
+              ${StyledLink} a,
+              button,
+              ${StyledLink} button {
+                padding: 11px 16px ${hasSubmenu && maxWidth ? "12px" : "10px"};
+              }
+            ` : `
+              a,
+              ${StyledLink} a,
+              button,
+              ${StyledLink} button {
+                padding: ${!inFullscreenView ? "11px" : "0px"} 16px;
+              }
+            `}
       `}
 
     button,
-    ${StyledLink} button {
-      height: 40px;
+    ${StyledLink} button,
+    a,
+    ${StyledLink} a {
       margin: 0px;
       text-align: left;
 
       ${inFullscreenView && css`
         height: auto;
         white-space: normal;
+
+        ${StyledIcon} {
+          top: -2px;
+        }
       `}
     }
 
@@ -258,6 +290,8 @@ const StyledMenuItemWrapper = styled.a.attrs({
       ${!inFullscreenView && css`
         a > ${StyledIcon}, button > ${StyledIcon} {
           display: inline-block;
+          height: 18px;
+          top: -2px;
         }
       `}
     }
@@ -361,7 +395,7 @@ const StyledMenuItemWrapper = styled.a.attrs({
         a::before,
         button::before {
           display: block;
-          margin-top: -2px;
+          margin-top: -1px;
           pointer-events: none;
           position: absolute;
           right: ${props => parsePadding(padding(props)).iconSpacing};

package/esm/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/esm/components/menu/menu.style.js

@@ -10,6 +10,8 @@ const StyledMenuWrapper = styled.ul`
   padding: 0;
   outline: none;
   display: flex;
+  align-items: stretch;
+  min-height: 40px;
 
   ${layout}
   ${flexbox}
@@ -32,6 +34,13 @@ const StyledMenuWrapper = styled.ul`
   }
 `;
 const StyledMenuItem = styled.li`
+  display: flex;
+  ${({
+  maxWidth
+}) => maxWidth && css`
+      align-items: stretch;
+    `}
+
   ${layout}
   ${flexbox}
 
@@ -45,6 +54,10 @@ const StyledMenuItem = styled.li`
     ${inSubmenu && css`
       display: list-item;
     `}
+
+    ${!inSubmenu && css`
+      height: inherit;
+    `}
   `}
 
   ${({

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/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} {