import { PopoverHTMLProps , PopoverOptions } from 'reakit/Popover/Popover' ; import { PopoverArrowHTMLProps , PopoverArrowOptions } from 'reakit/Popover/PopoverArrow' ; import { cx } from '@remirror/core' ; import { ComponentsTheme } from '@remirror/theme' ; import { BootstrapRoleOptions } from './role' ; export type BootstrapPopoverOptions = BootstrapRoleOptions & PopoverOptions ; export function usePopoverOptions ( { unstable_system : { palette = 'background' , fill = 'opaque' , ... system } = { } , ... options } ) { return { unstable_system : { palette , fill , ... system } , ... options , } ; } export function usePopoverProps ( _ , htmlProps = { } ) { return { ... htmlProps , className : cx ( ComponentsTheme . POPOVER , htmlProps . className ) } ; } export type BootstrapPopoverArrowOptions = BootstrapRoleOptions & PopoverArrowOptions ; export function usePopoverArrowProps ( _ , htmlProps = { } ) { return { 'data-arrow' : '' , ... htmlProps } as PopoverArrowHTMLProps ; }