diff --git a/apps/www/src/content/docs/components/select/props.ts b/apps/www/src/content/docs/components/select/props.ts index 153a2e01d..361eee41d 100644 --- a/apps/www/src/content/docs/components/select/props.ts +++ b/apps/www/src/content/docs/components/select/props.ts @@ -57,10 +57,22 @@ export interface SelectContentProps { searchPlaceholder?: string; /** - * Position of the content - * @default "popper" + * Which side of the trigger to render the content on. + * @default "bottom" */ - position?: 'item-aligned' | 'popper'; + side?: 'top' | 'bottom' | 'left' | 'right' | 'inline-start' | 'inline-end'; + + /** + * Alignment of the content relative to the trigger along the chosen side. + * @default "start" + */ + align?: 'start' | 'center' | 'end'; + + /** + * Distance in pixels between the trigger and the content. + * @default 4 + */ + sideOffset?: number; /** Additional CSS class names. */ className?: string; diff --git a/docs/V1-migration.md b/docs/V1-migration.md index b9d8ba14c..4c2b88c82 100644 --- a/docs/V1-migration.md +++ b/docs/V1-migration.md @@ -1388,6 +1388,16 @@ Summary of renames: 3. **`SelectItem` uses `render` prop** instead of `asChild`. +4. **Default alignment changed: bottom-center -> bottom-start (bottom-left).** `Select.Content` now opens flush to the trigger's start edge instead of horizontally centered. Pass `align="center"` to mimic the previous behavior. + +```tsx +// v1 default (bottom-left) +... + +// Opt back into v0 behavior +... +``` + #### New Features - `items` prop for external filtering diff --git a/packages/raystack/components/select/select-content.tsx b/packages/raystack/components/select/select-content.tsx index 377faae71..c8bc8eb96 100644 --- a/packages/raystack/components/select/select-content.tsx +++ b/packages/raystack/components/select/select-content.tsx @@ -22,6 +22,8 @@ export function SelectContent({ children, searchPlaceholder = 'Search...', sideOffset = 4, + side = 'bottom', + align = 'start', ...props }: SelectContentProps) { const { autocomplete, multiple } = useSelectContext(); @@ -31,6 +33,8 @@ export function SelectContent({