diff --git a/.changeset/sixty-keys-perform.md b/.changeset/sixty-keys-perform.md new file mode 100644 index 00000000000..e52b5b7b231 --- /dev/null +++ b/.changeset/sixty-keys-perform.md @@ -0,0 +1,5 @@ +--- +"@primer/react": patch +--- + +fix: ActionBar overflow menu not closing on select diff --git a/package-lock.json b/package-lock.json index a8504a0d680..bdb5af11342 100644 --- a/package-lock.json +++ b/package-lock.json @@ -81,7 +81,7 @@ "react-dom": "^18.3.1" }, "devDependencies": { - "@primer/react": "38.10.0", + "@primer/react": "38.11.0", "@primer/styled-react": "1.0.3", "@types/react": "^18.3.11", "@types/react-dom": "^18.3.0", @@ -95,7 +95,7 @@ "name": "example-nextjs", "version": "0.0.0", "dependencies": { - "@primer/react": "38.10.0", + "@primer/react": "38.11.0", "@primer/styled-react": "1.0.3", "next": "^16.1.5", "react": "^19.2.0", @@ -138,7 +138,7 @@ "version": "0.0.0", "dependencies": { "@primer/octicons-react": "^19.21.0", - "@primer/react": "38.10.0", + "@primer/react": "38.11.0", "@primer/styled-react": "1.0.3", "clsx": "^2.1.1", "next": "^16.1.5", @@ -27004,7 +27004,7 @@ }, "packages/react": { "name": "@primer/react", - "version": "38.10.0", + "version": "38.11.0", "license": "MIT", "dependencies": { "@github/mini-throttle": "^2.1.1", diff --git a/packages/react/src/ActionBar/ActionBar.stories.tsx b/packages/react/src/ActionBar/ActionBar.stories.tsx index 06cb18045dd..7155f8624d9 100644 --- a/packages/react/src/ActionBar/ActionBar.stories.tsx +++ b/packages/react/src/ActionBar/ActionBar.stories.tsx @@ -67,7 +67,11 @@ export const Default = () => ( - + alert('Task List clicked')} + > ) diff --git a/packages/react/src/ActionBar/ActionBar.tsx b/packages/react/src/ActionBar/ActionBar.tsx index 4bb9d6e2ec4..1c2fb0da71a 100644 --- a/packages/react/src/ActionBar/ActionBar.tsx +++ b/packages/react/src/ActionBar/ActionBar.tsx @@ -3,11 +3,9 @@ import React, {useState, useCallback, useRef, forwardRef, useId} from 'react' import {KebabHorizontalIcon} from '@primer/octicons-react' import {ActionList, type ActionListItemProps} from '../ActionList' import useIsomorphicLayoutEffect from '../utils/useIsomorphicLayoutEffect' -import {useOnEscapePress} from '../hooks/useOnEscapePress' import type {ResizeObserverEntry} from '../hooks/useResizeObserver' import {useResizeObserver} from '../hooks/useResizeObserver' -import {useOnOutsideClick} from '../hooks/useOnOutsideClick' import type {IconButtonProps} from '../Button' import {IconButton} from '../Button' import {ActionMenu} from '../ActionMenu' @@ -322,8 +320,6 @@ export const ActionBar: React.FC> = prop if (!Number.isNaN(parsed)) setComputedGap(parsed) }, [gap]) const moreMenuRef = useRef(null) - const moreMenuBtnRef = useRef(null) - const containerRef = React.useRef(null) useResizeObserver((resizeObserverEntries: ResizeObserverEntry[]) => { const navWidth = resizeObserverEntries[0].contentRect.width @@ -343,29 +339,6 @@ export const ActionBar: React.FC> = prop [menuItemIds], ) - const [isWidgetOpen, setIsWidgetOpen] = useState(false) - - const closeOverlay = React.useCallback(() => { - setIsWidgetOpen(false) - }, [setIsWidgetOpen]) - - const focusOnMoreMenuBtn = React.useCallback(() => { - moreMenuBtnRef.current?.focus() - }, []) - - useOnEscapePress( - (event: KeyboardEvent) => { - if (isWidgetOpen) { - event.preventDefault() - closeOverlay() - focusOnMoreMenuBtn() - } - }, - [isWidgetOpen], - ) - - useOnOutsideClick({onClickOutside: closeOverlay, containerRef, ignoreClickRefs: [moreMenuBtnRef]}) - useFocusZone({ containerRef: listRef, bindKeys: FocusKeys.ArrowHorizontal | FocusKeys.HomeAndEnd, @@ -415,11 +388,8 @@ export const ActionBar: React.FC> = prop return ( ) => { - closeOverlay() - focusOnMoreMenuBtn() - typeof onClick === 'function' && onClick(event) + onSelect={event => { + typeof onClick === 'function' && onClick(event as React.MouseEvent) }} disabled={disabled} > @@ -469,8 +439,6 @@ export const ActionBar: React.FC> = prop { - closeOverlay() - focusOnMoreMenuBtn() typeof onClick === 'function' && onClick(event as React.MouseEvent) }} disabled={disabled}