@justeattakeaway/pie-tooltip 0.2.0 → 0.4.0

package/dist/react.d.ts

@@ -20,7 +20,7 @@ export declare const componentClass = "c-tooltip";
 
 export declare const componentSelector = "pie-tooltip";
 
-export declare type DefaultProps = ComponentDefaultProps<TooltipProps, keyof Omit<TooltipProps, 'trigger' | 'heading' | 'aria'>>;
+export declare type DefaultProps = ComponentDefaultProps<TooltipProps, keyof Omit<TooltipProps, 'trigger' | 'heading' | 'aria' | 'triggers'>>;
 
 export declare const defaultProps: DefaultProps;
 
@@ -34,11 +34,14 @@ export declare const modes: readonly ["tooltip", "dialog"];
 
 export declare const ON_TOOLTIP_CLOSE_EVENT = "pie-tooltip-close";
 
+export declare const ON_TOOLTIP_OPEN_EVENT = "pie-tooltip-open";
+
 export declare const PieTooltip: React_2.ForwardRefExoticComponent<React_2.PropsWithChildren<Omit<React_2.PropsWithoutRef<TooltipProps>, "children">> & React_2.RefAttributes<PieTooltip_2> & PieTooltipEvents & ReactBaseType>;
 
 /**
  * @tagname pie-tooltip
- * @event {Event} pie-tooltip-close - When the close button is clicked. Set `isOpen` to `false` in response.
+ * @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.
  * @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.
  */
@@ -53,14 +56,25 @@ declare class PieTooltip_2 extends PieElement implements TooltipProps {
     heading: TooltipProps['heading'];
     headingLevel: "h2" | "h3" | "h4" | "h5" | "h6";
     aria: TooltipProps['aria'];
+    triggers: TooltipProps['triggers'];
     private _assignedActionElements;
     private _originElement;
     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;
     static styles: CSSResult;
     private get _mode();
     protected firstUpdated(): void;
@@ -71,13 +85,26 @@ declare class PieTooltip_2 extends PieElement implements TooltipProps {
     private resolveMode;
     private resolveOverlayMode;
     private projectOverTrigger;
+    private resolveCollision;
+    private _setResolvedPosition;
+    private _getCollisionBoundary;
+    private _getCandidatePositions;
+    private _refreshTriggerClippers;
     private handleCloseButtonClick;
+    private _getTriggerElement;
+    private _requestOpen;
+    private _requestClose;
+    private _startHoverCloseTimer;
+    private _cancelHoverCloseTimer;
+    private _rebuildInteractionListeners;
+    private _teardownInteractionListeners;
     private renderHeading;
     private renderCloseButton;
     render(): TemplateResult;
 }
 
 declare type PieTooltipEvents = {
+    onPieTooltipOpen?: (event: Event) => void;
     onPieTooltipClose?: (event: Event) => void;
 };
 
@@ -101,7 +128,10 @@ export declare interface TooltipProps {
      */
     isOpen?: boolean;
     /**
-     * The side of the trigger the panel sits on, and its alignment along the cross axis.
+     * The preferred side of the trigger the panel sits on, and its alignment along the cross axis.
+     * The component repositions the panel automatically — flipping to the opposite side and/or
+     * shifting its alignment — when the preferred position would collide with the viewport or with
+     * a clipping scroll container. This behaviour cannot be disabled.
      */
     position?: typeof positions[number];
     /**
@@ -137,8 +167,20 @@ export declare interface TooltipProps {
      * 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.
+     */
+    triggers?: Array<TooltipTrigger>;
 }
 
+export declare type TooltipTrigger = typeof triggers[number];
+
+export declare const triggers: readonly ["hover", "focus", "click"];
+
 export declare const types: readonly ["default", "icon"];
 
 export declare const variants: readonly ["default", "inverse"];

package/dist/react.js

@@ -1,27 +1,31 @@
 import * as o from "react";
 import { createComponent as e } from "@lit/react";
 import { PieTooltip as t } from "./index.js";
-import { ON_TOOLTIP_CLOSE_EVENT as n, componentClass as r, componentSelector as c, defaultProps as T, headingLevels as P, modes as f, positions as C, sizes as d, types as N, variants as O } from "./index.js";
+import { ON_TOOLTIP_CLOSE_EVENT as r, ON_TOOLTIP_OPEN_EVENT as m, componentClass as T, componentSelector as P, defaultProps as c, headingLevels as O, modes as N, positions as E, sizes as _, triggers as f, types as C, variants as d } from "./index.js";
 const i = e({
   displayName: "PieTooltip",
   elementClass: t,
   react: o,
   tagName: "pie-tooltip",
   events: {
+    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. Set `isOpen` to `false` in response.
+    // When the close button is clicked, or a configured trigger asks to dismiss the panel. Set `isOpen` to `false` in response.
   }
 }), l = i;
 export {
-  n as ON_TOOLTIP_CLOSE_EVENT,
+  r as ON_TOOLTIP_CLOSE_EVENT,
+  m as ON_TOOLTIP_OPEN_EVENT,
   l as PieTooltip,
-  r as componentClass,
-  c as componentSelector,
-  T as defaultProps,
-  P as headingLevels,
-  f as modes,
-  C as positions,
-  d as sizes,
-  N as types,
-  O as variants
+  T as componentClass,
+  P as componentSelector,
+  c as defaultProps,
+  O as headingLevels,
+  N as modes,
+  E as positions,
+  _ as sizes,
+  f as triggers,
+  C as types,
+  d as variants
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-tooltip",
   "description": "PIE Design System Tooltip built using Web Components",
-  "version": "0.2.0",
+  "version": "0.4.0",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -36,13 +36,13 @@
   "license": "Apache-2.0",
   "devDependencies": {
     "@justeattakeaway/pie-components-config": "0.21.4",
-    "@justeattakeaway/pie-css": "1.8.0",
-    "@justeattakeaway/pie-monorepo-utils": "0.9.9"
+    "@justeattakeaway/pie-css": "1.9.0",
+    "@justeattakeaway/pie-monorepo-utils": "0.9.10"
   },
   "dependencies": {
-    "@justeattakeaway/pie-icon-button": "2.7.32",
-    "@justeattakeaway/pie-icons-webc": "1.29.1",
-    "@justeattakeaway/pie-webc-core": "21.0.0"
+    "@justeattakeaway/pie-icon-button": "2.7.35",
+    "@justeattakeaway/pie-icons-webc": "1.29.4",
+    "@justeattakeaway/pie-webc-core": "22.0.0"
   },
   "customElements": "custom-elements.json",
   "sideEffects": [

package/src/defs.ts

@@ -19,6 +19,7 @@ export const sizes = ['default', 'fit-to-content', 'fill-container'] as const;
 export const variants = ['default', 'inverse'] as const;
 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
@@ -27,6 +28,7 @@ export const headingLevels = ['h2', 'h3', 'h4', 'h5', 'h6'] as const;
 export const modes = ['tooltip', 'dialog'] as const;
 
 export type TooltipMode = typeof modes[number];
+export type TooltipTrigger = typeof triggers[number];
 
 type AriaProps = {
     /**
@@ -54,7 +56,10 @@ export interface TooltipProps {
     isOpen?: boolean;
 
     /**
-     * The side of the trigger the panel sits on, and its alignment along the cross axis.
+     * The preferred side of the trigger the panel sits on, and its alignment along the cross axis.
+     * The component repositions the panel automatically — flipping to the opposite side and/or
+     * shifting its alignment — when the preferred position would collide with the viewport or with
+     * a clipping scroll container. This behaviour cannot be disabled.
      */
     position?: typeof positions[number];
 
@@ -97,14 +102,24 @@ export interface TooltipProps {
      * 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.
+     */
+    triggers?: Array<TooltipTrigger>;
 }
 
 export const componentSelector = 'pie-tooltip';
 export const componentClass = 'c-tooltip';
 
+export const ON_TOOLTIP_OPEN_EVENT = `${componentSelector}-open`;
 export const ON_TOOLTIP_CLOSE_EVENT = `${componentSelector}-close`;
 
-export type DefaultProps = ComponentDefaultProps<TooltipProps, keyof Omit<TooltipProps, 'trigger' | 'heading' | 'aria'>>;
+export type DefaultProps = ComponentDefaultProps<TooltipProps, keyof Omit<TooltipProps, 'trigger' | 'heading' | 'aria' | 'triggers'>>;
 
 export const defaultProps: DefaultProps = {
     isOpen: false,