@multiplatform.one/table 6.1.0 → 6.3.0

package/dist/esm/components/DataTableGrouping/index.native.js

@@ -1,15 +1,33 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { createElement as _createElement } from "react";
-import { ChartBarIcon, CalculatorIcon, CaretDownIcon, CaretRightIcon, CaretUpIcon, HashIcon, MinusIcon, PlusIcon, GearIcon } from "@phosphor-icons/react";
+import { ChartBarIcon, CalculatorIcon, CaretDownIcon, CaretLeftIcon, CaretRightIcon, CaretUpIcon, HashIcon, MinusIcon, PlusIcon, GearIcon } from "@phosphor-icons/react";
+import { useDirection } from "@multiplatform.one/components";
 import { useResolvedKnobs } from "@multiplatform.one/theme";
 import { useCallback, useMemo, useState } from "react";
 import { Button, Select } from "@multiplatform.one/forms";
-import { Popover, Separator, Text, View, XStack, YStack } from "tamagui";
+import { Popover, Separator, Text, View, XStack, YStack, isWeb } from "tamagui";
+import { getViewLeafRows } from "../../utils/viewData.native.js";
 import { useDataTableState } from "../DataTable/DataTableStateContext.native.js";
+var EMPTY_EXPANDED_GROUPS = /* @__PURE__ */new Set();
+var groupHeaderPaddingMap = {
+  small: "$2",
+  medium: "$3",
+  large: "$4"
+};
+var groupItemPaddingMap = {
+  small: "$1",
+  medium: "$2",
+  large: "$3"
+};
+var groupMetaSizeMap = {
+  $3: "$2",
+  $4: "$3",
+  $5: "$4"
+};
 function DataTableGrouping(props) {
-  var _ref, _props_data, _props_columns;
+  var _props_data, _props_columns;
   var ctx = useDataTableState();
-  var data = (_ref = (_props_data = props.data) !== null && _props_data !== void 0 ? _props_data : ctx === null || ctx === void 0 ? void 0 : ctx.computed.filteredData) !== null && _ref !== void 0 ? _ref : [];
+  var data = (_props_data = props.data) !== null && _props_data !== void 0 ? _props_data : ctx ? getViewLeafRows(ctx.table) : [];
   var columns = (_props_columns = props.columns) !== null && _props_columns !== void 0 ? _props_columns : ctx ? ctx.table.getAllColumns().map(function (col) {
     return {
       id: col.id,
@@ -23,10 +41,15 @@ function DataTableGrouping(props) {
     renderGroupHeader,
     renderGroupFooter,
     showAggregations = true,
-    expandedGroups = /* @__PURE__ */new Set(),
+    expandedGroups: expandedGroupsProp,
     onExpandedGroupsChange,
     maxDepth = 5
   } = props;
+  var isExpansionControlled = onExpandedGroupsChange != null;
+  var [internalExpandedGroups, setInternalExpandedGroups] = useState(function () {
+    return new Set(expandedGroupsProp);
+  });
+  var expandedGroups = isExpansionControlled ? expandedGroupsProp !== null && expandedGroupsProp !== void 0 ? expandedGroupsProp : EMPTY_EXPANDED_GROUPS : internalExpandedGroups;
   var groupedData = useMemo(function () {
     if (!groupBy.length) return null;
     return groupData(data, groupBy, aggregations, maxDepth);
@@ -38,8 +61,12 @@ function DataTableGrouping(props) {
     } else {
       newExpanded.add(groupKey);
     }
-    onExpandedGroupsChange === null || onExpandedGroupsChange === void 0 ? void 0 : onExpandedGroupsChange(newExpanded);
-  }, [expandedGroups, onExpandedGroupsChange]);
+    if (isExpansionControlled) {
+      onExpandedGroupsChange === null || onExpandedGroupsChange === void 0 ? void 0 : onExpandedGroupsChange(newExpanded);
+    } else {
+      setInternalExpandedGroups(newExpanded);
+    }
+  }, [expandedGroups, isExpansionControlled, onExpandedGroupsChange]);
   if (!groupedData) return null;
   return /* @__PURE__ */_jsx(GroupedDataRenderer, {
     groupedData,
@@ -67,16 +94,18 @@ function GroupedDataRenderer(param) {
   } = param;
   return /* @__PURE__ */_jsx(YStack, {
     children: groupedData.map(function (group) {
+      var _ref;
+      var _group_children;
       var groupKey = getGroupKey(group);
       var isExpanded = expandedGroups.has(groupKey);
-      var hasChildren = group.children && group.children.length > 0;
+      var isExpandable = ((_ref = (_group_children = group.children) === null || _group_children === void 0 ? void 0 : _group_children.length) !== null && _ref !== void 0 ? _ref : 0) > 0 || group.items.length > 0;
       return /* @__PURE__ */_jsxs(YStack, {
         children: [/* Group Header */
         /* @__PURE__ */_jsx(GroupHeader, {
           group,
           level,
           isExpanded,
-          hasChildren: !!hasChildren,
+          hasChildren: isExpandable,
           aggregations,
           showAggregations: showAggregations !== null && showAggregations !== void 0 ? showAggregations : true,
           onToggleExpansion: function onToggleExpansion1() {
@@ -85,7 +114,7 @@ function GroupedDataRenderer(param) {
           renderCustomHeader: renderGroupHeader
         }), /* Group Content */
         isExpanded && /* @__PURE__ */_jsx(YStack, {
-          marginLeft: level * 20,
+          marginInlineStart: level * 20,
           children: group.children && group.children.length > 0 ? /* @__PURE__ */_jsx(GroupedDataRenderer, {
             groupedData: group.children,
             columns,
@@ -121,9 +150,11 @@ function GroupHeader(param) {
     onToggleExpansion,
     renderCustomHeader
   } = param;
+  var _groupHeaderPaddingMap_knobProps_space, _groupMetaSizeMap_knobProps_sizeToken;
   var {
     knobProps
   } = useResolvedKnobs();
+  var CollapsedCaretIcon = useDirection() === "rtl" ? CaretLeftIcon : CaretRightIcon;
   if (renderCustomHeader) {
     return /* @__PURE__ */_jsx(View, {
       children: renderCustomHeader(group, level)
@@ -132,10 +163,20 @@ function GroupHeader(param) {
   return /* @__PURE__ */_jsxs(XStack, {
     ...knobProps.borderRadius,
     alignItems: "center",
-    padding: "$3",
-    backgroundColor: "$color2",
-    borderLeftWidth: 4,
-    borderLeftColor: "$color6",
+    padding: (_groupHeaderPaddingMap_knobProps_space = groupHeaderPaddingMap[knobProps.space]) !== null && _groupHeaderPaddingMap_knobProps_space !== void 0 ? _groupHeaderPaddingMap_knobProps_space : "$3",
+    // SF-CONTROL fill tier: filled keeps the previous $color2; outlined
+    // flips to transparent (InputParts pattern, spec:388-392).
+    backgroundColor: knobProps.inputBackground,
+    // Logical start accent so the group rail mirrors in RTL; tamagui
+    // borderStartWidth does not compile to working CSS on web (SB-M-1215).
+    ...(isWeb ? {
+      borderInlineStartWidth: 4,
+      borderInlineStartStyle: "solid",
+      borderInlineStartColor: "$color6"
+    } : {
+      borderStartWidth: 4,
+      borderStartColor: "$color6"
+    }),
     cursor: "pointer",
     hoverStyle: {
       backgroundColor: level === 0 ? "$accentBackground" : {
@@ -143,13 +184,26 @@ function GroupHeader(param) {
       }.backgroundColor
     },
     onPress: onToggleExpansion,
+    // Keyboard + AT contract: the header is a toggle button with an
+    // expanded state; Enter/Space activate it like the pointer does.
+    role: "button",
+    tabIndex: 0,
+    "aria-expanded": isExpanded,
+    ...{
+      onKeyDown: function onKeyDown(e) {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          onToggleExpansion();
+        }
+      }
+    },
     children: [/* Expansion Toggle */
     /* @__PURE__ */_jsx(View, {
       width: 20,
       alignItems: "center",
       children: hasChildren && (isExpanded ? /* @__PURE__ */_jsx(CaretDownIcon, {
         size: 16
-      }) : /* @__PURE__ */_jsx(CaretRightIcon, {
+      }) : /* @__PURE__ */_jsx(CollapsedCaretIcon, {
         size: 16
       }))
     }), /* Group Info */
@@ -159,11 +213,14 @@ function GroupHeader(param) {
         alignItems: "center",
         gap: "$2",
         children: [/* @__PURE__ */_jsx(Text, {
-          fontSize: "$4",
+          fontSize: knobProps.sizeToken,
           fontWeight: "600",
-          children: group.value || "No Value"
+          children: (
+          /* Nullish/empty shows the placeholder; falsy-but-real values
+          like 0 and false render as themselves. */
+          group.value == null || group.value === "" ? "No Value" : String(group.value))
         }), /* @__PURE__ */_jsxs(Text, {
-          fontSize: "$3",
+          fontSize: (_groupMetaSizeMap_knobProps_sizeToken = groupMetaSizeMap[knobProps.sizeToken]) !== null && _groupMetaSizeMap_knobProps_sizeToken !== void 0 ? _groupMetaSizeMap_knobProps_sizeToken : "$3",
           color: "$color10",
           children: ["(", group.count, " item", group.count !== 1 ? "s" : "", ")"]
         })]
@@ -172,16 +229,17 @@ function GroupHeader(param) {
         gap: "$4",
         marginTop: "$2",
         children: aggregations.map(function (agg, index) {
+          var _groupMetaSizeMap_knobProps_sizeToken2, _groupMetaSizeMap_knobProps_sizeToken1;
           var _group_aggregations_agg_column;
           return /* @__PURE__ */_jsxs(XStack, {
             alignItems: "center",
             gap: "$1",
             children: [/* @__PURE__ */_jsxs(Text, {
-              fontSize: "$3",
+              fontSize: (_groupMetaSizeMap_knobProps_sizeToken2 = groupMetaSizeMap[knobProps.sizeToken]) !== null && _groupMetaSizeMap_knobProps_sizeToken2 !== void 0 ? _groupMetaSizeMap_knobProps_sizeToken2 : "$3",
               color: "$color10",
               children: [agg.label || `${agg.function}(${agg.column})`, ":"]
             }), /* @__PURE__ */_jsx(Text, {
-              fontSize: "$3",
+              fontSize: (_groupMetaSizeMap_knobProps_sizeToken1 = groupMetaSizeMap[knobProps.sizeToken]) !== null && _groupMetaSizeMap_knobProps_sizeToken1 !== void 0 ? _groupMetaSizeMap_knobProps_sizeToken1 : "$3",
               fontWeight: "500",
               children: ((_group_aggregations_agg_column = group.aggregations[agg.column]) === null || _group_aggregations_agg_column === void 0 ? void 0 : _group_aggregations_agg_column[agg.function]) || 0
             })]
@@ -201,26 +259,28 @@ function GroupItems(param) {
   } = useResolvedKnobs();
   return /* @__PURE__ */_jsx(YStack, {
     children: items.map(function (item, index) {
+      var _groupItemPaddingMap_knobProps_space, _groupMetaSizeMap_knobProps_sizeToken;
       return /* @__PURE__ */_createElement(XStack, {
         ...knobProps.borderRadius,
         key: index,
-        padding: "$2",
-        paddingLeft: "$4",
+        padding: (_groupItemPaddingMap_knobProps_space = groupItemPaddingMap[knobProps.space]) !== null && _groupItemPaddingMap_knobProps_space !== void 0 ? _groupItemPaddingMap_knobProps_space : "$2",
+        paddingInlineStart: "$4",
         backgroundColor: index % 2 === 0 ? "$background" : "$color2",
         borderBottomWidth: 1,
         borderBottomColor: "$borderColor"
       }, columns.length > 0 ? columns.map(function (column, colIndex) {
+        var _groupMetaSizeMap_knobProps_sizeToken2;
         var key = column.accessorKey || column.id || `col-${colIndex}`;
         var value = item[key];
         return /* @__PURE__ */_jsx(View, {
           flex: 1,
           children: /* @__PURE__ */_jsx(Text, {
-            fontSize: "$3",
+            fontSize: (_groupMetaSizeMap_knobProps_sizeToken2 = groupMetaSizeMap[knobProps.sizeToken]) !== null && _groupMetaSizeMap_knobProps_sizeToken2 !== void 0 ? _groupMetaSizeMap_knobProps_sizeToken2 : "$3",
             children: String(value !== null && value !== void 0 ? value : "")
           })
         }, key);
       }) : /* @__PURE__ */_jsx(Text, {
-        fontSize: "$3",
+        fontSize: (_groupMetaSizeMap_knobProps_sizeToken = groupMetaSizeMap[knobProps.sizeToken]) !== null && _groupMetaSizeMap_knobProps_sizeToken !== void 0 ? _groupMetaSizeMap_knobProps_sizeToken : "$3",
         children: JSON.stringify(item, null, 2)
       }));
     })
@@ -233,7 +293,7 @@ function GroupFooter(param) {
     renderCustomFooter
   } = param;
   return /* @__PURE__ */_jsx(View, {
-    marginLeft: level * 20,
+    marginInlineStart: level * 20,
     children: renderCustomFooter(group, level)
   });
 }
@@ -299,195 +359,213 @@ function DataTableGroupingConfig(props) {
     };
     onConfigChange(newConfig);
   };
-  return /* @__PURE__ */_jsxs(Popover, {
-    open: isOpen,
-    onOpenChange: setIsOpen,
-    children: [/* @__PURE__ */_jsx(Popover.Trigger, {
-      asChild: true,
-      children: /* @__PURE__ */_jsx(Button, {
-        size: knobProps.sizeToken,
-        variant: "outlined",
-        icon: /* @__PURE__ */_jsx(GearIcon, {
-          size: 16
-        }),
-        disabled,
-        "aria-label": "Grouping configuration",
-        children: /* @__PURE__ */_jsxs(XStack, {
-          alignItems: "center",
-          gap: "$2",
-          children: [/* @__PURE__ */_jsx(ChartBarIcon, {
+  return (
+    // LC-06/LC-10: collision handling — the config list grows with every
+    // group-by/aggregation added and must clamp + scroll inside the viewport
+    // instead of painting rows past the fold (same fix as the export popover).
+    /* @__PURE__ */
+    _jsxs(Popover, {
+      open: isOpen,
+      onOpenChange: setIsOpen,
+      stayInFrame: true,
+      allowFlip: true,
+      resize: true,
+      children: [/* @__PURE__ */_jsx(Popover.Trigger, {
+        asChild: true,
+        children: /* @__PURE__ */_jsx(Button, {
+          size: knobProps.sizeToken,
+          variant: "outlined",
+          icon: /* @__PURE__ */_jsx(GearIcon, {
             size: 16
-          }), /* @__PURE__ */_jsx(Text, {
-            children: "Group & Aggregate"
-          }), (currentConfig.columns.length > 0 || currentConfig.aggregations.length > 0) && /* @__PURE__ */_jsx(View, {
-            backgroundColor: "$color6",
-            borderRadius: knobProps.borderRadius.borderRadius,
-            paddingHorizontal: "$1",
-            paddingVertical: 2,
-            minWidth: 20,
+          }),
+          disabled,
+          "aria-label": "Grouping configuration",
+          children: /* @__PURE__ */_jsxs(XStack, {
             alignItems: "center",
-            children: /* @__PURE__ */_jsx(Text, {
-              fontSize: "$2",
-              color: "white",
-              fontWeight: "600",
-              children: currentConfig.columns.length + currentConfig.aggregations.length
-            })
-          })]
+            gap: "$2",
+            children: [/* @__PURE__ */_jsx(ChartBarIcon, {
+              size: 16
+            }), /* @__PURE__ */_jsx(Text, {
+              children: "Group & Aggregate"
+            }), (currentConfig.columns.length > 0 || currentConfig.aggregations.length > 0) && /* @__PURE__ */_jsx(View, {
+              backgroundColor: "$color6",
+              borderRadius: knobProps.borderRadius.borderRadius,
+              paddingHorizontal: "$1",
+              paddingVertical: 2,
+              minWidth: 20,
+              alignItems: "center",
+              children: (
+              /* LC-05/DG-COL-01: theme ink, not a named hue — "white" was
+              unreadable on the light-scheme $color6 badge fill. */
+              /* @__PURE__ */
+              _jsx(Text, {
+                fontSize: "$2",
+                color: "$color12",
+                fontWeight: "600",
+                children: currentConfig.columns.length + currentConfig.aggregations.length
+              }))
+            })]
+          })
         })
-      })
-    }), /* @__PURE__ */_jsx(Popover.Content, {
-      ...knobProps.borderRadius,
-      borderWidth: 1,
-      borderColor: "$borderColor",
-      enterStyle: {
-        x: 0,
-        y: -10,
-        opacity: 0
-      },
-      exitStyle: {
-        x: 0,
-        y: -10,
-        opacity: 0
-      },
-      minWidth: popoverMinWidth,
-      maxWidth: popoverMaxWidth,
-      children: /* @__PURE__ */_jsxs(YStack, {
-        ...knobProps.panelPadding,
-        gap: "$4",
-        children: [/* @__PURE__ */_jsx(Text, {
-          fontSize: "$5",
-          fontWeight: "600",
-          children: "Grouping & Aggregation"
-        }), /* Group By Section */
-        /* @__PURE__ */_jsxs(YStack, {
-          gap: "$3",
-          children: [/* @__PURE__ */_jsxs(XStack, {
-            justifyContent: "space-between",
-            alignItems: "center",
+      }), /* @__PURE__ */_jsx(Popover.Content, {
+        ...knobProps.borderRadius,
+        borderWidth: 1,
+        borderColor: "$borderColor",
+        enterStyle: {
+          x: 0,
+          y: -10,
+          opacity: 0
+        },
+        exitStyle: {
+          x: 0,
+          y: -10,
+          opacity: 0
+        },
+        minWidth: popoverMinWidth,
+        maxWidth: popoverMaxWidth,
+        padding: 0,
+        overflow: "hidden",
+        children: /* @__PURE__ */_jsx(Popover.ScrollView, {
+          minHeight: 0,
+          children: /* @__PURE__ */_jsxs(YStack, {
+            ...knobProps.panelPadding,
+            gap: "$4",
             children: [/* @__PURE__ */_jsx(Text, {
-              fontSize: "$4",
-              fontWeight: "500",
-              children: "Group By"
-            }), /* @__PURE__ */_jsxs(Text, {
-              fontSize: "$2",
-              color: "$color10",
-              children: [currentConfig.columns.length, " selected"]
-            })]
-          }), /* Current Group By Columns */
-          /* @__PURE__ */_jsx(YStack, {
-            gap: "$1",
-            children: currentConfig.columns.map(function (columnKey, index) {
-              var column = columns.find(function (col) {
-                return (col.accessorKey || col.id) === columnKey;
-              });
-              return /* @__PURE__ */_jsxs(XStack, {
+              fontSize: "$5",
+              fontWeight: "600",
+              children: "Grouping & Aggregation"
+            }), /* Group By Section */
+            /* @__PURE__ */_jsxs(YStack, {
+              gap: "$3",
+              children: [/* @__PURE__ */_jsxs(XStack, {
+                justifyContent: "space-between",
                 alignItems: "center",
+                children: [/* @__PURE__ */_jsx(Text, {
+                  fontSize: "$4",
+                  fontWeight: "500",
+                  children: "Group By"
+                }), /* @__PURE__ */_jsxs(Text, {
+                  fontSize: "$2",
+                  color: "$color10",
+                  children: [currentConfig.columns.length, " selected"]
+                })]
+              }), /* Current Group By Columns */
+              /* @__PURE__ */_jsx(YStack, {
+                gap: "$1",
+                children: currentConfig.columns.map(function (columnKey, index) {
+                  var column = columns.find(function (col) {
+                    return (col.accessorKey || col.id) === columnKey;
+                  });
+                  return /* @__PURE__ */_jsxs(XStack, {
+                    alignItems: "center",
+                    gap: "$2",
+                    padding: "$2",
+                    backgroundColor: "$color2",
+                    borderRadius: knobProps.borderRadius.borderRadius,
+                    children: [/* @__PURE__ */_jsxs(Text, {
+                      fontSize: "$3",
+                      flex: 1,
+                      children: [(column === null || column === void 0 ? void 0 : column.header) || columnKey, " (", index + 1, ")"]
+                    }), /* @__PURE__ */_jsx(Button, {
+                      size: knobProps.sizeToken,
+                      variant: "outlined",
+                      icon: /* @__PURE__ */_jsx(MinusIcon, {
+                        size: 16
+                      }),
+                      onPress: function onPress() {
+                        return handleRemoveGroupBy(columnKey);
+                      },
+                      "aria-label": `Remove grouping by ${(column === null || column === void 0 ? void 0 : column.header) || columnKey}`
+                    })]
+                  }, columnKey);
+                })
+              }), /* Add Group By Column */
+              availableColumns.length > 0 && /* @__PURE__ */_jsxs(XStack, {
                 gap: "$2",
-                padding: "$2",
-                backgroundColor: "$color2",
-                borderRadius: knobProps.borderRadius.borderRadius,
-                children: [/* @__PURE__ */_jsxs(Text, {
+                children: [/* @__PURE__ */_jsx(Text, {
                   fontSize: "$3",
-                  flex: 1,
-                  children: [(column === null || column === void 0 ? void 0 : column.header) || columnKey, " (", index + 1, ")"]
-                }), /* @__PURE__ */_jsx(Button, {
-                  size: knobProps.sizeToken,
-                  variant: "outlined",
-                  icon: /* @__PURE__ */_jsx(MinusIcon, {
-                    size: 16
-                  }),
-                  onPress: function onPress() {
-                    return handleRemoveGroupBy(columnKey);
-                  },
-                  "aria-label": `Remove grouping by ${(column === null || column === void 0 ? void 0 : column.header) || columnKey}`
+                  color: "$color10",
+                  children: "Add:"
+                }), availableColumns.slice(0, 3).map(function (column) {
+                  var key = column.accessorKey || column.id || "";
+                  return /* @__PURE__ */_jsx(Button, {
+                    size: "$2",
+                    variant: "outlined",
+                    onPress: function onPress() {
+                      return handleAddGroupBy(key);
+                    },
+                    children: column.header || key
+                  }, key);
                 })]
-              }, columnKey);
-            })
-          }), /* Add Group By Column */
-          availableColumns.length > 0 && /* @__PURE__ */_jsxs(XStack, {
-            gap: "$2",
-            children: [/* @__PURE__ */_jsx(Text, {
-              fontSize: "$3",
-              color: "$color10",
-              children: "Add:"
-            }), availableColumns.slice(0, 3).map(function (column) {
-              var key = column.accessorKey || column.id || "";
-              return /* @__PURE__ */_jsx(Button, {
-                size: "$2",
+              })]
+            }), /* @__PURE__ */_jsx(Separator, {}), /* Aggregation Section */
+            /* @__PURE__ */_jsxs(YStack, {
+              gap: "$3",
+              children: [/* @__PURE__ */_jsxs(XStack, {
+                justifyContent: "space-between",
+                alignItems: "center",
+                children: [/* @__PURE__ */_jsx(Text, {
+                  fontSize: "$4",
+                  fontWeight: "500",
+                  children: "Aggregations"
+                }), /* @__PURE__ */_jsxs(Text, {
+                  fontSize: "$2",
+                  color: "$color10",
+                  children: [currentConfig.aggregations.length, " configured"]
+                })]
+              }), /* Current Aggregations */
+              /* @__PURE__ */_jsx(YStack, {
+                gap: "$1",
+                children: currentConfig.aggregations.map(function (agg, index) {
+                  return /* @__PURE__ */_jsxs(XStack, {
+                    alignItems: "center",
+                    gap: "$2",
+                    padding: "$2",
+                    backgroundColor: "$color2",
+                    borderRadius: knobProps.borderRadius.borderRadius,
+                    children: [/* @__PURE__ */_jsxs(Text, {
+                      fontSize: "$3",
+                      flex: 1,
+                      children: [agg.function, "(", agg.column, ")", agg.label && ` as "${agg.label}"`]
+                    }), /* @__PURE__ */_jsx(Button, {
+                      size: knobProps.sizeToken,
+                      variant: "outlined",
+                      icon: /* @__PURE__ */_jsx(MinusIcon, {
+                        size: 16
+                      }),
+                      onPress: function onPress() {
+                        return handleRemoveAggregation(index);
+                      },
+                      "aria-label": `Remove ${agg.function} aggregation on ${agg.column}`
+                    })]
+                  }, index);
+                })
+              }), /* Add Aggregation */
+              /* @__PURE__ */_jsx(AggregationSelector, {
+                columns: aggregatableColumns,
+                onAddAggregation: handleAddAggregation
+              })]
+            }), /* Clear All */
+            (currentConfig.columns.length > 0 || currentConfig.aggregations.length > 0) && /* @__PURE__ */_jsxs(_Fragment, {
+              children: [/* @__PURE__ */_jsx(Separator, {}), /* @__PURE__ */_jsx(Button, {
+                size: knobProps.sizeToken,
                 variant: "outlined",
+                error: true,
                 onPress: function onPress() {
-                  return handleAddGroupBy(key);
+                  return onConfigChange({
+                    columns: [],
+                    aggregations: []
+                  });
                 },
-                children: column.header || key
-              }, key);
-            })]
-          })]
-        }), /* @__PURE__ */_jsx(Separator, {}), /* Aggregation Section */
-        /* @__PURE__ */_jsxs(YStack, {
-          gap: "$3",
-          children: [/* @__PURE__ */_jsxs(XStack, {
-            justifyContent: "space-between",
-            alignItems: "center",
-            children: [/* @__PURE__ */_jsx(Text, {
-              fontSize: "$4",
-              fontWeight: "500",
-              children: "Aggregations"
-            }), /* @__PURE__ */_jsxs(Text, {
-              fontSize: "$2",
-              color: "$color10",
-              children: [currentConfig.aggregations.length, " configured"]
+                "aria-label": "Clear all grouping and aggregation",
+                children: "Clear All Grouping"
+              })]
             })]
-          }), /* Current Aggregations */
-          /* @__PURE__ */_jsx(YStack, {
-            gap: "$1",
-            children: currentConfig.aggregations.map(function (agg, index) {
-              return /* @__PURE__ */_jsxs(XStack, {
-                alignItems: "center",
-                gap: "$2",
-                padding: "$2",
-                backgroundColor: "$color2",
-                borderRadius: knobProps.borderRadius.borderRadius,
-                children: [/* @__PURE__ */_jsxs(Text, {
-                  fontSize: "$3",
-                  flex: 1,
-                  children: [agg.function, "(", agg.column, ")", agg.label && ` as "${agg.label}"`]
-                }), /* @__PURE__ */_jsx(Button, {
-                  size: knobProps.sizeToken,
-                  variant: "outlined",
-                  icon: /* @__PURE__ */_jsx(MinusIcon, {
-                    size: 16
-                  }),
-                  onPress: function onPress() {
-                    return handleRemoveAggregation(index);
-                  },
-                  "aria-label": `Remove ${agg.function} aggregation on ${agg.column}`
-                })]
-              }, index);
-            })
-          }), /* Add Aggregation */
-          /* @__PURE__ */_jsx(AggregationSelector, {
-            columns: aggregatableColumns,
-            onAddAggregation: handleAddAggregation
-          })]
-        }), /* Clear All */
-        (currentConfig.columns.length > 0 || currentConfig.aggregations.length > 0) && /* @__PURE__ */_jsxs(_Fragment, {
-          children: [/* @__PURE__ */_jsx(Separator, {}), /* @__PURE__ */_jsx(Button, {
-            size: knobProps.sizeToken,
-            variant: "outlined",
-            theme: "red",
-            onPress: function onPress() {
-              return onConfigChange({
-                columns: [],
-                aggregations: []
-              });
-            },
-            "aria-label": "Clear all grouping and aggregation",
-            children: "Clear All Grouping"
-          })]
-        })]
-      })
-    })]
-  });
+          })
+        })
+      })]
+    })
+  );
 }
 function AggregationSelector(param) {
   var {
@@ -610,7 +688,7 @@ function groupData(data, groupByColumns, aggregations) {
   var grouped = /* @__PURE__ */new Map();
   data.forEach(function (item) {
     var firstGroupValue = item[groupByColumns[0]];
-    var key = String(firstGroupValue || "null");
+    var key = String(firstGroupValue !== null && firstGroupValue !== void 0 ? firstGroupValue : "null");
     if (!grouped.has(key)) {
       grouped.set(key, {
         items: [],
@@ -656,12 +734,14 @@ function groupData(data, groupByColumns, aggregations) {
           }
         case "min":
           {
-            aggregationsResult[agg.column].min = values.length > 0 ? Math.min(...values.map(Number)) : 0;
+            var nums = values.map(Number).filter(Number.isFinite);
+            aggregationsResult[agg.column].min = nums.length > 0 ? Math.min(...nums) : 0;
             break;
           }
         case "max":
           {
-            aggregationsResult[agg.column].max = values.length > 0 ? Math.max(...values.map(Number)) : 0;
+            var nums1 = values.map(Number).filter(Number.isFinite);
+            aggregationsResult[agg.column].max = nums1.length > 0 ? Math.max(...nums1) : 0;
             break;
           }
         case "custom":