@duetds/components 4.35.4 → 5.0.0

package/lib/collection/components/duet-upload/duet-upload.js

@@ -22,25 +22,6 @@ import { makeXhrRequest } from "./xhr.helpers";
  */
 export class DuetUpload {
   constructor() {
-    /**
-     * Own Properties
-     */
-    this.buttonId = createID("DuetButton");
-    this.labelId = createID("DuetLabel");
-    this.uploadId = createID("DuetUpload");
-    this.editableTableId = createID("DuetEditableTable");
-    this.filesInProgress = new Map();
-    this.fileMaxReached = false;
-    this.bytesMaxReached = false;
-    this.internalStatusMessageLabel = undefined;
-    /**
-     * Properties
-     */
-    this.DefaultGroups = {
-      inprogress: "inprogress",
-      success: "success",
-      failure: "failure",
-    };
     /**
      * State() variables
      */
@@ -62,8 +43,9 @@ export class DuetUpload {
       {
         icon: "action-delete",
         color: "color-danger",
-        color_hover: "primary-dark",
-        id: "delete",
+        size: "x-small",
+        background: "gray-lightest",
+        name: "delete",
         map: ["success", "failure"],
         label: {
           fi: "Poista tiedosto",
@@ -74,8 +56,9 @@ export class DuetUpload {
       {
         icon: "navigation-close",
         color: "primary",
-        color_hover: "primary-dark",
-        id: "cancel",
+        size: "x-small",
+        background: "gray-lightest",
+        name: "cancel",
         map: ["inprogress"],
         label: {
           fi: "Keskeytä lähetys",
@@ -145,8 +128,8 @@ export class DuetUpload {
         inProgressWithErrors: "Uploading {filesInProgress}, {filesUploaded} uploaded of {filesTotal}, {filesWithErrors} failed",
         done: "All {filesTotal} added successfully",
         doneWithErrors: "Action completed, {filesUploaded} has been added successfully, {filesWithErrors} had errors",
-        files: "tiedostoa",
-        file: "tiedosto",
+        files: "File",
+        file: "file",
       },
     };
     /**
@@ -301,19 +284,72 @@ export class DuetUpload {
      * by default this is off, setting this to true will limit the users choices to what has been explicitly set
      */
     this.limitSelection = false;
+    /**
+     * Own Properties
+     */
+    this.buttonId = createID("DuetButton");
+    this.labelId = createID("DuetLabel");
+    this.uploadId = createID("DuetUpload");
+    this.filesInProgress = new Map();
+    this.fileMaxReached = false;
+    this.bytesMaxReached = false;
+    this.internalStatusMessageLabel = undefined;
+    /**
+     * Properties
+     */
+    this.DefaultGroups = {
+      inprogress: "inprogress",
+      success: "success",
+      failure: "failure",
+    };
+    /**
+     * Array of group names that you want the editable table to use to display files
+     * @required
+     * @example [{ id: "success", label: {fi: "Onnistunut", en: "Success", sv: "Alt klart", }}]
+     */
+    this.groups = [
+      {
+        id: this.DefaultGroups.inprogress,
+        label: {
+          fi: "Kesken olevat tiedostot",
+          sv: "Filer inprogress",
+          en: "Files inprogress",
+        },
+      },
+      {
+        id: this.DefaultGroups.success,
+        label: {
+          fi: "Valmiit tiedostot",
+          sv: "Files success",
+          en: "Files success",
+        },
+      },
+      {
+        id: this.DefaultGroups.failure,
+        label: {
+          fi: "Tiedostot, joissa on virheitä",
+          sv: "Filer med fel",
+          en: "Files with errors",
+        },
+      },
+    ];
+    this.kick = debounce(() => {
+      this.tick = Date.now();
+    }, 30); // will trigger re-render
     /**
      * Private functions
      */
     this.listenForActionEvents = () => {
-      this.element.addEventListener("duetEditableItemAction", (e) => {
+      this.element.addEventListener("duetActionEvent", (e) => {
         const detail = e.detail;
-        const { action, keyName, originalEvent } = detail;
+        const { action, id, originalEvent } = detail;
+        console.log(e);
         switch (action) {
           case "delete":
-            this.onDelete(keyName, originalEvent);
+            this.onDelete(id, originalEvent);
             break;
           case "cancel":
-            this.onCancel(keyName, originalEvent);
+            this.onCancel(id, originalEvent);
             break;
           default:
           // code block
@@ -371,24 +407,6 @@ export class DuetUpload {
         return "none";
       }
     };
-    this.convertToDuetEditableTableItems = () => {
-      // we're always recreating the map - in order to force an update down stream.
-      const itemData = new Map();
-      //walk the files Map and convert to DuetEditableTableItemData
-      this.files.forEach((data, key, _originalMap) => {
-        const group = this.getGroupFromItemData(data);
-        const item = this.getItemHTMLFromItemData(data, group);
-        itemData.set(key, {
-          uid: data.uid,
-          item,
-          group,
-        });
-      });
-      return itemData;
-    };
-    this.kick = debounce(() => {
-      this.tick = Date.now();
-    }, 30); // will trigger re-render
     this.genHashName = () => Date.now().toString(36) + Math.random();
     this.updateValueInMap = (item, key, value, kick = true) => {
       const fileItem = this.files.get(item);
@@ -449,7 +467,6 @@ export class DuetUpload {
       this.nativeInput.value = "";
     };
     this.startUpload = async (ev, metaData = undefined) => {
-      await this.setFocus();
       this.metaData = metaData;
       this.nativeInput.click();
       this.onUpload(ev, metaData);
@@ -512,9 +529,18 @@ export class DuetUpload {
         fileMaxReached: isTotalFileAmountAboveMax,
       };
     };
+    this.getItemFromUID = (uid) => {
+      for (const [key, value] of this.files.entries()) {
+        if (value.uid === uid) {
+          return { value, key };
+        }
+      }
+      return null;
+    };
     this.onDelete = (key, ev) => {
-      const deletedItem = this.files.get(key);
-      this.files.delete(key);
+      const retrievedKey = this.getItemFromUID(key).key;
+      const deletedItem = this.files.get(retrievedKey);
+      this.files.delete(retrievedKey);
       this.validateTotals();
       this.kick();
       this.duetDelete.emit({
@@ -528,8 +554,9 @@ export class DuetUpload {
       this.resetFormFields();
     };
     this.onCancel = (key, ev) => {
-      const cancelledItem = this.files.get(key);
-      this.files.delete(key);
+      const retrievedKey = this.getItemFromUID(key).key;
+      const cancelledItem = this.files.get(retrievedKey);
+      this.files.delete(retrievedKey);
       if (!this.external) {
         const { xhr } = cancelledItem;
         xhr.abort();
@@ -579,6 +606,87 @@ export class DuetUpload {
         data: { files: this.files },
       });
     };
+    /**
+     * @description This functions return sorted map items byg condition which are:
+     */
+    this.filterMap = () => {
+      const all = [...this.files.values()];
+      const inprogress = [];
+      const failure = [];
+      const success = [];
+      all.forEach(data => {
+        const group = this.getGroupFromItemData(data);
+        const item = this.getItemHTMLFromItemData(data, group);
+        if (group === this.DefaultGroups.success) {
+          success.push({
+            uid: data.uid,
+            item,
+            group,
+          });
+        }
+        else if (group === this.DefaultGroups.inprogress) {
+          inprogress.push({
+            uid: data.uid,
+            item,
+            group,
+          });
+        }
+        else if (group === this.DefaultGroups.failure) {
+          failure.push({
+            uid: data.uid,
+            item,
+            group,
+          });
+        }
+        else if (data.group) {
+          inprogress.push({
+            uid: data.uid,
+            item,
+            group: data.group,
+          });
+        }
+      });
+      return {
+        inprogress,
+        failure,
+        success,
+      };
+    };
+    this.getColumns = (group) => {
+      return [
+        {
+          sort_order: 1,
+          direction: 1,
+          index: 0,
+          key: group.id,
+          label: group.label,
+        },
+      ];
+    };
+    this.getActions = (id) => {
+      return this.actions.filter(item => item.map.includes(id));
+    };
+    this.renderEditableTableGroups = () => {
+      const filteredItems = this.filterMap();
+      const EditableTables = this.groups.map(group => {
+        const currentItems = filteredItems[group.id];
+        if (!(currentItems === null || currentItems === void 0 ? void 0 : currentItems.length)) {
+          return;
+        }
+        return (h("duet-table", { variation: "plain", breakpoint: "none", role: "log", margin: this.hideGroups ? "none" : "auto" },
+          h("table", { class: "duet-upload-editable-table" },
+            h("thead", { class: "duet-upload-editable-table-header" },
+              h("tr", null,
+                h("th", { class: {
+                    "duet-upload-editable-table-header-hidden": this.hideGroups,
+                  } }, !this.hideGroups ? (getLocaleString(group.label)) : (h("duet-visually-hidden", null, getLocaleString(group.label)))))),
+            h("tbody", null,
+              h("tr", null,
+                h("td", { class: "duet-upload-editable-table-data" },
+                  h("duet-editable-table", { breakpoint: "none", variation: "plain", groupId: group.id, columns: this.getColumns(group), actions: this.getActions(group.id), margin: "none", rows: currentItems })))))));
+      });
+      return EditableTables;
+    };
   }
   watchValidHandler(newValue, oldValue) {
     if (newValue !== oldValue) {
@@ -602,6 +710,84 @@ export class DuetUpload {
     // listen to the events from the component
     this.verifyValidity();
   }
+  /**
+   * Sets focus on the specified `duet-input`. Use this method instead of the global
+   * `input.focus()`.
+   */
+  async setFocus(options) {
+    if (this.nativeInput) {
+      this.nativeInput.focus(options);
+    }
+    return;
+  }
+  /**
+   * Method for invoking the upload sequence
+   */
+  async upload(metaData = undefined) {
+    await this.setFocus();
+    this.metaData = metaData;
+    this.nativeInput.click();
+    return;
+  }
+  /**
+   * Method for forcing a render of the upload list, element.files can be changed externally
+   * But it will only rerender on a new Map or a top Level change - this can be used to update
+   * the tabular data if the automatic re-render is no sufficient
+   */
+  async refresh() {
+    this.kick();
+    await this.setFocus();
+  }
+  /**
+   * Get list of files, divided in errors and valid sections
+   */
+  async getFiles() {
+    if (!this.files || this.files.size === 0) {
+      return false;
+    }
+    return this.getFilesAsArray();
+  }
+  /**
+   * Convenience method for updating the value of a key:value inside an item in the files attribute
+   */
+  async updateValue(item, key, value) {
+    this.updateValueInMap(item, key, value);
+  }
+  /**
+   * render() function
+   * Always the last one in the class.
+   */
+  render() {
+    const identifier = this.identifier || this.uploadId;
+    let caption = this.description.replace(/{maxfiles}/g, this.maxFiles.toString());
+    caption = caption.replace(/{maxbytes}/g, `${Math.floor(this.maxBytes / 1024 / 1024)} MB`);
+    caption = caption.replace(/{filetypes}/g, this.allowedExtensions.split(",").join(", "));
+    return (h(Host, { class: { "duet-m-0": this.margin === "none" } },
+      h("duet-fieldset", { label: this.label, caption: caption },
+        h("slot", { name: "header" }),
+        !this.files.size && (h("duet-label", { part: this.identifier ? `${this.identifier}-empty-state` : "duet-upload-empty-state", theme: this.theme === "turva" ? "turva" : "default", size: "small", class: {
+            "duet-upload-filelist-empty": !this.files.size,
+            "duet-upload-filelist": true,
+            "duet-upload-filelist-filled": this.files.size,
+          }, id: this.labelId, for: identifier }, this.fileListEmpty)),
+        !!this.files.size && h("slot", { name: "fileheader" }),
+        !!this.files.size && (h("duet-upload-aria-status", { invalid: this.getFilesAsArray().invalid.length, valid: this.getFilesAsArray().valid.length, inprogress: this.filesInProgress.size, total: this.files.size, statusMessageLabel: this.internalStatusMessageLabel })),
+        !!this.files.size && this.renderEditableTableGroups(),
+        !!this.files.size && h("slot", { name: "filefooter" }),
+        h("duet-spacer", { size: "large" }),
+        !this.hideButton && (h("duet-button", { id: this.buttonId, onClick: this.startUpload, "accessible-controls": identifier, disabled: this.fileMaxReached, "accessible-label": this.accessibleButtonLabel, "accessible-owns": identifier, size: "small", variation: "secondary", fixed: true, icon: "action-add-circle", part: this.identifier ? `${this.identifier}-button-upload` : "duet-upload-button-upload" }, this.buttonLabel)),
+        h("duet-spacer", { size: "medium" }),
+        (this.fileMaxReached || this.bytesMaxReached) && (h("duet-alert", { part: this.identifier ? `${this.identifier}-error-notification` : "duet-upload-error-notification" },
+          this.fileMaxReached && getI18nError("duet-upload-301"),
+          this.bytesMaxReached && getI18nError("duet-upload-202"))),
+        h("duet-spacer", { size: "medium" }),
+        h("duet-visually-hidden", null,
+          h("input", { ref: input => {
+              this.nativeInput = input;
+            }, accept: !this.limitSelection ? undefined : `${this.allowedMimetypes},${this.allowedExtensions}`, onBlur: this.onBlur, onFocus: this.onFocus, onChange: e => this.onChange(e), type: "file", class: {
+              "duet-upload": true,
+            }, disabled: this.disabled, "aria-hidden": "true", required: this.required, name: this.name, id: this.identifier, multiple: this.multiple, capture: "user" })))));
+  }
   /**
    * XHR request utilities
    */
@@ -723,84 +909,6 @@ export class DuetUpload {
       component: "duet-upload",
     });
   }
-  /**
-   * Sets focus on the specified `duet-input`. Use this method instead of the global
-   * `input.focus()`.
-   */
-  async setFocus(options) {
-    if (this.nativeInput) {
-      this.nativeInput.focus(options);
-    }
-    return;
-  }
-  /**
-   * Method for invoking the upload sequence
-   */
-  async upload(metaData = undefined) {
-    await this.setFocus();
-    this.metaData = metaData;
-    this.nativeInput.click();
-    return;
-  }
-  /**
-   * Method for forcing a render of the upload list, element.files can be changed externally
-   * But it will only rerender on a new Map or a top Level change - this can be used to update
-   * the tabular data if the automatic re-render is no sufficient
-   */
-  async refresh() {
-    this.kick();
-    await this.setFocus();
-  }
-  /**
-   * Get list of files, divided in errors and valid sections
-   */
-  async getFiles() {
-    if (!this.files || this.files.size === 0) {
-      return false;
-    }
-    return this.getFilesAsArray();
-  }
-  /**
-   * Convenience method for updating the value of a key:value inside an item in the files attribute
-   */
-  async updateValue(item, key, value) {
-    this.updateValueInMap(item, key, value);
-  }
-  /**
-   * render() function
-   * Always the last one in the class.
-   */
-  render() {
-    const identifier = this.identifier || this.uploadId;
-    let caption = this.description.replace(/{maxfiles}/g, this.maxFiles.toString());
-    caption = caption.replace(/{maxbytes}/g, `${Math.floor(this.maxBytes / 1024 / 1024)} MB`);
-    caption = caption.replace(/{filetypes}/g, this.allowedExtensions.split(",").join(", "));
-    return (h(Host, { class: { "duet-m-0": this.margin === "none" } },
-      h("duet-fieldset", { label: this.label, caption: caption },
-        h("slot", { name: "header" }),
-        !this.files.size && (h("duet-label", { part: this.identifier ? `${this.identifier}-empty-state` : "duet-upload-empty-state", theme: this.theme === "turva" ? "turva" : "default", size: "small", class: {
-            "duet-upload-filelist-empty": !this.files.size,
-            "duet-upload-filelist": true,
-            "duet-upload-filelist-filled": this.files.size,
-          }, id: this.labelId, for: identifier }, this.fileListEmpty)),
-        !!this.files.size && h("slot", { name: "fileheader" }),
-        !!this.files.size && (h("duet-upload-aria-status", { invalid: this.getFilesAsArray().invalid.length, valid: this.getFilesAsArray().valid.length, inprogress: this.filesInProgress.size, total: this.files.size, statusMessageLabel: this.internalStatusMessageLabel })),
-        !!this.files.size && (h("duet-editable-table", { part: this.identifier ? `${this.identifier}-editable-table` : "duet-upload-editable-table", "aria-live": "polite", "aria-relevant": "removals", accessibleRole: "log", id: this.editableTableId, groups: this.groups, actions: this.actions, hideGroups: this.hideGroups, alignment: this.alignment, items: this.convertToDuetEditableTableItems() })),
-        !!this.files.size && h("slot", { name: "filefooter" }),
-        h("duet-spacer", { size: "large" }),
-        !this.hideButton && (h("duet-button", { id: this.buttonId, onClick: this.startUpload, "accessible-controls": identifier, disabled: this.fileMaxReached, "accessible-label": this.accessibleButtonLabel, "accessible-owns": identifier, size: "small", variation: "secondary", fixed: true, icon: "action-add-circle", part: this.identifier ? `${this.identifier}-button-upload` : "duet-upload-button-upload" }, this.buttonLabel)),
-        h("duet-spacer", { size: "medium" }),
-        (this.fileMaxReached || this.bytesMaxReached) && (h("duet-alert", { part: this.identifier ? `${this.identifier}-error-notification` : "duet-upload-error-notification" },
-          this.fileMaxReached && getI18nError("duet-upload-301"),
-          this.bytesMaxReached && getI18nError("duet-upload-202"))),
-        h("duet-spacer", { size: "medium" }),
-        h("duet-visually-hidden", null,
-          h("input", { ref: input => {
-              this.nativeInput = input;
-            }, accept: !this.limitSelection ? undefined : `${this.allowedMimetypes},${this.allowedExtensions}`, onBlur: this.onBlur, onFocus: this.onFocus, onChange: e => this.onChange(e), type: "file", class: {
-              "duet-upload": true,
-            }, disabled: this.disabled, "aria-hidden": "true", required: this.required, name: this.name, id: this.identifier, multiple: this.multiple, capture: "user" })))));
-  }
   static get is() { return "duet-upload"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
@@ -915,15 +1023,15 @@ export class DuetUpload {
       "defaultValue": "false"
     },
     "actions": {
-      "type": "string",
+      "type": "unknown",
       "mutable": false,
       "complexType": {
-        "original": "DuetEditableTableActions | string",
-        "resolved": "string | { icon: string; color: string; color_hover: string; id: string; map?: string[]; label?: DuetLangObject; }[]",
+        "original": "DuetEditableTableActions",
+        "resolved": "{ icon: string; color: string; background: string; size: DuetActionButtonIconSize; name: string; map?: string[]; label?: DuetLangObject; }[]",
         "references": {
           "DuetEditableTableActions": {
             "location": "import",
-            "path": "../duet-editable-table/duet-editable-table-item"
+            "path": "../duet-editable-table/duet-editable-table"
           }
         }
       },
@@ -933,9 +1041,7 @@ export class DuetUpload {
         "tags": [],
         "text": "Default actions added to the internally used duet-editable-table"
       },
-      "attribute": "actions",
-      "reflect": false,
-      "defaultValue": "[\n    {\n      icon: \"action-delete\",\n      color: \"color-danger\",\n      color_hover: \"primary-dark\",\n      id: \"delete\",\n      map: [\"success\", \"failure\"],\n      label: {\n        fi: \"Poista tiedosto\",\n        en: \"Poista tiedosto\",\n        sv: \"Ta bort filen\",\n      },\n    },\n    {\n      icon: \"navigation-close\",\n      color: \"primary\",\n      color_hover: \"primary-dark\",\n      id: \"cancel\",\n      map: [\"inprogress\"],\n      label: {\n        fi: \"Keskeyt\u00E4 l\u00E4hetys\",\n        en: \"Cancel the upload\",\n        sv: \"Stop \u00F6verf\u00F6ringen\",\n      },\n    },\n  ]"
+      "defaultValue": "[\n    {\n      icon: \"action-delete\",\n      color: \"color-danger\",\n      size: \"x-small\",\n      background: \"gray-lightest\",\n      name: \"delete\",\n      map: [\"success\", \"failure\"],\n      label: {\n        fi: \"Poista tiedosto\",\n        en: \"Poista tiedosto\",\n        sv: \"Ta bort filen\",\n      },\n    },\n    {\n      icon: \"navigation-close\",\n      color: \"primary\",\n      size: \"x-small\",\n      background: \"gray-lightest\",\n      name: \"cancel\",\n      map: [\"inprogress\"],\n      label: {\n        fi: \"Keskeyt\u00E4 l\u00E4hetys\",\n        en: \"Cancel the upload\",\n        sv: \"Stop \u00F6verf\u00F6ringen\",\n      },\n    },\n  ]"
     },
     "uri": {
       "type": "string",
@@ -1013,7 +1119,7 @@ export class DuetUpload {
       },
       "attribute": "status-label-default",
       "reflect": false,
-      "defaultValue": "{\n    fi: {\n      inProgress: \"L\u00E4hetet\u00E4\u00E4n {filesUploaded} l\u00E4hetett\u00E4v\u00E4st\u00E4 {filesTotal} tiedostosta\",\n      inProgressWithErrors:\n        \"L\u00E4hetet\u00E4\u00E4n {filesInProgress} tiedostoa, l\u00E4hetetty {filesUploaded} l\u00E4hetett\u00E4v\u00E4st\u00E4 {filesTotal} tiedostosta, {filesWithErrors} tiedostossa on virheit\u00E4\",\n      done: \"Kaikki {filesTotal} tiedostoa l\u00E4hetetty onnistuneesti\",\n      doneWithErrors:\n        \"L\u00E4hetys valmis, {filesUploaded} tiedostoa on l\u00E4hetetty onnistuneesti, {filesWithErrors} tiedostossa oli virheit\u00E4\",\n      files: \"tiedostot\",\n      file: \"tiedosto\",\n    },\n    sv: {\n      inProgress: \"Adding {filesUploaded} of {filesTotal}\",\n      inProgressWithErrors:\n        \"Laddar upp {filesInProgress}, {filesUploaded} uppladdad av {filesTotal}, {filesWithErrors} misslyckades\",\n      done: \"Alla {filesTotal} har lagts till\",\n      doneWithErrors: \"Handling slutf\u00F6rd, {filesUploaded} har lagts till, {filesWithErrors} misslyckades\",\n      files: \"filer\",\n      file: \"fil\",\n    },\n    en: {\n      inProgress: \"Adding {filesUploaded} of {filesTotal}\",\n      inProgressWithErrors:\n        \"Uploading {filesInProgress}, {filesUploaded} uploaded of {filesTotal}, {filesWithErrors} failed\",\n      done: \"All {filesTotal} added successfully\",\n      doneWithErrors: \"Action completed, {filesUploaded} has been added successfully, {filesWithErrors} had errors\",\n      files: \"tiedostoa\",\n      file: \"tiedosto\",\n    },\n  }"
+      "defaultValue": "{\n    fi: {\n      inProgress: \"L\u00E4hetet\u00E4\u00E4n {filesUploaded} l\u00E4hetett\u00E4v\u00E4st\u00E4 {filesTotal} tiedostosta\",\n      inProgressWithErrors:\n        \"L\u00E4hetet\u00E4\u00E4n {filesInProgress} tiedostoa, l\u00E4hetetty {filesUploaded} l\u00E4hetett\u00E4v\u00E4st\u00E4 {filesTotal} tiedostosta, {filesWithErrors} tiedostossa on virheit\u00E4\",\n      done: \"Kaikki {filesTotal} tiedostoa l\u00E4hetetty onnistuneesti\",\n      doneWithErrors:\n        \"L\u00E4hetys valmis, {filesUploaded} tiedostoa on l\u00E4hetetty onnistuneesti, {filesWithErrors} tiedostossa oli virheit\u00E4\",\n      files: \"tiedostot\",\n      file: \"tiedosto\",\n    },\n    sv: {\n      inProgress: \"Adding {filesUploaded} of {filesTotal}\",\n      inProgressWithErrors:\n        \"Laddar upp {filesInProgress}, {filesUploaded} uppladdad av {filesTotal}, {filesWithErrors} misslyckades\",\n      done: \"Alla {filesTotal} har lagts till\",\n      doneWithErrors: \"Handling slutf\u00F6rd, {filesUploaded} har lagts till, {filesWithErrors} misslyckades\",\n      files: \"filer\",\n      file: \"fil\",\n    },\n    en: {\n      inProgress: \"Adding {filesUploaded} of {filesTotal}\",\n      inProgressWithErrors:\n        \"Uploading {filesInProgress}, {filesUploaded} uploaded of {filesTotal}, {filesWithErrors} failed\",\n      done: \"All {filesTotal} added successfully\",\n      doneWithErrors: \"Action completed, {filesUploaded} has been added successfully, {filesWithErrors} had errors\",\n      files: \"File\",\n      file: \"file\",\n    },\n  }"
     },
     "statusMessageLabel": {
       "type": "string",
@@ -1202,34 +1308,6 @@ export class DuetUpload {
       "reflect": false,
       "defaultValue": "false"
     },
-    "groups": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "DuetEditableTableGroupNames | string",
-        "resolved": "string | { id: string; label: DuetLangObject; actionLabel?: DuetLangObject; }[]",
-        "references": {
-          "DuetEditableTableGroupNames": {
-            "location": "import",
-            "path": "../duet-editable-table/duet-editable-table"
-          }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "required",
-            "text": undefined
-          }, {
-            "name": "example",
-            "text": "[{ id: \"success\", label: {fi: \"Onnistunut\", en: \"Success\", sv: \"Alt klart\", }}]"
-          }],
-        "text": "Array of group names that you want the editable table to use to display files"
-      },
-      "attribute": "groups",
-      "reflect": false
-    },
     "alignment": {
       "type": "string",
       "mutable": false,
@@ -1628,6 +1706,32 @@ export class DuetUpload {
       },
       "attribute": "value",
       "reflect": false
+    },
+    "groups": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "DuetUploadTableGroupName[]",
+        "resolved": "DuetUploadTableGroupName[]",
+        "references": {
+          "DuetUploadTableGroupName": {
+            "location": "local"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "required",
+            "text": undefined
+          }, {
+            "name": "example",
+            "text": "[{ id: \"success\", label: {fi: \"Onnistunut\", en: \"Success\", sv: \"Alt klart\", }}]"
+          }],
+        "text": "Array of group names that you want the editable table to use to display files"
+      },
+      "defaultValue": "[\n    {\n      id: this.DefaultGroups.inprogress,\n      label: {\n        fi: \"Kesken olevat tiedostot\",\n        sv: \"Filer inprogress\",\n        en: \"Files inprogress\",\n      },\n    },\n    {\n      id: this.DefaultGroups.success,\n      label: {\n        fi: \"Valmiit tiedostot\",\n        sv: \"Files success\",\n        en: \"Files success\",\n      },\n    },\n    {\n      id: this.DefaultGroups.failure,\n      label: {\n        fi: \"Tiedostot, joissa on virheit\u00E4\",\n        sv: \"Filer med fel\",\n        en: \"Files with errors\",\n      },\n    },\n  ]"
     }
   }; }
   static get states() { return {

package/lib/collection/components/duet-upload/upload-validators.js

@@ -40,7 +40,7 @@ export const validateFile = (item, validators) => {
   if (item) {
     const { name, type, size } = item;
     const mime = validateFileMime(type, allowedMimetypes);
-    const ext = validateFileExtension(name, allowedExtensions);
+    const ext = validateFileExtension(name.toLowerCase(), allowedExtensions);
     const bytes = validateFileSize(size, maxBytes);
     if (!mime) {
       errorMessage = getError("duet-upload-101");

package/lib/collection/utils/fixture-utils.js

@@ -28,7 +28,7 @@ function getAllFixturesFiles(dirPath, fixPath = "fixtures", skipFixture = []) {
   })
     .forEach(parsed => {
     const fixtureName = parsed.name.replace(`${component}_`, "");
-    const fixtureHtml = fs.readFileSync(path.join(parsed.dir, parsed.base), "utf8");
+    const fixtureHtml = `<span id="fixture">${fs.readFileSync(path.join(parsed.dir, parsed.base), "utf8")}</fixture>`;
     fixtures[fixtureName] = fixtureHtml;
   });
   return {
@@ -99,14 +99,12 @@ export const fixtureTests = (componentFixtures, minHeight) => {
       const html = componentFixtures.fixtures[fixtureName];
       it(`${fixtureName} renders correctly with Turva theme`, async () => {
         const page = await createPage(htmlFragment(html, "turva", minHeight));
-        // Configure the navigation timeout
-        await page.setDefaultNavigationTimeout(0);
+        await page.find("#fixture");
         expect(await page.screenshot()).toMatchImageSnapshot();
       });
       it(`${fixtureName} renders correctly with Lahitapiola theme`, async () => {
         const page = await createPage(htmlFragment(html, "default", minHeight));
-        // Configure the navigation timeout
-        await page.setDefaultNavigationTimeout(0);
+        await page.find("#fixture");
         expect(await page.screenshot()).toMatchImageSnapshot();
       });
     });

package/lib/collection/utils/js-utils.js

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-export const debounce = (func, timeout = 50) => {
+export const debounce = (func, timeout = 250) => {
   let timer;
   return (...args) => {
     clearTimeout(timer);
@@ -10,3 +10,38 @@ export const debounce = (func, timeout = 50) => {
     }, timeout);
   };
 };
+export function fieldSorter(fields) {
+  return function (a, b) {
+    return fields
+      .map(function (o) {
+      let dir = 1;
+      if (o[0] === "-") {
+        dir = -1;
+        o = o.substring(1);
+      }
+      if (a[o] > b[o]) {
+        return dir;
+      }
+      if (a[o] < b[o]) {
+        return -dir;
+      }
+      return 0;
+    })
+      .reduce(function firstNonZeroValue(p, n) {
+      return p ? p : n;
+    }, 0);
+  };
+}
+export const memoize = fn => {
+  const cache = {};
+  return value => {
+    if (value in cache) {
+      return cache[value];
+    }
+    else {
+      const result = fn(value);
+      cache[value] = result;
+      return result;
+    }
+  };
+};

package/lib/collection/utils/keyboard-utils.js

@@ -5,10 +5,14 @@ export const isArrowLeftKey = (e) => e.keyCode === 37;
 export const isArrowUpKey = (e) => e.keyCode === 38;
 export const isArrowRightKey = (e) => e.keyCode === 39;
 export const isArrowDownKey = (e) => e.keyCode === 40;
+export const isArrowKey = (e) => isArrowDownKey(e) || isArrowRightKey(e) || isArrowUpKey(e) || isArrowLeftKey(e);
 export const isEscapeKey = (e) => e.key === "Escape" || e.key === "Esc" || e.keyCode === 27;
 export const isTabKey = (e) => e.key === "Tab" || e.keyCode === 9;
 export const isBackspaceKey = (e) => e.keyCode === 8;
 export const isSpaceKey = (e) => e.key === "Space" || e.keyCode === 32;
+export const isPlusKey = (e) => e.key === "+" || e.keyCode === 43;
+export const isMinusKey = (e) => e.key === "-" || e.keyCode === 45;
 export const isQuestionKey = (e) => e.key === "?";
 export const isEnterKey = (e) => e.key === "Enter" || e.keyCode === 13;
 export const isKeyboardClick = (e) => isEnterKey(e) || isSpaceKey(e);
+export const isNumber = (e) => (e.keyCode >= 48 && e.keyCode <= 57) || (e.keyCode >= 96 && e.keyCode <= 105);