@primer/view-components 0.3.1 → 0.4.0-rc.1aadd47d

package/app/components/primer/alpha/action_menu/action_menu_element.d.ts

@@ -1,6 +1,6 @@
 import IncludeFragmentElement from '@github/include-fragment-element';
-declare type SelectVariant = 'none' | 'single' | 'multiple' | null;
-declare type SelectedItem = {
+type SelectVariant = 'none' | 'single' | 'multiple' | null;
+type SelectedItem = {
     label: string | null | undefined;
     value: string | null | undefined;
     element: Element;

package/app/components/primer/alpha/tool_tip.d.ts

@@ -1,4 +1,5 @@
-declare type Direction = 'n' | 's' | 'e' | 'w' | 'ne' | 'se' | 'nw' | 'sw';
+import '@oddbird/popover-polyfill';
+type Direction = 'n' | 's' | 'e' | 'w' | 'ne' | 'se' | 'nw' | 'sw';
 declare class ToolTipElement extends HTMLElement {
     #private;
     styles(): string;
@@ -13,7 +14,7 @@ declare class ToolTipElement extends HTMLElement {
     get hiddenFromView(): true | false;
     connectedCallback(): void;
     disconnectedCallback(): void;
-    handleEvent(event: Event): void;
+    handleEvent(event: Event): Promise<void>;
     static observedAttributes: string[];
     attributeChangedCallback(name: string): void;
 }

package/app/components/primer/alpha/tool_tip.js

@@ -10,10 +10,11 @@ var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (
     return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
 };
 var _ToolTipElement_instances, _ToolTipElement_abortController, _ToolTipElement_align, _ToolTipElement_side, _ToolTipElement_allowUpdatePosition, _ToolTipElement_update, _ToolTipElement_updateControlReference, _ToolTipElement_updateDirection, _ToolTipElement_updatePosition;
+import '@oddbird/popover-polyfill';
 import { getAnchoredPosition } from '@primer/behaviors';
-const TOOLTIP_OPEN_CLASS = 'tooltip-open';
 const TOOLTIP_ARROW_EDGE_OFFSET = 6;
 const TOOLTIP_SR_ONLY_CLASS = 'sr-only';
+const TOOLTIP_OFFSET = 10;
 const DIRECTION_CLASSES = [
     'tooltip-n',
     'tooltip-s',
@@ -24,6 +25,13 @@ const DIRECTION_CLASSES = [
     'tooltip-nw',
     'tooltip-sw'
 ];
+function focusOutListener() {
+    for (const tooltip of openTooltips) {
+        tooltip.hidePopover();
+    }
+}
+const tooltips = new Set();
+const openTooltips = new Set();
 class ToolTipElement extends HTMLElement {
     constructor() {
         super(...arguments);
@@ -36,12 +44,10 @@ class ToolTipElement extends HTMLElement {
     styles() {
         return `
       :host {
-        position: absolute;
-        z-index: 1000000;
-        padding: .5em .75em;
+        padding: .5em .75em !important;
         font: normal normal 11px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
         -webkit-font-smoothing: subpixel-antialiased;
-        color: var(--color-fg-on-emphasis);
+        color: var(--color-fg-on-emphasis) !important;
         text-align: center;
         text-decoration: none;
         text-shadow: none;
@@ -49,13 +55,16 @@ class ToolTipElement extends HTMLElement {
         letter-spacing: normal;
         word-wrap: break-word;
         white-space: pre;
-        background: var(--color-neutral-emphasis-plus);
+        background: var(--color-neutral-emphasis-plus) !important;
         border-radius: 6px;
+        border: 0 !important;
         opacity: 0;
         max-width: 250px;
         word-wrap: break-word;
         white-space: normal;
-        width: max-content;
+        width: max-content !important;
+        inset: var(--tool-tip-position-top, 0) auto auto var(--tool-tip-position-left, 0) !important;
+        overflow: visible !important;
       }
 
       :host:before{
@@ -69,7 +78,7 @@ class ToolTipElement extends HTMLElement {
 
       @keyframes tooltip-appear {
         from {
-          opacity: 0
+          opacity: 0;
         }
         to {
           opacity: 1
@@ -85,8 +94,17 @@ class ToolTipElement extends HTMLElement {
         content: ""
       }
 
-      :host(.${TOOLTIP_OPEN_CLASS}),
-      :host(.${TOOLTIP_OPEN_CLASS}):before {
+      :host(:popover-open),
+      :host(:popover-open):before {
+        animation-name: tooltip-appear;
+        animation-duration: .1s;
+        animation-fill-mode: forwards;
+        animation-timing-function: ease-in;
+        animation-delay: .4s
+      }
+
+      :host(.\\:popover-open),
+      :host(.\\:popover-open):before {
         animation-name: tooltip-appear;
         animation-duration: .1s;
         animation-fill-mode: forwards;
@@ -177,16 +195,22 @@ class ToolTipElement extends HTMLElement {
     get control() {
         return this.ownerDocument.getElementById(this.htmlFor);
     }
+    /* @deprecated */
     set hiddenFromView(value) {
-        this.classList.toggle(TOOLTIP_SR_ONLY_CLASS, value);
-        if (this.isConnected)
-            __classPrivateFieldGet(this, _ToolTipElement_instances, "m", _ToolTipElement_update).call(this);
+        if (value) {
+            this.hidePopover();
+        }
+        else {
+            this.showPopover();
+        }
     }
+    /* @deprecated */
     get hiddenFromView() {
-        return this.classList.contains(TOOLTIP_SR_ONLY_CLASS);
+        return !this.matches(':popover-open');
     }
     connectedCallback() {
-        var _a;
+        var _a, _b;
+        tooltips.add(this);
         __classPrivateFieldGet(this, _ToolTipElement_instances, "m", _ToolTipElement_updateControlReference).call(this);
         __classPrivateFieldGet(this, _ToolTipElement_instances, "m", _ToolTipElement_updateDirection).call(this);
         if (!this.shadowRoot) {
@@ -195,7 +219,7 @@ class ToolTipElement extends HTMLElement {
             style.textContent = this.styles();
             shadow.appendChild(document.createElement('slot'));
         }
-        this.hiddenFromView = true;
+        __classPrivateFieldGet(this, _ToolTipElement_instances, "m", _ToolTipElement_update).call(this, false);
         __classPrivateFieldSet(this, _ToolTipElement_allowUpdatePosition, true, "f");
         if (!this.control)
             return;
@@ -204,35 +228,48 @@ class ToolTipElement extends HTMLElement {
         __classPrivateFieldSet(this, _ToolTipElement_abortController, new AbortController(), "f");
         const { signal } = __classPrivateFieldGet(this, _ToolTipElement_abortController, "f");
         this.addEventListener('mouseleave', this, { signal });
+        this.addEventListener('toggle', this, { signal });
         this.control.addEventListener('mouseenter', this, { signal });
         this.control.addEventListener('mouseleave', this, { signal });
         this.control.addEventListener('focus', this, { signal });
-        this.control.addEventListener('blur', this, { signal });
+        this.control.addEventListener('mousedown', this, { signal });
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore popoverTargetElement is not in the type definition
+        (_b = this.control.popoverTargetElement) === null || _b === void 0 ? void 0 : _b.addEventListener('beforetoggle', this, {
+            signal
+        });
+        this.ownerDocument.addEventListener('focusout', focusOutListener);
         this.ownerDocument.addEventListener('keydown', this, { signal });
-        __classPrivateFieldGet(this, _ToolTipElement_instances, "m", _ToolTipElement_update).call(this);
     }
     disconnectedCallback() {
         var _a;
+        tooltips.delete(this);
+        openTooltips.delete(this);
         (_a = __classPrivateFieldGet(this, _ToolTipElement_abortController, "f")) === null || _a === void 0 ? void 0 : _a.abort();
     }
-    handleEvent(event) {
+    async handleEvent(event) {
         if (!this.control)
             return;
+        const showing = this.matches(':popover-open');
         // Ensures that tooltip stays open when hovering between tooltip and element
         // WCAG Success Criterion 1.4.13 Hoverable
-        if ((event.type === 'mouseenter' || event.type === 'focus') && this.hiddenFromView) {
-            this.hiddenFromView = false;
-        }
-        else if (event.type === 'blur') {
-            this.hiddenFromView = true;
-        }
-        else if (event.type === 'mouseleave' &&
+        const shouldShow = event.type === 'mouseenter' || event.type === 'focus';
+        const isMouseLeaveFromButton = event.type === 'mouseleave' &&
             event.relatedTarget !== this.control &&
-            event.relatedTarget !== this) {
-            this.hiddenFromView = true;
+            event.relatedTarget !== this;
+        const isEscapeKeydown = event.type === 'keydown' && event.key === 'Escape';
+        const isMouseDownOnButton = event.type === 'mousedown' && event.currentTarget === this.control;
+        const isOpeningOtherPopover = event.type === 'beforetoggle' && event.currentTarget !== this;
+        const shouldHide = isMouseLeaveFromButton || isEscapeKeydown || isMouseDownOnButton || isOpeningOtherPopover;
+        await Promise.resolve();
+        if (!showing && shouldShow) {
+            this.showPopover();
         }
-        else if (event.type === 'keydown' && event.key === 'Escape' && !this.hiddenFromView) {
-            this.hiddenFromView = true;
+        else if (showing && shouldHide) {
+            this.hidePopover();
+        }
+        if (event.type === 'toggle') {
+            __classPrivateFieldGet(this, _ToolTipElement_instances, "m", _ToolTipElement_update).call(this, event.newState === 'open');
         }
     }
     attributeChangedCallback(name) {
@@ -246,18 +283,21 @@ class ToolTipElement extends HTMLElement {
         }
     }
 }
-_ToolTipElement_abortController = new WeakMap(), _ToolTipElement_align = new WeakMap(), _ToolTipElement_side = new WeakMap(), _ToolTipElement_allowUpdatePosition = new WeakMap(), _ToolTipElement_instances = new WeakSet(), _ToolTipElement_update = function _ToolTipElement_update() {
-    if (this.hiddenFromView) {
-        this.classList.remove(TOOLTIP_OPEN_CLASS, ...DIRECTION_CLASSES);
-    }
-    else {
-        this.classList.add(TOOLTIP_OPEN_CLASS);
-        for (const tooltip of this.ownerDocument.querySelectorAll(this.tagName)) {
+_ToolTipElement_abortController = new WeakMap(), _ToolTipElement_align = new WeakMap(), _ToolTipElement_side = new WeakMap(), _ToolTipElement_allowUpdatePosition = new WeakMap(), _ToolTipElement_instances = new WeakSet(), _ToolTipElement_update = function _ToolTipElement_update(isOpen) {
+    if (isOpen) {
+        openTooltips.add(this);
+        this.classList.remove(TOOLTIP_SR_ONLY_CLASS);
+        for (const tooltip of tooltips) {
             if (tooltip !== this)
-                tooltip.hiddenFromView = true;
+                tooltip.hidePopover();
         }
         __classPrivateFieldGet(this, _ToolTipElement_instances, "m", _ToolTipElement_updatePosition).call(this);
     }
+    else {
+        openTooltips.delete(this);
+        this.classList.remove(...DIRECTION_CLASSES);
+        this.classList.add(TOOLTIP_SR_ONLY_CLASS);
+    }
 }, _ToolTipElement_updateControlReference = function _ToolTipElement_updateControlReference() {
     if (!this.id || !this.control)
         return;
@@ -331,10 +371,8 @@ _ToolTipElement_abortController = new WeakMap(), _ToolTipElement_align = new Wea
 }, _ToolTipElement_updatePosition = function _ToolTipElement_updatePosition() {
     if (!this.control)
         return;
-    if (!__classPrivateFieldGet(this, _ToolTipElement_allowUpdatePosition, "f") || this.hiddenFromView)
+    if (!__classPrivateFieldGet(this, _ToolTipElement_allowUpdatePosition, "f") || !this.matches(':popover-open'))
         return;
-    const TOOLTIP_OFFSET = 10;
-    this.style.left = `0px`; // Ensures we have reliable tooltip width in `getAnchoredPosition`
     const position = getAnchoredPosition(this, this.control, {
         side: __classPrivateFieldGet(this, _ToolTipElement_side, "f"),
         align: __classPrivateFieldGet(this, _ToolTipElement_align, "f"),
@@ -342,8 +380,8 @@ _ToolTipElement_abortController = new WeakMap(), _ToolTipElement_align = new Wea
     });
     const anchorSide = position.anchorSide;
     const align = position.anchorAlign;
-    this.style.top = `${position.top}px`;
-    this.style.left = `${position.left}px`;
+    this.style.setProperty('--tool-tip-position-top', `${position.top}px`);
+    this.style.setProperty('--tool-tip-position-left', `${position.left}px`);
     let direction = 's';
     if (anchorSide === 'outside-left') {
         direction = 'w';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/view-components",
-  "version": "0.3.1",
+  "version": "0.4.0-rc.1aadd47d",
   "description": "ViewComponents for the Primer Design System",
   "main": "app/assets/javascripts/primer_view_components.js",
   "module": "app/components/primer/primer.js",
@@ -58,12 +58,11 @@
   },
   "devDependencies": {
     "@changesets/changelog-github": "^0.4.6",
-    "@changesets/cli": "^2.24.1",
     "@github/axe-github": "^0.5.0",
     "@github/browserslist-config": "^1.0.0",
     "@github/markdownlint-github": "^0.2.2",
     "@github/prettier-config": "0.0.4",
-    "@playwright/test": "^1.27.1",
+    "@playwright/test": "^1.35.1",
     "@primer/css": "21.0.2",
     "@primer/primitives": "^7.11.11",
     "@rollup/plugin-node-resolve": "^13.3.0",
@@ -79,7 +78,7 @@
     "eslint-plugin-prettier": "^4.2.1",
     "markdownlint-cli2": "^0.5.1",
     "mocha": "^10.0.0",
-    "playwright": "^1.27.1",
+    "playwright": "^1.35.1",
     "postcss": "^8.4.16",
     "postcss-cli": "^10.1.0",
     "postcss-custom-properties-fallback": "^1.0.2",
@@ -87,6 +86,7 @@
     "postcss-mixins": "^9.0.3",
     "postcss-preset-env": "^7.8.0",
     "prettier": "2.7.1",
+    "primer-changesets-cli": "2.1.0",
     "rollup": "^2.77.1",
     "rollup-plugin-terser": "^7.0.2",
     "stylelint": "^14.13.0",