@justeattakeaway/pie-tooltip 0.5.2 → 0.7.0

package/dist/react.d.ts

@@ -41,7 +41,7 @@ export declare const PieTooltip: React_2.ForwardRefExoticComponent<React_2.Props
 declare class PieTooltip_2 extends PieElement implements TooltipProps {
     trigger: TooltipProps['trigger'];
     isOpen: boolean;
-    position: "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end" | "right" | "right-start" | "right-end";
+    position: "top-centre" | "top-start" | "top-end" | "bottom-centre" | "bottom-start" | "bottom-end" | "left-centre" | "left-start" | "left-end" | "right-centre" | "right-start" | "right-end";
     size: "default" | "fit-to-content" | "fill-container";
     variant: "default" | "inverse";
     type: "default" | "icon";
@@ -55,11 +55,8 @@ 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;
@@ -81,10 +78,6 @@ 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;
@@ -104,7 +97,7 @@ declare type PieTooltipEvents = {
     onPieTooltipClose?: (event: Event) => void;
 };
 
-export declare const positions: readonly ["top", "top-start", "top-end", "bottom", "bottom-start", "bottom-end", "left", "left-start", "left-end", "right", "right-start", "right-end"];
+export declare const positions: readonly ["top-centre", "top-start", "top-end", "bottom-centre", "bottom-start", "bottom-end", "left-centre", "left-start", "left-end", "right-centre", "right-start", "right-end"];
 
 declare type ReactBaseType = React_2.HTMLAttributes<HTMLElement>;
 
@@ -117,7 +110,7 @@ export declare interface TooltipProps {
     trigger?: string;
     /** When true, the panel is visible. The component never writes to this property. */
     isOpen?: boolean;
-    /** The preferred side and alignment; the panel repositions itself to avoid collisions. */
+    /** The side of the trigger the panel sits on, and its alignment along the cross axis. */
     position?: typeof positions[number];
     /** How the panel sizes itself. Not applied when `type` is `icon`. */
     size?: typeof sizes[number];

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-tooltip",
   "description": "PIE Design System Tooltip built using Web Components",
-  "version": "0.5.2",
+  "version": "0.7.0",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",

package/src/defs.ts

@@ -1,16 +1,16 @@
 import { type ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
 
 export const positions = [
-    'top',
+    'top-centre',
     'top-start',
     'top-end',
-    'bottom',
+    'bottom-centre',
     'bottom-start',
     'bottom-end',
-    'left',
+    'left-centre',
     'left-start',
     'left-end',
-    'right',
+    'right-centre',
     'right-start',
     'right-end',
 ] as const;
@@ -42,7 +42,7 @@ export interface TooltipProps {
     /** When true, the panel is visible. The component never writes to this property. */
     isOpen?: boolean;
 
-    /** The preferred side and alignment; the panel repositions itself to avoid collisions. */
+    /** The side of the trigger the panel sits on, and its alignment along the cross axis. */
     position?: typeof positions[number];
 
     /** How the panel sizes itself. Not applied when `type` is `icon`. */
@@ -80,7 +80,7 @@ export type DefaultProps = ComponentDefaultProps<TooltipProps, keyof Omit<Toolti
 
 export const defaultProps: DefaultProps = {
     isOpen: false,
-    position: 'top',
+    position: 'top-centre',
     size: 'default',
     variant: 'default',
     type: 'default',

package/src/index.ts

@@ -125,115 +125,6 @@ const intersectRects = (a: DOMRect, b: DOMRect): DOMRect | null => {
     return new DOMRect(left, top, right - left, bottom - top);
 };
 
-type TooltipSide = 'top' | 'bottom' | 'left' | 'right';
-type TooltipAlignment = '' | '-start' | '-end';
-
-interface CandidateRect {
-    left: number;
-    top: number;
-    right: number;
-    bottom: number;
-}
-
-const oppositeSide: Record<TooltipSide, TooltipSide> = {
-    top: 'bottom',
-    bottom: 'top',
-    left: 'right',
-    right: 'left',
-};
-
-const crossSides: Record<TooltipSide, Array<TooltipSide>> = {
-    top: ['left', 'right'],
-    bottom: ['left', 'right'],
-    left: ['top', 'bottom'],
-    right: ['top', 'bottom'],
-};
-
-const parsePosition = (position: TooltipProps['position']): { side: TooltipSide; alignment: TooltipAlignment } => {
-    const match = /^(top|bottom|left|right)(-start|-end)?$/.exec(position ?? '');
-
-    if (!match) {
-        return { side: 'top', alignment: '' };
-    }
-
-    return { side: match[1] as TooltipSide, alignment: (match[2] ?? '') as TooltipAlignment };
-};
-
-const toPhysicalSide = (side: TooltipSide, isRtl: boolean): TooltipSide => {
-    if (!isRtl) {
-        return side;
-    }
-
-    if (side === 'left') {
-        return 'right';
-    }
-
-    if (side === 'right') {
-        return 'left';
-    }
-
-    return side;
-};
-
-const getCandidateRect = (
-    side: TooltipSide,
-    alignment: TooltipAlignment,
-    anchor: DOMRect,
-    panelWidth: number,
-    panelHeight: number,
-    offset: number,
-    isRtl: boolean,
-): CandidateRect => {
-    const physicalSide = toPhysicalSide(side, isRtl);
-    const isVerticalSide = physicalSide === 'top' || physicalSide === 'bottom';
-
-    let left = 0;
-    let top = 0;
-
-    if (physicalSide === 'top') {
-        top = anchor.top - offset - panelHeight;
-    } else if (physicalSide === 'bottom') {
-        top = anchor.bottom + offset;
-    } else if (physicalSide === 'left') {
-        left = anchor.left - offset - panelWidth;
-    } else {
-        left = anchor.right + offset;
-    }
-
-    if (isVerticalSide) {
-        if (alignment === '') {
-            left = anchor.left + (anchor.width / 2) - (panelWidth / 2);
-        } else if (alignment === '-start') {
-            left = isRtl ? anchor.right - panelWidth : anchor.left;
-        } else {
-            left = isRtl ? anchor.left : anchor.right - panelWidth;
-        }
-    } else if (alignment === '') {
-        top = anchor.top + (anchor.height / 2) - (panelHeight / 2);
-    } else {
-        top = alignment === '-start' ? anchor.top : anchor.bottom - panelHeight;
-    }
-
-    return {
-        left,
-        top,
-        right: left + panelWidth,
-        bottom: top + panelHeight,
-    };
-};
-
-const containsRect = (boundary: DOMRect, rect: CandidateRect): boolean => rect.left >= boundary.left &&
-    rect.right <= boundary.right &&
-    rect.top >= boundary.top &&
-    rect.bottom <= boundary.bottom;
-
-const getVisibleArea = (boundary: DOMRect, rect: CandidateRect): number => {
-    const width = Math.min(boundary.right, rect.right) - Math.max(boundary.left, rect.left);
-    const height = Math.min(boundary.bottom, rect.bottom) - Math.max(boundary.top, rect.top);
-
-    return Math.max(0, width) * Math.max(0, height);
-};
-
 /**
  * @tagname pie-tooltip
  * @event {Event} pie-tooltip-open - When a configured trigger asks for the panel. Set `isOpen` to `true` in response.
@@ -291,16 +182,10 @@ export class PieTooltip extends PieElement implements TooltipProps {
 
     @state() private _isAnchorVisible = true;
 
-    @state() private _resolvedPosition: TooltipProps['position'] | undefined;
-
     private _clippedTriggerElement: Element | null = null;
 
     private _triggerClippers: Array<Element> = [];
 
-    private _overlayClippers: Array<Element> = [];
-
-    private _collisionSignature: string | null = null;
-
     private _overlayModeDirty = true;
 
     private _triggerTrackingController: AbortController | undefined;
@@ -355,15 +240,9 @@ export class PieTooltip extends PieElement implements TooltipProps {
             this._overlayModeDirty = true;
         }
 
-        const isAnchoringChange = anchoringProperties.some((prop) => changedProperties.has(prop));
-
-        if (isAnchoringChange) {
-            this._collisionSignature = null;
-        }
-
         this.resolveOverlayMode();
 
-        if (isAnchoringChange) {
+        if (anchoringProperties.some((prop) => changedProperties.has(prop))) {
             this.projectOverTrigger();
         }
 
@@ -552,7 +431,6 @@ export class PieTooltip extends PieElement implements TooltipProps {
         const useFixed = fixedClippingAncestors.length < absoluteClippingAncestors.length;
 
         this.style.position = useFixed ? 'fixed' : '';
-        this._overlayClippers = useFixed ? fixedClippingAncestors : absoluteClippingAncestors;
     }
 
     private projectOverTrigger (): void {
@@ -603,121 +481,9 @@ export class PieTooltip extends PieElement implements TooltipProps {
 
         this.style.setProperty('--tooltip-container-inline-size', `${containerInlineSize}px`);
 
-        this.resolveCollision(visibleRect);
-
         this._isPositioned = true;
     }
 
-    private resolveCollision (anchorRect: DOMRect): void {
-        const panel = this.renderRoot.querySelector<HTMLElement>(`.${componentClass}`);
-
-        if (!panel) {
-            return;
-        }
-
-        const boundary = this._getCollisionBoundary();
-
-        if (!boundary) {
-            this._collisionSignature = null;
-            this._setResolvedPosition(this.position ?? defaultProps.position);
-
-            return;
-        }
-
-        const isIconType = this.type === 'icon';
-        const hostStyles = getComputedStyle(this);
-        const isRtl = hostStyles.direction === 'rtl';
-
-        const panelWidth = panel.offsetWidth;
-        const panelHeight = panel.offsetHeight;
-        const signature = [
-            anchorRect.left, anchorRect.top, anchorRect.width, anchorRect.height,
-            boundary.left, boundary.top, boundary.width, boundary.height,
-            panelWidth, panelHeight,
-            isRtl,
-        ].join(':');
-
-        if (this._collisionSignature === signature) {
-            return;
-        }
-
-        this._collisionSignature = signature;
-
-        const offset = parseFloat(hostStyles.getPropertyValue('--tooltip-offset')) || 0;
-        const arrowSize = parseFloat(hostStyles.getPropertyValue('--tooltip-arrow-size')) || 0;
-        const layerOffset = isIconType ? offset : offset + arrowSize;
-
-        const { side: preferredSide, alignment: preferredAlignment } = parsePosition(this.position ?? defaultProps.position);
-
-        let fitting: { side: TooltipSide; alignment: TooltipAlignment } | undefined;
-        let bestFallback: { side: TooltipSide; alignment: TooltipAlignment } | undefined;
-        let bestArea = -1;
-
-        this._getCandidatePositions(preferredSide, preferredAlignment).some(({ side, alignment }) => {
-            const rect = getCandidateRect(
-                side,
-                alignment,
-                anchorRect,
-                panelWidth,
-                panelHeight,
-                layerOffset,
-                isRtl,
-            );
-
-            if (containsRect(boundary, rect)) {
-                fitting = { side, alignment };
-
-                return true;
-            }
-
-            const area = getVisibleArea(boundary, rect);
-
-            if (area > bestArea) {
-                bestArea = area;
-                bestFallback = { side, alignment };
-            }
-
-            return false;
-        });
-
-        const resolved = fitting ?? bestFallback;
-        const resolvedPosition = resolved
-            ? `${resolved.side}${resolved.alignment}` as TooltipProps['position']
-            : this.position ?? defaultProps.position;
-
-        this._setResolvedPosition(resolvedPosition);
-    }
-
-    private _setResolvedPosition (position: TooltipProps['position']): void {
-        if (this._resolvedPosition !== position) {
-            this._resolvedPosition = position;
-        }
-    }
-
-    private _getCollisionBoundary (): DOMRect | null {
-        const { documentElement } = this.ownerDocument;
-        const viewport = new DOMRect(0, 0, documentElement.clientWidth, documentElement.clientHeight);
-
-        return this._overlayClippers.reduce<DOMRect | null>(
-            (rect, clipper) => (rect ? intersectRects(rect, getClipRect(clipper)) : null),
-            viewport,
-        );
-    }
-
-    private _getCandidatePositions (
-        preferredSide: TooltipSide,
-        preferredAlignment: TooltipAlignment,
-    ): Array<{ side: TooltipSide; alignment: TooltipAlignment }> {
-        const sideOrder: Array<TooltipSide> = [preferredSide, oppositeSide[preferredSide], ...crossSides[preferredSide]];
-        const allAlignments: Array<TooltipAlignment> = ['', '-start', '-end'];
-
-        return sideOrder.flatMap((side) => {
-            const alignments = [preferredAlignment, ...allAlignments.filter((alignment) => alignment !== preferredAlignment)];
-
-            return alignments.map((alignment) => ({ side, alignment }));
-        });
-    }
-
     private _refreshTriggerClippers (): void {
         const triggerElement = this._getTriggerElement();
 
@@ -886,15 +652,13 @@ export class PieTooltip extends PieElement implements TooltipProps {
             heading,
             isDismissible,
             isOpen,
-            position: preferredPosition,
+            position,
             size,
             type,
             variant,
-            _resolvedPosition,
             _mode: mode,
         } = this;
 
-        const position = _resolvedPosition ?? preferredPosition;
         const isIconType = type === 'icon';
 
         const layerClasses = {

package/src/tooltip.scss

@@ -1,10 +1,6 @@
 @use '@justeattakeaway/pie-css/scss' as p;
 
-// All twelve position values are generated explicitly, none inferred.
-$tooltip-alignments: ('', '-start', '-end');
-
-// Zero-size, pinned to the containing block's origin. Trigger position is measured relative
-// to this point so the panel resolves against the document rather than the viewport.
+$tooltip-alignments: ('-centre', '-start', '-end');
 
 :host {
     --tooltip-anchor-top: 0;
@@ -13,12 +9,7 @@ $tooltip-alignments: ('', '-start', '-end');
     --tooltip-anchor-height: 0;
     --tooltip-container-inline-size: 0;
     --tooltip-offset: var(--dt-spacing-a);
-
-    // Arrow protrusion depth; base is size × 2 (16px wide × 8px tall).
-    // Declared on the host so the placement layer can account for it.
     --tooltip-arrow-size: 8px;
-
-    // Layer must clear both the offset and the arrow so the arrow tip doesn't touch the trigger.
     --tooltip-layer-offset: calc(var(--tooltip-offset) + var(--tooltip-arrow-size));
 
     position: absolute;
@@ -31,7 +22,7 @@ $tooltip-alignments: ('', '-start', '-end');
     inline-size: 0;
     block-size: 0;
 
-    // Inherits to the anchor; the panel opts back in with `pointer-events: auto`.
+    // The host overlays the trigger; only the panel opts back into pointer events.
     pointer-events: none;
 }
 
@@ -44,7 +35,6 @@ $tooltip-alignments: ('', '-start', '-end');
     block-size: 0;
 }
 
-// Sized and positioned to match the trigger; the placement layer resolves against this box.
 .c-tooltip-anchor {
     position: absolute;
     top: var(--tooltip-anchor-top);
@@ -54,8 +44,6 @@ $tooltip-alignments: ('', '-start', '-end');
     block-size: var(--tooltip-anchor-height);
 }
 
-// Grid so panel alignment uses logical start/center/end. A panel wider than its track overflows
-// evenly from center, keeping it centred on the trigger.
 .c-tooltip-layer {
     position: absolute;
 
@@ -65,8 +53,6 @@ $tooltip-alignments: ('', '-start', '-end');
     visibility: hidden;
     transition: visibility 0s linear 150ms;
 
-    // `is-anchorVisible` is false when the trigger has been scrolled entirely out of a clipping
-    // ancestor: there is nothing left to point at, so the panel hides rather than float free.
     &.is-open.is-positioned.is-anchorVisible {
         visibility: visible;
         transition-delay: 0s;
@@ -100,8 +86,7 @@ $tooltip-alignments: ('', '-start', '-end');
         inset-block-start: calc(100% + var(--tooltip-layer-offset));
     }
 
-    // `left`/`right` resolve on the inline axis and swap in RTL. Their -start/-end alignments
-    // are on the block axis, which has no direction to mirror.
+    // left/right resolve on the inline axis and swap in RTL; their -start/-end alignments do not.
     .c-tooltip-layer--left#{$alignment} {
         inset-inline-end: calc(100% + var(--tooltip-layer-offset));
     }
@@ -112,7 +97,7 @@ $tooltip-alignments: ('', '-start', '-end');
 }
 
 @each $side in (top, bottom, left, right) {
-    .c-tooltip-layer--#{$side} {
+    .c-tooltip-layer--#{$side}-centre {
         place-items: center;
     }
 
@@ -134,15 +119,12 @@ $tooltip-alignments: ('', '-start', '-end');
     --tooltip-padding-block: var(--dt-spacing-b);
     --tooltip-padding-inline: var(--dt-spacing-c);
     --tooltip-close-size: 32px;
+    --tooltip-close-block-inset: var(--dt-spacing-a-small);
     --tooltip-motion-duration: 150ms;
     --tooltip-motion-easing: cubic-bezier(0.45, 0, 0.55, 1);
     --tooltip-motion-translate-x: 0;
     --tooltip-motion-translate-y: 0;
-
-    // Arrow centre offset from the aligned edge for -start/-end. Clear of the corner radius.
     --tooltip-arrow-inset: calc(var(--tooltip-border-radius) + var(--tooltip-arrow-size));
-
-    // Centre position → box inset. Percentages resolve per axis, so one declaration covers both.
     --tooltip-arrow-cross-inset: calc(var(--tooltip-arrow-cross-position, 50%) - var(--tooltip-arrow-size));
 
     // 2px overlap into the panel prevents subpixel gaps between arrow and edge.
@@ -153,9 +135,7 @@ $tooltip-alignments: ('', '-start', '-end');
 
     position: relative;
 
-    // Reset the inherited text layout: a host page that sets `white-space` or `text-wrap` to
-    // `nowrap` (typical of header action bars) would otherwise reach the slotted content and
-    // inflate the panel's min-content size past its own inline-size.
+    // Resets an inherited `nowrap` from the host page that would inflate the panel's min-content size.
     white-space: normal;
     text-wrap: wrap;
 
@@ -235,7 +215,7 @@ $tooltip-alignments: ('', '-start', '-end');
     --tooltip-max-inline-size: none;
 }
 
-// Also declares inline-size to prevent `--tooltip-width` from overriding it.
+// Also declares inline-size so `--tooltip-width` cannot override it.
 .c-tooltip--type-icon {
     --tooltip-border-radius: var(--dt-radius-rounded-e);
     --tooltip-padding-block: var(--dt-spacing-a);
@@ -245,19 +225,12 @@ $tooltip-alignments: ('', '-start', '-end');
 }
 
 .c-tooltip.is-dismissible {
-    // The close button is taller than one content line; reserve its block size.
-    min-block-size: calc(var(--tooltip-close-size) + var(--dt-spacing-b) * 2);
-    padding-inline-end: calc(var(--tooltip-padding-inline) + var(--tooltip-close-size));
-}
+    // Reserves the close button's box so an empty or one-line panel still fits it.
+    min-block-size: calc(var(--tooltip-close-size) + var(--tooltip-close-block-inset) * 2);
 
-.c-tooltip.is-dismissible:not(.has-heading) {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
+    padding-inline-end: calc(var(--tooltip-close-size) + var(--dt-spacing-b));
 }
 
-// Arrow: clip-path triangle, 16px wide × 8px tall. Both insets are logical so the arrow
-// follows the panel when left/right swap in RTL.
 @mixin tooltip-arrow-clip($direction) {
     @if $direction == up {
         inline-size: calc(var(--tooltip-arrow-size) * 2);
@@ -279,7 +252,7 @@ $tooltip-alignments: ('', '-start', '-end');
 }
 
 @each $side in (top, bottom, left, right) {
-    .c-tooltip--#{$side} {
+    .c-tooltip--#{$side}-centre {
         --tooltip-arrow-cross-position: 50%;
     }
 
@@ -349,9 +322,7 @@ $tooltip-alignments: ('', '-start', '-end');
     overflow-wrap: break-word;
 }
 
-// The content is the programmatic focus target in dialog mode (see `focusPanel`). It is never
-// reached by Tab, which moves between the panel's own controls, so it draws no focus ring of
-// its own: the controls inside the panel carry their own focus indicators.
+// Programmatic focus target in dialog mode, never reached by Tab, so it draws no focus ring.
 .c-tooltip-content:focus {
     outline: none;
 }
@@ -359,34 +330,21 @@ $tooltip-alignments: ('', '-start', '-end');
 .c-tooltip.has-action .c-tooltip-action {
     display: flex;
     justify-content: flex-end;
-    margin-block-start: var(--dt-spacing-a);
+    margin-block-start: var(--dt-spacing-b);
+    margin-inline-end: calc((var(--tooltip-padding-inline) - var(--dt-spacing-b)) * -1);
 }
 
 .c-tooltip.is-dismissible.has-action .c-tooltip-action {
     margin-inline-end: calc(var(--tooltip-close-size) * -1);
 }
 
-// Close button is out of flow; reserving its block size on the body aligns the action row with it.
-.c-tooltip.is-dismissible.has-action .c-tooltip-body {
-    min-block-size: var(--tooltip-close-size);
-}
-
-// No heading means one content line; keep it centred against the close button.
-.c-tooltip.is-dismissible.has-action:not(.has-heading) .c-tooltip-body {
-    display: grid;
-    align-content: center;
-}
-
 .c-tooltip-close {
     position: absolute;
-    inset-block-start: var(--dt-spacing-b);
-    inset-inline-end: var(--dt-spacing-b);
+    inset-block-start: var(--tooltip-close-block-inset);
+    inset-inline-end: 0;
 }
 
-// Hover bridge: a transparent pseudo-element extending from each panel edge toward its
-// trigger, covering the --tooltip-layer-offset gap. Keeps the hover region intact so
-// the pointer can travel from the trigger into the panel without the close timer firing.
-// Sized from --tooltip-layer-offset so widening --tooltip-offset cannot open a hole.
+// Hover bridge over the --tooltip-layer-offset gap so the pointer can reach the panel without the close timer firing.
 @each $alignment in $tooltip-alignments {
     .c-tooltip--top#{$alignment}::before {
         content: '';