@atlaskit/dropdown-menu 11.5.2 → 11.5.3

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @atlaskit/dropdown-menu
 
+## 11.5.3
+
+### Patch Changes
+
+- [`625585b8db6`](https://bitbucket.org/atlassian/atlassian-frontend/commits/625585b8db6) - Bug fix to re-position the menu after change in loading state.
+- Updated dependencies
+
 ## 11.5.2
 
 ### Patch Changes

package/dist/cjs/dropdown-menu.js

@@ -35,12 +35,8 @@ var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-
 
 var _popup = _interopRequireDefault(require("@atlaskit/popup"));
 
-var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
-
 var _constants = require("@atlaskit/theme/constants");
 
-var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
-
 var _focusManager = _interopRequireDefault(require("./internal/components/focus-manager"));
 
 var _menuWrapper = _interopRequireDefault(require("./internal/components/menu-wrapper"));
@@ -56,12 +52,6 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 var gridSize = (0, _constants.gridSize)();
-var spinnerContainerStyles = (0, _react2.css)({
-  display: 'flex',
-  minWidth: "".concat(gridSize * 20, "px"),
-  padding: "".concat(gridSize * 2.5, "px"),
-  justifyContent: 'center'
-});
 var MAX_HEIGHT = "calc(100vh - ".concat(gridSize * 2, "px)");
 var opposites = {
   top: 'bottom',
@@ -116,8 +106,7 @@ var DropdownMenu = function DropdownMenu(props) {
       _props$autoFocus = props.autoFocus,
       autoFocus = _props$autoFocus === void 0 ? false : _props$autoFocus,
       testId = props.testId,
-      _props$statusLabel = props.statusLabel,
-      statusLabel = _props$statusLabel === void 0 ? 'Loading' : _props$statusLabel,
+      statusLabel = props.statusLabel,
       _props$zIndex = props.zIndex,
       zIndex = _props$zIndex === void 0 ? _constants.layers.modal() : _props$zIndex;
 
@@ -237,19 +226,17 @@ var DropdownMenu = function DropdownMenu(props) {
       }), _trigger);
     },
     content: function content(_ref) {
-      var setInitialFocusRef = _ref.setInitialFocusRef;
+      var setInitialFocusRef = _ref.setInitialFocusRef,
+          update = _ref.update;
       return (0, _react2.jsx)(_focusManager.default, null, (0, _react2.jsx)(_menuWrapper.default, {
         maxHeight: MAX_HEIGHT,
         maxWidth: 800,
         onClose: handleOnClose,
+        onUpdate: update,
+        isLoading: isLoading,
+        statusLabel: statusLabel,
         setInitialFocusRef: isTriggeredUsingKeyboard || autoFocus ? setInitialFocusRef : undefined
-      }, isLoading ? (0, _react2.jsx)("div", {
-        css: spinnerContainerStyles
-      }, (0, _react2.jsx)(_spinner.default, {
-        size: "small"
-      }), (0, _react2.jsx)(_visuallyHidden.default, {
-        role: "status"
-      }, statusLabel)) : children));
+      }, children));
     }
   }));
 };

package/dist/cjs/internal/components/menu-wrapper.js

@@ -2,8 +2,6 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -13,22 +11,44 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("react");
+
+var _react2 = require("@emotion/react");
 
 var _menuGroup = _interopRequireDefault(require("@atlaskit/menu/menu-group"));
 
+var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
+
+var _constants = require("@atlaskit/theme/constants");
+
+var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
+
 var _focusManager = require("../components/focus-manager");
 
 var _isCheckboxItem = _interopRequireDefault(require("../utils/is-checkbox-item"));
 
 var _isRadioItem = _interopRequireDefault(require("../utils/is-radio-item"));
 
-var _excluded = ["onClose", "setInitialFocusRef"];
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var _excluded = ["onClose", "onUpdate", "isLoading", "statusLabel", "setInitialFocusRef", "children"];
+var gridSize = (0, _constants.gridSize)();
+var spinnerContainerStyles = (0, _react2.css)({
+  display: 'flex',
+  minWidth: "".concat(gridSize * 20, "px"),
+  padding: "".concat(gridSize * 2.5, "px"),
+  justifyContent: 'center'
+});
 
+var LoadingIndicator = function LoadingIndicator(_ref) {
+  var _ref$statusLabel = _ref.statusLabel,
+      statusLabel = _ref$statusLabel === void 0 ? 'Loading' : _ref$statusLabel;
+  return (0, _react2.jsx)("div", {
+    css: spinnerContainerStyles
+  }, (0, _react2.jsx)(_spinner.default, {
+    size: "small"
+  }), (0, _react2.jsx)(_visuallyHidden.default, {
+    role: "status"
+  }, statusLabel));
+};
 /**
  *
  * MenuWrapper wraps all the menu items.
@@ -36,10 +56,16 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  * if a CheckboxItem or RadioItem is clicked.
  * It also sets focus to the first menu item when opened.
  */
-var MenuWrapper = function MenuWrapper(_ref) {
-  var onClose = _ref.onClose,
-      setInitialFocusRef = _ref.setInitialFocusRef,
-      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+
+
+var MenuWrapper = function MenuWrapper(_ref2) {
+  var onClose = _ref2.onClose,
+      onUpdate = _ref2.onUpdate,
+      isLoading = _ref2.isLoading,
+      statusLabel = _ref2.statusLabel,
+      setInitialFocusRef = _ref2.setInitialFocusRef,
+      children = _ref2.children,
+      props = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
 
   var _useContext = (0, _react.useContext)(_focusManager.FocusManagerContext),
       menuItemRefs = _useContext.menuItemRefs;
@@ -56,14 +82,23 @@ var MenuWrapper = function MenuWrapper(_ref) {
     if (isTargetMenuItemOrDecendant && onClose) {
       onClose(e);
     }
-  };
-
-  setInitialFocusRef && setInitialFocusRef(menuItemRefs[0]); // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
-
-  return /*#__PURE__*/_react.default.createElement(_menuGroup.default, (0, _extends2.default)({
-    role: "menu",
-    onClick: closeOnMenuItemClick
-  }, props));
+  }; // Using useEffect here causes a flicker.
+  // useLayoutEffect ensures that the update and render happen in the same
+  // rAF tick.
+
+
+  (0, _react.useLayoutEffect)(function () {
+    onUpdate();
+  }, [isLoading, onUpdate]);
+  setInitialFocusRef && setInitialFocusRef(menuItemRefs[0]);
+  return (// eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+    (0, _react2.jsx)(_menuGroup.default, (0, _extends2.default)({
+      role: "menu",
+      onClick: closeOnMenuItemClick
+    }, props), isLoading ? (0, _react2.jsx)(LoadingIndicator, {
+      statusLabel: statusLabel
+    }) : children)
+  );
 };
 
 var _default = MenuWrapper;

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/dropdown-menu",
-	"version": "11.5.2",
+	"version": "11.5.3",
 	"sideEffects": false
 }

package/dist/es2019/dropdown-menu.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 
 /** @jsx jsx */
 import { useCallback, useEffect, useMemo, useState } from 'react';
-import { css, jsx } from '@emotion/react';
+import { jsx } from '@emotion/react';
 import { bind } from 'bind-event-listener';
 import Button from '@atlaskit/button/standard-button';
 import { KEY_DOWN } from '@atlaskit/ds-lib/keycodes';
@@ -11,20 +11,12 @@ import useControlledState from '@atlaskit/ds-lib/use-controlled';
 import useFocus from '@atlaskit/ds-lib/use-focus-event';
 import ExpandIcon from '@atlaskit/icon/glyph/chevron-down';
 import Popup from '@atlaskit/popup';
-import Spinner from '@atlaskit/spinner';
 import { gridSize as gridSizeFn, layers } from '@atlaskit/theme/constants';
-import VisuallyHidden from '@atlaskit/visually-hidden';
 import FocusManager from './internal/components/focus-manager';
 import MenuWrapper from './internal/components/menu-wrapper';
 import SelectionStore from './internal/context/selection-store';
 import useGeneratedId from './internal/utils/use-generated-id';
 const gridSize = gridSizeFn();
-const spinnerContainerStyles = css({
-  display: 'flex',
-  minWidth: `${gridSize * 20}px`,
-  padding: `${gridSize * 2.5}px`,
-  justifyContent: 'center'
-});
 const MAX_HEIGHT = `calc(100vh - ${gridSize * 2}px)`;
 const opposites = {
   top: 'bottom',
@@ -74,7 +66,7 @@ const DropdownMenu = props => {
     isLoading = false,
     autoFocus = false,
     testId,
-    statusLabel = 'Loading',
+    statusLabel,
     zIndex = layers.modal()
   } = props;
   const [isLocalOpen, setLocalIsOpen] = useControlledState(isOpen, () => defaultOpen);
@@ -185,19 +177,17 @@ const DropdownMenu = props => {
       }), trigger);
     },
     content: ({
-      setInitialFocusRef
+      setInitialFocusRef,
+      update
     }) => jsx(FocusManager, null, jsx(MenuWrapper, {
       maxHeight: MAX_HEIGHT,
       maxWidth: 800,
       onClose: handleOnClose,
+      onUpdate: update,
+      isLoading: isLoading,
+      statusLabel: statusLabel,
       setInitialFocusRef: isTriggeredUsingKeyboard || autoFocus ? setInitialFocusRef : undefined
-    }, isLoading ? jsx("div", {
-      css: spinnerContainerStyles
-    }, jsx(Spinner, {
-      size: "small"
-    }), jsx(VisuallyHidden, {
-      role: "status"
-    }, statusLabel)) : children))
+    }, children))
   }));
 };
 

package/dist/es2019/internal/components/menu-wrapper.js

@@ -1,9 +1,32 @@
 import _extends from "@babel/runtime/helpers/extends";
-import React, { useContext } from 'react';
+
+/** @jsx jsx */
+import { useContext, useLayoutEffect } from 'react';
+import { css, jsx } from '@emotion/react';
 import MenuGroup from '@atlaskit/menu/menu-group';
+import Spinner from '@atlaskit/spinner';
+import { gridSize as gridSizeFn } from '@atlaskit/theme/constants';
+import VisuallyHidden from '@atlaskit/visually-hidden';
 import { FocusManagerContext } from '../components/focus-manager';
 import isCheckboxItem from '../utils/is-checkbox-item';
 import isRadioItem from '../utils/is-radio-item';
+const gridSize = gridSizeFn();
+const spinnerContainerStyles = css({
+  display: 'flex',
+  minWidth: `${gridSize * 20}px`,
+  padding: `${gridSize * 2.5}px`,
+  justifyContent: 'center'
+});
+
+const LoadingIndicator = ({
+  statusLabel = 'Loading'
+}) => jsx("div", {
+  css: spinnerContainerStyles
+}, jsx(Spinner, {
+  size: "small"
+}), jsx(VisuallyHidden, {
+  role: "status"
+}, statusLabel));
 /**
  *
  * MenuWrapper wraps all the menu items.
@@ -12,9 +35,14 @@ import isRadioItem from '../utils/is-radio-item';
  * It also sets focus to the first menu item when opened.
  */
 
+
 const MenuWrapper = ({
   onClose,
+  onUpdate,
+  isLoading,
+  statusLabel,
   setInitialFocusRef,
+  children,
   ...props
 }) => {
   const {
@@ -33,14 +61,23 @@ const MenuWrapper = ({
     if (isTargetMenuItemOrDecendant && onClose) {
       onClose(e);
     }
-  };
+  }; // Using useEffect here causes a flicker.
+  // useLayoutEffect ensures that the update and render happen in the same
+  // rAF tick.
 
-  setInitialFocusRef && setInitialFocusRef(menuItemRefs[0]); // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
 
-  return /*#__PURE__*/React.createElement(MenuGroup, _extends({
-    role: "menu",
-    onClick: closeOnMenuItemClick
-  }, props));
+  useLayoutEffect(() => {
+    onUpdate();
+  }, [isLoading, onUpdate]);
+  setInitialFocusRef && setInitialFocusRef(menuItemRefs[0]);
+  return (// eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+    jsx(MenuGroup, _extends({
+      role: "menu",
+      onClick: closeOnMenuItemClick
+    }, props), isLoading ? jsx(LoadingIndicator, {
+      statusLabel: statusLabel
+    }) : children)
+  );
 };
 
 export default MenuWrapper;

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/dropdown-menu",
-	"version": "11.5.2",
+	"version": "11.5.3",
 	"sideEffects": false
 }

package/dist/esm/dropdown-menu.js

@@ -10,7 +10,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 /** @jsx jsx */
 import { useCallback, useEffect, useMemo, useState } from 'react';
-import { css, jsx } from '@emotion/react';
+import { jsx } from '@emotion/react';
 import { bind } from 'bind-event-listener';
 import Button from '@atlaskit/button/standard-button';
 import { KEY_DOWN } from '@atlaskit/ds-lib/keycodes';
@@ -19,20 +19,12 @@ import useControlledState from '@atlaskit/ds-lib/use-controlled';
 import useFocus from '@atlaskit/ds-lib/use-focus-event';
 import ExpandIcon from '@atlaskit/icon/glyph/chevron-down';
 import Popup from '@atlaskit/popup';
-import Spinner from '@atlaskit/spinner';
 import { gridSize as gridSizeFn, layers } from '@atlaskit/theme/constants';
-import VisuallyHidden from '@atlaskit/visually-hidden';
 import FocusManager from './internal/components/focus-manager';
 import MenuWrapper from './internal/components/menu-wrapper';
 import SelectionStore from './internal/context/selection-store';
 import useGeneratedId from './internal/utils/use-generated-id';
 var gridSize = gridSizeFn();
-var spinnerContainerStyles = css({
-  display: 'flex',
-  minWidth: "".concat(gridSize * 20, "px"),
-  padding: "".concat(gridSize * 2.5, "px"),
-  justifyContent: 'center'
-});
 var MAX_HEIGHT = "calc(100vh - ".concat(gridSize * 2, "px)");
 var opposites = {
   top: 'bottom',
@@ -87,8 +79,7 @@ var DropdownMenu = function DropdownMenu(props) {
       _props$autoFocus = props.autoFocus,
       autoFocus = _props$autoFocus === void 0 ? false : _props$autoFocus,
       testId = props.testId,
-      _props$statusLabel = props.statusLabel,
-      statusLabel = _props$statusLabel === void 0 ? 'Loading' : _props$statusLabel,
+      statusLabel = props.statusLabel,
       _props$zIndex = props.zIndex,
       zIndex = _props$zIndex === void 0 ? layers.modal() : _props$zIndex;
 
@@ -209,19 +200,17 @@ var DropdownMenu = function DropdownMenu(props) {
       }), _trigger);
     },
     content: function content(_ref) {
-      var setInitialFocusRef = _ref.setInitialFocusRef;
+      var setInitialFocusRef = _ref.setInitialFocusRef,
+          update = _ref.update;
       return jsx(FocusManager, null, jsx(MenuWrapper, {
         maxHeight: MAX_HEIGHT,
         maxWidth: 800,
         onClose: handleOnClose,
+        onUpdate: update,
+        isLoading: isLoading,
+        statusLabel: statusLabel,
         setInitialFocusRef: isTriggeredUsingKeyboard || autoFocus ? setInitialFocusRef : undefined
-      }, isLoading ? jsx("div", {
-        css: spinnerContainerStyles
-      }, jsx(Spinner, {
-        size: "small"
-      }), jsx(VisuallyHidden, {
-        role: "status"
-      }, statusLabel)) : children));
+      }, children));
     }
   }));
 };

package/dist/esm/internal/components/menu-wrapper.js

@@ -1,11 +1,36 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["onClose", "setInitialFocusRef"];
-import React, { useContext } from 'react';
+var _excluded = ["onClose", "onUpdate", "isLoading", "statusLabel", "setInitialFocusRef", "children"];
+
+/** @jsx jsx */
+import { useContext, useLayoutEffect } from 'react';
+import { css, jsx } from '@emotion/react';
 import MenuGroup from '@atlaskit/menu/menu-group';
+import Spinner from '@atlaskit/spinner';
+import { gridSize as gridSizeFn } from '@atlaskit/theme/constants';
+import VisuallyHidden from '@atlaskit/visually-hidden';
 import { FocusManagerContext } from '../components/focus-manager';
 import isCheckboxItem from '../utils/is-checkbox-item';
 import isRadioItem from '../utils/is-radio-item';
+var gridSize = gridSizeFn();
+var spinnerContainerStyles = css({
+  display: 'flex',
+  minWidth: "".concat(gridSize * 20, "px"),
+  padding: "".concat(gridSize * 2.5, "px"),
+  justifyContent: 'center'
+});
+
+var LoadingIndicator = function LoadingIndicator(_ref) {
+  var _ref$statusLabel = _ref.statusLabel,
+      statusLabel = _ref$statusLabel === void 0 ? 'Loading' : _ref$statusLabel;
+  return jsx("div", {
+    css: spinnerContainerStyles
+  }, jsx(Spinner, {
+    size: "small"
+  }), jsx(VisuallyHidden, {
+    role: "status"
+  }, statusLabel));
+};
 /**
  *
  * MenuWrapper wraps all the menu items.
@@ -14,10 +39,15 @@ import isRadioItem from '../utils/is-radio-item';
  * It also sets focus to the first menu item when opened.
  */
 
-var MenuWrapper = function MenuWrapper(_ref) {
-  var onClose = _ref.onClose,
-      setInitialFocusRef = _ref.setInitialFocusRef,
-      props = _objectWithoutProperties(_ref, _excluded);
+
+var MenuWrapper = function MenuWrapper(_ref2) {
+  var onClose = _ref2.onClose,
+      onUpdate = _ref2.onUpdate,
+      isLoading = _ref2.isLoading,
+      statusLabel = _ref2.statusLabel,
+      setInitialFocusRef = _ref2.setInitialFocusRef,
+      children = _ref2.children,
+      props = _objectWithoutProperties(_ref2, _excluded);
 
   var _useContext = useContext(FocusManagerContext),
       menuItemRefs = _useContext.menuItemRefs;
@@ -34,14 +64,23 @@ var MenuWrapper = function MenuWrapper(_ref) {
     if (isTargetMenuItemOrDecendant && onClose) {
       onClose(e);
     }
-  };
+  }; // Using useEffect here causes a flicker.
+  // useLayoutEffect ensures that the update and render happen in the same
+  // rAF tick.
 
-  setInitialFocusRef && setInitialFocusRef(menuItemRefs[0]); // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
 
-  return /*#__PURE__*/React.createElement(MenuGroup, _extends({
-    role: "menu",
-    onClick: closeOnMenuItemClick
-  }, props));
+  useLayoutEffect(function () {
+    onUpdate();
+  }, [isLoading, onUpdate]);
+  setInitialFocusRef && setInitialFocusRef(menuItemRefs[0]);
+  return (// eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+    jsx(MenuGroup, _extends({
+      role: "menu",
+      onClick: closeOnMenuItemClick
+    }, props), isLoading ? jsx(LoadingIndicator, {
+      statusLabel: statusLabel
+    }) : children)
+  );
 };
 
 export default MenuWrapper;

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/dropdown-menu",
-	"version": "11.5.2",
+	"version": "11.5.3",
 	"sideEffects": false
 }

package/dist/types/internal/components/menu-wrapper.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import { jsx } from '@emotion/react';
 import { MenuWrapperProps } from '../../types';
 /**
  *
@@ -7,5 +7,5 @@ import { MenuWrapperProps } from '../../types';
  * if a CheckboxItem or RadioItem is clicked.
  * It also sets focus to the first menu item when opened.
  */
-declare const MenuWrapper: ({ onClose, setInitialFocusRef, ...props }: MenuWrapperProps) => JSX.Element;
+declare const MenuWrapper: ({ onClose, onUpdate, isLoading, statusLabel, setInitialFocusRef, children, ...props }: MenuWrapperProps) => jsx.JSX.Element;
 export default MenuWrapper;

package/dist/types/types.d.ts

@@ -46,6 +46,9 @@ export interface OnOpenChangeArgs {
 export interface MenuWrapperProps extends MenuGroupProps {
     setInitialFocusRef?: ContentProps['setInitialFocusRef'];
     onClose?: ContentProps['onClose'];
+    onUpdate: ContentProps['update'];
+    isLoading?: DropdownMenuProps['isLoading'];
+    statusLabel?: DropdownMenuProps['statusLabel'];
 }
 export interface DropdownMenuGroupProps extends SectionProps {
 }

package/dist/types-ts4.0/internal/components/menu-wrapper.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import { jsx } from '@emotion/react';
 import { MenuWrapperProps } from '../../types';
 /**
  *
@@ -7,5 +7,5 @@ import { MenuWrapperProps } from '../../types';
  * if a CheckboxItem or RadioItem is clicked.
  * It also sets focus to the first menu item when opened.
  */
-declare const MenuWrapper: ({ onClose, setInitialFocusRef, ...props }: MenuWrapperProps) => JSX.Element;
+declare const MenuWrapper: ({ onClose, onUpdate, isLoading, statusLabel, setInitialFocusRef, children, ...props }: MenuWrapperProps) => jsx.JSX.Element;
 export default MenuWrapper;

package/dist/types-ts4.0/types.d.ts

@@ -46,6 +46,9 @@ export interface OnOpenChangeArgs {
 export interface MenuWrapperProps extends MenuGroupProps {
     setInitialFocusRef?: ContentProps['setInitialFocusRef'];
     onClose?: ContentProps['onClose'];
+    onUpdate: ContentProps['update'];
+    isLoading?: DropdownMenuProps['isLoading'];
+    statusLabel?: DropdownMenuProps['statusLabel'];
 }
 export interface DropdownMenuGroupProps extends SectionProps {
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/dropdown-menu",
-  "version": "11.5.2",
+  "version": "11.5.3",
   "description": "A dropdown menu displays a list of actions or options to a user.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -32,13 +32,13 @@
     }
   },
   "dependencies": {
-    "@atlaskit/button": "^16.3.0",
+    "@atlaskit/button": "^16.4.0",
     "@atlaskit/codemod-utils": "^4.1.0",
     "@atlaskit/ds-lib": "^2.1.0",
     "@atlaskit/icon": "^21.11.0",
-    "@atlaskit/menu": "^1.3.0",
+    "@atlaskit/menu": "^1.4.0",
     "@atlaskit/popup": "^1.5.0",
-    "@atlaskit/spinner": "^15.0.0",
+    "@atlaskit/spinner": "^15.2.0",
     "@atlaskit/theme": "^12.2.0",
     "@atlaskit/tokens": "^0.10.0",
     "@atlaskit/visually-hidden": "^1.1.0",
@@ -53,7 +53,7 @@
   "devDependencies": {
     "@atlaskit/avatar": "^21.1.0",
     "@atlaskit/docs": "*",
-    "@atlaskit/lozenge": "11.2.5",
+    "@atlaskit/lozenge": "11.3.0",
     "@atlaskit/modal-dialog": "^12.4.0",
     "@atlaskit/section-message": "^6.3.0",
     "@atlaskit/ssr": "*",

package/report.api.md

@@ -1,6 +1,10 @@
-## API Report File for "@atlaskit/dropdown-menu".
+## API Report File for "@atlaskit/dropdown-menu"
 
-> Do not edit this file. This report is auto-generated by [API Extractor](https://api-extractor.com/).
+> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+
+<!--
+	Generated API Report version: 2.0
+-->
 
 [Learn more about API reports](https://hello.atlassian.net/wiki/spaces/UR/pages/1825484529/Package+API+Reports)
 
@@ -19,363 +23,141 @@ import type { SectionProps } from '@atlaskit/menu';
 import type { SectionProps as SectionProps_2 } from '@atlaskit/menu/types';
 import type { TriggerProps } from '@atlaskit/popup/types';
 
-export declare interface CustomTriggerProps extends Omit<TriggerProps, 'ref'> {
-  /**
-   * Ref that should be applied to the trigger. This is used to calculate the menu position.
-   */
-  triggerRef: Ref<HTMLElement>;
-  /**
-   * Makes the trigger appear selected.
-   */
+// @public (undocumented)
+export interface CustomTriggerProps<
+  TriggerElement extends HTMLElement = HTMLElement
+> extends Omit<TriggerProps, 'ref'> {
   isSelected?: boolean;
-  /**
-   * Event that is triggered when the element is clicked.
-   */
   onClick?: (e: MouseEvent_2 | KeyboardEvent_2) => void;
-  /**
-   * A `testId` prop is provided for specified elements, which is a unique
-   * string that appears as a data attribute `data-testid` in the rendered code,
-   * serving as a hook for automated tests.
-   *
-   * As dropdown-menu is composed of different components, we passed down the testId to the sub component you want to test:
-   * - `testId--trigger` to get the menu trigger.
-   * - `testId--content` to get the dropdown content trigger.
-   */
   testId?: string;
+  triggerRef: Ref<TriggerElement>;
 }
 
-/**
- * __Dropdown menu item__
- *
- * A dropdown item populates the dropdown menu with items. Every item should be inside a dropdown item group.
- *
- * - [Examples](https://atlassian.design/components/dropdown-item/examples)
- * - [Code](https://atlassian.design/components/dropdown-item/code)
- * - [Usage](https://atlassian.design/components/dropdown-item/usage)
- */
-export declare const DropdownItem: (props: DropdownItemProps) => JSX.Element;
+// @public
+export const DropdownItem: (props: DropdownItemProps) => JSX.Element;
 
-/**
- * __Dropdown item checkbox__
- *
- * A dropdown item checkbox creates groups that have multiple selections.
- *
- * - [Examples](https://atlassian.design/components/dropdown-menu/dropdown-item-checkbox/examples)
- * - [Code](https://atlassian.design/components/dropdown-menu/dropdown-item-checkbox/code)
- * - [Usage](https://atlassian.design/components/dropdown-menu/dropdown-item-checkbox/usage)
- */
-export declare const DropdownItemCheckbox: (
+// @public
+export const DropdownItemCheckbox: (
   props: DropdownItemCheckboxProps,
 ) => JSX.Element;
 
-/**
- * __Dropdown item checkbox group__
- *
- * A wrapping element for dropdown menu checkbox items.
- *
- */
-export declare const DropdownItemCheckboxGroup: (
+// @public
+export const DropdownItemCheckboxGroup: (
   props: DropdownItemCheckboxGroupProps,
 ) => JSX.Element;
 
-declare interface DropdownItemCheckboxGroupProps extends SectionProps {
-  /**
-   * Unique identifier for the checkbox group.
-   */
+// @public (undocumented)
+interface DropdownItemCheckboxGroupProps extends SectionProps {
   id: string;
 }
 
-declare interface DropdownItemCheckboxProps {
-  /**
-   * Primary content for the item.
-   */
+// @public (undocumented)
+interface DropdownItemCheckboxProps {
   children: React.ReactNode;
-  /**
-   * Description of the item.
-   * This will render smaller text below the primary text of the item as well as slightly increasing the height of the item.
-   */
+  defaultSelected?: boolean;
   description?: string | JSX.Element;
-  /**
-   * Makes the checkbox appear disabled as well as removing interactivity.
-   */
+  id: string;
   isDisabled?: boolean;
-  /**
-   * When `true` the title of the item will wrap multiple lines if it's long enough.
-   */
-  shouldTitleWrap?: boolean;
-  /**
-   * When `true` the description of the item will wrap multiple lines if it's long enough.
-   */
-  shouldDescriptionWrap?: boolean;
-  /**
-   * Event that is triggered when the checkbox is clicked.
-   */
-  onClick?: (e: MouseEvent_2 | KeyboardEvent_2) => void;
-  /**
-   * Sets whether the checkbox is checked or unchecked.
-   */
   isSelected?: boolean;
-  /**
-   * Sets whether the checkbox begins selected.
-   */
-  defaultSelected?: boolean;
-  /**
-   * Unique id of a checkbox
-   */
-  id: string;
-  /**
-   * Adds a title attribute to the root item element.
-   */
-  title?: string;
-  /**
-   * A `testId` prop is provided for specified elements,
-   * which is a unique string that appears as a data attribute `data-testid` in the rendered code,
-   * serving as a hook for automated tests.
-   */
+  onClick?: (e: MouseEvent_2 | KeyboardEvent_2) => void;
+  shouldDescriptionWrap?: boolean;
+  shouldTitleWrap?: boolean;
   testId?: string;
+  title?: string;
 }
 
 export { DropdownItemGroup };
 
-export declare interface DropdownItemProps {
-  /**
-   * Primary content for the item.
-   */
+// @public (undocumented)
+export interface DropdownItemProps {
   children: React.ReactNode;
-  /**
-   * Custom component to render as an item.
-   */
   component?: CustomItemProps['component'];
-  /**
-   * Description of the item.
-   * This will render smaller text below the primary text of the item as well as slightly increasing the height of the item.
-   */
   description?: string | JSX.Element;
-  /**
-   * Makes the element appear disabled as well as removing interactivity.
-   */
+  elemAfter?: React.ReactNode;
+  elemBefore?: React.ReactNode;
+  href?: string;
   isDisabled?: boolean;
-  /**
-   * When `true` the title of the item will wrap multiple lines if it's long enough.
-   */
-  shouldTitleWrap?: boolean;
-  /**
-   * When `true` the description of the item will wrap multiple lines if it's long enough.
-   */
-  shouldDescriptionWrap?: boolean;
-  /**
-   * Event that is triggered when the element is clicked.
-   */
-  onClick?: (e: MouseEvent_2 | KeyboardEvent_2) => void;
-  /**
-   * Makes the element appear selected.
-   */
   isSelected?: boolean;
-  /**
-   * Link to another page.
-   */
-  href?: string;
-  /**
-   * Where to display the linked URL,
-   * see [anchor information](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a) on mdn for more information.
-   */
-  target?: string;
-  /**
-   * Adds a title attribute to the root item element.
-   */
-  title?: string;
-  /**
-   * Element to render before the item text.
-   * Generally should be an [icon](https://atlaskit.atlassian.com/packages/design-system/icon) component.
-   */
-  elemBefore?: React.ReactNode;
-  /**
-   * Element to render after the item text.
-   * Generally should be an [icon](https://atlaskit.atlassian.com/packages/design-system/icon) component.
-   */
-  elemAfter?: React.ReactNode;
-  /**
-   * The relationship of the linked URL as space-separated link types.
-   * Generally you'll want to set this to "noopener noreferrer" when `target` is "_blank".
-   */
+  onClick?: (e: MouseEvent_2 | KeyboardEvent_2) => void;
   rel?: string;
-  /**
-   * A `testId` prop is provided for specified elements,
-   * which is a unique string that appears as a data attribute `data-testid` in the rendered code,
-   * serving as a hook for automated tests.
-   */
+  shouldDescriptionWrap?: boolean;
+  shouldTitleWrap?: boolean;
+  target?: string;
   testId?: string;
+  title?: string;
 }
 
-/**
- * __Dropdown item radio__
- *
- * A dropdown item radio displays groups that have a single selection.
- *
- * - [Examples](https://atlassian.design/components/dropdown-menu/dropdown-item-radio/examples)
- * - [Code](https://atlassian.design/components/dropdown-menu/dropdown-item-radio/code)
- * - [Usage](https://atlassian.design/components/dropdown-menu/dropdown-item-radio/usage)
- */
-export declare const DropdownItemRadio: (
-  props: DropdownItemRadioProps,
-) => JSX.Element;
+// @public
+export const DropdownItemRadio: (props: DropdownItemRadioProps) => JSX.Element;
 
-/**
- * __Dropdown item radio group__
- *  Store which manages the selection state for each DropdownItemRadio
- *  across mount and unmounts.
- *
- */
-export declare const DropdownItemRadioGroup: (
+// @public
+export const DropdownItemRadioGroup: (
   props: DropdownItemRadioGroupProps,
 ) => JSX.Element;
 
-declare interface DropdownItemRadioGroupProps extends SectionProps {
+// @public (undocumented)
+interface DropdownItemRadioGroupProps extends SectionProps {
+  // (undocumented)
   id: string;
 }
 
-declare interface DropdownItemRadioProps {
-  /**
-   * Primary content for the item.
-   */
+// @public (undocumented)
+interface DropdownItemRadioProps {
   children: React.ReactNode;
-  /**
-   * Description of the item.
-   * This will render smaller text below the primary text of the item as well as slightly increasing the height of the item.
-   */
+  defaultSelected?: boolean;
   description?: string | JSX.Element;
-  /**
-   * Makes the checkbox appear disabled as well as removing interactivity.
-   */
+  id: string;
   isDisabled?: boolean;
-  /**
-   * When `true` the title of the item will wrap multiple lines if it's long enough.
-   */
-  shouldTitleWrap?: boolean;
-  /**
-   * When `true` the description of the item will wrap multiple lines if it's long enough.
-   */
-  shouldDescriptionWrap?: boolean;
-  /**
-   * Event that is triggered when the checkbox is clicked.
-   */
-  onClick?: (e: MouseEvent_2 | KeyboardEvent_2) => void;
-  /**
-   * Sets whether the checkbox is checked or unchecked.
-   */
   isSelected?: boolean;
-  /**
-   * Sets whether the checkbox begins selected.
-   */
-  defaultSelected?: boolean;
-  /**
-   * Unique id of a checkbox
-   */
-  id: string;
-  /**
-   * Adds a title attribute to the root item element.
-   */
-  title?: string;
-  /**
-   * A `testId` prop is provided for specified elements,
-   * which is a unique string that appears as a data attribute `data-testid` in the rendered code,
-   * serving as a hook for automated tests.
-   */
+  onClick?: (e: MouseEvent_2 | KeyboardEvent_2) => void;
+  shouldDescriptionWrap?: boolean;
+  shouldTitleWrap?: boolean;
   testId?: string;
+  title?: string;
 }
 
-/**
- * __Dropdown menu__
- *
- * A dropdown menu displays a list of actions or options to a user.
- *
- * - [Examples](https://atlassian.design/components/dropdown-menu/examples)
- * - [Code](https://atlassian.design/components/dropdown-menu/code)
- * - [Usage](https://atlassian.design/components/dropdown-menu/usage)
- */
-declare const DropdownMenu: (props: DropdownMenuProps) => jsx.JSX.Element;
+// @public
+const DropdownMenu: <T extends HTMLElement = HTMLElement>(
+  props: DropdownMenuProps<T>,
+) => jsx.JSX.Element;
 export default DropdownMenu;
 
-export declare interface DropdownMenuGroupProps extends SectionProps_2 {}
+// @public (undocumented)
+export interface DropdownMenuGroupProps extends SectionProps_2 {}
 
-export declare interface DropdownMenuProps {
-  /**
-   * Controls the appearance of the menu.
-   * Default menu has scroll after its height exceeds the pre-defined amount.
-   * Tall menu has no scroll until the height exceeds the height of the viewport.
-   */
+// @public (undocumented)
+export interface DropdownMenuProps<
+  TriggerElement extends HTMLElement = HTMLElement
+> {
   appearance?: 'default' | 'tall';
-  /**
-   * Controls if the first menu item receives focus when menu is opened. Note that the menu has a focus lock
-   * which traps the focus within the menu. Also, the first item gets fouced automatically
-   * if the menu is triggered using the keyboard.
-   *
-   */
   autoFocus?: boolean;
-  /**
-   * Content that will be rendered inside the layer element. Should typically be
-   * `DropdownItemGroup` or `DropdownItem`, or checkbox / radio variants of those.
-   */
   children?: ReactNode;
-  /**
-   * If true, a Spinner is rendered instead of the items
-   */
+  defaultOpen?: boolean;
   isLoading?: boolean;
-  /**
-   * Text to be used as status for assistive technologies. Defaults to "Loading".
-   */
-  statusLabel?: string;
-  /**
-   * Controls the open state of the dropdown.
-   */
   isOpen?: boolean;
-  /**
-   * Position of the menu.
-   */
+  onOpenChange?: (args: OnOpenChangeArgs) => void;
   placement?: Placement;
-  /**
-   * Allows the dropdown menu to be placed on the opposite side of its trigger if it does not
-   * fit in the viewport.
-   */
   shouldFlip?: boolean;
-  /**
-   * Content which will trigger the dropdown menu to open and close. Use with `triggerType`
-   * to easily get a button trigger.
-   */
-  trigger?: string | ((triggerButtonProps: CustomTriggerProps) => ReactElement);
-  /**
-   * A `testId` prop is provided for specified elements, which is a unique
-   * string that appears as a data attribute `data-testid` in the rendered code,
-   * serving as a hook for automated tests.
-   *
-   * As dropdown-menu is composed of different components, we passed down the testId to the sub component you want to test:
-   * - `testId--trigger` to get the menu trigger.
-   * - `testId--content` to get the dropdown content trigger.
-   */
+  statusLabel?: string;
   testId?: string;
-  /**
-   * Controls the initial open state of the dropdown. If provided, the component is considered to be controlled
-   * which means that the user is responsible for managing the open and close state of the menu.
-   */
-  defaultOpen?: boolean;
-  /**
-   * Called when the menu should be open/closed. Receives an object with `isOpen` state.
-   */
-  onOpenChange?: (args: OnOpenChangeArgs) => void;
-  /**
-   * Z-index that the popup should be displayed in.
-   * This is passed to the portal component.
-   * Defaults to `layers.modal()` from `@atlaskit/theme` which is 510.
-   */
+  trigger?:
+    | string
+    | ((
+        triggerButtonProps: CustomTriggerProps<TriggerElement>,
+      ) => ReactElement);
   zIndex?: number;
 }
 
-export declare interface OnOpenChangeArgs {
-  isOpen: boolean;
+// @public (undocumented)
+export interface OnOpenChangeArgs {
+  // (undocumented)
   event: MouseEvent_2 | KeyboardEvent_2;
+  // (undocumented)
+  isOpen: boolean;
 }
 
-declare type Placement =
+// @public (undocumented)
+type Placement =
   | 'auto-start'
   | 'auto'
   | 'auto-end'
@@ -392,5 +174,5 @@ declare type Placement =
   | 'left'
   | 'left-start';
 
-export {};
+// (No @packageDocumentation comment for this package)
 ```