From b2d4526f9f03422346245583b320e09996c4a5be Mon Sep 17 00:00:00 2001
From: Marie Lucca <francinelucca@github.com>
Date: Fri, 1 Nov 2024 13:25:42 -0400
Subject: [PATCH 1/4] feat(AnchoredOverlay): allow overlay to reflow

---
 .../AnchoredOverlay/AnchoredOverlay.docs.json |  6 +++++
 .../AnchoredOverlay.features.stories.tsx      | 27 +++++++++++++------
 .../AnchoredOverlay.stories.tsx               |  7 +++--
 .../src/AnchoredOverlay/AnchoredOverlay.tsx   |  8 +++++-
 packages/react/src/Overlay/Overlay.test.tsx   | 14 ----------
 packages/react/src/Overlay/Overlay.tsx        |  6 ++---
 6 files changed, 39 insertions(+), 29 deletions(-)

diff --git a/packages/react/src/AnchoredOverlay/AnchoredOverlay.docs.json b/packages/react/src/AnchoredOverlay/AnchoredOverlay.docs.json
index d8683ed5dc1..1cb80dfa148 100644
--- a/packages/react/src/AnchoredOverlay/AnchoredOverlay.docs.json
+++ b/packages/react/src/AnchoredOverlay/AnchoredOverlay.docs.json
@@ -89,6 +89,12 @@
       "type": "string",
       "defaultValue": "",
       "description": "Class name for custom styling."
+    },
+    {
+      "name": "preventOverflow",
+      "type": "boolean",
+      "defaultValue": "true",
+      "description": "Determines if the Overlay width should be adjusted responsively if there is not enough space to display the Overlay. If `preventOverflow` is set to `false`, the Overlay will be displayed at the maximum width that fits within the viewport."
     }
   ]
 }
diff --git a/packages/react/src/AnchoredOverlay/AnchoredOverlay.features.stories.tsx b/packages/react/src/AnchoredOverlay/AnchoredOverlay.features.stories.tsx
index 3f914def820..bddbdace866 100644
--- a/packages/react/src/AnchoredOverlay/AnchoredOverlay.features.stories.tsx
+++ b/packages/react/src/AnchoredOverlay/AnchoredOverlay.features.stories.tsx
@@ -18,7 +18,7 @@ export default {
 } as Meta
 
 const hoverCard = (
-  <Stack gap="condensed" style={{minWidth: '320px', padding: '16px'}}>
+  <Stack gap="condensed" style={{padding: '16px'}}>
     <Stack direction="horizontal" gap="condensed" justify="space-between">
       <Avatar src="https://avatars.githubusercontent.com/u/92997159?v=4" size={48} />
       <Button size="small">Follow</Button>
@@ -103,8 +103,9 @@ export const CustomAnchorId = () => {
       onClose={() => setOpen(false)}
       renderAnchor={props => <Button {...props}>Button</Button>}
       anchorId="my-custom-anchor-id"
-      overlayProps={{role: 'dialog', 'aria-modal': true, 'aria-label': 'User Card Overlay'}}
+      overlayProps={{role: 'dialog', 'aria-modal': true, 'aria-label': 'User Card Overlay', sx: {minWidth: '320px'}}}
       focusZoneSettings={{disabled: true}}
+      preventOverflow={false}
     >
       <Box sx={{width: '100%', height: '100%', display: 'flex', flexDirection: 'column'}}>{hoverCard}</Box>
     </AnchoredOverlay>
@@ -121,8 +122,9 @@ export const Height = () => {
       onClose={() => setOpen(false)}
       renderAnchor={props => <Button {...props}>Button</Button>}
       height="large"
-      overlayProps={{role: 'dialog', 'aria-modal': true, 'aria-label': 'User Card Overlay'}}
+      overlayProps={{role: 'dialog', 'aria-modal': true, 'aria-label': 'User Card Overlay', sx: {minWidth: '320px'}}}
       focusZoneSettings={{disabled: true}}
+      preventOverflow={false}
     >
       <Box sx={{width: '100%', height: '100%', display: 'flex', flexDirection: 'column'}}>{hoverCard}</Box>
     </AnchoredOverlay>
@@ -139,8 +141,9 @@ export const Width = () => {
       onClose={() => setOpen(false)}
       renderAnchor={props => <Button {...props}>Button</Button>}
       width="large"
-      overlayProps={{role: 'dialog', 'aria-modal': true, 'aria-label': 'User Card Overlay'}}
+      overlayProps={{role: 'dialog', 'aria-modal': true, 'aria-label': 'User Card Overlay', sx: {minWidth: '320px'}}}
       focusZoneSettings={{disabled: true}}
+      preventOverflow={false}
     >
       <Box
         sx={{
@@ -170,8 +173,9 @@ export const AnchorAlignment = () => {
         </Button>
       )}
       align="center"
-      overlayProps={{role: 'dialog', 'aria-modal': true, 'aria-label': 'User Card Overlay'}}
+      overlayProps={{role: 'dialog', 'aria-modal': true, 'aria-label': 'User Card Overlay', sx: {minWidth: '320px'}}}
       focusZoneSettings={{disabled: true}}
+      preventOverflow={false}
     >
       <Box sx={{width: '100%', height: '100%', display: 'flex', flexDirection: 'column'}}>{hoverCard}</Box>
     </AnchoredOverlay>
@@ -188,8 +192,9 @@ export const AnchorSide = () => {
       onClose={() => setOpen(false)}
       renderAnchor={props => <Button {...props}>Button</Button>}
       side="outside-right"
-      overlayProps={{role: 'dialog', 'aria-modal': true, 'aria-label': 'User Card Overlay'}}
+      overlayProps={{role: 'dialog', 'aria-modal': true, 'aria-label': 'User Card Overlay', sx: {minWidth: '320px'}}}
       focusZoneSettings={{disabled: true}}
+      preventOverflow={false}
     >
       <Box sx={{width: '100%', height: '100%', display: 'flex', flexDirection: 'column'}}>{hoverCard}</Box>
     </AnchoredOverlay>
@@ -206,8 +211,9 @@ export const OffsetPositionFromAnchor = () => {
       onClose={() => setOpen(false)}
       renderAnchor={props => <Button {...props}>Button</Button>}
       anchorOffset={100}
-      overlayProps={{role: 'dialog', 'aria-modal': true, 'aria-label': 'User Card Overlay'}}
+      overlayProps={{role: 'dialog', 'aria-modal': true, 'aria-label': 'User Card Overlay', sx: {minWidth: '320px'}}}
       focusZoneSettings={{disabled: true}}
+      preventOverflow={false}
     >
       <Box sx={{width: '100%', height: '100%', display: 'flex', flexDirection: 'column'}}>{hoverCard}</Box>
     </AnchoredOverlay>
@@ -224,8 +230,9 @@ export const OffsetAlignmentFromAnchor = () => {
       onClose={() => setOpen(false)}
       renderAnchor={props => <Button {...props}>Button</Button>}
       alignmentOffset={100}
-      overlayProps={{role: 'dialog', 'aria-modal': true, 'aria-label': 'User Card Overlay'}}
+      overlayProps={{role: 'dialog', 'aria-modal': true, 'aria-label': 'User Card Overlay', sx: {minWidth: '320px'}}}
       focusZoneSettings={{disabled: true}}
+      preventOverflow={false}
     >
       <Box sx={{width: '100%', height: '100%', display: 'flex', flexDirection: 'column'}}>{hoverCard}</Box>
     </AnchoredOverlay>
@@ -245,6 +252,7 @@ export const FocusTrapOverrides = () => {
       focusTrapSettings={{initialFocusRef}}
       overlayProps={{role: 'dialog', 'aria-modal': true, 'aria-label': 'Focus Trap Demo Overlay'}}
       focusZoneSettings={{disabled: true}}
+      preventOverflow={false}
     >
       <Button>First button</Button>
       <Button ref={initialFocusRef}>Initial focus</Button>
@@ -263,6 +271,7 @@ export const FocusZoneOverrides = () => {
       renderAnchor={props => <Button {...props}>Button</Button>}
       focusZoneSettings={{bindKeys: FocusKeys.JK}}
       overlayProps={{role: 'dialog', 'aria-modal': true, 'aria-label': 'Focus Zone Demo Overlay'}}
+      preventOverflow={false}
     >
       <p>
         Use <kbd>J</kbd> and <kbd>K</kbd> keys to move focus.
@@ -289,8 +298,10 @@ export const OverlayPropsOverrides = () => {
         role: 'dialog',
         'aria-modal': true,
         'aria-label': 'User Card Overlay',
+        sx: {minWidth: '320px'},
       }}
       focusZoneSettings={{disabled: true}}
+      preventOverflow={false}
     >
       <div>Overlay props have been overridden to set: </div>
       <pre>
diff --git a/packages/react/src/AnchoredOverlay/AnchoredOverlay.stories.tsx b/packages/react/src/AnchoredOverlay/AnchoredOverlay.stories.tsx
index 84ec0727c24..54945b9464d 100644
--- a/packages/react/src/AnchoredOverlay/AnchoredOverlay.stories.tsx
+++ b/packages/react/src/AnchoredOverlay/AnchoredOverlay.stories.tsx
@@ -15,7 +15,7 @@ export default {
 } as Meta
 
 const hoverCard = (
-  <Stack gap="condensed" style={{minWidth: '320px', padding: '16px'}}>
+  <Stack gap="condensed" style={{padding: '16px'}}>
     <Stack direction="horizontal" gap="condensed" justify="space-between">
       <Avatar src="https://avatars.githubusercontent.com/u/92997159?v=4" size={48} />
       <Button size="small">Follow</Button>
@@ -53,8 +53,9 @@ export const Default = () => {
       onOpen={() => setOpen(true)}
       onClose={() => setOpen(false)}
       renderAnchor={props => <Button {...props}>Button</Button>}
-      overlayProps={{role: 'dialog', 'aria-modal': true, 'aria-label': 'User Card Overlay'}}
+      overlayProps={{role: 'dialog', 'aria-modal': true, 'aria-label': 'User Card Overlay', sx: {minWidth: '320px'}}}
       focusZoneSettings={{disabled: true}}
+      preventOverflow={false}
     >
       {hoverCard}
     </AnchoredOverlay>
@@ -83,9 +84,11 @@ export const Playground = (args: Args) => {
         role: 'dialog',
         'aria-modal': true,
         'aria-label': 'User Card Overlay',
+        sx: {minWidth: '320px'},
       }}
       side={args.side}
       focusZoneSettings={{disabled: true}}
+      preventOverflow={false}
     >
       {hoverCard}
     </AnchoredOverlay>
diff --git a/packages/react/src/AnchoredOverlay/AnchoredOverlay.tsx b/packages/react/src/AnchoredOverlay/AnchoredOverlay.tsx
index bfc08cf041a..e046e301938 100644
--- a/packages/react/src/AnchoredOverlay/AnchoredOverlay.tsx
+++ b/packages/react/src/AnchoredOverlay/AnchoredOverlay.tsx
@@ -84,6 +84,11 @@ interface AnchoredOverlayBaseProps extends Pick<OverlayProps, 'height' | 'width'
    * Optional className to be added to the overlay component.
    */
   className?: string
+  /**
+   * preventOverflow Optional. The Overlay width will be adjusted responsively if there is not enough space to display the Overlay.
+   * If `preventOverflow` is `true`, the width of the `Overlay` will not be adjusted.
+   */
+  preventOverflow?: boolean
 }
 
 export type AnchoredOverlayProps = AnchoredOverlayBaseProps &
@@ -112,6 +117,7 @@ export const AnchoredOverlay: React.FC<React.PropsWithChildren<AnchoredOverlayPr
   alignmentOffset,
   anchorOffset,
   className,
+  preventOverflow = true,
 }) => {
   const anchorRef = useProvidedRefOrCreate(externalAnchorRef)
   const [overlayRef, updateOverlayRef] = useRenderForcingRef<HTMLDivElement>()
@@ -198,7 +204,7 @@ export const AnchoredOverlay: React.FC<React.PropsWithChildren<AnchoredOverlayPr
           left={position?.left || 0}
           anchorSide={position?.anchorSide}
           className={className}
-          preventOverflow={true}
+          preventOverflow={preventOverflow}
           {...overlayProps}
         >
           {children}
diff --git a/packages/react/src/Overlay/Overlay.test.tsx b/packages/react/src/Overlay/Overlay.test.tsx
index 7c8c90b953a..61b6fbe6073 100644
--- a/packages/react/src/Overlay/Overlay.test.tsx
+++ b/packages/react/src/Overlay/Overlay.test.tsx
@@ -313,18 +313,4 @@ describe('Overlay', () => {
     const container = getByRole('none')
     expect(container).toHaveAttribute('data-reflow-container')
   })
-
-  it('should not have `data-reflow-container` if FF is enabled but the overlay is above `medium`', async () => {
-    const user = userEvent.setup()
-    const {getByRole} = render(
-      <FeatureFlags flags={{primer_react_overlay_overflow: true}}>
-        <TestComponent width="large" />
-      </FeatureFlags>,
-    )
-
-    await user.click(getByRole('button', {name: 'open overlay'}))
-
-    const container = getByRole('none')
-    expect(container).not.toHaveAttribute('data-reflow-container')
-  })
 })
diff --git a/packages/react/src/Overlay/Overlay.tsx b/packages/react/src/Overlay/Overlay.tsx
index 8b9579d99eb..ce69ef27f5c 100644
--- a/packages/react/src/Overlay/Overlay.tsx
+++ b/packages/react/src/Overlay/Overlay.tsx
@@ -139,7 +139,7 @@ type OwnOverlayProps = Merge<StyledOverlayProps, BaseOverlayProps>
  * @param bottom Optional. Vertical bottom position of the overlay, relative to its closest positioned ancestor (often its `Portal`).
  * @param position Optional. Sets how an element is positioned in a document. Defaults to `absolute` positioning.
  * @param portalContainerName Optional. The name of the portal container to render the Overlay into.
- * @param preventOverflow Optional. The Overlay width will be adjusted responsively if width is `auto`, `medium` or lower and there is not enough space to display the Overlay. If `preventOverflow` is `true`, the width of the `Overlay` will not be adjusted.
+ * @param preventOverflow Optional. The Overlay width will be adjusted responsively if there is not enough space to display the Overlay. If `preventOverflow` is `true`, the width of the `Overlay` will not be adjusted.
  */
 const Overlay = React.forwardRef<HTMLDivElement, OwnOverlayProps>(
   (
@@ -207,10 +207,8 @@ const Overlay = React.forwardRef<HTMLDivElement, OwnOverlayProps>(
 
     // To be backwards compatible with the old Overlay, we need to set the left prop if x-position is not specified
     const leftPosition: React.CSSProperties = left === undefined && right === undefined ? {left: 0} : {left}
-    const reflowSize = ['xsmall', 'small', 'medium', 'auto'].includes(width)
 
     const enabled = useFeatureFlag('primer_react_overlay_overflow')
-    const overflow = enabled && reflowSize ? true : undefined
 
     return (
       <Portal containerName={portalContainerName}>
@@ -231,7 +229,7 @@ const Overlay = React.forwardRef<HTMLDivElement, OwnOverlayProps>(
               ...styleFromProps,
             } as React.CSSProperties
           }
-          data-reflow-container={overflow || (reflowSize && !preventOverflow) ? true : undefined}
+          data-reflow-container={enabled || !preventOverflow ? true : undefined}
         />
       </Portal>
     )

From 3ead313cde7d0fc2e1ad1169c028f5f1b01c1678 Mon Sep 17 00:00:00 2001
From: Marie Lucca <40550942+francinelucca@users.noreply.github.com>
Date: Fri, 1 Nov 2024 13:28:18 -0400
Subject: [PATCH 2/4] Create thick-pugs-hammer.md

---
 .changeset/thick-pugs-hammer.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/thick-pugs-hammer.md

diff --git a/.changeset/thick-pugs-hammer.md b/.changeset/thick-pugs-hammer.md
new file mode 100644
index 00000000000..d6872b6f4ff
--- /dev/null
+++ b/.changeset/thick-pugs-hammer.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": minor
+---
+
+feat(AnchoredOverlay): allow overlay to reflow

From cab6aafc10ac87a4a98f53544fbd3882bdbbab6c Mon Sep 17 00:00:00 2001
From: Marie Lucca <francinelucca@github.com>
Date: Mon, 4 Nov 2024 15:50:28 -0500
Subject: [PATCH 3/4] test(Overlay): overlay overflow on by default

---
 packages/react/src/FeatureFlags/DefaultFeatureFlags.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react/src/FeatureFlags/DefaultFeatureFlags.ts b/packages/react/src/FeatureFlags/DefaultFeatureFlags.ts
index b10d4e35447..4dbe63e20d1 100644
--- a/packages/react/src/FeatureFlags/DefaultFeatureFlags.ts
+++ b/packages/react/src/FeatureFlags/DefaultFeatureFlags.ts
@@ -6,5 +6,5 @@ export const DefaultFeatureFlags = FeatureFlagScope.create({
   primer_react_css_modules_ga: false,
   primer_react_action_list_item_as_button: false,
   primer_react_select_panel_with_modern_action_list: false,
-  primer_react_overlay_overflow: false,
+  primer_react_overlay_overflow: true,
 })

From e78fd961bc820feabe88ceaf264babe2b1f441fc Mon Sep 17 00:00:00 2001
From: Marie Lucca <francinelucca@github.com>
Date: Tue, 5 Nov 2024 16:18:43 -0500
Subject: [PATCH 4/4] test(Overlay): default FF to false (turned on for test
 only)

---
 packages/react/src/FeatureFlags/DefaultFeatureFlags.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react/src/FeatureFlags/DefaultFeatureFlags.ts b/packages/react/src/FeatureFlags/DefaultFeatureFlags.ts
index 4dbe63e20d1..b10d4e35447 100644
--- a/packages/react/src/FeatureFlags/DefaultFeatureFlags.ts
+++ b/packages/react/src/FeatureFlags/DefaultFeatureFlags.ts
@@ -6,5 +6,5 @@ export const DefaultFeatureFlags = FeatureFlagScope.create({
   primer_react_css_modules_ga: false,
   primer_react_action_list_item_as_button: false,
   primer_react_select_panel_with_modern_action_list: false,
-  primer_react_overlay_overflow: true,
+  primer_react_overlay_overflow: false,
 })