@brightspace-ui/core 1.210.0 → 1.213.0

package/README.md

@@ -55,6 +55,8 @@ npm install @brightspace-ui/core
   * [Tooltip](components/tooltip/): tooltip components
   * [Typography](components/typography/): typography styles and components
   * [Validation](components/validation/): plugin custom validation logic to native and custom form elements
+* Controllers
+  * [Subscriber](controllers/subscriber/): for managing a registry of subscribers in a many-to-many relationship
 * Directives
   * [Animate](directives/animate/): animate showing, hiding and removal of elements
 * Helpers
@@ -119,20 +121,23 @@ Note: The axe tests require `prefers-reduced-motion` emulation to be turned on i
 
 This repo uses the [@brightspace-ui/visual-diff utility](https://github.com/BrightspaceUI/visual-diff/) to compare current snapshots against a set of golden snapshots stored in source control.
 
-The golden snapshots in source control must be updated by Github Actions.  If your PR's code changes result in visual differences, a PR with the new goldens will be automatically opened for you against your branch.
+The golden snapshots in source control must be updated by the [visual-diff GitHub Action](https://github.com/BrightspaceUI/actions/tree/main/visual-diff).  If a pull request results in visual differences, a draft pull request with the new goldens will automatically be opened against its branch.
 
-If you'd like to run the tests locally to help troubleshoot or develop new tests, you can use these commands:
+To run the tests locally to help troubleshoot or develop new tests, first install these dependencies:
 
 ```shell
-# Install dependencies locally
-npm install mocha puppeteer @brightspace-ui/visual-diff --no-save
+npm install @brightspace-ui/visual-diff@X mocha@Y puppeteer@Z  --no-save
+```
+
+Replace `X`, `Y` and `Z` with [the current versions](https://github.com/BrightspaceUI/actions/tree/main/visual-diff#current-dependency-versions) the action is using.
+
+Then run the tests:
 
+```shell
 # run visual-diff tests
 npx mocha './**/*.visual-diff.js' -t 10000
-
 # subset of visual-diff tests:
 npx mocha './**/*.visual-diff.js' -t 10000 -g some-pattern
-
 # update visual-diff goldens
 npx mocha './**/*.visual-diff.js' -t 10000 --golden
 ```

package/components/dropdown/dropdown-content-mixin.js

@@ -394,7 +394,7 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
 		if (this.opened) {
 			this.close();
 		} else {
-			this.open(applyFocus);
+			this.open(!this.noAutoFocus && applyFocus);
 		}
 	}
 
@@ -518,11 +518,10 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
 
 			await this.__position();
 			this._showBackdrop = this._useMobileStyling && this.mobileTray;
-
 			if (!this.noAutoFocus && this.__applyFocus) {
 				const focusable = getFirstFocusableDescendant(this);
 				if (focusable) {
-					// bumping this to the next frame is required to prevent Legacy-Edge from crazily invoking click on the focused element
+					// Removing the rAF call can allow infinite focus looping to happen in content using a focus trap
 					requestAnimationFrame(() => focusable.focus());
 				} else {
 					content.setAttribute('tabindex', '-1');
@@ -1014,7 +1013,7 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
 			const content = this.__getContentContainer();
 			const focusable = getFirstFocusableDescendant(content);
 			if (focusable) {
-				// bumping this to the next frame is required to prevent Legacy-Edge from crazily invoking click on the focused element
+				// Removing the rAF call can allow infinite focus looping to happen in content using a focus trap
 				requestAnimationFrame(() => focusable.focus());
 			} else {
 				content.setAttribute('tabindex', '-1');

package/components/dropdown/dropdown-menu.js

@@ -112,9 +112,7 @@ class DropdownMenu extends ThemeMixin(DropdownContentMixin(LitElement)) {
 
 		menu.resize();
 
-		if (this.__applyFocus) {
-			menu.focus();
-		}
+		menu.focus();
 	}
 
 	_onSelect(e) {

package/components/dropdown/dropdown-opener-mixin.js

@@ -262,7 +262,7 @@ export const DropdownOpenerMixin = superclass => class extends superclass {
 				this._isHovering = false;
 				this.openDropdown(false);
 			}
-		} else this.toggleOpen(false);
+		} else this.toggleOpen(true);
 	}
 
 	/* used by open-on-hover option */

package/components/filter/filter.js

@@ -212,6 +212,25 @@ class Filter extends LocalizeCoreElement(RtlMixin(LitElement)) {
 		`;
 	}
 
+	focus() {
+		const opener = this.shadowRoot.querySelector('d2l-dropdown-button-subtle');
+		if (opener) opener.focus();
+	}
+
+	requestFilterClearAll() {
+		this._handleClearAll();
+	}
+
+	requestFilterValueClear(keyObject) {
+		const dimension = this._dimensions.find(dimension => dimension.key === keyObject.dimension);
+
+		switch (dimension.type) {
+			case 'd2l-filter-dimension-set':
+				this._performChangeSetDimension(dimension, keyObject.value, false);
+				break;
+		}
+	}
+
 	_buildDimension(dimension, singleDimension) {
 		let dimensionHTML;
 		switch (dimension.type) {
@@ -433,20 +452,9 @@ class Filter extends LocalizeCoreElement(RtlMixin(LitElement)) {
 		const dimensionKey = e.target.id.slice(SET_DIMENSION_ID_PREFIX.length);
 		const dimension = this._dimensions.find(dimension => dimension.key === dimensionKey);
 		const valueKey = e.detail.key;
-		const value = dimension.values.find(value => value.key === valueKey);
 		const selected = e.detail.selected;
 
-		value.selected = selected;
-
-		if (selected) {
-			dimension.appliedCount++;
-			this._totalAppliedCount++;
-		} else {
-			dimension.appliedCount--;
-			this._totalAppliedCount--;
-		}
-
-		this._dispatchChangeEvent(dimension, { valueKey: valueKey, selected: selected });
+		this._performChangeSetDimension(dimension, valueKey, selected);
 	}
 
 	_handleClear() {
@@ -621,6 +629,22 @@ class Filter extends LocalizeCoreElement(RtlMixin(LitElement)) {
 		return false;
 	}
 
+	_performChangeSetDimension(dimension, valueKey, selected) {
+		const value = dimension.values.find(value => value.key === valueKey);
+		if (value.selected === selected) return;
+		value.selected = selected;
+
+		if (selected) {
+			dimension.appliedCount++;
+			this._totalAppliedCount++;
+		} else {
+			dimension.appliedCount--;
+			this._totalAppliedCount--;
+		}
+
+		this._dispatchChangeEvent(dimension, { valueKey: valueKey, selected: selected });
+	}
+
 	_performDimensionClear(dimension) {
 		this._totalAppliedCount = this._totalAppliedCount - dimension.appliedCount;
 		dimension.appliedCount = 0;

package/components/list/demo/{list-demo-drag-and-drop-usage.js → list-drag-and-drop-position.js}

@@ -5,7 +5,8 @@ import { html, LitElement } from 'lit-element/lit-element.js';
 import { ifDefined } from 'lit-html/directives/if-defined.js';
 import { repeat } from 'lit-html/directives/repeat.js';
 
-class ListDemoDragAndDropUsage extends LitElement {
+class ListDemoDragAndDropPosition extends LitElement {
+
 	static get properties() {
 		return {
 			list: { type: Array },
@@ -92,4 +93,4 @@ class ListDemoDragAndDropUsage extends LitElement {
 	}
 }
 
-customElements.define('d2l-list-demo-drag-and-drop-usage', ListDemoDragAndDropUsage);
+customElements.define('d2l-demo-list-drag-and-drop-position', ListDemoDragAndDropPosition);

package/components/list/demo/list-drag-and-drop.html

@@ -6,45 +6,38 @@
 	<link rel="stylesheet" href="../../demo/styles.css" type="text/css">
 	<script type="module">
 		import '../../demo/demo-page.js';
-		import './list-demo-drag-and-drop-usage.js';
+		import './list-drag-and-drop-position.js';
+		import './list-drag-and-drop.js';
 	</script>
 </head>
 <body unresolved>
 
 	<d2l-demo-page page-title="d2l-list (with drag & drop)">
 
-		<h2>Draggable</h2>
+		<h2>Position Change Event</h2>
 
 		<d2l-demo-snippet>
 			<template>
-				<d2l-list-demo-drag-and-drop-usage></d2l-list-demo-drag-and-drop-usage>
+				<d2l-demo-list-drag-and-drop-position grid selectable hrefs></d2l-demo-list-drag-and-drop-position>
 			</template>
 		</d2l-demo-snippet>
 
-		<h2>Draggable and Selectable</h2>
+		<h2>Move Event</h2>
 
 		<d2l-demo-snippet>
 			<template>
-				<d2l-list-demo-drag-and-drop-usage selectable></d2l-list-demo-drag-and-drop-usage>
+				<d2l-demo-list-drag-and-drop></d2l-demo-list-drag-and-drop>
 			</template>
 		</d2l-demo-snippet>
 
-		<h2>Draggable with Grid and Selectable</h2>
 
-		<d2l-demo-snippet>
-			<template>
-				<d2l-list-demo-drag-and-drop-usage grid selectable></d2l-list-demo-drag-and-drop-usage>
-			</template>
-		</d2l-demo-snippet>
-
-		<h2>All the Fixins (grid, draggable, selectable, hrefs)</h2>
+	</d2l-demo-page>
 
-		<d2l-demo-snippet>
-			<template>
-				<d2l-list-demo-drag-and-drop-usage grid selectable hrefs></d2l-list-demo-drag-and-drop-usage>
-			</template>
-		</d2l-demo-snippet>
+	<script>
+		document.body.addEventListener('d2l-list-items-move', e => {
+			console.log('d2l-list-items-move', e.detail);
+		});
+	</script>
 
-	</d2l-demo-page>
 </body>
 </html>

package/components/list/demo/list-drag-and-drop.js

@@ -0,0 +1,171 @@
+import '../list-item-content.js';
+import '../list-item.js';
+import '../list.js';
+import { html, LitElement } from 'lit-element/lit-element.js';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
+import { moveLocations } from '../list-item-drag-drop-mixin.js';
+import { repeat } from 'lit-html/directives/repeat.js';
+
+class ListDemoDragAndDrop extends LitElement {
+
+	static get properties() {
+		return {
+			items: { type: Array }
+		};
+	}
+
+	constructor() {
+		super();
+		this.items = [{
+			key: '1',
+			primaryText: 'Introductory Earth Sciences',
+			supportingText: 'This course explores the geological processes of the Earth\'s interior and surface. These include volcanism, earthquakes, mountain building, glaciation and weathering.',
+			imgSrc: 'https://s.brightspace.com/course-images/images/63b162ab-b582-4bf9-8c1d-1dad04714121/tile-high-density-max-size.jpg',
+			items: [{
+				key: '1-1',
+				primaryText: 'Glaciation',
+				supportingText: 'Supporting Info',
+				imgSrc: '',
+				items: []
+			}, {
+				key: '1-2',
+				primaryText: 'Weathering',
+				supportingText: 'Supporting Info',
+				imgSrc: '',
+				items: []
+			}, {
+				key: '1-3',
+				primaryText: 'Volcanism',
+				supportingText: 'Supporting Info',
+				imgSrc: '',
+				items: []
+			}]
+		}, {
+			key: '2',
+			primaryText: 'Flow and Transport Through Fractured Rocks',
+			supportingText: 'Fractures are ubiquitous in geologic media and important in disciplines such as physical and contaminant hydrogeology, geotechnical engineering, civil and environmental engineering, petroleum engineering among other areas.',
+			imgSrc: 'https://s.brightspace.com/course-images/images/e5fd575a-bc14-4a80-89e1-46f349a76178/tile-high-density-max-size.jpg',
+			items: [{
+				key: '2-1',
+				primaryText: 'Contaminant Transport',
+				supportingText: 'Supporting Info',
+				imgSrc: '',
+				items: []
+			}, {
+				key: '2-2',
+				primaryText: 'Modelling Flow in Fractured Media',
+				supportingText: 'Supporting Info',
+				imgSrc: '',
+				items: []
+			}]
+		}, {
+			key: '3',
+			primaryText: 'Applied Wetland Science',
+			supportingText: 'Advanced concepts on wetland ecosystems in the context of regional and global earth systems processes such as carbon and nitrogen cycling and climate change, applications of wetland paleoecology, use of isotopes and other geochemical tools in wetland science, and wetland engineering in landscape rehabilitation and ecotechnology.',
+			imgSrc: 'https://s.brightspace.com/course-images/images/38e839b1-37fa-470c-8830-b189ce4ae134/tile-high-density-max-size.jpg',
+			items: [{
+				key: '3-1',
+				primaryText: 'Carbon & Nitrogen Cycling',
+				supportingText: 'Supporting Info',
+				imgSrc: '',
+				items: []
+			}, {
+				key: '3-2',
+				primaryText: 'Wetland Engineering',
+				supportingText: 'Supporting Info',
+				imgSrc: '',
+				items: []
+			}]
+		}];
+	}
+
+	render() {
+		const renderList = (items, nested) => {
+			return html`
+				<d2l-list grid slot="${ifDefined(nested ? 'nested' : undefined)}">
+					${repeat(items, item => item.key, item => html`
+						<d2l-list-item
+							action-href="http://www.d2l.com"
+							draggable
+							drag-handle-text="${item.primaryText}"
+							drop-nested
+							key="${item.key}"
+							label="${item.primaryText}"
+							selectable>
+								${nested ? null : html`<img slot="illustration" src="${item.imgSrc}">`}
+								<d2l-list-item-content>
+									<div>${item.primaryText}</div>
+									<div slot="supporting-info">${item.supportingText}</div>
+								</d2l-list-item-content>
+								${item.items.length > 0 ? renderList(item.items, true) : null}
+						</d2l-list-item>
+					`)}
+				</d2l-list>
+			`;
+		};
+
+		return html`
+			<div @d2l-list-items-move="${this._handleListItemsMove}">
+				${renderList(this.items, false)}
+			</div>
+		`;
+	}
+
+	async _handleListItemsMove(e) {
+
+		const sourceListItems = e.detail.sourceItems;
+		const target = e.detail.target;
+
+		// helper that gets the array containing item data, the item data, and the index within the array
+		const getItemInfo = (items, key) => {
+			for (let i = 0; i < items.length; i++) {
+				if (items[i].key === key) {
+					return { owner: items, item: items[i], index: i };
+				}
+				if (items[i].items && items[i].items.length > 0) {
+					const tempItemData = getItemInfo(items[i].items, key);
+					if (tempItemData) return tempItemData;
+				}
+			}
+		};
+
+		const dataToMove = [];
+
+		// remove data elements from original locations
+		sourceListItems.forEach(sourceListItem => {
+			const info = getItemInfo(this.items, sourceListItem.key);
+			info.owner.splice(info.index, 1);
+			dataToMove.push(info.item);
+		});
+
+		// append data elements to new location
+		const targetInfo = getItemInfo(this.items, target.item.key);
+		let targetItems;
+		let targetIndex;
+		if (target.location === moveLocations.nest) {
+			if (!targetInfo.item.items) targetInfo.item.items = [];
+			targetItems = targetInfo.item.items;
+			targetIndex = targetItems.length;
+		} else {
+			targetItems = targetInfo.owner;
+			if (target.location === moveLocations.above) targetIndex = targetInfo.index;
+			else if (target.location === moveLocations.below) targetIndex = targetInfo.index + 1;
+		}
+		for (let i = dataToMove.length - 1; i >= 0; i--) {
+			targetItems.splice(targetIndex, 0, dataToMove[i]);
+		}
+
+		await this.requestUpdate();
+
+		if (e.detail.keyboardActive) {
+			requestAnimationFrame(() => {
+				const newItem = this.shadowRoot.querySelector('d2l-list').getListItemByKey(sourceListItems[0].key);
+				newItem.activateDragHandle();
+			});
+		}
+
+	}
+
+}
+
+customElements.define('d2l-demo-list-drag-and-drop', ListDemoDragAndDrop);

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

@@ -113,16 +113,6 @@ export const ListItemCheckboxMixin = superclass => class extends SkeletonMixin(L
 		}));
 	}
 
-	_getNestedList() {
-		const nestedSlot = this.shadowRoot.querySelector('slot[name="nested"]');
-		let nestedNodes = nestedSlot.assignedNodes();
-		if (nestedNodes.length === 0) {
-			nestedNodes = [...nestedSlot.childNodes];
-		}
-
-		return nestedNodes.find(node => (node.nodeType === Node.ELEMENT_NODE && node.tagName === 'D2L-LIST'));
-	}
-
 	_onCheckboxActionClick(event) {
 		event.preventDefault();
 		if (this.disabled) return;
@@ -140,6 +130,10 @@ export const ListItemCheckboxMixin = superclass => class extends SkeletonMixin(L
 		}
 	}
 
+	_onNestedSlotChange() {
+		this._updateNestedSelectionProvider();
+	}
+
 	_onSelectionProviderConnected(e) {
 		e.stopPropagation();
 		this._updateNestedSelectionProvider();