@justeattakeaway/pie-tooltip 0.3.0 → 0.5.0

package/dist/react.d.ts

@@ -6,13 +6,9 @@ import * as React_2 from 'react';
 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;
 };
 
@@ -26,10 +22,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";
@@ -41,7 +34,7 @@ export declare const PieTooltip: React_2.ForwardRefExoticComponent<React_2.Props
 /**
  * @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.
  */
@@ -62,25 +55,36 @@ declare class PieTooltip_2 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;
@@ -109,60 +113,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>;
 }
 

package/dist/react.js

@@ -11,7 +11,7 @@ const i = e({
     onPieTooltipOpen: "pie-tooltip-open",
     // When a configured trigger asks for the panel. Set `isOpen` to `true` in response.
     onPieTooltipClose: "pie-tooltip-close"
-    // When the close button is clicked, or a configured trigger asks to dismiss the panel. Set `isOpen` to `false` in response.
+    // When the close button is clicked, Escape is pressed, or a configured trigger asks to dismiss the panel. Set `isOpen` to `false` in response.
   }
 }), l = i;
 export {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-tooltip",
   "description": "PIE Design System Tooltip built using Web Components",
-  "version": "0.3.0",
+  "version": "0.5.0",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -36,11 +36,11 @@
   "license": "Apache-2.0",
   "devDependencies": {
     "@justeattakeaway/pie-components-config": "0.21.4",
-    "@justeattakeaway/pie-css": "1.9.0",
-    "@justeattakeaway/pie-monorepo-utils": "0.9.10"
+    "@justeattakeaway/pie-css": "1.9.1",
+    "@justeattakeaway/pie-monorepo-utils": "0.9.11"
   },
   "dependencies": {
-    "@justeattakeaway/pie-icon-button": "2.7.35",
+    "@justeattakeaway/pie-icon-button": "2.8.0",
     "@justeattakeaway/pie-icons-webc": "1.29.4",
     "@justeattakeaway/pie-webc-core": "22.0.0"
   },

package/src/defs.ts

@@ -21,92 +21,52 @@ export const types = ['default', 'icon'] as const;
 export const headingLevels = ['h2', 'h3', 'h4', 'h5', 'h6'] as const;
 export const triggers = ['hover', 'focus', 'click'] as const;
 
-/**
- * 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 const modes = ['tooltip', 'dialog'] as const;
 
 export type TooltipMode = typeof modes[number];
 export type TooltipTrigger = typeof triggers[number];
 
 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;
 };
 
 export 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>;
 }