@aquera/nile-elements 0.0.1-beta.3 → 0.0.1-beta.4

package/src/nile-dropdown/nile-dropdown.ts

@@ -0,0 +1,461 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {LitElement, html, property, CSSResultArray, TemplateResult} from 'lit-element';
+import { customElement } from 'lit/decorators.js';
+import {styles} from './nile-dropdown.css';
+import { animateTo, stopAnimations } from '../internal/animate';
+import { classMap } from 'lit/directives/class-map.js';
+import {  query } from 'lit/decorators.js';
+import { getAnimation, setDefaultAnimation } from '../utilities/animation-registry';
+import { getTabbableBoundary } from '../internal/tabbable';
+import { waitForEvent } from '../internal/event';
+import { watch } from '../internal/watch';
+import NileElement from '../internal/nile-element';
+import type { CSSResultGroup } from 'lit';
+import type NileButton from '../nile-button/nile-button';
+import type NileIconButton from '../nile-icon-button/nile-icon-button';
+import type { NileMenu } from '../nile-menu';
+import type { NilePopup } from '../nile-popup';
+import '../nile-popup';
+
+/**
+ * Nile icon component.
+ *
+ * @tag nile-dropdown
+ * @summary Dropdowns expose additional content that "drops down" in a panel.
+ * @dependency nile-popup
+ *
+ * @slot - The dropdown's main content.
+ * @slot trigger - The dropdown's trigger, usually a `<nile-button>` element.
+ *
+ * @event nile-show - Emitted when the dropdown opens.
+ * @event nile-after-show - Emitted after the dropdown opens and all animations are complete.
+ * @event nile-hide - Emitted when the dropdown closes.
+ * @event nile-after-hide - Emitted after the dropdown closes and all animations are complete.
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart trigger - The container that wraps the trigger.
+ * @csspart panel - The panel that gets shown when the dropdown is open.
+ *
+ * @animation dropdown.show - The animation to use when showing the dropdown.
+ * @animation dropdown.hide - The animation to use when hiding the dropdown.
+ */
+@customElement('nile-dropdown')
+export class NileDropdown extends NileElement {
+  static styles: CSSResultGroup = styles;
+
+  @query('.dropdown') popup: NilePopup;
+  @query('.dropdown__trigger') trigger: HTMLSlotElement;
+  @query('.dropdown__panel') panel: HTMLSlotElement;
+
+
+  /**
+   * Indicates whether or not the dropdown is open. You can toggle this attribute to show and hide the dropdown, or you
+   * can use the `show()` and `hide()` methods and this attribute will reflect the dropdown's open state.
+   */
+  @property({ type: Boolean, reflect: true }) open = false;
+
+  /**
+   * The preferred placement of the dropdown panel. Note that the actual placement may vary as needed to keep the panel
+   * inside of the viewport.
+   */
+  @property({ reflect: true }) placement:
+    | 'top'
+    | 'top-start'
+    | 'top-end'
+    | 'bottom'
+    | 'bottom-start'
+    | 'bottom-end'
+    | 'right'
+    | 'right-start'
+    | 'right-end'
+    | 'left'
+    | 'left-start'
+    | 'left-end' = 'bottom-start';
+
+  /** Disables the dropdown so the panel will not open. */
+  @property({ type: Boolean, reflect: true }) disabled = false;
+
+  /**
+   * By default, the dropdown is closed when an item is selected. This attribute will keep it open instead. Useful for
+   * dropdowns that allow for multiple interactions.
+   */
+  @property({ attribute: 'stay-open-on-select', type: Boolean, reflect: true }) stayOpenOnSelect = false;
+
+  /**
+   * The dropdown will close when the user interacts outside of this element (e.g. clicking). Useful for composing other
+   * components that use a dropdown internally.
+   */
+  @property({ attribute: false }) containingElement?: HTMLElement;
+
+  /** The distance in pixels from which to offset the panel away from its trigger. */
+  @property({ type: Number }) distance = 0;
+
+
+  @property({ type: Boolean }) noOpenOnClick = false;
+
+  /** The distance in pixels from which to offset the panel along its trigger. */
+  @property({ type: Number }) skidding = 0;
+
+  /**
+   * Enable this option to prevent the panel from being clipped when the component is placed inside a container with
+   * `overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.
+   */
+  @property({ type: Boolean }) hoist = false;
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.handlePanelSelect = this.handlePanelSelect.bind(this);
+    this.handleKeyDown = this.handleKeyDown.bind(this);
+    this.handleDocumentKeyDown = this.handleDocumentKeyDown.bind(this);
+    this.handleDocumentMouseDown = this.handleDocumentMouseDown.bind(this);
+
+    if (!this.containingElement) {
+      this.containingElement = this;
+    }
+  }
+
+  firstUpdated() {
+    this.panel.hidden = !this.open;
+
+    // If the dropdown is visible on init, update its position
+    if (this.open) {
+      this.addOpenListeners();
+      this.popup.active = true;
+    }
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeOpenListeners();
+    this.hide();
+  }
+
+  focusOnTrigger() {
+    const trigger = this.trigger.assignedElements({ flatten: true })[0] as HTMLElement | undefined;
+    if (typeof trigger?.focus === 'function') {
+      trigger.focus();
+    }
+  }
+
+  getMenu() {
+    return this.panel.assignedElements({ flatten: true }).find(el => el.tagName.toLowerCase() === 'nile-menu') as
+      | NileMenu
+      | undefined;
+  }
+
+  handleKeyDown(event: KeyboardEvent) {
+    // Close when escape is pressed inside an open dropdown. We need to listen on the panel itself and stop propagation
+    // in case any ancestors are also listening for this key.
+    if (this.open && event.key === 'Escape') {
+      event.stopPropagation();
+      this.hide();
+      this.focusOnTrigger();
+    }
+  }
+
+  handleDocumentKeyDown(event: KeyboardEvent) {
+    // Close when escape or tab is pressed
+    if (event.key === 'Escape' && this.open) {
+      event.stopPropagation();
+      this.focusOnTrigger();
+      this.hide();
+      return;
+    }
+
+    // Handle tabbing
+    if (event.key === 'Tab') {
+      // Tabbing within an open menu should close the dropdown and refocus the trigger
+      if (this.open && document.activeElement?.tagName.toLowerCase() === 'nile-menu-item') {
+        event.preventDefault();
+        this.hide();
+        this.focusOnTrigger();
+        return;
+      }
+
+      // Tabbing outside of the containing element closes the panel
+      //
+      // If the dropdown is used within a shadow DOM, we need to obtain the activeElement within that shadowRoot,
+      // otherwise `document.activeElement` will only return the name of the parent shadow DOM element.
+      setTimeout(() => {
+        const activeElement =
+          this.containingElement?.getRootNode() instanceof ShadowRoot
+            ? document.activeElement?.shadowRoot?.activeElement
+            : document.activeElement;
+
+        if (
+          !this.containingElement ||
+          activeElement?.closest(this.containingElement.tagName.toLowerCase()) !== this.containingElement
+        ) {
+          this.hide();
+        }
+      });
+    }
+  }
+
+  handleDocumentMouseDown(event: MouseEvent) {
+    // Close when clicking outside of the containing element
+    const path = event.composedPath();
+    if (this.containingElement && !path.includes(this.containingElement)) {
+      this.hide();
+    }
+  }
+
+  handlePanelSelect(event: any) {
+    const target = event.target as HTMLElement;
+
+    // Hide the dropdown when a menu item is selected
+    if (!this.stayOpenOnSelect && target.tagName.toLowerCase() === 'nile-menu') {
+      this.hide();
+      this.focusOnTrigger();
+    }
+  }
+
+  handleTriggerClick() {
+    if(this.noOpenOnClick){
+      return;
+    }
+    if (this.open) {
+      this.hide();
+    } else {
+      this.show();
+      this.focusOnTrigger();
+    }
+  }
+
+  handleTriggerKeyDown(event: KeyboardEvent) {
+    // When spacebar/enter is pressed, show the panel but don't focus on the menu. This let's the user press the same
+    // key again to hide the menu in case they don't want to make a selection.
+    // if (['Enter'].includes(event.key)) {
+    //   event.preventDefault();
+    //   this.handleTriggerClick();
+    //   return;
+    // }
+
+    const menu = this.getMenu();
+
+    if (menu) {
+      const menuItems = menu.getAllItems();
+      const firstMenuItem = menuItems[0];
+      const lastMenuItem = menuItems[menuItems.length - 1];
+
+      // When up/down is pressed, we make the assumption that the user is familiar with the menu and plans to make a
+      // selection. Rather than toggle the panel, we focus on the menu (if one exists) and activate the first item for
+      // faster navigation.
+      if (['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) {
+        event.preventDefault();
+
+        // Show the menu if it's not already open
+        if (!this.open) {
+          this.show();
+        }
+
+        if (menuItems.length > 0) {
+          // Focus on the first/last menu item after showing
+          this.updateComplete.then(() => {
+            if (event.key === 'ArrowDown' || event.key === 'Home') {
+              menu.setCurrentItem(firstMenuItem);
+              firstMenuItem.focus();
+            }
+
+            if (event.key === 'ArrowUp' || event.key === 'End') {
+              menu.setCurrentItem(lastMenuItem);
+              lastMenuItem.focus();
+            }
+          });
+        }
+      }
+    }
+  }
+
+  handleTriggerKeyUp(event: KeyboardEvent) {
+    // Prevent space from triggering a click event in Firefox
+    if (event.key === ' ') {
+      event.preventDefault();
+    }
+  }
+
+  handleTriggerSlotChange() {
+    this.updateAccessibleTrigger();
+  }
+
+  //
+  // Slotted triggers can be arbitrary content, but we need to link them to the dropdown panel with `aria-haspopup` and
+  // `aria-expanded`. These must be applied to the "accessible trigger" (the tabbable portion of the trigger element
+  // that gets slotted in) so screen readers will understand them. The accessible trigger could be the slotted element,
+  // a child of the slotted element, or an element in the slotted element's shadow root.
+  //
+  // For example, the accessible trigger of an <nile-button> is a <button> located inside its shadow root.
+  //
+  // To determine this, we assume the first tabbable element in the trigger slot is the "accessible trigger."
+  //
+  updateAccessibleTrigger() {
+    const assignedElements = this.trigger.assignedElements({ flatten: true }) as HTMLElement[];
+    const accessibleTrigger = assignedElements.find(el => getTabbableBoundary(el).start);
+    let target: HTMLElement;
+
+    if (accessibleTrigger) {
+      switch (accessibleTrigger.tagName.toLowerCase()) {
+        // nile buttons have to update the internal button so it's announced correctly by screen readers
+        case 'nile-button':
+        case 'nile-icon-button':
+          target = (accessibleTrigger as NileButton | NileIconButton).button;
+          break;
+
+        default:
+          target = accessibleTrigger;
+      }
+
+      target.setAttribute('aria-haspopup', 'true');
+      target.setAttribute('aria-expanded', this.open ? 'true' : 'false');
+    }
+  }
+
+  /** Shows the dropdown panel. */
+  async show() {
+    if (this.open) {
+      return undefined;
+    }
+
+    this.open = true;
+    return waitForEvent(this, 'nile-after-show');
+  }
+
+  /** Hides the dropdown panel */
+  async hide() {
+    if (!this.open) {
+      return undefined;
+    }
+
+    this.open = false;
+    return waitForEvent(this, 'nile-after-hide');
+  }
+
+  /**
+   * Instructs the dropdown menu to reposition. Useful when the position or size of the trigger changes when the menu
+   * is activated.
+   */
+  reposition() {
+    this.popup.reposition();
+  }
+
+  addOpenListeners() {
+    this.panel.addEventListener('nile-select', this.handlePanelSelect);
+    this.panel.addEventListener('keydown', this.handleKeyDown);
+    document.addEventListener('keydown', this.handleDocumentKeyDown);
+    document.addEventListener('mousedown', this.handleDocumentMouseDown);
+  }
+
+  removeOpenListeners() {
+    if (this.panel) {
+      this.panel.removeEventListener('nile-select', this.handlePanelSelect);
+      this.panel.removeEventListener('keydown', this.handleKeyDown);
+    }
+    document.removeEventListener('keydown', this.handleDocumentKeyDown);
+    document.removeEventListener('mousedown', this.handleDocumentMouseDown);
+  }
+
+  @watch('open', { waitUntilFirstUpdate: true })
+  async handleOpenChange() {
+    if (this.disabled) {
+      this.open = false;
+      return;
+    }
+
+    this.updateAccessibleTrigger();
+
+    if (this.open) {
+      // Show
+      this.emit('nile-show');
+      this.addOpenListeners();
+
+      await stopAnimations(this);
+      this.panel.hidden = false;
+      this.popup.active = true;
+      const { keyframes, options } = getAnimation(this, 'dropdown.show', { dir: '' });
+      await animateTo(this.popup.popup, keyframes, options);
+
+      this.emit('nile-after-show');
+    } else {
+      // Hide
+      this.emit('nile-hide');
+      this.removeOpenListeners();
+
+      await stopAnimations(this);
+      const { keyframes, options } = getAnimation(this, 'dropdown.hide', { dir: '' });
+      await animateTo(this.popup.popup, keyframes, options);
+      this.panel.hidden = true;
+      this.popup.active = false;
+
+      this.emit('nile-after-hide');
+    }
+  }
+
+  render() {
+    return html`
+      <nile-popup
+        part="base"
+        id="dropdown"
+        placement=${this.placement}
+        distance=${this.distance}
+        skidding=${this.skidding}
+        strategy=${this.hoist ? 'fixed' : 'absolute'}
+        flip
+        shift
+        auto-size="both"
+        auto-size-padding="10"
+        class=${classMap({
+          dropdown: true,
+          'dropdown--open': this.open
+        })}
+      >
+        <slot
+          name="trigger"
+          slot="anchor"
+          part="trigger"
+          class="dropdown__trigger"
+          @click=${this.handleTriggerClick}
+          @keydown=${this.handleTriggerKeyDown}
+          @keyup=${this.handleTriggerKeyUp}
+          @slotchange=${this.handleTriggerSlotChange}
+        ></slot>
+
+        <slot
+          part="panel"
+          class="dropdown__panel"
+          aria-hidden=${this.open ? 'false' : 'true'}
+          aria-labelledby="dropdown"
+        ></slot>
+      </nile-popup>
+    `;
+  }
+}
+
+setDefaultAnimation('dropdown.show', {
+  keyframes: [
+    { opacity: 0, scale: 0.9 },
+    { opacity: 1, scale: 1 }
+  ],
+  options: { duration: 100, easing: 'ease' }
+});
+
+setDefaultAnimation('dropdown.hide', {
+  keyframes: [
+    { opacity: 1, scale: 1 },
+    { opacity: 0, scale: 0.9 }
+  ],
+  options: { duration: 100, easing: 'ease' }
+});
+
+export default NileDropdown;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'nile-dropdown': NileDropdown;
+  }
+}

package/src/nile-input/nile-input.css.ts

@@ -416,6 +416,26 @@ export const styles = css`
   .input--no-spin-buttons input[type='number'] {
     -moz-appearance: textfield;
   }
+
+  :host([no-border]) .input--standard {
+    border: none; /* Remove borders on all sides */
+    box-shadow: 0 0 0 0;
+  }
+
+  :host([no-border]) .input--standard:hover:not(.input--disabled) {
+    border: none; /* Remove borders on all sides */
+    box-shadow: 0 0 0 0;
+  }
+
+  :host([no-border]) .input--standard.input--focused:not(.input--disabled) {
+    border: none; /* Remove borders on all sides */
+    box-shadow: 0 0 0 0;
+  }
+
+  :host([no-border]) .input--standard.input--focused:not(.input--disabled) {
+    border: none; /* Remove borders on all sides */
+    box-shadow: 0 0 0 0;
+  }
 `;
 
 export default [styles];

package/src/nile-menu/index.ts

@@ -1,116 +1 @@
-import { LitElement, html, css } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { classMap } from 'lit/directives/class-map.js';
-/**
- * An nile-menu element.
- *
- * @fires count-changed - Indicates when the count changes
- * @slot - This element has a slot
- * @csspart button - The button
- */
-@customElement('nile-menu')
-export class NileMenu extends LitElement {
-  static override styles = css`
-    :host {
-      display: block;
-      width: 100%;
-    }
-    .nds-menu {
-      display: flex;
-      padding: 6px 6px;
-      border-radius: 4px;
-      cursor: pointer;
-      margin-bottom: 12px;
-      align-items: center;
-      text-decoration: none;
-    }
-
-    .nds-menu:hover {
-      background: rgba(0, 94, 166, 0.1);
-    }
-    .nds-menu__link {
-      font-family: var(--nile-font-family-sans-serif);
-      font-style: normal;
-      font-weight: 400;
-      font-size: 14px;
-      line-height: 14px;
-      letter-spacing: 0.2px;
-      color: #131415;
-      text-decoration: none;
-      margin-left: 12px;
-    }
-    .nds-menu--active {
-      background: rgba(0, 94, 166, 0.1);
-    }
-
-    .nds-menu__icon {
-      margin-bottom: 0;
-      height: 14px;
-    }
-
-    .nds-menu--short {
-      width: auto;
-      /* min-width: 30px; */
-    }
-    .nds-menu--short > .nds-menu__link {
-      display:none;
-    }
-  `;
-
-  /**
-   * Button Lab
-   */
-  @property()
-  name = 'Heading 1';
-
-  /**
-   * Button Lab
-   */
-  @property()
-  icon: string = "";
-
-  /**
-   * Button Lab
-   */
-  @property()
-  isActive: boolean = false;
-
-  /**
-   * Displays shorter version
-   */
-  @property()
-  short: boolean = false;
-
-
-  get buttonClassMap() {
-    return {
-      'nds-menu--active': this.isActive,
-      'nds-menu--short': this.short
-    };
-  }
-
-  /**
-   * Button Lab
-   */
-  @property()
-  href = "/";
-
-  override render() {
-    const { name, icon, href } = this;
-    const hrefPath = `/${href}`;
-    return html`
-      <a class="nds-menu ${classMap(this.buttonClassMap)}">
-        <span class="nds-menu__icon">
-          <nile-icon name="${this.icon}" size="14" color="#000"></nile-icon>
-        </span>
-        <span class="nds-menu__link">${this.name}</span>
-      </a>
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'nile-menu': NileMenu;
-  }
-}
+export { NileMenu } from './nile-menu';

package/src/nile-menu/nile-menu.css.ts

@@ -0,0 +1,30 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { css } from 'lit-element';
+
+/**
+ * Menu CSS
+ */
+export const styles = css`
+ :host {
+    display: block;
+    position: relative;
+    background: hsl(0, 0%, 100%);
+    border: solid 1px hsl(240 5.9% 90%);
+    border-radius: 0.25rem;
+    padding: 0.5rem 0;
+    overflow: auto;
+    overscroll-behavior: none;
+  }
+
+  ::slotted(nile-divider) {
+    --spacing: 0.5rem;
+  }
+`;
+
+export default [styles];