@aivenio/aquarium 2.17.0 → 2.19.0-rc1

package/dist/system.cjs

@@ -1182,6 +1182,22 @@ var require_coinsHand = __commonJS({
   }
 });
 
+// src/icons/collapsePanel.js
+var require_collapsePanel = __commonJS({
+  "src/icons/collapsePanel.js"(exports2) {
+    "use strict";
+    var data = {
+      "body": '<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M8.182 10h9.09m-9.09 0 3.636 3.636M8.182 10l3.636-3.636M2.727 2.727v14.546"/>',
+      "left": 0,
+      "top": 0,
+      "width": 20,
+      "height": 20
+    };
+    exports2.__esModule = true;
+    exports2.default = data;
+  }
+});
+
 // src/icons/comment.js
 var require_comment = __commonJS({
   "src/icons/comment.js"(exports2) {
@@ -1774,6 +1790,22 @@ var require_expandAll = __commonJS({
   }
 });
 
+// src/icons/expandPanel.js
+var require_expandPanel = __commonJS({
+  "src/icons/expandPanel.js"(exports2) {
+    "use strict";
+    var data = {
+      "body": '<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M11.818 10h-9.09m9.09 0-3.636 3.636M11.818 10 8.182 6.364m9.091-3.637v14.546"/>',
+      "left": 0,
+      "top": 0,
+      "width": 20,
+      "height": 20
+    };
+    exports2.__esModule = true;
+    exports2.default = data;
+  }
+});
+
 // src/icons/export.js
 var require_export = __commonJS({
   "src/icons/export.js"(exports2) {
@@ -4787,6 +4819,7 @@ var import_codeFile = __toESM(require_codeFile());
 var import_code = __toESM(require_code());
 var import_cog = __toESM(require_cog());
 var import_coinsHand = __toESM(require_coinsHand());
+var import_collapsePanel = __toESM(require_collapsePanel());
 var import_comment = __toESM(require_comment());
 var import_confirm = __toESM(require_confirm());
 var import_console = __toESM(require_console());
@@ -4824,6 +4857,7 @@ var import_endorsed = __toESM(require_endorsed());
 var import_envelope = __toESM(require_envelope());
 var import_error = __toESM(require_error());
 var import_expandAll = __toESM(require_expandAll());
+var import_expandPanel = __toESM(require_expandPanel());
 var import_export = __toESM(require_export());
 var import_eyeOff = __toESM(require_eyeOff());
 var import_eyeOpen = __toESM(require_eyeOpen());
@@ -6964,7 +6998,7 @@ function useTooltipTriggerState(props = {}) {
   const { delay = TOOLTIP_DELAY } = props;
   const { isOpen, open, close } = (0, import_overlays.useOverlayTriggerState)(props);
   const id = (0, import_react10.useMemo)(() => `${++tooltipId}`, []);
-  const closeTimeout = (0, import_react10.useRef)();
+  const closeTimeout = (0, import_react10.useRef)(null);
   const isUnmounted = (0, import_react10.useRef)(false);
   const ensureTooltipEntry = () => {
     tooltips[id] = hideTooltip;
@@ -7293,7 +7327,7 @@ var asButton = (Component, isDropdownButton) => {
             hasChildren && /* @__PURE__ */ import_react12.default.createElement("div", null, children)
           );
         } else {
-          return children;
+          return /* @__PURE__ */ import_react12.default.createElement(import_react12.default.Fragment, null, children);
         }
       };
       const buttonComponent = /* @__PURE__ */ import_react12.default.createElement(
@@ -7397,7 +7431,18 @@ var Transition = ({ children }) => {
     keys: (item) => item.key || "",
     config: { tension: 125, friction: 20, precision: 0.1 }
   });
-  return /* @__PURE__ */ import_react14.default.createElement(import_react14.default.Fragment, null, transitions((style, item) => /* @__PURE__ */ import_react14.default.createElement(import_web.animated.div, { style }, /* @__PURE__ */ import_react14.default.createElement("div", { ref: (ref) => ref && refMap.set(item, ref) }, item))));
+  return /* @__PURE__ */ import_react14.default.createElement(import_react14.default.Fragment, null, transitions((style, item) => (
+    // @ts-expect-error React spring does not yet support R19 types
+    /* @__PURE__ */ import_react14.default.createElement(import_web.animated.div, { style }, /* @__PURE__ */ import_react14.default.createElement(
+      "div",
+      {
+        ref: (ref) => {
+          ref && refMap.set(item, ref);
+        }
+      },
+      item
+    ))
+  )));
 };
 
 // src/atoms/Toast/Toast.tsx
@@ -7886,25 +7931,28 @@ var AccordionToggle = ({ panelId, onChange, ...rest }) => {
     }
   });
   const { buttonProps } = (0, import_button.useButton)({ elementType: "div", onPress: handleClick }, ref);
-  return /* @__PURE__ */ import_react24.default.createElement(
-    import_web3.animated.div,
-    {
-      ...rest,
-      ...{
-        ...buttonProps,
-        onPointerDown: (e) => {
-          e.preventDefault();
-          handleClick();
-        }
+  return (
+    // @ts-expect-error React spring does not yet support R19 types
+    /* @__PURE__ */ import_react24.default.createElement(
+      import_web3.animated.div,
+      {
+        ...rest,
+        ...{
+          ...buttonProps,
+          onPointerDown: (e) => {
+            e.preventDefault();
+            handleClick();
+          }
+        },
+        ref,
+        "aria-label": "accordion toggle",
+        "aria-expanded": openPanelId === id,
+        "aria-controls": `${id}-content`,
+        style: { transform },
+        className: tw("text-default focus:outline-none focusable")
       },
-      ref,
-      "aria-label": "accordion toggle",
-      "aria-expanded": openPanelId === id,
-      "aria-controls": `${id}-content`,
-      style: { transform },
-      className: tw("text-default focus:outline-none focusable")
-    },
-    /* @__PURE__ */ import_react24.default.createElement(import_react25.Icon, { icon: import_caretUp.default, height: 22, width: 22 })
+      /* @__PURE__ */ import_react24.default.createElement(import_react25.Icon, { icon: import_caretUp.default, height: 22, width: 22 })
+    )
   );
 };
 var AccordionPanel = ({ children, panelId, ...rest }) => {
@@ -7920,17 +7968,20 @@ var AccordionPanel = ({ children, panelId, ...rest }) => {
       duration: 150
     }
   });
-  return /* @__PURE__ */ import_react24.default.createElement(
-    import_web3.animated.div,
-    {
-      role: "region",
-      ...rest,
-      id: `${id}-content`,
-      "aria-labelledby": `${id}-summary`,
-      "aria-hidden": !isOpen ? "true" : void 0,
-      style
-    },
-    /* @__PURE__ */ import_react24.default.createElement("div", { ref }, children)
+  return (
+    // @ts-expect-error React spring does not yet support R19 types
+    /* @__PURE__ */ import_react24.default.createElement(
+      import_web3.animated.div,
+      {
+        role: "region",
+        ...rest,
+        id: `${id}-content`,
+        "aria-labelledby": `${id}-summary`,
+        "aria-hidden": !isOpen ? "true" : void 0,
+        style
+      },
+      /* @__PURE__ */ import_react24.default.createElement("div", { ref }, children)
+    )
   );
 };
 var AccordionUnanimatedPanel = ({ children, panelId }) => {
@@ -8211,7 +8262,7 @@ var Skeleton = ({
 
 // src/molecules/Avatar/Avatar.tsx
 var AvatarStack = ({ images }) => /* @__PURE__ */ import_react29.default.createElement(Box, { display: "flex", className: tw("[&>*:not(:first-child)]:-ml-3") }, images.map(
-  (image, index) => image ? /* @__PURE__ */ import_react29.default.createElement(Avatar, { key: `${image}.${index}`, image, imageAlt: "" }) : /* @__PURE__ */ import_react29.default.createElement(Avatar.Skeleton, { key: index })
+  (image, index) => image ? /* @__PURE__ */ import_react29.default.createElement(Avatar, { key: `${image}.${index}`, image }) : /* @__PURE__ */ import_react29.default.createElement(Avatar.Skeleton, { key: index })
 ));
 var Avatar = ({ image, imageAlt = "" }) => /* @__PURE__ */ import_react29.default.createElement("img", { src: image, className: classNames(tw("w-[32px] h-[32px]"), "Aquarium-Avatar"), alt: imageAlt });
 var AvatarSkeleton = () => /* @__PURE__ */ import_react29.default.createElement(Skeleton, { height: 32, width: 32, className: tw("rounded-full") });
@@ -8837,7 +8888,7 @@ var Template = ({
 };
 
 // src/molecules/Card/CardInputWrapper.tsx
-var CardInputWrapper = ({ input, children }) => input ? /* @__PURE__ */ import_react43.default.createElement(Template, { columns: ["1", "auto"], columnGap: "4", alignContent: "space-between" }, children, input) : children;
+var CardInputWrapper = ({ input, children }) => input ? /* @__PURE__ */ import_react43.default.createElement(Template, { columns: ["1", "auto"], columnGap: "4", alignContent: "space-between" }, children, input) : /* @__PURE__ */ import_react43.default.createElement(import_react43.default.Fragment, null, children);
 
 // src/molecules/Card/Compact.tsx
 var import_react45 = __toESM(require("react"));
@@ -10651,7 +10702,7 @@ var TableRow = ({ children, className, disabled, ...rest }) => /* @__PURE__ */ i
   "tr",
   {
     ...rest,
-    ...{ inert: disabled ? "" : void 0 },
+    ...{ inert: disabled },
     className: classNames(rowClassNames, className, {
       "opacity-70": disabled
     })
@@ -10811,7 +10862,7 @@ var Row = ({
     {
       ...rest,
       role: isGroup ? "rowgroup" : "row",
-      ...{ inert: disabled ? "" : void 0 },
+      ...{ inert: disabled },
       className: classNames(tw("contents"), className, {
         "[&>*]:border-b-transparent": noDivider,
         "children:opacity-70": disabled,
@@ -10935,7 +10986,10 @@ function useStickyStyles(scrollProgress, axis, { borderColor, boxShadowColor })
     }
   };
 }
-function useScrollProgress({ containerRef, skip }) {
+function useScrollProgress({
+  containerRef,
+  skip
+}) {
   const [scrollState, setScrollState] = (0, import_react71.useState)(null);
   const throttledSetScrollState = (0, import_lodash_es21.throttle)(({ scrollX, scrollXProgress }) => {
     setScrollState({ scrollX, scrollXProgress });
@@ -11013,7 +11067,6 @@ var cellProps = (column) => {
     }
   }
   return {
-    key: column.key ?? column.headerName,
     align,
     stickyColumn: column.sticky
   };
@@ -11486,6 +11539,7 @@ var DataListRow = ({
           const cell2 = /* @__PURE__ */ import_react75.default.createElement(
             DataList.Cell,
             {
+              key: column.key ?? column.headerName,
               ...cellProps(column),
               ...additionalColumnProps(column, columnIndex, columns, row),
               className: rowClassName?.(row, index, rows)
@@ -11763,6 +11817,7 @@ var DataListGroup = ({
             renderItem: (column, idx) => /* @__PURE__ */ import_react77.default.createElement(
               DataList.Cell,
               {
+                key: column.key ?? column.headerName,
                 ...cellProps(column),
                 className: tw("gap-3"),
                 style: idx === 0 ? { paddingLeft: `${GAP + level * INDENTATION}px` } : void 0
@@ -11972,10 +12027,11 @@ var DataList2 = ({
         direction: sort && sort.column.headerName === column.headerName ? sort.direction : "none",
         onClick: () => updateSort(column),
         sticky,
+        key: column.key ?? column.headerName,
         ...cellProps(column)
       },
       headerContentAndIcon
-    ) : /* @__PURE__ */ import_react80.default.createElement(DataList.HeadCell, { ...cellProps(column), sticky }, headerContentAndIcon);
+    ) : /* @__PURE__ */ import_react80.default.createElement(DataList.HeadCell, { key: column.key ?? column.headerName, ...cellProps(column), sticky }, headerContentAndIcon);
     return createAnimatedCell({
       cellElement: cell2,
       stickyStyles,
@@ -12206,12 +12262,14 @@ var DataTable = ({
             onClick: () => updateSort(column),
             style: { width: column.width },
             "aria-label": column.headerInvisible ? column.headerName : void 0,
+            key: column.key ?? column.headerName,
             ...cellProps(column)
           },
           headerContentAndIcon
         ) : /* @__PURE__ */ import_react83.default.createElement(
           Table2.Cell,
           {
+            key: column.key ?? column.headerName,
             ...cellProps(column),
             style: { width: column.width },
             "aria-label": column.headerInvisible ? column.headerName : void 0
@@ -12241,7 +12299,15 @@ var DataTable = ({
               items: columns,
               renderItem: (column) => {
                 return createAnimatedCell({
-                  cellElement: /* @__PURE__ */ import_react83.default.createElement(Table2.Cell, { ...cellProps(column), className: rowClassName?.(row, index, rows) }, renderCell(column, row, index, sortedRows)),
+                  cellElement: /* @__PURE__ */ import_react83.default.createElement(
+                    Table2.Cell,
+                    {
+                      key: column.key ?? column.headerName,
+                      ...cellProps(column),
+                      className: rowClassName?.(row, index, rows)
+                    },
+                    renderCell(column, row, index, sortedRows)
+                  ),
                   stickyStyles,
                   stickyColumn: cellProps(column).stickyColumn
                 });
@@ -12300,7 +12366,7 @@ var renderCell = (column, row, index, rows) => {
   } else {
     cellContent = row[column.field];
   }
-  return column.tooltip ? /* @__PURE__ */ import_react83.default.createElement(Tooltip, { ...column.tooltip(row, index, rows) }, cellContent) : cellContent;
+  return column.tooltip ? /* @__PURE__ */ import_react83.default.createElement(Tooltip, { ...column.tooltip(row, index, rows) }, cellContent) : /* @__PURE__ */ import_react83.default.createElement(import_react83.default.Fragment, null, cellContent);
 };
 DataTable.Skeleton = DataListSkeleton;
 
@@ -13437,9 +13503,9 @@ var PopoverTriggerWrapper = ({ children, ...rest }) => {
   const trigger = import_react101.default.Children.only(children);
   const { pressProps } = (0, import_interactions3.usePress)({ ...rest, ref });
   return import_react101.default.cloneElement(trigger, {
-    "ref": ref,
     ...(0, import_utils31.mergeProps)(pressProps, trigger.props),
-    "aria-controls": rest["aria-controls"] ?? pressProps["aria-controls"]
+    "aria-controls": rest["aria-controls"] ?? pressProps["aria-controls"],
+    "ref": ref
   });
 };
 
@@ -14641,7 +14707,7 @@ var PopoverDialog2 = ({ placement, open, title, secondaryAction, primaryAction,
         secondaryAction.text
       ), /* @__PURE__ */ import_react121.default.createElement(Popover3.Button, { kind: "ghost", key: primaryAction.text, dense: true, ...(0, import_lodash_es41.omit)(primaryAction, "text") }, primaryAction.text))));
     }
-    return child;
+    return child instanceof Promise ? /* @__PURE__ */ import_react121.default.createElement(import_react121.default.Fragment, null, child) : child;
   };
   return /* @__PURE__ */ import_react121.default.createElement(Popover3, { type: "dialog", isOpen: open, placement, containFocus: true }, import_react121.default.Children.map(children, wrapPromptWithBody));
 };
@@ -15046,7 +15112,8 @@ var Section4 = (props) => {
       id: toggleId,
       collapsible: _collapsible
     },
-    _collapsible && /* @__PURE__ */ import_react130.default.createElement(import_web6.animated.div, { style: { transform } }, /* @__PURE__ */ import_react130.default.createElement(Section3.Toggle, null)),
+    _collapsible && // @ts-expect-error React spring does not yet support R19 types
+    /* @__PURE__ */ import_react130.default.createElement(import_web6.animated.div, { style: { transform } }, /* @__PURE__ */ import_react130.default.createElement(Section3.Toggle, null)),
     /* @__PURE__ */ import_react130.default.createElement(Section3.Title, { id: titleId }, /* @__PURE__ */ import_react130.default.createElement(LineClamp2, { lines: 1 }, title), props.tag && /* @__PURE__ */ import_react130.default.createElement(TagLabel, { ...props.tag }), props.badge && /* @__PURE__ */ import_react130.default.createElement(Chip2, { text: props.badge }), props.chip && /* @__PURE__ */ import_react130.default.createElement(StatusChip, { ...props.chip })),
     subtitle && /* @__PURE__ */ import_react130.default.createElement(Section3.Subtitle, { className: tw("row-start-2", { "col-start-2": _collapsible }) }, /* @__PURE__ */ import_react130.default.createElement(LineClamp2, { lines: 1 }, subtitle))
   ), !isCollapsed && /* @__PURE__ */ import_react130.default.createElement(Section3.Actions, null, props.switch && /* @__PURE__ */ import_react130.default.createElement(Switch2, { ...props.switch }), menu && /* @__PURE__ */ import_react130.default.createElement(Box.Flex, { alignItems: "center" }, /* @__PURE__ */ import_react130.default.createElement(
@@ -15058,7 +15125,8 @@ var Section4 = (props) => {
     },
     /* @__PURE__ */ import_react130.default.createElement(DropdownMenu2.Trigger, null, /* @__PURE__ */ import_react130.default.createElement(Button.Icon, { "aria-label": menuAriaLabel, icon: import_more6.default })),
     menu
-  )), props.actions && (0, import_lodash_es43.castArray)(props.actions).filter(Boolean).map((action) => renderAction({ kind: "secondary", action })), props.select && /* @__PURE__ */ import_react130.default.createElement(SelectBase, { "aria-labelledby": titleId, ...props.select }))), !hasTabs && !isCollapsed && /* @__PURE__ */ import_react130.default.createElement(import_web6.animated.div, { className: tw(`h-[1px]`), style: { backgroundColor: "var(--aquarium-border-color-muted)" } })), /* @__PURE__ */ import_react130.default.createElement(
+  )), props.actions && (0, import_lodash_es43.castArray)(props.actions).filter(Boolean).map((action) => renderAction({ kind: "secondary", action })), props.select && /* @__PURE__ */ import_react130.default.createElement(SelectBase, { "aria-labelledby": titleId, ...props.select }))), !hasTabs && !isCollapsed && // @ts-expect-error React spring does not yet support R19 types
+  /* @__PURE__ */ import_react130.default.createElement(import_web6.animated.div, { className: tw(`h-[1px]`), style: { backgroundColor: "var(--aquarium-border-color-muted)" } })), /* @__PURE__ */ import_react130.default.createElement(
     import_web6.animated.div,
     {
       id: regionId,
@@ -15470,12 +15538,13 @@ var ItemList = ({
             setSortState(newState);
             onSortChanged?.(newState);
           },
+          key: column.key ?? column.headerName,
           ...cellProps(column)
         },
         column.headerName
       );
     }
-    return /* @__PURE__ */ import_react141.default.createElement(DataList.HeadCell, { ...cellProps(column), sticky }, column.headerName);
+    return /* @__PURE__ */ import_react141.default.createElement(DataList.HeadCell, { key: column.key ?? column.headerName, ...cellProps(column), sticky }, column.headerName);
   })), /* @__PURE__ */ import_react141.default.createElement(Rows, { columns, items: sortedItems, level: 0, ...infiniteProps }));
 };
 var Rows = ({ columns, items, level, isLastGroup, ...infiniteProps }) => {
@@ -15495,6 +15564,7 @@ var Rows = ({ columns, items, level, isLastGroup, ...infiniteProps }) => {
             renderItem: (column, columnIndex) => /* @__PURE__ */ import_react141.default.createElement(
               DataList.Cell,
               {
+                key: column.key ?? column.headerName,
                 ...cellProps(column),
                 style: level > 1 && columnIndex === 0 ? { paddingLeft: (level - 1) * 60 } : void 0
               },
@@ -15515,7 +15585,7 @@ var Rows = ({ columns, items, level, isLastGroup, ...infiniteProps }) => {
     }
   );
 };
-var WithGroup = ({ level, children }) => level === 0 ? /* @__PURE__ */ import_react141.default.createElement(DataList.Row, { isGroup: true }, children) : children;
+var WithGroup = ({ level, children }) => level === 0 ? /* @__PURE__ */ import_react141.default.createElement(DataList.Row, { isGroup: true }, children) : /* @__PURE__ */ import_react141.default.createElement(import_react141.default.Fragment, null, children);
 
 // src/molecules/index.ts
 var SelectItem = Select.Item;