@duetds/components 4.35.4 → 5.0.0

package/lib/esm/{duet-editable-table_4.entry.js → duet-editable-table_3.entry.js}

@@ -1,294 +1,228 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, h, H as Host, g as getElement, c as createEvent } from './index-828dfb4e.js';
-import { s as sanitizeString, g as getLocaleString } from './language-utils-344d894c.js';
+import { h, r as registerInstance, c as createEvent, H as Host, g as getElement } from './index-16f4da7f.js';
+import { f as fieldSorter, d as debounce } from './js-utils-52e0944c.js';
+import { i as isKeyboardClick } from './keyboard-utils-6eb55cd5.js';
+import { g as getLocaleString, s as sanitizeString } from './language-utils-344d894c.js';
 import { i as inheritGlobalTheme } from './themeable-component-572685dd.js';
-import { m as mediaQueryMedium, h as mediaQueryLarge, i as mediaQueryXLarge, j as mediaQueryXxLarge, k as mediaQueryXxxLarge, l as mediaQuerySmall, n as sizeNavigation, s as sizeHeader } from './tokens.module-49cbf963.js';
+import { m as mediaQueryMedium, h as mediaQueryLarge, i as mediaQueryXLarge, j as mediaQueryXxLarge, k as mediaQueryXxxLarge, l as mediaQuerySmall, n as sizeNavigation, s as sizeHeader } from './tokens.module-a13e9683.js';
 import { c as createID } from './create-id-981107da.js';
 import './string-utils-2f1793b8.js';
 
-const debounce = (func, timeout = 50) => {
-  let timer;
-  return (...args) => {
-    clearTimeout(timer);
-    timer = setTimeout(() => {
-      func.apply(undefined, args);
-    }, timeout);
-  };
-};
-
-/**
- * Produces a function which uses template strings to do simple interpolation from objects.
- *
- * Usage:
- *    var makeMeKing = generateTemplateFn('${name} is now the king of ${country}!');
- *
- *    console.log(makeMeKing({ name: 'Bryan', country: 'Scotland'}));
- *    // Logs 'Bryan is now the king of Scotland!'
- */
-const generateTemplateFn = (function () {
-  const cache = {};
-  function generateTemplate(template) {
-    if (typeof template !== "string") {
-      template = template.outerHTML;
-    }
-    let fn = cache[template];
-    if (!fn) {
-      // Replace ${expressions} (etc) with ${map.expressions}.
-      const sanitized = template
-        .replace(/\$\{([\s]*[^;\s\{]+[\s]*)\}/g, function (_, match) {
-        return `\$\{map.${match.trim()}\}`;
-      })
-        // Afterwards, replace anything that's not ${map.expressions}' (etc) with a blank string.
-        .replace(/(\$\{(?!map\.)[^}]+\})/g, "");
-      fn = Function("map", `return \`${sanitized}\``);
-    }
-    return fn;
+//simple functional component that renders the data in the table
+const TableData = ({ data, groupId, alignment }, _children) => {
+  const classNames = `duet-editable-table duet-editable-table-content-${groupId}`;
+  if (typeof data === "string") {
+    return h("td", { innerHTML: data, class: classNames, part: `${groupId}content`, style: { verticalAlign: alignment } });
+  }
+  else {
+    return (h("td", { class: classNames, part: `${groupId}content`, style: { verticalAlign: alignment } }, data));
   }
-  return generateTemplate;
-})();
+};
 
-const duetEditableTableCss = "duet-editable-table{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}.duet-editable-table-header tr .duet-editable-table-header-hidden{padding:0 !important;font-size:0;border-bottom:0}";
+const duetEditableTableCss = ".sc-duet-editable-table-h{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}.duet-editable-table-actions-menu.sc-duet-editable-table{position:relative;padding:0 !important;margin:0}.duet-editable-table-actions-menu-button.sc-duet-editable-table{position:relative;right:-16px;float:right;padding:0}.duet-editable-table-actions-menu-icon.sc-duet-editable-table .duet-icon.sc-duet-editable-table{max-width:16px;max-height:16px}.duet-editable-table-row.duet-table-action-row.sc-duet-editable-table .duet-text-right.sc-duet-editable-table{text-align:right}.duet-editable-table-header.sc-duet-editable-table tr.sc-duet-editable-table .duet-editable-table-header-hidden.sc-duet-editable-table{padding:0 !important;font-size:0;border-bottom:0}";
 
 let DuetEditableTable = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    this.template = undefined;
+    this.duetTableToggle = createEvent(this, "duetTableToggle", 7);
+    this.duetMenuClick = createEvent(this, "duetMenuClick", 7);
     /**
-     * State() variables
-     * @internal
+     * Duet-table: margin of the component.
      */
-    this.tick = Date.now();
+    this.margin = "auto";
     /**
-     * Map of items that contain list of things.
+     * Duet-table: Style variation of the table.
      */
-    this.items = new Map();
+    this.variation = "striped";
     /**
-     * Key used to set vertical alignment of action buttons
+     * Duet-table: Controls whether the table has a sticky header.
+     * Sticky headers are not compatible with breakpoint="none-scrollable".
      */
-    this.alignment = "middle";
+    this.sticky = false;
     /**
-     * Array of internationalized defaults for the default groups labels.
+     * Duet-table: Adjust the distance from top of the viewport (in pixels) when the
+     * table header becomes sticky.
      */
-    this.groupsLabelDefaults = {
-      fi: "Kaikki",
-      en: "All items",
-      sv: "Alla objekt",
-    };
+    this.stickyDistance = "with-links";
     /**
-     * Array of internationalized defaults for the default action labels.
+     * Duet-table: By default the table is responsive - it will be flattened at narrow viewport widths.
+     * This prop controls the breakpoint at which the table should be rendered as a _regular_ table.
+     * Set to "none" to disable the responsive functionality.
+     * Set to "none-scrollable" to disable responsive functionality _and_ allow horizontal scrolling -
+     * this is useful for comparison tables where it's important to maintain column and row layout.
      */
-    this.actionLabelDefaults = {
-      fi: "Toiminnot",
-      en: "Actions",
-      sv: "Handlingar",
-    };
+    this.breakpoint = "small";
     /**
-     * Array of group names that you want the editable table to display (can be used to hide or show groups depending on conditions).
-     * @default { id: "all", label: this.groupsLabelDefaults, actionLabel: this.actionLabelDefaults }.
-     * @example [{ id: "success", label: {fi: "Onnistunut", en: "Success", sv: "Alt klart", }}].
+     * Define actions for all items in a table
+     * An alternative to inline HTML table.
+     * required for Sortable tables
+     * @default undefined
      */
-    this.groups = [
-      { id: "all", label: this.groupsLabelDefaults, actionLabel: this.actionLabelDefaults },
-    ];
+    this.actions = undefined;
     /**
-     * Array of actions that are mapped via the map variable to the various groups defined in group.
+     * Define columns for a table
+     * An alternative to inline HTML table.
+     * required for Sortable tables
      * @default undefined
-     * @example [{
-                variation: "default",
-                icon: "action-edit-2",
-                id: "edit",
-                map: ["success"],
-                label: {
-                  fi: " Label",
-                  en: " Label",
-                  sv: " Label",
-                }
-              }]
      */
-    this.actions = undefined;
+    this.columns = undefined;
     /**
-     * Shows or hides the table labels.
+     * Define rows for a table
+     * An alternative to inline HTML table.
+     * required for Sortable tables
+     * @default undefined
      */
-    this.hideGroups = false;
+    this.rows = undefined;
     /**
-     * Exposes the aria role for optimizing accessibility.
+     * Controls whether the table is sortable by headers
      */
-    this.accessibleRole = undefined;
+    this.sortable = false;
+    /**
+     * Optional id that get passed to the table and used to setup ::parts
+     */
+    this.groupId = "";
     /**
      * Theme of the table.
      */
     this.theme = "";
     /**
-     * Private methods.
+     * Exposes the aria role for optimizing accessibility.
      */
-    this.kick = debounce(() => {
-      this.tick = Date.now();
-    }, 100); // will trigger re-render
+    this.accessibleRole = undefined;
+    this.sortableDefaultLabel = {
+      fi: "Järjestä",
+      en: "Click to sort",
+      sv: "Klicka för att sortera",
+    };
+    this.actionColumnLabel = {
+      en: "Actions for rows",
+      fi: "Toiminnot rivillä",
+      sv: "Åtgärder för rader",
+    };
     /**
-     * If a user defines a template section within editable table, try to read an use it.
+     * Private methods.
      */
-    this.getTemplate = () => {
-      const templateDom = this.element.getElementsByTagName("template");
-      if (templateDom === null || templateDom === void 0 ? void 0 : templateDom.length) {
-        const templateString = templateDom[0].content.firstElementChild.outerHTML;
-        return generateTemplateFn(templateString);
-      }
-      else {
-        return false;
-      }
-    };
-    this.getItemData = (data) => {
-      const { item, group, uid } = data;
-      if (this.template) {
-        return {
-          group,
-          uid,
-          item: this.template(item),
-        };
-      }
-      return { item, group, uid };
+    this.toggleColumn = (column, e) => {
+      e.preventDefault();
+      const { sort_order, direction, index, key } = column;
+      this.duetTableToggle.emit({
+        sort_order,
+        index,
+        direction,
+        key,
+        component: "duet-editable-table",
+        originalEvent: e,
+      });
     };
-    this.filterMap = needle => {
-      if (needle === "all") {
-        return Array.from(this.items);
+    this.handleKeyDown = (column, e) => {
+      if (isKeyboardClick(e)) {
+        this.toggleColumn(column, e);
       }
-      return Array.from(this.items).filter(item => needle === item[1].group);
     };
   }
   /**
    * Component lifecycle events.
    */
   componentWillLoad() {
-    // look for a <template> region in the duet-editable-table
-    this.template = this.getTemplate();
-    // take care of the case where groups and actions are defined as html properties instead of javascript objects
-    if (typeof this.groups === "string") {
-      this.internalGroupArray = sanitizeString(this.groups);
-    }
-    else {
-      this.internalGroupArray = this.groups;
-    }
-    if (typeof this.actions === "string") {
-      this.internalActionsArray = sanitizeString(this.actions);
-    }
-    else {
-      this.internalActionsArray = this.actions;
-    }
     inheritGlobalTheme(this);
   }
-  /**
-   * Method to force an update of a tabular data array.
-   * when called the method will rerender the entire tabular structure.
-   */
-  async updateTable(passedItems = undefined) {
-    this.items = new Map(passedItems || this.items);
-    this.kick();
-  }
-  render() {
-    return (h(Host, { class: {
-        "duet-theme-turva": this.theme === "turva",
-      } }, this.internalGroupArray.map(group => {
-      const currentGroup = this.filterMap(group.id);
-      if (!currentGroup.length) {
-        return;
+  createLabel(column) {
+    const { sort_order, direction, index, label } = column;
+    const i18nLabel = getLocaleString(label);
+    if (!this.sortable) {
+      return i18nLabel;
+    }
+    const getButtonIcon = () => {
+      // "action-subtract-small" https://cdn.duetds.com/api/icons/2.2.12/lib/assets/action-subtract-small.svg
+      // "action-arrow-down-small" https://cdn.duetds.com/api/icons/2.2.12/lib/assets/action-arrow-down-small.svg
+      // "action-arrow-up-small" https://cdn.duetds.com/api/icons/2.2.12/lib/assets/action-arrow-up-small.svg
+      if (!!sort_order && direction === 1) {
+        return "action-arrow-down-small";
       }
-      return (h("duet-table", { variation: "plain", breakpoint: "none", role: "", margin: this.hideGroups ? "none" : "auto" }, h("table", { class: "duet-editable-table", "aria-role": this.accessibleRole }, h("thead", { class: "duet-editable-table-header" }, h("tr", null, h("th", { class: {
-          "duet-editable-table-header-hidden": this.hideGroups,
-        } }, !this.hideGroups ? (getLocaleString(group.label)) : (h("duet-visually-hidden", null, getLocaleString(group.label)))), h("th", { class: {
-          "duet-editable-table-header-hidden": this.hideGroups,
-        } }, h("duet-visually-hidden", null, group.actionLabel
-        ? getLocaleString(group.actionLabel)
-        : getLocaleString(this.actionLabelDefaults))))), h("tbody", null, currentGroup.map(dataAsArray => {
-        const [key, value] = dataAsArray;
-        return (h("duet-editable-table-item", { theme: this.theme, keyName: key, data: this.getItemData(value), groupId: group.id, part: group.id, alignment: this.alignment, actions: this.internalActionsArray }));
-      })))));
-    })));
+      else if (!!sort_order && direction === -1) {
+        return "action-arrow-up-small";
+      }
+      return "action-subtract-small";
+    };
+    return (h("span", { class: "duet-table-label", "data-index": index }, h("duet-button", { size: "small", icon: getButtonIcon(), "icon-size": "medium-small", "accessible-label": getLocaleString(this.sortableDefaultLabel), variation: "plain", margin: "none", "icon-right": true, onClick: event => this.toggleColumn(column, event), onKeyDown: event => this.handleKeyDown(column, event) }, i18nLabel)));
   }
-  get element() { return getElement(this); }
-};
-DuetEditableTable.style = duetEditableTableCss;
-
-//simple functional component that renders the data in the table
-const TableData = ({ data, groupId, alignment }, _children) => {
-  if (typeof data === "string") {
-    return (h("td", { innerHTML: data, class: "duet-editable-table-content", part: `${groupId}content`, style: { verticalAlign: alignment } }));
+  getSortedColumns() {
+    //create a new array from sort instead of mutating original
+    return [...this.columns].sort(fieldSorter(["index"]));
   }
-  else {
-    return (h("td", { class: "duet-editable-table-content", part: `${groupId}content`, style: { verticalAlign: alignment } }, data));
+  getRowSortOrder() {
+    //create a new array from sort instead of mutating original
+    const fields = [...this.columns].sort(fieldSorter(["sort_order"]));
+    //return only key from objects that have sort_order
+    return fields
+      .filter(column => column.sort_order)
+      .map(column => {
+      // add - in-front of descending direction (required by field-sorter)
+      return column.direction === -1 ? `-${column.key}` : column.key;
+    });
   }
-};
-
-const duetEditableTableItemCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{display:table-row;height:32px}.duet-editable-table-content,.duet-editable-table-actions{height:32px;padding:12px 0;vertical-align:middle;break-word:break-all;border-bottom:1px solid #e1e3e6}.duet-editable-table-actions-items{display:flex;justify-content:flex-end}.duet-editable-table-actions-items duet-editable-table-button{padding-left:8px}.duet-editable-table .editable-item-small{font-size:0.75rem;font-weight:400}";
-
-let DuetEditableTableItem = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.duetEditableItemAction = createEvent(this, "duetEditableItemAction", 7);
-    this.isHovering = false;
-    /**
-     * Theme of the empty state component.
-     */
-    this.theme = "";
-    /**
-     * Actions that can be performed on the element
-     */
-    this.actions = undefined;
-    /**
-     * GroupId used to pierce the shadowdom - gets concatenated with "content & actions" and used as part="groupIDcontent/actions" to pierce the content/Action item
-     * @internal
-     */
-    this.groupId = "";
-    /**
-     * Key used to set vertical alignment of action buttons
-     */
-    this.alignment = "middle";
-    /**
-     * Key used to identify item, when running actions
-     */
-    this.keyName = "";
-    /**
-     * Object of data itemsused to render the entire row
-     */
-    this.data = undefined;
+  renderTableHeader() {
+    if (!this.columns) {
+      return;
+    }
+    const sortedColumns = this.getSortedColumns();
+    return (h("tr", { class: {
+        "duet-table-action-header": !!this.actions,
+      } }, sortedColumns.map(column => {
+      if (column.display !== false) {
+        return h("th", { scope: "col" }, this.createLabel(column));
+      }
+    }), this.actions && (h("th", { scope: "col", class: "duet-table-action-header-heading" }, this.actions && h("duet-visually-hidden", null, getLocaleString(this.actionColumnLabel))))));
   }
-  watchPropHandler(_newValue, _oldValue) {
-    // console.log("The new value of activated is: ", _newValue)
+  renderActions(rowItem, index) {
+    // escape early
+    if (!this.actions) {
+      return;
+    }
+    // iterate through actions and add them in the sidebar
+    return (h("td", { class: "duet-text-right" }, this.actions.map(actionItem => {
+      return (h("duet-action-button", { actionMeta: Object.assign({}, (rowItem === null || rowItem === void 0 ? void 0 : rowItem.meta) || {}, { index }), actionId: (rowItem === null || rowItem === void 0 ? void 0 : rowItem.uid) || (rowItem === null || rowItem === void 0 ? void 0 : rowItem.id) || null, actionName: actionItem.name, theme: this.theme, iconName: actionItem.icon, iconColor: actionItem.color, iconSize: actionItem.size, background: actionItem.background }));
+    })));
   }
-  /**
-   /**
-   * Component lifecycle events.
-   */
-  componentWillLoad() {
-    inheritGlobalTheme(this);
+  renderTableBody() {
+    const columns = this.getSortedColumns();
+    const rowSortOrder = this.getRowSortOrder();
+    const sortedRows = [...this.rows].sort(fieldSorter(rowSortOrder));
+    // return a tbody with rows for each item in sortedRows
+    return sortedRows.map((row, index) => (h("tr", { class: {
+        "duet-table-action-row": !!this.actions,
+        "duet-editable-table-row": true,
+        [`duet-editable-table-row-${this.groupId}`]: true,
+      }, "data-meta": JSON.stringify(row.meta) }, columns.map(column => {
+      //if we don't have any data for this column, try getting an item instead (for backwards compatibility
+      const value = row[column.key] ? row[column.key] : row.item;
+      if (column.display !== false) {
+        return h(TableData, { data: value, groupId: this.groupId });
+      }
+    }), this.actions && this.renderActions(row, index))));
   }
   /**
-   /**
-   * private functions
-   */
-  /**
-   * render() function
-   * Always the last one in the class.
+   * Render Methods
    */
   render() {
-    return (h(Host, { role: "row" }, h(TableData, { data: this.data.item, alignment: this.alignment, groupId: this.groupId }), h("td", { class: "duet-editable-table-actions", style: { verticalAlign: this.alignment } }, h("div", { class: "duet-editable-table-actions-items", part: `${this.groupId}actions` }, this.actions.map(result => {
-      const { map = undefined } = result;
-      // if map has been specified, only show the current action if groupID matches the map array
-      if (map && !map.includes(this.groupId)) {
-        return;
-      }
-      return (h("duet-editable-table-button", { keyName: this.keyName, group: this.data.group, uid: this.data.uid, actions: result, theme: this.theme }));
-    })))));
+    return (h(Host, { class: {
+        [`duet-editable-table-${this.variation}`]: true,
+        [`duet-editable-table-${this.theme}`]: true,
+        // sticky only valid when in regular table layout
+        "duet-editable-table-scrollable": this.breakpoint === "none-scrollable",
+        "duet-editable-table-sortable": this.sortable,
+        "duet-editable-table-actions": !!this.actions,
+        "duet-m-0": this.margin === "none",
+        "duet-theme-turva": this.theme === "turva",
+      } }, h("duet-table", { sticky: this.sticky, stickyDistance: this.stickyDistance, margin: this.margin, theme: this.theme, variation: this.variation, breakpoint: this.breakpoint }, h("table", { role: this.accessibleRole }, h("caption", null, h("slot", { name: "tcaption" })), h("thead", null, h("tr", null, h("td", { class: "duet-editable-table-actions-menu", colSpan: 99 }, h("slot", { name: "thead-first" }))), this.renderTableHeader(), h("tr", null, h("td", { class: "duet-editable-table-actions-menu", colSpan: 99 }, h("slot", { name: "thead-last" })))), h("tbody", null, this.renderTableBody()), h("tfoot", null, h("tr", null, h("th", { class: "duet-editable-table-footer-menu", colSpan: 99 }, h("slot", { name: "tfoot" }))))))));
   }
-  get el() { return getElement(this); }
-  static get watchers() { return {
-    "data": ["watchPropHandler"]
-  }; }
+  get element() { return getElement(this); }
 };
-DuetEditableTableItem.style = duetEditableTableItemCss;
+DuetEditableTable.style = duetEditableTableCss;
 
-const duetTableCss = "duet-table{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;margin-bottom:20px !important;display:block;font-variant-numeric:tabular-nums}duet-table table,duet-table thead,duet-table tbody,duet-table tfoot,duet-table th,duet-table td,duet-table tr{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}duet-table.duet-m-0{margin:0 !important}duet-table table{width:100%;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:1rem;text-align:left;border-spacing:0;border-collapse:separate}duet-table.duet-theme-turva table{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"}duet-table td{-webkit-hyphens:auto;hyphens:auto;color:#00294d}duet-table.duet-theme-turva td{color:#171c3a}duet-table th{font-weight:600;line-height:1.25;color:#657787;text-align:left}duet-table.duet-theme-turva th{color:#747475}duet-table tbody th{font-weight:600;color:#00294d}duet-table.duet-theme-turva tbody th{color:#171c3a}.duet-table-flattened table,.duet-table-flattened thead,.duet-table-flattened tbody,.duet-table-flattened tfoot,.duet-table-flattened th,.duet-table-flattened td,.duet-table-flattened tr{display:block}.duet-table-flattened thead tr{position:absolute !important;top:0;width:1px !important;height:1px !important;padding:0 !important;overflow:hidden !important;clip:rect(1px, 1px, 1px, 1px) !important;border:0 !important}.duet-table-flattened td{line-height:1.25}.duet-table-flattened td:not(:last-child){margin-bottom:16px !important}.duet-table-flattened tbody td,.duet-table-flattened tbody th,.duet-table-flattened tfoot td{padding:0 !important;text-align:left !important}.duet-table-flattened tbody th{font-weight:600;line-height:1.25;color:#657787;text-align:left}.duet-table-flattened td[data-heading]::before{margin-bottom:4px !important;display:block;font-size:1rem;font-weight:600;color:#00294d;content:attr(data-heading)}.duet-table-flattened.duet-theme-turva td[data-heading]::before{color:#171c3a}.duet-table-sticky thead th{position:sticky;top:0;background:white}.duet-table-striped td,.duet-table-striped th{padding:20px !important}@media (max-width: 35.9375em){.duet-table-striped td,.duet-table-striped th{padding:20px 12px !important}}.duet-table-striped tbody th{background:white}.duet-table-striped.duet-table-sticky thead th{border-bottom:1px solid #e1e3e6}.duet-table-striped.duet-table-sticky.duet-theme-turva thead th{border-bottom-color:#e4e4e6}.duet-table-striped tbody:not(:first-of-type) th{padding-top:40px !important}.duet-table-striped tbody:only-of-type tr:nth-of-type(odd){background:rgba(0, 80, 128, 0.04)}.duet-table-striped.duet-theme-turva tbody:only-of-type tr:nth-of-type(odd){background:rgba(23, 28, 58, 0.04)}.duet-table-striped tbody:not(:only-of-type) tr:nth-of-type(even){background:rgba(0, 80, 128, 0.04)}.duet-table-striped.duet-theme-turva tbody:not(:only-of-type) tr:nth-of-type(even){background:rgba(23, 28, 58, 0.04)}.duet-table-striped tfoot td{border-top:1px solid #e1e3e6}.duet-table-striped.duet-theme-turva tfoot td{border-top-color:#e4e4e6}.duet-table-striped.duet-table-flattened tbody:not(:first-of-type) th{padding-top:20px !important}.duet-table-striped.duet-table-flattened tr{padding:20px !important}.duet-table-striped.duet-table-flattened tfoot td{border-top:0}.duet-table-striped.duet-table-flattened tfoot tr{border-top:1px solid #e1e3e6}.duet-table-striped.duet-table-flattened.duet-theme-turva tfoot tr{border-top-color:#e4e4e6}.duet-table-fixed th,.duet-table-minimal th,.duet-table-plain th{padding:16px !important;border-bottom:1px solid #657787}.duet-table-fixed th:first-child,.duet-table-minimal th:first-child,.duet-table-plain th:first-child{padding-left:0 !important}.duet-table-fixed th:last-child,.duet-table-minimal th:last-child,.duet-table-plain th:last-child{padding-right:0 !important}.duet-theme-turva.duet-table-fixed th,.duet-theme-turva.duet-table-minimal th,.duet-theme-turva.duet-table-plain th{border-bottom-color:#444445}.duet-table-fixed tbody th,.duet-table-minimal tbody th,.duet-table-plain tbody th{padding-top:40px !important;border-bottom-color:#e1e3e6}.duet-theme-turva.duet-table-fixed tbody th,.duet-theme-turva.duet-table-minimal tbody th,.duet-theme-turva.duet-table-plain tbody th{border-bottom-color:#e4e4e6}.duet-table-fixed td,.duet-table-minimal td,.duet-table-plain td{padding:16px !important}.duet-table-fixed td:first-child,.duet-table-minimal td:first-child,.duet-table-plain td:first-child{padding-left:0 !important}.duet-table-fixed td:last-child,.duet-table-minimal td:last-child,.duet-table-plain td:last-child{padding-right:0 !important}.duet-table-fixed tbody td,.duet-table-minimal tbody td,.duet-table-plain tbody td{border-bottom:1px solid #e1e3e6}.duet-theme-turva.duet-table-fixed tbody td,.duet-theme-turva.duet-table-minimal tbody td,.duet-theme-turva.duet-table-plain tbody td{border-bottom-color:#e4e4e6}.duet-table-flattened.duet-table-fixed tbody:first-of-type th,.duet-table-flattened.duet-table-minimal tbody:first-of-type th,.duet-table-flattened.duet-table-plain tbody:first-of-type th{padding-top:0 !important}.duet-table-flattened.duet-table-fixed td,.duet-table-flattened.duet-table-minimal td,.duet-table-flattened.duet-table-plain td,.duet-table-flattened.duet-table-fixed tbody th,.duet-table-flattened.duet-table-minimal tbody th,.duet-table-flattened.duet-table-plain tbody th{border-bottom:0}.duet-table-flattened.duet-table-fixed tr,.duet-table-flattened.duet-table-minimal tr,.duet-table-flattened.duet-table-plain tr{padding:20px 0 !important}.duet-table-flattened.duet-table-fixed tbody th,.duet-table-flattened.duet-table-minimal tbody th,.duet-table-flattened.duet-table-plain tbody th{padding-top:20px !important}.duet-table-flattened.duet-table-fixed tfoot td,.duet-table-flattened.duet-table-minimal tfoot td,.duet-table-flattened.duet-table-plain tfoot td{margin-bottom:4px !important}.duet-table-flattened.duet-table-fixed tbody:not(:only-of-type) tr:first-child,.duet-table-flattened.duet-table-minimal tbody:not(:only-of-type) tr:first-child,.duet-table-flattened.duet-table-plain tbody:not(:only-of-type) tr:first-child{border-bottom:0}.duet-table-plain.duet-table-flattened tbody tr{border-bottom:1px solid #e1e3e6}.duet-table-plain.duet-table-flattened.duet-theme-turva tbody tr{border-bottom-color:#e4e4e6}.duet-table-minimal tbody tr,.duet-table-minimal tbody tr td{vertical-align:top;border-bottom:0 none}.duet-table-minimal tbody tr:last-of-type,.duet-table-minimal tbody tr:last-of-type td{border-bottom:1px solid #e1e3e6}.duet-table-minimal.duet-table-flattened tbody tr,.duet-table-minimal.duet-table-flattened tbody tr td{border-bottom:0 none}.duet-table-minimal.duet-table-flattened tbody tr td[data-heading]::before{display:none}.duet-table-minimal.duet-table-flattened tfoot{border-top:1px solid #e1e3e6}.duet-table-minimal.duet-table-flattened.duet-theme-turva tfoot{border-top-color:#e4e4e6}.duet-table-fixed table{table-layout:fixed}.duet-table-fixed tbody tr,.duet-table-fixed tbody tr td,.duet-table-fixed tbody tr td:first-child{padding:4px !important;vertical-align:text-bottom;border-bottom:0 none}.duet-table-fixed thead{display:none}.duet-table-fixed tbody tr,.duet-table-fixed tbody tr td{border-bottom:0 none}.duet-table-fixed:not(.duet-table-flattened) tfoot{border-top:1px solid #e1e3e6}.duet-table-fixed:not(.duet-table-flattened).duet-theme-turva tfoot{border-top-color:#e4e4e6}.duet-table-scrollable{position:relative;width:100%;overflow-x:auto;background:linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, 0)), linear-gradient(-90deg, #fff 0%, rgba(255, 255, 255, 0)) 100% 0, radial-gradient(farthest-side at 0% 50%, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0)), radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0)) 100% 0%;background-repeat:no-repeat;background-attachment:local, local, scroll, scroll;background-size:100px 100%, 100px 100%, 12px 100%, 12px 100%}.duet-table-selected-column{background:rgba(0, 119, 179, 0.08)}.duet-theme-turva .duet-table-selected-column{background:rgba(68, 68, 69, 0.08)}";
+const duetTableCss = "duet-table{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;margin-bottom:20px !important;display:block;font-variant-numeric:tabular-nums}duet-table table,duet-table thead,duet-table tbody,duet-table tfoot,duet-table th,duet-table td,duet-table tr{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}duet-table.duet-m-0{margin:0 !important}duet-table table{width:100%;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:1rem;text-align:left;border-spacing:0;border-collapse:separate}duet-table.duet-theme-turva table{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"}duet-table td{-webkit-hyphens:auto;hyphens:auto;color:#00294d}duet-table.duet-theme-turva td{color:#171c3a}duet-table th{font-weight:600;line-height:1.25;color:#657787;text-align:left}duet-table.duet-theme-turva th{color:#747475}duet-table tbody th{font-weight:600;color:#00294d}duet-table.duet-theme-turva tbody th{color:#171c3a}duet-table .duet-table-action-row td:last-child{justify-self:end;padding-right:20px !important;white-space:nowrap}.duet-table-flattened tbody tr{display:grid;grid-template-columns:repeat(2, 1fr);grid-auto-rows:auto;gap:10px}.duet-table-flattened tbody tr.duet-table-action-row td:last-child::before{padding:0;content:\"\"}.duet-table-flattened thead tr{position:absolute !important;top:0;width:1px !important;height:1px !important;padding:0 !important;overflow:hidden !important;clip:rect(1px, 1px, 1px, 1px) !important;border:0 !important}.duet-table-flattened td{grid-column:1/2;line-height:1.25}.duet-table-flattened td:not(:last-child){margin-bottom:16px !important}.duet-table-flattened td:first-child{grid-row:1;grid-column:1}.duet-table-flattened td:last-child{grid-row:1;grid-column:2}.duet-table-flattened tbody td,.duet-table-flattened tbody th,.duet-table-flattened tfoot td{padding:0 !important;text-align:left !important}.duet-table-flattened tbody th{font-weight:600;line-height:1.25;color:#657787;text-align:left}.duet-table-flattened td[data-heading]::before{margin-bottom:4px !important;display:block;font-size:1rem;font-weight:600;color:#00294d;content:attr(data-heading)}.duet-table-flattened.duet-theme-turva td[data-heading]::before{color:#171c3a}.duet-table-sticky thead th{position:sticky;top:0;background:white}.duet-table-striped td,.duet-table-striped th{padding:20px !important}@media (max-width: 35.9375em){.duet-table-striped td,.duet-table-striped th{padding:20px 12px !important}}.duet-table-striped tbody th{background:white}.duet-table-striped.duet-table-sticky thead th{border-bottom:1px solid #e1e3e6}.duet-table-striped.duet-table-sticky.duet-theme-turva thead th{border-bottom-color:#e4e4e6}.duet-table-striped tbody:not(:first-of-type) th{padding-top:40px !important}.duet-table-striped tbody:only-of-type tr:nth-of-type(odd){background:rgba(0, 80, 128, 0.04)}.duet-table-striped.duet-theme-turva tbody:only-of-type tr:nth-of-type(odd){background:rgba(23, 28, 58, 0.04)}.duet-table-striped tbody:not(:only-of-type) tr:nth-of-type(even){background:rgba(0, 80, 128, 0.04)}.duet-table-striped.duet-theme-turva tbody:not(:only-of-type) tr:nth-of-type(even){background:rgba(23, 28, 58, 0.04)}.duet-table-striped tfoot td{border-top:1px solid #e1e3e6}.duet-table-striped.duet-theme-turva tfoot td{border-top-color:#e4e4e6}.duet-table-striped.duet-table-flattened tbody:not(:first-of-type) th{padding-top:20px !important}.duet-table-striped.duet-table-flattened tr{padding:20px !important}.duet-table-striped.duet-table-flattened tfoot td{border-top:0}.duet-table-striped.duet-table-flattened tfoot tr{border-top:1px solid #e1e3e6}.duet-table-striped.duet-table-flattened.duet-theme-turva tfoot tr{border-top-color:#e4e4e6}.duet-table-fixed th,.duet-table-minimal th,.duet-table-plain th{padding:16px !important;border-bottom:1px solid #657787}.duet-table-fixed th:first-child,.duet-table-minimal th:first-child,.duet-table-plain th:first-child{padding-left:0 !important}.duet-table-fixed th:last-child,.duet-table-minimal th:last-child,.duet-table-plain th:last-child{padding-right:0 !important}.duet-theme-turva.duet-table-fixed th,.duet-theme-turva.duet-table-minimal th,.duet-theme-turva.duet-table-plain th{border-bottom-color:#444445}.duet-table-fixed tbody th,.duet-table-minimal tbody th,.duet-table-plain tbody th{padding-top:40px !important;border-bottom-color:#e1e3e6}.duet-theme-turva.duet-table-fixed tbody th,.duet-theme-turva.duet-table-minimal tbody th,.duet-theme-turva.duet-table-plain tbody th{border-bottom-color:#e4e4e6}.duet-table-fixed td,.duet-table-minimal td,.duet-table-plain td{padding:16px !important}.duet-table-fixed td:first-child,.duet-table-minimal td:first-child,.duet-table-plain td:first-child{padding-left:0 !important}.duet-table-fixed td:last-child,.duet-table-minimal td:last-child,.duet-table-plain td:last-child{padding-right:0 !important}.duet-table-fixed tbody td,.duet-table-minimal tbody td,.duet-table-plain tbody td{border-bottom:1px solid #e1e3e6}.duet-theme-turva.duet-table-fixed tbody td,.duet-theme-turva.duet-table-minimal tbody td,.duet-theme-turva.duet-table-plain tbody td{border-bottom-color:#e4e4e6}.duet-table-flattened.duet-table-fixed tbody:first-of-type th,.duet-table-flattened.duet-table-minimal tbody:first-of-type th,.duet-table-flattened.duet-table-plain tbody:first-of-type th{padding-top:0 !important}.duet-table-flattened.duet-table-fixed td,.duet-table-flattened.duet-table-minimal td,.duet-table-flattened.duet-table-plain td,.duet-table-flattened.duet-table-fixed tbody th,.duet-table-flattened.duet-table-minimal tbody th,.duet-table-flattened.duet-table-plain tbody th{border-bottom:0}.duet-table-flattened.duet-table-fixed tr,.duet-table-flattened.duet-table-minimal tr,.duet-table-flattened.duet-table-plain tr{padding:20px 0 !important}.duet-table-flattened.duet-table-fixed tbody th,.duet-table-flattened.duet-table-minimal tbody th,.duet-table-flattened.duet-table-plain tbody th{padding-top:20px !important}.duet-table-flattened.duet-table-fixed tfoot td,.duet-table-flattened.duet-table-minimal tfoot td,.duet-table-flattened.duet-table-plain tfoot td{margin-bottom:4px !important}.duet-table-flattened.duet-table-fixed tbody:not(:only-of-type) tr:first-child,.duet-table-flattened.duet-table-minimal tbody:not(:only-of-type) tr:first-child,.duet-table-flattened.duet-table-plain tbody:not(:only-of-type) tr:first-child{border-bottom:0}.duet-table-plain.duet-table-flattened tbody tr{border-bottom:1px solid #e1e3e6}.duet-table-plain.duet-table-flattened.duet-theme-turva tbody tr{border-bottom-color:#e4e4e6}.duet-table-minimal tbody tr,.duet-table-minimal tbody tr td{vertical-align:top;border-bottom:0 none}.duet-table-minimal tbody tr:last-of-type,.duet-table-minimal tbody tr:last-of-type td{border-bottom:1px solid #e1e3e6}.duet-table-minimal.duet-table-flattened tbody tr,.duet-table-minimal.duet-table-flattened tbody tr td{border-bottom:0 none}.duet-table-minimal.duet-table-flattened tbody tr td[data-heading]::before{display:none}.duet-table-minimal.duet-table-flattened tfoot{border-top:1px solid #e1e3e6}.duet-table-minimal.duet-table-flattened.duet-theme-turva tfoot{border-top-color:#e4e4e6}.duet-table-fixed table{table-layout:fixed}.duet-table-fixed tbody tr,.duet-table-fixed tbody tr td,.duet-table-fixed tbody tr td:first-child{padding:4px !important;vertical-align:text-bottom;border-bottom:0 none}.duet-table-fixed thead{display:none}.duet-table-fixed tbody tr,.duet-table-fixed tbody tr td{border-bottom:0 none}.duet-table-fixed:not(.duet-table-flattened) tfoot{border-top:1px solid #e1e3e6}.duet-table-fixed:not(.duet-table-flattened).duet-theme-turva tfoot{border-top-color:#e4e4e6}.duet-table-scrollable{position:relative;width:100%;overflow-x:auto;background:linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, 0)), linear-gradient(-90deg, #fff 0%, rgba(255, 255, 255, 0)) 100% 0, radial-gradient(farthest-side at 0% 50%, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0)), radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0)) 100% 0%;background-repeat:no-repeat;background-attachment:local, local, scroll, scroll;background-size:100px 100%, 100px 100%, 12px 100%, 12px 100%}.duet-table-selected-column{background:rgba(0, 119, 179, 0.08)}.duet-theme-turva .duet-table-selected-column{background:rgba(68, 68, 69, 0.08)}.duet-table-sortable tbody tr td:first-child,.duet-table-sortable thead tr th:first-child{padding:20px}.duet-table-sortable:not(.duet-table-flattened) tfoot{border-top:1px solid #e1e3e6}.duet-table-sortable:not(.duet-table-flattened).duet-theme-turva tfoot{border-top-color:#e4e4e6}.duet-table-actions table{table-layout:auto}.duet-table-actions thead th:last-child{width:1px;white-space:nowrap}";
 
 // remove wrapping speech marks.
 // media query tokens are wrapped in speech marks,
@@ -348,9 +282,9 @@ let DuetTable = class {
   }
   connectedCallback() {
     this.mq = matchMedia(breakpointToToken[this.breakpoint]);
-    this.mq.addEventListener("change", this.handleMediaQueryChange);
+    this.mq.addEventListener("change", debounce(this.handleMediaQueryChange, 50));
     this.handleMediaQueryChange(this.mq);
-    this.observer = new MutationObserver(() => this.copyHeadingsToCells());
+    this.observer = new MutationObserver(() => debounce(this.copyHeadingsToCells(), 50));
     this.observer.observe(this.element, {
       childList: true,
       subtree: true,
@@ -381,6 +315,9 @@ let DuetTable = class {
     this.mq = null;
     this.matchesBreakpoint = true;
   }
+  /**
+   * Local methods.
+   */
   copyHeadingsToCells() {
     const headingElements = this.element.querySelectorAll("thead th");
     const rowElements = this.element.querySelectorAll("tbody tr");
@@ -656,7 +593,7 @@ 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");
@@ -736,7 +673,7 @@ const makeXhrRequest = ({ payload, options, onFailure, onSuccess, onProgress })
   return xhr;
 };
 
-const duetUploadCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}::slotted([slot=header]){margin-bottom:16px}::slotted([slot=fileheader]){margin:16px 0 0 0}::slotted([slot=filefooter]){margin-top:16px}.duet-upload{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}.duet-upload-item-size{font-size:0.75rem;font-weight:400}.duet-upload-filelist{margin-bottom:25px}.duet-upload-filelist-empty{display:flex;align-items:center;justify-content:center;width:100%;height:75px;margin:0 auto;font-size:1rem;font-weight:400;background-color:#f5f8fa}";
+const duetUploadCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}::slotted([slot=header]){margin-bottom:16px}::slotted([slot=fileheader]){margin:16px 0 0 0}::slotted([slot=filefooter]){margin-top:16px}.duet-upload{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}.duet-upload-item-size{font-size:0.75rem;font-weight:400}.duet-upload-filelist{margin-bottom:25px}.duet-upload-filelist-empty{display:flex;align-items:center;justify-content:center;width:100%;height:75px;margin:0 auto;font-size:1rem;font-weight:400;background-color:#f5f8fa}.duet-upload-editable-table-header-hidden{display:none}.duet-upload-editable-table tbody .duet-upload-editable-table-data{padding:0 !important;border:0}.duet-upload-editable-table duet-editable-table tfoot,.duet-upload-editable-table duet-editable-table thead{display:none}.duet-upload-editable-table duet-editable-table .duet-editable-table-content{padding-right:0 !important;padding-left:0 !important}.duet-upload-editable-table duet-editable-table duet-table .duet-table-action-row td{padding:0.75rem 0 !important}.duet-upload-editable-table duet-editable-table duet-table .duet-table-action-row td:last-child{padding-right:0 !important}.duet-upload-editable-table duet-editable-table .duet-editable-table-row-inprogress duet-action-button::part(button){border:0}";
 
 let DuetUpload = class {
   constructor(hostRef) {
@@ -750,25 +687,6 @@ let DuetUpload = class {
     this.duetCancel = createEvent(this, "duetCancel", 3);
     this.duetProgress = createEvent(this, "duetProgress", 3);
     this.duetUpload = createEvent(this, "duetUpload", 3);
-    /**
-     * 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
      */
@@ -790,8 +708,9 @@ let DuetUpload = class {
       {
         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",
@@ -802,8 +721,9 @@ let DuetUpload = class {
       {
         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",
@@ -873,8 +793,8 @@ let DuetUpload = class {
         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",
       },
     };
     /**
@@ -1029,19 +949,72 @@ let DuetUpload = class {
      * 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;
           // code block
         }
@@ -1098,24 +1071,6 @@ let DuetUpload = class {
         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);
@@ -1176,7 +1131,6 @@ let DuetUpload = class {
       this.nativeInput.value = "";
     };
     this.startUpload = async (ev, metaData = undefined) => {
-      await this.setFocus();
       this.metaData = metaData;
       this.nativeInput.click();
       this.onUpload(ev, metaData);
@@ -1239,9 +1193,18 @@ let DuetUpload = class {
         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({
@@ -1255,8 +1218,9 @@ let DuetUpload = class {
       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();
@@ -1306,6 +1270,79 @@ let DuetUpload = class {
         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) {
@@ -1329,6 +1366,68 @@ let DuetUpload = class {
     // 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
    */
@@ -1450,68 +1549,6 @@ let DuetUpload = class {
       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" })))));
-  }
   get element() { return getElement(this); }
   static get watchers() { return {
     "valid": ["watchValidHandler"]
@@ -1519,4 +1556,4 @@ let DuetUpload = class {
 };
 DuetUpload.style = duetUploadCss;
 
-export { DuetEditableTable as duet_editable_table, DuetEditableTableItem as duet_editable_table_item, DuetTable as duet_table, DuetUpload as duet_upload };
+export { DuetEditableTable as duet_editable_table, DuetTable as duet_table, DuetUpload as duet_upload };