Support overflow scrolling in ActionMenu (#3926)

* support overflow scrolling when maxHeight is set

* pass overflow behavior in as a prop

* only set overflow if prop is provided

* changeset

* update snapshot

* keep overflow hidden as default style

Author: strackoverflow

.changeset/ninety-brooms-speak.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+Allow overflow scrolling to be controlled via an optional `overflow` property on Overlay

src/ActionMenu/ActionMenu.examples.stories.tsx

@@ -340,6 +340,23 @@ export const OnRightSide = () => (
   </ActionMenu>
 )
 
+export const SettingMaxHeight = () => {
+  return (
+    <ActionMenu>
+      <ActionMenu.Button>Open menu</ActionMenu.Button>
+      <ActionMenu.Overlay width="auto" maxHeight="large" overflow="auto">
+        <ActionList>
+          {Array.from({length: 100}, (_, i) => (
+            <ActionList.Item key={`item-${i}`} onSelect={() => alert(`Item ${i + 1} clicked`)}>
+              Item {i + 1}
+            </ActionList.Item>
+          ))}
+        </ActionList>
+      </ActionMenu.Overlay>
+    </ActionMenu>
+  )
+}
+
 export const OnlyInactiveItems = () => (
   <ActionMenu>
     <ActionMenu.Button inactive>Open menu</ActionMenu.Button>

src/Overlay/Overlay.tsx

@@ -17,6 +17,7 @@ type StyledOverlayProps = {
   maxHeight?: keyof Omit<typeof heightMap, 'auto' | 'initial'>
   maxWidth?: keyof Omit<typeof widthMap, 'auto'>
   visibility?: 'visible' | 'hidden'
+  overflow?: 'auto' | 'hidden' | 'scroll' | 'visible'
   anchorSide?: AnchorSide
 } & SxProp
 
@@ -64,7 +65,7 @@ const StyledOverlay = styled.div<StyledOverlayProps>`
   max-height: ${props => props.maxHeight && heightMap[props.maxHeight]};
   width: ${props => widthMap[props.width || 'auto']};
   border-radius: 12px;
-  overflow: hidden;
+  overflow: ${props => (props.overflow ? props.overflow : 'hidden')};
   animation: overlay-appear ${animationDuration}ms ${get('animation.easeOutCubic')};
 
   @keyframes overlay-appear {