@multiplatform.one/table 6.0.0

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

@@ -0,0 +1,790 @@
+"use strict";
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
+  return to;
+};
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var DataTableGrouping_exports = {};
+__export(DataTableGrouping_exports, {
+  DataTableGrouping: () => DataTableGrouping,
+  DataTableGroupingConfig: () => DataTableGroupingConfig,
+  groupData: () => groupData,
+  useGrouping: () => useGrouping
+});
+module.exports = __toCommonJS(DataTableGrouping_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_react2 = require("@phosphor-icons/react");
+var import_theme = require("@multiplatform.one/theme");
+var import_react3 = require("react");
+var import_forms = require("@multiplatform.one/forms");
+var import_tamagui = require("tamagui");
+var import_DataTableStateContext = require("../DataTable/DataTableStateContext.native.js");
+function DataTableGrouping(props) {
+  var _ref, _props_data, _props_columns;
+  var ctx = (0, import_DataTableStateContext.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 columns = (_props_columns = props.columns) !== null && _props_columns !== void 0 ? _props_columns : ctx ? ctx.table.getAllColumns().map(function (col) {
+    return {
+      id: col.id,
+      accessorKey: col.id,
+      header: typeof col.columnDef.header === "string" ? col.columnDef.header : col.id
+    };
+  }) : [];
+  var {
+    groupBy = [],
+    aggregations = [],
+    renderGroupHeader,
+    renderGroupFooter,
+    showAggregations = true,
+    expandedGroups = /* @__PURE__ */new Set(),
+    onExpandedGroupsChange,
+    maxDepth = 5
+  } = props;
+  var groupedData = (0, import_react3.useMemo)(function () {
+    if (!groupBy.length) return null;
+    return groupData(data, groupBy, aggregations, maxDepth);
+  }, [data, groupBy, aggregations, maxDepth]);
+  var toggleGroupExpansion = (0, import_react3.useCallback)(function (groupKey) {
+    var newExpanded = new Set(expandedGroups);
+    if (newExpanded.has(groupKey)) {
+      newExpanded.delete(groupKey);
+    } else {
+      newExpanded.add(groupKey);
+    }
+    onExpandedGroupsChange === null || onExpandedGroupsChange === void 0 ? void 0 : onExpandedGroupsChange(newExpanded);
+  }, [expandedGroups, onExpandedGroupsChange]);
+  if (!groupedData) return null;
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(GroupedDataRenderer, {
+    groupedData,
+    columns,
+    level: 0,
+    aggregations,
+    showAggregations,
+    expandedGroups,
+    onToggleExpansion: toggleGroupExpansion,
+    renderGroupHeader,
+    renderGroupFooter
+  });
+}
+function GroupedDataRenderer(param) {
+  var {
+    groupedData,
+    columns,
+    level,
+    aggregations,
+    showAggregations,
+    expandedGroups,
+    onToggleExpansion,
+    renderGroupHeader,
+    renderGroupFooter
+  } = param;
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+    children: groupedData.map(function (group) {
+      var groupKey = getGroupKey(group);
+      var isExpanded = expandedGroups.has(groupKey);
+      var hasChildren = group.children && group.children.length > 0;
+      return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+        children: [/* Group Header */
+        /* @__PURE__ */(0, import_jsx_runtime.jsx)(GroupHeader, {
+          group,
+          level,
+          isExpanded,
+          hasChildren: !!hasChildren,
+          aggregations,
+          showAggregations: showAggregations !== null && showAggregations !== void 0 ? showAggregations : true,
+          onToggleExpansion: function onToggleExpansion1() {
+            return onToggleExpansion(groupKey);
+          },
+          renderCustomHeader: renderGroupHeader
+        }), /* Group Content */
+        isExpanded && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+          marginLeft: level * 20,
+          children: group.children && group.children.length > 0 ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(GroupedDataRenderer, {
+            groupedData: group.children,
+            columns,
+            level: level + 1,
+            aggregations,
+            showAggregations,
+            expandedGroups,
+            onToggleExpansion,
+            renderGroupHeader,
+            renderGroupFooter
+          }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(GroupItems, {
+            items: group.items,
+            columns
+          })
+        }), /* Group Footer */
+        renderGroupFooter && isExpanded && /* @__PURE__ */(0, import_jsx_runtime.jsx)(GroupFooter, {
+          group,
+          level,
+          renderCustomFooter: renderGroupFooter
+        })]
+      }, groupKey);
+    })
+  });
+}
+function GroupHeader(param) {
+  var {
+    group,
+    level,
+    isExpanded,
+    hasChildren,
+    aggregations,
+    showAggregations,
+    onToggleExpansion,
+    renderCustomHeader
+  } = param;
+  var {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)();
+  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,
+    alignItems: "center",
+    padding: "$3",
+    backgroundColor: "$color2",
+    borderLeftWidth: 4,
+    borderLeftColor: "$color6",
+    cursor: "pointer",
+    hoverStyle: {
+      backgroundColor: level === 0 ? "$accentBackground" : {
+        backgroundColor: "$color2"
+      }.backgroundColor
+    },
+    onPress: onToggleExpansion,
+    children: [/* Expansion Toggle */
+    /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+      width: 20,
+      alignItems: "center",
+      children: hasChildren && (isExpanded ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react2.CaretDownIcon, {
+        size: 16
+      }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react2.CaretRightIcon, {
+        size: 16
+      }))
+    }), /* Group Info */
+    /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+      flex: 1,
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+        alignItems: "center",
+        gap: "$2",
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+          fontSize: "$4",
+          fontWeight: "600",
+          children: group.value || "No Value"
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Text, {
+          fontSize: "$3",
+          color: "$color10",
+          children: ["(", group.count, " item", group.count !== 1 ? "s" : "", ")"]
+        })]
+      }), /* Aggregations */
+      showAggregations && aggregations.length > 0 && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
+        gap: "$4",
+        marginTop: "$2",
+        children: aggregations.map(function (agg, index) {
+          var _group_aggregations_agg_column;
+          return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+            alignItems: "center",
+            gap: "$1",
+            children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Text, {
+              fontSize: "$3",
+              color: "$color10",
+              children: [agg.label || `${agg.function}(${agg.column})`, ":"]
+            }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+              fontSize: "$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
+            })]
+          }, index);
+        })
+      })]
+    })]
+  });
+}
+function GroupItems(param) {
+  var {
+    items,
+    columns = []
+  } = param;
+  var {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)();
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+    children: items.map(function (item, index) {
+      return /* @__PURE__ */(0, import_react.createElement)(import_tamagui.XStack, {
+        ...knobProps.borderRadius,
+        key: index,
+        padding: "$2",
+        paddingLeft: "$4",
+        backgroundColor: index % 2 === 0 ? "$background" : "$color2",
+        borderBottomWidth: 1,
+        borderBottomColor: "$borderColor"
+      }, columns.length > 0 ? columns.map(function (column, colIndex) {
+        var key = column.accessorKey || column.id || `col-${colIndex}`;
+        var 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: "$3",
+            children: String(value !== null && value !== void 0 ? value : "")
+          })
+        }, key);
+      }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+        fontSize: "$3",
+        children: JSON.stringify(item, null, 2)
+      }));
+    })
+  });
+}
+function GroupFooter(param) {
+  var {
+    group,
+    level,
+    renderCustomFooter
+  } = param;
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+    marginLeft: level * 20,
+    children: renderCustomFooter(group, level)
+  });
+}
+function DataTableGroupingConfig(props) {
+  var _props_columns;
+  var ctx = (0, import_DataTableStateContext.useDataTableState)();
+  var columns = (_props_columns = props.columns) !== null && _props_columns !== void 0 ? _props_columns : ctx ? ctx.table.getAllColumns().map(function (col) {
+    return {
+      id: col.id,
+      accessorKey: col.id,
+      header: typeof col.columnDef.header === "string" ? col.columnDef.header : col.id
+    };
+  }) : [];
+  var {
+    currentConfig,
+    onConfigChange,
+    disabled = false
+  } = props;
+  var {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)();
+  var sz = knobProps.sizeToken;
+  var popoverMinWidth = sz === "$3" ? 320 : sz === "$5" ? 480 : 400;
+  var popoverMaxWidth = sz === "$3" ? 400 : sz === "$5" ? 560 : 500;
+  var [isOpen, setIsOpen] = (0, import_react3.useState)(false);
+  var availableColumns = columns.filter(function (col) {
+    var key = col.accessorKey || col.id || "";
+    return key && !currentConfig.columns.includes(key);
+  });
+  var aggregatableColumns = columns.filter(function (col) {
+    var type = "type" in col && col.type != null ? col.type : "string";
+    return ["number", "date"].includes(type);
+  });
+  var handleAddGroupBy = function handleAddGroupBy2(columnKey) {
+    var newConfig = {
+      ...currentConfig,
+      columns: [...currentConfig.columns, columnKey]
+    };
+    onConfigChange(newConfig);
+  };
+  var handleRemoveGroupBy = function handleRemoveGroupBy2(columnKey) {
+    var newConfig = {
+      ...currentConfig,
+      columns: currentConfig.columns.filter(function (col) {
+        return col !== columnKey;
+      })
+    };
+    onConfigChange(newConfig);
+  };
+  var handleAddAggregation = function handleAddAggregation2(aggregation) {
+    var newConfig = {
+      ...currentConfig,
+      aggregations: [...currentConfig.aggregations, aggregation]
+    };
+    onConfigChange(newConfig);
+  };
+  var handleRemoveAggregation = function handleRemoveAggregation2(index) {
+    var newConfig = {
+      ...currentConfig,
+      aggregations: currentConfig.aggregations.filter(function (_, i) {
+        return i !== index;
+      })
+    };
+    onConfigChange(newConfig);
+  };
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Popover, {
+    open: isOpen,
+    onOpenChange: setIsOpen,
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Popover.Trigger, {
+      asChild: true,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+        size: knobProps.sizeToken,
+        variant: "outlined",
+        icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react2.GearIcon, {
+          size: 16
+        }),
+        disabled,
+        "aria-label": "Grouping configuration",
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+          alignItems: "center",
+          gap: "$2",
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react2.ChartBarIcon, {
+            size: 16
+          }), /* @__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,
+            paddingHorizontal: "$1",
+            paddingVertical: 2,
+            minWidth: 20,
+            alignItems: "center",
+            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+              fontSize: "$2",
+              color: "white",
+              fontWeight: "600",
+              children: currentConfig.columns.length + currentConfig.aggregations.length
+            })
+          })]
+        })
+      })
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.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__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+        ...knobProps.panelPadding,
+        gap: "$4",
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+          fontSize: "$5",
+          fontWeight: "600",
+          children: "Grouping & Aggregation"
+        }), /* Group By Section */
+        /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+          gap: "$3",
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+            justifyContent: "space-between",
+            alignItems: "center",
+            children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+              fontSize: "$4",
+              fontWeight: "500",
+              children: "Group By"
+            }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Text, {
+              fontSize: "$2",
+              color: "$color10",
+              children: [currentConfig.columns.length, " selected"]
+            })]
+          }), /* Current Group By Columns */
+          /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+            gap: "$1",
+            children: currentConfig.columns.map(function (columnKey, index) {
+              var column = columns.find(function (col) {
+                return (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 === null || column === void 0 ? void 0 : 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_react2.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__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+            gap: "$2",
+            children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+              fontSize: "$3",
+              color: "$color10",
+              children: "Add:"
+            }), availableColumns.slice(0, 3).map(function (column) {
+              var key = column.accessorKey || column.id || "";
+              return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+                size: "$2",
+                variant: "outlined",
+                onPress: function onPress() {
+                  return handleAddGroupBy(key);
+                },
+                children: column.header || key
+              }, key);
+            })]
+          })]
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Separator, {}), /* Aggregation Section */
+        /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+          gap: "$3",
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+            justifyContent: "space-between",
+            alignItems: "center",
+            children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+              fontSize: "$4",
+              fontWeight: "500",
+              children: "Aggregations"
+            }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Text, {
+              fontSize: "$2",
+              color: "$color10",
+              children: [currentConfig.aggregations.length, " configured"]
+            })]
+          }), /* Current Aggregations */
+          /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+            gap: "$1",
+            children: currentConfig.aggregations.map(function (agg, index) {
+              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: [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_react2.MinusIcon, {
+                    size: 16
+                  }),
+                  onPress: function onPress() {
+                    return handleRemoveAggregation(index);
+                  },
+                  "aria-label": `Remove ${agg.function} aggregation on ${agg.column}`
+                })]
+              }, index);
+            })
+          }), /* Add Aggregation */
+          /* @__PURE__ */(0, import_jsx_runtime.jsx)(AggregationSelector, {
+            columns: aggregatableColumns,
+            onAddAggregation: handleAddAggregation
+          })]
+        }), /* Clear All */
+        (currentConfig.columns.length > 0 || currentConfig.aggregations.length > 0) && /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Separator, {}), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.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 {
+    columns,
+    onAddAggregation
+  } = param;
+  var [selectedColumn, setSelectedColumn] = (0, import_react3.useState)("");
+  var [selectedFunction, setSelectedFunction] = (0, import_react3.useState)("count");
+  var aggregationFunctions = [{
+    value: "count",
+    label: "Count",
+    icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react2.HashIcon, {
+      size: 16
+    })
+  }, {
+    value: "sum",
+    label: "Sum",
+    icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react2.PlusIcon, {
+      size: 16
+    })
+  }, {
+    value: "avg",
+    label: "Average",
+    icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react2.CalculatorIcon, {
+      size: 16
+    })
+  }, {
+    value: "min",
+    label: "Minimum",
+    icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react2.MinusIcon, {
+      size: 16
+    })
+  }, {
+    value: "max",
+    label: "Maximum",
+    icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react2.CaretUpIcon, {
+      size: 16
+    })
+  }];
+  var columnOptions = (0, import_react3.useMemo)(function () {
+    return columns.map(function (column) {
+      var key = column.accessorKey || column.id || "";
+      return {
+        value: key,
+        label: typeof column.header === "string" ? column.header : key
+      };
+    });
+  }, [columns]);
+  var functionOptions = (0, import_react3.useMemo)(function () {
+    return aggregationFunctions.map(function (func) {
+      return {
+        value: func.value,
+        label: func.label
+      };
+    });
+  }, []);
+  var handleAdd = function handleAdd2() {
+    if (!selectedColumn) return;
+    var column = columns.find(function (col) {
+      return (col.accessorKey || col.id) === selectedColumn;
+    });
+    var aggregation = {
+      column: selectedColumn,
+      function: selectedFunction,
+      label: `${selectedFunction} of ${(column === null || column === void 0 ? void 0 : column.header) || selectedColumn}`
+    };
+    onAddAggregation(aggregation);
+    setSelectedColumn("");
+    setSelectedFunction("count");
+  };
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+    gap: "$2",
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+      fontSize: "$3",
+      fontWeight: "500",
+      children: "Add Aggregation"
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+      gap: "$2",
+      alignItems: "flex-end",
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+        flex: 1,
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Select, {
+          value: selectedColumn,
+          onValueChange: function onValueChange(v) {
+            if (typeof v === "string") {
+              setSelectedColumn(v);
+            }
+          },
+          options: columnOptions,
+          placeholder: "Select column...",
+          compact: true,
+          "aria-label": "Aggregation column"
+        })
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+        width: 140,
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Select, {
+          value: selectedFunction,
+          onValueChange: function onValueChange(v) {
+            if (typeof v === "string") {
+              setSelectedFunction(v);
+            }
+          },
+          options: functionOptions,
+          compact: true,
+          "aria-label": "Aggregation function"
+        })
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+        size: "$2",
+        variant: "outlined",
+        disabled: !selectedColumn,
+        onPress: handleAdd,
+        children: "Add"
+      })]
+    })]
+  });
+}
+function groupData(data, groupByColumns, aggregations) {
+  var maxDepth = arguments.length > 3 && arguments[3] !== void 0 ? arguments[3] : 5;
+  if (!groupByColumns.length) return null;
+  var grouped = /* @__PURE__ */new Map();
+  data.forEach(function (item) {
+    var firstGroupValue = item[groupByColumns[0]];
+    var key = String(firstGroupValue || "null");
+    if (!grouped.has(key)) {
+      grouped.set(key, {
+        items: [],
+        key: firstGroupValue,
+        path: [firstGroupValue]
+      });
+    }
+    var groupData2 = grouped.get(key);
+    if (groupData2) {
+      groupData2.items.push(item);
+    }
+  });
+  var result = Array.from(grouped.entries()).map(function (param) {
+    var [key, group] = param;
+    var aggregationsResult = {};
+    aggregations.forEach(function (agg) {
+      if (!aggregationsResult[agg.column]) {
+        aggregationsResult[agg.column] = {};
+      }
+      var values = group.items.map(function (item) {
+        return item[agg.column];
+      }).filter(function (val) {
+        return val != null;
+      });
+      switch (agg.function) {
+        case "count":
+          aggregationsResult[agg.column].count = group.items.length;
+          break;
+        case "sum":
+          {
+            aggregationsResult[agg.column].sum = values.reduce(function (sum2, val) {
+              return sum2 + (Number(val) || 0);
+            }, 0);
+            break;
+          }
+        case "avg":
+          {
+            var sum = values.reduce(function (sum2, val) {
+              return sum2 + (Number(val) || 0);
+            }, 0);
+            aggregationsResult[agg.column].avg = values.length > 0 ? Math.round(sum / values.length * 100) / 100 : 0;
+            break;
+          }
+        case "min":
+          {
+            aggregationsResult[agg.column].min = values.length > 0 ? Math.min(...values.map(Number)) : 0;
+            break;
+          }
+        case "max":
+          {
+            aggregationsResult[agg.column].max = values.length > 0 ? Math.max(...values.map(Number)) : 0;
+            break;
+          }
+        case "custom":
+          aggregationsResult[agg.column].custom = agg.customFunction ? agg.customFunction(values) : null;
+          break;
+      }
+    });
+    var groupedItem = {
+      key,
+      value: group.key,
+      count: group.items.length,
+      aggregations: aggregationsResult,
+      items: group.items,
+      level: 0,
+      path: group.path
+    };
+    if (groupByColumns.length > 1 && groupedItem.level < maxDepth - 1) {
+      var childGroups = groupData(group.items, groupByColumns.slice(1), aggregations, maxDepth);
+      if (childGroups) {
+        groupedItem.children = childGroups.map(function (child) {
+          return {
+            ...child,
+            level: child.level + 1,
+            path: [group.key, ...child.path]
+          };
+        });
+      }
+    }
+    return groupedItem;
+  });
+  return result;
+}
+function getGroupKey(group) {
+  return group.path.join(" \u2192 ");
+}
+function useGrouping(param) {
+  var {
+    data,
+    initialConfig = {}
+  } = param;
+  var [config, setConfig] = (0, import_react3.useState)({
+    columns: [],
+    aggregations: [],
+    showEmptyGroups: false,
+    expandedByDefault: false,
+    maxDepth: 5,
+    ...initialConfig
+  });
+  var [expandedGroups, setExpandedGroups] = (0, import_react3.useState)(/* @__PURE__ */new Set());
+  var groupedData = (0, import_react3.useMemo)(function () {
+    if (!config.columns.length) return null;
+    return groupData(data, config.columns, config.aggregations, config.maxDepth);
+  }, [data, config]);
+  var toggleGroupExpansion = (0, import_react3.useCallback)(function (groupKey) {
+    setExpandedGroups(function (prev) {
+      var newSet = new Set(prev);
+      if (newSet.has(groupKey)) {
+        newSet.delete(groupKey);
+      } else {
+        newSet.add(groupKey);
+      }
+      return newSet;
+    });
+  }, []);
+  var expandAll = (0, import_react3.useCallback)(function () {
+    if (!groupedData) return;
+    var allKeys = /* @__PURE__ */new Set();
+    var collectKeys = function collectKeys1(groups) {
+      groups.forEach(function (group) {
+        allKeys.add(getGroupKey(group));
+        if (group.children) {
+          collectKeys(group.children);
+        }
+      });
+    };
+    collectKeys(groupedData);
+    setExpandedGroups(allKeys);
+  }, [groupedData]);
+  var collapseAll = (0, import_react3.useCallback)(function () {
+    setExpandedGroups(/* @__PURE__ */new Set());
+  }, []);
+  return {
+    groupedData,
+    config,
+    setConfig,
+    expandedGroups,
+    setExpandedGroups,
+    toggleGroupExpansion,
+    expandAll,
+    collapseAll,
+    isGrouped: config.columns.length > 0
+  };
+}
+//# sourceMappingURL=index.native.js.map