@vaadin/message-list 23.2.0 → 23.3.0-alpha1

package/package.json

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

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 */
@@ -118,6 +129,7 @@ class MessageList extends ElementMixin(ThemableMixin(PolymerElement)) {
     return Array.from(this.shadowRoot.querySelectorAll('vaadin-message'));
   }
 
+  /** @private */
   _itemsChanged(newVal, oldVal) {
     const focusedIndex = this._getIndexOfFocusableElement();
     if (newVal && newVal.length) {
@@ -132,60 +144,14 @@ class MessageList extends ElementMixin(ThemableMixin(PolymerElement)) {
     }
   }
 
+  /** @private */
   _scrollToLastMessage() {
     if (this.items.length > 0) {
       this.scrollTop = this.scrollHeight - this.clientHeight;
     }
   }
 
-  /**
-   * @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);
     this._setTabIndexesByMessage(target);
@@ -200,12 +166,14 @@ class MessageList extends ElementMixin(ThemableMixin(PolymerElement)) {
     this._setTabIndexesByMessage(message);
   }
 
+  /** @private */
   _setTabIndexesByMessage(message) {
     this._messages.forEach((e) => {
       e.tabIndex = e === message ? 0 : -1;
     });
   }
 
+  /** @private */
   _getIndexOfFocusableElement() {
     const index = this._messages.findIndex((e) => e.tabIndex === 0);
     return index !== -1 ? index : 0;

package/src/vaadin-message.d.ts

@@ -56,6 +56,7 @@ declare class Message extends FocusMixin(ThemableMixin(ElementMixin(HTMLElement)
    * It will be placed in the name part to indicate who has sent the message.
    * It is also used as a tooltip for the avatar.
    * Example: `message.userName = "Jessica Jacobs";`
+   * @attr {string} user-name
    */
   userName: string | null | undefined;
 
@@ -64,6 +65,7 @@ declare class Message extends FocusMixin(ThemableMixin(ElementMixin(HTMLElement)
    * The abbreviation will be passed on to avatar of the message.
    * If the user does not have an avatar picture set with `userImg`, `userAbbr` will be shown in the avatar.
    * Example: `message.userAbbr = "JJ";`
+   * @attr {string} user-abbr
    */
   userAbbr: string | null | undefined;
 
@@ -71,6 +73,7 @@ declare class Message extends FocusMixin(ThemableMixin(ElementMixin(HTMLElement)
    * An URL for a user image.
    * The image will be used in the avatar component to show who has sent the message.
    * Example: `message.userImg = "/static/img/avatar.jpg";`
+   * @attr {string} user-img
    */
   userImg: string | null | undefined;
 
@@ -92,6 +95,7 @@ declare class Message extends FocusMixin(ThemableMixin(ElementMixin(HTMLElement)
    * ```js
    * message.userColorIndex = 1;
    * ```
+   * @attr {number} user-color-index
    */
   userColorIndex: number | null | undefined;
 }

package/src/vaadin-message.js

@@ -67,6 +67,7 @@ class Message extends FocusMixin(ElementMixin(ThemableMixin(PolymerElement))) {
        * It will be placed in the name part to indicate who has sent the message.
        * It is also used as a tooltip for the avatar.
        * Example: `message.userName = "Jessica Jacobs";`
+       * @attr {string} user-name
        */
       userName: {
         type: String,
@@ -77,6 +78,7 @@ class Message extends FocusMixin(ElementMixin(ThemableMixin(PolymerElement))) {
        * The abbreviation will be passed on to avatar of the message.
        * If the user does not have an avatar picture set with `userImg`, `userAbbr` will be shown in the avatar.
        * Example: `message.userAbbr = "JJ";`
+       * @attr {string} user-abbr
        */
       userAbbr: {
         type: String,
@@ -86,6 +88,7 @@ class Message extends FocusMixin(ElementMixin(ThemableMixin(PolymerElement))) {
        * An URL for a user image.
        * The image will be used in the avatar component to show who has sent the message.
        * Example: `message.userImg = "/static/img/avatar.jpg";`
+       * @attr {string} user-img
        */
       userImg: {
         type: String,
@@ -109,6 +112,7 @@ class Message extends FocusMixin(ElementMixin(ThemableMixin(PolymerElement))) {
        * ```js
        * message.userColorIndex = 1;
        * ```
+       * @attr {number} user-color-index
        */
       userColorIndex: {
         type: Number,

package/web-types.json

@@ -1,14 +1,14 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/message-list",
-  "version": "23.2.0",
+  "version": "23.3.0-alpha1",
   "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.0/#/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-alpha1/#/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.0",
+  "version": "23.3.0-alpha1",
   "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.0/#/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-alpha1/#/elements/vaadin-avatar).",
           "extension": true,
           "attributes": [
             {