@momentum-ui/web-components 2.14.11 → 2.14.13

package/src/components/menu-overlay/MenuOverlay.ts

@@ -0,0 +1,487 @@
+/**
+ * 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.
+ *
+ */
+
+import { Key } from "@/constants";
+import { customElementWithCheck } from "@/mixins/CustomElementCheck";
+import { FocusTrapMixin } from "@/mixins/FocusTrapMixin";
+import { debounce } from "@/utils/helpers";
+import { Placement } from "@popperjs/core/lib";
+import arrow from "@popperjs/core/lib/modifiers/arrow";
+import flip from "@popperjs/core/lib/modifiers/flip";
+import offset from "@popperjs/core/lib/modifiers/offset";
+import preventOverflow from "@popperjs/core/lib/modifiers/preventOverflow";
+import { createPopper, defaultModifiers, Instance, Rect } from "@popperjs/core/lib/popper-lite";
+import { html, LitElement, property, PropertyValues, query, queryAssignedNodes } from "lit-element";
+import { ifDefined } from "lit-html/directives/if-defined";
+import styles from "./scss/module.scss";
+
+export enum OverlaySizes {
+  small = "260px",
+  large = "370px"
+}
+
+type OffsetsFunction = ({
+  popper,
+  reference,
+  placement
+}: {
+  popper: Rect;
+  reference: Rect;
+  placement: Placement;
+}) => [number, number];
+
+export const menuOverlaySize = ["small", "large"] as const;
+export const menuOverlayPlacement = [
+  "left-start",
+  "left",
+  "left-end",
+  "right-start",
+  "right",
+  "right-end",
+  "top-start",
+  "top",
+  "top-end",
+  "bottom-start",
+  "bottom",
+  "bottom-end"
+] as const;
+export const menuOverlayRole = ["menu", "dialog"] as const;
+
+export namespace MenuOverlay {
+  export type Size = (typeof menuOverlaySize)[number];
+  export type Placement = (typeof menuOverlayPlacement)[number];
+  export type Role = (typeof menuOverlayRole)[number];
+
+  @customElementWithCheck("md-menu-overlay")
+  export class ELEMENT extends FocusTrapMixin(LitElement) {
+    private _isOpen = false;
+    private static activeOverlay: ELEMENT[] = [];
+    @property({ type: Boolean, attribute: "is-open", reflect: true })
+    get isOpen() {
+      return this._isOpen;
+    }
+    set isOpen(newValue: boolean) {
+      const oldValue = this._isOpen;
+      this._isOpen = newValue;
+      this.handleInstance(newValue);
+      if (this.overlayContainer) {
+        this.overlayContainer.toggleAttribute("data-show", newValue);
+      }
+      this.requestUpdate("isOpen", oldValue);
+    }
+
+    @property({ type: String }) size: MenuOverlay.Size = "large";
+    @property({ type: String, attribute: "max-height" }) maxHeight = "";
+    @property({ type: String, attribute: "custom-width" }) customWidth = "";
+    @property({ type: Boolean, attribute: "show-arrow" }) showArrow = false;
+    @property({ type: Boolean }) disabled = false;
+    @property({ type: String }) placement: MenuOverlay.Placement = "bottom";
+    @property({ type: Boolean, attribute: "allow-hover-toggle" }) allowHoverToggle = false;
+    @property({ type: String }) ariaRole: Role = "menu";
+    @property({ type: String }) ariaLabel = "";
+    @property({ type: Boolean, attribute: "is-date-picker" }) isDatePicker = false;
+    @property({ type: Number, attribute: "overlay-offset" }) overlayOffset = 15;
+
+    @query(".overlay-container") overlayContainer!: HTMLDivElement;
+    @query(".overlay-arrow") arrow!: HTMLDivElement;
+
+    @queryAssignedNodes("menu-trigger", true) trigger?: NodeListOf<HTMLElement>;
+
+    private popperInstance: Instance | null = null;
+    private triggerElement: HTMLElement | null = null;
+
+    private renderMaxHeight() {
+      return this.maxHeight ? `max-height: ${this.maxHeight};` : `max-height: calc(100vh - 48px);`;
+    }
+
+    shouldWrapFocus = () => this.ariaRole === "dialog";
+
+    private renderOverflowY() {
+      return this.isDatePicker ? `overflow-y: visible;` : `overflow-y: auto;`;
+    }
+
+    private renderWidth() {
+      if (this.customWidth) {
+        return `width: ${this.customWidth};`;
+      } else if (this.size === "small") {
+        return `width: ${OverlaySizes.small};`;
+      } else {
+        return `width: ${OverlaySizes.large};`;
+      }
+    }
+
+    private getStyles() {
+      return html`
+        <style>
+          :host .md-menu-overlay .overlay-content {
+            ${this.renderMaxHeight()};
+            ${this.renderWidth()};
+            ${this.renderOverflowY()};
+          }
+        </style>
+      `;
+    }
+    updateActiveMenuOverlayOpened = (event: Event) => {
+      if (this === event.target) {
+        MenuOverlay.ELEMENT.activeOverlay?.push(event.target as ELEMENT);
+      }
+    };
+    updateActiveMenuOverlayClosed = (event: Event) => {
+      const index = MenuOverlay.ELEMENT.activeOverlay.indexOf(event.target as ELEMENT);
+      if (this === event.target && index !== -1) {
+        MenuOverlay.ELEMENT.activeOverlay.splice(index, 1);
+        if (MenuOverlay.ELEMENT.activeOverlay.length > 0) {
+          MenuOverlay.ELEMENT.activeOverlay[MenuOverlay.ELEMENT.activeOverlay.length - 1]?.setFocusableElements!();
+          MenuOverlay.ELEMENT.activeOverlay[MenuOverlay.ELEMENT.activeOverlay.length - 1]?.focusOnNestedTrigger(
+            this.triggerElement as HTMLElement
+          );
+        } else {
+          this.setFocusableElements!();
+        }
+      }
+    };
+
+    connectedCallback() {
+      super.connectedCallback();
+      this.handleWindowBlurEvent = this.handleWindowBlurEvent.bind(this);
+      window.addEventListener("blur", this.handleWindowBlurEvent);
+      document.addEventListener("click", this.handleOutsideOverlayClick);
+      document.addEventListener("keydown", this.handleOutsideOverlayKeydown);
+      this.addEventListener("menu-overlay-open", this.updateActiveMenuOverlayOpened);
+      this.addEventListener("menu-overlay-close", this.updateActiveMenuOverlayClosed);
+    }
+
+    disconnectedCallback() {
+      super.disconnectedCallback();
+      document.removeEventListener("click", this.handleOutsideOverlayClick);
+      document.removeEventListener("keydown", this.handleOutsideOverlayKeydown);
+      window.removeEventListener("blur", this.handleWindowBlurEvent);
+
+      this.removeEventListener("menu-overlay-open", this.updateActiveMenuOverlayOpened);
+      this.removeEventListener("menu-overlay-close", this.updateActiveMenuOverlayClosed);
+
+      if (this.triggerElement) {
+        this.triggerElement.removeEventListener("click", this.handleTriggerClick);
+        this.triggerElement.removeEventListener("keydown", this.handleTriggerKeyDown);
+        if (this.allowHoverToggle) {
+          this.triggerElement.removeEventListener("mouseenter", this.expandPopup);
+          this.triggerElement.removeEventListener("mouseleave", this.collapsePopup);
+          this.overlayContainer.removeEventListener("mouseenter", this.expandPopup);
+          this.overlayContainer.removeEventListener("mouseleave", this.collapsePopup);
+        }
+        this.triggerElement = null;
+      }
+    }
+
+    checkIsInputField(element: HTMLElement) {
+      if (element && element.tagName && element.tagName.toLowerCase() === "md-input") {
+        return true;
+      }
+      return false;
+    }
+
+    protected async firstUpdated(changedProperties: PropertyValues) {
+      super.firstUpdated(changedProperties);
+      await new Promise((resolve) => setTimeout(resolve, 0));
+
+      if (this.trigger) {
+        this.triggerElement = this.trigger[0];
+        this.triggerElement.addEventListener("click", this.handleTriggerClick);
+
+        if (this.allowHoverToggle) {
+          this.triggerElement.addEventListener("mouseenter", this.expandPopup);
+          this.triggerElement.addEventListener("mouseleave", this.collapsePopup);
+          this.overlayContainer.addEventListener("mouseenter", this.expandPopup);
+          this.overlayContainer.addEventListener("mouseleave", this.collapsePopup);
+        }
+
+        if (!this.checkIsInputField(this.triggerElement)) {
+          // Prevent adding keydown event, if the slot element type is md-input
+          // This will allow users to use ENTER and SPACE key without issues.
+          this.triggerElement.addEventListener("keydown", this.handleTriggerKeyDown);
+        }
+        this.triggerElement.setAttribute("aria-haspopup", "true");
+      }
+
+      if (this.overlayContainer && this.isOpen) {
+        this.handleInstance(true);
+        this.overlayContainer.toggleAttribute("data-show", true);
+      }
+
+      if (this.arrow && this.showArrow) {
+        this.arrow.toggleAttribute("data-show", true);
+      }
+    }
+
+    protected update(changedProperties: PropertyValues) {
+      super.update(changedProperties);
+      if (changedProperties.has("isOpen")) {
+        if (this.isOpen) {
+          this.activateFocusTrap!();
+          document.addEventListener("menu-item-click", this.handleTriggerClick as EventListener);
+        } else {
+          this.deactivateFocusTrap!();
+          document.removeEventListener("menu-item-click", this.handleTriggerClick as EventListener);
+        }
+      }
+    }
+
+    protected updated(changedProperties: PropertyValues) {
+      super.updated(changedProperties);
+      if (changedProperties.has("isOpen")) {
+        if (this.isOpen) {
+          this.dispatchMenuOpen();
+
+          if (this.triggerElement) {
+            this.triggerElement.setAttribute("aria-expanded", "true");
+            if (this.triggerElement.hasAttribute("ariaexpanded")) {
+              this.triggerElement.setAttribute("ariaexpanded", "true");
+            }
+          }
+        } else {
+          this.dispatchMenuClose();
+          if (this.triggerElement) {
+            this.triggerElement.removeAttribute("aria-expanded");
+            if (this.triggerElement.hasAttribute("ariaexpanded")) {
+              this.triggerElement.setAttribute("ariaexpanded", "false");
+            }
+          }
+        }
+      }
+    }
+
+    private dispatchMenuOpen() {
+      this.dispatchEvent(
+        new CustomEvent("menu-overlay-open", {
+          composed: true,
+          bubbles: true
+        })
+      );
+    }
+
+    private dispatchMenuClose() {
+      this.dispatchEvent(
+        new CustomEvent("menu-overlay-close", {
+          composed: true,
+          bubbles: true
+        })
+      );
+    }
+
+    private handleInstance(createInstance: boolean) {
+      if (createInstance) {
+        this.create();
+      } else {
+        this.destroy();
+      }
+    }
+
+    private create() {
+      if (this.triggerElement) {
+        this.popperInstance = createPopper(this.triggerElement, this.overlayContainer, {
+          onFirstUpdate: async () => {
+            // We need to find all focusable elements, after Popper finish its positioning calculation
+            if (this.isOpen) {
+              this.setFocusableElements!();
+              await this.updateComplete;
+              this.focusInsideOverlay();
+            }
+          },
+          placement: this.placement,
+          modifiers: [
+            ...defaultModifiers,
+            flip,
+            offset,
+            preventOverflow,
+            arrow,
+            {
+              name: "preventOverflow",
+              options: {
+                padding: 16
+              }
+            },
+            {
+              name: "offset",
+              options: {
+                offset: (({ placement, reference }) => {
+                  if (placement === "left-end" || placement === "right-end") {
+                    return [reference.height + reference.y + 3, 14];
+                  } else {
+                    return [0, this.overlayOffset];
+                  }
+                }) as OffsetsFunction
+              }
+            },
+            {
+              name: "arrow",
+              options: {
+                element: this.arrow,
+                padding: 5
+              }
+            },
+            {
+              name: "computeStyles",
+              options: {
+                adaptive: false // this will recompute popper position
+              }
+            }
+          ]
+        });
+      }
+    }
+
+    private destroy() {
+      if (this.popperInstance) {
+        this.popperInstance.destroy();
+        this.popperInstance = null;
+      }
+    }
+
+    private handleTriggerClick = () => {
+      this.toggleOverlay();
+    };
+
+    private toggleOverlay() {
+      if (!this.disabled) {
+        this.isOpen = !this.isOpen;
+      }
+    }
+
+    private setOverlay = debounce((flag: boolean) => {
+      if (!this.disabled) {
+        this.isOpen = flag;
+      }
+    }, 100);
+
+    private expandPopup = () => {
+      this.setOverlay(true);
+    };
+
+    private collapsePopup = () => {
+      this.setOverlay(false);
+    };
+
+    handleOutsideOverlayKeydown = async (event: KeyboardEvent) => {
+      let insideMenuKeyDown = false;
+      const path = event.composedPath();
+      if (path.length) {
+        insideMenuKeyDown = !!path.find((element) => element === this);
+        if (!insideMenuKeyDown) {
+          return;
+        }
+      }
+
+      if (!this.overlayContainer) {
+        return;
+      }
+
+      if (event.code === Key.Escape) {
+        event.preventDefault();
+        const lastOverlay =
+          MenuOverlay.ELEMENT.activeOverlay.length > 0
+            ? MenuOverlay.ELEMENT.activeOverlay[MenuOverlay.ELEMENT.activeOverlay.length - 1]
+            : undefined;
+        if (lastOverlay === this) {
+          this.isOpen = false;
+          await this.updateComplete;
+          this.focusOnTrigger();
+        }
+      }
+    };
+
+    handleTriggerKeyDown = async (event: KeyboardEvent) => {
+      switch (event.code) {
+        case Key.Space:
+        case Key.Enter:
+          {
+            event.preventDefault();
+            this.toggleOverlay();
+
+            if (!this.isOpen) {
+              await this.updateComplete;
+              this.focusOnTrigger();
+            }
+          }
+          break;
+        default: {
+          break;
+        }
+      }
+    };
+
+    private focusOnTrigger() {
+      requestAnimationFrame(() => {
+        if (this.focusableElements && this.focusableElements.length) {
+          this.focusableElements[0].focus();
+        }
+      });
+    }
+
+    private focusInsideOverlay() {
+      if (this.focusableElements) {
+        if (this.focusableElements.length > 1) {
+          this.setInitialFocus!(1);
+        } else if (this.focusableElements.length) {
+          this.setInitialFocus!();
+        }
+      }
+    }
+
+    private focusOnNestedTrigger(triggerElement?: HTMLElement) {
+      this.setFocusOnTrigger!(triggerElement);
+    }
+
+    handleOutsideOverlayClick = (event: MouseEvent) => {
+      let insideMenuClick = false;
+      const path = event.composedPath();
+      if (path.length) {
+        insideMenuClick = !!path.find((element) => element === this);
+        if (!insideMenuClick && !this.preventClickOutside) {
+          this.isOpen = false;
+        }
+      }
+    };
+
+    handleWindowBlurEvent() {
+      if (this._isOpen) {
+        this.isOpen = false;
+      }
+    }
+
+    static get styles() {
+      return [styles];
+    }
+
+    render() {
+      return html`
+        ${this.getStyles()}
+        <div class="md-menu-overlay">
+          <slot name="menu-trigger" aria-expanded=${this.isOpen}></slot>
+          <div
+            part="overlay"
+            class="overlay-container"
+            role=${this.ariaRole}
+            aria-modal=${ifDefined(this.ariaRole === "dialog" ? "true" : undefined)}
+            aria-label=${ifDefined(this.ariaLabel || undefined)}
+          >
+            <div id="arrow" class="overlay-arrow" data-popper-arrow></div>
+            <div class="overlay-content" part="overlay-content">
+              <slot></slot>
+            </div>
+          </div>
+        </div>
+      `;
+    }
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "md-menu-overlay": MenuOverlay.ELEMENT;
+  }
+}

package/src/components/menu-overlay/scss/menu-overlay.scss

@@ -0,0 +1,75 @@
+/** @component menu-overlay */
+@include exports("md-menu-overlay") {
+  .md-menu-overlay {
+    box-sizing: border-box;
+    color: var(--md-primary-text-color);
+    position: relative;
+
+    * {
+      box-sizing: inherit;
+    }
+
+    .overlay-content {
+      background-color: var(--md-primary-bg-color);
+      border: 1px solid var(--md-menu-overlay-border-color, --gray-20);
+      border-radius: rem-calc($global-radius * 2);
+      display: flex;
+      justify-content: space-around;
+      max-width: calc(100vw - var(--vw-padding) * 2);
+      overflow-y: auto;
+    }
+
+    .overlay-container {
+      border-radius: rem-calc($global-radius * 2);
+      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.16), 0 0 1px rgba(0, 0, 0, 0.14);
+      box-sizing: border-box;
+      display: none;
+      position: absolute;
+      z-index: 1000;
+
+      &[data-show] {
+        display: block;
+      }
+    }
+  }
+
+  .overlay-arrow {
+    filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.16));
+    height: 0;
+    visibility: hidden;
+    width: 0;
+    z-index: -1;
+
+    &[data-show] {
+      visibility: visible;
+    }
+  }
+
+  .overlay-container[data-popper-placement^="top"] > .overlay-arrow {
+    border-left: solid $arrow-size transparent;
+    border-right: solid $arrow-size transparent;
+    border-top: solid $arrow-size var(--md-menu-overlay-arrow-bg-color, var(--md-tertiary-white-bg-color));
+    bottom: $arrow-offset;
+  }
+
+  .overlay-container[data-popper-placement^="bottom"] > .overlay-arrow {
+    border-bottom: solid $arrow-size var(--md-menu-overlay-arrow-bg-color, var(--md-tertiary-white-bg-color));
+    border-left: solid $arrow-size transparent;
+    border-right: solid $arrow-size transparent;
+    top: $arrow-offset;
+  }
+
+  .overlay-container[data-popper-placement^="right"] > .overlay-arrow {
+    border-bottom: solid $arrow-size transparent;
+    border-right: solid $arrow-size var(--md-menu-overlay-arrow-bg-color, var(--md-tertiary-white-bg-color));
+    border-top: solid $arrow-size transparent;
+    left: $arrow-offset;
+  }
+
+  .overlay-container[data-popper-placement^="left"] > .overlay-arrow {
+    border-bottom: solid $arrow-size transparent;
+    border-left: solid $arrow-size var(--md-menu-overlay-arrow-bg-color, var(--md-tertiary-white-bg-color));
+    border-top: solid $arrow-size transparent;
+    right: $arrow-offset;
+  }
+}

package/src/components/menu-overlay/scss/module.scss

@@ -0,0 +1,12 @@
+@import "@/wc_scss/tools/functions/core";
+
+// Settings
+@import "@/wc_scss/colors/settings-base.scss";
+@import "@/wc_scss/colors/settings-transparencies.scss";
+@import "@/wc_scss/settings/core.scss";
+@import "@/wc_scss/settings/list-item.scss";
+@import "@/wc_scss/tools/mixins/easing.scss";
+
+// Component Specific
+@import "settings";
+@import "menu-overlay";

package/src/components/menu-overlay/scss/settings.scss

@@ -0,0 +1,6 @@
+$arrow-size: rem-calc(16);
+$arrow-offset: rem-calc(2) - $arrow-size;
+
+:host {
+  --vw-padding: 16px;
+}

package/src/components/modal/Modal.stories.ts

@@ -0,0 +1,78 @@
+/**
+ * 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.
+ *
+ */
+
+import "@/components/modal/Modal";
+import { ThemeNameValues } from "@/components/theme/Theme";
+import { action } from "@storybook/addon-actions";
+import { Args } from "@storybook/web-components";
+import { html } from "lit-element";
+import { modalType } from "./Modal"; // Keep type import as a relative path
+
+export default {
+  title: "Components/Modal",
+  component: "md-modal",
+  argTypes: {
+    htmlId: { table: { disable: true } },
+    noExitOnEsc: { table: { disable: true } },
+    backDrop: { table: { disable: true } },
+    handleCloseOutside: { table: { disable: true } },
+    modalBackDropClassMap: { table: { disable: true } },
+    modalContainerClassMap: { table: { disable: true } },
+    theme: { control: { type: "select", options: ThemeNameValues }, defaultValue: "lumos" },
+    darkTheme: { control: "boolean", defaultValue: false },
+    show: { control: "boolean", defaultValue: false },
+    headerLabel: { control: "text", defaultValue: "Test header text" },
+    headerMessage: { control: "text", defaultValue: "Test message in header" },
+    size: { control: { type: "select", options: modalType }, defaultValue: "default" },
+    closeBtnName: { control: "text", defaultValue: "Save" },
+    showCloseButton: { control: "boolean", defaultValue: true },
+    backdropClickExit: { control: "boolean", defaultValue: false },
+    hideFooter: { control: "boolean", defaultValue: false },
+    hideHeader: { control: "boolean", defaultValue: false }
+  },
+  parameters: {
+    a11y: {
+      element: "md-modal"
+    }
+  }
+};
+
+const content = html`
+  <p>
+    This pattern may seem inefficient, since the same style sheet is reproduced in a each instance of an element.
+    However, the browser can deduplicate multiple instances of the same style sheet, so the cost of parsing the style
+    sheet is only paid once.
+  </p>
+`;
+
+export const Modal = (args: Args) => {
+  return html`
+    <md-theme class="theme-toggle" id="modal" ?darkTheme=${args.darkTheme} theme=${args.theme}>
+      <md-modal
+        .size="${args.size}"
+        .show=${args.show}
+        headerLabel="${args.headerLabel}"
+        headerMessage="${args.headerMessage}"
+        closeBtnName="${args.closeBtnName}"
+        .showCloseButton="${args.showCloseButton}"
+        .backdropClickExit="${args.backdropClickExit}"
+        ?hideFooter=${args.hideFooter}
+        ?hideHeader=${args.hideHeader}
+        @close-modal=${action("click")}
+      >
+        <div slot="header">
+          <span>Test slot header</span>
+        </div>
+        ${content}
+        <div slot="footer">
+          <span>Test slot footer</span>
+        </div>
+      </md-modal>
+    </md-theme>
+  `;
+};