@brightspace-ui/core 1.235.2 → 1.236.1

package/custom-elements.json

@@ -408,6 +408,11 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "focusElementSelector",
+          "type": "string",
+          "default": "\"button\""
+        },
         {
           "name": "visibleOnAncestor",
           "type": "boolean",
@@ -502,6 +507,11 @@
           "description": "Disables the button",
           "type": "boolean",
           "default": "false"
+        },
+        {
+          "name": "focusElementSelector",
+          "type": "string",
+          "default": "\"button\""
         }
       ],
       "slots": [
@@ -565,6 +575,11 @@
           "description": "Disables the button",
           "type": "boolean",
           "default": "false"
+        },
+        {
+          "name": "focusElementSelector",
+          "type": "string",
+          "default": "\"button\""
         }
       ],
       "slots": [
@@ -979,6 +994,11 @@
           "description": "Subtle aesthetic on non-white backgrounds",
           "type": "boolean",
           "default": "false"
+        },
+        {
+          "name": "focusElementSelector",
+          "type": "string",
+          "default": "\"a\""
         }
       ],
       "slots": [
@@ -3137,6 +3157,11 @@
           "description": "Indicates if the filter is open",
           "type": "boolean",
           "default": "false"
+        },
+        {
+          "name": "focusElementSelector",
+          "type": "string",
+          "default": "\"d2l-dropdown-button-subtle\""
         }
       ],
       "events": [
@@ -3179,6 +3204,11 @@
           "description": "Whether the component should trap user focus.",
           "type": "boolean",
           "default": "false"
+        },
+        {
+          "name": "focusElementSelector",
+          "type": "string",
+          "default": "\".d2l-focus-trap-start\""
         }
       ],
       "events": [
@@ -3759,6 +3789,11 @@
           "type": "string",
           "default": "\"on\""
         },
+        {
+          "name": "focusElementSelector",
+          "type": "string",
+          "default": "\"input.d2l-input-checkbox\""
+        },
         {
           "name": "skeleton",
           "attribute": "skeleton",
@@ -3983,6 +4018,11 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "focusElementSelector",
+          "type": "string",
+          "default": "\"d2l-input-date\""
+        },
         {
           "name": "skeleton",
           "attribute": "skeleton",
@@ -4280,6 +4320,11 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "focusElementSelector",
+          "type": "string",
+          "default": "\"d2l-input-date-time\""
+        },
         {
           "name": "skeleton",
           "attribute": "skeleton",
@@ -4450,6 +4495,11 @@
           "type": "string",
           "default": "\"startOfDay\""
         },
+        {
+          "name": "focusElementSelector",
+          "type": "string",
+          "default": "\"d2l-input-date\""
+        },
         {
           "name": "labelledBy",
           "attribute": "labelled-by",
@@ -4616,6 +4666,11 @@
           "type": "string",
           "default": "\"\""
         },
+        {
+          "name": "focusElementSelector",
+          "type": "string",
+          "default": "\"d2l-input-text\""
+        },
         {
           "name": "labelledBy",
           "attribute": "labelled-by",
@@ -4955,6 +5010,11 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "focusElementSelector",
+          "type": "string",
+          "default": "\"d2l-input-text\""
+        },
         {
           "name": "labelledBy",
           "attribute": "labelled-by",
@@ -5153,6 +5213,11 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "focusElementSelector",
+          "type": "string",
+          "default": "\"d2l-input-number\""
+        },
         {
           "name": "labelledBy",
           "attribute": "labelled-by",
@@ -5290,6 +5355,11 @@
           "description": "Value of the input",
           "type": "string",
           "default": "\"\""
+        },
+        {
+          "name": "focusElementSelector",
+          "type": "string",
+          "default": "\"d2l-input-text\""
         }
       ],
       "events": [
@@ -5629,6 +5699,11 @@
           "type": "'text'|'email'|'number'|'password'|'search'|'tel'|'url'",
           "default": "\"text\""
         },
+        {
+          "name": "focusElementSelector",
+          "type": "string",
+          "default": "\".d2l-input\""
+        },
         {
           "name": "labelledBy",
           "attribute": "labelled-by",
@@ -5868,6 +5943,11 @@
           "type": "string",
           "default": "\"\""
         },
+        {
+          "name": "focusElementSelector",
+          "type": "string",
+          "default": "\"textarea\""
+        },
         {
           "name": "labelledBy",
           "attribute": "labelled-by",
@@ -6117,6 +6197,11 @@
           "type": "'five'|'ten'|'fifteen'|'twenty'|'thirty'|'sixty'",
           "default": "\"thirty\""
         },
+        {
+          "name": "focusElementSelector",
+          "type": "string",
+          "default": "\"d2l-input-time\""
+        },
         {
           "name": "skeleton",
           "attribute": "skeleton",
@@ -6277,6 +6362,11 @@
           "type": "'five'|'ten'|'fifteen'|'twenty'|'thirty'|'sixty'",
           "default": "\"thirty\""
         },
+        {
+          "name": "focusElementSelector",
+          "type": "string",
+          "default": "\".d2l-input\""
+        },
         {
           "name": "labelledBy",
           "attribute": "labelled-by",
@@ -6393,6 +6483,11 @@
           "description": "Whether to apply the \"small\" link style",
           "type": "boolean",
           "default": "false"
+        },
+        {
+          "name": "focusElementSelector",
+          "type": "string",
+          "default": "\".d2l-link\""
         }
       ],
       "slots": [
@@ -8518,6 +8613,11 @@
           "description": "REQUIRED: Text for the dropdown opener button",
           "type": "string"
         },
+        {
+          "name": "focusElementSelector",
+          "type": "string",
+          "default": "\"d2l-button-subtle\""
+        },
         {
           "name": "requiresSelection",
           "attribute": "requires-selection",
@@ -8751,6 +8851,11 @@
           "description": "Disables the button",
           "type": "boolean",
           "default": "false"
+        },
+        {
+          "name": "focusElementSelector",
+          "type": "string",
+          "default": "\"d2l-button-subtle\""
         }
       ],
       "events": [
@@ -8870,6 +8975,11 @@
         }
       ],
       "properties": [
+        {
+          "name": "focusElementSelector",
+          "type": "string",
+          "default": "\"d2l-button-subtle\""
+        },
         {
           "name": "selectionFor",
           "attribute": "selection-for",
@@ -8912,6 +9022,11 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "focusElementSelector",
+          "type": "string",
+          "default": "\"d2l-input-checkbox\""
+        },
         {
           "name": "selectionFor",
           "attribute": "selection-for",
@@ -9334,6 +9449,11 @@
           "description": "Determines where text should be positioned relative to the switch.",
           "type": "'start'|'end'|'hidden'",
           "default": "\"end\""
+        },
+        {
+          "name": "focusElementSelector",
+          "type": "string",
+          "default": "\".d2l-switch-container\""
         }
       ],
       "events": [
@@ -9423,6 +9543,11 @@
           "description": "Determines where text should be positioned relative to the switch.",
           "type": "'start'|'end'|'hidden'",
           "default": "\"end\""
+        },
+        {
+          "name": "focusElementSelector",
+          "type": "string",
+          "default": "\".d2l-switch-container\""
         }
       ],
       "events": [
@@ -9516,6 +9641,11 @@
           "description": "Whether sort direction is descending",
           "type": "boolean",
           "default": "false"
+        },
+        {
+          "name": "focusElementSelector",
+          "type": "string",
+          "default": "\"button\""
         }
       ],
       "slots": [

package/mixins/focus-mixin.js

@@ -0,0 +1,41 @@
+import { dedupeMixin } from '@open-wc/dedupe-mixin';
+
+export const FocusMixin = dedupeMixin(superclass => class extends superclass {
+
+	static focusElementSelector = null;
+
+	constructor() {
+		super();
+		this._focusOnFirstRender = false;
+	}
+
+	firstUpdated(changedProperties) {
+		super.firstUpdated(changedProperties);
+		if (this._focusOnFirstRender) {
+			this._focusOnFirstRender = false;
+			this.focus();
+		}
+	}
+
+	focus() {
+
+		const selector = this.constructor.focusElementSelector;
+		if (!selector) {
+			throw new Error(`FocusMixin: no static focusElementSelector provided for "${this.tagName}"`);
+		}
+
+		if (!this.hasUpdated) {
+			this._focusOnFirstRender = true;
+			return;
+		}
+
+		const elem = this.shadowRoot.querySelector(selector);
+		if (!elem) {
+			throw new Error(`FocusMixin: selector "${selector}" yielded no element for "${this.tagName}"`);
+		}
+
+		elem.focus();
+
+	}
+
+});

package/mixins/focus-mixin.md

@@ -0,0 +1,24 @@
+# FocusMixin
+
+The `FocusMixin` can be used to delegate focus to an element within a component's shadow root when its `focus()` method is called.
+
+If the component has yet to render, focus will automatically be applied after `firstUpdated`.
+
+## Usage
+
+Apply the mixin and set the static `focusElementSelector` to a CSS query selector which will match the element to which focus should be delegated.
+
+```js
+import { FocusMixin } from '@brightspace-ui/core/mixins/focus-mixin.js';
+
+class MyComponent extends FocusMixin(LitElement) {
+  
+  // delegate focus to the underlying input
+  static focusElementSelector = 'input';
+
+  render() {
+	  return html`<input type="text">`;
+  }
+
+}
+```

package/package.json

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