@primer/view-components 0.1.9-rc.4a184d98 → 0.1.9-rc.7afa7f19

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

@@ -31,6 +31,10 @@ function clickHandler(event) {
         if (dialog instanceof ModalDialogElement) {
             dialog.openButton = button;
             dialog.show();
+            // A buttons default behaviour in some browsers it to send a pointer event
+            // If the behaviour is allowed through the dialog will be shown but then
+            // quickly hidden- as if it were never shown. This prevents that.
+            event.preventDefault();
             return;
         }
     }
@@ -96,6 +100,7 @@ export class ModalDialogElement extends HTMLElement {
             if (this.open)
                 return;
             this.setAttribute('open', '');
+            this.setAttribute('aria-disabled', 'false');
             (_a = __classPrivateFieldGet(this, _ModalDialogElement_instances, "a", _ModalDialogElement_overlayBackdrop_get)) === null || _a === void 0 ? void 0 : _a.classList.remove('Overlay--hidden');
             document.body.style.paddingRight = `${window.innerWidth - document.body.clientWidth}px`;
             document.body.style.overflow = 'hidden';
@@ -109,6 +114,7 @@ export class ModalDialogElement extends HTMLElement {
             if (!this.open)
                 return;
             this.removeAttribute('open');
+            this.setAttribute('aria-disabled', 'true');
             (_b = __classPrivateFieldGet(this, _ModalDialogElement_instances, "a", _ModalDialogElement_overlayBackdrop_get)) === null || _b === void 0 ? void 0 : _b.classList.add('Overlay--hidden');
             document.body.style.paddingRight = '0';
             document.body.style.overflow = 'initial';

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

@@ -1 +1 @@
-.Overlay[popover]{border-width:0;min-width:192px;padding:0;position:absolute}.Overlay[popover]:not(:open){display:none}anchored-position{display:block}
+.Overlay[popover]{border-width:0;min-width:192px;padding:0;position:absolute}.Overlay[popover]:not(:popover-open){display:none}anchored-position{display:block}

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

@@ -2,7 +2,7 @@
   "name": "alpha/overlay",
   "selectors": [
     ".Overlay[popover]",
-    ".Overlay[popover]:not(:open)",
+    ".Overlay[popover]:not(:popover-open)",
     "anchored-position"
   ]
 }

package/app/components/primer/focus_group.js

@@ -14,11 +14,11 @@ import '@oddbird/popover-polyfill';
 const menuItemSelector = '[role="menuitem"],[role="menuitemcheckbox"],[role="menuitemradio"]';
 const popoverSelector = (() => {
     try {
-        document.querySelector(':open');
-        return ':open';
+        document.querySelector(':popover-open');
+        return ':popover-open';
     }
     catch (_a) {
-        return '.\\:open';
+        return '.\\:popover-open';
     }
 })();
 const getMnemonicFor = (item) => { var _a; return (_a = item.textContent) === null || _a === void 0 ? void 0 : _a.trim()[0].toLowerCase(); };
@@ -80,28 +80,34 @@ export default class FocusGroupElement extends HTMLElement {
             if (key === 'Up' || key === 'ArrowUp') {
                 if (direction === 'vertical' || direction === 'both') {
                     index -= index < 0 ? 0 : 1;
+                    event.preventDefault();
                 }
             }
             else if (key === 'Down' || key === 'ArrowDown') {
                 if (direction === 'vertical' || direction === 'both') {
                     index += 1;
+                    event.preventDefault();
                 }
             }
             else if (event.key === 'Left' || event.key === 'ArrowLeft') {
                 if (direction === 'horizontal' || direction === 'both') {
                     index -= 1;
+                    event.preventDefault();
                 }
             }
             else if (event.key === 'Right' || event.key === 'ArrowRight') {
                 if (direction === 'horizontal' || direction === 'both') {
                     index += 1;
+                    event.preventDefault();
                 }
             }
             else if (event.key === 'Home' || event.key === 'PageUp') {
                 index = 0;
+                event.preventDefault();
             }
             else if (event.key === 'End' || event.key === 'PageDown') {
                 index = items.length - 1;
+                event.preventDefault();
             }
             else if (this.mnemonics && printable.test(key)) {
                 const mnemonic = key.toLowerCase();
@@ -126,9 +132,7 @@ export default class FocusGroupElement extends HTMLElement {
                     if ((el === null || el === void 0 ? void 0 : el.popover) === 'auto') {
                         el.showPopover();
                     }
-                    else {
-                        el = (el === null || el === void 0 ? void 0 : el.parentElement) || null;
-                    }
+                    el = (el === null || el === void 0 ? void 0 : el.parentElement) || null;
                 } while (el);
             }
             focusEl === null || focusEl === void 0 ? void 0 : focusEl.focus();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/view-components",
-  "version": "0.1.9-rc.4a184d98",
+  "version": "0.1.9-rc.7afa7f19",
   "description": "ViewComponents for the Primer Design System",
   "main": "app/assets/javascripts/primer_view_components.js",
   "module": "app/components/primer/primer.js",
@@ -55,7 +55,7 @@
     "@github/relative-time-element": "^4.0.0",
     "@github/tab-container-element": "^3.1.2",
     "@oddbird/popover-polyfill": "^0.1.1",
-    "@primer/behaviors": "^1.2.0"
+    "@primer/behaviors": "^1.3.4"
   },
   "devDependencies": {
     "@changesets/changelog-github": "^0.4.6",
@@ -65,7 +65,7 @@
     "@github/prettier-config": "0.0.4",
     "@playwright/test": "^1.27.1",
     "@primer/css": "21.0.1",
-    "@primer/primitives": "^7.11.7",
+    "@primer/primitives": "^7.11.10",
     "@rollup/plugin-node-resolve": "^13.3.0",
     "@rollup/plugin-typescript": "^8.3.3",
     "@typescript-eslint/eslint-plugin": "^5.31.0",
@@ -82,6 +82,7 @@
     "playwright": "^1.27.1",
     "postcss": "^8.4.16",
     "postcss-cli": "^10.0.0",
+    "postcss-custom-properties-fallback": "^1.0.2",
     "postcss-import": "^14.1.0",
     "postcss-mixins": "^9.0.3",
     "postcss-preset-env": "^7.8.0",

package/static/arguments.json

@@ -1692,7 +1692,13 @@
         "name": "subtitle",
         "type": "String",
         "default": "`nil`",
-        "description": "Provides dditional context for the Overlay, also setting the `aria-describedby` attribute."
+        "description": "Provides additional context for the Overlay, also setting the `aria-describedby` attribute."
+      },
+      {
+        "name": "overlay_id",
+        "type": "String",
+        "default": "`nil`",
+        "description": "Provides the id of the overlay element so the close button can close it"
       },
       {
         "name": "size",

package/static/info_arch.json

@@ -3645,6 +3645,11 @@
         "inspect_path": "/lookbook/inspect/primer/alpha/overlay/middle_of_page",
         "preview_path": "/lookbook/preview/primer/alpha/overlay/middle_of_page",
         "name": "middle_of_page"
+      },
+      {
+        "inspect_path": "/lookbook/inspect/primer/alpha/overlay/middle_of_page_with_relative_container",
+        "preview_path": "/lookbook/preview/primer/alpha/overlay/middle_of_page_with_relative_container",
+        "name": "middle_of_page_with_relative_container"
       }
     ],
     "subcomponents": [
@@ -3668,7 +3673,13 @@
             "name": "subtitle",
             "type": "String",
             "default": "`nil`",
-            "description": "Provides dditional context for the Overlay, also setting the `aria-describedby` attribute."
+            "description": "Provides additional context for the Overlay, also setting the `aria-describedby` attribute."
+          },
+          {
+            "name": "overlay_id",
+            "type": "String",
+            "default": "`nil`",
+            "description": "Provides the id of the overlay element so the close button can close it"
           },
           {
             "name": "size",

package/static/previews.json

@@ -1411,6 +1411,11 @@
         "inspect_path": "/lookbook/inspect/primer/alpha/overlay/middle_of_page",
         "preview_path": "/lookbook/preview/primer/alpha/overlay/middle_of_page",
         "name": "middle_of_page"
+      },
+      {
+        "inspect_path": "/lookbook/inspect/primer/alpha/overlay/middle_of_page_with_relative_container",
+        "preview_path": "/lookbook/preview/primer/alpha/overlay/middle_of_page_with_relative_container",
+        "name": "middle_of_page_with_relative_container"
       }
     ]
   },