@nectary/components 1.3.2 → 1.4.0

package/date-picker/index.js

@@ -283,9 +283,6 @@ defineCustomElement('sinch-date-picker', class extends NectaryElement {
     if (this.range) {
       if (this.#date1 !== null && this.#date2 === null) {
         const date2 = isoToDate(dateIso);
-        if (areDatesEqual(this.#date1, date2)) {
-          return;
-        }
         const dateTuple = sortDates([this.#date1, date2]);
         const value = packCsv(dateTuple.map(dateToIso));
         this.#date1 = dateTuple[0];

package/help-tooltip/index.js

@@ -1,7 +1,7 @@
 import '../tooltip';
 import '../icon';
 import { defineCustomElement, getAttribute, getBooleanAttribute, getCssVar, getIntegerAttribute, getReactEventHandler, NectaryElement, updateAttribute, updateBooleanAttribute, updateIntegerAttribute } from '../utils';
-const templateHTML = '<style>:host{display:contents}#icon{--sinch-size-icon:18px;--sinch-icon-font-variation-settings:var(--sinch-help-tooltip-icon-font-variation-settings)}</style><sinch-tooltip><sinch-icon id="icon"></sinch-icon></sinch-tooltip>';
+const templateHTML = '<style>:host{display:contents}#icon{--sinch-size-icon:18px;--sinch-icon-font-variation-settings:var(--sinch-help-tooltip-icon-font-variation-settings)}</style><sinch-tooltip type="fast"><sinch-icon id="icon"></sinch-icon></sinch-tooltip>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-help-tooltip', class extends NectaryElement {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nectary/components",
-  "version": "1.3.2",
+  "version": "1.4.0",
   "files": [
     "**/*/*.css",
     "**/*/*.json",
@@ -22,7 +22,6 @@
     "@babel/plugin-transform-runtime": "^7.19.6",
     "@babel/preset-env": "^7.20.2",
     "@babel/preset-typescript": "^7.18.6",
-    "@types/node": "^18.11.18",
     "@types/react": "^18.0.27",
     "babel-plugin-html-inline-minifier": "workspace:^0.0.0",
     "babel-plugin-transform-inline-environment-variables": "^0.4.4",

package/skeleton/index.js

@@ -30,7 +30,7 @@ defineCustomElement('sinch-skeleton', class extends NectaryElement {
     }
   }
   disconnectedCallback() {
-    this.#animation.cancel();
+    this.#animation?.cancel();
     this.#animation = null;
     this.#controller.abort();
     this.#controller = null;

package/tooltip/index.js

@@ -3,9 +3,10 @@ import '../pop';
 import { defineCustomElement, getBooleanAttribute, getAttribute, getLiteralAttribute, updateBooleanAttribute, updateAttribute, updateLiteralAttribute, NectaryElement, setClass, rectOverlap, getReactEventHandler, shouldReduceMotion } from '../utils';
 const templateHTML = '<style>:host{display:contents}#content-wrapper{padding-bottom:8px}#content{position:relative;display:block;max-width:300px;padding:2px 6px;box-sizing:border-box;color:var(--sinch-color-text-default);background-color:var(--sinch-color-snow-600);border-radius:var(--sinch-shape-radius-xs);pointer-events:none;opacity:0}:host([orientation=left]) #content-wrapper{padding-bottom:0;padding-right:8px}:host([orientation=right]) #content-wrapper{padding-bottom:0;padding-left:8px}:host([orientation^=bottom]) #content-wrapper{padding-bottom:0;padding-top:8px}#text{word-break:break-word;pointer-events:none}#tip{position:absolute;left:50%;top:100%;transform:translateX(-50%) rotate(0);transform-origin:top center;fill:var(--sinch-color-snow-600);pointer-events:none}#tip.hidden{display:none}:host([orientation=left]) #tip{transform:translateX(-50%) rotate(270deg);top:50%;left:100%}:host([orientation=right]) #tip{transform:translateX(-50%) rotate(90deg);top:50%;left:0}:host([orientation^=bottom]) #tip{transform:translateX(-50%) rotate(180deg);top:0}:host([inverted]:not([inverted=false])) #content{background-color:var(--sinch-color-stormy-500);color:var(--sinch-color-text-inverted)}:host([inverted]:not([inverted=false])) #tip{fill:var(--sinch-color-stormy-500)}</style><sinch-pop id="pop"><slot id="target" slot="target"></slot><div id="content-wrapper" slot="content"><div id="content"><sinch-text id="text" type="s"></sinch-text><svg id="tip" width="8" height="4" aria-hidden="true"><path d="m4 4 4-4h-8l4 4Z"/></svg></div></div></sinch-pop>';
 import { TooltipState } from './tooltip-state';
-import { assertOrientation, getPopOrientation, orientationValues } from './utils';
+import { assertOrientation, assertType, getPopOrientation, orientationValues, typeValues } from './utils';
 const TIP_SIZE = 8;
-const SHOW_DELAY = 1000;
+const SHOW_DELAY_SLOW = 1000;
+const SHOW_DELAY_FAST = 250;
 const HIDE_DELAY = 0;
 const ANIMATION_DURATION = 100;
 const template = document.createElement('template');
@@ -34,7 +35,7 @@ defineCustomElement('sinch-tooltip', class extends NectaryElement {
     this.#$target = shadowRoot.querySelector('#target');
     this.#shouldReduceMotion = shouldReduceMotion();
     this.#tooltipState = new TooltipState({
-      showDelay: SHOW_DELAY,
+      showDelay: SHOW_DELAY_SLOW,
       hideDelay: this.#shouldReduceMotion ? HIDE_DELAY + ANIMATION_DURATION : HIDE_DELAY,
       hideAnimationDuration: this.#shouldReduceMotion ? 0 : ANIMATION_DURATION,
       onShowStart: this.#onStateShowStart,
@@ -61,7 +62,38 @@ defineCustomElement('sinch-tooltip', class extends NectaryElement {
     this.#tooltipState.destroy();
   }
   static get observedAttributes() {
-    return ['text', 'orientation'];
+    return ['text', 'orientation', 'type'];
+  }
+  attributeChangedCallback(name, _, newVal) {
+    switch (name) {
+      case 'text':
+        {
+          this.#updateText();
+          break;
+        }
+      case 'orientation':
+        {
+          if ('production' !== 'production') {
+            assertOrientation(newVal);
+          }
+          updateAttribute(this.#$pop, 'orientation', getPopOrientation(this.orientation));
+          if (this.#isOpen()) {
+            this.#resetTipOrientation();
+            this.#updateTipOrientation();
+          }
+          break;
+        }
+      case 'type':
+        {
+          if ('production' !== 'production') {
+            assertType(newVal);
+          }
+          this.#tooltipState.updateOptions({
+            showDelay: newVal === 'fast' ? SHOW_DELAY_FAST : SHOW_DELAY_SLOW
+          });
+          break;
+        }
+    }
   }
   get text() {
     return getAttribute(this, 'text', '');
@@ -81,33 +113,18 @@ defineCustomElement('sinch-tooltip', class extends NectaryElement {
   set orientation(value) {
     updateLiteralAttribute(this, orientationValues, 'orientation', value);
   }
+  get type() {
+    return getLiteralAttribute(this, typeValues, 'type', 'slow');
+  }
+  set type(value) {
+    updateLiteralAttribute(this, typeValues, 'type', value);
+  }
   get footprintRect() {
     return this.#$pop.footprintRect;
   }
   get tooltipRect() {
     return this.#$pop.popoverRect;
   }
-  attributeChangedCallback(name, _, newVal) {
-    switch (name) {
-      case 'text':
-        {
-          this.#updateText();
-          break;
-        }
-      case 'orientation':
-        {
-          if ('production' !== 'production') {
-            assertOrientation(newVal);
-          }
-          updateAttribute(this.#$pop, 'orientation', getPopOrientation(this.orientation));
-          if (this.#isOpen()) {
-            this.#resetTipOrientation();
-            this.#updateTipOrientation();
-          }
-          break;
-        }
-    }
-  }
   #onMouseDown = () => {
     this.#tooltipState.destroy();
   };

package/tooltip/tooltip-state.d.ts

@@ -10,6 +10,7 @@ type TTooltipStateOptions = {
 export declare class TooltipState {
     #private;
     constructor(options: TTooltipStateOptions);
+    updateOptions(options: Partial<TTooltipStateOptions>): void;
     show(): void;
     hide(): void;
     interrupt(): void;

package/tooltip/tooltip-state.js

@@ -5,6 +5,12 @@ export class TooltipState {
   constructor(options) {
     this.#options = options;
   }
+  updateOptions(options) {
+    this.#options = {
+      ...this.#options,
+      ...options
+    };
+  }
   show() {
     switch (this.#state) {
       case 'hide':

package/tooltip/types.d.ts

@@ -1,5 +1,6 @@
 import type { TRect, TSinchElementReact } from '../types';
 export type TSinchTooltipOrientation = 'top' | 'bottom' | 'left' | 'right' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+export type TSinchTooltipType = 'slow' | 'fast';
 export type TSinchTooltipElement = HTMLElement & {
     /** Text */
     text: string;
@@ -9,6 +10,8 @@ export type TSinchTooltipElement = HTMLElement & {
     inverted: boolean;
     /** Orientation, where it *points to* from origin */
     orientation: TSinchTooltipOrientation;
+    /** Type */
+    type: TSinchTooltipType;
     readonly footprintRect: TRect;
     readonly tooltipRect: TRect;
     /** Show event */
@@ -23,6 +26,8 @@ export type TSinchTooltipElement = HTMLElement & {
     setAttribute(name: 'inverted', value: ''): void;
     /** Orientation, where it *points to* from origin */
     setAttribute(name: 'orientation', value: TSinchTooltipOrientation): void;
+    /** Type */
+    setAttribute(name: 'type', value: TSinchTooltipType): void;
 };
 export type TSinchTooltipReact = TSinchElementReact<TSinchTooltipElement> & {
     /** Text */
@@ -33,6 +38,8 @@ export type TSinchTooltipReact = TSinchElementReact<TSinchTooltipElement> & {
     inverted?: boolean;
     /** Orientation, where it *points to* from origin */
     orientation?: TSinchTooltipOrientation;
+    /** Type */
+    type?: TSinchTooltipType;
     /** Show event handler */
     'on-show'?: (e: CustomEvent<void>) => void;
     /** Hide event handler */

package/tooltip/utils.d.ts

@@ -1,7 +1,10 @@
-import type { TSinchTooltipOrientation } from './types';
+import type { TSinchTooltipOrientation, TSinchTooltipType } from './types';
 import type { TSinchPopOrientation } from '../pop/types';
+export declare const typeValues: readonly TSinchTooltipType[];
 export declare const orientationValues: readonly TSinchTooltipOrientation[];
 export declare const getPopOrientation: (orientation: TSinchTooltipOrientation) => TSinchPopOrientation;
 type TAssertOrientation = (value: string | null) => asserts value is TSinchTooltipOrientation;
 export declare const assertOrientation: TAssertOrientation;
+type TAssertType = (value: string | null) => asserts value is TSinchTooltipType;
+export declare const assertType: TAssertType;
 export {};

package/tooltip/utils.js

@@ -1,3 +1,4 @@
+export const typeValues = ['fast', 'slow'];
 export const orientationValues = ['top', 'bottom', 'left', 'right', 'top-left', 'top-right', 'bottom-left', 'bottom-right'];
 export const getPopOrientation = orientation => {
   if (orientation === 'top') {
@@ -15,7 +16,12 @@ export const getPopOrientation = orientation => {
   return orientation;
 };
 export const assertOrientation = value => {
-  if (value === null || !orientationValues.includes(value)) {
+  if (value !== null && !orientationValues.includes(value)) {
     throw new Error(`sinch-tooltip: invalid orientation attribute: ${value}`);
   }
+};
+export const assertType = value => {
+  if (value !== null && !typeValues.includes(value)) {
+    throw new Error(`sinch-tooltip: invalid type attribute: ${value}`);
+  }
 };