@multiplatform.one/table 6.1.0 → 6.3.0

package/src/components/DataTableGrouping/index.tsx

@@ -2,6 +2,7 @@ import {
   ChartBarIcon,
   CalculatorIcon,
   CaretDownIcon,
+  CaretLeftIcon,
   CaretRightIcon,
   CaretUpIcon,
   HashIcon,
@@ -9,10 +10,12 @@ import {
   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";
 import { useDataTableState } from "../DataTable/DataTableStateContext";
 
 export type AggregationFunction = "count" | "sum" | "avg" | "min" | "max" | "custom";
@@ -62,12 +65,39 @@ export interface DataTableGroupingProps<T = any> {
   maxDepth?: number;
 }
 
+const EMPTY_EXPANDED_GROUPS: Set<string> = new Set();
+
+// SP-EDGE row density (getTableCellPadding precedent): the space knob moves
+// row padding; medium keeps the previous hardcoded $3/$2 defaults.
+const groupHeaderPaddingMap: Record<string, string> = {
+  small: "$2",
+  medium: "$3",
+  large: "$4",
+};
+const groupItemPaddingMap: Record<string, string> = {
+  small: "$1",
+  medium: "$2",
+  large: "$3",
+};
+
+// T-VALUE meta text rides one step below the size-knob body scale (LC-18);
+// medium keeps the previous $3.
+const groupMetaSizeMap: Record<string, string> = {
+  $3: "$2",
+  $4: "$3",
+  $5: "$4",
+};
+
 export function DataTableGrouping<T = any>(props: DataTableGroupingProps<T>) {
   // Try to consume from DataTableStateContext (compound component pattern)
   const ctx = useDataTableState();
 
-  // Resolve values: explicit props override context values
-  const data = props.data ?? (ctx?.computed.filteredData as T[]) ?? [];
+  // Resolve values: explicit props override context values.
+  // Context data is the CURRENT VIEW (filtered + sorted, same source as
+  // DataTableExport) — computed.filteredData is the pre-sort model, which
+  // ordered groups and their items by insertion order regardless of the
+  // visible sort.
+  const data = props.data ?? (ctx ? getViewLeafRows<T>(ctx.table) : []);
   const columns =
     props.columns ??
     (ctx
@@ -84,11 +114,22 @@ export function DataTableGrouping<T = any>(props: DataTableGroupingProps<T>) {
     renderGroupHeader,
     renderGroupFooter,
     showAggregations = true as boolean,
-    expandedGroups = new Set(),
+    expandedGroups: expandedGroupsProp,
     onExpandedGroupsChange,
     maxDepth = 5,
   } = props;
 
+  // Expansion state is controlled when the caller wires
+  // `onExpandedGroupsChange`; otherwise fall back to internal state (seeded
+  // from any `expandedGroups` prop) so header clicks expand out of the box.
+  const isExpansionControlled = onExpandedGroupsChange != null;
+  const [internalExpandedGroups, setInternalExpandedGroups] = useState<Set<string>>(
+    () => new Set(expandedGroupsProp),
+  );
+  const expandedGroups = isExpansionControlled
+    ? (expandedGroupsProp ?? EMPTY_EXPANDED_GROUPS)
+    : internalExpandedGroups;
+
   // Group the data
   const groupedData = useMemo(() => {
     if (!groupBy.length) return null;
@@ -104,9 +145,13 @@ export function DataTableGrouping<T = any>(props: DataTableGroupingProps<T>) {
       } else {
         newExpanded.add(groupKey);
       }
-      onExpandedGroupsChange?.(newExpanded);
+      if (isExpansionControlled) {
+        onExpandedGroupsChange?.(newExpanded);
+      } else {
+        setInternalExpandedGroups(newExpanded);
+      }
     },
-    [expandedGroups, onExpandedGroupsChange],
+    [expandedGroups, isExpansionControlled, onExpandedGroupsChange],
   );
 
   if (!groupedData) return null;
@@ -154,7 +199,9 @@ function GroupedDataRenderer<T = any>({
       {groupedData.map((group) => {
         const groupKey = getGroupKey(group);
         const isExpanded = expandedGroups.has(groupKey);
-        const hasChildren = group.children && group.children.length > 0;
+        // Every group is expandable: child groups OR leaf items render on
+        // expand — the caret affordance must not vanish for leaf groups.
+        const isExpandable = (group.children?.length ?? 0) > 0 || group.items.length > 0;
 
         return (
           <YStack key={groupKey}>
@@ -163,7 +210,7 @@ function GroupedDataRenderer<T = any>({
               group={group}
               level={level}
               isExpanded={isExpanded}
-              hasChildren={!!hasChildren}
+              hasChildren={isExpandable}
               aggregations={aggregations}
               showAggregations={showAggregations ?? true}
               onToggleExpansion={() => onToggleExpansion(groupKey)}
@@ -172,7 +219,7 @@ function GroupedDataRenderer<T = any>({
 
             {/* Group Content */}
             {isExpanded && (
-              <YStack marginLeft={level * 20}>
+              <YStack marginInlineStart={level * 20}>
                 {group.children && group.children.length > 0 ? (
                   <GroupedDataRenderer
                     groupedData={group.children}
@@ -224,6 +271,10 @@ function GroupHeader<T = any>({
   renderCustomHeader,
 }: GroupHeaderProps<T>) {
   const { knobProps } = useResolvedKnobs();
+  // Collapsed caret encodes the expansion direction (inline-end), so it
+  // mirrors in RTL via glyph swap (useDirection); the expanded CaretDown is
+  // direction-neutral and never mirrors.
+  const CollapsedCaretIcon = useDirection() === "rtl" ? CaretLeftIcon : CaretRightIcon;
 
   if (renderCustomHeader) {
     return <View>{renderCustomHeader(group, level)}</View>;
@@ -233,29 +284,54 @@ function GroupHeader<T = any>({
     <XStack
       {...knobProps.borderRadius}
       alignItems="center"
-      padding="$3"
-      {...{ backgroundColor: "$color2" }}
-      borderLeftWidth={4}
-      borderLeftColor="$color6"
+      padding={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" as any,
+            borderInlineStartColor: "$color6",
+          }
+        : { borderStartWidth: 4, borderStartColor: "$color6" })}
       cursor="pointer"
       hoverStyle={{
         backgroundColor:
           level === 0 ? "$accentBackground" : { backgroundColor: "$color2" }.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: (e: React.KeyboardEvent) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            onToggleExpansion();
+          }
+        },
+      } as any)}
     >
       {/* Expansion Toggle */}
       <View width={20} alignItems="center">
-        {hasChildren && (isExpanded ? <CaretDownIcon size={16} /> : <CaretRightIcon size={16} />)}
+        {hasChildren &&
+          (isExpanded ? <CaretDownIcon size={16} /> : <CollapsedCaretIcon size={16} />)}
       </View>
 
       {/* Group Info */}
       <YStack flex={1}>
         <XStack alignItems="center" gap="$2">
-          <Text fontSize="$4" fontWeight="600">
-            {group.value || "No Value"}
+          <Text fontSize={knobProps.sizeToken} fontWeight="600">
+            {/* 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)}
           </Text>
-          <Text fontSize="$3" color="$color10">
+          <Text fontSize={groupMetaSizeMap[knobProps.sizeToken] ?? "$3"} color="$color10">
             ({group.count} item{group.count !== 1 ? "s" : ""})
           </Text>
         </XStack>
@@ -265,10 +341,10 @@ function GroupHeader<T = any>({
           <XStack gap="$4" marginTop="$2">
             {aggregations.map((agg, index) => (
               <XStack key={index} alignItems="center" gap="$1">
-                <Text fontSize="$3" color="$color10">
+                <Text fontSize={groupMetaSizeMap[knobProps.sizeToken] ?? "$3"} color="$color10">
                   {agg.label || `${agg.function}(${agg.column})`}:
                 </Text>
-                <Text fontSize="$3" fontWeight="500">
+                <Text fontSize={groupMetaSizeMap[knobProps.sizeToken] ?? "$3"} fontWeight="500">
                   {group.aggregations[agg.column]?.[agg.function] || 0}
                 </Text>
               </XStack>
@@ -297,8 +373,8 @@ function GroupItems<T = any>({ items, columns = [] }: GroupItemsProps<T>) {
         <XStack
           {...knobProps.borderRadius}
           key={index}
-          padding="$2"
-          paddingLeft="$4"
+          padding={groupItemPaddingMap[knobProps.space] ?? "$2"}
+          paddingInlineStart="$4"
           backgroundColor={index % 2 === 0 ? "$background" : "$color2"}
           borderBottomWidth={1}
           borderBottomColor="$borderColor"
@@ -309,12 +385,16 @@ function GroupItems<T = any>({ items, columns = [] }: GroupItemsProps<T>) {
               const value = (item as any)[key];
               return (
                 <View key={key} flex={1}>
-                  <Text fontSize="$3">{String(value ?? "")}</Text>
+                  <Text fontSize={groupMetaSizeMap[knobProps.sizeToken] ?? "$3"}>
+                    {String(value ?? "")}
+                  </Text>
                 </View>
               );
             })
           ) : (
-            <Text fontSize="$3">{JSON.stringify(item, null, 2)}</Text>
+            <Text fontSize={groupMetaSizeMap[knobProps.sizeToken] ?? "$3"}>
+              {JSON.stringify(item, null, 2)}
+            </Text>
           )}
         </XStack>
       ))}
@@ -331,7 +411,7 @@ interface GroupFooterProps<T = any> {
 }
 
 function GroupFooter<T = any>({ group, level, renderCustomFooter }: GroupFooterProps<T>) {
-  return <View marginLeft={level * 20}>{renderCustomFooter(group, level)}</View>;
+  return <View marginInlineStart={level * 20}>{renderCustomFooter(group, level)}</View>;
 }
 
 // Grouping Configuration Component
@@ -416,7 +496,10 @@ export function DataTableGroupingConfig<T = any>(props: DataTableGroupingConfigP
   };
 
   return (
-    <Popover open={isOpen} onOpenChange={setIsOpen}>
+    // 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}
@@ -437,7 +520,9 @@ export function DataTableGroupingConfig<T = any>(props: DataTableGroupingConfigP
                 minWidth={20}
                 alignItems="center"
               >
-                <Text fontSize="$2" color="white" fontWeight="600">
+                {/* LC-05/DG-COL-01: theme ink, not a named hue — "white" was
+                    unreadable on the light-scheme $color6 badge fill. */}
+                <Text fontSize="$2" color="$color12" fontWeight="600">
                   {currentConfig.columns.length + currentConfig.aggregations.length}
                 </Text>
               </View>
@@ -454,30 +539,95 @@ export function DataTableGroupingConfig<T = any>(props: DataTableGroupingConfigP
         exitStyle={{ x: 0, y: -10, opacity: 0 }}
         minWidth={popoverMinWidth}
         maxWidth={popoverMaxWidth}
+        padding={0}
+        overflow="hidden"
       >
-        <YStack {...knobProps.panelPadding} gap="$4">
-          <Text fontSize="$5" fontWeight="600">
-            Grouping & Aggregation
-          </Text>
+        <Popover.ScrollView minHeight={0}>
+          <YStack {...knobProps.panelPadding} gap="$4">
+            <Text fontSize="$5" fontWeight="600">
+              Grouping & Aggregation
+            </Text>
+
+            {/* Group By Section */}
+            <YStack gap="$3">
+              <XStack justifyContent="space-between" alignItems="center">
+                <Text fontSize="$4" fontWeight="500">
+                  Group By
+                </Text>
+                <Text fontSize="$2" color="$color10">
+                  {currentConfig.columns.length} selected
+                </Text>
+              </XStack>
+
+              {/* Current Group By Columns */}
+              <YStack gap="$1">
+                {currentConfig.columns.map((columnKey, index) => {
+                  const column = columns.find((col) => (col.accessorKey || col.id) === columnKey);
+                  return (
+                    <XStack
+                      key={columnKey}
+                      alignItems="center"
+                      gap="$2"
+                      padding="$2"
+                      {...{ backgroundColor: "$color2" }}
+                      borderRadius={knobProps.borderRadius.borderRadius}
+                    >
+                      <Text fontSize="$3" flex={1}>
+                        {column?.header || columnKey} ({index + 1})
+                      </Text>
+                      <Button
+                        size={knobProps.sizeToken}
+                        variant="outlined"
+                        icon={<MinusIcon size={16} />}
+                        onPress={() => handleRemoveGroupBy(columnKey)}
+                        aria-label={`Remove grouping by ${column?.header || columnKey}`}
+                      />
+                    </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="$2"
+                        variant="outlined"
+                        onPress={() => handleAddGroupBy(key)}
+                      >
+                        {column.header || key}
+                      </Button>
+                    );
+                  })}
+                </XStack>
+              )}
+            </YStack>
+
+            <Separator />
+
+            {/* Aggregation Section */}
+            <YStack gap="$3">
+              <XStack justifyContent="space-between" alignItems="center">
+                <Text fontSize="$4" fontWeight="500">
+                  Aggregations
+                </Text>
+                <Text fontSize="$2" color="$color10">
+                  {currentConfig.aggregations.length} configured
+                </Text>
+              </XStack>
 
-          {/* Group By Section */}
-          <YStack gap="$3">
-            <XStack justifyContent="space-between" alignItems="center">
-              <Text fontSize="$4" fontWeight="500">
-                Group By
-              </Text>
-              <Text fontSize="$2" color="$color10">
-                {currentConfig.columns.length} selected
-              </Text>
-            </XStack>
-
-            {/* Current Group By Columns */}
-            <YStack gap="$1">
-              {currentConfig.columns.map((columnKey, index) => {
-                const column = columns.find((col) => (col.accessorKey || col.id) === columnKey);
-                return (
+              {/* Current Aggregations */}
+              <YStack gap="$1">
+                {currentConfig.aggregations.map((agg, index) => (
                   <XStack
-                    key={columnKey}
+                    key={index}
                     alignItems="center"
                     gap="$2"
                     padding="$2"
@@ -485,104 +635,43 @@ export function DataTableGroupingConfig<T = any>(props: DataTableGroupingConfigP
                     borderRadius={knobProps.borderRadius.borderRadius}
                   >
                     <Text fontSize="$3" flex={1}>
-                      {column?.header || columnKey} ({index + 1})
+                      {agg.function}({agg.column}){agg.label && ` as "${agg.label}"`}
                     </Text>
                     <Button
                       size={knobProps.sizeToken}
                       variant="outlined"
                       icon={<MinusIcon size={16} />}
-                      onPress={() => handleRemoveGroupBy(columnKey)}
-                      aria-label={`Remove grouping by ${column?.header || columnKey}`}
+                      onPress={() => handleRemoveAggregation(index)}
+                      aria-label={`Remove ${agg.function} aggregation on ${agg.column}`}
                     />
                   </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="$2"
-                      variant="outlined"
-                      onPress={() => handleAddGroupBy(key)}
-                    >
-                      {column.header || key}
-                    </Button>
-                  );
-                })}
-              </XStack>
-            )}
-          </YStack>
+                ))}
+              </YStack>
 
-          <Separator />
-
-          {/* Aggregation Section */}
-          <YStack gap="$3">
-            <XStack justifyContent="space-between" alignItems="center">
-              <Text fontSize="$4" fontWeight="500">
-                Aggregations
-              </Text>
-              <Text fontSize="$2" color="$color10">
-                {currentConfig.aggregations.length} configured
-              </Text>
-            </XStack>
-
-            {/* Current Aggregations */}
-            <YStack gap="$1">
-              {currentConfig.aggregations.map((agg, index) => (
-                <XStack
-                  key={index}
-                  alignItems="center"
-                  gap="$2"
-                  padding="$2"
-                  {...{ backgroundColor: "$color2" }}
-                  borderRadius={knobProps.borderRadius.borderRadius}
-                >
-                  <Text fontSize="$3" flex={1}>
-                    {agg.function}({agg.column}){agg.label && ` as "${agg.label}"`}
-                  </Text>
-                  <Button
-                    size={knobProps.sizeToken}
-                    variant="outlined"
-                    icon={<MinusIcon size={16} />}
-                    onPress={() => handleRemoveAggregation(index)}
-                    aria-label={`Remove ${agg.function} aggregation on ${agg.column}`}
-                  />
-                </XStack>
-              ))}
+              {/* Add Aggregation */}
+              <AggregationSelector
+                columns={aggregatableColumns}
+                onAddAggregation={handleAddAggregation}
+              />
             </YStack>
 
-            {/* Add Aggregation */}
-            <AggregationSelector
-              columns={aggregatableColumns}
-              onAddAggregation={handleAddAggregation}
-            />
+            {/* Clear All */}
+            {(currentConfig.columns.length > 0 || currentConfig.aggregations.length > 0) && (
+              <>
+                <Separator />
+                <Button
+                  size={knobProps.sizeToken}
+                  variant="outlined"
+                  error
+                  onPress={() => onConfigChange({ columns: [], aggregations: [] })}
+                  aria-label="Clear all grouping and aggregation"
+                >
+                  Clear All Grouping
+                </Button>
+              </>
+            )}
           </YStack>
-
-          {/* Clear All */}
-          {(currentConfig.columns.length > 0 || currentConfig.aggregations.length > 0) && (
-            <>
-              <Separator />
-              <Button
-                size={knobProps.sizeToken}
-                variant="outlined"
-                theme="red"
-                onPress={() => onConfigChange({ columns: [], aggregations: [] })}
-                aria-label="Clear all grouping and aggregation"
-              >
-                Clear All Grouping
-              </Button>
-            </>
-          )}
-        </YStack>
+        </Popover.ScrollView>
       </Popover.Content>
     </Popover>
   );
@@ -710,10 +799,12 @@ export function groupData<T>(
 
   const grouped = new Map<string, { items: T[]; key: any; path: any[] }>();
 
-  // Group data by the first column
+  // Group data by the first column. Nullish coalescing (not ||) so falsy
+  // values like 0, false, and "" form their own groups instead of all
+  // collapsing into a shared "null" bucket.
   data.forEach((item) => {
     const firstGroupValue = (item as any)[groupByColumns[0]];
-    const key = String(firstGroupValue || "null");
+    const key = String(firstGroupValue ?? "null");
 
     if (!grouped.has(key)) {
       grouped.set(key, {
@@ -761,13 +852,15 @@ export function groupData<T>(
           break;
         }
         case "min": {
-          aggregationsResult[agg.column].min =
-            values.length > 0 ? Math.min(...values.map(Number)) : 0;
+          // Skip non-numeric values (e.g. date strings) — one bad value must
+          // not poison the whole aggregate with NaN.
+          const 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;
+          const nums = values.map(Number).filter(Number.isFinite);
+          aggregationsResult[agg.column].max = nums.length > 0 ? Math.max(...nums) : 0;
           break;
         }
         case "custom":