@lion/ui 0.0.1

package/components/form/src/LionForm.js

@@ -0,0 +1,92 @@
+import { LionFieldset } from '@lion/ui/fieldset.js';
+
+const throwFormNodeError = () => {
+  throw new Error(
+    'No form node found. Did you put a <form> element inside your custom-form element?',
+  );
+};
+
+/**
+ * LionForm: form wrapper providing extra features and integration with lion-field elements.
+ *
+ * @customElement lion-form
+ */
+// eslint-disable-next-line no-unused-vars
+export class LionForm extends LionFieldset {
+  constructor() {
+    super();
+    /** @protected */
+    this._submit = this._submit.bind(this);
+    /** @protected */
+    this._reset = this._reset.bind(this);
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.__registerEventsForLionForm();
+
+    // @override LionFieldset: makes sure a11y is handled by ._formNode
+    this.removeAttribute('role');
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.__teardownEventsForLionForm();
+  }
+
+  get _formNode() {
+    return /** @type {HTMLFormElement} */ (this.querySelector('form'));
+  }
+
+  submit() {
+    if (this._formNode) {
+      // Firefox requires cancelable flag, otherwise we cannot preventDefault
+      // Firefox still runs default handlers for untrusted events :\
+      this._formNode.dispatchEvent(new Event('submit', { cancelable: true }));
+    } else {
+      throwFormNodeError();
+    }
+  }
+
+  /**
+   * @param {Event} ev
+   * @protected
+   */
+  _submit(ev) {
+    ev.preventDefault();
+    ev.stopPropagation();
+    this.submitGroup();
+    this.dispatchEvent(new Event('submit', { bubbles: true }));
+  }
+
+  reset() {
+    if (this._formNode) {
+      this._formNode.reset();
+    } else {
+      throwFormNodeError();
+    }
+  }
+
+  /**
+   * @param {Event} ev
+   * @protected
+   */
+  _reset(ev) {
+    ev.preventDefault();
+    ev.stopPropagation();
+    this.resetGroup();
+    this.dispatchEvent(new Event('reset', { bubbles: true }));
+  }
+
+  /** @private */
+  __registerEventsForLionForm() {
+    this._formNode.addEventListener('submit', this._submit);
+    this._formNode.addEventListener('reset', this._reset);
+  }
+
+  /** @private */
+  __teardownEventsForLionForm() {
+    this._formNode.removeEventListener('submit', this._submit);
+    this._formNode.removeEventListener('reset', this._reset);
+  }
+}

package/components/form/test/lion-form.test.js

@@ -0,0 +1,205 @@
+import { LionFieldset } from '@lion/ui/fieldset.js';
+import '@lion/ui/define/lion-fieldset.js';
+import { LionField } from '@lion/ui/form-core.js';
+import '@lion/ui/define/lion-field.js';
+import '@lion/ui/define/lion-validation-feedback.js';
+
+import '@lion/ui/define/lion-form.js';
+import {
+  aTimeout,
+  defineCE,
+  expect,
+  fixture as _fixture,
+  html,
+  oneEvent,
+  unsafeStatic,
+} from '@open-wc/testing';
+import { spy } from 'sinon';
+
+/**
+ * @typedef {import('../src/LionForm.js').LionForm} LionForm
+ * @typedef {import('lit').TemplateResult} TemplateResult
+ */
+const fixture = /** @type {(arg: TemplateResult) => Promise<LionForm>} */ (_fixture);
+
+const childTagString = defineCE(
+  class extends LionField {
+    get slots() {
+      return {
+        input: () => document.createElement('input'),
+      };
+    }
+  },
+);
+const childTag = unsafeStatic(childTagString);
+
+describe('<lion-form>', () => {
+  it('is an instance of LionFieldSet', async () => {
+    const el = await fixture(html`
+      <lion-form>
+        <form></form>
+      </lion-form>
+    `);
+    expect(el).to.be.instanceOf(LionFieldset);
+  });
+
+  it('relies on the native form for its accessible role', async () => {
+    const el = await fixture(html`
+      <lion-form>
+        <form></form>
+      </lion-form>
+    `);
+    expect(el.getAttribute('role')).to.be.null;
+  });
+
+  it('has a custom reset that gets triggered by native reset', async () => {
+    const withDefaults = await fixture(html`
+      <lion-form>
+        <form>
+          <${childTag} name="firstName" .modelValue="${'Foo'}"></${childTag}>
+          <input type="reset" value="reset-button" />
+        </form>
+      </lion-form>
+    `);
+    const resetButton = /** @type {HTMLInputElement} */ (
+      withDefaults.querySelector('input[type=reset]')
+    );
+
+    withDefaults.formElements.firstName.modelValue = 'updatedFoo';
+    expect(withDefaults.modelValue).to.deep.equal({
+      firstName: 'updatedFoo',
+    });
+
+    withDefaults.reset();
+    expect(withDefaults.modelValue).to.deep.equal({
+      firstName: 'Foo',
+    });
+
+    // use button
+    withDefaults.formElements.firstName.modelValue = 'updatedFoo';
+    expect(withDefaults.modelValue).to.deep.equal({
+      firstName: 'updatedFoo',
+    });
+
+    resetButton.click();
+    expect(withDefaults.modelValue).to.deep.equal({
+      firstName: 'Foo',
+    });
+  });
+
+  it('dispatches reset events', async () => {
+    const el = await fixture(html`
+      <lion-form>
+        <form>
+          <${childTag} name="firstName" .modelValue="${'Foo'}"></${childTag}>
+        </form>
+      </lion-form>
+    `);
+
+    setTimeout(() => el.reset());
+    const resetEv = await oneEvent(el, 'reset');
+    expect(resetEv).to.be.instanceOf(Event);
+    expect(resetEv.type).to.equal('reset');
+    expect(resetEv.target).to.equal(el);
+    expect(resetEv.bubbles).to.be.true;
+    expect(resetEv.composed).to.be.false;
+  });
+
+  it('works with the native submit event (triggered via a button)', async () => {
+    const submitSpy = spy();
+    const el = await fixture(html`
+      <lion-form @submit=${submitSpy}>
+        <form>
+          <button type="submit">submit</button>
+        </form>
+      </lion-form>
+    `);
+
+    const button = /** @type {HTMLButtonElement} */ (el.querySelector('button'));
+    button.click();
+    expect(submitSpy.callCount).to.equal(1);
+  });
+
+  it('dispatches submit events', async () => {
+    const el = await fixture(html`
+      <lion-form>
+        <form>
+          <button type="submit">submit</button>
+        </form>
+      </lion-form>
+    `);
+    const button = /** @type {HTMLButtonElement} */ (el.querySelector('button'));
+    setTimeout(() => button.click());
+    const submitEv = await oneEvent(el, 'submit');
+    expect(submitEv).to.be.instanceOf(Event);
+    expect(submitEv.type).to.equal('submit');
+    expect(submitEv.target).to.equal(el);
+    expect(submitEv.bubbles).to.be.true;
+    expect(submitEv.composed).to.be.false;
+  });
+
+  it('redispatches a submit event on the native form node when calling submit() imperatively', async () => {
+    const nativeFormSubmitEventSpy = spy();
+    const el = await fixture(html`
+      <lion-form>
+        <form @submit=${nativeFormSubmitEventSpy}>
+          <button type="submit">submit</button>
+        </form>
+      </lion-form>
+    `);
+    const submitSpy = spy(el, 'submit');
+    const submitGroupSpy = spy(el, 'submitGroup');
+    el.submit();
+    expect(submitSpy.calledOnce).to.be.true;
+    expect(nativeFormSubmitEventSpy.calledOnce).to.be.true;
+    expect(submitGroupSpy.calledOnce).to.be.true;
+  });
+
+  it('handles internal submit handler before dispatch', async () => {
+    const el = await fixture(html`
+      <lion-form>
+        <form>
+          <button type="submit">submit</button>
+        </form>
+      </lion-form>
+    `);
+    const button = /** @type {HTMLButtonElement} */ (el.querySelector('button'));
+    const internalHandlerSpy = spy(el, 'submitGroup');
+    const dispatchSpy = spy(el, 'dispatchEvent');
+    await aTimeout(0);
+    button.click();
+    expect(internalHandlerSpy).to.be.calledBefore(dispatchSpy);
+  });
+
+  it('handles internal submit handler before dispatch', async () => {
+    const el = await fixture(html`
+      <lion-form>
+        <form>
+          <button type="submit">submit</button>
+        </form>
+      </lion-form>
+    `);
+    const button = /** @type {HTMLButtonElement} */ (el.querySelector('button'));
+    const internalHandlerSpy = spy(el, 'submitGroup');
+    const dispatchSpy = spy(el, 'dispatchEvent');
+    button.click();
+    expect(dispatchSpy.args[0][0].type).to.equal('submit');
+    expect(internalHandlerSpy).to.be.calledBefore(dispatchSpy);
+  });
+
+  it('handles internal reset handler before dispatch', async () => {
+    const el = await fixture(html`
+      <lion-form>
+        <form>
+          <button type="reset">submit</button>
+        </form>
+      </lion-form>
+    `);
+    const button = /** @type {HTMLButtonElement} */ (el.querySelector('button'));
+    const internalHandlerSpy = spy(el, 'resetGroup');
+    const dispatchSpy = spy(el, 'dispatchEvent');
+    button.click();
+    expect(dispatchSpy.args[0][0].type).to.equal('reset');
+    expect(internalHandlerSpy).to.be.calledBefore(dispatchSpy);
+  });
+});

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

@@ -0,0 +1,192 @@
+import { dedupeMixin } from '@open-wc/dedupe-mixin';
+
+const windowWithOptionalPolyfill =
+  /** @type {Window & typeof globalThis & {applyFocusVisiblePolyfill?: function}} */ (window);
+const polyfilledNodes = new WeakMap();
+
+/**
+ * @param {Node} node
+ */
+function applyFocusVisiblePolyfillWhenNeeded(node) {
+  if (windowWithOptionalPolyfill.applyFocusVisiblePolyfill && !polyfilledNodes.has(node)) {
+    windowWithOptionalPolyfill.applyFocusVisiblePolyfill(node);
+    polyfilledNodes.set(node, undefined);
+  }
+}
+
+/**
+ * @typedef {import('../types/FocusMixinTypes.js').FocusMixin} FocusMixin
+ * @type {FocusMixin}
+ * @param {import('@open-wc/dedupe-mixin').Constructor<import('lit').LitElement>} superclass
+ */
+const FocusMixinImplementation = superclass =>
+  // @ts-ignore https://github.com/microsoft/TypeScript/issues/36821#issuecomment-588375051
+  class FocusMixin extends superclass {
+    /** @type {any} */
+    static get properties() {
+      return {
+        focused: { type: Boolean, reflect: true },
+        focusedVisible: { type: Boolean, reflect: true, attribute: 'focused-visible' },
+      };
+    }
+
+    constructor() {
+      super();
+
+      /**
+       * 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;
+    }
+
+    connectedCallback() {
+      super.connectedCallback();
+      this.__registerEventsForFocusMixin();
+    }
+
+    disconnectedCallback() {
+      super.disconnectedCallback();
+      this.__teardownEventsForFocusMixin();
+    }
+
+    /**
+     * 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());
+
+      /**
+       * 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);
+    }
+
+    /**
+     * @private
+     */
+    __teardownEventsForFocusMixin() {
+      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),
+ * be sure to load the polyfill into your application https://github.com/WICG/focus-visible
+ * (or go for progressive enhancement).
+ */
+export const FocusMixin = dedupeMixin(FocusMixinImplementation);