@aivenio/aquarium 6.0.0-rc5 → 6.0.0-rc6

package/dist/_variables.scss

@@ -176,6 +176,7 @@ $background-color-body: $colors-white;
 $background-color-layer: $colors-white;
 $background-color-inverse: $colors-grey-80;
 $background-color-overlay: $colors-white;
+$background-color-backdrop: rgb(from $colors-grey-100 r g b / 70%);
 $background-color-muted: $colors-grey-5;
 $background-color-medium: $colors-grey-10;
 $background-color-intense: $colors-grey-30;

package/dist/atoms.cjs

@@ -865,6 +865,7 @@ var tokens_default = {
     "body-intense": "rgba(31,32,33,1)",
     inverse: "rgba(31,32,33,1)",
     overlay: "rgba(255,255,255,1)",
+    backdrop: "rgb(from rgba(13,14,16,1) r g b / 70%)",
     "popover-content": "rgba(255,255,255,1)",
     muted: "rgba(244,244,244,1)",
     default: "rgba(235,235,235,1)",
@@ -1855,6 +1856,7 @@ var tailwind_theme_default = {
     "body-intense": "var(--aquarium-background-color-body-intense)",
     inverse: "var(--aquarium-background-color-inverse)",
     overlay: "var(--aquarium-background-color-overlay)",
+    backdrop: "var(--aquarium-background-color-backdrop)",
     "popover-content": "var(--aquarium-background-color-popover-content)",
     muted: "var(--aquarium-background-color-muted)",
     default: "var(--aquarium-background-color-default)",
@@ -3077,6 +3079,7 @@ var Alert2 = ({
       className: "Aquarium-Alert",
       type,
       dense: Boolean(title),
+      hasAction: Boolean(action),
       "aria-describedby": descriptionID,
       "aria-labelledby": title ? titleID : void 0
     },
@@ -3817,11 +3820,11 @@ var Checkbox = import_react35.default.forwardRef(
 var import_react36 = __toESM(require("react"));
 var import_tailwind_variants11 = require("tailwind-variants");
 var radioButtonClasses = (0, import_tailwind_variants11.tv)({
-  base: "inline-flex justify-center items-center self-center appearance-none w-5 h-5 p-[3px] rounded-full border border-default outline-none focus:border-info-default checked:bg-primary-graphic checked:shadow-bodyInset",
+  base: "inline-flex justify-center items-center self-center appearance-none w-5 h-5 p-[3px] rounded-full border border-default outline-none focus:border-info-default checked:bg-primary-inverse checked:shadow-bodyInset",
   variants: {
     disabled: {
-      true: "cursor-not-allowed border-muted bg-muted checked:bg-primary-muted checked:border-transparent",
-      false: "cursor-pointer hover:border-intense checked:border-primary-default"
+      true: "cursor-not-allowed border-muted bg-muted checked:bg-intense checked:border-transparent",
+      false: "cursor-pointer hover:bg-primary-active hover:border-primary-default checked:border-primary-default hover:checked:bg-primary-inverse"
     }
   }
 });
@@ -3995,7 +3998,15 @@ var CompactCard = ({
       ...commonProps
     },
     commonContent,
-    (primaryAction ?? secondaryAction) && /* @__PURE__ */ import_react40.default.createElement(Card.Actions, { disabled, dense: true }, primaryAction && renderAction({ kind: "secondary", dense: true, action: primaryAction, disabled }), secondaryAction && renderAction({ kind: "ghost", dense: true, action: secondaryAction, disabled }))
+    (primaryAction ?? secondaryAction) && /* @__PURE__ */ import_react40.default.createElement(Card.Actions, { disabled, dense: true }, primaryAction && renderAction({
+      kind: "secondary",
+      dense: true,
+      action: { ...primaryAction, disabled: primaryAction.disabled || disabled }
+    }), secondaryAction && renderAction({
+      kind: "ghost",
+      dense: true,
+      action: { ...secondaryAction, disabled: secondaryAction.disabled || disabled }
+    }))
   );
 };
 var CompactSkeleton = ({
@@ -4105,7 +4116,15 @@ var Card2 = ({
       hasImage: Boolean(image) && !chipElements && !icons.length
     },
     commonContent,
-    (primaryAction ?? secondaryAction) && /* @__PURE__ */ import_react41.default.createElement(Card.Actions, { disabled }, primaryAction && renderAction({ kind: "secondary", dense: true, action: primaryAction, disabled }), secondaryAction && renderAction({ kind: "ghost", dense: true, action: secondaryAction, disabled }))
+    (primaryAction ?? secondaryAction) && /* @__PURE__ */ import_react41.default.createElement(Card.Actions, { disabled }, primaryAction && renderAction({
+      kind: "secondary",
+      dense: true,
+      action: { ...primaryAction, disabled: primaryAction.disabled || disabled }
+    }), secondaryAction && renderAction({
+      kind: "ghost",
+      dense: true,
+      action: { ...secondaryAction, disabled: secondaryAction.disabled || disabled }
+    }))
   );
 };
 Card2.Title = Card.Title;
@@ -4167,7 +4186,7 @@ var ControlLabel = ({
     },
     rtl ? labelEl : children,
     rtl ? children : labelEl,
-    caption && /* @__PURE__ */ import_react43.default.createElement(Typography2, { className: (0, import_clsx13.clsx)({ "col-start-2": !rtl }), variant: "small", color: disabled ? "inactive" : "default" }, caption)
+    caption && /* @__PURE__ */ import_react43.default.createElement(Typography2, { className: (0, import_clsx13.clsx)({ "col-start-2": !rtl }), variant: "small", color: disabled ? "inactive" : "muted" }, caption)
   );
 };
 
@@ -5648,24 +5667,24 @@ var rowClassNamesBase = (0, import_tailwind_variants14.tv)({
 });
 var rowClassNames = rowClassNamesBase();
 var cellClassNamesBase = (0, import_tailwind_variants14.tv)({
-  base: "px-4 border-b typography-default leading-[18px]"
+  base: "px-4 border-b leading-[18px]"
 });
 var cellClassNames = cellClassNamesBase();
 var rowClasses = (0, import_tailwind_variants14.tv)({
   extend: rowClassNamesBase,
   variants: {
     disabled: {
-      true: "opacity-70",
+      true: "[&>div]:text-inactive",
       false: ""
     }
   }
 });
 var bodyCellClasses = (0, import_tailwind_variants14.tv)({
-  base: "text-default py-3",
+  base: "py-5 typography-default",
   variants: {
     table: {
       true: "h-[50px]",
-      false: "min-h-[50px]"
+      false: "min-h-[48px]"
     },
     stickyColumn: {
       left: "sticky z-10 bg-body group-hover:bg-muted left-0",
@@ -5689,7 +5708,7 @@ var alignClasses = (0, import_tailwind_variants14.tv)({
   }
 });
 var headCellClasses = (0, import_tailwind_variants14.tv)({
-  base: "py-[14px] text-left border-intense text-muted font-semibold whitespace-nowrap",
+  base: "py-4 text-left border-muted text-muted whitespace-nowrap min-h-[40px] typography-small-strong",
   variants: {
     sticky: {
       true: "sticky bg-body top-0 z-10",
@@ -5852,7 +5871,7 @@ var rowClasses2 = (0, import_tailwind_variants15.tv)({
       false: ""
     },
     disabled: {
-      true: "children:opacity-70",
+      true: "[&>div]:text-inactive",
       false: ""
     },
     active: {
@@ -5893,10 +5912,10 @@ var sortCellIconsClasses = (0, import_tailwind_variants15.tv)({
   }
 });
 var toolbarContainerClasses = (0, import_tailwind_variants15.tv)({
-  base: "col-span-full flex items-stretch py-4 px-l2 border-b border-default",
+  base: "col-span-full flex items-stretch py-4 px-l2 border-b border-muted",
   variants: {
     sticky: {
-      true: "sticky top-[47px] bg-body z-10",
+      true: "sticky top-[47px] bg-layer z-10",
       false: ""
     }
   }
@@ -5943,7 +5962,7 @@ var Cell = ({
       cellClassNames,
       getBodyCellClassNames(false, stickyColumn),
       alignClasses2({ align }),
-      "border-default",
+      "border-muted",
       className
     )
   }
@@ -5977,7 +5996,7 @@ var Row = ({
 };
 var SubGroupSpacing = ({ className, divider = false, ...rest }) => /* @__PURE__ */ import_react66.default.createElement("span", { ...rest, "aria-hidden": true, className: (0, import_clsx24.clsx)(subGroupSpacingClasses({ divider }), className) });
 var SortCell = ({ children, direction = "none", onClick, sticky, ...rest }) => /* @__PURE__ */ import_react66.default.createElement(HeadCell, { ...rest, "aria-sort": direction, role: "columnheader", sticky }, /* @__PURE__ */ import_react66.default.createElement("span", { className: getSortCellButtonClassNames(rest.align), role: "button", tabIndex: -1, onClick }, children, /* @__PURE__ */ import_react66.default.createElement("div", { "data-sort-icons": true, className: sortCellIconsClasses({ direction }) }, /* @__PURE__ */ import_react66.default.createElement(InlineIcon2, { icon: chevronUp_default, className: getSortCellIconClassNames(direction === "ascending") }), /* @__PURE__ */ import_react66.default.createElement(InlineIcon2, { icon: chevronDown_default, className: getSortCellIconClassNames(direction === "descending") }))));
-var EmptyGroup = ({ icon, children }) => /* @__PURE__ */ import_react66.default.createElement("div", { className: emptyGroupClasses() }, icon && /* @__PURE__ */ import_react66.default.createElement(Icon2, { icon, width: 22 }), children);
+var EmptyGroup = ({ icon, children }) => /* @__PURE__ */ import_react66.default.createElement("div", { className: emptyGroupClasses() }, icon && /* @__PURE__ */ import_react66.default.createElement(Icon2, { icon, width: 18 }), children);
 DataList.EmptyGroup = EmptyGroup;
 DataList.EmptyGroup.displayName = "DataList.EmptyGroup";
 DataList.HeadCell = HeadCell;
@@ -6131,7 +6150,7 @@ function useScrollStyles({
   containerRef,
   skip = false,
   direction = "horizontal",
-  options = { borderColor: "210, 210, 214", boxShadowColor: "58, 58, 68" }
+  options = { borderColor: "210, 210, 214", boxShadowColor: "74, 74, 83" }
 }) {
   const scrollXProgress = useScrollProgress({ containerRef, skip });
   return useStickyStyles(scrollXProgress, direction, options);
@@ -6229,7 +6248,7 @@ var import_react_aria_components2 = require("react-aria-components");
 var import_clsx25 = require("clsx");
 var import_tailwind_variants16 = require("tailwind-variants");
 var dropdownMenuStyles = (0, import_tailwind_variants16.tv)({
-  base: "bg-overlay w-full flex flex-col overflow-x-hidden typography-small text-default"
+  base: "bg-overlay w-full flex flex-col overflow-x-hidden typography-default text-default"
 });
 var DropdownMenu = ({ className, children, ...props }) => {
   return /* @__PURE__ */ import_react69.default.createElement(import_react_aria_components2.Menu, { className: dropdownMenuStyles({ className: ["Aquarium-DropdownMenu", className] }), ...props }, children);
@@ -6452,7 +6471,8 @@ var DataListRowMenu = ({
   menu,
   onAction,
   onMenuOpenChange,
-  menuAriaLabel
+  menuAriaLabel,
+  disabled = false
 }) => {
   if (!menu) {
     return null;
@@ -6465,7 +6485,7 @@ var DataListRowMenu = ({
       onAction: (action) => onAction?.(action, row, index),
       onOpenChange: onMenuOpenChange
     },
-    /* @__PURE__ */ import_react74.default.createElement(DropdownMenu2.Trigger, null, /* @__PURE__ */ import_react74.default.createElement(Button2.Icon, { "aria-label": menuAriaLabel, icon: more_default })),
+    /* @__PURE__ */ import_react74.default.createElement(DropdownMenu2.Trigger, null, /* @__PURE__ */ import_react74.default.createElement(Button2.Icon, { "aria-label": menuAriaLabel, icon: more_default, disabled })),
     menuContent
   ));
 };
@@ -6519,7 +6539,7 @@ var DataListRow = ({
               ...additionalColumnProps(column, columnIndex, columns, row),
               className: rowClassName?.(row, index, rows)
             },
-            /* @__PURE__ */ import_react74.default.createElement(DataListCell, { column, row, index, rows })
+            /* @__PURE__ */ import_react74.default.createElement(DataListCell, { column, row, index, rows, disabled: isRowDisabled })
           );
           return createAnimatedCell({
             cellElement: cell2,
@@ -6537,7 +6557,8 @@ var DataListCell = ({
   column,
   row,
   index,
-  rows: _rows
+  rows: _rows,
+  disabled = false
 }) => {
   let cellContent = DEFAULT_CONTENT;
   const rows = areRowsGrouped(_rows) ? void 0 : _rows;
@@ -6552,13 +6573,17 @@ var DataListCell = ({
     case "action": {
       const action = renameProperty("text", "children", column.action(row, index, rows));
       if (action) {
+        const isActionDisabled = disabled || action.disabled;
         cellContent = /* @__PURE__ */ import_react74.default.createElement(
           Button2.Secondary,
           {
             dense: true,
             ...action,
+            disabled: isActionDisabled,
             onClick: (e) => {
-              action.onClick();
+              if (!isActionDisabled) {
+                action.onClick();
+              }
               e.stopPropagation();
             }
           }
@@ -6609,7 +6634,8 @@ var DataListCell = ({
 var import_react75 = require("react");
 var DataListContext = (0, import_react75.createContext)({
   rows: [],
-  selectedRows: void 0
+  selectedRows: void 0,
+  selectable: false
 });
 var useDataListContext = () => {
   const ctx = (0, import_react75.useContext)(DataListContext);
@@ -6823,7 +6849,7 @@ var DataListGroup = ({
         )), /* @__PURE__ */ import_react76.default.createElement(
           DataList.Cell,
           {
-            className: "gap-3",
+            className: "gap-2",
             style: { paddingLeft: `${GAP + level * INDENTATION}px`, gridColumn: `${selectable ? 2 : 1} / -1` }
           },
           /* @__PURE__ */ import_react76.default.createElement(Accordion.Toggle, { panelId: key, onChange: onGroupToggled }),
@@ -6874,13 +6900,19 @@ var DataListToolbar = ({
   menuLabel,
   sticky = true
 }) => {
-  const { selectedRows } = useDataListContext();
+  const { selectedRows, selectable } = useDataListContext();
   const actions2 = (0, import_lodash_es26.castArray)(_actions).filter(Boolean);
+  const noRowsSelected = (selectedRows?.length ?? 0) === 0;
+  const disableToolbarActions = selectable && noRowsSelected;
   return /* @__PURE__ */ import_react78.default.createElement(DataList.Toolbar.Container, { sticky }, /* @__PURE__ */ import_react78.default.createElement(DataList.Toolbar.Group, null, /* @__PURE__ */ import_react78.default.createElement(DataList.Toolbar.SelectionCount, null, selectedRows?.length ?? 0, " selected")), actions2.length > 0 && /* @__PURE__ */ import_react78.default.createElement(DataList.Toolbar.Group, null, /* @__PURE__ */ import_react78.default.createElement(DataList.Toolbar.Actions, null, actions2.map(
     (action) => renderAction({
       kind: "ghost",
       dense: true,
-      action: { ...action, onClick: () => action.onClick(selectedRows ?? []) }
+      action: {
+        ...action,
+        disabled: disableToolbarActions || action.disabled,
+        onClick: () => action.onClick(selectedRows ?? [])
+      }
     })
   ))), menu && /* @__PURE__ */ import_react78.default.createElement(DataList.Toolbar.Group, null, /* @__PURE__ */ import_react78.default.createElement(
     DropdownMenu2,
@@ -6889,7 +6921,7 @@ var DataListToolbar = ({
       onAction: (key) => onAction(key, selectedRows ?? []),
       onOpenChange: onMenuOpenChange
     },
-    /* @__PURE__ */ import_react78.default.createElement(DropdownMenu2.Trigger, null, /* @__PURE__ */ import_react78.default.createElement(Button2.Dropdown, { kind: "ghost", dense: true }, menuLabel)),
+    /* @__PURE__ */ import_react78.default.createElement(DropdownMenu2.Trigger, null, /* @__PURE__ */ import_react78.default.createElement(Button2.Dropdown, { kind: "ghost", dense: true, disabled: disableToolbarActions }, menuLabel)),
     menu
   )));
 };
@@ -6995,7 +7027,7 @@ var DataList2 = ({
     }
   )), isCollapsible && /* @__PURE__ */ import_react79.default.createElement(DataList.HeadCell, { align: "left", sticky }), columns.map((column) => {
     const content = column.headerTooltip ? /* @__PURE__ */ import_react79.default.createElement(Tooltip, { placement: column.headerTooltip.placement, content: column.headerTooltip.content }, column.headerName) : column.headerName;
-    const headerContentAndIcon = column.icon ? /* @__PURE__ */ import_react79.default.createElement(Box.Flex, { flexDirection: "row", gap: "3", alignItems: "center" }, /* @__PURE__ */ import_react79.default.createElement(InlineIcon2, { icon: column.icon, height: "22", color: "muted", "aria-hidden": true }), content) : content;
+    const headerContentAndIcon = column.icon ? /* @__PURE__ */ import_react79.default.createElement(Box.Flex, { flexDirection: "row", gap: "2", alignItems: "center" }, /* @__PURE__ */ import_react79.default.createElement(InlineIcon2, { icon: column.icon, width: 18, height: 18, color: "muted", "aria-hidden": true }), content) : content;
     const cell2 = columnHasSort(column) ? /* @__PURE__ */ import_react79.default.createElement(
       DataList.SortCell,
       {
@@ -7071,7 +7103,8 @@ var DataList2 = ({
                 menu,
                 onAction,
                 onMenuOpenChange,
-                menuAriaLabel
+                menuAriaLabel,
+                disabled: isDisabled
               }
             ),
             disabled,
@@ -7128,7 +7161,8 @@ var DataList2 = ({
     {
       value: {
         rows: (0, import_lodash_es27.isArray)(rows) ? sortedRows : rows,
-        selectedRows: selected
+        selectedRows: selected,
+        selectable: Boolean(selectable)
       }
     },
     wrappedContent
@@ -10285,7 +10319,7 @@ var bodyMaskClasses = (0, import_tailwind_variants23.tv)({
         'after:content-[""]',
         "after:pointer-events-none",
         "after:sticky",
-        "after:bottom-0",
+        "after:bottom-3",
         "after:left-0",
         "after:h-5",
         "after:flex-shrink-0",
@@ -10300,12 +10334,13 @@ var bodyMaskClasses = (0, import_tailwind_variants23.tv)({
 var modalStyles = (0, import_tailwind_variants23.tv)({
   slots: {
     overlay: "inset-0 overflow-y-auto z-modal fixed",
-    backdrop: "-z-10 fixed min-w-full min-h-full bg-inverse opacity-30",
-    dialog: "bg-overlay max-h-full flex flex-col",
+    backdrop: "-z-10 fixed min-w-full min-h-full bg-backdrop",
+    dialog: "Aquarium-Modal.Container bg-overlay max-h-full flex flex-col",
     header: "pl-7 pr-[64px] pt-6 pb-4 gap-3 flex items-center",
     headerImage: "h-[120px] min-h-[120px] w-full",
     titleContainer: "flex flex-col grow",
     title: "",
+    subtitle: "max-w-[700px]",
     closeButtonContainer: "absolute top-[24px] right-[28px]",
     body: [
       "grow overflow-y-auto text-default flex flex-col",
@@ -10367,7 +10402,7 @@ var modalStyles = (0, import_tailwind_variants23.tv)({
       isResponsive: true,
       class: {
         overlay: "py-0 sm:py-7",
-        dialog: "w-dvw h-dvh mx-0 rounded-none sm:h-auto sm:w-full sm:rounded sm:mx-7"
+        dialog: "w-dvw h-dvh mx-0 rounded-none sm:h-auto sm:w-full sm:rounded-lg sm:mx-7"
       }
     },
     {
@@ -10376,7 +10411,7 @@ var modalStyles = (0, import_tailwind_variants23.tv)({
       isResponsive: false,
       class: {
         overlay: "py-0",
-        dialog: "h-auto w-full rounded mx-7"
+        dialog: "h-auto w-full rounded-lg mx-7"
       }
     },
     {
@@ -10460,7 +10495,10 @@ Modal.Title = ({ kind = "dialog", children, className, ...rest }) => {
   const { title } = modalStyles({ kind });
   return /* @__PURE__ */ import_react92.default.createElement(Typography, { htmlTag: "h2", variant: "subheading", color: "intense", className: title({ className }), ...rest }, children);
 };
-Modal.Subtitle = ({ children, ...rest }) => /* @__PURE__ */ import_react92.default.createElement(Typography, { variant: "default", color: "default", ...rest }, children);
+Modal.Subtitle = ({ children, className, ...rest }) => {
+  const { subtitle } = modalStyles();
+  return /* @__PURE__ */ import_react92.default.createElement(Typography, { variant: "default", color: "muted", className: subtitle({ className }), ...rest }, children);
+};
 Modal.TitleContainer = ({ children, className, ...rest }) => {
   const { titleContainer: titleContainer2 } = modalStyles();
   return /* @__PURE__ */ import_react92.default.createElement("div", { ...rest, className: titleContainer2({ className }) }, children);
@@ -12547,7 +12585,7 @@ var import_react135 = __toESM(require("react"));
 var SelectItem = Select.Item;
 
 // src/utils/actions.tsx
-var renderAction = ({ kind = "primary", dense = false, action, type = "button", disabled }) => {
+var renderAction = ({ kind = "primary", dense = false, action, type = "button" }) => {
   return isLink(action) ? /* @__PURE__ */ import_react136.default.createElement(
     Link2.Button,
     {
@@ -12555,11 +12593,10 @@ var renderAction = ({ kind = "primary", dense = false, action, type = "button",
       kind,
       dense,
       ...(0, import_lodash_es45.omit)(action, "text"),
-      disabled,
-      className: disabled ? "pointer-events-none" : ""
+      className: action.disabled ? "pointer-events-none" : void 0
     },
     action.text
-  ) : /* @__PURE__ */ import_react136.default.createElement(Button2, { key: action.text, kind, dense, ...(0, import_lodash_es45.omit)(action, "text"), type, disabled }, action.text);
+  ) : /* @__PURE__ */ import_react136.default.createElement(Button2, { key: action.text, kind, dense, ...(0, import_lodash_es45.omit)(action, "text"), type }, action.text);
 };
 
 // src/molecules/Toast/Timer.tsx
@@ -12680,7 +12717,7 @@ var alertTypes = {
 };
 var alertStyles = (0, import_tailwind_variants33.tv)({
   slots: {
-    base: "px-4 py-3 rounded-lg grid grid-cols-[auto_1fr_auto] items-center gap-x-3 gap-y-2",
+    base: "px-4 rounded-lg grid grid-cols-[auto_1fr_auto] items-center gap-x-3 gap-y-2",
     title: "col-start-2",
     description: "col-start-2",
     actions: "flex gap-4 col-start-2",
@@ -12699,6 +12736,14 @@ var alertStyles = (0, import_tailwind_variants33.tv)({
       false: {
         icon: "self-start"
       }
+    },
+    hasAction: {
+      true: {
+        base: "pt-3 pb-2"
+      },
+      false: {
+        base: "py-3"
+      }
     }
   }
 });
@@ -12722,9 +12767,10 @@ var Alert = ({
   className,
   type,
   dense = false,
+  hasAction = false,
   ...rest
 }) => {
-  const { base: base2 } = alertStyles({ type, dense });
+  const { base: base2 } = alertStyles({ type, dense, hasAction });
   return /* @__PURE__ */ import_react142.default.createElement(AlertContext.Provider, { value: { type, dense } }, /* @__PURE__ */ import_react142.default.createElement("div", { ...rest, role: type === "error" || type === "warning" ? "alert" : "status", className: base2({ className }) }, children));
 };
 var AlertTitle = ({ children, className, ...rest }) => {