@workday/canvas-kit-react/dist/es6/popup/lib/Popper.d.ts

The parent module that contains all Workday Canvas Kit React components

import * as React from 'react';
import { Placement as PopperJSPlacement, Options, Instance } from '@popperjs/core';
export type Placement = `${PopperJSPlacement}`;
export type PopperOptions = Options;
export declare const defaultFallbackPlacements: Placement[];
export interface PopperProps {
    /**
     * The reference element used to position the Popper. Popper content will try to follow the
     * `anchorElement` if it moves and will reposition itself if there is no longer room in the
     * window.
     */
    anchorElement?: React.RefObject<Element> | Element | null;
    /**
     * The content of the Popper. If a function is provided, it will be treated as a Render Prop and
     * pass the `placement` chosen by PopperJS. This `placement` value is useful if your popup needs
     * to animate and that animation depends on the direction of the content in relation to the
     * `anchorElement`.
     */
    children: ((props: {
        placement: Placement;
    }) => React.ReactNode) | React.ReactNode;
    /**
     * When provided, this optional callback will be used to determine positioning for the Popper element
     * instead of calling `getBoundingClientRect` on the `anchorElement` prop. Use this when you need
     * complete control over positioning. When this prop is specified, it is safe to pass `null` into the
     * `anchorElement` prop. If `null` is passed into the `anchorElement` prop, an `owner` will not be
     * provided for the `PopupStack`.
     */
    getAnchorClientRect?: () => DOMRect;
    /**
     * Determines if `Popper` content should be rendered. The content only exists in the DOM when
     * `open` is `true`
     * @default true
     */
    open?: boolean;
    /**
     * The placement of the `Popper` contents relative to the `anchorElement`. Accepts `auto`, `top`,
     * `right`, `bottom`, or `left`. Each placement can also be modified using any of the following
     * variations: `-start` or `-end`.
     * @default bottom
     */
    placement?: Placement;
    /**
     * Define fallback placements by providing a list of {@link Placement} in array (in order of preference).
     * The default preference is following the order of `top`, `right`, `bottom`, and `left`. Once the initial
     * and opposite placements are not available, the fallback placements will be in use. Use an empty array to
     * disable the fallback placements.
     */
    fallbackPlacements?: Placement[];
    /**
     * A callback function that will be called whenever PopperJS chooses a placement that is different
     * from the provided `placement` preference. If a `placement` preference doesn't fit, PopperJS
     * will choose a new one and call this callback.
     */
    onPlacementChange?: (placement: Placement) => void;
    /**
     * The additional options passed to the Popper's `popper.js` instance.
     */
    popperOptions?: Partial<PopperOptions>;
    /**
     * If false, render the Popper within the
     * DOM hierarchy of its parent. A non-portal Popper will constrained by the parent container
     * overflows. If you set this to `false`, you may experience issues where you content gets cut off
     * by scrollbars or `overflow: hidden`
     * @default true
     */
    portal?: boolean;
    /**
     * Reference to the PopperJS instance. Useful for making direct method calls on the popper
     * instance like `update`.
     */
    popperInstanceRef?: React.Ref<Instance>;
}
/**
 * A thin wrapper component around the Popper.js positioning engine. For reference:
 * https://popper.js.org/. `Popper` also automatically works with the {@link PopupStack} system.
 * `Popper` has no UI and will render any children to the `body` element and position around a
 * provided `anchorElement`.
 *
 * Prefer using {@link PopupPopper Popup.Popper} instead. Use this to make Popups that don't utilize
 * a PopupModel or any associate popup [hooks](#hooks).
 *
 * > **Note:** `Popper` renders any children to a `div` element created by the `PopupStack`. This
 * > element is not controlled by React, so any extra element props will _not_ be forwarded. The
 * > `ref` will point to the `div` element created by the `PopupStack`, however. In v4, an extra
 * > `div` element was rendered and that's where extra props were spread to. In v5+, you can provide
 * > your own element if you wish.
 */
export declare const Popper: React.ForwardRefExoticComponent<PopperProps & React.RefAttributes<HTMLDivElement>>;
//# sourceMappingURL=Popper.d.ts.map