@multiplatform.one/table 6.6.0 → 7.0.0

package/dist/cjs/components/DataTableGrouping/index.cjs

@@ -38,7 +38,6 @@ var import_tamagui = require("tamagui");
 var import_viewData = require("../../utils/viewData.cjs");
 var import_DataTableStateContext = require("../DataTable/DataTableStateContext.cjs");
 var import_jsx_runtime = require("react/jsx-runtime");
-var import_react3 = require("react");
 const EMPTY_EXPANDED_GROUPS = /* @__PURE__ */new Set();
 const groupHeaderPaddingMap = {
   small: "$2",
@@ -50,11 +49,35 @@ const groupItemPaddingMap = {
   medium: "$2",
   large: "$3"
 };
+const groupIndentStepMap = {
+  small: 12,
+  medium: 16,
+  large: 24
+};
 const groupMetaSizeMap = {
   $3: "$2",
   $4: "$3",
   $5: "$4"
 };
+const groupIconSize = token => (0, import_theme.sizeRecipeForToken)(token).iconSize;
+const startRail = import_tamagui.isWeb ? {
+  borderInlineStartWidth: 4,
+  borderInlineStartStyle: "solid",
+  borderInlineStartColor: "$color6"
+} : {
+  borderStartWidth: 4,
+  borderStartColor: "$color6"
+};
+function groupIndent(space, level) {
+  return (groupIndentStepMap[space ?? "medium"] ?? 16) * Math.max(0, level);
+}
+function formatCellValue(value) {
+  if (value == null) return "";
+  if (typeof value === "number") {
+    return Number.isFinite(value) ? (0, import_theme.formatNumber)(value) : "";
+  }
+  return String(value);
+}
 function formatAggregateValue(value, agg) {
   if (value == null) return (0, import_theme.formatNumber)(0);
   if (typeof value === "number") {
@@ -112,6 +135,8 @@ function DataTableGrouping(props) {
     groupedData,
     columns,
     level: 0,
+    stackStart: true,
+    stackEnd: true,
     aggregations,
     showAggregations,
     expandedGroups,
@@ -124,6 +149,8 @@ function GroupedDataRenderer({
   groupedData,
   columns,
   level,
+  stackStart,
+  stackEnd,
   aggregations,
   showAggregations,
   expandedGroups,
@@ -132,12 +159,20 @@ function GroupedDataRenderer({
   renderGroupFooter
 }) {
   return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
-    children: groupedData.map(group => {
+    children: groupedData.map((group, groupIndex) => {
       const groupKey = getGroupKey(group);
       const isExpanded = expandedGroups.has(groupKey);
       const isExpandable = (group.children?.length ?? 0) > 0 || group.items.length > 0;
+      const position = (0, import_theme.getGroupPosition)(groupIndex, groupedData.length);
+      const isFirst = position === "first" || position === "only";
+      const isLast = position === "last" || position === "only";
+      const headerStart = stackStart && isFirst;
+      const headerEnd = stackEnd && isLast && !isExpanded;
+      const childStackEnd = stackEnd && isLast;
       return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
-        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(GroupHeader, {
+        children: [groupIndex > 0 ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+          ...import_theme.hairline.line
+        }) : null, /* @__PURE__ */(0, import_jsx_runtime.jsx)(GroupHeader, {
           group,
           level,
           isExpanded,
@@ -145,13 +180,19 @@ function GroupedDataRenderer({
           aggregations,
           showAggregations: showAggregations ?? true,
           onToggleExpansion: () => onToggleExpansion(groupKey),
-          renderCustomHeader: renderGroupHeader
-        }), isExpanded && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
-          marginInlineStart: level * 20,
-          children: group.children && group.children.length > 0 ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(GroupedDataRenderer, {
+          renderCustomHeader: renderGroupHeader,
+          position,
+          stackStart: headerStart,
+          stackEnd: headerEnd
+        }), isExpanded && /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+            ...import_theme.hairline.line
+          }), group.children && group.children.length > 0 ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(GroupedDataRenderer, {
             groupedData: group.children,
             columns,
             level: level + 1,
+            stackStart: false,
+            stackEnd: childStackEnd,
             aggregations,
             showAggregations,
             expandedGroups,
@@ -160,8 +201,10 @@ function GroupedDataRenderer({
             renderGroupFooter
           }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(GroupItems, {
             items: group.items,
-            columns
-          })
+            columns,
+            level: level + 1,
+            stackEnd: childStackEnd
+          })]
         }), renderGroupFooter && isExpanded && /* @__PURE__ */(0, import_jsx_runtime.jsx)(GroupFooter, {
           group,
           level,
@@ -179,41 +222,66 @@ function GroupHeader({
   aggregations,
   showAggregations,
   onToggleExpansion,
-  renderCustomHeader
+  renderCustomHeader,
+  position = "only",
+  stackStart,
+  stackEnd
 }) {
   const {
     knobProps
   } = (0, import_theme.useResolvedKnobs)();
   const CollapsedCaretIcon = (0, import_components.useDirection)() === "rtl" ? import_react.CaretLeftIcon : import_react.CaretRightIcon;
+  const corners = (0, import_theme.stackEdgeRadius)(knobProps.borderRadius.borderRadius, {
+    start: stackStart,
+    end: stackEnd
+  });
+  const iconSize = groupIconSize(String(knobProps.sizeToken));
+  const metaSize = groupMetaSizeMap[knobProps.sizeToken] ?? "$3";
+  const indent = groupIndent(knobProps.space, level);
+  const label = group.value == null || group.value === "" ? "No Value" : String(group.value);
+  const countLabel = `${(0, import_theme.formatNumber)(group.count, {
+    maximumFractionDigits: 0
+  })} item${group.count !== 1 ? "s" : ""}`;
   if (renderCustomHeader) {
     return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
       children: renderCustomHeader(group, level)
     });
   }
   return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
-    ...knobProps.borderRadius,
+    ...corners,
+    ...startRail,
     alignItems: "center",
+    gap: "$2",
+    minHeight: 44,
     padding: groupHeaderPaddingMap[knobProps.space] ?? "$3",
     backgroundColor: knobProps.inputBackground,
-    ...(import_tamagui.isWeb ? {
-      borderInlineStartWidth: 4,
-      borderInlineStartStyle: "solid",
-      borderInlineStartColor: "$color6"
-    } : {
-      borderStartWidth: 4,
-      borderStartColor: "$color6"
-    }),
+    overflow: "hidden",
     cursor: "pointer",
     hoverStyle: {
-      backgroundColor: level === 0 ? "$accentBackground" : {
-        backgroundColor: "$color2"
-      }.backgroundColor
+      backgroundColor: "$backgroundHover",
+      ...corners
+    },
+    pressStyle: {
+      backgroundColor: "$backgroundPress",
+      ...corners
     },
     onPress: onToggleExpansion,
     role: "button",
     tabIndex: 0,
     "aria-expanded": isExpanded,
+    "aria-label": `${label}, ${countLabel}`,
+    outlineWidth: 0,
+    focusStyle: {
+      outlineWidth: 0
+    },
+    focusVisibleStyle: (0, import_theme.ensureFocusVisibleRing)({
+      outlineOffset: -2
+    }),
     ...{
+      "data-testid": "data-table-group-header",
+      "data-group-position": position,
+      "data-stack-start": stackStart ? "true" : "false",
+      "data-stack-end": stackEnd ? "true" : "false",
       onKeyDown: e => {
         if (e.key === "Enter" || e.key === " ") {
           e.preventDefault();
@@ -222,40 +290,49 @@ function GroupHeader({
       }
     },
     children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
-      width: 20,
+      width: iconSize + 4,
       alignItems: "center",
+      marginInlineStart: indent,
       children: hasChildren && (isExpanded ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.CaretDownIcon, {
-        size: 16
+        size: iconSize
       }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(CollapsedCaretIcon, {
-        size: 16
+        size: iconSize
       }))
-    }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
       flex: 1,
+      alignItems: "center",
+      justifyContent: "space-between",
+      gap: "$3",
+      flexWrap: "wrap",
       children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
         alignItems: "center",
         gap: "$2",
+        flexShrink: 1,
+        minWidth: 0,
         children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
           fontSize: knobProps.sizeToken,
           fontWeight: "600",
-          children: group.value == null || group.value === "" ? "No Value" : String(group.value)
+          numberOfLines: 1,
+          children: label
         }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Text, {
-          fontSize: groupMetaSizeMap[knobProps.sizeToken] ?? "$3",
+          fontSize: metaSize,
           color: "$color10",
-          children: ["(", group.count, " item", group.count !== 1 ? "s" : "", ")"]
+          children: ["(", countLabel, ")"]
         })]
       }), showAggregations && aggregations.length > 0 && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
-        gap: "$4",
-        marginTop: "$2",
+        gap: "$3",
+        flexWrap: "wrap",
+        justifyContent: "flex-end",
         children: aggregations.map((agg, index) => /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
-          alignItems: "center",
+          alignItems: "baseline",
           gap: "$1",
-          children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Text, {
-            fontSize: groupMetaSizeMap[knobProps.sizeToken] ?? "$3",
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+            fontSize: metaSize,
             color: "$color10",
-            children: [agg.label || `${agg.function}(${agg.column})`, ":"]
+            children: `${agg.label || `${agg.function}(${agg.column})`}:`
           }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-            fontSize: groupMetaSizeMap[knobProps.sizeToken] ?? "$3",
-            fontWeight: "500",
+            fontSize: metaSize,
+            fontWeight: "600",
             children: formatAggregateValue(group.aggregations[agg.column]?.[agg.function], agg)
           })]
         }, index))
@@ -265,34 +342,60 @@ function GroupHeader({
 }
 function GroupItems({
   items,
-  columns = []
+  columns = [],
+  level,
+  stackEnd
 }) {
   const {
     knobProps
   } = (0, import_theme.useResolvedKnobs)();
+  const metaSize = groupMetaSizeMap[knobProps.sizeToken] ?? "$3";
+  const indent = groupIndent(knobProps.space, level);
   return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
-    children: items.map((item, index) => /* @__PURE__ */(0, import_react3.createElement)(import_tamagui.XStack, {
-      ...knobProps.borderRadius,
-      key: index,
-      padding: groupItemPaddingMap[knobProps.space] ?? "$2",
-      paddingInlineStart: "$4",
-      backgroundColor: index % 2 === 0 ? "$background" : "$color2",
-      borderBottomWidth: 1,
-      borderBottomColor: "$borderColor"
-    }, columns.length > 0 ? columns.map((column, colIndex) => {
-      const key = column.accessorKey || column.id || `col-${colIndex}`;
-      const value = item[key];
-      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
-        flex: 1,
-        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-          fontSize: groupMetaSizeMap[knobProps.sizeToken] ?? "$3",
-          children: String(value ?? "")
-        })
-      }, key);
-    }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-      fontSize: groupMetaSizeMap[knobProps.sizeToken] ?? "$3",
-      children: JSON.stringify(item, null, 2)
-    })))
+    children: items.map((item, index) => {
+      const position = (0, import_theme.getGroupPosition)(index, items.length);
+      const isLast = position === "last" || position === "only";
+      const corners = (0, import_theme.stackEdgeRadius)(knobProps.borderRadius.borderRadius, {
+        start: false,
+        end: stackEnd && isLast
+      });
+      return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+        children: [index > 0 ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+          ...import_theme.hairline.line
+        }) : null, /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
+          ...corners,
+          padding: groupItemPaddingMap[knobProps.space] ?? "$2",
+          paddingInlineStart: indent + 12,
+          overflow: "hidden",
+          backgroundColor: index % 2 === 0 ? "$background" : "$color2",
+          hoverStyle: {
+            backgroundColor: "$backgroundHover",
+            ...corners
+          },
+          ...{
+            "data-testid": "data-table-group-item",
+            "data-group-position": position,
+            "data-stack-end": stackEnd && isLast ? "true" : "false"
+          },
+          children: columns.length > 0 ? columns.map((column, colIndex) => {
+            const key = column.accessorKey || column.id || `col-${colIndex}`;
+            const value = item[key];
+            return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+              flex: 1,
+              minWidth: 0,
+              children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+                fontSize: metaSize,
+                numberOfLines: 1,
+                children: formatCellValue(value)
+              })
+            }, key);
+          }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+            fontSize: metaSize,
+            children: JSON.stringify(item, null, 2)
+          })
+        })]
+      }, index);
+    })
   });
 }
 function GroupFooter({
@@ -300,8 +403,11 @@ function GroupFooter({
   level,
   renderCustomFooter
 }) {
+  const {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)();
   return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
-    marginInlineStart: level * 20,
+    paddingInlineStart: groupIndent(knobProps.space, level),
     children: renderCustomFooter(group, level)
   });
 }
@@ -360,6 +466,18 @@ function DataTableGroupingConfig(props) {
     };
     onConfigChange(newConfig);
   };
+  const handleMoveGroupBy = (index, direction) => {
+    const next = [...currentConfig.columns];
+    const swap = index + direction;
+    if (swap < 0 || swap >= next.length) return;
+    [next[index], next[swap]] = [next[swap], next[index]];
+    onConfigChange({
+      ...currentConfig,
+      columns: next
+    });
+  };
+  const iconSize = groupIconSize(String(sz));
+  const radius = knobProps.borderRadius.borderRadius;
   return (
     // LC-06/LC-10: collision handling — the config list grows with every
     // group-by/aggregation added and must clamp + scroll inside the viewport
@@ -377,7 +495,7 @@ function DataTableGroupingConfig(props) {
           size: knobProps.sizeToken,
           variant: "outlined",
           icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.GearIcon, {
-            size: 16
+            size: iconSize
           }),
           disabled,
           "aria-label": "Grouping configuration",
@@ -385,12 +503,12 @@ function DataTableGroupingConfig(props) {
             alignItems: "center",
             gap: "$2",
             children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.ChartBarIcon, {
-              size: 16
+              size: iconSize
             }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
               children: "Group & Aggregate"
             }), (currentConfig.columns.length > 0 || currentConfig.aggregations.length > 0) && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
               backgroundColor: "$color6",
-              borderRadius: knobProps.borderRadius.borderRadius,
+              borderRadius: 1e3,
               paddingHorizontal: "$1",
               paddingVertical: 2,
               minWidth: 20,
@@ -447,29 +565,61 @@ function DataTableGroupingConfig(props) {
                   children: [currentConfig.columns.length, " selected"]
                 })]
               }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
-                gap: "$1",
                 children: currentConfig.columns.map((columnKey, index) => {
                   const column = columns.find(col => (col.accessorKey || col.id) === columnKey);
-                  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
-                    alignItems: "center",
-                    gap: "$2",
-                    padding: "$2",
-                    ...{
-                      backgroundColor: "$color2"
-                    },
-                    borderRadius: knobProps.borderRadius.borderRadius,
-                    children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Text, {
-                      fontSize: "$3",
-                      flex: 1,
-                      children: [column?.header || columnKey, " (", index + 1, ")"]
-                    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
-                      size: knobProps.sizeToken,
-                      variant: "outlined",
-                      icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.MinusIcon, {
-                        size: 16
-                      }),
-                      onPress: () => handleRemoveGroupBy(columnKey),
-                      "aria-label": `Remove grouping by ${column?.header || columnKey}`
+                  const position = (0, import_theme.getGroupPosition)(index, currentConfig.columns.length);
+                  const corners = (0, import_theme.stackRadiusProps)(position, radius);
+                  const label = String(column?.header || columnKey);
+                  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+                    children: [index > 0 ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+                      ...import_theme.hairline.line
+                    }) : null, /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+                      alignItems: "center",
+                      gap: "$2",
+                      padding: "$2",
+                      overflow: "hidden",
+                      backgroundColor: "$color2",
+                      ...corners,
+                      hoverStyle: {
+                        backgroundColor: "$backgroundHover",
+                        ...corners
+                      },
+                      ...{
+                        "data-group-position": position
+                      },
+                      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+                        fontSize: "$3",
+                        flex: 1,
+                        numberOfLines: 1,
+                        children: `${label} \xB7 ${index + 1}`
+                      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+                        size: "$2",
+                        variant: "outlined",
+                        icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.ArrowUpIcon, {
+                          size: iconSize
+                        }),
+                        disabled: disabled || index === 0,
+                        onPress: () => handleMoveGroupBy(index, -1),
+                        "aria-label": `Move ${label} up`
+                      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+                        size: "$2",
+                        variant: "outlined",
+                        icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.ArrowDownIcon, {
+                          size: iconSize
+                        }),
+                        disabled: disabled || index === currentConfig.columns.length - 1,
+                        onPress: () => handleMoveGroupBy(index, 1),
+                        "aria-label": `Move ${label} down`
+                      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+                        size: "$2",
+                        variant: "outlined",
+                        icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.MinusIcon, {
+                          size: iconSize
+                        }),
+                        disabled,
+                        onPress: () => handleRemoveGroupBy(columnKey),
+                        "aria-label": `Remove grouping by ${label}`
+                      })]
                     })]
                   }, columnKey);
                 })
@@ -504,29 +654,44 @@ function DataTableGroupingConfig(props) {
                   children: [currentConfig.aggregations.length, " configured"]
                 })]
               }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
-                gap: "$1",
-                children: currentConfig.aggregations.map((agg, index) => /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
-                  alignItems: "center",
-                  gap: "$2",
-                  padding: "$2",
-                  ...{
-                    backgroundColor: "$color2"
-                  },
-                  borderRadius: knobProps.borderRadius.borderRadius,
-                  children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Text, {
-                    fontSize: "$3",
-                    flex: 1,
-                    children: [agg.function, "(", agg.column, ")", agg.label && ` as "${agg.label}"`]
-                  }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
-                    size: knobProps.sizeToken,
-                    variant: "outlined",
-                    icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.MinusIcon, {
-                      size: 16
-                    }),
-                    onPress: () => handleRemoveAggregation(index),
-                    "aria-label": `Remove ${agg.function} aggregation on ${agg.column}`
-                  })]
-                }, index))
+                children: currentConfig.aggregations.map((agg, index) => {
+                  const position = (0, import_theme.getGroupPosition)(index, currentConfig.aggregations.length);
+                  const corners = (0, import_theme.stackRadiusProps)(position, radius);
+                  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+                    children: [index > 0 ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+                      ...import_theme.hairline.line
+                    }) : null, /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+                      alignItems: "center",
+                      gap: "$2",
+                      padding: "$2",
+                      overflow: "hidden",
+                      backgroundColor: "$color2",
+                      ...corners,
+                      hoverStyle: {
+                        backgroundColor: "$backgroundHover",
+                        ...corners
+                      },
+                      ...{
+                        "data-group-position": position
+                      },
+                      children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Text, {
+                        fontSize: "$3",
+                        flex: 1,
+                        numberOfLines: 1,
+                        children: [agg.function, "(", agg.column, ")", agg.label && ` as "${agg.label}"`]
+                      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+                        size: "$2",
+                        variant: "outlined",
+                        icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.MinusIcon, {
+                          size: iconSize
+                        }),
+                        disabled,
+                        onPress: () => handleRemoveAggregation(index),
+                        "aria-label": `Remove ${agg.function} aggregation on ${agg.column}`
+                      })]
+                    })]
+                  }, `${agg.function}-${agg.column}-${index}`);
+                })
               }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(AggregationSelector, {
                 columns: aggregatableColumns,
                 onAddAggregation: handleAddAggregation