@atlaskit/menu 1.9.7 → 1.10.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/menu
 
+## 1.10.0
+
+### Minor Changes
+
+- [`6bb299616f3`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6bb299616f3) - Adds a killswitch to turn off unsafe style overrides via a feature flag.
+
+## 1.9.8
+
+### Patch Changes
+
+- [`56b444b56a8`](https://bitbucket.org/atlassian/atlassian-frontend/commits/56b444b56a8) - Fix a bug where text descenders were cut off at high zoom levels on Windows
+
 ## 1.9.7
 
 ### Patch Changes

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

@@ -32,17 +32,28 @@ var contentStyles = (0, _react2.css)({
   justifyContent: 'center',
   flexDirection: 'column',
   flexGrow: 1,
-  // Fix - avoid clipped text descenders when using standard 16px line-height
   lineHeight: "var(--ds-font-lineHeight-100, 16px)",
   outline: 'none',
-  overflow: 'hidden',
-  textAlign: 'left'
+  textAlign: 'left',
+  // Use "clip" overflow to allow ellipses on x-axis without clipping descenders
+  '@supports not (overflow-x: clip)': {
+    overflow: 'hidden'
+  },
+  '@supports (overflow-x: clip)': {
+    overflowX: 'clip'
+  }
 });
 var truncateStyles = (0, _react2.css)({
   display: 'block',
-  overflow: 'hidden',
   textOverflow: 'ellipsis',
-  whiteSpace: 'nowrap'
+  whiteSpace: 'nowrap',
+  // Use "clip" overflow to allow ellipses on x-axis without clipping descenders
+  '@supports not (overflow-x: clip)': {
+    overflow: 'hidden'
+  },
+  '@supports (overflow-x: clip)': {
+    overflowX: 'clip'
+  }
 });
 var wordBreakStyles = (0, _react2.css)({
   wordBreak: 'break-word'
@@ -181,7 +192,7 @@ var MenuItemPrimitive = function MenuItemPrimitive(_ref) {
     iconAfter = _ref.iconAfter,
     iconBefore = _ref.iconBefore,
     overrides = _ref.overrides,
-    className = _ref.className,
+    UNSAFE_externalClassName = _ref.className,
     _ref$shouldTitleWrap = _ref.shouldTitleWrap,
     shouldTitleWrap = _ref$shouldTitleWrap === void 0 ? false : _ref$shouldTitleWrap,
     _ref$shouldDescriptio = _ref.shouldDescriptionWrap,
@@ -196,13 +207,14 @@ var MenuItemPrimitive = function MenuItemPrimitive(_ref) {
   var spacing = (0, _react.useContext)(_menuContext.SpacingContext);
   var selectionStyle = (0, _react.useContext)(_menuContext.SELECTION_STYLE_CONTEXT_DO_NOT_USE);
   var renderTitle = overrides && overrides.Title && overrides.Title.render || defaultRender;
+  var UNSAFE_className = (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.unsafe-overrides-killswitch_c8j9m') ? undefined : UNSAFE_externalClassName;
   return (0, _react2.jsx)(_react2.ClassNames, null, function (_ref2) {
     var cn = _ref2.css,
       cx = _ref2.cx;
     return (0, _react2.jsx)(_focusRing.default, {
       isInset: true
     }, children({
-      className: cx([cn([(0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.menu-selected-state-change_0see9') && positionRelativeStyles, primitiveStyles, spacingMapStyles[spacing], !isDisabled && !isSelected && unselectedStyles, !isDisabled && isSelected && [selectedStyles, (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.menu-selected-state-change_0see9') && [selectionStyle === 'border' && selectedBorderStyles, selectionStyle === 'notch' && selectedNotchStyles]], isDisabled ? disabledStyles : interactiveStyles]), className]),
+      className: cx([cn([(0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.menu-selected-state-change_0see9') && positionRelativeStyles, primitiveStyles, spacingMapStyles[spacing], !isDisabled && !isSelected && unselectedStyles, !isDisabled && isSelected && [selectedStyles, (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.menu-selected-state-change_0see9') && [selectionStyle === 'border' && selectedBorderStyles, selectionStyle === 'notch' && selectedNotchStyles]], isDisabled ? disabledStyles : interactiveStyles]), UNSAFE_className]),
       children: (0, _react2.jsx)(_inline.default, {
         as: "span",
         spread: "space-between",

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

@@ -11,8 +11,9 @@ var _react = require("react");
 var _react2 = require("@emotion/react");
 var _deprecationWarning = require("@atlaskit/ds-lib/deprecation-warning");
 var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _menuItemPrimitive = _interopRequireDefault(require("../internal/components/menu-item-primitive"));
-var _excluded = ["children", "cssFn", "description", "iconAfter", "iconBefore", "isDisabled", "isSelected", "onClick", "testId", "overrides", "onMouseDown", "shouldTitleWrap", "shouldDescriptionWrap"];
+var _excluded = ["children", "cssFn", "description", "iconAfter", "iconBefore", "isDisabled", "isSelected", "onClick", "testId", "overrides", "onMouseDown", "shouldTitleWrap", "shouldDescriptionWrap", "className"];
 /** @jsx jsx */
 /**
  * __Button item__
@@ -41,6 +42,7 @@ function (props, ref) {
     onMouseDown = props.onMouseDown,
     shouldTitleWrap = props.shouldTitleWrap,
     shouldDescriptionWrap = props.shouldDescriptionWrap,
+    UNSAFE_className = props.className,
     rest = (0, _objectWithoutProperties2.default)(props, _excluded);
   var onMouseDownHandler = onMouseDown;
   if (!children) {
@@ -49,7 +51,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)({}, rest, {
+  return (0, _react2.jsx)(_menuItemPrimitive.default, (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
     overrides: overrides,
     iconBefore: iconBefore,

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

@@ -11,8 +11,9 @@ var _react = require("react");
 var _react2 = require("@emotion/react");
 var _deprecationWarning = require("@atlaskit/ds-lib/deprecation-warning");
 var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _menuItemPrimitive = _interopRequireDefault(require("../internal/components/menu-item-primitive"));
-var _excluded = ["component", "cssFn", "isDisabled", "isSelected", "onClick", "testId", "children", "description", "iconAfter", "iconBefore", "overrides", "onMouseDown", "shouldTitleWrap", "shouldDescriptionWrap"];
+var _excluded = ["component", "cssFn", "isDisabled", "isSelected", "onClick", "testId", "children", "description", "iconAfter", "iconBefore", "overrides", "onMouseDown", "shouldTitleWrap", "shouldDescriptionWrap", "className"];
 /** @jsx jsx */
 var preventEvent = function preventEvent(e) {
   e.preventDefault();
@@ -46,6 +47,7 @@ var CustomItem = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardR
     onMouseDown = _ref.onMouseDown,
     shouldTitleWrap = _ref.shouldTitleWrap,
     shouldDescriptionWrap = _ref.shouldDescriptionWrap,
+    UNSAFE_className = _ref.className,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var onMouseDownHandler = onMouseDown;
   if (!Component) {
@@ -54,7 +56,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)({}, rest, {
+  return (0, _react2.jsx)(_menuItemPrimitive.default, (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
     overrides: overrides,
     description: description,

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

@@ -11,9 +11,10 @@ var _react = require("react");
 var _react2 = require("@emotion/react");
 var _deprecationWarning = require("@atlaskit/ds-lib/deprecation-warning");
 var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _colors = require("@atlaskit/theme/colors");
 var _typography = require("@atlaskit/theme/typography");
-var _excluded = ["children", "testId", "id", "cssFn"];
+var _excluded = ["children", "testId", "id", "cssFn", "className"];
 /** @jsx jsx */
 var itemHeadingContentHeight = _typography.headingSizes.h100.lineHeight;
 var itemHeadingFontSize = _typography.headingSizes.h100.size;
@@ -41,17 +42,20 @@ var HeadingItem = /*#__PURE__*/(0, _react.memo)(function (_ref) {
     id = _ref.id,
     _ref$cssFn = _ref.cssFn,
     cssFn = _ref$cssFn === void 0 ? _noop.default : _ref$cssFn,
+    UNSAFE_className = _ref.className,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   (0, _deprecationWarning.propDeprecationWarning)("@atlaskit/menu", 'cssFn', cssFn !== _noop.default, '' // TODO: Create DAC post when primitives/xcss are available as alternatives
   );
 
+  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,
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-    (0, _react2.css)(cssFn(undefined))],
+    UNSAFE_overrides],
     "data-testid": testId,
     "data-ds--menu--heading-item": true,
-    id: id
+    id: id,
+    className: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.unsafe-overrides-killswitch_c8j9m') ? undefined : UNSAFE_className
   }, rest), children);
 });
 var _default = HeadingItem;

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

@@ -11,8 +11,9 @@ var _react = require("react");
 var _react2 = require("@emotion/react");
 var _deprecationWarning = require("@atlaskit/ds-lib/deprecation-warning");
 var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _menuItemPrimitive = _interopRequireDefault(require("../internal/components/menu-item-primitive"));
-var _excluded = ["children", "href", "cssFn", "description", "iconAfter", "iconBefore", "isDisabled", "isSelected", "onClick", "testId", "overrides", "onMouseDown", "shouldTitleWrap", "shouldDescriptionWrap"];
+var _excluded = ["children", "href", "cssFn", "description", "iconAfter", "iconBefore", "isDisabled", "isSelected", "onClick", "testId", "overrides", "onMouseDown", "shouldTitleWrap", "shouldDescriptionWrap", "className"];
 /** @jsx jsx */
 var preventEvent = function preventEvent(e) {
   e.preventDefault();
@@ -46,6 +47,7 @@ function (props, ref) {
     onMouseDown = props.onMouseDown,
     shouldTitleWrap = props.shouldTitleWrap,
     shouldDescriptionWrap = props.shouldDescriptionWrap,
+    UNSAFE_className = props.className,
     rest = (0, _objectWithoutProperties2.default)(props, _excluded);
   var onMouseDownHandler = onMouseDown;
   if (!children) {
@@ -55,7 +57,9 @@ function (props, ref) {
   );
 
   return (0, _react2.jsx)(_menuItemPrimitive.default, (0, _extends2.default)({}, rest, {
+    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
+    ,
     overrides: overrides,
     iconBefore: iconBefore,
     iconAfter: iconAfter,

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

@@ -8,6 +8,7 @@ exports.default = void 0;
 var _react = require("@emotion/react");
 var _deprecationWarning = require("@atlaskit/ds-lib/deprecation-warning");
 var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _colors = require("@atlaskit/theme/colors");
 var _skeletonShimmer = _interopRequireDefault(require("../internal/components/skeleton-shimmer"));
 /** @jsx jsx */
@@ -53,6 +54,7 @@ var SkeletonHeadingItem = function SkeletonHeadingItem(_ref) {
   (0, _deprecationWarning.propDeprecationWarning)("@atlaskit/menu", 'cssFn', cssFn !== _noop.default, '' // TODO: Create DAC post when primitives/xcss are available as alternatives
   );
 
+  var UNSAFE_overrides = (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.unsafe-overrides-killswitch_c8j9m') ? undefined : (0, _react.css)(cssFn(undefined));
   return (0, _react.jsx)(_skeletonShimmer.default, {
     isShimmering: isShimmering
   }, function (_ref2) {
@@ -64,7 +66,7 @@ var SkeletonHeadingItem = function SkeletonHeadingItem(_ref) {
       },
       css: [skeletonStyles, width ? customWidthStyles : defaultWidthStyles,
       // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-      (0, _react.css)(cssFn(undefined))],
+      UNSAFE_overrides],
       "data-ds--menu--skeleton-heading-item": true,
       "data-testid": testId
     });

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

@@ -8,6 +8,7 @@ exports.default = void 0;
 var _react = require("@emotion/react");
 var _deprecationWarning = require("@atlaskit/ds-lib/deprecation-warning");
 var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _colors = require("@atlaskit/theme/colors");
 var _constants = require("@atlaskit/theme/constants");
 var _skeletonShimmer = _interopRequireDefault(require("../internal/components/skeleton-shimmer"));
@@ -110,6 +111,7 @@ var SkeletonItem = function SkeletonItem(_ref) {
   (0, _deprecationWarning.propDeprecationWarning)("@atlaskit/menu", 'cssFn', cssFn !== _noop.default, '' // TODO: Create DAC post when primitives/xcss are available as alternatives
   );
 
+  var UNSAFE_overrides = (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.unsafe-overrides-killswitch_c8j9m') ? undefined : (0, _react.css)(cssFn());
   return (0, _react.jsx)(_skeletonShimmer.default, {
     isShimmering: isShimmering
   }, function (_ref2) {
@@ -121,7 +123,7 @@ var SkeletonItem = function SkeletonItem(_ref) {
       },
       css: [skeletonStyles, (hasAvatar || hasIcon) && beforeElementStyles, hasAvatar && avatarStyles, hasIcon && iconStyles, width ? customWidthStyles : defaultWidthStyles,
       // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-      (0, _react.css)(cssFn())],
+      UNSAFE_overrides],
       "data-testid": testId
     });
   });

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

@@ -9,8 +9,9 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = require("@emotion/react");
 var _dsExplorations = require("@atlaskit/ds-explorations");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _menuContext = require("../internal/components/menu-context");
-var _excluded = ["maxWidth", "minWidth", "minHeight", "maxHeight", "testId", "role", "spacing"];
+var _excluded = ["maxWidth", "minWidth", "minHeight", "maxHeight", "testId", "role", "spacing", "className"];
 /** @jsx jsx */
 /**
  * __Menu group__
@@ -29,6 +30,7 @@ var MenuGroup = function MenuGroup(_ref) {
     role = _ref.role,
     _ref$spacing = _ref.spacing,
     spacing = _ref$spacing === void 0 ? 'cozy' : _ref$spacing,
+    UNSAFE_className = _ref.className,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   return (0, _react.jsx)(_menuContext.SpacingContext.Provider, {
     value: spacing
@@ -46,7 +48,8 @@ var MenuGroup = function MenuGroup(_ref) {
     overflow: "auto",
     testId: testId,
     role: role,
-    position: "static"
+    position: "static",
+    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

@@ -10,11 +10,12 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 var _react = require("react");
 var _react2 = require("@emotion/react");
 var _deprecationWarning = require("@atlaskit/ds-lib/deprecation-warning");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 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"];
+var _excluded = ["children", "overrides", "title", "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
@@ -98,10 +99,12 @@ var Section = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     id = _ref.id,
     _ref$isList = _ref.isList,
     isList = _ref$isList === void 0 ? false : _ref$isList,
+    UNSAFE_className = _ref.className,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   (0, _deprecationWarning.propDeprecationWarning)("@atlaskit/menu", 'overrides', overrides !== undefined, '' // TODO: Create DAC post when primitives/xcss are available as alternatives
   );
 
+  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: {
       margin: 0,
@@ -120,11 +123,12 @@ var Section = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var childrenMarkup = title !== undefined ? (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)(_headingItem.default
   // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
   , {
-    cssFn: overrides && overrides.HeadingItem && overrides.HeadingItem.cssFn,
+    cssFn: UNSAFE_headingOverrides,
     testId: testId && "".concat(testId, "--heading"),
     "aria-hidden": true
   }, title), content) : (0, _react2.jsx)(_react.Fragment, null, content);
   return (0, _react2.jsx)("div", (0, _extends2.default)({}, rest, {
+    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")
     // We have made a deliberate choice to leave this behaviour as is.

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

@@ -21,17 +21,28 @@ const contentStyles = css({
   justifyContent: 'center',
   flexDirection: 'column',
   flexGrow: 1,
-  // Fix - avoid clipped text descenders when using standard 16px line-height
   lineHeight: "var(--ds-font-lineHeight-100, 16px)",
   outline: 'none',
-  overflow: 'hidden',
-  textAlign: 'left'
+  textAlign: 'left',
+  // Use "clip" overflow to allow ellipses on x-axis without clipping descenders
+  '@supports not (overflow-x: clip)': {
+    overflow: 'hidden'
+  },
+  '@supports (overflow-x: clip)': {
+    overflowX: 'clip'
+  }
 });
 const truncateStyles = css({
   display: 'block',
-  overflow: 'hidden',
   textOverflow: 'ellipsis',
-  whiteSpace: 'nowrap'
+  whiteSpace: 'nowrap',
+  // Use "clip" overflow to allow ellipses on x-axis without clipping descenders
+  '@supports not (overflow-x: clip)': {
+    overflow: 'hidden'
+  },
+  '@supports (overflow-x: clip)': {
+    overflowX: 'clip'
+  }
 });
 const wordBreakStyles = css({
   wordBreak: 'break-word'
@@ -170,7 +181,7 @@ const MenuItemPrimitive = ({
   iconAfter,
   iconBefore,
   overrides,
-  className,
+  className: UNSAFE_externalClassName,
   shouldTitleWrap = false,
   shouldDescriptionWrap = false,
   isDisabled = false,
@@ -182,6 +193,7 @@ const MenuItemPrimitive = ({
   const spacing = useContext(SpacingContext);
   const selectionStyle = useContext(SELECTION_STYLE_CONTEXT_DO_NOT_USE);
   const renderTitle = overrides && overrides.Title && overrides.Title.render || defaultRender;
+  const UNSAFE_className = getBooleanFF('platform.design-system-team.unsafe-overrides-killswitch_c8j9m') ? undefined : UNSAFE_externalClassName;
   return jsx(ClassNames, null, ({
     css: cn,
     cx
@@ -189,7 +201,7 @@ const MenuItemPrimitive = ({
     return jsx(FocusRing, {
       isInset: true
     }, children({
-      className: cx([cn([getBooleanFF('platform.design-system-team.menu-selected-state-change_0see9') && positionRelativeStyles, primitiveStyles, spacingMapStyles[spacing], !isDisabled && !isSelected && unselectedStyles, !isDisabled && isSelected && [selectedStyles, getBooleanFF('platform.design-system-team.menu-selected-state-change_0see9') && [selectionStyle === 'border' && selectedBorderStyles, selectionStyle === 'notch' && selectedNotchStyles]], isDisabled ? disabledStyles : interactiveStyles]), className]),
+      className: cx([cn([getBooleanFF('platform.design-system-team.menu-selected-state-change_0see9') && positionRelativeStyles, primitiveStyles, spacingMapStyles[spacing], !isDisabled && !isSelected && unselectedStyles, !isDisabled && isSelected && [selectedStyles, getBooleanFF('platform.design-system-team.menu-selected-state-change_0see9') && [selectionStyle === 'border' && selectedBorderStyles, selectionStyle === 'notch' && selectedNotchStyles]], isDisabled ? disabledStyles : interactiveStyles]), UNSAFE_className]),
       children: jsx(Inline, {
         as: "span",
         spread: "space-between",

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

@@ -4,6 +4,7 @@ import { forwardRef, memo } from 'react';
 import { jsx } from '@emotion/react';
 import { propDeprecationWarning } from '@atlaskit/ds-lib/deprecation-warning';
 import noop from '@atlaskit/ds-lib/noop';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import MenuItemPrimitive from '../internal/components/menu-item-primitive';
 /**
  * __Button item__
@@ -30,6 +31,11 @@ const ButtonItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(
     onMouseDown,
     shouldTitleWrap,
     shouldDescriptionWrap,
+    // Although this isn't defined on props it is available because we've used
+    // Spread props below and on the jsx element. To forcibly block usage I've
+    // picked it out and supressed the expected type error.
+    // @ts-expect-error
+    className: UNSAFE_className,
     ...rest
   } = props;
   const onMouseDownHandler = onMouseDown;
@@ -39,7 +45,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({}, rest, {
+  return jsx(MenuItemPrimitive, _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
     overrides: overrides,
     iconBefore: iconBefore,

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

@@ -5,6 +5,7 @@ import { forwardRef, memo } from 'react';
 import { css, jsx } from '@emotion/react';
 import { propDeprecationWarning } from '@atlaskit/ds-lib/deprecation-warning';
 import noop from '@atlaskit/ds-lib/noop';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import MenuItemPrimitive from '../internal/components/menu-item-primitive';
 const preventEvent = e => {
   e.preventDefault();
@@ -35,6 +36,11 @@ const CustomItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   onMouseDown,
   shouldTitleWrap,
   shouldDescriptionWrap,
+  // Although this isn't defined on props it is available because we've used
+  // Spread props below and on the jsx element. To forcibly block usage I've
+  // picked it out and supressed the expected type error.
+  // @ts-expect-error
+  className: UNSAFE_className,
   ...rest
 }, ref) => {
   const onMouseDownHandler = onMouseDown;
@@ -44,7 +50,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({}, rest, {
+  return jsx(MenuItemPrimitive, _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
     overrides: overrides,
     description: description,

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

@@ -4,6 +4,7 @@ import { memo } from 'react';
 import { css, jsx } from '@emotion/react';
 import { propDeprecationWarning } from '@atlaskit/ds-lib/deprecation-warning';
 import noop from '@atlaskit/ds-lib/noop';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { N300 } from '@atlaskit/theme/colors';
 import { headingSizes } from '@atlaskit/theme/typography';
 const itemHeadingContentHeight = headingSizes.h100.lineHeight;
@@ -31,18 +32,25 @@ const HeadingItem = /*#__PURE__*/memo(({
   testId,
   id,
   cssFn = noop,
+  // Although this isn't defined on props it is available because we've used
+  // Spread props below and on the jsx element. To forcibly block usage I've
+  // picked it out and supressed the expected type error.
+  // @ts-expect-error
+  className: UNSAFE_className,
   ...rest
 }) => {
   propDeprecationWarning("@atlaskit/menu", 'cssFn', cssFn !== noop, '' // TODO: Create DAC post when primitives/xcss are available as alternatives
   );
 
+  const UNSAFE_overrides = getBooleanFF('platform.design-system-team.unsafe-overrides-killswitch_c8j9m') ? undefined : css(cssFn(undefined));
   return jsx("div", _extends({
     css: [headingStyles,
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-    css(cssFn(undefined))],
+    UNSAFE_overrides],
     "data-testid": testId,
     "data-ds--menu--heading-item": true,
-    id: id
+    id: id,
+    className: getBooleanFF('platform.design-system-team.unsafe-overrides-killswitch_c8j9m') ? undefined : UNSAFE_className
   }, rest), children);
 });
 export default HeadingItem;

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

@@ -4,6 +4,7 @@ import { forwardRef, memo } from 'react';
 import { jsx } from '@emotion/react';
 import { propDeprecationWarning } from '@atlaskit/ds-lib/deprecation-warning';
 import noop from '@atlaskit/ds-lib/noop';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import MenuItemPrimitive from '../internal/components/menu-item-primitive';
 const preventEvent = e => {
   e.preventDefault();
@@ -35,6 +36,11 @@ const LinkItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(
     onMouseDown,
     shouldTitleWrap,
     shouldDescriptionWrap,
+    // Although this isn't defined on props it is available because we've used
+    // Spread props below and on the jsx element. To forcibly block usage I've
+    // picked it out and supressed the expected type error.
+    // @ts-expect-error
+    className: UNSAFE_className,
     ...rest
   } = props;
   const onMouseDownHandler = onMouseDown;
@@ -45,7 +51,9 @@ const LinkItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(
   );
 
   return jsx(MenuItemPrimitive, _extends({}, rest, {
+    className: getBooleanFF('platform.design-system-team.unsafe-overrides-killswitch_c8j9m') ? undefined : UNSAFE_className
     // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
+    ,
     overrides: overrides,
     iconBefore: iconBefore,
     iconAfter: iconAfter,

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

@@ -3,6 +3,7 @@
 import { css, jsx } from '@emotion/react';
 import { propDeprecationWarning } from '@atlaskit/ds-lib/deprecation-warning';
 import noop from '@atlaskit/ds-lib/noop';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { N20A } from '@atlaskit/theme/colors';
 import SkeletonShimmer from '../internal/components/skeleton-shimmer';
 const skeletonStyles = css({
@@ -45,6 +46,7 @@ const SkeletonHeadingItem = ({
   propDeprecationWarning("@atlaskit/menu", 'cssFn', cssFn !== noop, '' // TODO: Create DAC post when primitives/xcss are available as alternatives
   );
 
+  const UNSAFE_overrides = getBooleanFF('platform.design-system-team.unsafe-overrides-killswitch_c8j9m') ? undefined : css(cssFn(undefined));
   return jsx(SkeletonShimmer, {
     isShimmering: isShimmering
   }, ({
@@ -56,7 +58,7 @@ const SkeletonHeadingItem = ({
     },
     css: [skeletonStyles, width ? customWidthStyles : defaultWidthStyles,
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-    css(cssFn(undefined))],
+    UNSAFE_overrides],
     "data-ds--menu--skeleton-heading-item": true,
     "data-testid": testId
   }));

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

@@ -3,6 +3,7 @@
 import { css, jsx } from '@emotion/react';
 import { propDeprecationWarning } from '@atlaskit/ds-lib/deprecation-warning';
 import noop from '@atlaskit/ds-lib/noop';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { N20A } from '@atlaskit/theme/colors';
 import { borderRadius as borderRadiusFn,
 // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
@@ -104,6 +105,7 @@ const SkeletonItem = ({
   propDeprecationWarning("@atlaskit/menu", 'cssFn', cssFn !== noop, '' // TODO: Create DAC post when primitives/xcss are available as alternatives
   );
 
+  const UNSAFE_overrides = getBooleanFF('platform.design-system-team.unsafe-overrides-killswitch_c8j9m') ? undefined : css(cssFn());
   return jsx(SkeletonShimmer, {
     isShimmering: isShimmering
   }, ({
@@ -115,7 +117,7 @@ const SkeletonItem = ({
     },
     css: [skeletonStyles, (hasAvatar || hasIcon) && beforeElementStyles, hasAvatar && avatarStyles, hasIcon && iconStyles, width ? customWidthStyles : defaultWidthStyles,
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-    css(cssFn())],
+    UNSAFE_overrides],
     "data-testid": testId
   }));
 };

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

@@ -2,6 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
 import { UNSAFE_Box as Box } from '@atlaskit/ds-explorations';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { SELECTION_STYLE_CONTEXT_DO_NOT_USE, SpacingContext } from '../internal/components/menu-context';
 /**
  * __Menu group__
@@ -19,6 +20,11 @@ const MenuGroup = ({
   testId,
   role,
   spacing = 'cozy',
+  // Although this isn't defined on props it is available because we've used
+  // Spread props below and on the jsx element. To forcibly block usage I've
+  // picked it out and supressed the expected type error.
+  // @ts-expect-error
+  className: UNSAFE_className,
   ...rest
 }) => jsx(SpacingContext.Provider, {
   value: spacing
@@ -36,7 +42,8 @@ const MenuGroup = ({
   overflow: "auto",
   testId: testId,
   role: role,
-  position: "static"
+  position: "static",
+  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))));
 export default MenuGroup;

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

@@ -4,6 +4,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import { Children, forwardRef, Fragment } from 'react';
 import { css, jsx } from '@emotion/react';
 import { propDeprecationWarning } from '@atlaskit/ds-lib/deprecation-warning';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { N30A } from '@atlaskit/theme/colors';
 // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
 import { gridSize as gridSizeFn } from '@atlaskit/theme/constants';
@@ -88,11 +89,17 @@ const Section = /*#__PURE__*/forwardRef(({
   hasSeparator,
   id,
   isList = false,
+  // Although this isn't defined on props it is available because we've used
+  // Spread props below and on the jsx element. To forcibly block usage I've
+  // picked it out and supressed the expected type error.
+  // @ts-expect-error
+  className: UNSAFE_className,
   ...rest
 }, ref) => {
   propDeprecationWarning("@atlaskit/menu", 'overrides', overrides !== undefined, '' // TODO: Create DAC post when primitives/xcss are available as alternatives
   );
 
+  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: {
       margin: 0,
@@ -109,11 +116,12 @@ const Section = /*#__PURE__*/forwardRef(({
   const childrenMarkup = title !== undefined ? jsx(Fragment, null, jsx(HeadingItem
   // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
   , {
-    cssFn: overrides && overrides.HeadingItem && overrides.HeadingItem.cssFn,
+    cssFn: UNSAFE_headingOverrides,
     testId: testId && `${testId}--heading`,
     "aria-hidden": true
   }, title), content) : jsx(Fragment, null, content);
   return jsx("div", _extends({}, rest, {
+    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")
     // We have made a deliberate choice to leave this behaviour as is.

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

@@ -24,17 +24,28 @@ var contentStyles = css({
   justifyContent: 'center',
   flexDirection: 'column',
   flexGrow: 1,
-  // Fix - avoid clipped text descenders when using standard 16px line-height
   lineHeight: "var(--ds-font-lineHeight-100, 16px)",
   outline: 'none',
-  overflow: 'hidden',
-  textAlign: 'left'
+  textAlign: 'left',
+  // Use "clip" overflow to allow ellipses on x-axis without clipping descenders
+  '@supports not (overflow-x: clip)': {
+    overflow: 'hidden'
+  },
+  '@supports (overflow-x: clip)': {
+    overflowX: 'clip'
+  }
 });
 var truncateStyles = css({
   display: 'block',
-  overflow: 'hidden',
   textOverflow: 'ellipsis',
-  whiteSpace: 'nowrap'
+  whiteSpace: 'nowrap',
+  // Use "clip" overflow to allow ellipses on x-axis without clipping descenders
+  '@supports not (overflow-x: clip)': {
+    overflow: 'hidden'
+  },
+  '@supports (overflow-x: clip)': {
+    overflowX: 'clip'
+  }
 });
 var wordBreakStyles = css({
   wordBreak: 'break-word'
@@ -173,7 +184,7 @@ var MenuItemPrimitive = function MenuItemPrimitive(_ref) {
     iconAfter = _ref.iconAfter,
     iconBefore = _ref.iconBefore,
     overrides = _ref.overrides,
-    className = _ref.className,
+    UNSAFE_externalClassName = _ref.className,
     _ref$shouldTitleWrap = _ref.shouldTitleWrap,
     shouldTitleWrap = _ref$shouldTitleWrap === void 0 ? false : _ref$shouldTitleWrap,
     _ref$shouldDescriptio = _ref.shouldDescriptionWrap,
@@ -188,13 +199,14 @@ var MenuItemPrimitive = function MenuItemPrimitive(_ref) {
   var spacing = useContext(SpacingContext);
   var selectionStyle = useContext(SELECTION_STYLE_CONTEXT_DO_NOT_USE);
   var renderTitle = overrides && overrides.Title && overrides.Title.render || defaultRender;
+  var UNSAFE_className = getBooleanFF('platform.design-system-team.unsafe-overrides-killswitch_c8j9m') ? undefined : UNSAFE_externalClassName;
   return jsx(ClassNames, null, function (_ref2) {
     var cn = _ref2.css,
       cx = _ref2.cx;
     return jsx(FocusRing, {
       isInset: true
     }, children({
-      className: cx([cn([getBooleanFF('platform.design-system-team.menu-selected-state-change_0see9') && positionRelativeStyles, primitiveStyles, spacingMapStyles[spacing], !isDisabled && !isSelected && unselectedStyles, !isDisabled && isSelected && [selectedStyles, getBooleanFF('platform.design-system-team.menu-selected-state-change_0see9') && [selectionStyle === 'border' && selectedBorderStyles, selectionStyle === 'notch' && selectedNotchStyles]], isDisabled ? disabledStyles : interactiveStyles]), className]),
+      className: cx([cn([getBooleanFF('platform.design-system-team.menu-selected-state-change_0see9') && positionRelativeStyles, primitiveStyles, spacingMapStyles[spacing], !isDisabled && !isSelected && unselectedStyles, !isDisabled && isSelected && [selectedStyles, getBooleanFF('platform.design-system-team.menu-selected-state-change_0see9') && [selectionStyle === 'border' && selectedBorderStyles, selectionStyle === 'notch' && selectedNotchStyles]], isDisabled ? disabledStyles : interactiveStyles]), UNSAFE_className]),
       children: jsx(Inline, {
         as: "span",
         spread: "space-between",

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

@@ -1,11 +1,12 @@
 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"];
+var _excluded = ["children", "cssFn", "description", "iconAfter", "iconBefore", "isDisabled", "isSelected", "onClick", "testId", "overrides", "onMouseDown", "shouldTitleWrap", "shouldDescriptionWrap", "className"];
 /** @jsx jsx */
 import { forwardRef, memo } from 'react';
 import { jsx } from '@emotion/react';
 import { propDeprecationWarning } from '@atlaskit/ds-lib/deprecation-warning';
 import noop from '@atlaskit/ds-lib/noop';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import MenuItemPrimitive from '../internal/components/menu-item-primitive';
 /**
  * __Button item__
@@ -34,6 +35,7 @@ function (props, ref) {
     onMouseDown = props.onMouseDown,
     shouldTitleWrap = props.shouldTitleWrap,
     shouldDescriptionWrap = props.shouldDescriptionWrap,
+    UNSAFE_className = props.className,
     rest = _objectWithoutProperties(props, _excluded);
   var onMouseDownHandler = onMouseDown;
   if (!children) {
@@ -42,7 +44,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({}, rest, {
+  return jsx(MenuItemPrimitive, _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
     overrides: overrides,
     iconBefore: iconBefore,

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

@@ -1,12 +1,13 @@
 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"];
+var _excluded = ["component", "cssFn", "isDisabled", "isSelected", "onClick", "testId", "children", "description", "iconAfter", "iconBefore", "overrides", "onMouseDown", "shouldTitleWrap", "shouldDescriptionWrap", "className"];
 /** @jsx jsx */
 
 import { forwardRef, memo } from 'react';
 import { css, jsx } from '@emotion/react';
 import { propDeprecationWarning } from '@atlaskit/ds-lib/deprecation-warning';
 import noop from '@atlaskit/ds-lib/noop';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import MenuItemPrimitive from '../internal/components/menu-item-primitive';
 var preventEvent = function preventEvent(e) {
   e.preventDefault();
@@ -40,6 +41,7 @@ var CustomItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref, ref)
     onMouseDown = _ref.onMouseDown,
     shouldTitleWrap = _ref.shouldTitleWrap,
     shouldDescriptionWrap = _ref.shouldDescriptionWrap,
+    UNSAFE_className = _ref.className,
     rest = _objectWithoutProperties(_ref, _excluded);
   var onMouseDownHandler = onMouseDown;
   if (!Component) {
@@ -48,7 +50,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({}, rest, {
+  return jsx(MenuItemPrimitive, _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
     overrides: overrides,
     description: description,

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

@@ -1,11 +1,12 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "testId", "id", "cssFn"];
+var _excluded = ["children", "testId", "id", "cssFn", "className"];
 /** @jsx jsx */
 import { memo } from 'react';
 import { css, jsx } from '@emotion/react';
 import { propDeprecationWarning } from '@atlaskit/ds-lib/deprecation-warning';
 import noop from '@atlaskit/ds-lib/noop';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { N300 } from '@atlaskit/theme/colors';
 import { headingSizes } from '@atlaskit/theme/typography';
 var itemHeadingContentHeight = headingSizes.h100.lineHeight;
@@ -34,17 +35,20 @@ var HeadingItem = /*#__PURE__*/memo(function (_ref) {
     id = _ref.id,
     _ref$cssFn = _ref.cssFn,
     cssFn = _ref$cssFn === void 0 ? noop : _ref$cssFn,
+    UNSAFE_className = _ref.className,
     rest = _objectWithoutProperties(_ref, _excluded);
   propDeprecationWarning("@atlaskit/menu", 'cssFn', cssFn !== noop, '' // TODO: Create DAC post when primitives/xcss are available as alternatives
   );
 
+  var UNSAFE_overrides = getBooleanFF('platform.design-system-team.unsafe-overrides-killswitch_c8j9m') ? undefined : css(cssFn(undefined));
   return jsx("div", _extends({
     css: [headingStyles,
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-    css(cssFn(undefined))],
+    UNSAFE_overrides],
     "data-testid": testId,
     "data-ds--menu--heading-item": true,
-    id: id
+    id: id,
+    className: getBooleanFF('platform.design-system-team.unsafe-overrides-killswitch_c8j9m') ? undefined : UNSAFE_className
   }, rest), children);
 });
 export default HeadingItem;

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

@@ -1,11 +1,12 @@
 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"];
+var _excluded = ["children", "href", "cssFn", "description", "iconAfter", "iconBefore", "isDisabled", "isSelected", "onClick", "testId", "overrides", "onMouseDown", "shouldTitleWrap", "shouldDescriptionWrap", "className"];
 /** @jsx jsx */
 import { forwardRef, memo } from 'react';
 import { jsx } from '@emotion/react';
 import { propDeprecationWarning } from '@atlaskit/ds-lib/deprecation-warning';
 import noop from '@atlaskit/ds-lib/noop';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import MenuItemPrimitive from '../internal/components/menu-item-primitive';
 var preventEvent = function preventEvent(e) {
   e.preventDefault();
@@ -39,6 +40,7 @@ function (props, ref) {
     onMouseDown = props.onMouseDown,
     shouldTitleWrap = props.shouldTitleWrap,
     shouldDescriptionWrap = props.shouldDescriptionWrap,
+    UNSAFE_className = props.className,
     rest = _objectWithoutProperties(props, _excluded);
   var onMouseDownHandler = onMouseDown;
   if (!children) {
@@ -48,7 +50,9 @@ function (props, ref) {
   );
 
   return jsx(MenuItemPrimitive, _extends({}, rest, {
+    className: getBooleanFF('platform.design-system-team.unsafe-overrides-killswitch_c8j9m') ? undefined : UNSAFE_className
     // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
+    ,
     overrides: overrides,
     iconBefore: iconBefore,
     iconAfter: iconAfter,

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

@@ -3,6 +3,7 @@
 import { css, jsx } from '@emotion/react';
 import { propDeprecationWarning } from '@atlaskit/ds-lib/deprecation-warning';
 import noop from '@atlaskit/ds-lib/noop';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { N20A } from '@atlaskit/theme/colors';
 import SkeletonShimmer from '../internal/components/skeleton-shimmer';
 var skeletonStyles = css({
@@ -46,6 +47,7 @@ var SkeletonHeadingItem = function SkeletonHeadingItem(_ref) {
   propDeprecationWarning("@atlaskit/menu", 'cssFn', cssFn !== noop, '' // TODO: Create DAC post when primitives/xcss are available as alternatives
   );
 
+  var UNSAFE_overrides = getBooleanFF('platform.design-system-team.unsafe-overrides-killswitch_c8j9m') ? undefined : css(cssFn(undefined));
   return jsx(SkeletonShimmer, {
     isShimmering: isShimmering
   }, function (_ref2) {
@@ -57,7 +59,7 @@ var SkeletonHeadingItem = function SkeletonHeadingItem(_ref) {
       },
       css: [skeletonStyles, width ? customWidthStyles : defaultWidthStyles,
       // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-      css(cssFn(undefined))],
+      UNSAFE_overrides],
       "data-ds--menu--skeleton-heading-item": true,
       "data-testid": testId
     });

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

@@ -3,6 +3,7 @@
 import { css, jsx } from '@emotion/react';
 import { propDeprecationWarning } from '@atlaskit/ds-lib/deprecation-warning';
 import noop from '@atlaskit/ds-lib/noop';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { N20A } from '@atlaskit/theme/colors';
 import { borderRadius as borderRadiusFn,
 // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
@@ -105,6 +106,7 @@ var SkeletonItem = function SkeletonItem(_ref) {
   propDeprecationWarning("@atlaskit/menu", 'cssFn', cssFn !== noop, '' // TODO: Create DAC post when primitives/xcss are available as alternatives
   );
 
+  var UNSAFE_overrides = getBooleanFF('platform.design-system-team.unsafe-overrides-killswitch_c8j9m') ? undefined : css(cssFn());
   return jsx(SkeletonShimmer, {
     isShimmering: isShimmering
   }, function (_ref2) {
@@ -116,7 +118,7 @@ var SkeletonItem = function SkeletonItem(_ref) {
       },
       css: [skeletonStyles, (hasAvatar || hasIcon) && beforeElementStyles, hasAvatar && avatarStyles, hasIcon && iconStyles, width ? customWidthStyles : defaultWidthStyles,
       // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-      css(cssFn())],
+      UNSAFE_overrides],
       "data-testid": testId
     });
   });

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

@@ -1,9 +1,10 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["maxWidth", "minWidth", "minHeight", "maxHeight", "testId", "role", "spacing"];
+var _excluded = ["maxWidth", "minWidth", "minHeight", "maxHeight", "testId", "role", "spacing", "className"];
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
 import { UNSAFE_Box as Box } from '@atlaskit/ds-explorations';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { SELECTION_STYLE_CONTEXT_DO_NOT_USE, SpacingContext } from '../internal/components/menu-context';
 /**
  * __Menu group__
@@ -22,6 +23,7 @@ var MenuGroup = function MenuGroup(_ref) {
     role = _ref.role,
     _ref$spacing = _ref.spacing,
     spacing = _ref$spacing === void 0 ? 'cozy' : _ref$spacing,
+    UNSAFE_className = _ref.className,
     rest = _objectWithoutProperties(_ref, _excluded);
   return jsx(SpacingContext.Provider, {
     value: spacing
@@ -39,7 +41,8 @@ var MenuGroup = function MenuGroup(_ref) {
     overflow: "auto",
     testId: testId,
     role: role,
-    position: "static"
+    position: "static",
+    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/esm/menu-section/section.js

@@ -1,11 +1,12 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "overrides", "title", "testId", "isScrollable", "hasSeparator", "id", "isList"];
+var _excluded = ["children", "overrides", "title", "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 */
 import { Children, forwardRef, Fragment } from 'react';
 import { css, jsx } from '@emotion/react';
 import { propDeprecationWarning } from '@atlaskit/ds-lib/deprecation-warning';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { N30A } from '@atlaskit/theme/colors';
 // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
 import { gridSize as gridSizeFn } from '@atlaskit/theme/constants';
@@ -91,10 +92,12 @@ var Section = /*#__PURE__*/forwardRef(function (_ref, ref) {
     id = _ref.id,
     _ref$isList = _ref.isList,
     isList = _ref$isList === void 0 ? false : _ref$isList,
+    UNSAFE_className = _ref.className,
     rest = _objectWithoutProperties(_ref, _excluded);
   propDeprecationWarning("@atlaskit/menu", 'overrides', overrides !== undefined, '' // TODO: Create DAC post when primitives/xcss are available as alternatives
   );
 
+  var UNSAFE_headingOverrides = getBooleanFF('platform.design-system-team.unsafe-overrides-killswitch_c8j9m') ? undefined : overrides && overrides.HeadingItem && overrides.HeadingItem.cssFn;
   var content = isList ? jsx("ul", {
     style: {
       margin: 0,
@@ -113,11 +116,12 @@ var Section = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var childrenMarkup = title !== undefined ? jsx(Fragment, null, jsx(HeadingItem
   // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
   , {
-    cssFn: overrides && overrides.HeadingItem && overrides.HeadingItem.cssFn,
+    cssFn: UNSAFE_headingOverrides,
     testId: testId && "".concat(testId, "--heading"),
     "aria-hidden": true
   }, title), content) : jsx(Fragment, null, content);
   return jsx("div", _extends({}, rest, {
+    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")
     // We have made a deliberate choice to leave this behaviour as is.

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

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

package/dist/types/menu-item/heading-item.d.ts

@@ -9,5 +9,5 @@ import type { HeadingItemProps } from '../types';
  * - [Examples](https://atlaskit.atlassian.com/packages/design-system/menu/docs/heading-item)
  * - [Code](https://atlaskit.atlassian.com/packages/design-system/menu)
  */
-declare const HeadingItem: import("react").MemoExoticComponent<({ children, testId, id, cssFn, ...rest }: HeadingItemProps) => jsx.JSX.Element>;
+declare const HeadingItem: import("react").MemoExoticComponent<({ children, testId, id, cssFn, className: UNSAFE_className, ...rest }: HeadingItemProps) => jsx.JSX.Element>;
 export default HeadingItem;

package/dist/types/menu-section/menu-group.d.ts

@@ -9,5 +9,5 @@ import type { MenuGroupProps } from '../types';
  * - [Examples](https://atlaskit.atlassian.com/packages/design-system/menu/docs/menu-group)
  * - [Code](https://atlaskit.atlassian.com/packages/design-system/menu)
  */
-declare const MenuGroup: ({ maxWidth, minWidth, minHeight, maxHeight, testId, role, spacing, ...rest }: MenuGroupProps) => jsx.JSX.Element;
+declare const MenuGroup: ({ maxWidth, minWidth, minHeight, maxHeight, testId, role, spacing, className: UNSAFE_className, ...rest }: MenuGroupProps) => jsx.JSX.Element;
 export default MenuGroup;

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

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

package/dist/types-ts4.5/menu-item/heading-item.d.ts

@@ -9,5 +9,5 @@ import type { HeadingItemProps } from '../types';
  * - [Examples](https://atlaskit.atlassian.com/packages/design-system/menu/docs/heading-item)
  * - [Code](https://atlaskit.atlassian.com/packages/design-system/menu)
  */
-declare const HeadingItem: import("react").MemoExoticComponent<({ children, testId, id, cssFn, ...rest }: HeadingItemProps) => jsx.JSX.Element>;
+declare const HeadingItem: import("react").MemoExoticComponent<({ children, testId, id, cssFn, className: UNSAFE_className, ...rest }: HeadingItemProps) => jsx.JSX.Element>;
 export default HeadingItem;

package/dist/types-ts4.5/menu-section/menu-group.d.ts

@@ -9,5 +9,5 @@ import type { MenuGroupProps } from '../types';
  * - [Examples](https://atlaskit.atlassian.com/packages/design-system/menu/docs/menu-group)
  * - [Code](https://atlaskit.atlassian.com/packages/design-system/menu)
  */
-declare const MenuGroup: ({ maxWidth, minWidth, minHeight, maxHeight, testId, role, spacing, ...rest }: MenuGroupProps) => jsx.JSX.Element;
+declare const MenuGroup: ({ maxWidth, minWidth, minHeight, maxHeight, testId, role, spacing, className: UNSAFE_className, ...rest }: MenuGroupProps) => jsx.JSX.Element;
 export default MenuGroup;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/menu",
-  "version": "1.9.7",
+  "version": "1.10.0",
   "description": "A collection of composable menu components that can be used anywhere.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -15,7 +15,7 @@
   "sideEffects": false,
   "atlaskit:src": "src/index.tsx",
   "atlassian": {
-    "team": "Design System Pyxis",
+    "team": "Design System Team",
     "productPushConsumption": [
       "jira"
     ],
@@ -30,9 +30,9 @@
     "@atlaskit/ds-lib": "^2.2.0",
     "@atlaskit/focus-ring": "^1.3.0",
     "@atlaskit/platform-feature-flags": "^0.2.0",
-    "@atlaskit/primitives": "^1.0.6",
+    "@atlaskit/primitives": "^1.2.0",
     "@atlaskit/theme": "^12.5.0",
-    "@atlaskit/tokens": "^1.13.0",
+    "@atlaskit/tokens": "^1.16.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1"
   },
@@ -107,6 +107,9 @@
   "platform-feature-flags": {
     "platform.design-system-team.menu-selected-state-change_0see9": {
       "type": "boolean"
+    },
+    "platform.design-system-team.unsafe-overrides-killswitch_c8j9m": {
+      "type": "boolean"
     }
   },
   "homepage": "https://atlassian.design/components/menu/",

package/report.api.md

@@ -107,6 +107,7 @@ export const HeadingItem: MemoExoticComponent<
     testId,
     id,
     cssFn,
+    className: UNSAFE_className,
     ...rest
   }: HeadingItemProps) => jsx.JSX.Element
 >;
@@ -148,6 +149,7 @@ export const MenuGroup: ({
   testId,
   role,
   spacing,
+  className: UNSAFE_className,
   ...rest
 }: MenuGroupProps) => jsx.JSX.Element;
 

package/tmp/api-report-tmp.d.ts

@@ -84,7 +84,7 @@ interface CustomItemTypeGenericHackProps {
 export type Dimension = number | string;
 
 // @public
-export const HeadingItem: MemoExoticComponent<({ children, testId, id, cssFn, ...rest }: HeadingItemProps) => jsx.JSX.Element>;
+export const HeadingItem: MemoExoticComponent<({ children, testId, id, cssFn, className: UNSAFE_className, ...rest }: HeadingItemProps) => jsx.JSX.Element>;
 
 // @public (undocumented)
 export interface HeadingItemProps {
@@ -113,7 +113,7 @@ export interface LinkItemProps extends BaseItemProps {
 }
 
 // @public
-export const MenuGroup: ({ maxWidth, minWidth, minHeight, maxHeight, testId, role, spacing, ...rest }: MenuGroupProps) => jsx.JSX.Element;
+export const MenuGroup: ({ maxWidth, minWidth, minHeight, maxHeight, testId, role, spacing, className: UNSAFE_className, ...rest }: MenuGroupProps) => jsx.JSX.Element;
 
 // @public (undocumented)
 export interface MenuGroupProps extends MenuGroupSizing {

package/dist/cjs/version.json

@@ -1,5 +0,0 @@
-{
-	"name": "@atlaskit/menu",
-	"version": "1.9.7",
-	"sideEffects": false
-}

package/dist/es2019/version.json

@@ -1,5 +0,0 @@
-{
-	"name": "@atlaskit/menu",
-	"version": "1.9.7",
-	"sideEffects": false
-}

package/dist/esm/version.json

@@ -1,5 +0,0 @@
-{
-	"name": "@atlaskit/menu",
-	"version": "1.9.7",
-	"sideEffects": false
-}