@nectary/components 0.44.0 → 0.45.0

package/tooltip/index.js

@@ -21,7 +21,6 @@ defineCustomElement('sinch-tooltip', class extends NectaryElement {
   #tooltipState;
   #animation = null;
   #shouldReduceMotion = false;
-  #isConnected = false;
   #isSubscribed = false;
   constructor() {
     super();
@@ -44,7 +43,7 @@ defineCustomElement('sinch-tooltip', class extends NectaryElement {
     });
   }
   connectedCallback() {
-    this.#isConnected = true;
+    super.connectedCallback();
     this.#controller = new AbortController();
     const options = {
       signal: this.#controller.signal
@@ -54,6 +53,7 @@ defineCustomElement('sinch-tooltip', class extends NectaryElement {
     this.#updateText();
   }
   disconnectedCallback() {
+    super.disconnectedCallback();
     this.#controller.abort();
     this.#tooltipState.destroy();
   }
@@ -93,8 +93,10 @@ defineCustomElement('sinch-tooltip', class extends NectaryElement {
         }
       case 'orientation':
         {
-          assertOrientation(newVal);
-          updateAttribute(this.#$pop, 'orientation', getPopOrientation(newVal));
+          if ('production' !== 'production') {
+            assertOrientation(newVal);
+          }
+          updateAttribute(this.#$pop, 'orientation', getPopOrientation(this.orientation));
           if (this.#isOpen()) {
             this.#resetTipOrientation();
             this.#updateTipOrientation();
@@ -178,7 +180,7 @@ defineCustomElement('sinch-tooltip', class extends NectaryElement {
     setClass(this.#$tip, 'hidden', rectOverlap(targetRect, contentRect));
   };
   #updateText() {
-    if (!this.#isConnected) {
+    if (!this.isConnected) {
       return;
     }
     const value = this.text;
@@ -194,7 +196,7 @@ defineCustomElement('sinch-tooltip', class extends NectaryElement {
     this.#subscribeMouseEnterEvent();
   }
   #subscribeMouseEnterEvent() {
-    if (!this.#isConnected || this.#isSubscribed) {
+    if (!this.isConnected || this.#isSubscribed) {
       return;
     }
     this.#$target.addEventListener('mouseenter', this.#onMouseEnter, {

package/utils/context.d.ts

@@ -1,15 +1,20 @@
-export declare type TContextName = 'visibility' | 'keydown';
-export declare type TContextKeyboard = {
+export declare type TContextName = 'visibility' | 'keydown' | 'size';
+export declare type TContextKeydown = {
     code: string;
     preventDefault: () => void;
 };
 export declare type TContextVisibility = boolean;
-export declare class Context {
+export declare type TContextSize = string;
+declare type TContextDataType = {
+    visibility: TContextVisibility;
+    keydown: TContextKeydown;
+    size: TContextSize;
+};
+export declare class Context<T extends TContextName> {
     #private;
-    constructor($element: Element, name: TContextName);
-    get elements(): Iterable<Element>;
-    subscribe(): void;
-    unsubscribe(): void;
+    constructor($element: Element, name: T);
+    listen(signal: AbortSignal): void;
+    dispatch(contextValue: TContextDataType[T]): void;
 }
-export declare const dispatchContextConnectEvent: (el: Element, name: TContextName) => void;
-export declare const dispatchContextDisconnectEvent: (el: Element, name: TContextName) => void;
+export declare const subscribeContext: <T extends TContextName>($el: Element, name: T, cb: (e: CustomEvent<TContextDataType[T]>) => void, signal: AbortSignal) => void;
+export {};

package/utils/context.js

@@ -1,51 +1,85 @@
+const contextNameToEventMap = {
+  keydown: '-keydown',
+  visibility: '-visibility',
+  size: '-size'
+};
+const shouldPersistContextValue = {
+  keydown: false,
+  visibility: true,
+  size: true
+};
 export class Context {
   #$root;
   #listeners = new Set();
   #name;
-  #isSubscribed = false;
+  #isListening = false;
+  #lastContextValue = null;
   constructor($element, name) {
     this.#$root = $element;
     this.#name = name;
   }
-  get elements() {
-    return this.#listeners;
-  }
-  subscribe() {
-    if (this.#isSubscribed) {
+  listen(signal) {
+    if (this.#isListening) {
       return;
     }
-    this.#$root.addEventListener(`-context-connect-${this.#name}`, this.#onConnect);
-    this.#$root.addEventListener(`-context-disconnect-${this.#name}`, this.#onDisconnect);
-    this.#isSubscribed = true;
+    this.#$root.addEventListener(`-context-connect-${this.#name}`, this.#onListenerConnect, {
+      signal
+    });
+    this.#$root.addEventListener(`-context-disconnect-${this.#name}`, this.#onListenerDisconnect, {
+      signal
+    });
+    this.#isListening = true;
+    signal.addEventListener('abort', () => {
+      this.#listeners.clear();
+      this.#isListening = false;
+      this.#lastContextValue = null;
+    }, {
+      once: true
+    });
   }
-  unsubscribe() {
-    this.#listeners.clear();
-    this.#$root.removeEventListener(`-context-connect-${this.#name}`, this.#onConnect);
-    this.#$root.removeEventListener(`-context-disconnect-${this.#name}`, this.#onDisconnect);
-    this.#isSubscribed = false;
+  dispatch(contextValue) {
+    for (const el of this.#listeners) {
+      el.dispatchEvent(new CustomEvent(contextNameToEventMap[this.#name], {
+        detail: contextValue
+      }));
+    }
+    if (shouldPersistContextValue[this.#name]) {
+      this.#lastContextValue = contextValue;
+    }
   }
-  #onConnect = e => {
+  #onListenerConnect = e => {
     e.stopPropagation();
     this.#listeners.add(e.detail);
+    if (this.#lastContextValue !== null) {
+      e.detail.dispatchEvent(new CustomEvent(contextNameToEventMap[this.#name], {
+        detail: this.#lastContextValue
+      }));
+    }
   };
-  #onDisconnect = e => {
+  #onListenerDisconnect = e => {
     e.stopPropagation();
     this.#listeners.delete(e.detail);
   };
 }
-export const dispatchContextConnectEvent = (el, name) => {
+export const subscribeContext = ($el, name, cb, signal) => {
   requestAnimationFrame(() => {
-    el.dispatchEvent(new CustomEvent(`-context-connect-${name}`, {
+    $el.dispatchEvent(new CustomEvent(`-context-connect-${name}`, {
       bubbles: true,
       composed: true,
-      detail: el
+      detail: $el
     }));
   });
-};
-export const dispatchContextDisconnectEvent = (el, name) => {
-  el.dispatchEvent(new CustomEvent(`-context-disconnect-${name}`, {
-    bubbles: true,
-    composed: true,
-    detail: el
-  }));
+
+  $el.addEventListener(contextNameToEventMap[name], cb, {
+    signal
+  });
+  signal.addEventListener('abort', () => {
+    $el.dispatchEvent(new CustomEvent(`-context-disconnect-${name}`, {
+      bubbles: true,
+      composed: true,
+      detail: $el
+    }));
+  }, {
+    once: true
+  });
 };

package/utils/countries.d.ts

@@ -0,0 +1,5 @@
+export declare type TSinchCountry = {
+    name: string;
+    phoneCode: string;
+};
+export declare const countries: Record<string, TSinchCountry>;

package/utils/countries.js

@@ -0,0 +1,2 @@
+import countriesJson from './countries.json';
+export const countries = countriesJson;