import React, { ReactElement, ReactNode } from 'react'; import { Placement } from '../../styles'; import { OpenerTriggerEvent } from '../tooltip'; import { HelpTextProps } from '../text/HelpText'; type PopoverContent = ReactElement | ReactNode; type PopoverWithCloseAction = (action: { close(): void; }) => PopoverContent; export interface PopoverProps { className?: string; children: ReactNode; /** * Popover 내부에 렌더될 자유 콘텐츠 요소 * - HelpText 컴포넌트 규격 또는 자유롭게 콘텐츠를 구성할 경우 사용합니다. * - PopoverContent * - [HelpText](https://storybook.kakaostyle.in/master/pds/?path=/story/component-text-helptext--base) 또는 ReactNode 타입을 가집니다. * - PopoverWithCloseAction * - PopoverContent function 타입으로 가집니다. */ content?: PopoverContent | PopoverWithCloseAction; title?: string; /** * 기본 폰트 Body_13_Regular적용 */ description?: ReactNode; label?: ReactNode; /** * 닫힘버튼 사용 유무 * @default false */ closeButton?: boolean; /** * main app node 바깥영역으로 생성할지 여부 * @default false */ noUsePortal?: boolean; /** @default getZIndex('popover') */ zIndex?: number; /** 미지정인경우 자동 배치 처리됩니다. */ placement?: Placement; /** @default 'hover' */ openerTriggerEvent?: OpenerTriggerEvent; /** * outside 영역 클릭시 닫힘 사용 여부 * @default true */ canClickOutside?: boolean; /** * 화살표 사용 여부 * - false로 지정할 경우, 화살표가 빠지고 border-radius와 box-shadow가 적용됩니다. * - placement의 기본값은 'bottom-start' 로 변경 됩니다. (자동 배치 되지 않음) * - openerTriggerEvent의 기본값은 'click' 로 변경 됩니다. * @default true */ arrow?: boolean; /** * 팝오버 내부여백 * * 미지정 시 기본값: * - arrow=true: title/description 영역 16px 20px, content 영역 0 * - arrow=false: 모든 영역 16px */ padding?: number; /** * 팝오버 너비 * @default 300 */ width?: number; opened?: boolean; onClose?: () => void; onOpen?: () => void; } export declare const Popover: React.FC; export {};