@justeattakeaway/pie-tooltip 0.3.0 → 0.5.0

package/dist/index.d.ts

@@ -5,13 +5,9 @@ import { PropertyValues } from 'lit';
 import { TemplateResult } from 'lit';
 
 declare type AriaProps = {
-    /**
-     * The accessible name for the close button. Required whenever `isDismissible` is set.
-     */
+    /** The accessible name for the close button. Required whenever `isDismissible` is set. */
     close?: string;
-    /**
-     * The accessible name for the panel in dialog mode. Only used when `heading` is not provided.
-     */
+    /** The accessible name for the panel in dialog mode, when no `heading` is provided. */
     label?: string;
 };
 
@@ -25,10 +21,7 @@ export declare const defaultProps: DefaultProps;
 
 export declare const headingLevels: readonly ["h2", "h3", "h4", "h5", "h6"];
 
-/**
- * The two patterns the panel can present as. Inferred from the `action` slot rather than
- * configured: an empty `action` slot is a tooltip, a filled one is a non-modal dialog.
- */
+/** The two patterns the panel can present as, inferred from the `action` slot. */
 export declare const modes: readonly ["tooltip", "dialog"];
 
 export declare const ON_TOOLTIP_CLOSE_EVENT = "pie-tooltip-close";
@@ -38,7 +31,7 @@ export declare const ON_TOOLTIP_OPEN_EVENT = "pie-tooltip-open";
 /**
  * @tagname pie-tooltip
  * @event {Event} pie-tooltip-open - When a configured trigger asks for the panel. Set `isOpen` to `true` in response.
- * @event {Event} pie-tooltip-close - When the close button is clicked, or a configured trigger asks to dismiss the panel. Set `isOpen` to `false` in response.
+ * @event {Event} pie-tooltip-close - When the close button is clicked, Escape is pressed, or a configured trigger asks to dismiss the panel. Set `isOpen` to `false` in response.
  * @slot content - The descriptive content of the panel. Must not contain focusable elements.
  * @slot action - An optional slot for interactive content such as a `pie-button`. Filling this slot switches the panel to a non-modal dialog.
  */
@@ -59,25 +52,36 @@ export declare class PieTooltip extends PieElement implements TooltipProps {
     private _hasActionContent;
     private _isPositioned;
     private _isAnchorVisible;
+    private _resolvedPosition;
     private _clippedTriggerElement;
     private _triggerClippers;
+    private _overlayClippers;
+    private _collisionSignature;
+    private _overlayModeDirty;
     private _triggerTrackingController;
     private _interactionController;
     private _directionObserver;
     private _triggerObserver;
     private _reanchorFrame;
-    private _shouldResolveOverlayMode;
     private _hoverCloseTimer;
+    private _openedByClick;
+    private readonly _instanceId;
+    private get _headingId();
     static styles: CSSResult;
     private get _mode();
     protected firstUpdated(): void;
     protected updated(changedProperties: PropertyValues<this>): void;
     disconnectedCallback(): void;
+    focusPanel(): Promise<boolean>;
     private startTrackingTrigger;
     private stopTrackingTrigger;
     private resolveMode;
     private resolveOverlayMode;
     private projectOverTrigger;
+    private resolveCollision;
+    private _setResolvedPosition;
+    private _getCollisionBoundary;
+    private _getCandidatePositions;
     private _refreshTriggerClippers;
     private handleCloseButtonClick;
     private _getTriggerElement;
@@ -99,60 +103,27 @@ export declare const sizes: readonly ["default", "fit-to-content", "fill-contain
 export declare type TooltipMode = typeof modes[number];
 
 export declare interface TooltipProps {
-    /**
-     * The `id` of the element the panel is anchored to. The trigger lives elsewhere in the
-     * DOM and is never slotted into the tooltip.
-     */
+    /** The `id` of the element the panel is anchored to. */
     trigger?: string;
-    /**
-     * When true, the panel is visible. The component never writes to this property: the
-     * consumer owns it and updates it in response to the close event.
-     */
+    /** When true, the panel is visible. The component never writes to this property. */
     isOpen?: boolean;
-    /**
-     * The side of the trigger the panel sits on, and its alignment along the cross axis.
-     */
+    /** The preferred side and alignment; the panel repositions itself to avoid collisions. */
     position?: typeof positions[number];
-    /**
-     * How the panel sizes itself. `default` is a fixed 280px and wraps, `fit-to-content` is as
-     * wide as its content, and `fill-container` matches the inline size of the trigger's parent
-     * element. Not applied when `type` is `icon`.
-     */
+    /** How the panel sizes itself. Not applied when `type` is `icon`. */
     size?: typeof sizes[number];
-    /**
-     * The colour treatment of the panel. `default` is the dark panel, `inverse` the light one.
-     */
+    /** The colour treatment of the panel. `default` is the dark panel, `inverse` the light one. */
     variant?: typeof variants[number];
-    /**
-     * The presentation of the panel. `icon` is the compact treatment intended for icon triggers:
-     * it has no arrow and is always as wide as its content, so `size` and `--tooltip-width` have
-     * no effect on it.
-     */
+    /** The presentation of the panel. `icon` is the compact, arrow-less treatment. */
     type?: typeof types[number];
-    /**
-     * When true, a close button is rendered inside the panel.
-     */
+    /** When true, a close button is rendered inside the panel and the panel presents as a non-modal dialog, so it needs `heading` or `aria.label` for its accessible name. */
     isDismissible?: boolean;
-    /**
-     * The text to display in the panel's heading. In dialog mode this also provides the
-     * panel's accessible name.
-     */
+    /** The text to display in the panel's heading. In dialog mode this also names the panel. */
     heading?: string;
-    /**
-     * The HTML heading tag to use for the panel's heading. Can be h2-h6.
-     */
+    /** The HTML heading tag to use for the panel's heading. Can be h2-h6. */
     headingLevel?: typeof headingLevels[number];
-    /**
-     * The ARIA labels used for various parts of the tooltip.
-     */
+    /** The ARIA labels used for various parts of the tooltip. */
     aria?: AriaProps;
-    /**
-     * Which interactions request that the panel opens and closes. The component never opens or
-     * closes itself: a configured interaction emits `pie-tooltip-open` or `pie-tooltip-close`
-     * and the consumer decides whether to honour it by setting `isOpen`. Empty by default, so
-     * no interaction is watched at all. Configure `hover` and `focus` together for keyboard
-     * reachability, and `click` for pointer users.
-     */
+    /** Which interactions request that the panel opens and closes. */
     triggers?: Array<TooltipTrigger>;
 }