@primer/view-components 0.51.0 → 0.51.1-rc.130b36ce

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -15,7 +15,7 @@ var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (
15
15
  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");
16
16
  return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
17
17
  };
18
- var _ActionBarElement_instances, _ActionBarElement_focusZoneAbortController, _ActionBarElement_firstItem_get, _ActionBarElement_showItem, _ActionBarElement_hideItem, _ActionBarElement_menuItems_get, _ActionBarElement_eachItem;
18
+ var _ActionBarElement_instances, _ActionBarElement_focusZoneAbortController, _ActionBarElement_pendingUpdate, _ActionBarElement_performUpdate, _ActionBarElement_firstItem_get, _ActionBarElement_showItem, _ActionBarElement_hideItem, _ActionBarElement_menuItems_get;
19
19
  import { controller, targets, target } from '@github/catalyst';
20
20
  import { focusZone, FocusKeys } from '@primer/behaviors';
21
21
  const instersectionObserver = new IntersectionObserver(entries => {
@@ -35,27 +35,21 @@ const resizeObserver = new ResizeObserver(entries => {
35
35
  }
36
36
  });
37
37
  // These are definitely used, but eslint is dumb apparently
38
- var ItemType;
39
- (function (ItemType) {
40
- ItemType[ItemType["Item"] = 0] = "Item";
41
- ItemType[ItemType["Divider"] = 1] = "Divider";
42
- })(ItemType || (ItemType = {}));
43
38
  let ActionBarElement = class ActionBarElement extends HTMLElement {
44
39
  constructor() {
45
40
  super(...arguments);
46
41
  _ActionBarElement_instances.add(this);
47
42
  _ActionBarElement_focusZoneAbortController.set(this, null);
43
+ _ActionBarElement_pendingUpdate.set(this, false);
48
44
  }
49
45
  connectedCallback() {
50
46
  resizeObserver.observe(this);
51
47
  instersectionObserver.observe(this);
52
- requestAnimationFrame(() => {
53
- // This overflow visible is needed for browsers that don't support PopoverElement
54
- // to ensure the menu and tooltips are visible when the action bar is in a collapsed state
55
- // once popover is fully supported we can remove this.style.overflow = 'visible'
56
- this.style.overflow = 'visible';
57
- this.update();
58
- });
48
+ // This overflow visible is needed for browsers that don't support PopoverElement
49
+ // to ensure the menu and tooltips are visible when the action bar is in a collapsed state
50
+ // once popover is fully supported we can remove this.style.overflow = 'visible'
51
+ this.style.overflow = 'visible';
52
+ this.update();
59
53
  }
60
54
  disconnectedCallback() {
61
55
  resizeObserver.unobserve(this);
@@ -69,75 +63,81 @@ let ActionBarElement = class ActionBarElement extends HTMLElement {
69
63
  }
70
64
  }
71
65
  update() {
72
- const firstItem = __classPrivateFieldGet(this, _ActionBarElement_instances, "a", _ActionBarElement_firstItem_get);
73
- if (!firstItem)
66
+ if (__classPrivateFieldGet(this, _ActionBarElement_pendingUpdate, "f"))
74
67
  return;
75
- const firstItemTop = firstItem.getBoundingClientRect().top;
76
- let previousItemType = null;
77
- __classPrivateFieldGet(this, _ActionBarElement_instances, "m", _ActionBarElement_eachItem).call(this, (item, index, type) => {
78
- const itemTop = item.getBoundingClientRect().top;
79
- if (type === ItemType.Item) {
80
- if (itemTop > firstItemTop) {
81
- __classPrivateFieldGet(this, _ActionBarElement_instances, "m", _ActionBarElement_hideItem).call(this, index);
82
- if (this.moreMenu.hidden) {
83
- this.moreMenu.hidden = false;
84
- }
85
- if (previousItemType === ItemType.Divider) {
86
- __classPrivateFieldGet(this, _ActionBarElement_instances, "m", _ActionBarElement_hideItem).call(this, index - 1);
87
- }
88
- }
89
- else {
90
- __classPrivateFieldGet(this, _ActionBarElement_instances, "m", _ActionBarElement_showItem).call(this, index);
91
- if (index === this.items.length - 1) {
92
- this.moreMenu.hidden = true;
93
- }
94
- if (previousItemType === ItemType.Divider) {
95
- __classPrivateFieldGet(this, _ActionBarElement_instances, "m", _ActionBarElement_showItem).call(this, index - 1);
96
- }
97
- }
98
- }
99
- previousItemType = type;
100
- return true;
68
+ __classPrivateFieldSet(this, _ActionBarElement_pendingUpdate, true, "f");
69
+ requestAnimationFrame(() => {
70
+ __classPrivateFieldSet(this, _ActionBarElement_pendingUpdate, false, "f");
71
+ __classPrivateFieldGet(this, _ActionBarElement_instances, "m", _ActionBarElement_performUpdate).call(this);
101
72
  });
102
- if (__classPrivateFieldGet(this, _ActionBarElement_focusZoneAbortController, "f")) {
103
- __classPrivateFieldGet(this, _ActionBarElement_focusZoneAbortController, "f").abort();
104
- }
105
- __classPrivateFieldSet(this, _ActionBarElement_focusZoneAbortController, focusZone(this, {
106
- bindKeys: FocusKeys.ArrowHorizontal | FocusKeys.HomeAndEnd,
107
- focusOutBehavior: 'wrap',
108
- focusableElementFilter: element => {
109
- const idx = this.items.indexOf(element.parentElement);
110
- const elementIsVisibleItem = idx > -1 && this.items[idx].style.visibility === 'visible';
111
- const elementIsVisibleActionMenuInvoker = element === this.moreMenu.invokerElement && !this.moreMenu.hidden;
112
- return elementIsVisibleItem || elementIsVisibleActionMenuInvoker;
113
- },
114
- }), "f");
115
73
  }
116
74
  };
117
75
  _ActionBarElement_focusZoneAbortController = new WeakMap();
76
+ _ActionBarElement_pendingUpdate = new WeakMap();
118
77
  _ActionBarElement_instances = new WeakSet();
119
- _ActionBarElement_firstItem_get = function _ActionBarElement_firstItem_get() {
120
- let foundItem = null;
121
- __classPrivateFieldGet(this, _ActionBarElement_instances, "m", _ActionBarElement_eachItem).call(this, (item, _index, type) => {
122
- if (type === ItemType.Item) {
123
- foundItem = item;
124
- return false;
78
+ _ActionBarElement_performUpdate = function _ActionBarElement_performUpdate() {
79
+ const firstItem = __classPrivateFieldGet(this, _ActionBarElement_instances, "a", _ActionBarElement_firstItem_get);
80
+ if (!firstItem)
81
+ return;
82
+ const baseTop = firstItem.getBoundingClientRect().top;
83
+ const cachedMenuItems = __classPrivateFieldGet(this, _ActionBarElement_instances, "a", _ActionBarElement_menuItems_get);
84
+ // Snapshot geometry in one pass before mutating the DOM
85
+ const snapshots = Array.from(this.items, el => ({
86
+ top: el.getBoundingClientRect().top,
87
+ isDivider: el.classList.contains('ActionBar-divider'),
88
+ }));
89
+ // Apply visibility changes after all reads are complete
90
+ let prevWasDivider = false;
91
+ for (let n = 0; n < snapshots.length; n++) {
92
+ const snap = snapshots[n];
93
+ if (snap.isDivider) {
94
+ prevWasDivider = true;
95
+ continue;
96
+ }
97
+ if (snap.top > baseTop) {
98
+ __classPrivateFieldGet(this, _ActionBarElement_instances, "m", _ActionBarElement_hideItem).call(this, n, cachedMenuItems);
99
+ if (this.moreMenu.hidden)
100
+ this.moreMenu.hidden = false;
101
+ if (prevWasDivider)
102
+ __classPrivateFieldGet(this, _ActionBarElement_instances, "m", _ActionBarElement_hideItem).call(this, n - 1, cachedMenuItems);
103
+ }
104
+ else {
105
+ __classPrivateFieldGet(this, _ActionBarElement_instances, "m", _ActionBarElement_showItem).call(this, n, cachedMenuItems);
106
+ if (n === this.items.length - 1)
107
+ this.moreMenu.hidden = true;
108
+ if (prevWasDivider)
109
+ __classPrivateFieldGet(this, _ActionBarElement_instances, "m", _ActionBarElement_showItem).call(this, n - 1, cachedMenuItems);
125
110
  }
126
- return true;
127
- });
128
- return foundItem;
111
+ prevWasDivider = false;
112
+ }
113
+ if (__classPrivateFieldGet(this, _ActionBarElement_focusZoneAbortController, "f")) {
114
+ __classPrivateFieldGet(this, _ActionBarElement_focusZoneAbortController, "f").abort();
115
+ }
116
+ __classPrivateFieldSet(this, _ActionBarElement_focusZoneAbortController, focusZone(this, {
117
+ bindKeys: FocusKeys.ArrowHorizontal | FocusKeys.HomeAndEnd,
118
+ focusOutBehavior: 'wrap',
119
+ focusableElementFilter: element => {
120
+ const idx = this.items.indexOf(element.parentElement);
121
+ const elementIsVisibleItem = idx > -1 && this.items[idx].style.visibility === 'visible';
122
+ const elementIsVisibleActionMenuInvoker = element === this.moreMenu.invokerElement && !this.moreMenu.hidden;
123
+ return elementIsVisibleItem || elementIsVisibleActionMenuInvoker;
124
+ },
125
+ }), "f");
126
+ };
127
+ _ActionBarElement_firstItem_get = function _ActionBarElement_firstItem_get() {
128
+ return this.items.find(el => !el.classList.contains('ActionBar-divider')) ?? null;
129
129
  };
130
- _ActionBarElement_showItem = function _ActionBarElement_showItem(index) {
130
+ _ActionBarElement_showItem = function _ActionBarElement_showItem(index, menuItems) {
131
131
  const item = this.items[index];
132
- const menuItem = __classPrivateFieldGet(this, _ActionBarElement_instances, "a", _ActionBarElement_menuItems_get)[index];
132
+ const menuItem = menuItems[index];
133
133
  if (!item || !menuItem)
134
134
  return;
135
135
  item.style.setProperty('visibility', 'visible');
136
136
  menuItem.hidden = true;
137
137
  };
138
- _ActionBarElement_hideItem = function _ActionBarElement_hideItem(index) {
138
+ _ActionBarElement_hideItem = function _ActionBarElement_hideItem(index, menuItems) {
139
139
  const item = this.items[index];
140
- const menuItem = __classPrivateFieldGet(this, _ActionBarElement_instances, "a", _ActionBarElement_menuItems_get)[index];
140
+ const menuItem = menuItems[index];
141
141
  if (!item || !menuItem)
142
142
  return;
143
143
  item.style.setProperty('visibility', 'hidden');
@@ -146,15 +146,6 @@ _ActionBarElement_hideItem = function _ActionBarElement_hideItem(index) {
146
146
  _ActionBarElement_menuItems_get = function _ActionBarElement_menuItems_get() {
147
147
  return this.moreMenu.querySelectorAll('[role="menu"] > li');
148
148
  };
149
- _ActionBarElement_eachItem = function _ActionBarElement_eachItem(callback) {
150
- for (let i = 0; i < this.items.length; i++) {
151
- const item = this.items[i];
152
- const type = item.classList.contains('ActionBar-divider') ? ItemType.Divider : ItemType.Item;
153
- if (!callback(item, i, type)) {
154
- break;
155
- }
156
- }
157
- };
158
149
  __decorate([
159
150
  targets
160
151
  ], ActionBarElement.prototype, "items", void 0);
@@ -1 +1 @@
1
- @property --dialog-scrollgutter{initial-value:0;inherits:false;syntax:"<length>"}body:has(dialog:modal.Overlay--disableScroll){overflow:hidden!important;padding-right:var(--dialog-scrollgutter)!important}dialog.Overlay:not([open]){display:none}.Overlay--hidden{display:none!important}.Overlay--visibilityHidden{height:0;opacity:0;overflow:hidden;visibility:hidden}@supports not selector(:popover-open){[popover]:not(.\:popover-open){display:none}}.Overlay{background-color:var(--overlay-bgColor);border:0;border-radius:var(--borderRadius-large);box-shadow:var(--shadow-floating-small);color:var(--fgColor-default);display:flex;flex-direction:column;inset:0;margin:auto;max-height:min(calc(100vh - 2rem),var(--overlay-height));min-width:192px;opacity:1;padding:0;position:static;white-space:normal;width:min(var(--overlay-width),100vw - 2rem)}.Overlay.Overlay--size-auto{max-height:calc(100vh - 2rem);max-width:calc(100vw - 2rem);min-width:192px}.Overlay.Overlay--size-full{height:100vh;width:100vw}.Overlay.Overlay--size-xsmall{--overlay-width:192px;max-height:calc(100vh - 2rem)}.Overlay.Overlay--size-small{--overlay-height:256px;--overlay-width:320px}.Overlay.Overlay--size-small-portrait{--overlay-height:432px;--overlay-width:320px}.Overlay.Overlay--size-medium{--overlay-height:320px;--overlay-width:480px}.Overlay.Overlay--size-medium-portrait{--overlay-height:600px;--overlay-width:480px}.Overlay.Overlay--size-large{--overlay-height:432px;--overlay-width:640px}.Overlay.Overlay--size-xlarge{--overlay-height:600px;--overlay-width:960px}.Overlay.Overlay--height-auto{height:auto}.Overlay.Overlay--placement-left,.Overlay.Overlay--placement-right{height:100%;max-height:unset;position:fixed}@media screen and (prefers-reduced-motion:no-preference){.Overlay.Overlay--motion-scaleFade,.Overlay.Overlay--placement-left,.Overlay.Overlay--placement-right{animation:Overlay--motion-scaleFade .2s cubic-bezier(.33,1,.68,1) 0s 1 normal none running}}.Overlay.Overlay--placement-left{animation-name:Overlay--motion-slideInRight;border-bottom-left-radius:0;border-top-left-radius:0;inset:0 auto 0 0}.Overlay.Overlay--placement-right{animation-name:Overlay--motion-slideInLeft;border-bottom-right-radius:0;border-top-right-radius:0;inset:0 0 0 auto}.Overlay.Overlay--height-xsmall{height:min(192px,100vh - 2rem)}.Overlay.Overlay--height-small{height:min(256px,100vh - 2rem)}.Overlay.Overlay--height-medium{height:min(320px,100vh - 2rem)}.Overlay.Overlay--height-large{height:min(432px,100vh - 2rem)}.Overlay.Overlay--height-xlarge{height:min(600px,100vh - 2rem)}.Overlay.Overlay--width-auto{width:auto}.Overlay.Overlay--width-small{width:min(256px,100vw - 2rem)}.Overlay.Overlay--width-medium{width:min(320px,100vw - 2rem)}.Overlay.Overlay--width-large{width:min(480px,100vw - 2rem)}.Overlay.Overlay--width-xlarge{width:min(640px,100vw - 2rem)}.Overlay.Overlay--width-xxlarge{width:min(960px,100vw - 2rem)}.Overlay:modal{position:fixed}@keyframes Overlay--motion-scaleFade{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}.Overlay-form{flex-grow:1;overflow:auto}.Overlay-form,.Overlay-header{display:flex;flex-direction:column}.Overlay-header{color:var(--fgColor-default);z-index:1}.Overlay-header.Overlay-header--divided{box-shadow:inset 0 calc(var(--borderWidth-thin)*-1) var(--borderColor-default);padding-bottom:var(--stack-padding-condensed)}:is(.Overlay-header.Overlay-header--large .Overlay-headerContentWrap) .Overlay-titleWrap{gap:var(--stack-gap-condensed)}:is(:is(.Overlay-header.Overlay-header--large .Overlay-headerContentWrap) .Overlay-titleWrap) .Overlay-title{font:var(--text-title-shorthand-small)}:is(:is(.Overlay-header.Overlay-header--large .Overlay-headerContentWrap) .Overlay-titleWrap) .Overlay-description{font-size:var(--text-body-size-medium)}.Overlay-header .Overlay-headerContentWrap{align-items:flex-start;display:flex;gap:var(--stack-gap-condensed);padding:var(--stack-gap-condensed) var(--stack-gap-condensed) 0 var(--stack-gap-condensed)}:is(.Overlay-header .Overlay-headerContentWrap) .Overlay-actionWrap{display:flex;flex-direction:row;gap:var(--stack-gap-condensed)}:is(.Overlay-header .Overlay-headerContentWrap) .Overlay-titleWrap{display:flex;flex-direction:column;flex-grow:1;gap:var(--control-small-gap);padding:calc(var(--stack-gap-condensed)*.75) 0 calc(var(--stack-gap-condensed)*.75) var(--stack-gap-condensed)}:is(:is(.Overlay-header .Overlay-headerContentWrap) .Overlay-titleWrap) .Overlay-title{font-size:var(--text-body-size-medium);font-weight:var(--base-text-weight-semibold);margin:0}:is(:is(.Overlay-header .Overlay-headerContentWrap) .Overlay-titleWrap) .Overlay-description{color:var(--fgColor-muted);font-size:var(--text-body-size-small);font-weight:var(--base-text-weight-normal);margin:0}.Overlay-headerFilter{padding:var(--stack-gap-condensed) var(--stack-gap-condensed) 0 var(--stack-gap-condensed)}.Overlay-body{flex-grow:1;font-size:var(--text-body-size-medium);overflow-y:auto;padding:var(--stack-padding-normal);scrollbar-width:thin}.Overlay-body.Overlay-body--paddingCondensed{padding:var(--stack-padding-condensed);padding-top:0}.Overlay-body.Overlay-body--paddingNone{padding:0}.Overlay-footer{display:flex;flex-direction:row;flex-shrink:0;flex-wrap:wrap;padding:0 var(--stack-padding-normal) var(--stack-padding-normal) var(--stack-padding-normal);z-index:1}.Overlay-footer.Overlay-footer--divided{box-shadow:inset 0 var(--borderWidth-thin) var(--borderColor-default);padding-top:var(--stack-padding-normal)}.Overlay-footer.Overlay-footer--alignStart{gap:var(--stack-gap-condensed);justify-content:flex-start}.Overlay-footer.Overlay-footer--alignCenter{gap:var(--stack-gap-condensed);justify-content:center}.Overlay-footer.Overlay-footer--alignEnd{gap:var(--stack-gap-condensed);justify-content:flex-end}.Overlay-closeButton{align-self:flex-start;background-color:initial;border:var(--borderWidth-thin) solid #0000;border-radius:var(--borderRadius-medium);color:var(--fgColor-muted);cursor:pointer;display:grid;flex-shrink:0;height:var(--base-size-32);padding:0;place-content:center;position:relative;transition:.2s cubic-bezier(.3,0,.5,1);transition-property:color,background-color,border-color;-webkit-user-select:none;user-select:none;width:var(--base-size-32)}.Overlay-closeButton:focus,.Overlay-closeButton:hover{background-color:var(--button-default-bgColor-hover);border:var(--borderWidth-thin) solid var(--control-bgColor-hover)}.Overlay-closeButton.close-button{border:var(--borderWidth-thin) solid #0000}.Overlay--full{border-radius:unset!important;flex-grow:1;height:100%;max-height:100vh;max-width:100vw;width:100%}@media (max-width:767px){.Overlay--placement-right-whenNarrow,.Overlay.Overlay--placement-left-whenNarrow{height:100%;max-height:100vh;position:fixed}.Overlay.Overlay--placement-left-whenNarrow{animation-name:Overlay--motion-slideInLeft;border-bottom-left-radius:0;border-top-left-radius:0;inset:0 auto 0 0}.Overlay.Overlay--placement-right-whenNarrow{animation-name:Overlay--motion-slideInLeft;border-bottom-right-radius:0;border-top-right-radius:0;inset:0 0 0 auto}.Overlay.Overlay--placement-bottom-whenNarrow{animation-name:Overlay--motion-slideUp;border-bottom-left-radius:0;border-bottom-right-radius:0;inset:auto 0 0;max-width:100vw;width:100%}.Overlay--full-whenNarrow{border-radius:unset!important;flex-grow:1;height:100%;max-height:100vh;max-width:100vw;width:100%}}@keyframes Overlay--motion-slideDown{0%{transform:translateY(-100%)}}@keyframes Overlay--motion-slideUp{0%{transform:translateY(100%)}}@keyframes Overlay--motion-slideInRight{0%{transform:translateX(-100%)}}@keyframes Overlay--motion-slideInLeft{0%{transform:translateX(100%)}}
1
+ @property --dialog-scrollgutter{initial-value:0;inherits:false;syntax:"<length>"}body:has(dialog:modal.Overlay--disableScroll){overflow:hidden!important;padding-right:var(--dialog-scrollgutter)!important}dialog.Overlay:not([open]){display:none}.Overlay--hidden{display:none!important}.Overlay--visibilityHidden{height:0;opacity:0;overflow:hidden;visibility:hidden}@supports not selector(:popover-open){[popover]:not(.\:popover-open){display:none}}.Overlay{background-color:var(--overlay-bgColor);border:0;border-radius:var(--borderRadius-large);box-shadow:var(--shadow-floating-small);color:var(--fgColor-default);display:flex;flex-direction:column;inset:0;margin:auto;max-height:min(calc(100vh - 2rem),var(--overlay-height));min-width:192px;opacity:1;padding:0;position:static;white-space:normal;width:min(var(--overlay-width),100vw - 2rem)}.Overlay.Overlay--size-auto{max-height:calc(100vh - 2rem);max-width:calc(100vw - 2rem);min-width:192px}.Overlay.Overlay--size-full{height:100vh;width:100vw}.Overlay.Overlay--size-xsmall{--overlay-width:192px;max-height:calc(100vh - 2rem)}.Overlay.Overlay--size-small{--overlay-height:256px;--overlay-width:320px}.Overlay.Overlay--size-small-portrait{--overlay-height:432px;--overlay-width:320px}.Overlay.Overlay--size-medium{--overlay-height:320px;--overlay-width:480px}.Overlay.Overlay--size-medium-portrait{--overlay-height:600px;--overlay-width:480px}.Overlay.Overlay--size-large{--overlay-height:432px;--overlay-width:640px}.Overlay.Overlay--size-xlarge{--overlay-height:600px;--overlay-width:960px}.Overlay.Overlay--height-auto{height:auto}.Overlay.Overlay--placement-left,.Overlay.Overlay--placement-right{height:100%;max-height:unset;position:fixed}@media screen and (prefers-reduced-motion:no-preference){.Overlay.Overlay--motion-scaleFade,.Overlay.Overlay--placement-left,.Overlay.Overlay--placement-right{animation:Overlay--motion-scaleFade .2s cubic-bezier(.33,1,.68,1) 0s 1 normal none running}}.Overlay.Overlay--placement-left{animation-name:Overlay--motion-slideInRight;border-bottom-left-radius:0;border-top-left-radius:0;inset:0 auto 0 0}.Overlay.Overlay--placement-right{animation-name:Overlay--motion-slideInLeft;border-bottom-right-radius:0;border-top-right-radius:0;inset:0 0 0 auto}.Overlay.Overlay--height-xsmall{height:min(192px,100vh - 2rem)}.Overlay.Overlay--height-small{height:min(256px,100vh - 2rem)}.Overlay.Overlay--height-medium{height:min(320px,100vh - 2rem)}.Overlay.Overlay--height-large{height:min(432px,100vh - 2rem)}.Overlay.Overlay--height-xlarge{height:min(600px,100vh - 2rem)}.Overlay.Overlay--width-auto{width:auto}.Overlay.Overlay--width-small{width:min(256px,100vw - 2rem)}.Overlay.Overlay--width-medium{width:min(320px,100vw - 2rem)}.Overlay.Overlay--width-large{width:min(480px,100vw - 2rem)}.Overlay.Overlay--width-xlarge{width:min(640px,100vw - 2rem)}.Overlay.Overlay--width-xxlarge{width:min(960px,100vw - 2rem)}.Overlay:modal{position:fixed}@keyframes Overlay--motion-scaleFade{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}.Overlay-form{flex-grow:1;overflow:auto}.Overlay-form,.Overlay-header{display:flex;flex-direction:column}.Overlay-header{color:var(--fgColor-default);z-index:1}.Overlay-header.Overlay-header--divided{box-shadow:inset 0 calc(var(--borderWidth-thin)*-1) var(--borderColor-default);padding-bottom:var(--stack-padding-condensed)}:is(.Overlay-header.Overlay-header--large .Overlay-headerContentWrap) .Overlay-titleWrap{gap:var(--stack-gap-condensed)}:is(:is(.Overlay-header.Overlay-header--large .Overlay-headerContentWrap) .Overlay-titleWrap) .Overlay-title{font:var(--text-title-shorthand-small)}:is(:is(.Overlay-header.Overlay-header--large .Overlay-headerContentWrap) .Overlay-titleWrap) .Overlay-description{font-size:var(--text-body-size-medium)}.Overlay-header .Overlay-headerContentWrap{align-items:flex-start;display:flex;gap:var(--stack-gap-condensed);padding:var(--stack-gap-condensed) var(--stack-gap-condensed) 0 var(--stack-gap-condensed)}:is(.Overlay-header .Overlay-headerContentWrap) .Overlay-actionWrap{display:flex;flex-direction:row;gap:var(--stack-gap-condensed)}:is(.Overlay-header .Overlay-headerContentWrap) .Overlay-titleWrap{display:flex;flex-direction:column;flex-grow:1;gap:var(--control-small-gap);padding:calc(var(--stack-gap-condensed)*.75) 0 calc(var(--stack-gap-condensed)*.75) var(--stack-gap-condensed)}:is(:is(.Overlay-header .Overlay-headerContentWrap) .Overlay-titleWrap) .Overlay-title{font-size:var(--text-body-size-medium);font-weight:var(--base-text-weight-semibold);margin:0}:is(:is(.Overlay-header .Overlay-headerContentWrap) .Overlay-titleWrap) .Overlay-description{color:var(--fgColor-muted);font-size:var(--text-body-size-small);font-weight:var(--base-text-weight-normal);margin:0}.Overlay-headerFilter{padding:var(--stack-gap-condensed) var(--stack-gap-condensed) 0 var(--stack-gap-condensed)}.Overlay-body{flex-grow:1;font-size:var(--text-body-size-medium);overflow-y:auto;padding:var(--stack-padding-normal);scrollbar-width:thin}.Overlay-body.Overlay-body--paddingCondensed{padding:var(--stack-padding-condensed);padding-top:0}.Overlay-body.Overlay-body--paddingNone{padding:0}.Overlay-footer{display:flex;flex-direction:row;flex-shrink:0;flex-wrap:wrap;padding:0 var(--stack-padding-normal) var(--stack-padding-normal) var(--stack-padding-normal);z-index:1}.Overlay-footer.Overlay-footer--divided{box-shadow:inset 0 var(--borderWidth-thin) var(--borderColor-default);padding-top:var(--stack-padding-normal)}.Overlay-footer.Overlay-footer--alignStart{gap:var(--stack-gap-condensed);justify-content:flex-start}.Overlay-footer.Overlay-footer--alignCenter{gap:var(--stack-gap-condensed);justify-content:center}.Overlay-footer.Overlay-footer--alignEnd{gap:var(--stack-gap-condensed);justify-content:flex-end}.Overlay-closeButton{align-self:flex-start;background-color:initial;border:var(--borderWidth-thin) solid #0000;border-radius:var(--borderRadius-medium);color:var(--fgColor-muted);cursor:pointer;display:grid;flex-shrink:0;height:var(--base-size-32);padding:0;place-content:center;position:relative;transition:.2s cubic-bezier(.3,0,.5,1);transition-property:color,background-color,border-color;-webkit-user-select:none;user-select:none;width:var(--base-size-32)}.Overlay-closeButton:focus,.Overlay-closeButton:hover{background-color:var(--button-default-bgColor-hover);border:var(--borderWidth-thin) solid var(--control-bgColor-hover)}.Overlay-closeButton.close-button{border:var(--borderWidth-thin) solid #0000}.Overlay--full{border-radius:unset!important;flex-grow:1;height:100%;max-height:100vh;max-width:100vw;width:100%}@media (max-width:767px){.Overlay--placement-right-whenNarrow,.Overlay.Overlay--placement-left-whenNarrow{height:100%;max-height:100vh;position:fixed}.Overlay.Overlay--placement-left-whenNarrow{animation-name:Overlay--motion-slideInLeft;border-bottom-left-radius:0;border-top-left-radius:0;inset:0 auto 0 0}.Overlay.Overlay--placement-right-whenNarrow{animation-name:Overlay--motion-slideInLeft;border-bottom-right-radius:0;border-top-right-radius:0;inset:0 0 0 auto}.Overlay.Overlay--placement-bottom-whenNarrow{animation-name:Overlay--motion-slideUp;border-bottom-left-radius:0;border-bottom-right-radius:0;inset:auto 0 0;max-width:100vw;width:100%}.Overlay--full-whenNarrow{border-radius:unset!important;flex-grow:1;height:100%;max-height:100vh;max-width:100vw;width:100%}.Overlay--fullscreen-whenNarrow{border-radius:unset!important;height:100vh;left:0;margin:0;max-height:none!important;max-width:none!important;position:fixed;top:0;width:100vw}}@keyframes Overlay--motion-slideDown{0%{transform:translateY(-100%)}}@keyframes Overlay--motion-slideUp{0%{transform:translateY(100%)}}@keyframes Overlay--motion-slideInRight{0%{transform:translateX(-100%)}}@keyframes Overlay--motion-slideInLeft{0%{transform:translateX(100%)}}
@@ -61,6 +61,7 @@
61
61
  ".Overlay.Overlay--placement-left-whenNarrow",
62
62
  ".Overlay.Overlay--placement-right-whenNarrow",
63
63
  ".Overlay.Overlay--placement-bottom-whenNarrow",
64
- ".Overlay--full-whenNarrow"
64
+ ".Overlay--full-whenNarrow",
65
+ ".Overlay--fullscreen-whenNarrow"
65
66
  ]
66
67
  }
@@ -99,7 +99,7 @@ class ToolTipElement extends HTMLElement {
99
99
  border-radius: var(--borderRadius-medium);
100
100
  border: 0 !important;
101
101
  opacity: 0;
102
- max-width: var(--overlay-width-small);
102
+ max-width: min(var(--overlay-width-small), 100vw);
103
103
  word-wrap: break-word;
104
104
  white-space: normal;
105
105
  width: max-content !important;
@@ -10,6 +10,11 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
10
10
  return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
11
11
  };
12
12
  var _DialogHelperElement_instances, _DialogHelperElement_abortController, _DialogHelperElement_handleDialogOpenAttribute;
13
+ function setScrollGutter(doc) {
14
+ if (doc.body.style.getPropertyValue('--dialog-scrollgutter'))
15
+ return;
16
+ doc.body.style.setProperty('--dialog-scrollgutter', `${window.innerWidth - doc.body.clientWidth}px`);
17
+ }
13
18
  function dialogInvokerButtonHandler(event) {
14
19
  const target = event.target;
15
20
  const button = target?.closest('button');
@@ -20,6 +25,7 @@ function dialogInvokerButtonHandler(event) {
20
25
  if (dialogId) {
21
26
  const dialog = document.getElementById(dialogId);
22
27
  if (dialog instanceof HTMLDialogElement) {
28
+ setScrollGutter(dialog.ownerDocument);
23
29
  dialog.showModal();
24
30
  // A buttons default behaviour in some browsers it to send a pointer event
25
31
  // If the behaviour is allowed through the dialog will be shown but then
@@ -92,7 +98,6 @@ export class DialogHelperElement extends HTMLElement {
92
98
  const { signal } = (__classPrivateFieldSet(this, _DialogHelperElement_abortController, new AbortController(), "f"));
93
99
  document.addEventListener('click', dialogInvokerButtonHandler, true);
94
100
  document.addEventListener('click', this, { signal });
95
- this.ownerDocument.body.style.setProperty('--dialog-scrollgutter', `${window.innerWidth - this.ownerDocument.body.clientWidth}px`);
96
101
  new MutationObserver(records => {
97
102
  for (const record of records) {
98
103
  if (record.target === this.dialog) {
@@ -132,6 +137,7 @@ _DialogHelperElement_abortController = new WeakMap(), _DialogHelperElement_insta
132
137
  // eslint-disable-next-line no-restricted-syntax
133
138
  this.dialog.addEventListener('close', e => e.stopImmediatePropagation(), { once: true });
134
139
  this.dialog.close();
140
+ setScrollGutter(this.dialog.ownerDocument);
135
141
  this.dialog.showModal();
136
142
  }
137
143
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@primer/view-components",
3
- "version": "0.51.0",
3
+ "version": "0.51.1-rc.130b36ce",
4
4
  "description": "ViewComponents for the Primer Design System",
5
5
  "main": "app/assets/javascripts/primer_view_components.js",
6
6
  "module": "app/components/primer/primer.js",
@@ -343,6 +343,12 @@
343
343
  "default": "`:outside_bottom`",
344
344
  "description": "One of `:inside_bottom`, `:inside_center`, `:inside_left`, `:inside_right`, `:inside_top`, `:outside_bottom`, `:outside_left`, `:outside_right`, or `:outside_top`.."
345
345
  },
346
+ {
347
+ "name": "anchor_when_narrow",
348
+ "type": "Symbol",
349
+ "default": "`:inherit`",
350
+ "description": "One of `:bottom`, `:fullscreen`, `:inherit`, `:left`, or `:right`.."
351
+ },
346
352
  {
347
353
  "name": "size",
348
354
  "type": "Symbol",
@@ -1910,6 +1916,12 @@
1910
1916
  "default": "`:normal`",
1911
1917
  "description": "The anchor offset to give the Overlay. One of `:normal` or `:spacious`."
1912
1918
  },
1919
+ {
1920
+ "name": "anchor_when_narrow",
1921
+ "type": "Symbol",
1922
+ "default": "`:inherit`",
1923
+ "description": "The position of the Overlay when in a narrow viewport. One of `:bottom`, `:fullscreen`, `:inherit`, `:left`, or `:right`."
1924
+ },
1913
1925
  {
1914
1926
  "name": "allow_out_of_bounds",
1915
1927
  "type": "Boolean",
@@ -3892,7 +3904,14 @@
3892
3904
  "short_name": "AutoCompleteNoResultItem",
3893
3905
  "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/auto_complete/no_result_item.rb",
3894
3906
  "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/auto_complete/no_result_item/default/",
3895
- "parameters": []
3907
+ "parameters": [
3908
+ {
3909
+ "name": "system_arguments",
3910
+ "type": "Hash",
3911
+ "default": "N/A",
3912
+ "description": "[System arguments](/system-arguments)"
3913
+ }
3914
+ ]
3896
3915
  },
3897
3916
  {
3898
3917
  "component": "Avatar",
@@ -423,6 +423,9 @@
423
423
  "Overlay--full-whenNarrow": [
424
424
  "Primer::Alpha::Dialog"
425
425
  ],
426
+ "Overlay--fullscreen-whenNarrow": [
427
+ "Primer::Alpha::Dialog"
428
+ ],
426
429
  "Overlay--hidden": [
427
430
  "Primer::Alpha::Dialog"
428
431
  ],
@@ -579,11 +579,26 @@
579
579
  "outside_left",
580
580
  "outside_right"
581
581
  ],
582
+ "ANCHOR_WHEN_NARROW_MAPPINGS": {
583
+ "inherit": "",
584
+ "bottom": "Overlay--placement-bottom-whenNarrow",
585
+ "fullscreen": "Overlay--fullscreen-whenNarrow",
586
+ "left": "Overlay--placement-left-whenNarrow",
587
+ "right": "Overlay--placement-right-whenNarrow"
588
+ },
589
+ "ANCHOR_WHEN_NARROW_OPTIONS": [
590
+ "inherit",
591
+ "bottom",
592
+ "fullscreen",
593
+ "left",
594
+ "right"
595
+ ],
582
596
  "Body": "Primer::Alpha::Overlay::Body",
583
597
  "DEFAULT_ALIGN_CONTENT": "end",
584
598
  "DEFAULT_ANCHOR_ALIGN": "start",
585
599
  "DEFAULT_ANCHOR_OFFSET": "normal",
586
600
  "DEFAULT_ANCHOR_SIDE": "outside_bottom",
601
+ "DEFAULT_ANCHOR_WHEN_NARROW": "inherit",
587
602
  "DEFAULT_PADDING": "normal",
588
603
  "DEFAULT_POPOVER": "auto",
589
604
  "DEFAULT_SIZE": "auto",
@@ -1203,6 +1203,12 @@
1203
1203
  "default": "`:outside_bottom`",
1204
1204
  "description": "One of `:inside_bottom`, `:inside_center`, `:inside_left`, `:inside_right`, `:inside_top`, `:outside_bottom`, `:outside_left`, `:outside_right`, or `:outside_top`.."
1205
1205
  },
1206
+ {
1207
+ "name": "anchor_when_narrow",
1208
+ "type": "Symbol",
1209
+ "default": "`:inherit`",
1210
+ "description": "One of `:bottom`, `:fullscreen`, `:inherit`, `:left`, or `:right`.."
1211
+ },
1206
1212
  {
1207
1213
  "name": "size",
1208
1214
  "type": "Symbol",
@@ -1763,6 +1769,19 @@
1763
1769
  "color-contrast"
1764
1770
  ]
1765
1771
  }
1772
+ },
1773
+ {
1774
+ "preview_path": "primer/alpha/action_menu/fullscreen_when_narrow",
1775
+ "name": "fullscreen_when_narrow",
1776
+ "snapshot": "false",
1777
+ "skip_rules": {
1778
+ "wont_fix": [
1779
+ "region"
1780
+ ],
1781
+ "will_fix": [
1782
+ "color-contrast"
1783
+ ]
1784
+ }
1766
1785
  }
1767
1786
  ],
1768
1787
  "subcomponents": [
@@ -5915,6 +5934,12 @@
5915
5934
  "default": "`:normal`",
5916
5935
  "description": "The anchor offset to give the Overlay. One of `:normal` or `:spacious`."
5917
5936
  },
5937
+ {
5938
+ "name": "anchor_when_narrow",
5939
+ "type": "Symbol",
5940
+ "default": "`:inherit`",
5941
+ "description": "The position of the Overlay when in a narrow viewport. One of `:bottom`, `:fullscreen`, `:inherit`, `:left`, or `:right`."
5942
+ },
5918
5943
  {
5919
5944
  "name": "allow_out_of_bounds",
5920
5945
  "type": "Boolean",
@@ -11854,6 +11879,32 @@
11854
11879
  }
11855
11880
  ],
11856
11881
  "subcomponents": [
11882
+ {
11883
+ "fully_qualified_name": "Primer::Beta::AutoComplete::NoResultItem",
11884
+ "description": "Use `NoResultItem` to display a message when no autocomplete results are found.\nRenders as a simple div inside the overlay, not as a list item.",
11885
+ "accessibility_docs": null,
11886
+ "is_form_component": false,
11887
+ "is_published": true,
11888
+ "requires_js": false,
11889
+ "component": "AutoComplete::NoResultItem",
11890
+ "status": "beta",
11891
+ "a11y_reviewed": false,
11892
+ "short_name": "AutoCompleteNoResultItem",
11893
+ "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/auto_complete/no_result_item.rb",
11894
+ "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/auto_complete/no_result_item/default/",
11895
+ "parameters": [
11896
+ {
11897
+ "name": "system_arguments",
11898
+ "type": "Hash",
11899
+ "default": "N/A",
11900
+ "description": "{{link_to_system_arguments_docs}}"
11901
+ }
11902
+ ],
11903
+ "slots": [],
11904
+ "methods": [],
11905
+ "previews": [],
11906
+ "subcomponents": []
11907
+ },
11857
11908
  {
11858
11909
  "fully_qualified_name": "Primer::Beta::AutoComplete::Item",
11859
11910
  "description": "Use `AutoCompleteItem` to list results of an auto-completed search.",
@@ -11946,62 +11997,6 @@
11946
11997
  "methods": [],
11947
11998
  "previews": [],
11948
11999
  "subcomponents": []
11949
- },
11950
- {
11951
- "fully_qualified_name": "Primer::Beta::AutoComplete::NoResultItem",
11952
- "description": "",
11953
- "accessibility_docs": null,
11954
- "is_form_component": false,
11955
- "is_published": true,
11956
- "requires_js": false,
11957
- "component": "AutoComplete::NoResultItem",
11958
- "status": "beta",
11959
- "a11y_reviewed": false,
11960
- "short_name": "AutoCompleteNoResultItem",
11961
- "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/auto_complete/no_result_item.rb",
11962
- "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/auto_complete/no_result_item/default/",
11963
- "parameters": [],
11964
- "slots": [
11965
- {
11966
- "name": "leading_visual",
11967
- "description": "The leading visual rendered before the link.",
11968
- "parameters": [
11969
- {
11970
- "name": "kwargs",
11971
- "type": "Hash",
11972
- "default": "N/A",
11973
- "description": "The arguments accepted by {{#link_to_component}}Primer::Beta::Avatar{{/link_to_component}} or {{#link_to_component}}Primer::Beta::Octicon{{/link_to_component}}"
11974
- }
11975
- ]
11976
- },
11977
- {
11978
- "name": "trailing_visual",
11979
- "description": "The trailing visual rendered after the link.",
11980
- "parameters": [
11981
- {
11982
- "name": "kwargs",
11983
- "type": "Hash",
11984
- "default": "N/A",
11985
- "description": "The arguments accepted by {{#link_to_component}}Primer::Beta::Octicon{{/link_to_component}}, {{#link_to_component}}Primer::Beta::Label{{/link_to_component}}, or {{#link_to_component}}Primer::Beta::Counter{{/link_to_component}}"
11986
- }
11987
- ]
11988
- },
11989
- {
11990
- "name": "description",
11991
- "description": "Optional description",
11992
- "parameters": [
11993
- {
11994
- "name": "system_arguments",
11995
- "type": "Hash",
11996
- "default": "N/A",
11997
- "description": "{{link_to_system_arguments_docs}}"
11998
- }
11999
- ]
12000
- }
12001
- ],
12002
- "methods": [],
12003
- "previews": [],
12004
- "subcomponents": []
12005
12000
  }
12006
12001
  ]
12007
12002
  },
@@ -826,6 +826,19 @@
826
826
  "color-contrast"
827
827
  ]
828
828
  }
829
+ },
830
+ {
831
+ "preview_path": "primer/alpha/action_menu/fullscreen_when_narrow",
832
+ "name": "fullscreen_when_narrow",
833
+ "snapshot": "false",
834
+ "skip_rules": {
835
+ "wont_fix": [
836
+ "region"
837
+ ],
838
+ "will_fix": [
839
+ "color-contrast"
840
+ ]
841
+ }
829
842
  }
830
843
  ]
831
844
  },