@aivenio/aquarium 2.2.0 → 2.3.1

package/dist/system.mjs

@@ -4260,6 +4260,7 @@ __export(molecules_exports, {
   InlineIcon: () => InlineIcon,
   Input: () => Input2,
   InputBase: () => InputBase,
+  ItemList: () => ItemList,
   LineClamp: () => LineClamp2,
   Link: () => Link2,
   List: () => List,
@@ -4324,13 +4325,16 @@ __export(molecules_exports, {
   asPopoverButton: () => asPopoverButton,
   asTabItem: () => asTabItem,
   cellProps: () => cellProps,
+  columnHasSort: () => columnHasSort,
   columnIsFieldColumn: () => columnIsFieldColumn,
   createTabsComponent: () => createTabsComponent,
   isOnSortChangedDirection: () => isOnSortChangedDirection,
+  sortByColumn: () => sortByColumn,
   toSortDirection: () => toSortDirection,
   usePagination: () => usePagination,
   usePopoverContext: () => usePopoverContext,
   useScrollTarget: () => useScrollTarget,
+  useSortState: () => useSortState,
   useStaticInfiniteList: () => useStaticInfiniteList,
   useTableSelect: () => useTableSelect,
   useTableSort: () => useTableSort,
@@ -11268,6 +11272,19 @@ var DataList = (_a) => {
   var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
   return /* @__PURE__ */ React63.createElement("div", __spreadValues({}, rest));
 };
+var TreeLine = (_a) => {
+  var _b = _a, { className, style, isLast } = _b, rest = __objRest(_b, ["className", "style", "isLast"]);
+  return /* @__PURE__ */ React63.createElement("div", __spreadProps(__spreadValues({}, rest), {
+    className: classNames(tw("flex justify-start h-full mx-4"), className)
+  }), /* @__PURE__ */ React63.createElement("div", {
+    className: tw("border-l border-default border-dashed flex-1", {
+      "h-full": !isLast,
+      "h-1/2": Boolean(isLast)
+    })
+  }), /* @__PURE__ */ React63.createElement("div", {
+    className: tw("border-t border-default border-dashed self-center w-[18px]")
+  }));
+};
 var HeadCell = (_a) => {
   var _b = _a, {
     className,
@@ -11317,22 +11334,22 @@ var Row = (_a) => {
     className,
     disabled,
     header,
-    subgroup,
+    isGroup,
     active,
-    isLast
+    noDivider
   } = _b, rest = __objRest(_b, [
     "className",
     "disabled",
     "header",
-    "subgroup",
+    "isGroup",
     "active",
-    "isLast"
+    "noDivider"
   ]);
   return /* @__PURE__ */ React63.createElement("div", __spreadProps(__spreadValues(__spreadProps(__spreadValues({}, rest), {
-    role: subgroup ? "rowgroup" : "row"
+    role: isGroup ? "rowgroup" : "row"
   }), { inert: disabled ? "" : void 0 }), {
     className: classNames(tw("contents"), className, {
-      "[&>*]:border-b-transparent": isLast,
+      "[&>*]:border-b-transparent": noDivider,
       "children:opacity-70": disabled,
       "[&>*]:bg-primary-active": active,
       "[&>*]:hover:bg-muted": !disabled && !header
@@ -11388,6 +11405,8 @@ DataList.SubGroupSpacing = SubGroupSpacing;
 DataList.SubGroupSpacing.displayName = "DataList.SubGroupSpacing";
 DataList.Row = Row;
 DataList.Row.displayName = "DataList.Row";
+DataList.TreeLine = TreeLine;
+DataList.TreeLine.displayName = "DataList.TreeLine";
 var ToolbarContainer = (_a) => {
   var _b = _a, { className, sticky = true } = _b, rest = __objRest(_b, ["className", "sticky"]);
   return /* @__PURE__ */ React63.createElement("div", __spreadProps(__spreadValues({}, rest), {
@@ -11534,6 +11553,7 @@ var cellProps = (column) => {
   var _a;
   let align;
   switch (column.type) {
+    case "menu":
     case "action":
     case "number": {
       align = "right";
@@ -11553,6 +11573,7 @@ var cellProps = (column) => {
     stickyColumn: column.sticky
   };
 };
+var columnHasSort = (column) => columnIsFieldColumn(column) && column.sortable || Boolean(column.sort);
 var columnIsFieldColumn = (column) => Boolean(column && column.field);
 function isOnSortChangedDirection(value) {
   return value === void 0 || ["ascending", "descending"].includes(value);
@@ -11560,11 +11581,7 @@ function isOnSortChangedDirection(value) {
 
 // src/utils/table/useTableSort.tsx
 import React65 from "react";
-var useTableSort = ({
-  column,
-  direction,
-  onSortChanged
-} = {}) => {
+var useTableSort = ({ column, direction, onSortChanged } = {}) => {
   const defaultSort = column ? { column, direction } : void 0;
   const [sort, setSort] = React65.useState(defaultSort);
   const setSortAndEmitOnSortChangedEvent = (sort2) => {
@@ -11594,7 +11611,7 @@ var useTableSort = ({
 // src/utils/table/utils.ts
 import orderBy2 from "lodash/orderBy";
 var sortRowsBy = (rows, sort) => {
-  if (!sort) {
+  if (!sort || !columnHasSort(sort.column)) {
     return rows;
   }
   const sortFunction = sort.column.sort;
@@ -12059,7 +12076,7 @@ var DataListRow = ({
     key: row.id,
     disabled: isRowDisabled,
     active,
-    isLast
+    noDivider: isLast
   }, resolvedAdditionalRowProps), {
     style,
     onClick: isRowClickable ? onClick : void 0
@@ -12126,6 +12143,21 @@ var DataListCell = ({
       }
       break;
     }
+    case "menu": {
+      const menuContent = column.menu(row, index);
+      if (!menuContent) {
+        cellContent = null;
+      } else {
+        cellContent = /* @__PURE__ */ React68.createElement(DropdownMenu2, {
+          placement: defaultContextualMenuPlacement,
+          onAction: (action) => column.onAction(action, row, index)
+        }, /* @__PURE__ */ React68.createElement(DropdownMenu2.Trigger, null, /* @__PURE__ */ React68.createElement(Button.Icon, {
+          "aria-label": "action",
+          icon: import_more2.default
+        })), menuContent);
+      }
+      break;
+    }
     default:
       if (column.formatter) {
         cellContent = column.formatter(row[column.field], row, index, rows);
@@ -12206,14 +12238,18 @@ var DataListGroup = (_a) => {
   const hasCustomRowForGroup = isFunction2(getGroupRow);
   if (!areRowsGrouped(groups)) {
     if (groups.length === 0 && groupKey && groupKey !== "undefined") {
+      const emptyGroupContent = renderEmptyGroup(groupKey);
+      if (!emptyGroupContent) {
+        return null;
+      }
       return /* @__PURE__ */ React69.createElement(DataList.Row, {
-        isLast: isLastGroup
+        noDivider: 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",
         color: "muted"
-      }, renderEmptyGroup(groupKey))));
+      }, emptyGroupContent)));
     }
     return /* @__PURE__ */ React69.createElement(List, {
       items: groups,
@@ -12299,7 +12335,7 @@ var DataListGroup = (_a) => {
         openPanelId
       }, hasCustomRowForGroup && /* @__PURE__ */ React69.createElement(DataList.Row, {
         active: isActiveRow,
-        isLast: isLastRow
+        noDivider: isLastRow
       }, selectable && /* @__PURE__ */ React69.createElement(DataList.Cell, null, selectable === "multiple" && /* @__PURE__ */ React69.createElement(Checkbox, {
         "aria-label": getGroupCheckboxLabel(key, group, index, isChecked, rows),
         checked: isChecked,
@@ -12329,7 +12365,7 @@ var DataListGroup = (_a) => {
         menuAriaLabel
       })), !hasCustomRowForGroup && /* @__PURE__ */ React69.createElement(DataList.Row, {
         active: isActiveRow,
-        isLast: isLastRow
+        noDivider: isLastRow
       }, selectable === "multiple" && /* @__PURE__ */ React69.createElement(DataList.Cell, null, /* @__PURE__ */ React69.createElement(Checkbox, {
         "aria-label": getGroupCheckboxLabel(key, group, index, isChecked, rows),
         checked: isChecked,
@@ -12345,7 +12381,7 @@ var DataListGroup = (_a) => {
       }), renderGroupName(key, group))), /* @__PURE__ */ React69.createElement(Accordion.UnanimatedPanel, {
         panelId: key
       }, /* @__PURE__ */ React69.createElement(DataList.Row, {
-        subgroup: true
+        isGroup: true
       }, /* @__PURE__ */ React69.createElement(DataListGroup, __spreadProps(__spreadValues({
         key,
         groupKey: key,
@@ -12374,7 +12410,7 @@ var DataListSkeleton = ({ columns = ["1", "2", "2", 52], rows = 5 }) => {
     items: [...Array(rows).keys()],
     renderItem: (item, index) => /* @__PURE__ */ React70.createElement(DataList.Row, {
       key: item,
-      isLast: index === rows - 1
+      noDivider: index === rows - 1
     }, /* @__PURE__ */ React70.createElement(List, {
       items: columnsAmount,
       renderItem: (key) => /* @__PURE__ */ React70.createElement(DataList.Cell, {
@@ -12580,7 +12616,7 @@ var DataList2 = (_a) => {
       color: "default",
       "aria-hidden": true
     }), content) : content;
-    const cell2 = columnIsFieldColumn(column) && column.sortable || column.sort ? /* @__PURE__ */ React72.createElement(DataList.SortCell, __spreadValues({
+    const cell2 = columnHasSort(column) ? /* @__PURE__ */ React72.createElement(DataList.SortCell, __spreadValues({
       direction: sort && sort.column.headerName === column.headerName ? sort.direction : "none",
       onClick: () => updateSort(column),
       sticky
@@ -12844,7 +12880,7 @@ var DataTable = (_a) => {
         color: "default",
         "aria-hidden": true
       }), content) : content;
-      const cell2 = columnIsFieldColumn(column) && column.sortable || column.sort ? /* @__PURE__ */ React75.createElement(Table2.SortCell, __spreadValues({
+      const cell2 = columnHasSort(column) ? /* @__PURE__ */ React75.createElement(Table2.SortCell, __spreadValues({
         direction: sort && sort.column.headerName === column.headerName ? sort.direction : "none",
         onClick: () => updateSort(column),
         style: { width: column.width },
@@ -15480,6 +15516,12 @@ var CommonPageHeader = ({
   isSubHeader = false
 }) => {
   var _a, _b;
+  const actions = [primaryAction, ...castArray6(secondaryActions)].filter(Boolean);
+  if (actions.length > 2) {
+    throw new Error(
+      "Limit the combined `primaryAction` and `secondaryActions` to 2 actions. Use the `menu` prop for additional actions."
+    );
+  }
   return /* @__PURE__ */ React110.createElement(PageHeader, {
     className: "Aquarium-PageHeader"
   }, /* @__PURE__ */ React110.createElement(PageHeader.Container, null, breadcrumbs && /* @__PURE__ */ React110.createElement(Box, {
@@ -16539,10 +16581,33 @@ Timeline2.Skeleton.displayName = "Timeline.Skeleton";
 import React129 from "react";
 var TimePicker = (props) => /* @__PURE__ */ React129.createElement(TimeField, __spreadValues({}, props));
 
-// src/utils/table/useTableSelect.ts
+// src/utils/table/sortByColumn.ts
+var sortByColumn = (items, column, sortState) => {
+  const sortedColumn = column.find((column2) => column2.headerName === (sortState == null ? void 0 : sortState.headerName));
+  if (sortState && sortedColumn && columnHasSort(sortedColumn)) {
+    const sortFunction = sortedColumn.sort;
+    if (sortFunction) {
+      const ascending = [...items].sort((a, b) => sortFunction(a, b, sortState.direction));
+      if (sortState.direction === "descending") {
+        return ascending.reverse();
+      } else {
+        return ascending;
+      }
+    }
+    return items;
+  } else {
+    return items;
+  }
+};
+
+// src/utils/table/useSortState.ts
 import React130 from "react";
+var useSortState = (initialSortState) => React130.useState(initialSortState);
+
+// src/utils/table/useTableSelect.ts
+import React131 from "react";
 var useTableSelect = (data, { key }) => {
-  const [selected, setSelected] = React130.useState([]);
+  const [selected, setSelected] = React131.useState([]);
   const allSelected = selected.length === data.length;
   const isSelected = (dot) => selected.includes(dot[key]);
   const selectAll = () => setSelected(data.map((dot) => dot[key]));
@@ -16566,6 +16631,92 @@ var useTableSelect = (data, { key }) => {
   };
 };
 
+// src/molecules/ItemList/ItemList.tsx
+import React132 from "react";
+var ItemList = (_a) => {
+  var _b = _a, {
+    columns,
+    items,
+    onSortChanged,
+    sticky
+  } = _b, infiniteProps = __objRest(_b, [
+    "columns",
+    "items",
+    "onSortChanged",
+    "sticky"
+  ]);
+  const templateColumns = columns.map((column) => {
+    var _a2;
+    return (_a2 = column.width) != null ? _a2 : "auto";
+  });
+  const [sortState, setSortState] = useSortState();
+  const sortedItems = onSortChanged ? items : sortByColumn(items, columns, sortState);
+  return /* @__PURE__ */ React132.createElement(Template, {
+    className: "Aquarium-ItemList",
+    columns: templateColumns,
+    role: "table"
+  }, /* @__PURE__ */ React132.createElement(DataList.Row, {
+    header: true
+  }, columns.map((column) => {
+    if (columnHasSort(column)) {
+      return /* @__PURE__ */ React132.createElement(DataList.SortCell, __spreadValues({
+        sticky,
+        direction: (sortState == null ? void 0 : sortState.headerName) === column.headerName ? sortState.direction : "none",
+        onClick: () => {
+          const newState = sortState && sortState.headerName === column.headerName ? sortState.direction === "ascending" ? { headerName: column.headerName, direction: "descending" } : void 0 : { headerName: column.headerName, direction: "ascending" };
+          setSortState(newState);
+          onSortChanged == null ? void 0 : onSortChanged(newState);
+        }
+      }, cellProps(column)), column.headerName);
+    }
+    return /* @__PURE__ */ React132.createElement(DataList.HeadCell, __spreadProps(__spreadValues({}, cellProps(column)), {
+      sticky
+    }), column.headerName);
+  })), /* @__PURE__ */ React132.createElement(Rows, __spreadValues({
+    columns,
+    items: sortedItems,
+    level: 0
+  }, infiniteProps)));
+};
+var Rows = (_a) => {
+  var _b = _a, { columns, items, level, isLastGroup } = _b, infiniteProps = __objRest(_b, ["columns", "items", "level", "isLastGroup"]);
+  return /* @__PURE__ */ React132.createElement(List, __spreadProps(__spreadValues({}, level === 0 ? infiniteProps : {}), {
+    items,
+    renderItem: (item, itemIndex) => {
+      const hasSubItems = item.items && item.items.length > 0;
+      const isLastItem = itemIndex === items.length - 1;
+      const noDivider = level === 0 && isLastItem || level > 0 && (isLastGroup || !isLastItem) || hasSubItems;
+      return /* @__PURE__ */ React132.createElement(React132.Fragment, {
+        key: item.id
+      }, /* @__PURE__ */ React132.createElement(DataList.Row, {
+        noDivider
+      }, /* @__PURE__ */ React132.createElement(List, {
+        items: columns,
+        renderItem: (column, columnIndex) => /* @__PURE__ */ React132.createElement(DataList.Cell, __spreadProps(__spreadValues({}, cellProps(column)), {
+          style: level > 1 && columnIndex === 0 ? { paddingLeft: (level - 1) * 60 } : void 0
+        }), level > 0 && columnIndex === 0 && /* @__PURE__ */ React132.createElement(DataList.TreeLine, {
+          isLast: itemIndex === items.length - 1
+        }), /* @__PURE__ */ React132.createElement(DataListCell, {
+          column,
+          row: item,
+          index: columnIndex,
+          rows: items
+        }))
+      })), item.items && /* @__PURE__ */ React132.createElement(WithGroup, {
+        level
+      }, /* @__PURE__ */ React132.createElement(Rows, {
+        columns,
+        items: item.items,
+        level: level + 1,
+        isLastGroup: level === 0 && itemIndex === items.length - 1 || isLastGroup
+      })));
+    }
+  }));
+};
+var WithGroup = ({ level, children }) => level === 0 ? /* @__PURE__ */ React132.createElement(DataList.Row, {
+  isGroup: true
+}, children) : children;
+
 // src/molecules/index.ts
 var SelectItem = Select.Item;
 
@@ -16741,6 +16892,7 @@ export {
   InlineIcon,
   Input2 as Input,
   InputBase,
+  ItemList,
   Label2 as Label,
   LabelControl,
   LineClamp2 as LineClamp,
@@ -16818,6 +16970,7 @@ export {
   calcTopPosition,
   calcTopRightPosition,
   cellProps,
+  columnHasSort,
   columnIsFieldColumn,
   createComponent,
   createMountPointElement,
@@ -16828,10 +16981,12 @@ export {
   isOnSortChangedDirection,
   isOutOfBounds,
   placementOrder,
+  sortByColumn,
   toSortDirection,
   usePagination,
   usePopoverContext,
   useScrollTarget,
+  useSortState,
   useStaticInfiniteList,
   useTableSelect,
   useTableSort,