@momentum-ui/web-components 2.16.2 → 2.16.3

package/src/mixins/DedupeMixin.test.ts

@@ -0,0 +1,81 @@
+import { defineCE, fixture, fixtureCleanup } from "@open-wc/testing-helpers";
+import { customElement, LitElement } from "lit-element";
+import { AnyConstructor, DedupeMixin, wasApplied } from "./DedupeMixin";
+
+describe("Dedupe Mixin", () => {
+  afterEach(fixtureCleanup);
+
+  @customElement("custom-element")
+  class CustomElement extends LitElement {
+    getMixinName() {
+      return "";
+    }
+  }
+
+  const MixinA = (base: AnyConstructor<CustomElement>) => {
+    if (wasApplied(MixinA, base)) {
+      return base;
+    }
+    class MixinAClass extends base {
+      getMixinName() {
+        const superName = super.getMixinName();
+        return `MixinA ${superName}`.trim();
+      }
+    }
+
+    DedupeMixin(MixinA, MixinAClass);
+
+    return MixinAClass;
+  };
+
+  const MixinB = (base: AnyConstructor<CustomElement>) => {
+    if (wasApplied(MixinB, base)) {
+      return base;
+    }
+    class MixinBClass extends base {
+      getMixinName() {
+        const superName = super.getMixinName();
+        return `MixinB ${superName}`.trim();
+      }
+    }
+
+    DedupeMixin(MixinB, MixinBClass);
+
+    return MixinBClass;
+  };
+
+  const MixinC = (base: AnyConstructor<CustomElement>) => {
+    class MixinCClass extends MixinB(MixinA(base)) {
+      getMixinName() {
+        const superName = super.getMixinName();
+        return `MixinC ${superName}`.trim();
+      }
+    }
+
+    return MixinCClass;
+  };
+  test("should applying to component", async () => {
+    const tag = defineCE(class extends MixinA(CustomElement) {});
+    const el = await fixture<CustomElement>(`<${tag}></${tag}>`);
+    expect(el.getMixinName()).toEqual("MixinA");
+  });
+
+  test("should dedupes mixins only explicitly", async () => {
+    const tag = defineCE(class extends MixinC(MixinC(MixinA(MixinA(CustomElement)))) {});
+    const el = await fixture<CustomElement>(`<${tag}></${tag}>`);
+    expect(el.getMixinName()).toEqual("MixinC MixinC MixinB MixinA");
+  });
+
+  test("should dedupes another mixins", async () => {
+    const tag = defineCE(class extends MixinA(MixinB(MixinC(CustomElement))) {});
+    const el = await fixture<CustomElement>(`<${tag}></${tag}>`);
+    expect(el.getMixinName()).toEqual("MixinC MixinB MixinA");
+  });
+
+  test("should dedupes another mixins applied on inherited base classes", async () => {
+    const BaseClass = class extends MixinB(MixinC(MixinA(CustomElement))) {};
+    const tag = defineCE(class extends BaseClass {});
+    const el = await fixture<CustomElement>(`<${tag}></${tag}>`);
+    expect(el.getMixinName()).toEqual("MixinC MixinB MixinA");
+  });
+});

package/src/mixins/DedupeMixin.ts

@@ -0,0 +1,54 @@
+/**
+ * Copyright (c) Cisco Systems, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+/**  This mixin check thay each other mixins in the prototype chain are not applied more than once to the final component class.
+ * Example:
+ * import { DedupeMixin, wasApplied } from "./DedupeMixin";
+ * 
+ * const Mixin = (superclass) => {
+ *  if (wasApplied(Mixin, superclass)) { <---- Check that mixin already applied to superclass.
+      return superclass;
+    }
+    class MixinClass extends superclass {
+      // MixinClass implementation
+    }
+
+    DedupeMixin(Mixin, MixinClass); <---- If mixin not applied to superclass, save it in WeakMap to check prototype chain next time.
+
+    return MixinClass;
+ * } 
+ */
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type AnyFunction<A = any> = (...input: any[]) => A;
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type AnyConstructor<A = HTMLElement> = new (...input: any[]) => A;
+
+const appliedMixins = new WeakMap();
+
+export const wasApplied = (mixin: AnyFunction, superClass: AnyConstructor) => {
+  const entries = appliedMixins.get(mixin);
+  let proto = superClass;
+  const chain = [];
+
+  while (proto) {
+    chain.push(proto);
+    proto = Object.getPrototypeOf(proto);
+  }
+
+  return entries ? chain.reduce((res: boolean, protoClass) => res || entries.has(protoClass), false) : false;
+};
+
+export const DedupeMixin = (mixin: AnyFunction, superClass: AnyConstructor) => {
+  let entries = appliedMixins.get(mixin);
+  if (!entries) {
+    entries = new WeakSet();
+    appliedMixins.set(mixin, entries);
+  }
+  entries.add(superClass);
+};

package/src/mixins/FocusMixin.test.ts

@@ -0,0 +1,116 @@
+import { defineCE, fixture, fixtureCleanup, fixtureSync, nextFrame, oneEvent } from "@open-wc/testing-helpers";
+import { customElement, html, LitElement, property, PropertyValues } from "lit-element";
+import { AnyConstructor, FocusClass, FocusMixin } from "./FocusMixin";
+
+describe("Focus Mixin", () => {
+  afterEach(fixtureCleanup);
+
+  @customElement("custom-element")
+  class CustomElement extends LitElement {
+    @property({ type: Boolean, reflect: true }) autofocus = false;
+
+    render() {
+      return html`
+        <slot name="input"></slot>
+        <input type="text" ?autofocus=${this.autofocus} />
+      `;
+    }
+  }
+  test("should applying to component", async () => {
+    const tag = defineCE(class extends FocusMixin(FocusMixin(CustomElement)) {});
+    const el = await fixture<CustomElement>(`<${tag}></${tag}>`);
+    expect(el).toHaveProperty("handleFocusOut", expect.any(Function));
+    expect(el).toHaveProperty("handleFocusIn", expect.any(Function));
+  });
+
+  test("should register event listeners when component updated first time", async () => {
+    const mockEventListener = jest.fn();
+    const ExtendFocusMixin = (base: AnyConstructor) =>
+      class extends FocusMixin(base) {
+        firstUpdated(changedProperties: PropertyValues) {
+          this.addEventListener = mockEventListener;
+          super.firstUpdated(changedProperties);
+          this.dispatchEvent(new CustomEvent("first-updated"));
+        }
+      };
+
+    const tag = defineCE(class extends ExtendFocusMixin(CustomElement) {});
+    const el = fixtureSync(`<${tag}></${tag}>`);
+    const event = await oneEvent(el, "first-updated");
+    expect(event).toBeTruthy();
+    expect(mockEventListener).toBeCalledTimes(2);
+  });
+  test("should set/remove focus-visible attribute", async () => {
+    const tag = defineCE(class extends FocusMixin(CustomElement) {});
+    const el = await fixture<CustomElement>(`<${tag}></${tag}>`);
+
+    el.dispatchEvent(new Event("focus"));
+    el.focus();
+    expect(el.hasAttribute("focus-visible")).toBeTruthy();
+
+    el.dispatchEvent(new Event("blur"));
+    el.blur();
+    expect(el.hasAttribute("focus-visible")).toBeFalsy();
+  });
+
+  test("should autofocus component with appropriate property", async () => {
+    @customElement("focusable-child")
+    class FocusableChild extends FocusMixin(LitElement) {
+      @property({ type: Boolean, reflect: true }) autofocus = true;
+
+      protected async firstUpdated(changedProperties: PropertyValues) {
+        super.firstUpdated(changedProperties);
+        this.setAttribute("tabindex", "0");
+      }
+
+      render() {
+        return html` <input type="text" ?autofocus=${this.autofocus} /> `;
+      }
+    }
+
+    const element = await fixture<FocusableChild>(`<focusable-child></focusable-child>`);
+
+    await nextFrame();
+
+    expect(document.activeElement).toEqual(element);
+    expect(element["getActiveElement"]!()).toEqual(element);
+  });
+
+  test("should find active deep element", async () => {
+    @customElement("deep-focusable-child")
+    class DeepFocusableChild extends FocusMixin(LitElement) {
+      render() {
+        return html` <input type="text" /> `;
+      }
+    }
+
+    const element = await fixture<DeepFocusableChild>(`<deep-focusable-child></deep-focusable-child>`);
+    const input = element.shadowRoot!.querySelector("input");
+
+    input!.focus();
+
+    expect(element["getDeepActiveElement"]!()).toEqual(input);
+    expect(element["isElementFocused"]!(input!)).toBeFalsy();
+  });
+
+  test("should dispatch event in focus/blur case", async () => {
+    const tag = defineCE(class extends FocusMixin(CustomElement) {});
+    const el = await fixture<CustomElement>(`<${tag}></${tag}>`);
+
+    const focusEvent = new Event("focus");
+    setTimeout(() => (el as FocusClass)["handleFocusIn"]!(focusEvent));
+
+    const { detail: focusDetail } = await oneEvent(el, "focus-visible");
+
+    expect(focusDetail).toBeDefined();
+    expect(focusDetail.sourceEvent).toEqual(focusEvent);
+
+    const blurEvent = new Event("blur");
+    setTimeout(() => (el as FocusClass)["handleFocusOut"]!(blurEvent));
+
+    const { detail: blurDetail } = await oneEvent(el, "focus-not-visible");
+
+    expect(blurDetail).toBeDefined();
+    expect(blurDetail.sourceEvent).toEqual(blurEvent);
+  });
+});

package/src/mixins/FocusMixin.ts

@@ -0,0 +1,136 @@
+/**
+ * Copyright (c) Cisco Systems, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+/** This mixin provide a different way to show what element is focused.
+ * (https://html.spec.whatwg.org/multipage/interaction.html#focus-management-apis)
+ * By hiding the native browser outline from component style, we can manage alternative focusing style.
+ * Using keyboard this mixin toggle `focus-visible` attribute on compoenent root to show focus ring.
+ * This mixin handle `focusin` and `focusout` events because due to this specification
+ * (https://w3c.github.io/uievents/#event-type-focusin) this events are composable
+ * and they can be handled by one of the target’s ancestors, which can help us in Shadow DOM event propagation case.
+ *
+ * Example:
+ *
+ * @customElements("custom-element")
+ * class CustomElement extends FocusMixin(LitElement) {
+ *    protected handleFocusIn(event: Event) { <---- You override this with corresponding name in component directly.
+        // super.handleFocusIn && super.handleFocusIn(event); <---- Check to see whether the superclass defines a method of the same name, and if so, invoke that method.
+        // Do your method work here.
+      }
+ *    protected handleFocusOut(event: Event) { <---- You override this with corresponding name in component directly.
+        // super.handleFocusIn && super.handleFocusIn(event); <---- Check to see whether the superclass defines a method of the same name, and if so, invoke that method.
+        // Do your method work here.
+      }
+ * }
+ * */
+
+import { LitElement, property, PropertyValues } from "lit-element";
+import { DedupeMixin, wasApplied } from "./DedupeMixin";
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type AnyConstructor<A = LitElement> = new (...input: any[]) => A;
+export type FocusEventDetail = { sourceEvent: Event };
+
+export abstract class FocusClass extends LitElement {
+  protected setFocus?(force: boolean): void;
+  protected handleFocusIn?(event: Event): void;
+  protected handleFocusOut?(event: Event): void;
+  protected getDeepActiveElement?(): Element;
+  protected isElementFocused?(element: HTMLElement): boolean;
+  protected manageAutoFocus?(element?: Element): void;
+  protected getActiveElement?(): Element | null;
+}
+
+export const FocusMixin = <T extends AnyConstructor<FocusClass>>(base: T): T & AnyConstructor<FocusClass> => {
+  if (wasApplied(FocusMixin, base)) {
+    return base as ReturnType<() => T & AnyConstructor<FocusClass>>;
+  }
+  class Focus extends base {
+    @property({ type: Boolean, reflect: true }) autofocus = false;
+
+    protected setFocus(force: boolean) {
+      this.toggleAttribute("focus-visible", force);
+    }
+
+    protected handleFocusIn(event: Event) {
+      if (super.handleFocusIn) {
+        super.handleFocusIn(event);
+      }
+
+      this.setFocus(true);
+
+      this.dispatchEvent(
+        new CustomEvent<FocusEventDetail>("focus-visible", {
+          composed: true,
+          bubbles: true,
+          detail: {
+            sourceEvent: event
+          }
+        })
+      );
+    }
+
+    protected handleFocusOut(event: Event) {
+      if (super.handleFocusOut) {
+        super.handleFocusOut(event);
+      }
+      this.setFocus(false);
+
+      this.dispatchEvent(
+        new CustomEvent<FocusEventDetail>("focus-not-visible", {
+          composed: true,
+          bubbles: true,
+          detail: {
+            sourceEvent: event
+          }
+        })
+      );
+    }
+
+    protected manageAutoFocus(element: HTMLElement = this) {
+      element.focus();
+    }
+
+    protected firstUpdated(changedProperties: PropertyValues) {
+      super.firstUpdated(changedProperties);
+      this.addEventListener("focus", this.handleFocusIn);
+      this.addEventListener("blur", this.handleFocusOut);
+
+      if (this.autofocus) {
+        requestAnimationFrame(() => {
+          this.manageAutoFocus();
+        });
+      }
+    }
+
+    protected getActiveElement() {
+      return (this.getRootNode() as Document).activeElement;
+    }
+
+    protected getDeepActiveElement() {
+      let host = document.activeElement || document.body;
+      while (host && host.shadowRoot && host.shadowRoot.activeElement) {
+        host = host.shadowRoot.activeElement;
+      }
+      return host;
+    }
+
+    protected isElementFocused(element: HTMLElement) {
+      return this.getDeepActiveElement() !== element;
+    }
+
+    disconnectedCallback(): void {
+      this.removeEventListener("focus", this.handleFocusIn);
+      this.removeEventListener("blur", this.handleFocusOut);
+    }
+  }
+
+  DedupeMixin(FocusMixin, Focus);
+
+  return Focus;
+};