@multiplatform.one/table 7.11.0 → 7.16.0

package/src/components/DataTableGrouping/index.tsx

@@ -24,8 +24,8 @@ import {
   type GroupPosition,
 } from "@multiplatform.one/theme";
 import { useCallback, useMemo, useState } from "react";
-import { Button, Select } from "@multiplatform.one/forms";
-import { Popover, Separator, Text, View, XStack, YStack, isWeb } from "tamagui";
+import { Button, FloatingPanel, Select } from "@multiplatform.one/forms";
+import { Separator, Text, View, XStack, YStack, isWeb } from "tamagui";
 import { getViewLeafRows } from "../../utils/viewData";
 import { iconSizeForToken } from "../../utils/chromeIcons";
 import { useDataTableState } from "../DataTable/DataTableStateContext";
@@ -629,211 +629,209 @@ export function DataTableGroupingConfig<T = any>(props: DataTableGroupingConfigP
   const iconSize = groupIconSize(String(sz));
   const radius = knobProps.borderRadius.borderRadius;
 
+  const trigger = (
+    <Button
+      size={knobProps.sizeToken}
+      icon={<GearIcon size={iconSize} />}
+      disabled={disabled}
+      aria-label="Grouping configuration"
+    >
+      <XStack alignItems="center" gap="$2">
+        <ChartBarIcon size={iconSize} />
+        <Text>Group & Aggregate</Text>
+        {(currentConfig.columns.length > 0 || currentConfig.aggregations.length > 0) && (
+          <View
+            backgroundColor="$color6"
+            borderRadius={1000}
+            paddingHorizontal="$1"
+            paddingVertical={2}
+            minWidth={20}
+            alignItems="center"
+          >
+            <Text {...knobProps.label} fontWeight="400" color="$color12">
+              {currentConfig.columns.length + currentConfig.aggregations.length}
+            </Text>
+          </View>
+        )}
+      </XStack>
+    </Button>
+  );
+
   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).
-    <Popover open={isOpen} onOpenChange={setIsOpen} stayInFrame allowFlip resize>
-      <Popover.Trigger asChild>
-        <Button
-          size={knobProps.sizeToken}
-          icon={<GearIcon size={iconSize} />}
-          disabled={disabled}
-          aria-label="Grouping configuration"
-        >
-          <XStack alignItems="center" gap="$2">
-            <ChartBarIcon size={iconSize} />
-            <Text>Group & Aggregate</Text>
-            {(currentConfig.columns.length > 0 || currentConfig.aggregations.length > 0) && (
-              <View
-                backgroundColor="$color6"
-                borderRadius={1000}
-                paddingHorizontal="$1"
-                paddingVertical={2}
-                minWidth={20}
-                alignItems="center"
-              >
-                <Text {...knobProps.label} fontWeight="400" color="$color12">
-                  {currentConfig.columns.length + currentConfig.aggregations.length}
-                </Text>
-              </View>
-            )}
-          </XStack>
-        </Button>
-      </Popover.Trigger>
-
-      <Popover.Content
-        {...knobProps.elevatedSurface}
-        // LC-24: enter/exit styles are dead code without a resolved token
-        transition={knobProps.transition}
-        enterStyle={{ x: 0, y: -10, opacity: 0 }}
-        exitStyle={{ x: 0, y: -10, opacity: 0 }}
+    // LC-06/LC-10: the config list grows with every group-by/aggregation
+    // added. FloatingPanel clamps and scrolls it inside the viewport instead
+    // of painting rows past the fold.
+    <FloatingPanel
+      open={isOpen}
+      onOpenChange={setIsOpen}
+      trigger={trigger}
+      triggerSizing="content"
+      disabled={disabled}
+      scrollable
+    >
+      <YStack
+        gap="$4"
         minWidth={popoverMinWidth}
         maxWidth={popoverMaxWidth}
-        padding={0}
-        overflow="hidden"
+        data-dismiss-class="compose"
       >
-        <Popover.ScrollView minHeight={0}>
-          <YStack {...knobProps.panelPadding} gap="$4">
+        <Text {...knobProps.label} fontWeight="400">
+          Grouping & Aggregation
+        </Text>
+
+        {/* Group By Section */}
+        <YStack gap="$3">
+          <XStack justifyContent="space-between" alignItems="center">
             <Text {...knobProps.label} fontWeight="400">
-              Grouping & Aggregation
+              Group By
+            </Text>
+            <Text fontSize="$2" color="$color10">
+              {currentConfig.columns.length} selected
             </Text>
+          </XStack>
 
-            {/* Group By Section */}
-            <YStack gap="$3">
-              <XStack justifyContent="space-between" alignItems="center">
-                <Text {...knobProps.label} fontWeight="400">
-                  Group By
-                </Text>
-                <Text fontSize="$2" color="$color10">
-                  {currentConfig.columns.length} selected
-                </Text>
-              </XStack>
+          {/* Current Group By Columns */}
+          <YStack>
+            {currentConfig.columns.map((columnKey, index) => {
+              const column = columns.find((col) => (col.accessorKey || col.id) === columnKey);
+              const position = getGroupPosition(index, currentConfig.columns.length);
+              const corners = stackRadiusProps(position, radius);
+              const label = String(column?.header || columnKey);
+              return (
+                <YStack key={columnKey}>
+                  {index > 0 ? <View {...hairline.line} /> : null}
+                  <XStack
+                    alignItems="center"
+                    gap="$2"
+                    padding="$2"
+                    overflow="hidden"
+                    backgroundColor="$color2"
+                    {...corners}
+                    hoverStyle={{ backgroundColor: "$backgroundHover", ...corners }}
+                    {...({ "data-group-position": position } as any)}
+                  >
+                    <Text fontSize="$3" flex={1} numberOfLines={1}>
+                      {`${label} · ${index + 1}`}
+                    </Text>
+                    <Button
+                      size={knobProps.sizeToken}
+                      icon={<ArrowUpIcon size={iconSize} />}
+                      disabled={disabled || index === 0}
+                      onPress={() => handleMoveGroupBy(index, -1)}
+                      aria-label={`Move ${label} up`}
+                    />
+                    <Button
+                      size={knobProps.sizeToken}
+                      icon={<ArrowDownIcon size={iconSize} />}
+                      disabled={disabled || index === currentConfig.columns.length - 1}
+                      onPress={() => handleMoveGroupBy(index, 1)}
+                      aria-label={`Move ${label} down`}
+                    />
+                    <Button
+                      size={knobProps.sizeToken}
+                      icon={<MinusIcon size={iconSize} />}
+                      disabled={disabled}
+                      onPress={() => handleRemoveGroupBy(columnKey)}
+                      aria-label={`Remove grouping by ${label}`}
+                    />
+                  </XStack>
+                </YStack>
+              );
+            })}
+          </YStack>
 
-              {/* Current Group By Columns */}
-              <YStack>
-                {currentConfig.columns.map((columnKey, index) => {
-                  const column = columns.find((col) => (col.accessorKey || col.id) === columnKey);
-                  const position = getGroupPosition(index, currentConfig.columns.length);
-                  const corners = stackRadiusProps(position, radius);
-                  const label = String(column?.header || columnKey);
-                  return (
-                    <YStack key={columnKey}>
-                      {index > 0 ? <View {...hairline.line} /> : null}
-                      <XStack
-                        alignItems="center"
-                        gap="$2"
-                        padding="$2"
-                        overflow="hidden"
-                        backgroundColor="$color2"
-                        {...corners}
-                        hoverStyle={{ backgroundColor: "$backgroundHover", ...corners }}
-                        {...({ "data-group-position": position } as any)}
-                      >
-                        <Text fontSize="$3" flex={1} numberOfLines={1}>
-                          {`${label} · ${index + 1}`}
-                        </Text>
-                        <Button
-                          size={knobProps.sizeToken}
-                          icon={<ArrowUpIcon size={iconSize} />}
-                          disabled={disabled || index === 0}
-                          onPress={() => handleMoveGroupBy(index, -1)}
-                          aria-label={`Move ${label} up`}
-                        />
-                        <Button
-                          size={knobProps.sizeToken}
-                          icon={<ArrowDownIcon size={iconSize} />}
-                          disabled={disabled || index === currentConfig.columns.length - 1}
-                          onPress={() => handleMoveGroupBy(index, 1)}
-                          aria-label={`Move ${label} down`}
-                        />
-                        <Button
-                          size={knobProps.sizeToken}
-                          icon={<MinusIcon size={iconSize} />}
-                          disabled={disabled}
-                          onPress={() => handleRemoveGroupBy(columnKey)}
-                          aria-label={`Remove grouping by ${label}`}
-                        />
-                      </XStack>
-                    </YStack>
-                  );
-                })}
-              </YStack>
-
-              {/* Add Group By Column */}
-              {availableColumns.length > 0 && (
-                <XStack gap="$2">
-                  <Text fontSize="$3" color="$color10">
-                    Add:
-                  </Text>
-                  {availableColumns.slice(0, 3).map((column) => {
-                    const key = column.accessorKey || column.id || "";
-                    return (
-                      <Button
-                        key={key}
-                        size={knobProps.sizeToken}
-                        onPress={() => handleAddGroupBy(key)}
-                      >
-                        {column.header || key}
-                      </Button>
-                    );
-                  })}
-                </XStack>
-              )}
-            </YStack>
+          {/* Add Group By Column */}
+          {availableColumns.length > 0 && (
+            <XStack gap="$2">
+              <Text fontSize="$3" color="$color10">
+                Add:
+              </Text>
+              {availableColumns.slice(0, 3).map((column) => {
+                const key = column.accessorKey || column.id || "";
+                return (
+                  <Button
+                    key={key}
+                    size={knobProps.sizeToken}
+                    onPress={() => handleAddGroupBy(key)}
+                  >
+                    {column.header || key}
+                  </Button>
+                );
+              })}
+            </XStack>
+          )}
+        </YStack>
 
-            <Separator />
+        <Separator />
 
-            {/* Aggregation Section */}
-            <YStack gap="$3">
-              <XStack justifyContent="space-between" alignItems="center">
-                <Text {...knobProps.label} fontWeight="400">
-                  Aggregations
-                </Text>
-                <Text fontSize="$2" color="$color10">
-                  {currentConfig.aggregations.length} configured
-                </Text>
-              </XStack>
+        {/* Aggregation Section */}
+        <YStack gap="$3">
+          <XStack justifyContent="space-between" alignItems="center">
+            <Text {...knobProps.label} fontWeight="400">
+              Aggregations
+            </Text>
+            <Text fontSize="$2" color="$color10">
+              {currentConfig.aggregations.length} configured
+            </Text>
+          </XStack>
 
-              {/* Current Aggregations */}
-              <YStack>
-                {currentConfig.aggregations.map((agg, index) => {
-                  const position = getGroupPosition(index, currentConfig.aggregations.length);
-                  const corners = stackRadiusProps(position, radius);
-                  return (
-                    <YStack key={`${agg.function}-${agg.column}-${index}`}>
-                      {index > 0 ? <View {...hairline.line} /> : null}
-                      <XStack
-                        alignItems="center"
-                        gap="$2"
-                        padding="$2"
-                        overflow="hidden"
-                        backgroundColor="$color2"
-                        {...corners}
-                        hoverStyle={{ backgroundColor: "$backgroundHover", ...corners }}
-                        {...({ "data-group-position": position } as any)}
-                      >
-                        <Text fontSize="$3" flex={1} numberOfLines={1}>
-                          {agg.function}({agg.column}){agg.label && ` as "${agg.label}"`}
-                        </Text>
-                        <Button
-                          size={knobProps.sizeToken}
-                          icon={<MinusIcon size={iconSize} />}
-                          disabled={disabled}
-                          onPress={() => handleRemoveAggregation(index)}
-                          aria-label={`Remove ${agg.function} aggregation on ${agg.column}`}
-                        />
-                      </XStack>
-                    </YStack>
-                  );
-                })}
-              </YStack>
-
-              {/* Add Aggregation */}
-              <AggregationSelector
-                columns={aggregatableColumns}
-                onAddAggregation={handleAddAggregation}
-              />
-            </YStack>
-
-            {/* Clear All */}
-            {(currentConfig.columns.length > 0 || currentConfig.aggregations.length > 0) && (
-              <>
-                <Separator />
-                <Button
-                  size={knobProps.sizeToken}
-                  error
-                  onPress={() => onConfigChange({ columns: [], aggregations: [] })}
-                  aria-label="Clear all grouping and aggregation"
-                >
-                  Clear All Grouping
-                </Button>
-              </>
-            )}
+          {/* Current Aggregations */}
+          <YStack>
+            {currentConfig.aggregations.map((agg, index) => {
+              const position = getGroupPosition(index, currentConfig.aggregations.length);
+              const corners = stackRadiusProps(position, radius);
+              return (
+                <YStack key={`${agg.function}-${agg.column}-${index}`}>
+                  {index > 0 ? <View {...hairline.line} /> : null}
+                  <XStack
+                    alignItems="center"
+                    gap="$2"
+                    padding="$2"
+                    overflow="hidden"
+                    backgroundColor="$color2"
+                    {...corners}
+                    hoverStyle={{ backgroundColor: "$backgroundHover", ...corners }}
+                    {...({ "data-group-position": position } as any)}
+                  >
+                    <Text fontSize="$3" flex={1} numberOfLines={1}>
+                      {agg.function}({agg.column}){agg.label && ` as "${agg.label}"`}
+                    </Text>
+                    <Button
+                      size={knobProps.sizeToken}
+                      icon={<MinusIcon size={iconSize} />}
+                      disabled={disabled}
+                      onPress={() => handleRemoveAggregation(index)}
+                      aria-label={`Remove ${agg.function} aggregation on ${agg.column}`}
+                    />
+                  </XStack>
+                </YStack>
+              );
+            })}
           </YStack>
-        </Popover.ScrollView>
-      </Popover.Content>
-    </Popover>
+
+          {/* Add Aggregation */}
+          <AggregationSelector
+            columns={aggregatableColumns}
+            onAddAggregation={handleAddAggregation}
+          />
+        </YStack>
+
+        {/* Clear All */}
+        {(currentConfig.columns.length > 0 || currentConfig.aggregations.length > 0) && (
+          <>
+            <Separator />
+            <Button
+              size={knobProps.sizeToken}
+              error
+              onPress={() => onConfigChange({ columns: [], aggregations: [] })}
+              aria-label="Clear all grouping and aggregation"
+            >
+              Clear All Grouping
+            </Button>
+          </>
+        )}
+      </YStack>
+    </FloatingPanel>
   );
 }