@momentum-ui/web-components 2.5.6 → 2.5.7

package/src/mixins/FocusTrapMixin.ts

@@ -0,0 +1,379 @@
+/**
+ * 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 help create a focus trap ensures that tab and shift + tab keys will cycle through the focus trap's tabbable elements but not leave the focus trap
+ * (https://hiddedevries.nl/en/blog/2017-01-29-using-javascript-to-trap-focus-in-an-element). To enable/disable focus-trap mixin, component need to call
+ * ativateFocusTrap/deactivateFocusTrap methods accordingly.
+ * Example:
+ *
+ * @customElements("focus-trap")
+ * class FocusTrap extends FocusTrapMixin(LitElement) {
+ *  protected deactivateFocusTrap() { <---- You override this with corresponding name in component directly.
+      super.deactivateFocusTrap && super.deactivateFocusTrap(); <---- 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 ativateFocusTrap() { <---- You override this with corresponding name in component directly.
+      super.ativateFocusTrap && super.ativateFocusTrap(); <---- 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 { Key } from "@/constants";
+import { internalProperty, LitElement, property, PropertyValues } from "lit-element";
+import { DedupeMixin, wasApplied } from "./DedupeMixin";
+import { FocusClass, FocusEventDetail, FocusMixin } from "./FocusMixin";
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type AnyConstructor<A = LitElement> = new (...args: any[]) => A;
+
+export abstract class FocusTrapClass extends LitElement {
+  protected deactivateFocusTrap?(): void;
+  protected activateFocusTrap?(): void;
+  protected focusableElements?: HTMLElement[];
+  protected initialFocusComplete?: boolean;
+  protected setFocusableElements?(): void;
+  protected setInitialFocus?(prefferableElement?: HTMLElement | number, ignoreAutoFocus?: boolean): void;
+}
+export interface FocusTrapInterface {
+  activeFocusTrap: boolean;
+  preventClickOutside: boolean;
+  preventScroll: boolean;
+  focusTrapIndex: number;
+}
+export const FocusTrapMixin = <T extends AnyConstructor<FocusClass & FocusTrapClass>>(
+  base: T
+): T & AnyConstructor<FocusTrapClass & FocusTrapInterface & FocusClass> => {
+  if (wasApplied(FocusTrapMixin, base)) {
+    return base as ReturnType<() => T & AnyConstructor<FocusTrapClass & FocusTrapInterface & FocusClass>>;
+  }
+  class FocusTrap extends FocusMixin(base) {
+    @internalProperty() protected focusableElements: HTMLElement[] = [];
+    @internalProperty() protected initialFocusComplete = false;
+
+    @property({ type: Boolean, reflect: true, attribute: "active-focus-trap" }) activeFocusTrap = false;
+    @property({ type: Boolean, reflect: true, attribute: "prevent-click-outside" }) preventClickOutside = false;
+    @property({ type: Number, reflect: true, attribute: "focus-trap-index" }) focusTrapIndex = -1;
+    @property({ type: Boolean, reflect: true, attribute: "prevent-scroll" }) preventScroll = false;
+
+    protected updated(changedProperties: PropertyValues) {
+      super.updated(changedProperties);
+      if (changedProperties.has("focusTrapIndex")) {
+        const prevIndex = changedProperties.get("focusTrapIndex") as number;
+        const prevElement = this.focusableElements[prevIndex];
+
+        if (prevElement) {
+          prevElement.blur();
+          prevElement.toggleAttribute("focus-visible", false);
+        }
+
+        const newElement = this.focusableElements[this.focusTrapIndex];
+        if (newElement) {
+          this.tryFocus(newElement);
+        }
+      }
+    }
+
+    private tryFocus(focusableElement: HTMLElement) {
+      requestAnimationFrame(async () => {
+        if (this.isElementFocused!(focusableElement)) {
+          focusableElement.focus({ preventScroll: this.preventScroll });
+        }
+        if (typeof (focusableElement as LitElement).updateComplete !== "undefined") {
+          await (focusableElement as LitElement).updateComplete;
+        }
+        if (document.hasFocus() && this.isElementFocused!(focusableElement)) {
+          focusableElement.focus({ preventScroll: this.preventScroll });
+        }
+
+        if (!this.initialFocusComplete) {
+          this.initialFocusComplete = true;
+        }
+      });
+    }
+
+    private domRectCollection(element: HTMLElement) {
+      return element.getClientRects().length === 0;
+    }
+
+    private viewportPosition(element: HTMLElement) {
+      const { width, height } = element.getBoundingClientRect();
+      const { offsetWidth, offsetHeight } = element;
+
+      return offsetWidth + offsetHeight + height + width === 0;
+    }
+
+    private isNotVisible(element: HTMLElement) {
+      if (element.tagName !== "SLOT") {
+        return this.viewportPosition(element) || this.domRectCollection(element);
+      }
+      return false;
+    }
+
+    private isHidden(element: HTMLElement) {
+      return (
+        element.hasAttribute("hidden") ||
+        (element.hasAttribute("aria-hidden") && element.getAttribute("aria-hidden") === "true") ||
+        element.style.display === "none" ||
+        element.style.opacity === "0" ||
+        element.style.visibility === "hidden" ||
+        element.style.visibility === "collapse" ||
+        this.isNotVisible(element)
+      );
+    }
+
+    private isDisabled(element: HTMLElement) {
+      return element.hasAttribute("disabled") || element.getAttribute("aria-disabled") === "true";
+    }
+
+    private isNotTabbable(element: HTMLElement) {
+      return element.getAttribute("tabindex") === "-1";
+    }
+
+    private isInteractiveElement(element: HTMLElement) {
+      if (
+        element instanceof HTMLButtonElement ||
+        element instanceof HTMLDetailsElement ||
+        element instanceof HTMLEmbedElement ||
+        element instanceof HTMLIFrameElement ||
+        element instanceof HTMLSelectElement ||
+        element instanceof HTMLTextAreaElement
+      ) {
+        return true;
+      }
+      if (element instanceof HTMLAnchorElement && element.hasAttribute("href")) {
+        return true;
+      }
+      if (element instanceof HTMLInputElement && element.type !== "hidden") {
+        return true;
+      }
+      if (
+        (element instanceof HTMLAudioElement || element instanceof HTMLVideoElement) &&
+        element.hasAttribute("controls")
+      ) {
+        return true;
+      }
+      if (
+        (element instanceof HTMLImageElement || element instanceof HTMLObjectElement) &&
+        element.hasAttribute("usemap")
+      ) {
+        return true;
+      }
+      if (element.hasAttribute("tabindex") && element.tabIndex > -1) {
+        return true;
+      }
+      return false;
+    }
+
+    private isFocusable(element: HTMLElement) {
+      if (this.isDisabled(element) || this.isHidden(element) || this.isNotTabbable(element)) {
+        return false;
+      }
+      if (this.isInteractiveElement(element)) {
+        return true;
+      }
+      return false;
+    }
+
+    private shouldSkipFocus(element: HTMLElement) {
+      // when combobox is having more than 100 items screen getting freezed
+      if(element.className.split(" ").indexOf('md-combobox')>-1){
+        return true;
+      }
+    }
+
+    private findFocusable(root: ShadowRoot | HTMLElement, matches: Set<HTMLElement>): HTMLElement[] {
+      const children = Array.from(root.children) as HTMLElement[];
+      for (const child of children) {
+        if (this.isHidden(child)) {
+          continue;
+        }
+
+        if(this.shouldSkipFocus(child)){
+          break;
+        }
+
+        if (this.isFocusable(child)) {
+          matches.add(child);
+        }
+
+        if (child.shadowRoot) {
+          this.findFocusable(child.shadowRoot, matches);
+        } else if (child.tagName === "SLOT") {
+          const childElements = (child as HTMLSlotElement)
+            .assignedNodes()
+            .filter(node => node.nodeType === node.ELEMENT_NODE);
+          if (childElements.length) {
+            const parent = childElements[0].parentElement;
+            if (parent) {
+              this.findFocusable(parent, matches);
+            }
+          }
+        } else {
+          this.findFocusable(child, matches);
+        }
+      }
+      return [...matches];
+    }
+
+    private isEqualFocusNode(activeElement: HTMLElement, element: HTMLElement) {
+      if (activeElement.nodeType >= 0) {
+        return element.isEqualNode(activeElement) && element == activeElement;
+      }
+      return false;
+    }
+
+    private findElement(activeElement: HTMLElement) {
+      return this.focusableElements.findIndex(element => this.isEqualFocusNode(activeElement, element));
+    }
+
+    private focusTrap(direction: boolean) {
+      const activeElement = this.getDeepActiveElement!() as HTMLElement;
+      const activeIndex = this.findElement(activeElement);
+      if (direction) {
+        if (activeIndex === -1 && this.focusTrapIndex - 1 > 0) {
+          this.focusTrapIndex--;
+        } else {
+          this.focusTrapIndex = activeIndex > 0 ? activeIndex - 1 : this.focusableElements.length - 1;
+        }
+      } else {
+        if (activeIndex === -1 && this.focusTrapIndex + 1 < this.focusableElements.length) {
+          this.focusTrapIndex++;
+        } else {
+          this.focusTrapIndex = activeIndex + 1 < this.focusableElements.length ? activeIndex + 1 : 0;
+        }
+      }
+    }
+
+    private hasAutofocus(element: HTMLElement) {
+      return element.hasAttribute("autofocus");
+    }
+
+    protected setInitialFocus(prefferableElement: HTMLElement | number = 0, ignoreAutoFocus = false) {
+      let focusableIndex = -1;
+
+      this.initialFocusComplete = false;
+
+      if (this.focusableElements.length && !ignoreAutoFocus) {
+        focusableIndex = this.focusableElements.findIndex(this.hasAutofocus);
+      }
+
+      if (this.focusableElements.length && focusableIndex === -1) {
+        if (typeof prefferableElement === "object") {
+          focusableIndex = this.findElement(prefferableElement);
+        } else if (typeof prefferableElement === "number") {
+          focusableIndex = prefferableElement;
+        }
+      }
+
+      if (this.focusableElements[focusableIndex]) {
+        this.focusTrapIndex = focusableIndex;
+      }
+    }
+
+    protected setFocusableElements() {
+      this.focusableElements = this.findFocusable(this.shadowRoot!, new Set());
+    }
+
+    protected async firstUpdated(changedProperties: PropertyValues) {
+      super.firstUpdated(changedProperties);
+      await new Promise(resolve => setTimeout(resolve, 0));
+      this.setFocusableElements();
+    }
+
+    handleKeydownFocusTrap(event: KeyboardEvent) {
+      if (event.code !== Key.Tab || (event.shiftKey && event.code !== Key.Tab)) {
+        return;
+      }
+
+      if (!this.activeFocusTrap || !this.focusableElements.length) {
+        return;
+      }
+
+      if (event.shiftKey) {
+        event.preventDefault();
+        this.focusTrap(true);
+      } else {
+        event.preventDefault();
+        this.focusTrap(false);
+      }
+    }
+
+    protected activateFocusTrap() {
+      this.activeFocusTrap = true;
+    }
+
+    protected deactivateFocusTrap() {
+      this.activeFocusTrap = false;
+      this.focusTrapIndex = -1;
+      this.removeAttribute("focus-trap-index");
+    }
+
+    handleOutsideTrapClick = (event: MouseEvent) => {
+      let insideTrapClick = false;
+      const path = event.composedPath();
+      if (path.length) {
+        insideTrapClick = !!path.find(node => node === this);
+        if (!insideTrapClick && !this.preventClickOutside && this.activeFocusTrap) {
+          this.deactivateFocusTrap();
+        } else if (insideTrapClick && this.activeFocusTrap && this.initialFocusComplete) {
+          this.handleClickInsideTrap(event);
+        }
+      }
+    };
+
+    private handleClickInsideTrap(event: MouseEvent) {
+      const path = event.composedPath();
+      const pathIndex = path.findIndex(element => this.findElement(element as HTMLElement) !== -1);
+      if (pathIndex !== -1) {
+        const focusableElement = path[pathIndex] as HTMLElement;
+        const focusableIndex = this.findElement(focusableElement);
+
+        if (focusableIndex !== -1) {
+          this.focusTrapIndex = focusableIndex;
+        }
+      }
+    }
+
+    private manageNewElement(newElement: HTMLElement) {
+      requestAnimationFrame(() => {
+        this.setFocusableElements();
+        const focusableIndex = this.findElement(newElement);
+
+        if (focusableIndex !== -1) {
+          this.focusTrapIndex = focusableIndex;
+        }
+      });
+    }
+
+    handleFocusVisible(event: CustomEvent<FocusEventDetail>) {
+      const originalEvent = event.detail ? event.detail.sourceEvent : event;
+      const focusableElement = originalEvent.composedPath()[0];
+      const focusableIndex = event.detail ? this.findElement(focusableElement as HTMLElement) : -1;
+
+      if (focusableIndex === -1 && focusableElement !== this) {
+        this.manageNewElement(focusableElement as HTMLElement);
+      }
+    }
+
+    connectedCallback() {
+      super.connectedCallback();
+      this.addEventListener("keydown", this.handleKeydownFocusTrap);
+      this.addEventListener("focus-visible", this.handleFocusVisible as EventListener);
+      document.addEventListener("click", this.handleOutsideTrapClick);
+    }
+
+    disconnectedCallback() {
+      super.disconnectedCallback();
+      this.removeEventListener("keydown", this.handleKeydownFocusTrap);
+      this.removeEventListener("focus-visible", this.handleFocusVisible as EventListener);
+      document.removeEventListener("click", this.handleOutsideTrapClick);
+    }
+  }
+
+  DedupeMixin(FocusTrapMixin, FocusTrap);
+
+  return FocusTrap;
+};

package/src/mixins/ResizeMixin.test.ts

@@ -0,0 +1,86 @@
+import { defineCE, fixture, fixtureCleanup, oneEvent } from "@open-wc/testing-helpers";
+import { customElement, html, LitElement } from "lit-element";
+import { ResizeMixin, ResizeObserver } from "./ResizeMixin";
+
+interface MyWindow extends Window {
+  ResizeObserver: typeof ResizeObserver;
+}
+
+const disconnectMock = jest.fn();
+const observeMock = jest.fn();
+const unobserveMock = jest.fn();
+const constructorMock = jest.fn();
+
+class MockObserver {
+  public observe = observeMock;
+  public unobserve = unobserveMock;
+  public disconnect = disconnectMock;
+  constructor() {
+    constructorMock();
+  }
+}
+
+(window as MyWindow & typeof globalThis).ResizeObserver = jest.fn().mockImplementation(() => {
+  return new MockObserver();
+});
+
+describe("Resize Mixin", () => {
+  afterEach(fixtureCleanup);
+
+  @customElement("custom-element")
+  class CustomElement extends ResizeMixin(ResizeMixin(LitElement)) {
+    connectedCallback() {
+      super.connectedCallback();
+      this.dispatchEvent(new CustomEvent("connected-callback"));
+    }
+
+    customUnobserveAll() {
+      super.unobserveAll && super.unobserveAll();
+    }
+
+    customResize() {
+      const fakeDOMRect = this.getBoundingClientRect();
+      super.handleResize && super.handleResize(fakeDOMRect);
+    }
+
+    render() {
+      return html`
+        <div>Content</div>
+      `;
+    }
+  }
+
+  test("should create observer instance and start observe when element connected to dom", async () => {
+    const tag = defineCE(class extends CustomElement {});
+    const el = document.createElement(`${tag}`) as CustomElement;
+    Object.defineProperty(el, "isConnected", {
+      value: true
+    });
+    setTimeout(() => el.connectedCallback());
+    const ev = await oneEvent(el, "connected-callback");
+    expect(ev).toBeDefined();
+    expect(observeMock).toHaveBeenCalled();
+  });
+
+  test("should unobserve when element disconnected to dom", async () => {
+    const el = await fixture<CustomElement>(`<custom-element></custom-element>`);
+    el.parentElement!.removeChild(el);
+    expect(unobserveMock).toHaveBeenCalled();
+  });
+
+  test("should delete oserver instance and stop observe", async () => {
+    const el = await fixture<CustomElement>(`<custom-element></custom-element>`);
+    el.customUnobserveAll();
+    expect(disconnectMock).toHaveBeenCalled();
+  });
+
+  test("should dispatch resize event", async () => {
+    const el = await fixture<CustomElement>(`<custom-element></custom-element>`);
+    setTimeout(() => el.customResize());
+    const { detail } = await oneEvent(el, "resize");
+    expect(detail).toBeDefined();
+
+    const elDOMRect = el.getBoundingClientRect();
+    expect(detail.contentRect).toStrictEqual(elDOMRect);
+  });
+});

package/src/mixins/ResizeMixin.ts

@@ -0,0 +1,142 @@
+/**
+ * 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 provides a performant mechanism by which component can monitor changes to its size.
+ * For performance purpose, resizeObserver instance is static mixin property, and its shared across
+ * all components that applied ResizeMixin. (The `observe` method, which adds element as a new target to the list of observed elements,
+ * can pass either one element or multiple, so this mixin can manage mutliple elements that need's to be observed).
+ * When observed element's size changed, mixin dispatch `resize` event to handle it outside component tree.
+ *
+ * Example:
+ * @customElements("custom-element")
+ * class CustomElement extends ResizeMixin(LitElement) {
+ *    protected handleResize(contentRect: DOMRect) { <---- You override this with corresponding name in component directly.
+        // super.handleResize && super.handleResize(event); <---- Check to see whether the superclass defines a method of the same name, and if so, invoke that method.
+        // Do your listener work here.
+      }
+ * }
+ */
+
+import { LitElement } 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 abstract class ResizeClass extends LitElement {
+  protected handleResize?(contentRect: DOMRect): void;
+  protected unobserveAll?(): void;
+}
+
+type ResizeObserverBoxOptions = "border-box" | "content-box" | "device-pixel-content-box";
+
+export interface ResizeObserverOptions {
+  box?: ResizeObserverBoxOptions;
+}
+
+export declare class ResizeObserver {
+  constructor(callback: ResizeObserverCallback);
+  observe: (target: Element, options?: ResizeObserverOptions) => void;
+  unobserve: (target: Element) => void;
+  disconnect: () => void;
+}
+
+export type ResizeObserverCallback = (entries: ResizeObserverEntry[], observer: ResizeObserver) => void;
+
+export interface ResizeObserverEntry {
+  readonly target: Element;
+  readonly contentRect: DOMRectReadOnly;
+  readonly borderBoxSize: ResizeObserverSize[];
+  readonly contentBoxSize: ResizeObserverSize[];
+  readonly devicePixelContentBoxSize: ResizeObserverSize[];
+}
+
+interface ResizeObserverSize {
+  readonly inlineSize: number;
+  readonly blockSize: number;
+}
+
+export const ResizeMixin = <T extends AnyConstructor<ResizeClass>>(base: T): T & AnyConstructor<ResizeClass> => {
+  if (wasApplied(ResizeMixin, base)) {
+    return base as ReturnType<() => T & AnyConstructor<ResizeClass>>;
+  }
+  class Resize extends base {
+    protected static _resizeObserver?: ResizeObserver;
+    protected static _animationFrameID?: number;
+
+    private _initResizeObserver() {
+      const observer = Resize._resizeObserver;
+      if (observer == null) {
+        Resize._resizeObserver = new ResizeObserver((entries: ResizeObserverEntry[]) => {
+          Resize._animationFrameID = requestAnimationFrame(() => {
+            if (Array.isArray(entries) && entries.length) {
+              entries.forEach(entry => {
+                const { target, contentRect } = entry;
+                (target as Resize).handleResize(contentRect as DOMRect);
+              });
+            }
+          });
+        });
+      }
+    }
+
+    protected handleResize(contentRect: DOMRect) {
+      if (super.handleResize) {
+        super.handleResize(contentRect);
+      }
+      this.dispatchEvent(
+        new CustomEvent("resize", {
+          detail: {
+            contentRect
+          },
+          bubbles: true,
+          composed: true
+        })
+      );
+    }
+
+    protected unobserveAll() {
+      if (super.unobserveAll) {
+        super.unobserveAll();
+      }
+      const observer = Resize._resizeObserver;
+      if (observer) {
+        observer.disconnect();
+      }
+    }
+
+    connectedCallback() {
+      super.connectedCallback();
+
+      this._initResizeObserver();
+      const observer = Resize._resizeObserver;
+
+      if (observer && this.isConnected) {
+        observer.observe(this);
+      }
+    }
+
+    disconnectedCallback() {
+      super.disconnectedCallback();
+      const observer = Resize._resizeObserver;
+      const timerId = Resize._animationFrameID;
+
+      if (observer) {
+        observer.unobserve(this);
+      }
+
+      if (timerId) {
+        cancelAnimationFrame(timerId);
+      }
+    }
+  }
+
+  DedupeMixin(ResizeMixin, Resize);
+
+  return Resize;
+};

package/src/mixins/RovingTabIndexMixin.test.ts

@@ -0,0 +1,62 @@
+import { elementUpdated, fixture, fixtureCleanup, html } from "@open-wc/testing-helpers";
+import { customElement, LitElement } from "lit-element";
+import { RovingTabIndexInterface, RovingTabIndexMixin } from "./RovingTabIndexMixin";
+
+describe("RovingTabIndex Mixin", () => {
+  let el: CustomElement & RovingTabIndexInterface;
+
+  @customElement("custom-element")
+  class CustomElement extends RovingTabIndexMixin(RovingTabIndexMixin(LitElement)) {
+    render() {
+      return html`
+        <div class="wrapper">
+          <slot></slot>
+        </div>
+      `;
+    }
+  }
+
+  afterEach(fixtureCleanup);
+  beforeEach(async () => {
+    el = await fixture<CustomElement & RovingTabIndexInterface>(
+      html`
+        <custom-element selected="2">
+          <div>
+            <span>One</span>
+          </div>
+          <div>
+            <span>Two</span>
+          </div>
+          <div disabled>
+            <span>Three</span>
+          </div>
+          <div>
+            <span>Four</span>
+          </div>
+        </custom-element>
+      `
+    );
+  });
+
+  test("should applying to component", () => {
+    expect(el).toHaveProperty("selected", expect.any(Number));
+    expect(el).toHaveProperty("getAvailableSelectedIndex", expect.any(Function));
+  });
+
+  test("should not set tabindex if selected item is not correct", () => {
+    expect(el.slotted[0].tabIndex).toBe(-1);
+  });
+
+  test("should set tabindex to next available item", async () => {
+    el.selected = 1;
+    await elementUpdated(el);
+    expect(el.slotted[0].tabIndex).toBe(-1);
+    expect(el.slotted[1].tabIndex).toBe(0);
+  });
+
+  test("should prevent focus in rovingPreventFocus property is passed", async () => {
+    el.rovingPreventFocus = true;
+    await elementUpdated(el);
+    expect(document.activeElement).not.toEqual(el);
+  });
+});