studio/meet
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

✨(frontend) expose placement prop in Popover primitive

Browse Source 
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.
This commit is contained in:
lebaudantoine
2025-08-21 14:56:55 +02:00
committed by aleb_the_flash
parent 3d047b5124
commit 7b89395f42
3 changed files with 13 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/frontend/package-lock.json generated
View File

@@ -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"

1
src/frontend/package.json
View File

@@ -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",

5
src/frontend/src/primitives/Select.tsx
View File

@@ -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) => (