@brightspace-ui/core 1.242.2 → 2.0.2

package/components/demo/code-view.js

@@ -30,11 +30,7 @@ class CodeView extends LitElement {
 		if (Prism.languages[language]) {
 			this._dependenciesPromise = Promise.resolve();
 		} else {
-			/* Current, non-relative imports don't appear to work with Polymer dev server
-			for FF, Edge, IE11.  Use of non-default languages is limited to dev with this approach.
-			https://github.com/Polymer/tools/issues/3402 */
-			const path = `/node_modules/prismjs/components/prism-${language}.min.js`;
-			this._dependenciesPromise = import(path);
+			this._dependenciesPromise = import(`./node_modules/prismjs/components/prism-${language}.min.js`);
 		}
 		if (this.shadowRoot) this._updateCode(this.shadowRoot.querySelector('slot'));
 		super.attributeChangedCallback(name, oldval, newval);

package/components/filter/filter.js

@@ -157,16 +157,6 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
 		return 'd2l-dropdown-button-subtle';
 	}
 
-	connectedCallback() {
-		super.connectedCallback();
-		this._activeFiltersSubscribers.hostConnected();
-	}
-
-	disconnectedCallback() {
-		super.disconnectedCallback();
-		this._activeFiltersSubscribers.hostDisconnected();
-	}
-
 	firstUpdated(changedProperties) {
 		super.firstUpdated(changedProperties);
 		this.addEventListener('d2l-filter-dimension-data-change', this._handleDimensionDataChange);

package/components/html-block/html-block.js

@@ -174,7 +174,6 @@ class HtmlBlock extends RtlMixin(LitElement) {
 
 	connectedCallback() {
 		super.connectedCallback();
-		if (this._contextObserverController) this._contextObserverController.hostConnected();
 
 		if (!this._contentObserver || this.noDeferredRendering) return;
 
@@ -188,7 +187,6 @@ class HtmlBlock extends RtlMixin(LitElement) {
 
 	disconnectedCallback() {
 		super.disconnectedCallback();
-		if (this._contextObserverController) this._contextObserverController.hostDisconnected();
 		if (this._contentObserver) this._contentObserver.disconnect();
 	}
 

package/controllers/attributeObserver/htmlAttributeObserverController.js

@@ -14,6 +14,7 @@ export class HtmlAttributeObserverController {
 		);
 
 		this._host = host;
+		host.addController(this);
 		this._attributes = attributes;
 		this.values = new Map();
 	}

package/controllers/subscriber/README.md

@@ -136,24 +136,7 @@ An example of what this could look like altogether:
 <younger-viewer for="rogers"></younger-viewer>
 ```
 
-NOTE: Until we are on Lit 2, the controller lifecycle events will need to be manually called:
-```js
-	connectedCallback() {
-		super.connectedCallback();
-		if (this._subscriptionController) this._subscriptionController.hostConnected();
-	}
-
-	disconnectedCallback() {
-		super.disconnectedCallback();
-		if (this._subscriptionController) this._subscriptionController.hostDisconnected();
-	}
-
-	updated(changedProperties) {
-		super.updated(changedProperties);
-		if (this._subscriptionController) this._subscriptionController.hostUpdated(changedProperties);
-	}
-```
-
+As of the Lit 2 upgrade, the lifecycle methods `hostConnected`, `hostDisconnected`, and `hostUpdated` will be called automatically.
 ## Available Callbacks
 
 ### SubscriberRegistryController

package/controllers/subscriber/subscriberControllers.js

@@ -4,6 +4,7 @@ export class SubscriberRegistryController {
 
 	constructor(host, callbacks, options) {
 		this._host = host;
+		host.addController(this);
 		this._callbacks = callbacks || {};
 		this._eventName = options && options.eventName;
 		this._subscribers = new Map();
@@ -60,6 +61,7 @@ export class EventSubscriberController {
 
 	constructor(host, callbacks, options) {
 		this._host = host;
+		host.addController(this);
 		this._callbacks = callbacks || {};
 		this._eventName = options && options.eventName;
 		this._controllerId = options && options.controllerId;
@@ -99,8 +101,10 @@ export class IdSubscriberController {
 
 	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._timeouts = new Set();
@@ -118,8 +122,11 @@ export class IdSubscriberController {
 		});
 	}
 
-	hostUpdated(changedProperties) {
-		if (!changedProperties.has(this._idPropertyName)) return;
+	hostUpdated() {
+		const propertyValue = this._host[this._idPropertyName];
+		if (propertyValue === this._idPropertyValue) return;
+
+		this._idPropertyValue = propertyValue;
 
 		if (this._registryObserver) this._registryObserver.disconnect();
 		this._registries.forEach(registry => {

package/custom-elements.json

@@ -9302,11 +9302,11 @@
       "properties": [
         {
           "name": "offIcon",
-          "type": "TemplateResult"
+          "type": "TemplateResult<1>"
         },
         {
           "name": "onIcon",
-          "type": "TemplateResult"
+          "type": "TemplateResult<1>"
         },
         {
           "name": "text",
@@ -9391,11 +9391,11 @@
       "properties": [
         {
           "name": "offIcon",
-          "type": "TemplateResult"
+          "type": "TemplateResult<1>"
         },
         {
           "name": "onIcon",
-          "type": "TemplateResult"
+          "type": "TemplateResult<1>"
         },
         {
           "name": "text",

package/mixins/arrow-keys-mixin.md

@@ -12,14 +12,14 @@ If the elements are known up-front and are in the element's local DOM scope, sim
 import { ArrowKeysMixin } from '@brightspace-ui/core/mixins/arrow-keys-mixin.js';
 class MyElement extends ArrowKeysMixin(LitElement) {
   render() {
-    return html`
+    return this.arrowKeysContainer(html`
       <div>
         ...
         <a href="..." class="d2l-arrowkeys-focusable">link 1</a>
         <a href="..." class="d2l-arrowkeys-focusable">link 2</a>
         ...
       </div>
-    `;
+    `);
   }
 }
 customElements.define('my-element', MyElement);
@@ -31,14 +31,14 @@ If the elements are not known up front, or the elements cannot be simply queried
 import { ArrowKeysMixin } from '@brightspace-ui/core/mixins/arrow-keys-mixin.js';
 class MyElement extends ArrowKeysMixin(LitElement) {
   render() {
-    return html`
+    return this.arrowKeysContainer(html`
       <div>
         ...
         <a href="...">link 1</a>
         <a href="...">link 2</a>
         ...
       </div>
-    `;
+    `);
   }
   async arrowKeysFocusablesProvider() {
     return [ /* array containing focusable elements */]
@@ -51,4 +51,8 @@ customElements.define('my-element', MyElement);
 
 - `arrowKeysDirection` (String): Indicates which arrow keys are allowed (default is leftright)
 - `arrowKeysNoWrap` (Boolean): Whether focus should wrap from end-to-start and start-to-end
-- `arrowKeysBeforeFocus` (Function): Async callback invoked before focus us applied
+
+**Methods:**
+- `arrowKeysContainer(innerHtmlTemplate)`: Hooks up the event listener, to be used in your `render` function to wrap the focusable elements
+- `async arrowKeysFocusablesProvider()` (Array): Optional - Override to provide the focusable elements if necessary (see above)
+- `async arrowKeysOnBeforeFocus(elemToBeFocused)`: Optional - Override to provide an async callback invoked before focus is applied

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brightspace-ui/core",
-  "version": "1.242.2",
+  "version": "2.0.2",
   "description": "A collection of accessible, free, open-source web components for building Brightspace applications",
   "type": "module",
   "repository": "https://github.com/BrightspaceUI/core.git",
@@ -45,7 +45,7 @@
   "devDependencies": {
     "@babel/eslint-parser": "^7",
     "@brightspace-ui/stylelint-config": "^0.4",
-    "@open-wc/testing": "^2",
+    "@open-wc/testing": "^3",
     "@web/dev-server": "^0.1",
     "@web/test-runner": "^0.13",
     "@web/test-runner-playwright": "^0.8",
@@ -70,8 +70,8 @@
     "focus-visible": "^5",
     "ifrau": "^0.39",
     "intl-messageformat": "^7",
-    "lit-element": "^2",
-    "lit-html": "^1",
+    "lit-element": "^3",
+    "lit-html": "^2",
     "prismjs": "^1",
     "resize-observer-polyfill": "^1"
   }