@brightspace-ui/core 3.165.2 → 3.166.0

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 (9) hide show
  1. package/components/dropdown/dropdown-popover-mixin.js +32 -7
  2. package/components/filter/demo/filter.html +7 -0
  3. package/components/filter/filter.js +26 -19
  4. package/components/inputs/demo/input-date.html +7 -0
  5. package/components/popover/popover-mixin.js +10 -2
  6. package/components/table/table-col-sort-button.js +2 -1
  7. package/components/tag-list/tag-list.js +1 -1
  8. package/custom-elements.json +12 -12
  9. package/package.json +1 -1
package/components/dropdown/dropdown-popover-mixin.js CHANGED
@@ -6,7 +6,7 @@ import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
6
6
  import { PopoverMixin } from '../popover/popover-mixin.js';
7
7
  import { styleMap } from 'lit/directives/style-map.js';
8
8
 
9
- export const usePopoverMixin = getFlag('GAUD-7472-dropdown-popover', false);
9
+ export const usePopoverMixin = getFlag('GAUD-7472-dropdown-popover', true);
10
10
 
11
11
  export const DropdownPopoverMixin = superclass => class extends LocalizeCoreElement(PopoverMixin(superclass)) {
12
12
 
@@ -113,7 +113,7 @@ export const DropdownPopoverMixin = superclass => class extends LocalizeCoreElem
113
113
  static get styles() {
114
114
  return [super.styles, css`
115
115
  .dropdown-content-layout {
116
- align-items: flex-start;
116
+ align-items: stretch;
117
117
  display: flex;
118
118
  flex-direction: column;
119
119
  }
@@ -195,14 +195,18 @@ export const DropdownPopoverMixin = superclass => class extends LocalizeCoreElem
195
195
  this.addEventListener('d2l-popover-open', this.#handlePopoverOpen);
196
196
  this.addEventListener('d2l-popover-close', this.#handlePopoverClose);
197
197
  this.addEventListener('d2l-popover-position', this.#handlePopoverPosition);
198
+ this.addEventListener('d2l-popover-focus-enter', this.#handlePopoverFocusEnter);
198
199
  }
199
200
 
200
201
  render() {
201
202
 
202
- const fillHeight = this._mobile && (this._mobileTrayLocation === 'inline-start' || this._mobileTrayLocation === 'inline-end');
203
- const contentLayoutStyles = {
204
- maxHeight: (!fillHeight && this._contentHeight) ? `${this._contentHeight}px` : undefined
205
- };
203
+ const contentLayoutStyles = {};
204
+ if (this._mobile && this._mobileTrayLocation === 'block-end') {
205
+ contentLayoutStyles.maxHeight = '100%';
206
+ } else {
207
+ const fillHeight = this._mobile && (this._mobileTrayLocation === 'inline-start' || this._mobileTrayLocation === 'inline-end');
208
+ contentLayoutStyles.maxHeight = (!fillHeight && this._contentHeight) ? `${this._contentHeight}px` : undefined;
209
+ }
206
210
  const contentClasses = {
207
211
  'dropdown-content': true,
208
212
  'dropdown-no-padding': this.noPadding
@@ -236,7 +240,7 @@ export const DropdownPopoverMixin = superclass => class extends LocalizeCoreElem
236
240
  ${this.localize('components.dropdown.close')}
237
241
  </d2l-button>
238
242
  </div>
239
- </div>
243
+ </div>
240
244
  `;
241
245
 
242
246
  return this.renderPopover(content);
@@ -272,6 +276,22 @@ export const DropdownPopoverMixin = superclass => class extends LocalizeCoreElem
272
276
  super.open(opener, applyFocus);
273
277
  }
274
278
 
279
+ // todo: remove this method when removing GAUD-7472-dropdown-popover flag (d2l-filter calls this)
280
+ requestRepositionNextResize() {
281
+ }
282
+
283
+ /**
284
+ * Private.
285
+ */
286
+ scrollTo(scrollTop) {
287
+ if (this.#contentElement) {
288
+ if (typeof scrollTop === 'number') {
289
+ this.#contentElement.scrollTop = scrollTop;
290
+ }
291
+ return this.#contentElement.scrollTop;
292
+ }
293
+ }
294
+
275
295
  toggleOpen(applyFocus = true) {
276
296
  const opener = this.#getOpener();
277
297
  super.toggleOpen(opener, applyFocus);
@@ -340,6 +360,11 @@ export const DropdownPopoverMixin = superclass => class extends LocalizeCoreElem
340
360
  });
341
361
  }
342
362
 
363
+ #handlePopoverFocusEnter(e) {
364
+ /** Dispatched when user focus enters the dropdown content (trap-focus option only) */
365
+ this.dispatchEvent(new CustomEvent('d2l-dropdown-focus-enter', { detail:{ applyFocus: e.detail.applyFocus } }));
366
+ }
367
+
343
368
  #handlePopoverOpen() {
344
369
  this.opened = true;
345
370
 
package/components/filter/demo/filter.html CHANGED
@@ -3,6 +3,13 @@
3
3
 
4
4
  <head>
5
5
  <link rel="stylesheet" href="../../demo/styles.css" type="text/css">
6
+ <script>
7
+ const urlParams = new URLSearchParams(window.location.search);
8
+ window.D2L = { LP: { Web: { UI: { Flags: { Flag: (key) => {
9
+ if (key === 'GAUD-7472-dropdown-popover') return (urlParams.get('popover') === 'true');
10
+ return false;
11
+ } } } } } };
12
+ </script>
6
13
  <script type="module">
7
14
  import '../../demo/demo-page.js';
8
15
  import '../../button/button.js';
package/components/filter/filter.js CHANGED
@@ -353,7 +353,7 @@ class Filter extends FocusMixin(LocalizeCoreElement(LitElement)) {
353
353
 
354
354
  switch (dimension.type) {
355
355
  case 'd2l-filter-dimension-set':
356
- this._performChangeSetDimension(dimension, keyObject.value, false);
356
+ this._performChangeSetDimension(dimension, [{ key: keyObject.value, selected: false }]);
357
357
  break;
358
358
  }
359
359
  }
@@ -593,7 +593,7 @@ class Filter extends FocusMixin(LocalizeCoreElement(LitElement)) {
593
593
  ${searchResults}
594
594
  <d2l-list
595
595
  id="${SET_DIMENSION_ID_PREFIX}${dimension.key}"
596
- @d2l-list-selection-change="${this._handleChangeSetDimension}"
596
+ @d2l-list-selection-changes="${this._handleChangeSetDimension}"
597
597
  extend-separators
598
598
  grid
599
599
  label="${ifDefined(listLabel)}"
@@ -715,10 +715,8 @@ class Filter extends FocusMixin(LocalizeCoreElement(LitElement)) {
715
715
  _handleChangeSetDimension(e) {
716
716
  const dimensionKey = e.target.id.slice(SET_DIMENSION_ID_PREFIX.length);
717
717
  const dimension = this._getDimensionByKey(dimensionKey);
718
- const valueKey = e.detail.key;
719
- const selected = e.detail.selected;
720
718
 
721
- this._performChangeSetDimension(dimension, valueKey, selected);
719
+ this._performChangeSetDimension(dimension, e.detail);
722
720
  }
723
721
 
724
722
  _handleClear() {
@@ -808,6 +806,7 @@ class Filter extends FocusMixin(LocalizeCoreElement(LitElement)) {
808
806
  if (shouldRecount) this._setFilterCounts(dimension);
809
807
  if (shouldUpdate) this.requestUpdate();
810
808
  if (shouldResizeDropdown) {
809
+ // todo: remove this when removing GAUD-7472-dropdown-popover flag (this request is no longer needed)
811
810
  this._requestDropdownResize();
812
811
  }
813
812
  if (e.detail.dispatchChangeEvent) this._dispatchChangeEventValueDataChange(dimension, value, e.detail.valueKey);
@@ -971,24 +970,30 @@ class Filter extends FocusMixin(LocalizeCoreElement(LitElement)) {
971
970
  return false;
972
971
  }
973
972
 
974
- _performChangeSetDimension(dimension, valueKey, selected) {
975
- const value = dimension.values.find(value => value.key === valueKey);
976
- if (value.selected === selected) return;
977
- value.selected = selected;
973
+ _performChangeSetDimension(dimension, newValues) {
974
+ let countChange = 0;
975
+ const changeEventDetails = [];
978
976
 
979
- if (selected) {
980
- dimension.appliedCount++;
981
- this._totalAppliedCount++;
982
- } else {
983
- dimension.appliedCount--;
984
- this._totalAppliedCount--;
985
- }
977
+ newValues.forEach(newValue => {
978
+ const value = dimension.values.find(value => value.key === newValue.key);
979
+ if (value.selected === newValue.selected) return;
980
+ value.selected = newValue.selected;
986
981
 
987
- const details = { valueKey: valueKey, selected: selected };
982
+ if (newValue.selected) countChange++;
983
+ else countChange--;
988
984
 
989
- if (value.getAdditionalEventDetails) Object.assign(details, value.getAdditionalEventDetails(selected));
985
+ const details = { valueKey: newValue.key, selected: newValue.selected };
990
986
 
991
- this._dispatchChangeEvent(dimension, details);
987
+ if (value.getAdditionalEventDetails) Object.assign(details, value.getAdditionalEventDetails(newValue.selected));
988
+ changeEventDetails.push(details);
989
+ });
990
+
991
+ dimension.appliedCount += countChange;
992
+ this._totalAppliedCount += countChange;
993
+
994
+ this.requestUpdate();
995
+
996
+ changeEventDetails.forEach(det => this._dispatchChangeEvent(dimension, det));
992
997
  }
993
998
 
994
999
  _performDimensionClear(dimension) {
@@ -1029,10 +1034,12 @@ class Filter extends FocusMixin(LocalizeCoreElement(LitElement)) {
1029
1034
  break;
1030
1035
  }
1031
1036
 
1037
+ // todo: remove this when removing GAUD-7472-dropdown-popover flag (this request is no longer needed)
1032
1038
  this._requestDropdownResize();
1033
1039
  this.requestUpdate();
1034
1040
  }
1035
1041
 
1042
+ // todo: remove this method when removing GAUD-7472-dropdown-popover flag (d2l-filter calls requestRepositionNextResize)
1036
1043
  _requestDropdownResize() {
1037
1044
  const singleDimension = this._dimensions.length === 1;
1038
1045
  if (singleDimension && this.opened) {
package/components/inputs/demo/input-date.html CHANGED
@@ -4,6 +4,13 @@
4
4
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
5
5
  <meta charset="UTF-8">
6
6
  <link rel="stylesheet" href="../../demo/styles.css" type="text/css">
7
+ <script>
8
+ const urlParams = new URLSearchParams(window.location.search);
9
+ window.D2L = { LP: { Web: { UI: { Flags: { Flag: (key) => {
10
+ if (key === 'GAUD-7472-dropdown-popover') return (urlParams.get('popover') === 'true');
11
+ return false;
12
+ } } } } } };
13
+ </script>
7
14
  <script type="module">
8
15
  import '../../demo/demo-page.js';
9
16
  import '../input-date.js';
package/components/popover/popover-mixin.js CHANGED
@@ -241,6 +241,10 @@ export const PopoverMixin = superclass => class extends superclass {
241
241
  :host([_offscreen]) {
242
242
  ${_offscreenStyleDeclarations}
243
243
  }
244
+
245
+ d2l-focus-trap {
246
+ display: block;
247
+ }
244
248
  `;
245
249
  }
246
250
 
@@ -318,7 +322,7 @@ export const PopoverMixin = superclass => class extends superclass {
318
322
  this._noAutoFit = properties?.noAutoFit ?? false;
319
323
  this._noAutoFocus = properties?.noAutoFocus ?? false;
320
324
  this._noPointer = properties?.noPointer ?? false;
321
- this._offset = properties?.offset ?? 16;
325
+ this._offset = Number.isInteger(properties?.offset) ? properties.offset : 16;
322
326
  if (!properties) {
323
327
  this._preferredPosition = defaultPreferredPosition;
324
328
  } else if (this._preferredPosition?.location !== properties.position?.location
@@ -519,7 +523,7 @@ export const PopoverMixin = superclass => class extends superclass {
519
523
  ` : nothing;
520
524
 
521
525
  const backdrop = this._mobileTrayLocation ?
522
- html`<d2l-backdrop for-target="content-wrapper" ?shown="${this._showBackdrop}"></d2l-backdrop>` :
526
+ html`<d2l-backdrop for-target="content-wrapper" ?shown="${this._showBackdrop}" @click="${this.#handleBackdropClick}"></d2l-backdrop>` :
523
527
  nothing;
524
528
 
525
529
  return html`${content}${backdrop}${pointer}`;
@@ -1084,6 +1088,10 @@ export const PopoverMixin = superclass => class extends superclass {
1084
1088
 
1085
1089
  }
1086
1090
 
1091
+ #handleBackdropClick() {
1092
+ this.close();
1093
+ }
1094
+
1087
1095
  #handleFocusTrapEnter() {
1088
1096
  this.#focusContent(this.#getContentContainer());
1089
1097
 
package/components/table/table-col-sort-button.js CHANGED
@@ -10,6 +10,7 @@ import { getFocusRingStyles } from '../../helpers/focus.js';
10
10
  import { getUniqueId } from '../../helpers/uniqueId.js';
11
11
  import { ifDefined } from 'lit/directives/if-defined.js';
12
12
  import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
13
+ import { usePopoverMixin } from '../dropdown/dropdown-popover-mixin.js';
13
14
 
14
15
  /**
15
16
  * Button for sorting a table column in ascending/descending order.
@@ -184,7 +185,7 @@ export class TableColSortButton extends LocalizeCoreElement(FocusMixin(LitElemen
184
185
  if (this._hasDropdownItems) {
185
186
  return html`<d2l-dropdown>
186
187
  ${button}
187
- <d2l-dropdown-menu no-pointer align="start" vertical-offset="4">
188
+ <d2l-dropdown-menu no-pointer align="start" vertical-offset="${usePopoverMixin ? '0' : '4'}">
188
189
  <d2l-menu label="${ifDefined(this._label)}" @d2l-table-col-sort-button-item-change="${this._handleTablColSortButtonItemChange}">
189
190
  <slot name="items" @slotchange="${this._handleSlotChange}"></slot>
190
191
  </d2l-menu>
package/components/tag-list/tag-list.js CHANGED
@@ -423,7 +423,7 @@ class TagList extends LocalizeCoreElement(InteractiveMixin(ArrowKeysMixin(LitEle
423
423
  async _toggleHiddenTagVisibility(e) {
424
424
  this._showHiddenTags = !this._showHiddenTags;
425
425
 
426
- if (!this.shadowRoot) return;
426
+ if (!this.shadowRoot || !e) return;
427
427
 
428
428
  const isMoreButton = e.target.classList.contains('d2l-tag-list-button-show-more');
429
429
  await this.updateComplete;
package/custom-elements.json CHANGED
@@ -3079,13 +3079,13 @@
3079
3079
  "name": "d2l-dropdown-close",
3080
3080
  "description": "Dispatched when the dropdown is closed"
3081
3081
  },
3082
- {
3083
- "name": "d2l-dropdown-position",
3084
- "description": "Dispatched when the dropdown position finishes adjusting"
3085
- },
3086
3082
  {
3087
3083
  "name": "d2l-dropdown-focus-enter",
3088
3084
  "description": "Dispatched when user focus enters the dropdown content (trap-focus option only)"
3085
+ },
3086
+ {
3087
+ "name": "d2l-dropdown-position",
3088
+ "description": "Dispatched when the dropdown position finishes adjusting"
3089
3089
  }
3090
3090
  ],
3091
3091
  "slots": [
@@ -3455,13 +3455,13 @@
3455
3455
  "name": "d2l-dropdown-close",
3456
3456
  "description": "Dispatched when the dropdown is closed"
3457
3457
  },
3458
- {
3459
- "name": "d2l-dropdown-position",
3460
- "description": "Dispatched when the dropdown position finishes adjusting"
3461
- },
3462
3458
  {
3463
3459
  "name": "d2l-dropdown-focus-enter",
3464
3460
  "description": "Dispatched when user focus enters the dropdown content (trap-focus option only)"
3461
+ },
3462
+ {
3463
+ "name": "d2l-dropdown-position",
3464
+ "description": "Dispatched when the dropdown position finishes adjusting"
3465
3465
  }
3466
3466
  ],
3467
3467
  "slots": [
@@ -3831,13 +3831,13 @@
3831
3831
  "name": "d2l-dropdown-close",
3832
3832
  "description": "Dispatched when the dropdown is closed"
3833
3833
  },
3834
- {
3835
- "name": "d2l-dropdown-position",
3836
- "description": "Dispatched when the dropdown position finishes adjusting"
3837
- },
3838
3834
  {
3839
3835
  "name": "d2l-dropdown-focus-enter",
3840
3836
  "description": "Dispatched when user focus enters the dropdown content (trap-focus option only)"
3837
+ },
3838
+ {
3839
+ "name": "d2l-dropdown-position",
3840
+ "description": "Dispatched when the dropdown position finishes adjusting"
3841
3841
  }
3842
3842
  ],
3843
3843
  "slots": [
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@brightspace-ui/core",
3
- "version": "3.165.2",
3
+ "version": "3.166.0",
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",