@primer/view-components 0.8.0 → 0.9.0-rc.17ac5d05

package/app/components/primer/alpha/overlay.css

@@ -1 +1 @@
-anchored-position[popover]{border-width:0;inset:auto;min-width:192px;overflow:visible;padding:0;position:absolute}.Overlay{display:flex}anchored-position[popover]:not(.\:popover-open){display:none}@supports selector(:popover-open){anchored-position[popover]:not(.\:popover-open){display:revert}}@supports selector(:open){anchored-position[popover]:not(.\:popover-open){display:revert}}
+anchored-position[popover]{border-width:0;inset:auto;min-width:192px;overflow:visible;padding:0;position:absolute}.Overlay{display:flex}anchored-position[popover]:not(.\:popover-open){display:none}anchored-position.not-anchored::-webkit-backdrop{background-color:var(--overlay-backdrop-bgColor,var(--color-neutral-muted))}anchored-position.not-anchored::backdrop{background-color:var(--overlay-backdrop-bgColor,var(--color-neutral-muted))}@supports selector(:popover-open){anchored-position[popover]:not(.\:popover-open){display:revert}}@supports selector(:open){anchored-position[popover]:not(.\:popover-open){display:revert}}

package/app/components/primer/alpha/overlay.css.json

@@ -3,6 +3,8 @@
   "selectors": [
     "anchored-position[popover]",
     ".Overlay",
-    "anchored-position[popover]:not(.\\:popover-open)"
+    "anchored-position[popover]:not(.\\:popover-open)",
+    "anchored-position.not-anchored::-webkit-backdrop",
+    "anchored-position.not-anchored::backdrop"
   ]
 }

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

@@ -12,6 +12,26 @@ var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (
 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 isPopoverOpen = (() => {
+    let selector;
+    function setSelector(el) {
+        try {
+            selector = ':popover-open';
+            return el.matches(selector);
+        }
+        catch (_a) {
+            try {
+                selector = ':open';
+                return el.matches(':open');
+            }
+            catch (_b) {
+                selector = '.\\:popover-open';
+                return el.matches('.\\:popover-open');
+            }
+        }
+    }
+    return (el) => (selector ? el.matches(selector) : setSelector(el));
+})();
 const TOOLTIP_ARROW_EDGE_OFFSET = 6;
 const TOOLTIP_SR_ONLY_CLASS = 'sr-only';
 const TOOLTIP_OFFSET = 10;
@@ -29,7 +49,7 @@ function closeOpenTooltips(except) {
     for (const tooltip of openTooltips) {
         if (tooltip === except)
             continue;
-        if (tooltip.matches(':popover-open')) {
+        if (isPopoverOpen(tooltip)) {
             tooltip.hidePopover();
         }
         else {
@@ -207,16 +227,16 @@ class ToolTipElement extends HTMLElement {
     }
     /* @deprecated */
     set hiddenFromView(value) {
-        if (value && this.matches(':popover-open')) {
+        if (value && isPopoverOpen(this)) {
             this.hidePopover();
         }
-        else if (!value && this.matches(':not(:popover-open)')) {
+        else if (!value && !isPopoverOpen(this)) {
             this.showPopover();
         }
     }
     /* @deprecated */
     get hiddenFromView() {
-        return !this.matches(':popover-open');
+        return !isPopoverOpen(this);
     }
     connectedCallback() {
         var _a, _b;
@@ -260,7 +280,7 @@ class ToolTipElement extends HTMLElement {
     async handleEvent(event) {
         if (!this.control)
             return;
-        const showing = this.matches(':popover-open');
+        const showing = isPopoverOpen(this);
         // Ensures that tooltip stays open when hovering between tooltip and element
         // WCAG Success Criterion 1.4.13 Hoverable
         const shouldShow = event.type === 'mouseenter' || event.type === 'focus';
@@ -272,10 +292,10 @@ class ToolTipElement extends HTMLElement {
         const isOpeningOtherPopover = event.type === 'beforetoggle' && event.currentTarget !== this;
         const shouldHide = isMouseLeaveFromButton || isEscapeKeydown || isMouseDownOnButton || isOpeningOtherPopover;
         await Promise.resolve();
-        if (!showing && shouldShow && this.matches(':not(:popover-open)')) {
+        if (!showing && shouldShow && !isPopoverOpen(this)) {
             this.showPopover();
         }
-        else if (showing && shouldHide && this.matches(':popover-open')) {
+        else if (showing && shouldHide && isPopoverOpen(this)) {
             this.hidePopover();
         }
         if (event.type === 'toggle') {
@@ -378,7 +398,7 @@ _ToolTipElement_abortController = new WeakMap(), _ToolTipElement_align = new Wea
 }, _ToolTipElement_updatePosition = function _ToolTipElement_updatePosition() {
     if (!this.control)
         return;
-    if (!__classPrivateFieldGet(this, _ToolTipElement_allowUpdatePosition, "f") || !this.matches(':popover-open'))
+    if (!__classPrivateFieldGet(this, _ToolTipElement_allowUpdatePosition, "f") || !isPopoverOpen(this))
         return;
     const position = getAnchoredPosition(this, this.control, {
         side: __classPrivateFieldGet(this, _ToolTipElement_side, "f"),

package/app/components/primer/anchored_position.js

@@ -131,11 +131,20 @@ export default class AnchoredPositionElement extends HTMLElement {
         cancelAnimationFrame(__classPrivateFieldGet(this, _AnchoredPositionElement_animationFrame, "f"));
         __classPrivateFieldSet(this, _AnchoredPositionElement_animationFrame, requestAnimationFrame(() => {
             const anchor = this.anchorElement;
-            if (!anchor)
-                return;
-            const { left, top } = getAnchoredPosition(this, anchor, this);
-            this.style.top = `${top}px`;
-            this.style.left = `${left}px`;
+            this.classList.toggle('not-anchored', !anchor);
+            if (anchor) {
+                const { left, top } = getAnchoredPosition(this, anchor, this);
+                this.style.top = `${top}px`;
+                this.style.left = `${left}px`;
+                this.style.bottom = 'auto';
+                this.style.right = 'auto';
+            }
+            else {
+                this.style.top = '0';
+                this.style.left = '0';
+                this.style.bottom = '0';
+                this.style.right = '0';
+            }
         }), "f");
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/view-components",
-  "version": "0.8.0",
+  "version": "0.9.0-rc.17ac5d05",
   "description": "ViewComponents for the Primer Design System",
   "main": "app/assets/javascripts/primer_view_components.js",
   "module": "app/components/primer/primer.js",

package/static/info_arch.json

@@ -5910,6 +5910,19 @@
           ]
         }
       },
+      {
+        "preview_path": "primer/alpha/overlay/in_an_action_menu",
+        "name": "in_an_action_menu",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
       {
         "preview_path": "primer/alpha/overlay/dialog_with_header_footer",
         "name": "dialog_with_header_footer",

package/static/previews.json

@@ -4417,6 +4417,19 @@
           ]
         }
       },
+      {
+        "preview_path": "primer/alpha/overlay/in_an_action_menu",
+        "name": "in_an_action_menu",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
       {
         "preview_path": "primer/alpha/overlay/dialog_with_header_footer",
         "name": "dialog_with_header_footer",