@atlaskit/menu 8.4.18 → 8.4.20

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/menu
 
+## 8.4.20
+
+### Patch Changes
+
+- [`08170da1fbf62`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/08170da1fbf62) -
+  Migrate spacing prop usages on icons to Flex wrapper
+- Updated dependencies
+
+## 8.4.19
+
+### Patch Changes
+
+- [`7aef1e49e90ea`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/7aef1e49e90ea) -
+  Removes redundant fallback color values via @atlaskit/theme
+
 ## 8.4.18
 
 ### Patch Changes

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

@@ -1,4 +1,4 @@
-/* menu-item-primitive.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* menu-item-primitive.tsx generated by @compiled/babel-plugin v0.39.1 */
 "use strict";
 
 var _typeof = require("@babel/runtime/helpers/typeof");

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

@@ -1,4 +1,4 @@
-/* button-item.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* button-item.tsx generated by @compiled/babel-plugin v0.39.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

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

@@ -1,4 +1,4 @@
-/* custom-item.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* custom-item.tsx generated by @compiled/babel-plugin v0.39.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

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

@@ -1,4 +1,4 @@
 ._11c8i4vh{font:var(--ds-font-heading-xxsmall,normal 653 9pt/1pc "Atlassian Sans",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)}
+._syazazsu{color:var(--ds-text-subtle,#505258)}

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

@@ -1,4 +1,4 @@
-/* heading-item.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* heading-item.tsx generated by @compiled/babel-plugin v0.39.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -13,7 +13,6 @@ 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 _colors = require("@atlaskit/theme/colors");
 var _excluded = ["children", "testId", "headingLevel", "id", "className"];
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var headingStyles = null;
@@ -42,11 +41,7 @@ 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: (0, _runtime.ax)(["_11c8i4vh _1rjcze3t _18zrpxbi _syaz1vvm", UNSAFE_className])
-  }, rest, {
-    style: {
-      "--_bbz764": (0, _runtime.ix)("var(--ds-text-subtle, ".concat(_colors.N300, ")"))
-    }
-  }), children);
+    className: (0, _runtime.ax)(["_11c8i4vh _1rjcze3t _18zrpxbi _syazazsu", UNSAFE_className])
+  }, rest), children);
 });
 var _default = exports.default = HeadingItem;

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

@@ -1,4 +1,4 @@
-/* link-item.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* link-item.tsx generated by @compiled/babel-plugin v0.39.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

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

@@ -1,4 +1,4 @@
-/* skeleton-heading-item.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* skeleton-heading-item.tsx generated by @compiled/babel-plugin v0.39.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

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

@@ -1,4 +1,4 @@
-/* skeleton-item.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* skeleton-item.tsx generated by @compiled/babel-plugin v0.39.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

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

@@ -1,4 +1,4 @@
-/* menu-group.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* menu-group.tsx generated by @compiled/babel-plugin v0.39.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

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

@@ -1,4 +1,4 @@
-/* popup-menu-group.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* popup-menu-group.tsx generated by @compiled/babel-plugin v0.39.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

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

@@ -1,4 +1,4 @@
-/* section.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* section.tsx generated by @compiled/babel-plugin v0.39.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

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

@@ -1,4 +1,4 @@
-/* menu-item-primitive.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* menu-item-primitive.tsx generated by @compiled/babel-plugin v0.39.1 */
 import "./menu-item-primitive.compiled.css";
 import * as React from 'react';
 import { useContext } from 'react';

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

@@ -1,4 +1,4 @@
-/* button-item.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* button-item.tsx generated by @compiled/babel-plugin v0.39.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

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

@@ -1,4 +1,4 @@
-/* custom-item.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* custom-item.tsx generated by @compiled/babel-plugin v0.39.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

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

@@ -1,4 +1,4 @@
 ._11c8i4vh{font:var(--ds-font-heading-xxsmall,normal 653 9pt/1pc "Atlassian Sans",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)}
+._syazazsu{color:var(--ds-text-subtle,#505258)}

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

@@ -1,10 +1,9 @@
-/* heading-item.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* heading-item.tsx generated by @compiled/babel-plugin v0.39.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import "./heading-item.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { memo } from 'react';
-import { N300 } from '@atlaskit/theme/colors';
 const headingStyles = null;
 
 /**
@@ -35,7 +34,7 @@ const HeadingItem = /*#__PURE__*/memo(({
     id: id
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     ,
-    className: ax(["_11c8i4vh _1rjcze3t _18zrpxbi _syaz1n3s", UNSAFE_className])
+    className: ax(["_11c8i4vh _1rjcze3t _18zrpxbi _syazazsu", UNSAFE_className])
   }, rest), children);
 });
 export default HeadingItem;

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

@@ -1,4 +1,4 @@
-/* link-item.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* link-item.tsx generated by @compiled/babel-plugin v0.39.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

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

@@ -1,4 +1,4 @@
-/* skeleton-heading-item.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* skeleton-heading-item.tsx generated by @compiled/babel-plugin v0.39.1 */
 import "./skeleton-heading-item.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

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

@@ -1,4 +1,4 @@
-/* skeleton-item.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* skeleton-item.tsx generated by @compiled/babel-plugin v0.39.1 */
 import "./skeleton-item.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

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

@@ -1,4 +1,4 @@
-/* menu-group.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* menu-group.tsx generated by @compiled/babel-plugin v0.39.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import "./menu-group.compiled.css";
 import * as React from 'react';

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

@@ -1,4 +1,4 @@
-/* popup-menu-group.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* popup-menu-group.tsx generated by @compiled/babel-plugin v0.39.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

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

@@ -1,4 +1,4 @@
-/* section.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* section.tsx generated by @compiled/babel-plugin v0.39.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import "./section.compiled.css";
 import * as React from 'react';

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

@@ -1,4 +1,4 @@
-/* menu-item-primitive.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* menu-item-primitive.tsx generated by @compiled/babel-plugin v0.39.1 */
 import "./menu-item-primitive.compiled.css";
 import * as React from 'react';
 import { useContext } from 'react';

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

@@ -1,4 +1,4 @@
-/* button-item.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* button-item.tsx generated by @compiled/babel-plugin v0.39.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["children", "description", "iconAfter", "iconBefore", "isDisabled", "isSelected", "onClick", "testId", "onMouseDown", "shouldTitleWrap", "shouldDescriptionWrap", "className", "interactionName"];

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

@@ -1,4 +1,4 @@
-/* custom-item.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* custom-item.tsx generated by @compiled/babel-plugin v0.39.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["component", "isDisabled", "isSelected", "isTitleHeading", "onClick", "testId", "children", "description", "iconAfter", "iconBefore", "onMouseDown", "shouldTitleWrap", "shouldDescriptionWrap", "className", "UNSAFE_isDraggable", "interactionName"];

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

@@ -1,4 +1,4 @@
 ._11c8i4vh{font:var(--ds-font-heading-xxsmall,normal 653 9pt/1pc "Atlassian Sans",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)}
+._syazazsu{color:var(--ds-text-subtle,#505258)}

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

@@ -1,4 +1,4 @@
-/* heading-item.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* heading-item.tsx generated by @compiled/babel-plugin v0.39.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["children", "testId", "headingLevel", "id", "className"];
@@ -6,7 +6,6 @@ import "./heading-item.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { memo } from 'react';
-import { N300 } from '@atlaskit/theme/colors';
 var headingStyles = null;
 
 /**
@@ -33,11 +32,7 @@ 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: ax(["_11c8i4vh _1rjcze3t _18zrpxbi _syaz1vvm", UNSAFE_className])
-  }, rest, {
-    style: {
-      "--_bbz764": ix("var(--ds-text-subtle, ".concat(N300, ")"))
-    }
-  }), children);
+    className: ax(["_11c8i4vh _1rjcze3t _18zrpxbi _syazazsu", UNSAFE_className])
+  }, rest), children);
 });
 export default HeadingItem;

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

@@ -1,4 +1,4 @@
-/* link-item.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* link-item.tsx generated by @compiled/babel-plugin v0.39.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["children", "href", "description", "iconAfter", "iconBefore", "isDisabled", "isSelected", "onClick", "testId", "onMouseDown", "shouldTitleWrap", "shouldDescriptionWrap", "className", "UNSAFE_shouldDisableRouterLink", "UNSAFE_isDraggable", "interactionName"];

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

@@ -1,4 +1,4 @@
-/* skeleton-heading-item.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* skeleton-heading-item.tsx generated by @compiled/babel-plugin v0.39.1 */
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import "./skeleton-heading-item.compiled.css";
 import * as React from 'react';

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

@@ -1,4 +1,4 @@
-/* skeleton-item.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* skeleton-item.tsx generated by @compiled/babel-plugin v0.39.1 */
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import "./skeleton-item.compiled.css";
 import * as React from 'react';

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

@@ -1,4 +1,4 @@
-/* menu-group.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* menu-group.tsx generated by @compiled/babel-plugin v0.39.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", "menuLabel", "className"];

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

@@ -1,4 +1,4 @@
-/* popup-menu-group.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* popup-menu-group.tsx generated by @compiled/babel-plugin v0.39.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["maxWidth", "minWidth"];

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

@@ -1,4 +1,4 @@
-/* section.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* section.tsx generated by @compiled/babel-plugin v0.39.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["children", "title", "titleId", "testId", "isScrollable", "hasSeparator", "id", "isList", "isSideNavSection", "label", "className"];

package/menu.docs.tsx

@@ -0,0 +1,256 @@
+import path from 'path';
+
+import type { ComponentStructuredContentSource } from '@atlassian/structured-docs-types';
+
+const documentation: ComponentStructuredContentSource[] = [
+	{
+		name: 'MenuGroup',
+		description: 'A list of options to action or navigate.',
+		status: 'general-availability',
+		import: {
+			name: 'MenuGroup',
+			package: '@atlaskit/menu',
+			type: 'named',
+			packagePath: path.resolve(__dirname),
+			packageJson: require('./package.json'),
+		},
+		usageGuidelines: [
+			'Use for list of options to action or navigate',
+			'Button items = actions (e.g. Copy); Link items = navigate (e.g. Team Spaces)',
+			'Group related menu items together',
+			'Use clear section titles',
+		],
+		contentGuidelines: [
+			'Use clear, descriptive menu item labels',
+			'Group related items logically',
+			'Use consistent terminology',
+			'Keep menu structure simple',
+		],
+		accessibilityGuidelines: [
+			'Provide clear menu item labels',
+			'Use appropriate ARIA attributes',
+			'Ensure keyboard navigation with arrow keys',
+			'Provide clear section titles',
+		],
+		examples: [
+			{
+				name: 'Menu',
+				description: 'Menu example',
+				source: path.resolve(__dirname, './examples/ai/menu.tsx'),
+			},
+		],
+		keywords: ['menu', 'group', 'navigation', 'section', 'items'],
+		categories: ['navigation'],
+	},
+	{
+		name: 'ButtonItem',
+		description:
+			'A menu item that triggers an action when clicked. Use for actions like Copy, Delete, or Create.',
+		status: 'general-availability',
+		import: {
+			name: 'ButtonItem',
+			package: '@atlaskit/menu',
+			type: 'named',
+			packagePath: path.resolve(__dirname),
+			packageJson: require('./package.json'),
+		},
+		usageGuidelines: [
+			'Use for actions that do not navigate (e.g. Copy, Create article)',
+			'Combine with icons for clarity when they add meaning',
+			'Use secondary text for context when helpful (e.g. project type)',
+		],
+		contentGuidelines: [
+			'Use clear, action-oriented labels',
+			'Use consistent terminology across menus',
+		],
+		examples: [
+			{
+				name: 'Button Item',
+				description: 'ButtonItem example',
+				source: path.resolve(__dirname, './examples/constellation/button-item.tsx'),
+			},
+		],
+		keywords: ['menu', 'button', 'item', 'action'],
+		categories: ['navigation', 'interaction'],
+	},
+	{
+		name: 'LinkItem',
+		description:
+			'A menu item that navigates to a URL when clicked. Use for navigation links like Dashboard or Settings.',
+		status: 'general-availability',
+		import: {
+			name: 'LinkItem',
+			package: '@atlaskit/menu',
+			type: 'named',
+			packagePath: path.resolve(__dirname),
+			packageJson: require('./package.json'),
+		},
+		usageGuidelines: [
+			'Use for navigation (e.g. Team Spaces, Settings)',
+			'Indicate the current page when relevant',
+			'Combine with icons for context when they add meaning',
+		],
+		contentGuidelines: ['Use clear, descriptive labels for destinations', 'Keep labels concise'],
+		examples: [
+			{
+				name: 'Link Item',
+				description: 'LinkItem example',
+				source: path.resolve(__dirname, './examples/constellation/link-item.tsx'),
+			},
+		],
+		keywords: ['menu', 'link', 'item', 'navigation'],
+		categories: ['navigation'],
+	},
+	{
+		name: 'CustomItem',
+		description:
+			'A menu item that accepts a custom component for advanced use cases when ButtonItem or LinkItem do not meet your needs.',
+		status: 'general-availability',
+		import: {
+			name: 'CustomItem',
+			package: '@atlaskit/menu',
+			type: 'named',
+			packagePath: path.resolve(__dirname),
+			packageJson: require('./package.json'),
+		},
+		usageGuidelines: [
+			'Use when ButtonItem or LinkItem cannot fulfill your requirements',
+			'Preserve menu item styling and behavior in custom implementations',
+		],
+		contentGuidelines: [
+			'Ensure custom components maintain accessibility',
+			'Keep custom implementations minimal',
+		],
+		examples: [
+			{
+				name: 'Custom Item',
+				description: 'CustomItem example',
+				source: path.resolve(__dirname, './examples/constellation/custom-item.tsx'),
+			},
+		],
+		keywords: ['menu', 'custom', 'item', 'component'],
+		categories: ['navigation'],
+	},
+	{
+		name: 'Section',
+		description: 'Groups related menu items together with an optional title or heading.',
+		status: 'general-availability',
+		import: {
+			name: 'Section',
+			package: '@atlaskit/menu',
+			type: 'named',
+			packagePath: path.resolve(__dirname),
+			packageJson: require('./package.json'),
+		},
+		usageGuidelines: [
+			'Use to group related menu items (e.g. Actions, Settings)',
+			'Use clear section titles when grouping',
+			'Use visual separators between sections when helpful',
+		],
+		contentGuidelines: ['Use clear section titles', 'Group items logically'],
+		examples: [
+			{
+				name: 'Section',
+				description: 'Section example',
+				source: path.resolve(__dirname, './examples/constellation/section-default.tsx'),
+			},
+		],
+		keywords: ['menu', 'section', 'group', 'items'],
+		categories: ['navigation'],
+	},
+	{
+		name: 'PopupMenuGroup',
+		description:
+			'A variant of MenuGroup with sensible default max/min width for popup menus. Deprecated—use MenuGroup instead.',
+		status: 'deprecated',
+		import: {
+			name: 'PopupMenuGroup',
+			package: '@atlaskit/menu',
+			type: 'named',
+			packagePath: path.resolve(__dirname),
+			packageJson: require('./package.json'),
+		},
+		usageGuidelines: [
+			'Prefer MenuGroup instead; PopupMenuGroup is deprecated',
+			'Use only when migrating existing code',
+		],
+		keywords: ['menu', 'popup', 'group', 'deprecated'],
+		categories: ['navigation'],
+	},
+	{
+		name: 'HeadingItem',
+		description:
+			'A non-interactive heading within a menu section. Use to label groups of items when Section title is not used.',
+		status: 'general-availability',
+		import: {
+			name: 'HeadingItem',
+			package: '@atlaskit/menu',
+			type: 'named',
+			packagePath: path.resolve(__dirname),
+			packageJson: require('./package.json'),
+		},
+		usageGuidelines: [
+			'Use to label section groups when a section title is not sufficient',
+			'Do not use for interactive content—headings are display-only',
+		],
+		contentGuidelines: ['Use clear, descriptive headings', 'Keep headings concise'],
+		examples: [
+			{
+				name: 'Heading Item',
+				description: 'HeadingItem example',
+				source: path.resolve(__dirname, './examples/constellation/heading-item.tsx'),
+			},
+		],
+		keywords: ['menu', 'heading', 'item', 'label'],
+		categories: ['navigation'],
+	},
+	{
+		name: 'SkeletonItem',
+		description: 'A skeleton placeholder for a menu item during loading states.',
+		status: 'general-availability',
+		import: {
+			name: 'SkeletonItem',
+			package: '@atlaskit/menu',
+			type: 'named',
+			packagePath: path.resolve(__dirname),
+			packageJson: require('./package.json'),
+		},
+		usageGuidelines: [
+			'Use during loading to maintain layout stability',
+			'Match the shape of the loaded item (e.g. with or without icon)',
+		],
+		examples: [
+			{
+				name: 'Skeleton Item',
+				description: 'SkeletonItem example',
+				source: path.resolve(__dirname, './examples/constellation/menu-loading.tsx'),
+			},
+		],
+		keywords: ['menu', 'skeleton', 'loading', 'placeholder'],
+		categories: ['loading', 'navigation'],
+	},
+	{
+		name: 'SkeletonHeadingItem',
+		description: 'A skeleton placeholder for a menu heading during loading states.',
+		status: 'general-availability',
+		import: {
+			name: 'SkeletonHeadingItem',
+			package: '@atlaskit/menu',
+			type: 'named',
+			packagePath: path.resolve(__dirname),
+			packageJson: require('./package.json'),
+		},
+		usageGuidelines: ['Use during loading when a section heading will appear'],
+		examples: [
+			{
+				name: 'Skeleton Heading Item',
+				description: 'SkeletonHeadingItem example',
+				source: path.resolve(__dirname, './examples/constellation/menu-loading.tsx'),
+			},
+		],
+		keywords: ['menu', 'skeleton', 'heading', 'loading'],
+		categories: ['loading', 'navigation'],
+	},
+];
+
+export default documentation;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/menu",
-	"version": "8.4.18",
+	"version": "8.4.20",
 	"description": "A list of options to help users navigate, or perform actions.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -40,15 +40,14 @@
 		}
 	},
 	"dependencies": {
-		"@atlaskit/app-provider": "^4.1.0",
+		"@atlaskit/app-provider": "^4.2.0",
 		"@atlaskit/css": "^0.19.0",
 		"@atlaskit/interaction-context": "^3.1.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
-		"@atlaskit/primitives": "^18.0.0",
-		"@atlaskit/theme": "^22.0.0",
-		"@atlaskit/tokens": "^11.0.0",
+		"@atlaskit/primitives": "^18.1.0",
+		"@atlaskit/tokens": "^11.4.0",
 		"@babel/runtime": "^7.0.0",
-		"@compiled/react": "^0.18.6"
+		"@compiled/react": "^0.20.0"
 	},
 	"peerDependencies": {
 		"react": "^18.2.0",
@@ -59,13 +58,14 @@
 		"@af/integration-testing": "workspace:^",
 		"@af/visual-regression": "workspace:^",
 		"@atlaskit/button": "^23.10.0",
-		"@atlaskit/docs": "^11.5.0",
-		"@atlaskit/ds-lib": "^5.3.0",
-		"@atlaskit/icon": "^32.0.0",
+		"@atlaskit/docs": "^11.7.0",
+		"@atlaskit/ds-lib": "^6.0.0",
+		"@atlaskit/icon": "^33.1.0",
 		"@atlaskit/icon-file-type": "^7.0.0",
-		"@atlaskit/icon-object": "^7.4.0",
+		"@atlaskit/icon-object": "^7.5.0",
 		"@atlaskit/link": "^3.3.0",
 		"@atlaskit/section-message": "^8.12.0",
+		"@atlassian/structured-docs-types": "workspace:^",
 		"@testing-library/react": "^16.3.0",
 		"ast-types": "^0.13.3",
 		"jscodeshift": "^17.0.0"