@brightspace-ui/core 2.98.0 → 2.98.1

package/components/inputs/input-date.js

@@ -14,7 +14,6 @@ import { getUniqueId } from '../../helpers/uniqueId.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { LabelledMixin } from '../../mixins/labelled-mixin.js';
 import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
-import ResizeObserver from 'resize-observer-polyfill/dist/ResizeObserver.es.js';
 import { SkeletonMixin } from '../skeleton/skeleton-mixin.js';
 import { styleMap } from 'lit/directives/style-map.js';
 
@@ -195,26 +194,36 @@ class InputDate extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMixin(
 
 		this._textInput = this.shadowRoot.querySelector('d2l-input-text');
 
+		const hiddenContent = this.shadowRoot.querySelector('.d2l-input-date-hidden-text');
+		const tryUpdateHiddenContentWidth = () => {
+			const width = Math.ceil(parseFloat(getComputedStyle(hiddenContent).getPropertyValue('width')));
+			if (isNaN(width)) return false; // hidden elements will have "auto" width
+			this._hiddenContentWidth = `${width}px`;
+			return true;
+		};
+
 		this.addEventListener('blur', this._handleBlur);
 		this.addEventListener('d2l-localize-resources-change', () => {
 			this._dateTimeDescriptor = getDateTimeDescriptorShared(true);
 			this.requestUpdate();
-			this.updateComplete.then(() => {
-				const width = Math.ceil(parseFloat(getComputedStyle(this.shadowRoot.querySelector('.d2l-input-date-hidden-text')).getPropertyValue('width')));
-				this._hiddenContentWidth = `${width}px`;
-			});
+			this.updateComplete.then(() => tryUpdateHiddenContentWidth());
 		});
 
 		this._formattedValue = this.emptyText ? this.emptyText : '';
 
 		await (document.fonts ? document.fonts.ready : Promise.resolve());
 
-		const hiddenContent = this.shadowRoot.querySelector('.d2l-input-date-hidden-text');
-		this._hiddenContentResizeObserver = new ResizeObserver(() => {
-			const width = Math.ceil(parseFloat(getComputedStyle(hiddenContent).getPropertyValue('width')));
-			this._hiddenContentWidth = `${width}px`;
-		});
-		this._hiddenContentResizeObserver.observe(hiddenContent);
+		// resize observer needed to handle case where it's initially hidden
+		if (!tryUpdateHiddenContentWidth()) {
+			this._hiddenContentResizeObserver = new ResizeObserver(() => {
+				if (tryUpdateHiddenContentWidth()) {
+					this._hiddenContentResizeObserver.disconnect();
+					this._hiddenContentResizeObserver = null;
+				}
+			});
+			this._hiddenContentResizeObserver.observe(hiddenContent);
+		}
+
 	}
 
 	render() {

package/components/inputs/input-time.js

@@ -15,7 +15,6 @@ import { inputLabelStyles } from './input-label-styles.js';
 import { inputStyles } from './input-styles.js';
 import { LabelledMixin } from '../../mixins/labelled-mixin.js';
 import { offscreenStyles } from '../offscreen/offscreen.js';
-import ResizeObserver from 'resize-observer-polyfill/dist/ResizeObserver.es.js';
 import { SkeletonMixin } from '../skeleton/skeleton-mixin.js';
 
 const MIDNIGHT = new Date(2020, 0, 1, 0, 0, 0);
@@ -271,18 +270,38 @@ class InputTime extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMixin(
 		}
 
 		const hiddenContent = this.shadowRoot.querySelector('.d2l-input-time-hidden-content');
+		const tryUpdateHiddenContentWidth = () => {
+			const width = Math.ceil(parseFloat(getComputedStyle(hiddenContent).getPropertyValue('width')));
+			if (isNaN(width)) return false; // hidden elements will have "auto" width
+			this._hiddenContentWidth = `${width}px`;
+			/** @ignore */
+			this.dispatchEvent(new CustomEvent(
+				'd2l-input-time-hidden-content-width-change',
+				{ bubbles: true, composed: false }
+			));
+			return true;
+		};
+
 		this.addEventListener('d2l-localize-resources-change', async() => {
 			await this.updateComplete;
 			this._formattedValue = formatTime(getDateFromISOTime(this.value));
 			INTERVALS.clear();
 			this.requestUpdate();
-			this.updateComplete.then(() => this._onResize(hiddenContent));
+			this.updateComplete.then(() => tryUpdateHiddenContentWidth());
 		});
 
 		await (document.fonts ? document.fonts.ready : Promise.resolve());
 
-		this._hiddenContentResizeObserver = new ResizeObserver(() => this._onResize(hiddenContent));
-		this._hiddenContentResizeObserver.observe(hiddenContent);
+		// resize observer needed to handle case where it's initially hidden
+		if (!tryUpdateHiddenContentWidth()) {
+			this._hiddenContentResizeObserver = new ResizeObserver(() => {
+				if (tryUpdateHiddenContentWidth()) {
+					this._hiddenContentResizeObserver.disconnect();
+					this._hiddenContentResizeObserver = null;
+				}
+			});
+			this._hiddenContentResizeObserver.observe(hiddenContent);
+		}
 
 	}
 
@@ -428,15 +447,5 @@ class InputTime extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMixin(
 		}
 	}
 
-	_onResize(hiddenContent) {
-		const width = Math.ceil(parseFloat(getComputedStyle(hiddenContent).getPropertyValue('width')));
-		this._hiddenContentWidth = `${width}px`;
-
-		/** @ignore */
-		this.dispatchEvent(new CustomEvent(
-			'd2l-input-time-hidden-content-width-change',
-			{ bubbles: true, composed: false }
-		));
-	}
 }
 customElements.define('d2l-input-time', InputTime);

package/package.json

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