@multiplatform.one/table 6.6.0 → 7.0.0

package/src/components/DataTableGrouping/index.tsx

@@ -1,4 +1,6 @@
 import {
+  ArrowDownIcon,
+  ArrowUpIcon,
   ChartBarIcon,
   CalculatorIcon,
   CaretDownIcon,
@@ -11,7 +13,17 @@ import {
   GearIcon,
 } from "@phosphor-icons/react";
 import { useDirection } from "@multiplatform.one/components";
-import { formatNumber, useResolvedKnobs } from "@multiplatform.one/theme";
+import {
+  ensureFocusVisibleRing,
+  formatNumber,
+  getGroupPosition,
+  hairline,
+  sizeRecipeForToken,
+  stackEdgeRadius,
+  stackRadiusProps,
+  useResolvedKnobs,
+  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";
@@ -80,6 +92,15 @@ const groupItemPaddingMap: Record<string, string> = {
   large: "$3",
 };
 
+// Tree indent rides the space knob so nested groups stay flush full-bleed
+// rows (padding, never margin) — AG Grid / Excel / Airtable grouping: the
+// chevron and label step in, the painted row still spans the stack.
+const groupIndentStepMap: Record<string, number> = {
+  small: 12,
+  medium: 16,
+  large: 24,
+};
+
 // 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> = {
@@ -88,6 +109,30 @@ const groupMetaSizeMap: Record<string, string> = {
   $5: "$4",
 };
 
+// Chevron/tree glyphs are control-internal icons (LC-75/LC-79): the
+// generated recipe's icon channel (lossless vs the old $3/$4/$5 map).
+const groupIconSize = (token: string): number => sizeRecipeForToken(token).iconSize;
+
+const startRail = isWeb
+  ? {
+      borderInlineStartWidth: 4,
+      borderInlineStartStyle: "solid" as const,
+      borderInlineStartColor: "$color6",
+    }
+  : { borderStartWidth: 4, borderStartColor: "$color6" };
+
+function groupIndent(space: string | undefined, level: number): number {
+  return (groupIndentStepMap[space ?? "medium"] ?? 16) * Math.max(0, level);
+}
+
+function formatCellValue(value: unknown): string {
+  if (value == null) return "";
+  if (typeof value === "number") {
+    return Number.isFinite(value) ? formatNumber(value) : "";
+  }
+  return String(value);
+}
+
 /**
  * Group aggregates are the same number class as the cells they summarise, so
  * they render through the house number register (LC-12 render channel) —
@@ -185,6 +230,8 @@ export function DataTableGrouping<T = any>(props: DataTableGroupingProps<T>) {
       groupedData={groupedData}
       columns={columns}
       level={0}
+      stackStart
+      stackEnd
       aggregations={aggregations}
       showAggregations={showAggregations}
       expandedGroups={expandedGroups}
@@ -199,6 +246,10 @@ interface GroupedDataRendererProps<T = any> {
   groupedData: GroupedData<T>[];
   columns: DataTableGroupingProps<T>["columns"];
   level: number;
+  /** This level occupies the root stack's leading edge (LC-72). */
+  stackStart: boolean;
+  /** This level occupies the root stack's trailing edge (LC-72). */
+  stackEnd: boolean;
   aggregations: AggregationConfig[];
   showAggregations?: boolean;
   expandedGroups: Set<string>;
@@ -211,6 +262,8 @@ function GroupedDataRenderer<T = any>({
   groupedData,
   columns,
   level,
+  stackStart,
+  stackEnd,
   aggregations,
   showAggregations,
   expandedGroups,
@@ -220,16 +273,23 @@ function GroupedDataRenderer<T = any>({
 }: GroupedDataRendererProps<T>) {
   return (
     <YStack>
-      {groupedData.map((group) => {
+      {groupedData.map((group, groupIndex) => {
         const groupKey = getGroupKey(group);
         const isExpanded = expandedGroups.has(groupKey);
-        // 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;
+        const position = getGroupPosition(groupIndex, groupedData.length);
+        const isFirst = position === "first" || position === "only";
+        const isLast = position === "last" || position === "only";
+        // Nested groups sit under a parent header, so they never own the
+        // stack's leading corners. An OPEN header abuts its own content, so
+        // it drops trailing radius even when it is last (accordion corollary).
+        const headerStart = stackStart && isFirst;
+        const headerEnd = stackEnd && isLast && !isExpanded;
+        const childStackEnd = stackEnd && isLast;
 
         return (
           <YStack key={groupKey}>
-            {/* Group Header */}
+            {groupIndex > 0 ? <View {...hairline.line} /> : null}
             <GroupHeader
               group={group}
               level={level}
@@ -239,16 +299,21 @@ function GroupedDataRenderer<T = any>({
               showAggregations={showAggregations ?? true}
               onToggleExpansion={() => onToggleExpansion(groupKey)}
               renderCustomHeader={renderGroupHeader}
+              position={position}
+              stackStart={headerStart}
+              stackEnd={headerEnd}
             />
 
-            {/* Group Content */}
             {isExpanded && (
-              <YStack marginInlineStart={level * 20}>
+              <>
+                <View {...hairline.line} />
                 {group.children && group.children.length > 0 ? (
                   <GroupedDataRenderer
                     groupedData={group.children}
                     columns={columns}
                     level={level + 1}
+                    stackStart={false}
+                    stackEnd={childStackEnd}
                     aggregations={aggregations}
                     showAggregations={showAggregations}
                     expandedGroups={expandedGroups}
@@ -257,12 +322,16 @@ function GroupedDataRenderer<T = any>({
                     renderGroupFooter={renderGroupFooter}
                   />
                 ) : (
-                  <GroupItems items={group.items} columns={columns} />
+                  <GroupItems
+                    items={group.items}
+                    columns={columns}
+                    level={level + 1}
+                    stackEnd={childStackEnd}
+                  />
                 )}
-              </YStack>
+              </>
             )}
 
-            {/* Group Footer */}
             {renderGroupFooter && isExpanded && (
               <GroupFooter group={group} level={level} renderCustomFooter={renderGroupFooter} />
             )}
@@ -282,6 +351,9 @@ interface GroupHeaderProps<T = any> {
   showAggregations?: boolean;
   onToggleExpansion: () => void;
   renderCustomHeader?: (group: GroupedData<T>, level: number) => React.ReactNode;
+  position?: GroupPosition;
+  stackStart: boolean;
+  stackEnd: boolean;
 }
 
 function GroupHeader<T = any>({
@@ -293,12 +365,23 @@ function GroupHeader<T = any>({
   showAggregations,
   onToggleExpansion,
   renderCustomHeader,
+  position = "only",
+  stackStart,
+  stackEnd,
 }: 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;
+  const corners = stackEdgeRadius(knobProps.borderRadius.borderRadius, {
+    start: stackStart,
+    end: stackEnd,
+  });
+  const iconSize = groupIconSize(String(knobProps.sizeToken));
+  const metaSize = groupMetaSizeMap[knobProps.sizeToken] ?? "$3";
+  const indent = groupIndent(knobProps.space, level);
+  const label = group.value == null || group.value === "" ? "No Value" : String(group.value);
+  const countLabel = `${formatNumber(group.count, { maximumFractionDigits: 0 })} item${
+    group.count !== 1 ? "s" : ""
+  }`;
 
   if (renderCustomHeader) {
     return <View>{renderCustomHeader(group, level)}</View>;
@@ -306,33 +389,30 @@ function GroupHeader<T = any>({
 
   return (
     <XStack
-      {...knobProps.borderRadius}
+      {...corners}
+      {...startRail}
       alignItems="center"
+      gap="$2"
+      minHeight={44}
       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" })}
+      overflow="hidden"
       cursor="pointer"
-      hoverStyle={{
-        backgroundColor:
-          level === 0 ? "$accentBackground" : { backgroundColor: "$color2" }.backgroundColor,
-      }}
+      hoverStyle={{ backgroundColor: "$backgroundHover", ...corners }}
+      pressStyle={{ backgroundColor: "$backgroundPress", ...corners }}
       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}
+      aria-label={`${label}, ${countLabel}`}
+      outlineWidth={0}
+      focusStyle={{ outlineWidth: 0 }}
+      focusVisibleStyle={ensureFocusVisibleRing({ outlineOffset: -2 })}
       {...({
+        "data-testid": "data-table-group-header",
+        "data-group-position": position,
+        "data-stack-start": stackStart ? "true" : "false",
+        "data-stack-end": stackEnd ? "true" : "false",
         onKeyDown: (e: React.KeyboardEvent) => {
           if (e.key === "Enter" || e.key === " ") {
             e.preventDefault();
@@ -341,41 +421,36 @@ function GroupHeader<T = any>({
         },
       } as any)}
     >
-      {/* Expansion Toggle */}
-      <View width={20} alignItems="center">
+      <View width={iconSize + 4} alignItems="center" marginInlineStart={indent}>
         {hasChildren &&
-          (isExpanded ? <CaretDownIcon size={16} /> : <CollapsedCaretIcon size={16} />)}
+          (isExpanded ? <CaretDownIcon size={iconSize} /> : <CollapsedCaretIcon size={iconSize} />)}
       </View>
 
-      {/* Group Info */}
-      <YStack flex={1}>
-        <XStack alignItems="center" gap="$2">
-          <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)}
+      <XStack flex={1} alignItems="center" justifyContent="space-between" gap="$3" flexWrap="wrap">
+        <XStack alignItems="center" gap="$2" flexShrink={1} minWidth={0}>
+          <Text fontSize={knobProps.sizeToken} fontWeight="600" numberOfLines={1}>
+            {label}
           </Text>
-          <Text fontSize={groupMetaSizeMap[knobProps.sizeToken] ?? "$3"} color="$color10">
-            ({group.count} item{group.count !== 1 ? "s" : ""})
+          <Text fontSize={metaSize} color="$color10">
+            ({countLabel})
           </Text>
         </XStack>
 
-        {/* Aggregations */}
         {showAggregations && aggregations.length > 0 && (
-          <XStack gap="$4" marginTop="$2">
+          <XStack gap="$3" flexWrap="wrap" justifyContent="flex-end">
             {aggregations.map((agg, index) => (
-              <XStack key={index} alignItems="center" gap="$1">
-                <Text fontSize={groupMetaSizeMap[knobProps.sizeToken] ?? "$3"} color="$color10">
-                  {agg.label || `${agg.function}(${agg.column})`}:
+              <XStack key={index} alignItems="baseline" gap="$1">
+                <Text fontSize={metaSize} color="$color10">
+                  {`${agg.label || `${agg.function}(${agg.column})`}:`}
                 </Text>
-                <Text fontSize={groupMetaSizeMap[knobProps.sizeToken] ?? "$3"} fontWeight="500">
+                <Text fontSize={metaSize} fontWeight="600">
                   {formatAggregateValue(group.aggregations[agg.column]?.[agg.function], agg)}
                 </Text>
               </XStack>
             ))}
           </XStack>
         )}
-      </YStack>
+      </XStack>
     </XStack>
   );
 }
@@ -387,47 +462,62 @@ interface GroupItemsProps<T = any> {
     header?: string | React.ReactNode;
     id?: string;
   }>;
+  level: number;
+  stackEnd: boolean;
 }
 
-function GroupItems<T = any>({ items, columns = [] }: GroupItemsProps<T>) {
+function GroupItems<T = any>({ items, columns = [], level, stackEnd }: GroupItemsProps<T>) {
   const { knobProps } = useResolvedKnobs();
+  const metaSize = groupMetaSizeMap[knobProps.sizeToken] ?? "$3";
+  const indent = groupIndent(knobProps.space, level);
   return (
     <YStack>
-      {items.map((item, index) => (
-        <XStack
-          {...knobProps.borderRadius}
-          key={index}
-          padding={groupItemPaddingMap[knobProps.space] ?? "$2"}
-          paddingInlineStart="$4"
-          backgroundColor={index % 2 === 0 ? "$background" : "$color2"}
-          borderBottomWidth={1}
-          borderBottomColor="$borderColor"
-        >
-          {columns.length > 0 ? (
-            columns.map((column, colIndex) => {
-              const key = column.accessorKey || column.id || `col-${colIndex}`;
-              const value = (item as any)[key];
-              return (
-                <View key={key} flex={1}>
-                  <Text fontSize={groupMetaSizeMap[knobProps.sizeToken] ?? "$3"}>
-                    {String(value ?? "")}
-                  </Text>
-                </View>
-              );
-            })
-          ) : (
-            <Text fontSize={groupMetaSizeMap[knobProps.sizeToken] ?? "$3"}>
-              {JSON.stringify(item, null, 2)}
-            </Text>
-          )}
-        </XStack>
-      ))}
+      {items.map((item, index) => {
+        const position = getGroupPosition(index, items.length);
+        const isLast = position === "last" || position === "only";
+        const corners = stackEdgeRadius(knobProps.borderRadius.borderRadius, {
+          start: false,
+          end: stackEnd && isLast,
+        });
+        return (
+          <YStack key={index}>
+            {index > 0 ? <View {...hairline.line} /> : null}
+            <XStack
+              {...corners}
+              padding={groupItemPaddingMap[knobProps.space] ?? "$2"}
+              paddingInlineStart={indent + 12}
+              overflow="hidden"
+              backgroundColor={index % 2 === 0 ? "$background" : "$color2"}
+              hoverStyle={{ backgroundColor: "$backgroundHover", ...corners }}
+              {...({
+                "data-testid": "data-table-group-item",
+                "data-group-position": position,
+                "data-stack-end": stackEnd && isLast ? "true" : "false",
+              } as any)}
+            >
+              {columns.length > 0 ? (
+                columns.map((column, colIndex) => {
+                  const key = column.accessorKey || column.id || `col-${colIndex}`;
+                  const value = (item as any)[key];
+                  return (
+                    <View key={key} flex={1} minWidth={0}>
+                      <Text fontSize={metaSize} numberOfLines={1}>
+                        {formatCellValue(value)}
+                      </Text>
+                    </View>
+                  );
+                })
+              ) : (
+                <Text fontSize={metaSize}>{JSON.stringify(item, null, 2)}</Text>
+              )}
+            </XStack>
+          </YStack>
+        );
+      })}
     </YStack>
   );
 }
 
-// Group Footer Component
-
 interface GroupFooterProps<T = any> {
   group: GroupedData<T>;
   level: number;
@@ -435,7 +525,12 @@ interface GroupFooterProps<T = any> {
 }
 
 function GroupFooter<T = any>({ group, level, renderCustomFooter }: GroupFooterProps<T>) {
-  return <View marginInlineStart={level * 20}>{renderCustomFooter(group, level)}</View>;
+  const { knobProps } = useResolvedKnobs();
+  return (
+    <View paddingInlineStart={groupIndent(knobProps.space, level)}>
+      {renderCustomFooter(group, level)}
+    </View>
+  );
 }
 
 // Grouping Configuration Component
@@ -519,6 +614,17 @@ export function DataTableGroupingConfig<T = any>(props: DataTableGroupingConfigP
     onConfigChange(newConfig);
   };
 
+  const handleMoveGroupBy = (index: number, direction: -1 | 1) => {
+    const next = [...currentConfig.columns];
+    const swap = index + direction;
+    if (swap < 0 || swap >= next.length) return;
+    [next[index], next[swap]] = [next[swap], next[index]];
+    onConfigChange({ ...currentConfig, columns: next });
+  };
+
+  const iconSize = groupIconSize(String(sz));
+  const radius = knobProps.borderRadius.borderRadius;
+
   return (
     // LC-06/LC-10: collision handling — the config list grows with every
     // group-by/aggregation added and must clamp + scroll inside the viewport
@@ -528,24 +634,22 @@ export function DataTableGroupingConfig<T = any>(props: DataTableGroupingConfigP
         <Button
           size={knobProps.sizeToken}
           variant="outlined"
-          icon={<GearIcon size={16} />}
+          icon={<GearIcon size={iconSize} />}
           disabled={disabled}
           aria-label="Grouping configuration"
         >
           <XStack alignItems="center" gap="$2">
-            <ChartBarIcon size={16} />
+            <ChartBarIcon size={iconSize} />
             <Text>Group & Aggregate</Text>
             {(currentConfig.columns.length > 0 || currentConfig.aggregations.length > 0) && (
               <View
                 backgroundColor="$color6"
-                borderRadius={knobProps.borderRadius.borderRadius}
+                borderRadius={1000}
                 paddingHorizontal="$1"
                 paddingVertical={2}
                 minWidth={20}
                 alignItems="center"
               >
-                {/* 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>
@@ -559,6 +663,7 @@ export function DataTableGroupingConfig<T = any>(props: DataTableGroupingConfigP
         {...knobProps.borderRadius}
         borderWidth={1}
         borderColor="$borderColor"
+        // 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 }}
@@ -585,29 +690,54 @@ export function DataTableGroupingConfig<T = any>(props: DataTableGroupingConfigP
               </XStack>
 
               {/* Current Group By Columns */}
-              <YStack gap="$1">
+              <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 (
-                    <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 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="$2"
+                          variant="outlined"
+                          icon={<ArrowUpIcon size={iconSize} />}
+                          disabled={disabled || index === 0}
+                          onPress={() => handleMoveGroupBy(index, -1)}
+                          aria-label={`Move ${label} up`}
+                        />
+                        <Button
+                          size="$2"
+                          variant="outlined"
+                          icon={<ArrowDownIcon size={iconSize} />}
+                          disabled={disabled || index === currentConfig.columns.length - 1}
+                          onPress={() => handleMoveGroupBy(index, 1)}
+                          aria-label={`Move ${label} down`}
+                        />
+                        <Button
+                          size="$2"
+                          variant="outlined"
+                          icon={<MinusIcon size={iconSize} />}
+                          disabled={disabled}
+                          onPress={() => handleRemoveGroupBy(columnKey)}
+                          aria-label={`Remove grouping by ${label}`}
+                        />
+                      </XStack>
+                    </YStack>
                   );
                 })}
               </YStack>
@@ -649,28 +779,38 @@ export function DataTableGroupingConfig<T = any>(props: DataTableGroupingConfigP
               </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>
-                ))}
+              <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="$2"
+                          variant="outlined"
+                          icon={<MinusIcon size={iconSize} />}
+                          disabled={disabled}
+                          onPress={() => handleRemoveAggregation(index)}
+                          aria-label={`Remove ${agg.function} aggregation on ${agg.column}`}
+                        />
+                      </XStack>
+                    </YStack>
+                  );
+                })}
               </YStack>
 
               {/* Add Aggregation */}