@vaadin/field-base 22.0.1 → 23.0.0-alpha3

package/LICENSE

@@ -175,7 +175,7 @@
 
    END OF TERMS AND CONDITIONS
 
-   Copyright 2021 Vaadin Ltd.
+   Copyright 2021 - 2022 Vaadin Ltd..
 
    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/field-base",
-  "version": "22.0.1",
+  "version": "23.0.0-alpha3",
   "publishConfig": {
     "access": "public"
   },
@@ -31,7 +31,7 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/component-base": "^22.0.1",
+    "@vaadin/component-base": "23.0.0-alpha3",
     "lit": "^2.0.0"
   },
   "devDependencies": {
@@ -39,5 +39,5 @@
     "@vaadin/testing-helpers": "^0.3.2",
     "sinon": "^9.2.1"
   },
-  "gitHead": "2b0a2bff0369d6020f7cc33ad35506aa2d1f6f68"
+  "gitHead": "490037919a9e054cc002c1b3be0c94a1603e1a44"
 }

package/src/checked-mixin.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 Vaadin Ltd.
+ * Copyright (c) 2021 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { Constructor } from '@open-wc/dedupe-mixin';

package/src/checked-mixin.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 Vaadin Ltd.
+ * Copyright (c) 2021 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { dedupingMixin } from '@polymer/polymer/lib/utils/mixin.js';

package/src/delegate-focus-mixin.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 Vaadin Ltd.
+ * Copyright (c) 2021 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { Constructor } from '@open-wc/dedupe-mixin';

package/src/delegate-focus-mixin.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 Vaadin Ltd.
+ * Copyright (c) 2021 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { dedupingMixin } from '@polymer/polymer/lib/utils/mixin.js';

package/src/delegate-state-mixin.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 Vaadin Ltd.
+ * Copyright (c) 2021 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { Constructor } from '@open-wc/dedupe-mixin';

package/src/delegate-state-mixin.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 Vaadin Ltd.
+ * Copyright (c) 2021 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { dedupingMixin } from '@polymer/polymer/lib/utils/mixin.js';

package/src/field-aria-controller.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 Vaadin Ltd.
+ * Copyright (c) 2021 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 

package/src/field-aria-controller.js

@@ -1,8 +1,9 @@
 /**
  * @license
- * Copyright (c) 2021 Vaadin Ltd.
+ * Copyright (c) 2021 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
+import { addValueToAttribute, removeValueFromAttribute } from './utils.js';
 
 /**
  * A controller for managing ARIA attributes for a field element:
@@ -160,16 +161,12 @@ export class FieldAriaController {
       return;
     }
 
-    const value = this.__target.getAttribute(attr);
-    const ids = value ? new Set(value.split(' ')) : new Set();
-
     if (oldId) {
-      ids.delete(oldId);
+      removeValueFromAttribute(this.__target, attr, oldId);
     }
+
     if (newId) {
-      ids.add(newId);
+      addValueToAttribute(this.__target, attr, newId);
     }
-
-    this.__target.setAttribute(attr, [...ids].join(' '));
   }
 }

package/src/field-mixin.d.ts

@@ -1,10 +1,11 @@
 /**
  * @license
- * Copyright (c) 2021 Vaadin Ltd.
+ * Copyright (c) 2021 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { Constructor } from '@open-wc/dedupe-mixin';
 import { ControllerMixinClass } from '@vaadin/component-base/src/controller-mixin.js';
+import { SlotMixinClass } from '@vaadin/component-base/src/slot-mixin.js';
 import { LabelMixinClass } from './label-mixin.js';
 import { ValidateMixinClass } from './validate-mixin.js';
 
@@ -17,6 +18,7 @@ export declare function FieldMixin<T extends Constructor<HTMLElement>>(
   Constructor<ControllerMixinClass> &
   Constructor<FieldMixinClass> &
   Constructor<LabelMixinClass> &
+  Constructor<SlotMixinClass> &
   Constructor<ValidateMixinClass>;
 
 export declare class FieldMixinClass {

package/src/field-mixin.js

@@ -1,13 +1,12 @@
 /**
  * @license
- * Copyright (c) 2021 Vaadin Ltd.
+ * Copyright (c) 2021 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { FlattenedNodesObserver } from '@polymer/polymer/lib/utils/flattened-nodes-observer.js';
-import { animationFrame } from '@vaadin/component-base/src/async.js';
 import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
-import { Debouncer } from '@vaadin/component-base/src/debounce.js';
+import { SlotMixin } from '@vaadin/component-base/src/slot-mixin.js';
 import { FieldAriaController } from './field-aria-controller.js';
+import { HelperController } from './helper-controller.js';
 import { LabelMixin } from './label-mixin.js';
 import { ValidateMixin } from './validate-mixin.js';
 
@@ -17,10 +16,11 @@ import { ValidateMixin } from './validate-mixin.js';
  * @polymerMixin
  * @mixes ControllerMixin
  * @mixes LabelMixin
+ * @mixes SlotMixin
  * @mixes ValidateMixin
  */
 export const FieldMixin = (superclass) =>
-  class FieldMixinClass extends ValidateMixin(LabelMixin(ControllerMixin(superclass))) {
+  class FieldMixinClass extends ValidateMixin(LabelMixin(ControllerMixin(SlotMixin(superclass)))) {
     static get properties() {
       return {
         /**
@@ -68,13 +68,7 @@ export const FieldMixin = (superclass) =>
     }
 
     static get observers() {
-      return [
-        '__observeOffsetHeight(errorMessage, invalid, label, helperText)',
-        '_updateErrorMessage(invalid, errorMessage)',
-        '_invalidChanged(invalid)',
-        '_requiredChanged(required)',
-        '_helperIdChanged(_helperId)'
-      ];
+      return ['_updateErrorMessage(invalid, errorMessage)', '_invalidChanged(invalid)', '_requiredChanged(required)'];
     }
 
     /**
@@ -85,12 +79,17 @@ export const FieldMixin = (superclass) =>
       return this._getDirectSlotChild('error-message');
     }
 
+    /** @protected */
+    get _helperId() {
+      return this._helperController.helperId;
+    }
+
     /**
      * @protected
      * @return {HTMLElement}
      */
     get _helperNode() {
-      return this._getDirectSlotChild('helper');
+      return this._helperController.node;
     }
 
     constructor() {
@@ -99,12 +98,22 @@ export const FieldMixin = (superclass) =>
       // Ensure every instance has unique ID
       const uniqueId = (FieldMixinClass._uniqueFieldId = 1 + FieldMixinClass._uniqueFieldId || 0);
       this._errorId = `error-${this.localName}-${uniqueId}`;
-      this._helperId = `helper-${this.localName}-${uniqueId}`;
-
-      // Save generated ID to restore later
-      this.__savedHelperId = this._helperId;
 
       this._fieldAriaController = new FieldAriaController(this);
+      this._helperController = new HelperController(this);
+
+      this.addController(this._fieldAriaController);
+      this.addController(this._helperController);
+
+      this._labelController.addEventListener('label-changed', (event) => {
+        const { hasLabel, node } = event.detail;
+        this.__labelChanged(hasLabel, node);
+      });
+
+      this._helperController.addEventListener('helper-changed', (event) => {
+        const { hasHelper, node } = event.detail;
+        this.__helperChanged(hasHelper, node);
+      });
     }
 
     /** @protected */
@@ -119,54 +128,6 @@ export const FieldMixin = (superclass) =>
 
         this._updateErrorMessage(this.invalid, this.errorMessage);
       }
-
-      const helper = this._helperNode;
-      if (helper) {
-        this.__applyCustomHelper(helper);
-      }
-
-      this.__helperSlot = this.shadowRoot.querySelector('[name="helper"]');
-
-      this.__helperSlotObserver = new FlattenedNodesObserver(this.__helperSlot, (info) => {
-        const helper = this._currentHelper;
-
-        const newHelper = info.addedNodes.find((node) => node !== helper);
-        const oldHelper = info.removedNodes.find((node) => node === helper);
-
-        if (newHelper) {
-          // Custom helper is added, remove the previous one.
-          if (helper && helper.isConnected) {
-            this.removeChild(helper);
-          }
-
-          this.__applyCustomHelper(newHelper);
-
-          this.__helperIdObserver = new MutationObserver((mutations) => {
-            mutations.forEach((mutation) => {
-              // only handle helper nodes
-              if (
-                mutation.type === 'attributes' &&
-                mutation.attributeName === 'id' &&
-                mutation.target === this._currentHelper &&
-                mutation.target.id !== this.__savedHelperId
-              ) {
-                this.__updateHelperId(mutation.target);
-              }
-            });
-          });
-
-          this.__helperIdObserver.observe(newHelper, { attributes: true });
-        } else if (oldHelper) {
-          // The observer does not exist when default helper is removed.
-          if (this.__helperIdObserver) {
-            this.__helperIdObserver.disconnect();
-          }
-
-          this.__applyDefaultHelper(this.helperText);
-        }
-      });
-
-      this.addController(this._fieldAriaController);
     }
 
     /** @private */
@@ -178,107 +139,21 @@ export const FieldMixin = (superclass) =>
       }
     }
 
-    /**
-     * @param {HTMLElement} helper
-     * @private
-     */
-    __applyCustomHelper(helper) {
-      this.__updateHelperId(helper);
-      this._currentHelper = helper;
-      this.__toggleHasHelper(helper.children.length > 0 || this.__isNotEmpty(helper.textContent));
-    }
-
-    /**
-     * @param {string} helperText
-     * @private
-     */
-    __isNotEmpty(helperText) {
-      return helperText && helperText.trim() !== '';
-    }
-
     /** @private */
-    __attachDefaultHelper() {
-      let helper = this.__defaultHelper;
-
-      if (!helper) {
-        helper = document.createElement('div');
-        helper.setAttribute('slot', 'helper');
-        this.__defaultHelper = helper;
-      }
-
-      helper.id = this.__savedHelperId;
-      this._helperId = helper.id;
-      this.appendChild(helper);
-      this._currentHelper = helper;
-
-      return helper;
-    }
-
-    /**
-     * @param {string} helperText
-     * @private
-     */
-    __applyDefaultHelper(helperText) {
-      let helper = this._helperNode;
-
-      const hasHelperText = this.__isNotEmpty(helperText);
-      if (hasHelperText && !helper) {
-        // Create helper lazily
-        helper = this.__attachDefaultHelper();
-      }
-
-      // Only set text content for default helper
-      if (helper && helper === this.__defaultHelper) {
-        helper.textContent = helperText;
-      }
-
-      this.__toggleHasHelper(hasHelperText);
-    }
-
-    /**
-     * @param {boolean} hasHelper
-     * @private
-     */
-    __toggleHasHelper(hasHelper) {
-      this.toggleAttribute('has-helper', hasHelper);
-    }
-
-    /**
-     * Dispatch an event if a specific size measurement property has changed.
-     * Supporting multiple properties here is needed for `vaadin-text-area`.
-     * @protected
-     */
-    _dispatchIronResizeEventIfNeeded(prop, value) {
-      const oldSize = '__old' + prop;
-      if (this[oldSize] !== undefined && this[oldSize] !== value) {
-        this.dispatchEvent(new CustomEvent('iron-resize', { bubbles: true, composed: true }));
+    __helperChanged(hasHelper, helperNode) {
+      if (hasHelper) {
+        this._fieldAriaController.setHelperId(helperNode.id);
+      } else {
+        this._fieldAriaController.setHelperId(null);
       }
-
-      this[oldSize] = value;
     }
 
     /** @private */
-    __observeOffsetHeight() {
-      this.__observeOffsetHeightDebouncer = Debouncer.debounce(
-        this.__observeOffsetHeightDebouncer,
-        animationFrame,
-        () => {
-          this._dispatchIronResizeEventIfNeeded('Height', this.offsetHeight);
-        }
-      );
-    }
-
-    /**
-     * @protected
-     * @override
-     */
-    _toggleHasLabelAttribute() {
-      super._toggleHasLabelAttribute();
-
+    __labelChanged(hasLabel, labelNode) {
       // Label ID should be only added when the label content is present.
       // Otherwise, it may conflict with an `aria-label` attribute possibly added by the user.
-      if (this.hasAttribute('has-label')) {
-        this._fieldAriaController.setLabelId(this._labelId);
+      if (hasLabel) {
+        this._fieldAriaController.setLabelId(labelNode.id);
       } else {
         this._fieldAriaController.setLabelId(null);
       }
@@ -313,29 +188,12 @@ export const FieldMixin = (superclass) =>
       }
     }
 
-    /**
-     * @param {HTMLElement} customHelper
-     * @private
-     */
-    __updateHelperId(customHelper) {
-      let newId;
-
-      if (customHelper.id) {
-        newId = customHelper.id;
-      } else {
-        newId = this.__savedHelperId;
-        customHelper.id = newId;
-      }
-
-      this._helperId = newId;
-    }
-
     /**
      * @param {string} helperText
      * @protected
      */
     _helperTextChanged(helperText) {
-      this.__applyDefaultHelper(helperText);
+      this._helperController.setHelperText(helperText);
     }
 
     /**
@@ -356,25 +214,23 @@ export const FieldMixin = (superclass) =>
       this._fieldAriaController.setRequired(required);
     }
 
-    /**
-     * @param {string} helperId
-     * @protected
-     */
-    _helperIdChanged(helperId) {
-      this._fieldAriaController.setHelperId(helperId);
-    }
-
     /**
      * @param {boolean} required
      * @protected
      */
     _invalidChanged(invalid) {
-      // Error message ID needs to be dynamically added / removed based on the validity
-      // Otherwise assistive technologies would announce the error, even if we hide it.
-      if (invalid) {
-        this._fieldAriaController.setErrorId(this._errorId);
-      } else {
-        this._fieldAriaController.setErrorId(null);
-      }
+      // This timeout is needed to prevent NVDA from announcing the error message twice:
+      // 1. Once adding the `[role=alert]` attribute by the `_updateErrorMessage` method (OK).
+      // 2. Once linking the error ID with the ARIA target here (unwanted).
+      // Related issue: https://github.com/vaadin/web-components/issues/3061.
+      setTimeout(() => {
+        // Error message ID needs to be dynamically added / removed based on the validity
+        // Otherwise assistive technologies would announce the error, even if we hide it.
+        if (invalid) {
+          this._fieldAriaController.setErrorId(this._errorId);
+        } else {
+          this._fieldAriaController.setErrorId(null);
+        }
+      });
     }
   };

package/src/helper-controller.d.ts

@@ -0,0 +1,23 @@
+/**
+ * @license
+ * Copyright (c) 2021 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { SlotController } from '@vaadin/component-base/src/slot-controller.js';
+
+/**
+ * A controller that manages the helper node content.
+ */
+export class HelperController extends SlotController {
+  /**
+   * String used for the helper text.
+   */
+  helperText: string | null | undefined;
+
+  helperId: string;
+
+  /**
+   * Set helper text based on corresponding host property.
+   */
+  setHelperText(helperText: string): void;
+}

package/src/helper-controller.js

@@ -0,0 +1,184 @@
+/**
+ * @license
+ * Copyright (c) 2021 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { SlotController } from '@vaadin/component-base/src/slot-controller.js';
+
+/**
+ * A controller that manages the helper node content.
+ */
+export class HelperController extends SlotController {
+  constructor(host) {
+    // Do not provide slot factory, as only create helper lazily.
+    super(host, 'helper');
+  }
+
+  get helperId() {
+    return this.node && this.node.id;
+  }
+
+  /**
+   * Override to initialize the newly added custom helper.
+   *
+   * @param {Node} helperNode
+   * @protected
+   * @override
+   */
+  initCustomNode(helperNode) {
+    this.__updateHelperId(helperNode);
+
+    this.__observeHelper(helperNode);
+
+    const hasHelper = this.__hasHelper(helperNode);
+    this.__toggleHasHelper(hasHelper);
+  }
+
+  /**
+   * Override to cleanup helper node when it's removed.
+   *
+   * @param {Node} _node
+   * @protected
+   * @override
+   */
+  teardownNode(_node) {
+    // The observer does not exist when the default helper is removed.
+    if (this.__helperIdObserver) {
+      this.__helperIdObserver.disconnect();
+    }
+
+    const helperNode = this.getSlotChild();
+
+    // Custom node is added to helper slot
+    if (helperNode && helperNode !== this.defaultNode) {
+      const hasHelper = this.__hasHelper(helperNode);
+      this.__toggleHasHelper(hasHelper);
+    } else {
+      // Restore default helper if needed
+      this.__applyDefaultHelper(this.helperText, helperNode);
+    }
+  }
+
+  /**
+   * Set helper text based on corresponding host property.
+   * @param {string} helperText
+   */
+  setHelperText(helperText) {
+    this.helperText = helperText;
+
+    if (!this.node || this.node === this.defaultNode) {
+      this.__applyDefaultHelper(helperText, this.defaultNode);
+    }
+  }
+
+  /**
+   * @param {HTMLElement} helperNode
+   * @return {boolean}
+   * @private
+   */
+  __hasHelper(helperNode) {
+    if (!helperNode) {
+      return false;
+    }
+
+    return helperNode.children.length > 0 || this.__isNotEmpty(helperNode.textContent);
+  }
+
+  /**
+   * @param {string} helperText
+   * @private
+   */
+  __isNotEmpty(helperText) {
+    return helperText && helperText.trim() !== '';
+  }
+
+  /**
+   * @param {string} helperText
+   * @param {Node} helperNode
+   * @private
+   */
+  __applyDefaultHelper(helperText, helperNode) {
+    const hasHelperText = this.__isNotEmpty(helperText);
+
+    if (hasHelperText && !helperNode) {
+      // Set slot factory lazily to only create helper node when needed.
+      this.slotFactory = () => document.createElement('div');
+
+      helperNode = this.attachDefaultNode();
+
+      this.__updateHelperId(helperNode);
+      this.__observeHelper(helperNode);
+    }
+
+    if (helperNode) {
+      helperNode.textContent = helperText;
+    }
+
+    this.__toggleHasHelper(hasHelperText);
+  }
+
+  /**
+   * @param {HTMLElement} helperNode
+   * @private
+   */
+  __observeHelper(helperNode) {
+    this.__helperObserver = new MutationObserver((mutations) => {
+      mutations.forEach((mutation) => {
+        const target = mutation.target;
+
+        // Ensure the mutation target is the currently connected helper
+        // to ignore async mutations dispatched for removed element.
+        const isHelperMutation = target === this.node;
+
+        if (mutation.type === 'attributes') {
+          // We use attributeFilter to only observe ID mutation,
+          // no need to check for attribute name separately.
+          if (isHelperMutation && target.id !== this.defaultId) {
+            this.__updateHelperId(target);
+          }
+        } else if (isHelperMutation || target.parentElement === this.node) {
+          // Update has-helper when textContent changes
+          const hasHelper = this.__hasHelper(this.node);
+          this.__toggleHasHelper(hasHelper);
+        }
+      });
+    });
+
+    // Observe changes to helper ID attribute, text content and children.
+    this.__helperObserver.observe(helperNode, {
+      attributes: true,
+      attributeFilter: ['id'],
+      childList: true,
+      subtree: true,
+      characterData: true
+    });
+  }
+
+  /**
+   * @param {boolean} hasHelper
+   * @private
+   */
+  __toggleHasHelper(hasHelper) {
+    this.host.toggleAttribute('has-helper', hasHelper);
+
+    // Make it possible for other mixins to observe change
+    this.dispatchEvent(
+      new CustomEvent('helper-changed', {
+        detail: {
+          hasHelper,
+          node: this.node
+        }
+      })
+    );
+  }
+
+  /**
+   * @param {HTMLElement} helperNode
+   * @private
+   */
+  __updateHelperId(helperNode) {
+    if (!helperNode.id) {
+      helperNode.id = this.defaultId;
+    }
+  }
+}