@atlaskit/dropdown-menu 11.5.4 → 11.5.6

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/dropdown-menu
 
+## 11.5.6
+
+### Patch Changes
+
+- [`6ae8910147b`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6ae8910147b) - [ux] Allow users to navigate past disabled menu items with arrow keys
+
+## 11.5.5
+
+### Patch Changes
+
+- Updated dependencies
+
+## 11.5.4
+
+### Patch Changes
+
+- [`ab6ea02a97e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ab6ea02a97e) - Align internal implementation with current linting rules. There should be no change for consumers.
+
 ## 11.5.4
 
 ### Patch Changes

package/codemods/utils/create-rename-import.tsx

@@ -1,41 +1,44 @@
 import core from 'jscodeshift';
 import { Collection } from 'jscodeshift/src/Collection';
 
-export const createRenameImportFor = ({
-  componentName,
-  newComponentName,
-  packagePath,
-  isDefaultImport,
-}: {
-  componentName: string;
-  newComponentName: string;
-  packagePath: string;
-  isDefaultImport: boolean;
-}) => (j: core.JSCodeshift, source: Collection<Node>) => {
-  source
-    .find(j.ImportDeclaration)
-    .filter((path) => path.node.source.value === packagePath)
-    .find(j.ImportSpecifier)
-    .filter((path) => path.node.imported.name === componentName)
-    .replaceWith((importSpecifier) => {
-      const specifier = j.identifier(newComponentName);
+export const createRenameImportFor =
+  ({
+    componentName,
+    newComponentName,
+    packagePath,
+    isDefaultImport,
+  }: {
+    componentName: string;
+    newComponentName: string;
+    packagePath: string;
+    isDefaultImport: boolean;
+  }) =>
+  (j: core.JSCodeshift, source: Collection<Node>) => {
+    source
+      .find(j.ImportDeclaration)
+      .filter((path) => path.node.source.value === packagePath)
+      .find(j.ImportSpecifier)
+      .filter((path) => path.node.imported.name === componentName)
+      .replaceWith((importSpecifier) => {
+        const specifier = j.identifier(newComponentName);
 
-      let importAlias;
-      if (
-        importSpecifier &&
-        importSpecifier.node &&
-        importSpecifier.node.local
-      ) {
-        importAlias =
-          importSpecifier.node.local.name !== importSpecifier.node.imported.name
-            ? j.identifier(importSpecifier.node.local.name)
-            : null;
-      }
+        let importAlias;
+        if (
+          importSpecifier &&
+          importSpecifier.node &&
+          importSpecifier.node.local
+        ) {
+          importAlias =
+            importSpecifier.node.local.name !==
+            importSpecifier.node.imported.name
+              ? j.identifier(importSpecifier.node.local.name)
+              : null;
+        }
 
-      return isDefaultImport
-        ? j.importDefaultSpecifier(importAlias || specifier)
-        : j.importSpecifier(specifier, importAlias);
-    });
+        return isDefaultImport
+          ? j.importDefaultSpecifier(importAlias || specifier)
+          : j.importSpecifier(specifier, importAlias);
+      });
 
-  return source.toSource();
-};
+    return source.toSource();
+  };

package/codemods/utils/create-update-callsite.tsx

@@ -1,32 +1,34 @@
 import core from 'jscodeshift';
 import { Collection } from 'jscodeshift/src/Collection';
 
-export const createUpdateCallsite = ({
-  componentName,
-  newComponentName,
-  packagePath,
-}: {
-  componentName: string;
-  newComponentName: string;
-  packagePath: string;
-}) => (j: core.JSCodeshift, source: Collection<Node>) => {
-  source
-    .find(j.JSXElement)
-    // @ts-ignore
-    .filter((path) => path.node.openingElement.name.name === componentName)
-    .replaceWith((element) => {
-      const elementName = j.jsxIdentifier(newComponentName);
-      const newComponent = j.jsxElement(
-        j.jsxOpeningElement(
-          elementName,
-          element.node.openingElement.attributes,
-        ),
-        j.jsxClosingElement(elementName),
-        element.node.children,
-      );
+export const createUpdateCallsite =
+  ({
+    componentName,
+    newComponentName,
+    packagePath,
+  }: {
+    componentName: string;
+    newComponentName: string;
+    packagePath: string;
+  }) =>
+  (j: core.JSCodeshift, source: Collection<Node>) => {
+    source
+      .find(j.JSXElement)
+      // @ts-ignore
+      .filter((path) => path.node.openingElement.name.name === componentName)
+      .replaceWith((element) => {
+        const elementName = j.jsxIdentifier(newComponentName);
+        const newComponent = j.jsxElement(
+          j.jsxOpeningElement(
+            elementName,
+            element.node.openingElement.attributes,
+          ),
+          j.jsxClosingElement(elementName),
+          element.node.children,
+        );
 
-      return newComponent;
-    });
+        return newComponent;
+      });
 
-  return source.toSource();
-};
+    return source.toSource();
+  };

package/dist/cjs/dropdown-menu.js

@@ -2,6 +2,8 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -15,9 +17,7 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
-var _react = require("react");
-
-var _react2 = require("@emotion/react");
+var _react = _interopRequireWildcard(require("react"));
 
 var _bindEventListener = require("bind-event-listener");
 
@@ -47,6 +47,10 @@ var _useGeneratedId = _interopRequireDefault(require("./internal/utils/use-gener
 
 var _excluded = ["ref"];
 
+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; }
+
 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; }
@@ -189,7 +193,7 @@ var DropdownMenu = function DropdownMenu(props) {
     });
   }, [isFocused, isLocalOpen, handleTriggerClicked]);
   var id = (0, _useGeneratedId.default)();
-  return (0, _react2.jsx)(_selectionStore.default, null, (0, _react2.jsx)(_popup.default, {
+  return /*#__PURE__*/_react.default.createElement(_selectionStore.default, null, /*#__PURE__*/_react.default.createElement(_popup.default, {
     id: isLocalOpen ? id : undefined,
     shouldFlip: shouldFlip,
     isOpen: isLocalOpen,
@@ -211,13 +215,13 @@ var DropdownMenu = function DropdownMenu(props) {
         }));
       }
 
-      return (0, _react2.jsx)(_standardButton.default, (0, _extends2.default)({}, bindFocus, {
+      return /*#__PURE__*/_react.default.createElement(_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, _react2.jsx)(_chevronDown.default, {
+        iconAfter: /*#__PURE__*/_react.default.createElement(_chevronDown.default, {
           size: "medium",
           label: ""
         }),
@@ -228,7 +232,7 @@ var DropdownMenu = function DropdownMenu(props) {
     content: function content(_ref) {
       var setInitialFocusRef = _ref.setInitialFocusRef,
           update = _ref.update;
-      return (0, _react2.jsx)(_focusManager.default, null, (0, _react2.jsx)(_menuWrapper.default, {
+      return /*#__PURE__*/_react.default.createElement(_focusManager.default, null, /*#__PURE__*/_react.default.createElement(_menuWrapper.default, {
         maxHeight: MAX_HEIGHT,
         maxWidth: 800,
         onClose: handleOnClose,

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

@@ -19,8 +19,6 @@ 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");
@@ -30,24 +28,25 @@ var _isCheckboxItem = _interopRequireDefault(require("../utils/is-checkbox-item"
 var _isRadioItem = _interopRequireDefault(require("../utils/is-radio-item"));
 
 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"),
+  minWidth: '160px',
+  padding: "var(--ds-scale-250, 20px)",
   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));
+  return (// eslint-disable-next-line @repo/internal/react/use-primitives
+    (0, _react2.jsx)("div", {
+      css: spinnerContainerStyles
+    }, (0, _react2.jsx)(_spinner.default, {
+      size: "small"
+    }), (0, _react2.jsx)(_visuallyHidden.default, {
+      role: "status"
+    }, statusLabel))
+  );
 };
 /**
  *
@@ -75,7 +74,7 @@ var MenuWrapper = function MenuWrapper(_ref2) {
       var isCheckboxOrRadio = (0, _isCheckboxItem.default)(menuItem) || (0, _isRadioItem.default)(menuItem);
       return menuItem.contains(e.target) && !isCheckboxOrRadio;
     }); // Close menu if the click is triggered from a MenuItem or
-    // its decendant. Don't close the menu if the click is triggered
+    // its descendant. Don't close the menu if the click is triggered
     // from a MenuItemRadio or MenuItemCheckbox so that the user can
     // select multiple items.
 

package/dist/cjs/internal/utils/handle-focus.js

@@ -14,6 +14,43 @@ var _keycodes = require("@atlaskit/ds-lib/keycodes");
 var _actionMap;
 
 var actionMap = (_actionMap = {}, (0, _defineProperty2.default)(_actionMap, _keycodes.KEY_DOWN, 'next'), (0, _defineProperty2.default)(_actionMap, _keycodes.KEY_UP, 'prev'), (0, _defineProperty2.default)(_actionMap, _keycodes.KEY_HOME, 'first'), (0, _defineProperty2.default)(_actionMap, _keycodes.KEY_END, 'last'), _actionMap);
+/**
+ * currentFocusedIdx + 1 will not work if the next focusable element
+ * is disabled. So, we need to iterate through the following menu items
+ * to find one that isn't disabled. If all following elements are disabled,
+ * return undefined.
+ */
+
+var getNextFocusableElement = function getNextFocusableElement(refs, currentFocusedIdx) {
+  while (currentFocusedIdx + 1 < refs.length) {
+    var isDisabled = refs[currentFocusedIdx + 1].getAttribute('disabled') !== null;
+
+    if (!isDisabled) {
+      return refs[currentFocusedIdx + 1];
+    }
+
+    currentFocusedIdx++;
+  }
+};
+/**
+ * currentFocusedIdx - 1 will not work if the prev focusable element
+ * is disabled. So, we need to iterate through the previous menu items
+ * to find one that isn't disabled. If all previous elements are disabled,
+ * return undefined.
+ */
+
+
+var getPrevFocusableElement = function getPrevFocusableElement(refs, currentFocusedIdx) {
+  while (currentFocusedIdx > 0) {
+    var isDisabled = refs[currentFocusedIdx - 1].getAttribute('disabled') !== null;
+
+    if (!isDisabled) {
+      return refs[currentFocusedIdx - 1];
+    }
+
+    currentFocusedIdx--;
+  }
+};
 
 function handleFocus(refs) {
   return function (e) {
@@ -28,7 +65,10 @@ function handleFocus(refs) {
       case 'next':
         if (currentFocusedIdx < refs.length - 1) {
           e.preventDefault();
-          refs[currentFocusedIdx + 1].focus();
+
+          var _nextFocusableElement = getNextFocusableElement(refs, currentFocusedIdx);
+
+          _nextFocusableElement && _nextFocusableElement.focus();
         }
 
         break;
@@ -36,19 +76,26 @@ function handleFocus(refs) {
       case 'prev':
         if (currentFocusedIdx > 0) {
           e.preventDefault();
-          refs[currentFocusedIdx - 1].focus();
+
+          var _prevFocusableElement = getPrevFocusableElement(refs, currentFocusedIdx);
+
+          _prevFocusableElement && _prevFocusableElement.focus();
         }
 
         break;
 
       case 'first':
-        e.preventDefault();
-        refs[0].focus();
+        e.preventDefault(); // Search for first non-disabled element if first element is disabled
+
+        var nextFocusableElement = getNextFocusableElement(refs, -1);
+        nextFocusableElement && nextFocusableElement.focus();
         break;
 
       case 'last':
-        e.preventDefault();
-        refs[refs.length - 1].focus();
+        e.preventDefault(); // Search for last non-disabled element if last element is disabled
+
+        var prevFocusableElement = getPrevFocusableElement(refs, refs.length);
+        prevFocusableElement && prevFocusableElement.focus();
         break;
 
       default:

package/dist/cjs/version.json

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

package/dist/es2019/dropdown-menu.js

@@ -1,8 +1,5 @@
 import _extends from "@babel/runtime/helpers/extends";
-
-/** @jsx jsx */
-import { useCallback, useEffect, useMemo, useState } from 'react';
-import { jsx } from '@emotion/react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { bind } from 'bind-event-listener';
 import Button from '@atlaskit/button/standard-button';
 import { KEY_DOWN } from '@atlaskit/ds-lib/keycodes';
@@ -137,7 +134,7 @@ const DropdownMenu = props => {
     });
   }, [isFocused, isLocalOpen, handleTriggerClicked]);
   const id = useGeneratedId();
-  return jsx(SelectionStore, null, jsx(Popup, {
+  return /*#__PURE__*/React.createElement(SelectionStore, null, /*#__PURE__*/React.createElement(Popup, {
     id: isLocalOpen ? id : undefined,
     shouldFlip: shouldFlip,
     isOpen: isLocalOpen,
@@ -162,13 +159,13 @@ const DropdownMenu = props => {
         });
       }
 
-      return jsx(Button, _extends({}, bindFocus, {
+      return /*#__PURE__*/React.createElement(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, {
+        iconAfter: /*#__PURE__*/React.createElement(ExpandIcon, {
           size: "medium",
           label: ""
         }),
@@ -179,7 +176,7 @@ const DropdownMenu = props => {
     content: ({
       setInitialFocusRef,
       update
-    }) => jsx(FocusManager, null, jsx(MenuWrapper, {
+    }) => /*#__PURE__*/React.createElement(FocusManager, null, /*#__PURE__*/React.createElement(MenuWrapper, {
       maxHeight: MAX_HEIGHT,
       maxWidth: 800,
       onClose: handleOnClose,

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

@@ -5,22 +5,21 @@ 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`,
+  minWidth: '160px',
+  padding: "var(--ds-scale-250, 20px)",
   justifyContent: 'center'
 });
 
 const LoadingIndicator = ({
   statusLabel = 'Loading'
-}) => jsx("div", {
+}) => // eslint-disable-next-line @repo/internal/react/use-primitives
+jsx("div", {
   css: spinnerContainerStyles
 }, jsx(Spinner, {
   size: "small"
@@ -54,7 +53,7 @@ const MenuWrapper = ({
       const isCheckboxOrRadio = isCheckboxItem(menuItem) || isRadioItem(menuItem);
       return menuItem.contains(e.target) && !isCheckboxOrRadio;
     }); // Close menu if the click is triggered from a MenuItem or
-    // its decendant. Don't close the menu if the click is triggered
+    // its descendant. Don't close the menu if the click is triggered
     // from a MenuItemRadio or MenuItemCheckbox so that the user can
     // select multiple items.
 

package/dist/es2019/internal/utils/handle-focus.js

@@ -5,6 +5,44 @@ const actionMap = {
   [KEY_HOME]: 'first',
   [KEY_END]: 'last'
 };
+/**
+ * currentFocusedIdx + 1 will not work if the next focusable element
+ * is disabled. So, we need to iterate through the following menu items
+ * to find one that isn't disabled. If all following elements are disabled,
+ * return undefined.
+ */
+
+const getNextFocusableElement = (refs, currentFocusedIdx) => {
+  while (currentFocusedIdx + 1 < refs.length) {
+    const isDisabled = refs[currentFocusedIdx + 1].getAttribute('disabled') !== null;
+
+    if (!isDisabled) {
+      return refs[currentFocusedIdx + 1];
+    }
+
+    currentFocusedIdx++;
+  }
+};
+/**
+ * currentFocusedIdx - 1 will not work if the prev focusable element
+ * is disabled. So, we need to iterate through the previous menu items
+ * to find one that isn't disabled. If all previous elements are disabled,
+ * return undefined.
+ */
+
+
+const getPrevFocusableElement = (refs, currentFocusedIdx) => {
+  while (currentFocusedIdx > 0) {
+    const isDisabled = refs[currentFocusedIdx - 1].getAttribute('disabled') !== null;
+
+    if (!isDisabled) {
+      return refs[currentFocusedIdx - 1];
+    }
+
+    currentFocusedIdx--;
+  }
+};
+
 export default function handleFocus(refs) {
   return e => {
     const currentFocusedIdx = refs.findIndex(el => {
@@ -18,7 +56,8 @@ export default function handleFocus(refs) {
       case 'next':
         if (currentFocusedIdx < refs.length - 1) {
           e.preventDefault();
-          refs[currentFocusedIdx + 1].focus();
+          const nextFocusableElement = getNextFocusableElement(refs, currentFocusedIdx);
+          nextFocusableElement && nextFocusableElement.focus();
         }
 
         break;
@@ -26,19 +65,24 @@ export default function handleFocus(refs) {
       case 'prev':
         if (currentFocusedIdx > 0) {
           e.preventDefault();
-          refs[currentFocusedIdx - 1].focus();
+          const prevFocusableElement = getPrevFocusableElement(refs, currentFocusedIdx);
+          prevFocusableElement && prevFocusableElement.focus();
         }
 
         break;
 
       case 'first':
-        e.preventDefault();
-        refs[0].focus();
+        e.preventDefault(); // Search for first non-disabled element if first element is disabled
+
+        const nextFocusableElement = getNextFocusableElement(refs, -1);
+        nextFocusableElement && nextFocusableElement.focus();
         break;
 
       case 'last':
-        e.preventDefault();
-        refs[refs.length - 1].focus();
+        e.preventDefault(); // Search for last non-disabled element if last element is disabled
+
+        const prevFocusableElement = getPrevFocusableElement(refs, refs.length);
+        prevFocusableElement && prevFocusableElement.focus();
         break;
 
       default:

package/dist/es2019/version.json

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

package/dist/esm/dropdown-menu.js

@@ -8,9 +8,7 @@ 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) { _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, useEffect, useMemo, useState } from 'react';
-import { jsx } from '@emotion/react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { bind } from 'bind-event-listener';
 import Button from '@atlaskit/button/standard-button';
 import { KEY_DOWN } from '@atlaskit/ds-lib/keycodes';
@@ -162,7 +160,7 @@ var DropdownMenu = function DropdownMenu(props) {
     });
   }, [isFocused, isLocalOpen, handleTriggerClicked]);
   var id = useGeneratedId();
-  return jsx(SelectionStore, null, jsx(Popup, {
+  return /*#__PURE__*/React.createElement(SelectionStore, null, /*#__PURE__*/React.createElement(Popup, {
     id: isLocalOpen ? id : undefined,
     shouldFlip: shouldFlip,
     isOpen: isLocalOpen,
@@ -185,13 +183,13 @@ var DropdownMenu = function DropdownMenu(props) {
         }));
       }
 
-      return jsx(Button, _extends({}, bindFocus, {
+      return /*#__PURE__*/React.createElement(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, {
+        iconAfter: /*#__PURE__*/React.createElement(ExpandIcon, {
           size: "medium",
           label: ""
         }),
@@ -202,7 +200,7 @@ var DropdownMenu = function DropdownMenu(props) {
     content: function content(_ref) {
       var setInitialFocusRef = _ref.setInitialFocusRef,
           update = _ref.update;
-      return jsx(FocusManager, null, jsx(MenuWrapper, {
+      return /*#__PURE__*/React.createElement(FocusManager, null, /*#__PURE__*/React.createElement(MenuWrapper, {
         maxHeight: MAX_HEIGHT,
         maxWidth: 800,
         onClose: handleOnClose,

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

@@ -7,29 +7,29 @@ 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"),
+  minWidth: '160px',
+  padding: "var(--ds-scale-250, 20px)",
   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));
+  return (// eslint-disable-next-line @repo/internal/react/use-primitives
+    jsx("div", {
+      css: spinnerContainerStyles
+    }, jsx(Spinner, {
+      size: "small"
+    }), jsx(VisuallyHidden, {
+      role: "status"
+    }, statusLabel))
+  );
 };
 /**
  *
@@ -57,7 +57,7 @@ var MenuWrapper = function MenuWrapper(_ref2) {
       var isCheckboxOrRadio = isCheckboxItem(menuItem) || isRadioItem(menuItem);
       return menuItem.contains(e.target) && !isCheckboxOrRadio;
     }); // Close menu if the click is triggered from a MenuItem or
-    // its decendant. Don't close the menu if the click is triggered
+    // its descendant. Don't close the menu if the click is triggered
     // from a MenuItemRadio or MenuItemCheckbox so that the user can
     // select multiple items.
 

package/dist/esm/internal/utils/handle-focus.js

@@ -4,6 +4,44 @@ var _actionMap;
 
 import { KEY_DOWN, KEY_END, KEY_HOME, KEY_UP } from '@atlaskit/ds-lib/keycodes';
 var actionMap = (_actionMap = {}, _defineProperty(_actionMap, KEY_DOWN, 'next'), _defineProperty(_actionMap, KEY_UP, 'prev'), _defineProperty(_actionMap, KEY_HOME, 'first'), _defineProperty(_actionMap, KEY_END, 'last'), _actionMap);
+/**
+ * currentFocusedIdx + 1 will not work if the next focusable element
+ * is disabled. So, we need to iterate through the following menu items
+ * to find one that isn't disabled. If all following elements are disabled,
+ * return undefined.
+ */
+
+var getNextFocusableElement = function getNextFocusableElement(refs, currentFocusedIdx) {
+  while (currentFocusedIdx + 1 < refs.length) {
+    var isDisabled = refs[currentFocusedIdx + 1].getAttribute('disabled') !== null;
+
+    if (!isDisabled) {
+      return refs[currentFocusedIdx + 1];
+    }
+
+    currentFocusedIdx++;
+  }
+};
+/**
+ * currentFocusedIdx - 1 will not work if the prev focusable element
+ * is disabled. So, we need to iterate through the previous menu items
+ * to find one that isn't disabled. If all previous elements are disabled,
+ * return undefined.
+ */
+
+
+var getPrevFocusableElement = function getPrevFocusableElement(refs, currentFocusedIdx) {
+  while (currentFocusedIdx > 0) {
+    var isDisabled = refs[currentFocusedIdx - 1].getAttribute('disabled') !== null;
+
+    if (!isDisabled) {
+      return refs[currentFocusedIdx - 1];
+    }
+
+    currentFocusedIdx--;
+  }
+};
+
 export default function handleFocus(refs) {
   return function (e) {
     var currentFocusedIdx = refs.findIndex(function (el) {
@@ -17,7 +55,10 @@ export default function handleFocus(refs) {
       case 'next':
         if (currentFocusedIdx < refs.length - 1) {
           e.preventDefault();
-          refs[currentFocusedIdx + 1].focus();
+
+          var _nextFocusableElement = getNextFocusableElement(refs, currentFocusedIdx);
+
+          _nextFocusableElement && _nextFocusableElement.focus();
         }
 
         break;
@@ -25,19 +66,26 @@ export default function handleFocus(refs) {
       case 'prev':
         if (currentFocusedIdx > 0) {
           e.preventDefault();
-          refs[currentFocusedIdx - 1].focus();
+
+          var _prevFocusableElement = getPrevFocusableElement(refs, currentFocusedIdx);
+
+          _prevFocusableElement && _prevFocusableElement.focus();
         }
 
         break;
 
       case 'first':
-        e.preventDefault();
-        refs[0].focus();
+        e.preventDefault(); // Search for first non-disabled element if first element is disabled
+
+        var nextFocusableElement = getNextFocusableElement(refs, -1);
+        nextFocusableElement && nextFocusableElement.focus();
         break;
 
       case 'last':
-        e.preventDefault();
-        refs[refs.length - 1].focus();
+        e.preventDefault(); // Search for last non-disabled element if last element is disabled
+
+        var prevFocusableElement = getPrevFocusableElement(refs, refs.length);
+        prevFocusableElement && prevFocusableElement.focus();
         break;
 
       default:

package/dist/esm/version.json

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

package/dist/types/dropdown-menu.d.ts

@@ -1,4 +1,4 @@
-import { jsx } from '@emotion/react';
+/// <reference types="react" />
 import type { DropdownMenuProps } from './types';
 /**
  * __Dropdown menu__
@@ -9,5 +9,5 @@ import type { DropdownMenuProps } from './types';
  * - [Code](https://atlassian.design/components/dropdown-menu/code)
  * - [Usage](https://atlassian.design/components/dropdown-menu/usage)
  */
-declare const DropdownMenu: <T extends HTMLElement = HTMLElement>(props: DropdownMenuProps<T>) => jsx.JSX.Element;
+declare const DropdownMenu: <T extends HTMLElement = HTMLElement>(props: DropdownMenuProps<T>) => JSX.Element;
 export default DropdownMenu;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/dropdown-menu",
-  "version": "11.5.4",
+  "version": "11.5.6",
   "description": "A dropdown menu displays a list of actions or options to a user.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -32,7 +32,7 @@
     "@atlaskit/popup": "^1.5.0",
     "@atlaskit/spinner": "^15.2.0",
     "@atlaskit/theme": "^12.2.0",
-    "@atlaskit/tokens": "^0.10.0",
+    "@atlaskit/tokens": "^0.11.0",
     "@atlaskit/visually-hidden": "^1.1.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
@@ -45,9 +45,9 @@
   "devDependencies": {
     "@atlaskit/avatar": "^21.1.0",
     "@atlaskit/docs": "*",
-    "@atlaskit/ds-explorations": "^1.0.0",
-    "@atlaskit/heading": "^0.1.18",
-    "@atlaskit/lozenge": "11.3.0",
+    "@atlaskit/ds-explorations": "^1.4.0",
+    "@atlaskit/heading": "^1.0.0",
+    "@atlaskit/lozenge": "11.3.1",
     "@atlaskit/modal-dialog": "^12.4.0",
     "@atlaskit/section-message": "^6.3.0",
     "@atlaskit/ssr": "*",
@@ -76,9 +76,14 @@
     },
     "@repo/internal": {
       "dom-events": "use-bind-event-listener",
-      "ui-components": "lite-mode",
+      "ui-components": [
+        "primitives",
+        "lite-mode"
+      ],
       "design-system": "v1",
-      "design-tokens": "spacing",
+      "design-tokens": [
+        "spacing"
+      ],
       "styling": [
         "static",
         "emotion"

package/report.api.md

@@ -25,7 +25,7 @@ import type { TriggerProps } from '@atlaskit/popup/types';
 
 // @public (undocumented)
 export interface CustomTriggerProps<
-  TriggerElement extends HTMLElement = HTMLElement
+  TriggerElement extends HTMLElement = HTMLElement,
 > extends Omit<TriggerProps, 'ref'> {
   isSelected?: boolean;
   onClick?: (e: MouseEvent_2 | KeyboardEvent_2) => void;
@@ -127,7 +127,7 @@ export interface DropdownMenuGroupProps extends SectionProps_2 {}
 
 // @public (undocumented)
 export interface DropdownMenuProps<
-  TriggerElement extends HTMLElement = HTMLElement
+  TriggerElement extends HTMLElement = HTMLElement,
 > {
   appearance?: 'default' | 'tall';
   autoFocus?: boolean;