@momentum-ui/web-components 2.16.2 → 2.16.3

package/src/mixins/FocusTrapMixin.ts

@@ -0,0 +1,492 @@
+/**
+ * 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;
+  protected setFocusOnTrigger?(triggerEleement?: HTMLElement): 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;
+    @internalProperty() private focusableTimer: any = [];
+    @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;
+    shouldWrapFocus: () => boolean = () => 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 hasHiddenStyle(element: HTMLElement) {
+      const elStyle = element.style;
+
+      if (!elStyle) {
+        return element instanceof HTMLElement === false;
+      }
+
+      return (
+        elStyle.display === "none" ||
+        elStyle.opacity === "0" ||
+        elStyle.visibility === "hidden" ||
+        elStyle.visibility === "collapse"
+      );
+    }
+
+    private hasComputedHidden(element: HTMLElement) {
+      const computedStyle = getComputedStyle(element);
+
+      return computedStyle.visibility === "hidden" || computedStyle.height === "0";
+    }
+
+    private isHidden(element: HTMLElement) {
+      return (
+        element.hasAttribute("hidden") ||
+        (element.hasAttribute("aria-hidden") && element.getAttribute("aria-hidden") === "true") ||
+        this.hasHiddenStyle(element) ||
+        this.isNotVisible(element) ||
+        this.hasComputedHidden(element)
+      );
+    }
+
+    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.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?.id?.split(" ").indexOf("md-combobox-listbox") > -1) {
+        return true;
+      }
+      return false;
+    }
+
+    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): number {
+      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 > (this.shouldWrapFocus() ? 1 : 0) ? activeIndex - 1 : this.focusableElements.length - 1;
+        }
+      } else if (activeIndex === -1 && this.focusTrapIndex + 1 < this.focusableElements.length) {
+        this.focusTrapIndex++;
+      } else if (activeIndex === this.focusableElements.length - 1 && this.focusTrapIndex === 0) {
+        const nextEleToFocus = this.focusableElements[this.focusTrapIndex];
+        if (nextEleToFocus) {
+          this.tryFocus(nextEleToFocus);
+        }
+      } else {
+        this.focusTrapIndex =
+          activeIndex + 1 < this.focusableElements.length ? activeIndex + 1 : this.shouldWrapFocus() ? 1 : 0;
+      }
+    }
+
+    handleFocusOnClear = () => {
+      this.focusTrap(true);
+    };
+
+    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;
+      }
+    }
+
+    /**
+     * this method is used to set focus on trigger element by finding the focusable element in the trigger element.
+     *
+     * @param   triggerElement  The trigger element.
+     * @returns void
+     */
+    protected setFocusOnTrigger(triggerElement?: HTMLElement) {
+      if (!triggerElement) {
+        return;
+      }
+
+      const deepNestedTriggerElement = this.getDeepNestedTriggerElement(triggerElement);
+
+      if (deepNestedTriggerElement.length > 0) {
+        const focusableIndex = this.findElement(deepNestedTriggerElement[0]);
+        this.focusTrapIndex = focusableIndex;
+      }
+    }
+
+    private getDeepNestedTriggerElement(triggerElement: HTMLElement): HTMLElement[] {
+      if (triggerElement.shadowRoot) {
+        return this.findFocusable(triggerElement.shadowRoot, new Set());
+      } else if (this.isFocusable(triggerElement)) {
+        return [triggerElement];
+      } else {
+        return this.findFocusable(triggerElement, new Set());
+      }
+    }
+
+    protected setFocusableElements() {
+      if (this.shadowRoot) {
+        this.focusableElements = this.findFocusable(this.shadowRoot, new Set());
+      } else {
+        console.warn("shadow root is not available");
+      }
+    }
+
+    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(emitEvent = true) {
+      if (emitEvent) {
+        this.dispatchEvent(
+          new CustomEvent("on-focus-trap", {
+            bubbles: true,
+            composed: true,
+            cancelable: true
+          })
+        );
+      }
+      this.activeFocusTrap = true;
+    }
+
+    protected deactivateFocusTrap(emitEvent = true) {
+      this.activeFocusTrap = false;
+      this.focusTrapIndex = -1;
+      this.removeAttribute("focus-trap-index");
+      if (emitEvent) {
+        this.dispatchEvent(
+          new CustomEvent("on-focus-untrap", {
+            bubbles: true,
+            composed: true,
+            cancelable: true
+          })
+        );
+      }
+    }
+
+    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);
+      }
+    }
+
+    updateFocusableElements = () => {
+      if (this.focusableTimer) {
+        clearTimeout(this.focusableTimer);
+        this.focusableElements = [];
+      }
+      this.focusableTimer = setTimeout(() => {
+        this.setFocusableElements();
+      }, 10);
+    };
+
+    handleChildFocusTrap = (event: CustomEvent) => {
+      if (event.target !== this) {
+        event.stopPropagation();
+        this.deactivateFocusTrap(false);
+      }
+    };
+
+    handleChildFocusUntrap = (event: CustomEvent) => {
+      if (event.target !== this) {
+        event.stopPropagation();
+        this.activateFocusTrap(false);
+      }
+    };
+
+    connectedCallback() {
+      super.connectedCallback();
+      this.addEventListener("keydown", this.handleKeydownFocusTrap);
+      this.addEventListener("focus-visible", this.handleFocusVisible as EventListener);
+      this.addEventListener("on-focus-trap", this.handleChildFocusTrap as EventListener);
+      this.addEventListener("on-focus-untrap", this.handleChildFocusUntrap as EventListener);
+      document.addEventListener("click", this.handleOutsideTrapClick);
+      document.addEventListener("on-widget-update", this.updateFocusableElements);
+      this.addEventListener("input-clear", this.handleFocusOnClear);
+    }
+
+    disconnectedCallback() {
+      super.disconnectedCallback();
+      this.removeEventListener("keydown", this.handleKeydownFocusTrap);
+      this.removeEventListener("focus-visible", this.handleFocusVisible as EventListener);
+      this.removeEventListener("on-focus-trap", this.handleChildFocusTrap as EventListener);
+      this.removeEventListener("on-focus-untrap", this.handleChildFocusUntrap as EventListener);
+      document.removeEventListener("click", this.handleOutsideTrapClick);
+      document.removeEventListener("on-widget-update", this.updateFocusableElements);
+      this.removeEventListener("input-clear", this.handleFocusOnClear);
+      if (this.focusableTimer) {
+        clearTimeout(this.focusableTimer);
+      }
+    }
+  }
+
+  DedupeMixin(FocusTrapMixin, FocusTrap);
+
+  return FocusTrap;
+};

package/src/mixins/ResizeMixin.test.ts

@@ -0,0 +1,84 @@
+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);
+  });
+});