From a53e83348c69c79ba999d8ddde77225acf9d54e3 Mon Sep 17 00:00:00 2001
From: Stephen Watkins <swatkins@easypost.com>
Date: Mon, 23 Oct 2023 11:59:22 -0400
Subject: [PATCH] use product layout container for overlay

---
 easy-ui-react/src/ProductLayout/ProductLayout.module.scss  | 1 +
 easy-ui-react/src/ProductLayout/ProductLayout.tsx          | 7 +++++--
 .../src/ProductLayout/ProductLayoutSidebar.module.scss     | 2 +-
 easy-ui-react/src/ProductLayout/ProductLayoutSidebar.tsx   | 6 ++++--
 easy-ui-react/src/ProductLayout/context.ts                 | 3 ++-
 5 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/easy-ui-react/src/ProductLayout/ProductLayout.module.scss b/easy-ui-react/src/ProductLayout/ProductLayout.module.scss
index a16c47270..dfdf6da81 100644
--- a/easy-ui-react/src/ProductLayout/ProductLayout.module.scss
+++ b/easy-ui-react/src/ProductLayout/ProductLayout.module.scss
@@ -5,6 +5,7 @@
 .ProductLayout {
   @include component-token("product-shell", "sidebar-width", 216px);
   display: flex;
+  position: relative;
 }
 
 .body {
diff --git a/easy-ui-react/src/ProductLayout/ProductLayout.tsx b/easy-ui-react/src/ProductLayout/ProductLayout.tsx
index 0687e92c9..64b699ddd 100644
--- a/easy-ui-react/src/ProductLayout/ProductLayout.tsx
+++ b/easy-ui-react/src/ProductLayout/ProductLayout.tsx
@@ -1,4 +1,4 @@
-import React, { ReactNode, useMemo } from "react";
+import React, { ReactNode, useMemo, useRef } from "react";
 import { useOverlayTrigger } from "react-aria";
 import { useOverlayTriggerState } from "react-stately";
 import { ProductLayoutContent } from "./ProductLayoutContent";
@@ -33,6 +33,8 @@ export type ProductLayoutProps = {
 export function ProductLayout(props: ProductLayoutProps) {
   const { sidebar, header, content } = props;
 
+  const layoutRef = useRef<HTMLDivElement | null>(null);
+
   const state = useOverlayTriggerState({});
   const { triggerProps, overlayProps } = useOverlayTrigger(
     { type: "dialog" },
@@ -41,6 +43,7 @@ export function ProductLayout(props: ProductLayoutProps) {
 
   const context = useMemo(() => {
     return {
+      layoutRef,
       sidebarTriggerState: state,
       sidebarTriggerProps: triggerProps,
       sidebarOverlayProps: overlayProps,
@@ -49,7 +52,7 @@ export function ProductLayout(props: ProductLayoutProps) {
 
   return (
     <ProductLayoutContext.Provider value={context}>
-      <div className={styles.ProductLayout}>
+      <div className={styles.ProductLayout} ref={layoutRef}>
         {sidebar}
         <div className={styles.body}>
           {header}
diff --git a/easy-ui-react/src/ProductLayout/ProductLayoutSidebar.module.scss b/easy-ui-react/src/ProductLayout/ProductLayoutSidebar.module.scss
index 9fea263aa..c17a8c491 100644
--- a/easy-ui-react/src/ProductLayout/ProductLayoutSidebar.module.scss
+++ b/easy-ui-react/src/ProductLayout/ProductLayoutSidebar.module.scss
@@ -40,7 +40,7 @@
 }
 
 .overlay {
-  position: fixed;
+  position: absolute;
   z-index: 100;
   top: 0;
   left: 0;
diff --git a/easy-ui-react/src/ProductLayout/ProductLayoutSidebar.tsx b/easy-ui-react/src/ProductLayout/ProductLayoutSidebar.tsx
index d986e82be..34ac95fc7 100644
--- a/easy-ui-react/src/ProductLayout/ProductLayoutSidebar.tsx
+++ b/easy-ui-react/src/ProductLayout/ProductLayoutSidebar.tsx
@@ -73,7 +73,7 @@ function SidebarAsDialog(props: ProductLayoutSidebarProps) {
 function SidebarAsDialogOverlay(props: { children: ReactNode }) {
   const { children } = props;
 
-  const { sidebarTriggerState } = useProductLayout();
+  const { layoutRef, sidebarTriggerState } = useProductLayout();
 
   const ref = React.useRef(null);
   const { modalProps, underlayProps } = useModalOverlay(
@@ -83,7 +83,9 @@ function SidebarAsDialogOverlay(props: { children: ReactNode }) {
   );
 
   return (
-    <Overlay>
+    <Overlay
+      portalContainer={layoutRef.current ? layoutRef.current : undefined}
+    >
       <div className={styles.overlay} {...underlayProps}>
         <div ref={ref} {...modalProps}>
           {children}
diff --git a/easy-ui-react/src/ProductLayout/context.ts b/easy-ui-react/src/ProductLayout/context.ts
index a5fb73133..ac869d686 100644
--- a/easy-ui-react/src/ProductLayout/context.ts
+++ b/easy-ui-react/src/ProductLayout/context.ts
@@ -1,9 +1,10 @@
 import { DOMProps } from "@react-types/shared";
-import { createContext, useContext } from "react";
+import { MutableRefObject, createContext, useContext } from "react";
 import { AriaButtonProps } from "react-aria";
 import { OverlayTriggerState } from "react-stately";
 
 export type ProductLayoutContextType = {
+  layoutRef: MutableRefObject<HTMLDivElement | null>;
   sidebarTriggerState: OverlayTriggerState;
   sidebarTriggerProps: AriaButtonProps;
   sidebarOverlayProps: DOMProps;