From 7b89395f42472afe25dcd2fb0d9971dacb5f0b77 Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Thu, 21 Aug 2025 14:56:55 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8(frontend)=20expose=20placement=20prop?=
 =?UTF-8?q?=20in=20Popover=20primitive?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add placement prop to Popover primitive to leverage React Aria's
explicit placement control functionality.

Provides better positioning control for popovers by exposing underlying
React Aria placement options, enabling more precise UI layouts.
---
 src/frontend/package-lock.json         | 15 ++++++++-------
 src/frontend/package.json              |  1 +
 src/frontend/src/primitives/Select.tsx |  5 ++++-
 3 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/src/frontend/package-lock.json b/src/frontend/package-lock.json
index 10fd2395..7350632f 100644
--- a/src/frontend/package-lock.json
+++ b/src/frontend/package-lock.json
@@ -13,6 +13,7 @@
         "@livekit/track-processors": "0.5.7",
         "@pandacss/preset-panda": "0.54.0",
         "@react-aria/toast": "3.0.5",
+        "@react-types/overlays": "3.9.0",
         "@remixicon/react": "4.6.0",
         "@tanstack/react-query": "5.81.5",
         "@timephy/rnnoise-wasm": "1.0.0",
@@ -3378,12 +3379,12 @@
       }
     },
     "node_modules/@react-types/overlays": {
-      "version": "3.8.16",
-      "resolved": "https://registry.npmjs.org/@react-types/overlays/-/overlays-3.8.16.tgz",
-      "integrity": "sha512-Aj9jIFwALk9LiOV/s3rVie+vr5qWfaJp/6aGOuc2StSNDTHvj1urSAr3T0bT8wDlkrqnlS4JjEGE40ypfOkbAA==",
+      "version": "3.9.0",
+      "resolved": "https://registry.npmjs.org/@react-types/overlays/-/overlays-3.9.0.tgz",
+      "integrity": "sha512-T2DqMcDN5p8vb4vu2igoLrAtuewaNImLS8jsK7th7OjwQZfIWJn5Y45jSxHtXJUddEg1LkUjXYPSXCMerMcULw==",
       "license": "Apache-2.0",
       "dependencies": {
-        "@react-types/shared": "^3.30.0"
+        "@react-types/shared": "^3.31.0"
       },
       "peerDependencies": {
         "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
@@ -3439,9 +3440,9 @@
       }
     },
     "node_modules/@react-types/shared": {
-      "version": "3.30.0",
-      "resolved": "https://registry.npmjs.org/@react-types/shared/-/shared-3.30.0.tgz",
-      "integrity": "sha512-COIazDAx1ncDg046cTJ8SFYsX8aS3lB/08LDnbkH/SkdYrFPWDlXMrO/sUam8j1WWM+PJ+4d1mj7tODIKNiFog==",
+      "version": "3.31.0",
+      "resolved": "https://registry.npmjs.org/@react-types/shared/-/shared-3.31.0.tgz",
+      "integrity": "sha512-ua5U6V66gDcbLZe4P2QeyNgPp4YWD1ymGA6j3n+s8CGExtrCPe64v+g4mvpT8Bnb985R96e4zFT61+m0YCwqMg==",
       "license": "Apache-2.0",
       "peerDependencies": {
         "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
diff --git a/src/frontend/package.json b/src/frontend/package.json
index 8cbf1c11..437870b3 100644
--- a/src/frontend/package.json
+++ b/src/frontend/package.json
@@ -18,6 +18,7 @@
     "@livekit/track-processors": "0.5.7",
     "@pandacss/preset-panda": "0.54.0",
     "@react-aria/toast": "3.0.5",
+    "@react-types/overlays": "3.9.0",
     "@remixicon/react": "4.6.0",
     "@tanstack/react-query": "5.81.5",
     "@timephy/rnnoise-wasm": "1.0.0",
diff --git a/src/frontend/src/primitives/Select.tsx b/src/frontend/src/primitives/Select.tsx
index 4c5c5b06..f84cf7cb 100644
--- a/src/frontend/src/primitives/Select.tsx
+++ b/src/frontend/src/primitives/Select.tsx
@@ -13,6 +13,7 @@ import { Box } from './Box'
 import { StyledPopover } from './Popover'
 import { menuRecipe } from '@/primitives/menuRecipe.ts'
 import { css } from '@/styled-system/css'
+import type { Placement } from '@react-types/overlays'
 
 const StyledButton = styled(Button, {
   base: {
@@ -67,12 +68,14 @@ export const Select = <T extends string | number>({
   iconComponent,
   items,
   errors,
+  placement,
   ...props
 }: Omit<SelectProps<object>, 'items' | 'label' | 'errors'> & {
   iconComponent?: RemixiconComponentType
   label: ReactNode
   items: Array<{ value: T; label: ReactNode }>
   errors?: ReactNode
+  placement?: Placement
 }) => {
   const IconComponent = iconComponent
   return (
@@ -90,7 +93,7 @@ export const Select = <T extends string | number>({
           className={css({ flexShrink: 0 })}
         />
       </StyledButton>
-      <StyledPopover>
+      <StyledPopover placement={placement}>
         <Box size="sm" type="popover" variant="control">
           <ListBox>
             {items.map((item) => (