baseui/layer/types.d.ts

A React Component library implementing the Base design language

import type * as React from 'react';
import type { TETHER_PLACEMENT } from './constants';
import type { Override } from '../helpers/overrides';
/** LayersManager */
export type LayersManagerProps = {
    children: React.ReactNode;
    overrides?: {
        AppContainer?: Override;
        LayersContainer?: Override;
    };
    zIndex?: number;
};
export type LayersManagerState = {
    escapeKeyHandlers: Array<() => unknown>;
    keyDownHandlers: Array<(event: KeyboardEvent) => unknown>;
    keyUpHandlers: Array<(event: KeyboardEvent) => unknown>;
    keyPressHandlers: Array<(event: KeyboardEvent) => unknown>;
    docClickHandlers: Array<(event: MouseEvent) => unknown>;
};
export type LayersContextProps = {
    host?: HTMLElement | null;
    zIndex?: number;
    addEscapeHandler: (a: () => unknown) => void;
    removeEscapeHandler: (a: () => unknown) => void;
    addKeyDownHandler: (a: (event: KeyboardEvent) => void) => void;
    removeKeyDownHandler: (a: (event: KeyboardEvent) => void) => void;
    addKeyUpHandler: (a: (event: KeyboardEvent) => void) => void;
    removeKeyUpHandler: (a: (event: KeyboardEvent) => void) => void;
    addKeyPressHandler: (a: (event: KeyboardEvent) => void) => void;
    removeKeyPressHandler: (a: (event: KeyboardEvent) => void) => void;
    addDocClickHandler: (a: (event: MouseEvent) => void) => void;
    removeDocClickHandler: (a: (event: MouseEvent) => void) => void;
};
/** Layer */
export type LayerProps = {
    /** Content to be rendered in the Layer. */
    children: React.ReactNode;
    /** A DOM element where the Layer will be inserted into as a child.
     The host value comes from the layers context provider.
     If there is no `LayersManager` added and therefore no host element
     in the context, `document.body` will be used as a container element. */
    host?: HTMLElement | null;
    /** Defines the location (child order) at which the layer will be inserted in
     the `host` element. */
    index?: number;
    /** Identifies if this layer is a hover layer (and subsequent document clicks
     should be triggered on the last registered non-hover layer. */
    isHoverLayer?: boolean;
    /** A custom DOM element where the layer is inserted to as a child.
     Note that the `index` prop does not work with a custom `mountNode`. */
    mountNode?: HTMLElement;
    /** Handler called when escape key is pressed.
      Only the top most layer's handler is called. */
    onEscape?: () => unknown;
    /** Handler called when key down event is happened.
      Only the top most layer's handler is called. */
    onKeyDown?: (event: KeyboardEvent) => unknown;
    /** Handler called when key up event is happened.
      Only the top most layer's handler is called. */
    onKeyUp?: (event: KeyboardEvent) => unknown;
    /** Handler called when key press event is happened.
      Only the top most layer's handler is called. */
    onKeyPress?: (event: KeyboardEvent) => unknown;
    /** Handler called when mousedown event happens on the document.
      Only the top most layer's handler is called. */
    onDocumentClick?: (event: MouseEvent) => unknown;
    /** A handler that is called when the Layer is mounted. */
    onMount?: () => unknown;
    /** A handler that is called when the Layer is unmounted. */
    onUnmount?: () => unknown;
    /** A value of z-index to be set on the layer.
     The zIndex value comes from the layers context provider. */
    zIndex?: number;
};
export type LayerComponentProps = {
    children: React.ReactNode;
    host: HTMLElement | undefined | null;
    index?: number;
    isHoverLayer?: boolean;
    mountNode?: HTMLElement;
    onEscape?: () => unknown;
    onKeyDown?: (event: KeyboardEvent) => unknown;
    onKeyUp?: (event: KeyboardEvent) => unknown;
    onKeyPress?: (event: KeyboardEvent) => unknown;
    onDocumentClick?: (event: MouseEvent) => unknown;
    onMount?: () => unknown;
    onUnmount?: () => unknown;
    zIndex?: number;
};
export type LayerState = {
    container: HTMLElement | undefined | null;
};
/** TetherBehavior */
export type TetherPlacement = keyof typeof TETHER_PLACEMENT;
export type NormalizedOffset = {
    top: number;
    left: number;
};
export type NormalizedOffsets = {
    arrow?: NormalizedOffset;
    popper: NormalizedOffset;
};
export type PopperOffset = {
    top?: number | null;
    left?: number | null;
};
export type PopperDataObject = {
    offsets: {
        arrow?: PopperOffset;
        popper: PopperOffset;
    };
    placement: string;
};
export type PopperOptions = {
    placement: string;
    modifiers: {
        arrow: {};
        computeStyle: {};
        applyStyle: {};
        applyReactStyle: {
            fn: (data: PopperDataObject) => void;
        };
    };
};
export type TetherProps = {
    /** The reference element used to position the popper. */
    anchorRef: HTMLElement | undefined | null;
    /** The arrow element that is passed as an arrow modifier to alter
     the popper positioning. */
    arrowRef?: HTMLElement | null;
    /** The element used as a popper. */
    popperRef: HTMLElement | undefined | null;
    /** Content to be rendered in the Popper. */
    children: React.ReactNode;
    /** A handler that is called when popper positioning changes. */
    onPopperUpdate: (b: NormalizedOffsets, a: PopperDataObject) => unknown;
    /** Recommended placement of the popper. */
    placement: TetherPlacement;
    /** Options to be passes to the Popper on its initialization.
     Refer to the [Popper documentation](https://github.com/popperjs/popper.js/blob/v1.x/docs/_includes/popper-documentation.md)
     for the full list of available options. */
    popperOptions: any;
};
export type TetherState = {
    isMounted: boolean;
};