@atlaskit/menu 1.9.8 → 1.10.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/menu
 
+## 1.10.1
+
+### Patch Changes
+
+- [`a962b1b24eb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/a962b1b24eb) - The internal composition of this component has changed. There is no expected change in behavior.
+
+## 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

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

@@ -192,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,
@@ -207,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

@@ -8,10 +8,17 @@ exports.default = void 0;
 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 */
+var baseStyles = (0, _react.css)({
+  display: 'flex',
+  position: 'static',
+  flexDirection: 'column',
+  overflow: 'auto'
+});
+
 /**
  * __Menu group__
  *
@@ -29,24 +36,23 @@ 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
   }, (0, _react.jsx)(_menuContext.SELECTION_STYLE_CONTEXT_DO_NOT_USE.Provider, {
     value: "border"
-  }, (0, _react.jsx)(_dsExplorations.UNSAFE_Box, (0, _extends2.default)({
-    UNSAFE_style: {
+  }, (0, _react.jsx)("div", (0, _extends2.default)({
+    style: {
       minWidth: minWidth,
       maxWidth: maxWidth,
       minHeight: minHeight,
       maxHeight: maxHeight
     },
-    display: "flex",
-    flexDirection: "column",
-    overflow: "auto",
-    testId: testId,
+    css: baseStyles,
+    "data-testid": testId,
     role: role,
-    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

@@ -181,7 +181,7 @@ const MenuItemPrimitive = ({
   iconAfter,
   iconBefore,
   overrides,
-  className,
+  className: UNSAFE_externalClassName,
   shouldTitleWrap = false,
   shouldDescriptionWrap = false,
   isDisabled = false,
@@ -193,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
@@ -200,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

@@ -1,8 +1,15 @@
 import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
-import { jsx } from '@emotion/react';
-import { UNSAFE_Box as Box } from '@atlaskit/ds-explorations';
+import { css, jsx } from '@emotion/react';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { SELECTION_STYLE_CONTEXT_DO_NOT_USE, SpacingContext } from '../internal/components/menu-context';
+const baseStyles = css({
+  display: 'flex',
+  position: 'static',
+  flexDirection: 'column',
+  overflow: 'auto'
+});
+
 /**
  * __Menu group__
  *
@@ -19,24 +26,27 @@ 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
 }, jsx(SELECTION_STYLE_CONTEXT_DO_NOT_USE.Provider, {
   value: "border"
-}, jsx(Box, _extends({
-  UNSAFE_style: {
+}, jsx("div", _extends({
+  style: {
     minWidth,
     maxWidth,
     minHeight,
     maxHeight
   },
-  display: "flex",
-  flexDirection: "column",
-  overflow: "auto",
-  testId: testId,
+  css: baseStyles,
+  "data-testid": testId,
   role: role,
-  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

@@ -184,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,
@@ -199,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,10 +1,17 @@
 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 { css, jsx } from '@emotion/react';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { SELECTION_STYLE_CONTEXT_DO_NOT_USE, SpacingContext } from '../internal/components/menu-context';
+var baseStyles = css({
+  display: 'flex',
+  position: 'static',
+  flexDirection: 'column',
+  overflow: 'auto'
+});
+
 /**
  * __Menu group__
  *
@@ -22,24 +29,23 @@ 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
   }, jsx(SELECTION_STYLE_CONTEXT_DO_NOT_USE.Provider, {
     value: "border"
-  }, jsx(Box, _extends({
-    UNSAFE_style: {
+  }, jsx("div", _extends({
+    style: {
       minWidth: minWidth,
       maxWidth: maxWidth,
       minHeight: minHeight,
       maxHeight: maxHeight
     },
-    display: "flex",
-    flexDirection: "column",
-    overflow: "auto",
-    testId: testId,
+    css: baseStyles,
+    "data-testid": testId,
     role: role,
-    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.8",
+  "version": "1.10.1",
   "description": "A collection of composable menu components that can be used anywhere.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -26,13 +26,12 @@
     }
   },
   "dependencies": {
-    "@atlaskit/ds-explorations": "^2.2.0",
     "@atlaskit/ds-lib": "^2.2.0",
     "@atlaskit/focus-ring": "^1.3.0",
     "@atlaskit/platform-feature-flags": "^0.2.0",
     "@atlaskit/primitives": "^1.2.0",
     "@atlaskit/theme": "^12.5.0",
-    "@atlaskit/tokens": "^1.14.0",
+    "@atlaskit/tokens": "^1.18.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1"
   },
@@ -107,6 +106,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 {