@justeattakeaway/pie-tooltip 0.1.0 → 0.2.0

package/custom-elements.json

@@ -11,8 +11,168 @@
     {
       "kind": "javascript-module",
       "path": "src/defs.js",
-      "declarations": [],
-      "exports": []
+      "declarations": [
+        {
+          "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]"
+          },
+          "default": "[ 'top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'left-start', 'left-end', 'right', 'right-start', 'right-end', ]"
+        },
+        {
+          "kind": "variable",
+          "name": "sizes",
+          "type": {
+            "text": "['default', 'fit-to-content', 'fill-container']"
+          },
+          "default": "['default', 'fit-to-content', 'fill-container']"
+        },
+        {
+          "kind": "variable",
+          "name": "variants",
+          "type": {
+            "text": "['default', 'inverse']"
+          },
+          "default": "['default', 'inverse']"
+        },
+        {
+          "kind": "variable",
+          "name": "types",
+          "type": {
+            "text": "['default', 'icon']"
+          },
+          "default": "['default', 'icon']"
+        },
+        {
+          "kind": "variable",
+          "name": "headingLevels",
+          "type": {
+            "text": "['h2', 'h3', 'h4', 'h5', 'h6']"
+          },
+          "default": "['h2', 'h3', 'h4', 'h5', 'h6']"
+        },
+        {
+          "kind": "variable",
+          "name": "modes",
+          "type": {
+            "text": "['tooltip', 'dialog']"
+          },
+          "default": "['tooltip', 'dialog']",
+          "description": "The two patterns the panel can present as. Inferred from the `action` slot rather than\nconfigured: an empty `action` slot is a tooltip, a filled one is a non-modal dialog."
+        },
+        {
+          "kind": "variable",
+          "name": "componentSelector",
+          "type": {
+            "text": "string"
+          },
+          "default": "'pie-tooltip'"
+        },
+        {
+          "kind": "variable",
+          "name": "componentClass",
+          "type": {
+            "text": "string"
+          },
+          "default": "'c-tooltip'"
+        },
+        {
+          "kind": "variable",
+          "name": "ON_TOOLTIP_CLOSE_EVENT",
+          "default": "`${componentSelector}-close`"
+        },
+        {
+          "kind": "variable",
+          "name": "defaultProps",
+          "type": {
+            "text": "DefaultProps"
+          },
+          "default": "{ isOpen: false, position: 'top', size: 'default', variant: 'default', type: 'default', isDismissible: false, headingLevel: 'h2', }"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "positions",
+          "declaration": {
+            "name": "positions",
+            "module": "src/defs.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "sizes",
+          "declaration": {
+            "name": "sizes",
+            "module": "src/defs.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "variants",
+          "declaration": {
+            "name": "variants",
+            "module": "src/defs.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "types",
+          "declaration": {
+            "name": "types",
+            "module": "src/defs.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "headingLevels",
+          "declaration": {
+            "name": "headingLevels",
+            "module": "src/defs.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "modes",
+          "declaration": {
+            "name": "modes",
+            "module": "src/defs.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "componentSelector",
+          "declaration": {
+            "name": "componentSelector",
+            "module": "src/defs.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "componentClass",
+          "declaration": {
+            "name": "componentClass",
+            "module": "src/defs.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "ON_TOOLTIP_CLOSE_EVENT",
+          "declaration": {
+            "name": "ON_TOOLTIP_CLOSE_EVENT",
+            "module": "src/defs.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "defaultProps",
+          "declaration": {
+            "name": "defaultProps",
+            "module": "src/defs.js"
+          }
+        }
+      ]
     },
     {
       "kind": "javascript-module",
@@ -22,7 +182,303 @@
           "kind": "class",
           "description": "",
           "name": "PieTooltip",
-          "members": [],
+          "slots": [
+            {
+              "description": "The descriptive content of the panel. Must not contain focusable elements.",
+              "name": "content"
+            },
+            {
+              "description": "An optional slot for interactive content such as a `pie-button`. Filling this slot switches the panel to a non-modal dialog.",
+              "name": "action"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "trigger",
+              "type": {
+                "text": "TooltipProps['trigger']"
+              },
+              "privacy": "public",
+              "attribute": "trigger"
+            },
+            {
+              "kind": "field",
+              "name": "isOpen",
+              "privacy": "public",
+              "attribute": "isOpen"
+            },
+            {
+              "kind": "field",
+              "name": "position",
+              "privacy": "public",
+              "attribute": "position"
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "privacy": "public",
+              "attribute": "size"
+            },
+            {
+              "kind": "field",
+              "name": "variant",
+              "privacy": "public",
+              "attribute": "variant"
+            },
+            {
+              "kind": "field",
+              "name": "type",
+              "privacy": "public",
+              "attribute": "type"
+            },
+            {
+              "kind": "field",
+              "name": "isDismissible",
+              "privacy": "public",
+              "attribute": "isDismissible"
+            },
+            {
+              "kind": "field",
+              "name": "heading",
+              "type": {
+                "text": "TooltipProps['heading']"
+              },
+              "privacy": "public",
+              "attribute": "heading"
+            },
+            {
+              "kind": "field",
+              "name": "headingLevel",
+              "privacy": "public",
+              "attribute": "headingLevel"
+            },
+            {
+              "kind": "field",
+              "name": "aria",
+              "type": {
+                "text": "TooltipProps['aria']"
+              },
+              "privacy": "public",
+              "attribute": "aria"
+            },
+            {
+              "kind": "field",
+              "name": "_assignedActionElements",
+              "type": {
+                "text": "Array<HTMLElement>"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "_originElement",
+              "type": {
+                "text": "HTMLElement | null"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "_hasActionContent",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "_isPositioned",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "_triggerTrackingController",
+              "type": {
+                "text": "AbortController | undefined"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "_directionObserver",
+              "type": {
+                "text": "MutationObserver | undefined"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "_reanchorFrame",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "private",
+              "default": "0"
+            },
+            {
+              "kind": "field",
+              "name": "_shouldResolveOverlayMode",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "_mode",
+              "type": {
+                "text": "TooltipMode | undefined"
+              },
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "startTrackingTrigger",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "stopTrackingTrigger",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "resolveMode",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "resolveOverlayMode",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "projectOverTrigger",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "handleCloseButtonClick",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "renderHeading",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "TemplateResult"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "renderCloseButton",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "TemplateResult"
+                }
+              }
+            }
+          ],
+          "events": [
+            {
+              "type": {
+                "text": "Event"
+              },
+              "description": "When the close button is clicked. Set `isOpen` to `false` in response.",
+              "name": "pie-tooltip-close"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "trigger",
+              "type": {
+                "text": "TooltipProps['trigger']"
+              },
+              "fieldName": "trigger"
+            },
+            {
+              "name": "isOpen",
+              "fieldName": "isOpen"
+            },
+            {
+              "name": "position",
+              "fieldName": "position"
+            },
+            {
+              "name": "size",
+              "fieldName": "size"
+            },
+            {
+              "name": "variant",
+              "fieldName": "variant"
+            },
+            {
+              "name": "type",
+              "fieldName": "type"
+            },
+            {
+              "name": "isDismissible",
+              "fieldName": "isDismissible"
+            },
+            {
+              "name": "heading",
+              "type": {
+                "text": "TooltipProps['heading']"
+              },
+              "fieldName": "heading"
+            },
+            {
+              "name": "headingLevel",
+              "fieldName": "headingLevel"
+            },
+            {
+              "name": "aria",
+              "type": {
+                "text": "TooltipProps['aria']"
+              },
+              "fieldName": "aria"
+            }
+          ],
           "superclass": {
             "name": "PieElement",
             "package": "@justeattakeaway/pie-webc-core/src/internals/PieElement"

package/dist/index.d.ts

@@ -1,16 +1,137 @@
+import { ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
 import { CSSResult } from 'lit';
 import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElement';
-import { TemplateResult } from 'lit-html';
+import { PropertyValues } from 'lit';
+import { TemplateResult } from 'lit';
+
+declare type AriaProps = {
+    /**
+     * 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.
+     */
+    label?: string;
+};
+
+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 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.
+ */
+export declare const modes: readonly ["tooltip", "dialog"];
+
+export declare const ON_TOOLTIP_CLOSE_EVENT = "pie-tooltip-close";
 
 /**
  * @tagname pie-tooltip
+ * @event {Event} pie-tooltip-close - When the close button is clicked. 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.
  */
 export declare class PieTooltip extends PieElement implements TooltipProps {
-    render(): TemplateResult<1>;
+    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";
+    size: "default" | "fit-to-content" | "fill-container";
+    variant: "default" | "inverse";
+    type: "default" | "icon";
+    isDismissible: boolean;
+    heading: TooltipProps['heading'];
+    headingLevel: "h2" | "h3" | "h4" | "h5" | "h6";
+    aria: TooltipProps['aria'];
+    private _assignedActionElements;
+    private _originElement;
+    private _hasActionContent;
+    private _isPositioned;
+    private _triggerTrackingController;
+    private _directionObserver;
+    private _reanchorFrame;
+    private _shouldResolveOverlayMode;
     static styles: CSSResult;
+    private get _mode();
+    protected firstUpdated(): void;
+    protected updated(changedProperties: PropertyValues<this>): void;
+    disconnectedCallback(): void;
+    private startTrackingTrigger;
+    private stopTrackingTrigger;
+    private resolveMode;
+    private resolveOverlayMode;
+    private projectOverTrigger;
+    private handleCloseButtonClick;
+    private renderHeading;
+    private renderCloseButton;
+    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 sizes: readonly ["default", "fit-to-content", "fill-container"];
+
+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.
+     */
+    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.
+     */
+    isOpen?: boolean;
+    /**
+     * 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. `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`.
+     */
+    size?: typeof sizes[number];
+    /**
+     * 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.
+     */
+    type?: typeof types[number];
+    /**
+     * When true, a close button is rendered inside the panel.
+     */
+    isDismissible?: boolean;
+    /**
+     * The text to display in the panel's heading. In dialog mode this also provides the
+     * panel's accessible name.
+     */
+    heading?: string;
+    /**
+     * 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.
+     */
+    aria?: AriaProps;
 }
 
+export declare const types: readonly ["default", "icon"];
+
+export declare const variants: readonly ["default", "inverse"];
+
 export { }