@exxatdesignux/ui 0.2.16 → 0.2.18

package/template/components/data-table/index.tsx

@@ -27,6 +27,7 @@ import * as React from "react"
 import { useTheme } from "next-themes"
 import { createPortal } from "react-dom"
 import { cn } from "@/lib/utils"
+import { rafThrottle } from "@/lib/raf-throttle"
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
 import { Kbd, KbdGroup } from "@/components/ui/kbd"
@@ -55,7 +56,8 @@ import {
   TooltipTrigger,
 } from "@/components/ui/tooltip"
 import { OPERATOR_LABELS } from "@/components/table-properties/types"
-import type { ActiveFilter, FilterTextMask } from "@/components/table-properties/types"
+import type { ActiveFilter } from "@/components/table-properties/types"
+import { getConditionalCellBackground } from "@/lib/conditional-rule-match"
 import { formatYmdForDisplay } from "@/lib/date-filter"
 import { FilterDateCalendar } from "@/components/data-table/filter-date-calendar"
 import { FilterTextValueInput } from "@/components/data-table/filter-text-value-input"
@@ -80,26 +82,6 @@ function resolvedColumnLabel<TData>(col: ColumnDef<TData>): string {
   return defaultColumnHeaderLabel(col.key) ?? col.key
 }
 
-function conditionalTextMatches(
-  cellVal: string,
-  needle: string,
-  op: "contains" | "not_contains",
-  textMask: FilterTextMask | undefined,
-) {
-  const v = cellVal.trim()
-  const n = needle.trim()
-  if (!n) return op === "not_contains"
-  if (textMask === "phone" || textMask === "zip") {
-    const nd = n.replace(/\D/g, "")
-    const hay = v.replace(/\D/g, "")
-    if (!nd) return op === "not_contains"
-    const hit = hay.includes(nd)
-    return op === "contains" ? hit : !hit
-  }
-  const hit = v.toLowerCase().includes(n.toLowerCase())
-  return op === "contains" ? hit : !hit
-}
-
 // ─────────────────────────────────────────────────────────────────────────────
 // Internal sub-components
 // ─────────────────────────────────────────────────────────────────────────────
@@ -734,23 +716,29 @@ function useBulkBarFixedToTableScrollEl(
       })
     }
     apply()
-    const ro = new ResizeObserver(() => {
-      requestAnimationFrame(apply)
-    })
+    // rAF-coalesce so a single frame handles bursts of capture-phase scroll
+    // events plus the ResizeObserver firing — instead of N getBoundingClientRect
+    // + setState per second.
+    const scheduled = rafThrottle(apply)
+    const ro = new ResizeObserver(scheduled)
     ro.observe(el)
-    window.addEventListener("resize", apply)
-    window.addEventListener("scroll", apply, true)
+    window.addEventListener("resize", scheduled, { passive: true })
+    window.addEventListener("scroll", scheduled, { passive: true, capture: true })
     return () => {
+      scheduled.cancel()
       ro.disconnect()
-      window.removeEventListener("resize", apply)
-      window.removeEventListener("scroll", apply, true)
+      window.removeEventListener("resize", scheduled)
+      window.removeEventListener("scroll", scheduled, { capture: true })
     }
   }, [active, fullWidth, scrollRef])
   return style
 }
 
 function DataTableInner<TData extends Record<string, unknown>>({
-  data,
+  // `data` / `defaultSort` flow into `useTableState` upstream; the inner table
+  // reads them via `state` and never directly here. Keep the prop slots so
+  // the public `DataTable<TData>` API stays unchanged.
+  data: _data,
   columns,
   getRowId: getRowIdProp,
   getRowSelectionLabel,
@@ -758,7 +746,7 @@ function DataTableInner<TData extends Record<string, unknown>>({
   searchable = true,
   emptyState,
   onRowClick,
-  defaultSort,
+  defaultSort: _defaultSort,
   toolbarSlot,
   bulkActionsSlot,
   addRowLabel = false,
@@ -769,7 +757,7 @@ function DataTableInner<TData extends Record<string, unknown>>({
   state,
 }: DataTableInnerProps<TData>) {
   const {
-    sortRules, setSortRules,
+    setSortRules,
     sortKey, sortDir,
     handleSortByKey,
     addFilter,
@@ -777,7 +765,6 @@ function DataTableInner<TData extends Record<string, unknown>>({
     colMenuSearch, setColMenuSearch,
     selected, setSelected, toggleRow, toggleAll, getRowId,
     colWidths, startResize,
-    colOrder,
     colPins, lockedPins,
     pinColumn, unpinColumn,
     colWrap, toggleWrap,
@@ -785,7 +772,7 @@ function DataTableInner<TData extends Record<string, unknown>>({
     handleDragStart, handleDragOver, handleDrop, handleDragEnd,
     scrollRef, handleScroll, checkOverflow,
     isOverflowing,
-    hoveredRow, setHoveredRow,
+    setHoveredRow,
     rows, pagedRows, groupedRows,
     effectivePins, displayCols,
     isReflowViewport,
@@ -796,12 +783,19 @@ function DataTableInner<TData extends Record<string, unknown>>({
     setSheetOpen,
   } = state
 
-  // Mount overflow check
+  // Mount overflow check + scrollport width for sticky group headers on horizontal scroll.
   React.useEffect(() => {
-    checkOverflow()
+    const syncScrollport = () => {
+      const el = scrollRef.current
+      if (el) {
+        el.style.setProperty("--dt-scrollport-width", `${el.clientWidth}px`)
+      }
+      checkOverflow()
+    }
+    syncScrollport()
     const el = scrollRef.current
     if (!el) return
-    const ro = new ResizeObserver(checkOverflow)
+    const ro = new ResizeObserver(syncScrollport)
     ro.observe(el)
     return () => ro.disconnect()
   // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -843,6 +837,24 @@ function DataTableInner<TData extends Record<string, unknown>>({
   const lastLeftPinKey   = [...displayCols].reverse().find(c => effectivePins[c.key] === "left")?.key
   const firstRightPinKey = displayCols.find(c => effectivePins[c.key] === "right")?.key
 
+  function floatingHeaderPinnedStyle(key: string): React.CSSProperties | undefined {
+    const pin = effectivePins[key]
+    if (!pin) return undefined
+
+    const visibleWidth =
+      typeof floatingHeaderStyle?.width === "number"
+        ? floatingHeaderStyle.width
+        : tableWrapRef.current?.clientWidth ?? floatingHeaderTableWidth
+    const maxScroll = Math.max(0, floatingHeaderTableWidth - visibleWidth)
+    const translateX = pin === "left"
+      ? headerScrollLeft
+      : headerScrollLeft - maxScroll
+
+    // The floating sticky header is horizontally translated as one table.
+    // Counter-translate pinned header cells so they remain locked to the viewport edge.
+    return { position: "relative", transform: `translateX(${translateX}px)` }
+  }
+
   // Row IDs for the current visible rows
   const allRowIds = rows.map((r, i) => getRowId(r, i, getRowIdProp))
   const allSelected  = rows.length > 0 && selected.size === rows.length
@@ -864,6 +876,7 @@ function DataTableInner<TData extends Record<string, unknown>>({
   const [headerIsStuck, setHeaderIsStuck] = React.useState(false)
   const [headerScrollLeft, setHeaderScrollLeft] = React.useState(0)
   const [floatingHeaderStyle, setFloatingHeaderStyle] = React.useState<React.CSSProperties | undefined>(undefined)
+  const [floatingHeaderTableWidth, setFloatingHeaderTableWidth] = React.useState(totalWidth)
   const [isClient, setIsClient] = React.useState(false)
 
   React.useEffect(() => {
@@ -888,11 +901,16 @@ function DataTableInner<TData extends Record<string, unknown>>({
     }
 
     update()
-    window.addEventListener("scroll", update, { passive: true, capture: true })
-    window.addEventListener("resize", update)
+    // rAF-coalesce: capture-phase scroll fires for every ancestor (sidebar,
+    // dashboard panels, anchored sheets), so a single getBoundingClientRect
+    // per frame is more than enough to keep the sticky header aligned.
+    const scheduled = rafThrottle(update)
+    window.addEventListener("scroll", scheduled, { passive: true, capture: true })
+    window.addEventListener("resize", scheduled, { passive: true })
     return () => {
-      window.removeEventListener("scroll", update, true)
-      window.removeEventListener("resize", update)
+      scheduled.cancel()
+      window.removeEventListener("scroll", scheduled, { capture: true })
+      window.removeEventListener("resize", scheduled)
     }
   }, [showColumnHeaders, rows.length, displayCols.length])
 
@@ -915,6 +933,11 @@ function DataTableInner<TData extends Record<string, unknown>>({
       const borderLeft = parseFloat(cs.borderLeftWidth) || 0
       const borderRight = parseFloat(cs.borderRightWidth) || 0
       const visibleWidth = Math.max(0, wrapEl.clientWidth - borderLeft - borderRight)
+      const renderedTableWidth = Math.max(
+        totalWidth,
+        visibleWidth,
+        wrapEl.querySelector("table")?.getBoundingClientRect().width ?? 0,
+      )
       setFloatingHeaderStyle({
         position: "fixed",
         top: headerOffset,
@@ -922,18 +945,21 @@ function DataTableInner<TData extends Record<string, unknown>>({
         width: visibleWidth,
         zIndex: 50,
       })
+      setFloatingHeaderTableWidth(renderedTableWidth)
       setHeaderScrollLeft(wrapEl.scrollLeft)
     }
 
     apply()
-    const ro = new ResizeObserver(() => requestAnimationFrame(apply))
+    const scheduled = rafThrottle(apply)
+    const ro = new ResizeObserver(scheduled)
     ro.observe(wrapEl)
-    window.addEventListener("scroll", apply, true)
-    window.addEventListener("resize", apply)
+    window.addEventListener("scroll", scheduled, { passive: true, capture: true })
+    window.addEventListener("resize", scheduled, { passive: true })
     return () => {
+      scheduled.cancel()
       ro.disconnect()
-      window.removeEventListener("scroll", apply, true)
-      window.removeEventListener("resize", apply)
+      window.removeEventListener("scroll", scheduled, { capture: true })
+      window.removeEventListener("resize", scheduled)
     }
   }, [headerIsStuck, showColumnHeaders, totalWidth, displayCols.length])
 
@@ -968,7 +994,7 @@ function DataTableInner<TData extends Record<string, unknown>>({
               <div style={{ transform: `translateX(${-headerScrollLeft}px)` }}>
                 <table
                   className="w-full text-sm border-separate border-spacing-0"
-                  style={{ tableLayout: "fixed", width: totalWidth }}
+                  style={{ tableLayout: "fixed", width: floatingHeaderTableWidth }}
                 >
                   <colgroup>
                     {displayCols.map(col => (
@@ -984,6 +1010,7 @@ function DataTableInner<TData extends Record<string, unknown>>({
                           <th
                             key={col.key}
                             scope="col"
+                            style={floatingHeaderPinnedStyle(col.key)}
                             className={cn(
                               "h-9 px-3 text-left align-middle select-none",
                               "text-xs font-medium text-muted-foreground tracking-wide",
@@ -992,6 +1019,8 @@ function DataTableInner<TData extends Record<string, unknown>>({
                                 ? "border-r border-border last:border-r-0"
                                 : "last:border-r-0"),
                               isPinned ? "z-40" : "z-30",
+                              isPinned && "relative",
+                              isEdgePinCol && stickyShadow(effectivePins[col.key]),
                             )}
                           >
                             <div className="flex items-center justify-between gap-1 min-w-0">
@@ -1058,7 +1087,11 @@ function DataTableInner<TData extends Record<string, unknown>>({
       >
         <table
           className="w-full text-sm border-separate border-spacing-0"
-          style={{ tableLayout: "fixed", minWidth: totalWidth }}
+          style={{
+            tableLayout: "fixed",
+            minWidth: totalWidth,
+            width: headerIsStuck ? floatingHeaderTableWidth : undefined,
+          }}
         >
           <colgroup>
             {displayCols.map(col => (
@@ -1306,25 +1339,25 @@ function DataTableInner<TData extends Record<string, unknown>>({
               <React.Fragment key={groupKey ?? "__all__"}>
                 {groupLabel && (
                   <tr>
-                    <td
-                      colSpan={displayCols.length}
-                      className={cn(
-                        "px-4 py-1.5 text-xs font-semibold text-muted-foreground tracking-wide bg-dt-group-bg select-none",
-                        !isReflowViewport && "sticky left-0",
-                        "border-b border-border",
-                      )}
-                    >
-                      {groupLabel}
-                      <span className="ml-2 font-normal normal-case opacity-60 tracking-normal">
-                        {groupRows.length} record{groupRows.length !== 1 ? "s" : ""}
-                      </span>
+                    <td colSpan={displayCols.length} className="p-0 border-b border-border bg-dt-group-bg">
+                      <div
+                        className={cn(
+                          "sticky left-0 z-[25] px-4 py-1.5 text-xs font-semibold text-muted-foreground tracking-wide bg-dt-group-bg select-none",
+                          !isReflowViewport && "shadow-[4px_0_8px_-4px_var(--sticky-edge-fade)]",
+                        )}
+                        style={{ width: "var(--dt-scrollport-width, 100%)" }}
+                      >
+                        {groupLabel}
+                        <span className="ml-2 font-normal normal-case opacity-60 tracking-normal">
+                          {groupRows.length} record{groupRows.length !== 1 ? "s" : ""}
+                        </span>
+                      </div>
                     </td>
                   </tr>
                 )}
                 {groupRows.map((row, rowIndex) => {
                   const rowId = getRowId(row, rowIndex, getRowIdProp)
                   const isSelected = selected.has(rowId)
-                  const isHovered  = hoveredRow === rowId
                   const rowClickable = Boolean(onRowClick) || selectable
                   function handleRowClick(e: React.MouseEvent<HTMLTableRowElement>) {
                     if (!rowClickable) return
@@ -1375,37 +1408,12 @@ function DataTableInner<TData extends Record<string, unknown>>({
                           ]
                         )
 
-                        // Conditional rule background for this cell
-                        const conditionalBg = conditionalRules?.find(rule => {
-                          if (rule.fieldKey !== col.key) return false
-                          const cellVal = String(row[rule.fieldKey as keyof TData] ?? "")
-                          const v = cellVal.trim()
-                          const ruleCol = columns.find(c => c.key === rule.fieldKey)
-                          const textMask =
-                            ruleCol?.filter?.type === "text" ? ruleCol.filter.textMask : undefined
-                          switch (rule.operator) {
-                            case "is":
-                              return rule.values.length > 0 && rule.values.includes(v)
-                            case "is_not":
-                              return rule.values.length > 0 && !rule.values.includes(v)
-                            case "contains":
-                              return (
-                                rule.values.length > 0 &&
-                                rule.values.some(val =>
-                                  conditionalTextMatches(v, val, "contains", textMask),
-                                )
-                              )
-                            case "not_contains":
-                              return (
-                                rule.values.length > 0 &&
-                                !rule.values.some(val =>
-                                  conditionalTextMatches(v, val, "contains", textMask),
-                                )
-                              )
-                            default:
-                              return false
-                          }
-                        })?.bgColor
+                        const conditionalBg = getConditionalCellBackground(
+                          row,
+                          col.key,
+                          conditionalRules,
+                          columns,
+                        )
 
                         const tdStyle = conditionalBg
                           ? { ...cs, background: conditionalBg }

package/template/components/data-table/pagination.tsx

@@ -201,7 +201,6 @@ export function DataTablePaginated<TData extends Record<string, unknown>>({
         {originalToolbarSlot ? originalToolbarSlot(state) : null}
       </>
     ),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
     [originalToolbarSlot],
   )
 

package/template/components/data-table/types.ts

@@ -49,7 +49,10 @@ export interface ColumnDef<TData> {
   }
 }
 
-export interface CellContext<TData> {
+// `TData` is part of the public surface so callers can write
+// `CellContext<Placement>` for symmetry with column-def renderers, even
+// though the interface body doesn't currently reference it.
+export interface CellContext<_TData> {
   rowIndex: number
   selected: boolean
   onSelect: (selected: boolean) => void