@vaadin/message-list 23.2.2 → 23.3.0-alpha2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/message-list",
-  "version": "23.2.2",
+  "version": "23.3.0-alpha2",
   "publishConfig": {
     "access": "public"
   },
@@ -38,11 +38,11 @@
   ],
   "dependencies": {
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/avatar": "~23.2.2",
-    "@vaadin/component-base": "~23.2.2",
-    "@vaadin/vaadin-lumo-styles": "~23.2.2",
-    "@vaadin/vaadin-material-styles": "~23.2.2",
-    "@vaadin/vaadin-themable-mixin": "~23.2.2"
+    "@vaadin/avatar": "23.3.0-alpha2",
+    "@vaadin/component-base": "23.3.0-alpha2",
+    "@vaadin/vaadin-lumo-styles": "23.3.0-alpha2",
+    "@vaadin/vaadin-material-styles": "23.3.0-alpha2",
+    "@vaadin/vaadin-themable-mixin": "23.3.0-alpha2"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
@@ -53,5 +53,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "a98818979098f4542ce557a58858fb6dad910a25"
+  "gitHead": "ae61027c62ffa7f7d70cfc50e43f333addfc74b6"
 }

package/src/vaadin-message-list.d.ts

@@ -4,6 +4,7 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
+import { KeyboardDirectionMixin } from '@vaadin/component-base/src/keyboard-direction-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
 export interface MessageListItem {
@@ -43,7 +44,7 @@ export interface MessageListItem {
  *
  * See [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.
  */
-declare class MessageList extends ThemableMixin(ElementMixin(HTMLElement)) {
+declare class MessageList extends KeyboardDirectionMixin(ThemableMixin(ElementMixin(HTMLElement))) {
   /**
    * An array of objects which will be rendered as messages.
    * The message objects can have the following properties:

package/src/vaadin-message-list.js

@@ -7,6 +7,7 @@ import '@polymer/polymer/lib/elements/dom-repeat.js';
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
 import { microTask } from '@vaadin/component-base/src/async.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
+import { KeyboardDirectionMixin } from '@vaadin/component-base/src/keyboard-direction-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 import { Message } from './vaadin-message.js';
 
@@ -40,8 +41,9 @@ import { Message } from './vaadin-message.js';
  * @extends HTMLElement
  * @mixes ThemableMixin
  * @mixes ElementMixin
+ * @mixes KeyboardDirectionMixin
  */
-class MessageList extends ElementMixin(ThemableMixin(PolymerElement)) {
+class MessageList extends KeyboardDirectionMixin(ElementMixin(ThemableMixin(PolymerElement))) {
   static get is() {
     return 'vaadin-message-list';
   }
@@ -108,9 +110,18 @@ class MessageList extends ElementMixin(ThemableMixin(PolymerElement)) {
     // Make screen readers announce new messages
     this.setAttribute('aria-relevant', 'additions');
     this.setAttribute('role', 'log');
+  }
 
-    // Keyboard navi
-    this.addEventListener('keydown', (e) => this._onKeydown(e));
+  /**
+   * Override method inherited from `KeyboardDirectionMixin`
+   * to use the list of message elements as items.
+   *
+   * @return {Element[]}
+   * @protected
+   * @override
+   */
+  _getItems() {
+    return this._messages;
   }
 
   /** @protected */
@@ -140,54 +151,6 @@ class MessageList extends ElementMixin(ThemableMixin(PolymerElement)) {
     }
   }
 
-  /**
-   * @param {!KeyboardEvent} event
-   * @protected
-   */
-  _onKeydown(event) {
-    if (event.metaKey || event.ctrlKey) {
-      return;
-    }
-
-    // Get index of the item that was focused when event happened
-    const target = event.composedPath()[0];
-    let currentIndex = this._messages.indexOf(target);
-
-    switch (event.key) {
-      case 'ArrowUp':
-        currentIndex -= 1;
-        break;
-      case 'ArrowDown':
-        currentIndex += 1;
-        break;
-      case 'Home':
-        currentIndex = 0;
-        break;
-      case 'End':
-        currentIndex = this._messages.length - 1;
-        break;
-      default:
-        return; // Nothing to do
-    }
-    if (currentIndex < 0) {
-      currentIndex = this._messages.length - 1;
-    }
-    if (currentIndex > this._messages.length - 1) {
-      currentIndex = 0;
-    }
-    this._focus(currentIndex);
-    event.preventDefault();
-  }
-
-  /**
-   * @param {number} idx
-   * @protected
-   */
-  _focus(idx) {
-    const target = this._messages[idx];
-    target.focus();
-  }
-
   /** @private */
   _handleFocusEvent(e) {
     const target = e.composedPath().find((node) => node instanceof Message);

package/web-types.json

@@ -1,14 +1,14 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/message-list",
-  "version": "23.2.2",
+  "version": "23.3.0-alpha2",
   "description-markup": "markdown",
   "contributions": {
     "html": {
       "elements": [
         {
           "name": "vaadin-message",
-          "description": "`<vaadin-message>` is a Web Component for showing a single message with an author, message and time.\n\n```html\n<vaadin-message time=\"2021-01-28 10:43\"\n    user-name = \"Bob Ross\"\n    user-abbr = \"BR\"\n    user-img = \"/static/img/avatar.jpg\">There is no real ending. It's just the place where you stop the story.</vaadin-message>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n----------|----------------\n`avatar`  | The author's avatar\n`name`    | Author's name\n`time`    | When the message was posted\n`content` | The message itself as a slotted content\n\nThe following state attributes are available for styling:\n\nAttribute    | Description\n-------------|-------------\n`focus-ring` | Set when the message is focused using the keyboard.\n`focused`    | Set when the message is focused.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.\n\n### Internal components\n\nIn addition to `<vaadin-message>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-message-avatar>` - has the same API as [`<vaadin-avatar>`](https://cdn.vaadin.com/vaadin-web-components/23.2.2/#/elements/vaadin-avatar).",
+          "description": "`<vaadin-message>` is a Web Component for showing a single message with an author, message and time.\n\n```html\n<vaadin-message time=\"2021-01-28 10:43\"\n    user-name = \"Bob Ross\"\n    user-abbr = \"BR\"\n    user-img = \"/static/img/avatar.jpg\">There is no real ending. It's just the place where you stop the story.</vaadin-message>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n----------|----------------\n`avatar`  | The author's avatar\n`name`    | Author's name\n`time`    | When the message was posted\n`content` | The message itself as a slotted content\n\nThe following state attributes are available for styling:\n\nAttribute    | Description\n-------------|-------------\n`focus-ring` | Set when the message is focused using the keyboard.\n`focused`    | Set when the message is focused.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.\n\n### Internal components\n\nIn addition to `<vaadin-message>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-message-avatar>` - has the same API as [`<vaadin-avatar>`](https://cdn.vaadin.com/vaadin-web-components/23.3.0-alpha2/#/elements/vaadin-avatar).",
           "attributes": [
             {
               "name": "time",

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/message-list",
-  "version": "23.2.2",
+  "version": "23.3.0-alpha2",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {
@@ -16,7 +16,7 @@
       "elements": [
         {
           "name": "vaadin-message",
-          "description": "`<vaadin-message>` is a Web Component for showing a single message with an author, message and time.\n\n```html\n<vaadin-message time=\"2021-01-28 10:43\"\n    user-name = \"Bob Ross\"\n    user-abbr = \"BR\"\n    user-img = \"/static/img/avatar.jpg\">There is no real ending. It's just the place where you stop the story.</vaadin-message>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n----------|----------------\n`avatar`  | The author's avatar\n`name`    | Author's name\n`time`    | When the message was posted\n`content` | The message itself as a slotted content\n\nThe following state attributes are available for styling:\n\nAttribute    | Description\n-------------|-------------\n`focus-ring` | Set when the message is focused using the keyboard.\n`focused`    | Set when the message is focused.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.\n\n### Internal components\n\nIn addition to `<vaadin-message>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-message-avatar>` - has the same API as [`<vaadin-avatar>`](https://cdn.vaadin.com/vaadin-web-components/23.2.2/#/elements/vaadin-avatar).",
+          "description": "`<vaadin-message>` is a Web Component for showing a single message with an author, message and time.\n\n```html\n<vaadin-message time=\"2021-01-28 10:43\"\n    user-name = \"Bob Ross\"\n    user-abbr = \"BR\"\n    user-img = \"/static/img/avatar.jpg\">There is no real ending. It's just the place where you stop the story.</vaadin-message>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n----------|----------------\n`avatar`  | The author's avatar\n`name`    | Author's name\n`time`    | When the message was posted\n`content` | The message itself as a slotted content\n\nThe following state attributes are available for styling:\n\nAttribute    | Description\n-------------|-------------\n`focus-ring` | Set when the message is focused using the keyboard.\n`focused`    | Set when the message is focused.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.\n\n### Internal components\n\nIn addition to `<vaadin-message>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-message-avatar>` - has the same API as [`<vaadin-avatar>`](https://cdn.vaadin.com/vaadin-web-components/23.3.0-alpha2/#/elements/vaadin-avatar).",
           "extension": true,
           "attributes": [
             {