use product layout container for overlay

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 {

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}

easy-ui-react/src/ProductLayout/ProductLayoutSidebar.module.scss

@@ -40,7 +40,7 @@
 }
 
 .overlay {
-  position: fixed;
+  position: absolute;
   z-index: 100;
   top: 0;
   left: 0;

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}

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;