@nectary/components 0.38.0 → 0.40.0

package/file-drop/index.js

@@ -1,186 +1,44 @@
-import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
-import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
-
-var _$filePicker, _$dropArea, _$placeholder, _setDragEffect, _onDragEnter, _onDragLeave, _onDragOver, _onDrop, _onFilePickerChange, _onFilePickerInvalid, _onChangeReactHandler, _onInvalidReactHandler, _dispatchChangeEvent, _dispatchInvalidEvent;
-
-function _classPrivateMethodInitSpec(obj, privateSet) { _checkPrivateRedeclaration(obj, privateSet); privateSet.add(obj); }
-
-function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedeclaration(obj, privateMap); privateMap.set(obj, value); }
-
-function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollection.has(obj)) { throw new TypeError("Cannot initialize the same private elements twice on an object"); } }
-
-function _classPrivateMethodGet(receiver, privateSet, fn) { if (!privateSet.has(receiver)) { throw new TypeError("attempted to get private field on non-instance"); } return fn; }
-
 import '../text';
 import '../file-picker';
 import { defineCustomElement, getAttribute, getBooleanAttribute, getIntegerAttribute, getReactEventHandler, 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-shape-radius-m);background-color:var(--sinch-color-background-grey)}#wrapper.drop.valid{background-color:var(--sinch-color-background-blue)}#wrapper::after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;border:1px dashed var(--sinch-color-stormy-100);border-radius:var(--sinch-shape-radius-m);pointer-events:none}#placeholder{align-self:center;text-align:center}:host([invalid]) #wrapper::after{border-color:var(--sinch-color-text-invalid);border-width:1px}#wrapper.drop::after{pointer-events:all}#wrapper.drop.valid::after{border-color:var(--sinch-color-aqua-400);border-width:2px}#wrapper.drop #placeholder{color:var(--sinch-color-text-muted)}:host([disabled]) #wrapper #placeholder{color:var(--sinch-color-stormy-100)}:host([disabled]) #wrapper{background-color:var(--sinch-color-snow-100)}:host([disabled]) #wrapper::after{border-color:var(--sinch-color-stormy-100);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>';
+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-shape-radius-m);background-color:var(--sinch-color-bg-primary-contrast)}#wrapper.drop.valid{background-color:var(--sinch-color-bg-comp-blue)}#wrapper::after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;border:1px dashed var(--sinch-color-stormy-100);border-radius:var(--sinch-shape-radius-m);pointer-events:none}#placeholder{align-self:center;text-align:center}:host([invalid]) #wrapper::after{border-color:var(--sinch-color-text-invalid);border-width:1px}#wrapper.drop::after{pointer-events:all}#wrapper.drop.valid::after{border-color:var(--sinch-color-aqua-400);border-width:2px}#wrapper.drop #placeholder{color:var(--sinch-color-text-muted)}:host([disabled]) #wrapper #placeholder{color:var(--sinch-color-stormy-100)}:host([disabled]) #wrapper{background-color:var(--sinch-color-snow-100)}:host([disabled]) #wrapper::after{border-color:var(--sinch-color-stormy-100);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', (_$filePicker = new WeakMap(), _$dropArea = new WeakMap(), _$placeholder = new WeakMap(), _setDragEffect = new WeakSet(), _onDragEnter = new WeakMap(), _onDragLeave = new WeakMap(), _onDragOver = new WeakMap(), _onDrop = new WeakMap(), _onFilePickerChange = new WeakMap(), _onFilePickerInvalid = new WeakMap(), _onChangeReactHandler = new WeakMap(), _onInvalidReactHandler = new WeakMap(), _dispatchChangeEvent = new WeakSet(), _dispatchInvalidEvent = new WeakSet(), class extends NectaryElement {
+defineCustomElement('sinch-file-drop', class extends NectaryElement {
+  #$filePicker;
+  #$dropArea;
+  #$placeholder;
+
   constructor() {
     super();
-
-    _classPrivateMethodInitSpec(this, _dispatchInvalidEvent);
-
-    _classPrivateMethodInitSpec(this, _dispatchChangeEvent);
-
-    _classPrivateMethodInitSpec(this, _setDragEffect);
-
-    _classPrivateFieldInitSpec(this, _$filePicker, {
-      writable: true,
-      value: void 0
-    });
-
-    _classPrivateFieldInitSpec(this, _$dropArea, {
-      writable: true,
-      value: void 0
-    });
-
-    _classPrivateFieldInitSpec(this, _$placeholder, {
-      writable: true,
-      value: void 0
-    });
-
-    _classPrivateFieldInitSpec(this, _onDragEnter, {
-      writable: true,
-      value: e => {
-        e.stopPropagation();
-        e.preventDefault();
-        const hasTypes = e.dataTransfer?.types?.includes('Files') === true;
-        const hasItems = e.dataTransfer?.items != null && e.dataTransfer.items.length > 0;
-
-        _classPrivateMethodGet(this, _setDragEffect, _setDragEffect2).call(this, true, hasTypes || hasItems);
-      }
-    });
-
-    _classPrivateFieldInitSpec(this, _onDragLeave, {
-      writable: true,
-      value: e => {
-        e.stopPropagation();
-        e.preventDefault();
-
-        _classPrivateMethodGet(this, _setDragEffect, _setDragEffect2).call(this, false);
-      }
-    });
-
-    _classPrivateFieldInitSpec(this, _onDragOver, {
-      writable: true,
-      value: e => {
-        e.stopPropagation();
-        e.preventDefault();
-      }
-    });
-
-    _classPrivateFieldInitSpec(this, _onDrop, {
-      writable: true,
-      value: e => {
-        e.stopPropagation();
-        e.preventDefault();
-
-        _classPrivateMethodGet(this, _setDragEffect, _setDragEffect2).call(this, 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) {
-          _classPrivateMethodGet(this, _dispatchInvalidEvent, _dispatchInvalidEvent2).call(this, 'multiple');
-
-          return;
-        }
-
-        const files = Array.from(dt.files);
-
-        if (!areFilesAccepted(files, this.accept)) {
-          _classPrivateMethodGet(this, _dispatchInvalidEvent, _dispatchInvalidEvent2).call(this, 'accept');
-
-          return;
-        }
-
-        if (!doFilesSatisfySize(files, this.size)) {
-          _classPrivateMethodGet(this, _dispatchInvalidEvent, _dispatchInvalidEvent2).call(this, 'size');
-
-          return;
-        }
-
-        _classPrivateMethodGet(this, _dispatchChangeEvent, _dispatchChangeEvent2).call(this, files);
-      }
-    });
-
-    _classPrivateFieldInitSpec(this, _onFilePickerChange, {
-      writable: true,
-      value: e => {
-        _classPrivateMethodGet(this, _dispatchChangeEvent, _dispatchChangeEvent2).call(this, e.detail);
-      }
-    });
-
-    _classPrivateFieldInitSpec(this, _onFilePickerInvalid, {
-      writable: true,
-      value: e => {
-        _classPrivateMethodGet(this, _dispatchInvalidEvent, _dispatchInvalidEvent2).call(this, e.detail);
-      }
-    });
-
-    _classPrivateFieldInitSpec(this, _onChangeReactHandler, {
-      writable: true,
-      value: e => {
-        getReactEventHandler(this, 'on-change')?.(e);
-      }
-    });
-
-    _classPrivateFieldInitSpec(this, _onInvalidReactHandler, {
-      writable: true,
-      value: e => {
-        getReactEventHandler(this, 'on-invalid')?.(e);
-      }
-    });
-
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
-
-    _classPrivateFieldSet(this, _$dropArea, shadowRoot.querySelector('#wrapper'));
-
-    _classPrivateFieldSet(this, _$placeholder, shadowRoot.querySelector('#placeholder'));
-
-    _classPrivateFieldSet(this, _$filePicker, shadowRoot.querySelector('#file-picker'));
+    this.#$dropArea = shadowRoot.querySelector('#wrapper');
+    this.#$placeholder = shadowRoot.querySelector('#placeholder');
+    this.#$filePicker = shadowRoot.querySelector('#file-picker');
   }
 
   connectedCallback() {
-    this.addEventListener('-change', _classPrivateFieldGet(this, _onChangeReactHandler));
-    this.addEventListener('-invalid', _classPrivateFieldGet(this, _onInvalidReactHandler));
-    this.addEventListener('dragenter', _classPrivateFieldGet(this, _onDragEnter));
-    this.addEventListener('dragleave', _classPrivateFieldGet(this, _onDragLeave));
-    this.addEventListener('dragover', _classPrivateFieldGet(this, _onDragOver));
-    this.addEventListener('drop', _classPrivateFieldGet(this, _onDrop));
-
-    _classPrivateFieldGet(this, _$filePicker).addEventListener('-change', _classPrivateFieldGet(this, _onFilePickerChange));
-
-    _classPrivateFieldGet(this, _$filePicker).addEventListener('-invalid', _classPrivateFieldGet(this, _onFilePickerInvalid));
+    this.addEventListener('-change', this.#onChangeReactHandler);
+    this.addEventListener('-invalid', this.#onInvalidReactHandler);
+    this.addEventListener('dragenter', this.#onDragEnter);
+    this.addEventListener('dragleave', this.#onDragLeave);
+    this.addEventListener('dragover', this.#onDragOver);
+    this.addEventListener('drop', this.#onDrop);
+    this.#$filePicker.addEventListener('-change', this.#onFilePickerChange);
+    this.#$filePicker.addEventListener('-invalid', this.#onFilePickerInvalid);
   }
 
   disconnectedCallback() {
-    this.removeEventListener('-change', _classPrivateFieldGet(this, _onChangeReactHandler));
-    this.removeEventListener('-invalid', _classPrivateFieldGet(this, _onInvalidReactHandler));
-    this.removeEventListener('dragenter', _classPrivateFieldGet(this, _onDragEnter));
-    this.removeEventListener('dragleave', _classPrivateFieldGet(this, _onDragLeave));
-    this.removeEventListener('dragover', _classPrivateFieldGet(this, _onDragOver));
-    this.removeEventListener('drop', _classPrivateFieldGet(this, _onDrop));
-
-    _classPrivateFieldGet(this, _$filePicker).removeEventListener('-change', _classPrivateFieldGet(this, _onFilePickerChange));
-
-    _classPrivateFieldGet(this, _$filePicker).removeEventListener('-invalid', _classPrivateFieldGet(this, _onFilePickerInvalid));
+    this.removeEventListener('-change', this.#onChangeReactHandler);
+    this.removeEventListener('-invalid', this.#onInvalidReactHandler);
+    this.removeEventListener('dragenter', this.#onDragEnter);
+    this.removeEventListener('dragleave', this.#onDragLeave);
+    this.removeEventListener('dragover', this.#onDragOver);
+    this.removeEventListener('drop', this.#onDrop);
+    this.#$filePicker.removeEventListener('-change', this.#onFilePickerChange);
+    this.#$filePicker.removeEventListener('-invalid', this.#onFilePickerInvalid);
   }
 
   static get observedAttributes() {
@@ -195,28 +53,26 @@ defineCustomElement('sinch-file-drop', (_$filePicker = new WeakMap(), _$dropArea
     switch (name) {
       case 'multiple':
         {
-          updateAttribute(_classPrivateFieldGet(this, _$filePicker), 'multiple', newVal);
+          updateAttribute(this.#$filePicker, 'multiple', newVal);
           break;
         }
 
       case 'accept':
         {
-          updateAttribute(_classPrivateFieldGet(this, _$filePicker), 'accept', newVal);
+          updateAttribute(this.#$filePicker, 'accept', newVal);
           break;
         }
 
       case 'placeholder':
         {
-          _classPrivateFieldGet(this, _$placeholder).textContent = newVal;
+          this.#$placeholder.textContent = newVal;
           break;
         }
 
       case 'disabled':
         {
           updateBooleanAttribute(this, 'disabled', isAttrTrue(newVal));
-
-          _classPrivateMethodGet(this, _setDragEffect, _setDragEffect2).call(this, false);
-
+          this.#setDragEffect(false);
           break;
         }
 
@@ -228,7 +84,7 @@ defineCustomElement('sinch-file-drop', (_$filePicker = new WeakMap(), _$dropArea
 
       case 'size':
         {
-          updateAttribute(_classPrivateFieldGet(this, _$filePicker), 'size', newVal);
+          updateAttribute(this.#$filePicker, 'size', newVal);
           break;
         }
     }
@@ -247,7 +103,7 @@ defineCustomElement('sinch-file-drop', (_$filePicker = new WeakMap(), _$dropArea
   }
 
   get accept() {
-    return getAttribute(this, 'accept', null);
+    return getAttribute(this, 'accept');
   }
 
   get size() {
@@ -290,31 +146,98 @@ defineCustomElement('sinch-file-drop', (_$filePicker = new WeakMap(), _$dropArea
     return getBooleanAttribute(this, 'invalid');
   }
 
-}));
-
-function _setDragEffect2(shouldEnable) {
-  let isValid = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-  const isElementEnabled = !this.disabled;
+  #setDragEffect(shouldEnable) {
+    let isValid = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    const isElementEnabled = !this.disabled;
 
-  if (shouldEnable) {
-    if (isElementEnabled) {
-      setClass(_classPrivateFieldGet(this, _$dropArea), 'drop', true);
-      setClass(_classPrivateFieldGet(this, _$dropArea), 'valid', isValid);
+    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);
     }
-  } else {
-    setClass(_classPrivateFieldGet(this, _$dropArea), 'drop', false);
-    setClass(_classPrivateFieldGet(this, _$dropArea), 'valid', false);
   }
-}
-
-function _dispatchChangeEvent2(files) {
-  this.dispatchEvent(new CustomEvent('-change', {
-    detail: files
-  }));
-}
-
-function _dispatchInvalidEvent2(type) {
-  this.dispatchEvent(new CustomEvent('-invalid', {
-    detail: type
-  }));
-}
+
+  #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-picker/index.d.ts

@@ -1,4 +1,3 @@
-import '../dropdown';
 import type { TSinchFilePickerElement, TSinchFilePickerReact } from './types';
 declare global {
     namespace JSX {

package/file-picker/index.js

@@ -1,122 +1,37 @@
-import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
-import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
-
-var _$input, _$targetSlot, _$target, _onTargetSlotChange, _onTargetClick, _onInputChange, _onChangeReactHandler, _onInvalidReactHandler;
-
-function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedeclaration(obj, privateMap); privateMap.set(obj, value); }
-
-function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollection.has(obj)) { throw new TypeError("Cannot initialize the same private elements twice on an object"); } }
-
-import '../dropdown';
 import { defineCustomElement, getAttribute, getBooleanAttribute, getFirstSlotElement, getIntegerAttribute, getReactEventHandler, 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', (_$input = new WeakMap(), _$targetSlot = new WeakMap(), _$target = new WeakMap(), _onTargetSlotChange = new WeakMap(), _onTargetClick = new WeakMap(), _onInputChange = new WeakMap(), _onChangeReactHandler = new WeakMap(), _onInvalidReactHandler = new WeakMap(), class extends NectaryElement {
+defineCustomElement('sinch-file-picker', class extends NectaryElement {
+  #$input;
+  #$targetSlot;
+  #$target = null;
+
   constructor() {
     super();
-
-    _classPrivateFieldInitSpec(this, _$input, {
-      writable: true,
-      value: void 0
-    });
-
-    _classPrivateFieldInitSpec(this, _$targetSlot, {
-      writable: true,
-      value: void 0
-    });
-
-    _classPrivateFieldInitSpec(this, _$target, {
-      writable: true,
-      value: null
-    });
-
-    _classPrivateFieldInitSpec(this, _onTargetSlotChange, {
-      writable: true,
-      value: () => {
-        _classPrivateFieldGet(this, _$target)?.removeEventListener('-click', _classPrivateFieldGet(this, _onTargetClick));
-
-        _classPrivateFieldSet(this, _$target, getFirstSlotElement(_classPrivateFieldGet(this, _$targetSlot)));
-
-        _classPrivateFieldGet(this, _$target)?.addEventListener('-click', _classPrivateFieldGet(this, _onTargetClick));
-      }
-    });
-
-    _classPrivateFieldInitSpec(this, _onTargetClick, {
-      writable: true,
-      value: () => {
-        _classPrivateFieldGet(this, _$input).click();
-      }
-    });
-
-    _classPrivateFieldInitSpec(this, _onInputChange, {
-      writable: true,
-      value: () => {
-        if (_classPrivateFieldGet(this, _$input).files === null) {
-          return;
-        }
-
-        const files = Array.from(_classPrivateFieldGet(this, _$input).files);
-
-        if (!doFilesSatisfySize(files, this.size)) {
-          this.dispatchEvent(new CustomEvent('-invalid', {
-            detail: 'size'
-          }));
-          return;
-        }
-
-        this.dispatchEvent(new CustomEvent('-change', {
-          detail: files
-        }));
-      }
-    });
-
-    _classPrivateFieldInitSpec(this, _onChangeReactHandler, {
-      writable: true,
-      value: e => {
-        getReactEventHandler(this, 'on-change')?.(e);
-      }
-    });
-
-    _classPrivateFieldInitSpec(this, _onInvalidReactHandler, {
-      writable: true,
-      value: e => {
-        getReactEventHandler(this, 'on-invalid')?.(e);
-      }
-    });
-
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
-
-    _classPrivateFieldSet(this, _$input, document.createElement('input'));
-
-    _classPrivateFieldGet(this, _$input).type = 'file';
-
-    _classPrivateFieldSet(this, _$targetSlot, shadowRoot.querySelector('slot'));
+    this.#$input = document.createElement('input');
+    this.#$input.type = 'file';
+    this.#$targetSlot = shadowRoot.querySelector('slot');
   }
 
   connectedCallback() {
-    _classPrivateFieldGet(this, _$targetSlot).addEventListener('slotchange', _classPrivateFieldGet(this, _onTargetSlotChange));
-
-    _classPrivateFieldGet(this, _$input).addEventListener('change', _classPrivateFieldGet(this, _onInputChange));
-
-    this.addEventListener('-change', _classPrivateFieldGet(this, _onChangeReactHandler));
-    this.addEventListener('-invalid', _classPrivateFieldGet(this, _onInvalidReactHandler));
-
-    _classPrivateFieldGet(this, _onTargetSlotChange).call(this);
+    this.#$targetSlot.addEventListener('slotchange', this.#onTargetSlotChange);
+    this.#$input.addEventListener('change', this.#onInputChange);
+    this.addEventListener('-change', this.#onChangeReactHandler);
+    this.addEventListener('-invalid', this.#onInvalidReactHandler);
+    this.#onTargetSlotChange();
   }
 
   disconnectedCallback() {
-    _classPrivateFieldGet(this, _$targetSlot).removeEventListener('slotchange', _classPrivateFieldGet(this, _onTargetSlotChange));
-
-    _classPrivateFieldGet(this, _$input).removeEventListener('change', _classPrivateFieldGet(this, _onInputChange));
-
-    this.removeEventListener('-change', _classPrivateFieldGet(this, _onChangeReactHandler));
-    this.removeEventListener('-invalid', _classPrivateFieldGet(this, _onInvalidReactHandler));
-    _classPrivateFieldGet(this, _$target)?.removeEventListener('-click', _classPrivateFieldGet(this, _onTargetClick));
-
-    _classPrivateFieldSet(this, _$target, null);
+    this.#$targetSlot.removeEventListener('slotchange', this.#onTargetSlotChange);
+    this.#$input.removeEventListener('change', this.#onInputChange);
+    this.removeEventListener('-change', this.#onChangeReactHandler);
+    this.removeEventListener('-invalid', this.#onInvalidReactHandler);
+    this.#$target?.removeEventListener('-click', this.#onTargetClick);
+    this.#$target = null;
   }
 
   static get observedAttributes() {
@@ -136,7 +51,7 @@ defineCustomElement('sinch-file-picker', (_$input = new WeakMap(), _$targetSlot
   }
 
   get accept() {
-    return getAttribute(this, 'accept', null);
+    return getAttribute(this, 'accept');
   }
 
   get size() {
@@ -155,16 +70,48 @@ defineCustomElement('sinch-file-picker', (_$input = new WeakMap(), _$targetSlot
     switch (name) {
       case 'multiple':
         {
-          updateBooleanAttribute(_classPrivateFieldGet(this, _$input), 'multiple', isAttrTrue(newVal));
+          updateBooleanAttribute(this.#$input, 'multiple', isAttrTrue(newVal));
           break;
         }
 
       case 'accept':
         {
-          updateAttribute(_classPrivateFieldGet(this, _$input), 'accept', newVal);
+          updateAttribute(this.#$input, 'accept', newVal);
           break;
         }
     }
   }
 
-}));
+  #onTargetSlotChange = () => {
+    this.#$target?.removeEventListener('-click', this.#onTargetClick);
+    this.#$target = getFirstSlotElement(this.#$targetSlot);
+    this.#$target?.addEventListener('-click', this.#onTargetClick);
+  };
+  #onTargetClick = () => {
+    this.#$input.click();
+  };
+  #onInputChange = () => {
+    if (this.#$input.files === null) {
+      return;
+    }
+
+    const files = Array.from(this.#$input.files);
+
+    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);
+  };
+});