@nectary/components 2.8.4 → 2.8.5

package/dialog/index.js

@@ -3,7 +3,7 @@ import '../icon';
 import '../stop-events';
 import '../title';
 import { defineCustomElement, getAttribute, getBooleanAttribute, getRect, isAttrTrue, updateAttribute, getReactEventHandler, NectaryElement, updateBooleanAttribute, setClass, isTargetEqual, isAttrEqual } from '../utils';
-const templateHTML = '<style>:host{display:contents;--sinch-comp-dialog-max-width:512px;--sinch-comp-dialog-max-height:90vh}#dialog{position:fixed;left:0;right:0;margin:auto;display:flex;flex-direction:column;padding:24px 0;max-width:var(--sinch-comp-dialog-max-width);max-height:var(--sinch-comp-dialog-max-height);border-radius:var(--sinch-comp-dialog-shape-radius);box-sizing:border-box;contain:content;background-color:var(--sinch-comp-dialog-color-default-background-initial);border:none;box-shadow:var(--sinch-comp-dialog-shadow);outline:0}#dialog:not([open]){display:none}dialog::backdrop{background-color:#000;opacity:.55}#header{display:flex;flex-direction:row;align-items:flex-start;margin-bottom:12px;padding:0 24px;gap:8px;--sinch-global-size-icon:24px;--sinch-global-color-icon:var(--sinch-comp-dialog-color-default-icon-initial)}#caption{--sinch-global-color-text:var(--sinch-comp-dialog-color-default-title-initial);--sinch-comp-title-font:var(--sinch-comp-dialog-font-title)}#content{min-height:0;overflow:auto;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{position:relative;left:4px;top:-4px;margin-left:auto}</style><dialog id="dialog"><div id="header"><slot id="icon" name="icon"></slot><sinch-title id="caption" type="m" level="3"></sinch-title><sinch-icon-button id="close" size="s"><sinch-icon id="icon-close" slot="icon" name="close"></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 templateHTML = '<style>:host{display:contents;--sinch-comp-dialog-max-width:512px;--sinch-comp-dialog-max-height:90vh;--sinch-comp-dialog-width:fit-content}#dialog{position:fixed;left:0;right:0;margin:auto;display:flex;flex-direction:column;padding:24px 0;width:var(--sinch-comp-dialog-width);max-width:var(--sinch-comp-dialog-max-width);max-height:var(--sinch-comp-dialog-max-height);border-radius:var(--sinch-comp-dialog-shape-radius);box-sizing:border-box;contain:content;background-color:var(--sinch-comp-dialog-color-default-background-initial);border:none;box-shadow:var(--sinch-comp-dialog-shadow);outline:0}#dialog:not([open]){display:none}dialog::backdrop{background-color:#000;opacity:.55}#header{display:flex;flex-direction:row;align-items:flex-start;margin-bottom:12px;padding:0 24px;gap:8px;--sinch-global-size-icon:24px;--sinch-global-color-icon:var(--sinch-comp-dialog-color-default-icon-initial)}#caption{--sinch-global-color-text:var(--sinch-comp-dialog-color-default-title-initial);--sinch-comp-title-font:var(--sinch-comp-dialog-font-title)}#content{min-height:0;overflow:auto;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{position:relative;left:4px;top:-4px;margin-left:auto}</style><dialog id="dialog"><div id="header"><slot id="icon" name="icon"></slot><sinch-title id="caption" type="m" level="3"></sinch-title><sinch-icon-button id="close" size="s"><sinch-icon id="icon-close" slot="icon" name="close"></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>';
 import { disableScroll, enableScroll } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;

package/input/index.js

@@ -79,7 +79,7 @@ defineCustomElement('sinch-input', class extends NectaryElement {
     this.#controller = null;
   }
   static get observedAttributes() {
-    return ['type', 'value', 'placeholder', 'mask', 'invalid', 'disabled', 'size', 'autocomplete', 'data-size', 'aria-label'];
+    return ['type', 'value', 'placeholder', 'mask', 'invalid', 'disabled', 'size', 'autocomplete', 'autofocus', 'data-size', 'aria-label'];
   }
   attributeChangedCallback(name, oldVal, newVal) {
     switch (name) {
@@ -150,6 +150,16 @@ defineCustomElement('sinch-input', class extends NectaryElement {
           updateBooleanAttribute(this, name, isDisabled);
           break;
         }
+      case 'autofocus':
+        {
+          if (isAttrEqual(oldVal, newVal)) {
+            return;
+          }
+          const isAutofocus = isAttrTrue(newVal);
+          this.#$input.autofocus = isAutofocus;
+          updateBooleanAttribute(this, name, isAutofocus);
+          break;
+        }
       case 'size':
         {
           updateAttribute(this, 'data-size', newVal);
@@ -208,6 +218,12 @@ defineCustomElement('sinch-input', class extends NectaryElement {
   get disabled() {
     return getBooleanAttribute(this, 'disabled');
   }
+  set autofocus(isAutofocus) {
+    updateBooleanAttribute(this, 'autofocus', isAutofocus);
+  }
+  get autofocus() {
+    return getBooleanAttribute(this, 'autofocus');
+  }
   set size(size) {
     updateLiteralAttribute(this, sizeValues, 'size', size);
   }

package/input/types.d.ts

@@ -20,6 +20,8 @@ export type TSinchInputElement = HTMLElement & {
     invalid: boolean;
     /** Disabled */
     disabled: boolean;
+    /** Whether the input should be autocofused */
+    autofocus: boolean;
     /** Size, `m` by default */
     size: TSinchSize;
     selectionStart: number | null;
@@ -46,6 +48,8 @@ export type TSinchInputElement = HTMLElement & {
     setAttribute(name: 'invalid', value: ''): void;
     /** Disabled */
     setAttribute(name: 'disabled', value: ''): void;
+    /** Autofocus */
+    setAttribute(name: 'autofocus', value: ''): void;
     /** Size, `m` by default */
     setAttribute(name: 'size', value: TSinchSize): void;
 };
@@ -66,6 +70,8 @@ export type TSinchInputReact = TSinchElementReact<TSinchInputElement> & {
     invalid?: boolean;
     /** Disabled */
     disabled?: boolean;
+    /** Autofocus */
+    autofocus?: boolean;
     /** Size, `m` by default */
     size?: TSinchSize;
     /** Change value handler */

package/package.json

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

package/utils/debounce.js

@@ -18,5 +18,5 @@ const createDebounce = (delayFn, cancelFn) => cb => {
     }
   };
 };
-export const debounceTimeout = ms => createDebounce(cb => global.setTimeout(cb, ms), global.clearTimeout);
-export const debounceAnimationFrame = createDebounce(global.requestAnimationFrame, global.cancelAnimationFrame);
+export const debounceTimeout = ms => createDebounce(cb => globalThis.setTimeout(cb, ms), globalThis.clearTimeout);
+export const debounceAnimationFrame = createDebounce(globalThis.requestAnimationFrame, globalThis.cancelAnimationFrame);

package/utils/throttle.js

@@ -17,4 +17,4 @@ const createThrottle = (delayFn, cancelFn) => cb => {
     }
   };
 };
-export const throttleAnimationFrame = createThrottle(global.requestAnimationFrame, global.cancelAnimationFrame);
+export const throttleAnimationFrame = createThrottle(globalThis.requestAnimationFrame, globalThis.cancelAnimationFrame);