@brightspace-ui/core 2.160.0 → 2.160.2

package/components/dialog/dialog-mixin.js

@@ -49,6 +49,7 @@ export const DialogMixin = superclass => class extends RtlMixin(superclass) {
 			_isFullHeight: { state: true },
 			_left: { state: true },
 			_margin: { state: true },
+			_mobileDropdownShowing: { state: true },
 			_nestedShowing: { state: true },
 			_overflowBottom: { state: true },
 			_overflowTop: { state: true },
@@ -67,12 +68,14 @@ export const DialogMixin = superclass => class extends RtlMixin(superclass) {
 		this._autoSize = true;
 		this._dialogId = getUniqueId();
 		this._fullscreenWithin = 0;
+		this._handleDropdownOpenClose = this._handleDropdownOpenClose.bind(this);
 		this._handleMvcDialogOpen = this._handleMvcDialogOpen.bind(this);
 		this._inIframe = false;
 		this._isFullHeight = false;
 		this._height = 0;
 		this._left = 0;
 		this._margin = { top: defaultMargin.top, right: defaultMargin.right, bottom: defaultMargin.bottom, left: defaultMargin.left };
+		this._mobileDropdownShowing = false;
 		this._nestedShowing = false;
 		this._overflowBottom = false;
 		this._overflowTop = false;
@@ -143,6 +146,8 @@ export const DialogMixin = superclass => class extends RtlMixin(superclass) {
 	_addHandlers() {
 		window.addEventListener('resize', this._updateSize);
 		this.addEventListener('touchstart', this._handleTouchStart);
+		this.addEventListener('d2l-dropdown-open', this._handleDropdownOpenClose, { capture: true });
+		this.addEventListener('d2l-dropdown-close', this._handleDropdownOpenClose, { capture: true });
 		if (this.shadowRoot) this.shadowRoot.querySelector('.d2l-dialog-content').addEventListener('scroll', this._updateOverflow);
 	}
 
@@ -331,6 +336,10 @@ export const DialogMixin = superclass => class extends RtlMixin(superclass) {
 		e.stopPropagation();
 	}
 
+	_handleDropdownOpenClose(e) {
+		this._mobileDropdownShowing = e.composedPath()[0]._useMobileStyling;
+	}
+
 	_handleFocusTrapEnter(e) {
 		// ignore focus trap events when the target is another element
 		// to prevent infinite focus loops
@@ -449,6 +458,8 @@ export const DialogMixin = superclass => class extends RtlMixin(superclass) {
 	_removeHandlers() {
 		window.removeEventListener('resize', this._updateSize);
 		this.removeEventListener('touchstart', this._handleTouchStart);
+		this.removeEventListener('d2l-dropdown-open', this._handleDropdownOpenClose, { capture: true });
+		this.removeEventListener('d2l-dropdown-close', this._handleDropdownOpenClose, { capture: true });
 		if (this.shadowRoot) this.shadowRoot.querySelector('.d2l-dialog-content').removeEventListener('scroll', this._updateOverflow);
 	}
 
@@ -477,7 +488,8 @@ export const DialogMixin = superclass => class extends RtlMixin(superclass) {
 			'd2l-dialog-outer-nested-showing': !this._useNative && this._nestedShowing,
 			'd2l-dialog-outer-scroll': this._scroll,
 			'd2l-dialog-fullscreen-mobile': info.fullscreenMobile,
-			'd2l-dialog-fullscreen-within': this._fullscreenWithin !== 0
+			'd2l-dialog-fullscreen-within': this._fullscreenWithin !== 0,
+			'd2l-dialog-dropdown-mobile': this._mobileDropdownShowing
 		};
 
 		return html`${this._useNative ?

package/components/dialog/dialog-styles.js

@@ -131,6 +131,10 @@ export const dialogStyles = css`
 		overflow: auto;
 	}
 
+	.d2l-dialog-dropdown-mobile .d2l-dialog-content {
+		overflow: hidden; /* workaround to fix clipping of nested fixed position elements with overlowing content in Safari bug: https://bugs.webkit.org/show_bug.cgi?id=160953 */
+	}
+
 	.d2l-dialog-footer {
 		box-sizing: border-box;
 		flex: none;

package/components/list/list-item-drag-drop-mixin.js

@@ -335,6 +335,7 @@ export const ListItemDragDropMixin = superclass => class extends superclass {
 					opacity: 0;
 				}
 				:host([selected]) d2l-list-item-drag-handle,
+				d2l-list-item-drag-handle:hover,
 				d2l-list-item-drag-handle.d2l-hovering,
 				d2l-list-item-drag-handle.d2l-focusing {
 					opacity: 1;

package/components/list/list-item-drag-handle.js

@@ -72,6 +72,7 @@ class ListItemDragHandle extends LocalizeCoreElement(FocusMixin(RtlMixin(LitElem
 			:host {
 				display: flex;
 				margin: 0.25rem;
+				pointer-events: auto; /* required since its parent may set point-events: none; (see generic layout) */
 			}
 			:host([hidden]) {
 				display: none;
@@ -181,25 +182,6 @@ class ListItemDragHandle extends LocalizeCoreElement(FocusMixin(RtlMixin(LitElem
 		this.activateKeyboardMode();
 	}
 
-	_onKeyboardButtonFocusIn() {
-		if (hasDisplayedKeyboardTooltip) return;
-		this._displayKeyboardTooltip = true;
-		hasDisplayedKeyboardTooltip = true;
-	}
-
-	_onKeyboardButtonFocusOut(e) {
-		this._displayKeyboardTooltip = false;
-		if (this._movingElement) {
-			this._movingElement = false;
-			e.stopPropagation();
-			e.preventDefault();
-			return;
-		}
-		this._keyboardActive = false;
-		this._dispatchAction(dragActions.save);
-		e.stopPropagation();
-	}
-
 	async _onMoveButtonAction(e) {
 
 		let action = null;
@@ -245,6 +227,25 @@ class ListItemDragHandle extends LocalizeCoreElement(FocusMixin(RtlMixin(LitElem
 
 	}
 
+	_onMoveButtonFocusIn() {
+		if (hasDisplayedKeyboardTooltip) return;
+		this._displayKeyboardTooltip = true;
+		hasDisplayedKeyboardTooltip = true;
+	}
+
+	_onMoveButtonFocusOut(e) {
+		this._displayKeyboardTooltip = false;
+		if (this._movingElement) {
+			this._movingElement = false;
+			e.stopPropagation();
+			e.preventDefault();
+			return;
+		}
+		this._keyboardActive = false;
+		this._dispatchAction(dragActions.save);
+		e.stopPropagation();
+	}
+
 	async _onMoveButtonKeydown(e) {
 		if (!this._keyboardActive) {
 			return;
@@ -274,6 +275,10 @@ class ListItemDragHandle extends LocalizeCoreElement(FocusMixin(RtlMixin(LitElem
 
 	}
 
+	_onMoveButtonMouseDown(e) {
+		e.preventDefault();
+	}
+
 	_renderDragger() {
 		return html`
 			<button
@@ -292,10 +297,11 @@ class ListItemDragHandle extends LocalizeCoreElement(FocusMixin(RtlMixin(LitElem
 			<d2l-button-move
 				class="d2l-list-item-drag-handle-button"
 				@d2l-button-move-action="${this._onMoveButtonAction}"
-				@focusin="${this._onKeyboardButtonFocusIn}"
-				@focusout="${this._onKeyboardButtonFocusOut}"
+				@focusin="${this._onMoveButtonFocusIn}"
+				@focusout="${this._onMoveButtonFocusOut}"
 				id="${this._buttonId}"
 				@keydown="${this._onMoveButtonKeydown}"
+				@mousedown="${this._onMoveButtonMouseDown}"
 				text="${this._defaultLabel}">
 			</d2l-button-move>
 			${this._displayKeyboardTooltip ? html`<d2l-tooltip class="vdiff-target" align="start" announced for="${this._buttonId}" for-type="descriptor">${this._renderTooltipContent()}</d2l-tooltip>` : ''}

package/package.json

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