From e3bd64efc73c420493c742122e6740ad3c3f8f81 Mon Sep 17 00:00:00 2001
From: Ian Sanders <iansan5653@github.com>
Date: Wed, 6 Sep 2023 14:13:42 +0000
Subject: [PATCH 1/2] Deduplicate `ActionMenu.tsx`

---
 src/ActionMenu.tsx            | 138 ----------------------------------
 src/ActionMenu/ActionMenu.tsx |   9 ++-
 2 files changed, 7 insertions(+), 140 deletions(-)
 delete mode 100644 src/ActionMenu.tsx

diff --git a/src/ActionMenu.tsx b/src/ActionMenu.tsx
deleted file mode 100644
index f2494987c16..00000000000
--- a/src/ActionMenu.tsx
+++ /dev/null
@@ -1,138 +0,0 @@
-import React from 'react'
-import {TriangleDownIcon} from '@primer/octicons-react'
-import {AnchoredOverlay, AnchoredOverlayProps} from './AnchoredOverlay'
-import {OverlayProps} from './Overlay'
-import {useProvidedRefOrCreate, useProvidedStateOrCreate, useMenuKeyboardNavigation} from './hooks'
-import {Divider} from './ActionList/Divider'
-import {ActionListContainerContext} from './ActionList/ActionListContainerContext'
-import {Button, ButtonProps} from './Button'
-import {useId} from './hooks/useId'
-import {MandateProps} from './utils/types'
-import {ForwardRefComponent as PolymorphicForwardRefComponent} from './utils/polymorphic'
-
-export type MenuContextProps = Pick<
-  AnchoredOverlayProps,
-  'anchorRef' | 'renderAnchor' | 'open' | 'onOpen' | 'anchorId'
-> & {
-  onClose?: (gesture: 'anchor-click' | 'click-outside' | 'escape' | 'tab') => void
-}
-const MenuContext = React.createContext<MenuContextProps>({renderAnchor: null, open: false})
-
-export type ActionMenuProps = {
-  /**
-   * Recommended: `ActionMenu.Button` or `ActionMenu.Anchor` with `ActionMenu.Overlay`
-   */
-  children: React.ReactElement[] | React.ReactElement
-
-  /**
-   * If defined, will control the open/closed state of the overlay. Must be used in conjunction with `onOpenChange`.
-   */
-  open?: boolean
-
-  /**
-   * If defined, will control the open/closed state of the overlay. Must be used in conjunction with `open`.
-   */
-  onOpenChange?: (s: boolean) => void
-} & Pick<AnchoredOverlayProps, 'anchorRef'>
-
-const Menu: React.FC<React.PropsWithChildren<ActionMenuProps>> = ({
-  anchorRef: externalAnchorRef,
-  open,
-  onOpenChange,
-  children,
-}: ActionMenuProps) => {
-  const [combinedOpenState, setCombinedOpenState] = useProvidedStateOrCreate(open, onOpenChange, false)
-  const onOpen = React.useCallback(() => setCombinedOpenState(true), [setCombinedOpenState])
-  const onClose = React.useCallback(() => setCombinedOpenState(false), [setCombinedOpenState])
-
-  const anchorRef = useProvidedRefOrCreate(externalAnchorRef)
-  const anchorId = useId()
-  let renderAnchor: AnchoredOverlayProps['renderAnchor'] = null
-
-  // 🚨 Hack for good API!
-  // we strip out Anchor from children and pass it to AnchoredOverlay to render
-  // with additional props for accessibility
-  const contents = React.Children.map(children, child => {
-    if (child.type === MenuButton || child.type === Anchor) {
-      renderAnchor = anchorProps => React.cloneElement(child, anchorProps)
-      return null
-    }
-    return child
-  })
-
-  return (
-    <MenuContext.Provider value={{anchorRef, renderAnchor, anchorId, open: combinedOpenState, onOpen, onClose}}>
-      {contents}
-    </MenuContext.Provider>
-  )
-}
-
-export type ActionMenuAnchorProps = {children: React.ReactElement}
-const Anchor = React.forwardRef<HTMLElement, ActionMenuAnchorProps>(({children, ...anchorProps}, anchorRef) => {
-  return React.cloneElement(children, {...anchorProps, ref: anchorRef})
-})
-
-/** this component is syntactical sugar 🍭 */
-export type ActionMenuButtonProps = ButtonProps
-const MenuButton = React.forwardRef(({...props}, anchorRef) => {
-  return (
-    <Anchor ref={anchorRef}>
-      <Button type="button" trailingAction={TriangleDownIcon} {...props} />
-    </Anchor>
-  )
-}) as PolymorphicForwardRefComponent<'button', ActionMenuButtonProps>
-
-type MenuOverlayProps = Partial<OverlayProps> &
-  Pick<AnchoredOverlayProps, 'align'> & {
-    /**
-     * Recommended: `ActionList`
-     */
-    children: React.ReactNode
-  }
-const Overlay: React.FC<React.PropsWithChildren<MenuOverlayProps>> = ({
-  children,
-  align = 'start',
-  'aria-labelledby': ariaLabelledby,
-  ...overlayProps
-}) => {
-  // we typecast anchorRef as required instead of optional
-  // because we know that we're setting it in context in Menu
-  const {anchorRef, renderAnchor, anchorId, open, onOpen, onClose} = React.useContext(MenuContext) as MandateProps<
-    MenuContextProps,
-    'anchorRef'
-  >
-
-  const containerRef = React.useRef<HTMLDivElement>(null)
-  useMenuKeyboardNavigation(open, onClose, containerRef, anchorRef)
-
-  return (
-    <AnchoredOverlay
-      anchorRef={anchorRef}
-      renderAnchor={renderAnchor}
-      anchorId={anchorId}
-      open={open}
-      onOpen={onOpen}
-      onClose={onClose}
-      align={align}
-      overlayProps={overlayProps}
-      focusZoneSettings={{focusOutBehavior: 'wrap'}}
-    >
-      <div ref={containerRef}>
-        <ActionListContainerContext.Provider
-          value={{
-            container: 'ActionMenu',
-            listRole: 'menu',
-            listLabelledBy: ariaLabelledby || anchorId,
-            selectionAttribute: 'aria-checked', // Should this be here?
-            afterSelect: onClose,
-          }}
-        >
-          {children}
-        </ActionListContainerContext.Provider>
-      </div>
-    </AnchoredOverlay>
-  )
-}
-
-Menu.displayName = 'ActionMenu'
-export const ActionMenu = Object.assign(Menu, {Button: MenuButton, Anchor, Overlay, Divider})
diff --git a/src/ActionMenu/ActionMenu.tsx b/src/ActionMenu/ActionMenu.tsx
index 57495318a4a..3c8b898cf44 100644
--- a/src/ActionMenu/ActionMenu.tsx
+++ b/src/ActionMenu/ActionMenu.tsx
@@ -89,7 +89,12 @@ type MenuOverlayProps = Partial<OverlayProps> &
      */
     children: React.ReactNode
   }
-const Overlay: React.FC<React.PropsWithChildren<MenuOverlayProps>> = ({children, align = 'start', ...overlayProps}) => {
+const Overlay: React.FC<React.PropsWithChildren<MenuOverlayProps>> = ({
+  children,
+  align = 'start',
+  'aria-labelledby': ariaLabelledby,
+  ...overlayProps
+}) => {
   // we typecast anchorRef as required instead of optional
   // because we know that we're setting it in context in Menu
   const {anchorRef, renderAnchor, anchorId, open, onOpen, onClose} = React.useContext(MenuContext) as MandateProps<
@@ -117,7 +122,7 @@ const Overlay: React.FC<React.PropsWithChildren<MenuOverlayProps>> = ({children,
           value={{
             container: 'ActionMenu',
             listRole: 'menu',
-            listLabelledBy: anchorId,
+            listLabelledBy: ariaLabelledby || anchorId,
             selectionAttribute: 'aria-checked', // Should this be here?
             afterSelect: onClose,
           }}

From c72d65af88f8f8f1779a3b9e44d8de57a101a118 Mon Sep 17 00:00:00 2001
From: Ian Sanders <iansan5653@github.com>
Date: Thu, 7 Sep 2023 20:18:43 +0000
Subject: [PATCH 2/2] Retrigger actions