@aivenio/aquarium 2.2.0 → 2.3.1

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { isOnSortChangedDirection, } from '../../../src/utils/table/types';
-export const useTableSort = ({ column, direction, onSortChanged, } = {}) => {
+export const useTableSort = ({ column, direction, onSortChanged } = {}) => {
     const defaultSort = column ? { column, direction } : undefined;
     const [sort, setSort] = React.useState(defaultSort);
     const setSortAndEmitOnSortChangedEvent = (sort) => {
@@ -29,4 +29,4 @@ export const useTableSort = ({ column, direction, onSortChanged, } = {}) => {
     };
     return [sort, handleSortClick];
 };
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidXNlVGFibGVTb3J0LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vc3JjL3V0aWxzL3RhYmxlL3VzZVRhYmxlU29ydC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxLQUFLLE1BQU0sT0FBTyxDQUFDO0FBRTFCLE9BQU8sRUFJTCx3QkFBd0IsR0FHekIsTUFBTSx1QkFBdUIsQ0FBQztBQWlCL0IsTUFBTSxDQUFDLE1BQU0sWUFBWSxHQUFHLENBQTJFLEVBQ3JHLE1BQU0sRUFDTixTQUFTLEVBQ1QsYUFBYSxNQUNnQixFQUFFLEVBQThDLEVBQUU7SUFDL0UsTUFBTSxXQUFXLEdBQUcsTUFBTSxDQUFDLENBQUMsQ0FBQyxFQUFFLE1BQU0sRUFBRSxTQUFTLEVBQUUsQ0FBQyxDQUFDLENBQUMsU0FBUyxDQUFDO0lBQy9ELE1BQU0sQ0FBQyxJQUFJLEVBQUUsT0FBTyxDQUFDLEdBQUcsS0FBSyxDQUFDLFFBQVEsQ0FBc0IsV0FBVyxDQUFDLENBQUM7SUFDekUsTUFBTSxnQ0FBZ0MsR0FBRyxDQUFDLElBQXlCLEVBQUUsRUFBRTtRQUNyRSxPQUFPLENBQUMsSUFBSSxDQUFDLENBQUM7UUFDZCxJQUFJLGFBQWEsRUFBRSxDQUFDO1lBQ2xCLElBQUksSUFBSSxJQUFJLHdCQUF3QixDQUFDLElBQUksQ0FBQyxTQUFTLENBQUMsRUFBRSxDQUFDO2dCQUNyRCxhQUFhLENBQUMsRUFBRSxHQUFHLEVBQUUsSUFBSSxDQUFDLE1BQU0sQ0FBQyxHQUFHLEVBQUUsU0FBUyxFQUFFLElBQUksQ0FBQyxTQUFTLEVBQUUsQ0FBQyxDQUFDO1lBQ3JFLENBQUM7aUJBQU0sQ0FBQztnQkFDTixhQUFhLENBQUMsSUFBSSxDQUFDLENBQUM7WUFDdEIsQ0FBQztRQUNILENBQUM7SUFDSCxDQUFDLENBQUM7SUFDRixNQUFNLGVBQWUsR0FBRyxDQUFDLE1BQVMsRUFBRSxFQUFFO1FBQ3BDLElBQUksSUFBSSxJQUFJLElBQUksQ0FBQyxNQUFNLENBQUMsVUFBVSxLQUFLLE1BQU0sQ0FBQyxVQUFVLEVBQUUsQ0FBQztZQUN6RCxJQUFJLElBQUksQ0FBQyxTQUFTLEtBQUssV0FBVyxFQUFFLENBQUM7Z0JBQ25DLGdDQUFnQyxDQUFDLEVBQUUsTUFBTSxFQUFFLFNBQVMsRUFBRSxZQUFZLEVBQUUsQ0FBQyxDQUFDO1lBQ3hFLENBQUM7aUJBQU0sQ0FBQztnQkFDTixnQ0FBZ0MsQ0FBQyxTQUFTLENBQUMsQ0FBQztZQUM5QyxDQUFDO1FBQ0gsQ0FBQzthQUFNLENBQUM7WUFDTixnQ0FBZ0MsQ0FBQyxFQUFFLE1BQU0sRUFBRSxTQUFTLEVBQUUsV0FBVyxFQUFFLENBQUMsQ0FBQztRQUN2RSxDQUFDO0lBQ0gsQ0FBQyxDQUFDO0lBRUYsT0FBTyxDQUFDLElBQUksRUFBRSxlQUFlLENBQUMsQ0FBQztBQUNqQyxDQUFDLENBQUMifQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidXNlVGFibGVTb3J0LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vc3JjL3V0aWxzL3RhYmxlL3VzZVRhYmxlU29ydC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxLQUFLLE1BQU0sT0FBTyxDQUFDO0FBRTFCLE9BQU8sRUFJTCx3QkFBd0IsR0FJekIsTUFBTSx1QkFBdUIsQ0FBQztBQWtCL0IsTUFBTSxDQUFDLE1BQU0sWUFBWSxHQUFHLENBRzFCLEVBQUUsTUFBTSxFQUFFLFNBQVMsRUFBRSxhQUFhLEtBQWdDLEVBQUUsRUFBOEMsRUFBRTtJQUNwSCxNQUFNLFdBQVcsR0FBRyxNQUFNLENBQUMsQ0FBQyxDQUFDLEVBQUUsTUFBTSxFQUFFLFNBQVMsRUFBRSxDQUFDLENBQUMsQ0FBQyxTQUFTLENBQUM7SUFDL0QsTUFBTSxDQUFDLElBQUksRUFBRSxPQUFPLENBQUMsR0FBRyxLQUFLLENBQUMsUUFBUSxDQUFzQixXQUFXLENBQUMsQ0FBQztJQUN6RSxNQUFNLGdDQUFnQyxHQUFHLENBQUMsSUFBeUIsRUFBRSxFQUFFO1FBQ3JFLE9BQU8sQ0FBQyxJQUFJLENBQUMsQ0FBQztRQUNkLElBQUksYUFBYSxFQUFFLENBQUM7WUFDbEIsSUFBSSxJQUFJLElBQUksd0JBQXdCLENBQUMsSUFBSSxDQUFDLFNBQVMsQ0FBQyxFQUFFLENBQUM7Z0JBQ3JELGFBQWEsQ0FBQyxFQUFFLEdBQUcsRUFBRSxJQUFJLENBQUMsTUFBTSxDQUFDLEdBQUcsRUFBRSxTQUFTLEVBQUUsSUFBSSxDQUFDLFNBQVMsRUFBRSxDQUFDLENBQUM7WUFDckUsQ0FBQztpQkFBTSxDQUFDO2dCQUNOLGFBQWEsQ0FBQyxJQUFJLENBQUMsQ0FBQztZQUN0QixDQUFDO1FBQ0gsQ0FBQztJQUNILENBQUMsQ0FBQztJQUNGLE1BQU0sZUFBZSxHQUFHLENBQUMsTUFBUyxFQUFFLEVBQUU7UUFDcEMsSUFBSSxJQUFJLElBQUksSUFBSSxDQUFDLE1BQU0sQ0FBQyxVQUFVLEtBQUssTUFBTSxDQUFDLFVBQVUsRUFBRSxDQUFDO1lBQ3pELElBQUksSUFBSSxDQUFDLFNBQVMsS0FBSyxXQUFXLEVBQUUsQ0FBQztnQkFDbkMsZ0NBQWdDLENBQUMsRUFBRSxNQUFNLEVBQUUsU0FBUyxFQUFFLFlBQVksRUFBRSxDQUFDLENBQUM7WUFDeEUsQ0FBQztpQkFBTSxDQUFDO2dCQUNOLGdDQUFnQyxDQUFDLFNBQVMsQ0FBQyxDQUFDO1lBQzlDLENBQUM7UUFDSCxDQUFDO2FBQU0sQ0FBQztZQUNOLGdDQUFnQyxDQUFDLEVBQUUsTUFBTSxFQUFFLFNBQVMsRUFBRSxXQUFXLEVBQUUsQ0FBQyxDQUFDO1FBQ3ZFLENBQUM7SUFDSCxDQUFDLENBQUM7SUFFRixPQUFPLENBQUMsSUFBSSxFQUFFLGVBQWUsQ0FBQyxDQUFDO0FBQ2pDLENBQUMsQ0FBQyJ9

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

@@ -1,2 +1,2 @@
-import { type DataListColumn, type DataTableColumn, type DataTableRow, type Sort } from '../../../src/utils/table/types';
-export declare const sortRowsBy: <C extends DataListColumn<R> | DataTableColumn<R>, R extends DataTableRow>(rows: R[], sort: Sort<C> | undefined) => R[];
+import { type DataListColumn, type DataTableColumn, type DataTableRow, type ItemListColumn, type Sort } from '../../../src/utils/table/types';
+export declare const sortRowsBy: <C extends DataListColumn<R> | DataTableColumn<R> | ItemListColumn<R>, R extends DataTableRow>(rows: R[], sort: Sort<C> | undefined) => R[];

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

@@ -1,7 +1,7 @@
 import orderBy from 'lodash/orderBy';
-import { columnIsFieldColumn, toSortDirection, } from '../../../src/utils/table/types';
+import { columnHasSort, columnIsFieldColumn, toSortDirection, } from '../../../src/utils/table/types';
 export const sortRowsBy = (rows, sort) => {
-    if (!sort) {
+    if (!sort || !columnHasSort(sort.column)) {
         return rows;
     }
     const sortFunction = sort.column.sort;
@@ -13,4 +13,4 @@ export const sortRowsBy = (rows, sort) => {
     }
     return rows;
 };
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidXRpbHMuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9zcmMvdXRpbHMvdGFibGUvdXRpbHMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxPQUFPLE1BQU0sZ0JBQWdCLENBQUM7QUFFckMsT0FBTyxFQUNMLG1CQUFtQixFQUtuQixlQUFlLEdBQ2hCLE1BQU0sdUJBQXVCLENBQUM7QUFFL0IsTUFBTSxDQUFDLE1BQU0sVUFBVSxHQUFHLENBQ3hCLElBQVMsRUFDVCxJQUF5QixFQUN6QixFQUFFO0lBQ0YsSUFBSSxDQUFDLElBQUksRUFBRSxDQUFDO1FBQ1YsT0FBTyxJQUFJLENBQUM7SUFDZCxDQUFDO0lBQ0QsTUFBTSxZQUFZLEdBQUcsSUFBSSxDQUFDLE1BQU0sQ0FBQyxJQUFJLENBQUM7SUFFdEMsSUFBSSxZQUFZLEVBQUUsQ0FBQztRQUNqQixPQUFPLENBQUMsR0FBRyxJQUFJLENBQUMsQ0FBQyxJQUFJLENBQUMsQ0FBQyxDQUFDLEVBQUUsQ0FBQyxFQUFFLEVBQUUsQ0FBQyxZQUFZLENBQUMsQ0FBQyxFQUFFLENBQUMsRUFBRSxJQUFJLENBQUMsU0FBUyxDQUFDLENBQUMsQ0FBQztJQUN0RSxDQUFDO1NBQU0sSUFBSSxtQkFBbUIsQ0FBQyxJQUFJLENBQUMsTUFBTSxDQUFDLEVBQUUsQ0FBQztRQUM1QyxPQUFPLE9BQU8sQ0FBQyxJQUFJLEVBQUUsQ0FBQyxJQUFJLENBQUMsTUFBTSxDQUFDLEtBQUssQ0FBQyxFQUFFLENBQUMsZUFBZSxDQUFDLElBQUksQ0FBQyxTQUFTLENBQUMsQ0FBQyxDQUFDLENBQUM7SUFDL0UsQ0FBQztJQUNELE9BQU8sSUFBSSxDQUFDO0FBQ2QsQ0FBQyxDQUFDIn0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidXRpbHMuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9zcmMvdXRpbHMvdGFibGUvdXRpbHMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxPQUFPLE1BQU0sZ0JBQWdCLENBQUM7QUFFckMsT0FBTyxFQUNMLGFBQWEsRUFDYixtQkFBbUIsRUFNbkIsZUFBZSxHQUNoQixNQUFNLHVCQUF1QixDQUFDO0FBRS9CLE1BQU0sQ0FBQyxNQUFNLFVBQVUsR0FBRyxDQUl4QixJQUFTLEVBQ1QsSUFBeUIsRUFDekIsRUFBRTtJQUNGLElBQUksQ0FBQyxJQUFJLElBQUksQ0FBQyxhQUFhLENBQUMsSUFBSSxDQUFDLE1BQU0sQ0FBQyxFQUFFLENBQUM7UUFDekMsT0FBTyxJQUFJLENBQUM7SUFDZCxDQUFDO0lBQ0QsTUFBTSxZQUFZLEdBQUcsSUFBSSxDQUFDLE1BQU0sQ0FBQyxJQUFJLENBQUM7SUFFdEMsSUFBSSxZQUFZLEVBQUUsQ0FBQztRQUNqQixPQUFPLENBQUMsR0FBRyxJQUFJLENBQUMsQ0FBQyxJQUFJLENBQUMsQ0FBQyxDQUFDLEVBQUUsQ0FBQyxFQUFFLEVBQUUsQ0FBQyxZQUFZLENBQUMsQ0FBQyxFQUFFLENBQUMsRUFBRSxJQUFJLENBQUMsU0FBUyxDQUFDLENBQUMsQ0FBQztJQUN0RSxDQUFDO1NBQU0sSUFBSSxtQkFBbUIsQ0FBQyxJQUFJLENBQUMsTUFBTSxDQUFDLEVBQUUsQ0FBQztRQUM1QyxPQUFPLE9BQU8sQ0FBQyxJQUFJLEVBQUUsQ0FBQyxJQUFJLENBQUMsTUFBTSxDQUFDLEtBQUssQ0FBQyxFQUFFLENBQUMsZUFBZSxDQUFDLElBQUksQ0FBQyxTQUFTLENBQUMsQ0FBQyxDQUFDLENBQUM7SUFDL0UsQ0FBQztJQUNELE9BQU8sSUFBSSxDQUFDO0FBQ2QsQ0FBQyxDQUFDIn0=

package/dist/styles.css

@@ -1053,6 +1053,10 @@ input[type='number'].no-arrows {
   margin-left: 8px;
   margin-right: 8px;
 }
+.mx-4{
+  margin-left: 12px;
+  margin-right: 12px;
+}
 .mx-7{
   margin-left: 32px;
   margin-right: 32px;
@@ -1194,6 +1198,9 @@ input[type='number'].no-arrows {
 .h-1{
   height: 2px;
 }
+.h-1\/2{
+  height: 50%;
+}
 .h-1px{
   height: 1px;
 }
@@ -1311,6 +1318,9 @@ input[type='number'].no-arrows {
 .w-\[1080px\]{
   width: 1080px;
 }
+.w-\[18px\]{
+  width: 18px;
+}
 .w-\[280px\]{
   width: 280px;
 }
@@ -1710,10 +1720,18 @@ input[type='number'].no-arrows {
   border-bottom-width: 2px;
   border-bottom-width: var(--aquarium-border-width-2);
 }
+.border-l{
+  border-left-width: 1px;
+  border-left-width: var(--aquarium-border-width-default);
+}
 .border-r-1{
   border-right-width: 1px;
   border-right-width: var(--aquarium-border-width-1);
 }
+.border-t{
+  border-top-width: 1px;
+  border-top-width: var(--aquarium-border-width-default);
+}
 .border-t-2{
   border-top-width: 2px;
   border-top-width: var(--aquarium-border-width-2);

package/dist/system.cjs

@@ -4265,6 +4265,7 @@ __export(system_exports, {
   InlineIcon: () => InlineIcon,
   Input: () => Input2,
   InputBase: () => InputBase,
+  ItemList: () => ItemList,
   Label: () => Label2,
   LabelControl: () => LabelControl,
   LineClamp: () => LineClamp2,
@@ -4342,6 +4343,7 @@ __export(system_exports, {
   calcTopPosition: () => calcTopPosition,
   calcTopRightPosition: () => calcTopRightPosition,
   cellProps: () => cellProps,
+  columnHasSort: () => columnHasSort,
   columnIsFieldColumn: () => columnIsFieldColumn,
   createComponent: () => createComponent,
   createMountPointElement: () => createMountPointElement,
@@ -4352,10 +4354,12 @@ __export(system_exports, {
   isOnSortChangedDirection: () => isOnSortChangedDirection,
   isOutOfBounds: () => isOutOfBounds,
   placementOrder: () => placementOrder,
+  sortByColumn: () => sortByColumn,
   toSortDirection: () => toSortDirection,
   usePagination: () => usePagination,
   usePopoverContext: () => usePopoverContext,
   useScrollTarget: () => useScrollTarget,
+  useSortState: () => useSortState,
   useStaticInfiniteList: () => useStaticInfiniteList,
   useTableSelect: () => useTableSelect,
   useTableSort: () => useTableSort,
@@ -4422,6 +4426,7 @@ __export(molecules_exports, {
   InlineIcon: () => InlineIcon,
   Input: () => Input2,
   InputBase: () => InputBase,
+  ItemList: () => ItemList,
   LineClamp: () => LineClamp2,
   Link: () => Link2,
   List: () => List,
@@ -4486,13 +4491,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,
@@ -11427,6 +11435,19 @@ var DataList = (_a) => {
   var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
   return /* @__PURE__ */ import_react70.default.createElement("div", __spreadValues({}, rest));
 };
+var TreeLine = (_a) => {
+  var _b = _a, { className, style, isLast } = _b, rest = __objRest(_b, ["className", "style", "isLast"]);
+  return /* @__PURE__ */ import_react70.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
+    className: classNames(tw("flex justify-start h-full mx-4"), className)
+  }), /* @__PURE__ */ import_react70.default.createElement("div", {
+    className: tw("border-l border-default border-dashed flex-1", {
+      "h-full": !isLast,
+      "h-1/2": Boolean(isLast)
+    })
+  }), /* @__PURE__ */ import_react70.default.createElement("div", {
+    className: tw("border-t border-default border-dashed self-center w-[18px]")
+  }));
+};
 var HeadCell = (_a) => {
   var _b = _a, {
     className,
@@ -11476,22 +11497,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__ */ import_react70.default.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
@@ -11547,6 +11568,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__ */ import_react70.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
@@ -11693,6 +11716,7 @@ var cellProps = (column) => {
   var _a;
   let align;
   switch (column.type) {
+    case "menu":
     case "action":
     case "number": {
       align = "right";
@@ -11712,6 +11736,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);
@@ -11719,11 +11744,7 @@ function isOnSortChangedDirection(value) {
 
 // src/utils/table/useTableSort.tsx
 var import_react72 = __toESM(require("react"));
-var useTableSort = ({
-  column,
-  direction,
-  onSortChanged
-} = {}) => {
+var useTableSort = ({ column, direction, onSortChanged } = {}) => {
   const defaultSort = column ? { column, direction } : void 0;
   const [sort, setSort] = import_react72.default.useState(defaultSort);
   const setSortAndEmitOnSortChangedEvent = (sort2) => {
@@ -11753,7 +11774,7 @@ var useTableSort = ({
 // src/utils/table/utils.ts
 var import_orderBy2 = __toESM(require("lodash/orderBy"));
 var sortRowsBy = (rows, sort) => {
-  if (!sort) {
+  if (!sort || !columnHasSort(sort.column)) {
     return rows;
   }
   const sortFunction = sort.column.sort;
@@ -12218,7 +12239,7 @@ var DataListRow = ({
     key: row.id,
     disabled: isRowDisabled,
     active,
-    isLast
+    noDivider: isLast
   }, resolvedAdditionalRowProps), {
     style,
     onClick: isRowClickable ? onClick : void 0
@@ -12285,6 +12306,21 @@ var DataListCell = ({
       }
       break;
     }
+    case "menu": {
+      const menuContent = column.menu(row, index);
+      if (!menuContent) {
+        cellContent = null;
+      } else {
+        cellContent = /* @__PURE__ */ import_react75.default.createElement(DropdownMenu2, {
+          placement: defaultContextualMenuPlacement,
+          onAction: (action) => column.onAction(action, row, index)
+        }, /* @__PURE__ */ import_react75.default.createElement(DropdownMenu2.Trigger, null, /* @__PURE__ */ import_react75.default.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);
@@ -12365,14 +12401,18 @@ var DataListGroup = (_a) => {
   const hasCustomRowForGroup = (0, import_isFunction2.default)(getGroupRow);
   if (!areRowsGrouped(groups)) {
     if (groups.length === 0 && groupKey && groupKey !== "undefined") {
+      const emptyGroupContent = renderEmptyGroup(groupKey);
+      if (!emptyGroupContent) {
+        return null;
+      }
       return /* @__PURE__ */ import_react77.default.createElement(DataList.Row, {
-        isLast: isLastGroup
+        noDivider: 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",
         color: "muted"
-      }, renderEmptyGroup(groupKey))));
+      }, emptyGroupContent)));
     }
     return /* @__PURE__ */ import_react77.default.createElement(List, {
       items: groups,
@@ -12458,7 +12498,7 @@ var DataListGroup = (_a) => {
         openPanelId
       }, hasCustomRowForGroup && /* @__PURE__ */ import_react77.default.createElement(DataList.Row, {
         active: isActiveRow,
-        isLast: isLastRow
+        noDivider: 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,
@@ -12488,7 +12528,7 @@ var DataListGroup = (_a) => {
         menuAriaLabel
       })), !hasCustomRowForGroup && /* @__PURE__ */ import_react77.default.createElement(DataList.Row, {
         active: isActiveRow,
-        isLast: isLastRow
+        noDivider: 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,
@@ -12504,7 +12544,7 @@ var DataListGroup = (_a) => {
       }), renderGroupName(key, group))), /* @__PURE__ */ import_react77.default.createElement(Accordion.UnanimatedPanel, {
         panelId: key
       }, /* @__PURE__ */ import_react77.default.createElement(DataList.Row, {
-        subgroup: true
+        isGroup: true
       }, /* @__PURE__ */ import_react77.default.createElement(DataListGroup, __spreadProps(__spreadValues({
         key,
         groupKey: key,
@@ -12533,7 +12573,7 @@ var DataListSkeleton = ({ columns = ["1", "2", "2", 52], rows = 5 }) => {
     items: [...Array(rows).keys()],
     renderItem: (item, index) => /* @__PURE__ */ import_react78.default.createElement(DataList.Row, {
       key: item,
-      isLast: index === rows - 1
+      noDivider: index === rows - 1
     }, /* @__PURE__ */ import_react78.default.createElement(List, {
       items: columnsAmount,
       renderItem: (key) => /* @__PURE__ */ import_react78.default.createElement(DataList.Cell, {
@@ -12739,7 +12779,7 @@ var DataList2 = (_a) => {
       color: "default",
       "aria-hidden": true
     }), content) : content;
-    const cell2 = columnIsFieldColumn(column) && column.sortable || column.sort ? /* @__PURE__ */ import_react80.default.createElement(DataList.SortCell, __spreadValues({
+    const cell2 = columnHasSort(column) ? /* @__PURE__ */ import_react80.default.createElement(DataList.SortCell, __spreadValues({
       direction: sort && sort.column.headerName === column.headerName ? sort.direction : "none",
       onClick: () => updateSort(column),
       sticky
@@ -13003,7 +13043,7 @@ var DataTable = (_a) => {
         color: "default",
         "aria-hidden": true
       }), content) : content;
-      const cell2 = columnIsFieldColumn(column) && column.sortable || column.sort ? /* @__PURE__ */ import_react83.default.createElement(Table2.SortCell, __spreadValues({
+      const cell2 = columnHasSort(column) ? /* @__PURE__ */ import_react83.default.createElement(Table2.SortCell, __spreadValues({
         direction: sort && sort.column.headerName === column.headerName ? sort.direction : "none",
         onClick: () => updateSort(column),
         style: { width: column.width },
@@ -15613,6 +15653,12 @@ var CommonPageHeader = ({
   isSubHeader = false
 }) => {
   var _a, _b;
+  const actions = [primaryAction, ...(0, import_castArray6.default)(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__ */ import_react119.default.createElement(PageHeader, {
     className: "Aquarium-PageHeader"
   }, /* @__PURE__ */ import_react119.default.createElement(PageHeader.Container, null, breadcrumbs && /* @__PURE__ */ import_react119.default.createElement(Box, {
@@ -16672,10 +16718,33 @@ Timeline2.Skeleton.displayName = "Timeline.Skeleton";
 var import_react138 = __toESM(require("react"));
 var TimePicker = (props) => /* @__PURE__ */ import_react138.default.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
 var import_react139 = __toESM(require("react"));
+var useSortState = (initialSortState) => import_react139.default.useState(initialSortState);
+
+// src/utils/table/useTableSelect.ts
+var import_react140 = __toESM(require("react"));
 var useTableSelect = (data, { key }) => {
-  const [selected, setSelected] = import_react139.default.useState([]);
+  const [selected, setSelected] = import_react140.default.useState([]);
   const allSelected = selected.length === data.length;
   const isSelected = (dot) => selected.includes(dot[key]);
   const selectAll = () => setSelected(data.map((dot) => dot[key]));
@@ -16699,6 +16768,92 @@ var useTableSelect = (data, { key }) => {
   };
 };
 
+// src/molecules/ItemList/ItemList.tsx
+var import_react141 = __toESM(require("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__ */ import_react141.default.createElement(Template, {
+    className: "Aquarium-ItemList",
+    columns: templateColumns,
+    role: "table"
+  }, /* @__PURE__ */ import_react141.default.createElement(DataList.Row, {
+    header: true
+  }, columns.map((column) => {
+    if (columnHasSort(column)) {
+      return /* @__PURE__ */ import_react141.default.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__ */ import_react141.default.createElement(DataList.HeadCell, __spreadProps(__spreadValues({}, cellProps(column)), {
+      sticky
+    }), column.headerName);
+  })), /* @__PURE__ */ import_react141.default.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__ */ import_react141.default.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__ */ import_react141.default.createElement(import_react141.default.Fragment, {
+        key: item.id
+      }, /* @__PURE__ */ import_react141.default.createElement(DataList.Row, {
+        noDivider
+      }, /* @__PURE__ */ import_react141.default.createElement(List, {
+        items: columns,
+        renderItem: (column, columnIndex) => /* @__PURE__ */ import_react141.default.createElement(DataList.Cell, __spreadProps(__spreadValues({}, cellProps(column)), {
+          style: level > 1 && columnIndex === 0 ? { paddingLeft: (level - 1) * 60 } : void 0
+        }), level > 0 && columnIndex === 0 && /* @__PURE__ */ import_react141.default.createElement(DataList.TreeLine, {
+          isLast: itemIndex === items.length - 1
+        }), /* @__PURE__ */ import_react141.default.createElement(DataListCell, {
+          column,
+          row: item,
+          index: columnIndex,
+          rows: items
+        }))
+      })), item.items && /* @__PURE__ */ import_react141.default.createElement(WithGroup, {
+        level
+      }, /* @__PURE__ */ import_react141.default.createElement(Rows, {
+        columns,
+        items: item.items,
+        level: level + 1,
+        isLastGroup: level === 0 && itemIndex === items.length - 1 || isLastGroup
+      })));
+    }
+  }));
+};
+var WithGroup = ({ level, children }) => level === 0 ? /* @__PURE__ */ import_react141.default.createElement(DataList.Row, {
+  isGroup: true
+}, children) : children;
+
 // src/molecules/index.ts
 var SelectItem = Select.Item;
 
@@ -16875,6 +17030,7 @@ var system_default = __spreadValues({}, molecules_exports);
   InlineIcon,
   Input,
   InputBase,
+  ItemList,
   Label,
   LabelControl,
   LineClamp,
@@ -16952,6 +17108,7 @@ var system_default = __spreadValues({}, molecules_exports);
   calcTopPosition,
   calcTopRightPosition,
   cellProps,
+  columnHasSort,
   columnIsFieldColumn,
   createComponent,
   createMountPointElement,
@@ -16961,10 +17118,12 @@ var system_default = __spreadValues({}, molecules_exports);
   isOnSortChangedDirection,
   isOutOfBounds,
   placementOrder,
+  sortByColumn,
   toSortDirection,
   usePagination,
   usePopoverContext,
   useScrollTarget,
+  useSortState,
   useStaticInfiniteList,
   useTableSelect,
   useTableSort,