@brightspace-ui/core 1.239.0 → 1.240.0

package/components/filter/README.md

@@ -208,9 +208,9 @@ This component is built to be used alongside the [d2l-filter-dimension-set](#fil
 
 **Coming Soon!**
 
-## Filter Dimension: Tags [d2l-filter-dimension-tags]
+## Tags for Applied Filters [d2l-filter-tags]
 
-**Coming Soon!**
+**This is in progress now! Stable API expected by May.**
 
 <!-- docs: start hidden content -->
 ## Future Improvements

package/components/form/form-element-mixin.js

@@ -118,6 +118,10 @@ export const FormElementMixin = superclass => class extends LocalizeCoreElement(
 		this._validationCustomConnected = this._validationCustomConnected.bind(this);
 		this._onFormElementErrorsChange = this._onFormElementErrorsChange.bind(this);
 
+		this._firstUpdateResolve = null;
+		this._firstUpdatePromise = new Promise((resolve) => {
+			this._firstUpdateResolve = resolve;
+		});
 		this._validationCustoms = new Set();
 		this._validity = new FormElementValidityState({});
 		/** @ignore */
@@ -168,6 +172,11 @@ export const FormElementMixin = superclass => class extends LocalizeCoreElement(
 		this.shadowRoot.removeEventListener('d2l-form-element-errors-change', this._onFormElementErrorsChange);
 	}
 
+	firstUpdated(changedProperties) {
+		super.firstUpdated(changedProperties);
+		this._firstUpdateResolve();
+	}
+
 	updated(changedProperties) {
 		if (changedProperties.has('_errors') || changedProperties.has('childErrors')) {
 			let errors = this._errors;
@@ -195,6 +204,11 @@ export const FormElementMixin = superclass => class extends LocalizeCoreElement(
 		if (this.noValidate) {
 			return [];
 		}
+
+		// validation can be requested before first update, which can cause issues
+		// if validation logic depends on rendered DOM
+		await this._firstUpdatePromise;
+
 		const customs = [...this._validationCustoms].filter(custom => custom.forElement === this || !isCustomFormElement(custom.forElement));
 		const results = await Promise.all(customs.map(custom => custom.validate()));
 		const errors = customs.map(custom => custom.failureText).filter((_, i) => !results[i]);

package/components/form/form-mixin.js

@@ -26,9 +26,13 @@ export const FormMixin = superclass => class extends LocalizeCoreElement(supercl
 		this._onNativeSubmit = this._onNativeSubmit.bind(this);
 
 		this.trackChanges = false;
+		this._errors = new Map();
+		this._firstUpdateResolve = null;
+		this._firstUpdatePromise = new Promise((resolve) => {
+			this._firstUpdateResolve = resolve;
+		});
 		this._tooltips = new Map();
 		this._validationCustoms = new Set();
-		this._errors = new Map();
 
 		this.addEventListener('d2l-form-errors-change', this._onErrorsChange);
 		this.addEventListener('d2l-form-element-errors-change', this._onErrorsChange);
@@ -50,6 +54,7 @@ export const FormMixin = superclass => class extends LocalizeCoreElement(supercl
 		this.addEventListener('change', this._onFormElementChange);
 		this.addEventListener('input', this._onFormElementChange);
 		this.addEventListener('focusout', this._onFormElementChange);
+		this._firstUpdateResolve();
 	}
 
 	// eslint-disable-next-line no-unused-vars
@@ -150,6 +155,9 @@ export const FormMixin = superclass => class extends LocalizeCoreElement(supercl
 	}
 
 	async _validateFormElement(ele, showNewErrors) {
+		// if validation occurs before we've rendered,
+		// localization may not have loaded yet
+		await this._firstUpdatePromise;
 		ele.id = ele.id || getUniqueId();
 		if (isCustomFormElement(ele)) {
 			return ele.validate(showNewErrors);

package/components/hierarchical-view/hierarchical-view-mixin.js

@@ -149,6 +149,7 @@ export const HierarchicalViewMixin = superclass => class extends superclass {
 			this.__intersectionObserver.disconnect();
 			this.__isAutoSized = false;
 		}
+		if (this.__resizeObserver) this.__resizeObserver.disconnect();
 	}
 
 	firstUpdated(changedProperties) {

package/components/inputs/input-date-time-range-to.js

@@ -116,16 +116,9 @@ class InputDateTimeRangeTo extends SkeletonMixin(LocalizeCoreElement(LitElement)
 
 	disconnectedCallback() {
 		super.disconnectedCallback();
-
 		this._disconnectObservers();
 	}
 
-	firstUpdated(changedProperties) {
-		super.firstUpdated(changedProperties);
-
-		this._startObserving();
-	}
-
 	render() {
 		const containerClassMap = {
 			'd2l-input-date-time-range-to-container': true,
@@ -181,9 +174,12 @@ class InputDateTimeRangeTo extends SkeletonMixin(LocalizeCoreElement(LitElement)
 	_startObserving() {
 		if (!this.shadowRoot || !this._parentNode) return;
 
+		const container = this.shadowRoot.querySelector('.d2l-input-date-time-range-to-container');
 		const leftElem = this.shadowRoot.querySelector('.d2l-input-date-time-range-start-container');
+		let leftElemHeight = 0;
+
 		this._leftElemResizeObserver = this._leftElemResizeObserver || new ResizeObserver(() => {
-			this._leftElemHeight = Math.ceil(parseFloat(getComputedStyle(leftElem).getPropertyValue('height')));
+			leftElemHeight = Math.ceil(parseFloat(getComputedStyle(leftElem).getPropertyValue('height')));
 		});
 		this._leftElemResizeObserver.disconnect();
 		this._leftElemResizeObserver.observe(leftElem);
@@ -191,8 +187,8 @@ class InputDateTimeRangeTo extends SkeletonMixin(LocalizeCoreElement(LitElement)
 		this._parentElemResizeObserver = this._parentElemResizeObserver || new ResizeObserver(async() => {
 			this._blockDisplay = false;
 			await this.updateComplete;
-			const height = Math.ceil(parseFloat(getComputedStyle(this.shadowRoot.querySelector('.d2l-input-date-time-range-to-container')).getPropertyValue('height')));
-			if (height >= (this._leftElemHeight * 2)) this._blockDisplay = true; // switch to _blockDisplay styles if content has wrapped (needed for "to" to occupy its own line)
+			const height = Math.ceil(parseFloat(getComputedStyle(container).getPropertyValue('height')));
+			if (height >= (leftElemHeight * 2)) this._blockDisplay = true; // switch to _blockDisplay styles if content has wrapped (needed for "to" to occupy its own line)
 			else this._blockDisplay = false;
 		});
 		this._parentElemResizeObserver.disconnect();

package/components/inputs/input-date.js

@@ -186,6 +186,12 @@ class InputDate extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMixin(
 		return super.validationMessage;
 	}
 
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		if (this._hiddenContentResizeObserver) this._hiddenContentResizeObserver.disconnect();
+		if (this._hiddenCalendarResizeObserver) this._hiddenCalendarResizeObserver.disconnect();
+	}
+
 	async firstUpdated(changedProperties) {
 		super.firstUpdated(changedProperties);
 

package/components/inputs/input-time.js

@@ -254,6 +254,11 @@ class InputTime extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMixin(
 		this.requestUpdate('value', oldValue);
 	}
 
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		if (this._hiddenContentResizeObserver) this._hiddenContentResizeObserver.disconnect();
+	}
+
 	async firstUpdated(changedProperties) {
 		super.firstUpdated(changedProperties);
 

package/components/list/list-item-checkbox-mixin.js

@@ -97,7 +97,6 @@ export const ListItemCheckboxMixin = superclass => class extends SkeletonMixin(L
 	}
 
 	setSelected(selected, suppressEvent = false) {
-		//if (this.selected === selected) return;
 		if (this.selected === selected || (this.selected === undefined && !selected)) return;
 		this.selected = selected;
 		if (!suppressEvent) this._dispatchSelected(selected);

package/components/overflow-group/overflow-group.js

@@ -249,10 +249,15 @@ class OverflowGroup extends RtlMixin(LocalizeCoreElement(LitElement)) {
 		this.openerStyle = OPENER_STYLE.DEFAULT;
 		this.openerType = OPENER_TYPE.DEFAULT;
 		this._mini = this.openerType === OPENER_TYPE.ICON;
-
+		this._resizeObserver = null;
 		this._slotItems = [];
 	}
 
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		if (this._resizeObserver) this._resizeObserver.disconnect();
+	}
+
 	async firstUpdated() {
 		super.firstUpdated();
 
@@ -261,8 +266,8 @@ class OverflowGroup extends RtlMixin(LocalizeCoreElement(LitElement)) {
 
 		this._container = this.shadowRoot.querySelector('.d2l-overflow-group-container');
 
-		const resizeObserver = new ResizeObserver(this._throttledResize);
-		resizeObserver.observe(this._container);
+		this._resizeObserver = new ResizeObserver(this._throttledResize);
+		this._resizeObserver.observe(this._container);
 	}
 
 	render() {

package/components/scroll-wrapper/README.md

@@ -37,4 +37,11 @@ The `d2l-scroll-wrapper` element can be used to wrap content which may overflow
 | Property | Type | Description |
 |---|---|---|
 | `hide-actions` | Boolean, default: `false` | Whether to hide left/right scroll buttons |
+
+### Variables
+
+| Variable | Type | Description |
+|---|---|---|
+| `--d2l-scroll-wrapper-overflow-y` | [Any valid overflow-y setting](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-y), defaults to `visible` | Set the `overflow-y` property of the inner scroll wrapper |
+
 <!-- docs: end hidden content -->

package/components/scroll-wrapper/scroll-wrapper.js

@@ -53,11 +53,11 @@ class ScrollWrapper extends FocusVisiblePolyfillMixin(RtlMixin(LitElement)) {
 			:host([hidden]) {
 				display: none;
 			}
-
 			.d2l-scroll-wrapper-container {
 				box-sizing: border-box;
 				outline: none;
 				overflow-x: auto;
+				overflow-y: var(--d2l-scroll-wrapper-overflow-y, visible);
 			}
 			.d2l-scroll-wrapper-container.focus-visible {
 				box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--d2l-color-celestine), 0 2px 12px 0 rgba(0, 0, 0, 0.15);
@@ -143,14 +143,21 @@ class ScrollWrapper extends FocusVisiblePolyfillMixin(RtlMixin(LitElement)) {
 		this.hideActions = false;
 		this._container = null;
 		this._hScrollbar = true;
+		this._resizeObserver = null;
 		this._scrollbarLeft = false;
 		this._scrollbarRight = false;
 	}
 
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		if (this._resizeObserver) this._resizeObserver.disconnect();
+	}
+
 	firstUpdated(changedProperties) {
 		super.firstUpdated(changedProperties);
 		this._container = this.shadowRoot.querySelector('.d2l-scroll-wrapper-container');
-		new ResizeObserver(() => requestAnimationFrame(() => this.checkScrollbar())).observe(this._container);
+		this._resizeObserver = new ResizeObserver(() => requestAnimationFrame(() => this.checkScrollbar()));
+		this._resizeObserver.observe(this._container);
 	}
 
 	render() {
@@ -172,8 +179,7 @@ class ScrollWrapper extends FocusVisiblePolyfillMixin(RtlMixin(LitElement)) {
 
 	checkScrollbar() {
 		if (!this._container) return;
-		const hScrollbar = Math.abs(this._container.offsetWidth - this._container.scrollWidth);
-		this._hScrollbar = (hScrollbar > 0);
+		this._hScrollbar = this._container.offsetWidth !== this._container.scrollWidth;
 		this._checkScrollThresholds();
 	}
 

package/components/tabs/tabs.js

@@ -266,6 +266,11 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(RtlMixin(FocusVisiblePolyf
 
 	}
 
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		if (this._resizeObserver) this._resizeObserver.disconnect();
+	}
+
 	firstUpdated(changedProperties) {
 		super.firstUpdated(changedProperties);
 

package/lang/localize-core-element.js

@@ -1,74 +1,11 @@
-import { LocalizeMixin } from '../mixins/localize-mixin.js';
+import { LocalizeDynamicMixin } from '../mixins/localize-dynamic-mixin.js';
 
-export const LocalizeCoreElement = superclass => class extends LocalizeMixin(superclass) {
+export const LocalizeCoreElement = superclass => class extends LocalizeDynamicMixin(superclass) {
 
-	static async getLocalizeResources(langs) {
-		let translations;
-		for await (const lang of langs) {
-			switch (lang) {
-				case 'ar':
-					translations = await import('./ar.js');
-					break;
-				case 'cy':
-					translations = await import('./cy.js');
-					break;
-				case 'da':
-					translations = await import('./da.js');
-					break;
-				case 'de':
-					translations = await import('./de.js');
-					break;
-				case 'en':
-					translations = await import('./en.js');
-					break;
-				case 'es-es':
-					translations = await import('./es-es.js');
-					break;
-				case 'es':
-					translations = await import('./es.js');
-					break;
-				case 'fr-fr':
-					translations = await import('./fr-fr.js');
-					break;
-				case 'fr':
-					translations = await import('./fr.js');
-					break;
-				case 'ja':
-					translations = await import('./ja.js');
-					break;
-				case 'ko':
-					translations = await import('./ko.js');
-					break;
-				case 'nl':
-					translations = await import('./nl.js');
-					break;
-				case 'pt':
-					translations = await import('./pt.js');
-					break;
-				case 'sv':
-					translations = await import('./sv.js');
-					break;
-				case 'tr':
-					translations = await import('./tr.js');
-					break;
-				case 'zh-tw':
-					translations = await import('./zh-tw.js');
-					break;
-				case 'zh':
-					translations = await import('./zh.js');
-					break;
-			}
-			if (translations && translations.default) {
-				return {
-					language: lang,
-					resources: translations.default
-				};
-			}
-		}
-		translations = await import('./en.js');
+	static get localizeConfig() {
 		return {
-			language: 'en',
-			resources: translations.default
+			importFunc: async lang => (await import(`./${lang}.js`)).default
 		};
 	}
+
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brightspace-ui/core",
-  "version": "1.239.0",
+  "version": "1.240.0",
   "description": "A collection of accessible, free, open-source web components for building Brightspace applications",
   "type": "module",
   "repository": "https://github.com/BrightspaceUI/core.git",

package/templates/primary-secondary/primary-secondary.js

@@ -903,6 +903,7 @@ class TemplatePrimarySecondary extends FocusVisiblePolyfillMixin(RtlMixin(Locali
 			resizer.disconnect();
 		}
 		this._hasConnectedResizers = false;
+		if (this._resizeObserver) this._resizeObserver.disconnect();
 	}
 
 	firstUpdated(changedProperties) {