@atlaskit/dropdown-menu 11.5.2 → 11.5.4

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/dropdown-menu
 
+## 11.5.4
+
+### Patch Changes
+
+- [`a5fa14318a8`](https://bitbucket.org/atlassian/atlassian-frontend/commits/a5fa14318a8) - Improve examples and visual regression test coverage.
+
+## 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.4",
 	"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.4",
 	"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.4",
 	"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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/dropdown-menu",
-  "version": "11.5.2",
+  "version": "11.5.4",
   "description": "A dropdown menu displays a list of actions or options to a user.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -12,19 +12,11 @@
   "module": "dist/esm/index.js",
   "module:es2019": "dist/es2019/index.js",
   "types": "dist/types/index.d.ts",
-  "typesVersions": {
-    ">=4.0 <4.5": {
-      "*": [
-        "dist/types-ts4.0/*",
-        "dist/types-ts4.0/index.d.ts"
-      ]
-    }
-  },
   "sideEffects": false,
   "atlaskit:src": "src/index.tsx",
   "atlassian": {
-    "disableProductCI": true,
     "team": "Design System Team",
+    "disableProductCI": true,
     "releaseModel": "scheduled",
     "website": {
       "name": "Dropdown menu",
@@ -32,13 +24,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 +45,9 @@
   "devDependencies": {
     "@atlaskit/avatar": "^21.1.0",
     "@atlaskit/docs": "*",
-    "@atlaskit/lozenge": "11.2.5",
+    "@atlaskit/ds-explorations": "^1.0.0",
+    "@atlaskit/heading": "^0.1.18",
+    "@atlaskit/lozenge": "11.3.0",
     "@atlaskit/modal-dialog": "^12.4.0",
     "@atlaskit/section-message": "^6.3.0",
     "@atlaskit/ssr": "*",