@justeattakeaway/pie-tooltip 0.5.2 → 0.7.0

package/README.md

@@ -48,7 +48,7 @@ Ideally, you should install the component using the **`@justeattakeaway/pie-webc
 |---|---|---|---|
 | `trigger` | Any string | The `id` of the element the panel is anchored to. The trigger lives elsewhere in the DOM and is never slotted into the tooltip. | `undefined` |
 | `isOpen` | `true`, `false` | When true, the panel is visible. The component never writes to this property. | `false` |
-| `position` | `top`, `top-start`, `top-end`, `bottom`, `bottom-start`, `bottom-end`, `left`, `left-start`, `left-end`, `right`, `right-start`, `right-end` | The preferred side of the trigger the panel sits on, and its alignment along the cross axis. The panel repositions itself when this would collide with the viewport or a clipping scroll container. | `top` |
+| `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` | The side of the trigger the panel sits on, and its alignment along the cross axis. | `top-centre` |
 | `size` | `default`, `fit-to-content`, `fill-container` | 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`. | `default` |
 | `variant` | `default`, `inverse` | The colour treatment of the panel. `default` is the dark panel, `inverse` the light one. | `default` |
 | `type` | `default`, `icon` | 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. | `default` |
@@ -98,24 +98,13 @@ Place the tooltip next to its trigger element in the DOM for the best accessibil
 `position` names a side and, optionally, an alignment along the opposite axis:
 
 ```
-top      top-start      top-end
-bottom   bottom-start   bottom-end
-left     left-start     left-end
-right    right-start    right-end
+top-centre    top-start      top-end
+bottom-centre bottom-start   bottom-end
+left-centre   left-start     left-end
+right-centre  right-start    right-end
 ```
 
-In right-to-left languages, everything on the inline axis mirrors. The alignments follow the reading direction, so `top-start` aligns against the right-hand edge, and `left` and `right` swap: a panel asked for on the left appears on the right. The `-start` and `-end` alignments of `left` and `right` are on the block axis, which has no direction to mirror, so only the side moves.
-
-### Collision detection
-
-`position` is a preference, not a guarantee. Before the panel is shown, and on every scroll, resize or direction change while it is open, the component measures the panel against the space available and repositions it if the preferred position would collide.
-
-- It flips to the opposite side first: `top` to `bottom`, and so on.
-- It then tries the remaining sides.
-- Within a side, it shifts the alignment (for example `top-start` to `top-end`) so the panel stays fully in view.
-- If no position fits entirely, it uses whichever position shows the most of the panel.
-
-The available space is the viewport, narrowed by any ancestor that clips the panel. Collision detection is always on and cannot be disabled.
+In right-to-left languages, everything on the inline axis mirrors. The alignments follow the reading direction, so `top-start` aligns against the right-hand edge, and the `left` and `right` sides swap: a panel asked for on the left appears on the right. The `-start` and `-end` alignments of the `left` and `right` sides are on the block axis, which has no direction to mirror, so only the side moves.
 
 ## Sizing
 

package/custom-elements.json

@@ -16,9 +16,9 @@
           "kind": "variable",
           "name": "positions",
           "type": {
-            "text": "[\n    'top',\n    'top-start',\n    'top-end',\n    'bottom',\n    'bottom-start',\n    'bottom-end',\n    'left',\n    'left-start',\n    'left-end',\n    'right',\n    'right-start',\n    'right-end',\n]"
+            "text": "[\n    'top-centre',\n    'top-start',\n    'top-end',\n    'bottom-centre',\n    'bottom-start',\n    'bottom-end',\n    'left-centre',\n    'left-start',\n    'left-end',\n    'right-centre',\n    'right-start',\n    'right-end',\n]"
           },
-          "default": "[ 'top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'left-start', 'left-end', 'right', 'right-start', 'right-end', ]"
+          "default": "[ 'top-centre', 'top-start', 'top-end', 'bottom-centre', 'bottom-start', 'bottom-end', 'left-centre', 'left-start', 'left-end', 'right-centre', 'right-start', 'right-end', ]"
         },
         {
           "kind": "variable",
@@ -101,7 +101,7 @@
           "type": {
             "text": "DefaultProps"
           },
-          "default": "{ isOpen: false, position: 'top', size: 'default', variant: 'default', type: 'default', isDismissible: false, headingLevel: 'h2', }"
+          "default": "{ isOpen: false, position: 'top-centre', size: 'default', variant: 'default', type: 'default', isDismissible: false, headingLevel: 'h2', }"
         }
       ],
       "exports": [
@@ -343,14 +343,6 @@
               "privacy": "private",
               "default": "true"
             },
-            {
-              "kind": "field",
-              "name": "_resolvedPosition",
-              "type": {
-                "text": "TooltipProps['position'] | undefined"
-              },
-              "privacy": "private"
-            },
             {
               "kind": "field",
               "name": "_clippedTriggerElement",
@@ -369,24 +361,6 @@
               "privacy": "private",
               "default": "[]"
             },
-            {
-              "kind": "field",
-              "name": "_overlayClippers",
-              "type": {
-                "text": "Array<Element>"
-              },
-              "privacy": "private",
-              "default": "[]"
-            },
-            {
-              "kind": "field",
-              "name": "_collisionSignature",
-              "type": {
-                "text": "string | null"
-              },
-              "privacy": "private",
-              "default": "null"
-            },
             {
               "kind": "field",
               "name": "_overlayModeDirty",
@@ -538,76 +512,6 @@
                 }
               }
             },
-            {
-              "kind": "method",
-              "name": "resolveCollision",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "anchorRect",
-                  "type": {
-                    "text": "DOMRect"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "_setResolvedPosition",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "position",
-                  "type": {
-                    "text": "TooltipProps['position']"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "_getCollisionBoundary",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "DOMRect | null"
-                }
-              }
-            },
-            {
-              "kind": "method",
-              "name": "_getCandidatePositions",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "Array<{ side: TooltipSide; alignment: TooltipAlignment }>"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "preferredSide",
-                  "type": {
-                    "text": "TooltipSide"
-                  }
-                },
-                {
-                  "name": "preferredAlignment",
-                  "type": {
-                    "text": "TooltipAlignment"
-                  }
-                }
-              ]
-            },
             {
               "kind": "method",
               "name": "_refreshTriggerClippers",

package/dist/index.d.ts

@@ -38,7 +38,7 @@ export declare const ON_TOOLTIP_OPEN_EVENT = "pie-tooltip-open";
 export declare class PieTooltip 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";
@@ -52,11 +52,8 @@ 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;
@@ -78,10 +75,6 @@ export declare class PieTooltip extends PieElement implements TooltipProps {
     private resolveMode;
     private resolveOverlayMode;
     private projectOverTrigger;
-    private resolveCollision;
-    private _setResolvedPosition;
-    private _getCollisionBoundary;
-    private _getCandidatePositions;
     private _refreshTriggerClippers;
     private handleCloseButtonClick;
     private _getTriggerElement;
@@ -96,7 +89,7 @@ export declare class PieTooltip extends PieElement implements TooltipProps {
     render(): TemplateResult;
 }
 
-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"];
 
 export declare const sizes: readonly ["default", "fit-to-content", "fill-container"];
 
@@ -107,7 +100,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];