carbon-react 142.2.2 → 142.3.1

package/esm/components/decimal/decimal.component.js

@@ -181,7 +181,8 @@ const Decimal = /*#__PURE__*/React.forwardRef(({
     name: name,
     value: toStandardDecimal(stateValue),
     type: "hidden",
-    "data-component": "hidden-input"
+    "data-component": "hidden-input",
+    "data-role": "hidden-input"
   }));
 });
 if (process.env.NODE_ENV !== "production") {

package/esm/components/flat-table/flat-table-body/flat-table-body.component.d.ts

@@ -1,5 +1,6 @@
 import React from "react";
-export interface FlatTableBodyProps {
+import { TagProps } from "../../../__internal__/utils/helpers/tags";
+export interface FlatTableBodyProps extends Omit<TagProps, "data-component"> {
     /** Array of FlatTableRow. */
     children: React.ReactNode;
 }

package/esm/components/flat-table/flat-table-body/flat-table-body.component.js

@@ -6,12 +6,15 @@ const FlatTableBody = /*#__PURE__*/React.forwardRef(({
   ...rest
 }, ref) => {
   return /*#__PURE__*/React.createElement("tbody", _extends({
-    ref: ref
+    ref: ref,
+    "data-component": "flat-table-body"
   }, rest), children);
 });
 if (process.env.NODE_ENV !== "production") {
   FlatTableBody.propTypes = {
-    "children": PropTypes.node
+    "children": PropTypes.node,
+    "data-element": PropTypes.string,
+    "data-role": PropTypes.string
   };
 }
 export { FlatTableBody };

package/esm/components/flat-table/flat-table-body-draggable/flat-table-body-draggable.component.d.ts

@@ -1,5 +1,6 @@
 import React from "react";
-export interface FlatTableBodyDraggableProps {
+import { TagProps } from "../../../__internal__/utils/helpers/tags";
+export interface FlatTableBodyDraggableProps extends Omit<TagProps, "data-component"> {
     /** Array of FlatTableRow. */
     children: React.ReactNode;
     /** Callback fired when order is changed */

package/esm/components/flat-table/flat-table-body-draggable/flat-table-body-draggable.component.js

@@ -23,6 +23,7 @@ const DropTarget = ({
     }
   });
   return /*#__PURE__*/React.createElement(StyledFlatTableBodyDraggable, _extends({
+    "data-component": "flat-table-body-draggable",
     "data-role": "flat-table-body-draggable",
     ref: drop,
     isDragging: isDragging

package/esm/components/flat-table/flat-table-checkbox/flat-table-checkbox.component.js

@@ -29,7 +29,7 @@ export const FlatTableCheckbox = ({
   const dataElement = `flat-table-checkbox-${as === "td" ? "cell" : "header"}`;
   const handleClick = event => {
     event.stopPropagation();
-    if (onClick) onClick(event);
+    onClick?.(event);
   };
   const handleKeyDown = event => {
     if (!Events.isDownKey(event) && !Events.isUpKey(event)) {

package/esm/components/flat-table/flat-table-head/flat-table-head.component.d.ts

@@ -1,5 +1,6 @@
 import React from "react";
-export interface FlatTableHeadProps {
+import { TagProps } from "../../../__internal__/utils/helpers/tags";
+export interface FlatTableHeadProps extends Omit<TagProps, "data-component"> {
     /** Array of FlatTableRow. */
     children: React.ReactNode;
 }

package/esm/components/flat-table/flat-table-head/flat-table-head.component.js

@@ -21,7 +21,8 @@ export const FlatTableHead = ({
     }
   }, [children]);
   return /*#__PURE__*/React.createElement(StyledFlatTableHead, _extends({
-    ref: ref
+    ref: ref,
+    "data-component": "flat-table-head"
   }, rest), /*#__PURE__*/React.createElement(FlatTableHeadContext.Provider, {
     value: {
       stickyOffsets

package/esm/components/flat-table/flat-table.component.js

@@ -64,7 +64,7 @@ export const FlatTable = ({
       setHasVerticalScrollbar(bottom - top > offsetHeight);
       setHasHorizontalScrollbar(right - left > offsetWidth);
       const body = tableRef.current.querySelector("tbody");
-      const bodyRows = body ? Array.from(body?.querySelectorAll("tr")) : [];
+      const bodyRows = body ? Array.from(body?.querySelectorAll("tr")) : /* istanbul ignore next */[];
       const {
         length
       } = bodyRows;

package/esm/components/flat-table/sort/sort.component.d.ts

@@ -1,5 +1,6 @@
 import React from "react";
-export interface SortProps {
+import { TagProps } from "../../../__internal__/utils/helpers/tags";
+export interface SortProps extends Omit<TagProps, "data-component"> {
     /** if `asc` it will show `sort_up` icon, if `desc` it will show `sort_down` */
     sortType?: "ascending" | "descending";
     /** Callback fired when the component is clicked */
@@ -9,5 +10,5 @@ export interface SortProps {
     /** Sets the accessible name of the component */
     accessibleName?: string;
 }
-export declare const Sort: ({ children, onClick, sortType, accessibleName, }: SortProps) => React.JSX.Element;
+export declare const Sort: ({ children, onClick, sortType, accessibleName, "data-element": dataElement, "data-role": dataRole, }: SortProps) => React.JSX.Element;
 export default Sort;

package/esm/components/flat-table/sort/sort.component.js

@@ -10,7 +10,9 @@ export const Sort = ({
   children,
   onClick,
   sortType,
-  accessibleName
+  accessibleName,
+  "data-element": dataElement,
+  "data-role": dataRole
 }) => {
   const id = useRef(guid());
   const locale = useLocale();
@@ -33,10 +35,15 @@ export const Sort = ({
     tabIndex: 0,
     onClick: onClick,
     sortType: sortType,
-    "aria-labelledby": id.current
+    "aria-labelledby": id.current,
+    "data-component": "sort",
+    "data-element": dataElement,
+    "data-role": dataRole
   }, children, sortType && /*#__PURE__*/React.createElement(StyledSortIcon, {
     type: sortType === "ascending" ? "sort_up" : "sort_down",
     iconColor: colorTheme === "dark" ? "--colorsActionMinorYang100" : "--colorActionMinor500"
-  })), !sortType && /*#__PURE__*/React.createElement(StyledSpaceHolder, null));
+  })), !sortType && /*#__PURE__*/React.createElement(StyledSpaceHolder, {
+    "data-role": "sort-placeholder"
+  }));
 };
 export default Sort;

package/esm/components/link/link.style.js

@@ -82,7 +82,6 @@ const StyledLink = styled.span`
             text-decoration: underline var(--colorsUtilityYin100);
             text-decoration-thickness: 4px;
             text-underline-offset: 3px;
-
             -webkit-text-decoration: underline var(--colorsUtilityYin100);
             -webkit-text-decoration-thickness: 4px;
             -webkit-text-underline-offset: 3px;
@@ -91,7 +90,7 @@ const StyledLink = styled.span`
 
         a:focus {
           top: var(--spacing100);
-          left: 0;
+          left: var(--spacing000);
         }
       `}
 

package/esm/components/menu/__internal__/submenu/submenu.component.d.ts

@@ -36,7 +36,10 @@ export interface SubmenuProps {
     onSubmenuClose?: () => void;
     /** Callback triggered when the top-level menu item is clicked */
     onClick?: (event: React.MouseEvent<HTMLAnchorElement> | React.MouseEvent<HTMLButtonElement>) => void;
+    /** Accessible label for when no text children are passed to menu item */
     ariaLabel?: string;
+    /** Sets the max-width of the submenu container element */
+    submenuMaxWidth?: string;
 }
 declare const Submenu: React.ForwardRefExoticComponent<SubmenuProps & React.RefAttributes<HTMLAnchorElement & HTMLButtonElement & HTMLDivElement>>;
 export default Submenu;

package/esm/components/menu/__internal__/submenu/submenu.component.js

@@ -28,6 +28,7 @@ const Submenu = /*#__PURE__*/React.forwardRef(({
   onSubmenuOpen: onSubmenuOpenProp,
   onSubmenuClose,
   onClick,
+  submenuMaxWidth,
   ...rest
 }, ref) => {
   const [submenuRef, setSubmenuRef] = useState(null);
@@ -328,7 +329,8 @@ const Submenu = /*#__PURE__*/React.forwardRef(({
     clickToOpen: clickToOpen,
     href: href,
     maxWidth: maxWidth,
-    "aria-expanded": submenuOpen
+    "aria-expanded": submenuOpen,
+    "data-role": "submenu-parent-item"
   }), title), submenuOpen && /*#__PURE__*/React.createElement(StyledSubmenu, {
     "data-component": "submenu",
     submenuDirection: submenuDirection,
@@ -337,14 +339,16 @@ const Submenu = /*#__PURE__*/React.forwardRef(({
     role: blockIndex === 0 ? "presentation" : "list",
     maxHeight: submenuMaxHeight,
     applyFocusRadiusStyling: applyFocusRadius,
-    applyFocusRadiusStylingToLastItem: applyFocusRadiusToLastItem
+    applyFocusRadiusStylingToLastItem: applyFocusRadiusToLastItem,
+    submenuMaxWidth: submenuMaxWidth
   }, /*#__PURE__*/React.createElement(SubmenuContext.Provider, {
     value: {
       submenuFocusId,
       handleKeyDown,
       blockIndex,
       updateFocusId: setSubmenuFocusId,
-      shiftTabPressed: shiftTabPressed.current
+      shiftTabPressed: shiftTabPressed.current,
+      submenuHasMaxWidth: !!submenuMaxWidth
     }
   }, children)));
 });
@@ -464,6 +468,7 @@ if (process.env.NODE_ENV !== "production") {
     "onSubmenuOpen": PropTypes.func,
     "showDropdownArrow": PropTypes.bool,
     "submenuDirection": PropTypes.string,
+    "submenuMaxWidth": PropTypes.string,
     "title": PropTypes.string,
     "variant": PropTypes.oneOf(["alternate", "default"])
   };

package/esm/components/menu/__internal__/submenu/submenu.context.d.ts

@@ -5,6 +5,7 @@ export interface SubmenuContextProps {
     handleKeyDown?: (event: React.KeyboardEvent<HTMLAnchorElement>) => void;
     shiftTabPressed?: boolean;
     blockIndex?: number;
+    submenuHasMaxWidth?: boolean;
 }
 declare const SubmenuContext: React.Context<SubmenuContextProps>;
 export default SubmenuContext;

package/esm/components/menu/__internal__/submenu/submenu.style.d.ts

@@ -8,7 +8,7 @@ interface StyledSubmenuWrapperProps extends SharedStyleProps {
     isSubmenuOpen?: boolean;
     asPassiveItem?: boolean;
 }
-interface StyledSubmenuProps extends SharedStyleProps, Pick<SubmenuProps, "variant"> {
+interface StyledSubmenuProps extends SharedStyleProps, Pick<SubmenuProps, "variant" | "submenuMaxWidth"> {
     submenuDirection?: string;
     maxHeight?: string;
     applyFocusRadiusStyling: boolean;

package/esm/components/menu/__internal__/submenu/submenu.style.js

@@ -43,12 +43,31 @@ const StyledSubmenu = styled.ul`
   inFullscreenView,
   maxHeight,
   applyFocusRadiusStyling,
-  applyFocusRadiusStylingToLastItem
+  applyFocusRadiusStylingToLastItem,
+  submenuMaxWidth
 }) => css`
     ${!inFullscreenView && menuType && css`
       box-shadow: var(--boxShadow100);
       position: absolute;
       background-color: ${variant === "default" ? menuConfigVariants[menuType].submenuItemBackground : menuConfigVariants[menuType].background};
+
+      min-width: 100%;
+
+      ${submenuMaxWidth && css`
+        min-width: ${submenuMaxWidth};
+        max-width: ${submenuMaxWidth};
+
+        &&& {
+          a,
+          button,
+          ${StyledLink} a,
+          ${StyledLink} button {
+            white-space: normal;
+            height: auto;
+          }
+        }
+      `}
+
       a,
       button,
       ${StyledLink} a,
@@ -58,6 +77,8 @@ const StyledSubmenu = styled.ul`
     `}
 
     ${inFullscreenView && css`
+      min-width: 100%;
+
       ${StyledMenuItem} {
         width: 100%;
       }
@@ -108,7 +129,6 @@ const StyledSubmenu = styled.ul`
     list-style: none;
     margin: 0;
     padding: 0;
-    min-width: 100%;
 
     ${StyledMenuItemWrapper}:after, ${StyledMenuItemWrapper}:hover:after {
       display: none;
@@ -117,8 +137,6 @@ const StyledSubmenu = styled.ul`
     ${StyledMenuItemWrapper} {
       display: flex;
       align-items: center;
-      height: 40px;
-      line-height: 40px;
       white-space: nowrap;
       cursor: pointer;
 
@@ -127,6 +145,11 @@ const StyledSubmenu = styled.ul`
         height: auto;
       `}
 
+      ${submenuMaxWidth && css`
+        height: auto;
+        min-height: 40px;
+      `}
+
       ${!inFullscreenView && menuType && css`
         background-color: ${menuConfigVariants[menuType].submenuItemBackground};
 
@@ -144,6 +167,15 @@ const StyledSubmenu = styled.ul`
             color: var(--colorsComponentsMenuYang100);
           }
         }
+
+        > a,
+        > button {
+          padding: 11px 16px 12px;
+
+          :has([data-component="icon"]) {
+            padding: 9px 16px 7px;
+          }
+        }
       `}
 
       a {

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

@@ -40,13 +40,18 @@ interface MenuItemBaseProps extends Omit<TagProps, "data-component">, LayoutProp
     overrideColor?: boolean;
     /** When set the submenu opens by click instead of hover */
     clickToOpen?: boolean;
-    /** Sets the maxWidth of the MenuItem */
+    /**
+     * Sets the maxWidth of the MenuItem, setting this on a non-submenu
+     * item will truncate any text/content that may overflow
+     * */
     maxWidth?: MaxWidthProps["maxWidth"];
     /**
      * @private @ignore
      * Renders MenuItem as a div element
      * */
     as?: "div";
+    /** Sets the max-width of the submenu container element, accepts any valid CSS string */
+    submenuMaxWidth?: string;
 }
 export interface MenuWithChildren extends MenuItemBaseProps {
     children?: React.ReactNode;
@@ -59,7 +64,7 @@ export interface MenuWithIcon extends MenuItemBaseProps {
     children?: React.ReactNode;
 }
 export declare const MenuItem: {
-    ({ submenu, children, href, onClick, target, submenuDirection, icon, selected, onKeyDown, variant, showDropdownArrow, ariaLabel, clickToOpen, maxWidth, onSubmenuOpen, onSubmenuClose, overrideColor, rel, as, "data-element": dataElement, "data-role": dataRole, ...rest }: MenuWithChildren | MenuWithIcon): React.JSX.Element;
+    ({ submenu, submenuMaxWidth, children, href, onClick, target, submenuDirection, icon, selected, onKeyDown, variant, showDropdownArrow, ariaLabel, clickToOpen, maxWidth, onSubmenuOpen, onSubmenuClose, overrideColor, rel, as, "data-element": dataElement, "data-role": dataRole, ...rest }: MenuWithChildren | MenuWithIcon): React.JSX.Element;
     displayName: string;
 };
 export default MenuItem;

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

@@ -12,6 +12,7 @@ import { StyledMenuItem } from "../menu.style";
 import guid from "../../../__internal__/utils/helpers/guid";
 export const MenuItem = ({
   submenu,
+  submenuMaxWidth,
   children,
   href,
   onClick,
@@ -149,7 +150,8 @@ export const MenuItem = ({
       asPassiveItem: asPassiveItem,
       ariaLabel: ariaLabel,
       onSubmenuOpen: onSubmenuOpen,
-      onSubmenuClose: onSubmenuClose
+      onSubmenuClose: onSubmenuClose,
+      submenuMaxWidth: submenuMaxWidth
     }, elementProps, {
       variant: variant
     }, rest), children));

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

@@ -1,12 +1,79 @@
 import styled, { css } from "styled-components";
 import { padding } from "styled-system";
-import { StyledLink } from "../../link/link.style";
+import StyledButton from "../../button/button.style";
+import { StyledContent, StyledLink } from "../../link/link.style";
 import StyledIcon from "../../icon/icon.style";
 import StyledIconButton from "../../icon-button/icon-button.style";
 import menuConfigVariants from "../menu.config";
 import Link from "../../link";
 import addFocusStyling from "../../../style/utils/add-focus-styling";
 import { baseTheme } from "../../../style/themes";
+const BASE_SPACING = 16;
+const parsePadding = props => {
+  const {
+    paddingRight
+  } = props;
+  const paddingNumber = String(paddingRight)?.match(/\d+/)?.[0];
+  if (paddingRight === "var(--spacing000)" || paddingNumber === "0") {
+    return {
+      padding: "var(--spacing200)",
+      iconSpacing: "2px"
+    };
+  }
+  switch (paddingRight) {
+    case "var(--spacing100)":
+      return {
+        padding: "var(--spacing300)",
+        iconSpacing: paddingRight
+      };
+    case "var(--spacing200)":
+      return {
+        padding: "var(--spacing400)",
+        iconSpacing: paddingRight
+      };
+    case "var(--spacing300)":
+      return {
+        padding: "var(--spacing500)",
+        iconSpacing: paddingRight
+      };
+    case "var(--spacing400)":
+      return {
+        padding: "var(--spacing600)",
+        iconSpacing: paddingRight
+      };
+    case "var(--spacing500)":
+      return {
+        padding: "var(--spacing700)",
+        iconSpacing: paddingRight
+      };
+    case "var(--spacing600)":
+      return {
+        padding: "var(--spacing800)",
+        iconSpacing: paddingRight
+      };
+    case "var(--spacing700)":
+      return {
+        padding: "var(--spacing900)",
+        iconSpacing: paddingRight
+      };
+    case "var(--spacing800)":
+      return {
+        padding: "var(--spacing1000)",
+        iconSpacing: paddingRight
+      };
+    default:
+      if (paddingNumber) {
+        return {
+          padding: `${BASE_SPACING + Number(paddingNumber)}px`,
+          iconSpacing: `${paddingNumber}px`
+        };
+      }
+      return {
+        padding: "var(--spacing400)",
+        iconSpacing: "var(--spacing200)"
+      };
+  }
+};
 const oldFocusStyling = `
   box-shadow: inset 0 0 0 var(--borderWidth300) var(--colorsSemanticFocus500);
 `;
@@ -29,14 +96,11 @@ const StyledMenuItemWrapper = styled.a.attrs({
   asDiv,
   hasInput
 }) => css`
-    ${!inFullscreenView && css`
-      ${padding}
-    `}
-
-    display: inline-block;
+    display: flex;
+    align-items: center;
     font-size: 14px;
     font-weight: 700;
-    height: 40px;
+    min-height: 40px;
     position: relative;
     box-shadow: none;
 
@@ -53,9 +117,18 @@ const StyledMenuItemWrapper = styled.a.attrs({
       `}
     }
 
-    a button:not(.search-button) {
-      position: relative;
-      top: -1px;
+    ${!maxWidth && css`
+      a:has([data-component="icon"]):not(:has(button))
+        ${StyledContent},
+        button:has([data-component="icon"]):not(:has(button))
+        ${StyledContent} {
+        position: relative;
+        top: -2px;
+      }
+    `}
+
+    :has([data-element="input"]) ${StyledContent} {
+      width: 100%;
     }
 
     ${!overrideColor && css`
@@ -71,6 +144,12 @@ const StyledMenuItemWrapper = styled.a.attrs({
     ${!inFullscreenView && css`
       max-width: inherit;
 
+      > a,
+      > button {
+        display: flex;
+        align-items: center;
+      }
+
       && {
         a:focus,
         button:focus {
@@ -91,8 +170,8 @@ const StyledMenuItemWrapper = styled.a.attrs({
             overflow: hidden;
             white-space: nowrap;
             vertical-align: bottom;
+            display: block;
           `}
-          height: 40px;
         }
 
         a:hover,
@@ -114,6 +193,17 @@ const StyledMenuItemWrapper = styled.a.attrs({
     `}
 
     ${asPassiveItem ? `
+        ${!inFullscreenView && `
+          > a:not(:has(button)) {
+            padding: 11px 16px 12px;
+          }
+
+          > a ${StyledButton}:not(.search-button) {
+            min-height: 17px;
+            padding: 9px 0px 11px; 
+          }
+        `}
+
         ${StyledIconButton} {
           > span {
             display: inline-flex;
@@ -132,13 +222,17 @@ const StyledMenuItemWrapper = styled.a.attrs({
         ${StyledLink} a,
         button,
         ${StyledLink} button {
-          padding: 0 16px;
+       
+          padding: ${inFullscreenView ? "0px 16px" : "11px 16px 12px"};
+
+          :has([data-component="icon"]) {
+            padding: 9px 16px 7px;
+          }
         }
       `}
 
     button,
     ${StyledLink} button {
-      line-height: 40px;
       height: 40px;
       margin: 0px;
       text-align: left;
@@ -257,9 +351,11 @@ const StyledMenuItemWrapper = styled.a.attrs({
       `}
 
       ${showDropdownArrow && css`
-        > a,
-        > button:not(${StyledIconButton}) {
-          padding-right: 32px;
+        &&& {
+          > a,
+          > button:not(${StyledIconButton}) {
+            padding-right: ${props => parsePadding(padding(props)).padding};
+          }
         }
 
         a::before,
@@ -268,7 +364,7 @@ const StyledMenuItemWrapper = styled.a.attrs({
           margin-top: -2px;
           pointer-events: none;
           position: absolute;
-          right: 16px;
+          right: ${props => parsePadding(padding(props)).iconSpacing};
           top: 50%;
           z-index: 2;
           content: "";
@@ -312,6 +408,12 @@ const StyledMenuItemWrapper = styled.a.attrs({
           }
         `}
 
+      
+      > a, > button {
+       min-height: 40px;
+       line-height: 40px;
+      }
+
       a,
       ${StyledLink} a,
       button,
@@ -344,6 +446,13 @@ const StyledMenuItemWrapper = styled.a.attrs({
       }
     `}
   `}
+
+  &&& {
+    > a,
+    > button {
+      ${padding}
+    }
+  }
 `;
 StyledMenuItemWrapper.defaultProps = {
   theme: baseTheme

package/esm/components/menu/menu-segment-title/menu-segment-title.component.js

@@ -5,6 +5,7 @@ import { StyledTitle, StyledSegmentChildren } from "./menu-segment-title.style";
 import MenuContext from "../__internal__/menu.context";
 import { StyledMenuItem } from "../menu.style";
 import tagComponent from "../../../__internal__/utils/helpers/tags";
+import SubmenuContext from "../__internal__/submenu/submenu.context";
 const AS_VALUES = ["h2", "h3", "h4", "h5", "h6"];
 const MenuSegmentTitle = /*#__PURE__*/React.forwardRef(({
   children,
@@ -14,6 +15,9 @@ const MenuSegmentTitle = /*#__PURE__*/React.forwardRef(({
   ...rest
 }, ref) => {
   const menuContext = useContext(MenuContext);
+  const {
+    submenuHasMaxWidth
+  } = useContext(SubmenuContext);
   return /*#__PURE__*/React.createElement(StyledMenuItem, {
     inSubmenu: true
   }, /*#__PURE__*/React.createElement(StyledTitle, _extends({
@@ -21,7 +25,8 @@ const MenuSegmentTitle = /*#__PURE__*/React.forwardRef(({
   }, tagComponent("menu-segment-title", rest), {
     menuType: menuContext.menuType,
     ref: ref,
-    variant: variant
+    variant: variant,
+    shouldWrap: submenuHasMaxWidth
   }), text), children && /*#__PURE__*/React.createElement(StyledSegmentChildren, {
     "data-role": "menu-segment-children"
   }, children));

package/esm/components/menu/menu-segment-title/menu-segment-title.style.d.ts

@@ -3,6 +3,7 @@ import { MenuType } from "../__internal__/menu.context";
 interface StyledTitleProps {
     variant?: VariantType;
     menuType: MenuType;
+    shouldWrap?: boolean;
 }
 declare const StyledTitle: import("styled-components").StyledComponent<"h2", any, StyledTitleProps, never>;
 declare const StyledSegmentChildren: import("styled-components").StyledComponent<"ul", any, {}, never>;

package/esm/components/menu/menu-segment-title/menu-segment-title.style.js

@@ -3,17 +3,19 @@ import menuConfigVariants from "../menu.config";
 const StyledTitle = styled.h2`
   ${({
   menuType,
-  variant
+  variant,
+  shouldWrap
 }) => css`
     margin: 0px;
     padding: 16px 16px 8px;
     font-size: 12px;
     font-weight: 700;
     text-transform: uppercase;
-    line-height: 12px;
+    line-height: 14px;
     cursor: default;
     color: ${menuConfigVariants[menuType].title};
     ${variant === "alternate" && `background-color: ${menuConfigVariants[menuType].alternate};`}
+    white-space: ${shouldWrap ? "normal" : "nowrap"};
   `}
 `;
 const StyledSegmentChildren = styled.ul`