@aivenio/aquarium 1.62.0 → 1.63.0

package/dist/system.mjs

@@ -9380,6 +9380,7 @@ var ComboboxBase = (_a) => {
     createOption,
     renderOption = (opt) => itemToString(opt),
     isOptionDisabled = isOptionDisabledBuiltin,
+    getOptionKey,
     defaultValue,
     value,
     onChange,
@@ -9401,6 +9402,7 @@ var ComboboxBase = (_a) => {
     "createOption",
     "renderOption",
     "isOptionDisabled",
+    "getOptionKey",
     "defaultValue",
     "value",
     "onChange",
@@ -9522,11 +9524,14 @@ var ComboboxBase = (_a) => {
     style: { width: (_a2 = targetRef.current) == null ? void 0 : _a2.offsetWidth }
   }, /* @__PURE__ */ React51.createElement(Select.Menu, __spreadValues({
     maxHeight
-  }, menuProps), hasNoResults && /* @__PURE__ */ React51.createElement(Select.NoResults, null, emptyState), inputItems.map((item, index) => /* @__PURE__ */ React51.createElement(Select.Item, __spreadValues({
-    key: itemToString(item),
-    selected: item === selectedItem,
-    highlighted: index === highlightedIndex || item === selectedItem
-  }, getItemProps({ item, index })), renderOption(item))))));
+  }, menuProps), hasNoResults && /* @__PURE__ */ React51.createElement(Select.NoResults, null, emptyState), inputItems.map((item, index) => {
+    var _a3;
+    return /* @__PURE__ */ React51.createElement(Select.Item, __spreadValues({
+      key: (_a3 = getOptionKey == null ? void 0 : getOptionKey(item)) != null ? _a3 : itemToString(item),
+      selected: item === selectedItem,
+      highlighted: index === highlightedIndex || item === selectedItem
+    }, getItemProps({ item, index })), renderOption(item));
+  }))));
 };
 var ComboboxBaseSkeleton = () => /* @__PURE__ */ React51.createElement(Skeleton, {
   height: 38
@@ -9586,6 +9591,7 @@ var Container2 = ({ maxWidth = "xl", children }) => /* @__PURE__ */ React52.crea
 // src/molecules/DataList/DataList.tsx
 import React71 from "react";
 import { useControlledState } from "@react-stately/utils";
+import castArray2 from "lodash/castArray";
 import compact from "lodash/compact";
 import groupBy2 from "lodash/groupBy";
 import isArray3 from "lodash/isArray";
@@ -11265,9 +11271,16 @@ var useDataListContext = () => {
 // src/molecules/DataList/DataListGroup.tsx
 import React68 from "react";
 import isFunction2 from "lodash/isFunction";
+
+// src/molecules/DataList/utils.ts
+var flattenRows = (rows) => areRowsGrouped(rows) ? Object.values(rows).flatMap(flattenRows) : rows;
+
+// src/molecules/DataList/DataListGroup.tsx
 var GAP = 8;
 var INDENTATION = 28;
 var sortGroupKeys = (groupKeys) => [...groupKeys].sort((a) => a === "undefined" ? -1 : 1);
+var getDefaultRowCheckboxLabel = () => "Select row";
+var getDefaultGroupCheckboxLabel = (key) => `Select ${key}`;
 var DataListGroup = (_a) => {
   var _b = _a, {
     groups,
@@ -11286,7 +11299,12 @@ var DataListGroup = (_a) => {
     onAction,
     onGroupToggled,
     onMenuOpenChange,
-    rows
+    rows,
+    selectable,
+    selectedRows,
+    onSelectionChange,
+    getRowCheckboxLabel = getDefaultRowCheckboxLabel,
+    getGroupCheckboxLabel = getDefaultGroupCheckboxLabel
   } = props;
   const groupKeys = groups ? Object.keys(groups) : void 0;
   const hasCustomRowForGroup = isFunction2(getGroupRow);
@@ -11294,12 +11312,16 @@ var DataListGroup = (_a) => {
     return /* @__PURE__ */ React68.createElement(List, {
       items: groups,
       renderItem: (row, index) => {
+        var _a2;
+        const isChecked = (_a2 = selectedRows == null ? void 0 : selectedRows.includes(row.id)) != null ? _a2 : false;
+        const isDisabled = disabled == null ? void 0 : disabled(row, index, rows);
         return /* @__PURE__ */ React68.createElement(DataListRow, {
           key: row.id,
           columns,
           row,
           index,
           rows,
+          active: selectable && isChecked,
           menu: /* @__PURE__ */ React68.createElement(DataListRowMenu, {
             row,
             index,
@@ -11309,11 +11331,22 @@ var DataListGroup = (_a) => {
             menuAriaLabel
           }),
           disabled,
+          additionalRowProps: () => selectable ? {
+            "aria-selected": isChecked
+          } : {},
           additionalColumnProps: (_, columnIndex) => columnIndex === 0 ? {
             style: {
               paddingLeft: `${GAP + level * INDENTATION}px`
             }
-          } : {}
+          } : {},
+          renderFirstColumn: (row2, index2) => {
+            return /* @__PURE__ */ React68.createElement(React68.Fragment, null, selectable && /* @__PURE__ */ React68.createElement(DataList.Cell, null, /* @__PURE__ */ React68.createElement(Checkbox, {
+              "aria-label": getRowCheckboxLabel(row2, index2, isChecked, rows),
+              onChange: onSelectionChange(row2.id),
+              checked: isChecked,
+              disabled: isDisabled
+            })));
+          }
         });
       }
     });
@@ -11323,8 +11356,8 @@ var DataListGroup = (_a) => {
   }
   return /* @__PURE__ */ React68.createElement(List, {
     items: sortGroupKeys(groupKeys),
-    renderItem: (key) => {
-      var _a2;
+    renderItem: (key, index) => {
+      var _a2, _b2;
       const group = groups[key];
       if (key === "undefined" || key === void 0) {
         return /* @__PURE__ */ React68.createElement(DataListGroup, __spreadProps(__spreadValues({
@@ -11335,12 +11368,21 @@ var DataListGroup = (_a) => {
         }));
       }
       const openPanelId = expandedGroupIds ? (_a2 = expandedGroupIds.find((id) => id === key)) != null ? _a2 : null : void 0;
+      const nestedRowIds = flattenRows(group).map((row) => row.id);
+      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;
       return /* @__PURE__ */ React68.createElement(Accordion, {
         key,
         openPanelId
       }, hasCustomRowForGroup && /* @__PURE__ */ React68.createElement(DataList.Row, {
-        active: !!openPanelId
-      }, /* @__PURE__ */ React68.createElement(List, {
+        active: !!openPanelId || selectable && isChecked
+      }, selectable && /* @__PURE__ */ React68.createElement(DataList.Cell, null, /* @__PURE__ */ React68.createElement(Checkbox, {
+        "aria-label": getGroupCheckboxLabel(key, group, index, isChecked, rows),
+        checked: isChecked,
+        indeterminate: isChecked && !allSelected,
+        onChange: onSelectionChange(nestedRowIds)
+      })), /* @__PURE__ */ React68.createElement(List, {
         items: columns,
         renderItem: (column, idx) => /* @__PURE__ */ React68.createElement(DataList.Cell, __spreadProps(__spreadValues({}, cellProps(column)), {
           className: tw("gap-3"),
@@ -11362,10 +11404,15 @@ var DataListGroup = (_a) => {
         onMenuOpenChange,
         menuAriaLabel
       })), !hasCustomRowForGroup && /* @__PURE__ */ React68.createElement(DataList.Row, {
-        active: !!openPanelId
-      }, /* @__PURE__ */ React68.createElement(DataList.Cell, {
+        active: !!openPanelId || selectable && isChecked
+      }, selectable && /* @__PURE__ */ React68.createElement(DataList.Cell, null, /* @__PURE__ */ React68.createElement(Checkbox, {
+        "aria-label": getGroupCheckboxLabel(key, group, index, isChecked, rows),
+        checked: isChecked,
+        indeterminate: isChecked && !allSelected,
+        onChange: onSelectionChange(nestedRowIds)
+      })), /* @__PURE__ */ React68.createElement(DataList.Cell, {
         className: tw("gap-3"),
-        style: { paddingLeft: `${GAP + level * INDENTATION}px`, gridColumn: "1 / -1" }
+        style: { paddingLeft: `${GAP + level * INDENTATION}px`, gridColumn: `${selectable ? 2 : 1} / -1` }
       }, /* @__PURE__ */ React68.createElement(Accordion.Toggle, {
         panelId: key,
         onChange: onGroupToggled
@@ -11422,11 +11469,11 @@ var DataListToolbar = ({
   sticky = true
 }) => {
   var _a;
-  const { selectedRows, rows } = useDataListContext();
+  const { selectedRows } = useDataListContext();
   const actions = castArray(_actions).filter(Boolean);
   return /* @__PURE__ */ React70.createElement(DataList.Toolbar.Container, {
     sticky
-  }, /* @__PURE__ */ React70.createElement(DataList.Toolbar.Group, null, /* @__PURE__ */ React70.createElement(DataList.Toolbar.SelectionCount, null, (_a = selectedRows == null ? void 0 : selectedRows.length) != null ? _a : 0, " of ", rows.length, " selected")), actions.length > 0 && /* @__PURE__ */ React70.createElement(DataList.Toolbar.Group, null, /* @__PURE__ */ React70.createElement(DataList.Toolbar.Actions, null, actions.map(
+  }, /* @__PURE__ */ React70.createElement(DataList.Toolbar.Group, null, /* @__PURE__ */ React70.createElement(DataList.Toolbar.SelectionCount, null, (_a = selectedRows == null ? void 0 : selectedRows.length) != null ? _a : 0, " selected")), actions.length > 0 && /* @__PURE__ */ React70.createElement(DataList.Toolbar.Group, null, /* @__PURE__ */ React70.createElement(DataList.Toolbar.Actions, null, actions.map(
     (action) => renderAction({
       kind: "ghost",
       dense: true,
@@ -11443,7 +11490,6 @@ var DataListToolbar = ({
 DataListToolbar.displayName = "DataList.Toolbar";
 
 // src/molecules/DataList/DataList.tsx
-var getDefaultCheckboxLabel = () => "Select row";
 var DataList2 = (_a) => {
   var _b = _a, {
     columns,
@@ -11465,7 +11511,8 @@ var DataList2 = (_a) => {
     defaultSort,
     onSortChanged,
     selectable,
-    getCheckboxLabel = getDefaultCheckboxLabel,
+    getRowCheckboxLabel = getDefaultRowCheckboxLabel,
+    getGroupCheckboxLabel = getDefaultGroupCheckboxLabel,
     selectedRows,
     defaultSelectedRows,
     onSelectionChange,
@@ -11490,7 +11537,8 @@ var DataList2 = (_a) => {
     "defaultSort",
     "onSortChanged",
     "selectable",
-    "getCheckboxLabel",
+    "getRowCheckboxLabel",
+    "getGroupCheckboxLabel",
     "selectedRows",
     "defaultSelectedRows",
     "onSelectionChange",
@@ -11529,20 +11577,22 @@ var DataList2 = (_a) => {
     []
   );
   const handleSelectionChange = (id) => (e) => {
+    const ids = castArray2(id);
     if (e.target.checked) {
-      setSelected([...selected != null ? selected : [], id]);
+      setSelected([...selected != null ? selected : [], ...ids]);
     } else {
-      setSelected(selected == null ? void 0 : selected.filter((_id) => _id !== id));
+      setSelected(selected == null ? void 0 : selected.filter((_id) => !ids.includes(_id)));
     }
   };
+  const allRows = flattenRows(rows);
   const totalSelected = (_b2 = selected == null ? void 0 : selected.length) != null ? _b2 : 0;
   const allEnabledRowIds = compact(
-    sortedRows.map((row, index) => (disabled == null ? void 0 : disabled(row, index, sortedRows)) ? void 0 : row.id)
+    allRows.map((row, index) => (disabled == null ? void 0 : disabled(row, index, sortedRows)) ? void 0 : row.id)
   );
   const allRowsSelected = totalSelected >= allEnabledRowIds.length;
   return /* @__PURE__ */ React71.createElement(DataListContext.Provider, {
     value: {
-      rows: sortedRows,
+      rows: isArray3(rows) ? sortedRows : rows,
       selectedRows: selected
     }
   }, /* @__PURE__ */ React71.createElement(Template, {
@@ -11556,7 +11606,7 @@ var DataList2 = (_a) => {
     sticky
   }, /* @__PURE__ */ React71.createElement(Checkbox, {
     "aria-label": "Select all rows",
-    indeterminate: totalSelected > 0 && totalSelected < sortedRows.length,
+    indeterminate: totalSelected > 0 && totalSelected < allRows.length,
     checked: totalSelected > 0,
     onChange: () => {
       if (!allRowsSelected) {
@@ -11604,6 +11654,11 @@ var DataList2 = (_a) => {
     onAction,
     onGroupToggled,
     onMenuOpenChange,
+    selectable,
+    selectedRows: selected,
+    onSelectionChange: handleSelectionChange,
+    getRowCheckboxLabel,
+    getGroupCheckboxLabel,
     rows,
     groups,
     level: 0
@@ -11611,13 +11666,17 @@ var DataList2 = (_a) => {
     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 isDisabled = disabled == null ? void 0 : disabled(row, index, sortedRows);
       const content = /* @__PURE__ */ React71.createElement(DataListRow, {
         key: row.id,
         columns,
         row,
         index,
         rows: sortedRows,
+        active: selectable && isChecked,
         menu: /* @__PURE__ */ React71.createElement(DataListRowMenu, {
           row,
           index,
@@ -11628,17 +11687,14 @@ var DataList2 = (_a) => {
         }),
         disabled,
         additionalRowProps: (row2) => {
-          var _a3;
+          var _a4;
           return selectable ? {
-            "aria-selected": (_a3 = selected == null ? void 0 : selected.includes(row2.id)) != null ? _a3 : false
+            "aria-selected": (_a4 = selected == null ? void 0 : selected.includes(row2.id)) != null ? _a4 : false
           } : {};
         },
         renderFirstColumn: (row2, index2) => {
-          var _a3;
-          const isChecked = (_a3 = selected == null ? void 0 : selected.includes(row2.id)) != null ? _a3 : false;
-          const isDisabled = disabled == null ? void 0 : disabled(row2, index2, sortedRows);
           return /* @__PURE__ */ React71.createElement(React71.Fragment, null, selectable && /* @__PURE__ */ React71.createElement(DataList.Cell, null, /* @__PURE__ */ React71.createElement(Checkbox, {
-            "aria-label": getCheckboxLabel(row2, index2, isChecked, sortedRows),
+            "aria-label": getRowCheckboxLabel(row2, index2, isChecked, sortedRows),
             onChange: handleSelectionChange(row2.id),
             checked: isChecked,
             disabled: isDisabled
@@ -12040,8 +12096,13 @@ Modal.Actions = (_a) => {
 // src/molecules/Dialog/Dialog.tsx
 var Dialog = (props) => {
   const ref = React76.useRef(null);
-  const state = useOverlayTriggerState2({ isOpen: props.open });
-  const { modalProps, underlayProps } = useModalOverlay({}, state, ref);
+  const { open, onClose } = props;
+  const state = useOverlayTriggerState2({ isOpen: open, onOpenChange: (isOpen) => !isOpen && (onClose == null ? void 0 : onClose()) });
+  const { modalProps, underlayProps } = useModalOverlay(
+    { isDismissable: false, isKeyboardDismissDisabled: false },
+    state,
+    ref
+  );
   if (!state.isOpen) {
     return null;
   }
@@ -12064,7 +12125,11 @@ var DialogWrapper = ({
   const labelledBy = useId9();
   const describedBy = useId9();
   const { dialogProps } = useDialog(
-    { "role": "alertdialog", "aria-labelledby": labelledBy, "aria-describedby": describedBy },
+    {
+      "role": "alertdialog",
+      "aria-labelledby": labelledBy,
+      "aria-describedby": describedBy
+    },
     ref
   );
   return /* @__PURE__ */ React76.createElement("div", __spreadProps(__spreadValues({
@@ -12097,7 +12162,7 @@ import { useDialog as useDialog2 } from "@react-aria/dialog";
 import { Overlay as Overlay3, useModalOverlay as useModalOverlay2 } from "@react-aria/overlays";
 import { useId as useId10 } from "@react-aria/utils";
 import { animated as animated4, useSpring as useSpring3 } from "@react-spring/web";
-import castArray2 from "lodash/castArray";
+import castArray3 from "lodash/castArray";
 import omit9 from "lodash/omit";
 
 // src/molecules/Tabs/Tabs.tsx
@@ -12526,7 +12591,7 @@ var DrawerWrapper = React78.forwardRef(
     }, /* @__PURE__ */ React78.createElement(DropdownMenu2.Trigger, null, /* @__PURE__ */ React78.createElement(Button.Icon, {
       "aria-label": (_a2 = menuAriaLabel != null ? menuAriaLabel : menuLabel) != null ? _a2 : "Context menu",
       icon: import_more4.default
-    })), menu)), secondaryActions && castArray2(secondaryActions).filter(Boolean).map((_b2) => {
+    })), menu)), secondaryActions && castArray3(secondaryActions).filter(Boolean).map((_b2) => {
       var _c = _b2, { text } = _c, action = __objRest(_c, ["text"]);
       return /* @__PURE__ */ React78.createElement(Button.Secondary, __spreadValues({
         key: text
@@ -13049,7 +13114,7 @@ import { useDialog as useDialog4 } from "@react-aria/dialog";
 import { Overlay as Overlay4, useModalOverlay as useModalOverlay3 } from "@react-aria/overlays";
 import { useId as useId11 } from "@react-aria/utils";
 import { useOverlayTriggerState as useOverlayTriggerState5 } from "@react-stately/overlays";
-import castArray3 from "lodash/castArray";
+import castArray4 from "lodash/castArray";
 import omit11 from "lodash/omit";
 var import_cross7 = __toESM(require_cross());
 var Modal2 = (_a) => {
@@ -13102,7 +13167,7 @@ var ModalWrapper = React90.forwardRef(
       id: describedBy,
       tabIndex: 0,
       noFooter: !(secondaryActions || primaryAction)
-    }, children), (secondaryActions || primaryAction) && /* @__PURE__ */ React90.createElement(Modal.Footer, null, /* @__PURE__ */ React90.createElement(Modal.Actions, null, secondaryActions && castArray3(secondaryActions).filter(Boolean).map((_a2) => {
+    }, children), (secondaryActions || primaryAction) && /* @__PURE__ */ React90.createElement(Modal.Footer, null, /* @__PURE__ */ React90.createElement(Modal.Actions, null, secondaryActions && castArray4(secondaryActions).filter(Boolean).map((_a2) => {
       var _b2 = _a2, { text } = _b2, action = __objRest(_b2, ["text"]);
       return /* @__PURE__ */ React90.createElement(Button.Secondary, __spreadValues({
         key: text
@@ -13126,7 +13191,7 @@ var ModalTabs = createTabsComponent(
 // src/molecules/MultiInput/MultiInput.tsx
 import React92, { useEffect as useEffect11, useRef as useRef9, useState as useState11 } from "react";
 import { useId as useId12 } from "@react-aria/utils";
-import castArray4 from "lodash/castArray";
+import castArray5 from "lodash/castArray";
 import identity from "lodash/identity";
 import omit12 from "lodash/omit";
 
@@ -13266,7 +13331,7 @@ var MultiInputBase = (_a) => {
       inputRef.current.value = "";
     }
     if (value2) {
-      const newItems = castArray4(value2).map(createItem).filter((item) => !items.includes(item));
+      const newItems = castArray5(value2).map(createItem).filter((item) => !items.includes(item));
       if (newItems.length > 0 && items.length + newItems.length <= (maxLength != null ? maxLength : Number.MAX_SAFE_INTEGER)) {
         const updated = (items != null ? items : []).concat(newItems);
         setItems(updated);
@@ -13865,7 +13930,7 @@ Navigation2.Section = Navigation.Section;
 
 // src/molecules/PageHeader/PageHeader.tsx
 import React98 from "react";
-import castArray5 from "lodash/castArray";
+import castArray6 from "lodash/castArray";
 
 // src/atoms/PageHeader/PageHeader.tsx
 import React97 from "react";
@@ -13959,7 +14024,7 @@ var CommonPageHeader = ({
   }, /* @__PURE__ */ React98.createElement(DropdownMenu2.Trigger, null, /* @__PURE__ */ React98.createElement(Button.Icon, {
     "aria-label": menuAriaLabel,
     icon: import_more5.default
-  })), menu)), secondaryActions && castArray5(secondaryActions).filter(Boolean).map((secondaryAction2) => renderAction({ kind: "secondary", action: secondaryAction2 })), primaryAction && renderAction({ kind: "primary", action: primaryAction })));
+  })), menu)), secondaryActions && castArray6(secondaryActions).filter(Boolean).map((secondaryAction2) => renderAction({ kind: "secondary", action: secondaryAction2 })), primaryAction && renderAction({ kind: "primary", action: primaryAction })));
 };
 var PageHeader2 = (props) => /* @__PURE__ */ React98.createElement(CommonPageHeader, __spreadValues({}, props));
 PageHeader2.displayName = "PageHeader";
@@ -14261,7 +14326,7 @@ RadioButtonGroup.Skeleton.displayName = "RadioButtonGroup.Skeleton";
 import React109 from "react";
 import { useId as useId16 } from "@react-aria/utils";
 import { animated as animated5, useSpring as useSpring4 } from "@react-spring/web";
-import castArray6 from "lodash/castArray";
+import castArray7 from "lodash/castArray";
 import isUndefined9 from "lodash/isUndefined";
 
 // src/molecules/Switch/Switch.tsx
@@ -14534,7 +14599,7 @@ var Section4 = (props) => {
   }, /* @__PURE__ */ React109.createElement(DropdownMenu2.Trigger, null, /* @__PURE__ */ React109.createElement(Button.Icon, {
     "aria-label": menuAriaLabel,
     icon: import_more6.default
-  })), menu)), props.actions && castArray6(props.actions).filter(Boolean).map((action) => renderAction({ kind: "secondary", action })), props.switch && /* @__PURE__ */ React109.createElement(Switch2, __spreadValues({}, props.switch)), props.select && /* @__PURE__ */ React109.createElement(SelectBase, __spreadValues({
+  })), menu)), props.actions && castArray7(props.actions).filter(Boolean).map((action) => renderAction({ kind: "secondary", action })), props.switch && /* @__PURE__ */ React109.createElement(Switch2, __spreadValues({}, props.switch)), props.select && /* @__PURE__ */ React109.createElement(SelectBase, __spreadValues({
     "aria-labelledby": titleId
   }, props.select)))), !hasTabs && /* @__PURE__ */ React109.createElement(animated5.div, {
     className: tw(`h-[1px]`),