@primer/view-components 0.38.0-rc.f2e49a80 → 0.39.0-rc.2a62a5ab
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 +4 -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,7 @@ _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
897
|
if (!input)
|
|
898
898
|
return;
|
|
899
899
|
const selectedItem = this.selectedItems[0];
|
|
@@ -903,13 +903,13 @@ _SelectPanelElement_updateInput = function _SelectPanelElement_updateInput() {
|
|
|
903
903
|
input.name = selectedItem.inputName;
|
|
904
904
|
input.removeAttribute('disabled');
|
|
905
905
|
}
|
|
906
|
-
else {
|
|
906
|
+
else if (__classPrivateFieldGet(this, _SelectPanelElement_hasLoadedData, "f")) {
|
|
907
907
|
input.setAttribute('disabled', 'disabled');
|
|
908
908
|
}
|
|
909
909
|
}
|
|
910
910
|
else if (this.selectVariant !== 'none') {
|
|
911
911
|
// multiple select variant
|
|
912
|
-
const inputList = this.querySelector('[data-
|
|
912
|
+
const inputList = this.querySelector('[data-select-panel-inputs=true]');
|
|
913
913
|
if (!inputList)
|
|
914
914
|
return;
|
|
915
915
|
const inputs = inputList.querySelectorAll('input');
|
|
@@ -918,7 +918,7 @@ _SelectPanelElement_updateInput = function _SelectPanelElement_updateInput() {
|
|
|
918
918
|
}
|
|
919
919
|
for (const selectedItem of this.selectedItems) {
|
|
920
920
|
const newInput = document.createElement('input');
|
|
921
|
-
newInput.setAttribute('data-
|
|
921
|
+
newInput.setAttribute('data-select-panel-input', 'true');
|
|
922
922
|
newInput.type = 'hidden';
|
|
923
923
|
newInput.autocomplete = 'off';
|
|
924
924
|
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.2a62a5ab",
|
|
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",
|