@brightspace-ui/core 3.165.3 → 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 +3 -0
  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
@@ -806,6 +806,7 @@ class Filter extends FocusMixin(LocalizeCoreElement(LitElement)) {
806
806
  if (shouldRecount) this._setFilterCounts(dimension);
807
807
  if (shouldUpdate) this.requestUpdate();
808
808
  if (shouldResizeDropdown) {
809
+ // todo: remove this when removing GAUD-7472-dropdown-popover flag (this request is no longer needed)
809
810
  this._requestDropdownResize();
810
811
  }
811
812
  if (e.detail.dispatchChangeEvent) this._dispatchChangeEventValueDataChange(dimension, value, e.detail.valueKey);
@@ -1033,10 +1034,12 @@ class Filter extends FocusMixin(LocalizeCoreElement(LitElement)) {
1033
1034
  break;
1034
1035
  }
1035
1036
 
1037
+ // todo: remove this when removing GAUD-7472-dropdown-popover flag (this request is no longer needed)
1036
1038
  this._requestDropdownResize();
1037
1039
  this.requestUpdate();
1038
1040
  }
1039
1041
 
1042
+ // todo: remove this method when removing GAUD-7472-dropdown-popover flag (d2l-filter calls requestRepositionNextResize)
1040
1043
  _requestDropdownResize() {
1041
1044
  const singleDimension = this._dimensions.length === 1;
1042
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.3",
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",