@nectary/components 2.9.0 → 2.11.0

package/emoji-picker/types.d.ts

@@ -0,0 +1,26 @@
+import type { TRect, TSinchElementReact } from '../types';
+export type TEmoji = {
+    emoji: string;
+    code: string;
+    label: string;
+    skins?: TEmoji[];
+    tone: number | number[];
+};
+export type TEmojiGroup = {
+    name: string;
+    emojis: TEmoji[];
+};
+export type TSinchEmojiPickerElement = HTMLElement & {
+    readonly skinToneButtonRect: TRect;
+    readonly searchInputRect: TRect;
+    readonly searchClearButtonRect: TRect;
+    nthSkinToneRect(index: number): TRect | null;
+    nthTabRect(index: number): TRect | null;
+    nthEmojiRect(index: number): TRect | null;
+    /** Change value event */
+    addEventListener(type: '-change', listener: (e: CustomEvent<string>) => void): void;
+};
+export type TSinchEmojiPickerReact = TSinchElementReact<TSinchEmojiPickerElement> & {
+    /** Change value handler */
+    'on-change': (e: CustomEvent<string>) => void;
+};

package/emoji-picker/types.js

@@ -0,0 +1 @@
+export {};

package/field/index.d.ts

@@ -0,0 +1,11 @@
+import type { TSinchFieldElement, TSinchFieldReact } from './types';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-field': TSinchFieldReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-field': TSinchFieldElement;
+    }
+}

package/field/index.js

@@ -0,0 +1,120 @@
+import { defineCustomElement, getAttribute, getBooleanAttribute, getFirstSlotElement, isAttrEqual, isAttrTrue, NectaryElement, setClass, updateAttribute, updateBooleanAttribute } from '../utils';
+const templateHTML = '<style>:host{display:block}#wrapper{display:flex;flex-direction:column;width:100%}#bottom,#top{display:flex;align-items:baseline}#top{height:24px;margin-bottom:2px}#top.empty{display:none}#additional,#invalid,#label,#optional{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#label{font:var(--sinch-comp-field-font-label);color:var(--sinch-comp-field-color-default-label-initial)}#optional{flex:1;font:var(--sinch-comp-field-font-optional);color:var(--sinch-comp-field-color-default-optional-initial);text-align:right}#additional{flex:1;text-align:right;font:var(--sinch-comp-field-font-additional);color:var(--sinch-comp-field-color-default-additional-initial);line-height:20px;margin-top:2px}#additional:empty{display:none}#invalid{font:var(--sinch-comp-field-font-invalid);color:var(--sinch-comp-field-color-invalid-text-initial);line-height:20px;margin-top:2px}#invalid:empty{display:none}#tooltip{align-self:center;margin:0 8px;display:flex}#tooltip.empty{display:none}:host([disabled]) #label{color:var(--sinch-comp-field-color-disabled-label-initial)}:host([disabled]) #additional{color:var(--sinch-comp-field-color-disabled-additional-initial)}:host([disabled]) #optional{color:var(--sinch-comp-field-color-disabled-optional-initial)}</style><div id="wrapper"><div id="top"><label id="label" for="input"></label><div id="tooltip"><slot name="tooltip"></slot></div><span id="optional"></span></div><slot name="input"></slot><div id="bottom"><div id="invalid"></div><div id="additional"></div></div></div>';
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+defineCustomElement('sinch-field', class extends NectaryElement {
+  #$label;
+  #$optionalText;
+  #$additionalText;
+  #$invalidText;
+  #$inputSlot;
+  #$tooltipWrapper;
+  #$tooltipSlot;
+  #controller = null;
+  constructor() {
+    super();
+    const shadowRoot = this.attachShadow();
+    shadowRoot.appendChild(template.content.cloneNode(true));
+    this.topSection = shadowRoot.querySelector('#top');
+    this.#$label = shadowRoot.querySelector('#label');
+    this.#$optionalText = shadowRoot.querySelector('#optional');
+    this.#$additionalText = shadowRoot.querySelector('#additional');
+    this.#$invalidText = shadowRoot.querySelector('#invalid');
+    this.#$inputSlot = shadowRoot.querySelector('slot[name="input"]');
+    this.#$tooltipSlot = shadowRoot.querySelector('slot[name="tooltip"]');
+    this.#$tooltipWrapper = shadowRoot.querySelector('#tooltip');
+  }
+  connectedCallback() {
+    this.#controller = new AbortController();
+    const {
+      signal
+    } = this.#controller;
+    const options = {
+      signal
+    };
+    this.shouldShowTopSection();
+    this.#$label.addEventListener('click', this.#onLabelClick, options);
+    this.#$tooltipSlot.addEventListener('slotchange', this.#onTooltipSlotChange, options);
+  }
+  disconnectedCallback() {
+    this.#controller.abort();
+    this.#controller = null;
+  }
+  static get observedAttributes() {
+    return ['label', 'optionaltext', 'additionaltext', 'invalidtext', 'disabled'];
+  }
+  shouldShowTopSection() {
+    const label = getAttribute(this, 'label');
+    const optionaltext = getAttribute(this, 'optionaltext');
+    setClass(this.topSection, 'empty', label === null && optionaltext === null);
+  }
+  attributeChangedCallback(name, oldVal, newVal) {
+    switch (name) {
+      case 'label':
+        {
+          this.#$label.textContent = newVal;
+          break;
+        }
+      case 'optionaltext':
+        {
+          this.#$optionalText.textContent = newVal;
+          break;
+        }
+      case 'additionaltext':
+        {
+          this.#$additionalText.textContent = newVal;
+          break;
+        }
+      case 'invalidtext':
+        {
+          this.#$invalidText.textContent = newVal;
+          break;
+        }
+      case 'disabled':
+        {
+          if (isAttrEqual(oldVal, newVal)) {
+            break;
+          }
+          updateBooleanAttribute(this, name, isAttrTrue(newVal));
+          break;
+        }
+    }
+    this.shouldShowTopSection();
+  }
+  set label(value) {
+    updateAttribute(this, 'label', value);
+  }
+  get label() {
+    return getAttribute(this, 'label');
+  }
+  set optionalText(value) {
+    updateAttribute(this, 'optionaltext', value);
+  }
+  get optionalText() {
+    return getAttribute(this, 'optionaltext');
+  }
+  set additionalText(value) {
+    updateAttribute(this, 'additionaltext', value);
+  }
+  get additionalText() {
+    return getAttribute(this, 'additionaltext');
+  }
+  set invalidText(value) {
+    updateAttribute(this, 'invalidtext', value);
+  }
+  get invalidText() {
+    return getAttribute(this, 'invalidtext');
+  }
+  set disabled(isDisabled) {
+    updateBooleanAttribute(this, 'disabled', isDisabled);
+  }
+  get disabled() {
+    return getBooleanAttribute(this, 'disabled');
+  }
+  #onLabelClick = () => {
+    getFirstSlotElement(this.#$inputSlot)?.focus?.();
+  };
+  #onTooltipSlotChange = () => {
+    setClass(this.#$tooltipWrapper, 'empty', this.#$tooltipSlot.assignedElements().length === 0);
+  };
+});

package/field/types.d.ts

@@ -0,0 +1,35 @@
+import type { TSinchElementReact } from '../types';
+export type TSinchFieldElement = HTMLElement & {
+    /** Label */
+    label: string | null;
+    /** Optional text */
+    optionalText: string | null;
+    /** Additional text */
+    additionalText: string | null;
+    /** Invalid text, controls the overall invalid state of the text field */
+    invalidText: string | null;
+    /** Disabled */
+    disabled: boolean;
+    /** Label */
+    setAttribute(name: 'label', value: string): void;
+    /** Optional text */
+    setAttribute(name: 'optionaltext', value: string): void;
+    /** Additional text */
+    setAttribute(name: 'additionaltext', value: string): void;
+    /** Invalid text, controls the overall invalid state of the text field */
+    setAttribute(name: 'invalidtext', value: string): void;
+    /** Disabled */
+    setAttribute(name: 'disabled', value: ''): void;
+};
+export type TSinchFieldReact = TSinchElementReact<TSinchFieldElement> & {
+    /** Label that shows in UI */
+    label?: string;
+    /** Optional text */
+    optionalText?: string;
+    /** Additional text */
+    additionalText?: string;
+    /** Invalid text, controls the overall invalid state of the text field */
+    invalidText?: string;
+    /** Disabled */
+    disabled?: boolean;
+};

package/field/types.js

@@ -0,0 +1 @@
+export {};

package/file-drop/index.d.ts

@@ -0,0 +1,13 @@
+import '../text';
+import '../file-picker';
+import type { TSinchFileDropElement, TSinchFileDropReact } from './types';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-file-drop': TSinchFileDropReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-file-drop': TSinchFileDropElement;
+    }
+}

package/file-drop/index.js

@@ -0,0 +1,205 @@
+import '../text';
+import '../file-picker';
+import { defineCustomElement, getAttribute, getBooleanAttribute, getIntegerAttribute, getReactEventHandler, isAttrEqual, isAttrTrue, NectaryElement, setClass, updateAttribute, updateBooleanAttribute } from '../utils';
+const templateHTML = '<style>:host{display:block}#wrapper{position:relative;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;align-content:center;gap:8px;height:148px;min-width:148px;box-sizing:border-box;padding:16px;border-radius:var(--sinch-comp-file-drop-shape-radius);background-color:var(--sinch-comp-file-drop-color-default-background-initial)}#wrapper::after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;border:1px dashed var(--sinch-comp-file-drop-color-default-border-initial);border-radius:var(--sinch-comp-file-drop-shape-radius);pointer-events:none}#placeholder{align-self:center;text-align:center;--sinch-global-color-text:var(--sinch-comp-file-drop-color-default-placeholder-initial);--sinch-comp-text-font:var(--sinch-comp-file-drop-font-placeholder)}:host([invalid]) #wrapper{background-color:var(--sinch-comp-file-drop-color-invalid-background-initial)}:host([invalid]) #wrapper::after{border-color:var(--sinch-comp-file-drop-color-invalid-border-initial);border-width:1px}#wrapper.drop::after{pointer-events:all}#wrapper.drop.valid{background-color:var(--sinch-comp-file-drop-color-default-background-active)}#wrapper.drop.valid::after{border-color:var(--sinch-comp-file-drop-color-default-border-active);border-width:2px}#wrapper.drop.valid>#placeholder{--sinch-global-color-text:var(--sinch-comp-file-drop-color-default-placeholder-active)}:host([disabled])>#wrapper>#placeholder{--sinch-global-color-text:var(--sinch-comp-file-drop-color-disabled-placeholder-initial)}:host([disabled])>#wrapper{background-color:var(--sinch-comp-file-drop-color-disabled-background-initial)}:host([disabled])>#wrapper::after{border-color:var(--sinch-comp-file-drop-color-disabled-border-initial);border-width:1px}</style><div id="wrapper"><sinch-text id="placeholder" type="m" aria-hidden="true"></sinch-text><sinch-file-picker id="file-picker"><slot></slot></sinch-file-picker></div>';
+import { areFilesAccepted, doFilesSatisfySize } from './utils';
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+defineCustomElement('sinch-file-drop', class extends NectaryElement {
+  #$filePicker;
+  #$dropArea;
+  #$placeholder;
+  #controller = null;
+  constructor() {
+    super();
+    const shadowRoot = this.attachShadow();
+    shadowRoot.appendChild(template.content.cloneNode(true));
+    this.#$dropArea = shadowRoot.querySelector('#wrapper');
+    this.#$placeholder = shadowRoot.querySelector('#placeholder');
+    this.#$filePicker = shadowRoot.querySelector('#file-picker');
+  }
+  connectedCallback() {
+    this.#controller = new AbortController();
+    const {
+      signal
+    } = this.#controller;
+    const options = {
+      signal
+    };
+    this.addEventListener('-change', this.#onChangeReactHandler, options);
+    this.addEventListener('-invalid', this.#onInvalidReactHandler, options);
+    this.addEventListener('dragenter', this.#onDragEnter, options);
+    this.addEventListener('dragleave', this.#onDragLeave, options);
+    this.addEventListener('dragover', this.#onDragOver, options);
+    this.addEventListener('drop', this.#onDrop, options);
+    this.#$filePicker.addEventListener('-change', this.#onFilePickerChange, options);
+    this.#$filePicker.addEventListener('-invalid', this.#onFilePickerInvalid, options);
+  }
+  disconnectedCallback() {
+    this.#controller.abort();
+    this.#controller = null;
+  }
+  static get observedAttributes() {
+    return ['accept', 'multiple', 'placeholder', 'disabled', 'invalid', 'size'];
+  }
+  attributeChangedCallback(name, oldVal, newVal) {
+    if (isAttrEqual(oldVal, newVal)) {
+      return;
+    }
+    switch (name) {
+      case 'multiple':
+        {
+          updateAttribute(this.#$filePicker, 'multiple', newVal);
+          break;
+        }
+      case 'accept':
+        {
+          updateAttribute(this.#$filePicker, 'accept', newVal);
+          break;
+        }
+      case 'placeholder':
+        {
+          this.#$placeholder.textContent = newVal;
+          break;
+        }
+      case 'disabled':
+        {
+          this.#setDragEffect(false);
+          updateBooleanAttribute(this, 'disabled', isAttrTrue(newVal));
+          break;
+        }
+      case 'invalid':
+        {
+          updateBooleanAttribute(this, 'invalid', isAttrTrue(newVal));
+          break;
+        }
+      case 'size':
+        {
+          updateAttribute(this.#$filePicker, 'size', newVal);
+          break;
+        }
+    }
+  }
+  set multiple(isMultiple) {
+    updateBooleanAttribute(this, 'multiple', isMultiple);
+  }
+  get multiple() {
+    return getBooleanAttribute(this, 'multiple');
+  }
+  set accept(value) {
+    updateAttribute(this, 'accept', value);
+  }
+  get accept() {
+    return getAttribute(this, 'accept');
+  }
+  get size() {
+    return getIntegerAttribute(this, 'size', null);
+  }
+  set size(value) {
+    updateAttribute(this, 'size', value);
+  }
+  set text(value) {
+    updateAttribute(this, 'text', value);
+  }
+  get text() {
+    return getAttribute(this, 'text', '');
+  }
+  set placeholder(value) {
+    updateAttribute(this, 'placeholder', value);
+  }
+  get placeholder() {
+    return getAttribute(this, 'placeholder', '');
+  }
+  set disabled(isDisabled) {
+    updateBooleanAttribute(this, 'disabled', isDisabled);
+  }
+  get disabled() {
+    return getBooleanAttribute(this, 'disabled');
+  }
+  set invalid(isInvalid) {
+    updateBooleanAttribute(this, 'invalid', isInvalid);
+  }
+  get invalid() {
+    return getBooleanAttribute(this, 'invalid');
+  }
+  #setDragEffect(shouldEnable) {
+    let isValid = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    const isElementEnabled = !this.disabled;
+    if (shouldEnable) {
+      if (isElementEnabled) {
+        setClass(this.#$dropArea, 'drop', true);
+        setClass(this.#$dropArea, 'valid', isValid);
+      }
+    } else {
+      setClass(this.#$dropArea, 'drop', false);
+      setClass(this.#$dropArea, 'valid', false);
+    }
+  }
+  #onDragEnter = e => {
+    e.stopPropagation();
+    e.preventDefault();
+    const hasTypes = e.dataTransfer?.types?.includes('Files') === true;
+    const hasItems = e.dataTransfer?.items != null && e.dataTransfer.items.length > 0;
+    this.#setDragEffect(true, hasTypes || hasItems);
+  };
+  #onDragLeave = e => {
+    e.stopPropagation();
+    e.preventDefault();
+    this.#setDragEffect(false);
+  };
+  #onDragOver = e => {
+    e.stopPropagation();
+    e.preventDefault();
+  };
+  #onDrop = e => {
+    e.stopPropagation();
+    e.preventDefault();
+    this.#setDragEffect(false);
+    if (this.disabled) {
+      return;
+    }
+    const dt = e.dataTransfer;
+    if (dt === null) {
+      return;
+    }
+    if (dt.files.length === 0) {
+      return;
+    }
+    if (!this.multiple && dt.files.length > 1) {
+      this.#dispatchInvalidEvent('multiple');
+      return;
+    }
+    const files = Array.from(dt.files);
+    if (!areFilesAccepted(files, this.accept)) {
+      this.#dispatchInvalidEvent('accept');
+      return;
+    }
+    if (!doFilesSatisfySize(files, this.size)) {
+      this.#dispatchInvalidEvent('size');
+      return;
+    }
+    this.#dispatchChangeEvent(files);
+  };
+  #onFilePickerChange = e => {
+    this.#dispatchChangeEvent(e.detail);
+  };
+  #onFilePickerInvalid = e => {
+    this.#dispatchInvalidEvent(e.detail);
+  };
+  #onChangeReactHandler = e => {
+    getReactEventHandler(this, 'on-change')?.(e);
+  };
+  #onInvalidReactHandler = e => {
+    getReactEventHandler(this, 'on-invalid')?.(e);
+  };
+  #dispatchChangeEvent(files) {
+    this.dispatchEvent(new CustomEvent('-change', {
+      detail: files
+    }));
+  }
+  #dispatchInvalidEvent(type) {
+    this.dispatchEvent(new CustomEvent('-invalid', {
+      detail: type
+    }));
+  }
+});

package/file-drop/types.d.ts

@@ -0,0 +1,50 @@
+import type { TSinchElementReact } from '../types';
+export type TSinchFileDropInvalidType = 'accept' | 'multiple' | 'size';
+export type TSinchFileDropElement = HTMLElement & {
+    /** Allows to choose multiple files */
+    multiple: boolean;
+    /** [A unique file type specifier](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#unique_file_type_specifiers) */
+    accept: string | null;
+    /** Max file size in bytes */
+    size: number | null;
+    /** Disabled state */
+    disabled: boolean;
+    /** Invalid state */
+    invalid: boolean;
+    /** Placeholder */
+    placeholder: string;
+    /** Change value event */
+    addEventListener(type: '-change', listener: (e: CustomEvent<File[]>) => void): void;
+    /** Invalid event */
+    addEventListener(type: '-invalid', listener: (e: CustomEvent<TSinchFileDropInvalidType>) => void): void;
+    /** Allows to choose multiple files */
+    setAttribute(name: 'multiple', value: ''): void;
+    /** [A unique file type specifier](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#unique_file_type_specifiers) */
+    setAttribute(name: 'accept', value: string): void;
+    /** Max file size in bytes */
+    setAttribute(name: 'size', value: string): void;
+    /** Placeholder */
+    setAttribute(name: 'placeholder', value: string): void;
+    /** Invalid state */
+    setAttribute(name: 'invalid', value: ''): void;
+    /** Disabled state */
+    setAttribute(name: 'disabled', value: ''): void;
+};
+export type TSinchFileDropReact = TSinchElementReact<TSinchFileDropElement> & {
+    /** Allows to choose multiple files */
+    multiple?: boolean;
+    /** [A unique file type specifier](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#unique_file_type_specifiers) */
+    accept?: string;
+    /** Max file size in bytes */
+    size?: number;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Invalid state */
+    invalid?: boolean;
+    /** Placeholder */
+    placeholder: string;
+    /** Change value handler */
+    'on-change': (e: CustomEvent<File[]>) => void;
+    /** Invalid handler */
+    'on-invalid': (e: CustomEvent<TSinchFileDropInvalidType>) => void;
+};

package/file-drop/types.js

@@ -0,0 +1 @@
+export {};

package/file-drop/utils.d.ts

@@ -0,0 +1,2 @@
+export declare const areFilesAccepted: (files: File[], accept: string | null) => boolean;
+export declare const doFilesSatisfySize: (files: File[], size: number | null) => boolean;

package/file-drop/utils.js

@@ -0,0 +1,31 @@
+export const areFilesAccepted = (files, accept) => {
+  if (accept === null) {
+    return true;
+  }
+  const acceptValues = accept.split(/\s*,\s*/);
+  return files.every(file => {
+    return acceptValues.some(acceptValue => {
+      if (acceptValue.startsWith('.')) {
+        return file.name.endsWith(acceptValue);
+      }
+      if (acceptValue === 'image/*') {
+        return file.type.startsWith('image/');
+      }
+      if (acceptValue === 'video/*') {
+        return file.type.startsWith('video/');
+      }
+      if (acceptValue === 'audio/*') {
+        return file.type.startsWith('audio/');
+      }
+      return acceptValue === file.type;
+    });
+  });
+};
+export const doFilesSatisfySize = (files, size) => {
+  if (size === null || size <= 0) {
+    return true;
+  }
+  return files.every(file => {
+    return file.size <= size;
+  });
+};

package/file-picker/index.d.ts

@@ -0,0 +1,11 @@
+import type { TSinchFilePickerElement, TSinchFilePickerReact } from './types';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-file-picker': TSinchFilePickerReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-file-picker': TSinchFilePickerElement;
+    }
+}

package/file-picker/index.js

@@ -0,0 +1,103 @@
+import { defineCustomElement, getAttribute, getBooleanAttribute, getFirstSlotElement, getIntegerAttribute, getReactEventHandler, isAttrEqual, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute } from '../utils';
+const templateHTML = '<style>:host{display:inline-block}::slotted(*){display:block}</style><slot></slot>';
+import { doFilesSatisfySize } from './utils';
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+defineCustomElement('sinch-file-picker', class extends NectaryElement {
+  #$input;
+  #$targetSlot;
+  #$target = null;
+  #controller = null;
+  constructor() {
+    super();
+    const shadowRoot = this.attachShadow();
+    shadowRoot.appendChild(template.content.cloneNode(true));
+    this.#$input = document.createElement('input');
+    this.#$input.type = 'file';
+    this.#$targetSlot = shadowRoot.querySelector('slot');
+  }
+  connectedCallback() {
+    this.#controller = new AbortController();
+    const options = {
+      signal: this.#controller.signal
+    };
+    this.#$targetSlot.addEventListener('slotchange', this.#onTargetSlotChange, options);
+    this.#$input.addEventListener('change', this.#onInputChange, options);
+    this.addEventListener('-change', this.#onChangeReactHandler, options);
+    this.addEventListener('-invalid', this.#onInvalidReactHandler, options);
+    this.#onTargetSlotChange();
+  }
+  disconnectedCallback() {
+    this.#controller.abort();
+    this.#controller = null;
+    this.#$target = null;
+  }
+  static get observedAttributes() {
+    return ['accept', 'multiple'];
+  }
+  attributeChangedCallback(name, oldVal, newVal) {
+    switch (name) {
+      case 'multiple':
+        {
+          if (isAttrEqual(oldVal, newVal)) {
+            return;
+          }
+          updateBooleanAttribute(this.#$input, 'multiple', isAttrTrue(newVal));
+          break;
+        }
+      case 'accept':
+        {
+          updateAttribute(this.#$input, 'accept', newVal);
+          break;
+        }
+    }
+  }
+  set multiple(isMultiple) {
+    updateBooleanAttribute(this, 'multiple', isMultiple);
+  }
+  get multiple() {
+    return getBooleanAttribute(this, 'multiple');
+  }
+  set accept(value) {
+    updateAttribute(this, 'accept', value);
+  }
+  get accept() {
+    return getAttribute(this, 'accept');
+  }
+  get size() {
+    return getIntegerAttribute(this, 'size', null);
+  }
+  set size(value) {
+    updateAttribute(this, 'size', value);
+  }
+  #onTargetSlotChange = () => {
+    this.#$target?.removeEventListener('-click', this.#onTargetClick);
+    this.#$target = getFirstSlotElement(this.#$targetSlot, true);
+    this.#$target?.addEventListener('-click', this.#onTargetClick);
+  };
+  #onTargetClick = () => {
+    this.#$input.click();
+  };
+  #onInputChange = () => {
+    if (this.#$input.files === null) {
+      return;
+    }
+    const files = Array.from(this.#$input.files);
+    this.#$input.value = '';
+    if (!doFilesSatisfySize(files, this.size)) {
+      this.dispatchEvent(new CustomEvent('-invalid', {
+        detail: 'size'
+      }));
+      return;
+    }
+    this.dispatchEvent(new CustomEvent('-change', {
+      detail: files
+    }));
+  };
+  #onChangeReactHandler = e => {
+    getReactEventHandler(this, 'on-change')?.(e);
+  };
+  #onInvalidReactHandler = e => {
+    getReactEventHandler(this, 'on-invalid')?.(e);
+  };
+});

package/file-picker/types.d.ts

@@ -0,0 +1,32 @@
+import type { TSinchElementReact } from '../types';
+export type TSinchFilePickerInvalidType = 'size';
+export type TSinchFilePickerElement = HTMLElement & {
+    /** Allows to choose multiple files */
+    multiple: boolean;
+    /** [A unique file type specifier](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#unique_file_type_specifiers) */
+    accept: string | null;
+    /** Max file size in bytes */
+    size: number | null;
+    /** Change value event */
+    addEventListener(type: '-change', listener: (e: CustomEvent<File[]>) => void): void;
+    /** Invalid event */
+    addEventListener(type: '-invalid', listener: (e: CustomEvent<TSinchFilePickerInvalidType>) => void): void;
+    /** Allows to choose multiple files */
+    setAttribute(name: 'multiple', value: ''): void;
+    /** [A unique file type specifier](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#unique_file_type_specifiers) */
+    setAttribute(name: 'accept', value: string): void;
+    /** Max file size in bytes */
+    setAttribute(name: 'size', value: string): void;
+};
+export type TSinchFilePickerReact = TSinchElementReact<TSinchFilePickerElement> & {
+    /** Allows to choose multiple files */
+    multiple?: boolean;
+    /** [A unique file type specifier](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#unique_file_type_specifiers) */
+    accept?: string;
+    /** Max file size in bytes */
+    size?: number;
+    /** Change value handler */
+    'on-change': (e: CustomEvent<File[]>) => void;
+    /** Invalid handler */
+    'on-invalid': (e: CustomEvent<TSinchFilePickerInvalidType>) => void;
+};

package/file-picker/types.js

@@ -0,0 +1 @@
+export {};

package/file-picker/utils.d.ts

@@ -0,0 +1 @@
+export declare const doFilesSatisfySize: (files: File[], size: number | null) => boolean;

package/file-picker/utils.js

@@ -0,0 +1,8 @@
+export const doFilesSatisfySize = (files, size) => {
+  if (size === null || size <= 0) {
+    return true;
+  }
+  return files.every(file => {
+    return file.size <= size;
+  });
+};