Popover

Exports

@mbsw/ui에서 가져올 수 있는 항목입니다.

HoverCard
HoverCardContent
HoverCardTrigger
Popover
PopoverContent
PopoverTrigger

Props

컴포넌트별 주요 속성입니다. 조건부 속성의 조합과 공통 HTML, Radix 속성은 아래 전체 타입에서 확인하세요.

HoverCardContent

HoverCardContent 속성
PropType필수 여부
width'fixed' | 'hug'선택

PopoverContent

PopoverContent 속성
PropType필수 여부
actionsPopoverAction | PopoverAction[] | null선택
childrenReactNode필수
size'lg' | 'md' | 'sm'선택

Type reference

전체 타입 보기

속성 조합과 상속 속성을 포함한 TypeScript 선언입니다.

import { type ComponentProps, type ReactElement, type ReactNode, type ButtonHTMLAttributes, type ElementType, type RefAttributes, type SVGProps } from 'react';

import { HoverCard as HoverCardPrimitive, Popover as PopoverPrimitive } from 'radix-ui';

export type ButtonVariant = 'solid' | 'outline' | 'ghost';

export type ButtonTone = 'primary' | 'secondary' | 'destructive' | 'highlight';

export type ButtonSize = 'lg' | 'md' | 'sm';

export type IconOnlyButtonSize = ButtonSize | 'xs';

type IconComponent = ElementType<SVGProps<SVGSVGElement>>;

type DataAttributes = {
    [key: `data-${string}`]: boolean | number | string | undefined;
};

type ButtonBaseProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'size'> & DataAttributes & {
    /** Highlight-only visual state. Callers retain aria-busy, disabled and event policy. */
    generating?: boolean;
    tone?: ButtonTone;
    variant?: ButtonVariant;
};

type NonEmptyButtonChild = Exclude<ReactNode, boolean | null | undefined>;

type NativeTextButtonProps = ButtonBaseProps & {
    asChild?: false;
    children: NonEmptyButtonChild;
    icon?: never;
    iconForeground?: never;
    iconOnly?: false;
    leadingIcon?: IconComponent;
    size?: ButtonSize;
    trailingIcon?: IconComponent;
};

type SlottedTextButtonProps = Omit<ButtonBaseProps, 'disabled'> & {
    asChild: true;
    children: ReactElement;
    disabled?: never;
    icon?: never;
    iconForeground?: never;
    iconOnly?: false;
    leadingIcon?: never;
    size?: ButtonSize;
    trailingIcon?: never;
};

type IconOnlyButtonContent = {
    children?: never;
    icon: IconComponent;
    /** Secondary direct icon slot only; children styling stays caller-owned. */
    iconForeground?: 'primary' | 'secondary';
} | {
    children: NonEmptyButtonChild;
    icon?: never;
    iconForeground?: never;
};

type IconOnlyButtonProps = ButtonBaseProps & IconOnlyButtonContent & {
    'aria-label': string;
    asChild?: false;
    iconOnly: true;
    leadingIcon?: never;
    size?: IconOnlyButtonSize;
    trailingIcon?: never;
};

export type ButtonProps = (NativeTextButtonProps & RefAttributes<HTMLButtonElement>) | (SlottedTextButtonProps & RefAttributes<HTMLElement>) | (IconOnlyButtonProps & RefAttributes<HTMLButtonElement>);

type ButtonComponent = {
    (props: ButtonProps): ReactElement | null;
    displayName?: string;
};

export declare const Button: ButtonComponent;

export type PopoverSize = 'lg' | 'md' | 'sm';

export type HoverCardWidth = 'fixed' | 'hug';

export type PopoverProps = ComponentProps<typeof PopoverPrimitive.Root>;

export type PopoverTriggerProps = ComponentProps<typeof PopoverPrimitive.Trigger>;

type PopoverPrimitiveContentProps = ComponentProps<typeof PopoverPrimitive.Content>;

type PopoverAction = ReactElement<ButtonProps, typeof Button>;

export type PopoverContentProps = Omit<PopoverPrimitiveContentProps, 'asChild' | 'avoidCollisions' | 'children'> & {
    actions?: PopoverAction | PopoverAction[] | null;
    children: ReactNode;
    size?: PopoverSize;
};

export type HoverCardProps = ComponentProps<typeof HoverCardPrimitive.Root>;

export type HoverCardTriggerProps = ComponentProps<typeof HoverCardPrimitive.Trigger>;

type HoverCardPrimitiveContentProps = ComponentProps<typeof HoverCardPrimitive.Content>;

export type HoverCardContentProps = Omit<HoverCardPrimitiveContentProps, 'avoidCollisions'> & {
    width?: HoverCardWidth;
};

export declare function Popover(props: PopoverProps): import("react").JSX.Element;

export declare function PopoverTrigger(props: PopoverTriggerProps): import("react").JSX.Element;

export declare function PopoverContent(props: PopoverContentProps): import("react").JSX.Element;

export declare function HoverCard(props: HoverCardProps): import("react").JSX.Element;

export declare function HoverCardTrigger(props: HoverCardTriggerProps): import("react").JSX.Element;

export declare function HoverCardContent({ align, alignOffset, children, className, side, sideOffset, width, ...contentProps }: HoverCardContentProps): import("react").JSX.Element;