@atlaskit/menu 2.3.0 → 2.4.0

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

@@ -74,10 +74,10 @@ var primitiveStyles = (0, _react2.css)({
   outline: 0,
   textDecoration: 'none',
   userSelect: 'none',
-  '::-moz-focus-inner': {
+  '&::-moz-focus-inner': {
     border: 0
   },
-  ':hover': {
+  '&:hover': {
     textDecoration: 'none'
   }
 });
@@ -103,14 +103,14 @@ var interactiveStyles = (0, _react2.css)({
 var unselectedStyles = (0, _react2.css)({
   backgroundColor: "var(--ds-background-neutral-subtle, transparent)",
   color: 'currentColor',
-  ':visited': {
+  '&:visited': {
     color: 'currentColor'
   },
-  ':hover': {
+  '&:hover': {
     backgroundColor: "var(--ds-background-neutral-subtle-hovered, ".concat(_colors.N20, ")"),
     color: 'currentColor'
   },
-  ':active': {
+  '&:active': {
     backgroundColor: "var(--ds-background-neutral-subtle-pressed, ".concat(_colors.N30, ")"),
     boxShadow: 'none',
     color: 'currentColor'
@@ -150,14 +150,14 @@ var selectedStyles = (0, _react2.css)({
   backgroundColor: "var(--ds-background-selected, ".concat(_colors.N20, ")"),
   // Fallback set as babel plugin inserts one otherwise
   color: "var(--ds-text-selected, currentColor)",
-  ':visited': {
+  '&:visited': {
     color: "var(--ds-text-selected, currentColor)"
   },
-  ':hover': {
+  '&:hover': {
     backgroundColor: "var(--ds-background-selected-hovered, ".concat(_colors.N20, ")"),
     color: "var(--ds-text-selected, currentColor)"
   },
-  ':active': {
+  '&:active': {
     backgroundColor: "var(--ds-background-selected-pressed, ".concat(_colors.N30, ")"),
     color: "var(--ds-text-selected, currentColor)"
   }

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

@@ -21,13 +21,13 @@ var itemHeadingFontSize = _typography.headingSizes.h100.size;
 var headingStyles = (0, _react2.css)({
   color: "var(--ds-text-subtle, ".concat(_colors.N300, ")"),
   paddingBlock: "var(--ds-space-0, 0px)",
-  paddingInline: "var(--ds-space-200, 16px)"
+  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,
-  textTransform: 'uppercase'
+  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)"
@@ -62,7 +62,9 @@ var HeadingItem = /*#__PURE__*/(0, _react.memo)(function (_ref) {
     "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

@@ -15,7 +15,7 @@ var _colors = require("@atlaskit/theme/colors");
 var _constants = require("@atlaskit/theme/constants");
 var _typography = require("@atlaskit/theme/typography");
 var _headingItem = _interopRequireDefault(require("../menu-item/heading-item"));
-var _excluded = ["children", "overrides", "title", "testId", "isScrollable", "hasSeparator", "id", "isList", "className"];
+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 */
 /** @jsx jsx */
 // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
@@ -96,6 +96,7 @@ var Section = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var children = _ref.children,
     overrides = _ref.overrides,
     title = _ref.title,
+    titleId = _ref.titleId,
     testId = _ref.testId,
     isScrollable = _ref.isScrollable,
     hasSeparator = _ref.hasSeparator,
@@ -109,11 +110,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 +134,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")
@@ -137,6 +142,7 @@ var Section = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     ,
     css: [sectionStyles, isScrollable ? scrollableStyles : unscrollableStyles, hasSeparator ? (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.section-1px-seperator-borders') ? thinSeparatorStyles : thickSeparatorStyles : noSeparatorStyles],
     "aria-label": title,
+    "aria-labelledby": titleId,
     "data-testid": testId,
     role: "group",
     "data-section": true,

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

@@ -63,10 +63,10 @@ const primitiveStyles = css({
   outline: 0,
   textDecoration: 'none',
   userSelect: 'none',
-  '::-moz-focus-inner': {
+  '&::-moz-focus-inner': {
     border: 0
   },
-  ':hover': {
+  '&:hover': {
     textDecoration: 'none'
   }
 });
@@ -92,14 +92,14 @@ const interactiveStyles = css({
 const unselectedStyles = css({
   backgroundColor: "var(--ds-background-neutral-subtle, transparent)",
   color: 'currentColor',
-  ':visited': {
+  '&:visited': {
     color: 'currentColor'
   },
-  ':hover': {
+  '&:hover': {
     backgroundColor: `var(--ds-background-neutral-subtle-hovered, ${N20})`,
     color: 'currentColor'
   },
-  ':active': {
+  '&:active': {
     backgroundColor: `var(--ds-background-neutral-subtle-pressed, ${N30})`,
     boxShadow: 'none',
     color: 'currentColor'
@@ -139,14 +139,14 @@ const selectedStyles = css({
   backgroundColor: `var(--ds-background-selected, ${N20})`,
   // Fallback set as babel plugin inserts one otherwise
   color: "var(--ds-text-selected, currentColor)",
-  ':visited': {
+  '&:visited': {
     color: "var(--ds-text-selected, currentColor)"
   },
-  ':hover': {
+  '&:hover': {
     backgroundColor: `var(--ds-background-selected-hovered, ${N20})`,
     color: "var(--ds-text-selected, currentColor)"
   },
-  ':active': {
+  '&:active': {
     backgroundColor: `var(--ds-background-selected-pressed, ${N30})`,
     color: "var(--ds-text-selected, currentColor)"
   }

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

@@ -12,13 +12,13 @@ const itemHeadingFontSize = headingSizes.h100.size;
 const headingStyles = css({
   color: `var(--ds-text-subtle, ${N300})`,
   paddingBlock: "var(--ds-space-0, 0px)",
-  paddingInline: "var(--ds-space-200, 16px)"
+  paddingInline: "var(--ds-space-200, 16px)",
+  textTransform: 'uppercase'
 });
 const baseHeadingStyles = css({
   fontSize: itemHeadingFontSize,
   fontWeight: "var(--ds-font-weight-bold, 700)",
-  lineHeight: itemHeadingContentHeight / itemHeadingFontSize,
-  textTransform: 'uppercase'
+  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)"
@@ -56,7 +56,9 @@ const HeadingItem = /*#__PURE__*/memo(({
     "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

@@ -87,6 +87,7 @@ const Section = /*#__PURE__*/forwardRef(({
   children,
   overrides,
   title,
+  titleId,
   testId,
   isScrollable,
   hasSeparator,
@@ -104,10 +105,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 +127,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")
@@ -130,6 +135,7 @@ const Section = /*#__PURE__*/forwardRef(({
     ,
     css: [sectionStyles, isScrollable ? scrollableStyles : unscrollableStyles, hasSeparator ? getBooleanFF('platform.design-system-team.section-1px-seperator-borders') ? thinSeparatorStyles : thickSeparatorStyles : noSeparatorStyles],
     "aria-label": title,
+    "aria-labelledby": titleId,
     "data-testid": testId,
     role: "group",
     "data-section": true,

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

@@ -66,10 +66,10 @@ var primitiveStyles = css({
   outline: 0,
   textDecoration: 'none',
   userSelect: 'none',
-  '::-moz-focus-inner': {
+  '&::-moz-focus-inner': {
     border: 0
   },
-  ':hover': {
+  '&:hover': {
     textDecoration: 'none'
   }
 });
@@ -95,14 +95,14 @@ var interactiveStyles = css({
 var unselectedStyles = css({
   backgroundColor: "var(--ds-background-neutral-subtle, transparent)",
   color: 'currentColor',
-  ':visited': {
+  '&:visited': {
     color: 'currentColor'
   },
-  ':hover': {
+  '&:hover': {
     backgroundColor: "var(--ds-background-neutral-subtle-hovered, ".concat(N20, ")"),
     color: 'currentColor'
   },
-  ':active': {
+  '&:active': {
     backgroundColor: "var(--ds-background-neutral-subtle-pressed, ".concat(N30, ")"),
     boxShadow: 'none',
     color: 'currentColor'
@@ -142,14 +142,14 @@ 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': {
+  '&:visited': {
     color: "var(--ds-text-selected, currentColor)"
   },
-  ':hover': {
+  '&:hover': {
     backgroundColor: "var(--ds-background-selected-hovered, ".concat(N20, ")"),
     color: "var(--ds-text-selected, currentColor)"
   },
-  ':active': {
+  '&:active': {
     backgroundColor: "var(--ds-background-selected-pressed, ".concat(N30, ")"),
     color: "var(--ds-text-selected, currentColor)"
   }

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

@@ -43,7 +43,9 @@ function (props, ref) {
   }
   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
@@ -69,6 +71,7 @@ function (props, ref) {
     return 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/esm/menu-item/custom-item.js

@@ -49,7 +49,9 @@ var CustomItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref, ref)
   }
   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 @@ var CustomItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref, ref)
     return 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/esm/menu-item/heading-item.js

@@ -14,13 +14,13 @@ var itemHeadingFontSize = headingSizes.h100.size;
 var headingStyles = css({
   color: "var(--ds-text-subtle, ".concat(N300, ")"),
   paddingBlock: "var(--ds-space-0, 0px)",
-  paddingInline: "var(--ds-space-200, 16px)"
+  paddingInline: "var(--ds-space-200, 16px)",
+  textTransform: 'uppercase'
 });
 var baseHeadingStyles = css({
   fontSize: itemHeadingFontSize,
   fontWeight: "var(--ds-font-weight-bold, 700)",
-  lineHeight: itemHeadingContentHeight / itemHeadingFontSize,
-  textTransform: 'uppercase'
+  lineHeight: itemHeadingContentHeight / itemHeadingFontSize
 });
 var 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)"
@@ -55,7 +55,9 @@ var HeadingItem = /*#__PURE__*/memo(function (_ref) {
     "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/esm/menu-item/link-item.js

@@ -49,6 +49,7 @@ function (props, ref) {
   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
     ,
@@ -74,6 +75,7 @@ function (props, ref) {
     return 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/esm/menu-item/skeleton-heading-item.js

@@ -52,7 +52,10 @@ var SkeletonHeadingItem = function SkeletonHeadingItem(_ref) {
   }, function (_ref2) {
     var className = _ref2.className;
     return 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
       },