@brightspace-ui/core 2.23.0 → 2.23.3

package/components/dialog/dialog-mixin.js

@@ -17,7 +17,9 @@ window.D2L.DialogMixin = window.D2L.DialogMixin || {};
 
 // while implemented in Webkit, native <dialog> focus mangement across slotted content is buggy
 // https://bugs.webkit.org/show_bug.cgi?id=233320
-window.D2L.DialogMixin.hasNative = (window.HTMLDialogElement !== undefined)
+// starting in Chrome 102, all elements inside <dialog>s that are inside shadow roots have null offsetParent
+// https://bugs.chromium.org/p/chromium/issues/detail?id=1331803
+window.D2L.DialogMixin.hasNative = false && (window.HTMLDialogElement !== undefined)
 	&& (navigator.vendor && navigator.vendor.toLowerCase().indexOf('apple') === -1);
 if (window.D2L.DialogMixin.preferNative === undefined) {
 	window.D2L.DialogMixin.preferNative = true;

package/components/focus-trap/focus-trap.js

@@ -16,7 +16,8 @@ class FocusTrap extends FocusMixin(LitElement) {
 			 * Whether the component should trap user focus.
 			 * @type {boolean}
 			 */
-			trap: { type: Boolean }
+			trap: { type: Boolean },
+			_legacyPromptIds: { state: true }
 		};
 	}
 
@@ -35,6 +36,9 @@ class FocusTrap extends FocusMixin(LitElement) {
 		super();
 		this.trap = false;
 		this._handleBodyFocus = this._handleBodyFocus.bind(this);
+		this._handleLegacyPromptOpen = this._handleLegacyPromptOpen.bind(this);
+		this._handleLegacyPromptClose = this._handleLegacyPromptClose.bind(this);
+		this._legacyPromptIds = new Set();
 	}
 
 	static get focusElementSelector() {
@@ -44,15 +48,19 @@ class FocusTrap extends FocusMixin(LitElement) {
 	connectedCallback() {
 		super.connectedCallback();
 		document.body.addEventListener('focus', this._handleBodyFocus, true);
+		document.body.addEventListener('d2l-legacy-prompt-open', this._handleLegacyPromptOpen);
+		document.body.addEventListener('d2l-legacy-prompt-close', this._handleLegacyPromptClose);
 	}
 
 	disconnectedCallback() {
 		super.disconnectedCallback();
 		document.body.removeEventListener('focus', this._handleBodyFocus, true);
+		document.body.removeEventListener('d2l-legacy-prompt-open', this._handleLegacyPromptOpen);
+		document.body.removeEventListener('d2l-legacy-prompt-close', this._handleLegacyPromptClose);
 	}
 
 	render() {
-		const tabindex = this.trap ? '0' : undefined;
+		const tabindex = (this.trap && this._legacyPromptIds.size === 0) ? '0' : undefined;
 		return html`
 			<span class="d2l-focus-trap-start" @focusin="${this._handleStartFocusIn}" tabindex="${ifDefined(tabindex)}"></span>
 			<slot></slot>
@@ -72,7 +80,7 @@ class FocusTrap extends FocusMixin(LitElement) {
 	}
 
 	_handleBodyFocus(e) {
-		if (!this.trap) return;
+		if (!this.trap || this._legacyPromptIds.size > 0) return;
 		const container = this._getContainer();
 		const target = e.composedPath()[0];
 		if (isComposedAncestor(container, target)) return;
@@ -95,6 +103,16 @@ class FocusTrap extends FocusMixin(LitElement) {
 		this._focusFirst();
 	}
 
+	_handleLegacyPromptClose(e) {
+		this._legacyPromptIds.delete(e.detail.id);
+		this.requestUpdate();
+	}
+
+	_handleLegacyPromptOpen(e) {
+		this._legacyPromptIds.add(e.detail.id);
+		this.requestUpdate();
+	}
+
 	_handleStartFocusIn(e) {
 		const container = this._getContainer();
 		if (this.shadowRoot && isComposedAncestor(container, e.relatedTarget)) {

package/components/inputs/input-date.js

@@ -82,7 +82,6 @@ class InputDate extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMixin(
 			 * @type {string}
 			 */
 			value: { type: String },
-			_hiddenCalendarHeight: { type: Number },
 			_hiddenContentWidth: { type: String },
 			_dateTimeDescriptor: { type: Object },
 			_dropdownFirstOpened: { type: Boolean },
@@ -114,8 +113,7 @@ class InputDate extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMixin(
 			:host([disabled]) d2l-icon {
 				opacity: 0.5;
 			}
-			.d2l-input-date-hidden-text,
-			.d2l-input-date-hidden-calendar {
+			.d2l-input-date-hidden-text {
 				font-family: inherit;
 				font-size: 0.8rem;
 				font-weight: 400;
@@ -154,7 +152,6 @@ class InputDate extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMixin(
 
 		this._dropdownFirstOpened = false;
 		this._formattedValue = '';
-		this._hiddenCalendarHeight = 415; // height of 6 date row calendar when 1rem = 20px
 		this._hiddenContentWidth = '8rem';
 		this._inputId = getUniqueId();
 		this._inputTextFocusMouseup = false;
@@ -191,7 +188,6 @@ class InputDate extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMixin(
 	disconnectedCallback() {
 		super.disconnectedCallback();
 		if (this._hiddenContentResizeObserver) this._hiddenContentResizeObserver.disconnect();
-		if (this._hiddenCalendarResizeObserver) this._hiddenCalendarResizeObserver.disconnect();
 	}
 
 	async firstUpdated(changedProperties) {
@@ -219,17 +215,6 @@ class InputDate extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMixin(
 			this._hiddenContentWidth = `${width}px`;
 		});
 		this._hiddenContentResizeObserver.observe(hiddenContent);
-
-		const hiddenCalendar = this.shadowRoot.querySelector('.d2l-input-date-hidden-calendar');
-		if (!hiddenCalendar) return;
-		this._hiddenCalendarResizeObserver = new ResizeObserver(() => {
-			const hiddenCalendarHeight = Math.ceil(parseFloat(getComputedStyle(hiddenCalendar).getPropertyValue('height')));
-			if (hiddenCalendarHeight > 0) {
-				this._hiddenCalendarHeight = hiddenCalendarHeight;
-				this._hiddenCalendarResizeObserver.disconnect();
-			}
-		});
-		this._hiddenCalendarResizeObserver.observe(hiddenCalendar);
 	}
 
 	render() {
@@ -252,7 +237,7 @@ class InputDate extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMixin(
 				@d2l-dropdown-open="${this._handleDropdownOpen}"
 				@d2l-dropdown-focus-enter="${this._handleFocusTrapEnter}"
 				max-width="335"
-				min-height="${this._hiddenCalendarHeight}"
+				min-height="415"
 				?no-auto-fit="${!mediaQueryList.matches}"
 				trap-focus
 				no-auto-focus
@@ -307,13 +292,6 @@ class InputDate extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMixin(
 				</d2l-input-text>
 				${dropdownContent}
 			</d2l-dropdown>
-			${!this._dropdownFirstOpened ? html`<div aria-hidden="true" class="d2l-input-date-hidden-calendar">
-				<d2l-calendar selected-value="2018-09-08">
-					<div class="d2l-calendar-slot-buttons">
-						<d2l-button-subtle text="${this.localize(`${this._namespace}.today`)}"></d2l-button-subtle>
-					</div>
-				</d2l-calendar>
-			</div>` : null}
 		`;
 	}
 

package/package.json

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