From e33439ee3a5cbfba6af7249d2bedebad2d355516 Mon Sep 17 00:00:00 2001
From: Stephen Watkins <swatkins@easypost.com>
Date: Thu, 12 Dec 2024 17:19:28 -0500
Subject: [PATCH] feat(Menu,Select): use proper Overlay primitive (#1527)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## 📝 Changes

- Tooltips and Selects were using OverlayContainer instead of Overlay
which was causing them not to work right in modals and drawers

## ✅ Checklist

Easy UI has certain UX standards that must be met. In general,
non-trivial changes should meet the following criteria:

- [ ] ~Visuals match Design Specs in Figma~
- [ ] ~Stories accompany any component changes~
- [x] Code is in accordance with our style guide
- [ ] ~Design tokens are utilized~
- [ ] ~Unit tests accompany any component changes~
- [ ] ~TSDoc is written for any API surface area~
- [ ] ~Specs are up-to-date~
- [x] Console is free from warnings
- [x] No accessibility violations are reported
- [x] Cross-browser check is performed (Chrome, Safari, Firefox)
- [x] Changeset is added

~Strikethrough~ any items that are not applicable to this pull request.
---
 .changeset/selfish-mice-reflect.md         | 5 +++++
 easy-ui-react/src/Select/SelectOverlay.tsx | 6 +++---
 easy-ui-react/src/Tooltip/Tooltip.tsx      | 6 +++---
 3 files changed, 11 insertions(+), 6 deletions(-)
 create mode 100644 .changeset/selfish-mice-reflect.md

diff --git a/.changeset/selfish-mice-reflect.md b/.changeset/selfish-mice-reflect.md
new file mode 100644
index 000000000..908a021e3
--- /dev/null
+++ b/.changeset/selfish-mice-reflect.md
@@ -0,0 +1,5 @@
+---
+"@easypost/easy-ui": patch
+---
+
+fix(Select,Tooltip): use proper Overlay primitive
diff --git a/easy-ui-react/src/Select/SelectOverlay.tsx b/easy-ui-react/src/Select/SelectOverlay.tsx
index 54667a70e..bca1ea047 100644
--- a/easy-ui-react/src/Select/SelectOverlay.tsx
+++ b/easy-ui-react/src/Select/SelectOverlay.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import {
   DismissButton,
-  OverlayContainer,
+  Overlay,
   mergeProps,
   useListBox,
   usePopover,
@@ -68,7 +68,7 @@ function SelectOverlayContent() {
   } as React.CSSProperties;
 
   return (
-    <OverlayContainer>
+    <Overlay>
       <div {...underlayProps} className={styles.underlay} />
       <div
         {...mergeProps(popoverProps, { style })}
@@ -104,6 +104,6 @@ function SelectOverlayContent() {
         </div>
         <DismissButton onDismiss={selectState.close} />
       </div>
-    </OverlayContainer>
+    </Overlay>
   );
 }
diff --git a/easy-ui-react/src/Tooltip/Tooltip.tsx b/easy-ui-react/src/Tooltip/Tooltip.tsx
index 10f35f9ea..74e54aa78 100644
--- a/easy-ui-react/src/Tooltip/Tooltip.tsx
+++ b/easy-ui-react/src/Tooltip/Tooltip.tsx
@@ -6,7 +6,7 @@ import React, {
   useLayoutEffect,
 } from "react";
 import {
-  OverlayContainer,
+  Overlay,
   Placement,
   mergeProps,
   useOverlayPosition,
@@ -129,14 +129,14 @@ export function Tooltip(props: TooltipProps) {
         ref: triggerRef,
       })}
       {tooltipTriggerState.isOpen && (
-        <OverlayContainer>
+        <Overlay>
           <TooltipInner
             {...props}
             triggerRef={triggerRef}
             tooltipPropsFromTrigger={tooltipPropsFromTrigger}
             tooltipTriggerState={tooltipTriggerState}
           />
-        </OverlayContainer>
+        </Overlay>
       )}
     </>
   );