@atlaskit/menu 5.0.1 → 7.0.0

package/CHANGELOG.md

@@ -1,5 +1,34 @@
 # @atlaskit/menu
 
+## 7.0.0
+
+### Major Changes
+
+- [#156707](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/156707)
+  [`84d702274b2dd`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/84d702274b2dd) -
+  Migrated `HeadingItem` and `Section` components from @emotion/react to @compiled/react in order to
+  improve performance, align with the rest of the Atlaskit techstack, and support React 18 Streaming
+  SSR.
+
+  Removed the deprecated `cssFn` prop from the `HeadingItem` component, as this is not supported
+  with @compiled/react.
+
+## 6.0.0
+
+### Major Changes
+
+- [#148607](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/148607)
+  [`474e66c7b2f54`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/474e66c7b2f54) -
+  Removed deprecated `overrides` prop from Section. Introduced `isSideNavSection` prop on Section
+  which when true renders headings with reduced padding. This prop was added exclusively to support
+  existing functionality in `@atlaskit/side-navigation` and will be removed once the new navigation
+  system fully rolls out. It should not be used outside of the Side Navigation component. Removed
+  deprecated `Overrides` and `TitleOverrides` types.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 5.0.1
 
 ### Patch Changes

package/dist/cjs/menu-item/heading-item.compiled.css

@@ -0,0 +1,4 @@
+._11c81vhk{font:var(--ds-font-heading-xxsmall,normal 600 9pt/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
+._18zrpxbi{padding-inline:var(--ds-space-200,1pc)}
+._1rjcze3t{padding-block:var(--ds-space-0,0)}
+._syaz1vvm{color:var(--_bbz764)}

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

@@ -1,29 +1,23 @@
+/* heading-item.tsx generated by @compiled/babel-plugin v0.36.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+require("./heading-item.compiled.css");
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _runtime = require("@compiled/react/runtime");
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-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 _colors = require("@atlaskit/theme/colors");
-var _excluded = ["children", "testId", "headingLevel", "id", "cssFn", "className"];
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-var headingStyles = (0, _react2.css)({
-  color: "var(--ds-text-subtle, ".concat(_colors.N300, ")"),
-  font: "var(--ds-font-heading-xxsmall, normal 600 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
-  paddingBlock: "var(--ds-space-0, 0px)",
-  paddingInline: "var(--ds-space-200, 16px)"
-});
+var _excluded = ["children", "testId", "headingLevel", "id", "className"];
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var headingStyles = null;
 
 /**
  * __Heading item__
@@ -39,19 +33,9 @@ var HeadingItem = /*#__PURE__*/(0, _react.memo)(function (_ref) {
     _ref$headingLevel = _ref.headingLevel,
     headingLevel = _ref$headingLevel === void 0 ? 2 : _ref$headingLevel,
     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
-  );
-
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  var UNSAFE_overrides = (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
-    UNSAFE_overrides],
+  return /*#__PURE__*/React.createElement("div", (0, _extends2.default)({
     role: "heading",
     "aria-level": headingLevel,
     "data-testid": testId,
@@ -59,7 +43,11 @@ var HeadingItem = /*#__PURE__*/(0, _react.memo)(function (_ref) {
     id: id
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     ,
-    className: UNSAFE_className
-  }, rest), children);
+    className: (0, _runtime.ax)(["_11c81vhk _1rjcze3t _18zrpxbi _syaz1vvm", UNSAFE_className])
+  }, rest, {
+    style: {
+      "--_bbz764": (0, _runtime.ix)("var(--ds-text-subtle, ".concat(_colors.N300, ")"))
+    }
+  }), children);
 });
 var _default = exports.default = HeadingItem;

package/dist/cjs/menu-section/menu-group.compiled.css

@@ -0,0 +1,5 @@
+._18m91wug{overflow-y:auto}
+._1e0c1txw{display:flex}
+._1reo1wug{overflow-x:auto}
+._2lx21bp4{flex-direction:column}
+._kqswpfqs{position:static}

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

@@ -1,26 +1,22 @@
+/* menu-group.tsx generated by @compiled/babel-plugin v0.36.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+require("./menu-group.compiled.css");
+var React = _interopRequireWildcard(require("react"));
+var _runtime = require("@compiled/react/runtime");
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _react = require("@emotion/react");
 var _menuContext = require("../internal/components/menu-context");
 var _excluded = ["isLoading", "maxWidth", "minWidth", "minHeight", "maxHeight", "testId", "role", "spacing", "className"];
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-var baseStyles = (0, _react.css)({
-  display: 'flex',
-  position: 'static',
-  flexDirection: 'column',
-  overflow: 'auto'
-});
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var baseStyles = null;
 
 /**
  * __Menu group__
@@ -42,11 +38,11 @@ var MenuGroup = function MenuGroup(_ref) {
     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, {
+  return /*#__PURE__*/React.createElement(_menuContext.SpacingContext.Provider, {
     value: spacing
-  }, (0, _react.jsx)(_menuContext.SELECTION_STYLE_CONTEXT_DO_NOT_USE.Provider, {
+  }, /*#__PURE__*/React.createElement(_menuContext.SELECTION_STYLE_CONTEXT_DO_NOT_USE.Provider, {
     value: "border"
-  }, (0, _react.jsx)("div", (0, _extends2.default)({
+  }, /*#__PURE__*/React.createElement("div", (0, _extends2.default)({
     "aria-busy": isLoading,
     style: {
       minWidth: minWidth,
@@ -54,12 +50,11 @@ var MenuGroup = function MenuGroup(_ref) {
       minHeight: minHeight,
       maxHeight: maxHeight
     },
-    css: baseStyles,
     "data-testid": testId,
     role: role
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     ,
-    className: UNSAFE_className
+    className: (0, _runtime.ax)(["_1reo1wug _18m91wug _1e0c1txw _kqswpfqs _2lx21bp4", UNSAFE_className])
     // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
   }, rest))));
 };

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

@@ -1,20 +1,20 @@
+/* popup-menu-group.tsx generated by @compiled/babel-plugin v0.36.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _runtime = require("@compiled/react/runtime");
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _react = require("@emotion/react");
 var _menuGroup = _interopRequireDefault(require("./menu-group"));
-var _excluded = ["maxWidth", "minWidth"];
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+var _excluded = ["maxWidth", "minWidth"]; // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 /**
  * @deprecated refer to MenuGroup, explicitly set maxWidth and minWidth
  */
@@ -25,8 +25,9 @@ var PopupMenuGroup = function PopupMenuGroup(_ref) {
     minWidth = _ref$minWidth === void 0 ? 320 : _ref$minWidth,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   return (
+    /*#__PURE__*/
     // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
-    (0, _react.jsx)(_menuGroup.default, (0, _extends2.default)({
+    React.createElement(_menuGroup.default, (0, _extends2.default)({
       maxWidth: maxWidth,
       minWidth: minWidth
     }, rest))

package/dist/cjs/menu-section/section.compiled.css

@@ -0,0 +1,17 @@
+
+._18zru2gc{padding-inline:var(--ds-space-100,8px)}
+._mqm21imm{border-block-start:1px solid var(--ds-menu-seperator-color,var(--ds-border,rgba(9,30,66,.08)))}._18m91wug{overflow-y:auto}
+._1l6bgktf [data-ds--menu--heading-item]{margin-block-start:20px}
+._1mfv8jkm [data-ds--menu--skeleton-heading-item]:first-of-type{margin-block-start:19px}
+._1o9zidpf{flex-shrink:0}
+._1o9zkb7n{flex-shrink:1}
+._1p3hi2wt [data-ds--menu--heading-item]{margin-block-end:6px}
+._1qdgi2wt:after, ._kfgti2wt:before{height:6px}
+._1reo1wug{overflow-x:auto}
+._1ywu1ule:after, ._cfu11ule:before{display:block}
+._aetrb3bt:after, ._1kt9b3bt:before{content:""}
+._auo4rdoj [data-ds--menu--skeleton-heading-item]{margin-block-end:9px}
+._hp2110yn [data-ds--menu--skeleton-heading-item]{margin-block-start:25px}
+._osbldlk8 [data-ds--menu--heading-item]:first-of-type{margin-block-start:14px}
+[data-section]+._n7cnyjp0{margin-block-start:-6px}
+._1bg41n1a:focus{outline-offset:-1px}

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

@@ -1,93 +1,40 @@
+/* section.tsx generated by @compiled/babel-plugin v0.36.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+require("./section.compiled.css");
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _runtime = require("@compiled/react/runtime");
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _react = require("react");
-var _react2 = require("@emotion/react");
-var _deprecationWarning = require("@atlaskit/ds-lib/deprecation-warning");
-var _colors = require("@atlaskit/theme/colors");
 var _headingItem = _interopRequireDefault(require("../menu-item/heading-item"));
-var _excluded = ["children", "overrides", "title", "titleId", "testId", "isScrollable", "hasSeparator", "id", "isList", "className"];
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-var gridSize = 8;
-var itemHeadingTopMargin = gridSize * 2.5;
-var itemHeadingBottomMargin = gridSize * 0.75;
+var _excluded = ["children", "title", "titleId", "testId", "isScrollable", "hasSeparator", "id", "isList", "isSideNavSection", "className"];
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var itemHeadingTopMargin = 20;
+var itemHeadingBottomMargin = 6;
 // Skeleton content is slightly shorter than the real content.
 // Because of that we slightly increase the top margin to offset this so the
 // containing size both real and skeleton always equal approx 30px.
 var itemHeadingContentHeight = 16; // Originally headingSizes.h100.lineHeight from '@atlaskit/theme/typography'
-var skeletonHeadingHeight = gridSize;
+var skeletonHeadingHeight = 8;
 var skeletonHeadingMarginOffset = 3;
 var skeletonHeadingTopMargin = itemHeadingTopMargin + (itemHeadingContentHeight - skeletonHeadingHeight) - skeletonHeadingMarginOffset;
-// We want to move the entire body up by 3px without affecting the height of the skeleton container.
-var skeletonHeadingBottomMargin = itemHeadingBottomMargin + skeletonHeadingMarginOffset;
-var sectionPaddingTopBottom = gridSize * 0.75;
-var VAR_SEPARATOR_COLOR = '--ds-menu-seperator-color';
-var sectionStyles = (0, _react2.css)({
-  '&::before, &::after': {
-    display: 'block',
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    height: sectionPaddingTopBottom,
-    content: '""'
-  },
-  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-  '& [data-ds--menu--heading-item]': {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    marginBlockEnd: itemHeadingBottomMargin,
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    marginBlockStart: itemHeadingTopMargin,
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-    '&:first-of-type': {
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-      marginBlockStart: itemHeadingTopMargin - sectionPaddingTopBottom
-    }
-  },
-  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-  '& [data-ds--menu--skeleton-heading-item]': {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    marginBlockEnd: skeletonHeadingBottomMargin,
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    marginBlockStart: skeletonHeadingTopMargin,
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-    '&:first-of-type': {
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-      marginBlockStart: skeletonHeadingTopMargin - sectionPaddingTopBottom
-    }
-  },
-  '&:focus': {
-    // 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.
-    // This makes the outline go inside by 1px so it can actually be displayed
-    // else it gets cut off from the overflow: scroll from the parent menu group.
-    outlineOffset: -1
-  }
-});
-var scrollableStyles = (0, _react2.css)({
-  flexShrink: 1,
-  overflow: 'auto'
-});
-var unscrollableStyles = (0, _react2.css)({
-  flexShrink: 0
-});
-var thinSeparatorStyles = (0, _react2.css)({
-  borderBlockStart: "1px solid var(".concat(VAR_SEPARATOR_COLOR, ", ", "var(--ds-border, ".concat(_colors.N30A, ")"), ")")
-});
-var noSeparatorStyles = (0, _react2.css)({
-  // this is to ensure that adjacent sections without separators don't get additional margins.
-  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-  '[data-section] + &': {
-    marginBlockStart: -6
-  }
-});
+var sectionPaddingTopBottom = 6;
+var styles = {
+  root: "_1ywu1ule _cfu11ule _1qdgi2wt _kfgti2wt _aetrb3bt _1kt9b3bt _1p3hi2wt _1l6bgktf _osbldlk8 _auo4rdoj _hp2110yn _1mfv8jkm _1bg41n1a",
+  scrollable: "_1reo1wug _18m91wug _1o9zkb7n",
+  unscrollable: "_1o9zidpf",
+  thinSeparator: "_mqm21imm",
+  noSeparator: "_n7cnyjp0",
+  sideNavSectionHeading: "_18zru2gc"
+};
 
 /**
  * __Section__
@@ -99,7 +46,6 @@ var noSeparatorStyles = (0, _react2.css)({
  */
 var Section = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var children = _ref.children,
-    overrides = _ref.overrides,
     title = _ref.title,
     titleId = _ref.titleId,
     testId = _ref.testId,
@@ -108,12 +54,11 @@ var Section = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     id = _ref.id,
     _ref$isList = _ref.isList,
     isList = _ref$isList === void 0 ? false : _ref$isList,
+    _ref$isSideNavSection = _ref.isSideNavSection,
+    isSideNavSection = _ref$isSideNavSection === void 0 ? false : _ref$isSideNavSection,
     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 = overrides && overrides.HeadingItem && overrides.HeadingItem.cssFn;
-  var content = isList ? (0, _react2.jsx)("ul", {
+  var content = isList ? /*#__PURE__*/React.createElement("ul", {
     style: {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
       margin: 0,
@@ -121,7 +66,7 @@ var Section = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       padding: 0
     }
   }, _react.Children.map(_react.Children.toArray(children), function (child, index) {
-    return (0, _react2.jsx)("li", {
+    return /*#__PURE__*/React.createElement("li", {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
       style: {
         listStyleType: 'none',
@@ -131,21 +76,22 @@ var Section = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       key: index
     }, child);
   })) : children;
-  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: UNSAFE_headingOverrides,
+  var childrenMarkup = title !== undefined ? /*#__PURE__*/React.createElement(_react.Fragment, null, /*#__PURE__*/React.createElement(_headingItem.default, {
     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, {
+    // @ts-expect-error
+    // eslint-disable-next-line @atlaskit/design-system/no-unsafe-style-overrides
+    ,
+    className: (0, _runtime.ax)([isSideNavSection && styles.sideNavSectionHeading])
+  }, title), content) : /*#__PURE__*/React.createElement(_react.Fragment, null, content);
+  return /*#__PURE__*/React.createElement("div", (0, _extends2.default)({}, rest, {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-    className: UNSAFE_className,
+    className: (0, _runtime.ax)([styles.root, isScrollable ? styles.scrollable : styles.unscrollable, hasSeparator ? styles.thinSeparator : styles.noSeparator, 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.
     ,
-    css: [sectionStyles, isScrollable ? scrollableStyles : unscrollableStyles, hasSeparator ? thinSeparatorStyles : noSeparatorStyles],
+
     "aria-label": title,
     "aria-labelledby": titleId,
     "data-testid": testId,

package/dist/es2019/menu-item/heading-item.compiled.css

@@ -0,0 +1,4 @@
+._11c81vhk{font:var(--ds-font-heading-xxsmall,normal 600 9pt/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
+._18zrpxbi{padding-inline:var(--ds-space-200,1pc)}
+._1rjcze3t{padding-block:var(--ds-space-0,0)}
+._syaz1n3s{color:var(--ds-text-subtle,#5e6c84)}

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

@@ -1,21 +1,11 @@
+/* heading-item.tsx generated by @compiled/babel-plugin v0.36.1 */
 import _extends from "@babel/runtime/helpers/extends";
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
+import "./heading-item.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 import { memo } from 'react';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
-import { propDeprecationWarning } from '@atlaskit/ds-lib/deprecation-warning';
-import noop from '@atlaskit/ds-lib/noop';
 import { N300 } from '@atlaskit/theme/colors';
-const headingStyles = css({
-  color: `var(--ds-text-subtle, ${N300})`,
-  font: "var(--ds-font-heading-xxsmall, normal 600 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
-  paddingBlock: "var(--ds-space-0, 0px)",
-  paddingInline: "var(--ds-space-200, 16px)"
-});
+const headingStyles = null;
 
 /**
  * __Heading item__
@@ -30,7 +20,6 @@ const HeadingItem = /*#__PURE__*/memo(({
   testId,
   headingLevel = 2,
   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.
@@ -38,15 +27,7 @@ const HeadingItem = /*#__PURE__*/memo(({
   className: UNSAFE_className,
   ...rest
 }) => {
-  propDeprecationWarning("@atlaskit/menu" || '', 'cssFn', cssFn !== noop, '' // TODO: Create DAC post when primitives/xcss are available as alternatives
-  );
-
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  const UNSAFE_overrides = css(cssFn(undefined));
-  return jsx("div", _extends({
-    css: [headingStyles,
-    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-    UNSAFE_overrides],
+  return /*#__PURE__*/React.createElement("div", _extends({
     role: "heading",
     "aria-level": headingLevel,
     "data-testid": testId,
@@ -54,7 +35,7 @@ const HeadingItem = /*#__PURE__*/memo(({
     id: id
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     ,
-    className: UNSAFE_className
+    className: ax(["_11c81vhk _1rjcze3t _18zrpxbi _syaz1n3s", UNSAFE_className])
   }, rest), children);
 });
 export default HeadingItem;

package/dist/es2019/menu-section/menu-group.compiled.css

@@ -0,0 +1,5 @@
+._18m91wug{overflow-y:auto}
+._1e0c1txw{display:flex}
+._1reo1wug{overflow-x:auto}
+._2lx21bp4{flex-direction:column}
+._kqswpfqs{position:static}

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

@@ -1,17 +1,10 @@
+/* menu-group.tsx generated by @compiled/babel-plugin v0.36.1 */
 import _extends from "@babel/runtime/helpers/extends";
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
+import "./menu-group.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 import { SELECTION_STYLE_CONTEXT_DO_NOT_USE, SpacingContext } from '../internal/components/menu-context';
-const baseStyles = css({
-  display: 'flex',
-  position: 'static',
-  flexDirection: 'column',
-  overflow: 'auto'
-});
+const baseStyles = null;
 
 /**
  * __Menu group__
@@ -36,11 +29,11 @@ const MenuGroup = ({
   // @ts-expect-error
   className: UNSAFE_className,
   ...rest
-}) => jsx(SpacingContext.Provider, {
+}) => /*#__PURE__*/React.createElement(SpacingContext.Provider, {
   value: spacing
-}, jsx(SELECTION_STYLE_CONTEXT_DO_NOT_USE.Provider, {
+}, /*#__PURE__*/React.createElement(SELECTION_STYLE_CONTEXT_DO_NOT_USE.Provider, {
   value: "border"
-}, jsx("div", _extends({
+}, /*#__PURE__*/React.createElement("div", _extends({
   "aria-busy": isLoading,
   style: {
     minWidth,
@@ -48,12 +41,11 @@ const MenuGroup = ({
     minHeight,
     maxHeight
   },
-  css: baseStyles,
   "data-testid": testId,
   role: role
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
   ,
-  className: UNSAFE_className
+  className: ax(["_1reo1wug _18m91wug _1e0c1txw _kqswpfqs _2lx21bp4", UNSAFE_className])
   // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
 }, rest))));
 export default MenuGroup;

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

@@ -1,10 +1,9 @@
+/* popup-menu-group.tsx generated by @compiled/babel-plugin v0.36.1 */
 import _extends from "@babel/runtime/helpers/extends";
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { jsx } from '@emotion/react';
+
 import MenuGroup from './menu-group';
 
 /**
@@ -15,8 +14,9 @@ const PopupMenuGroup = ({
   minWidth = 320,
   ...rest
 }) =>
+/*#__PURE__*/
 // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
-jsx(MenuGroup, _extends({
+React.createElement(MenuGroup, _extends({
   maxWidth: maxWidth,
   minWidth: minWidth
 }, rest));

package/dist/es2019/menu-section/section.compiled.css

@@ -0,0 +1,17 @@
+
+._18zru2gc{padding-inline:var(--ds-space-100,8px)}
+._mqm21imm{border-block-start:1px solid var(--ds-menu-seperator-color,var(--ds-border,rgba(9,30,66,.08)))}._18m91wug{overflow-y:auto}
+._1l6bgktf [data-ds--menu--heading-item]{margin-block-start:20px}
+._1mfv8jkm [data-ds--menu--skeleton-heading-item]:first-of-type{margin-block-start:19px}
+._1o9zidpf{flex-shrink:0}
+._1o9zkb7n{flex-shrink:1}
+._1p3hi2wt [data-ds--menu--heading-item]{margin-block-end:6px}
+._1qdgi2wt:after, ._kfgti2wt:before{height:6px}
+._1reo1wug{overflow-x:auto}
+._1ywu1ule:after, ._cfu11ule:before{display:block}
+._aetrb3bt:after, ._1kt9b3bt:before{content:""}
+._auo4rdoj [data-ds--menu--skeleton-heading-item]{margin-block-end:9px}
+._hp2110yn [data-ds--menu--skeleton-heading-item]{margin-block-start:25px}
+._osbldlk8 [data-ds--menu--heading-item]:first-of-type{margin-block-start:14px}
+[data-section]+._n7cnyjp0{margin-block-start:-6px}
+._1bg41n1a:focus{outline-offset:-1px}