@brightspace-ui/core 3.14.0 → 3.15.1

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.
@@ -698,7 +698,9 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
698
698
  }
699
699
  }
700
700
 
701
- async __position(ignoreVertical, contentRect) {
701
+ async __position(contentRect, options) {
702
+
703
+ options = Object.assign({ updateAboveBelow: true, updateHeight: true }, options);
702
704
 
703
705
  const opener = this.__getOpener();
704
706
  if (!opener) {
@@ -713,7 +715,7 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
713
715
  const header = this.__getContentTop(); // todo: rename
714
716
  const footer = this.__getContentBottom(); // todo: rename
715
717
 
716
- if (!this.noAutoFit) {
718
+ if (!this.noAutoFit && options.updateHeight) {
717
719
  this._contentHeight = null;
718
720
  }
719
721
 
@@ -783,25 +785,27 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
783
785
 
784
786
  }
785
787
 
786
- if (!ignoreVertical) {
788
+ if (options.updateAboveBelow) {
787
789
  this.openedAbove = this._getOpenedAbove(spaceAround, spaceAroundScroll, spaceRequired);
788
790
  }
789
791
 
790
792
  this._position = this._getPosition(spaceAround, targetRect, contentRect);
791
793
  this._pointerPosition = this._getPointerPosition(targetRect);
792
794
 
793
- //Calculate height available to the dropdown contents for overflow because that is the only area capable of scrolling
794
- const availableHeight = this.openedAbove ? spaceAround.above : spaceAround.below;
795
- if (!this.noAutoFit && availableHeight && availableHeight > 0) {
796
- //Only apply maximum if it's less than space available and the header/footer alone won't exceed it (content must be visible)
797
- this._contentHeight = this.maxHeight !== null
798
- && availableHeight > this.maxHeight
799
- && headerFooterHeight < this.maxHeight
800
- ? this.maxHeight - headerFooterHeight - 2
801
- : availableHeight - headerFooterHeight;
802
-
803
- // ensure the content height has updated when the __toggleScrollStyles event handler runs
804
- await this.updateComplete;
795
+ if (options.updateHeight) {
796
+ // calculate height available to the dropdown contents for overflow because that is the only area capable of scrolling
797
+ const availableHeight = this.openedAbove ? spaceAround.above : spaceAround.below;
798
+ if (!this.noAutoFit && availableHeight && availableHeight > 0) {
799
+ // only apply maximum if it's less than space available and the header/footer alone won't exceed it (content must be visible)
800
+ this._contentHeight = this.maxHeight !== null
801
+ && availableHeight > this.maxHeight
802
+ && headerFooterHeight < this.maxHeight
803
+ ? this.maxHeight - headerFooterHeight - 2
804
+ : availableHeight - headerFooterHeight;
805
+
806
+ // ensure the content height has updated when the __toggleScrollStyles event handler runs
807
+ await this.updateComplete;
808
+ }
805
809
  }
806
810
 
807
811
  /** Dispatched when the dropdown position finishes adjusting */
@@ -832,7 +836,7 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
832
836
  // throttle repositioning (https://developer.mozilla.org/en-US/docs/Web/API/Document/scroll_event#scroll_event_throttling)
833
837
  if (!this.__repositioning) {
834
838
  requestAnimationFrame(() => {
835
- this.__position(true);
839
+ this.__position(undefined, { updateAboveBelow: false, updateHeight: false });
836
840
  this.__repositioning = false;
837
841
  });
838
842
  }
@@ -148,7 +148,7 @@ class DropdownMenu extends ThemeMixin(DropdownContentMixin(LitElement)) {
148
148
  this.maxHeight = this._maxHeightNonTray;
149
149
  }
150
150
 
151
- this.__position(!this._initializingHeight, e.detail);
151
+ this.__position(e.detail, { updateAboveBelow: this._initializingHeight });
152
152
  this._initializingHeight = false;
153
153
 
154
154
  const menu = this.__getMenuElement();
@@ -46,7 +46,7 @@ class DropdownTabs extends DropdownContentMixin(LitElement) {
46
46
  height: e.detail.height + tabListRect.height + 52,
47
47
  width: e.detail.width
48
48
  };
49
- this.__position(!this._initializingHeight, rect);
49
+ this.__position(rect, { updateAboveBelow: this._initializingHeight });
50
50
  this._initializingHeight = false;
51
51
  }
52
52
 
@@ -56,7 +56,7 @@ class DropdownTabs extends DropdownContentMixin(LitElement) {
56
56
  }
57
57
 
58
58
  _onTabSelected() {
59
- this.__position(false);
59
+ this.__position();
60
60
  }
61
61
 
62
62
  }
@@ -263,6 +263,40 @@ This component is built to be used alongside the [d2l-filter-dimension-set](#d2l
263
263
  | `selected` | Boolean, default: `false` | Whether the value in the filter is selected or not |
264
264
  <!-- docs: end hidden content -->
265
265
 
266
+ ### Dimension Set Value: Custom Preset Date Range
267
+
268
+ In order to create a selectable filter list item that is a text item representing a range that is NOT one of the presets available in the `d2l-filter-dimension-set-date-text-value` component (for example, 60 days), use the regular "Dimension Set Value" component (`d2l-filter-dimension-set-value`) with the localized text of the range in the `text` field, and handle its selection as is appropriate for the consuming application.
269
+
270
+ The `getUTCDateTimeRange(rangeType, diff)` helper function can be used to get the `startValue` and `endValue` for the range in ISO strings in UTC, if required. As arguments it takes a `rangeType` (one of `seconds`, `minutes`, `hours`, `days`, `months`, or `years`) and a `diff` (positive or negative number where negative is a range in the past and positive is a range in the future). Either the `startValue` or `endValue` is the current date/time depending on whether the range is in the past or future.
271
+
272
+ <!-- docs: demo code align:start autoOpen:true autoSize:false size:large -->
273
+ ```html
274
+ <script type="module">
275
+ import '@brightspace-ui/core/components/filter/filter.js';
276
+ import '@brightspace-ui/core/components/filter/filter-dimension-set.js';
277
+ import '@brightspace-ui/core/components/filter/filter-dimension-set-value.js';
278
+ import { getUTCDateTimeRange } from '@brightspace-ui/core/helpers/dateTime.js';
279
+
280
+ document.querySelector('d2l-filter').addEventListener('d2l-filter-change', e => {
281
+ const changes = e.detail.dimensions[0].changes;
282
+ if (!changes || changes.length === 0) return;
283
+ let dateTimeRange;
284
+ if (changes[0].valueKey === '60days' && changes[0].selected) {
285
+ dateTimeRange = getUTCDateTimeRange('days', -60);
286
+ } else if (changes[0].valueKey === '8months' && changes[0].selected) {
287
+ dateTimeRange = getUTCDateTimeRange('months', -8);
288
+ }
289
+ if (dateTimeRange) console.log('start date', dateTimeRange.startValue, 'end date', dateTimeRange.endValue);
290
+ });
291
+ </script>
292
+ <d2l-filter>
293
+ <d2l-filter-dimension-set key="dates" text="Dates" selection-single>
294
+ <d2l-filter-dimension-set-value key="60days" text="60 days"></d2l-filter-dimension-set-value>
295
+ <d2l-filter-dimension-set-value key="8months" text="8 months"></d2l-filter-dimension-set-value>
296
+ </d2l-filter-dimension-set>
297
+ </d2l-filter>
298
+ ```
299
+
266
300
  ## Search and Paging
267
301
 
268
302
  Most filters will not need search or paging features since filter value lists are generally short. For longer lists of filter values when Search is necessary, it can be enabled by setting search-type to `automatic` or `manual`.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@brightspace-ui/core",
3
- "version": "3.14.0",
3
+ "version": "3.15.1",
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",