@atlaskit/menu 3.2.0 → 4.0.0

package/dist/esm/internal/components/menu-item-primitive.js

@@ -1,162 +1,40 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
+/* menu-item-primitive.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./menu-item-primitive.compiled.css";
+import * as React from 'react';
 import { useContext } from 'react';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { ClassNames, css, jsx } from '@emotion/react';
+import { ax, ix } from '@compiled/react/runtime';
 import { propDeprecationWarning } from '@atlaskit/ds-lib/deprecation-warning';
-import FocusRing from '@atlaskit/focus-ring';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { Inline, Stack, xcss } from '@atlaskit/primitives';
-import { N20, N200, N30 } from '@atlaskit/theme/colors';
+import { Inline } from '@atlaskit/primitives/compiled';
 import { SELECTION_STYLE_CONTEXT_DO_NOT_USE, SpacingContext } from './menu-context';
 var defaultRender = function defaultRender(Component, props) {
   return (
+    /*#__PURE__*/
     // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
-    jsx(Component, props)
+    React.createElement(Component, props)
   );
 };
-var beforeAfterElementStylesOld = css({
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  flexShrink: 0
-});
-var beforeAfterElementStyles = css({
-  display: 'flex',
-  minWidth: 24,
-  minHeight: 24,
-  alignItems: 'center',
-  justifyContent: 'center',
-  flexShrink: 0
-});
-var contentStyles = xcss({
-  outline: 'none',
-  overflow: 'hidden',
-  textAlign: 'left'
-});
-var truncateStyles = css({
-  display: 'block',
-  overflow: 'hidden',
-  textOverflow: 'ellipsis',
-  whiteSpace: 'nowrap'
-});
-var titleStyles = css({
-  font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)"
-});
-var wordBreakStyles = css({
-  wordBreak: 'break-word'
-});
-var descriptionStyles = css({
-  color: "var(--ds-text-subtlest, ".concat(N200, ")"),
-  font: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)"
-});
-var disabledDescriptionStyles = css({
-  color: "var(--ds-text-disabled, ".concat(N200, ")")
-});
-var positionRelativeStyles = css({
-  position: 'relative'
-});
-var primitiveStyles = css({
-  display: 'flex',
-  boxSizing: 'border-box',
-  width: '100%',
-  minHeight: 40,
-  margin: "var(--ds-space-0, 0px)",
-  alignItems: 'center',
-  border: 0,
-  outline: 0,
-  textDecoration: 'none',
-  userSelect: 'none',
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-  '&::-moz-focus-inner': {
-    border: 0
-  },
-  '&:hover': {
-    textDecoration: 'none'
-  }
-});
+var styles = {
+  root: "_19itidpf _12ji1r31 _1qu2glyw _12y3idpf _4bfu1r31 _1hmsglyw _ajmmnqa1 _kqswh2mm _1e0c1txw _vchhusvi _1bsb1osq _1tke1ylp _19pkze3t _2hwxze3t _otyrze3t _18u0ze3t _4cvr1h6o _uiztglyw _80omtlke _mizu194a _1ah311pw _ra3xnqa1 _128m1bk5 _9oik1r31 _1bnxglyw _jf4cnqa1 _1cvmnqa1 _4davt94y",
+  beforeAfterElementOld: "_1e0c1txw _4cvr1h6o _1bah1h6o _1o9zidpf",
+  beforeAfterElement: "_1e0c1txw _1ul91tcg _1tke1tcg _4cvr1h6o _1bah1h6o _1o9zidpf",
+  content: "_12ji1r31 _1qu2glyw _12y31o36 _1reo15vq _18m915vq _1e0c1txw _2lx21bp4 _1bah1h6o _16jlkb7n _y3gn1e5h",
+  truncate: "_1reo15vq _18m915vq _1e0c1ule _1bto1l2s _o5721q9c",
+  title: "_11c82smr",
+  wordBreak: "_1nmz1hna",
+  description: "_11c8dcr7 _syaz1wmz",
+  disabledDescription: "_syaz2oi6",
+  unselected: "_bfhkqtfy _syaz1r31 _10531r31 _irr31dko _30l31r31 _1di61dko _9h8h1r31",
+  disabled: "_80om13gf _bfhkqtfy _syaz2oi6 _irr3qtfy _30l32oi6 _1di6qtfy _9h8h2oi6",
+  selectedBorder: "_1mp4yh40 _1cs8stnw _1rus67is _1kt9b3bt _1fkrze3t _iajmze3t _z5wtze3t",
+  selectedNotch: "_rfx315o9 _1mp41y44 _1cs8stnw _1rus67is _1kt9b3bt _1fkrutpp _iajmutpp _z5wtze3t",
+  selected: "_bfhk1q4k _syazhu5v _1053hu5v _irr32seo _30l316ov _1di6guph _9h8hhu5v",
+  selectedOld: "_30l3hu5v"
+};
 var spacingMapStyles = {
-  cozy: css({
-    // 8 * 2 (16) + icon (24) === 40
-    paddingBlock: "var(--ds-space-100, 8px)",
-    paddingInline: "var(--ds-space-200, 16px)"
-  }),
-  compact: css({
-    minHeight: 32,
-    // 4 * 2 (8) + icon (24) === 32
-    paddingBlock: "var(--ds-space-050, 4px)",
-    paddingInline: "var(--ds-space-150, 12px)"
-  })
+  cozy: "_1rjcu2gc _18zrpxbi",
+  compact: "_1rjc1b66 _18zrutpp _1tkezwfg"
 };
-var interactiveStyles = css({
-  cursor: 'pointer'
-});
-var unselectedStyles = css({
-  backgroundColor: "var(--ds-background-neutral-subtle, transparent)",
-  color: 'currentColor',
-  '&:visited': {
-    color: 'currentColor'
-  },
-  '&:hover': {
-    backgroundColor: "var(--ds-background-neutral-subtle-hovered, ".concat(N20, ")"),
-    color: 'currentColor'
-  },
-  '&:active': {
-    backgroundColor: "var(--ds-background-neutral-subtle-pressed, ".concat(N30, ")"),
-    boxShadow: 'none',
-    color: 'currentColor'
-  }
-});
-var disabledStyles = css({
-  cursor: 'not-allowed',
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-  '&, :hover, :active': {
-    backgroundColor: "var(--ds-background-neutral-subtle, transparent)",
-    color: "var(--ds-text-disabled, ".concat(N200, ")")
-  }
-});
-var selectedBorderStyles = css({
-  '&::before': {
-    width: 2,
-    position: 'absolute',
-    background: "var(--ds-border-selected, transparent)",
-    content: '""',
-    insetBlockEnd: 0,
-    insetBlockStart: 0,
-    insetInlineStart: 0
-  }
-});
-var selectedNotchStyles = css({
-  '&::before': {
-    width: 4,
-    position: 'absolute',
-    background: "var(--ds-border-selected, transparent)",
-    borderRadius: "0 ".concat("var(--ds-border-radius, 4px)", " ", "var(--ds-border-radius, 4px)", " 0"),
-    content: '""',
-    insetBlockEnd: "var(--ds-space-150, 12px)",
-    insetBlockStart: "var(--ds-space-150, 12px)",
-    insetInlineStart: 0
-  }
-});
-var selectedStyles = css({
-  backgroundColor: "var(--ds-background-selected, ".concat(N20, ")"),
-  // Fallback set as babel plugin inserts one otherwise
-  color: "var(--ds-text-selected, currentColor)",
-  '&:visited': {
-    color: "var(--ds-text-selected, currentColor)"
-  },
-  '&:hover': {
-    backgroundColor: "var(--ds-background-selected-hovered, ".concat(N20, ")"),
-    color: "var(--ds-text-selected, currentColor)"
-  },
-  '&:active': {
-    backgroundColor: "var(--ds-background-selected-pressed, ".concat(N30, ")"),
-    color: "var(--ds-text-selected, currentColor)"
-  }
-});
 var gapMap = {
   compact: 'space.100',
   cozy: 'space.150'
@@ -199,41 +77,35 @@ var MenuItemPrimitive = function MenuItemPrimitive(_ref) {
   var selectionStyle = useContext(SELECTION_STYLE_CONTEXT_DO_NOT_USE);
   var renderTitle = overrides && overrides.Title && overrides.Title.render || defaultRender;
   var UNSAFE_className = UNSAFE_externalClassName;
-  return jsx(ClassNames, null, function (_ref2) {
-    var cn = _ref2.css,
-      cx = _ref2.cx;
-    return jsx(FocusRing, {
-      isInset: true
-    }, children({
-      className: cx([cn([positionRelativeStyles, primitiveStyles, spacingMapStyles[spacing], !isDisabled && !isSelected && unselectedStyles, !isDisabled && isSelected && [selectedStyles, [selectionStyle === 'border' && selectedBorderStyles, selectionStyle === 'notch' && selectedNotchStyles]], isDisabled ? disabledStyles : interactiveStyles]), UNSAFE_className]),
-      children: jsx(Inline, {
+  return function () {
+    return children({
+      className: ax([ax([styles.root, spacingMapStyles[spacing], !isDisabled && !isSelected && styles.unselected, !isDisabled && isSelected && styles.selected, !fg('platform_fix_a11y_selected_and_hovered_state_color') && !isDisabled && isSelected && styles.selectedOld, !isDisabled && isSelected && selectionStyle === 'border' && styles.selectedBorder, !isDisabled && isSelected && selectionStyle === 'notch' && styles.selectedNotch, isDisabled && styles.disabled]), UNSAFE_className]),
+      children: /*#__PURE__*/React.createElement(Inline, {
         as: "span",
         spread: "space-between",
         alignBlock: "center",
         space: gapMap[spacing],
         grow: "fill",
         testId: testId && "".concat(testId, "--container")
-      }, iconBefore && jsx("span", {
+      }, iconBefore && /*#__PURE__*/React.createElement("span", {
         "data-item-elem-before": true,
-        css: fg('platform_ads_component_no_icon_spacing_support') ? beforeAfterElementStyles : beforeAfterElementStylesOld,
-        "data-testid": testId && "".concat(testId, "--icon-before")
-      }, iconBefore), title && jsx(Stack, {
-        alignBlock: "center",
-        grow: "fill",
-        xcss: contentStyles
+        "data-testid": testId && "".concat(testId, "--icon-before"),
+        className: ax([fg('platform_ads_component_no_icon_spacing_support') && styles.beforeAfterElement, !fg('platform_ads_component_no_icon_spacing_support') && styles.beforeAfterElementOld])
+      }, iconBefore), title && /*#__PURE__*/React.createElement("div", {
+        className: ax([styles.content])
       }, renderTitle('span', {
         children: title,
-        className: cn(titleStyles, shouldTitleWrap ? wordBreakStyles : truncateStyles),
+        className: ax([styles.title, shouldTitleWrap ? styles.wordBreak : styles.truncate]),
         'data-item-title': true
-      }), description && jsx("span", {
+      }), description && /*#__PURE__*/React.createElement("span", {
         "data-item-description": true,
-        css: [descriptionStyles, isDisabled && disabledDescriptionStyles, shouldDescriptionWrap ? wordBreakStyles : truncateStyles]
-      }, description)), iconAfter && jsx("span", {
+        className: ax([styles.description, isDisabled && styles.disabledDescription, shouldDescriptionWrap && styles.wordBreak, !shouldDescriptionWrap && styles.truncate])
+      }, description)), iconAfter && /*#__PURE__*/React.createElement("span", {
         "data-item-elem-after": true,
-        css: fg('platform_ads_component_no_icon_spacing_support') ? beforeAfterElementStyles : beforeAfterElementStylesOld,
-        "data-testid": testId && "".concat(testId, "--icon-after")
+        "data-testid": testId && "".concat(testId, "--icon-after"),
+        className: ax([fg('platform_ads_component_no_icon_spacing_support') && styles.beforeAfterElement, !fg('platform_ads_component_no_icon_spacing_support') && styles.beforeAfterElementOld])
       }, iconAfter))
-    }));
-  });
+    });
+  }();
 };
 export default MenuItemPrimitive;

package/dist/esm/menu-item/button-item.js

@@ -1,16 +1,10 @@
+/* button-item.tsx generated by @compiled/babel-plugin v0.36.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "cssFn", "description", "iconAfter", "iconBefore", "isDisabled", "isSelected", "onClick", "testId", "overrides", "onMouseDown", "shouldTitleWrap", "shouldDescriptionWrap", "className", "interactionName"];
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
+var _excluded = ["children", "description", "iconAfter", "iconBefore", "isDisabled", "isSelected", "onClick", "testId", "overrides", "onMouseDown", "shouldTitleWrap", "shouldDescriptionWrap", "className", "interactionName"];
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 import { forwardRef, memo, useCallback, useContext } from 'react';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { jsx } from '@emotion/react';
-import { propDeprecationWarning } from '@atlaskit/ds-lib/deprecation-warning';
-import noop from '@atlaskit/ds-lib/noop';
 import InteractionContext from '@atlaskit/interaction-context';
 import { fg } from '@atlaskit/platform-feature-flags';
 import MenuItemPrimitive from '../internal/components/menu-item-primitive';
@@ -26,8 +20,6 @@ var ButtonItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(
 // Type needed on props to extract types with extract react types.
 function (props, ref) {
   var children = props.children,
-    _props$cssFn = props.cssFn,
-    cssFn = _props$cssFn === void 0 ? noop : _props$cssFn,
     description = props.description,
     iconAfter = props.iconAfter,
     iconBefore = props.iconBefore,
@@ -53,9 +45,7 @@ function (props, ref) {
   if (!children) {
     return null;
   }
-  propDeprecationWarning("@atlaskit/menu" || '', 'cssFn', cssFn !== noop, '' // TODO: Create DAC post when primitives/xcss are available as alternatives
-  );
-  return jsx(MenuItemPrimitive
+  return /*#__PURE__*/React.createElement(MenuItemPrimitive
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
   , _extends({
     className: UNSAFE_className
@@ -70,17 +60,11 @@ function (props, ref) {
     title: children,
     shouldTitleWrap: shouldTitleWrap,
     shouldDescriptionWrap: shouldDescriptionWrap,
-    css:
-    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-    cssFn({
-      isSelected: isSelected,
-      isDisabled: isDisabled
-    }),
     testId: testId && "".concat(testId, "--primitive")
   }), function (_ref) {
     var children = _ref.children,
       className = _ref.className;
-    return jsx("button", _extends({
+    return /*#__PURE__*/React.createElement("button", _extends({
       "data-testid": testId
     }, rest, {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766

package/dist/esm/menu-item/custom-item.js

@@ -1,17 +1,10 @@
+/* custom-item.tsx generated by @compiled/babel-plugin v0.36.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["component", "cssFn", "isDisabled", "isSelected", "onClick", "testId", "children", "description", "iconAfter", "iconBefore", "overrides", "onMouseDown", "shouldTitleWrap", "shouldDescriptionWrap", "className", "UNSAFE_isDraggable", "interactionName"];
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-
+var _excluded = ["component", "isDisabled", "isSelected", "onClick", "testId", "children", "description", "iconAfter", "iconBefore", "overrides", "onMouseDown", "shouldTitleWrap", "shouldDescriptionWrap", "className", "UNSAFE_isDraggable", "interactionName"];
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 import { forwardRef, memo, useCallback, useContext } from 'react';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
-import { propDeprecationWarning } from '@atlaskit/ds-lib/deprecation-warning';
-import noop from '@atlaskit/ds-lib/noop';
 import InteractionContext from '@atlaskit/interaction-context';
 import { fg } from '@atlaskit/platform-feature-flags';
 import MenuItemPrimitive from '../internal/components/menu-item-primitive';
@@ -31,8 +24,6 @@ var preventEvent = function preventEvent(e) {
  */
 var CustomItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref, ref) {
   var Component = _ref.component,
-    _ref$cssFn = _ref.cssFn,
-    cssFn = _ref$cssFn === void 0 ? noop : _ref$cssFn,
     _ref$isDisabled = _ref.isDisabled,
     isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
     _ref$isSelected = _ref.isSelected,
@@ -60,9 +51,7 @@ var CustomItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref, ref)
   if (!Component) {
     return null;
   }
-  propDeprecationWarning("@atlaskit/menu" || '', 'cssFn', cssFn !== noop, '' // TODO: Create DAC post when primitives/xcss are available as alternatives
-  );
-  return jsx(MenuItemPrimitive
+  return /*#__PURE__*/React.createElement(MenuItemPrimitive
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
   , _extends({
     className: UNSAFE_className
@@ -76,20 +65,12 @@ var CustomItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref, ref)
     isSelected: isSelected,
     isDisabled: isDisabled,
     shouldTitleWrap: shouldTitleWrap,
-    shouldDescriptionWrap: shouldDescriptionWrap
-    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-    ,
-    css: css(
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    cssFn({
-      isDisabled: isDisabled,
-      isSelected: isSelected
-    })),
+    shouldDescriptionWrap: shouldDescriptionWrap,
     testId: testId && "".concat(testId, "--primitive")
   }), function (_ref2) {
     var children = _ref2.children,
       className = _ref2.className;
-    return jsx(Component, _extends({
+    return /*#__PURE__*/React.createElement(Component, _extends({
       "data-testid": testId
     }, rest, {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766

package/dist/esm/menu-item/link-item.js

@@ -1,17 +1,11 @@
+/* link-item.tsx generated by @compiled/babel-plugin v0.36.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "href", "cssFn", "description", "iconAfter", "iconBefore", "isDisabled", "isSelected", "onClick", "testId", "overrides", "onMouseDown", "shouldTitleWrap", "shouldDescriptionWrap", "className", "UNSAFE_shouldDisableRouterLink", "UNSAFE_isDraggable", "interactionName"];
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
+var _excluded = ["children", "href", "description", "iconAfter", "iconBefore", "isDisabled", "isSelected", "onClick", "testId", "overrides", "onMouseDown", "shouldTitleWrap", "shouldDescriptionWrap", "className", "UNSAFE_shouldDisableRouterLink", "UNSAFE_isDraggable", "interactionName"];
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 import { forwardRef, memo, useCallback, useContext } from 'react';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { jsx } from '@emotion/react';
 import { useRouterLink } from '@atlaskit/app-provider';
-import { propDeprecationWarning } from '@atlaskit/ds-lib/deprecation-warning';
-import noop from '@atlaskit/ds-lib/noop';
 import InteractionContext from '@atlaskit/interaction-context';
 import { fg } from '@atlaskit/platform-feature-flags';
 import MenuItemPrimitive from '../internal/components/menu-item-primitive';
@@ -34,8 +28,6 @@ var LinkItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(
 function (props, ref) {
   var children = props.children,
     href = props.href,
-    _props$cssFn = props.cssFn,
-    cssFn = _props$cssFn === void 0 ? noop : _props$cssFn,
     description = props.description,
     iconAfter = props.iconAfter,
     iconBefore = props.iconBefore,
@@ -78,9 +70,7 @@ function (props, ref) {
    */
   var isRouterLink = !UNSAFE_shouldDisableRouterLink && RouterLink && !isExternal && !isNonHttpBased && !isEmptyHref;
   var Component = isRouterLink ? RouterLink : 'a';
-  propDeprecationWarning("@atlaskit/menu" || '', 'cssFn', cssFn !== noop, '' // TODO: Create DAC post when primitives/xcss are available as alternatives
-  );
-  return jsx(MenuItemPrimitive, _extends({}, rest, {
+  return /*#__PURE__*/React.createElement(MenuItemPrimitive, _extends({}, rest, {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     className: UNSAFE_className
     // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
@@ -93,18 +83,12 @@ function (props, ref) {
     description: description,
     shouldTitleWrap: shouldTitleWrap,
     shouldDescriptionWrap: shouldDescriptionWrap,
-    css:
-    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-    cssFn({
-      isSelected: isSelected,
-      isDisabled: isDisabled
-    }),
     title: children,
     testId: testId && "".concat(testId, "--primitive")
   }), function (_ref) {
     var children = _ref.children,
       className = _ref.className;
-    return jsx(Component, _extends({
+    return /*#__PURE__*/React.createElement(Component, _extends({
       "data-testid": testId,
       "data-is-router-link": testId ? isRouterLink ? 'true' : 'false' : undefined,
       "data-vc": "link-item"

package/dist/esm/menu-item/skeleton-heading-item.js

@@ -61,12 +61,9 @@ var SkeletonHeadingItem = function SkeletonHeadingItem(_ref) {
     var className = _ref2.className;
     return jsx("div", {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-      className: className
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-      ,
+      className: className,
       style: {
         '--width': width
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
       },
       css: [skeletonStyles, width ? customWidthStyles : defaultWidthStyles,
       // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage

package/dist/esm/menu-item/skeleton-item.js

@@ -130,12 +130,9 @@ var SkeletonItem = function SkeletonItem(_ref) {
     var className = _ref2.className;
     return jsx("div", {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-      className: className
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-      ,
+      className: className,
       style: {
         '--width': width
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
       },
       css: [skeletonStyles, (hasAvatar || hasIcon) && beforeElementStyles, hasAvatar && avatarStyles, hasIcon && iconStyles, width ? customWidthStyles : defaultWidthStyles,
       // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage

package/dist/esm/menu-section/section.js

@@ -1,7 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["children", "overrides", "title", "titleId", "testId", "isScrollable", "hasSeparator", "id", "isList", "className"];
-/* eslint-disable @atlaskit/design-system/ensure-design-token-usage, @atlaskit/design-system/ensure-design-token-usage/preview */
 /**
  * @jsxRuntime classic
  * @jsx jsx
@@ -140,9 +139,7 @@ var Section = /*#__PURE__*/forwardRef(function (_ref, ref) {
     // NOTE: Firefox allows elements that have "overflow: auto" to gain focus (as if it had tab-index="0")
     // We have made a deliberate choice to leave this behaviour as is.
     ,
-    css: [sectionStyles, isScrollable ? scrollableStyles : unscrollableStyles, hasSeparator ?
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-    thinSeparatorStyles : noSeparatorStyles],
+    css: [sectionStyles, isScrollable ? scrollableStyles : unscrollableStyles, hasSeparator ? thinSeparatorStyles : noSeparatorStyles],
     "aria-label": title,
     "aria-labelledby": titleId,
     "data-testid": testId,

package/dist/types/internal/components/menu-item-primitive.d.ts

@@ -1,4 +1,4 @@
-import { jsx } from '@emotion/react';
+/// <reference types="react" />
 import type { MenuItemPrimitiveProps } from '../../types';
 /**
  * __Menu item primitive__
@@ -14,5 +14,5 @@ import type { MenuItemPrimitiveProps } from '../../types';
  * </MenuItemPrimitive>
  * ```
  */
-declare const MenuItemPrimitive: ({ children, title, description, iconAfter, iconBefore, overrides, className: UNSAFE_externalClassName, shouldTitleWrap, shouldDescriptionWrap, isDisabled, isSelected, testId, }: MenuItemPrimitiveProps) => jsx.JSX.Element;
+declare const MenuItemPrimitive: ({ children, title, description, iconAfter, iconBefore, overrides, className: UNSAFE_externalClassName, shouldTitleWrap, shouldDescriptionWrap, isDisabled, isSelected, testId, }: MenuItemPrimitiveProps) => JSX.Element;
 export default MenuItemPrimitive;

package/dist/types/types.d.ts

@@ -126,7 +126,7 @@ export interface SectionProps {
 }
 export interface MenuItemPrimitiveProps {
     children: (props: {
-        className: string;
+        className?: string;
         children: React.ReactNode;
     }) => JSX.Element;
     title: React.ReactNode | undefined;
@@ -145,13 +145,6 @@ export interface MenuItemPrimitiveProps {
     testId?: string;
 }
 export interface MenuItemProps {
-    /**
-     * A function that overrides the styles of the component.
-     * It receives the current styles and state and expects a styles object.
-     *
-     * @deprecated This API is deprecated and will be removed in a future release. See DSP-2676 for more information.
-     */
-    cssFn?: CSSFn;
     /**
      * Not recommended for general use as it enables unsafe style overrides.
      */
@@ -265,7 +258,7 @@ export interface CustomItemComponentProps {
      * Class to apply to the root container of the custom component.
      * Ensure this has been applied so the item styling is consistent.
      */
-    className: string;
+    className?: string;
     /**
      * Test ID that's passed through to the custom component.
      */

package/dist/types-ts4.5/internal/components/menu-item-primitive.d.ts

@@ -1,4 +1,4 @@
-import { jsx } from '@emotion/react';
+/// <reference types="react" />
 import type { MenuItemPrimitiveProps } from '../../types';
 /**
  * __Menu item primitive__
@@ -14,5 +14,5 @@ import type { MenuItemPrimitiveProps } from '../../types';
  * </MenuItemPrimitive>
  * ```
  */
-declare const MenuItemPrimitive: ({ children, title, description, iconAfter, iconBefore, overrides, className: UNSAFE_externalClassName, shouldTitleWrap, shouldDescriptionWrap, isDisabled, isSelected, testId, }: MenuItemPrimitiveProps) => jsx.JSX.Element;
+declare const MenuItemPrimitive: ({ children, title, description, iconAfter, iconBefore, overrides, className: UNSAFE_externalClassName, shouldTitleWrap, shouldDescriptionWrap, isDisabled, isSelected, testId, }: MenuItemPrimitiveProps) => JSX.Element;
 export default MenuItemPrimitive;

package/dist/types-ts4.5/types.d.ts

@@ -126,7 +126,7 @@ export interface SectionProps {
 }
 export interface MenuItemPrimitiveProps {
     children: (props: {
-        className: string;
+        className?: string;
         children: React.ReactNode;
     }) => JSX.Element;
     title: React.ReactNode | undefined;
@@ -145,13 +145,6 @@ export interface MenuItemPrimitiveProps {
     testId?: string;
 }
 export interface MenuItemProps {
-    /**
-     * A function that overrides the styles of the component.
-     * It receives the current styles and state and expects a styles object.
-     *
-     * @deprecated This API is deprecated and will be removed in a future release. See DSP-2676 for more information.
-     */
-    cssFn?: CSSFn;
     /**
      * Not recommended for general use as it enables unsafe style overrides.
      */
@@ -265,7 +258,7 @@ export interface CustomItemComponentProps {
      * Class to apply to the root container of the custom component.
      * Ensure this has been applied so the item styling is consistent.
      */
-    className: string;
+    className?: string;
     /**
      * Test ID that's passed through to the custom component.
      */

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/menu",
-	"version": "3.2.0",
+	"version": "4.0.0",
 	"description": "A list of options to help users navigate, or perform actions.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -41,15 +41,16 @@
 		}
 	},
 	"dependencies": {
-		"@atlaskit/app-provider": "^2.0.0",
+		"@atlaskit/app-provider": "^2.1.0",
 		"@atlaskit/ds-lib": "^4.0.0",
 		"@atlaskit/focus-ring": "^3.0.0",
 		"@atlaskit/interaction-context": "^3.0.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
-		"@atlaskit/primitives": "^14.2.0",
+		"@atlaskit/primitives": "^14.4.0",
 		"@atlaskit/theme": "^18.0.0",
-		"@atlaskit/tokens": "^4.5.0",
+		"@atlaskit/tokens": "^4.8.0",
 		"@babel/runtime": "^7.0.0",
+		"@compiled/react": "^0.18.3",
 		"@emotion/react": "^11.7.1"
 	},
 	"peerDependencies": {
@@ -57,17 +58,17 @@
 		"react-dom": "^18.2.0"
 	},
 	"devDependencies": {
-		"@af/accessibility-testing": "^2.0.0",
-		"@af/integration-testing": "^0.5.0",
-		"@af/visual-regression": "^1.3.0",
-		"@atlaskit/button": "^22.0.0",
+		"@af/accessibility-testing": "workspace:^",
+		"@af/integration-testing": "workspace:^",
+		"@af/visual-regression": "workspace:^",
+		"@atlaskit/button": "^23.0.0",
 		"@atlaskit/docs": "^10.0.0",
-		"@atlaskit/icon": "^25.2.0",
+		"@atlaskit/icon": "^25.6.0",
 		"@atlaskit/icon-file-type": "^7.0.0",
-		"@atlaskit/icon-object": "^7.0.0",
-		"@atlaskit/link": "^3.0.0",
+		"@atlaskit/icon-object": "^7.1.0",
+		"@atlaskit/link": "^3.1.0",
 		"@atlaskit/section-message": "^8.2.0",
-		"@atlaskit/visual-regression": "^0.10.0",
+		"@atlaskit/visual-regression": "workspace:^",
 		"@atlassian/feature-flags-test-utils": "^0.3.0",
 		"@emotion/jest": "^11.8.0",
 		"@testing-library/react": "^13.4.0",
@@ -126,6 +127,9 @@
 		},
 		"platform_button_item-add-ufo-metrics": {
 			"type": "boolean"
+		},
+		"platform_fix_a11y_selected_and_hovered_state_color": {
+			"type": "boolean"
 		}
 	},
 	"homepage": "https://atlassian.design/components/menu/"