@brightspace-ui/core 3.219.8 → 3.219.10

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.
Files changed (4) hide show
  1. package/components/backdrop/backdrop-loading.js +8 -2
  2. package/components/expand-collapse/demo/expand-collapse-content.html +3 -1
  3. package/components/expand-collapse/expand-collapse-content.js +33 -57
  4. package/package.json +1 -1
package/components/backdrop/backdrop-loading.js CHANGED
@@ -64,7 +64,7 @@ class LoadingBackdrop extends LitElement {
64
64
  :host([_state="shown"]) d2l-loading-spinner {
65
65
  opacity: 1;
66
66
  }
67
-
67
+
68
68
  :host([_state="hiding"]) .d2l-backdrop,
69
69
  :host([_state="hiding"]) d2l-loading-spinner {
70
70
  transition: opacity ${FADE_DURATION_MS}ms ease-out;
@@ -111,7 +111,13 @@ class LoadingBackdrop extends LitElement {
111
111
  }
112
112
 
113
113
  #fade() {
114
- if (reduceMotion || this._state === 'showing') {
114
+ let hideImmediately = reduceMotion || this._state === 'showing';
115
+ if (this._state === 'shown') {
116
+ const currentOpacity = getComputedStyle(this.shadowRoot.querySelector('.backdrop')).opacity;
117
+ hideImmediately ||= (currentOpacity === '0');
118
+ }
119
+
120
+ if (hideImmediately) {
115
121
  this.#hide();
116
122
  } else {
117
123
  this._state = 'hiding';
package/components/expand-collapse/demo/expand-collapse-content.html CHANGED
@@ -40,11 +40,13 @@
40
40
  </d2l-expand-collapse-content>
41
41
  <script type="module">
42
42
  const button = document.querySelector('d2l-button');
43
+ const section = document.querySelector('d2l-expand-collapse-content');
43
44
  button.addEventListener('click', () => {
44
- const section = document.querySelector('d2l-expand-collapse-content');
45
45
  section.expanded = !section.expanded;
46
46
  button.setAttribute('expanded', section.expanded ? 'true' : 'false');
47
47
  });
48
+ section.addEventListener('d2l-expand-collapse-content-collapse', () => console.log('collapsed'));
49
+ section.addEventListener('d2l-expand-collapse-content-expand', () => console.log('expanded'));
48
50
  </script>
49
51
  </template>
50
52
  </d2l-demo-snippet>
package/components/expand-collapse/expand-collapse-content.js CHANGED
@@ -86,7 +86,6 @@ class ExpandCollapseContent extends LitElement {
86
86
  super();
87
87
  this.expanded = false;
88
88
  this._height = '0';
89
- this._isFirstUpdate = true;
90
89
  this._state = states.COLLAPSED;
91
90
  this._reduceMotion = reduceMotion;
92
91
  }
@@ -94,7 +93,7 @@ class ExpandCollapseContent extends LitElement {
94
93
  render() {
95
94
  const styles = { height: this._height };
96
95
  return html`
97
- <div class="d2l-expand-collapse-content-container" data-state="${this._state}" @transitionend=${this._onTransitionEnd} style=${styleMap(styles)}>
96
+ <div class="d2l-expand-collapse-content-container" data-state="${this._state}" @transitionend=${this.#resolveTransition} style=${styleMap(styles)}>
98
97
  <div class="d2l-expand-collapse-content-inner">
99
98
  <slot></slot>
100
99
  </div>
@@ -102,75 +101,52 @@ class ExpandCollapseContent extends LitElement {
102
101
  `;
103
102
  }
104
103
 
105
- updated(changedProperties) {
106
- super.updated(changedProperties);
104
+ willUpdate(changedProperties) {
105
+ super.willUpdate(changedProperties);
107
106
  if (changedProperties.has('expanded')) {
108
- this._expandedChanged(this.expanded, this._isFirstUpdate);
109
- this._isFirstUpdate = false;
107
+ if (!this.hasUpdated) this.#resolveTransition();
108
+ else this._expandedChanged();
110
109
  }
111
110
  }
112
111
 
113
- async _expandedChanged(val, firstUpdate) {
112
+ async _expandedChanged() {
114
113
  const eventPromise = new Promise(resolve => this._eventPromiseResolve = resolve);
115
- if (val) {
116
- if (!firstUpdate) {
117
- this.dispatchEvent(new CustomEvent(
118
- 'd2l-expand-collapse-content-expand',
119
- { bubbles: true, detail: { expandComplete: eventPromise } }
120
- ));
121
- }
122
- if (this._reduceMotion || firstUpdate) {
123
- this._setExpanded();
124
- } else {
125
- this._state = states.PREEXPANDING;
126
- await this.updateComplete;
127
- await new Promise((r) => requestAnimationFrame(() => requestAnimationFrame(r)));
128
- if (this._state === states.PREEXPANDING) {
129
- this._state = states.EXPANDING;
130
- const content = this.shadowRoot?.querySelector('.d2l-expand-collapse-content-inner');
131
- const contentHeight = content?.scrollHeight;
132
- if (contentHeight) this._height = `${contentHeight}px`;
133
- if (contentHeight === 0) this._setExpanded();
134
- }
114
+ this.dispatchEvent(new CustomEvent(
115
+ this.expanded ? 'd2l-expand-collapse-content-expand' : 'd2l-expand-collapse-content-collapse',
116
+ { bubbles: true, detail: { [this.expanded ? 'expandComplete' : 'collapseComplete']: eventPromise } }
117
+ ));
118
+ if (this._reduceMotion) {
119
+ this.#resolveTransition();
120
+ } else if (this.expanded) {
121
+ this._state = states.PREEXPANDING;
122
+ await this.updateComplete;
123
+ await new Promise((r) => requestAnimationFrame(() => requestAnimationFrame(r)));
124
+ if (this._state === states.PREEXPANDING) {
125
+ this._state = states.EXPANDING;
126
+ const contentHeight = this.#getContentHeight();
127
+ if (contentHeight) this._height = `${contentHeight}px`;
128
+ if (contentHeight === 0) this.#resolveTransition();
135
129
  }
136
130
  } else {
137
- if (!firstUpdate) {
138
- this.dispatchEvent(new CustomEvent(
139
- 'd2l-expand-collapse-content-collapse',
140
- { bubbles: true, detail: { collapseComplete: eventPromise } }
141
- ));
142
- }
143
- if (this._reduceMotion || firstUpdate) {
144
- this._state = states.COLLAPSED;
131
+ this._state = states.PRECOLLAPSING;
132
+ this._height = `${this.#getContentHeight()}px`;
133
+ await this.updateComplete;
134
+ await new Promise((r) => requestAnimationFrame(() => requestAnimationFrame(r)));
135
+ if (this._state === states.PRECOLLAPSING) {
136
+ this._state = states.COLLAPSING;
145
137
  this._height = '0';
146
- this._eventPromiseResolve();
147
- } else {
148
- this._state = states.PRECOLLAPSING;
149
- const content = this.shadowRoot && this.shadowRoot.querySelector('.d2l-expand-collapse-content-inner');
150
- if (content) this._height = `${content.scrollHeight}px`;
151
- await this.updateComplete;
152
- await new Promise((r) => requestAnimationFrame(() => requestAnimationFrame(r)));
153
- if (this._state === states.PRECOLLAPSING) {
154
- this._state = states.COLLAPSING;
155
- this._height = '0';
156
- }
157
138
  }
158
139
  }
159
140
  }
160
141
 
161
- _onTransitionEnd() {
162
- if (this._state === states.EXPANDING) {
163
- this._setExpanded();
164
- } else if (this._state === states.COLLAPSING) {
165
- this._state = states.COLLAPSED;
166
- this._eventPromiseResolve();
167
- }
142
+ #getContentHeight() {
143
+ return this.shadowRoot?.querySelector('.d2l-expand-collapse-content-inner')?.scrollHeight ?? 0;
168
144
  }
169
145
 
170
- _setExpanded() {
171
- this._state = states.EXPANDED;
172
- this._height = 'auto';
173
- this._eventPromiseResolve();
146
+ #resolveTransition() {
147
+ this._state = this.expanded ? states.EXPANDED : states.COLLAPSED;
148
+ this._height = this.expanded ? 'auto' : '0';
149
+ this._eventPromiseResolve && this._eventPromiseResolve();
174
150
  }
175
151
  }
176
152
  customElements.define('d2l-expand-collapse-content', ExpandCollapseContent);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@brightspace-ui/core",
3
- "version": "3.219.8",
3
+ "version": "3.219.10",
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",