@aivenio/aquarium 1.80.1 → 2.0.0

package/dist/system.mjs

@@ -11285,7 +11285,7 @@ var Cell = (_a) => {
       cellClassNames,
       getBodyCellClassNames(false, stickyColumn),
       getAlignClassNames2(align),
-      tw("border-default group-last-of-type:border-b-0"),
+      tw("border-default"),
       className
     )
   }));
@@ -11296,18 +11296,21 @@ var Row = (_a) => {
     disabled,
     header,
     subgroup,
-    active
+    active,
+    isLast
   } = _b, rest = __objRest(_b, [
     "className",
     "disabled",
     "header",
     "subgroup",
-    "active"
+    "active",
+    "isLast"
   ]);
   return /* @__PURE__ */ React63.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
@@ -12013,19 +12016,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__ */ React68.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__ */ React68.createElement(DataList.Row, __spreadProps(__spreadValues({
     key: row.id,
     disabled: isRowDisabled,
-    active
-  }, additionalRowProps(row, index, rows)), renderFirstColumn == null ? void 0 : renderFirstColumn(row, index, rows), /* @__PURE__ */ React68.createElement(List, {
+    active,
+    isLast
+  }, resolvedAdditionalRowProps), {
+    style,
+    onClick: isRowClickable ? onClick : void 0
+  }), renderFirstColumn == null ? void 0 : renderFirstColumn(row, index, rows), /* @__PURE__ */ React68.createElement(List, {
     items: columns,
     renderItem: (column, columnIndex) => {
       const cell2 = /* @__PURE__ */ React68.createElement(DataList.Cell, __spreadProps(__spreadValues(__spreadValues({}, cellProps(column)), additionalColumnProps(column, columnIndex, columns, row)), {
@@ -12066,9 +12082,14 @@ var DataListCell = ({
     case "action": {
       const action = renameProperty("text", "children", column.action(row, index, rows));
       if (action) {
-        cellContent = /* @__PURE__ */ React68.createElement(Button.Secondary, __spreadValues({
+        cellContent = /* @__PURE__ */ React68.createElement(Button.Secondary, __spreadProps(__spreadValues({
           dense: true
-        }, action));
+        }, action), {
+          onClick: (e) => {
+            action.onClick();
+            e.stopPropagation();
+          }
+        }));
       }
       break;
     }
@@ -12120,7 +12141,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__ */ React69.createElement(React69.Fragment, null, "Group: ", /* @__PURE__ */ React69.createElement("b", null, key));
 var renderDefaultEmptyGroup = () => /* @__PURE__ */ React69.createElement(DataList.EmptyGroup, {
@@ -12130,11 +12151,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,
@@ -12152,16 +12175,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 = isFunction2(getGroupRow);
   if (!areRowsGrouped(groups)) {
     if (groups.length === 0 && groupKey && groupKey !== "undefined") {
-      return /* @__PURE__ */ React69.createElement(DataList.Row, null, selectable && /* @__PURE__ */ React69.createElement(DataList.Cell, null), /* @__PURE__ */ React69.createElement(DataList.Cell, {
+      return /* @__PURE__ */ React69.createElement(DataList.Row, {
+        isLast: isLastGroup
+      }, selectable && /* @__PURE__ */ React69.createElement(DataList.Cell, null), /* @__PURE__ */ React69.createElement(DataList.Cell, {
         style: { paddingLeft: `${2 + GAP + level * INDENTATION}px`, gridColumn: `${selectable ? 2 : 1} / -1` }
       }, /* @__PURE__ */ React69.createElement(Typography, {
         variant: "small",
@@ -12172,16 +12197,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__ */ React69.createElement(DataListRow, {
           key: row.id,
           columns,
           row,
           index,
+          isLast: isLastRow,
           rows,
-          active: selectable && isChecked,
+          active: selectable && isSelected,
           menu: /* @__PURE__ */ React69.createElement(DataListRowMenu, {
             row,
             index,
@@ -12191,9 +12218,10 @@ var DataListGroup = (_a) => {
             menuAriaLabel
           }),
           disabled,
+          selectionDisabled,
           rowClassName,
           additionalRowProps: () => selectable ? {
-            "aria-selected": isChecked
+            "aria-selected": isSelected
           } : {},
           additionalColumnProps: (_, columnIndex) => columnIndex === 0 ? {
             style: {
@@ -12201,13 +12229,20 @@ var DataListGroup = (_a) => {
             }
           } : {},
           renderFirstColumn: (row2, index2) => {
-            return /* @__PURE__ */ React69.createElement(React69.Fragment, null, selectable && /* @__PURE__ */ React69.createElement(DataList.Cell, null, /* @__PURE__ */ React69.createElement(Checkbox, {
-              "aria-label": getRowCheckboxLabel(row2, index2, isChecked, rows),
-              onChange: onSelectionChange(row2.id),
-              checked: isChecked,
+            return /* @__PURE__ */ React69.createElement(React69.Fragment, null, selectable && /* @__PURE__ */ React69.createElement(DataList.Cell, null, selectable === "single" && /* @__PURE__ */ React69.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__ */ React69.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
         });
       }
     });
@@ -12226,7 +12261,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;
@@ -12234,17 +12270,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__ */ React69.createElement(Accordion, {
         key,
         openPanelId
       }, hasCustomRowForGroup && /* @__PURE__ */ React69.createElement(DataList.Row, {
-        active: !!openPanelId || selectable && isChecked
-      }, selectable && /* @__PURE__ */ React69.createElement(DataList.Cell, null, /* @__PURE__ */ React69.createElement(Checkbox, {
+        active: isActiveRow,
+        isLast: isLastRow
+      }, selectable && /* @__PURE__ */ React69.createElement(DataList.Cell, null, selectable === "multiple" && /* @__PURE__ */ React69.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__ */ React69.createElement(List, {
         items: columns,
         renderItem: (column, idx) => /* @__PURE__ */ React69.createElement(DataList.Cell, __spreadProps(__spreadValues({}, cellProps(column)), {
@@ -12267,29 +12306,31 @@ var DataListGroup = (_a) => {
         onMenuOpenChange,
         menuAriaLabel
       })), !hasCustomRowForGroup && /* @__PURE__ */ React69.createElement(DataList.Row, {
-        active: !!openPanelId || selectable && isChecked
-      }, selectable && /* @__PURE__ */ React69.createElement(DataList.Cell, null, /* @__PURE__ */ React69.createElement(Checkbox, {
+        active: isActiveRow,
+        isLast: isLastRow
+      }, selectable === "multiple" && /* @__PURE__ */ React69.createElement(DataList.Cell, null, /* @__PURE__ */ React69.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__ */ React69.createElement(DataList.Cell, {
         className: tw("gap-3"),
         style: { paddingLeft: `${GAP + level * INDENTATION}px`, gridColumn: `${selectable ? 2 : 1} / -1` }
       }, /* @__PURE__ */ React69.createElement(Accordion.Toggle, {
         panelId: key,
         onChange: onGroupToggled
-      }), renderGroupName(key, group))), /* @__PURE__ */ React69.createElement(DataList.Row, {
-        subgroup: true
-      }, /* @__PURE__ */ React69.createElement(Accordion.UnanimatedPanel, {
+      }), renderGroupName(key, group))), /* @__PURE__ */ React69.createElement(Accordion.UnanimatedPanel, {
         panelId: key
+      }, /* @__PURE__ */ React69.createElement(DataList.Row, {
+        subgroup: true
       }, /* @__PURE__ */ React69.createElement(DataListGroup, __spreadProps(__spreadValues({
         key,
         groupKey: key,
         level: level + 1
       }, props), {
-        groups: group
+        groups: group,
+        isLastGroup: isLastGroup && index === groupKeys.length - 1
       })))));
     }
   });
@@ -12309,8 +12350,9 @@ var DataListSkeleton = ({ columns = ["1", "2", "2", 52], rows = 5 }) => {
     height: 17.5
   })))), /* @__PURE__ */ React70.createElement(List, {
     items: [...Array(rows).keys()],
-    renderItem: (item) => /* @__PURE__ */ React70.createElement(DataList.Row, {
-      key: item
+    renderItem: (item, index) => /* @__PURE__ */ React70.createElement(DataList.Row, {
+      key: item,
+      isLast: index === rows - 1
     }, /* @__PURE__ */ React70.createElement(List, {
       items: columnsAmount,
       renderItem: (key) => /* @__PURE__ */ React70.createElement(DataList.Cell, {
@@ -12375,13 +12417,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 = [],
@@ -12411,7 +12453,7 @@ var DataList2 = (_a) => {
     "onSortChanged",
     "selectable",
     "selectionDisabled",
-    "getRowCheckboxLabel",
+    "getRowSelectionLabel",
     "getGroupCheckboxLabel",
     "selectedRows",
     "defaultSelectedRows",
@@ -12427,6 +12469,15 @@ var DataList2 = (_a) => {
     defaultSelectedRows,
     (value) => onSelectionChange == null ? void 0 : onSelectionChange(value != null ? value : [])
   );
+  const [expandedGroupIds, setExpandedGroupIds] = 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 }));
@@ -12451,9 +12502,11 @@ var DataList2 = (_a) => {
     }, children)),
     []
   );
-  const handleSelectionChange = (id) => (e) => {
+  const getOnSelectionChangeForId = (id) => (e) => {
     const ids = castArray2(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)));
@@ -12476,7 +12529,7 @@ var DataList2 = (_a) => {
   }, selectable && /* @__PURE__ */ React72.createElement(DataList.HeadCell, {
     align: "left",
     sticky
-  }, /* @__PURE__ */ React72.createElement(Checkbox, {
+  }, selectable === "multiple" && /* @__PURE__ */ React72.createElement(Checkbox, {
     "aria-label": "Select all rows",
     indeterminate: totalSelected > 0 && totalSelected < allRows.length,
     checked: totalSelected > 0,
@@ -12537,29 +12590,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__ */ React72.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__ */ React72.createElement(DataListRow, {
         key: row.id,
         columns,
         row,
         index,
         rows: sortedRows,
-        active: selectable && isChecked,
+        active: selectable && isSelected,
+        isLast: isLastRow && !openPanelId,
         stickyStyles,
         menu: /* @__PURE__ */ React72.createElement(DataListRowMenu, {
           row,
@@ -12570,6 +12627,7 @@ var DataList2 = (_a) => {
           menuAriaLabel
         }),
         disabled,
+        selectionDisabled,
         rowClassName,
         additionalRowProps: (row2) => {
           var _a4;
@@ -12578,27 +12636,36 @@ var DataList2 = (_a) => {
           } : {};
         },
         renderFirstColumn: (row2, index2) => {
-          return /* @__PURE__ */ React72.createElement(React72.Fragment, null, selectable && /* @__PURE__ */ React72.createElement(DataList.Cell, null, /* @__PURE__ */ React72.createElement(Checkbox, {
-            "aria-label": getRowCheckboxLabel(row2, index2, isChecked, sortedRows),
-            onChange: handleSelectionChange(row2.id),
-            checked: isChecked,
+          return /* @__PURE__ */ React72.createElement(React72.Fragment, null, selectable && /* @__PURE__ */ React72.createElement(DataList.Cell, null, selectable === "single" && /* @__PURE__ */ React72.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__ */ React72.createElement(Checkbox, {
+            "aria-label": getRowSelectionLabel(row2, index2, isSelected, sortedRows),
+            onChange: getOnSelectionChangeForId(row2.id),
+            checked: isSelected,
             disabled: isDisabled || isSelectionDisabled
           })), rowDetails !== void 0 && /* @__PURE__ */ React72.createElement(DataList.Cell, null, details && /* @__PURE__ */ React72.createElement(Accordion.Toggle, {
             panelId: row2.id.toString(),
             onChange: onGroupToggled
           })));
-        }
+        },
+        onClick: selectable === "single" ? getOnSelectionChangeForId(row.id) : void 0
       });
       if (!details) {
         return content;
       }
       return /* @__PURE__ */ React72.createElement(Accordion, {
         key: row.id,
-        openPanelId: expandedGroupIds ? expandedGroupIds.find((id) => id === row.id) || null : void 0
+        openPanelId
       }, content, /* @__PURE__ */ React72.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__ */ React72.createElement("div", {
         role: "cell"