@proteos/ui 0.50.1 → 0.51.0

package/src/components/data-table/data-table.tsx

@@ -159,8 +159,25 @@ export type DataTableProps<TRow> = {
    * Default false — read-only tables stay borderless in the body.
    */
   columnBorders?: boolean
+  /**
+   * Group consecutive rows under a full-width heading. Returns the group a row
+   * belongs to, or null to leave it ungrouped; a heading is emitted whenever
+   * the group id CHANGES between neighbours, so the caller is responsible for
+   * ordering rows by their group (with server-side sorting, sort by the
+   * grouping column first). That contract is what lets grouping work with
+   * infinite scroll — a group may continue on the next page without the table
+   * having to know the full row set up front.
+   */
+  groupBy?: (row: TRow) => { id: string; label: ReactNode } | null
+  /** Height of a group heading row. Defaults to `rowHeight`. */
+  groupHeaderHeight?: number
 }
 
+/** One entry of the virtualized list: either a data row or a group heading. */
+type ListItem<TRow> =
+  | { kind: 'row'; row: Row<TRow>; dataIndex: number }
+  | { kind: 'group'; id: string; label: ReactNode }
+
 const DEFAULT_ROW_HEIGHT = 32
 
 /** Column id of the leading checkbox column added by `selectionMode`. */
@@ -194,6 +211,8 @@ export function DataTable<TRow>({
   selectedIds,
   onSelectionChange,
   columnBorders = false,
+  groupBy,
+  groupHeaderHeight,
 }: DataTableProps<TRow>) {
   const rows = useMemo<TRow[]>(() => {
     const pages = query.data?.pages
@@ -327,6 +346,27 @@ export function DataTable<TRow>({
   const tableRows = table.getRowModel().rows
   const tableRowCount = tableRows.length
 
+  // Flatten rows into the virtualized list, splicing a heading in wherever the
+  // group changes. Without `groupBy` this is the rows themselves.
+  const listItems = useMemo<ListItem<TRow>[]>(() => {
+    if (!groupBy) {
+      return tableRows.map((row, dataIndex) => ({ kind: 'row', row, dataIndex }) as const)
+    }
+    const items: ListItem<TRow>[] = []
+    let currentGroupId: string | null = null
+    tableRows.forEach((row, dataIndex) => {
+      const group = groupBy(row.original)
+      if (group && group.id !== currentGroupId) {
+        currentGroupId = group.id
+        items.push({ kind: 'group', id: group.id, label: group.label })
+      } else if (!group) {
+        currentGroupId = null
+      }
+      items.push({ kind: 'row', row, dataIndex })
+    })
+    return items
+  }, [tableRows, groupBy])
+
   // Reset scroll to top when sorting changes — without this, the user is
   // staring at a different slice of a freshly-sorted dataset.
   const scrollerRef = useRef<HTMLDivElement | null>(null)
@@ -347,10 +387,12 @@ export function DataTable<TRow>({
     setListOffset((prev) => (prev === top ? prev : top))
   })
 
+  const headingHeight = groupHeaderHeight ?? rowHeight
+
   const virtualizer = useVirtualizer({
-    count: tableRowCount,
+    count: listItems.length,
     getScrollElement: () => scrollerRef.current,
-    estimateSize: () => rowHeight,
+    estimateSize: (index) => (listItems[index]?.kind === 'group' ? headingHeight : rowHeight),
     overscan,
     scrollMargin: listOffset,
   })
@@ -511,8 +553,8 @@ export function DataTable<TRow>({
                   style={{ height: totalSize, position: 'relative', width: '100%' }}
                 >
                   {virtualItems.map((vRow) => {
-                    const row = tableRows[vRow.index]
-                    if (!row) return null
+                    const item = listItems[vRow.index]
+                    if (!item) return null
                     const rowStyle: CSSProperties = {
                       // Items' `start` includes the virtualizer's scrollMargin
                       // (the list's offset below the sticky header); subtract
@@ -520,11 +562,18 @@ export function DataTable<TRow>({
                       transform: `translateY(${vRow.start - listOffset}px)`,
                       height: vRow.size,
                     }
+                    if (item.kind === 'group') {
+                      return (
+                        <GroupHeaderRow key={`group:${item.id}`} style={rowStyle}>
+                          {item.label}
+                        </GroupHeaderRow>
+                      )
+                    }
                     return (
                       <DataRow
-                        key={row.id}
-                        row={row}
-                        index={vRow.index}
+                        key={item.row.id}
+                        row={item.row}
+                        index={item.dataIndex}
                         zebra={zebra}
                         onRowClick={onRowClick}
                         style={rowStyle}
@@ -554,6 +603,25 @@ export function DataTable<TRow>({
   )
 }
 
+/* ---------- Group heading ------------------------------------------------ */
+
+function GroupHeaderRow({ style, children }: { style: CSSProperties; children: ReactNode }) {
+  return (
+    <TableRow
+      absolute
+      style={style}
+      className={cn(
+        'bg-surface-2 border-b border-rule',
+        'font-mono text-[11px] uppercase tracking-[0.06em] text-ink-3',
+      )}
+    >
+      {/* One cell spanning the row — the heading labels the rows beneath it
+          rather than any single column. */}
+      <TableCell className="gap-2 text-inherit">{children}</TableCell>
+    </TableRow>
+  )
+}
+
 /* ---------- Row ---------------------------------------------------------- */
 
 type DataRowProps<TRow> = {

package/src/components/record-filter/chip-value.tsx

@@ -128,6 +128,8 @@ function ChipItem({
     return (
       <Badge
         variant={option?.variant}
+        shape="rounded"
+        hasDot={false}
         {...(option?.color ? { color: option.color } : {})}
         {...(option?.icon ? { icon: option.icon } : {})}
       >

package/src/index.ts

@@ -12,6 +12,7 @@ export * from './components/checkbox'
 export * from './components/color-input'
 export * from './components/combobox'
 export * from './components/command'
+export * from './components/conversation-brief-card'
 export * from './components/currency-input'
 export * from './components/data-table'
 export * from './components/date-picker'

package/src/styles.css

@@ -88,6 +88,7 @@
 
   /* Radii */
   --radius-sm: 6px;
+  --radius-chip: 9px; /* enum chips — softer than sm, still clearly not a pill */
   --radius-md: 10px;
   --radius-lg: 14px;
   --radius-xl: 18px;