@brightspace-ui/core 2.98.6 → 2.99.1

package/components/collapsible-panel/collapsible-panel.js

@@ -135,7 +135,7 @@ class CollapsiblePanel extends FocusMixin(RtlMixin(LitElement)) {
 				box-shadow: 0 8px 12px -9px rgba(0, 0, 0, 0.3);
 				position: sticky;
 				top: 0;
-				z-index: 11; /* must be greater greater than list-items with open dropdowns or tooltips */
+				z-index: 12; /* must be greater greater than list-items with open dropdowns or tooltips */
 			}
 			.d2l-collapsible-panel.focused.scrolled .d2l-collapsible-panel-header {
 				top: 2px;

package/components/expand-collapse/README.md

@@ -1,9 +1,9 @@
-# Collapsible Containers
-
-## Expand Collapse Content [d2l-expand-collapse-content]
+# Expand Collapse Content
 
 The `d2l-expand-collapse-content` element can be used to create expandable and collapsible content. This component only provides the logic to expand and collapse the content; controlling when and how it expands or collapses is the responsibility of the user.
 
+## Expand Collapse Content [d2l-expand-collapse-content]
+
 <!-- docs: demo live name:d2l-expand-collapse-content autoSize:false display:block size:small -->
 ```html
 <script type="module">
@@ -40,29 +40,3 @@ The `d2l-expand-collapse-content` element can be used to create expandable and c
 
 To make your usage of `d2l-expand-collapse-content` accessible, the [`aria-expanded` attribute](https://www.w3.org/TR/wai-aria/#aria-expanded) should be added to the element that controls expanding and collapsing the content with `"true"` or `"false"` to indicate that the content is expanded or collapsed.
 
-## More-Less [d2l-more-less]
-
-The `d2l-more-less` element can be used to minimize the display of long content, while providing a way to reveal the full content.
-
-<!-- docs: demo live name:d2l-more-less -->
-```html
-<script type="module">
-  import '@brightspace-ui/core/components/more-less/more-less.js';
-</script>
-<d2l-more-less>
-	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
-	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
-</d2l-more-less>
-```
-
-<!-- docs: start hidden content -->
-### Properties
-
-| Property | Type | Description |
-|---|---|---|
-| `blur-color` | String | Gradient HEX formatted color of the blurring effect (defaults to white). |
-| `expanded` | Boolean | Specifies the expanded/collapsed state of the content |
-| `h-align` | String | A value of `text` aligns the leading edge of text |
-| `height` | String, default: `'4em'` | Maximum height of the content when in "less" mode. The `d2l-more-less` element itself will take up additional vertical space for the fading effect as well as the more/less button itself. |
-| `inactive` | Boolean | Whether the component is active or inactive |
-<!-- docs: end hidden content -->

package/components/filter/filter-tags.js

@@ -36,10 +36,10 @@ class FilterTags extends LocalizeCoreElement(LitElement) {
 		super();
 
 		this._allActiveFilters = new Map();
-		this._filters = new IdSubscriberController(this,
-			{ onUnsubscribe: this._removeLostFilter.bind(this) },
-			{ idPropertyName: 'filterIds' }
-		);
+		this._filters = new IdSubscriberController(this, 'active-filters', {
+			idPropertyName: 'filterIds',
+			onUnsubscribe: this._removeLostFilter.bind(this)
+		});
 	}
 
 	render() {

package/components/filter/filter.js

@@ -136,7 +136,7 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
 				line-height: unset;
 				overflow: hidden;
 			}
-			
+
 			.d2l-filter-dimension-set-value-text {
 				-webkit-box-orient: vertical;
 				display: -webkit-box;
@@ -191,10 +191,10 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
 		this._totalAppliedCount = 0;
 
 		this._activeFilters = null;
-		this._activeFiltersSubscribers = new SubscriberRegistryController(this,
-			{ onSubscribe: this._updateActiveFiltersSubscriber.bind(this), updateSubscribers: this._updateActiveFiltersSubscribers.bind(this) },
-			{}
-		);
+		this._activeFiltersSubscribers = new SubscriberRegistryController(this, 'active-filters', {
+			onSubscribe: this._updateActiveFiltersSubscriber.bind(this),
+			updateSubscribers: this._updateActiveFiltersSubscribers.bind(this)
+		});
 	}
 
 	static get focusElementSelector() {
@@ -268,10 +268,6 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
 		`;
 	}
 
-	getSubscriberController() {
-		return this._activeFiltersSubscribers;
-	}
-
 	requestFilterClearAll() {
 		this._handleClearAll();
 	}

package/components/list/list-item-expand-collapse-mixin.js

@@ -76,7 +76,7 @@ export const ListItemExpandCollapseMixin = superclass => class extends superclas
 		this._siblingHasNestedItems = false;
 		this._renderExpandCollapseSlot = false;
 		this._showNestedLoadingSpinner = false;
-		this._parentChildUpdateSubscription = new EventSubscriberController(this, {}, { eventName: 'd2l-list-child-status' });
+		this._parentChildUpdateSubscription = new EventSubscriberController(this, 'list-child-status');
 	}
 
 	connectedCallback() {

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

@@ -108,10 +108,13 @@ export const ListItemMixin = superclass => class extends composeMixins(
 				display: none;
 			}
 
-			:host([_tooltip-showing]),
-			:host([_dropdown-open]) {
+			:host([_dropdown-open]),
+			:host([_focusing]) {
 				z-index: 10; /* must be greater than adjacent selected items (if this is increased, d2l-collapsible-panel must be updated too) */
 			}
+			:host([_tooltip-showing]) {
+				z-index: 11; /* must be greater than adjacent selected items (if this is increased, d2l-collapsible-panel must be updated too) */
+			}
 			:host([_fullscreen-within]) {
 				position: fixed; /* required for Safari */
 				z-index: 1000; /* must be greater than floating workflow buttons */

package/components/list/list.js

@@ -69,11 +69,10 @@ class List extends PageableMixin(SelectionMixin(LitElement)) {
 		this._listItemChanges = [];
 		this._childHasExpandCollapseToggle = false;
 
-		this._listChildrenUpdatedSubscribers = new SubscriberRegistryController(
-			this,
-			{ onSubscribe: this._updateActiveSubscriber.bind(this), updateSubscribers: this._updateActiveSubscribers.bind(this) },
-			{ eventName: 'd2l-list-child-status' }
-		);
+		this._listChildrenUpdatedSubscribers = new SubscriberRegistryController(this, 'list-child-status', {
+			onSubscribe: this._updateActiveSubscriber.bind(this),
+			updateSubscribers: this._updateActiveSubscribers.bind(this)
+		});
 	}
 
 	connectedCallback() {
@@ -185,10 +184,6 @@ class List extends PageableMixin(SelectionMixin(LitElement)) {
 		return new SelectionInfo(keys, selectionInfo.state);
 	}
 
-	getSubscriberController() {
-		return this._listChildrenUpdatedSubscribers;
-	}
-
 	_getItemByIndex(index) {
 		const items = this.getItems();
 		if (index > items.length - 1) return;

package/components/more-less/README.md

@@ -1,3 +1,28 @@
-# More-Less
+# More/Less
 
-See [more-less](https://github.com/BrightspaceUI/core/tree/main/components/expand-collapse/README.md#more-less-d2l-more-less).
+The `d2l-more-less` element can be used to minimize the display of long content, while providing a way to reveal the full content.
+
+## More-Less [d2l-more-less]
+
+<!-- docs: demo live name:d2l-more-less -->
+```html
+<script type="module">
+  import '@brightspace-ui/core/components/more-less/more-less.js';
+</script>
+<d2l-more-less>
+	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+</d2l-more-less>
+```
+
+<!-- docs: start hidden content -->
+### Properties
+
+| Property | Type | Description |
+|---|---|---|
+| `blur-color` | String | Gradient HEX formatted color of the blurring effect (defaults to white). |
+| `expanded` | Boolean | Specifies the expanded/collapsed state of the content |
+| `h-align` | String | A value of `text` aligns the leading edge of text |
+| `height` | String, default: `'4em'` | Maximum height of the content when in "less" mode. The `d2l-more-less` element itself will take up additional vertical space for the fading effect as well as the more/less button itself. |
+| `inactive` | Boolean | Whether the component is active or inactive |
+<!-- docs: end hidden content -->

package/controllers/subscriber/README.md

@@ -12,29 +12,19 @@ import { SubscriberRegistryController } from '@brightspace-ui/core/controllers/s
 class CableSubscription extends LitElement {
 	constructor() {
 		super();
-		this._sportsSubscribers = new SubscriberRegistryController(this,
-			{ onSubscribe: this._unlockSportsChannels.bind(this) },
-			{ eventName: 'd2l-channels-subscribe-sports' }
-		);
-
-		this._movieSubscribers = new SubscriberRegistryController(this, {},
-			{ onSubscribe: this._unlockMovieChannels.bind(this), updateSubscribers: this._sendMovieGuide.bind(this) },
-			{ eventName: 'd2l-channels-subscribe-movies' }
-		);
-
-		// This controller only supports registering by id - no event is needed
-		this._kidsChannelSubscribers = new SubscriberRegistryController(this,
-			{ onSubscribe: this._unlockKidsChannels.bind(this) }, {});
-	}
 
-	getSubscriberController(controllerId) {
-		if (controllerId === 'sports') {
-			return this._sportsSubscribers;
-		} else if (controllerId === 'movies') {
-			return this._movieSubscribers;
-		} else if (controllerId === 'kids') {
-			return this._kidsChannelSubscribers;
+		this._sportsSubscribers = new SubscriberRegistryController(this, 'channels-sports', {
+			onSubscribe: this._unlockSportsChannels.bind(this)
+		});
+
+		this._movieSubscribers = new SubscriberRegistryController(this, 'channels-movies', {
+			onSubscribe: this._unlockMovieChannels.bind(this),
+			updateSubscribers: this._sendMovieGuide.bind(this)
 		}
+
+		this._kidsChannelSubscribers = new SubscriberRegistryController(this, 'channels-kids', {
+			onSubscribe: this._unlockKidsChannels.bind(this)
+		});
 	}
 
 	_sendMovieGuide(subscribers) {
@@ -49,15 +39,13 @@ class CableSubscription extends LitElement {
  }
 ```
 
-When creating the controller, you can pass in callbacks to run whenever a subscriber is added, removed, or `updateSubscribers` is called (which handles request debouncing for you).
-
-The `*subscriberController`s will use a `getSubscriberController` method that needs to be exposed on the registry component. If you only have one `SubscriberRegistryController` you can simple return that.  If you have multiple, you will return the proper controller depending on the id the subscriber component passed to you.
+When creating the controller, you must provide a unique name for the subscription (e.g. `'channels-sports'`). You may also pass in an optional `updateSubscribers` callback (invoked by calling `.updateSubscribers` on the controller, with built-in debouncing), and lifecycle callbacks to run whenever a subscriber is added (`onSubscribe`) or removed (`onUnsubscribe`).
 
 Once this has been set up, components can subscribe to particular registries two different ways:
-1. Using a matching event name with `EventSubscriberController`. The component will need to be a child of the registry component for this to work.
-2. By pointing to the registry component's id with `IdSubscriberController`. The component will need to be in the same DOM scope as the registry component for this to work.
+1. Using `EventSubscriberController` with the target subscription name. The component will need to be a child of the registry component for this to work.
+2. Using `IdSubscriberController` with the target subscription name and the `idPropertyName` option, which will point to the registry component's id. The component will need to be in the same DOM scope as the registry component for this to work.
 
-Like the `SubscriberRegistryController`, these `*subscriberController`s take optional callbacks to throw at different points in the subscription process.
+Like the `SubscriberRegistryController`, these `*subscriberController`s take optional callbacks invoked at different points in the subscription process.
 
 ```js
 import { EventSubscriberController, IdSubscriberController } from '@brightspace-ui/core/controllers/subscriber/subscriberControllers.js';
@@ -72,15 +60,12 @@ class GeneralViewer extends LitElement {
 	constructor() {
 		super();
 		this._subscribedChannels = new Set();
-	
-		this._sportsSubscription = new EventSubscriberController(this,
-			{ onError: this._onSportsError.bind(this) }
-			{ eventName: 'd2l-channels-subscribe-sports', controllerId: 'sports' }
-		);
-
-		this._movieSubscription = new EventSubscriberController(this, {},
-			{ eventName: 'd2l-channels-subscribe-movies', controllerId: 'movies' }
-		);
+
+		this._sportsSubscription = new EventSubscriberController(this, 'channels-sports', {
+			onError: this._onSportsError.bind(this)
+		}
+
+		this._movieSubscription = new EventSubscriberController(this, 'channels-movies');
 	}
 
 	addChannels(channels) {
@@ -106,10 +91,11 @@ class YoungerViewer extends LitElement {
 		super();
 		this._subscribedChannels = new Set();
 
-		this._kidsSubscription = new IdSubscriberController(this,
-			{ onSubscribe: this._onSubscribe.bind(this), onUnsubscribe: this._onUnsubscribe.bind(this) },
-			{ idPropertyName: 'for', controllerId: 'kids' }
-		);
+		this._kidsSubscription = new IdSubscriberController(this, 'channels-kids', {
+			idPropertyName: 'for',
+			onSubscribe: this._onSubscribe.bind(this),
+			onUnsubscribe: this._onUnsubscribe.bind(this)
+		});
 	}
 
 	addChannels(channels) {
@@ -129,6 +115,7 @@ class YoungerViewer extends LitElement {
 ```
 
 An example of what this could look like altogether:
+
 ```html
 <cable-subscription id="rogers">
 	<general-viewer></general-viewer>
@@ -136,13 +123,12 @@ An example of what this could look like altogether:
 <younger-viewer for="rogers"></younger-viewer>
 ```
 
-As of the Lit 2 upgrade, the lifecycle methods `hostConnected`, `hostDisconnected`, and `hostUpdated` will be called automatically.
 ## Available Callbacks
 
 ### SubscriberRegistryController
 | Callback Name | Description | Passed to Callback |
 |---|---|---|
-| `onSubscribe` | Runs whenever a new subscriber is added | Subscriber that was just subscribed | 
+| `onSubscribe` | Runs whenever a new subscriber is added | Subscriber that was just subscribed |
 | `onUnsubscribe` | Runs whenever a subscriber is removed | Subscriber that was just unsubscribed |
 | `updateSubscribers` | Runs whenever `updateSubscribers` is called on the controller, handles debouncing requests for you | Map of all current subscribers |
 

package/controllers/subscriber/subscriberControllers.js

@@ -1,14 +1,52 @@
 import { cssEscape } from '../../helpers/dom.js';
 
-export class SubscriberRegistryController {
+class BaseController {
+	constructor(host, name, options = {}) {
+		if (!host || !name) throw new TypeError('SubscriberController: missing host or subscription name');
 
-	constructor(host, callbacks, options) {
-		this._host = host;
 		host.addController(this);
-		this._callbacks = callbacks || {};
-		this._eventName = options && options.eventName;
-		this._subscribers = new Map();
+		this._host = host;
+		this._name = name;
+		this._options = options;
+		this._eventName = `d2l-subscribe-${this._name}`;
+	}
+}
+
+class BaseSubscriber extends BaseController {
+	_subscribe(target = this._host, targetLabel) {
+		const isBroadcast = target === this._host;
+
+		const options = isBroadcast ? { bubbles: true, composed: true } : {};
+		const evt = new CustomEvent(this._eventName, {
+			...options,
+			detail: { subscriber: this._host }
+		});
+		target.dispatchEvent(evt);
+
+		const { registry, registryController } = evt.detail;
+		if (!registry) {
+			if (this._options.onError) this._options.onError();
+			return;
+		}
+
+		if (targetLabel) {
+			this._registries.set(targetLabel, registry);
+			this._registryControllers.set(targetLabel, registryController);
+		} else {
+			this._registry = registry;
+			this._registryController = registryController;
+		}
+
+		if (this._options.onSubscribe) this._options.onSubscribe(registry);
+	}
+}
+
+export class SubscriberRegistryController extends BaseController {
+
+	constructor(host, name, options) {
+		super(host, name, options);
 
+		this._subscribers = new Map();
 		this._handleSubscribe = this._handleSubscribe.bind(this);
 	}
 
@@ -27,24 +65,24 @@ export class SubscriberRegistryController {
 	subscribe(target) {
 		if (this._subscribers.has(target)) return;
 		this._subscribers.set(target, target);
-		if (this._callbacks.onSubscribe) this._callbacks.onSubscribe(target);
+		if (this._options.onSubscribe) this._options.onSubscribe(target);
 	}
 
 	unsubscribe(target) {
 		this._subscribers.delete(target);
-		if (this._callbacks.onUnsubscribe) this._callbacks.onUnsubscribe(target);
+		if (this._options.onUnsubscribe) this._options.onUnsubscribe(target);
 	}
 
 	updateSubscribers() {
 		if (!this._subscribers || this._subscribers.size === 0) return;
-		if (!this._callbacks.updateSubscribers) return;
+		if (!this._options.updateSubscribers) return;
 
 		// debounce the updates
 		if (this._updateSubscribersRequested) return;
 
 		this._updateSubscribersRequested = true;
 		setTimeout(() => {
-			this._callbacks.updateSubscribers(this._subscribers);
+			this._options.updateSubscribers(this._subscribers);
 			this._updateSubscribersRequested = false;
 		}, 0);
 	}
@@ -52,20 +90,19 @@ export class SubscriberRegistryController {
 	_handleSubscribe(e) {
 		e.stopPropagation();
 		e.detail.registry = this._host;
-		const target = e.composedPath()[0];
+		e.detail.registryController = this;
+		const target = e.detail.subscriber;
 		this.subscribe(target);
 	}
 }
 
-export class EventSubscriberController {
+export class EventSubscriberController extends BaseSubscriber {
+
+	constructor(host, name, options) {
+		super(host, name, options);
 
-	constructor(host, callbacks, options) {
-		this._host = host;
-		host.addController(this);
-		this._callbacks = callbacks || {};
-		this._eventName = options && options.eventName;
-		this._controllerId = options && options.controllerId;
 		this._registry = null;
+		this._registryController = null;
 	}
 
 	get registry() {
@@ -74,39 +111,24 @@ export class EventSubscriberController {
 
 	hostConnected() {
 		// delay subscription otherwise import/upgrade order can cause selection mixin to miss event
-		requestAnimationFrame(() => {
-			const evt = new CustomEvent(this._eventName, {
-				bubbles: true,
-				composed: true,
-				detail: {}
-			});
-			this._host.dispatchEvent(evt);
-			this._registry = evt.detail.registry;
-
-			if (!this._registry) {
-				if (this._callbacks.onError) this._callbacks.onError();
-				return;
-			}
-			if (this._callbacks.onSubscribe) this._callbacks.onSubscribe(this._registry);
-		});
+		requestAnimationFrame(() => this._subscribe());
 	}
 
 	hostDisconnected() {
-		if (this._registry) this._registry.getSubscriberController(this._controllerId).unsubscribe(this._host);
+		if (this._registryController) this._registryController.unsubscribe(this._host);
 	}
 
 }
 
-export class IdSubscriberController {
+export class IdSubscriberController extends BaseSubscriber {
+
+	constructor(host, name, options) {
+		super(host, name, options);
 
-	constructor(host, callbacks, options) {
-		this._host = host;
-		host.addController(this);
-		this._callbacks = callbacks || {};
 		this._idPropertyName = options && options.idPropertyName;
 		this._idPropertyValue = this._idPropertyName ? this._host[this._idPropertyName] : undefined;
-		this._controllerId = options && options.controllerId;
 		this._registries = new Map();
+		this._registryControllers = new Map();
 		this._timeouts = new Set();
 	}
 
@@ -117,8 +139,8 @@ export class IdSubscriberController {
 	hostDisconnected() {
 		if (this._registryObserver) this._registryObserver.disconnect();
 		this._timeouts.forEach(timeoutId => clearTimeout(timeoutId));
-		this._registries.forEach(registry => {
-			registry.getSubscriberController(this._controllerId).unsubscribe(this._host);
+		this._registryControllers.forEach(controller => {
+			controller.unsubscribe(this._host);
 		});
 	}
 
@@ -129,11 +151,12 @@ export class IdSubscriberController {
 		this._idPropertyValue = propertyValue;
 
 		if (this._registryObserver) this._registryObserver.disconnect();
-		this._registries.forEach(registry => {
-			registry.getSubscriberController(this._controllerId).unsubscribe(this._host);
-			if (this._callbacks.onUnsubscribe) this._callbacks.onUnsubscribe(registry.id);
+		this._registryControllers.forEach((controller, key) => {
+			controller.unsubscribe(this._host);
+			if (this._options.onUnsubscribe) this._options.onUnsubscribe(key);
 		});
 		this._registries = new Map();
+		this._registryControllers = new Map();
 
 		this._updateRegistries();
 
@@ -159,7 +182,7 @@ export class IdSubscriberController {
 
 	_updateRegistry(registryId, elapsedTime) {
 		let registryComponent = this._host.getRootNode().querySelector(`#${cssEscape(registryId)}`);
-		if (!registryComponent && this._callbacks.onError) {
+		if (!registryComponent && this._options.onError) {
 			if (elapsedTime < 3000) {
 				const timeoutId = setTimeout(() => {
 					this._timeouts.delete(timeoutId);
@@ -167,20 +190,18 @@ export class IdSubscriberController {
 				}, 100);
 				this._timeouts.add(timeoutId);
 			} else {
-				this._callbacks.onError(registryId);
+				this._options.onError(registryId);
 			}
 		}
 
 		registryComponent = registryComponent || undefined;
 		if (this._registries.get(registryId) === registryComponent) return;
 
-		if (registryComponent) {
-			registryComponent.getSubscriberController(this._controllerId).subscribe(this._host);
-			this._registries.set(registryId, registryComponent);
-			if (this._callbacks.onSubscribe) this._callbacks.onSubscribe(registryComponent);
-		} else {
+		if (registryComponent) this._subscribe(registryComponent, registryId);
+		else {
 			this._registries.delete(registryId);
-			if (this._callbacks.onUnsubscribe) this._callbacks.onUnsubscribe(registryId);
+			this._registryControllers.delete(registryId);
+			if (this._options.onUnsubscribe) this._options.onUnsubscribe(registryId);
 		}
 	}
 

package/package.json

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