@multiplatform.one/table 7.10.0 → 7.15.0

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

@@ -483,231 +483,211 @@ function DataTableGroupingConfig(props) {
   };
   const iconSize = groupIconSize(String(sz));
   const radius = knobProps.borderRadius.borderRadius;
+  const trigger = /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+    size: knobProps.sizeToken,
+    icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.GearIcon, {
+      size: iconSize
+    }),
+    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_react.ChartBarIcon, {
+        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: 1e3,
+        paddingHorizontal: "$1",
+        paddingVertical: 2,
+        minWidth: 20,
+        alignItems: "center",
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+          ...knobProps.label,
+          fontWeight: "400",
+          color: "$color12",
+          children: currentConfig.columns.length + currentConfig.aggregations.length
+        })
+      })]
+    })
+  });
   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).
+    // 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.
     /* @__PURE__ */
-    (0, import_jsx_runtime.jsxs)(import_tamagui.Popover, {
+    (0, import_jsx_runtime.jsx)(import_forms.FloatingPanel, {
       open: isOpen,
       onOpenChange: setIsOpen,
-      stayInFrame: true,
-      allowFlip: true,
-      resize: true,
-      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,
-          icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.GearIcon, {
-            size: iconSize
-          }),
-          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_react.ChartBarIcon, {
-              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: 1e3,
-              paddingHorizontal: "$1",
-              paddingVertical: 2,
-              minWidth: 20,
-              alignItems: "center",
-              children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-                ...knobProps.label,
-                fontWeight: "400",
-                color: "$color12",
-                children: currentConfig.columns.length + currentConfig.aggregations.length
-              })
-            })]
-          })
-        })
-      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Popover.Content, {
-        ...knobProps.elevatedSurface,
-        transition: knobProps.transition,
-        enterStyle: {
-          x: 0,
-          y: -10,
-          opacity: 0
-        },
-        exitStyle: {
-          x: 0,
-          y: -10,
-          opacity: 0
-        },
+      trigger,
+      triggerSizing: "content",
+      disabled,
+      scrollable: true,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+        gap: "$4",
         minWidth: popoverMinWidth,
         maxWidth: popoverMaxWidth,
-        padding: 0,
-        overflow: "hidden",
-        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Popover.ScrollView, {
-          minHeight: 0,
-          children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
-            ...knobProps.panelPadding,
-            gap: "$4",
+        "data-dismiss-class": "compose",
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+          ...knobProps.label,
+          fontWeight: "400",
+          children: "Grouping & Aggregation"
+        }), /* @__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, {
               ...knobProps.label,
               fontWeight: "400",
-              children: "Grouping & Aggregation"
-            }), /* @__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, {
-                  ...knobProps.label,
-                  fontWeight: "400",
-                  children: "Group By"
-                }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Text, {
-                  fontSize: "$2",
-                  color: "$color10",
-                  children: [currentConfig.columns.length, " selected"]
-                })]
-              }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
-                children: currentConfig.columns.map((columnKey, index) => {
-                  const column = columns.find(col => (col.accessorKey || col.id) === 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: knobProps.sizeToken,
-                        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: knobProps.sizeToken,
-                        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: knobProps.sizeToken,
-                        icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.MinusIcon, {
-                          size: iconSize
-                        }),
-                        disabled,
-                        onPress: () => handleRemoveGroupBy(columnKey),
-                        "aria-label": `Remove grouping by ${label}`
-                      })]
-                    })]
-                  }, columnKey);
-                })
-              }), 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(column => {
-                  const key = column.accessorKey || column.id || "";
-                  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+              children: "Group By"
+            }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Text, {
+              fontSize: "$2",
+              color: "$color10",
+              children: [currentConfig.columns.length, " selected"]
+            })]
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+            children: currentConfig.columns.map((columnKey, index) => {
+              const column = columns.find(col => (col.accessorKey || col.id) === 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: knobProps.sizeToken,
-                    onPress: () => handleAddGroupBy(key),
-                    children: column.header || key
-                  }, key);
-                })]
-              })]
-            }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Separator, {}), /* @__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, {
-                  ...knobProps.label,
-                  fontWeight: "400",
-                  children: "Aggregations"
-                }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Text, {
-                  fontSize: "$2",
-                  color: "$color10",
-                  children: [currentConfig.aggregations.length, " configured"]
+                    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: knobProps.sizeToken,
+                    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: knobProps.sizeToken,
+                    icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.MinusIcon, {
+                      size: iconSize
+                    }),
+                    disabled,
+                    onPress: () => handleRemoveGroupBy(columnKey),
+                    "aria-label": `Remove grouping by ${label}`
+                  })]
                 })]
-              }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
-                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: knobProps.sizeToken,
-                        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
-              })]
-            }), (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, {
+              }, columnKey);
+            })
+          }), 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(column => {
+              const key = column.accessorKey || column.id || "";
+              return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
                 size: knobProps.sizeToken,
-                error: true,
-                onPress: () => onConfigChange({
-                  columns: [],
-                  aggregations: []
-                }),
-                "aria-label": "Clear all grouping and aggregation",
-                children: "Clear All Grouping"
-              })]
+                onPress: () => handleAddGroupBy(key),
+                children: column.header || key
+              }, key);
             })]
-          })
-        })
-      })]
+          })]
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Separator, {}), /* @__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, {
+              ...knobProps.label,
+              fontWeight: "400",
+              children: "Aggregations"
+            }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Text, {
+              fontSize: "$2",
+              color: "$color10",
+              children: [currentConfig.aggregations.length, " configured"]
+            })]
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+            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: knobProps.sizeToken,
+                    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
+          })]
+        }), (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,
+            error: true,
+            onPress: () => onConfigChange({
+              columns: [],
+              aggregations: []
+            }),
+            "aria-label": "Clear all grouping and aggregation",
+            children: "Clear All Grouping"
+          })]
+        })]
+      })
     })
   );
 }