@nectary/components 1.1.0 → 1.1.2

package/date-picker/index.js

@@ -1,7 +1,7 @@
 import '../icon-button';
 import '../icon';
 import '../text';
-import { defineCustomElement, getAttribute, getBooleanAttribute, getCssVars, getReactEventHandler, getRect, isAttrTrue, NectaryElement, packCsv, setClass, unpackCsv, updateAttribute, updateBooleanAttribute } from '../utils';
+import { defineCustomElement, getAttribute, getBooleanAttribute, getCssVars, getReactEventHandler, getRect, getTargetAttribute, isAttrTrue, NectaryElement, packCsv, setClass, unpackCsv, updateAttribute, updateBooleanAttribute } from '../utils';
 const templateHTML = '<style>:host{display:block;outline:0}#content{width:fit-content;box-sizing:border-box;padding:16px;display:flex;flex-direction:column;gap:8px}#month{display:flex;flex-direction:column;row-gap:8px}.week{display:flex;flex-direction:row;column-gap:8px}.week.empty{display:none}.day{all:initial;font:var(--sinch-font-text-xs);color:var(--sinch-color-text-default);text-align:center;border-radius:var(--sinch-shape-radius-s);width:24px;height:24px;line-height:22px;cursor:pointer;border:1px solid transparent;background-color:transparent;box-sizing:border-box;user-select:none}.day.today{border:1px solid var(--sinch-color-tropical-500)}.day:disabled{cursor:initial;color:var(--sinch-color-snow-700)}.day:focus-visible{outline:1px solid var(--sinch-color-border-focus);outline-offset:1px}.day.range{background-color:var(--sinch-color-tropical-100)}.day.selected{background-color:var(--sinch-color-tropical-500);color:var(--sinch-color-snow-100)}.day:hover:enabled:not(.selected){background-color:var(--sinch-color-tropical-200)}#week-day-names{display:flex;flex-direction:row;gap:8px;height:24px}.week-day-name{font:var(--sinch-font-text-xs);font-weight:var(--sinch-font-weight-emphasized);color:var(--sinch-color-text-default);text-align:center;width:24px;height:24px;line-height:24px;user-select:none;text-transform:uppercase}#content-header{display:flex;flex-direction:row;height:32px;align-items:center}#date{flex:1;text-align:center;text-transform:capitalize}#prev-year{margin-left:-4px}#next-year{margin-right:-4px}</style><div id="content"><div id="content-header"><sinch-icon-button id="prev-year" size="s"><sinch-icon id="icon-prev-year" slot="icon"></sinch-icon></sinch-icon-button><sinch-icon-button id="prev-month" size="s"><sinch-icon id="icon-prev-month" slot="icon"></sinch-icon></sinch-icon-button><sinch-text id="date" type="m" emphasized aria-live="polite"></sinch-text><sinch-icon-button id="next-month" size="s"><sinch-icon id="icon-next-month" slot="icon"></sinch-icon></sinch-icon-button><sinch-icon-button id="next-year" size="s"><sinch-icon id="icon-next-year" slot="icon"></sinch-icon></sinch-icon-button></div><div id="week-day-names"><div class="week-day-name"></div><div class="week-day-name"></div><div class="week-day-name"></div><div class="week-day-name"></div><div class="week-day-name"></div><div class="week-day-name"></div><div class="week-day-name"></div></div><div id="month"><div class="week"><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button></div><div class="week"><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button></div><div class="week"><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button></div><div class="week"><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button></div><div class="week"><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button></div><div class="week"><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button></div></div></div>';
 import { areDatesEqual, assertDate, assertLocale, assertMinMax, assertValue, canGoNextMonth, canGoNextYear, canGoPrevMonth, canGoPrevYear, clampMaxDate, clampMinDate, cloneDate, dateToIso, decMonth, decYear, getCalendarMonth, getDayNames, getMonthNames, incMonth, incYear, isDateBetween, isoToDate, isValidDate, sortDates, today } from './utils';
 const template = document.createElement('template');
@@ -257,7 +257,7 @@ defineCustomElement('sinch-date-picker', class extends NectaryElement {
   };
   #onDateMouseEnter = e => {
     if (this.#date1 !== null && this.#date2 === null) {
-      const hoverDateIso = e.target.getAttribute('data-date');
+      const hoverDateIso = getTargetAttribute(e, 'data-date');
       if (hoverDateIso === null) {
         return;
       }
@@ -276,7 +276,7 @@ defineCustomElement('sinch-date-picker', class extends NectaryElement {
   };
   #onDateClick = e => {
     e.stopPropagation();
-    const dateIso = e.target.getAttribute('data-date');
+    const dateIso = getTargetAttribute(e, 'data-date');
     if (dateIso === null || dateIso.length === 0) {
       return;
     }

package/dialog/index.js

@@ -2,8 +2,9 @@ import '../icon-button';
 import '../icon';
 import '../stop-events';
 import '../title';
-import { defineCustomElement, getAttribute, getBooleanAttribute, getRect, isAttrTrue, updateAttribute, getReactEventHandler, NectaryElement, updateBooleanAttribute, getCssVar } from '../utils';
-const templateHTML = '<style>:host{display:block}dialog{position:fixed;left:0;right:0;margin:auto;display:flex;flex-direction:column;padding:24px 0;max-width:var(--sinch-dialog-max-width,512px);max-height:unset;border-radius:var(--sinch-shape-radius-l);box-sizing:border-box;contain:content;background-color:var(--sinch-color-snow-100);color:var(--sinch-color-text-default);font:var(--sinch-font-text-m);border:none;box-shadow:var(--sinch-elevation-level-3)}dialog:not([open]){display:none}dialog+.backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background-color:#000;opacity:.55}dialog::backdrop{background-color:#000;opacity:.55}._dialog_overlay{position:fixed;top:0;right:0;bottom:0;left:0}dialog.fixed{position:fixed;top:50%;transform:translate(0,-50%)}#header{display:flex;flex-direction:row;justify-content:space-between;align-items:flex-start;margin-bottom:12px;padding:0 24px}#caption{color:var(--sinch-color-text-default)}#content{min-height:0;overflow:auto;max-height:var(--sinch-dialog-max-height,50vh);padding:4px 24px}#buttons{display:flex;flex-direction:row;justify-content:flex-end;gap:16px;margin-top:20px;padding:0 24px}#close{transform:translate(4px,-4px)}</style><dialog><div id="header"><sinch-title id="caption" type="m" level="3" ellipsis></sinch-title><sinch-icon-button id="close" size="s" tabindex="0"><sinch-icon id="icon-close" slot="icon"></sinch-icon></sinch-icon-button></div><div id="content"><sinch-stop-events events="close"><slot name="content"></slot></sinch-stop-events></div><div id="buttons"><sinch-stop-events events="close"><slot name="buttons"></slot></sinch-stop-events></div></dialog>';
+import { disableScroll, enableScroll } from '../pop/utils';
+import { defineCustomElement, getAttribute, getBooleanAttribute, getRect, isAttrTrue, updateAttribute, getReactEventHandler, NectaryElement, updateBooleanAttribute, getCssVar, setClass, isTargetEqual } from '../utils';
+const templateHTML = '<style>:host{display:contents}#dialog{position:fixed;left:0;right:0;margin:auto;display:flex;flex-direction:column;padding:24px 0;max-width:var(--sinch-dialog-max-width,512px);max-height:unset;border-radius:var(--sinch-shape-radius-l);box-sizing:border-box;contain:content;background-color:var(--sinch-color-snow-100);color:var(--sinch-color-text-default);font:var(--sinch-font-text-m);border:none;box-shadow:var(--sinch-elevation-level-3)}#dialog:not([open]){display:none}dialog::backdrop{background-color:#000;opacity:.55}#header{display:flex;flex-direction:row;justify-content:space-between;align-items:flex-start;margin-bottom:12px;padding:0 24px}#caption{color:var(--sinch-color-text-default)}#content{min-height:0;overflow:auto;max-height:var(--sinch-dialog-max-height,50vh);padding:4px 24px}#action{display:flex;flex-direction:row;justify-content:flex-end;gap:16px;margin-top:20px;padding:0 24px}#action.empty{display:none}#close{transform:translate(4px,-4px)}</style><dialog id="dialog"><div id="header"><sinch-title id="caption" type="m" level="3" ellipsis></sinch-title><sinch-icon-button id="close" size="s" tabindex="0"><sinch-icon id="icon-close" slot="icon"></sinch-icon></sinch-icon-button></div><div id="content"><sinch-stop-events events="close"><slot name="content"></slot></sinch-stop-events></div><div id="action"><sinch-stop-events events="close"><slot name="buttons"></slot></sinch-stop-events></div></dialog>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-dialog', class extends NectaryElement {
@@ -11,16 +12,19 @@ defineCustomElement('sinch-dialog', class extends NectaryElement {
   #$dialog;
   #$closeButton;
   #$caption;
+  #$actionWrapper;
+  #$actionSlot;
   #controller = null;
-  #prevOverflowValue = '';
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
-    this.#$dialog = shadowRoot.querySelector('dialog');
+    this.#$dialog = shadowRoot.querySelector('#dialog');
     this.#$closeButton = shadowRoot.querySelector('#close');
     this.#$caption = shadowRoot.querySelector('#caption');
     this.#$iconClose = shadowRoot.querySelector('#icon-close');
+    this.#$actionWrapper = shadowRoot.querySelector('#action');
+    this.#$actionSlot = shadowRoot.querySelector('slot[name="buttons"]');
   }
   connectedCallback() {
     super.connectedCallback();
@@ -30,16 +34,20 @@ defineCustomElement('sinch-dialog', class extends NectaryElement {
       signal: this.#controller.signal
     };
     this.#$closeButton.addEventListener('click', this.#onCloseClick, options);
-    this.#$dialog.addEventListener('mousedown', this.#onBackdropClick, options);
+    this.#$dialog.addEventListener('mousedown', this.#onBackdropMouseDown, options);
     this.#$dialog.addEventListener('cancel', this.#onCancel, options);
+    this.#$actionSlot.addEventListener('slotchange', this.#onActionSlotChange, options);
     this.addEventListener('-close', this.#onCloseReactHandler, options);
     updateAttribute(this.#$iconClose, 'name', getCssVar(this, '--sinch-dialog-icon-close'));
-    this.#setOpen(getBooleanAttribute(this, 'open'));
+    this.#onActionSlotChange();
+    if (getBooleanAttribute(this, 'open')) {
+      this.#onExpand();
+    }
   }
   disconnectedCallback() {
     super.disconnectedCallback();
     this.#controller.abort();
-    this.#setOpen(false);
+    this.#onCollapse();
   }
   static get observedAttributes() {
     return ['caption', 'open', 'close-aria-label'];
@@ -54,7 +62,13 @@ defineCustomElement('sinch-dialog', class extends NectaryElement {
       case 'open':
         {
           const shouldOpen = isAttrTrue(newVal);
-          this.#setOpen(shouldOpen);
+          if (shouldOpen) {
+            requestAnimationFrame(() => {
+              this.#onExpand();
+            });
+          } else {
+            this.#onCollapse();
+          }
           updateBooleanAttribute(this, 'open', shouldOpen);
           break;
         }
@@ -71,21 +85,28 @@ defineCustomElement('sinch-dialog', class extends NectaryElement {
   get caption() {
     return getAttribute(this, 'caption', '');
   }
+  get dialogRect() {
+    return getRect(this.#$dialog);
+  }
+  get closeButtonRect() {
+    return getRect(this.#$closeButton);
+  }
   #onCancel = e => {
     e.preventDefault();
+    e.stopPropagation();
     this.#dispatchCloseEvent('escape');
   };
   #onCloseClick = () => {
     this.#dispatchCloseEvent('close');
   };
-  #onBackdropClick = e => {
-    if (e.target !== this.#$dialog) {
-      return;
-    }
-    const rect = this.dialogRect;
-    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('backdrop');
+  #onBackdropMouseDown = e => {
+    if (isTargetEqual(e, this.#$dialog)) {
+      const rect = this.dialogRect;
+      const isInside = e.x >= rect.x && e.x < rect.x + rect.width && e.y >= rect.y && e.y < rect.y + rect.height;
+      if (!isInside) {
+        e.stopPropagation();
+        this.#dispatchCloseEvent('backdrop');
+      }
     }
   };
   #onCloseReactHandler = e => {
@@ -97,22 +118,24 @@ defineCustomElement('sinch-dialog', class extends NectaryElement {
       detail
     }));
   }
-  #setOpen(shouldOpen) {
-    if (shouldOpen) {
-      if (this.isConnected && !getBooleanAttribute(this.#$dialog, 'open')) {
-        this.#prevOverflowValue = document.body.style.overflow;
-        document.body.style.overflow = 'hidden';
-        this.#$dialog.showModal();
-      }
-    } else {
-      this.#$dialog.close?.();
-      document.body.style.overflow = this.#prevOverflowValue;
+  #onExpand() {
+    if (!this.isConnected || this.#isOpen()) {
+      return;
     }
+    this.#$dialog.showModal();
+    disableScroll();
   }
-  get dialogRect() {
-    return getRect(this.#$dialog);
+  #onCollapse() {
+    if (!this.#isOpen()) {
+      return;
+    }
+    this.#$dialog.close?.();
+    enableScroll();
   }
-  get closeButtonRect() {
-    return getRect(this.#$closeButton);
+  #isOpen() {
+    return getBooleanAttribute(this.#$dialog, 'open');
   }
+  #onActionSlotChange = () => {
+    setClass(this.#$actionWrapper, 'empty', this.#$actionSlot.assignedElements().length === 0);
+  };
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nectary/components",
-  "version": "1.1.0",
+  "version": "1.1.2",
   "files": [
     "**/*/*.css",
     "**/*/*.json",

package/pagination/index.js

@@ -1,5 +1,5 @@
 import '../icon';
-import { defineCustomElement, updateAttribute, getIntegerAttribute, setClass, NectaryElement, getRect, getReactEventHandler, getCssVars } from '../utils';
+import { defineCustomElement, updateAttribute, getIntegerAttribute, setClass, NectaryElement, getRect, getReactEventHandler, getCssVars, isTargetEqual, getTargetIndexInParent } from '../utils';
 const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#wrapper{display:flex;justify-content:center;gap:8px;width:100%;box-sizing:border-box}button{all:initial;width:28px;height:28px;box-sizing:border-box;cursor:pointer;text-align:center;contain:strict;--sinch-color-icon:var(--sinch-color-stormy-500)}button:disabled{--sinch-color-icon:var(--sinch-color-stormy-100);cursor:initial}button>*{pointer-events:none}.page{border-radius:50%;font:var(--sinch-font-text-m);color:var(--sinch-color-stormy-500)}.page.dots>span{display:none}.page.dots::after{content:"..."}.page.active{font-weight:var(--sinch-font-weight-emphasized);background-color:var(--sinch-color-snow-600);pointer-events:none;cursor:initial}.page.hidden{display:none}#left,#right{display:flex;padding:2px;--sinch-icon-size:24px}</style><div id="wrapper"><button id="left"><sinch-icon id="icon-left"></sinch-icon></button><button class="page"><span>1</span></button><button class="page active"><span>2</span></button><button class="page"><span>3</span></button><button class="page"><span>4</span></button><button class="page"><span>5</span></button><button class="page dots"><span>6</span></button><button class="page"><span>20</span></button><button id="right"><sinch-icon id="icon-right"></sinch-icon></button></div>';
 const NUM_BUTTONS = 7;
 const MIDDLE_BTN_INDEX = Math.floor(NUM_BUTTONS / 2);
@@ -99,13 +99,13 @@ defineCustomElement('sinch-pagination', class extends NectaryElement {
     e.stopPropagation();
     const value = getIntegerAttribute(this, 'value', 0) - 1;
     const max = Math.max(0, getIntegerAttribute(this, 'max', 0));
-    if (e.target === this.#$left) {
+    if (isTargetEqual(e, this.#$left)) {
       return this.#dispatchChangeEvent(value - 1);
     }
-    if (e.target === this.#$right) {
+    if (isTargetEqual(e, this.#$right)) {
       return this.#dispatchChangeEvent(value + 1);
     }
-    const btnIndex = Array.prototype.indexOf.call(this.#$wrapper.children, e.target) - 1;
+    const btnIndex = getTargetIndexInParent(e, this.#$wrapper) - 1;
     if (btnIndex >= 0 && btnIndex < this.#$buttons.length) {
       if (btnIndex === FIRST_BTN_INDEX) {
         return this.#dispatchChangeEvent(0);

package/pop/index.js

@@ -1,5 +1,5 @@
-import { defineCustomElement, getBooleanAttribute, getLiteralAttribute, getRect, isAttrTrue, updateLiteralAttribute, getReactEventHandler, updateBooleanAttribute, NectaryElement, throttleAnimationFrame, isElementFocused, updateIntegerAttribute, getIntegerAttribute, getFirstFocusableElement, getFirstSlotElement, Context, subscribeContext } from '../utils';
-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 { defineCustomElement, getBooleanAttribute, getLiteralAttribute, getRect, isAttrTrue, updateLiteralAttribute, getReactEventHandler, updateBooleanAttribute, NectaryElement, throttleAnimationFrame, isElementFocused, updateIntegerAttribute, getIntegerAttribute, getFirstFocusableElement, getFirstSlotElement, Context, subscribeContext, isTargetEqual } from '../utils';
+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}#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" name="target" aria-haspopup="dialog" aria-expanded="false"></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;
@@ -195,6 +195,11 @@ defineCustomElement('sinch-pop', class extends NectaryElement {
     }
     disableScroll();
     window.addEventListener('resize', this.#onResize);
+    requestAnimationFrame(() => {
+      if (this.#isOpen()) {
+        this.#$contentSlot.addEventListener('slotchange', this.#onContentSlotChange);
+      }
+    });
     this.#dispatchContentVisibility(true);
   }
   #onCollapse() {
@@ -244,6 +249,7 @@ defineCustomElement('sinch-pop', class extends NectaryElement {
     enableScroll();
     this.#resizeThrottle.cancel();
     window.removeEventListener('resize', this.#onResize);
+    this.#$contentSlot.removeEventListener('slotchange', this.#onContentSlotChange);
   }
   #isOpen() {
     return getBooleanAttribute(this.#$dialog, 'open');
@@ -299,17 +305,18 @@ defineCustomElement('sinch-pop', class extends NectaryElement {
     }
   };
   #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();
+    if (isTargetEqual(e, this.#$dialog)) {
+      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) {
+        e.stopPropagation();
+        this.#dispatchCloseEvent();
+      }
     }
   };
   #onCancel = e => {
     e.preventDefault();
+    e.stopPropagation();
     this.#dispatchCloseEvent();
   };
   #onCloseReactHandler = e => {
@@ -345,4 +352,10 @@ defineCustomElement('sinch-pop', class extends NectaryElement {
       this.#dispatchCloseEvent();
     }
   };
+  #onContentSlotChange = e => {
+    e.stopPropagation();
+    if (this.#isOpen()) {
+      this.#updateOrientation();
+    }
+  };
 });

package/utils/event-target.d.ts

@@ -0,0 +1,3 @@
+export declare const isTargetEqual: (e: Event, $elem: HTMLElement) => boolean;
+export declare const getTargetAttribute: (e: Event, attr: string) => string | null;
+export declare const getTargetIndexInParent: (e: Event, parent: Element) => number;

package/utils/event-target.js

@@ -0,0 +1,17 @@
+export const isTargetEqual = (e, $elem) => {
+  return e.target === $elem || e.originalTarget === $elem;
+};
+export const getTargetAttribute = (e, attr) => {
+  return e.target.getAttribute(attr) ?? e.originalTarget?.getAttribute(attr) ?? null;
+};
+export const getTargetIndexInParent = (e, parent) => {
+  const indexOf = Array.prototype.indexOf.call(parent.children, e.target);
+  if (indexOf >= 0) {
+    return indexOf;
+  }
+  const origTgt = e.originalTarget;
+  if (origTgt != null) {
+    return Array.prototype.indexOf.call(parent.children, origTgt);
+  }
+  return -1;
+};

package/utils/index.d.ts

@@ -8,3 +8,4 @@ export * from './throttle';
 export * from './debounce';
 export * from './get-react-event-handler';
 export * from './markdown';
+export * from './event-target';

package/utils/index.js

@@ -7,4 +7,5 @@ export * from './slot';
 export * from './throttle';
 export * from './debounce';
 export * from './get-react-event-handler';
-export * from './markdown';
+export * from './markdown';
+export * from './event-target';