import { Middleware, Placement } from '@floating-ui/dom'; import { GdsElement } from '../../gds-element'; export type UIStateChangeReason = 'show' | 'close' | 'cancel'; /** * Apply the necessary ARIA attributes to a popover trigger element. Use this to apply correct * attributes in advance if you render `` conditionally, since the popover component * only applies these attributes when it initializes. */ export declare function applyTriggerAriaAttributes(trigger: HTMLElement, open: boolean, popupRole: string): void; /** * @element gds-popover * * A popover is a transient view that appears above other content. It is used by components such as dropdowns. * * GdsPopover can be supplied with a trigger through the `trigger` property. If a trigger is specified, the popover will * register a keydown listener on the trigger and listen to `ArrowDown` key presses. When the trigger is focused and * `ArrowDown` is pressed, the popover will open and focus the first slotted child. * * @event gds-ui-state - Fired when the popover is opened or closed. Can be cancelled to prevent the popover from opening or closing. The `detail` object contains the `open` boolean to indicate the result of the state change, and the `reason` string which can be one of `show`, `close`, or `cancel`. * * @slot - Content of the popover * @slot trigger - Trigger element for the popover. If this slot is occupied, the popover will listen to keydown and click events on the trigger and automtaiclly open when clicked or when the trigger is focused and `ArrowDown` is pressed. */ export declare class GdsPopover extends GdsElement { #private; static styles: import("lit").CSSResult; /** * The default set of middleware for Floating UI positioning used by GdsPopover. */ static DefaultMiddleware: Middleware[]; /** * Whether the popover is open. */ open: boolean; /** * This is used to indicate the semantic role of the popover. This will set the `aria-haspopup` attribute on the trigger element. * Read here for more information: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-haspopup */ popupRole: 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog'; /** * Optional way to assign a trigger element for the popover. When using Lit, this can take a value from a `@queryAsync` decorator in order to set the trigger element programatically. */ triggerRef?: Promise; /** * Optional way to assign an anchor element for the popover. When using Lit, this can take a value from a `@queryAsync` decorator in order to set the anchor element programatically. */ anchorRef?: Promise; /** * Optional trigger element for the popover. */ label: string | undefined; /** * The placement of the popover relative to the trigger. * Accepts any of the placements supported by Floating UI. */ placement: Placement; /** * Whether to use a modal dialog in mobile viewport. */ disableMobileStyles: boolean; /** * Whether to disable closing the popover when the page is scrolled. */ disableScrollClose: boolean; /** * Whether the popover should autofocus the first slotted child when opened. */ autofocus: boolean; /** * A callback that returns the minimum width of the popover. * By default, the popover minWidth will be as wide as the trigger element. */ calcMinWidth: (referenceEl: HTMLElement) => string; /** * A callback that returns the maximum width of the popover. * By default, the popover maxWidth will be set to `auto` and will grow as needed. */ calcMaxWidth: (_referenceEl: HTMLElement) => string; /** * A callback that returns the minimum height of the popover. * By default, the popover minHeight will be set to `auto` */ calcMinHeight: (_referenceEl: HTMLElement) => string; /** * A callback that returns the maximum height of the popover. * By default, the popover maxHeight will be set to a hard coded pixel value (check source code). */ calcMaxHeight: (_referenceEl: HTMLElement) => string; /** * Whether the popover is nonmodal. When true, the popover will not trap focus and other elements * on the page will still be interactable while the popover is open. */ nonmodal: boolean; /** * When this is set to `true`, the `:backdrop` pseudo-element will be visible if the popover is * in modal mode. When not in modal mode (using the `nonmodal` attribute), this can instead be * set to a selector matching a `` element, in wich case the popover will take * control of that backdrop. * * Example: * ```html * * Open *

Popover content

*
* * ``` */ backdrop?: string; /** * An array of middleware for the Floating UI positioning algorithm. Here you can pass in an array * of middleware to customize positioning to your needs. This array is passed directly to Floting UI, * so you can just follow the documentation here: https://floating-ui.com/docs/middleware * * This property does not have a corresponding attribute, so it can only be set in JavaScript. * * Defaults to `[offset(8), flip()]` */ floatingUIMiddleware: Middleware[]; private _trigger; private _anchor; private _isVirtKbVisible; private _elDefaultSlot; private _elTriggerSlot; private _elDialog; private _handleTriggerRefChanged; private _handleAnchorRefChanged; private _handleTriggerChanged; private _handleAnchorChanged; connectedCallback(): void; disconnectedCallback(): void; render(): any; private _handleOpenChange; private _handleBackdropChange; private _handleMobileLayout; }