@atlaskit/menu 2.2.1 → 2.3.1

package/__perf__/custom.tsx

@@ -1,4 +1,4 @@
-import React, { Ref } from 'react';
+import React, { type Ref } from 'react';
 
 import CustomItem from '../src/menu-item/custom-item';
 import type { CustomItemComponentProps, CustomItemProps } from '../src/types';

package/__perf__/utils/interaction-tasks.tsx

@@ -1,7 +1,7 @@
 import { fireEvent } from '@testing-library/dom';
 import {
-  InteractionTaskArgs,
-  PublicInteractionTask,
+  type InteractionTaskArgs,
+  type PublicInteractionTask,
 } from 'storybook-addon-performance';
 
 export const interactionTasks: PublicInteractionTask[] = [

package/codemods/0.7.0-change-css-fn-prop.tsx

@@ -1,7 +1,8 @@
-import { NodePath } from 'ast-types/lib/node-path';
-import core, {
+import { type NodePath } from 'ast-types/lib/node-path';
+import type {
   API,
   ASTPath,
+  default as core,
   FileInfo,
   ImportDeclaration,
   ImportSpecifier,

package/codemods/2.1.0-invalid-link-item-to-button-item.tsx

@@ -1,6 +1,7 @@
-import core, {
+import type {
   API,
   ASTPath,
+  default as core,
   FileInfo,
   ImportDeclaration,
   ImportSpecifier,

package/codemods/helpers/generic.tsx

@@ -1,6 +1,7 @@
-import { NodePath } from 'ast-types/lib/node-path';
-import core, {
+import { type NodePath } from 'ast-types/lib/node-path';
+import type {
   ASTPath,
+  default as core,
   ImportDeclaration,
   ImportDefaultSpecifier,
   ImportSpecifier,
@@ -9,7 +10,7 @@ import core, {
   Node,
   Program,
 } from 'jscodeshift';
-import { Collection } from 'jscodeshift/src/Collection';
+import { type Collection } from 'jscodeshift/src/Collection';
 
 export type Nullable<T> = T | null;
 

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

@@ -10,7 +10,7 @@ var _react2 = require("@emotion/react");
 var _deprecationWarning = require("@atlaskit/ds-lib/deprecation-warning");
 var _focusRing = _interopRequireDefault(require("@atlaskit/focus-ring"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
-var _inline = _interopRequireDefault(require("@atlaskit/primitives/inline"));
+var _primitives = require("@atlaskit/primitives");
 var _colors = require("@atlaskit/theme/colors");
 var _menuContext = require("./menu-context");
 /** @jsx jsx */
@@ -27,29 +27,35 @@ var beforeAfterElementStyles = (0, _react2.css)({
   justifyContent: 'center',
   flexShrink: 0
 });
-var contentStyles = (0, _react2.css)({
-  display: 'flex',
-  justifyContent: 'center',
-  flexDirection: 'column',
-  flexGrow: 1,
-  lineHeight: "var(--ds-font-lineHeight-100, 16px)",
+var contentStyles = (0, _primitives.xcss)({
   outline: 'none',
   overflow: 'hidden',
   textAlign: 'left'
 });
+var baseContentStyles = (0, _primitives.xcss)({
+  lineHeight: "var(--ds-font-lineHeight-100, 16px)"
+});
 var truncateStyles = (0, _react2.css)({
   display: 'block',
   overflow: 'hidden',
   textOverflow: 'ellipsis',
   whiteSpace: 'nowrap'
 });
+var titleStyles = (0, _react2.css)({
+  font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
+});
 var wordBreakStyles = (0, _react2.css)({
   wordBreak: 'break-word'
 });
 var descriptionStyles = (0, _react2.css)({
-  marginTop: "var(--ds-space-050, 4px)",
-  color: "var(--ds-text-subtlest, ".concat(_colors.N200, ")"),
-  fontSize: "var(--ds-font-size-075, 12px)"
+  color: "var(--ds-text-subtlest, ".concat(_colors.N200, ")")
+});
+var baseDescriptionStyles = (0, _react2.css)({
+  fontSize: "var(--ds-font-size-075, 12px)",
+  marginBlockStart: "var(--ds-space-050, 4px)"
+});
+var tokenizedDescriptionStyles = (0, _react2.css)({
+  font: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
 });
 var disabledDescriptionStyles = (0, _react2.css)({
   color: "var(--ds-text-disabled, ".concat(_colors.N200, ")")
@@ -65,7 +71,6 @@ var primitiveStyles = (0, _react2.css)({
   margin: "var(--ds-space-0, 0px)",
   alignItems: 'center',
   border: 0,
-  fontSize: "var(--ds-font-size-100, 14px)",
   outline: 0,
   textDecoration: 'none',
   userSelect: 'none',
@@ -76,6 +81,9 @@ var primitiveStyles = (0, _react2.css)({
     textDecoration: 'none'
   }
 });
+var primitiveBaseStyles = (0, _react2.css)({
+  fontSize: "var(--ds-font-size-100, 14px)"
+});
 var spacingMapStyles = {
   cozy: (0, _react2.css)({
     // 8 * 2 (16) + icon (24) === 40
@@ -119,23 +127,23 @@ var selectedBorderStyles = (0, _react2.css)({
   '&::before': {
     width: 2,
     position: 'absolute',
-    top: 0,
-    bottom: 0,
-    left: 0,
     background: "var(--ds-border-selected, transparent)",
-    content: '""'
+    content: '""',
+    insetBlockEnd: 0,
+    insetBlockStart: 0,
+    insetInlineStart: 0
   }
 });
 var selectedNotchStyles = (0, _react2.css)({
   '&::before': {
     width: 4,
     position: 'absolute',
-    top: "var(--ds-space-150, 12px)",
-    bottom: "var(--ds-space-150, 12px)",
-    left: 0,
     background: "var(--ds-border-selected, transparent)",
     borderRadius: "0 ".concat("var(--ds-border-radius, 4px)", " ", "var(--ds-border-radius, 4px)", " 0"),
-    content: '""'
+    content: '""',
+    insetBlockEnd: "var(--ds-space-150, 12px)",
+    insetBlockStart: "var(--ds-space-150, 12px)",
+    insetInlineStart: 0
   }
 });
 var selectedStyles = (0, _react2.css)({
@@ -202,8 +210,8 @@ var MenuItemPrimitive = function MenuItemPrimitive(_ref) {
     return (0, _react2.jsx)(_focusRing.default, {
       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: (0, _react2.jsx)(_inline.default, {
+      className: cx([cn([positionRelativeStyles, primitiveStyles, (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.menu-tokenised-typography-styles') ? undefined : primitiveBaseStyles, spacingMapStyles[spacing], !isDisabled && !isSelected && unselectedStyles, !isDisabled && isSelected && [selectedStyles, [selectionStyle === 'border' && selectedBorderStyles, selectionStyle === 'notch' && selectedNotchStyles]], isDisabled ? disabledStyles : interactiveStyles]), UNSAFE_className]),
+      children: (0, _react2.jsx)(_primitives.Inline, {
         as: "span",
         spread: "space-between",
         alignBlock: "center",
@@ -214,15 +222,17 @@ var MenuItemPrimitive = function MenuItemPrimitive(_ref) {
         "data-item-elem-before": true,
         css: beforeAfterElementStyles,
         "data-testid": testId && "".concat(testId, "--icon-before")
-      }, iconBefore), title && (0, _react2.jsx)("span", {
-        css: contentStyles
+      }, iconBefore), title && (0, _react2.jsx)(_primitives.Stack, {
+        alignBlock: "center",
+        grow: "fill",
+        xcss: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.menu-tokenised-typography-styles') ? contentStyles : [contentStyles, baseContentStyles]
       }, renderTitle('span', {
         children: title,
-        className: cn(shouldTitleWrap ? wordBreakStyles : truncateStyles),
+        className: cn((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.menu-tokenised-typography-styles') ? titleStyles : undefined, shouldTitleWrap ? wordBreakStyles : truncateStyles),
         'data-item-title': true
       }), description && (0, _react2.jsx)("span", {
         "data-item-description": true,
-        css: [descriptionStyles, isDisabled && disabledDescriptionStyles, shouldDescriptionWrap ? wordBreakStyles : truncateStyles]
+        css: [descriptionStyles, (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.menu-tokenised-typography-styles') ? tokenizedDescriptionStyles : baseDescriptionStyles, isDisabled && disabledDescriptionStyles, shouldDescriptionWrap ? wordBreakStyles : truncateStyles]
       }, description)), iconAfter && (0, _react2.jsx)("span", {
         "data-item-elem-after": true,
         css: beforeAfterElementStyles,

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

@@ -50,7 +50,9 @@ function (props, ref) {
   }
   (0, _deprecationWarning.propDeprecationWarning)("@atlaskit/menu" || '', 'cssFn', cssFn !== _noop.default, '' // TODO: Create DAC post when primitives/xcss are available as alternatives
   );
-  return (0, _react2.jsx)(_menuItemPrimitive.default, (0, _extends2.default)({
+  return (0, _react2.jsx)(_menuItemPrimitive.default
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+  , (0, _extends2.default)({
     className: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.unsafe-overrides-killswitch_c8j9m') ? undefined : UNSAFE_className
   }, rest, {
     // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
@@ -76,6 +78,7 @@ function (props, ref) {
     return (0, _react2.jsx)("button", (0, _extends2.default)({
       "data-testid": testId
     }, rest, {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       className: className,
       ref: ref,
       disabled: isDisabled,

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

@@ -55,7 +55,9 @@ var CustomItem = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardR
   }
   (0, _deprecationWarning.propDeprecationWarning)("@atlaskit/menu" || '', 'cssFn', cssFn !== _noop.default, '' // TODO: Create DAC post when primitives/xcss are available as alternatives
   );
-  return (0, _react2.jsx)(_menuItemPrimitive.default, (0, _extends2.default)({
+  return (0, _react2.jsx)(_menuItemPrimitive.default
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+  , (0, _extends2.default)({
     className: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.unsafe-overrides-killswitch_c8j9m') ? undefined : UNSAFE_className
   }, rest, {
     // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
@@ -81,6 +83,7 @@ var CustomItem = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardR
     return (0, _react2.jsx)(Component, (0, _extends2.default)({
       "data-testid": testId
     }, rest, {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       className: className,
       ref: ref,
       draggable: false,

package/dist/cjs/menu-item/heading-item.js

@@ -20,13 +20,18 @@ var itemHeadingContentHeight = _typography.headingSizes.h100.lineHeight;
 var itemHeadingFontSize = _typography.headingSizes.h100.size;
 var headingStyles = (0, _react2.css)({
   color: "var(--ds-text-subtle, ".concat(_colors.N300, ")"),
-  fontSize: itemHeadingFontSize,
-  fontWeight: "var(--ds-font-weight-bold, 700)",
-  lineHeight: itemHeadingContentHeight / itemHeadingFontSize,
   paddingBlock: "var(--ds-space-0, 0px)",
   paddingInline: "var(--ds-space-200, 16px)",
   textTransform: 'uppercase'
 });
+var baseHeadingStyles = (0, _react2.css)({
+  fontSize: itemHeadingFontSize,
+  fontWeight: "var(--ds-font-weight-bold, 700)",
+  lineHeight: itemHeadingContentHeight / itemHeadingFontSize
+});
+var tokenizedHeadingStyles = (0, _react2.css)({
+  font: "var(--ds-font-heading-xxsmall, normal 600 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
+});
 
 /**
  * __Heading item__
@@ -50,14 +55,16 @@ var HeadingItem = /*#__PURE__*/(0, _react.memo)(function (_ref) {
   );
   var UNSAFE_overrides = (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.unsafe-overrides-killswitch_c8j9m') ? undefined : (0, _react2.css)(cssFn(undefined));
   return (0, _react2.jsx)("div", (0, _extends2.default)({
-    css: [headingStyles,
+    css: [headingStyles, (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.menu-tokenised-typography-styles') ? tokenizedHeadingStyles : baseHeadingStyles,
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
     UNSAFE_overrides],
     role: "heading",
     "aria-level": headingLevel,
     "data-testid": testId,
     "data-ds--menu--heading-item": true,
-    id: id,
+    id: id
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
     className: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.unsafe-overrides-killswitch_c8j9m') ? undefined : UNSAFE_className
   }, rest), children);
 });

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

@@ -56,6 +56,7 @@ function (props, ref) {
   (0, _deprecationWarning.propDeprecationWarning)("@atlaskit/menu" || '', 'cssFn', cssFn !== _noop.default, '' // TODO: Create DAC post when primitives/xcss are available as alternatives
   );
   return (0, _react2.jsx)(_menuItemPrimitive.default, (0, _extends2.default)({}, rest, {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     className: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.unsafe-overrides-killswitch_c8j9m') ? undefined : UNSAFE_className
     // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
     ,
@@ -81,6 +82,7 @@ function (props, ref) {
     return (0, _react2.jsx)("a", (0, _extends2.default)({
       "data-testid": testId
     }, rest, {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       className: className,
       href: isDisabled ? undefined : href,
       draggable: false

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

@@ -59,7 +59,10 @@ var SkeletonHeadingItem = function SkeletonHeadingItem(_ref) {
   }, function (_ref2) {
     var className = _ref2.className;
     return (0, _react.jsx)("div", {
-      className: className,
+      // 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
+      ,
       style: {
         '--width': width
       },

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

@@ -113,7 +113,10 @@ var SkeletonItem = function SkeletonItem(_ref) {
   }, function (_ref2) {
     var className = _ref2.className;
     return (0, _react.jsx)("div", {
-      className: className,
+      // 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
+      ,
       style: {
         '--width': width
       },

package/dist/cjs/menu-section/menu-group.js

@@ -53,7 +53,9 @@ var MenuGroup = function MenuGroup(_ref) {
     },
     css: baseStyles,
     "data-testid": testId,
-    role: role,
+    role: role
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
     className: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.unsafe-overrides-killswitch_c8j9m') ? undefined : UNSAFE_className
     // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
   }, rest))));

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

@@ -109,11 +109,14 @@ var Section = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var UNSAFE_headingOverrides = (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.unsafe-overrides-killswitch_c8j9m') ? undefined : overrides && overrides.HeadingItem && overrides.HeadingItem.cssFn;
   var content = isList ? (0, _react2.jsx)("ul", {
     style: {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
       margin: 0,
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
       padding: 0
     }
   }, _react.Children.map(_react.Children.toArray(children), function (child, index) {
     return (0, _react2.jsx)("li", {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
       style: {
         listStyleType: 'none',
         margin: 0,
@@ -130,6 +133,7 @@ var Section = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     "aria-hidden": true
   }, title), content) : (0, _react2.jsx)(_react.Fragment, null, content);
   return (0, _react2.jsx)("div", (0, _extends2.default)({}, rest, {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     className: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.unsafe-overrides-killswitch_c8j9m') ? undefined : UNSAFE_className,
     id: id
     // NOTE: Firefox allows elements that have "overflow: auto" to gain focus (as if it had tab-index="0")

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

@@ -4,7 +4,7 @@ import { ClassNames, css, jsx } from '@emotion/react';
 import { propDeprecationWarning } from '@atlaskit/ds-lib/deprecation-warning';
 import FocusRing from '@atlaskit/focus-ring';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
-import Inline from '@atlaskit/primitives/inline';
+import { Inline, Stack, xcss } from '@atlaskit/primitives';
 import { N20, N200, N30 } from '@atlaskit/theme/colors';
 import { SELECTION_STYLE_CONTEXT_DO_NOT_USE, SpacingContext } from './menu-context';
 const defaultRender = (Component, props) =>
@@ -16,29 +16,35 @@ const beforeAfterElementStyles = css({
   justifyContent: 'center',
   flexShrink: 0
 });
-const contentStyles = css({
-  display: 'flex',
-  justifyContent: 'center',
-  flexDirection: 'column',
-  flexGrow: 1,
-  lineHeight: "var(--ds-font-lineHeight-100, 16px)",
+const contentStyles = xcss({
   outline: 'none',
   overflow: 'hidden',
   textAlign: 'left'
 });
+const baseContentStyles = xcss({
+  lineHeight: "var(--ds-font-lineHeight-100, 16px)"
+});
 const truncateStyles = css({
   display: 'block',
   overflow: 'hidden',
   textOverflow: 'ellipsis',
   whiteSpace: 'nowrap'
 });
+const titleStyles = css({
+  font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
+});
 const wordBreakStyles = css({
   wordBreak: 'break-word'
 });
 const descriptionStyles = css({
-  marginTop: "var(--ds-space-050, 4px)",
-  color: `var(--ds-text-subtlest, ${N200})`,
-  fontSize: "var(--ds-font-size-075, 12px)"
+  color: `var(--ds-text-subtlest, ${N200})`
+});
+const baseDescriptionStyles = css({
+  fontSize: "var(--ds-font-size-075, 12px)",
+  marginBlockStart: "var(--ds-space-050, 4px)"
+});
+const tokenizedDescriptionStyles = css({
+  font: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
 });
 const disabledDescriptionStyles = css({
   color: `var(--ds-text-disabled, ${N200})`
@@ -54,7 +60,6 @@ const primitiveStyles = css({
   margin: "var(--ds-space-0, 0px)",
   alignItems: 'center',
   border: 0,
-  fontSize: "var(--ds-font-size-100, 14px)",
   outline: 0,
   textDecoration: 'none',
   userSelect: 'none',
@@ -65,6 +70,9 @@ const primitiveStyles = css({
     textDecoration: 'none'
   }
 });
+const primitiveBaseStyles = css({
+  fontSize: "var(--ds-font-size-100, 14px)"
+});
 const spacingMapStyles = {
   cozy: css({
     // 8 * 2 (16) + icon (24) === 40
@@ -108,23 +116,23 @@ const selectedBorderStyles = css({
   '&::before': {
     width: 2,
     position: 'absolute',
-    top: 0,
-    bottom: 0,
-    left: 0,
     background: "var(--ds-border-selected, transparent)",
-    content: '""'
+    content: '""',
+    insetBlockEnd: 0,
+    insetBlockStart: 0,
+    insetInlineStart: 0
   }
 });
 const selectedNotchStyles = css({
   '&::before': {
     width: 4,
     position: 'absolute',
-    top: "var(--ds-space-150, 12px)",
-    bottom: "var(--ds-space-150, 12px)",
-    left: 0,
     background: "var(--ds-border-selected, transparent)",
     borderRadius: `0 ${"var(--ds-border-radius, 4px)"} ${"var(--ds-border-radius, 4px)"} 0`,
-    content: '""'
+    content: '""',
+    insetBlockEnd: "var(--ds-space-150, 12px)",
+    insetBlockStart: "var(--ds-space-150, 12px)",
+    insetInlineStart: 0
   }
 });
 const selectedStyles = css({
@@ -189,7 +197,7 @@ const MenuItemPrimitive = ({
     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]),
+      className: cx([cn([positionRelativeStyles, primitiveStyles, getBooleanFF('platform.design-system-team.menu-tokenised-typography-styles') ? undefined : primitiveBaseStyles, spacingMapStyles[spacing], !isDisabled && !isSelected && unselectedStyles, !isDisabled && isSelected && [selectedStyles, [selectionStyle === 'border' && selectedBorderStyles, selectionStyle === 'notch' && selectedNotchStyles]], isDisabled ? disabledStyles : interactiveStyles]), UNSAFE_className]),
       children: jsx(Inline, {
         as: "span",
         spread: "space-between",
@@ -201,15 +209,17 @@ const MenuItemPrimitive = ({
         "data-item-elem-before": true,
         css: beforeAfterElementStyles,
         "data-testid": testId && `${testId}--icon-before`
-      }, iconBefore), title && jsx("span", {
-        css: contentStyles
+      }, iconBefore), title && jsx(Stack, {
+        alignBlock: "center",
+        grow: "fill",
+        xcss: getBooleanFF('platform.design-system-team.menu-tokenised-typography-styles') ? contentStyles : [contentStyles, baseContentStyles]
       }, renderTitle('span', {
         children: title,
-        className: cn(shouldTitleWrap ? wordBreakStyles : truncateStyles),
+        className: cn(getBooleanFF('platform.design-system-team.menu-tokenised-typography-styles') ? titleStyles : undefined, shouldTitleWrap ? wordBreakStyles : truncateStyles),
         'data-item-title': true
       }), description && jsx("span", {
         "data-item-description": true,
-        css: [descriptionStyles, isDisabled && disabledDescriptionStyles, shouldDescriptionWrap ? wordBreakStyles : truncateStyles]
+        css: [descriptionStyles, getBooleanFF('platform.design-system-team.menu-tokenised-typography-styles') ? tokenizedDescriptionStyles : baseDescriptionStyles, isDisabled && disabledDescriptionStyles, shouldDescriptionWrap ? wordBreakStyles : truncateStyles]
       }, description)), iconAfter && jsx("span", {
         "data-item-elem-after": true,
         css: beforeAfterElementStyles,

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

@@ -44,7 +44,9 @@ const ButtonItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(
   }
   propDeprecationWarning("@atlaskit/menu" || '', 'cssFn', cssFn !== noop, '' // TODO: Create DAC post when primitives/xcss are available as alternatives
   );
-  return jsx(MenuItemPrimitive, _extends({
+  return jsx(MenuItemPrimitive
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+  , _extends({
     className: getBooleanFF('platform.design-system-team.unsafe-overrides-killswitch_c8j9m') ? undefined : UNSAFE_className
   }, rest, {
     // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
@@ -70,6 +72,7 @@ const ButtonItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(
   }) => jsx("button", _extends({
     "data-testid": testId
   }, rest, {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     className: className,
     ref: ref,
     disabled: isDisabled,

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

@@ -49,7 +49,9 @@ const CustomItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   }
   propDeprecationWarning("@atlaskit/menu" || '', 'cssFn', cssFn !== noop, '' // TODO: Create DAC post when primitives/xcss are available as alternatives
   );
-  return jsx(MenuItemPrimitive, _extends({
+  return jsx(MenuItemPrimitive
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+  , _extends({
     className: getBooleanFF('platform.design-system-team.unsafe-overrides-killswitch_c8j9m') ? undefined : UNSAFE_className
   }, rest, {
     // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
@@ -75,6 +77,7 @@ const CustomItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   }) => jsx(Component, _extends({
     "data-testid": testId
   }, rest, {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     className: className,
     ref: ref,
     draggable: false,

package/dist/es2019/menu-item/heading-item.js

@@ -11,13 +11,18 @@ const itemHeadingContentHeight = headingSizes.h100.lineHeight;
 const itemHeadingFontSize = headingSizes.h100.size;
 const headingStyles = css({
   color: `var(--ds-text-subtle, ${N300})`,
-  fontSize: itemHeadingFontSize,
-  fontWeight: "var(--ds-font-weight-bold, 700)",
-  lineHeight: itemHeadingContentHeight / itemHeadingFontSize,
   paddingBlock: "var(--ds-space-0, 0px)",
   paddingInline: "var(--ds-space-200, 16px)",
   textTransform: 'uppercase'
 });
+const baseHeadingStyles = css({
+  fontSize: itemHeadingFontSize,
+  fontWeight: "var(--ds-font-weight-bold, 700)",
+  lineHeight: itemHeadingContentHeight / itemHeadingFontSize
+});
+const tokenizedHeadingStyles = css({
+  font: "var(--ds-font-heading-xxsmall, normal 600 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
+});
 
 /**
  * __Heading item__
@@ -44,14 +49,16 @@ const HeadingItem = /*#__PURE__*/memo(({
   );
   const UNSAFE_overrides = getBooleanFF('platform.design-system-team.unsafe-overrides-killswitch_c8j9m') ? undefined : css(cssFn(undefined));
   return jsx("div", _extends({
-    css: [headingStyles,
+    css: [headingStyles, getBooleanFF('platform.design-system-team.menu-tokenised-typography-styles') ? tokenizedHeadingStyles : baseHeadingStyles,
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
     UNSAFE_overrides],
     role: "heading",
     "aria-level": headingLevel,
     "data-testid": testId,
     "data-ds--menu--heading-item": true,
-    id: id,
+    id: id
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
     className: getBooleanFF('platform.design-system-team.unsafe-overrides-killswitch_c8j9m') ? undefined : UNSAFE_className
   }, rest), children);
 });

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

@@ -50,6 +50,7 @@ const LinkItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(
   propDeprecationWarning("@atlaskit/menu" || '', 'cssFn', cssFn !== noop, '' // TODO: Create DAC post when primitives/xcss are available as alternatives
   );
   return jsx(MenuItemPrimitive, _extends({}, rest, {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     className: getBooleanFF('platform.design-system-team.unsafe-overrides-killswitch_c8j9m') ? undefined : UNSAFE_className
     // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
     ,
@@ -75,6 +76,7 @@ const LinkItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(
   }) => jsx("a", _extends({
     "data-testid": testId
   }, rest, {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     className: className,
     href: isDisabled ? undefined : href,
     draggable: false

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

@@ -51,7 +51,10 @@ const SkeletonHeadingItem = ({
   }, ({
     className
   }) => jsx("div", {
-    className: className,
+    // 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
+    ,
     style: {
       '--width': width
     },

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

@@ -107,7 +107,10 @@ const SkeletonItem = ({
   }, ({
     className
   }) => jsx("div", {
-    className: className,
+    // 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
+    ,
     style: {
       '--width': width
     },

package/dist/es2019/menu-section/menu-group.js

@@ -47,7 +47,9 @@ const MenuGroup = ({
   },
   css: baseStyles,
   "data-testid": testId,
-  role: role,
+  role: role
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+  ,
   className: getBooleanFF('platform.design-system-team.unsafe-overrides-killswitch_c8j9m') ? undefined : UNSAFE_className
   // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
 }, rest))));

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

@@ -104,10 +104,13 @@ const Section = /*#__PURE__*/forwardRef(({
   const UNSAFE_headingOverrides = getBooleanFF('platform.design-system-team.unsafe-overrides-killswitch_c8j9m') ? undefined : overrides && overrides.HeadingItem && overrides.HeadingItem.cssFn;
   const content = isList ? jsx("ul", {
     style: {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
       margin: 0,
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
       padding: 0
     }
   }, Children.map(Children.toArray(children), (child, index) => jsx("li", {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
     style: {
       listStyleType: 'none',
       margin: 0,
@@ -123,6 +126,7 @@ const Section = /*#__PURE__*/forwardRef(({
     "aria-hidden": true
   }, title), content) : jsx(Fragment, null, content);
   return jsx("div", _extends({}, rest, {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     className: getBooleanFF('platform.design-system-team.unsafe-overrides-killswitch_c8j9m') ? undefined : UNSAFE_className,
     id: id
     // NOTE: Firefox allows elements that have "overflow: auto" to gain focus (as if it had tab-index="0")