@atlaskit/dropdown-menu 12.21.0 → 12.22.0

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @atlaskit/dropdown-menu
 
+## 12.22.0
+
+### Minor Changes
+
+- [`cfef14b7ec2bc`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/cfef14b7ec2bc) -
+  Update Dropdown Menu internals so that menuItemRefs are always stored in order. In the case of a
+  DropDownItem with async content then the ref may only be populated once the content has loaded.
+
+### Patch Changes
+
+- Updated dependencies
+
+## 12.21.1
+
+### Patch Changes
+
+- [#157534](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/157534)
+  [`ca0824645f3a5`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/ca0824645f3a5) -
+  Remove the use of Math.random for the generation of IDs
+
 ## 12.21.0
 
 ### Minor Changes

package/dist/cjs/internal/components/focus-manager.js

@@ -42,7 +42,7 @@ var FocusManager = function FocusManager(_ref) {
   var registerMode = (0, _react.useRef)('ordered');
   registerMode.current = 'ordered';
   var registerRef = (0, _react.useCallback)(function (ref) {
-    if (!ref || menuItemRefs.current.includes(ref)) {
+    if (menuItemRefs.current.includes(ref)) {
       return;
     }
     switch (registerMode.current) {

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

@@ -10,9 +10,9 @@ var _react2 = require("@emotion/react");
 var _menuGroup = _interopRequireDefault(require("@atlaskit/menu/menu-group"));
 var _primitives = require("@atlaskit/primitives");
 var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
-var _focusManager = require("../components/focus-manager");
 var _isCheckboxItem = _interopRequireDefault(require("../utils/is-checkbox-item"));
 var _isRadioItem = _interopRequireDefault(require("../utils/is-radio-item"));
+var _focusManager = require("./focus-manager");
 /**
  * @jsxRuntime classic
  * @jsx jsx
@@ -62,7 +62,11 @@ var MenuWrapper = function MenuWrapper(_ref2) {
   var _useContext = (0, _react.useContext)(_focusManager.FocusManagerContext),
     menuItemRefs = _useContext.menuItemRefs;
   var closeOnMenuItemClick = function closeOnMenuItemClick(e) {
-    var isTargetMenuItemOrDecendant = menuItemRefs.some(function (menuItem) {
+    var isTargetMenuItemOrDescendant = menuItemRefs.some(function (menuItemRef) {
+      var menuItem = menuItemRef.current;
+      if (!menuItem) {
+        return false;
+      }
       var isCheckboxOrRadio = (0, _isCheckboxItem.default)(menuItem) || (0, _isRadioItem.default)(menuItem);
       return menuItem.contains(e.target) && !isCheckboxOrRadio;
     });
@@ -71,7 +75,7 @@ var MenuWrapper = function MenuWrapper(_ref2) {
     // 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.
-    if (isTargetMenuItemOrDecendant && onClose) {
+    if (isTargetMenuItemOrDescendant && onClose) {
       onClose(e);
     }
   };
@@ -83,10 +87,13 @@ var MenuWrapper = function MenuWrapper(_ref2) {
     onUpdate();
   }, [isLoading, onUpdate]);
   (0, _react.useEffect)(function () {
-    var _menuItemRefs$find;
-    var firstFocusableRef = (_menuItemRefs$find = menuItemRefs.find(function (ref) {
-      return !ref.hasAttribute('disabled');
-    })) !== null && _menuItemRefs$find !== void 0 ? _menuItemRefs$find : null;
+    var _menuItemRefs$map$fin;
+    var firstFocusableRef = (_menuItemRefs$map$fin = menuItemRefs.map(function (_ref3) {
+      var current = _ref3.current;
+      return current;
+    }).find(function (el) {
+      return !!el && !el.hasAttribute('disabled');
+    })) !== null && _menuItemRefs$map$fin !== void 0 ? _menuItemRefs$map$fin : null;
     if (shouldRenderToParent && (isTriggeredUsingKeyboard || autoFocus)) {
       firstFocusableRef === null || firstFocusableRef === void 0 || firstFocusableRef.focus();
     }

package/dist/cjs/internal/hooks/use-register-item-with-focus-manager.js

@@ -7,16 +7,14 @@ exports.default = void 0;
 var _react = require("react");
 var _focusManager = require("../components/focus-manager");
 // This function is called whenever a MenuItem mounts.
-// The refs stored in the context are used to programatically
+// The refs stored in the context are used to programmatically
 // control focus on a user navigates using the keyboard.
 function useRegisterItemWithFocusManager() {
   var _useContext = (0, _react.useContext)(_focusManager.FocusManagerContext),
     registerRef = _useContext.registerRef;
   var itemRef = (0, _react.useRef)(null);
   (0, _react.useEffect)(function () {
-    if (itemRef.current !== null) {
-      registerRef(itemRef.current);
-    }
+    return registerRef(itemRef);
   }, [registerRef]);
   return itemRef;
 }

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

@@ -20,11 +20,11 @@ var actionMap = (_actionMap = {}, (0, _defineProperty2.default)(_actionMap, _key
  */
 var getNextFocusableElement = function getNextFocusableElement(refs, currentFocusedIdx) {
   while (currentFocusedIdx + 1 < refs.length) {
-    var isDisabled = refs[currentFocusedIdx + 1].hasAttribute('disabled');
-    if (!isDisabled) {
-      return refs[currentFocusedIdx + 1];
+    var element = refs[++currentFocusedIdx].current;
+    var isValid = !!element && !element.hasAttribute('disabled');
+    if (isValid) {
+      return element;
     }
-    currentFocusedIdx++;
   }
 };
 
@@ -36,20 +36,21 @@ var getNextFocusableElement = function getNextFocusableElement(refs, currentFocu
  */
 var getPrevFocusableElement = function getPrevFocusableElement(refs, currentFocusedIdx) {
   while (currentFocusedIdx > 0) {
-    var isDisabled = refs[currentFocusedIdx - 1].hasAttribute('disabled');
-    if (!isDisabled) {
-      return refs[currentFocusedIdx - 1];
+    var element = refs[--currentFocusedIdx].current;
+    var isValid = !!element && !element.hasAttribute('disabled');
+    if (isValid) {
+      return element;
     }
-    currentFocusedIdx--;
   }
 };
 function handleFocus(refs, isLayerDisabled, onClose) {
   return function (e) {
     var _refs$current;
-    var currentRefs = (_refs$current = refs.current) !== null && _refs$current !== void 0 ? _refs$current : refs;
-    var currentFocusedIdx = currentRefs.findIndex(function (el) {
+    var currentRefs = (_refs$current = refs.current) !== null && _refs$current !== void 0 ? _refs$current : [];
+    var currentFocusedIdx = currentRefs.findIndex(function (_ref) {
       var _document$activeEleme;
-      return (_document$activeEleme = document.activeElement) === null || _document$activeEleme === void 0 ? void 0 : _document$activeEleme.isSameNode(el);
+      var el = _ref.current;
+      return el && ((_document$activeEleme = document.activeElement) === null || _document$activeEleme === void 0 ? void 0 : _document$activeEleme.isSameNode(el));
     });
     if ((0, _platformFeatureFlags.fg)('platform_dst_popup-disable-focuslock')) {
       var _document$activeEleme2;

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

@@ -5,22 +5,14 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.PREFIX = void 0;
 exports.default = useGeneratedId;
-var _react = require("react");
+var _useId = require("@atlaskit/ds-lib/use-id");
 var PREFIX = exports.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;
+  var id = (0, _useId.useId)();
+  return "".concat(PREFIX).concat(id);
 }

package/dist/es2019/internal/components/focus-manager.js

@@ -30,7 +30,7 @@ const FocusManager = ({
   const registerMode = useRef('ordered');
   registerMode.current = 'ordered';
   const registerRef = useCallback(ref => {
-    if (!ref || menuItemRefs.current.includes(ref)) {
+    if (menuItemRefs.current.includes(ref)) {
       return;
     }
     switch (registerMode.current) {

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

@@ -9,9 +9,9 @@ import { jsx } from '@emotion/react';
 import MenuGroup from '@atlaskit/menu/menu-group';
 import { Box, xcss } from '@atlaskit/primitives';
 import Spinner from '@atlaskit/spinner';
-import { FocusManagerContext } from '../components/focus-manager';
 import isCheckboxItem from '../utils/is-checkbox-item';
 import isRadioItem from '../utils/is-radio-item';
+import { FocusManagerContext } from './focus-manager';
 const spinnerContainerStyles = xcss({
   display: 'flex',
   minWidth: '160px',
@@ -54,7 +54,13 @@ const MenuWrapper = ({
     menuItemRefs
   } = useContext(FocusManagerContext);
   const closeOnMenuItemClick = e => {
-    const isTargetMenuItemOrDecendant = menuItemRefs.some(menuItem => {
+    const isTargetMenuItemOrDescendant = menuItemRefs.some(menuItemRef => {
+      const {
+        current: menuItem
+      } = menuItemRef;
+      if (!menuItem) {
+        return false;
+      }
       const isCheckboxOrRadio = isCheckboxItem(menuItem) || isRadioItem(menuItem);
       return menuItem.contains(e.target) && !isCheckboxOrRadio;
     });
@@ -63,7 +69,7 @@ const MenuWrapper = ({
     // 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.
-    if (isTargetMenuItemOrDecendant && onClose) {
+    if (isTargetMenuItemOrDescendant && onClose) {
       onClose(e);
     }
   };
@@ -75,8 +81,10 @@ const MenuWrapper = ({
     onUpdate();
   }, [isLoading, onUpdate]);
   useEffect(() => {
-    var _menuItemRefs$find;
-    const firstFocusableRef = (_menuItemRefs$find = menuItemRefs.find(ref => !ref.hasAttribute('disabled'))) !== null && _menuItemRefs$find !== void 0 ? _menuItemRefs$find : null;
+    var _menuItemRefs$map$fin;
+    const firstFocusableRef = (_menuItemRefs$map$fin = menuItemRefs.map(({
+      current
+    }) => current).find(el => !!el && !el.hasAttribute('disabled'))) !== null && _menuItemRefs$map$fin !== void 0 ? _menuItemRefs$map$fin : null;
     if (shouldRenderToParent && (isTriggeredUsingKeyboard || autoFocus)) {
       firstFocusableRef === null || firstFocusableRef === void 0 ? void 0 : firstFocusableRef.focus();
     }

package/dist/es2019/internal/hooks/use-register-item-with-focus-manager.js

@@ -1,19 +1,14 @@
 import { useContext, useEffect, useRef } from 'react';
 import { FocusManagerContext } from '../components/focus-manager';
-
 // This function is called whenever a MenuItem mounts.
-// The refs stored in the context are used to programatically
+// The refs stored in the context are used to programmatically
 // control focus on a user navigates using the keyboard.
 function useRegisterItemWithFocusManager() {
   const {
     registerRef
   } = useContext(FocusManagerContext);
   const itemRef = useRef(null);
-  useEffect(() => {
-    if (itemRef.current !== null) {
-      registerRef(itemRef.current);
-    }
-  }, [registerRef]);
+  useEffect(() => registerRef(itemRef), [registerRef]);
   return itemRef;
 }
 export default useRegisterItemWithFocusManager;

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

@@ -16,11 +16,13 @@ const actionMap = {
  */
 const getNextFocusableElement = (refs, currentFocusedIdx) => {
   while (currentFocusedIdx + 1 < refs.length) {
-    const isDisabled = refs[currentFocusedIdx + 1].hasAttribute('disabled');
-    if (!isDisabled) {
-      return refs[currentFocusedIdx + 1];
+    const {
+      current: element
+    } = refs[++currentFocusedIdx];
+    const isValid = !!element && !element.hasAttribute('disabled');
+    if (isValid) {
+      return element;
     }
-    currentFocusedIdx++;
   }
 };
 
@@ -32,20 +34,24 @@ const getNextFocusableElement = (refs, currentFocusedIdx) => {
  */
 const getPrevFocusableElement = (refs, currentFocusedIdx) => {
   while (currentFocusedIdx > 0) {
-    const isDisabled = refs[currentFocusedIdx - 1].hasAttribute('disabled');
-    if (!isDisabled) {
-      return refs[currentFocusedIdx - 1];
+    const {
+      current: element
+    } = refs[--currentFocusedIdx];
+    const isValid = !!element && !element.hasAttribute('disabled');
+    if (isValid) {
+      return element;
     }
-    currentFocusedIdx--;
   }
 };
 export default function handleFocus(refs, isLayerDisabled, onClose) {
   return e => {
     var _refs$current;
-    const currentRefs = (_refs$current = refs.current) !== null && _refs$current !== void 0 ? _refs$current : refs;
-    const currentFocusedIdx = currentRefs.findIndex(el => {
+    const currentRefs = (_refs$current = refs.current) !== null && _refs$current !== void 0 ? _refs$current : [];
+    const currentFocusedIdx = currentRefs.findIndex(({
+      current: el
+    }) => {
       var _document$activeEleme;
-      return (_document$activeEleme = document.activeElement) === null || _document$activeEleme === void 0 ? void 0 : _document$activeEleme.isSameNode(el);
+      return el && ((_document$activeEleme = document.activeElement) === null || _document$activeEleme === void 0 ? void 0 : _document$activeEleme.isSameNode(el));
     });
     if (fg('platform_dst_popup-disable-focuslock')) {
       var _document$activeEleme2;

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

@@ -1,17 +1,11 @@
-import { useRef } from 'react';
+import { useId } from '@atlaskit/ds-lib/use-id';
 export 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;
+  const id = useId();
+  return `${PREFIX}${id}`;
 }

package/dist/esm/internal/components/focus-manager.js

@@ -33,7 +33,7 @@ var FocusManager = function FocusManager(_ref) {
   var registerMode = useRef('ordered');
   registerMode.current = 'ordered';
   var registerRef = useCallback(function (ref) {
-    if (!ref || menuItemRefs.current.includes(ref)) {
+    if (menuItemRefs.current.includes(ref)) {
       return;
     }
     switch (registerMode.current) {

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

@@ -9,9 +9,9 @@ import { jsx } from '@emotion/react';
 import MenuGroup from '@atlaskit/menu/menu-group';
 import { Box, xcss } from '@atlaskit/primitives';
 import Spinner from '@atlaskit/spinner';
-import { FocusManagerContext } from '../components/focus-manager';
 import isCheckboxItem from '../utils/is-checkbox-item';
 import isRadioItem from '../utils/is-radio-item';
+import { FocusManagerContext } from './focus-manager';
 var spinnerContainerStyles = xcss({
   display: 'flex',
   minWidth: '160px',
@@ -54,7 +54,11 @@ var MenuWrapper = function MenuWrapper(_ref2) {
   var _useContext = useContext(FocusManagerContext),
     menuItemRefs = _useContext.menuItemRefs;
   var closeOnMenuItemClick = function closeOnMenuItemClick(e) {
-    var isTargetMenuItemOrDecendant = menuItemRefs.some(function (menuItem) {
+    var isTargetMenuItemOrDescendant = menuItemRefs.some(function (menuItemRef) {
+      var menuItem = menuItemRef.current;
+      if (!menuItem) {
+        return false;
+      }
       var isCheckboxOrRadio = isCheckboxItem(menuItem) || isRadioItem(menuItem);
       return menuItem.contains(e.target) && !isCheckboxOrRadio;
     });
@@ -63,7 +67,7 @@ var MenuWrapper = function MenuWrapper(_ref2) {
     // 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.
-    if (isTargetMenuItemOrDecendant && onClose) {
+    if (isTargetMenuItemOrDescendant && onClose) {
       onClose(e);
     }
   };
@@ -75,10 +79,13 @@ var MenuWrapper = function MenuWrapper(_ref2) {
     onUpdate();
   }, [isLoading, onUpdate]);
   useEffect(function () {
-    var _menuItemRefs$find;
-    var firstFocusableRef = (_menuItemRefs$find = menuItemRefs.find(function (ref) {
-      return !ref.hasAttribute('disabled');
-    })) !== null && _menuItemRefs$find !== void 0 ? _menuItemRefs$find : null;
+    var _menuItemRefs$map$fin;
+    var firstFocusableRef = (_menuItemRefs$map$fin = menuItemRefs.map(function (_ref3) {
+      var current = _ref3.current;
+      return current;
+    }).find(function (el) {
+      return !!el && !el.hasAttribute('disabled');
+    })) !== null && _menuItemRefs$map$fin !== void 0 ? _menuItemRefs$map$fin : null;
     if (shouldRenderToParent && (isTriggeredUsingKeyboard || autoFocus)) {
       firstFocusableRef === null || firstFocusableRef === void 0 || firstFocusableRef.focus();
     }

package/dist/esm/internal/hooks/use-register-item-with-focus-manager.js

@@ -1,17 +1,14 @@
 import { useContext, useEffect, useRef } from 'react';
 import { FocusManagerContext } from '../components/focus-manager';
-
 // This function is called whenever a MenuItem mounts.
-// The refs stored in the context are used to programatically
+// The refs stored in the context are used to programmatically
 // control focus on a user navigates using the keyboard.
 function useRegisterItemWithFocusManager() {
   var _useContext = useContext(FocusManagerContext),
     registerRef = _useContext.registerRef;
   var itemRef = useRef(null);
   useEffect(function () {
-    if (itemRef.current !== null) {
-      registerRef(itemRef.current);
-    }
+    return registerRef(itemRef);
   }, [registerRef]);
   return itemRef;
 }

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

@@ -13,11 +13,11 @@ var actionMap = (_actionMap = {}, _defineProperty(_actionMap, KEY_DOWN, 'next'),
  */
 var getNextFocusableElement = function getNextFocusableElement(refs, currentFocusedIdx) {
   while (currentFocusedIdx + 1 < refs.length) {
-    var isDisabled = refs[currentFocusedIdx + 1].hasAttribute('disabled');
-    if (!isDisabled) {
-      return refs[currentFocusedIdx + 1];
+    var element = refs[++currentFocusedIdx].current;
+    var isValid = !!element && !element.hasAttribute('disabled');
+    if (isValid) {
+      return element;
     }
-    currentFocusedIdx++;
   }
 };
 
@@ -29,20 +29,21 @@ var getNextFocusableElement = function getNextFocusableElement(refs, currentFocu
  */
 var getPrevFocusableElement = function getPrevFocusableElement(refs, currentFocusedIdx) {
   while (currentFocusedIdx > 0) {
-    var isDisabled = refs[currentFocusedIdx - 1].hasAttribute('disabled');
-    if (!isDisabled) {
-      return refs[currentFocusedIdx - 1];
+    var element = refs[--currentFocusedIdx].current;
+    var isValid = !!element && !element.hasAttribute('disabled');
+    if (isValid) {
+      return element;
     }
-    currentFocusedIdx--;
   }
 };
 export default function handleFocus(refs, isLayerDisabled, onClose) {
   return function (e) {
     var _refs$current;
-    var currentRefs = (_refs$current = refs.current) !== null && _refs$current !== void 0 ? _refs$current : refs;
-    var currentFocusedIdx = currentRefs.findIndex(function (el) {
+    var currentRefs = (_refs$current = refs.current) !== null && _refs$current !== void 0 ? _refs$current : [];
+    var currentFocusedIdx = currentRefs.findIndex(function (_ref) {
       var _document$activeEleme;
-      return (_document$activeEleme = document.activeElement) === null || _document$activeEleme === void 0 ? void 0 : _document$activeEleme.isSameNode(el);
+      var el = _ref.current;
+      return el && ((_document$activeEleme = document.activeElement) === null || _document$activeEleme === void 0 ? void 0 : _document$activeEleme.isSameNode(el));
     });
     if (fg('platform_dst_popup-disable-focuslock')) {
       var _document$activeEleme2;

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

@@ -1,19 +1,11 @@
-import { useRef } from 'react';
+import { useId } from '@atlaskit/ds-lib/use-id';
 export 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;
+  var id = useId();
+  return "".concat(PREFIX).concat(id);
 }

package/dist/types/internal/components/focus-manager.d.ts

@@ -1,5 +1,5 @@
 import React, { type FC, type ReactNode } from 'react';
-import { type FocusableElement } from '../../types';
+import { type FocusableElementRef } from '../../types';
 /**
  *
  *
@@ -9,8 +9,8 @@ import { type FocusableElement } from '../../types';
  *
  */
 export declare const FocusManagerContext: React.Context<{
-    menuItemRefs: FocusableElement[];
-    registerRef: (ref: FocusableElement) => void;
+    menuItemRefs: FocusableElementRef[];
+    registerRef(ref: FocusableElementRef): void;
 }>;
 /**
  * Focus manager logic.

package/dist/types/internal/hooks/use-register-item-with-focus-manager.d.ts

@@ -1,4 +1,3 @@
 /// <reference types="react" />
-import { type FocusableElement } from '../../types';
-declare function useRegisterItemWithFocusManager(): import("react").RefObject<FocusableElement>;
+declare function useRegisterItemWithFocusManager(): import("react").MutableRefObject<HTMLAnchorElement | HTMLButtonElement | null>;
 export default useRegisterItemWithFocusManager;

package/dist/types/internal/utils/handle-focus.d.ts

@@ -1,4 +1,3 @@
-import { type FocusableElement } from '../../types';
-export default function handleFocus(refs: {
-    current: Array<FocusableElement>;
-}, isLayerDisabled: () => boolean, onClose: (e: KeyboardEvent) => void): (e: KeyboardEvent) => void;
+import { type RefObject } from 'react';
+import { type FocusableElementRef } from '../../types';
+export default function handleFocus(refs: RefObject<FocusableElementRef[]>, isLayerDisabled: () => boolean, onClose: (e: KeyboardEvent) => void): (e: KeyboardEvent) => void;

package/dist/types/types.d.ts

@@ -1,7 +1,7 @@
 import { type KeyboardEvent, type MouseEvent, type ReactElement, type ReactNode, type Ref, type RefObject } from 'react';
 import type { CustomItemComponentProps, CustomItemProps, MenuGroupProps, SectionProps } from '@atlaskit/menu/types';
 import type { ContentProps, TriggerProps } from '@atlaskit/popup/types';
-export type FocusableElement = HTMLAnchorElement | HTMLButtonElement;
+export type FocusableElementRef = RefObject<HTMLAnchorElement | HTMLButtonElement>;
 export type Action = 'next' | 'prev' | 'first' | 'last' | 'tab';
 export type Placement = 'auto-start' | 'auto' | 'auto-end' | 'top-start' | 'top' | 'top-end' | 'right-start' | 'right' | 'right-end' | 'bottom-end' | 'bottom' | 'bottom-start' | 'left-end' | 'left' | 'left-start';
 export type ItemId = string;

package/dist/types-ts4.5/internal/components/focus-manager.d.ts

@@ -1,5 +1,5 @@
 import React, { type FC, type ReactNode } from 'react';
-import { type FocusableElement } from '../../types';
+import { type FocusableElementRef } from '../../types';
 /**
  *
  *
@@ -9,8 +9,8 @@ import { type FocusableElement } from '../../types';
  *
  */
 export declare const FocusManagerContext: React.Context<{
-    menuItemRefs: FocusableElement[];
-    registerRef: (ref: FocusableElement) => void;
+    menuItemRefs: FocusableElementRef[];
+    registerRef(ref: FocusableElementRef): void;
 }>;
 /**
  * Focus manager logic.

package/dist/types-ts4.5/internal/hooks/use-register-item-with-focus-manager.d.ts

@@ -1,4 +1,3 @@
 /// <reference types="react" />
-import { type FocusableElement } from '../../types';
-declare function useRegisterItemWithFocusManager(): import("react").RefObject<FocusableElement>;
+declare function useRegisterItemWithFocusManager(): import("react").MutableRefObject<HTMLAnchorElement | HTMLButtonElement | null>;
 export default useRegisterItemWithFocusManager;

package/dist/types-ts4.5/internal/utils/handle-focus.d.ts

@@ -1,4 +1,3 @@
-import { type FocusableElement } from '../../types';
-export default function handleFocus(refs: {
-    current: Array<FocusableElement>;
-}, isLayerDisabled: () => boolean, onClose: (e: KeyboardEvent) => void): (e: KeyboardEvent) => void;
+import { type RefObject } from 'react';
+import { type FocusableElementRef } from '../../types';
+export default function handleFocus(refs: RefObject<FocusableElementRef[]>, isLayerDisabled: () => boolean, onClose: (e: KeyboardEvent) => void): (e: KeyboardEvent) => void;

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

@@ -1,7 +1,7 @@
 import { type KeyboardEvent, type MouseEvent, type ReactElement, type ReactNode, type Ref, type RefObject } from 'react';
 import type { CustomItemComponentProps, CustomItemProps, MenuGroupProps, SectionProps } from '@atlaskit/menu/types';
 import type { ContentProps, TriggerProps } from '@atlaskit/popup/types';
-export type FocusableElement = HTMLAnchorElement | HTMLButtonElement;
+export type FocusableElementRef = RefObject<HTMLAnchorElement | HTMLButtonElement>;
 export type Action = 'next' | 'prev' | 'first' | 'last' | 'tab';
 export type Placement = 'auto-start' | 'auto' | 'auto-end' | 'top-start' | 'top' | 'top-end' | 'right-start' | 'right' | 'right-end' | 'bottom-end' | 'bottom' | 'bottom-start' | 'left-end' | 'left' | 'left-start';
 export type ItemId = string;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/dropdown-menu",
-	"version": "12.21.0",
+	"version": "12.22.0",
 	"description": "A dropdown menu displays a list of actions or options to a user.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -26,12 +26,12 @@
 		"@atlaskit/button": "^20.3.0",
 		"@atlaskit/codemod-utils": "^4.2.0",
 		"@atlaskit/ds-lib": "^3.1.0",
-		"@atlaskit/icon": "^22.23.0",
+		"@atlaskit/icon": "^22.24.0",
 		"@atlaskit/layering": "^0.7.0",
 		"@atlaskit/menu": "^2.13.0",
 		"@atlaskit/platform-feature-flags": "^0.3.0",
 		"@atlaskit/popup": "^1.29.0",
-		"@atlaskit/primitives": "^12.2.0",
+		"@atlaskit/primitives": "^13.0.0",
 		"@atlaskit/spinner": "^16.3.0",
 		"@atlaskit/theme": "^14.0.0",
 		"@atlaskit/tokens": "^2.0.0",