@atlaskit/dropdown-menu 12.1.8 → 12.1.9

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/dropdown-menu
 
+## 12.1.9
+
+### Patch Changes
+
+- [#59251](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/59251) [`137c9cf6b36a`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/137c9cf6b36a) - Fix incorrect focus control after closing DropdownMenu.
+
 ## 12.1.8
 
 ### Patch Changes

package/dist/cjs/dropdown-menu.js

@@ -105,6 +105,8 @@ var DropdownMenu = function DropdownMenu(_ref) {
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     isTriggeredUsingKeyboard = _useState2[0],
     setTriggeredUsingKeyboard = _useState2[1];
+  var id = (0, _useGeneratedId.default)();
+  var itemRef = (0, _useRegisterItemWithFocusManager.default)();
   var fallbackPlacements = (0, _react.useMemo)(function () {
     return getFallbackPlacements(placement);
   }, [placement]);
@@ -129,13 +131,17 @@ var DropdownMenu = function DropdownMenu(_ref) {
     } else if (detail === 0) {
       // Fix for Safari. clientX and clientY !== 0 in Safari
       setTriggeredUsingKeyboard(true);
+    } else {
+      var _itemRef$current;
+      // The trigger element must be focused to avoid problems with an incorrectly focused element after closing DropdownMenu
+      itemRef === null || itemRef === void 0 || (_itemRef$current = itemRef.current) === null || _itemRef$current === void 0 || _itemRef$current.focus();
     }
     setLocalIsOpen(newValue);
     onOpenChange({
       isOpen: newValue,
       event: event
     });
-  }, [onOpenChange, isLocalOpen, setLocalIsOpen]);
+  }, [itemRef, onOpenChange, isLocalOpen, setLocalIsOpen]);
   var handleOnClose = (0, _react.useCallback)(function (event) {
     if (event.key !== 'Escape' && event.target.closest("[id^=".concat(_useGeneratedId.PREFIX, "] [aria-haspopup]"))) {
       // Check if it is within dropdown and it is a trigger button
@@ -180,8 +186,6 @@ var DropdownMenu = function DropdownMenu(_ref) {
       }
     });
   }, [isFocused, isLocalOpen, handleTriggerClicked]);
-  var id = (0, _useGeneratedId.default)();
-  var itemRef = (0, _useRegisterItemWithFocusManager.default)();
   return /*#__PURE__*/_react.default.createElement(_selectionStore.default, null, /*#__PURE__*/_react.default.createElement(_popup.default, {
     id: isLocalOpen ? id : undefined,
     shouldFlip: shouldFlip,

package/dist/es2019/dropdown-menu.js

@@ -75,6 +75,8 @@ const DropdownMenu = ({
 }) => {
   const [isLocalOpen, setLocalIsOpen] = useControlledState(isOpen, () => defaultOpen);
   const [isTriggeredUsingKeyboard, setTriggeredUsingKeyboard] = useState(false);
+  const id = useGeneratedId();
+  const itemRef = useRegisterItemWithFocusManager();
   const fallbackPlacements = useMemo(() => getFallbackPlacements(placement), [placement]);
   const handleTriggerClicked = useCallback(
   // TODO: event is an `any` and is being cast incorrectly
@@ -99,13 +101,17 @@ const DropdownMenu = ({
     } else if (detail === 0) {
       // Fix for Safari. clientX and clientY !== 0 in Safari
       setTriggeredUsingKeyboard(true);
+    } else {
+      var _itemRef$current;
+      // The trigger element must be focused to avoid problems with an incorrectly focused element after closing DropdownMenu
+      itemRef === null || itemRef === void 0 ? void 0 : (_itemRef$current = itemRef.current) === null || _itemRef$current === void 0 ? void 0 : _itemRef$current.focus();
     }
     setLocalIsOpen(newValue);
     onOpenChange({
       isOpen: newValue,
       event
     });
-  }, [onOpenChange, isLocalOpen, setLocalIsOpen]);
+  }, [itemRef, onOpenChange, isLocalOpen, setLocalIsOpen]);
   const handleOnClose = useCallback(event => {
     if (event.key !== 'Escape' && event.target.closest(`[id^=${PREFIX}] [aria-haspopup]`)) {
       // Check if it is within dropdown and it is a trigger button
@@ -151,8 +157,6 @@ const DropdownMenu = ({
       }
     });
   }, [isFocused, isLocalOpen, handleTriggerClicked]);
-  const id = useGeneratedId();
-  const itemRef = useRegisterItemWithFocusManager();
   return /*#__PURE__*/React.createElement(SelectionStore, null, /*#__PURE__*/React.createElement(Popup, {
     id: isLocalOpen ? id : undefined,
     shouldFlip: shouldFlip,

package/dist/esm/dropdown-menu.js

@@ -96,6 +96,8 @@ var DropdownMenu = function DropdownMenu(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     isTriggeredUsingKeyboard = _useState2[0],
     setTriggeredUsingKeyboard = _useState2[1];
+  var id = useGeneratedId();
+  var itemRef = useRegisterItemWithFocusManager();
   var fallbackPlacements = useMemo(function () {
     return getFallbackPlacements(placement);
   }, [placement]);
@@ -120,13 +122,17 @@ var DropdownMenu = function DropdownMenu(_ref) {
     } else if (detail === 0) {
       // Fix for Safari. clientX and clientY !== 0 in Safari
       setTriggeredUsingKeyboard(true);
+    } else {
+      var _itemRef$current;
+      // The trigger element must be focused to avoid problems with an incorrectly focused element after closing DropdownMenu
+      itemRef === null || itemRef === void 0 || (_itemRef$current = itemRef.current) === null || _itemRef$current === void 0 || _itemRef$current.focus();
     }
     setLocalIsOpen(newValue);
     onOpenChange({
       isOpen: newValue,
       event: event
     });
-  }, [onOpenChange, isLocalOpen, setLocalIsOpen]);
+  }, [itemRef, onOpenChange, isLocalOpen, setLocalIsOpen]);
   var handleOnClose = useCallback(function (event) {
     if (event.key !== 'Escape' && event.target.closest("[id^=".concat(PREFIX, "] [aria-haspopup]"))) {
       // Check if it is within dropdown and it is a trigger button
@@ -171,8 +177,6 @@ var DropdownMenu = function DropdownMenu(_ref) {
       }
     });
   }, [isFocused, isLocalOpen, handleTriggerClicked]);
-  var id = useGeneratedId();
-  var itemRef = useRegisterItemWithFocusManager();
   return /*#__PURE__*/React.createElement(SelectionStore, null, /*#__PURE__*/React.createElement(Popup, {
     id: isLocalOpen ? id : undefined,
     shouldFlip: shouldFlip,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/dropdown-menu",
-  "version": "12.1.8",
+  "version": "12.1.9",
   "description": "A dropdown menu displays a list of actions or options to a user.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -26,7 +26,7 @@
     }
   },
   "dependencies": {
-    "@atlaskit/button": "^16.17.0",
+    "@atlaskit/button": "^16.18.0",
     "@atlaskit/codemod-utils": "^4.2.0",
     "@atlaskit/ds-lib": "^2.2.0",
     "@atlaskit/icon": "^22.0.0",
@@ -34,7 +34,7 @@
     "@atlaskit/menu": "^2.1.0",
     "@atlaskit/platform-feature-flags": "^0.2.2",
     "@atlaskit/popup": "^1.11.0",
-    "@atlaskit/primitives": "^1.12.0",
+    "@atlaskit/primitives": "^1.13.0",
     "@atlaskit/spinner": "^16.0.0",
     "@atlaskit/theme": "^12.6.0",
     "@atlaskit/tokens": "^1.29.0",
@@ -48,6 +48,7 @@
   },
   "devDependencies": {
     "@af/accessibility-testing": "*",
+    "@af/integration-testing": "*",
     "@af/visual-regression": "*",
     "@atlaskit/visual-regression": "*",
     "@atlaskit/webdriver-runner": "*",

package/tmp/api-report-tmp.d.ts

@@ -1,147 +0,0 @@
-## API Report File for "@atlaskit/dropdown-menu"
-
-> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
-
-```ts
-
-/// <reference types="react" />
-
-import type { CustomItemProps } from '@atlaskit/menu/types';
-import { default as DropdownItemGroup } from '@atlaskit/menu/section';
-import { KeyboardEvent as KeyboardEvent_2 } from 'react';
-import type { MenuGroupProps } from '@atlaskit/menu/types';
-import { MouseEvent as MouseEvent_2 } from 'react';
-import { default as React_2 } from 'react';
-import { ReactElement } from 'react';
-import { ReactNode } from 'react';
-import { Ref } from 'react';
-import type { SectionProps } from '@atlaskit/menu';
-import type { SectionProps as SectionProps_2 } from '@atlaskit/menu/types';
-import type { TriggerProps } from '@atlaskit/popup/types';
-
-// @public (undocumented)
-export interface CustomTriggerProps<TriggerElement extends HTMLElement = HTMLElement> extends Omit<TriggerProps, 'ref'> {
-    isSelected?: boolean;
-    onClick?: (e: KeyboardEvent_2 | MouseEvent_2) => void;
-    testId?: string;
-    triggerRef: Ref<TriggerElement>;
-}
-
-// @public
-export const DropdownItem: React_2.ForwardRefExoticComponent<DropdownItemProps & React_2.RefAttributes<HTMLElement>>;
-
-// @public
-export const DropdownItemCheckbox: ({ children, defaultSelected, description, id, isDisabled, isSelected, onClick: providedOnClick, shouldDescriptionWrap, shouldTitleWrap, testId, ...rest }: DropdownItemCheckboxProps) => JSX.Element;
-
-// @public
-export const DropdownItemCheckboxGroup: ({ children, hasSeparator, id, isList, isScrollable, overrides, testId, title, ...rest }: DropdownItemCheckboxGroupProps) => JSX.Element;
-
-// @public (undocumented)
-interface DropdownItemCheckboxGroupProps extends SectionProps {
-    id: string;
-}
-
-// @public (undocumented)
-interface DropdownItemCheckboxProps {
-    children: React.ReactNode;
-    defaultSelected?: boolean;
-    description?: JSX.Element | string;
-    id: string;
-    isDisabled?: boolean;
-    isSelected?: boolean;
-    onClick?: (e: KeyboardEvent_2 | MouseEvent_2) => void;
-    shouldDescriptionWrap?: boolean;
-    shouldTitleWrap?: boolean;
-    testId?: string;
-    title?: string;
-}
-
-export { DropdownItemGroup }
-
-// @public (undocumented)
-export interface DropdownItemProps {
-    children: React.ReactNode;
-    component?: CustomItemProps['component'];
-    description?: JSX.Element | string;
-    elemAfter?: React.ReactNode;
-    elemBefore?: React.ReactNode;
-    href?: string;
-    isDisabled?: boolean;
-    isSelected?: boolean;
-    onClick?: (e: KeyboardEvent_2 | MouseEvent_2) => void;
-    rel?: string;
-    shouldDescriptionWrap?: boolean;
-    shouldTitleWrap?: boolean;
-    target?: string;
-    testId?: string;
-    title?: string;
-}
-
-// @public
-export const DropdownItemRadio: ({ children, defaultSelected, testId, id, title, description, isDisabled, isSelected, onClick: providedOnClick, shouldDescriptionWrap, shouldTitleWrap, ...rest }: DropdownItemRadioProps) => JSX.Element;
-
-// @public
-export const DropdownItemRadioGroup: ({ children, hasSeparator, id, isList, isScrollable, overrides, testId, title, ...rest }: DropdownItemRadioGroupProps) => JSX.Element;
-
-// @public (undocumented)
-interface DropdownItemRadioGroupProps extends SectionProps {
-    // (undocumented)
-    id: string;
-}
-
-// @public (undocumented)
-interface DropdownItemRadioProps {
-    children: React.ReactNode;
-    defaultSelected?: boolean;
-    description?: JSX.Element | string;
-    id: string;
-    isDisabled?: boolean;
-    isSelected?: boolean;
-    onClick?: (e: KeyboardEvent_2 | MouseEvent_2) => void;
-    shouldDescriptionWrap?: boolean;
-    shouldTitleWrap?: boolean;
-    testId?: string;
-    title?: string;
-}
-
-// @public
-const DropdownMenu: <T extends HTMLElement = HTMLElement>({ autoFocus, children, defaultOpen, isLoading, isOpen, onOpenChange, placement, shouldFlip, shouldRenderToParent, spacing, statusLabel, testId, trigger, zIndex, }: DropdownMenuProps<T>) => JSX.Element;
-export default DropdownMenu;
-
-// @public (undocumented)
-export interface DropdownMenuGroupProps extends SectionProps_2 {
-}
-
-// @public (undocumented)
-export interface DropdownMenuProps<TriggerElement extends HTMLElement = HTMLElement> {
-    appearance?: 'default' | 'tall';
-    autoFocus?: boolean;
-    children?: ReactNode;
-    defaultOpen?: boolean;
-    isLoading?: boolean;
-    isOpen?: boolean;
-    onOpenChange?: (args: OnOpenChangeArgs) => void;
-    placement?: Placement;
-    shouldFlip?: boolean;
-    shouldRenderToParent?: boolean;
-    spacing?: Extract<MenuGroupProps['spacing'], 'compact' | 'cozy'>;
-    statusLabel?: string;
-    testId?: string;
-    trigger?: ((triggerButtonProps: CustomTriggerProps<TriggerElement>) => ReactElement) | string;
-    zIndex?: number;
-}
-
-// @public (undocumented)
-export interface OnOpenChangeArgs {
-    // (undocumented)
-    event: KeyboardEvent_2 | MouseEvent_2;
-    // (undocumented)
-    isOpen: boolean;
-}
-
-// @public (undocumented)
-type Placement = 'auto' | 'auto-end' | 'auto-start' | 'bottom' | 'bottom-end' | 'bottom-start' | 'left' | 'left-end' | 'left-start' | 'right' | 'right-end' | 'right-start' | 'top' | 'top-end' | 'top-start';
-
-// (No @packageDocumentation comment for this package)
-
-```