@vitus-labs/elements
Version:
Most basic react reusable components
109 lines • 3.63 kB
TypeScript
type Align = 'bottom' | 'top' | 'left' | 'right';
type AlignX = 'left' | 'center' | 'right';
type AlignY = 'bottom' | 'top' | 'center';
export type UseOverlayProps = Partial<{
/**
* Defines default state whether **Overlay** component should be active.
* @defaultValue `false`
*/
isOpen: boolean;
/**
* Defines `event` when **Overlay** is supposed to be open.
*
* When `manual` is set, callbacks needs to be applied to make it working.
* @defaultValue `click`
*/
openOn: 'click' | 'hover' | 'manual';
/**
* Defines `event` when **Overlay** is supposed to be closed.
* @defaultValue `click`
*/
closeOn: 'click' | 'clickOnTrigger' | 'clickOutsideContent' | 'hover' | 'manual';
/**
* Defines what type of **Overlay** will be created. Type `modal`
* has different positioning calculations than others.
* @defaultValue `dropdown`
*/
type: 'dropdown' | 'tooltip' | 'popover' | 'modal' | 'custom';
/**
* Defines how `content` is treated regarding CSS positioning.
* @defaultValue `fixed`
*/
position: 'absolute' | 'fixed' | 'relative' | 'static';
/**
* Defines from which side is `content` aligned to `trigger` (top, left, bottom, right).
* For more specific alignment configuration can be used `alignX` and/or `alignY` prop.
* @defaultValue `bottom`
*/
align: Align;
/**
* Defines how `content` is aligned to `trigger` on axis X
* @defaultValue `left`
*/
alignX: AlignX;
/**
* Defines how `content` is aligned to `trigger` on axis Y
* @defaultValue `bottom`
*/
alignY: AlignY;
/**
* Defines `margin` from trigger on axis X.
* @defaultValue `0`
*/
offsetX: number;
/**
* Defines `margin` from trigger on axis Y.
* @defaultValue `0`
*/
offsetY: number;
/**
* Performance helper. Value defined in milliseconds for `throttling`
* recalculations
* @defaultValue `200`
*/
throttleDelay: number;
/**
* A valid HTML element. Prop can be used for ability to handle properly
* scrolling inside custom scrollable HTML element.
*/
parentContainer: HTMLElement | null;
/**
* Defines whether active **Overlay** is supposed to be closed on pressing
* `ESC` key.
* @defaultValue `true`
*/
closeOnEsc: boolean;
/**
* When set to `true`, **Overlay** is automatically closed and is blocked for
* being opened.
*/
disabled: boolean;
/**
* A callback hook to be called when **Overlay** is being opened. Does not
* accept any arguments.
*/
onOpen: () => void;
/**
* A callback hook to be called when **Overlay** is being closed. Does not
* accept any arguments.
*/
onClose: () => void;
}>;
declare const useOverlay: ({ isOpen, openOn, closeOn, type, position, align, alignX, alignY, offsetX, offsetY, throttleDelay, parentContainer, closeOnEsc, disabled, onOpen, onClose, }?: Partial<UseOverlayProps>) => {
triggerRef: import("react").RefObject<HTMLElement | null>;
contentRef: (node: HTMLElement) => void;
active: boolean;
align: Align;
alignX: "left" | "right" | "center";
alignY: "bottom" | "top" | "center";
showContent: () => void;
hideContent: () => void;
blocked: boolean;
setBlocked: () => void;
setUnblocked: () => void;
Provider: import("react").FC<import("./context").Context & {
children: import("react").ReactNode;
}>;
};
export default useOverlay;
//# sourceMappingURL=useOverlay.d.ts.map