@nectary/components 4.8.0 → 4.8.2

package/rich-textarea/index.d.ts

@@ -3,6 +3,11 @@ declare global {
     interface HTMLElementTagNameMap {
         'sinch-rich-textarea': TSinchRichTextareaElement;
     }
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-rich-textarea': TSinchRichTextareaReact;
+        }
+    }
 }
 declare module 'react' {
     namespace JSX {

package/segment/index.d.ts

@@ -4,6 +4,11 @@ declare global {
     interface HTMLElementTagNameMap {
         'sinch-segment': TSinchSegmentElement;
     }
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-segment': TSinchSegmentReact;
+        }
+    }
 }
 declare module 'react' {
     namespace JSX {

package/segment-collapse/index.d.ts

@@ -4,6 +4,11 @@ declare global {
     interface HTMLElementTagNameMap {
         'sinch-segment-collapse': TSinchSegmentExpandElement;
     }
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-segment-collapse': TSinchSegmentExpandReact;
+        }
+    }
 }
 declare module 'react' {
     namespace JSX {

package/segmented-control/index.d.ts

@@ -3,6 +3,11 @@ declare global {
     interface HTMLElementTagNameMap {
         'sinch-segmented-control': TSinchSegmentedControlElement;
     }
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-segmented-control': TSinchSegmentedControlReact;
+        }
+    }
 }
 declare module 'react' {
     namespace JSX {

package/segmented-control-option/index.d.ts

@@ -3,6 +3,11 @@ declare global {
     interface HTMLElementTagNameMap {
         'sinch-segmented-control-option': TSinchSegmentedControlOptionElement;
     }
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-segmented-control-option': TSinchSegmentedControlOptionReact;
+        }
+    }
 }
 declare module 'react' {
     namespace JSX {

package/segmented-icon-control/index.d.ts

@@ -3,6 +3,11 @@ declare global {
     interface HTMLElementTagNameMap {
         'sinch-segmented-icon-control': TSinchSegmentedIconControlElement;
     }
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-segmented-icon-control': TSinchSegmentedIconControlReact;
+        }
+    }
 }
 declare module 'react' {
     namespace JSX {

package/segmented-icon-control-option/index.d.ts

@@ -3,6 +3,11 @@ declare global {
     interface HTMLElementTagNameMap {
         'sinch-segmented-icon-control-option': TSinchSegmentedIconControlOptionElement;
     }
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-segmented-icon-control-option': TSinchSegmentedIconControlOptionReact;
+        }
+    }
 }
 declare module 'react' {
     namespace JSX {

package/select-button/index.d.ts

@@ -5,6 +5,11 @@ declare global {
     interface HTMLElementTagNameMap {
         'sinch-select-button': TSinchSelectButtonElement;
     }
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-select-button': TSinchSelectButtonReact;
+        }
+    }
 }
 declare module 'react' {
     namespace JSX {

package/select-menu/index.d.ts

@@ -6,6 +6,11 @@ declare global {
     interface HTMLElementTagNameMap {
         'sinch-select-menu': TSinchSelectMenuElement;
     }
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-select-menu': TSinchSelectMenuReact;
+        }
+    }
 }
 declare module 'react' {
     namespace JSX {

package/select-menu-option/index.d.ts

@@ -20,6 +20,11 @@ declare global {
     interface HTMLElementTagNameMap {
         'sinch-select-menu-option': TSinchSelectMenuOptionElement;
     }
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-select-menu-option': TSinchSelectMenuOptionReact;
+        }
+    }
 }
 declare module 'react' {
     namespace JSX {

package/skeleton/index.d.ts

@@ -3,6 +3,11 @@ declare global {
     interface HTMLElementTagNameMap {
         'sinch-skeleton': TSinchSkeletonElement;
     }
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-skeleton': TSinchSkeletonReact;
+        }
+    }
 }
 declare module 'react' {
     namespace JSX {

package/skeleton-item/index.d.ts

@@ -3,6 +3,11 @@ declare global {
     interface HTMLElementTagNameMap {
         'sinch-skeleton-item': TSinchSkeletonItemElement;
     }
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-skeleton-item': TSinchSkeletonItemReact;
+        }
+    }
 }
 declare module 'react' {
     namespace JSX {

package/spinner/index.d.ts

@@ -3,6 +3,11 @@ declare global {
     interface HTMLElementTagNameMap {
         'sinch-spinner': TSinchSpinnerElement;
     }
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-spinner': TSinchSpinnerReact;
+        }
+    }
 }
 declare module 'react' {
     namespace JSX {

package/table/index.d.ts

@@ -3,6 +3,11 @@ declare global {
     interface HTMLElementTagNameMap {
         'sinch-table': TSinchTableElement;
     }
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-table': TSinchTableReact;
+        }
+    }
 }
 declare module 'react' {
     namespace JSX {

package/table-body/index.d.ts

@@ -3,6 +3,11 @@ declare global {
     interface HTMLElementTagNameMap {
         'sinch-table-body': TSinchTableBodyElement;
     }
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-table-body': TSinchTableBodyReact;
+        }
+    }
 }
 declare module 'react' {
     namespace JSX {

package/table-cell/index.d.ts

@@ -3,6 +3,11 @@ declare global {
     interface HTMLElementTagNameMap {
         'sinch-table-cell': TSinchTableCellElement;
     }
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-table-cell': TSinchTableCellReact;
+        }
+    }
 }
 declare module 'react' {
     namespace JSX {

package/table-head/index.d.ts

@@ -3,6 +3,11 @@ declare global {
     interface HTMLElementTagNameMap {
         'sinch-table-head': TSinchTableHeadElement;
     }
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-table-head': TSinchTableHeadReact;
+        }
+    }
 }
 declare module 'react' {
     namespace JSX {

package/table-head-cell/index.d.ts

@@ -4,6 +4,11 @@ declare global {
     interface HTMLElementTagNameMap {
         'sinch-table-head-cell': TSinchTableHeaderCellElement;
     }
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-table-head-cell': TSinchTableHeaderCellReact;
+        }
+    }
 }
 declare module 'react' {
     namespace JSX {

package/table-row/index.d.ts

@@ -3,6 +3,11 @@ declare global {
     interface HTMLElementTagNameMap {
         'sinch-table-row': TSinchTableRowElement;
     }
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-table-row': TSinchTableRowReact;
+        }
+    }
 }
 declare module 'react' {
     namespace JSX {

package/tabs/index.d.ts

@@ -3,6 +3,11 @@ declare global {
     interface HTMLElementTagNameMap {
         'sinch-tabs': TSinchTabsElement;
     }
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-tabs': TSinchTabsReact;
+        }
+    }
 }
 declare module 'react' {
     namespace JSX {

package/tabs-icon-option/index.d.ts

@@ -3,6 +3,11 @@ declare global {
     interface HTMLElementTagNameMap {
         'sinch-tabs-icon-option': TSinchTabsIconOptionElement;
     }
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-tabs-icon-option': TSinchTabsIconOptionReact;
+        }
+    }
 }
 declare module 'react' {
     namespace JSX {

package/tabs-option/index.d.ts

@@ -4,6 +4,11 @@ declare global {
     interface HTMLElementTagNameMap {
         'sinch-tabs-option': TSinchTabsOptionElement;
     }
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-tabs-option': TSinchTabsOptionReact;
+        }
+    }
 }
 declare module 'react' {
     namespace JSX {

package/tag/index.d.ts

@@ -1,9 +1,15 @@
 import '../text';
+import '../tooltip';
 import type { TSinchTagElement, TSinchTagReact } from './types';
 declare global {
     interface HTMLElementTagNameMap {
         'sinch-tag': TSinchTagElement;
     }
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-tag': TSinchTagReact;
+        }
+    }
 }
 declare module 'react' {
     namespace JSX {

package/tag/index.js

@@ -1,11 +1,13 @@
 import '../text';
+import '../tooltip';
 import { defineCustomElement, getBooleanAttribute, getAttribute, updateBooleanAttribute, updateAttribute, NectaryElement, isAttrTrue, isAttrEqual } from '../utils';
-const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#wrapper{display:flex;flex-direction:row;align-items:center;gap:4px;width:100%;height:var(--sinch-comp-tag-size-container-m);padding:0 9px;border-radius:var(--sinch-comp-tag-shape-radius);background-color:var(--sinch-comp-tag-color-default-background);box-sizing:border-box;user-select:none;--sinch-global-color-text:var(--sinch-comp-tag-color-default-foreground);--sinch-global-color-icon:var(--sinch-comp-tag-color-default-foreground);--sinch-global-size-icon:var(--sinch-comp-tag-size-icon-m)}:host([small]) #wrapper{height:var(--sinch-comp-tag-size-container-s);padding:0 8px;--sinch-global-size-icon:var(--sinch-comp-tag-size-icon-s)}#text{flex:1;--sinch-comp-text-font:var(--sinch-comp-tag-font-size-m-label)}:host([small]) #text{--sinch-comp-text-font:var(--sinch-comp-tag-font-size-s-label)}::slotted(*){margin-left:-4px}</style><div id="wrapper"><slot name="icon"></slot><sinch-text id="text" type="s" ellipsis></sinch-text></div>';
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}:host([ellipsis]){display:inline}#wrapper{display:flex;flex-direction:row;align-items:center;gap:4px;width:100%;height:var(--sinch-comp-tag-size-container-m);padding:0 9px;border-radius:var(--sinch-comp-tag-shape-radius);background-color:var(--sinch-comp-tag-color-default-background);box-sizing:border-box;user-select:none;--sinch-global-color-text:var(--sinch-comp-tag-color-default-foreground);--sinch-global-color-icon:var(--sinch-comp-tag-color-default-foreground);--sinch-global-size-icon:var(--sinch-comp-tag-size-icon-m)}:host([small]) #wrapper{height:var(--sinch-comp-tag-size-container-s);padding:0 8px;--sinch-global-size-icon:var(--sinch-comp-tag-size-icon-s)}#text{flex:1;--sinch-comp-text-font:var(--sinch-comp-tag-font-size-m-label)}:host([small]) #text{--sinch-comp-text-font:var(--sinch-comp-tag-font-size-s-label)}::slotted(*){margin-left:-4px}</style><sinch-tooltip id="tooltip" type="fast"><div id="wrapper"><slot name="icon"></slot><sinch-text id="text" type="s" ellipsis></sinch-text></div></sinch-tooltip>';
 import { getTagColorBg, getTagColorFg } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-tag', class extends NectaryElement {
   #$text;
+  #$tooltip;
   #$wrapper;
   constructor() {
     super();
@@ -13,10 +15,12 @@ defineCustomElement('sinch-tag', class extends NectaryElement {
     shadowRoot.appendChild(template.content.cloneNode(true));
     this.#$wrapper = shadowRoot.querySelector('#wrapper');
     this.#$text = shadowRoot.querySelector('#text');
+    this.#$tooltip = shadowRoot.querySelector('#tooltip');
   }
   connectedCallback() {
     super.connectedCallback();
     this.#updateColor();
+    this.#updateEllipsisTooltip();
   }
   disconnectedCallback() {
     super.disconnectedCallback();
@@ -32,6 +36,7 @@ defineCustomElement('sinch-tag', class extends NectaryElement {
   }
   set text(value) {
     updateAttribute(this, 'text', value);
+    updateAttribute(this.#$tooltip, 'text', value);
   }
   get small() {
     return getBooleanAttribute(this, 'small');
@@ -55,6 +60,7 @@ defineCustomElement('sinch-tag', class extends NectaryElement {
       case 'text':
         {
           this.#$text.textContent = newVal;
+          this.#updateEllipsisTooltip();
           break;
         }
       case 'small':
@@ -81,4 +87,15 @@ defineCustomElement('sinch-tag', class extends NectaryElement {
       this.#$wrapper.style.removeProperty('--sinch-global-color-icon');
     }
   }
+  #updateEllipsisTooltip() {
+    const ellipsis = getBooleanAttribute(this, 'ellipsis');
+    requestAnimationFrame(() => {
+      const hasOverflow = this.#$text.offsetWidth < this.#$text.scrollWidth;
+      if (ellipsis && hasOverflow) {
+        updateAttribute(this.#$tooltip, 'text', this.text);
+      } else {
+        updateAttribute(this.#$tooltip, 'text', '');
+      }
+    });
+  }
 });

package/tag/types.d.ts

@@ -8,12 +8,16 @@ export type TSinchTagElement = HTMLElement & {
     color: TSinchTagColor | null;
     /** Small */
     small: boolean;
+    /** Ellipsis */
+    ellipsis: boolean;
     /** Text */
     setAttribute(name: 'text', value: string): void;
     /** Color, gray by default */
     setAttribute(name: 'color', value: string): void;
     /** Small */
     setAttribute(name: 'small', value: ''): void;
+    /** Ellipsis */
+    setAttribute(name: 'ellipsis', value: ''): void;
 };
 export type TSinchTagReact = TSinchElementReact<TSinchTagElement> & {
     /** Text */
@@ -22,6 +26,8 @@ export type TSinchTagReact = TSinchElementReact<TSinchTagElement> & {
     color?: TSinchTagColor;
     /** Small */
     small?: boolean;
+    /** Ellipsis */
+    ellipsis?: boolean;
 } & {
     style?: {
         '--sinch-comp-tag-size-container-m'?: string;

package/text/index.d.ts

@@ -3,6 +3,11 @@ declare global {
     interface HTMLElementTagNameMap {
         'sinch-text': TSinchTextElement;
     }
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-text': TSinchTextReact;
+        }
+    }
 }
 declare module 'react' {
     namespace JSX {

package/textarea/index.d.ts

@@ -3,6 +3,11 @@ declare global {
     interface HTMLElementTagNameMap {
         'sinch-textarea': TSinchTextareaElement;
     }
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-textarea': TSinchTextareaReact;
+        }
+    }
 }
 declare module 'react' {
     namespace JSX {

package/tile-control/index.d.ts

@@ -3,6 +3,11 @@ declare global {
     interface HTMLElementTagNameMap {
         'sinch-tile-control': TSinchTileControlElement;
     }
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-tile-control': TSinchTileControlReact;
+        }
+    }
 }
 declare module 'react' {
     namespace JSX {

package/tile-control-option/index.d.ts

@@ -3,6 +3,11 @@ declare global {
     interface HTMLElementTagNameMap {
         'sinch-tile-control-option': TSinchTileControlOptionElement;
     }
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-tile-control-option': TSinchTileControlOptionReact;
+        }
+    }
 }
 declare module 'react' {
     namespace JSX {

package/time-picker/index.d.ts

@@ -6,6 +6,11 @@ declare global {
     interface HTMLElementTagNameMap {
         'sinch-time-picker': TSinchTimePickerElement;
     }
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-time-picker': TSinchTimePickerReact;
+        }
+    }
 }
 declare module 'react' {
     namespace JSX {

package/title/index.d.ts

@@ -3,6 +3,11 @@ declare global {
     interface HTMLElementTagNameMap {
         'sinch-title': TSinchTitleElement;
     }
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-title': TSinchTitleReact;
+        }
+    }
 }
 declare module 'react' {
     namespace JSX {

package/toast/index.d.ts

@@ -5,6 +5,11 @@ declare global {
     interface HTMLElementTagNameMap {
         'sinch-toast': TSinchToastElement;
     }
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-toast': TSinchToastReact;
+        }
+    }
 }
 declare module 'react' {
     namespace JSX {

package/toast-manager/index.d.ts

@@ -5,6 +5,11 @@ declare global {
     interface HTMLElementTagNameMap {
         'sinch-toast-manager': TSinchToastManagerElement;
     }
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-toast-manager': TSinchToastManagerReact;
+        }
+    }
 }
 declare module 'react' {
     namespace JSX {

package/toggle/index.d.ts

@@ -3,6 +3,11 @@ declare global {
     interface HTMLElementTagNameMap {
         'sinch-toggle': TSinchToggleElement;
     }
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-toggle': TSinchToggleReact;
+        }
+    }
 }
 declare module 'react' {
     namespace JSX {

package/tooltip/index.d.ts

@@ -5,6 +5,11 @@ declare global {
     interface HTMLElementTagNameMap {
         'sinch-tooltip': TSinchTooltipElement;
     }
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-tooltip': TSinchTooltipReact;
+        }
+    }
 }
 declare module 'react' {
     namespace JSX {

package/vertical-stepper/index.d.ts

@@ -3,6 +3,11 @@ declare global {
     interface HTMLElementTagNameMap {
         'sinch-vertical-stepper': TSinchVerticalStepperElement;
     }
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-vertical-stepper': TSinchVerticalStepperReact;
+        }
+    }
 }
 declare module 'react' {
     namespace JSX {

package/vertical-stepper-item/index.d.ts

@@ -6,6 +6,11 @@ declare global {
     interface HTMLElementTagNameMap {
         'sinch-vertical-stepper-item': TSinchVerticalStepperItemElement;
     }
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-vertical-stepper-item': TSinchVerticalStepperItemReact;
+        }
+    }
 }
 declare module 'react' {
     namespace JSX {