@justeattakeaway/pie-tooltip 0.5.1 → 0.6.0

package/dist/react.d.ts

@@ -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;
@@ -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.1",
+  "version": "0.6.0",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",

package/src/defs.ts

@@ -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`. */

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

@@ -153,6 +153,12 @@ $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.
+    white-space: normal;
+    text-wrap: wrap;
+
     inline-size: var(--tooltip-width, var(--tooltip-inline-size));
     max-inline-size: var(--tooltip-max-inline-size);
     padding-block-start: var(--tooltip-padding-block);