@spectrum-web-components/overlay 0.36.0 → 0.37.0

package/src/Overlay.d.ts

@@ -0,0 +1,163 @@
+import { PropertyValues, TemplateResult } from '@spectrum-web-components/base';
+import type { OpenableElement, OverlayState, OverlayTypes, Placement } from './overlay-types.js';
+import { AbstractOverlay } from './AbstractOverlay.js';
+import { VirtualTrigger } from './VirtualTrigger.js';
+import { PlacementController } from './PlacementController.js';
+export declare const LONGPRESS_INSTRUCTIONS: {
+    touch: string;
+    keyboard: string;
+    mouse: string;
+};
+declare let OverlayFeatures: typeof AbstractOverlay & import("./overlay-types.js").Constructor<import("@lit/reactive-element").ReactiveElement>;
+/**
+ * @element sp-overlay
+ *
+ * @fires sp-opened - announces that an overlay has completed any entry animations
+ * @fires sp-closed - announce that an overlay has compelted any exit animations
+ */
+export declare class Overlay extends OverlayFeatures {
+    static styles: import("@spectrum-web-components/base").CSSResult[];
+    abortController: AbortController;
+    /**
+     * An Overlay that is `delayed` will wait until a warm-up period of 1000ms
+     * has completed before opening. Once the warmup period has completed, all
+     * subsequent Overlays will open immediately. When no Overlays are opened,
+     * a cooldown period of 1000ms will begin. Once the cooldown has completed,
+     * the next Overlay to be opened will be subject to the warm-up period if
+     * provided that option.
+     */
+    delayed: boolean;
+    dialogEl: HTMLDialogElement & {
+        showPopover(): void;
+        hidePopover(): void;
+    };
+    /**
+     * Whether the overlay is currently functional or not
+     */
+    get disabled(): boolean;
+    set disabled(disabled: boolean);
+    private _disabled;
+    elements: OpenableElement[];
+    parentOverlayToForceClose?: Overlay;
+    private get hasNonVirtualTrigger();
+    protected longpressState: 'null' | 'potential' | 'opening' | 'pressed';
+    private longressTimeout;
+    /**
+     * The `offset` property accepts either a single number, to
+     * define the offset of the Overlay along the main axis from
+     * the trigger, or 2-tuple, to define the offset along the
+     * main axis and the cross axis. This option has no effect
+     * when there is no trigger element.
+     */
+    offset: number | [number, number];
+    protected placementController: PlacementController;
+    /**
+     * Whether the Overlay is projected onto the "top layer" or not.
+     */
+    get open(): boolean;
+    set open(open: boolean);
+    private _open;
+    static openCount: number;
+    /**
+     * Instruct the Overlay where to place itself in
+     * relationship to the trigger element.
+     * @type {"top" | "top-start" | "top-end" | "right" | "right-start" | "right-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end"}
+     */
+    placement?: Placement;
+    /**
+     * Whether to pass focus to the overlay once opened, or
+     * to the appropriate value based on the "type" of the overlay
+     * when set to `"auto"`.
+     *
+     */
+    receivesFocus: 'true' | 'false' | 'auto';
+    private releaseAriaDescribedby;
+    private releaseLongpressDescribedby;
+    slotEl: HTMLSlotElement;
+    get state(): OverlayState;
+    set state(state: OverlayState);
+    _state: OverlayState;
+    tipPadding?: number;
+    /**
+     * An optional ID reference for the trigger element combined with the optional
+     * interaction (click | hover | longpress) by which the overlay shold open
+     * the overlay with an `@`: e.g. `trigger@click` opens the overlay when an
+     * element with the ID "trigger" is clicked.
+     */
+    trigger?: string;
+    /**
+     * An element reference for the trigger element that the overlay should relate to.
+     */
+    triggerElement: HTMLElement | VirtualTrigger | null;
+    /**
+     * The specific interaction to listen for on the `triggerElement` to open the overlay.
+     */
+    triggerInteraction?: 'click' | 'longpress' | 'hover';
+    /**
+     * Configures the open/close heuristics of the Overlay.
+     * @type {"auto" | "hint" | "manual" | "modal" | "page"}
+     */
+    type: OverlayTypes;
+    protected wasOpen: boolean;
+    private elementResolver;
+    private get usesDialog();
+    private get popoverValue();
+    protected get requiresPosition(): boolean;
+    protected managePosition(): void;
+    protected managePopoverOpen(): Promise<void>;
+    protected applyFocus(targetOpenState: boolean, focusEl: HTMLElement | null): Promise<void>;
+    private closeOnFocusOut;
+    protected manageOpen(oldOpen: boolean): Promise<void>;
+    protected unbindEvents(): void;
+    protected bindEvents(): void;
+    protected bindClickEvents(triggerElement: HTMLElement): void;
+    protected bindLongpressEvents(triggerElement: HTMLElement): void;
+    protected bindHoverEvents(triggerElement: HTMLElement): void;
+    protected manageTriggerElement(triggerElement: HTMLElement | null): void;
+    private elementIds;
+    private prepareLongpressDescription;
+    private prepareAriaDescribedby;
+    private handlePointerdown;
+    private handlePointerup;
+    /**
+     * @private
+     */
+    protected handleKeydown: (event: KeyboardEvent) => void;
+    protected handleKeyup: (event: KeyboardEvent) => void;
+    /**
+     * An overlay with a `click` interaction should not close on click `triggerElement`.
+     * When a click is initiated (`pointerdown`), apply `preventNextToggle` when the
+     * overlay is `open` to prevent from toggling the overlay when the click event
+     * propagates later in the interaction.
+     */
+    private preventNextToggle;
+    protected handlePointerdownForClick: () => void;
+    protected handleClick: () => void;
+    private focusedin;
+    protected handleFocusin: () => void;
+    protected handleFocusout: () => void;
+    private pointerentered;
+    protected handlePointerenter: () => void;
+    protected handlePointerleave: (event: PointerEvent) => void;
+    protected handleOverlayPointerleave: (event: PointerEvent) => void;
+    protected doPointerleave(): void;
+    protected handleLongpress: () => void;
+    protected handleBeforetoggle(event: Event & {
+        newState: string;
+    }): void;
+    protected handleBrowserClose(): void;
+    manuallyKeepOpen(): void;
+    protected handleSlotchange(): void;
+    willPreventClose: boolean;
+    shouldPreventClose(): boolean;
+    willUpdate(changes: PropertyValues): void;
+    protected updated(changes: PropertyValues): void;
+    protected renderContent(): TemplateResult;
+    private get dialogStyleMap();
+    protected renderDialog(): TemplateResult;
+    protected renderPopover(): TemplateResult;
+    render(): TemplateResult;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+}
+export {};