@atlaskit/dropdown-menu 11.0.3 → 11.1.2

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # @atlaskit/dropdown-menu
 
+## 11.1.2
+
+### Patch Changes
+
+- Updated dependencies
+
+## 11.1.1
+
+### Patch Changes
+
+- [`dbf652b5183`](https://bitbucket.org/atlassian/atlassian-frontend/commits/dbf652b5183) - Fixes an accessibility issue where menu items had the ARIA role of `menuitem` but were not contained by a parent with the correct role. The `MenuWrapper` component now has `role="menu"`.
+- Updated dependencies
+
+## 11.1.0
+
+### Minor Changes
+
+- [`bb8a0f713e8`](https://bitbucket.org/atlassian/atlassian-frontend/commits/bb8a0f713e8) - Add zIndex prop to pass custom z-index for the menu if it clashes with other components on the screen
+
+### Patch Changes
+
+- [`58884c2f6c1`](https://bitbucket.org/atlassian/atlassian-frontend/commits/58884c2f6c1) - Internal code change turning on a new linting rule.
+- [`94886036118`](https://bitbucket.org/atlassian/atlassian-frontend/commits/94886036118) - Internal refactor to properly use render props to avoid unwanted re-mounts and improve test coverage
+- Updated dependencies
+
 ## 11.0.3
 
 ### Patch Changes

package/codemods/11.0.0-lite-mode.tsx

@@ -1,6 +1,11 @@
 import { createTransformer } from '@atlaskit/codemod-utils';
 
 import convertTriggerType from './migrates/convert-trigger-type';
+import deprecateAutoFocus from './migrates/deprecate-autoFocus';
+import deprecateboundariesElement from './migrates/deprecate-boundariesElement';
+import deprecateIsCompact from './migrates/deprecate-isCompact';
+import deprecateIsHidden from './migrates/deprecate-isHidden';
+import deprecateIsMenuFixed from './migrates/deprecate-isMenuFixed';
 import deprecateItems from './migrates/deprecate-items';
 import deprecateOnItemActivated from './migrates/deprecate-onItemActivated';
 import deprecateOnPositioned from './migrates/deprecate-onPositioned';
@@ -22,6 +27,13 @@ const transformer = createTransformer([
   deprecateOnItemActivated,
   deprecateOnPositioned,
   deprecateShouldFitContainer,
+  deprecateboundariesElement,
+  deprecateIsMenuFixed,
+
+  // props on *Items
+  ...deprecateAutoFocus(),
+  ...deprecateIsCompact(),
+  ...deprecateIsHidden(),
 
   replaceShouldAllowMultiline,
   updatePositionValue,

package/codemods/__tests__/11.0.0-lite-mode.test.tsx

@@ -12,7 +12,7 @@ describe('apply all needed codemods for version 11.0.0 major bump', () => {
     `
     import React from "react";
     import DropdownMenu, {
-      DropdownItemGroupCheckbox as MyComponent, DropdownItemCheckbox,
+      DropdownItemGroupCheckbox as MyComponent, DropdownItemCheckbox, DropdownItem, DropdownItemRadio,
     } from "@atlaskit/dropdown-menu";
 
     export default () => (
@@ -24,14 +24,31 @@ describe('apply all needed codemods for version 11.0.0 major bump', () => {
         onPositioned={() => {}}
         position="bottom left"
         shouldFitContainer={false}
+        boundariesElement={document.body}
+        isMenuFixed
         shouldAllowMultiline>
+        <DropdownItem
+            isHidden
+            autoFocus
+            isCompact
+          >Cut</DropdownItem>
+        <DropdownItemCheckbox
+          isHidden
+          autoFocus
+          isCompact
+        >Copy</DropdownItemCheckbox>
+        <DropdownItemRadio
+          isHidden
+          autoFocus
+          isCompact
+        >Paste</DropdownItemRadio>
       </DropdownMenu>
     );
     `,
     `
     import React from "react";
     import DropdownMenu, {
-      DropdownItemCheckboxGroup as MyComponent, DropdownItemCheckbox,
+      DropdownItemCheckboxGroup as MyComponent, DropdownItemCheckbox, DropdownItem, DropdownItemRadio,
     } from "@atlaskit/dropdown-menu";
 
     export default () => (
@@ -40,6 +57,9 @@ describe('apply all needed codemods for version 11.0.0 major bump', () => {
         placement="bottom-start"
         shouldTitleWrap
         shouldDescriptionWrap>
+        <DropdownItem>Cut</DropdownItem>
+        <DropdownItemCheckbox>Copy</DropdownItemCheckbox>
+        <DropdownItemRadio>Paste</DropdownItemRadio>
       </DropdownMenu>
     );
     `,

package/codemods/__tests__/convert-triggerType.test.tsx

@@ -66,7 +66,7 @@ describe('update position value', () => {
     import DropdownMenu from "@atlaskit/dropdown-menu";
 
     export default () => (
-      <DropdownMenu 
+      <DropdownMenu
       trigger={
         <div>
           &lt;button/&gt; trigger
@@ -81,20 +81,103 @@ describe('update position value', () => {
     import DropdownMenu from "@atlaskit/dropdown-menu";
 
     export default () => (
-      /* TODO: (from codemod) 
+      <DropdownMenu
+      /* TODO: (from codemod)
       The usage of the 'trigger', 'triggerType' and 'triggerButtonProps' prop in this component could not be transformed and requires manual intervention.
-      Since version 11.0.0, we simplified the API and lean towards to only use 'trigger' prop.
-      For more info please reach out to #help-design-system-code. */
-      (<DropdownMenu 
+      Since version 11.0.0, we have simplified the API and now only use the 'trigger' prop.
+      Please refer to https://hello.atlassian.net/wiki/spaces/DST/pages/1330997516/Dropdown+menu+upgrade+guide for more details.
+      And feel free to reach out to us on our support channel if you have more queries – #help-design-system. */
       trigger={
         <div>
           &lt;button/&gt; trigger
         </div>
       }
       triggerType="button">
-      </DropdownMenu>)
+      </DropdownMenu>
     );
     `,
     'should only add comments triggerType prop when trigger is an object',
   );
+
+  defineInlineTest(
+    { default: transformer, parser: 'tsx' },
+    {},
+    `
+    import React from "react";
+    import DropdownMenu from "@atlaskit/dropdown-menu";
+
+    export default () => (
+      <DropdownMenu
+      trigger={
+        <div>
+          &lt;button/&gt; trigger
+        </div>
+      }>
+      </DropdownMenu>
+    );
+    `,
+    `
+    import React from "react";
+    import DropdownMenu from "@atlaskit/dropdown-menu";
+
+    export default () => (
+      <DropdownMenu
+      /* TODO: (from codemod)
+      The usage of the 'trigger', 'triggerType' and 'triggerButtonProps' prop in this component could not be transformed and requires manual intervention.
+      Since version 11.0.0, we have simplified the API and now only use the 'trigger' prop.
+      Please refer to https://hello.atlassian.net/wiki/spaces/DST/pages/1330997516/Dropdown+menu+upgrade+guide for more details.
+      And feel free to reach out to us on our support channel if you have more queries – #help-design-system. */
+      trigger={
+        <div>
+          &lt;button/&gt; trigger
+        </div>
+      }>
+      </DropdownMenu>
+    );
+    `,
+    'should only add comments triggerType prop when trigger is an object',
+  );
+
+  defineInlineTest(
+    { default: transformer, parser: 'tsx' },
+    {},
+    `
+    import React from "react";
+    import DropdownMenu from "@atlaskit/dropdown-menu";
+
+    export default () => (
+      <DropdownMenuWrapper>
+        <DropdownMenu
+        trigger={
+          <div>
+            &lt;button/&gt; trigger
+          </div>
+        }>
+        </DropdownMenu>
+      </DropdownMenuWrapper>
+    );
+    `,
+    `
+    import React from "react";
+    import DropdownMenu from "@atlaskit/dropdown-menu";
+
+    export default () => (
+      <DropdownMenuWrapper>
+        <DropdownMenu
+        /* TODO: (from codemod)
+        The usage of the 'trigger', 'triggerType' and 'triggerButtonProps' prop in this component could not be transformed and requires manual intervention.
+        Since version 11.0.0, we have simplified the API and now only use the 'trigger' prop.
+        Please refer to https://hello.atlassian.net/wiki/spaces/DST/pages/1330997516/Dropdown+menu+upgrade+guide for more details.
+        And feel free to reach out to us on our support channel if you have more queries – #help-design-system. */
+        trigger={
+          <div>
+            &lt;button/&gt; trigger
+          </div>
+        }>
+        </DropdownMenu>
+      </DropdownMenuWrapper>
+    );
+    `,
+    'should only add comments that do not appear on the DOM',
+  );
 });

package/codemods/migrates/convert-trigger-type.tsx

@@ -9,8 +9,9 @@ import {
 
 const comment = `
   The usage of the 'trigger', 'triggerType' and 'triggerButtonProps' prop in this component could not be transformed and requires manual intervention.
-  Since version 11.0.0, we simplified the API and lean towards to only use 'trigger' prop.
-  For more info please reach out to #help-design-system-code.
+  Since version 11.0.0, we have simplified the API and now only use the 'trigger' prop.
+  Please refer to https://hello.atlassian.net/wiki/spaces/DST/pages/1330997516/Dropdown+menu+upgrade+guide for more details.
+  And feel free to reach out to us on our support channel if you have more queries – #help-design-system.
   `;
 
 const convertTriggerType = (j: core.JSCodeshift, source: Collection<Node>) => {
@@ -30,8 +31,8 @@ const convertTriggerType = (j: core.JSCodeshift, source: Collection<Node>) => {
     const triggerTypeProp = getJSXAttributesByName(j, element, 'triggerType');
     const triggerProp = getJSXAttributesByName(j, element, 'trigger');
 
-    // just skip when triggerType or trigger is not defined
-    if (triggerTypeProp.length === 0 || triggerProp.length === 0) {
+    // just skip when trigger is not defined
+    if (triggerProp.length === 0) {
       return;
     }
 
@@ -49,7 +50,15 @@ const convertTriggerType = (j: core.JSCodeshift, source: Collection<Node>) => {
       });
     } else {
       // for anything else we left a inline message
-      addCommentBefore(j, elements, comment);
+      // Overriding the comment prefix to be 'TODO: (from codemod)'
+      // to avoid trailing spaces.
+      addCommentBefore(
+        j,
+        triggerProp,
+        comment,
+        'block',
+        'TODO: (from codemod)',
+      );
     }
   });
 };

package/codemods/migrates/deprecate-autoFocus.tsx

@@ -0,0 +1,18 @@
+// eslint-disable-next-line @repo/internal/fs/filename-pattern-match
+import { createRemoveFuncFor } from '@atlaskit/codemod-utils';
+
+const deprecateAutoFocus = () => [
+  createRemoveFuncFor('@atlaskit/dropdown-menu', 'DropdownItem', 'autoFocus'),
+  createRemoveFuncFor(
+    '@atlaskit/dropdown-menu',
+    'DropdownItemCheckbox',
+    'autoFocus',
+  ),
+  createRemoveFuncFor(
+    '@atlaskit/dropdown-menu',
+    'DropdownItemRadio',
+    'autoFocus',
+  ),
+];
+
+export default deprecateAutoFocus;

package/codemods/migrates/deprecate-boundariesElement.tsx

@@ -0,0 +1,9 @@
+// eslint-disable-next-line @repo/internal/fs/filename-pattern-match
+import { createRemoveFuncAddCommentFor } from '@atlaskit/codemod-utils';
+
+const deprecateItems = createRemoveFuncAddCommentFor(
+  '@atlaskit/dropdown-menu',
+  'boundariesElement',
+);
+
+export default deprecateItems;

package/codemods/migrates/deprecate-isCompact.tsx

@@ -0,0 +1,18 @@
+// eslint-disable-next-line @repo/internal/fs/filename-pattern-match
+import { createRemoveFuncFor } from '@atlaskit/codemod-utils';
+
+const deprecateIsCompact = () => [
+  createRemoveFuncFor('@atlaskit/dropdown-menu', 'DropdownItem', 'isCompact'),
+  createRemoveFuncFor(
+    '@atlaskit/dropdown-menu',
+    'DropdownItemCheckbox',
+    'isCompact',
+  ),
+  createRemoveFuncFor(
+    '@atlaskit/dropdown-menu',
+    'DropdownItemRadio',
+    'isCompact',
+  ),
+];
+
+export default deprecateIsCompact;

package/codemods/migrates/deprecate-isHidden.tsx

@@ -0,0 +1,18 @@
+// eslint-disable-next-line @repo/internal/fs/filename-pattern-match
+import { createRemoveFuncFor } from '@atlaskit/codemod-utils';
+
+const deprecateIsHidden = () => [
+  createRemoveFuncFor('@atlaskit/dropdown-menu', 'DropdownItem', 'isHidden'),
+  createRemoveFuncFor(
+    '@atlaskit/dropdown-menu',
+    'DropdownItemCheckbox',
+    'isHidden',
+  ),
+  createRemoveFuncFor(
+    '@atlaskit/dropdown-menu',
+    'DropdownItemRadio',
+    'isHidden',
+  ),
+];
+
+export default deprecateIsHidden;

package/codemods/migrates/deprecate-isMenuFixed.tsx

@@ -0,0 +1,9 @@
+// eslint-disable-next-line @repo/internal/fs/filename-pattern-match
+import { createRemoveFuncAddCommentFor } from '@atlaskit/codemod-utils';
+
+const deprecateItems = createRemoveFuncAddCommentFor(
+  '@atlaskit/dropdown-menu',
+  'isMenuFixed',
+);
+
+export default deprecateItems;

package/dist/cjs/checkbox/dropdown-item-checkbox.js

@@ -100,7 +100,8 @@ var DropdownItemCheckbox = function DropdownItemCheckbox(props) {
       primaryColor: iconColors.primary,
       secondaryColor: iconColors.secondary
     }),
-    ref: itemRef
+    ref: itemRef // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+
   }, rest));
 };
 

package/dist/cjs/dropdown-menu.js

@@ -9,6 +9,8 @@ exports.default = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
@@ -45,7 +47,14 @@ var _menuWrapper = _interopRequireDefault(require("./internal/components/menu-wr
 
 var _selectionStore = _interopRequireDefault(require("./internal/context/selection-store"));
 
+var _useGeneratedId = _interopRequireDefault(require("./internal/utils/use-generated-id"));
+
 var _excluded = ["ref"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+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, _core.css)({
   display: 'flex',
@@ -54,6 +63,7 @@ var spinnerContainerStyles = (0, _core.css)({
   justifyContent: 'center'
 });
 var MAX_HEIGHT = "calc(100vh - ".concat(gridSize * 2, "px)");
+var fallbackPlacements = ['bottom', 'bottom-end', 'right-start', 'left-start', 'auto'];
 /**
  * __Dropdown menu__
  *
@@ -73,7 +83,7 @@ var DropdownMenu = function DropdownMenu(props) {
       children = props.children,
       _props$placement = props.placement,
       placement = _props$placement === void 0 ? 'bottom-start' : _props$placement,
-      Trigger = props.trigger,
+      _trigger = props.trigger,
       _props$shouldFlip = props.shouldFlip,
       shouldFlip = _props$shouldFlip === void 0 ? true : _props$shouldFlip,
       _props$isLoading = props.isLoading,
@@ -82,7 +92,9 @@ var DropdownMenu = function DropdownMenu(props) {
       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 === void 0 ? 'Loading' : _props$statusLabel,
+      _props$zIndex = props.zIndex,
+      zIndex = _props$zIndex === void 0 ? _constants.layers.modal() : _props$zIndex;
 
   var _useControlledState = (0, _useControlled.default)(isOpen, function () {
     return defaultOpen;
@@ -137,41 +149,43 @@ var DropdownMenu = function DropdownMenu(props) {
   };
 
   (0, _useKeydownEvent.default)(handleDownArrow, isFocused);
-
-  var renderTrigger = function renderTrigger(triggerProps) {
-    if (typeof Trigger === 'function') {
-      var ref = triggerProps.ref,
-          providedProps = (0, _objectWithoutProperties2.default)(triggerProps, _excluded);
-      return (0, _core.jsx)(Trigger, (0, _extends2.default)({}, providedProps, bindFocus, {
-        triggerRef: ref,
-        isSelected: isLocalOpen,
-        onClick: handleTriggerClicked,
-        testId: testId && "".concat(testId, "--trigger")
-      }));
-    }
-
-    return (0, _core.jsx)(_standardButton.default, (0, _extends2.default)({}, triggerProps, bindFocus, {
-      isSelected: isLocalOpen,
-      iconAfter: (0, _core.jsx)(_chevronDown.default, {
-        size: "medium",
-        label: "expand"
-      }),
-      onClick: handleTriggerClicked,
-      testId: testId && "".concat(testId, "--trigger")
-    }), Trigger);
-  };
-
-  var fallbackPlacements = ['bottom', 'bottom-end', 'right-start', 'left-start', 'auto'];
+  var id = (0, _useGeneratedId.default)();
   return (0, _core.jsx)(_selectionStore.default, null, (0, _core.jsx)(_popup.default, {
+    id: isLocalOpen ? id : undefined,
     shouldFlip: shouldFlip,
     isOpen: isLocalOpen,
     onClose: handleOnClose,
-    zIndex: _constants.layers.modal(),
+    zIndex: zIndex,
     placement: placement,
     fallbackPlacements: fallbackPlacements,
     testId: testId && "".concat(testId, "--content"),
-    trigger: renderTrigger,
     shouldUseCaptureOnOutsideClick: true,
+    trigger: function trigger(triggerProps) {
+      if (typeof _trigger === 'function') {
+        var ref = triggerProps.ref,
+            providedProps = (0, _objectWithoutProperties2.default)(triggerProps, _excluded);
+        return _trigger(_objectSpread(_objectSpread(_objectSpread({}, providedProps), bindFocus), {}, {
+          triggerRef: ref,
+          isSelected: isLocalOpen,
+          onClick: handleTriggerClicked,
+          testId: testId && "".concat(testId, "--trigger")
+        }));
+      }
+
+      return (0, _core.jsx)(_standardButton.default, (0, _extends2.default)({}, bindFocus, {
+        ref: triggerProps.ref,
+        "aria-controls": triggerProps['aria-controls'],
+        "aria-expanded": triggerProps['aria-expanded'],
+        "aria-haspopup": triggerProps['aria-haspopup'],
+        isSelected: isLocalOpen,
+        iconAfter: (0, _core.jsx)(_chevronDown.default, {
+          size: "medium",
+          label: "expand"
+        }),
+        onClick: handleTriggerClicked,
+        testId: testId && "".concat(testId, "--trigger")
+      }), _trigger);
+    },
     content: function content(_ref) {
       var setInitialFocusRef = _ref.setInitialFocusRef;
       return (0, _core.jsx)(_focusManager.default, null, (0, _core.jsx)(_menuWrapper.default, {

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

@@ -58,8 +58,10 @@ var MenuWrapper = function MenuWrapper(_ref) {
     }
   };
 
-  setInitialFocusRef && setInitialFocusRef(menuItemRefs[0]);
+  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));
 };

package/dist/cjs/internal/utils/use-generated-id.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useGeneratedId;
+
+var _react = require("react");
+
+var PREFIX = 'ds--dropdown--';
+
+var generateRandomString = function generateRandomString() {
+  return (// This string is used only on client side usually triggered after a user interaction.
+    // Therefore, so there is no risk of mismatch
+    // between server and client generated markup.
+    // eslint-disable-next-line @repo/internal/react/disallow-unstable-values
+    "".concat(PREFIX).concat(Math.random().toString(16).substr(2, 8))
+  );
+};
+/**
+ * useGeneratedId generates a random string which remains constant across
+ * renders when called without any parameter.
+ */
+
+
+function useGeneratedId() {
+  var cachedId = (0, _react.useRef)(generateRandomString());
+  return cachedId.current;
+}

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

@@ -100,7 +100,8 @@ var DropdownItemRadio = function DropdownItemRadio(props) {
       primaryColor: iconColors.primary,
       secondaryColor: iconColors.secondary
     }),
-    ref: itemRef
+    ref: itemRef // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+
   }, rest));
 };
 

package/dist/cjs/version.json

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

package/dist/cjs/visual-regression/index.js

@@ -0,0 +1,93 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
+var _helper = require("@atlaskit/visual-regression/helper");
+
+var dropdownTrigger = '[data-testid="dropdown--trigger"]';
+var dropdownContent = '[data-testid="dropdown--content"]';
+describe('Snapshot Test', function () {
+  it('it should match visual snapshot for dropdown', /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
+    var url, _global, page, dropdownImage;
+
+    return _regenerator.default.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            url = (0, _helper.getExampleUrl)('design-system', 'dropdown-menu', 'default-dropdown-menu', global.__BASEURL__);
+            _global = global, page = _global.page;
+            _context.next = 4;
+            return (0, _helper.loadPage)(page, url);
+
+          case 4:
+            _context.next = 6;
+            return page.waitForSelector(dropdownContent);
+
+          case 6:
+            _context.next = 8;
+            return page.screenshot();
+
+          case 8:
+            dropdownImage = _context.sent;
+            expect(dropdownImage).toMatchProdImageSnapshot();
+
+          case 10:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  })));
+  it('should accept custom zIndex', /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2() {
+    var url, _global2, page, button, popupImage;
+
+    return _regenerator.default.wrap(function _callee2$(_context2) {
+      while (1) {
+        switch (_context2.prev = _context2.next) {
+          case 0:
+            url = (0, _helper.getExampleUrl)('design-system', 'dropdown-menu', 'setting-z-index', global.__BASEURL__);
+            _global2 = global, page = _global2.page;
+            button = "[data-testid='popup--trigger']";
+            _context2.next = 5;
+            return (0, _helper.loadPage)(page, url);
+
+          case 5:
+            _context2.next = 7;
+            return page.waitForSelector(button);
+
+          case 7:
+            _context2.next = 9;
+            return page.click(button);
+
+          case 9:
+            _context2.next = 11;
+            return page.waitForSelector(dropdownTrigger);
+
+          case 11:
+            _context2.next = 13;
+            return page.click(dropdownTrigger);
+
+          case 13:
+            _context2.next = 15;
+            return page.waitForSelector(dropdownContent);
+
+          case 15:
+            _context2.next = 17;
+            return page.screenshot();
+
+          case 17:
+            popupImage = _context2.sent;
+            expect(popupImage).toMatchProdImageSnapshot();
+
+          case 19:
+          case "end":
+            return _context2.stop();
+        }
+      }
+    }, _callee2);
+  })));
+});

package/dist/es2019/checkbox/dropdown-item-checkbox.js

@@ -60,7 +60,8 @@ const DropdownItemCheckbox = props => {
       primaryColor: iconColors.primary,
       secondaryColor: iconColors.secondary
     }),
-    ref: itemRef
+    ref: itemRef // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+
   }, rest));
 };
 

package/dist/es2019/dropdown-menu.js

@@ -17,6 +17,7 @@ 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',
@@ -25,6 +26,7 @@ const spinnerContainerStyles = css({
   justifyContent: 'center'
 });
 const MAX_HEIGHT = `calc(100vh - ${gridSize * 2}px)`;
+const fallbackPlacements = ['bottom', 'bottom-end', 'right-start', 'left-start', 'auto'];
 /**
  * __Dropdown menu__
  *
@@ -42,12 +44,13 @@ const DropdownMenu = props => {
     onOpenChange = noop,
     children,
     placement = 'bottom-start',
-    trigger: Trigger,
+    trigger,
     shouldFlip = true,
     isLoading = false,
     autoFocus = false,
     testId,
-    statusLabel = 'Loading'
+    statusLabel = 'Loading',
+    zIndex = layers.modal()
   } = props;
   const [isLocalOpen, setLocalIsOpen] = useControlledState(isOpen, () => defaultOpen);
   const [isTriggeredUsingKeyboard, setTriggeredUsingKeyboard] = useState(false);
@@ -94,43 +97,46 @@ const DropdownMenu = props => {
   };
 
   useKeydownEvent(handleDownArrow, isFocused);
-
-  const renderTrigger = triggerProps => {
-    if (typeof Trigger === 'function') {
-      const {
-        ref,
-        ...providedProps
-      } = triggerProps;
-      return jsx(Trigger, _extends({}, providedProps, bindFocus, {
-        triggerRef: ref,
-        isSelected: isLocalOpen,
-        onClick: handleTriggerClicked,
-        testId: testId && `${testId}--trigger`
-      }));
-    }
-
-    return jsx(Button, _extends({}, triggerProps, bindFocus, {
-      isSelected: isLocalOpen,
-      iconAfter: jsx(ExpandIcon, {
-        size: "medium",
-        label: "expand"
-      }),
-      onClick: handleTriggerClicked,
-      testId: testId && `${testId}--trigger`
-    }), Trigger);
-  };
-
-  const fallbackPlacements = ['bottom', 'bottom-end', 'right-start', 'left-start', 'auto'];
+  const id = useGeneratedId();
   return jsx(SelectionStore, null, jsx(Popup, {
+    id: isLocalOpen ? id : undefined,
     shouldFlip: shouldFlip,
     isOpen: isLocalOpen,
     onClose: handleOnClose,
-    zIndex: layers.modal(),
+    zIndex: zIndex,
     placement: placement,
     fallbackPlacements: fallbackPlacements,
     testId: testId && `${testId}--content`,
-    trigger: renderTrigger,
     shouldUseCaptureOnOutsideClick: true,
+    trigger: triggerProps => {
+      if (typeof trigger === 'function') {
+        const {
+          ref,
+          ...providedProps
+        } = triggerProps;
+        return trigger({ ...providedProps,
+          ...bindFocus,
+          triggerRef: ref,
+          isSelected: isLocalOpen,
+          onClick: handleTriggerClicked,
+          testId: testId && `${testId}--trigger`
+        });
+      }
+
+      return jsx(Button, _extends({}, bindFocus, {
+        ref: triggerProps.ref,
+        "aria-controls": triggerProps['aria-controls'],
+        "aria-expanded": triggerProps['aria-expanded'],
+        "aria-haspopup": triggerProps['aria-haspopup'],
+        isSelected: isLocalOpen,
+        iconAfter: jsx(ExpandIcon, {
+          size: "medium",
+          label: "expand"
+        }),
+        onClick: handleTriggerClicked,
+        testId: testId && `${testId}--trigger`
+      }), trigger);
+    },
     content: ({
       setInitialFocusRef
     }) => jsx(FocusManager, null, jsx(MenuWrapper, {

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

@@ -35,8 +35,10 @@ const MenuWrapper = ({
     }
   };
 
-  setInitialFocusRef && setInitialFocusRef(menuItemRefs[0]);
+  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));
 };

package/dist/es2019/internal/utils/use-generated-id.js

@@ -0,0 +1,18 @@
+import { useRef } from 'react';
+const PREFIX = 'ds--dropdown--';
+
+const generateRandomString = () => // This string is used only on client side usually triggered after a user interaction.
+// Therefore, so there is no risk of mismatch
+// between server and client generated markup.
+// eslint-disable-next-line @repo/internal/react/disallow-unstable-values
+`${PREFIX}${Math.random().toString(16).substr(2, 8)}`;
+/**
+ * useGeneratedId generates a random string which remains constant across
+ * renders when called without any parameter.
+ */
+
+
+export default function useGeneratedId() {
+  const cachedId = useRef(generateRandomString());
+  return cachedId.current;
+}

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

@@ -60,7 +60,8 @@ const DropdownItemRadio = props => {
       primaryColor: iconColors.primary,
       secondaryColor: iconColors.secondary
     }),
-    ref: itemRef
+    ref: itemRef // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+
   }, rest));
 };
 

package/dist/es2019/version.json

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

package/dist/es2019/visual-regression/index.js

@@ -0,0 +1,30 @@
+import { getExampleUrl, loadPage } from '@atlaskit/visual-regression/helper';
+const dropdownTrigger = '[data-testid="dropdown--trigger"]';
+const dropdownContent = '[data-testid="dropdown--content"]';
+describe('Snapshot Test', () => {
+  it('it should match visual snapshot for dropdown', async () => {
+    const url = getExampleUrl('design-system', 'dropdown-menu', 'default-dropdown-menu', global.__BASEURL__);
+    const {
+      page
+    } = global;
+    await loadPage(page, url);
+    await page.waitForSelector(dropdownContent);
+    const dropdownImage = await page.screenshot();
+    expect(dropdownImage).toMatchProdImageSnapshot();
+  });
+  it('should accept custom zIndex', async () => {
+    const url = getExampleUrl('design-system', 'dropdown-menu', 'setting-z-index', global.__BASEURL__);
+    const {
+      page
+    } = global;
+    const button = "[data-testid='popup--trigger']";
+    await loadPage(page, url);
+    await page.waitForSelector(button);
+    await page.click(button);
+    await page.waitForSelector(dropdownTrigger);
+    await page.click(dropdownTrigger);
+    await page.waitForSelector(dropdownContent);
+    const popupImage = await page.screenshot();
+    expect(popupImage).toMatchProdImageSnapshot();
+  });
+});

package/dist/esm/checkbox/dropdown-item-checkbox.js

@@ -74,7 +74,8 @@ var DropdownItemCheckbox = function DropdownItemCheckbox(props) {
       primaryColor: iconColors.primary,
       secondaryColor: iconColors.secondary
     }),
-    ref: itemRef
+    ref: itemRef // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+
   }, rest));
 };
 

package/dist/esm/dropdown-menu.js

@@ -1,8 +1,13 @@
 import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 var _excluded = ["ref"];
 
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+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) { _defineProperty(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; }
+
 /** @jsx jsx */
 import { useCallback, useState } from 'react';
 import { css, jsx } from '@emotion/core';
@@ -20,6 +25,7 @@ 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',
@@ -28,6 +34,7 @@ var spinnerContainerStyles = css({
   justifyContent: 'center'
 });
 var MAX_HEIGHT = "calc(100vh - ".concat(gridSize * 2, "px)");
+var fallbackPlacements = ['bottom', 'bottom-end', 'right-start', 'left-start', 'auto'];
 /**
  * __Dropdown menu__
  *
@@ -47,7 +54,7 @@ var DropdownMenu = function DropdownMenu(props) {
       children = props.children,
       _props$placement = props.placement,
       placement = _props$placement === void 0 ? 'bottom-start' : _props$placement,
-      Trigger = props.trigger,
+      _trigger = props.trigger,
       _props$shouldFlip = props.shouldFlip,
       shouldFlip = _props$shouldFlip === void 0 ? true : _props$shouldFlip,
       _props$isLoading = props.isLoading,
@@ -56,7 +63,9 @@ var DropdownMenu = function DropdownMenu(props) {
       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 === void 0 ? 'Loading' : _props$statusLabel,
+      _props$zIndex = props.zIndex,
+      zIndex = _props$zIndex === void 0 ? layers.modal() : _props$zIndex;
 
   var _useControlledState = useControlledState(isOpen, function () {
     return defaultOpen;
@@ -111,42 +120,44 @@ var DropdownMenu = function DropdownMenu(props) {
   };
 
   useKeydownEvent(handleDownArrow, isFocused);
-
-  var renderTrigger = function renderTrigger(triggerProps) {
-    if (typeof Trigger === 'function') {
-      var ref = triggerProps.ref,
-          providedProps = _objectWithoutProperties(triggerProps, _excluded);
-
-      return jsx(Trigger, _extends({}, providedProps, bindFocus, {
-        triggerRef: ref,
-        isSelected: isLocalOpen,
-        onClick: handleTriggerClicked,
-        testId: testId && "".concat(testId, "--trigger")
-      }));
-    }
-
-    return jsx(Button, _extends({}, triggerProps, bindFocus, {
-      isSelected: isLocalOpen,
-      iconAfter: jsx(ExpandIcon, {
-        size: "medium",
-        label: "expand"
-      }),
-      onClick: handleTriggerClicked,
-      testId: testId && "".concat(testId, "--trigger")
-    }), Trigger);
-  };
-
-  var fallbackPlacements = ['bottom', 'bottom-end', 'right-start', 'left-start', 'auto'];
+  var id = useGeneratedId();
   return jsx(SelectionStore, null, jsx(Popup, {
+    id: isLocalOpen ? id : undefined,
     shouldFlip: shouldFlip,
     isOpen: isLocalOpen,
     onClose: handleOnClose,
-    zIndex: layers.modal(),
+    zIndex: zIndex,
     placement: placement,
     fallbackPlacements: fallbackPlacements,
     testId: testId && "".concat(testId, "--content"),
-    trigger: renderTrigger,
     shouldUseCaptureOnOutsideClick: true,
+    trigger: function trigger(triggerProps) {
+      if (typeof _trigger === 'function') {
+        var ref = triggerProps.ref,
+            providedProps = _objectWithoutProperties(triggerProps, _excluded);
+
+        return _trigger(_objectSpread(_objectSpread(_objectSpread({}, providedProps), bindFocus), {}, {
+          triggerRef: ref,
+          isSelected: isLocalOpen,
+          onClick: handleTriggerClicked,
+          testId: testId && "".concat(testId, "--trigger")
+        }));
+      }
+
+      return jsx(Button, _extends({}, bindFocus, {
+        ref: triggerProps.ref,
+        "aria-controls": triggerProps['aria-controls'],
+        "aria-expanded": triggerProps['aria-expanded'],
+        "aria-haspopup": triggerProps['aria-haspopup'],
+        isSelected: isLocalOpen,
+        iconAfter: jsx(ExpandIcon, {
+          size: "medium",
+          label: "expand"
+        }),
+        onClick: handleTriggerClicked,
+        testId: testId && "".concat(testId, "--trigger")
+      }), _trigger);
+    },
     content: function content(_ref) {
       var setInitialFocusRef = _ref.setInitialFocusRef;
       return jsx(FocusManager, null, jsx(MenuWrapper, {

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

@@ -36,8 +36,10 @@ var MenuWrapper = function MenuWrapper(_ref) {
     }
   };
 
-  setInitialFocusRef && setInitialFocusRef(menuItemRefs[0]);
+  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));
 };

package/dist/esm/internal/utils/use-generated-id.js

@@ -0,0 +1,21 @@
+import { useRef } from 'react';
+var PREFIX = 'ds--dropdown--';
+
+var generateRandomString = function generateRandomString() {
+  return (// This string is used only on client side usually triggered after a user interaction.
+    // Therefore, so there is no risk of mismatch
+    // between server and client generated markup.
+    // eslint-disable-next-line @repo/internal/react/disallow-unstable-values
+    "".concat(PREFIX).concat(Math.random().toString(16).substr(2, 8))
+  );
+};
+/**
+ * useGeneratedId generates a random string which remains constant across
+ * renders when called without any parameter.
+ */
+
+
+export default function useGeneratedId() {
+  var cachedId = useRef(generateRandomString());
+  return cachedId.current;
+}

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

@@ -74,7 +74,8 @@ var DropdownItemRadio = function DropdownItemRadio(props) {
       primaryColor: iconColors.primary,
       secondaryColor: iconColors.secondary
     }),
-    ref: itemRef
+    ref: itemRef // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+
   }, rest));
 };
 

package/dist/esm/version.json

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

package/dist/esm/visual-regression/index.js

@@ -0,0 +1,86 @@
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import { getExampleUrl, loadPage } from '@atlaskit/visual-regression/helper';
+var dropdownTrigger = '[data-testid="dropdown--trigger"]';
+var dropdownContent = '[data-testid="dropdown--content"]';
+describe('Snapshot Test', function () {
+  it('it should match visual snapshot for dropdown', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+    var url, _global, page, dropdownImage;
+
+    return _regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            url = getExampleUrl('design-system', 'dropdown-menu', 'default-dropdown-menu', global.__BASEURL__);
+            _global = global, page = _global.page;
+            _context.next = 4;
+            return loadPage(page, url);
+
+          case 4:
+            _context.next = 6;
+            return page.waitForSelector(dropdownContent);
+
+          case 6:
+            _context.next = 8;
+            return page.screenshot();
+
+          case 8:
+            dropdownImage = _context.sent;
+            expect(dropdownImage).toMatchProdImageSnapshot();
+
+          case 10:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  })));
+  it('should accept custom zIndex', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+    var url, _global2, page, button, popupImage;
+
+    return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+      while (1) {
+        switch (_context2.prev = _context2.next) {
+          case 0:
+            url = getExampleUrl('design-system', 'dropdown-menu', 'setting-z-index', global.__BASEURL__);
+            _global2 = global, page = _global2.page;
+            button = "[data-testid='popup--trigger']";
+            _context2.next = 5;
+            return loadPage(page, url);
+
+          case 5:
+            _context2.next = 7;
+            return page.waitForSelector(button);
+
+          case 7:
+            _context2.next = 9;
+            return page.click(button);
+
+          case 9:
+            _context2.next = 11;
+            return page.waitForSelector(dropdownTrigger);
+
+          case 11:
+            _context2.next = 13;
+            return page.click(dropdownTrigger);
+
+          case 13:
+            _context2.next = 15;
+            return page.waitForSelector(dropdownContent);
+
+          case 15:
+            _context2.next = 17;
+            return page.screenshot();
+
+          case 17:
+            popupImage = _context2.sent;
+            expect(popupImage).toMatchProdImageSnapshot();
+
+          case 19:
+          case "end":
+            return _context2.stop();
+        }
+      }
+    }, _callee2);
+  })));
+});

package/dist/types/internal/utils/use-generated-id.d.ts

@@ -0,0 +1,5 @@
+/**
+ * useGeneratedId generates a random string which remains constant across
+ * renders when called without any parameter.
+ */
+export default function useGeneratedId(): string;

package/dist/types/types.d.ts

@@ -113,6 +113,12 @@ export interface DropdownMenuProps {
      * 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.
+     */
+    zIndex?: number;
 }
 export interface DropdownItemProps {
     /**

package/dist/types/visual-regression/index.d.ts

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/dropdown-menu",
-  "version": "11.0.3",
+  "version": "11.1.2",
   "description": "A dropdown menu displays a list of actions or options to a user.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -22,16 +22,16 @@
     }
   },
   "dependencies": {
-    "@atlaskit/button": "^16.1.0",
+    "@atlaskit/button": "^16.2.0",
     "@atlaskit/codemod-utils": "^3.2.0",
-    "@atlaskit/ds-lib": "^1.1.0",
+    "@atlaskit/ds-lib": "^1.4.0",
     "@atlaskit/icon": "^21.10.0",
-    "@atlaskit/menu": "^1.0.0",
+    "@atlaskit/menu": "^1.3.0",
     "@atlaskit/popup": "^1.3.0",
     "@atlaskit/spinner": "^15.0.0",
     "@atlaskit/theme": "^12.1.0",
-    "@atlaskit/tokens": "^0.6.0",
-    "@atlaskit/visually-hidden": "^0.1.1",
+    "@atlaskit/tokens": "^0.8.0",
+    "@atlaskit/visually-hidden": "^1.0.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/core": "^10.0.9"
   },
@@ -42,7 +42,7 @@
   "devDependencies": {
     "@atlaskit/avatar": "^20.5.0",
     "@atlaskit/docs": "*",
-    "@atlaskit/lozenge": "11.1.6",
+    "@atlaskit/lozenge": "11.1.8",
     "@atlaskit/modal-dialog": "^12.2.0",
     "@atlaskit/section-message": "^6.1.0",
     "@atlaskit/ssr": "*",
@@ -54,6 +54,7 @@
     "@testing-library/react": "^8.0.1",
     "@testing-library/react-hooks": "^1.0.4",
     "jscodeshift": "^0.13.0",
+    "raf-stub": "^2.0.1",
     "react-dom": "^16.8.0",
     "storybook-addon-performance": "^0.16.0",
     "tiny-invariant": "^1.2.0",