fix: position

This commit is contained in:
gakshita
2025-08-28 15:52:34 +05:30
parent 6bbbc1b183
commit 9d8c22de91
3 changed files with 22 additions and 2 deletions

View File

@@ -0,0 +1 @@
export * from "./root";

View File

@@ -4,6 +4,8 @@ import { cn } from "@plane/utils";
// types // types
import { ICustomSelectItemProps, ICustomSelectProps } from "./types"; import { ICustomSelectItemProps, ICustomSelectProps } from "./types";
import { Select } from "@base-ui-components/react/select"; import { Select } from "@base-ui-components/react/select";
import { convertPlacementToSideAndAlign } from "../utils/placement";
import React from "react";
const CustomSelect = (props: ICustomSelectProps) => { const CustomSelect = (props: ICustomSelectProps) => {
const { const {
@@ -23,7 +25,19 @@ const CustomSelect = (props: ICustomSelectProps) => {
value, value,
tabIndex, tabIndex,
portalElement, portalElement,
side,
align,
sideOffset = 8,
} = props; } = props;
// side and align calculations
const { finalSide, finalAlign } = React.useMemo(() => {
if (placement) {
const converted = convertPlacementToSideAndAlign(placement);
return { finalSide: converted.side, finalAlign: converted.align };
}
return { finalSide: side, finalAlign: align };
}, [placement, side, align]);
// states // states
return ( return (
<Select.Root value={value} onValueChange={onChange} disabled={disabled}> <Select.Root value={value} onValueChange={onChange} disabled={disabled}>
@@ -62,7 +76,7 @@ const CustomSelect = (props: ICustomSelectProps) => {
<Select.Portal container={portalElement?.current}> <Select.Portal container={portalElement?.current}>
<Select.Backdrop /> <Select.Backdrop />
<Select.Positioner align={placement}> <Select.Positioner side={finalSide} sideOffset={sideOffset} align={finalAlign}>
<Select.ScrollUpArrow /> <Select.ScrollUpArrow />
<Select.Popup <Select.Popup
className={cn( className={cn(

View File

@@ -1,3 +1,5 @@
import { TAlign, TPlacement, TSide } from "../utils/placement";
export type ICustomSearchSelectOption = { export type ICustomSearchSelectOption = {
value: any; value: any;
query: string; query: string;
@@ -20,10 +22,13 @@ export interface IDropdownProps {
chevronClassName?: string; chevronClassName?: string;
onOpen?: () => void; onOpen?: () => void;
optionsClassName?: string; optionsClassName?: string;
placement?: "center" | "start" | "end";
tabIndex?: number; tabIndex?: number;
useCaptureForOutsideClick?: boolean; useCaptureForOutsideClick?: boolean;
defaultOpen?: boolean; defaultOpen?: boolean;
placement?: TPlacement;
side?: TSide;
align?: TAlign;
sideOffset?: number;
} }
export interface IPortalProps { export interface IPortalProps {