@lion/ui 0.23.0 → 0.25.0

package/components/form-core/src/FocusMixin.js

@@ -1,7 +1,6 @@
 import { dedupeMixin } from '@open-wc/dedupe-mixin';
-
 const windowWithOptionalPolyfill =
-  /** @type {Window & typeof globalThis & {applyFocusVisiblePolyfill?: function}} */ (window);
+  /** @type {Window & typeof globalThis & {applyFocusVisiblePolyfill?: function}} */ window;
 const polyfilledNodes = new WeakMap();
 
 /**
@@ -20,204 +19,203 @@ function applyFocusVisiblePolyfillWhenNeeded(node) {
  * @param {import('@open-wc/dedupe-mixin').Constructor<import('lit').LitElement>} superclass
  */
 // prettier-ignore
-const FocusMixinImplementation = /** @type {FocusMixin} */ (superclass =>
-  class FocusMixin extends superclass {
-    /** @type {any} */
-    static get properties() {
-      return {
-        focused: { type: Boolean, reflect: true },
-        focusedVisible: { type: Boolean, reflect: true, attribute: 'focused-visible' },
-        // eslint-disable-next-line lit/no-native-attributes
-        autofocus: { type: Boolean, reflect: true }, // Required in Lit to observe autofocus
-      };
-    }
-
-    /** @param {...any} args */
-    constructor(...args) {
-      super(...args);
-
-      /**
-       * Whether the focusable element within (`._focusableNode`) is focused.
-       * Reflects to attribute '[focused]' as a styling hook
-       * @type {boolean}
-       */
-      this.focused = false;
-
-      /**
-       * Whether the focusable element within (`._focusableNode`) matches ':focus-visible'
-       * Reflects to attribute '[focused-visible]' as a styling hook
-       * See: https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible
-       * @type {boolean}
-       */
-      this.focusedVisible = false;
-      this.autofocus = false;
-    }
-
-    /**
-     * @param {import('lit').PropertyValues } changedProperties
-     */
-    firstUpdated(changedProperties) {
+const FocusMixinImplementation = /** @type {FocusMixin} */superclass => class FocusMixin extends superclass {
+  /** @type {any} */
+  static get properties() {
+    return {
+      focused: {
+        type: Boolean,
+        reflect: true
+      },
+      focusedVisible: {
+        type: Boolean,
+        reflect: true,
+        attribute: 'focused-visible'
+      },
       // eslint-disable-next-line lit/no-native-attributes
-      super.firstUpdated(changedProperties);
-      this.__registerEventsForFocusMixin();
-      this.__syncAutofocusToFocusableElement();
-    }
+      autofocus: {
+        type: Boolean,
+        reflect: true
+      } // Required in Lit to observe autofocus
+    };
+  }
 
-    disconnectedCallback() {
-      super.disconnectedCallback();
-      this.__teardownEventsForFocusMixin();
-    }
+  /** @param {...any} args */
+  constructor(...args) {
+    super(...args);
 
     /**
-     * @param {import('lit').PropertyValues } changedProperties
+     * Whether the focusable element within (`._focusableNode`) is focused.
+     * Reflects to attribute '[focused]' as a styling hook
+     * @type {boolean}
      */
-    updated(changedProperties) {
-      super.updated(changedProperties);
-      if (changedProperties.has('autofocus')) {
-        this.__syncAutofocusToFocusableElement();
-      }
-    }
+    this.focused = false;
 
     /**
-     * @private
+     * Whether the focusable element within (`._focusableNode`) matches ':focus-visible'
+     * Reflects to attribute '[focused-visible]' as a styling hook
+     * See: https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible
+     * @type {boolean}
      */
-    __syncAutofocusToFocusableElement() {
-      if (!this._focusableNode) {
-        return;
-      }
-
-      if (this.hasAttribute('autofocus')) {
-        this._focusableNode.setAttribute('autofocus', '');
-      } else {
-        this._focusableNode.removeAttribute('autofocus');
-      }
-    }
+    this.focusedVisible = false;
+    this.autofocus = false;
+  }
 
-    /**
-     * Calls `focus()` on focusable element within
-     */
-    focus() {
-      this._focusableNode?.focus();
+  /**
+   * @param {import('lit').PropertyValues } changedProperties
+   */
+  firstUpdated(changedProperties) {
+    // eslint-disable-next-line lit/no-native-attributes
+    super.firstUpdated(changedProperties);
+    this.__registerEventsForFocusMixin();
+    this.__syncAutofocusToFocusableElement();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.__teardownEventsForFocusMixin();
+  }
+
+  /**
+   * @param {import('lit').PropertyValues } changedProperties
+   */
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    if (changedProperties.has('autofocus')) {
+      this.__syncAutofocusToFocusableElement();
     }
+  }
 
-    /**
-     * Calls `blur()` on focusable element within
-     */
-    blur() {
-      this._focusableNode?.blur();
+  /**
+   * @private
+   */
+  __syncAutofocusToFocusableElement() {
+    if (!this._focusableNode) {
+      return;
     }
+    if (this.hasAttribute('autofocus')) {
+      this._focusableNode.setAttribute('autofocus', '');
+    } else {
+      this._focusableNode.removeAttribute('autofocus');
+    }
+  }
 
-    /**
-     * The focusable element:
-     * could be an input, textarea, select, button or any other element with tabindex > -1
-     * @protected
-     * @type {HTMLElement}
-     */
-    // @ts-ignore it's up to Subclassers to return the right element. This is needed for docs/types
-    // eslint-disable-next-line class-methods-use-this, getter-return, no-empty-function
-    get _focusableNode() {
-      // TODO: [v1]: remove return of _inputNode (it's now here for backwards compatibility)
-      // @ts-expect-error see above
-      return /** @type {HTMLElement} */ (this._inputNode || document.createElement('input'));
+  /**
+   * Calls `focus()` on focusable element within
+   */
+  focus() {
+    this._focusableNode?.focus();
+  }
+
+  /**
+   * Calls `blur()` on focusable element within
+   */
+  blur() {
+    this._focusableNode?.blur();
+  }
+
+  /**
+   * The focusable element:
+   * could be an input, textarea, select, button or any other element with tabindex > -1
+   * @protected
+   * @type {HTMLElement}
+   */
+  // @ts-ignore it's up to Subclassers to return the right element. This is needed for docs/types
+  // eslint-disable-next-line class-methods-use-this, getter-return, no-empty-function
+  get _focusableNode() {
+    // TODO: [v1]: remove return of _inputNode (it's now here for backwards compatibility)
+    // @ts-expect-error see above
+    return /** @type {HTMLElement} */this._inputNode || document.createElement('input');
+  }
+
+  /**
+   * @private
+   */
+  __onFocus() {
+    this.focused = true;
+    if (typeof windowWithOptionalPolyfill.applyFocusVisiblePolyfill === 'function') {
+      this.focusedVisible = this._focusableNode.hasAttribute('data-focus-visible-added');
+    } else try {
+      // Safari throws when matches is called
+      this.focusedVisible = this._focusableNode.matches(':focus-visible');
+    } catch (_) {
+      this.focusedVisible = false;
     }
+  }
+
+  /**
+   * @private
+   */
+  __onBlur() {
+    this.focused = false;
+    this.focusedVisible = false;
+  }
+
+  /**
+   * @private
+   */
+  __registerEventsForFocusMixin() {
+    applyFocusVisiblePolyfillWhenNeeded(this.getRootNode());
 
     /**
-     * @private
+     * focus
+     * @param {Event} ev
      */
-    __onFocus() {
-      this.focused = true;
-
-      if (typeof windowWithOptionalPolyfill.applyFocusVisiblePolyfill === 'function') {
-        this.focusedVisible = this._focusableNode.hasAttribute('data-focus-visible-added');
-      } else
-        try {
-          // Safari throws when matches is called
-          this.focusedVisible = this._focusableNode.matches(':focus-visible');
-        } catch (_) {
-          this.focusedVisible = false;
-        }
-    }
+    this.__redispatchFocus = ev => {
+      ev.stopPropagation();
+      this.dispatchEvent(new Event('focus'));
+    };
+    this._focusableNode.addEventListener('focus', this.__redispatchFocus);
 
     /**
-     * @private
+     * blur
+     * @param {Event} ev
      */
-    __onBlur() {
-      this.focused = false;
-      this.focusedVisible = false;
-    }
+    this.__redispatchBlur = ev => {
+      ev.stopPropagation();
+      this.dispatchEvent(new Event('blur'));
+    };
+    this._focusableNode.addEventListener('blur', this.__redispatchBlur);
 
     /**
-     * @private
+     * focusin
+     * @param {Event} ev
      */
-    __registerEventsForFocusMixin() {
-      applyFocusVisiblePolyfillWhenNeeded(this.getRootNode());
-
-      /**
-       * focus
-       * @param {Event} ev
-       */
-      this.__redispatchFocus = ev => {
-        ev.stopPropagation();
-        this.dispatchEvent(new Event('focus'));
-      };
-      this._focusableNode.addEventListener('focus', this.__redispatchFocus);
-
-      /**
-       * blur
-       * @param {Event} ev
-       */
-      this.__redispatchBlur = ev => {
-        ev.stopPropagation();
-        this.dispatchEvent(new Event('blur'));
-      };
-      this._focusableNode.addEventListener('blur', this.__redispatchBlur);
-
-      /**
-       * focusin
-       * @param {Event} ev
-       */
-      this.__redispatchFocusin = ev => {
-        ev.stopPropagation();
-        this.__onFocus();
-        this.dispatchEvent(new Event('focusin', { bubbles: true, composed: true }));
-      };
-      this._focusableNode.addEventListener('focusin', this.__redispatchFocusin);
-
-      /**
-       * focusout
-       * @param {Event} ev
-       */
-      this.__redispatchFocusout = ev => {
-        ev.stopPropagation();
-        this.__onBlur();
-        this.dispatchEvent(new Event('focusout', { bubbles: true, composed: true }));
-      };
-      this._focusableNode.addEventListener('focusout', this.__redispatchFocusout);
-    }
+    this.__redispatchFocusin = ev => {
+      ev.stopPropagation();
+      this.__onFocus();
+      this.dispatchEvent(new Event('focusin', {
+        bubbles: true,
+        composed: true
+      }));
+    };
+    this._focusableNode.addEventListener('focusin', this.__redispatchFocusin);
 
     /**
-     * @private
+     * focusout
+     * @param {Event} ev
      */
-    __teardownEventsForFocusMixin() {
-      if (!this._focusableNode) return;
-      this._focusableNode?.removeEventListener(
-        'focus',
-        /** @type {EventListenerOrEventListenerObject} */ (this.__redispatchFocus),
-      );
-      this._focusableNode?.removeEventListener(
-        'blur',
-        /** @type {EventListenerOrEventListenerObject} */ (this.__redispatchBlur),
-      );
-      this._focusableNode?.removeEventListener(
-        'focusin',
-        /** @type {EventListenerOrEventListenerObject} */ (this.__redispatchFocusin),
-      );
-      this._focusableNode?.removeEventListener(
-        'focusout',
-        /** @type {EventListenerOrEventListenerObject} */ (this.__redispatchFocusout),
-      );
-    }
-  });
+    this.__redispatchFocusout = ev => {
+      ev.stopPropagation();
+      this.__onBlur();
+      this.dispatchEvent(new Event('focusout', {
+        bubbles: true,
+        composed: true
+      }));
+    };
+    this._focusableNode.addEventListener('focusout', this.__redispatchFocusout);
+  }
+
+  /**
+   * @private
+   */
+  __teardownEventsForFocusMixin() {
+    if (!this._focusableNode) return;
+    this._focusableNode?.removeEventListener('focus', /** @type {EventListenerOrEventListenerObject} */this.__redispatchFocus);
+    this._focusableNode?.removeEventListener('blur', /** @type {EventListenerOrEventListenerObject} */this.__redispatchBlur);
+    this._focusableNode?.removeEventListener('focusin', /** @type {EventListenerOrEventListenerObject} */this.__redispatchFocusin);
+    this._focusableNode?.removeEventListener('focusout', /** @type {EventListenerOrEventListenerObject} */this.__redispatchFocusout);
+  }
+};
 
 /**
  * For browsers that not support the [spec](https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible),