@nectary/components 0.23.0 → 0.24.0

package/tooltip/index.js

@@ -1,14 +1,12 @@
-import { attrValueToPixels, defineCustomElement, getBooleanAttribute, getIntegerAttribute, getAttribute, getLiteralAttribute, updateBooleanAttribute, updateAttribute, updateLiteralAttribute, getRect } from '../utils';
+import { attrValueToPixels, defineCustomElement, getBooleanAttribute, getIntegerAttribute, getAttribute, getLiteralAttribute, updateBooleanAttribute, updateAttribute, updateLiteralAttribute, getRect, NectaryElement } from '../utils';
 const templateHTML = '<style>:host{display:inline-block;vertical-align:middle}#wrapper{position:relative;display:block}#tooltip{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;opacity:0;transition:opacity .2s linear .2s}@media (prefers-reduced-motion){#tooltip{transition:none}}:host(:hover) #tooltip{opacity:1}#text{position:absolute;padding:2px 6px;font:var(--sinch-font-extra-small-text);color:var(--sinch-color-text-default);background-color:var(--sinch-color-snow-600);width:max-content;border-radius:2px;top:-8px;left:50%;transform:translateX(-50%) translateY(-100%)}#arrow{position:absolute;top:-8px;left:50%;transform:translateX(-50%);fill:var(--sinch-color-snow-600)}:host([orientation=top-left]) #text{transform:translateX(-80%) translateY(-100%)}:host([orientation=top-right]) #text{transform:translateX(-20%) translateY(-100%)}:host([orientation=bottom-right]) #text{top:calc(100% + 8px);transform:translateX(-20%)}:host([orientation=bottom-left]) #text{top:calc(100% + 8px);transform:translateX(-80%)}:host([orientation=bottom]) #text{top:calc(100% + 8px);transform:translateX(-50%)}:host([orientation^=bottom]) #arrow{top:calc(100% + 4px);transform:translateX(-50%) rotate(180deg)}:host([orientation=left]) #text{left:unset;right:calc(100% + 8px);top:50%;transform:translateY(-50%)}:host([orientation=left]) #arrow{left:-11px;top:50%;transform:translateY(-50%) rotate(270deg)}:host([orientation=right]) #text{left:calc(100% + 8px);top:50%;transform:translateY(-50%)}:host([orientation=right]) #arrow{top:50%;left:calc(100% + 2px);transform:translateY(-50%) rotate(90deg)}:host([inverted]:not([inverted=false])) #text{color:var(--sinch-color-text-inverted);background-color:var(--sinch-color-stormy-500)}:host([inverted]:not([inverted=false])) #arrow{fill:var(--sinch-color-stormy-500)}::slotted(*){display:block}</style><div id="wrapper"><slot></slot><div id="tooltip"><div id="text"></div><svg id="arrow" width="9" height="4" aria-hidden="true"><path d="m4.5 4 4-4h-8l4 4Z"/></svg></div></div>';
 const orientationValues = ['top', 'bottom', 'left', 'right', 'top-left', 'top-right', 'bottom-left', 'bottom-right'];
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-tooltip', class extends HTMLElement {
+defineCustomElement('sinch-tooltip', class extends NectaryElement {
   constructor() {
     super();
-    const shadowRoot = this.attachShadow({
-      mode: 'closed'
-    });
+    const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
     this.$tooltipText = shadowRoot.querySelector('#text');
   }

package/utils.d.ts

@@ -1,8 +1,15 @@
 import type { TRect } from './types';
-export declare const getReactEventHandler: ($element: HTMLElement, handlerName: string) => ((arg?: any) => void) | null;
 export declare const defineCustomElement: (name: string, constructor: CustomElementConstructor) => void;
-export declare const defineNectaryElements: (registry: CustomElementRegistry) => void;
-export declare type TEventHandler = (arg?: any) => void;
+export declare const setNectaryRegistry: (registry: CustomElementRegistry) => void;
+declare global {
+    interface ShadowRootInit {
+        customElements?: CustomElementRegistry;
+    }
+}
+export declare class NectaryElement extends HTMLElement {
+    attachShadow(): ShadowRoot;
+}
+export declare const getReactEventHandler: ($element: HTMLElement, handlerName: string) => ((arg?: any) => void) | null;
 export declare const updateBooleanAttribute: ($element: Element, attrName: string, attrValue: boolean | null | undefined) => void;
 export declare const updateExplicitBooleanAttribute: ($element: Element, attrName: string, attrValue: boolean | null | undefined) => void;
 export declare const isAttrTrue: (attrValue: string | null) => boolean;

package/utils.js

@@ -1,14 +1,5 @@
 const nectaryDefinitions = new Map();
 let nectaryRegistry = null;
-export const getReactEventHandler = ($element, handlerName) => {
-  for (const key in $element) {
-    if (key.startsWith('__reactProps$')) {
-      return $element[key][handlerName];
-    }
-  }
-
-  return null;
-};
 export const defineCustomElement = (name, constructor) => {
   if (nectaryRegistry !== null) {
     if (nectaryRegistry.get(name) == null) {
@@ -19,12 +10,8 @@ export const defineCustomElement = (name, constructor) => {
   }
 
   nectaryDefinitions.set(name, constructor);
-
-  if (customElements.get(name) == null) {
-    customElements.define(name, constructor);
-  }
 };
-export const defineNectaryElements = registry => {
+export const setNectaryRegistry = registry => {
   if (nectaryRegistry !== null) {
     throw new Error('Nectary elements already registered');
   }
@@ -36,6 +23,27 @@ export const defineNectaryElements = registry => {
       nectaryRegistry.define(name, ctor);
     }
   }
+
+  nectaryDefinitions.clear();
+};
+export class NectaryElement extends HTMLElement {
+  attachShadow() {
+    return super.attachShadow({
+      mode: 'closed',
+      delegatesFocus: true,
+      customElements: nectaryRegistry
+    });
+  }
+
+}
+export const getReactEventHandler = ($element, handlerName) => {
+  for (const key in $element) {
+    if (key.startsWith('__reactProps$')) {
+      return $element[key][handlerName];
+    }
+  }
+
+  return null;
 };
 export const updateBooleanAttribute = ($element, attrName, attrValue) => {
   if (attrValue === true) {