carbon-react 142.2.2 → 142.3.1

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

@@ -1,12 +1,10 @@
 import styled, { css } from "styled-components";
-import { layout, flexbox, padding } from "styled-system";
+import { layout, flexbox } from "styled-system";
 import menuConfigVariants from "./menu.config";
 import { StyledVerticalWrapper, StyledDivider } from "../vertical-divider/vertical-divider.style";
 import { StyledLink } from "../link/link.style";
 import { baseTheme } from "../../style/themes";
-import StyledMenuItemWrapper from "./menu-item/menu-item.style";
 const StyledMenuWrapper = styled.ul`
-  line-height: 40px;
   list-style: none;
   margin: 0;
   padding: 0;
@@ -68,10 +66,6 @@ const StyledMenuItem = styled.li`
         white-space: normal;
       }
     `}
-
-  ${StyledMenuItemWrapper} {
-    ${padding}
-  }
 `;
 StyledMenuItem.defaultProps = {
   theme: baseTheme

package/esm/components/navigation-bar/navigation-bar.style.js

@@ -5,7 +5,6 @@ const StyledNavigationBar = styled.nav`
   display: flex;
   align-items: center;
   padding: 0 40px;
-  line-height: 40px;
 
   & > * {
     box-sizing: border-box;

package/esm/components/note/note.component.js

@@ -25,10 +25,6 @@ export const Note = ({
   ...rest
 }) => {
   !(width > 0) ? process.env.NODE_ENV !== "production" ? invariant(false, "<Note> width must be greater than 0") : invariant(false) : void 0;
-  !createdDate ? process.env.NODE_ENV !== "production" ? invariant(false, "<Note> createdDate is required") : invariant(false) : void 0;
-  !noteContent ? process.env.NODE_ENV !== "production" ? invariant(false, "<Note> noteContent is required") : invariant(false) : void 0;
-  !(!status || status.text) ? process.env.NODE_ENV !== "production" ? invariant(false, "<Note> status.text is required") : invariant(false) : void 0;
-  !(!status || status.timeStamp) ? process.env.NODE_ENV !== "production" ? invariant(false, "<Note> status.timeStamp is required") : invariant(false) : void 0;
   !(!inlineControl || /*#__PURE__*/React.isValidElement(inlineControl) && inlineControl.type === ActionPopover) ? process.env.NODE_ENV !== "production" ? invariant(false, "<Note> inlineControl must be an instance of <ActionPopover>") : invariant(false) : void 0;
   const renderStatus = () => {
     if (!status) {

package/lib/components/decimal/decimal.component.js

@@ -190,7 +190,8 @@ const Decimal = exports.Decimal = /*#__PURE__*/_react.default.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/lib/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/lib/components/flat-table/flat-table-body/flat-table-body.component.js

@@ -13,12 +13,15 @@ const FlatTableBody = exports.FlatTableBody = /*#__PURE__*/_react.default.forwar
   ...rest
 }, ref) => {
   return /*#__PURE__*/_react.default.createElement("tbody", _extends({
-    ref: ref
+    ref: ref,
+    "data-component": "flat-table-body"
   }, rest), children);
 });
 if (process.env.NODE_ENV !== "production") {
   FlatTableBody.propTypes = {
-    "children": _propTypes.default.node
+    "children": _propTypes.default.node,
+    "data-element": _propTypes.default.string,
+    "data-role": _propTypes.default.string
   };
 }
 FlatTableBody.displayName = "FlatTableBody";

package/lib/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/lib/components/flat-table/flat-table-body-draggable/flat-table-body-draggable.component.js

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

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

@@ -38,7 +38,7 @@ 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.default.isDownKey(event) && !_events.default.isUpKey(event)) {

package/lib/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/lib/components/flat-table/flat-table-head/flat-table-head.component.js

@@ -30,7 +30,8 @@ const FlatTableHead = ({
     }
   }, [children]);
   return /*#__PURE__*/_react.default.createElement(_flatTableHead.default, _extends({
-    ref: ref
+    ref: ref,
+    "data-component": "flat-table-head"
   }, rest), /*#__PURE__*/_react.default.createElement(_flatTableHead2.default.Provider, {
     value: {
       stickyOffsets

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

@@ -73,7 +73,7 @@ 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/lib/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/lib/components/flat-table/sort/sort.component.js

@@ -19,7 +19,9 @@ const Sort = ({
   children,
   onClick,
   sortType,
-  accessibleName
+  accessibleName,
+  "data-element": dataElement,
+  "data-role": dataRole
 }) => {
   const id = (0, _react.useRef)((0, _guid.default)());
   const locale = (0, _useLocale.default)();
@@ -42,11 +44,16 @@ 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.default.createElement(_sort.StyledSortIcon, {
     type: sortType === "ascending" ? "sort_up" : "sort_down",
     iconColor: colorTheme === "dark" ? "--colorsActionMinorYang100" : "--colorActionMinor500"
-  })), !sortType && /*#__PURE__*/_react.default.createElement(_sort.StyledSpaceHolder, null));
+  })), !sortType && /*#__PURE__*/_react.default.createElement(_sort.StyledSpaceHolder, {
+    "data-role": "sort-placeholder"
+  }));
 };
 exports.Sort = Sort;
 var _default = exports.default = Sort;

package/lib/components/link/link.style.js

@@ -91,7 +91,6 @@ const StyledLink = exports.StyledLink = _styledComponents.default.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;
@@ -100,7 +99,7 @@ const StyledLink = exports.StyledLink = _styledComponents.default.span`
 
         a:focus {
           top: var(--spacing100);
-          left: 0;
+          left: var(--spacing000);
         }
       `}
 

package/lib/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/lib/components/menu/__internal__/submenu/submenu.component.js

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

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

@@ -52,12 +52,31 @@ const StyledSubmenu = exports.StyledSubmenu = _styledComponents.default.ul`
   inFullscreenView,
   maxHeight,
   applyFocusRadiusStyling,
-  applyFocusRadiusStylingToLastItem
+  applyFocusRadiusStylingToLastItem,
+  submenuMaxWidth
 }) => (0, _styledComponents.css)`
     ${!inFullscreenView && menuType && (0, _styledComponents.css)`
       box-shadow: var(--boxShadow100);
       position: absolute;
       background-color: ${variant === "default" ? _menu2.default[menuType].submenuItemBackground : _menu2.default[menuType].background};
+
+      min-width: 100%;
+
+      ${submenuMaxWidth && (0, _styledComponents.css)`
+        min-width: ${submenuMaxWidth};
+        max-width: ${submenuMaxWidth};
+
+        &&& {
+          a,
+          button,
+          ${_link.StyledLink} a,
+          ${_link.StyledLink} button {
+            white-space: normal;
+            height: auto;
+          }
+        }
+      `}
+
       a,
       button,
       ${_link.StyledLink} a,
@@ -67,6 +86,8 @@ const StyledSubmenu = exports.StyledSubmenu = _styledComponents.default.ul`
     `}
 
     ${inFullscreenView && (0, _styledComponents.css)`
+      min-width: 100%;
+
       ${_menu.StyledMenuItem} {
         width: 100%;
       }
@@ -117,7 +138,6 @@ const StyledSubmenu = exports.StyledSubmenu = _styledComponents.default.ul`
     list-style: none;
     margin: 0;
     padding: 0;
-    min-width: 100%;
 
     ${_menuItem.default}:after, ${_menuItem.default}:hover:after {
       display: none;
@@ -126,8 +146,6 @@ const StyledSubmenu = exports.StyledSubmenu = _styledComponents.default.ul`
     ${_menuItem.default} {
       display: flex;
       align-items: center;
-      height: 40px;
-      line-height: 40px;
       white-space: nowrap;
       cursor: pointer;
 
@@ -136,6 +154,11 @@ const StyledSubmenu = exports.StyledSubmenu = _styledComponents.default.ul`
         height: auto;
       `}
 
+      ${submenuMaxWidth && (0, _styledComponents.css)`
+        height: auto;
+        min-height: 40px;
+      `}
+
       ${!inFullscreenView && menuType && (0, _styledComponents.css)`
         background-color: ${_menu2.default[menuType].submenuItemBackground};
 
@@ -153,6 +176,15 @@ const StyledSubmenu = exports.StyledSubmenu = _styledComponents.default.ul`
             color: var(--colorsComponentsMenuYang100);
           }
         }
+
+        > a,
+        > button {
+          padding: 11px 16px 12px;
+
+          :has([data-component="icon"]) {
+            padding: 9px 16px 7px;
+          }
+        }
       `}
 
       a {

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

@@ -21,6 +21,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 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); }
 const MenuItem = ({
   submenu,
+  submenuMaxWidth,
   children,
   href,
   onClick,
@@ -158,7 +159,8 @@ const MenuItem = ({
       asPassiveItem: asPassiveItem,
       ariaLabel: ariaLabel,
       onSubmenuOpen: onSubmenuOpen,
-      onSubmenuClose: onSubmenuClose
+      onSubmenuClose: onSubmenuClose,
+      submenuMaxWidth: submenuMaxWidth
     }, elementProps, {
       variant: variant
     }, rest), children));

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

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _styledSystem = require("styled-system");
+var _button = _interopRequireDefault(require("../../button/button.style"));
 var _link = require("../../link/link.style");
 var _icon = _interopRequireDefault(require("../../icon/icon.style"));
 var _iconButton = _interopRequireDefault(require("../../icon-button/icon-button.style"));
@@ -16,6 +17,72 @@ var _themes = require("../../../style/themes");
 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 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);
 `;
@@ -38,14 +105,11 @@ const StyledMenuItemWrapper = _styledComponents.default.a.attrs({
   asDiv,
   hasInput
 }) => (0, _styledComponents.css)`
-    ${!inFullscreenView && (0, _styledComponents.css)`
-      ${_styledSystem.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;
 
@@ -62,9 +126,18 @@ const StyledMenuItemWrapper = _styledComponents.default.a.attrs({
       `}
     }
 
-    a button:not(.search-button) {
-      position: relative;
-      top: -1px;
+    ${!maxWidth && (0, _styledComponents.css)`
+      a:has([data-component="icon"]):not(:has(button))
+        ${_link.StyledContent},
+        button:has([data-component="icon"]):not(:has(button))
+        ${_link.StyledContent} {
+        position: relative;
+        top: -2px;
+      }
+    `}
+
+    :has([data-element="input"]) ${_link.StyledContent} {
+      width: 100%;
     }
 
     ${!overrideColor && (0, _styledComponents.css)`
@@ -80,6 +153,12 @@ const StyledMenuItemWrapper = _styledComponents.default.a.attrs({
     ${!inFullscreenView && (0, _styledComponents.css)`
       max-width: inherit;
 
+      > a,
+      > button {
+        display: flex;
+        align-items: center;
+      }
+
       && {
         a:focus,
         button:focus {
@@ -100,8 +179,8 @@ const StyledMenuItemWrapper = _styledComponents.default.a.attrs({
             overflow: hidden;
             white-space: nowrap;
             vertical-align: bottom;
+            display: block;
           `}
-          height: 40px;
         }
 
         a:hover,
@@ -123,6 +202,17 @@ const StyledMenuItemWrapper = _styledComponents.default.a.attrs({
     `}
 
     ${asPassiveItem ? `
+        ${!inFullscreenView && `
+          > a:not(:has(button)) {
+            padding: 11px 16px 12px;
+          }
+
+          > a ${_button.default}:not(.search-button) {
+            min-height: 17px;
+            padding: 9px 0px 11px; 
+          }
+        `}
+
         ${_iconButton.default} {
           > span {
             display: inline-flex;
@@ -141,13 +231,17 @@ const StyledMenuItemWrapper = _styledComponents.default.a.attrs({
         ${_link.StyledLink} a,
         button,
         ${_link.StyledLink} button {
-          padding: 0 16px;
+       
+          padding: ${inFullscreenView ? "0px 16px" : "11px 16px 12px"};
+
+          :has([data-component="icon"]) {
+            padding: 9px 16px 7px;
+          }
         }
       `}
 
     button,
     ${_link.StyledLink} button {
-      line-height: 40px;
       height: 40px;
       margin: 0px;
       text-align: left;
@@ -266,9 +360,11 @@ const StyledMenuItemWrapper = _styledComponents.default.a.attrs({
       `}
 
       ${showDropdownArrow && (0, _styledComponents.css)`
-        > a,
-        > button:not(${_iconButton.default}) {
-          padding-right: 32px;
+        &&& {
+          > a,
+          > button:not(${_iconButton.default}) {
+            padding-right: ${props => parsePadding((0, _styledSystem.padding)(props)).padding};
+          }
         }
 
         a::before,
@@ -277,7 +373,7 @@ const StyledMenuItemWrapper = _styledComponents.default.a.attrs({
           margin-top: -2px;
           pointer-events: none;
           position: absolute;
-          right: 16px;
+          right: ${props => parsePadding((0, _styledSystem.padding)(props)).iconSpacing};
           top: 50%;
           z-index: 2;
           content: "";
@@ -321,6 +417,12 @@ const StyledMenuItemWrapper = _styledComponents.default.a.attrs({
           }
         `}
 
+      
+      > a, > button {
+       min-height: 40px;
+       line-height: 40px;
+      }
+
       a,
       ${_link.StyledLink} a,
       button,
@@ -353,6 +455,13 @@ const StyledMenuItemWrapper = _styledComponents.default.a.attrs({
       }
     `}
   `}
+
+  &&& {
+    > a,
+    > button {
+      ${_styledSystem.padding}
+    }
+  }
 `;
 StyledMenuItemWrapper.defaultProps = {
   theme: _themes.baseTheme