@vaadin/message-list 22.0.0-beta1 → 22.0.1

package/README.md

@@ -2,7 +2,7 @@
 
 A web component that allows you to show a list of messages, for example, a chat log.
 
-[Live Demo ↗](https://vaadin.com/docs/latest/ds/components/message-list)
+[Documentation + Live Demo ↗](https://vaadin.com/docs/latest/ds/components/message-list)
 
 ```html
 <vaadin-message-list></vaadin-message-list>
@@ -23,7 +23,7 @@ A web component that allows you to show a list of messages, for example, a chat
 Install the component:
 
 ```sh
-npm i @vaadin/message-list --save
+npm i @vaadin/message-list
 ```
 
 Once installed, import the component in your application:
@@ -34,9 +34,8 @@ import '@vaadin/message-list';
 
 ## Themes
 
-Vaadin components come with two built-in [themes](https://vaadin.com/docs/latest/ds/customization/using-themes),
-Lumo and Material. The [main entrypoint](https://github.com/vaadin/web-components/blob/master/packages/message-list/vaadin-message-list.js)
-of the package uses the Lumo theme.
+Vaadin components come with two built-in [themes](https://vaadin.com/docs/latest/ds/customization/using-themes), Lumo and Material.
+The [main entrypoint](https://github.com/vaadin/web-components/blob/master/packages/message-list/vaadin-message-list.js) of the package uses the Lumo theme.
 
 To use the Material theme, import the component from the `theme/material` folder:
 
@@ -56,9 +55,13 @@ Finally, you can import the un-themed component from the `src` folder to get a m
 import '@vaadin/message-list/src/vaadin-message-list.js';
 ```
 
+## Contributing
+
+Read the [contributing guide](https://vaadin.com/docs/latest/guide/contributing/overview) to learn about our development process, how to propose bugfixes and improvements, and how to test your changes to Vaadin components.
+
 ## License
 
 Apache License 2.0
 
-Vaadin collects development time usage statistics to improve this product.
+Vaadin collects usage statistics at development time to improve this product.
 For details and to opt-out, see https://github.com/vaadin/vaadin-usage-statistics.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/message-list",
-  "version": "22.0.0-beta1",
+  "version": "22.0.1",
   "publishConfig": {
     "access": "public"
   },
@@ -35,16 +35,16 @@
   ],
   "dependencies": {
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/avatar": "22.0.0-beta1",
-    "@vaadin/component-base": "22.0.0-beta1",
-    "@vaadin/vaadin-lumo-styles": "22.0.0-beta1",
-    "@vaadin/vaadin-material-styles": "22.0.0-beta1",
-    "@vaadin/vaadin-themable-mixin": "22.0.0-beta1"
+    "@vaadin/avatar": "^22.0.1",
+    "@vaadin/component-base": "^22.0.1",
+    "@vaadin/vaadin-lumo-styles": "^22.0.1",
+    "@vaadin/vaadin-material-styles": "^22.0.1",
+    "@vaadin/vaadin-themable-mixin": "^22.0.1"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/testing-helpers": "^0.3.0",
+    "@vaadin/testing-helpers": "^0.3.2",
     "sinon": "^9.2.4"
   },
-  "gitHead": "4cf8a9d0504994200c610e44b3676114fef49c1e"
+  "gitHead": "2b0a2bff0369d6020f7cc33ad35506aa2d1f6f68"
 }

package/src/vaadin-message-avatar.js

@@ -4,7 +4,7 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { Avatar } from '@vaadin/avatar/src/vaadin-avatar.js';
-import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
+import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
 registerStyles(
   'vaadin-message-avatar',

package/src/vaadin-message-list.js

@@ -3,12 +3,12 @@
  * Copyright (c) 2021 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
 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 { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-import './vaadin-message.js';
+import { Message } from './vaadin-message.js';
 
 /**
  * `<vaadin-message-list>` is a Web Component for showing an ordered list of messages. The messages are rendered as <vaadin-message>
@@ -95,7 +95,7 @@ class MessageList extends ElementMixin(ThemableMixin(PolymerElement)) {
             user-color-index="[[item.userColorIndex]]"
             theme$="[[item.theme]]"
             role="listitem"
-            on-focus="_handleFocusEvent"
+            on-focusin="_handleFocusEvent"
             >[[item.text]]</vaadin-message
           >
         </template>
@@ -188,11 +188,10 @@ class MessageList extends ElementMixin(ThemableMixin(PolymerElement)) {
   }
 
   _handleFocusEvent(e) {
-    const target = e
-      .composedPath()
-      .filter((elem) => elem.nodeType === Node.ELEMENT_NODE && elem.tagName.toLowerCase() === 'vaadin-message')[0];
+    const target = e.composedPath().find((node) => node instanceof Message);
     this._setTabIndexesByMessage(target);
   }
+
   /**
    * @param {number} idx
    * @protected

package/src/vaadin-message.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 { FocusMixin } from '@vaadin/component-base/src/focus-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
 /**
@@ -27,6 +28,13 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix
  * `time`    | When the message was posted
  * `content` | The message itself as a slotted content
  *
+ * The following state attributes are available for styling:
+ *
+ * Attribute    | Description
+ * -------------|-------------
+ * `focus-ring` | Set when the message is focused using the keyboard.
+ * `focused`    | Set when the message is focused.
+ *
  * See [Styling Components](https://vaadin.com/docs/latest/ds/customization/styling-components) documentation.
  *
  * ### Internal components
@@ -36,7 +44,7 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix
  *
  * - `<vaadin-message-avatar>` - has the same API as [`<vaadin-avatar>`](#/elements/vaadin-avatar).
  */
-declare class Message extends ThemableMixin(ElementMixin(HTMLElement)) {
+declare class Message extends FocusMixin(ThemableMixin(ElementMixin(HTMLElement))) {
   /**
    * Time of sending the message. It is rendered as-is to the part='time' slot,
    * so the formatting is up to you.

package/src/vaadin-message.js

@@ -3,10 +3,11 @@
  * Copyright (c) 2021 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
+import './vaadin-message-avatar.js';
+import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
+import { FocusMixin } from '@vaadin/component-base/src/focus-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-import './vaadin-message-avatar.js';
 
 /**
  * `<vaadin-message>` is a Web Component for showing a single message with an author, message and time.
@@ -29,6 +30,13 @@ import './vaadin-message-avatar.js';
  * `time`    | When the message was posted
  * `content` | The message itself as a slotted content
  *
+ * The following state attributes are available for styling:
+ *
+ * Attribute    | Description
+ * -------------|-------------
+ * `focus-ring` | Set when the message is focused using the keyboard.
+ * `focused`    | Set when the message is focused.
+ *
  * See [Styling Components](https://vaadin.com/docs/latest/ds/customization/styling-components) documentation.
  *
  * ### Internal components
@@ -39,10 +47,11 @@ import './vaadin-message-avatar.js';
  * - `<vaadin-message-avatar>` - has the same API as [`<vaadin-avatar>`](#/elements/vaadin-avatar).
  *
  * @extends HTMLElement
+ * @mixes FocusMixin
  * @mixes ThemableMixin
  * @mixes ElementMixin
  */
-class Message extends ElementMixin(ThemableMixin(PolymerElement)) {
+class Message extends FocusMixin(ElementMixin(ThemableMixin(PolymerElement))) {
   static get properties() {
     return {
       /**
@@ -163,39 +172,6 @@ class Message extends ElementMixin(ThemableMixin(PolymerElement)) {
   static get is() {
     return 'vaadin-message';
   }
-
-  /** @protected */
-  ready() {
-    super.ready();
-
-    // Handle focus
-    this.addEventListener('focus', () => this._setFocused(true), true);
-    this.addEventListener('blur', () => this._setFocused(false), true);
-    this.addEventListener('mousedown', () => {
-      this._mousedown = true;
-      const mouseUpListener = () => {
-        this._mousedown = false;
-        document.removeEventListener('mouseup', mouseUpListener);
-      };
-      document.addEventListener('mouseup', mouseUpListener);
-    });
-  }
-
-  /**
-   * @param {boolean} focused
-   * @protected
-   */
-  _setFocused(focused) {
-    if (focused) {
-      this.setAttribute('focused', '');
-      if (!this._mousedown) {
-        this.setAttribute('focus-ring', '');
-      }
-    } else {
-      this.removeAttribute('focused');
-      this.removeAttribute('focus-ring');
-    }
-  }
 }
 
 customElements.define(Message.is, Message);

package/theme/lumo/vaadin-message-avatar-styles.js

@@ -1,5 +1,5 @@
-import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
 import '@vaadin/avatar/theme/lumo/vaadin-avatar-styles.js';
+import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
 registerStyles(
   'vaadin-message-avatar',

package/theme/lumo/vaadin-message-list-styles.js

@@ -1,8 +1,8 @@
-import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
 import '@vaadin/vaadin-lumo-styles/color.js';
 import '@vaadin/vaadin-lumo-styles/sizing.js';
 import '@vaadin/vaadin-lumo-styles/spacing.js';
 import '@vaadin/vaadin-lumo-styles/style.js';
 import './vaadin-message-styles.js';
+import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
 registerStyles('vaadin-message-list', css``, { moduleId: 'lumo-message-list' });

package/theme/lumo/vaadin-message-styles.js

@@ -1,10 +1,10 @@
-import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
 import '@vaadin/vaadin-lumo-styles/color.js';
 import '@vaadin/vaadin-lumo-styles/sizing.js';
 import '@vaadin/vaadin-lumo-styles/spacing.js';
 import '@vaadin/vaadin-lumo-styles/style.js';
 import '@vaadin/vaadin-lumo-styles/typography.js';
 import './vaadin-message-avatar-styles.js';
+import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
 registerStyles(
   'vaadin-message',

package/theme/material/vaadin-message-avatar-styles.js

@@ -1,5 +1,5 @@
-import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
 import '@vaadin/avatar/theme/material/vaadin-avatar-styles.js';
+import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
 registerStyles(
   'vaadin-message-avatar',

package/theme/material/vaadin-message-list-styles.js

@@ -1,7 +1,7 @@
-import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
 import '@vaadin/vaadin-material-styles/color.js';
 import '@vaadin/vaadin-material-styles/typography.js';
 import './vaadin-message-styles.js';
+import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
 registerStyles(
   'vaadin-message-list',

package/theme/material/vaadin-message-styles.js

@@ -1,7 +1,7 @@
-import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
 import '@vaadin/vaadin-material-styles/color.js';
 import '@vaadin/vaadin-material-styles/typography.js';
 import './vaadin-message-avatar-styles.js';
+import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
 registerStyles(
   'vaadin-message',