@primer/view-components 0.38.0-rc.f2e49a80 → 0.39.0-rc.17eb78d6
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.
- package/app/assets/javascripts/primer_view_components.js +1 -1
- package/app/assets/javascripts/primer_view_components.js.map +1 -1
- package/app/assets/styles/primer_view_components.css +1 -1
- package/app/assets/styles/primer_view_components.css.map +1 -1
- package/app/components/primer/alpha/dialog.css +1 -1
- package/app/components/primer/alpha/dialog.css.json +0 -1
- package/app/components/primer/alpha/select_panel_element.js +6 -4
- package/app/components/primer/dialog_helper.js +3 -0
- package/package.json +6 -6
|
@@ -1 +1 @@
|
|
|
1
|
-
@property --dialog-scrollgutter{initial-value:0;inherits:false;syntax:"<length>"}body:has(:modal){padding-right:var(--dialog-scrollgutter)!important}
|
|
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-size:var(--text-title-size-medium)}: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%)}}
|
|
@@ -893,7 +893,8 @@ _SelectPanelElement_setDynamicLabel = function _SelectPanelElement_setDynamicLab
|
|
|
893
893
|
};
|
|
894
894
|
_SelectPanelElement_updateInput = function _SelectPanelElement_updateInput() {
|
|
895
895
|
if (this.selectVariant === 'single') {
|
|
896
|
-
const input = this.querySelector(`[data-
|
|
896
|
+
const input = this.querySelector(`[data-select-panel-inputs=true] input`) ??
|
|
897
|
+
this.querySelector(`[data-list-inputs=true] input`);
|
|
897
898
|
if (!input)
|
|
898
899
|
return;
|
|
899
900
|
const selectedItem = this.selectedItems[0];
|
|
@@ -903,13 +904,14 @@ _SelectPanelElement_updateInput = function _SelectPanelElement_updateInput() {
|
|
|
903
904
|
input.name = selectedItem.inputName;
|
|
904
905
|
input.removeAttribute('disabled');
|
|
905
906
|
}
|
|
906
|
-
else {
|
|
907
|
+
else if (__classPrivateFieldGet(this, _SelectPanelElement_hasLoadedData, "f")) {
|
|
907
908
|
input.setAttribute('disabled', 'disabled');
|
|
908
909
|
}
|
|
909
910
|
}
|
|
910
911
|
else if (this.selectVariant !== 'none') {
|
|
911
912
|
// multiple select variant
|
|
912
|
-
const
|
|
913
|
+
const isRemoteInput = !!this.querySelector('[data-select-panel-inputs=true]');
|
|
914
|
+
const inputList = this.querySelector('[data-select-panel-inputs=true]') ?? this.querySelector('[data-list-inputs=true]');
|
|
913
915
|
if (!inputList)
|
|
914
916
|
return;
|
|
915
917
|
const inputs = inputList.querySelectorAll('input');
|
|
@@ -918,7 +920,7 @@ _SelectPanelElement_updateInput = function _SelectPanelElement_updateInput() {
|
|
|
918
920
|
}
|
|
919
921
|
for (const selectedItem of this.selectedItems) {
|
|
920
922
|
const newInput = document.createElement('input');
|
|
921
|
-
newInput.setAttribute('data-list-input'
|
|
923
|
+
newInput.setAttribute(`${isRemoteInput ? 'data-select-panel-input' : 'data-list-input'}`, 'true');
|
|
922
924
|
newInput.type = 'hidden';
|
|
923
925
|
newInput.autocomplete = 'off';
|
|
924
926
|
newInput.name = selectedItem.inputName || __classPrivateFieldGet(this, _SelectPanelElement_inputName, "f");
|
|
@@ -102,6 +102,9 @@ export class DialogHelperElement extends HTMLElement {
|
|
|
102
102
|
// The click target _must_ be the dialog element itself, and not elements underneath or inside.
|
|
103
103
|
if (target !== dialog || !dialog?.open)
|
|
104
104
|
return;
|
|
105
|
+
// If the dialog contains a form, do not close the dialog when clicking outside of the dialog
|
|
106
|
+
if (dialog.querySelector('form'))
|
|
107
|
+
return;
|
|
105
108
|
const rect = dialog.getBoundingClientRect();
|
|
106
109
|
const clickWasInsideDialog = rect.top <= event.clientY &&
|
|
107
110
|
event.clientY <= rect.top + rect.height &&
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@primer/view-components",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.39.0-rc.17eb78d6",
|
|
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",
|
|
@@ -44,7 +44,7 @@
|
|
|
44
44
|
},
|
|
45
45
|
"dependencies": {
|
|
46
46
|
"@github/auto-check-element": "^5.2.0",
|
|
47
|
-
"@github/auto-complete-element": "^3.
|
|
47
|
+
"@github/auto-complete-element": "^3.8.0",
|
|
48
48
|
"@github/catalyst": "^1.6.0",
|
|
49
49
|
"@github/clipboard-copy-element": "^1.3.0",
|
|
50
50
|
"@github/details-menu-element": "^1.0.12",
|
|
@@ -53,9 +53,9 @@
|
|
|
53
53
|
"@github/relative-time-element": "^4.0.0",
|
|
54
54
|
"@github/remote-input-element": "^0.4.0",
|
|
55
55
|
"@github/tab-container-element": "^3.1.2",
|
|
56
|
-
"@primer/live-region-element": "^0.8.0",
|
|
57
56
|
"@oddbird/popover-polyfill": "^0.5.2",
|
|
58
|
-
"@primer/behaviors": "^1.3.4"
|
|
57
|
+
"@primer/behaviors": "^1.3.4",
|
|
58
|
+
"@primer/live-region-element": "^0.8.0"
|
|
59
59
|
},
|
|
60
60
|
"peerDependencies": {
|
|
61
61
|
"@primer/primitives": "9.x || 10.x"
|
|
@@ -70,7 +70,7 @@
|
|
|
70
70
|
"@playwright/test": "^1.49.1",
|
|
71
71
|
"@primer/css": "21.5.1",
|
|
72
72
|
"@primer/stylelint-config": "^13.1.1",
|
|
73
|
-
"@rollup/plugin-node-resolve": "^
|
|
73
|
+
"@rollup/plugin-node-resolve": "^16.0.1",
|
|
74
74
|
"@rollup/plugin-typescript": "^8.3.3",
|
|
75
75
|
"@typescript-eslint/eslint-plugin": "^7.0.1",
|
|
76
76
|
"@typescript-eslint/parser": "^7.0.1",
|
|
@@ -81,7 +81,7 @@
|
|
|
81
81
|
"eslint-plugin-custom-elements": "^0.0.8",
|
|
82
82
|
"eslint-plugin-github": "^5.0.1",
|
|
83
83
|
"eslint-plugin-prettier": "^5.0.0",
|
|
84
|
-
"markdownlint-cli2": "^0.
|
|
84
|
+
"markdownlint-cli2": "^0.17.2",
|
|
85
85
|
"mocha": "^11.0.1",
|
|
86
86
|
"playwright": "^1.49.1",
|
|
87
87
|
"postcss": "^8.4.16",
|