@atlaskit/dropdown-menu 12.18.5 → 12.18.6

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @atlaskit/dropdown-menu
 
+## 12.18.6
+
+### Patch Changes
+
+- [`5ceb889d493ab`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/5ceb889d493ab) -
+  Fix issue with Async loading of Dropdown Menu Items
+- [#148281](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/148281)
+  [`3c4de48168ffe`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/3c4de48168ffe) -
+  Update the import path of `useId*` from `@atlaskit/ds-lib`
+- Updated dependencies
+
 ## 12.18.5
 
 ### Patch Changes

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

@@ -8,7 +8,7 @@ exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireDefault(require("react"));
-var _reactUid = require("@atlaskit/ds-lib/react-uid");
+var _useId = require("@atlaskit/ds-lib/use-id");
 var _section = _interopRequireDefault(require("@atlaskit/menu/section"));
 var _groupTitle = _interopRequireDefault(require("../internal/components/group-title"));
 var _checkboxGroupContext = require("../internal/context/checkbox-group-context");
@@ -29,7 +29,7 @@ var DropdownItemCheckboxGroup = function DropdownItemCheckboxGroup(_ref) {
     testId = _ref.testId,
     title = _ref.title,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var uid = (0, _reactUid.useId)();
+  var uid = (0, _useId.useId)();
   var titleId = "dropdown-menu-item-checkbox-group-title-".concat(uid);
   return /*#__PURE__*/_react.default.createElement(_checkboxGroupContext.CheckboxGroupContext.Provider, {
     value: id

package/dist/cjs/dropdown-menu-item-group.js

@@ -9,7 +9,7 @@ exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
-var _reactUid = require("@atlaskit/ds-lib/react-uid");
+var _useId = require("@atlaskit/ds-lib/use-id");
 var _menu = require("@atlaskit/menu");
 var _groupTitle = _interopRequireDefault(require("./internal/components/group-title"));
 var _excluded = ["children", "id", "isList", "isScrollable", "title", "testId", "hasSeparator", "overrides"];
@@ -31,7 +31,7 @@ var DropdownMenuItemGroup = /*#__PURE__*/(0, _react.forwardRef)(function (_ref,
     hasSeparator = _ref.hasSeparator,
     overrides = _ref.overrides,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var uid = (0, _reactUid.useId)();
+  var uid = (0, _useId.useId)();
   var titleId = "dropdown-menu-item-group-title-".concat(uid);
   return /*#__PURE__*/_react.default.createElement(_menu.Section, (0, _extends2.default)({
     id: id,

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

@@ -18,7 +18,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
  *
  * Context provider which maintains the list of focusable elements and a method to
  * register new menu items.
- * This list drives the keyboard navgation of the menu.
+ * This list drives the keyboard navigation of the menu.
  *
  */
 var FocusManagerContext = exports.FocusManagerContext = /*#__PURE__*/(0, _react.createContext)({
@@ -33,15 +33,16 @@ var FocusManager = function FocusManager(_ref) {
   var children = _ref.children,
     onClose = _ref.onClose;
   var menuItemRefs = (0, _react.useRef)([]);
+  var registerRefCalls = (0, _react.useRef)(0);
   var registerRef = (0, _react.useCallback)(function (ref) {
-    if (ref && !menuItemRefs.current.includes(ref)) {
-      menuItemRefs.current.push(ref);
-    }
+    return upsertRefAtFirstPosition(ref, menuItemRefs, registerRefCalls);
   }, []);
   var _UNSAFE_useLayering = (0, _layering.UNSAFE_useLayering)(),
     isLayerDisabled = _UNSAFE_useLayering.isLayerDisabled;
-  // Intentionally rebinding on each render
   (0, _react.useEffect)(function () {
+    // Intentionally reset count on each render
+    registerRefCalls.current = 0;
+    // Intentionally rebinding on each render
     return (0, _bindEventListener.bind)(window, {
       type: 'keydown',
       listener: (0, _handleFocus.default)(menuItemRefs.current, isLayerDisabled, onClose)
@@ -55,4 +56,37 @@ var FocusManager = function FocusManager(_ref) {
     value: contextValue
   }, children);
 };
+
+/**
+ * Insert the ref at the call position in the array.
+ * If the ref is already in the array, move it to the call position.
+ * If the call position is after the current position, ignore the call.
+ *
+ * @param ref
+ * @param menuItemRefs
+ * @param registerRefCalls
+ */
+function upsertRefAtFirstPosition(ref, menuItemRefs, registerRefCalls) {
+  var positionOnCall = registerRefCalls.current++;
+
+  // Add the ref to the correct position
+  if (!menuItemRefs.current.includes(ref)) {
+    menuItemRefs.current.splice(positionOnCall, 0, ref);
+    return;
+  }
+  var positionCurrent = menuItemRefs.current.indexOf(ref);
+  if (positionOnCall === positionCurrent) {
+    // No change needed
+    return;
+  }
+  if (positionOnCall > positionCurrent) {
+    // Ignore and so keep the count the same
+    registerRefCalls.current--;
+    return;
+  }
+
+  // Update the position of the ref in the array
+  menuItemRefs.current.splice(positionCurrent, 1);
+  menuItemRefs.current.splice(positionOnCall, 0, ref);
+}
 var _default = exports.default = FocusManager;

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

@@ -12,7 +12,7 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
 var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
-var _reactUid = require("@atlaskit/ds-lib/react-uid");
+var _useId = require("@atlaskit/ds-lib/use-id");
 var _menu = require("@atlaskit/menu");
 var _groupTitle = _interopRequireDefault(require("../internal/components/group-title"));
 var _selectionStore = require("../internal/context/selection-store");
@@ -51,7 +51,7 @@ var DropdownItemRadioGroup = function DropdownItemRadioGroup(_ref) {
   var _useContext = (0, _react.useContext)(_selectionStore.SelectionStoreContext),
     setGroupState = _useContext.setGroupState,
     getGroupState = _useContext.getGroupState;
-  var uid = (0, _reactUid.useId)();
+  var uid = (0, _useId.useId)();
   var titleId = "dropdown-menu-item-radio-group-title-".concat(uid);
 
   /**

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

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
-import { useId } from '@atlaskit/ds-lib/react-uid';
+import { useId } from '@atlaskit/ds-lib/use-id';
 import Section from '@atlaskit/menu/section';
 import GroupTitle from '../internal/components/group-title';
 import { CheckboxGroupContext } from '../internal/context/checkbox-group-context';

package/dist/es2019/dropdown-menu-item-group.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React, { forwardRef } from 'react';
-import { useId } from '@atlaskit/ds-lib/react-uid';
+import { useId } from '@atlaskit/ds-lib/use-id';
 import { Section } from '@atlaskit/menu';
 import GroupTitle from './internal/components/group-title';
 

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

@@ -9,7 +9,7 @@ import handleFocus from '../utils/handle-focus';
  *
  * Context provider which maintains the list of focusable elements and a method to
  * register new menu items.
- * This list drives the keyboard navgation of the menu.
+ * This list drives the keyboard navigation of the menu.
  *
  */
 export const FocusManagerContext = /*#__PURE__*/createContext({
@@ -25,16 +25,15 @@ const FocusManager = ({
   onClose
 }) => {
   const menuItemRefs = useRef([]);
-  const registerRef = useCallback(ref => {
-    if (ref && !menuItemRefs.current.includes(ref)) {
-      menuItemRefs.current.push(ref);
-    }
-  }, []);
+  const registerRefCalls = useRef(0);
+  const registerRef = useCallback(ref => upsertRefAtFirstPosition(ref, menuItemRefs, registerRefCalls), []);
   const {
     isLayerDisabled
   } = UNSAFE_useLayering();
-  // Intentionally rebinding on each render
   useEffect(() => {
+    // Intentionally reset count on each render
+    registerRefCalls.current = 0;
+    // Intentionally rebinding on each render
     return bind(window, {
       type: 'keydown',
       listener: handleFocus(menuItemRefs.current, isLayerDisabled, onClose)
@@ -48,4 +47,37 @@ const FocusManager = ({
     value: contextValue
   }, children);
 };
+
+/**
+ * Insert the ref at the call position in the array.
+ * If the ref is already in the array, move it to the call position.
+ * If the call position is after the current position, ignore the call.
+ *
+ * @param ref
+ * @param menuItemRefs
+ * @param registerRefCalls
+ */
+function upsertRefAtFirstPosition(ref, menuItemRefs, registerRefCalls) {
+  const positionOnCall = registerRefCalls.current++;
+
+  // Add the ref to the correct position
+  if (!menuItemRefs.current.includes(ref)) {
+    menuItemRefs.current.splice(positionOnCall, 0, ref);
+    return;
+  }
+  const positionCurrent = menuItemRefs.current.indexOf(ref);
+  if (positionOnCall === positionCurrent) {
+    // No change needed
+    return;
+  }
+  if (positionOnCall > positionCurrent) {
+    // Ignore and so keep the count the same
+    registerRefCalls.current--;
+    return;
+  }
+
+  // Update the position of the ref in the array
+  menuItemRefs.current.splice(positionCurrent, 1);
+  menuItemRefs.current.splice(positionOnCall, 0, ref);
+}
 export default FocusManager;

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

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React, { createContext, useContext, useState } from 'react';
 import noop from '@atlaskit/ds-lib/noop';
-import { useId } from '@atlaskit/ds-lib/react-uid';
+import { useId } from '@atlaskit/ds-lib/use-id';
 import { Section } from '@atlaskit/menu';
 import GroupTitle from '../internal/components/group-title';
 import { SelectionStoreContext } from '../internal/context/selection-store';

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

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["children", "hasSeparator", "id", "isList", "isScrollable", "overrides", "testId", "title"];
 import React from 'react';
-import { useId } from '@atlaskit/ds-lib/react-uid';
+import { useId } from '@atlaskit/ds-lib/use-id';
 import Section from '@atlaskit/menu/section';
 import GroupTitle from '../internal/components/group-title';
 import { CheckboxGroupContext } from '../internal/context/checkbox-group-context';

package/dist/esm/dropdown-menu-item-group.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["children", "id", "isList", "isScrollable", "title", "testId", "hasSeparator", "overrides"];
 import React, { forwardRef } from 'react';
-import { useId } from '@atlaskit/ds-lib/react-uid';
+import { useId } from '@atlaskit/ds-lib/use-id';
 import { Section } from '@atlaskit/menu';
 import GroupTitle from './internal/components/group-title';
 

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

@@ -9,7 +9,7 @@ import handleFocus from '../utils/handle-focus';
  *
  * Context provider which maintains the list of focusable elements and a method to
  * register new menu items.
- * This list drives the keyboard navgation of the menu.
+ * This list drives the keyboard navigation of the menu.
  *
  */
 export var FocusManagerContext = /*#__PURE__*/createContext({
@@ -24,15 +24,16 @@ var FocusManager = function FocusManager(_ref) {
   var children = _ref.children,
     onClose = _ref.onClose;
   var menuItemRefs = useRef([]);
+  var registerRefCalls = useRef(0);
   var registerRef = useCallback(function (ref) {
-    if (ref && !menuItemRefs.current.includes(ref)) {
-      menuItemRefs.current.push(ref);
-    }
+    return upsertRefAtFirstPosition(ref, menuItemRefs, registerRefCalls);
   }, []);
   var _UNSAFE_useLayering = UNSAFE_useLayering(),
     isLayerDisabled = _UNSAFE_useLayering.isLayerDisabled;
-  // Intentionally rebinding on each render
   useEffect(function () {
+    // Intentionally reset count on each render
+    registerRefCalls.current = 0;
+    // Intentionally rebinding on each render
     return bind(window, {
       type: 'keydown',
       listener: handleFocus(menuItemRefs.current, isLayerDisabled, onClose)
@@ -46,4 +47,37 @@ var FocusManager = function FocusManager(_ref) {
     value: contextValue
   }, children);
 };
+
+/**
+ * Insert the ref at the call position in the array.
+ * If the ref is already in the array, move it to the call position.
+ * If the call position is after the current position, ignore the call.
+ *
+ * @param ref
+ * @param menuItemRefs
+ * @param registerRefCalls
+ */
+function upsertRefAtFirstPosition(ref, menuItemRefs, registerRefCalls) {
+  var positionOnCall = registerRefCalls.current++;
+
+  // Add the ref to the correct position
+  if (!menuItemRefs.current.includes(ref)) {
+    menuItemRefs.current.splice(positionOnCall, 0, ref);
+    return;
+  }
+  var positionCurrent = menuItemRefs.current.indexOf(ref);
+  if (positionOnCall === positionCurrent) {
+    // No change needed
+    return;
+  }
+  if (positionOnCall > positionCurrent) {
+    // Ignore and so keep the count the same
+    registerRefCalls.current--;
+    return;
+  }
+
+  // Update the position of the ref in the array
+  menuItemRefs.current.splice(positionCurrent, 1);
+  menuItemRefs.current.splice(positionOnCall, 0, ref);
+}
 export default FocusManager;

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

@@ -7,7 +7,7 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import React, { createContext, useContext, useState } from 'react';
 import noop from '@atlaskit/ds-lib/noop';
-import { useId } from '@atlaskit/ds-lib/react-uid';
+import { useId } from '@atlaskit/ds-lib/use-id';
 import { Section } from '@atlaskit/menu';
 import GroupTitle from '../internal/components/group-title';
 import { SelectionStoreContext } from '../internal/context/selection-store';

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

@@ -5,7 +5,7 @@ import { type FocusableElement } from '../../types';
  *
  * Context provider which maintains the list of focusable elements and a method to
  * register new menu items.
- * This list drives the keyboard navgation of the menu.
+ * This list drives the keyboard navigation of the menu.
  *
  */
 export declare const FocusManagerContext: React.Context<{

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

@@ -5,7 +5,7 @@ import { type FocusableElement } from '../../types';
  *
  * Context provider which maintains the list of focusable elements and a method to
  * register new menu items.
- * This list drives the keyboard navgation of the menu.
+ * This list drives the keyboard navigation of the menu.
  *
  */
 export declare const FocusManagerContext: React.Context<{

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/dropdown-menu",
-	"version": "12.18.5",
+	"version": "12.18.6",
 	"description": "A dropdown menu displays a list of actions or options to a user.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -25,7 +25,7 @@
 	"dependencies": {
 		"@atlaskit/button": "^20.2.0",
 		"@atlaskit/codemod-utils": "^4.2.0",
-		"@atlaskit/ds-lib": "^2.6.0",
+		"@atlaskit/ds-lib": "^2.7.0",
 		"@atlaskit/icon": "^22.20.0",
 		"@atlaskit/layering": "^0.5.0",
 		"@atlaskit/menu": "^2.12.0",