@aivenio/aquarium 1.80.0 → 2.0.0

package/dist/system.cjs

@@ -11445,7 +11445,7 @@ var Cell = (_a) => {
       cellClassNames,
       getBodyCellClassNames(false, stickyColumn),
       getAlignClassNames2(align),
-      tw("border-default group-last-of-type:border-b-0"),
+      tw("border-default"),
       className
     )
   }));
@@ -11456,18 +11456,21 @@ var Row = (_a) => {
     disabled,
     header,
     subgroup,
-    active
+    active,
+    isLast
   } = _b, rest = __objRest(_b, [
     "className",
     "disabled",
     "header",
     "subgroup",
-    "active"
+    "active",
+    "isLast"
   ]);
   return /* @__PURE__ */ import_react70.default.createElement("div", __spreadProps(__spreadValues(__spreadProps(__spreadValues({}, rest), {
     role: subgroup ? "rowgroup" : "row"
   }), { inert: disabled ? "" : void 0 }), {
     className: classNames(tw("contents"), className, {
+      "[&>*]:border-b-transparent": isLast,
       "children:opacity-70": disabled,
       "[&>*]:bg-primary-active": active,
       "[&>*]:hover:bg-muted": !disabled && !header
@@ -12173,19 +12176,32 @@ var DataListRow = ({
   menu,
   active,
   disabled,
+  isLast,
+  selectionDisabled,
   rowClassName,
   renderFirstColumn,
   additionalRowProps = () => ({}),
   additionalColumnProps = () => ({}),
-  stickyStyles
+  stickyStyles,
+  onClick
 }) => {
-  var _a;
+  var _a, _b, _c;
+  const resolvedAdditionalRowProps = additionalRowProps(row, index, rows);
   const isRowDisabled = (_a = disabled == null ? void 0 : disabled(row, index, rows)) != null ? _a : false;
-  return /* @__PURE__ */ import_react75.default.createElement(DataList.Row, __spreadValues({
+  const isRowSelectionDisabled = (_b = selectionDisabled == null ? void 0 : selectionDisabled(row, index, rows)) != null ? _b : false;
+  const isRowClickable = !isRowDisabled && !isRowSelectionDisabled && !!onClick;
+  const style = __spreadProps(__spreadValues({}, (_c = resolvedAdditionalRowProps.style) != null ? _c : {}), {
+    cursor: isRowClickable ? "pointer" : void 0
+  });
+  return /* @__PURE__ */ import_react75.default.createElement(DataList.Row, __spreadProps(__spreadValues({
     key: row.id,
     disabled: isRowDisabled,
-    active
-  }, additionalRowProps(row, index, rows)), renderFirstColumn == null ? void 0 : renderFirstColumn(row, index, rows), /* @__PURE__ */ import_react75.default.createElement(List, {
+    active,
+    isLast
+  }, resolvedAdditionalRowProps), {
+    style,
+    onClick: isRowClickable ? onClick : void 0
+  }), renderFirstColumn == null ? void 0 : renderFirstColumn(row, index, rows), /* @__PURE__ */ import_react75.default.createElement(List, {
     items: columns,
     renderItem: (column, columnIndex) => {
       const cell2 = /* @__PURE__ */ import_react75.default.createElement(DataList.Cell, __spreadProps(__spreadValues(__spreadValues({}, cellProps(column)), additionalColumnProps(column, columnIndex, columns, row)), {
@@ -12226,9 +12242,14 @@ var DataListCell = ({
     case "action": {
       const action = renameProperty("text", "children", column.action(row, index, rows));
       if (action) {
-        cellContent = /* @__PURE__ */ import_react75.default.createElement(Button.Secondary, __spreadValues({
+        cellContent = /* @__PURE__ */ import_react75.default.createElement(Button.Secondary, __spreadProps(__spreadValues({
           dense: true
-        }, action));
+        }, action), {
+          onClick: (e) => {
+            action.onClick();
+            e.stopPropagation();
+          }
+        }));
       }
       break;
     }
@@ -12280,7 +12301,7 @@ var flattenRows = (rows) => areRowsGrouped(rows) ? Object.values(rows).flatMap(f
 var GAP = 8;
 var INDENTATION = 28;
 var sortGroupKeys = (groupKeys) => [...groupKeys].sort((a) => a === "undefined" ? -1 : 1);
-var getDefaultRowCheckboxLabel = () => "Select row";
+var getDefaultRowSelectionLabel = () => "Select row";
 var getDefaultGroupCheckboxLabel = (key) => `Select ${key}`;
 var renderDefaultGroupName = (key) => /* @__PURE__ */ import_react77.default.createElement(import_react77.default.Fragment, null, "Group: ", /* @__PURE__ */ import_react77.default.createElement("b", null, key));
 var renderDefaultEmptyGroup = () => /* @__PURE__ */ import_react77.default.createElement(DataList.EmptyGroup, {
@@ -12290,11 +12311,13 @@ var DataListGroup = (_a) => {
   var _b = _a, {
     groups,
     groupKey,
-    level = 0
+    level = 0,
+    isLastGroup
   } = _b, props = __objRest(_b, [
     "groups",
     "groupKey",
-    "level"
+    "level",
+    "isLastGroup"
   ]);
   const {
     columns,
@@ -12312,16 +12335,18 @@ var DataListGroup = (_a) => {
     rows,
     selectable,
     selectedRows,
-    onSelectionChange,
+    getOnSelectionChangeForId,
     selectionDisabled = () => false,
-    getRowCheckboxLabel = getDefaultRowCheckboxLabel,
+    getRowSelectionLabel = getDefaultRowSelectionLabel,
     getGroupCheckboxLabel = getDefaultGroupCheckboxLabel
   } = props;
   const groupKeys = groups ? Object.keys(groups) : void 0;
   const hasCustomRowForGroup = (0, import_isFunction2.default)(getGroupRow);
   if (!areRowsGrouped(groups)) {
     if (groups.length === 0 && groupKey && groupKey !== "undefined") {
-      return /* @__PURE__ */ import_react77.default.createElement(DataList.Row, null, selectable && /* @__PURE__ */ import_react77.default.createElement(DataList.Cell, null), /* @__PURE__ */ import_react77.default.createElement(DataList.Cell, {
+      return /* @__PURE__ */ import_react77.default.createElement(DataList.Row, {
+        isLast: isLastGroup
+      }, selectable && /* @__PURE__ */ import_react77.default.createElement(DataList.Cell, null), /* @__PURE__ */ import_react77.default.createElement(DataList.Cell, {
         style: { paddingLeft: `${2 + GAP + level * INDENTATION}px`, gridColumn: `${selectable ? 2 : 1} / -1` }
       }, /* @__PURE__ */ import_react77.default.createElement(Typography, {
         variant: "small",
@@ -12332,16 +12357,18 @@ var DataListGroup = (_a) => {
       items: groups,
       renderItem: (row, index) => {
         var _a2;
-        const isChecked = (_a2 = selectedRows == null ? void 0 : selectedRows.includes(row.id)) != null ? _a2 : false;
+        const isSelected = (_a2 = selectedRows == null ? void 0 : selectedRows.includes(row.id)) != null ? _a2 : false;
         const isDisabled = disabled == null ? void 0 : disabled(row, index, rows);
         const isSelectionDisabled = selectionDisabled(row, index, rows);
+        const isLastRow = isLastGroup && index === groups.length - 1;
         return /* @__PURE__ */ import_react77.default.createElement(DataListRow, {
           key: row.id,
           columns,
           row,
           index,
+          isLast: isLastRow,
           rows,
-          active: selectable && isChecked,
+          active: selectable && isSelected,
           menu: /* @__PURE__ */ import_react77.default.createElement(DataListRowMenu, {
             row,
             index,
@@ -12351,9 +12378,10 @@ var DataListGroup = (_a) => {
             menuAriaLabel
           }),
           disabled,
+          selectionDisabled,
           rowClassName,
           additionalRowProps: () => selectable ? {
-            "aria-selected": isChecked
+            "aria-selected": isSelected
           } : {},
           additionalColumnProps: (_, columnIndex) => columnIndex === 0 ? {
             style: {
@@ -12361,13 +12389,20 @@ var DataListGroup = (_a) => {
             }
           } : {},
           renderFirstColumn: (row2, index2) => {
-            return /* @__PURE__ */ import_react77.default.createElement(import_react77.default.Fragment, null, selectable && /* @__PURE__ */ import_react77.default.createElement(DataList.Cell, null, /* @__PURE__ */ import_react77.default.createElement(Checkbox, {
-              "aria-label": getRowCheckboxLabel(row2, index2, isChecked, rows),
-              onChange: onSelectionChange(row2.id),
-              checked: isChecked,
+            return /* @__PURE__ */ import_react77.default.createElement(import_react77.default.Fragment, null, selectable && /* @__PURE__ */ import_react77.default.createElement(DataList.Cell, null, selectable === "single" && /* @__PURE__ */ import_react77.default.createElement(RadioButton, {
+              value: row2.id.toString(),
+              "aria-label": getRowSelectionLabel(row2, index2, isSelected, rows),
+              onChange: getOnSelectionChangeForId(row2.id),
+              checked: isSelected,
+              disabled: isDisabled || isSelectionDisabled
+            }), selectable === "multiple" && /* @__PURE__ */ import_react77.default.createElement(Checkbox, {
+              "aria-label": getRowSelectionLabel(row2, index2, isSelected, rows),
+              onChange: getOnSelectionChangeForId(row2.id),
+              checked: isSelected,
               disabled: isDisabled || isSelectionDisabled
             })));
-          }
+          },
+          onClick: selectable === "single" ? getOnSelectionChangeForId(row.id) : void 0
         });
       }
     });
@@ -12386,7 +12421,8 @@ var DataListGroup = (_a) => {
           groupKey: "undefined",
           level
         }, props), {
-          groups: group
+          groups: group,
+          isLastGroup: isLastGroup && index === groupKeys.length - 1
         }));
       }
       const openPanelId = expandedGroupIds ? (_a2 = expandedGroupIds.find((id) => id === key)) != null ? _a2 : null : void 0;
@@ -12394,17 +12430,20 @@ var DataListGroup = (_a) => {
       const nestedSelectedIds = (_b2 = selectedRows == null ? void 0 : selectedRows.filter((id) => nestedRowIds.includes(id))) != null ? _b2 : [];
       const allSelected = nestedRowIds.length === nestedSelectedIds.length;
       const isChecked = nestedSelectedIds.length > 0;
+      const isActiveRow = !!openPanelId || selectable && isChecked;
+      const isLastRow = isLastGroup && index === groupKeys.length - 1 && !openPanelId;
       return /* @__PURE__ */ import_react77.default.createElement(Accordion, {
         key,
         openPanelId
       }, hasCustomRowForGroup && /* @__PURE__ */ import_react77.default.createElement(DataList.Row, {
-        active: !!openPanelId || selectable && isChecked
-      }, selectable && /* @__PURE__ */ import_react77.default.createElement(DataList.Cell, null, /* @__PURE__ */ import_react77.default.createElement(Checkbox, {
+        active: isActiveRow,
+        isLast: isLastRow
+      }, selectable && /* @__PURE__ */ import_react77.default.createElement(DataList.Cell, null, selectable === "multiple" && /* @__PURE__ */ import_react77.default.createElement(Checkbox, {
         "aria-label": getGroupCheckboxLabel(key, group, index, isChecked, rows),
         checked: isChecked,
         indeterminate: isChecked && !allSelected,
         disabled: group.length === 0,
-        onChange: onSelectionChange(nestedRowIds)
+        onChange: getOnSelectionChangeForId(nestedRowIds)
       })), /* @__PURE__ */ import_react77.default.createElement(List, {
         items: columns,
         renderItem: (column, idx) => /* @__PURE__ */ import_react77.default.createElement(DataList.Cell, __spreadProps(__spreadValues({}, cellProps(column)), {
@@ -12427,29 +12466,31 @@ var DataListGroup = (_a) => {
         onMenuOpenChange,
         menuAriaLabel
       })), !hasCustomRowForGroup && /* @__PURE__ */ import_react77.default.createElement(DataList.Row, {
-        active: !!openPanelId || selectable && isChecked
-      }, selectable && /* @__PURE__ */ import_react77.default.createElement(DataList.Cell, null, /* @__PURE__ */ import_react77.default.createElement(Checkbox, {
+        active: isActiveRow,
+        isLast: isLastRow
+      }, selectable === "multiple" && /* @__PURE__ */ import_react77.default.createElement(DataList.Cell, null, /* @__PURE__ */ import_react77.default.createElement(Checkbox, {
         "aria-label": getGroupCheckboxLabel(key, group, index, isChecked, rows),
         checked: isChecked,
         indeterminate: isChecked && !allSelected,
         disabled: group.length === 0,
-        onChange: onSelectionChange(nestedRowIds)
+        onChange: getOnSelectionChangeForId(nestedRowIds)
       })), /* @__PURE__ */ import_react77.default.createElement(DataList.Cell, {
         className: tw("gap-3"),
         style: { paddingLeft: `${GAP + level * INDENTATION}px`, gridColumn: `${selectable ? 2 : 1} / -1` }
       }, /* @__PURE__ */ import_react77.default.createElement(Accordion.Toggle, {
         panelId: key,
         onChange: onGroupToggled
-      }), renderGroupName(key, group))), /* @__PURE__ */ import_react77.default.createElement(DataList.Row, {
-        subgroup: true
-      }, /* @__PURE__ */ import_react77.default.createElement(Accordion.UnanimatedPanel, {
+      }), renderGroupName(key, group))), /* @__PURE__ */ import_react77.default.createElement(Accordion.UnanimatedPanel, {
         panelId: key
+      }, /* @__PURE__ */ import_react77.default.createElement(DataList.Row, {
+        subgroup: true
       }, /* @__PURE__ */ import_react77.default.createElement(DataListGroup, __spreadProps(__spreadValues({
         key,
         groupKey: key,
         level: level + 1
       }, props), {
-        groups: group
+        groups: group,
+        isLastGroup: isLastGroup && index === groupKeys.length - 1
       })))));
     }
   });
@@ -12469,8 +12510,9 @@ var DataListSkeleton = ({ columns = ["1", "2", "2", 52], rows = 5 }) => {
     height: 17.5
   })))), /* @__PURE__ */ import_react78.default.createElement(List, {
     items: [...Array(rows).keys()],
-    renderItem: (item) => /* @__PURE__ */ import_react78.default.createElement(DataList.Row, {
-      key: item
+    renderItem: (item, index) => /* @__PURE__ */ import_react78.default.createElement(DataList.Row, {
+      key: item,
+      isLast: index === rows - 1
     }, /* @__PURE__ */ import_react78.default.createElement(List, {
       items: columnsAmount,
       renderItem: (key) => /* @__PURE__ */ import_react78.default.createElement(DataList.Cell, {
@@ -12535,13 +12577,13 @@ var DataList2 = (_a) => {
     getGroupRow,
     renderGroupName,
     renderEmptyGroup,
-    onGroupToggled,
-    expandedGroupIds,
+    onGroupToggled: _onGroupToggled,
+    expandedGroupIds: _expandedGroupIds,
     defaultSort,
     onSortChanged,
     selectable,
     selectionDisabled = () => false,
-    getRowCheckboxLabel = getDefaultRowCheckboxLabel,
+    getRowSelectionLabel = getDefaultRowSelectionLabel,
     getGroupCheckboxLabel = getDefaultGroupCheckboxLabel,
     selectedRows,
     defaultSelectedRows = [],
@@ -12571,7 +12613,7 @@ var DataList2 = (_a) => {
     "onSortChanged",
     "selectable",
     "selectionDisabled",
-    "getRowCheckboxLabel",
+    "getRowSelectionLabel",
     "getGroupCheckboxLabel",
     "selectedRows",
     "defaultSelectedRows",
@@ -12587,6 +12629,15 @@ var DataList2 = (_a) => {
     defaultSelectedRows,
     (value) => onSelectionChange == null ? void 0 : onSelectionChange(value != null ? value : [])
   );
+  const [expandedGroupIds, setExpandedGroupIds] = (0, import_utils15.useControlledState)(_expandedGroupIds, []);
+  const onGroupToggled = (id, open) => {
+    if (!open) {
+      setExpandedGroupIds([...expandedGroupIds, id]);
+    } else {
+      setExpandedGroupIds(expandedGroupIds.filter((panelId) => panelId !== id));
+    }
+    _onGroupToggled == null ? void 0 : _onGroupToggled(id, open);
+  };
   const defaultSortedColumn = columns.find((c) => c.headerName === (defaultSort == null ? void 0 : defaultSort.headerName));
   const initialSortState = defaultSortedColumn ? { column: defaultSortedColumn, direction: (_a2 = defaultSort == null ? void 0 : defaultSort.direction) != null ? _a2 : "ascending" } : {};
   const [sort, updateSort] = useTableSort(__spreadProps(__spreadValues({}, initialSortState), { onSortChanged }));
@@ -12611,9 +12662,11 @@ var DataList2 = (_a) => {
     }, children)),
     []
   );
-  const handleSelectionChange = (id) => (e) => {
+  const getOnSelectionChangeForId = (id) => (e) => {
     const ids = (0, import_castArray2.default)(id);
-    if (e.target.checked) {
+    if (selectable === "single") {
+      setSelected(ids);
+    } else if ("checked" in e.target && e.target.checked) {
       setSelected([...selected != null ? selected : [], ...ids]);
     } else {
       setSelected(selected == null ? void 0 : selected.filter((_id) => !ids.includes(_id)));
@@ -12636,7 +12689,7 @@ var DataList2 = (_a) => {
   }, selectable && /* @__PURE__ */ import_react80.default.createElement(DataList.HeadCell, {
     align: "left",
     sticky
-  }, /* @__PURE__ */ import_react80.default.createElement(Checkbox, {
+  }, selectable === "multiple" && /* @__PURE__ */ import_react80.default.createElement(Checkbox, {
     "aria-label": "Select all rows",
     indeterminate: totalSelected > 0 && totalSelected < allRows.length,
     checked: totalSelected > 0,
@@ -12697,29 +12750,33 @@ var DataList2 = (_a) => {
     selectable,
     selectionDisabled,
     selectedRows: selected,
-    onSelectionChange: handleSelectionChange,
-    getRowCheckboxLabel,
+    getOnSelectionChangeForId,
+    getRowSelectionLabel,
     getGroupCheckboxLabel,
     rows,
     groups,
     groupKey: void 0,
-    level: 0
+    level: 0,
+    isLastGroup: true
   }), !groups && /* @__PURE__ */ import_react80.default.createElement(List, __spreadProps(__spreadValues({}, rest), {
     paginationContainer: PaginationFooter,
     items: sortedRows,
     renderItem: (row, index) => {
       var _a3;
       const details = rowDetails == null ? void 0 : rowDetails(row, index, sortedRows);
-      const isChecked = (_a3 = selected == null ? void 0 : selected.includes(row.id)) != null ? _a3 : false;
+      const isSelected = (_a3 = selected == null ? void 0 : selected.includes(row.id)) != null ? _a3 : false;
       const isSelectionDisabled = selectionDisabled == null ? void 0 : selectionDisabled(row, index, sortedRows);
       const isDisabled = disabled == null ? void 0 : disabled(row, index, sortedRows);
+      const openPanelId = expandedGroupIds.find((id) => id === row.id.toString()) || null;
+      const isLastRow = index === sortedRows.length - 1;
       const content = /* @__PURE__ */ import_react80.default.createElement(DataListRow, {
         key: row.id,
         columns,
         row,
         index,
         rows: sortedRows,
-        active: selectable && isChecked,
+        active: selectable && isSelected,
+        isLast: isLastRow && !openPanelId,
         stickyStyles,
         menu: /* @__PURE__ */ import_react80.default.createElement(DataListRowMenu, {
           row,
@@ -12730,6 +12787,7 @@ var DataList2 = (_a) => {
           menuAriaLabel
         }),
         disabled,
+        selectionDisabled,
         rowClassName,
         additionalRowProps: (row2) => {
           var _a4;
@@ -12738,27 +12796,36 @@ var DataList2 = (_a) => {
           } : {};
         },
         renderFirstColumn: (row2, index2) => {
-          return /* @__PURE__ */ import_react80.default.createElement(import_react80.default.Fragment, null, selectable && /* @__PURE__ */ import_react80.default.createElement(DataList.Cell, null, /* @__PURE__ */ import_react80.default.createElement(Checkbox, {
-            "aria-label": getRowCheckboxLabel(row2, index2, isChecked, sortedRows),
-            onChange: handleSelectionChange(row2.id),
-            checked: isChecked,
+          return /* @__PURE__ */ import_react80.default.createElement(import_react80.default.Fragment, null, selectable && /* @__PURE__ */ import_react80.default.createElement(DataList.Cell, null, selectable === "single" && /* @__PURE__ */ import_react80.default.createElement(RadioButton, {
+            value: row2.id.toString(),
+            "aria-label": getRowSelectionLabel(row2, index2, isSelected, sortedRows),
+            onChange: getOnSelectionChangeForId(row2.id),
+            checked: isSelected,
+            disabled: isDisabled || isSelectionDisabled
+          }), selectable === "multiple" && /* @__PURE__ */ import_react80.default.createElement(Checkbox, {
+            "aria-label": getRowSelectionLabel(row2, index2, isSelected, sortedRows),
+            onChange: getOnSelectionChangeForId(row2.id),
+            checked: isSelected,
             disabled: isDisabled || isSelectionDisabled
           })), rowDetails !== void 0 && /* @__PURE__ */ import_react80.default.createElement(DataList.Cell, null, details && /* @__PURE__ */ import_react80.default.createElement(Accordion.Toggle, {
             panelId: row2.id.toString(),
             onChange: onGroupToggled
           })));
-        }
+        },
+        onClick: selectable === "single" ? getOnSelectionChangeForId(row.id) : void 0
       });
       if (!details) {
         return content;
       }
       return /* @__PURE__ */ import_react80.default.createElement(Accordion, {
         key: row.id,
-        openPanelId: expandedGroupIds ? expandedGroupIds.find((id) => id === row.id) || null : void 0
+        openPanelId
       }, content, /* @__PURE__ */ import_react80.default.createElement(Accordion.Panel, {
         role: "row",
         panelId: row.id.toString(),
-        className: tw("col-span-full bg-muted border-b border-default"),
+        className: tw("col-span-full bg-muted border-default", {
+          "border-b": !isLastRow
+        }),
         "aria-label": `row ${row.id.toString()} details`
       }, /* @__PURE__ */ import_react80.default.createElement("div", {
         role: "cell"