@primer/view-components 0.12.0-rc.770f9c4c → 0.12.0-rc.97d42775

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

@@ -3,6 +3,7 @@ type Direction = 'n' | 's' | 'e' | 'w' | 'ne' | 'se' | 'nw' | 'sw';
 declare class ToolTipElement extends HTMLElement {
     #private;
     styles(): string;
+    get showReason(): "focus" | "mouse";
     get htmlFor(): string;
     set htmlFor(value: string);
     get type(): 'description' | 'label';

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

@@ -9,7 +9,7 @@ var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (
     if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
     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;
+var _ToolTipElement_instances, _ToolTipElement_abortController, _ToolTipElement_align, _ToolTipElement_side, _ToolTipElement_allowUpdatePosition, _ToolTipElement_showReason, _ToolTipElement_update, _ToolTipElement_updateControlReference, _ToolTipElement_updateDirection, _ToolTipElement_updatePosition;
 import '@oddbird/popover-polyfill';
 import { getAnchoredPosition } from '@primer/behaviors';
 const isPopoverOpen = (() => {
@@ -60,6 +60,15 @@ function closeOpenTooltips(except) {
 function focusOutListener() {
     closeOpenTooltips();
 }
+function focusInListener(event) {
+    setTimeout(() => {
+        for (const tooltip of openTooltips) {
+            if (isPopoverOpen(tooltip) && tooltip.showReason === 'focus' && tooltip.control !== event.target) {
+                tooltip.hidePopover();
+            }
+        }
+    }, 0);
+}
 const tooltips = new Set();
 const openTooltips = new Set();
 class ToolTipElement extends HTMLElement {
@@ -70,6 +79,7 @@ class ToolTipElement extends HTMLElement {
         _ToolTipElement_align.set(this, 'center');
         _ToolTipElement_side.set(this, 'outside-bottom');
         _ToolTipElement_allowUpdatePosition.set(this, false);
+        _ToolTipElement_showReason.set(this, 'mouse');
     }
     styles() {
         return `
@@ -203,6 +213,9 @@ class ToolTipElement extends HTMLElement {
       }
     `;
     }
+    get showReason() {
+        return __classPrivateFieldGet(this, _ToolTipElement_showReason, "f");
+    }
     get htmlFor() {
         return this.getAttribute('for') || '';
     }
@@ -269,6 +282,7 @@ class ToolTipElement extends HTMLElement {
             signal
         });
         this.ownerDocument.addEventListener('focusout', focusOutListener);
+        this.ownerDocument.addEventListener('focusin', focusInListener);
         this.ownerDocument.addEventListener('keydown', this, { signal });
     }
     disconnectedCallback() {
@@ -293,6 +307,7 @@ class ToolTipElement extends HTMLElement {
         const shouldHide = isMouseLeaveFromButton || isEscapeKeydown || isMouseDownOnButton || isOpeningOtherPopover;
         await Promise.resolve();
         if (!showing && shouldShow && !isPopoverOpen(this)) {
+            __classPrivateFieldSet(this, _ToolTipElement_showReason, event.type === 'mouseenter' ? 'mouse' : 'focus', "f");
             this.showPopover();
         }
         else if (showing && shouldHide && isPopoverOpen(this)) {
@@ -313,7 +328,7 @@ 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(isOpen) {
+_ToolTipElement_abortController = new WeakMap(), _ToolTipElement_align = new WeakMap(), _ToolTipElement_side = new WeakMap(), _ToolTipElement_allowUpdatePosition = new WeakMap(), _ToolTipElement_showReason = new WeakMap(), _ToolTipElement_instances = new WeakSet(), _ToolTipElement_update = function _ToolTipElement_update(isOpen) {
     if (isOpen) {
         openTooltips.add(this);
         this.classList.remove(TOOLTIP_SR_ONLY_CLASS);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/view-components",
-  "version": "0.12.0-rc.770f9c4c",
+  "version": "0.12.0-rc.97d42775",
   "description": "ViewComponents for the Primer Design System",
   "main": "app/assets/javascripts/primer_view_components.js",
   "module": "app/components/primer/primer.js",
@@ -56,6 +56,7 @@
   },
   "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",
@@ -85,7 +86,6 @@
     "postcss-mixins": "^9.0.3",
     "postcss-preset-env": "^7.8.0",
     "prettier": "2.7.1",
-    "primer-changesets-cli": "2.2.0",
     "rollup": "^2.77.1",
     "rollup-plugin-terser": "^7.0.2",
     "stylelint": "^14.13.0",

package/static/arguments.json

@@ -3128,6 +3128,12 @@
         "default": "`false`",
         "description": "Whether or not the button is disabled. If true, this option forces `tag:` to `:button`."
       },
+      {
+        "name": "inactive",
+        "type": "Boolean",
+        "default": "`false`",
+        "description": "Whether the button looks visually disabled, but can still accept all the same interactions as an enabled button."
+      },
       {
         "name": "system_arguments",
         "type": "Hash",

package/static/info_arch.json

@@ -8413,6 +8413,19 @@
             "color-contrast"
           ]
         }
+      },
+      {
+        "preview_path": "primer/alpha/tooltip/tooltip_with_dialog_moving_focus_to_input",
+        "name": "tooltip_with_dialog_moving_focus_to_input",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
       }
     ],
     "subcomponents": [
@@ -9606,6 +9619,12 @@
         "default": "`false`",
         "description": "Whether or not the button is disabled. If true, this option forces `tag:` to `:button`."
       },
+      {
+        "name": "inactive",
+        "type": "Boolean",
+        "default": "`false`",
+        "description": "Whether the button looks visually disabled, but can still accept all the same interactions as an enabled button."
+      },
       {
         "name": "system_arguments",
         "type": "Hash",
@@ -10671,6 +10690,19 @@
             "color-contrast"
           ]
         }
+      },
+      {
+        "preview_path": "primer/beta/button/inactive",
+        "name": "inactive",
+        "snapshot": "true",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
       }
     ],
     "subcomponents": [

package/static/previews.json

@@ -2097,6 +2097,19 @@
             "color-contrast"
           ]
         }
+      },
+      {
+        "preview_path": "primer/beta/button/inactive",
+        "name": "inactive",
+        "snapshot": "true",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
       }
     ]
   },
@@ -6391,6 +6404,19 @@
             "color-contrast"
           ]
         }
+      },
+      {
+        "preview_path": "primer/alpha/tooltip/tooltip_with_dialog_moving_focus_to_input",
+        "name": "tooltip_with_dialog_moving_focus_to_input",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
       }
     ]
   },