Interfaces

interface IUnAttachedOverlayProps extends Omit<IOverlay, 'placement'> {
    children: (isOpen: boolean) => JSX.Element;
}

export interface IOverlay {
    // aria attribute
    role?: 'tooltip' | 'dialog' | 'menu' | 'listbox' | 'grid' | 'tree';
    // for nested overlays
    nodeId?: string;
    // for nested overlays
    parentId?: string;
    // actual DOM id attribute
    portalId?: string;
    // for overlay placement (use custom for modal, drawer etc.)
    placement?: 'top' | 'bottom' | 'right' |'left'
             | 'bottom-end' | 'bottom-start' 
             | 'left-end' | 'left-start' 
             | 'right-end' | 'right-start' 
             | 'top-end' | 'top-start';
    // triggers wont't work if you don't pass this true.
    interactive?: boolean;
    // determines if animations are enabled or not
    animations?: {
        open: Variant; // framer-motion type
        close: Variant; // framer-motion type
    };
    // determines if animations are enabled or not (AnimatePresence)
    useMotion?: boolean;
    // portals your floating element outside the main app node
    usePortal?: boolean;
    // provides base styling for a fixed overlay element to dim content
    useBackdrop?: boolean;
    // provides flexible focus management for a floating element
    useFocusManager?: boolean;
    // determines if focus should be returned to previous element
    // useFocusManager should be true for this to work
    returnFocus?: boolean; 
    // displaces the floating element from its core placement along the specified axes
    offset?: number; 
    // moves the floating element along the specified px in order to keep it in view
    shift?: number; 
    // trigger delay
    delay?: {
        open: number;
        close: number;
    };
    // trigger element events
    use?: { 
        click?: boolean; // adds click event listeners 
        dismiss?: boolean; // adds listeners that dismiss (close the floating element.
        focus?: boolean; // adds focus event listeners 
        hover?: boolean; // adds hover event listeners 
    };
    // your floating element (overlay)
    overlay: (close: () => void) => JSX.Element;
    // classes for floating element
    className?: string;
    // classes for floating element wrapper
    wrapperClassName?: string;
    // classes for floating element backdrop
    backdropClassName?: string;
}