@atlaskit/dropdown-menu 16.7.1 → 16.8.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/dropdown-menu
 
+## 16.8.0
+
+### Minor Changes
+
+- [`1001eaeabe30f`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/1001eaeabe30f) -
+  Autofix: add explicit package exports (barrel removal)
+
+### Patch Changes
+
+- Updated dependencies
+
+## 16.7.2
+
+### Patch Changes
+
+- [`f31216f23df61`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/f31216f23df61) -
+  Removes internally exported API from files which will soon be exported as top-level API
+
 ## 16.7.1
 
 ### Patch Changes

package/dist/cjs/internal/hooks/use-radio-state.js

@@ -8,7 +8,7 @@ exports.default = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("react");
-var _dropdownItemRadioGroup = require("../../radio/dropdown-item-radio-group");
+var _radioGroupContext = require("../../radio/radio-group-context");
 var _selectionStore = require("../context/selection-store");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -19,7 +19,7 @@ function useRadioState(_ref) {
   var _useContext = (0, _react.useContext)(_selectionStore.SelectionStoreContext),
     setGroupState = _useContext.setGroupState,
     getGroupState = _useContext.getGroupState;
-  var _useContext2 = (0, _react.useContext)(_dropdownItemRadioGroup.RadioGroupContext),
+  var _useContext2 = (0, _react.useContext)(_radioGroupContext.RadioGroupContext),
     group = _useContext2.id,
     radioGroupState = _useContext2.radioGroupState,
     selectRadioItem = _useContext2.selectRadioItem;

package/dist/cjs/radio/dropdown-item-radio-group.js

@@ -5,32 +5,22 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.RadioGroupContext = void 0;
+exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
-var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
 var _useId = require("@atlaskit/ds-lib/use-id");
 var _menu = require("@atlaskit/menu");
 var _groupTitle = _interopRequireDefault(require("../internal/components/group-title"));
 var _selectionStore = require("../internal/context/selection-store");
 var _resetOptionsInGroup = _interopRequireDefault(require("../internal/utils/reset-options-in-group"));
+var _radioGroupContext = require("./radio-group-context");
 var _excluded = ["children", "hasSeparator", "id", "isList", "isScrollable", "testId", "title"];
 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); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-/**
- * __Radio group context__
- * Context provider that wraps each DropdownItemRadioGroup
- */
-var RadioGroupContext = exports.RadioGroupContext = /*#__PURE__*/(0, _react.createContext)({
-  id: '',
-  radioGroupState: {},
-  selectRadioItem: _noop.default
-});
-
 /**
  * __Dropdown item radio group__
  *  Store which manages the selection state for each DropdownItemRadio
@@ -67,7 +57,7 @@ var DropdownItemRadioGroup = function DropdownItemRadioGroup(_ref) {
     setRadioGroupState(newValue);
     setGroupState(id, newValue);
   };
-  return /*#__PURE__*/_react.default.createElement(RadioGroupContext.Provider, {
+  return /*#__PURE__*/_react.default.createElement(_radioGroupContext.RadioGroupContext.Provider, {
     value: {
       id: id,
       radioGroupState: radioGroupState,

package/dist/cjs/radio/radio-group-context.js

@@ -0,0 +1,18 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RadioGroupContext = void 0;
+var _react = require("react");
+var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
+/**
+ * __Radio group context__
+ * Context provider that wraps each DropdownItemRadioGroup
+ */
+var RadioGroupContext = exports.RadioGroupContext = /*#__PURE__*/(0, _react.createContext)({
+  id: '',
+  radioGroupState: {},
+  selectRadioItem: _noop.default
+});

package/dist/es2019/internal/hooks/use-radio-state.js

@@ -1,5 +1,5 @@
 import { useCallback, useContext, useEffect, useState } from 'react';
-import { RadioGroupContext } from '../../radio/dropdown-item-radio-group';
+import { RadioGroupContext } from '../../radio/radio-group-context';
 import { SelectionStoreContext } from '../context/selection-store';
 function useRadioState({
   id,

package/dist/es2019/radio/dropdown-item-radio-group.js

@@ -1,21 +1,11 @@
 import _extends from "@babel/runtime/helpers/extends";
-import React, { createContext, useContext, useState } from 'react';
-import noop from '@atlaskit/ds-lib/noop';
+import React, { useContext, useState } from 'react';
 import { useId } from '@atlaskit/ds-lib/use-id';
 import { Section } from '@atlaskit/menu';
 import GroupTitle from '../internal/components/group-title';
 import { SelectionStoreContext } from '../internal/context/selection-store';
 import resetOptionsInGroup from '../internal/utils/reset-options-in-group';
-/**
- * __Radio group context__
- * Context provider that wraps each DropdownItemRadioGroup
- */
-export const RadioGroupContext = /*#__PURE__*/createContext({
-  id: '',
-  radioGroupState: {},
-  selectRadioItem: noop
-});
-
+import { RadioGroupContext } from './radio-group-context';
 /**
  * __Dropdown item radio group__
  *  Store which manages the selection state for each DropdownItemRadio

package/dist/es2019/radio/radio-group-context.js

@@ -0,0 +1,11 @@
+import { createContext } from 'react';
+import noop from '@atlaskit/ds-lib/noop';
+/**
+ * __Radio group context__
+ * Context provider that wraps each DropdownItemRadioGroup
+ */
+export const RadioGroupContext = /*#__PURE__*/createContext({
+  id: '',
+  radioGroupState: {},
+  selectRadioItem: noop
+});

package/dist/esm/internal/hooks/use-radio-state.js

@@ -3,7 +3,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import { useCallback, useContext, useEffect, useState } from 'react';
-import { RadioGroupContext } from '../../radio/dropdown-item-radio-group';
+import { RadioGroupContext } from '../../radio/radio-group-context';
 import { SelectionStoreContext } from '../context/selection-store';
 function useRadioState(_ref) {
   var id = _ref.id,

package/dist/esm/radio/dropdown-item-radio-group.js

@@ -5,23 +5,13 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 var _excluded = ["children", "hasSeparator", "id", "isList", "isScrollable", "testId", "title"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-import React, { createContext, useContext, useState } from 'react';
-import noop from '@atlaskit/ds-lib/noop';
+import React, { useContext, useState } from 'react';
 import { useId } from '@atlaskit/ds-lib/use-id';
 import { Section } from '@atlaskit/menu';
 import GroupTitle from '../internal/components/group-title';
 import { SelectionStoreContext } from '../internal/context/selection-store';
 import resetOptionsInGroup from '../internal/utils/reset-options-in-group';
-/**
- * __Radio group context__
- * Context provider that wraps each DropdownItemRadioGroup
- */
-export var RadioGroupContext = /*#__PURE__*/createContext({
-  id: '',
-  radioGroupState: {},
-  selectRadioItem: noop
-});
-
+import { RadioGroupContext } from './radio-group-context';
 /**
  * __Dropdown item radio group__
  *  Store which manages the selection state for each DropdownItemRadio

package/dist/esm/radio/radio-group-context.js

@@ -0,0 +1,11 @@
+import { createContext } from 'react';
+import noop from '@atlaskit/ds-lib/noop';
+/**
+ * __Radio group context__
+ * Context provider that wraps each DropdownItemRadioGroup
+ */
+export var RadioGroupContext = /*#__PURE__*/createContext({
+  id: '',
+  radioGroupState: {},
+  selectRadioItem: noop
+});

package/dist/types/radio/dropdown-item-radio-group.d.ts

@@ -3,18 +3,6 @@ import { type SectionProps } from '@atlaskit/menu';
 interface DropdownItemRadioGroupProps extends SectionProps {
     id: string;
 }
-interface RadioGroupContextProps {
-    id: string;
-    radioGroupState: {
-        [key: string]: boolean | undefined;
-    };
-    selectRadioItem: (id: string, value: boolean) => void;
-}
-/**
- * __Radio group context__
- * Context provider that wraps each DropdownItemRadioGroup
- */
-export declare const RadioGroupContext: React.Context<RadioGroupContextProps>;
 /**
  * __Dropdown item radio group__
  *  Store which manages the selection state for each DropdownItemRadio

package/dist/types/radio/radio-group-context.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+interface RadioGroupContextProps {
+    id: string;
+    radioGroupState: {
+        [key: string]: boolean | undefined;
+    };
+    selectRadioItem: (id: string, value: boolean) => void;
+}
+/**
+ * __Radio group context__
+ * Context provider that wraps each DropdownItemRadioGroup
+ */
+export declare const RadioGroupContext: React.Context<RadioGroupContextProps>;
+export {};

package/dist/types-ts4.5/radio/dropdown-item-radio-group.d.ts

@@ -3,18 +3,6 @@ import { type SectionProps } from '@atlaskit/menu';
 interface DropdownItemRadioGroupProps extends SectionProps {
     id: string;
 }
-interface RadioGroupContextProps {
-    id: string;
-    radioGroupState: {
-        [key: string]: boolean | undefined;
-    };
-    selectRadioItem: (id: string, value: boolean) => void;
-}
-/**
- * __Radio group context__
- * Context provider that wraps each DropdownItemRadioGroup
- */
-export declare const RadioGroupContext: React.Context<RadioGroupContextProps>;
 /**
  * __Dropdown item radio group__
  *  Store which manages the selection state for each DropdownItemRadio

package/dist/types-ts4.5/radio/radio-group-context.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+interface RadioGroupContextProps {
+    id: string;
+    radioGroupState: {
+        [key: string]: boolean | undefined;
+    };
+    selectRadioItem: (id: string, value: boolean) => void;
+}
+/**
+ * __Radio group context__
+ * Context provider that wraps each DropdownItemRadioGroup
+ */
+export declare const RadioGroupContext: React.Context<RadioGroupContextProps>;
+export {};

package/dropdown-item-checkbox/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@atlaskit/dropdown-menu/dropdown-item-checkbox",
+  "main": "../dist/cjs/checkbox/dropdown-item-checkbox.js",
+  "module": "../dist/esm/checkbox/dropdown-item-checkbox.js",
+  "module:es2019": "../dist/es2019/checkbox/dropdown-item-checkbox.js",
+  "sideEffects": [
+    "**/*.compiled.css"
+  ],
+  "types": "../dist/types/checkbox/dropdown-item-checkbox.d.ts",
+  "typesVersions": {
+    ">=4.5 <5.9": {
+      "*": [
+        "../dist/types-ts4.5/checkbox/dropdown-item-checkbox.d.ts"
+      ]
+    }
+  }
+}

package/dropdown-item-checkbox-group/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@atlaskit/dropdown-menu/dropdown-item-checkbox-group",
+  "main": "../dist/cjs/checkbox/dropdown-item-checkbox-group.js",
+  "module": "../dist/esm/checkbox/dropdown-item-checkbox-group.js",
+  "module:es2019": "../dist/es2019/checkbox/dropdown-item-checkbox-group.js",
+  "sideEffects": [
+    "**/*.compiled.css"
+  ],
+  "types": "../dist/types/checkbox/dropdown-item-checkbox-group.d.ts",
+  "typesVersions": {
+    ">=4.5 <5.9": {
+      "*": [
+        "../dist/types-ts4.5/checkbox/dropdown-item-checkbox-group.d.ts"
+      ]
+    }
+  }
+}

package/dropdown-item-radio/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@atlaskit/dropdown-menu/dropdown-item-radio",
+  "main": "../dist/cjs/radio/dropdown-item-radio.js",
+  "module": "../dist/esm/radio/dropdown-item-radio.js",
+  "module:es2019": "../dist/es2019/radio/dropdown-item-radio.js",
+  "sideEffects": [
+    "**/*.compiled.css"
+  ],
+  "types": "../dist/types/radio/dropdown-item-radio.d.ts",
+  "typesVersions": {
+    ">=4.5 <5.9": {
+      "*": [
+        "../dist/types-ts4.5/radio/dropdown-item-radio.d.ts"
+      ]
+    }
+  }
+}

package/dropdown-item-radio-group/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@atlaskit/dropdown-menu/dropdown-item-radio-group",
+  "main": "../dist/cjs/radio/dropdown-item-radio-group.js",
+  "module": "../dist/esm/radio/dropdown-item-radio-group.js",
+  "module:es2019": "../dist/es2019/radio/dropdown-item-radio-group.js",
+  "sideEffects": [
+    "**/*.compiled.css"
+  ],
+  "types": "../dist/types/radio/dropdown-item-radio-group.d.ts",
+  "typesVersions": {
+    ">=4.5 <5.9": {
+      "*": [
+        "../dist/types-ts4.5/radio/dropdown-item-radio-group.d.ts"
+      ]
+    }
+  }
+}

package/dropdown-menu/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@atlaskit/dropdown-menu/dropdown-menu",
+  "main": "../dist/cjs/dropdown-menu.js",
+  "module": "../dist/esm/dropdown-menu.js",
+  "module:es2019": "../dist/es2019/dropdown-menu.js",
+  "sideEffects": [
+    "**/*.compiled.css"
+  ],
+  "types": "../dist/types/dropdown-menu.d.ts",
+  "typesVersions": {
+    ">=4.5 <5.9": {
+      "*": [
+        "../dist/types-ts4.5/dropdown-menu.d.ts"
+      ]
+    }
+  }
+}

package/dropdown-menu-item/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@atlaskit/dropdown-menu/dropdown-menu-item",
+  "main": "../dist/cjs/dropdown-menu-item.js",
+  "module": "../dist/esm/dropdown-menu-item.js",
+  "module:es2019": "../dist/es2019/dropdown-menu-item.js",
+  "sideEffects": [
+    "**/*.compiled.css"
+  ],
+  "types": "../dist/types/dropdown-menu-item.d.ts",
+  "typesVersions": {
+    ">=4.5 <5.9": {
+      "*": [
+        "../dist/types-ts4.5/dropdown-menu-item.d.ts"
+      ]
+    }
+  }
+}

package/dropdown-menu-item-group/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@atlaskit/dropdown-menu/dropdown-menu-item-group",
+  "main": "../dist/cjs/dropdown-menu-item-group.js",
+  "module": "../dist/esm/dropdown-menu-item-group.js",
+  "module:es2019": "../dist/es2019/dropdown-menu-item-group.js",
+  "sideEffects": [
+    "**/*.compiled.css"
+  ],
+  "types": "../dist/types/dropdown-menu-item-group.d.ts",
+  "typesVersions": {
+    ">=4.5 <5.9": {
+      "*": [
+        "../dist/types-ts4.5/dropdown-menu-item-group.d.ts"
+      ]
+    }
+  }
+}

package/dropdown-menu.docs.tsx

@@ -49,6 +49,198 @@ const documentation: ComponentStructuredContentSource[] = [
 		keywords: ['dropdown', 'menu', 'actions', 'options', 'popup', 'contextual'],
 		categories: ['navigation', 'interaction'],
 	},
+	{
+		name: 'DropdownItem',
+		description:
+			'A dropdown item populates the dropdown menu with items. Use for links or actions; every item must be inside a DropdownItemGroup. Can also be used as the trigger for a nested submenu.',
+		status: 'general-availability',
+		import: {
+			name: 'DropdownItem',
+			package: '@atlaskit/dropdown-menu',
+			type: 'named',
+			packagePath: path.resolve(__dirname),
+			packageJson: require('./package.json'),
+		},
+		usageGuidelines: [
+			'Use inside DropdownMenu with DropdownItemGroup (required parent)',
+			'Use for links (href) or actions (onClick); verbs for actions, nouns for links; no articles; single line per item',
+			'For a nested submenu: use as the trigger (pass triggerRef and trigger props, use elemAfter e.g. chevron); keep to maximum two layers',
+		],
+		contentGuidelines: [
+			'Use clear, descriptive menu item labels',
+			'Keep menu item text concise',
+			'Use consistent terminology across menu items',
+		],
+		accessibilityGuidelines: [
+			'Avoid truncation—ensure max width does not cut off labels',
+			'Ensure keyboard navigation with arrow keys',
+		],
+		examples: [
+			{
+				name: 'Dropdown Menu',
+				description: 'Dropdown Menu with DropdownItem example',
+				source: path.resolve(__dirname, './examples/ai/dropdown-menu.tsx'),
+			},
+		],
+		keywords: ['dropdown', 'menu', 'item', 'action', 'link', 'menuitem'],
+		categories: ['navigation', 'interaction'],
+	},
+	{
+		name: 'DropdownItemGroup',
+		description:
+			'Wrapping element for dropdown menu items. Use to group related items; optional short uppercase title (e.g. "Edit page", "Tools") separates sections.',
+		status: 'general-availability',
+		import: {
+			name: 'DropdownItemGroup',
+			package: '@atlaskit/dropdown-menu',
+			type: 'named',
+			packagePath: path.resolve(__dirname),
+			packageJson: require('./package.json'),
+		},
+		usageGuidelines: [
+			'Use inside DropdownMenu to group related items',
+			'Use short, uppercase title to describe the group',
+			'Nested menu: maximum two layers',
+		],
+		contentGuidelines: [
+			'Group related actions logically',
+			'Use consistent terminology across menu items',
+		],
+		accessibilityGuidelines: ['Provide clear group titles', 'Nested menu: maximum two layers'],
+		examples: [
+			{
+				name: 'Dropdown Menu',
+				description: 'Dropdown Menu with DropdownItemGroup example',
+				source: path.resolve(__dirname, './examples/ai/dropdown-menu.tsx'),
+			},
+		],
+		keywords: ['dropdown', 'menu', 'group', 'section', 'title'],
+		categories: ['navigation', 'interaction'],
+	},
+	{
+		name: 'DropdownItemCheckbox',
+		description:
+			'A dropdown menu item with checkbox selection. Use for multiple selection from a list (e.g. status filters, show/hide toggles).',
+		status: 'general-availability',
+		import: {
+			name: 'DropdownItemCheckbox',
+			package: '@atlaskit/dropdown-menu',
+			type: 'named',
+			packagePath: path.resolve(__dirname),
+			packageJson: require('./package.json'),
+		},
+		usageGuidelines: [
+			'Use with DropdownItemCheckboxGroup; control selection with isSelected and onClick',
+			'Use for multiple selection from a list or toggles (e.g. categories, column visibility)',
+			'Group related checkboxes; use short uppercase title on DropdownItemCheckboxGroup',
+		],
+		contentGuidelines: ['Use clear, descriptive labels', 'Keep menu item text concise'],
+		accessibilityGuidelines: [
+			'Ensure keyboard navigation and clear selection state',
+			'Use appropriate ARIA attributes',
+		],
+		examples: [
+			{
+				name: 'Dropdown Menu',
+				description: 'Dropdown Menu with checkbox items example',
+				source: path.resolve(__dirname, './examples/ai/dropdown-menu.tsx'),
+			},
+		],
+		keywords: ['dropdown', 'menu', 'checkbox', 'multi-select', 'toggle'],
+		categories: ['navigation', 'interaction', 'form'],
+	},
+	{
+		name: 'DropdownItemCheckboxGroup',
+		description:
+			'Groups DropdownItemCheckbox components for multi-select options within a dropdown menu.',
+		status: 'general-availability',
+		import: {
+			name: 'DropdownItemCheckboxGroup',
+			package: '@atlaskit/dropdown-menu',
+			type: 'named',
+			packagePath: path.resolve(__dirname),
+			packageJson: require('./package.json'),
+		},
+		usageGuidelines: [
+			'Use to group related DropdownItemCheckbox items',
+			'Use for multiple selection from a list',
+		],
+		contentGuidelines: ['Group related checkboxes logically', 'Use consistent terminology'],
+		examples: [
+			{
+				name: 'Checkbox group',
+				description: 'DropdownItemCheckboxGroup with titled section and checkbox items.',
+				source: path.resolve(
+					__dirname,
+					'./examples/constellation/dropdown-item-checkbox-selected.tsx',
+				),
+			},
+		],
+		keywords: ['dropdown', 'menu', 'checkbox', 'group', 'multi-select'],
+		categories: ['navigation', 'interaction', 'form'],
+	},
+	{
+		name: 'DropdownItemRadio',
+		description:
+			'A dropdown menu item with radio selection. Use for single selection from a short list (e.g. view mode, sort order).',
+		status: 'general-availability',
+		import: {
+			name: 'DropdownItemRadio',
+			package: '@atlaskit/dropdown-menu',
+			type: 'named',
+			packagePath: path.resolve(__dirname),
+			packageJson: require('./package.json'),
+		},
+		usageGuidelines: [
+			'Use with DropdownItemRadioGroup; control selection with isSelected and onClick',
+			'Use for single selection from a short list (e.g. views, density)',
+			'Group related radio items; use short uppercase title on DropdownItemRadioGroup',
+		],
+		contentGuidelines: ['Use clear, descriptive labels', 'Keep menu item text concise'],
+		accessibilityGuidelines: [
+			'Ensure keyboard navigation and clear selection state',
+			'Use appropriate ARIA attributes',
+		],
+		examples: [
+			{
+				name: 'Dropdown Menu',
+				description: 'Dropdown Menu with radio items example',
+				source: path.resolve(__dirname, './examples/ai/dropdown-menu.tsx'),
+			},
+		],
+		keywords: ['dropdown', 'menu', 'radio', 'single-select', 'choice'],
+		categories: ['navigation', 'interaction', 'form'],
+	},
+	{
+		name: 'DropdownItemRadioGroup',
+		description:
+			'Groups DropdownItemRadio components for single-select options within a dropdown menu.',
+		status: 'general-availability',
+		import: {
+			name: 'DropdownItemRadioGroup',
+			package: '@atlaskit/dropdown-menu',
+			type: 'named',
+			packagePath: path.resolve(__dirname),
+			packageJson: require('./package.json'),
+		},
+		usageGuidelines: [
+			'Use to group related DropdownItemRadio items',
+			'Use for single selection from a short list',
+		],
+		contentGuidelines: ['Group related radio items logically', 'Use consistent terminology'],
+		examples: [
+			{
+				name: 'Radio group',
+				description: 'DropdownItemRadioGroup with titled section and radio items.',
+				source: path.resolve(
+					__dirname,
+					'./examples/constellation/dropdown-item-radio-selected.tsx',
+				),
+			},
+		],
+		keywords: ['dropdown', 'menu', 'radio', 'group', 'single-select'],
+		categories: ['navigation', 'interaction', 'form'],
+	},
 ];
 
 export default documentation;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/dropdown-menu",
-	"version": "16.7.1",
+	"version": "16.8.0",
 	"description": "A dropdown menu displays a list of actions or options to a user.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -31,11 +31,11 @@
 		"@atlaskit/layering": "^3.6.0",
 		"@atlaskit/menu": "^8.4.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
-		"@atlaskit/popup": "^4.13.0",
+		"@atlaskit/popup": "^4.14.0",
 		"@atlaskit/primitives": "^18.0.0",
 		"@atlaskit/spinner": "^19.0.0",
 		"@atlaskit/theme": "^22.0.0",
-		"@atlaskit/tokens": "^11.1.0",
+		"@atlaskit/tokens": "^11.2.0",
 		"@atlaskit/visually-hidden": "^3.0.0",
 		"@babel/runtime": "^7.0.0",
 		"bind-event-listener": "^3.0.0"
@@ -50,14 +50,14 @@
 		"@af/visual-regression": "workspace:^",
 		"@atlaskit/app-provider": "^4.1.0",
 		"@atlaskit/atlassian-navigation": "^5.6.0",
-		"@atlaskit/avatar": "^25.9.0",
+		"@atlaskit/avatar": "^25.10.0",
 		"@atlaskit/checkbox": "^17.3.0",
 		"@atlaskit/docs": "^11.7.0",
-		"@atlaskit/form": "^15.4.0",
+		"@atlaskit/form": "^15.5.0",
 		"@atlaskit/heading": "^5.3.0",
 		"@atlaskit/link": "^3.3.0",
 		"@atlaskit/lozenge": "^13.5.0",
-		"@atlaskit/modal-dialog": "^14.11.0",
+		"@atlaskit/modal-dialog": "^14.12.0",
 		"@atlaskit/section-message": "^8.12.0",
 		"@atlaskit/textfield": "^8.2.0",
 		"@atlaskit/toggle": "^15.2.0",