@aivenio/aquarium 2.17.0 → 2.18.0

package/dist/src/molecules/ItemList/ItemList.js

@@ -24,6 +24,7 @@ export const ItemList = (_a) => {
     const sortedItems = onSortChanged ? items : sortByColumn(items, columns, sortState); // If onSortChanged is provided its assumed that the parent is managing the sorting
     return (React.createElement(Template, { className: "Aquarium-ItemList", columns: templateColumns, role: "table" },
         React.createElement(DataList.Row, { header: true }, columns.map((column) => {
+            var _a, _b;
             if (columnHasSort(column)) {
                 return (React.createElement(DataList.SortCell, Object.assign({ sticky: sticky, direction: (sortState === null || sortState === void 0 ? void 0 : sortState.headerName) === column.headerName ? sortState.direction : 'none', onClick: () => {
                         const newState = 
@@ -38,9 +39,9 @@ export const ItemList = (_a) => {
                                 { headerName: column.headerName, direction: 'ascending' };
                         setSortState(newState);
                         onSortChanged === null || onSortChanged === void 0 ? void 0 : onSortChanged(newState);
-                    } }, cellProps(column)), column.headerName));
+                    }, key: (_a = column.key) !== null && _a !== void 0 ? _a : column.headerName }, cellProps(column)), column.headerName));
             }
-            return (React.createElement(DataList.HeadCell, Object.assign({}, cellProps(column), { sticky: sticky }), column.headerName));
+            return (React.createElement(DataList.HeadCell, Object.assign({ key: (_b = column.key) !== null && _b !== void 0 ? _b : column.headerName }, cellProps(column), { sticky: sticky }), column.headerName));
         })),
         React.createElement(Rows, Object.assign({ columns: columns, items: sortedItems, level: 0 }, infiniteProps))));
 };
@@ -58,9 +59,12 @@ const Rows = (_a) => {
             const noDivider = (level === 0 && isLastItem) || (level > 0 && (isLastGroup || !isLastItem)) || hasSubItems;
             return (React.createElement(React.Fragment, { key: item.id },
                 React.createElement(DataList.Row, { noDivider: noDivider },
-                    React.createElement(List, { items: columns, renderItem: (column, columnIndex) => (React.createElement(DataList.Cell, Object.assign({}, cellProps(column), { style: level > 1 && columnIndex === 0 ? { paddingLeft: (level - 1) * 60 } : undefined }),
-                            level > 0 && columnIndex === 0 && React.createElement(DataList.TreeLine, { isLast: itemIndex === items.length - 1 }),
-                            React.createElement(DataListCell, { column: column, row: item, index: columnIndex, rows: items }))) })),
+                    React.createElement(List, { items: columns, renderItem: (column, columnIndex) => {
+                            var _a;
+                            return (React.createElement(DataList.Cell, Object.assign({ key: (_a = column.key) !== null && _a !== void 0 ? _a : column.headerName }, cellProps(column), { style: level > 1 && columnIndex === 0 ? { paddingLeft: (level - 1) * 60 } : undefined }),
+                                level > 0 && columnIndex === 0 && React.createElement(DataList.TreeLine, { isLast: itemIndex === items.length - 1 }),
+                                React.createElement(DataListCell, { column: column, row: item, index: columnIndex, rows: items })));
+                        } })),
                 item.items && (React.createElement(WithGroup, { level: level },
                     React.createElement(Rows, { columns: columns, items: item.items, level: level + 1, 
                         // We are in last group if we are last item on main level or isLastGroup has been passed from above, meaning we are in a nested group of last item
@@ -68,5 +72,5 @@ const Rows = (_a) => {
         } })));
 };
 // rowgroups are not allowed to contain other rowgroups so we will only use this role for first level groups
-const WithGroup = ({ level, children }) => level === 0 ? React.createElement(DataList.Row, { isGroup: true }, children) : children;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiSXRlbUxpc3QuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9zcmMvbW9sZWN1bGVzL0l0ZW1MaXN0L0l0ZW1MaXN0LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7OztBQUFBLE9BQU8sS0FBSyxNQUFNLE9BQU8sQ0FBQztBQUUxQixPQUFPLEVBQTBCLElBQUksRUFBRSxNQUFNLHlCQUF5QixDQUFDO0FBQ3ZFLE9BQU8sRUFBRSxRQUFRLEVBQUUsTUFBTSxpQ0FBaUMsQ0FBQztBQUUzRCxPQUFPLEVBQUUsUUFBUSxFQUFFLE1BQU0sNkJBQTZCLENBQUM7QUFFdkQsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLDhCQUE4QixDQUFDO0FBQzVELE9BQU8sRUFDTCxTQUFTLEVBQ1QsYUFBYSxHQUlkLE1BQU0sdUJBQXVCLENBQUM7QUFDL0IsT0FBTyxFQUFrQixZQUFZLEVBQUUsTUFBTSw4QkFBOEIsQ0FBQztBQUU1RSxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0sZ0NBQWdDLENBQUM7QUE2QzlELE1BQU0sQ0FBQyxNQUFNLFFBQVEsR0FBRyxDQUFpQixFQU90QixFQUFFLEVBQUU7UUFQa0IsRUFDdkMsT0FBTyxFQUNQLEtBQUssRUFDTCxhQUFhLEVBQ2IsTUFBTSxFQUNOLFdBQVcsT0FFTSxFQURkLGFBQWEsY0FOdUIsOERBT3hDLENBRGlCO0lBRWhCLE1BQU0sZUFBZSxHQUFHLE9BQU8sQ0FBQyxHQUFHLENBQUMsQ0FBQyxNQUFNLEVBQUUsRUFBRSxXQUFDLE9BQUEsTUFBQSxNQUFNLENBQUMsS0FBSyxtQ0FBSSxNQUFNLENBQUEsRUFBQSxDQUFDLENBQUM7SUFDeEUsTUFBTSxDQUFDLFNBQVMsRUFBRSxZQUFZLENBQUMsR0FBRyxZQUFZLENBQUMsV0FBVyxDQUFDLENBQUM7SUFDNUQsTUFBTSxXQUFXLEdBQUcsYUFBYSxDQUFDLENBQUMsQ0FBQyxLQUFLLENBQUMsQ0FBQyxDQUFDLFlBQVksQ0FBQyxLQUFLLEVB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
+const WithGroup = ({ level, children }) => level === 0 ? React.createElement(DataList.Row, { isGroup: true }, children) : React.createElement(React.Fragment, null, children);
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiSXRlbUxpc3QuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9zcmMvbW9sZWN1bGVzL0l0ZW1MaXN0L0l0ZW1MaXN0LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7OztBQUFBLE9BQU8sS0FBSyxNQUFNLE9BQU8sQ0FBQztBQUUxQixPQUFPLEVBQTBCLElBQUksRUFBRSxNQUFNLHlCQUF5QixDQUFDO0FBQ3ZFLE9BQU8sRUFBRSxRQUFRLEVBQUUsTUFBTSxpQ0FBaUMsQ0FBQztBQUUzRCxPQUFPLEVBQUUsUUFBUSxFQUFFLE1BQU0sNkJBQTZCLENBQUM7QUFFdkQsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLDhCQUE4QixDQUFDO0FBQzVELE9BQU8sRUFDTCxTQUFTLEVBQ1QsYUFBYSxHQUlkLE1BQU0sdUJBQXVCLENBQUM7QUFDL0IsT0FBTyxFQUFrQixZQUFZLEVBQUUsTUFBTSw4QkFBOEIsQ0FBQztBQUU1RSxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0sZ0NBQWdDLENBQUM7QUE2QzlELE1BQU0sQ0FBQyxNQUFNLFFBQVEsR0FBRyxDQUFpQixFQU90QixFQUFFLEVBQUU7UUFQa0IsRUFDdkMsT0FBTyxFQUNQLEtBQUssRUFDTCxhQUFhLEVBQ2IsTUFBTSxFQUNOLFdBQVcsT0FFTSxFQURkLGFBQWEsY0FOdUIsOERBT3hDLENBRGlCO0lBRWhCLE1BQU0sZUFBZSxHQUFHLE9BQU8sQ0FBQyxHQUFHLENBQUMsQ0FBQyxNQUFNLEVBQUUsRUFBRSxXQUFDLE9BQUEsTUFBQSxNQUFNLENBQUMsS0FBSyxtQ0FBSSxNQUFNLENBQUEsRUFBQSxDQUFDLENBQUM7SUFDeEUsTUFBTSxDQUFDLFNBQVMsRUFBRSxZQUFZLENBQUMsR0FBRyxZQUFZLENBQUMsV0FBVyxDQUFDLENBQUM7SUFDNUQsTUFBTSxXQUFXLEdBQUcsYUFBYSxDQUFDLENBQUMsQ0FBQyxLQUFLLENBQUMsQ0FBQyxDQUFDLFlBQVksQ0FBQyxLQUFLLEVB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

package/dist/src/utils/table/types.d.ts

@@ -182,7 +182,6 @@ export declare const areRowsGrouped: <R extends DataTableRow>(rows: DataListGrou
 export declare const toSortDirection: (direction: SortDirection | undefined) => "asc" | "desc" | false;
 export type StickyColumn = 'left' | 'right';
 type CellProps = {
-    key: string;
     align: TextAlign | undefined;
     stickyColumn?: StickyColumn;
 };

package/dist/src/utils/table/types.js

@@ -5,7 +5,6 @@ export const areRowsGrouped = (rows) => {
 };
 export const toSortDirection = (direction) => direction === 'ascending' ? 'asc' : direction === 'descending' ? 'desc' : false;
 export const cellProps = (column) => {
-    var _a;
     let align;
     switch (column.type) {
         case 'menu':
@@ -23,7 +22,6 @@ export const cellProps = (column) => {
         }
     }
     return {
-        key: (_a = column.key) !== null && _a !== void 0 ? _a : column.headerName,
         align,
         stickyColumn: column.sticky,
     };
@@ -33,4 +31,4 @@ export const columnIsFieldColumn = (column) => Boolean(column && column.field);
 export function isOnSortChangedDirection(value) {
     return value === undefined || ['ascending', 'descending'].includes(value);
 }
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidHlwZXMuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9zcmMvdXRpbHMvdGFibGUvdHlwZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEseUNBQXlDO0FBRXpDLE9BQU8sT0FBTyxNQUFNLGdCQUFnQixDQUFDO0FBNE5yQyxNQUFNLENBQUMsTUFBTSxjQUFjLEdBQUcsQ0FDNUIsSUFBa0MsRUFDRixFQUFFO0lBQ2xDLE9BQU8sQ0FBQyxPQUFPLENBQUMsSUFBSSxDQUFDLENBQUM7QUFDeEIsQ0FBQyxDQUFDO0FBRUYsTUFBTSxDQUFDLE1BQU0sZUFBZSxHQUFHLENBQUMsU0FBb0MsRUFBMEIsRUFBRSxDQUM5RixTQUFTLEtBQUssV0FBVyxDQUFDLENBQUMsQ0FBQyxLQUFLLENBQUMsQ0FBQyxDQUFDLFNBQVMsS0FBSyxZQUFZLENBQUMsQ0FBQyxDQUFDLE1BQU0sQ0FBQyxDQUFDLENBQUMsS0FBSyxDQUFDO0FBVWxGLE1BQU0sQ0FBQyxNQUFNLFNBQVMsR0FBRyxDQUFtQixNQUFTLEVBQWEsRUFBRTs7SUFDbEUsSUFBSSxLQUE0QixDQUFDO0lBRWpDLFFBQVEsTUFBTSxDQUFDLElBQUksRUFBRSxDQUFDO1FBQ3BCLEtBQUssTUFBTSxDQUFDO1FBQ1osS0FBSyxRQUFRLENBQUM7UUFDZCxLQUFLLFFBQVEsQ0FBQyxDQUFDLENBQUM7WUFDZCxLQUFLLEdBQUcsT0FBTyxDQUFDO1lBQ2hCLE1BQU07UUFDUixDQUFDO1FBRUQsS0FBSyxRQUFRLENBQUMsQ0FBQyxDQUFDO1lBQ2QsS0FBSyxHQUFHLFNBQVMsQ0FBQztZQUNsQixNQUFNO1FBQ1IsQ0FBQztRQUVELE9BQU8sQ0FBQyxDQUFDLENBQUM7WUFDUixLQUFLLEdBQUcsTUFBTSxDQUFDO1FBQ2pCLENBQUM7SUFDSCxDQUFDO0lBRUQsT0FBTztRQUNMLEdBQUcsRUFBRSxNQUFBLE1BQU0sQ0FBQyxHQUFHLG1DQUFJLE1BQU0sQ0FBQyxVQUFVO1FBQ3BDLEtBQUs7UUFDTCxZQUFZLEVBQUUsTUFBTSxDQUFDLE1BQU07S0FDNUIsQ0FBQztBQUNKLENBQUMsQ0FBQztBQVdGLE1BQU0sQ0FBQyxNQUFNLGFBQWEsR0FBRyxDQUF5QixNQUEwQixFQUErQixFQUFFLENBQy9HLENBQUMsbUJBQW1CLENBQUMsTUFBTSxDQUFDLElBQUksTUFBTSxDQUFDLFFBQVEsQ0FBQyxJQUFJLE9BQU8sQ0FBRSxNQUE0QixDQUFDLElBQUksQ0FBQyxDQUFDO0FBRWxHLE1BQU0sQ0FBQyxNQUFNLG1CQUFtQixHQUFHLENBQXlCLE1BQTJCLEVBQTRCLEVBQUUsQ0FDbkgsT0FBTyxDQUFDLE1BQU0sSUFBSyxNQUF5QixDQUFDLEtBQUssQ0FBQyxDQUFDO0FBMkJ0RCxNQUFNLFVBQVUsd0JBQXdCLENBQUMsS0FBeUI7SUFDaEUsT0FBTyxLQUFLLEtBQUssU0FBUyxJQUFJLENBQUMsV0FBVyxFQUFFLFlBQVksQ0FBQyxDQUFDLFFBQVEsQ0FBQyxLQUFLLENBQUMsQ0FBQztBQUM1RSxDQUFDIn0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidHlwZXMuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9zcmMvdXRpbHMvdGFibGUvdHlwZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEseUNBQXlDO0FBRXpDLE9BQU8sT0FBTyxNQUFNLGdCQUFnQixDQUFDO0FBNE5yQyxNQUFNLENBQUMsTUFBTSxjQUFjLEdBQUcsQ0FDNUIsSUFBa0MsRUFDRixFQUFFO0lBQ2xDLE9BQU8sQ0FBQyxPQUFPLENBQUMsSUFBSSxDQUFDLENBQUM7QUFDeEIsQ0FBQyxDQUFDO0FBRUYsTUFBTSxDQUFDLE1BQU0sZUFBZSxHQUFHLENBQUMsU0FBb0MsRUFBMEIsRUFBRSxDQUM5RixTQUFTLEtBQUssV0FBVyxDQUFDLENBQUMsQ0FBQyxLQUFLLENBQUMsQ0FBQyxDQUFDLFNBQVMsS0FBSyxZQUFZLENBQUMsQ0FBQyxDQUFDLE1BQU0sQ0FBQyxDQUFDLENBQUMsS0FBSyxDQUFDO0FBU2xGLE1BQU0sQ0FBQyxNQUFNLFNBQVMsR0FBRyxDQUFtQixNQUFTLEVBQWEsRUFBRTtJQUNsRSxJQUFJLEtBQTRCLENBQUM7SUFFakMsUUFBUSxNQUFNLENBQUMsSUFBSSxFQUFFLENBQUM7UUFDcEIsS0FBSyxNQUFNLENBQUM7UUFDWixLQUFLLFFBQVEsQ0FBQztRQUNkLEtBQUssUUFBUSxDQUFDLENBQUMsQ0FBQztZQUNkLEtBQUssR0FBRyxPQUFPLENBQUM7WUFDaEIsTUFBTTtRQUNSLENBQUM7UUFFRCxLQUFLLFFBQVEsQ0FBQyxDQUFDLENBQUM7WUFDZCxLQUFLLEdBQUcsU0FBUyxDQUFDO1lBQ2xCLE1BQU07UUFDUixDQUFDO1FBRUQsT0FBTyxDQUFDLENBQUMsQ0FBQztZQUNSLEtBQUssR0FBRyxNQUFNLENBQUM7UUFDakIsQ0FBQztJQUNILENBQUM7SUFFRCxPQUFPO1FBQ0wsS0FBSztRQUNMLFlBQVksRUFBRSxNQUFNLENBQUMsTUFBTTtLQUM1QixDQUFDO0FBQ0osQ0FBQyxDQUFDO0FBV0YsTUFBTSxDQUFDLE1BQU0sYUFBYSxHQUFHLENBQXlCLE1BQTBCLEVBQStCLEVBQUUsQ0FDL0csQ0FBQyxtQkFBbUIsQ0FBQyxNQUFNLENBQUMsSUFBSSxNQUFNLENBQUMsUUFBUSxDQUFDLElBQUksT0FBTyxDQUFFLE1BQTRCLENBQUMsSUFBSSxDQUFDLENBQUM7QUFFbEcsTUFBTSxDQUFDLE1BQU0sbUJBQW1CLEdBQUcsQ0FBeUIsTUFBMkIsRUFBNEIsRUFBRSxDQUNuSCxPQUFPLENBQUMsTUFBTSxJQUFLLE1BQXlCLENBQUMsS0FBSyxDQUFDLENBQUM7QUEyQnRELE1BQU0sVUFBVSx3QkFBd0IsQ0FBQyxLQUF5QjtJQUNoRSxPQUFPLEtBQUssS0FBSyxTQUFTLElBQUksQ0FBQyxXQUFXLEVBQUUsWUFBWSxDQUFDLENBQUMsUUFBUSxDQUFDLEtBQUssQ0FBQyxDQUFDO0FBQzVFLENBQUMifQ==

package/dist/system.cjs

@@ -1182,6 +1182,22 @@ var require_coinsHand = __commonJS({
   }
 });
 
+// src/icons/collapsePanel.js
+var require_collapsePanel = __commonJS({
+  "src/icons/collapsePanel.js"(exports2) {
+    "use strict";
+    var data = {
+      "body": '<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M8.182 10h9.09m-9.09 0 3.636 3.636M8.182 10l3.636-3.636M2.727 2.727v14.546"/>',
+      "left": 0,
+      "top": 0,
+      "width": 20,
+      "height": 20
+    };
+    exports2.__esModule = true;
+    exports2.default = data;
+  }
+});
+
 // src/icons/comment.js
 var require_comment = __commonJS({
   "src/icons/comment.js"(exports2) {
@@ -1774,6 +1790,22 @@ var require_expandAll = __commonJS({
   }
 });
 
+// src/icons/expandPanel.js
+var require_expandPanel = __commonJS({
+  "src/icons/expandPanel.js"(exports2) {
+    "use strict";
+    var data = {
+      "body": '<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M11.818 10h-9.09m9.09 0-3.636 3.636M11.818 10 8.182 6.364m9.091-3.637v14.546"/>',
+      "left": 0,
+      "top": 0,
+      "width": 20,
+      "height": 20
+    };
+    exports2.__esModule = true;
+    exports2.default = data;
+  }
+});
+
 // src/icons/export.js
 var require_export = __commonJS({
   "src/icons/export.js"(exports2) {
@@ -4787,6 +4819,7 @@ var import_codeFile = __toESM(require_codeFile());
 var import_code = __toESM(require_code());
 var import_cog = __toESM(require_cog());
 var import_coinsHand = __toESM(require_coinsHand());
+var import_collapsePanel = __toESM(require_collapsePanel());
 var import_comment = __toESM(require_comment());
 var import_confirm = __toESM(require_confirm());
 var import_console = __toESM(require_console());
@@ -4824,6 +4857,7 @@ var import_endorsed = __toESM(require_endorsed());
 var import_envelope = __toESM(require_envelope());
 var import_error = __toESM(require_error());
 var import_expandAll = __toESM(require_expandAll());
+var import_expandPanel = __toESM(require_expandPanel());
 var import_export = __toESM(require_export());
 var import_eyeOff = __toESM(require_eyeOff());
 var import_eyeOpen = __toESM(require_eyeOpen());
@@ -11013,7 +11047,6 @@ var cellProps = (column) => {
     }
   }
   return {
-    key: column.key ?? column.headerName,
     align,
     stickyColumn: column.sticky
   };
@@ -11486,6 +11519,7 @@ var DataListRow = ({
           const cell2 = /* @__PURE__ */ import_react75.default.createElement(
             DataList.Cell,
             {
+              key: column.key ?? column.headerName,
               ...cellProps(column),
               ...additionalColumnProps(column, columnIndex, columns, row),
               className: rowClassName?.(row, index, rows)
@@ -11763,6 +11797,7 @@ var DataListGroup = ({
             renderItem: (column, idx) => /* @__PURE__ */ import_react77.default.createElement(
               DataList.Cell,
               {
+                key: column.key ?? column.headerName,
                 ...cellProps(column),
                 className: tw("gap-3"),
                 style: idx === 0 ? { paddingLeft: `${GAP + level * INDENTATION}px` } : void 0
@@ -11972,10 +12007,11 @@ var DataList2 = ({
         direction: sort && sort.column.headerName === column.headerName ? sort.direction : "none",
         onClick: () => updateSort(column),
         sticky,
+        key: column.key ?? column.headerName,
         ...cellProps(column)
       },
       headerContentAndIcon
-    ) : /* @__PURE__ */ import_react80.default.createElement(DataList.HeadCell, { ...cellProps(column), sticky }, headerContentAndIcon);
+    ) : /* @__PURE__ */ import_react80.default.createElement(DataList.HeadCell, { key: column.key ?? column.headerName, ...cellProps(column), sticky }, headerContentAndIcon);
     return createAnimatedCell({
       cellElement: cell2,
       stickyStyles,
@@ -12206,12 +12242,14 @@ var DataTable = ({
             onClick: () => updateSort(column),
             style: { width: column.width },
             "aria-label": column.headerInvisible ? column.headerName : void 0,
+            key: column.key ?? column.headerName,
             ...cellProps(column)
           },
           headerContentAndIcon
         ) : /* @__PURE__ */ import_react83.default.createElement(
           Table2.Cell,
           {
+            key: column.key ?? column.headerName,
             ...cellProps(column),
             style: { width: column.width },
             "aria-label": column.headerInvisible ? column.headerName : void 0
@@ -12241,7 +12279,15 @@ var DataTable = ({
               items: columns,
               renderItem: (column) => {
                 return createAnimatedCell({
-                  cellElement: /* @__PURE__ */ import_react83.default.createElement(Table2.Cell, { ...cellProps(column), className: rowClassName?.(row, index, rows) }, renderCell(column, row, index, sortedRows)),
+                  cellElement: /* @__PURE__ */ import_react83.default.createElement(
+                    Table2.Cell,
+                    {
+                      key: column.key ?? column.headerName,
+                      ...cellProps(column),
+                      className: rowClassName?.(row, index, rows)
+                    },
+                    renderCell(column, row, index, sortedRows)
+                  ),
                   stickyStyles,
                   stickyColumn: cellProps(column).stickyColumn
                 });
@@ -12300,7 +12346,7 @@ var renderCell = (column, row, index, rows) => {
   } else {
     cellContent = row[column.field];
   }
-  return column.tooltip ? /* @__PURE__ */ import_react83.default.createElement(Tooltip, { ...column.tooltip(row, index, rows) }, cellContent) : cellContent;
+  return column.tooltip ? /* @__PURE__ */ import_react83.default.createElement(Tooltip, { ...column.tooltip(row, index, rows) }, cellContent) : /* @__PURE__ */ import_react83.default.createElement(import_react83.default.Fragment, null, cellContent);
 };
 DataTable.Skeleton = DataListSkeleton;
 
@@ -15470,12 +15516,13 @@ var ItemList = ({
             setSortState(newState);
             onSortChanged?.(newState);
           },
+          key: column.key ?? column.headerName,
           ...cellProps(column)
         },
         column.headerName
       );
     }
-    return /* @__PURE__ */ import_react141.default.createElement(DataList.HeadCell, { ...cellProps(column), sticky }, column.headerName);
+    return /* @__PURE__ */ import_react141.default.createElement(DataList.HeadCell, { key: column.key ?? column.headerName, ...cellProps(column), sticky }, column.headerName);
   })), /* @__PURE__ */ import_react141.default.createElement(Rows, { columns, items: sortedItems, level: 0, ...infiniteProps }));
 };
 var Rows = ({ columns, items, level, isLastGroup, ...infiniteProps }) => {
@@ -15495,6 +15542,7 @@ var Rows = ({ columns, items, level, isLastGroup, ...infiniteProps }) => {
             renderItem: (column, columnIndex) => /* @__PURE__ */ import_react141.default.createElement(
               DataList.Cell,
               {
+                key: column.key ?? column.headerName,
                 ...cellProps(column),
                 style: level > 1 && columnIndex === 0 ? { paddingLeft: (level - 1) * 60 } : void 0
               },
@@ -15515,7 +15563,7 @@ var Rows = ({ columns, items, level, isLastGroup, ...infiniteProps }) => {
     }
   );
 };
-var WithGroup = ({ level, children }) => level === 0 ? /* @__PURE__ */ import_react141.default.createElement(DataList.Row, { isGroup: true }, children) : children;
+var WithGroup = ({ level, children }) => level === 0 ? /* @__PURE__ */ import_react141.default.createElement(DataList.Row, { isGroup: true }, children) : /* @__PURE__ */ import_react141.default.createElement(import_react141.default.Fragment, null, children);
 
 // src/molecules/index.ts
 var SelectItem = Select.Item;

package/dist/system.mjs

@@ -1180,6 +1180,22 @@ var require_coinsHand = __commonJS({
   }
 });
 
+// src/icons/collapsePanel.js
+var require_collapsePanel = __commonJS({
+  "src/icons/collapsePanel.js"(exports) {
+    "use strict";
+    var data = {
+      "body": '<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M8.182 10h9.09m-9.09 0 3.636 3.636M8.182 10l3.636-3.636M2.727 2.727v14.546"/>',
+      "left": 0,
+      "top": 0,
+      "width": 20,
+      "height": 20
+    };
+    exports.__esModule = true;
+    exports.default = data;
+  }
+});
+
 // src/icons/comment.js
 var require_comment = __commonJS({
   "src/icons/comment.js"(exports) {
@@ -1772,6 +1788,22 @@ var require_expandAll = __commonJS({
   }
 });
 
+// src/icons/expandPanel.js
+var require_expandPanel = __commonJS({
+  "src/icons/expandPanel.js"(exports) {
+    "use strict";
+    var data = {
+      "body": '<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M11.818 10h-9.09m9.09 0-3.636 3.636M11.818 10 8.182 6.364m9.091-3.637v14.546"/>',
+      "left": 0,
+      "top": 0,
+      "width": 20,
+      "height": 20
+    };
+    exports.__esModule = true;
+    exports.default = data;
+  }
+});
+
 // src/icons/export.js
 var require_export = __commonJS({
   "src/icons/export.js"(exports) {
@@ -4624,6 +4656,7 @@ var import_codeFile = __toESM(require_codeFile());
 var import_code = __toESM(require_code());
 var import_cog = __toESM(require_cog());
 var import_coinsHand = __toESM(require_coinsHand());
+var import_collapsePanel = __toESM(require_collapsePanel());
 var import_comment = __toESM(require_comment());
 var import_confirm = __toESM(require_confirm());
 var import_console = __toESM(require_console());
@@ -4661,6 +4694,7 @@ var import_endorsed = __toESM(require_endorsed());
 var import_envelope = __toESM(require_envelope());
 var import_error = __toESM(require_error());
 var import_expandAll = __toESM(require_expandAll());
+var import_expandPanel = __toESM(require_expandPanel());
 var import_export = __toESM(require_export());
 var import_eyeOff = __toESM(require_eyeOff());
 var import_eyeOpen = __toESM(require_eyeOpen());
@@ -10850,7 +10884,6 @@ var cellProps = (column) => {
     }
   }
   return {
-    key: column.key ?? column.headerName,
     align,
     stickyColumn: column.sticky
   };
@@ -11323,6 +11356,7 @@ var DataListRow = ({
           const cell2 = /* @__PURE__ */ React68.createElement(
             DataList.Cell,
             {
+              key: column.key ?? column.headerName,
               ...cellProps(column),
               ...additionalColumnProps(column, columnIndex, columns, row),
               className: rowClassName?.(row, index, rows)
@@ -11600,6 +11634,7 @@ var DataListGroup = ({
             renderItem: (column, idx) => /* @__PURE__ */ React69.createElement(
               DataList.Cell,
               {
+                key: column.key ?? column.headerName,
                 ...cellProps(column),
                 className: tw("gap-3"),
                 style: idx === 0 ? { paddingLeft: `${GAP + level * INDENTATION}px` } : void 0
@@ -11809,10 +11844,11 @@ var DataList2 = ({
         direction: sort && sort.column.headerName === column.headerName ? sort.direction : "none",
         onClick: () => updateSort(column),
         sticky,
+        key: column.key ?? column.headerName,
         ...cellProps(column)
       },
       headerContentAndIcon
-    ) : /* @__PURE__ */ React72.createElement(DataList.HeadCell, { ...cellProps(column), sticky }, headerContentAndIcon);
+    ) : /* @__PURE__ */ React72.createElement(DataList.HeadCell, { key: column.key ?? column.headerName, ...cellProps(column), sticky }, headerContentAndIcon);
     return createAnimatedCell({
       cellElement: cell2,
       stickyStyles,
@@ -12043,12 +12079,14 @@ var DataTable = ({
             onClick: () => updateSort(column),
             style: { width: column.width },
             "aria-label": column.headerInvisible ? column.headerName : void 0,
+            key: column.key ?? column.headerName,
             ...cellProps(column)
           },
           headerContentAndIcon
         ) : /* @__PURE__ */ React75.createElement(
           Table2.Cell,
           {
+            key: column.key ?? column.headerName,
             ...cellProps(column),
             style: { width: column.width },
             "aria-label": column.headerInvisible ? column.headerName : void 0
@@ -12078,7 +12116,15 @@ var DataTable = ({
               items: columns,
               renderItem: (column) => {
                 return createAnimatedCell({
-                  cellElement: /* @__PURE__ */ React75.createElement(Table2.Cell, { ...cellProps(column), className: rowClassName?.(row, index, rows) }, renderCell(column, row, index, sortedRows)),
+                  cellElement: /* @__PURE__ */ React75.createElement(
+                    Table2.Cell,
+                    {
+                      key: column.key ?? column.headerName,
+                      ...cellProps(column),
+                      className: rowClassName?.(row, index, rows)
+                    },
+                    renderCell(column, row, index, sortedRows)
+                  ),
                   stickyStyles,
                   stickyColumn: cellProps(column).stickyColumn
                 });
@@ -12137,7 +12183,7 @@ var renderCell = (column, row, index, rows) => {
   } else {
     cellContent = row[column.field];
   }
-  return column.tooltip ? /* @__PURE__ */ React75.createElement(Tooltip, { ...column.tooltip(row, index, rows) }, cellContent) : cellContent;
+  return column.tooltip ? /* @__PURE__ */ React75.createElement(Tooltip, { ...column.tooltip(row, index, rows) }, cellContent) : /* @__PURE__ */ React75.createElement(React75.Fragment, null, cellContent);
 };
 DataTable.Skeleton = DataListSkeleton;
 
@@ -15335,12 +15381,13 @@ var ItemList = ({
             setSortState(newState);
             onSortChanged?.(newState);
           },
+          key: column.key ?? column.headerName,
           ...cellProps(column)
         },
         column.headerName
       );
     }
-    return /* @__PURE__ */ React132.createElement(DataList.HeadCell, { ...cellProps(column), sticky }, column.headerName);
+    return /* @__PURE__ */ React132.createElement(DataList.HeadCell, { key: column.key ?? column.headerName, ...cellProps(column), sticky }, column.headerName);
   })), /* @__PURE__ */ React132.createElement(Rows, { columns, items: sortedItems, level: 0, ...infiniteProps }));
 };
 var Rows = ({ columns, items, level, isLastGroup, ...infiniteProps }) => {
@@ -15360,6 +15407,7 @@ var Rows = ({ columns, items, level, isLastGroup, ...infiniteProps }) => {
             renderItem: (column, columnIndex) => /* @__PURE__ */ React132.createElement(
               DataList.Cell,
               {
+                key: column.key ?? column.headerName,
                 ...cellProps(column),
                 style: level > 1 && columnIndex === 0 ? { paddingLeft: (level - 1) * 60 } : void 0
               },
@@ -15380,7 +15428,7 @@ var Rows = ({ columns, items, level, isLastGroup, ...infiniteProps }) => {
     }
   );
 };
-var WithGroup = ({ level, children }) => level === 0 ? /* @__PURE__ */ React132.createElement(DataList.Row, { isGroup: true }, children) : children;
+var WithGroup = ({ level, children }) => level === 0 ? /* @__PURE__ */ React132.createElement(DataList.Row, { isGroup: true }, children) : /* @__PURE__ */ React132.createElement(React132.Fragment, null, children);
 
 // src/molecules/index.ts
 var SelectItem = Select.Item;