mirror of
https://github.com/makeplane/plane.git
synced 2025-12-16 20:07:56 +01:00
fix: position
This commit is contained in:
1
packages/propel/src/select/index.ts
Normal file
1
packages/propel/src/select/index.ts
Normal file
@@ -0,0 +1 @@
|
|||||||
|
export * from "./root";
|
||||||
@@ -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(
|
||||||
|
|||||||
@@ -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 {
|
||||||
|
|||||||
Reference in New Issue
Block a user