@brightspace-ui/core 3.147.4 → 3.148.0

package/components/list/README.md

@@ -446,6 +446,111 @@ If an item is draggable, the `drag-handle-text` attribute should be used to prov
 <d2l-my-drag-drop-elem></d2l-my-drag-drop-elem>
 ```
 
+#### Draggable lists with interactive content
+
+When a list item contains interactive content and the list item is not interactive in any way other than being `draggable` (i.e., not a link, button, `selectable`, or `expandable`), in order for the interactive content to have mouse events work as expected, one of the following should be done:
+- use the `drag-target-handle-only` on the list item; this causes the drag target to be the handle only rather than the entire cell
+- put the interactive content in the `actions` slot
+
+These scenarios can be seen in the demo below.
+
+<!-- docs: demo code display:block sandboxTitle:'List - Drag & Drop with interactive content'-->
+```html
+<script type="module">
+  import '@brightspace-ui/core/components/list/list.js';
+  import '@brightspace-ui/core/components/list/list-item.js';
+  import '@brightspace-ui/core/components/list/list-item-content.js';
+  import '@brightspace-ui/core/components/switch/switch.js';
+  import '@brightspace-ui/core/components/tooltip/tooltip-help.js';
+  import { css, html, LitElement } from 'lit';
+  import { labelStyles } from '@brightspace-ui/core/components/typography/styles.js';
+
+  class ListDemoDragAndDropInteractiveUsage extends LitElement {
+    static get properties() {
+      return {
+        list: { type: Array }
+      };
+    }
+
+    static get styles() {
+      return labelStyles;
+    }
+
+    constructor() {
+      super();
+      this.list = [
+        { key: '1', content: 'Initially first list item' },
+        { key: '2', content: 'Initially second list item' }
+      ];
+    }
+
+    render() {
+      return html`
+        <div style="display: flex; gap: 2rem; flex-wrap: wrap;">
+          <div style="flex-grow: 1; min-width: 100px;">
+            <div class="d2l-label-text" style="padding-bottom: 1rem;">Using "drag-target-handle-only":</div>
+            ${this._renderList1()}
+          </div>
+
+          <div style="flex-grow: 1; min-width: 100px;">
+            <div class="d2l-label-text"  style="padding-bottom: 1rem;">Using "actions" slot:</div>
+            ${this._renderList2()}
+          </div>
+        </div>
+      `;
+    }
+
+    _renderList1() {
+      const listItems = this.list.map((item) => {
+        return html`
+          <d2l-list-item draggable key="${item.key}" label="Draggable List Item" drag-target-handle-only>
+            <d2l-list-item-content>
+              ${item.content}
+              <div slot="secondary"><d2l-tooltip-help text="Hover for more info">Secondary information</d2l-tooltip-help></div>
+            </d2l-list-item-content>
+          </d2l-list-item>
+        `;
+      });
+
+      return html`
+        <d2l-list @d2l-list-item-position-change="${this._moveItems}">
+          ${listItems}
+        </d2l-list>
+      `;
+    }
+
+    _renderList2() {
+      const listItems = this.list.map((item) => {
+        return html`
+          <d2l-list-item draggable key="${item.key}" label="Draggable List Item">
+            <d2l-list-item-content>
+              ${item.content}
+              <div slot="secondary">Secondary information</div>
+            </d2l-list-item-content>
+            <div slot="actions">
+              <d2l-switch text="Action switch" text-position="hidden"></d2l-switch>
+            </div>
+          </d2l-list-item>
+        `;
+      });
+
+      return html`
+        <d2l-list @d2l-list-item-position-change="${this._moveItems}" >
+          ${listItems}
+        </d2l-list>
+      `;
+    }
+
+    _moveItems(e) {
+      e.detail.reorder(this.list, { keyFn: (item) => item.key });
+      this.requestUpdate('list', []);
+    }
+  }
+  customElements.define('d2l-my-drag-drop-elem-interactive', ListDemoDragAndDropInteractiveUsage);
+</script>
+<d2l-my-drag-drop-elem-interactive></d2l-my-drag-drop-elem-interactive>
+```
+
 ## List Controls [d2l-list-controls]
 
 The `d2l-list-controls` component can be placed in the `d2l-list`'s `controls` slot to provide a select-all checkbox, summary, a slot for `d2l-selection-action`s, and overflow-group behaviour.

package/components/tooltip/tooltip.js

@@ -14,6 +14,7 @@ import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
 import { styleMap } from 'lit/directives/style-map.js';
 
 const usePopoverMixin = getFlag('GAUD-7355-tooltip-popover', false);
+const useMutationObserver = getFlag('GAUD-8203-tooltip-mutation-observer', true);
 
 const contentBorderSize = 1;
 const contentHorizontalPadding = 15;
@@ -192,6 +193,7 @@ if (usePopoverMixin) {
 			this.#handleTargetFocusBound = this.#handleTargetFocus.bind(this);
 			this.#handleTargetMouseEnterBound = this.#handleTargetMouseEnter.bind(this);
 			this.#handleTargetMouseLeaveBound = this.#handleTargetMouseLeave.bind(this);
+			this.#handleTargetMutationBound = this.#handleTargetMutation.bind(this);
 			this.#handleTargetResizeBound = this.#handleTargetResize.bind(this);
 			this.#handleTargetTouchEndBound = this.#handleTargetTouchEnd.bind(this);
 			this.#handleTargetTouchStartBound = this.#handleTargetTouchStart.bind(this);
@@ -284,6 +286,7 @@ if (usePopoverMixin) {
 		#handleTargetFocusBound;
 		#handleTargetMouseEnterBound;
 		#handleTargetMouseLeaveBound;
+		#handleTargetMutationBound;
 		#handleTargetResizeBound;
 		#handleTargetTouchEndBound;
 		#handleTargetTouchStartBound;
@@ -299,6 +302,7 @@ if (usePopoverMixin) {
 		#showing;
 		#target;
 		#targetSizeObserver;
+		#targetMutationObserver;
 
 		#adaptPositionLocation(val) {
 			switch (val) {
@@ -332,6 +336,12 @@ if (usePopoverMixin) {
 
 			this.#targetSizeObserver = new ResizeObserver(this.#handleTargetResizeBound);
 			this.#targetSizeObserver.observe(this.#target);
+
+			if (useMutationObserver) {
+				this.#targetMutationObserver = new MutationObserver(this.#handleTargetMutationBound);
+				this.#targetMutationObserver.observe(this.#target, { attributes: true, attributeFilter: ['id'] });
+				this.#targetMutationObserver.observe(this.#target.parentNode, { childList: true });
+			}
 		}
 
 		#findTarget() {
@@ -341,7 +351,7 @@ if (usePopoverMixin) {
 			if (this.for) {
 				const targetSelector = `#${cssEscape(this.for)}`;
 				target = ownerRoot.querySelector(targetSelector);
-				target = target || ownerRoot?.host?.querySelector(targetSelector);
+				target = (target || ownerRoot?.host?.querySelector(targetSelector)) ?? null;
 			} else {
 				const parentNode = this.parentNode;
 				target = parentNode.nodeType === Node.DOCUMENT_FRAGMENT_NODE ? ownerRoot.host : parentNode;
@@ -402,6 +412,13 @@ if (usePopoverMixin) {
 			setTimeout(() => this.#updateShowing(), 100); // delay to allow for mouseenter to fire if hovering on tooltip
 		}
 
+		#handleTargetMutation([m]) {
+			if (!this.#target.isConnected || (m.target === this.#target && m.attributeName === 'id')) {
+				this.#targetMutationObserver.disconnect();
+				this._updateTarget();
+			}
+		}
+
 		#handleTargetResize() {
 			this.#resizeRunSinceTruncationCheck = true;
 			if (!this.showing) return;
@@ -453,6 +470,11 @@ if (usePopoverMixin) {
 				this.#targetSizeObserver.disconnect();
 				this.#targetSizeObserver = null;
 			}
+
+			if (this.#targetMutationObserver) {
+				this.#targetMutationObserver.disconnect();
+				this.#targetMutationObserver = null;
+			}
 		}
 
 		async #showingChanged(newValue, dispatch) {
@@ -954,6 +976,7 @@ if (usePopoverMixin) {
 			this._onTargetMouseEnter = this._onTargetMouseEnter.bind(this);
 			this._onTargetMouseLeave = this._onTargetMouseLeave.bind(this);
 			this._onTargetResize = this._onTargetResize.bind(this);
+			this._onTargetMutation = this._onTargetMutation.bind(this);
 			this._onTargetClick = this._onTargetClick.bind(this);
 			this._onTargetTouchStart = this._onTargetTouchStart.bind(this);
 			this._onTargetTouchEnd = this._onTargetTouchEnd.bind(this);
@@ -1069,13 +1092,12 @@ if (usePopoverMixin) {
 		willUpdate(changedProperties) {
 			super.willUpdate(changedProperties);
 
-			changedProperties.forEach((_, prop) => {
-				if (prop === 'for') {
-					this._updateTarget();
-				} else if (prop === 'forceShow') {
-					this._updateShowing();
-				}
-			});
+			if (changedProperties.has('for')) {
+				this._updateTarget();
+			}
+			if (changedProperties.has('forceShow')) {
+				this._updateShowing();
+			}
 		}
 
 		hide() {
@@ -1192,6 +1214,12 @@ if (usePopoverMixin) {
 
 			this._targetSizeObserver = new ResizeObserver(this._onTargetResize);
 			this._targetSizeObserver.observe(this._target);
+
+			if (useMutationObserver) {
+				this._targetMutationObserver = new MutationObserver(this._onTargetMutation);
+				this._targetMutationObserver.observe(this._target, { attributes: true, attributeFilter: ['id'] });
+				this._targetMutationObserver.observe(this._target.parentNode, { childList: true });
+			}
 		}
 
 		_computeAvailableSpaces(targetRect, spaceAround) {
@@ -1260,7 +1288,7 @@ if (usePopoverMixin) {
 			if (this.for) {
 				const targetSelector = `#${cssEscape(this.for)}`;
 				target = ownerRoot.querySelector(targetSelector);
-				target = target || ownerRoot?.host?.querySelector(targetSelector);
+				target = (target || ownerRoot?.host?.querySelector(targetSelector)) ?? null;
 			} else {
 				const parentNode = this.parentNode;
 				target = parentNode.nodeType === Node.DOCUMENT_FRAGMENT_NODE ? ownerRoot.host : parentNode;
@@ -1391,6 +1419,13 @@ if (usePopoverMixin) {
 			setTimeout(() => this._updateShowing(), 100); // delay to allow for mouseenter to fire if hovering on tooltip
 		}
 
+		_onTargetMutation([m]) {
+			if (!this._target?.isConnected || (m.target === this._target && m.attributeName === 'id')) {
+				this._targetMutationObserver?.disconnect();
+				this._updateTarget();
+			}
+		}
+
 		_onTargetResize() {
 			this._resizeRunSinceTruncationCheck = true;
 			if (!this.showing) {
@@ -1426,6 +1461,11 @@ if (usePopoverMixin) {
 				this._targetSizeObserver.disconnect();
 				this._targetSizeObserver = null;
 			}
+
+			if (this._targetMutationObserver) {
+				this._targetMutationObserver.disconnect();
+				this._targetMutationObserver = null;
+			}
 		}
 
 		async _showingChanged(newValue, dispatch) {

package/package.json

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