@atlaskit/menu 5.0.1 → 7.0.0

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

@@ -1,85 +1,28 @@
+/* section.tsx generated by @compiled/babel-plugin v0.36.1 */
 import _extends from "@babel/runtime/helpers/extends";
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
+import "./section.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 import { Children, forwardRef, Fragment } 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 { N30A } from '@atlaskit/theme/colors';
 import HeadingItem from '../menu-item/heading-item';
-const gridSize = 8;
-const itemHeadingTopMargin = gridSize * 2.5;
-const itemHeadingBottomMargin = gridSize * 0.75;
+const itemHeadingTopMargin = 20;
+const 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.
 const itemHeadingContentHeight = 16; // Originally headingSizes.h100.lineHeight from '@atlaskit/theme/typography'
-const skeletonHeadingHeight = gridSize;
+const skeletonHeadingHeight = 8;
 const skeletonHeadingMarginOffset = 3;
 const skeletonHeadingTopMargin = itemHeadingTopMargin + (itemHeadingContentHeight - skeletonHeadingHeight) - skeletonHeadingMarginOffset;
-// We want to move the entire body up by 3px without affecting the height of the skeleton container.
-const skeletonHeadingBottomMargin = itemHeadingBottomMargin + skeletonHeadingMarginOffset;
-const sectionPaddingTopBottom = gridSize * 0.75;
-const VAR_SEPARATOR_COLOR = '--ds-menu-seperator-color';
-const sectionStyles = 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
-  }
-});
-const scrollableStyles = css({
-  flexShrink: 1,
-  overflow: 'auto'
-});
-const unscrollableStyles = css({
-  flexShrink: 0
-});
-const thinSeparatorStyles = css({
-  borderBlockStart: `1px solid var(${VAR_SEPARATOR_COLOR}, ${`var(--ds-border, ${N30A})`})`
-});
-const noSeparatorStyles = 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
-  }
-});
+const sectionPaddingTopBottom = 6;
+const 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__
@@ -91,7 +34,6 @@ const noSeparatorStyles = css({
  */
 const Section = /*#__PURE__*/forwardRef(({
   children,
-  overrides,
   title,
   titleId,
   testId,
@@ -99,6 +41,7 @@ const Section = /*#__PURE__*/forwardRef(({
   hasSeparator,
   id,
   isList = false,
+  isSideNavSection = 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.
@@ -106,17 +49,14 @@ const Section = /*#__PURE__*/forwardRef(({
   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 = overrides && overrides.HeadingItem && overrides.HeadingItem.cssFn;
-  const content = isList ? jsx("ul", {
+  const 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,
       // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
       padding: 0
     }
-  }, Children.map(Children.toArray(children), (child, index) => jsx("li", {
+  }, Children.map(Children.toArray(children), (child, index) => /*#__PURE__*/React.createElement("li", {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
     style: {
       listStyleType: 'none',
@@ -125,21 +65,22 @@ const Section = /*#__PURE__*/forwardRef(({
     },
     key: index
   }, child))) : children;
-  const childrenMarkup = title !== undefined ? jsx(Fragment, null, jsx(HeadingItem
-  // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
-  , {
-    cssFn: UNSAFE_headingOverrides,
+  const childrenMarkup = title !== undefined ? /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(HeadingItem, {
     testId: testId && `${testId}--heading`,
     "aria-hidden": true
-  }, title), content) : jsx(Fragment, null, content);
-  return jsx("div", _extends({}, rest, {
+    // @ts-expect-error
+    // eslint-disable-next-line @atlaskit/design-system/no-unsafe-style-overrides
+    ,
+    className: ax([isSideNavSection && styles.sideNavSectionHeading])
+  }, title), content) : /*#__PURE__*/React.createElement(Fragment, null, content);
+  return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-    className: UNSAFE_className,
+    className: 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/esm/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/esm/menu-item/heading-item.js

@@ -1,23 +1,13 @@
+/* heading-item.tsx generated by @compiled/babel-plugin v0.36.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "testId", "headingLevel", "id", "cssFn", "className"];
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
+var _excluded = ["children", "testId", "headingLevel", "id", "className"];
+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';
-var headingStyles = css({
-  color: "var(--ds-text-subtle, ".concat(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 headingStyles = null;
 
 /**
  * __Heading item__
@@ -33,19 +23,9 @@ var HeadingItem = /*#__PURE__*/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 : _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
-  );
-
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  var 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,
@@ -53,7 +33,11 @@ var HeadingItem = /*#__PURE__*/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: ax(["_11c81vhk _1rjcze3t _18zrpxbi _syaz1vvm", UNSAFE_className])
+  }, rest, {
+    style: {
+      "--_bbz764": ix("var(--ds-text-subtle, ".concat(N300, ")"))
+    }
+  }), children);
 });
 export default HeadingItem;

package/dist/esm/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/esm/menu-section/menu-group.js

@@ -1,19 +1,12 @@
+/* menu-group.tsx generated by @compiled/babel-plugin v0.36.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 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
-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';
-var baseStyles = css({
-  display: 'flex',
-  position: 'static',
-  flexDirection: 'column',
-  overflow: 'auto'
-});
+var baseStyles = null;
 
 /**
  * __Menu group__
@@ -35,11 +28,11 @@ var MenuGroup = function MenuGroup(_ref) {
     spacing = _ref$spacing === void 0 ? 'cozy' : _ref$spacing,
     UNSAFE_className = _ref.className,
     rest = _objectWithoutProperties(_ref, _excluded);
-  return jsx(SpacingContext.Provider, {
+  return /*#__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: minWidth,
@@ -47,12 +40,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: ax(["_1reo1wug _18m91wug _1e0c1txw _kqswpfqs _2lx21bp4", UNSAFE_className])
     // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
   }, rest))));
 };

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

@@ -1,12 +1,11 @@
+/* popup-menu-group.tsx generated by @compiled/babel-plugin v0.36.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["maxWidth", "minWidth"];
-/**
- * @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';
 
 /**
@@ -19,8 +18,9 @@ var PopupMenuGroup = function PopupMenuGroup(_ref) {
     minWidth = _ref$minWidth === void 0 ? 320 : _ref$minWidth,
     rest = _objectWithoutProperties(_ref, _excluded);
   return (
+    /*#__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/esm/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/esm/menu-section/section.js

@@ -1,87 +1,30 @@
+/* section.tsx generated by @compiled/babel-plugin v0.36.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "overrides", "title", "titleId", "testId", "isScrollable", "hasSeparator", "id", "isList", "className"];
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
+var _excluded = ["children", "title", "titleId", "testId", "isScrollable", "hasSeparator", "id", "isList", "isSideNavSection", "className"];
+import "./section.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 import { Children, forwardRef, Fragment } 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 { N30A } from '@atlaskit/theme/colors';
 import HeadingItem from '../menu-item/heading-item';
-var gridSize = 8;
-var itemHeadingTopMargin = gridSize * 2.5;
-var itemHeadingBottomMargin = gridSize * 0.75;
+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 = 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 = css({
-  flexShrink: 1,
-  overflow: 'auto'
-});
-var unscrollableStyles = css({
-  flexShrink: 0
-});
-var thinSeparatorStyles = css({
-  borderBlockStart: "1px solid var(".concat(VAR_SEPARATOR_COLOR, ", ", "var(--ds-border, ".concat(N30A, ")"), ")")
-});
-var noSeparatorStyles = 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__
@@ -93,7 +36,6 @@ var noSeparatorStyles = css({
  */
 var Section = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var children = _ref.children,
-    overrides = _ref.overrides,
     title = _ref.title,
     titleId = _ref.titleId,
     testId = _ref.testId,
@@ -102,12 +44,11 @@ var Section = /*#__PURE__*/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 = _objectWithoutProperties(_ref, _excluded);
-  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 ? 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,
@@ -115,7 +56,7 @@ var Section = /*#__PURE__*/forwardRef(function (_ref, ref) {
       padding: 0
     }
   }, Children.map(Children.toArray(children), function (child, index) {
-    return 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',
@@ -125,21 +66,22 @@ var Section = /*#__PURE__*/forwardRef(function (_ref, ref) {
       key: index
     }, child);
   })) : children;
-  var childrenMarkup = title !== undefined ? jsx(Fragment, null, jsx(HeadingItem
-  // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
-  , {
-    cssFn: UNSAFE_headingOverrides,
+  var childrenMarkup = title !== undefined ? /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(HeadingItem, {
     testId: testId && "".concat(testId, "--heading"),
     "aria-hidden": true
-  }, title), content) : jsx(Fragment, null, content);
-  return jsx("div", _extends({}, rest, {
+    // @ts-expect-error
+    // eslint-disable-next-line @atlaskit/design-system/no-unsafe-style-overrides
+    ,
+    className: ax([isSideNavSection && styles.sideNavSectionHeading])
+  }, title), content) : /*#__PURE__*/React.createElement(Fragment, null, content);
+  return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-    className: UNSAFE_className,
+    className: 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/types/index.d.ts

@@ -8,4 +8,4 @@ export { default as SkeletonHeadingItem } from './menu-item/skeleton-heading-ite
 export { default as Section } from './menu-section/section';
 export { default as MenuGroup } from './menu-section/menu-group';
 export { default as PopupMenuGroup } from './menu-section/popup-menu-group';
-export type { ButtonItemProps, CSSFn, StatelessCSSFn, CustomItemComponentProps, CustomItemProps, HeadingItemProps, ItemState, LinkItemProps, MenuGroupProps, SectionProps, SkeletonHeadingItemProps, SkeletonItemProps, Dimension, MenuItemProps as BaseItemProps, Overrides, MenuGroupSizing, RenderFunction, SectionProps as SectionBaseProps, TitleOverrides, } from './types';
+export type { ButtonItemProps, CSSFn, StatelessCSSFn, CustomItemComponentProps, CustomItemProps, HeadingItemProps, ItemState, LinkItemProps, MenuGroupProps, SectionProps, SkeletonHeadingItemProps, SkeletonItemProps, Dimension, MenuItemProps as BaseItemProps, MenuGroupSizing, RenderFunction, SectionProps as SectionBaseProps, } from './types';

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

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-import { jsx } from '@emotion/react';
 import type { HeadingItemProps } from '../types';
 /**
  * __Heading item__
@@ -9,5 +8,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, headingLevel, id, cssFn, className: UNSAFE_className, ...rest }: HeadingItemProps) => jsx.JSX.Element>;
+declare const HeadingItem: import("react").MemoExoticComponent<({ children, testId, headingLevel, id, className: UNSAFE_className, ...rest }: HeadingItemProps) => JSX.Element>;
 export default HeadingItem;

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

@@ -1,8 +1,4 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import { jsx } from '@emotion/react';
+/// <reference types="react" />
 import type { MenuGroupProps } from '../types';
 /**
  * __Menu group__
@@ -12,5 +8,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: ({ isLoading, maxWidth, minWidth, minHeight, maxHeight, testId, role, spacing, className: UNSAFE_className, ...rest }: MenuGroupProps) => jsx.JSX.Element;
+declare const MenuGroup: ({ isLoading, maxWidth, minWidth, minHeight, maxHeight, testId, role, spacing, className: UNSAFE_className, ...rest }: MenuGroupProps) => JSX.Element;
 export default MenuGroup;

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

@@ -1,11 +1,7 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import { jsx } from '@emotion/react';
+/// <reference types="react" />
 import type { MenuGroupProps } from '../types';
 /**
  * @deprecated refer to MenuGroup, explicitly set maxWidth and minWidth
  */
-declare const PopupMenuGroup: ({ maxWidth, minWidth, ...rest }: MenuGroupProps) => jsx.JSX.Element;
+declare const PopupMenuGroup: ({ maxWidth, minWidth, ...rest }: MenuGroupProps) => JSX.Element;
 export default PopupMenuGroup;

package/dist/types/types.d.ts

@@ -1,25 +1,9 @@
-import { type ComponentType, type PropsWithChildren, type ReactNode, type Ref } from 'react';
+import { type ComponentType, type PropsWithChildren, type Ref } from 'react';
 import { type CSSObject } from '@emotion/react';
 import type { SpacingMode } from './internal/components/menu-context';
 export interface RenderFunction<TProps = {}> {
     (Component: ComponentType | string, props: TProps): React.ReactNode;
 }
-/**
- * @deprecated This type is deprecated and will be removed in a future release. See DSP-2676 for more information.
- */
-export interface TitleOverrides {
-    render?: RenderFunction<{
-        className?: string;
-        children: ReactNode;
-        'data-item-title': boolean;
-    }>;
-}
-/**
- * @deprecated This type is deprecated and will be removed in a future release. See DSP-2676 for more information.
- */
-export interface Overrides {
-    Title?: TitleOverrides;
-}
 export type Dimension = string | number;
 export interface MenuGroupSizing {
     /**
@@ -97,18 +81,6 @@ export interface SectionProps {
      * serving as a hook for automated tests.
      */
     testId?: string;
-    /**
-     * @deprecated This API is deprecated and will be removed in a future release. See DSP-2676 for more information.
-     */
-    overrides?: {
-        HeadingItem?: {
-            /**
-             * A function that overrides the styles of the component.
-             * It receives the current styles and state and expects a styles object.
-             */
-            cssFn?: StatelessCSSFn;
-        };
-    };
     /**
      * The text passed into the internal `HeadingItem`. If a title isn't provided,
      * the `HeadingItem` won't be rendered, and this component will act as a regular `Section`.
@@ -123,6 +95,11 @@ export interface SectionProps {
      * If your menu contains a list, use this to add `<ul>` and `<li>` tags around the items. This is essential for offering better, accessible semantic markup in a list of items.
      */
     isList?: boolean;
+    /**
+     * When `true`, section header inline padding is reduced.
+     * @deprecated This API exists to support functionality in `@atlaskit/side-navigation` and should not be used. Once the new navigation is fully rolled out, this prop will be removed.
+     */
+    isSideNavSection?: boolean;
 }
 export interface MenuItemPrimitiveProps {
     children: (props: {
@@ -347,13 +324,6 @@ export interface SkeletonItemProps {
     cssFn?: StatelessCSSFn;
 }
 export interface HeadingItemProps {
-    /**
-     * A function that overrides the styles.
-     * It receives the current styles and returns a customized styles object.
-     *
-     * @deprecated This API is deprecated and will be removed in a future release. See DSP-2676 for more information.
-     */
-    cssFn?: StatelessCSSFn;
     /**
      * The text of the heading.
      */