From b4b121ef797e90ca2a2c75e3c257a6f0ddc1f7d8 Mon Sep 17 00:00:00 2001
From: Kate Travers <8152930+ktravers@users.noreply.github.com>
Date: Thu, 6 Feb 2025 21:00:45 +0000
Subject: [PATCH] document prop in useOverlay hook

---
 content/guides/react/hooks/use-overlay.mdx | 20 +++++++++++---------
 1 file changed, 11 insertions(+), 9 deletions(-)

diff --git a/content/guides/react/hooks/use-overlay.mdx b/content/guides/react/hooks/use-overlay.mdx
index 2e70d67c6..3ee5bbab6 100644
--- a/content/guides/react/hooks/use-overlay.mdx
+++ b/content/guides/react/hooks/use-overlay.mdx
@@ -19,8 +19,8 @@ These behaviors include:
 ### Usage
 
 ```javascript live noinline
-const DemoOverlay = ({onClickOutside, initialFocusRef, returnFocusRef, ignoreClickRefs, onEscape, ...rest}) => {
-  const overlayProps = useOverlay({returnFocusRef, onEscape, ignoreClickRefs, onClickOutside, initialFocusRef})
+const DemoOverlay = ({onClickOutside, initialFocusRef, returnFocusRef, ignoreClickRefs, onEscape, preventFocusOnOpen, ...rest}) => {
+  const overlayProps = useOverlay({returnFocusRef, onEscape, ignoreClickRefs, onClickOutside, initialFocusRef, preventFocusOnOpen})
   return <Box height="200px" bg="green.4" {...overlayProps} {...rest} />
 }
 
@@ -41,6 +41,7 @@ const DemoComponent = () => {
           initialFocusRef={initialFocusRef}
           onEscape={closeOverlay}
           onClickOutside={closeOverlay}
+          preventFocusOnOpen={true}
         >
           <Button>Button One</Button>
           <Button ref={initialFocusRef}>Button Two</Button>
@@ -55,10 +56,11 @@ render(<DemoComponent />)
 
 #### UseOverlaySettings
 
-| Name            | Type                              | Required | Description                                                                                                                           |
-| :-------------- | :-------------------------------- | :------: | :------------------------------------------------------------------------------------------------------------------------------------ |
-| onEscapePress   | `function`                        | required | Function to call when user presses the Escape key                                                                                     |
-| onOutsideClick  | `function`                        | required | Function to call when user clicks outside of the overlay                                                                              |
-| ignoreClickRefs | `React.RefObject<HTMLElement> []` | optional | Refs to click clicks on in the `onOutsideClick` function, useful for ignoring clicks on elements that trigger the overlay visibility. |
-| initialFocusRef | `React.RefObject<HTMLElement>`    | optional | Ref to focus when overlay is mounted.                                                                                                 |
-| returnFocusRef  | `React.RefObject<HTMLElement>`    | required | Ref to focus when overlay is unmounted. Important for accessibility.                                                                  |
+| Name               | Type                              | Required | Description                                                                                                                           |
+| :----------------- | :-------------------------------- | :------: | :------------------------------------------------------------------------------------------------------------------------------------ |
+| onEscapePress      | `function`                        | required | Function to call when user presses the Escape key                                                                                     |
+| onOutsideClick     | `function`                        | required | Function to call when user clicks outside of the overlay                                                                              |
+| ignoreClickRefs    | `React.RefObject<HTMLElement> []` | optional | Refs to click clicks on in the `onOutsideClick` function, useful for ignoring clicks on elements that trigger the overlay visibility. |
+| initialFocusRef    | `React.RefObject<HTMLElement>`    | optional | Ref to focus when overlay is mounted.                                                                                                 |
+| returnFocusRef     | `React.RefObject<HTMLElement>`    | required | Ref to focus when overlay is unmounted. Important for accessibility.                                                                  |
+| preventFocusOnOpen | `boolean`                         | optional | When true, prevents focus when overlay is mounted, even if `initialFocusRef` is present.