carbon-react 143.2.4 → 144.0.0

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/tile-select/__internal__/accordion/accordion.component.js

@@ -17,7 +17,6 @@ const Accordion = ({
     }
   });
   return /*#__PURE__*/React.createElement(StyledContentContainer, {
-    "aria-expanded": expanded,
     isExpanded: expanded,
     maxHeight: contentHeight,
     "data-role": "tile-select-accordion-content-container"

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/tile-select/__internal__/accordion/accordion.component.js

@@ -26,7 +26,6 @@ const Accordion = ({
     }
   });
   return /*#__PURE__*/_react.default.createElement(_accordion.StyledContentContainer, {
-    "aria-expanded": expanded,
     isExpanded: expanded,
     maxHeight: contentHeight,
     "data-role": "tile-select-accordion-content-container"

package/package.json

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