@aivenio/aquarium 6.4.0 → 6.5.0

package/dist/system.mjs

@@ -1813,7 +1813,7 @@ var tokens_default = {
     }
   },
   code: {
-    background: "rgba(250,250,250,1)",
+    background: "rgba(255,255,255,1)",
     text: "rgba(45,46,48,1)",
     variable: "rgba(91,30,103,1)",
     keyword: "rgba(202, 33, 101, 1)",
@@ -2281,7 +2281,7 @@ import React6 from "react";
 import { useFocusWithin } from "@react-aria/interactions";
 import { OverlayContainer, useOverlayPosition } from "@react-aria/overlays";
 import { useTooltip, useTooltipTrigger } from "@react-aria/tooltip";
-import { mergeProps } from "@react-aria/utils";
+import { isFocusable, mergeProps } from "@react-aria/utils";
 
 // src/molecules/Tooltip/useTooltipTriggerState.ts
 import { useEffect as useEffect2, useMemo, useRef } from "react";
@@ -2417,6 +2417,14 @@ var Tooltip = ({ delay = 200, ...props }) => {
     shouldFlip,
     offset: ARROW_OFFSET
   });
+  const [containsFocusable, setContainsFocusable] = React6.useState(false);
+  React6.useLayoutEffect(() => {
+    if (triggerRef.current) {
+      const elements = Array.from(triggerRef.current.querySelectorAll("*"));
+      const hasFocusable = elements.some((el) => isFocusable(el));
+      setContainsFocusable(hasFocusable);
+    }
+  });
   const { focusWithinProps } = useFocusWithin({
     onFocusWithinChange: (isFocusWithin) => isFocusWithin ? state.open() : state.close()
   });
@@ -2445,6 +2453,7 @@ var Tooltip = ({ delay = 200, ...props }) => {
     {
       className: display,
       ...triggerProps,
+      tabIndex: containsFocusable ? -1 : triggerProps.tabIndex,
       onFocus: (e) => {
         triggerProps.onFocus?.(e);
         focusWithinProps.onFocus?.(e);
@@ -6081,15 +6090,7 @@ Modal.TitleContainer = ({ children, className, ...rest }) => {
   const { titleContainer: titleContainer2 } = modalStyles();
   return /* @__PURE__ */ React59.createElement("div", { ...rest, className: titleContainer2({ className }) }, children);
 };
-var ModalBody = ({
-  children,
-  className,
-  noFooter = false,
-  maxHeight,
-  style,
-  size,
-  ...rest
-}) => {
+var ModalBody = ({ children, className, contentClassName, noFooter = false, maxHeight, style, size, ...rest }) => {
   const { body, bodyContent } = modalStyles({ size });
   const { containerRef, topSentinelRef, bottomSentinelRef, showTopFade, showBottomFade } = useScrollFade();
   return /* @__PURE__ */ React59.createElement(
@@ -6101,7 +6102,7 @@ var ModalBody = ({
       style: { maxHeight, ...style }
     },
     /* @__PURE__ */ React59.createElement("div", { ref: topSentinelRef, "aria-hidden": "true", className: "h-1px" }),
-    /* @__PURE__ */ React59.createElement("div", { className: bodyContent({ noFooter }) }, children),
+    /* @__PURE__ */ React59.createElement("div", { className: bodyContent({ noFooter, className: contentClassName }) }, children),
     /* @__PURE__ */ React59.createElement("div", { ref: bottomSentinelRef, "aria-hidden": "true", className: "h-1px -mt-1px" })
   );
 };
@@ -8076,11 +8077,6 @@ var useDataListContext = () => {
 // src/molecules/DataList/DataListGroup.tsx
 import React80 from "react";
 import { isFunction as isFunction2, noop } from "lodash-es";
-
-// 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);
@@ -8111,6 +8107,7 @@ var DataListGroup = ({
     rows,
     selectable,
     selectedRows,
+    statsByNode,
     getOnSelectionChangeForId,
     selectionDisabled = () => false,
     getRowSelectionLabel = getDefaultRowSelectionLabel,
@@ -8139,8 +8136,8 @@ var DataListGroup = ({
         items: groups,
         renderItem: (row, index) => {
           const isSelected = selectedRows?.includes(row.id) ?? false;
-          const isDisabled = disabled?.(row, index, rows);
-          const isSelectionDisabled = selectionDisabled(row, index, rows);
+          const isDisabled = disabled?.(row, index, groups);
+          const isSelectionDisabled = selectionDisabled(row, index, groups);
           const isLastRow = isLastGroup && index === groups.length - 1;
           return /* @__PURE__ */ React80.createElement(
             DataListRow,
@@ -8150,7 +8147,7 @@ var DataListGroup = ({
               row,
               index,
               isLast: isLastRow,
-              rows,
+              rows: groups,
               active: selectable && isSelected,
               menu: /* @__PURE__ */ React80.createElement(
                 DataListRowMenu,
@@ -8179,7 +8176,7 @@ var DataListGroup = ({
                   RadioButton,
                   {
                     value: row2.id.toString(),
-                    "aria-label": getRowSelectionLabel(row2, index2, isSelected, rows),
+                    "aria-label": getRowSelectionLabel(row2, index2, isSelected, groups),
                     onChange: noop,
                     checked: isSelected,
                     disabled: isDisabled || isSelectionDisabled
@@ -8187,7 +8184,7 @@ var DataListGroup = ({
                 ), isMultiSelectionMode && /* @__PURE__ */ React80.createElement(
                   Checkbox,
                   {
-                    "aria-label": getRowSelectionLabel(row2, index2, isSelected, rows),
+                    "aria-label": getRowSelectionLabel(row2, index2, isSelected, groups),
                     onChange: getOnSelectionChangeForId(row2.id),
                     checked: isSelected,
                     disabled: isDisabled || isSelectionDisabled
@@ -8224,10 +8221,12 @@ var DataListGroup = ({
           );
         }
         const openPanelId = expandedGroupIds ? expandedGroupIds.find((id) => id === key) ?? null : void 0;
-        const nestedRowIds = flattenRows(group).map((row) => row.id);
-        const nestedSelectedIds = selectedRows?.filter((id) => nestedRowIds.includes(id)) ?? [];
-        const allSelected = nestedRowIds.length === nestedSelectedIds.length;
-        const isChecked = nestedSelectedIds.length > 0;
+        const { selectableIds, allSelected, isChecked, isDisabled } = statsByNode.get(group) ?? {
+          selectableIds: [],
+          allSelected: false,
+          isChecked: false,
+          isDisabled: true
+        };
         const isActiveRow = !!openPanelId || selectable && isChecked;
         const isLastRow = isLastGroup && index === groupKeys.length - 1 && !openPanelId;
         return /* @__PURE__ */ React80.createElement(Accordion, { key, openPanelId }, hasCustomRowForGroup && /* @__PURE__ */ React80.createElement(DataList.Row, { active: isActiveRow, noDivider: isLastRow }, selectable && /* @__PURE__ */ React80.createElement(DataList.Cell, null, isMultiSelectionMode && /* @__PURE__ */ React80.createElement(
@@ -8236,8 +8235,8 @@ var DataListGroup = ({
             "aria-label": getGroupCheckboxLabel(key, group, index, isChecked, rows),
             checked: isChecked,
             indeterminate: isChecked && !allSelected,
-            disabled: group.length === 0,
-            onChange: getOnSelectionChangeForId(nestedRowIds)
+            disabled: isDisabled,
+            onChange: getOnSelectionChangeForId(selectableIds)
           }
         )), /* @__PURE__ */ React80.createElement(
           List,
@@ -8271,8 +8270,8 @@ var DataListGroup = ({
             "aria-label": getGroupCheckboxLabel(key, group, index, isChecked, rows),
             checked: isChecked,
             indeterminate: isChecked && !allSelected,
-            disabled: group.length === 0,
-            onChange: getOnSelectionChangeForId(nestedRowIds)
+            disabled: isDisabled,
+            onChange: getOnSelectionChangeForId(selectableIds)
           }
         )), /* @__PURE__ */ React80.createElement(
           DataList.Cell,
@@ -8410,6 +8409,7 @@ var DataList2 = ({
   const [sort, updateSort] = useTableSort({ ...initialSortState, onSortChanged });
   const sortedRows = isArray2(rows) ? sortRowsBy(rows, sort) : [];
   const groups = areRowsGrouped(rows) ? rows : group ? isFunction3(group) ? group(sortedRows) : groupBy2(sortedRows, group) : void 0;
+  const rootNode = groups ?? sortedRows;
   const isCollapsible = isFunction3(rowDetails);
   const templateColumns = compact([
     selectable ? "fit-content(28px)" : void 0,
@@ -8432,26 +8432,37 @@ var DataList2 = ({
     }
   };
   const isMultiSelectionMode = selectable === "multiple" || selectable === "multiple-not-all";
-  const allRows = flattenRows(rows);
-  const totalSelected = selected?.length ?? 0;
-  const allEnabledRowIds = compact(
-    allRows.map(
-      (row, index) => disabled?.(row, index, sortedRows) || selectionDisabled(row, index, sortedRows) ? void 0 : row.id
-    )
-  );
-  const allRowsSelected = totalSelected >= allEnabledRowIds.length;
+  const selectedIds = new Set(selected);
+  const buildSelectionStats = (root) => {
+    const statsByNode2 = /* @__PURE__ */ new Map();
+    const recordStats = (node) => {
+      const selectableIds2 = areRowsGrouped(node) ? Object.values(node).flatMap((child) => recordStats(child).selectableIds) : node.filter((row, i) => !disabled?.(row, i, node) && !selectionDisabled(row, i, node)).map((row) => row.id);
+      const selectedSelectableCount = selectableIds2.filter((id) => selectedIds.has(id)).length;
+      const stats = {
+        selectableIds: selectableIds2,
+        selectedSelectableCount,
+        allSelected: selectableIds2.length > 0 && selectedSelectableCount === selectableIds2.length,
+        isChecked: selectedSelectableCount > 0,
+        isDisabled: selectableIds2.length === 0
+      };
+      statsByNode2.set(node, stats);
+      return stats;
+    };
+    return { statsByNode: statsByNode2, rootStats: recordStats(root) };
+  };
+  const { statsByNode, rootStats } = buildSelectionStats(rootNode);
+  const { selectableIds, isChecked, allSelected, isDisabled } = rootStats;
   const componentContent = /* @__PURE__ */ React83.createElement(Template, { className: "Aquarium-DataList", columns: templateColumns, role: "table", "aria-label": ariaLabel }, !hideHeader && /* @__PURE__ */ React83.createElement(React83.Fragment, null, /* @__PURE__ */ React83.createElement(DataList.Row, { header: true }, selectable && /* @__PURE__ */ React83.createElement(DataList.HeadCell, { align: "left", sticky }, selectable === "multiple" && /* @__PURE__ */ React83.createElement(
     Checkbox,
     {
       "aria-label": "Select all rows",
-      indeterminate: totalSelected > 0 && totalSelected < allRows.length,
-      checked: totalSelected > 0,
+      indeterminate: isChecked && !allSelected,
+      checked: isChecked,
+      disabled: isDisabled,
       onChange: () => {
-        if (!allRowsSelected) {
-          setSelected(allEnabledRowIds);
-        } else {
-          setSelected([]);
-        }
+        const enabledSet = new Set(selectableIds);
+        const keptSelection = (selected ?? []).filter((id) => !enabledSet.has(id));
+        setSelected(allSelected ? keptSelection : [...keptSelection, ...selectableIds]);
       }
     }
   )), isCollapsible && /* @__PURE__ */ React83.createElement(DataList.HeadCell, { align: "left", sticky }), columns.map((column) => {
@@ -8496,6 +8507,7 @@ var DataList2 = ({
       getGroupCheckboxLabel,
       rows,
       groups,
+      statsByNode,
       groupKey: void 0,
       level: 0,
       isLastGroup: true
@@ -8510,7 +8522,7 @@ var DataList2 = ({
         const details = rowDetails?.(row, index, sortedRows);
         const isSelected = selected?.includes(row.id) ?? false;
         const isSelectionDisabled = selectionDisabled(row, index, sortedRows);
-        const isDisabled = disabled?.(row, index, sortedRows);
+        const isDisabled2 = disabled?.(row, index, sortedRows);
         const openPanelId = expandedGroupIds.find((id) => id === row.id.toString()) || null;
         const isLastRow = index === sortedRows.length - 1;
         const content = /* @__PURE__ */ React83.createElement(
@@ -8533,7 +8545,7 @@ var DataList2 = ({
                 onAction,
                 onMenuOpenChange,
                 menuAriaLabel,
-                disabled: isDisabled
+                disabled: isDisabled2
               }
             ),
             disabled,
@@ -8550,7 +8562,7 @@ var DataList2 = ({
                   "aria-label": getRowSelectionLabel(row2, index2, isSelected, sortedRows),
                   onChange: noop2,
                   checked: isSelected,
-                  disabled: isDisabled || isSelectionDisabled
+                  disabled: isDisabled2 || isSelectionDisabled
                 }
               ), isMultiSelectionMode && /* @__PURE__ */ React83.createElement(
                 Checkbox,
@@ -8558,7 +8570,7 @@ var DataList2 = ({
                   "aria-label": getRowSelectionLabel(row2, index2, isSelected, sortedRows),
                   onChange: getOnSelectionChangeForId(row2.id),
                   checked: isSelected,
-                  disabled: isDisabled || isSelectionDisabled
+                  disabled: isDisabled2 || isSelectionDisabled
                 }
               )), rowDetails !== void 0 && /* @__PURE__ */ React83.createElement(DataList.Cell, null, details && /* @__PURE__ */ React83.createElement(Accordion.Toggle, { panelId: row2.id.toString(), onChange: onGroupToggled })));
             },
@@ -11766,7 +11778,7 @@ var Dialog2 = (props) => {
   if (!state.isOpen) {
     return null;
   }
-  return /* @__PURE__ */ React96.createElement(Overlay, null, /* @__PURE__ */ React96.createElement(Modal, { className: "Aquarium-Dialog", open: true }, /* @__PURE__ */ React96.createElement(Modal.BackDrop, { ...underlayProps }), /* @__PURE__ */ React96.createElement(Modal.Dialog, { ref, size: "sm", isResponsive: false, ...modalProps }, /* @__PURE__ */ React96.createElement(DialogWrapper, { ...props }))));
+  return /* @__PURE__ */ React96.createElement(Overlay, null, /* @__PURE__ */ React96.createElement(Modal, { className: "Aquarium-Dialog", open: true }, /* @__PURE__ */ React96.createElement(Modal.BackDrop, { ...underlayProps }), /* @__PURE__ */ React96.createElement(Modal.Dialog, { ref, size: "sm", isResponsive: false, className: "sm:max-w-[520px]", ...modalProps }, /* @__PURE__ */ React96.createElement(DialogWrapper, { ...props }))));
 };
 var DialogWrapper = ({
   title,
@@ -11786,7 +11798,7 @@ var DialogWrapper = ({
     },
     ref
   );
-  return /* @__PURE__ */ React96.createElement("div", { ref, ...dialogProps, className: "outline-none" }, /* @__PURE__ */ React96.createElement(Modal.Header, { className: "icon-stroke-2" }, /* @__PURE__ */ React96.createElement(Icon, { icon: DIALOG_ICONS_AND_COLORS[type].icon, color: DIALOG_ICONS_AND_COLORS[type].color, fontSize: 20 }), /* @__PURE__ */ React96.createElement(Modal.Title, { id: labelledBy, variant: "large", color: DIALOG_ICONS_AND_COLORS[type].color }, title)), /* @__PURE__ */ React96.createElement(Modal.Body, { id: describedBy }, /* @__PURE__ */ React96.createElement(Typography2.Default, null, children)), /* @__PURE__ */ React96.createElement(Modal.Footer, null, /* @__PURE__ */ React96.createElement(Modal.Actions, { className: "gap-4" }, secondaryAction && /* @__PURE__ */ React96.createElement(Button2.Ghost, { key: secondaryAction.text, ...omit10(secondaryAction, "text") }, secondaryAction.text), /* @__PURE__ */ React96.createElement(Button2.Secondary, { key: primaryAction.text, ...omit10(primaryAction, "text") }, primaryAction.text))));
+  return /* @__PURE__ */ React96.createElement("div", { ref, ...dialogProps, className: "outline-none" }, /* @__PURE__ */ React96.createElement(Modal.Header, { className: "icon-stroke-2 px-6 pr-6" }, /* @__PURE__ */ React96.createElement(Icon, { icon: DIALOG_ICONS_AND_COLORS[type].icon, color: DIALOG_ICONS_AND_COLORS[type].color, fontSize: 20 }), /* @__PURE__ */ React96.createElement(Modal.Title, { id: labelledBy, variant: "large", color: "default" }, title)), /* @__PURE__ */ React96.createElement(Modal.Body, { id: describedBy, contentClassName: "px-6" }, /* @__PURE__ */ React96.createElement(Typography2.Default, null, children)), /* @__PURE__ */ React96.createElement(Modal.Footer, { className: "px-6" }, /* @__PURE__ */ React96.createElement(Modal.Actions, { className: "gap-4" }, secondaryAction && /* @__PURE__ */ React96.createElement(Button2.Ghost, { key: secondaryAction.text, ...omit10(secondaryAction, "text") }, secondaryAction.text), /* @__PURE__ */ React96.createElement(Button2.Secondary, { key: primaryAction.text, ...omit10(primaryAction, "text") }, primaryAction.text))));
 };
 
 // src/molecules/Drawer/Drawer.tsx

package/dist/tokens.json

@@ -187,7 +187,7 @@
     }
   },
   "code": {
-    "background": "rgba(250,250,250,1)",
+    "background": "rgba(255,255,255,1)",
     "text": "rgba(45,46,48,1)",
     "variable": "rgba(91,30,103,1)",
     "keyword": "rgba(202, 33, 101, 1)",