@nectary/components 0.40.0 → 0.41.1

package/pop/index.js

@@ -0,0 +1,429 @@
+import dialogPolyfill from 'dialog-polyfill';
+import { defineCustomElement, getBooleanAttribute, getLiteralAttribute, getRect, isAttrTrue, updateLiteralAttribute, getReactEventHandler, updateBooleanAttribute, NectaryElement, throttleAnimationFrame, isElementFocused, updateIntegerAttribute, getIntegerAttribute, getFirstFocusableElement, getFirstSlotElement } from '../utils';
+import { Context, dispatchContextConnectEvent, dispatchContextDisconnectEvent } from '../utils/context';
+const templateHTML = '<style>:host{display:contents;position:relative}dialog{position:fixed;left:0;top:0;margin:0;outline:0;padding:0;border:none;box-sizing:border-box;max-width:unset;max-height:unset;z-index:1;background:0 0;overflow:visible}dialog:not([open]){display:none}dialog::backdrop{background-color:transparent}dialog+.backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background-color:transparent}dialog.fixed{position:fixed;top:50%;transform:translate(0,-50%)}._dialog_overlay{position:fixed;top:0;right:0;bottom:0;left:0}#content{position:relative;z-index:1}#target-open{display:flex;flex-direction:column;position:absolute;left:0;top:0}#focus{display:none;position:absolute;width:0;height:0}</style><slot id="target" aria-haspopup="dialog" aria-expanded="false" name="target"></slot><div id="focus" tabindex="-1"></div><dialog id="dialog"><div id="content"><slot name="content"></slot></div><div id="target-open"><slot name="target-open"></slot></div></dialog>';
+import { assertOrientation, disableScroll, enableScroll, orientationValues } from './utils';
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+defineCustomElement('sinch-pop', class extends NectaryElement {
+  #$target;
+  #$focus;
+  #$dialog;
+  #isConnected;
+  #resizeThrottle;
+  #$targetSlot;
+  #$targetOpenSlot;
+  #$contentSlot;
+  #$targetOpenWrapper;
+  #targetActiveElement = null;
+  #controller = null;
+  #keydownContext;
+  #visibilityContext;
+  #targetStyleValue = null;
+
+  constructor() {
+    super();
+    const shadowRoot = this.attachShadow();
+    shadowRoot.appendChild(template.content.cloneNode(true));
+    this.#$target = shadowRoot.querySelector('#target');
+    this.#$focus = shadowRoot.querySelector('#focus');
+    this.#$dialog = shadowRoot.querySelector('#dialog');
+    this.#$targetSlot = shadowRoot.querySelector('slot[name="target"]');
+    this.#$targetOpenSlot = shadowRoot.querySelector('slot[name="target-open"]');
+    this.#$contentSlot = shadowRoot.querySelector('slot[name="content"]');
+    this.#$targetOpenWrapper = shadowRoot.querySelector('#target-open');
+    this.#isConnected = false;
+    this.#resizeThrottle = throttleAnimationFrame(this.#updateOrientation);
+    this.#keydownContext = new Context(this.#$contentSlot, 'keydown');
+    this.#visibilityContext = new Context(this.#$contentSlot, 'visibility');
+    dialogPolyfill.registerDialog(this.#$dialog);
+
+    dialogPolyfill.dm.handleFocus_ = function () {};
+  }
+
+  connectedCallback() {
+    this.#controller = new AbortController();
+    const {
+      signal
+    } = this.#controller;
+    this.#keydownContext.subscribe();
+    this.#visibilityContext.subscribe();
+    this.setAttribute('role', 'dialog');
+    this.#$dialog.addEventListener('cancel', this.#onCancel, {
+      signal
+    });
+    this.#$dialog.addEventListener('mousedown', this.#onBackdropMouseDown, {
+      signal
+    });
+    this.addEventListener('-close', this.#onCloseReactHandler, {
+      signal
+    });
+    this.addEventListener('-visibility', this.#onContextVisibility, {
+      signal
+    });
+    dispatchContextConnectEvent(this, 'visibility');
+    this.#isConnected = true;
+
+    if (getBooleanAttribute(this, 'open')) {
+      this.#onExpand();
+    }
+  }
+
+  disconnectedCallback() {
+    this.#controller.abort();
+    this.#keydownContext.unsubscribe();
+    this.#visibilityContext.unsubscribe();
+    dispatchContextDisconnectEvent(this, 'visibility');
+    this.#onCollapse();
+    this.#isConnected = false;
+  }
+
+  static get observedAttributes() {
+    return ['orientation', 'open'];
+  }
+
+  set modal(isModal) {
+    updateBooleanAttribute(this, 'modal', isModal);
+  }
+
+  get modal() {
+    return getBooleanAttribute(this, 'modal');
+  }
+
+  set open(isOpen) {
+    updateBooleanAttribute(this, 'open', isOpen);
+  }
+
+  get open() {
+    return getBooleanAttribute(this, 'open');
+  }
+
+  get orientation() {
+    return getLiteralAttribute(this, orientationValues, 'orientation');
+  }
+
+  set orientation(value) {
+    updateLiteralAttribute(this, orientationValues, 'orientation', value);
+  }
+
+  set inset(inset) {
+    updateIntegerAttribute(this, 'inset', inset);
+  }
+
+  get inset() {
+    return getIntegerAttribute(this, 'inset', 0);
+  }
+
+  get footprintRect() {
+    return this.#getTargetRect();
+  }
+
+  get popoverRect() {
+    return getRect(this.#$dialog);
+  }
+
+  attributeChangedCallback(name, oldVal, newVal) {
+    if (oldVal === newVal) {
+      return;
+    }
+
+    switch (name) {
+      case 'open':
+        {
+          if (isAttrTrue(newVal)) {
+            requestAnimationFrame(() => {
+              this.#onExpand();
+            });
+          } else {
+            this.#onCollapse();
+          }
+
+          updateBooleanAttribute(this, 'open', isAttrTrue(newVal));
+          break;
+        }
+
+      case 'orientation':
+        {
+          assertOrientation(newVal);
+
+          if (this.#isOpen()) {
+            this.#updateOrientation();
+          }
+
+          break;
+        }
+    }
+  }
+
+  #getTargetRect() {
+    let item = getFirstSlotElement(this.#$targetSlot, true);
+
+    if (item === null && this.#isOpen()) {
+      item = getFirstSlotElement(this.#$targetOpenSlot, true);
+    }
+
+    if (item === null) {
+      return getRect(this.#$target);
+    }
+
+    if (Reflect.has(item, 'footprintRect')) {
+      return item.footprintRect;
+    }
+
+    return getRect(item);
+  }
+
+  #getFirstTargetElement(slot) {
+    const item = getFirstSlotElement(slot, true);
+
+    if (item === null) {
+      return this.#$target;
+    }
+
+    return item;
+  }
+
+  #onExpand() {
+    if (!this.#isConnected || this.#isOpen()) {
+      return;
+    }
+
+    this.#$targetSlot.addEventListener('blur', this.#stopEventPropagation, true);
+    this.#$focus.style.setProperty('display', 'block');
+    this.#$focus.addEventListener('focus', this.#captureRelatedActiveElement);
+    this.#$focus.focus();
+    this.#$focus.removeEventListener('focus', this.#captureRelatedActiveElement);
+    this.#$focus.style.removeProperty('display');
+    this.#$targetSlot.removeEventListener('blur', this.#stopEventPropagation, true);
+    this.#$dialog.showModal();
+    this.#$target.setAttribute('aria-expanded', 'true');
+    this.#updateOrientation();
+
+    if (this.modal) {
+      getFirstFocusableElement(this.#$contentSlot)?.focus();
+    } else {
+      const $targetEl = this.#getFirstTargetElement(this.#$targetSlot);
+      const targetElComputedStyle = getComputedStyle($targetEl);
+      const marginLeft = parseInt(targetElComputedStyle.marginLeft);
+      const marginRight = parseInt(targetElComputedStyle.marginRight);
+      const marginTop = parseInt(targetElComputedStyle.marginTop);
+      const marginBottom = parseInt(targetElComputedStyle.marginBottom);
+      const targetRect = this.#getTargetRect();
+      this.#$target.style.setProperty('display', 'block');
+      this.#$target.style.setProperty('width', `${targetRect.width + marginLeft + marginRight}px`);
+      this.#$target.style.setProperty('height', `${targetRect.height + marginTop + marginBottom}px`);
+      this.#$targetOpenWrapper.style.setProperty('width', `${targetRect.width}px`);
+      this.#$targetOpenWrapper.style.setProperty('height', `${targetRect.height}px`);
+      this.#targetStyleValue = $targetEl.getAttribute('style');
+      $targetEl.style.setProperty('margin', '0');
+      $targetEl.style.setProperty('position', 'static');
+
+      if (targetElComputedStyle.transform !== 'none') {
+        const matrix = new DOMMatrixReadOnly(targetElComputedStyle.transform);
+        $targetEl.style.setProperty('transform', matrix.translate(-matrix.e, -matrix.f).toString());
+      }
+
+      getFirstSlotElement(this.#$targetSlot)?.setAttribute('slot', 'target-open');
+      this.#$targetOpenSlot.addEventListener('keydown', this.#onTargetKeydown);
+
+      if (this.#targetActiveElement !== null) {
+        requestAnimationFrame(this.#focusTargetElementOnExpandNonModal);
+        this.#focusTargetElementOnExpandNonModal();
+      }
+    }
+
+    disableScroll();
+    window.addEventListener('resize', this.#onResize);
+    this.#dispatchContentVisibility(true);
+  }
+
+  #focusTargetElementOnExpandNonModal = () => {
+    if (this.#targetActiveElement !== null) {
+      this.#$targetOpenSlot.addEventListener('focus', this.#stopEventPropagation, true);
+      this.#targetActiveElement.focus();
+      this.#$targetOpenSlot.removeEventListener('focus', this.#stopEventPropagation, true);
+    }
+  };
+
+  #onCollapse() {
+    if (!this.#isOpen()) {
+      return;
+    }
+
+    const isNonModal = !this.modal;
+    this.#dispatchContentVisibility(false);
+    this.#$targetOpenSlot.removeEventListener('keydown', this.#onTargetKeydown);
+
+    if (isNonModal) {
+      this.#targetActiveElement = null;
+      this.#$targetOpenSlot.addEventListener('blur', this.#captureActiveElement, true);
+    }
+
+    this.#$dialog.close();
+    this.#$target.setAttribute('aria-expanded', 'false');
+
+    if (isNonModal) {
+      this.#$targetOpenSlot.removeEventListener('blur', this.#captureActiveElement, true);
+    }
+
+    const targetEl = this.#getFirstTargetElement(this.#$targetOpenSlot);
+    targetEl.style.removeProperty('margin');
+    targetEl.style.removeProperty('position');
+    targetEl.style.removeProperty('transform');
+
+    if (this.#targetStyleValue !== null) {
+      targetEl.setAttribute('style', this.#targetStyleValue);
+      this.#targetStyleValue = null;
+    }
+
+    getFirstSlotElement(this.#$targetOpenSlot)?.setAttribute('slot', 'target');
+    this.#$target.style.removeProperty('display');
+    this.#$target.style.removeProperty('width');
+    this.#$target.style.removeProperty('height');
+
+    if (this.#targetActiveElement !== null) {
+      if (!isElementFocused(this.#targetActiveElement)) {
+        this.#$targetSlot.addEventListener('focus', this.#stopEventPropagation, true);
+        this.#targetActiveElement.focus();
+        this.#$targetSlot.removeEventListener('focus', this.#stopEventPropagation, true);
+      }
+
+      this.#targetActiveElement = null;
+    }
+
+    enableScroll();
+    this.#resizeThrottle.cancel();
+    window.removeEventListener('resize', this.#onResize);
+  }
+
+  #isOpen() {
+    return getBooleanAttribute(this.#$dialog, 'open');
+  }
+
+  #onResize = () => {
+    this.#resizeThrottle.fn();
+  };
+  #updateOrientation = () => {
+    this.#$dialog.style.setProperty('width', 'max-content');
+    const targetRect = this.#getTargetRect();
+    const modalRect = this.#$dialog.getBoundingClientRect();
+    const orient = this.orientation;
+    const shouldSetWidthToTarget = orient === 'top-stretch' || orient === 'bottom-stretch';
+    const modalHeight = modalRect.height;
+    const modalWidth = shouldSetWidthToTarget ? targetRect.width : modalRect.width;
+    const inset = this.inset;
+    let xPos = 0;
+    let yPos = 0;
+
+    if (orient === 'bottom-right' || orient === 'top-right' || orient === 'top-stretch' || orient === 'bottom-stretch') {
+      xPos = targetRect.x;
+    }
+
+    if (orient === 'bottom-left' || orient === 'top-left') {
+      xPos = targetRect.x + targetRect.width - modalWidth;
+    }
+
+    if (orient === 'bottom-center' || orient === 'top-center') {
+      xPos = targetRect.x + targetRect.width / 2 - modalWidth / 2;
+    }
+
+    if (orient === 'center-right') {
+      xPos = targetRect.x + targetRect.width;
+    }
+
+    if (orient === 'center-left') {
+      xPos = targetRect.x - modalWidth;
+    }
+
+    if (orient === 'bottom-left' || orient === 'bottom-right' || orient === 'bottom-stretch' || orient === 'bottom-center') {
+      yPos = targetRect.y + targetRect.height;
+    }
+
+    if (orient === 'top-left' || orient === 'top-right' || orient === 'top-stretch' || orient === 'top-center') {
+      yPos = targetRect.y - modalHeight;
+    }
+
+    if (orient === 'center-left' || orient === 'center-right') {
+      yPos = targetRect.y + targetRect.height / 2 - modalHeight / 2;
+    }
+
+    xPos = Math.round(Math.max(inset, Math.min(xPos, window.innerWidth - modalWidth - inset)));
+    yPos = Math.round(Math.max(inset, Math.min(yPos, window.innerHeight - modalHeight - inset)));
+    this.#$dialog.style.setProperty('left', `${xPos}px`);
+    this.#$dialog.style.setProperty('top', `${yPos}px`);
+    this.#$dialog.style.setProperty('width', `${modalWidth}px`);
+
+    if (!this.modal) {
+      const targetLeftPos = targetRect.x - xPos;
+      const targetTopPos = targetRect.y - yPos;
+      this.#$targetOpenWrapper.style.setProperty('left', `${targetLeftPos}px`);
+      this.#$targetOpenWrapper.style.setProperty('top', `${targetTopPos}px`);
+    }
+  };
+  #onBackdropMouseDown = e => {
+    if (e.target !== this.#$dialog) {
+      return;
+    }
+
+    const rect = this.popoverRect;
+    const isInside = e.x >= rect.x && e.x < rect.x + rect.width && e.y >= rect.y && e.y < rect.y + rect.height;
+
+    if (!isInside) {
+      this.#dispatchCloseEvent();
+    }
+  };
+  #onCancel = e => {
+    e.preventDefault();
+    this.#dispatchCloseEvent();
+  };
+  #onCloseReactHandler = e => {
+    getReactEventHandler(this, 'on-close')?.(e);
+  };
+
+  #dispatchCloseEvent() {
+    this.dispatchEvent(new CustomEvent('-close'));
+  }
+
+  #captureRelatedActiveElement = e => {
+    e.stopPropagation();
+    this.#targetActiveElement = e.relatedTarget;
+  };
+  #captureActiveElement = e => {
+    e.stopPropagation();
+    this.#targetActiveElement = e.target;
+  };
+  #stopEventPropagation = e => {
+    e.stopPropagation();
+  };
+
+  #dispatchContentVisibility(isVisible) {
+    for (const $el of this.#visibilityContext.elements) {
+      $el.dispatchEvent(new CustomEvent('-visibility', {
+        detail: isVisible
+      }));
+    }
+  }
+
+  #onTargetKeydown = e => {
+    for (const $el of this.#keydownContext.elements) {
+      let isPrevented = false;
+      $el.dispatchEvent(new CustomEvent('-keydown', {
+        detail: {
+          code: e.code,
+          preventDefault: () => {
+            isPrevented = true;
+          }
+        }
+      }));
+
+      if (isPrevented) {
+        e.preventDefault();
+      }
+    }
+  };
+  #onContextVisibility = e => {
+    if (!e.detail) {
+      this.#dispatchCloseEvent();
+    }
+  };
+});

package/pop/types.d.ts

@@ -0,0 +1,35 @@
+import type { TRect, TSinchElementReact } from '../types';
+export declare type TSinchPopOrientation = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'bottom-center' | 'bottom-stretch' | 'top-center' | 'top-stretch' | 'center-right' | 'center-left';
+export declare type TSinchPopElement = HTMLElement & {
+    /** Open/close state */
+    open: boolean;
+    /** Orientation, where it *points to* from origin */
+    orientation: TSinchPopOrientation;
+    /** Modal/non-modal mode */
+    modal: boolean;
+    inset: number;
+    readonly footprintRect: TRect;
+    readonly popoverRect: TRect;
+    /** Close event */
+    addEventListener(type: '-close', listener: (e: CustomEvent<void>) => void): void;
+    /** Open/close state */
+    setAttribute(name: 'open', value: ''): void;
+    /** Orientation, where it *points to* from origin */
+    setAttribute(name: 'orientation', value: TSinchPopOrientation): void;
+    /** Modal/non-modal mode */
+    setAttribute(name: 'modal', value: boolean): void;
+    setAttribute(name: 'inset', value: string): void;
+};
+export declare type TSinchPopReact = TSinchElementReact<TSinchPopElement> & {
+    /** Open/close state */
+    open: boolean;
+    /** Orientation, where it *points to* from origin */
+    orientation: TSinchPopOrientation;
+    /** Modal/non-modal mode */
+    modal?: boolean;
+    inset?: number;
+    /** Label that is used for a11y */
+    'aria-label': string;
+    /** Close event handler */
+    'on-close'?: (e: CustomEvent<void>) => void;
+};

package/pop/utils.d.ts

@@ -0,0 +1,7 @@
+import type { TSinchPopOrientation } from './types';
+export declare const orientationValues: readonly TSinchPopOrientation[];
+declare type TAssertOrientation = (value: string | null) => asserts value is TSinchPopOrientation;
+export declare const assertOrientation: TAssertOrientation;
+export declare const disableScroll: () => void;
+export declare const enableScroll: () => void;
+export {};

package/pop/utils.js

@@ -0,0 +1,18 @@
+export const orientationValues = ['top-left', 'top-right', 'bottom-left', 'bottom-right', 'bottom-stretch', 'bottom-center', 'top-stretch', 'top-center', 'center-left', 'center-right'];
+export const assertOrientation = value => {
+  if (value === null || !orientationValues.includes(value)) {
+    throw new Error(`sinch-pop: invalid orientation attribute: ${value}`);
+  }
+};
+const bodyEl = document.body;
+export const disableScroll = () => {
+  bodyEl.style.overflow = 'hidden';
+  bodyEl.__pop_counter__ = (bodyEl.__pop_counter__ ?? 0) + 1;
+};
+export const enableScroll = () => {
+  bodyEl.__pop_counter__ = Math.max(0, (bodyEl.__pop_counter__ ?? 0) - 1);
+
+  if (bodyEl.__pop_counter__ === 0) {
+    document.body.style.overflow = '';
+  }
+};

package/popover/index.d.ts

@@ -1,3 +1,4 @@
+import '../pop';
 import type { TSinchPopoverElement, TSinchPopoverReact } from './types';
 declare global {
     namespace JSX {