@brightspace-ui/core 3.208.2 → 3.208.4
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/components/dropdown/demo/dropdown-flicker-inner.html +70 -0
- package/components/dropdown/demo/dropdown-flicker.html +142 -0
- package/components/inputs/input-checkbox.js +1 -2
- package/components/inputs/input-styles.js +1 -2
- package/components/inputs/sass/checkbox.scss +1 -1
- package/components/inputs/sass/radio.scss +1 -1
- package/components/inputs/sass/select.scss +1 -2
- package/components/inputs/sass/text.scss +1 -2
- package/components/popover/popover-mixin.js +16 -2
- package/package.json +1 -1
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
|
|
4
|
+
<head>
|
|
5
|
+
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
|
|
6
|
+
<meta charset="UTF-8">
|
|
7
|
+
<link rel="stylesheet" href="../../demo/styles.css" type="text/css">
|
|
8
|
+
</head>
|
|
9
|
+
|
|
10
|
+
<body>
|
|
11
|
+
|
|
12
|
+
<div>This is stuff</div>
|
|
13
|
+
<div>This is stuff</div>
|
|
14
|
+
<div>This is stuff</div>
|
|
15
|
+
<div>This is stuff</div>
|
|
16
|
+
<div>This is stuff</div>
|
|
17
|
+
<div>This is stuff</div>
|
|
18
|
+
<div>This is stuff</div>
|
|
19
|
+
<div>This is stuff</div>
|
|
20
|
+
<div>This is stuff</div>
|
|
21
|
+
<div>This is stuff</div>
|
|
22
|
+
<div>This is stuff</div>
|
|
23
|
+
<div>This is stuff</div>
|
|
24
|
+
<div>This is stuff</div>
|
|
25
|
+
<div>This is stuff</div>
|
|
26
|
+
<div>This is stuff</div>
|
|
27
|
+
<div>This is stuff</div>
|
|
28
|
+
<div>This is stuff</div>
|
|
29
|
+
<div>This is stuff</div>
|
|
30
|
+
<div>This is stuff</div>
|
|
31
|
+
<div>This is stuff</div>
|
|
32
|
+
<div>This is stuff</div>
|
|
33
|
+
<div>This is stuff</div>
|
|
34
|
+
<div>This is stuff</div>
|
|
35
|
+
<div>This is stuff</div>
|
|
36
|
+
<div>This is stuff</div>
|
|
37
|
+
<div>This is stuff</div>
|
|
38
|
+
<div>This is stuff</div>
|
|
39
|
+
<div>This is stuff</div>
|
|
40
|
+
<div>This is stuff</div>
|
|
41
|
+
<div>This is stuff</div>
|
|
42
|
+
<div>This is stuff</div>
|
|
43
|
+
<div>This is stuff</div>
|
|
44
|
+
<div>This is stuff</div>
|
|
45
|
+
<div>This is stuff</div>
|
|
46
|
+
<div>This is stuff</div>
|
|
47
|
+
<div>This is stuff</div>
|
|
48
|
+
<div>This is stuff</div>
|
|
49
|
+
<div>This is stuff</div>
|
|
50
|
+
<div>This is stuff</div>
|
|
51
|
+
<div>This is stuff</div>
|
|
52
|
+
<div>This is stuff</div>
|
|
53
|
+
<div>This is stuff</div>
|
|
54
|
+
<div>This is stuff</div>
|
|
55
|
+
<div>This is stuff</div>
|
|
56
|
+
<div>This is stuff</div>
|
|
57
|
+
<div>This is stuff</div>
|
|
58
|
+
<div>This is stuff</div>
|
|
59
|
+
<div>This is stuff</div>
|
|
60
|
+
<div>This is stuff</div>
|
|
61
|
+
<div>This is stuff</div>
|
|
62
|
+
<div>This is stuff</div>
|
|
63
|
+
<div>This is stuff</div>
|
|
64
|
+
<div>This is stuff</div>
|
|
65
|
+
<div>This is stuff</div>
|
|
66
|
+
<div>This is stuff</div>
|
|
67
|
+
<div>This is stuff</div>
|
|
68
|
+
</body>
|
|
69
|
+
|
|
70
|
+
</html>
|
|
@@ -0,0 +1,142 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
|
|
4
|
+
<head>
|
|
5
|
+
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
|
|
6
|
+
<meta charset="UTF-8">
|
|
7
|
+
<link rel="stylesheet" href="../../demo/styles.css" type="text/css">
|
|
8
|
+
<script type="module">
|
|
9
|
+
import '../../demo/demo-page.js';
|
|
10
|
+
import '../../menu/menu.js';
|
|
11
|
+
import '../../menu/menu-item.js';
|
|
12
|
+
import '../dropdown-more.js';
|
|
13
|
+
import '../dropdown-menu.js';
|
|
14
|
+
</script>
|
|
15
|
+
<style>
|
|
16
|
+
iframe {
|
|
17
|
+
border: 0;
|
|
18
|
+
margin: 0;
|
|
19
|
+
outline: 0;
|
|
20
|
+
padding: 0;
|
|
21
|
+
width: 100%;
|
|
22
|
+
}
|
|
23
|
+
</style>
|
|
24
|
+
</head>
|
|
25
|
+
|
|
26
|
+
<body unresolved>
|
|
27
|
+
|
|
28
|
+
<d2l-demo-page page-title="d2l-dropdown-more" style="width: 900px;">
|
|
29
|
+
|
|
30
|
+
<div style="text-align: right;">
|
|
31
|
+
<d2l-dropdown-more text="Open!">
|
|
32
|
+
<d2l-dropdown-menu>
|
|
33
|
+
<d2l-menu label="Astronomy">
|
|
34
|
+
<d2l-menu-item text="Introduction"></d2l-menu-item>
|
|
35
|
+
<d2l-menu-item text="Searching for the Heavens"></d2l-menu-item>
|
|
36
|
+
<d2l-menu-item text="The Night Sky"></d2l-menu-item>
|
|
37
|
+
<d2l-menu-item text="The Universe"></d2l-menu-item>
|
|
38
|
+
<d2l-menu-item text="Constellations"></d2l-menu-item>
|
|
39
|
+
<d2l-menu-item text="Mapping the Heavens"></d2l-menu-item>
|
|
40
|
+
<d2l-menu-item text="Reading Star Maps"></d2l-menu-item>
|
|
41
|
+
<d2l-menu-item text="Telescopes"></d2l-menu-item>
|
|
42
|
+
</d2l-menu>
|
|
43
|
+
</d2l-dropdown-menu>
|
|
44
|
+
</d2l-dropdown-more>
|
|
45
|
+
</div>
|
|
46
|
+
<iframe src="dropdown-flicker-inner.html"></iframe>
|
|
47
|
+
|
|
48
|
+
</d2l-demo-page>
|
|
49
|
+
<script>
|
|
50
|
+
function doIFrameStuff(iframe) {
|
|
51
|
+
|
|
52
|
+
const pollInterval = 50;
|
|
53
|
+
|
|
54
|
+
const getSafeHeight = height => {
|
|
55
|
+
// If the client gives us content with no size restrictions then it will shrink to the minimal size allowed
|
|
56
|
+
// The minimal allowed size in this case will be 150: http://www.w3.org/TR/CSS2/visudet.html#inline-replaced-height
|
|
57
|
+
// Major browsers may add 8px of margins to top and bottom depending on what tags client wrap their content in or client might put their own defaults in place too
|
|
58
|
+
// So we'll use the greater of the configured default height on the frame or 200, which will account for 150 from the auto size and another 50 of tolerance.
|
|
59
|
+
// For tiny content this may unfortunately force some unnecessary whitespace
|
|
60
|
+
// But in most cases this will allow us to give clients a reasonable default if they forget to enforce minimums in their content.
|
|
61
|
+
// The default height can be confgured from within the frame by setting `window.frameElement.dataset.defaultHeight`. Values lower then 200 are not respected.
|
|
62
|
+
const defaultHeight = Math.max(iframe.dataset.defaultHeight || 0, 200);
|
|
63
|
+
|
|
64
|
+
if (!height || height < defaultHeight) {
|
|
65
|
+
height = defaultHeight;
|
|
66
|
+
}
|
|
67
|
+
return `${height}px`;
|
|
68
|
+
};
|
|
69
|
+
|
|
70
|
+
const getMinHeight = (iframe, currentHeight) => {
|
|
71
|
+
const doc = iframe.contentDocument;
|
|
72
|
+
const docElem = doc.documentElement;
|
|
73
|
+
const rootScrollHeight = docElem.scrollHeight;
|
|
74
|
+
const bodyScrollHeight = doc.body.scrollHeight;
|
|
75
|
+
const rootHeight = doc.documentElement.getBoundingClientRect().height;
|
|
76
|
+
const bodyHeight = doc.body.getBoundingClientRect().height;
|
|
77
|
+
const minHeight = Math.ceil(Math.min(rootScrollHeight, bodyScrollHeight, rootHeight, bodyHeight));
|
|
78
|
+
return minHeight < currentHeight ? minHeight : currentHeight - 100;
|
|
79
|
+
};
|
|
80
|
+
|
|
81
|
+
const getHeight = iframe => {
|
|
82
|
+
const doc = iframe.contentDocument;
|
|
83
|
+
const docElem = doc.documentElement;
|
|
84
|
+
const rootScrollHeight = docElem.scrollHeight > docElem.clientHeight ? docElem.scrollHeight : 0;
|
|
85
|
+
const bodyScrollHeight = doc.body.scrollHeight > doc.body.clientHeight ? doc.body.scrollHeight : 0;
|
|
86
|
+
const rootHeight = doc.documentElement.getBoundingClientRect().height;
|
|
87
|
+
const bodyHeight = doc.body.getBoundingClientRect().height;
|
|
88
|
+
return Math.ceil(Math.max(rootScrollHeight, bodyScrollHeight, rootHeight, bodyHeight));
|
|
89
|
+
};
|
|
90
|
+
|
|
91
|
+
const doResize = (height, location) => {
|
|
92
|
+
|
|
93
|
+
//console.log('doResize');
|
|
94
|
+
|
|
95
|
+
let newHeight, newLocation, stopResizing;
|
|
96
|
+
|
|
97
|
+
try {
|
|
98
|
+
const targetWindow = iframe.contentWindow;
|
|
99
|
+
|
|
100
|
+
iframe.style.height = getSafeHeight(getMinHeight(iframe, height));
|
|
101
|
+
newHeight = getHeight(iframe);
|
|
102
|
+
|
|
103
|
+
targetWindow.document.body.style.overflowY = 'hidden';
|
|
104
|
+
newLocation = targetWindow.location.href;
|
|
105
|
+
|
|
106
|
+
iframe.style.height = getSafeHeight(newHeight);
|
|
107
|
+
iframe.style.overflowY = 'hidden';
|
|
108
|
+
|
|
109
|
+
iframe.parentElement.style.minHeight = iframe.style.height; // This ensures that we will not reset scrollbar to the top ( see US52307 )
|
|
110
|
+
|
|
111
|
+
} catch {
|
|
112
|
+
// We were unable to size content so we should go to defaults
|
|
113
|
+
iframe.style.height = getSafeHeight();
|
|
114
|
+
iframe.parentElement.style.minHeight = iframe.style.height;
|
|
115
|
+
|
|
116
|
+
if (iframe.contentDocument?.body) {
|
|
117
|
+
iframe.contentDocument.body.style.overflowY = 'auto';
|
|
118
|
+
}
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
if (newLocation !== location && newHeight !== height) {
|
|
122
|
+
//Now that content is resized we should snap back to the top when we follow a link to a new page
|
|
123
|
+
window.parent.scroll(0, 0);
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
if (!stopResizing) {
|
|
127
|
+
setTimeout(() => doResize(newHeight, newLocation), pollInterval);
|
|
128
|
+
}
|
|
129
|
+
};
|
|
130
|
+
|
|
131
|
+
const resize = function() {
|
|
132
|
+
if (iframe.contentDocument) doResize();
|
|
133
|
+
};
|
|
134
|
+
|
|
135
|
+
resize();
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
doIFrameStuff(document.querySelector('iframe'));
|
|
139
|
+
</script>
|
|
140
|
+
</body>
|
|
141
|
+
|
|
142
|
+
</html>
|
|
@@ -56,7 +56,6 @@ export const checkboxStyles = css`
|
|
|
56
56
|
display: inline-block;
|
|
57
57
|
height: ${cssSizes.inputBoxSize}rem;
|
|
58
58
|
margin: 0;
|
|
59
|
-
outline: none;
|
|
60
59
|
padding: 0;
|
|
61
60
|
vertical-align: middle;
|
|
62
61
|
width: ${cssSizes.inputBoxSize}rem;
|
|
@@ -82,7 +81,7 @@ export const checkboxStyles = css`
|
|
|
82
81
|
:host(.d2l-hovering) input[type="checkbox"]:not(:disabled).d2l-input-checkbox {
|
|
83
82
|
border-color: var(--d2l-input-checkbox-border-color-hover-focus, var(--d2l-color-celestine));
|
|
84
83
|
border-width: 2px;
|
|
85
|
-
outline
|
|
84
|
+
outline: none;
|
|
86
85
|
}
|
|
87
86
|
input[type="checkbox"].d2l-input-checkbox:disabled,
|
|
88
87
|
input[type="checkbox"].d2l-input-checkbox:where([aria-disabled="true"]) {
|
|
@@ -57,8 +57,7 @@ export const inputStyles = css`
|
|
|
57
57
|
.d2l-input-focus {
|
|
58
58
|
border-color: var(--d2l-color-celestine);
|
|
59
59
|
border-width: 2px;
|
|
60
|
-
outline
|
|
61
|
-
outline-width: 0;
|
|
60
|
+
outline: none;
|
|
62
61
|
padding: var(--d2l-input-padding-focus, calc(0.4rem - 1px) calc(0.75rem - 1px));
|
|
63
62
|
}
|
|
64
63
|
[aria-invalid="true"].d2l-input {
|
|
@@ -46,8 +46,7 @@
|
|
|
46
46
|
&:focus {
|
|
47
47
|
border-color: colors.$d2l-color-celestine;
|
|
48
48
|
border-width: 2px;
|
|
49
|
-
outline
|
|
50
|
-
outline-width: 0;
|
|
49
|
+
outline: none;
|
|
51
50
|
padding: calc(0.4rem - 1px) calc(0.75rem - 1px);
|
|
52
51
|
padding-right: calc(2px + 0.8rem + 1px + 11px + 16px - 1px);
|
|
53
52
|
}
|
|
@@ -579,6 +579,7 @@ export const PopoverMixin = superclass => class extends superclass {
|
|
|
579
579
|
else return this.open(opener, (!this._noAutoFocus && applyFocus));
|
|
580
580
|
}
|
|
581
581
|
|
|
582
|
+
#ancestorMutations;
|
|
582
583
|
#ifrauContextInfo;
|
|
583
584
|
#mediaQueryList;
|
|
584
585
|
#handleAncestorMutationBound;
|
|
@@ -608,6 +609,7 @@ export const PopoverMixin = superclass => class extends superclass {
|
|
|
608
609
|
};
|
|
609
610
|
|
|
610
611
|
this.#removeRepositionHandlers();
|
|
612
|
+
this.#ancestorMutations = new Map();
|
|
611
613
|
|
|
612
614
|
window.addEventListener('resize', this.#handleResizeBound);
|
|
613
615
|
|
|
@@ -1087,8 +1089,20 @@ export const PopoverMixin = superclass => class extends superclass {
|
|
|
1087
1089
|
|
|
1088
1090
|
#handleAncestorMutation(mutations) {
|
|
1089
1091
|
if (!this._opener) return;
|
|
1090
|
-
|
|
1091
|
-
|
|
1092
|
+
const reposition = !!mutations.find(mutation => {
|
|
1093
|
+
|
|
1094
|
+
// ignore mutations that are within this popover
|
|
1095
|
+
if (isComposedAncestor(this._opener, mutation.target)) return false;
|
|
1096
|
+
|
|
1097
|
+
// ignore elements that are thrashing (ex. iframe's being resized on a setTimeout)
|
|
1098
|
+
const previousMutation = this.#ancestorMutations?.get(mutation.target);
|
|
1099
|
+
if (previousMutation && previousMutation === mutation.target.style.cssText) return false;
|
|
1100
|
+
if (mutation.type === 'attributes' && mutation.attributeName === 'style') {
|
|
1101
|
+
this.#ancestorMutations?.set(mutation.target, mutation.target.style.cssText);
|
|
1102
|
+
}
|
|
1103
|
+
|
|
1104
|
+
return true;
|
|
1105
|
+
});
|
|
1092
1106
|
if (reposition) this.#reposition();
|
|
1093
1107
|
}
|
|
1094
1108
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@brightspace-ui/core",
|
|
3
|
-
"version": "3.208.
|
|
3
|
+
"version": "3.208.4",
|
|
4
4
|
"description": "A collection of accessible, free, open-source web components for building Brightspace applications",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"repository": "https://github.com/BrightspaceUI/core.git",
|