@epilot/zenith-react 0.2.0-next.1 → 0.2.0-next.4

package/dist/components/data-table/data-table-header.js.map

@@ -1 +1 @@
-{"version":3,"file":"data-table-header.js","sources":["../../../src/components/data-table/data-table-header.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { useCallback, useMemo } from \"react\"\nimport { flexRender, type Header } from \"@tanstack/react-table\"\nimport {\n  DndContext,\n  closestCenter,\n  KeyboardSensor,\n  PointerSensor,\n  useSensor,\n  useSensors,\n  type DragEndEvent,\n  type Modifier,\n} from \"@dnd-kit/core\"\nimport {\n  SortableContext,\n  horizontalListSortingStrategy,\n  arrayMove,\n  sortableKeyboardCoordinates,\n} from \"@dnd-kit/sortable\"\nimport { mergeClasses, shorthands } from \"@epilot/zenith-runtime/v1\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeZenithStyles } from \"../../styles/make-styles\"\nimport * as tokens from \"../../tokens\"\nimport { TableHeader, TableRow, TableHead } from \"../table/table\"\nimport {\n  useDataTable,\n  useDataTableContent,\n  useDataTableVirtualizer,\n} from \"./hooks\"\nimport { DataTableHeaderDraggable } from \"./data-table-header-draggable\"\nimport {\n  getPinnedColumnOffset,\n  isLastLeftPinnedColumn,\n  isFirstRightPinnedColumn,\n} from \"./data-table-pinning-utils\"\n\n// Restrict drag movement to horizontal axis only\nconst restrictToHorizontalAxis: Modifier = ({ transform }) => ({\n  ...transform,\n  y: 0,\n})\n\n// TanStack Table's default column width\nconst DEFAULT_COLUMN_WIDTH = 150\n\n/** Check if a column can be reordered */\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nfunction isColumnReorderable(column: Header<any, unknown>[\"column\"]): boolean {\n  if (column.id === \"select\") return false\n  const meta = column.columnDef.meta as { enableOrdering?: boolean } | undefined\n  if (meta?.enableOrdering === false) return false\n  return true\n}\n\nconst useStyles = makeZenithStyles({\n  headerTitle: {\n    display: \"block\",\n    ...shorthands.overflow(\"hidden\"),\n    whiteSpace: \"nowrap\",\n    fontWeight: tokens.fontWeightSemibold,\n  },\n  shadowLeft: {\n    boxShadow: \"2px 0 5px -2px rgba(0,0,0,0.1)\",\n  },\n  shadowRight: {\n    boxShadow: \"-2px 0 5px -2px rgba(0,0,0,0.1)\",\n  },\n})\n\nexport type DataTableHeaderProps = {\n  /** Additional class name */\n  className?: string\n  /** Whether to make header sticky */\n  sticky?: boolean\n  /** Background color for sticky header. Default: tokens.gray2 */\n  stickyBackground?: string\n}\n\n/**\n * Renders the table header with column headers.\n * Must be used within a DataTable component.\n */\nexport const DataTableHeader = React.forwardRef<\n  HTMLTableSectionElement,\n  DataTableHeaderProps\n>(function DataTableHeader(\n  { className, sticky, stickyBackground = tokens.gray2 },\n  ref\n) {\n  const styles = useStyles()\n  const {\n    table,\n    disableColumnResizing,\n    showHeaderBorder,\n    fitHeaderWidth,\n    enableColumnOrdering,\n  } = useDataTable()\n  const enableColumnResizing = !disableColumnResizing\n  const virtualizerContext = useDataTableVirtualizer()\n  const contentContext = useDataTableContent()\n  const spacerWidth = contentContext?.spacerWidth ?? 0\n\n  // Auto-enable sticky when virtualization is active\n  const isSticky = sticky ?? Boolean(virtualizerContext)\n\n  // DnD sensors for column reordering\n  const sensors = useSensors(\n    useSensor(PointerSensor, {\n      activationConstraint: { distance: 5 },\n    }),\n    useSensor(KeyboardSensor, {\n      coordinateGetter: sortableKeyboardCoordinates,\n    })\n  )\n\n  const handleDragEnd = useCallback(\n    (event: DragEndEvent) => {\n      const { active, over } = event\n      if (!over || active.id === over.id) return\n\n      const currentOrder =\n        table.getState().columnOrder && table.getState().columnOrder.length > 0\n          ? table.getState().columnOrder\n          : table.getAllLeafColumns().map((c) => c.id)\n\n      const oldIndex = currentOrder.indexOf(active.id as string)\n      const newIndex = currentOrder.indexOf(over.id as string)\n\n      if (oldIndex === -1 || newIndex === -1) return\n\n      const newOrder = arrayMove(currentOrder, oldIndex, newIndex)\n      table.setColumnOrder(newOrder)\n    },\n    [table]\n  )\n\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  const renderHeaders = (headers: Header<any, unknown>[]) =>\n    headers.map((header) => {\n      const isPinned = header.column.getIsPinned()\n      const pinnedOffset = isPinned\n        ? getPinnedColumnOffset(header.column, table)\n        : undefined\n      const isLastLeft = isLastLeftPinnedColumn(header.column, table)\n      const isFirstRight = isFirstRightPinnedColumn(header.column, table)\n      const columnMeta = header.column.columnDef.meta as\n        { align?: \"left\" | \"center\" | \"right\" } | undefined\n      const align = columnMeta?.align\n\n      const cellStyle: React.CSSProperties = {\n        width: enableColumnResizing\n          ? header.getSize()\n          : header.getSize() !== DEFAULT_COLUMN_WIDTH\n            ? header.getSize()\n            : undefined,\n        minWidth: fitHeaderWidth ? \"max-content\" : undefined,\n        backgroundColor: isSticky || isPinned ? stickyBackground : undefined,\n        position:\n          isSticky || isPinned\n            ? \"sticky\"\n            : enableColumnResizing\n              ? \"relative\"\n              : undefined,\n        top: isSticky ? 0 : undefined,\n        left: isPinned === \"left\" ? `${pinnedOffset}px` : undefined,\n        right: isPinned === \"right\" ? `${pinnedOffset}px` : undefined,\n        zIndex: isPinned ? 30 : isSticky ? 10 : undefined,\n        // Reduce padding for sortable headers\n        ...(() => {\n          const meta = header.column.columnDef.meta as\n            | {\n                _sortableHeaderWrapped?: boolean\n                align?: \"left\" | \"right\" | \"center\"\n              }\n            | undefined\n          const shouldReducePadding =\n            meta?._sortableHeaderWrapped ||\n            (header.column.getCanSort() &&\n              typeof header.column.columnDef.header === \"function\")\n          if (!shouldReducePadding) return {}\n          return meta?.align === \"right\"\n            ? { paddingRight: 8 }\n            : { paddingLeft: 8 }\n        })(),\n      }\n\n      const cellClassName = mergeClasses(\n        isLastLeft && styles.shadowLeft,\n        isFirstRight && styles.shadowRight\n      )\n\n      const ariaSort =\n        header.column.getIsSorted() === \"asc\"\n          ? (\"ascending\" as const)\n          : header.column.getIsSorted() === \"desc\"\n            ? (\"descending\" as const)\n            : header.column.getCanSort()\n              ? (\"none\" as const)\n              : undefined\n\n      const headerContent = (\n        <span className={styles.headerTitle}>\n          {header.isPlaceholder\n            ? null\n            : flexRender(header.column.columnDef.header, header.getContext())}\n        </span>\n      )\n\n      if (enableColumnOrdering) {\n        const canReorder = isColumnReorderable(header.column) && !isPinned\n\n        return (\n          <DataTableHeaderDraggable\n            key={header.id}\n            headerId={header.column.id}\n            disabled={!canReorder}\n            align={align}\n            aria-sort={ariaSort}\n            style={cellStyle}\n            className={cellClassName}\n          >\n            {headerContent}\n          </DataTableHeaderDraggable>\n        )\n      }\n\n      return (\n        <TableHead\n          key={header.id}\n          align={align}\n          aria-sort={ariaSort}\n          style={cellStyle}\n          className={cellClassName}\n        >\n          {headerContent}\n        </TableHead>\n      )\n    })\n\n  // Get column IDs for SortableContext\n  const orderedColumnIds = table.getAllLeafColumns().map((col) => col.id)\n\n  const headerContent = (\n    <TableHeader\n      ref={ref}\n      data-slot=\"data-table-header\"\n      {...{ [SLOT_ATTR]: \"data-table-header\" }}\n      data-fs-element=\"DataTable-Header\"\n      className={className}\n    >\n      {table.getHeaderGroups().map((headerGroup) => (\n        <TableRow\n          key={headerGroup.id}\n          noHover\n          style={{\n            boxShadow:\n              showHeaderBorder !== false\n                ? `inset 0 -1px 0 0 ${tokens.grayA6}`\n                : \"none\",\n          }}\n        >\n          {enableColumnOrdering ? (\n            <SortableContext\n              items={orderedColumnIds}\n              strategy={horizontalListSortingStrategy}\n            >\n              {renderHeaders(headerGroup.headers)}\n            </SortableContext>\n          ) : (\n            renderHeaders(headerGroup.headers)\n          )}\n          {/* Spacer cell - absorbs remaining width when columns < container */}\n          {spacerWidth > 0 && (\n            <TableHead\n              data-spacer\n              aria-hidden=\"true\"\n              style={{\n                width: spacerWidth,\n                padding: 0,\n                backgroundColor: isSticky ? stickyBackground : undefined,\n                position: isSticky ? \"sticky\" : undefined,\n                top: isSticky ? 0 : undefined,\n                zIndex: isSticky ? 5 : undefined,\n              }}\n            />\n          )}\n        </TableRow>\n      ))}\n    </TableHeader>\n  )\n\n  const a11yContainer = useMemo(\n    () =>\n      enableColumnOrdering && typeof document !== \"undefined\"\n        ? document.body\n        : undefined,\n    [enableColumnOrdering]\n  )\n\n  // Wrap with DndContext; portal a11y elements to body to avoid invalid DOM nesting in <table>\n  if (enableColumnOrdering) {\n    return (\n      <DndContext\n        sensors={sensors}\n        collisionDetection={closestCenter}\n        onDragEnd={handleDragEnd}\n        modifiers={[restrictToHorizontalAxis]}\n        accessibility={{ container: a11yContainer }}\n      >\n        {headerContent}\n      </DndContext>\n    )\n  }\n\n  return headerContent\n})\n"],"names":["restrictToHorizontalAxis","transform","DEFAULT_COLUMN_WIDTH","isColumnReorderable","column","meta","useStyles","makeZenithStyles","shorthands","tokens.fontWeightSemibold","DataTableHeader","React","className","sticky","stickyBackground","tokens.gray2","ref","styles","table","disableColumnResizing","showHeaderBorder","fitHeaderWidth","enableColumnOrdering","useDataTable","enableColumnResizing","virtualizerContext","useDataTableVirtualizer","contentContext","useDataTableContent","spacerWidth","isSticky","sensors","useSensors","useSensor","PointerSensor","KeyboardSensor","sortableKeyboardCoordinates","handleDragEnd","useCallback","event","active","over","currentOrder","c","oldIndex","newIndex","newOrder","arrayMove","renderHeaders","headers","header","isPinned","pinnedOffset","getPinnedColumnOffset","isLastLeft","isLastLeftPinnedColumn","isFirstRight","isFirstRightPinnedColumn","columnMeta","align","cellStyle","cellClassName","mergeClasses","ariaSort","headerContent","jsx","flexRender","canReorder","DataTableHeaderDraggable","TableHead","orderedColumnIds","col","TableHeader","SLOT_ATTR","headerGroup","jsxs","TableRow","tokens.grayA6","SortableContext","horizontalListSortingStrategy","a11yContainer","useMemo","DndContext","closestCenter"],"mappings":"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"}
+{"version":3,"file":"data-table-header.js","sources":["../../../src/components/data-table/data-table-header.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { useCallback, useMemo } from \"react\"\nimport { flexRender, type Header } from \"@tanstack/react-table\"\nimport {\n  DndContext,\n  closestCenter,\n  KeyboardSensor,\n  PointerSensor,\n  useSensor,\n  useSensors,\n  type DragEndEvent,\n  type Modifier,\n} from \"@dnd-kit/core\"\nimport {\n  SortableContext,\n  horizontalListSortingStrategy,\n  arrayMove,\n  sortableKeyboardCoordinates,\n} from \"@dnd-kit/sortable\"\nimport { mergeClasses, shorthands } from \"@epilot/zenith-runtime/v1\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeZenithStyles } from \"../../styles/make-styles\"\nimport * as tokens from \"../../tokens\"\nimport { TableHeader, TableRow, TableHead } from \"../table/table\"\nimport {\n  useDataTable,\n  useDataTableContent,\n  useDataTableVirtualizer,\n} from \"./hooks\"\nimport { DataTableHeaderDraggable } from \"./data-table-header-draggable\"\nimport {\n  getPinnedColumnOffset,\n  isLastLeftPinnedColumn,\n  isFirstRightPinnedColumn,\n} from \"./data-table-pinning-utils\"\n\n// Restrict drag movement to horizontal axis only\nconst restrictToHorizontalAxis: Modifier = ({ transform }) => ({\n  ...transform,\n  y: 0,\n})\n\n// TanStack Table's default column width\nconst DEFAULT_COLUMN_WIDTH = 150\n\n/** Check if a column can be reordered */\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nfunction isColumnReorderable(column: Header<any, unknown>[\"column\"]): boolean {\n  if (column.id === \"select\") return false\n  const meta = column.columnDef.meta as { enableOrdering?: boolean } | undefined\n  if (meta?.enableOrdering === false) return false\n  return true\n}\n\nconst useStyles = makeZenithStyles({\n  // Painted on the cells, as DataTableRow's rule is: WebKit draws no\n  // box-shadow on a <tr>.\n  headerRowBorder: {\n    \"& > th\": {\n      backgroundImage: `linear-gradient(${tokens.grayA6}, ${tokens.grayA6})`,\n      backgroundSize: \"100% 1px\",\n      backgroundPosition: \"bottom\",\n      backgroundRepeat: \"no-repeat\",\n    },\n  },\n  headerTitle: {\n    display: \"block\",\n    ...shorthands.overflow(\"hidden\"),\n    whiteSpace: \"nowrap\",\n    fontWeight: tokens.fontWeightSemibold,\n    // The clip truncates long titles, but a control in the header (the\n    // select-all checkbox) needs its focus ring drawn outside its box: give\n    // the clip room for it, and take that room back so layout is unchanged.\n    boxSizing: \"border-box\",\n    ...shorthands.padding(tokens.spacingElement1),\n    ...shorthands.margin(`calc(${tokens.spacingElement1} * -1)`),\n  },\n  shadowLeft: {\n    boxShadow: \"2px 0 5px -2px rgba(0,0,0,0.1)\",\n  },\n  shadowRight: {\n    boxShadow: \"-2px 0 5px -2px rgba(0,0,0,0.1)\",\n  },\n})\n\nexport type DataTableHeaderProps = {\n  /** Additional class name */\n  className?: string\n  /** Whether to make header sticky */\n  sticky?: boolean\n  /** Background color for sticky header. Default: tokens.gray2 */\n  stickyBackground?: string\n}\n\n/**\n * Renders the table header with column headers.\n * Must be used within a DataTable component.\n */\nexport const DataTableHeader = React.forwardRef<\n  HTMLTableSectionElement,\n  DataTableHeaderProps\n>(function DataTableHeader(\n  { className, sticky, stickyBackground = tokens.gray2 },\n  ref\n) {\n  const styles = useStyles()\n  const {\n    table,\n    disableColumnResizing,\n    showHeaderBorder,\n    fitHeaderWidth,\n    enableColumnOrdering,\n  } = useDataTable()\n  const enableColumnResizing = !disableColumnResizing\n  const virtualizerContext = useDataTableVirtualizer()\n  const contentContext = useDataTableContent()\n  const spacerWidth = contentContext?.spacerWidth ?? 0\n\n  // Auto-enable sticky when virtualization is active\n  const isSticky = sticky ?? Boolean(virtualizerContext)\n\n  // DnD sensors for column reordering\n  const sensors = useSensors(\n    useSensor(PointerSensor, {\n      activationConstraint: { distance: 5 },\n    }),\n    useSensor(KeyboardSensor, {\n      coordinateGetter: sortableKeyboardCoordinates,\n    })\n  )\n\n  const handleDragEnd = useCallback(\n    (event: DragEndEvent) => {\n      const { active, over } = event\n      if (!over || active.id === over.id) return\n\n      const currentOrder =\n        table.getState().columnOrder && table.getState().columnOrder.length > 0\n          ? table.getState().columnOrder\n          : table.getAllLeafColumns().map((c) => c.id)\n\n      const oldIndex = currentOrder.indexOf(active.id as string)\n      const newIndex = currentOrder.indexOf(over.id as string)\n\n      if (oldIndex === -1 || newIndex === -1) return\n\n      const newOrder = arrayMove(currentOrder, oldIndex, newIndex)\n      table.setColumnOrder(newOrder)\n    },\n    [table]\n  )\n\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  const renderHeaders = (headers: Header<any, unknown>[]) =>\n    headers.map((header) => {\n      const isPinned = header.column.getIsPinned()\n      const pinnedOffset = isPinned\n        ? getPinnedColumnOffset(header.column, table)\n        : undefined\n      const isLastLeft = isLastLeftPinnedColumn(header.column, table)\n      const isFirstRight = isFirstRightPinnedColumn(header.column, table)\n      const columnMeta = header.column.columnDef.meta as\n        { align?: \"left\" | \"center\" | \"right\" } | undefined\n      const align = columnMeta?.align\n\n      const cellStyle: React.CSSProperties = {\n        width: enableColumnResizing\n          ? header.getSize()\n          : header.getSize() !== DEFAULT_COLUMN_WIDTH\n            ? header.getSize()\n            : undefined,\n        minWidth: fitHeaderWidth ? \"max-content\" : undefined,\n        backgroundColor: isSticky || isPinned ? stickyBackground : undefined,\n        position:\n          isSticky || isPinned\n            ? \"sticky\"\n            : enableColumnResizing\n              ? \"relative\"\n              : undefined,\n        top: isSticky ? 0 : undefined,\n        left: isPinned === \"left\" ? `${pinnedOffset}px` : undefined,\n        right: isPinned === \"right\" ? `${pinnedOffset}px` : undefined,\n        zIndex: isPinned ? 30 : isSticky ? 10 : undefined,\n        // Reduce padding for sortable headers\n        ...(() => {\n          const meta = header.column.columnDef.meta as\n            | {\n                _sortableHeaderWrapped?: boolean\n                align?: \"left\" | \"right\" | \"center\"\n              }\n            | undefined\n          const shouldReducePadding =\n            meta?._sortableHeaderWrapped ||\n            (header.column.getCanSort() &&\n              typeof header.column.columnDef.header === \"function\")\n          if (!shouldReducePadding) return {}\n          return meta?.align === \"right\"\n            ? { paddingRight: 8 }\n            : { paddingLeft: 8 }\n        })(),\n      }\n\n      const cellClassName = mergeClasses(\n        isLastLeft && styles.shadowLeft,\n        isFirstRight && styles.shadowRight\n      )\n\n      const ariaSort =\n        header.column.getIsSorted() === \"asc\"\n          ? (\"ascending\" as const)\n          : header.column.getIsSorted() === \"desc\"\n            ? (\"descending\" as const)\n            : header.column.getCanSort()\n              ? (\"none\" as const)\n              : undefined\n\n      const headerContent = (\n        <span className={styles.headerTitle}>\n          {header.isPlaceholder\n            ? null\n            : flexRender(header.column.columnDef.header, header.getContext())}\n        </span>\n      )\n\n      if (enableColumnOrdering) {\n        const canReorder = isColumnReorderable(header.column) && !isPinned\n\n        return (\n          <DataTableHeaderDraggable\n            key={header.id}\n            headerId={header.column.id}\n            disabled={!canReorder}\n            align={align}\n            aria-sort={ariaSort}\n            style={cellStyle}\n            className={cellClassName}\n          >\n            {headerContent}\n          </DataTableHeaderDraggable>\n        )\n      }\n\n      return (\n        <TableHead\n          key={header.id}\n          align={align}\n          aria-sort={ariaSort}\n          style={cellStyle}\n          className={cellClassName}\n        >\n          {headerContent}\n        </TableHead>\n      )\n    })\n\n  // Get column IDs for SortableContext\n  const orderedColumnIds = table.getAllLeafColumns().map((col) => col.id)\n\n  const headerContent = (\n    <TableHeader\n      ref={ref}\n      data-slot=\"data-table-header\"\n      {...{ [SLOT_ATTR]: \"data-table-header\" }}\n      data-fs-element=\"DataTable-Header\"\n      className={className}\n    >\n      {table.getHeaderGroups().map((headerGroup) => (\n        <TableRow\n          key={headerGroup.id}\n          noHover\n          className={\n            showHeaderBorder !== false ? styles.headerRowBorder : undefined\n          }\n        >\n          {enableColumnOrdering ? (\n            <SortableContext\n              items={orderedColumnIds}\n              strategy={horizontalListSortingStrategy}\n            >\n              {renderHeaders(headerGroup.headers)}\n            </SortableContext>\n          ) : (\n            renderHeaders(headerGroup.headers)\n          )}\n          {/* Spacer cell - absorbs remaining width when columns < container */}\n          {spacerWidth > 0 && (\n            <TableHead\n              data-spacer\n              aria-hidden=\"true\"\n              style={{\n                width: spacerWidth,\n                padding: 0,\n                backgroundColor: isSticky ? stickyBackground : undefined,\n                position: isSticky ? \"sticky\" : undefined,\n                top: isSticky ? 0 : undefined,\n                zIndex: isSticky ? 5 : undefined,\n              }}\n            />\n          )}\n        </TableRow>\n      ))}\n    </TableHeader>\n  )\n\n  const a11yContainer = useMemo(\n    () =>\n      enableColumnOrdering && typeof document !== \"undefined\"\n        ? document.body\n        : undefined,\n    [enableColumnOrdering]\n  )\n\n  // Wrap with DndContext; portal a11y elements to body to avoid invalid DOM nesting in <table>\n  if (enableColumnOrdering) {\n    return (\n      <DndContext\n        sensors={sensors}\n        collisionDetection={closestCenter}\n        onDragEnd={handleDragEnd}\n        modifiers={[restrictToHorizontalAxis]}\n        accessibility={{ container: a11yContainer }}\n      >\n        {headerContent}\n      </DndContext>\n    )\n  }\n\n  return headerContent\n})\n"],"names":["restrictToHorizontalAxis","transform","DEFAULT_COLUMN_WIDTH","isColumnReorderable","column","meta","useStyles","makeZenithStyles","tokens.grayA6","shorthands","tokens.fontWeightSemibold","tokens.spacingElement1","DataTableHeader","React","className","sticky","stickyBackground","tokens.gray2","ref","styles","table","disableColumnResizing","showHeaderBorder","fitHeaderWidth","enableColumnOrdering","useDataTable","enableColumnResizing","virtualizerContext","useDataTableVirtualizer","contentContext","useDataTableContent","spacerWidth","isSticky","sensors","useSensors","useSensor","PointerSensor","KeyboardSensor","sortableKeyboardCoordinates","handleDragEnd","useCallback","event","active","over","currentOrder","c","oldIndex","newIndex","newOrder","arrayMove","renderHeaders","headers","header","isPinned","pinnedOffset","getPinnedColumnOffset","isLastLeft","isLastLeftPinnedColumn","isFirstRight","isFirstRightPinnedColumn","columnMeta","align","cellStyle","cellClassName","mergeClasses","ariaSort","headerContent","jsx","flexRender","canReorder","DataTableHeaderDraggable","TableHead","orderedColumnIds","col","TableHeader","SLOT_ATTR","headerGroup","jsxs","TableRow","SortableContext","horizontalListSortingStrategy","a11yContainer","useMemo","DndContext","closestCenter"],"mappings":"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"}

package/dist/components/data-table/data-table-row.js

@@ -1,10 +1,10 @@
-import { jsxs as A, jsx as b } from "react/jsx-runtime";
+import { jsxs as A, jsx as p } from "react/jsx-runtime";
 import * as B from "react";
 import { flexRender as N } from "../../vendor/.bun/@tanstack_react-table@8.21.3_6f4b9a1cfb20c0ae/vendor/@tanstack/react-table/build/lib/index.js";
-import { mergeClasses as p, SLOT_ATTR as f, shorthands as h } from "@epilot/zenith-runtime/v1";
-import { makeZenithStyles as P } from "../../styles/make-styles.js";
-import { boxModel as g } from "../../styles/host-reset.js";
-import { grayA6 as $, accentA3 as x } from "../../tokens/index.js";
+import { mergeClasses as w, SLOT_ATTR as u, shorthands as g } from "@epilot/zenith-runtime/v1";
+import { makeZenithStyles as $ } from "../../styles/make-styles.js";
+import { boxModel as h } from "../../styles/host-reset.js";
+import { grayA6 as k, accentA3 as x } from "../../tokens/index.js";
 import { TableRow as z, TableCell as C } from "../table/table.js";
 import { getPinnedColumnOffset as j, isLastLeftPinnedColumn as F, isFirstRightPinnedColumn as K } from "./data-table-pinning-utils.js";
 import { useDataTable as V } from "./hooks/use-data-table.js";
@@ -17,7 +17,7 @@ function q(t) {
   const a = t.column.columnDef.meta;
   return a == null ? void 0 : a.align;
 }
-const k = [
+const R = [
   "button",
   "a",
   "input",
@@ -36,8 +36,8 @@ const k = [
   '[role="switch"]',
   '[role="tab"]',
   "[data-radix-collection-item]",
-  `[${f}="checkbox"]`
-], G = P({
+  `[${u}="checkbox"]`
+], G = $({
   rowClickable: {
     cursor: "pointer",
     ":hover": {
@@ -47,23 +47,32 @@ const k = [
   rowSelected: {
     backgroundColor: x
   },
+  // The rule is painted on the cells: WebKit draws no box-shadow on a <tr>,
+  // and row borders don't paint under DataTableContent's
+  // `border-collapse: separate`. A background image also stays clear of the
+  // pinned cells' own box-shadow and adds no height.
   rowBorder: {
-    boxShadow: `inset 0 -1px 0 0 ${$}`,
-    "&:last-child": {
-      boxShadow: "none"
+    "& > td": {
+      backgroundImage: `linear-gradient(${k}, ${k})`,
+      backgroundSize: "100% 1px",
+      backgroundPosition: "bottom",
+      backgroundRepeat: "no-repeat"
+    },
+    "&:last-child > td": {
+      backgroundImage: "none"
     }
   },
   cellTruncate: {
-    ...g,
+    ...h,
     maxWidth: 0,
-    ...h.overflow("hidden"),
+    ...g.overflow("hidden"),
     textOverflow: "ellipsis",
     whiteSpace: "nowrap"
   },
   cellWrap: {
-    ...g,
+    ...h,
     maxWidth: 0,
-    ...h.overflow("hidden"),
+    ...g.overflow("hidden"),
     overflowWrap: "break-word",
     wordBreak: "break-word"
   },
@@ -78,21 +87,21 @@ function H({ row: t, style: a, className: n }, v) {
   const r = G(), {
     table: c,
     onRowClick: i,
-    clickableRowClassName: R,
-    selectedRowClassName: T,
-    cellOverflow: S = "truncate",
+    clickableRowClassName: T,
+    selectedRowClassName: S,
+    cellOverflow: I = "truncate",
     showRowBorders: D,
-    disableColumnResizing: I
-  } = V(), d = _(), u = (d == null ? void 0 : d.spacerWidth) ?? 0, y = !I, s = !!i, E = (e) => {
+    disableColumnResizing: y
+  } = V(), d = _(), f = (d == null ? void 0 : d.spacerWidth) ?? 0, E = !y, s = !!i, O = (e) => {
     if (!i) return;
     const l = e.target;
-    k.some(
+    R.some(
       (o) => l.closest(o)
     ) || i(t, e);
-  }, O = (e) => {
+  }, L = (e) => {
     if (i && (e.key === "Enter" || e.key === " ")) {
       const l = e.target;
-      if (k.some(
+      if (R.some(
         (o) => l.closest(o)
       ))
         return;
@@ -104,53 +113,53 @@ function H({ row: t, style: a, className: n }, v) {
     {
       ref: v,
       "data-slot": "data-table-row",
-      [f]: "data-table-row",
+      [u]: "data-table-row",
       "data-fs-element": "DataTable-Row",
       "data-state": t.getIsSelected() ? "selected" : void 0,
       "data-clickable": s ? "true" : void 0,
       style: a,
-      className: p(
+      className: w(
         D !== !1 && r.rowBorder,
-        s && (R ?? r.rowClickable),
-        t.getIsSelected() && (T ?? r.rowSelected),
+        s && (T ?? r.rowClickable),
+        t.getIsSelected() && (S ?? r.rowSelected),
         n
       ),
-      onClick: s ? E : void 0,
+      onClick: s ? O : void 0,
       tabIndex: s ? 0 : void 0,
-      onKeyDown: s ? O : void 0,
+      onKeyDown: s ? L : void 0,
       children: [
         t.getVisibleCells().map((e) => {
-          const l = Z(e, S), m = q(e), o = e.column.getIsPinned(), w = o ? j(e.column, c) : void 0, L = F(e.column, c), W = K(e.column, c);
-          return /* @__PURE__ */ b(
+          const l = Z(e, I), m = q(e), o = e.column.getIsPinned(), b = o ? j(e.column, c) : void 0, W = F(e.column, c), P = K(e.column, c);
+          return /* @__PURE__ */ p(
             C,
             {
               "data-slot": "data-table-cell",
-              [f]: "data-table-cell",
+              [u]: "data-table-cell",
               "data-fs-element": "DataTable-Cell",
               "data-pinned": o || void 0,
               align: m,
               style: {
-                width: y || o ? e.column.getSize() : void 0,
-                left: o === "left" ? `${w}px` : void 0,
-                right: o === "right" ? `${w}px` : void 0
+                width: E || o ? e.column.getSize() : void 0,
+                left: o === "left" ? `${b}px` : void 0,
+                right: o === "right" ? `${b}px` : void 0
               },
-              className: p(
+              className: w(
                 l === "truncate" && r.cellTruncate,
                 l === "wrap" && r.cellWrap,
-                L && r.shadowLeft,
-                W && r.shadowRight
+                W && r.shadowLeft,
+                P && r.shadowRight
               ),
               children: N(e.column.columnDef.cell, e.getContext())
             },
             e.id
           );
         }),
-        u > 0 && /* @__PURE__ */ b(
+        f > 0 && /* @__PURE__ */ p(
           C,
           {
             "data-spacer": !0,
             "aria-hidden": "true",
-            style: { width: u, padding: 0 }
+            style: { width: f, padding: 0 }
           }
         )
       ]

package/dist/components/data-table/data-table-row.js.map

@@ -1 +1 @@
-{"version":3,"file":"data-table-row.js","sources":["../../../src/components/data-table/data-table-row.tsx"],"sourcesContent":["import * as React from \"react\"\nimport type { CSSProperties, MouseEvent, KeyboardEvent } from \"react\"\nimport type { Row, Cell } from \"@tanstack/react-table\"\nimport { flexRender } from \"@tanstack/react-table\"\nimport { mergeClasses, shorthands } from \"@epilot/zenith-runtime/v1\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeZenithStyles } from \"../../styles/make-styles\"\nimport { boxModel } from \"../../styles/host-reset\"\nimport * as tokens from \"../../tokens\"\nimport { TableRow, TableCell } from \"../table/table\"\nimport { useDataTable, useDataTableContent } from \"./hooks\"\nimport type { DataTableCellOverflow } from \"./data-table-context\"\nimport {\n  getPinnedColumnOffset,\n  isLastLeftPinnedColumn,\n  isFirstRightPinnedColumn,\n} from \"./data-table-pinning-utils\"\n\ntype CellAlign = \"left\" | \"center\" | \"right\"\n\n/**\n * Gets the cell overflow mode, checking column meta first, then falling back to table default.\n */\nfunction getCellOverflow<TData>(\n  cell: Cell<TData, unknown>,\n  tableDefault: DataTableCellOverflow\n): DataTableCellOverflow {\n  const columnMeta = cell.column.columnDef.meta as\n    { cellOverflow?: DataTableCellOverflow } | undefined\n  return columnMeta?.cellOverflow ?? tableDefault\n}\n\n/**\n * Gets the cell alignment from column meta.\n */\nfunction getCellAlign<TData>(\n  cell: Cell<TData, unknown>\n): CellAlign | undefined {\n  const columnMeta = cell.column.columnDef.meta as\n    { align?: CellAlign } | undefined\n  return columnMeta?.align\n}\n\n// Interactive element selectors that should NOT trigger row click\nconst INTERACTIVE_SELECTORS = [\n  \"button\",\n  \"a\",\n  \"input\",\n  \"select\",\n  \"textarea\",\n  '[role=\"button\"]',\n  '[role=\"checkbox\"]',\n  '[role=\"link\"]',\n  '[role=\"menuitem\"]',\n  '[role=\"menuitemcheckbox\"]',\n  '[role=\"menuitemradio\"]',\n  '[role=\"option\"]',\n  '[role=\"radio\"]',\n  '[role=\"slider\"]',\n  '[role=\"spinbutton\"]',\n  '[role=\"switch\"]',\n  '[role=\"tab\"]',\n  \"[data-radix-collection-item]\",\n  `[${SLOT_ATTR}=\"checkbox\"]`,\n]\n\nconst useStyles = makeZenithStyles({\n  rowClickable: {\n    cursor: \"pointer\",\n    \":hover\": {\n      backgroundColor: tokens.accentA3,\n    },\n  },\n  rowSelected: {\n    backgroundColor: tokens.accentA3,\n  },\n  rowBorder: {\n    boxShadow: `inset 0 -1px 0 0 ${tokens.grayA6}`,\n    \"&:last-child\": {\n      boxShadow: \"none\",\n    },\n  },\n  cellTruncate: {\n    ...boxModel,\n    maxWidth: 0,\n    ...shorthands.overflow(\"hidden\"),\n    textOverflow: \"ellipsis\",\n    whiteSpace: \"nowrap\",\n  },\n  cellWrap: {\n    ...boxModel,\n    maxWidth: 0,\n    ...shorthands.overflow(\"hidden\"),\n    overflowWrap: \"break-word\",\n    wordBreak: \"break-word\",\n  },\n  shadowLeft: {\n    boxShadow: \"2px 0 5px -2px rgba(0,0,0,0.1)\",\n  },\n  shadowRight: {\n    boxShadow: \"-2px 0 5px -2px rgba(0,0,0,0.1)\",\n  },\n})\n\nexport type DataTableRowProps<TData> = {\n  /** The row instance from TanStack Table */\n  row: Row<TData>\n  /** Optional style (used for virtualized row heights) */\n  style?: CSSProperties\n  /** Additional class name */\n  className?: string\n}\n\n/**\n * Renders a single table row with its cells.\n * Supports clickable rows when onRowClick is provided via DataTable context.\n */\nfunction DataTableRowInner<TData>(\n  { row, style, className }: DataTableRowProps<TData>,\n  ref: React.ForwardedRef<HTMLTableRowElement>\n) {\n  const styles = useStyles()\n  const {\n    table,\n    onRowClick,\n    clickableRowClassName,\n    selectedRowClassName,\n    cellOverflow: tableCellOverflow = \"truncate\",\n    showRowBorders,\n    disableColumnResizing,\n  } = useDataTable<TData>()\n  const contentContext = useDataTableContent()\n  const spacerWidth = contentContext?.spacerWidth ?? 0\n\n  const enableColumnResizing = !disableColumnResizing\n  const isClickable = Boolean(onRowClick)\n\n  const handleClick = (event: MouseEvent<HTMLTableRowElement>) => {\n    if (!onRowClick) return\n\n    // Check if click originated from an interactive element\n    const target = event.target as HTMLElement\n    const isInteractiveElement = INTERACTIVE_SELECTORS.some((selector) =>\n      target.closest(selector)\n    )\n\n    if (isInteractiveElement) {\n      return // Don't trigger row click for interactive elements\n    }\n\n    onRowClick(row, event)\n  }\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLTableRowElement>) => {\n    if (!onRowClick) return\n\n    if (event.key === \"Enter\" || event.key === \" \") {\n      // Check if key event originated from an interactive element\n      const target = event.target as HTMLElement\n      const isInteractiveElement = INTERACTIVE_SELECTORS.some((selector) =>\n        target.closest(selector)\n      )\n\n      if (isInteractiveElement) {\n        return // Let the interactive element handle the event\n      }\n\n      event.preventDefault()\n      onRowClick(row, event as unknown as MouseEvent<HTMLTableRowElement>)\n    }\n  }\n\n  return (\n    <TableRow\n      ref={ref}\n      data-slot=\"data-table-row\"\n      {...{ [SLOT_ATTR]: \"data-table-row\" }}\n      data-fs-element=\"DataTable-Row\"\n      data-state={row.getIsSelected() ? \"selected\" : undefined}\n      data-clickable={isClickable ? \"true\" : undefined}\n      style={style}\n      className={mergeClasses(\n        showRowBorders !== false && styles.rowBorder,\n        isClickable && (clickableRowClassName ?? styles.rowClickable),\n        row.getIsSelected() && (selectedRowClassName ?? styles.rowSelected),\n        className\n      )}\n      onClick={isClickable ? handleClick : undefined}\n      tabIndex={isClickable ? 0 : undefined}\n      onKeyDown={isClickable ? handleKeyDown : undefined}\n    >\n      {row.getVisibleCells().map((cell) => {\n        const overflow = getCellOverflow(cell, tableCellOverflow)\n        const align = getCellAlign(cell)\n        const isPinned = cell.column.getIsPinned()\n        const pinnedOffset = isPinned\n          ? getPinnedColumnOffset(cell.column, table)\n          : undefined\n        const isLastLeft = isLastLeftPinnedColumn(cell.column, table)\n        const isFirstRight = isFirstRightPinnedColumn(cell.column, table)\n\n        return (\n          <TableCell\n            key={cell.id}\n            data-slot=\"data-table-cell\"\n            {...{ [SLOT_ATTR]: \"data-table-cell\" }}\n            data-fs-element=\"DataTable-Cell\"\n            data-pinned={isPinned || undefined}\n            align={align}\n            style={{\n              width:\n                enableColumnResizing || isPinned\n                  ? cell.column.getSize()\n                  : undefined,\n              left: isPinned === \"left\" ? `${pinnedOffset}px` : undefined,\n              right: isPinned === \"right\" ? `${pinnedOffset}px` : undefined,\n            }}\n            className={mergeClasses(\n              overflow === \"truncate\" && styles.cellTruncate,\n              overflow === \"wrap\" && styles.cellWrap,\n              isLastLeft && styles.shadowLeft,\n              isFirstRight && styles.shadowRight\n            )}\n          >\n            {flexRender(cell.column.columnDef.cell, cell.getContext())}\n          </TableCell>\n        )\n      })}\n      {/* Spacer cell - matches header spacer column */}\n      {spacerWidth > 0 && (\n        <TableCell\n          data-spacer\n          aria-hidden=\"true\"\n          style={{ width: spacerWidth, padding: 0 }}\n        />\n      )}\n    </TableRow>\n  )\n}\n\nexport const DataTableRow = React.forwardRef(DataTableRowInner) as <TData>(\n  props: DataTableRowProps<TData> & {\n    ref?: React.Ref<HTMLTableRowElement>\n  }\n) => React.ReactElement | null\n"],"names":["getCellOverflow","cell","tableDefault","columnMeta","getCellAlign","INTERACTIVE_SELECTORS","SLOT_ATTR","useStyles","makeZenithStyles","tokens.accentA3","tokens.grayA6","boxModel","shorthands","DataTableRowInner","row","style","className","ref","styles","table","onRowClick","clickableRowClassName","selectedRowClassName","tableCellOverflow","showRowBorders","disableColumnResizing","useDataTable","contentContext","useDataTableContent","spacerWidth","enableColumnResizing","isClickable","handleClick","event","target","selector","handleKeyDown","jsxs","TableRow","mergeClasses","overflow","align","isPinned","pinnedOffset","getPinnedColumnOffset","isLastLeft","isLastLeftPinnedColumn","isFirstRight","isFirstRightPinnedColumn","jsx","TableCell","DataTableRow","React"],"mappings":"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"}
+{"version":3,"file":"data-table-row.js","sources":["../../../src/components/data-table/data-table-row.tsx"],"sourcesContent":["import * as React from \"react\"\nimport type { CSSProperties, MouseEvent, KeyboardEvent } from \"react\"\nimport type { Row, Cell } from \"@tanstack/react-table\"\nimport { flexRender } from \"@tanstack/react-table\"\nimport { mergeClasses, shorthands } from \"@epilot/zenith-runtime/v1\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeZenithStyles } from \"../../styles/make-styles\"\nimport { boxModel } from \"../../styles/host-reset\"\nimport * as tokens from \"../../tokens\"\nimport { TableRow, TableCell } from \"../table/table\"\nimport { useDataTable, useDataTableContent } from \"./hooks\"\nimport type { DataTableCellOverflow } from \"./data-table-context\"\nimport {\n  getPinnedColumnOffset,\n  isLastLeftPinnedColumn,\n  isFirstRightPinnedColumn,\n} from \"./data-table-pinning-utils\"\n\ntype CellAlign = \"left\" | \"center\" | \"right\"\n\n/**\n * Gets the cell overflow mode, checking column meta first, then falling back to table default.\n */\nfunction getCellOverflow<TData>(\n  cell: Cell<TData, unknown>,\n  tableDefault: DataTableCellOverflow\n): DataTableCellOverflow {\n  const columnMeta = cell.column.columnDef.meta as\n    { cellOverflow?: DataTableCellOverflow } | undefined\n  return columnMeta?.cellOverflow ?? tableDefault\n}\n\n/**\n * Gets the cell alignment from column meta.\n */\nfunction getCellAlign<TData>(\n  cell: Cell<TData, unknown>\n): CellAlign | undefined {\n  const columnMeta = cell.column.columnDef.meta as\n    { align?: CellAlign } | undefined\n  return columnMeta?.align\n}\n\n// Interactive element selectors that should NOT trigger row click\nconst INTERACTIVE_SELECTORS = [\n  \"button\",\n  \"a\",\n  \"input\",\n  \"select\",\n  \"textarea\",\n  '[role=\"button\"]',\n  '[role=\"checkbox\"]',\n  '[role=\"link\"]',\n  '[role=\"menuitem\"]',\n  '[role=\"menuitemcheckbox\"]',\n  '[role=\"menuitemradio\"]',\n  '[role=\"option\"]',\n  '[role=\"radio\"]',\n  '[role=\"slider\"]',\n  '[role=\"spinbutton\"]',\n  '[role=\"switch\"]',\n  '[role=\"tab\"]',\n  \"[data-radix-collection-item]\",\n  `[${SLOT_ATTR}=\"checkbox\"]`,\n]\n\nconst useStyles = makeZenithStyles({\n  rowClickable: {\n    cursor: \"pointer\",\n    \":hover\": {\n      backgroundColor: tokens.accentA3,\n    },\n  },\n  rowSelected: {\n    backgroundColor: tokens.accentA3,\n  },\n  // The rule is painted on the cells: WebKit draws no box-shadow on a <tr>,\n  // and row borders don't paint under DataTableContent's\n  // `border-collapse: separate`. A background image also stays clear of the\n  // pinned cells' own box-shadow and adds no height.\n  rowBorder: {\n    \"& > td\": {\n      backgroundImage: `linear-gradient(${tokens.grayA6}, ${tokens.grayA6})`,\n      backgroundSize: \"100% 1px\",\n      backgroundPosition: \"bottom\",\n      backgroundRepeat: \"no-repeat\",\n    },\n    \"&:last-child > td\": {\n      backgroundImage: \"none\",\n    },\n  },\n  cellTruncate: {\n    ...boxModel,\n    maxWidth: 0,\n    ...shorthands.overflow(\"hidden\"),\n    textOverflow: \"ellipsis\",\n    whiteSpace: \"nowrap\",\n  },\n  cellWrap: {\n    ...boxModel,\n    maxWidth: 0,\n    ...shorthands.overflow(\"hidden\"),\n    overflowWrap: \"break-word\",\n    wordBreak: \"break-word\",\n  },\n  shadowLeft: {\n    boxShadow: \"2px 0 5px -2px rgba(0,0,0,0.1)\",\n  },\n  shadowRight: {\n    boxShadow: \"-2px 0 5px -2px rgba(0,0,0,0.1)\",\n  },\n})\n\nexport type DataTableRowProps<TData> = {\n  /** The row instance from TanStack Table */\n  row: Row<TData>\n  /** Optional style (used for virtualized row heights) */\n  style?: CSSProperties\n  /** Additional class name */\n  className?: string\n}\n\n/**\n * Renders a single table row with its cells.\n * Supports clickable rows when onRowClick is provided via DataTable context.\n */\nfunction DataTableRowInner<TData>(\n  { row, style, className }: DataTableRowProps<TData>,\n  ref: React.ForwardedRef<HTMLTableRowElement>\n) {\n  const styles = useStyles()\n  const {\n    table,\n    onRowClick,\n    clickableRowClassName,\n    selectedRowClassName,\n    cellOverflow: tableCellOverflow = \"truncate\",\n    showRowBorders,\n    disableColumnResizing,\n  } = useDataTable<TData>()\n  const contentContext = useDataTableContent()\n  const spacerWidth = contentContext?.spacerWidth ?? 0\n\n  const enableColumnResizing = !disableColumnResizing\n  const isClickable = Boolean(onRowClick)\n\n  const handleClick = (event: MouseEvent<HTMLTableRowElement>) => {\n    if (!onRowClick) return\n\n    // Check if click originated from an interactive element\n    const target = event.target as HTMLElement\n    const isInteractiveElement = INTERACTIVE_SELECTORS.some((selector) =>\n      target.closest(selector)\n    )\n\n    if (isInteractiveElement) {\n      return // Don't trigger row click for interactive elements\n    }\n\n    onRowClick(row, event)\n  }\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLTableRowElement>) => {\n    if (!onRowClick) return\n\n    if (event.key === \"Enter\" || event.key === \" \") {\n      // Check if key event originated from an interactive element\n      const target = event.target as HTMLElement\n      const isInteractiveElement = INTERACTIVE_SELECTORS.some((selector) =>\n        target.closest(selector)\n      )\n\n      if (isInteractiveElement) {\n        return // Let the interactive element handle the event\n      }\n\n      event.preventDefault()\n      onRowClick(row, event as unknown as MouseEvent<HTMLTableRowElement>)\n    }\n  }\n\n  return (\n    <TableRow\n      ref={ref}\n      data-slot=\"data-table-row\"\n      {...{ [SLOT_ATTR]: \"data-table-row\" }}\n      data-fs-element=\"DataTable-Row\"\n      data-state={row.getIsSelected() ? \"selected\" : undefined}\n      data-clickable={isClickable ? \"true\" : undefined}\n      style={style}\n      className={mergeClasses(\n        showRowBorders !== false && styles.rowBorder,\n        isClickable && (clickableRowClassName ?? styles.rowClickable),\n        row.getIsSelected() && (selectedRowClassName ?? styles.rowSelected),\n        className\n      )}\n      onClick={isClickable ? handleClick : undefined}\n      tabIndex={isClickable ? 0 : undefined}\n      onKeyDown={isClickable ? handleKeyDown : undefined}\n    >\n      {row.getVisibleCells().map((cell) => {\n        const overflow = getCellOverflow(cell, tableCellOverflow)\n        const align = getCellAlign(cell)\n        const isPinned = cell.column.getIsPinned()\n        const pinnedOffset = isPinned\n          ? getPinnedColumnOffset(cell.column, table)\n          : undefined\n        const isLastLeft = isLastLeftPinnedColumn(cell.column, table)\n        const isFirstRight = isFirstRightPinnedColumn(cell.column, table)\n\n        return (\n          <TableCell\n            key={cell.id}\n            data-slot=\"data-table-cell\"\n            {...{ [SLOT_ATTR]: \"data-table-cell\" }}\n            data-fs-element=\"DataTable-Cell\"\n            data-pinned={isPinned || undefined}\n            align={align}\n            style={{\n              width:\n                enableColumnResizing || isPinned\n                  ? cell.column.getSize()\n                  : undefined,\n              left: isPinned === \"left\" ? `${pinnedOffset}px` : undefined,\n              right: isPinned === \"right\" ? `${pinnedOffset}px` : undefined,\n            }}\n            className={mergeClasses(\n              overflow === \"truncate\" && styles.cellTruncate,\n              overflow === \"wrap\" && styles.cellWrap,\n              isLastLeft && styles.shadowLeft,\n              isFirstRight && styles.shadowRight\n            )}\n          >\n            {flexRender(cell.column.columnDef.cell, cell.getContext())}\n          </TableCell>\n        )\n      })}\n      {/* Spacer cell - matches header spacer column */}\n      {spacerWidth > 0 && (\n        <TableCell\n          data-spacer\n          aria-hidden=\"true\"\n          style={{ width: spacerWidth, padding: 0 }}\n        />\n      )}\n    </TableRow>\n  )\n}\n\nexport const DataTableRow = React.forwardRef(DataTableRowInner) as <TData>(\n  props: DataTableRowProps<TData> & {\n    ref?: React.Ref<HTMLTableRowElement>\n  }\n) => React.ReactElement | null\n"],"names":["getCellOverflow","cell","tableDefault","columnMeta","getCellAlign","INTERACTIVE_SELECTORS","SLOT_ATTR","useStyles","makeZenithStyles","tokens.accentA3","tokens.grayA6","boxModel","shorthands","DataTableRowInner","row","style","className","ref","styles","table","onRowClick","clickableRowClassName","selectedRowClassName","tableCellOverflow","showRowBorders","disableColumnResizing","useDataTable","contentContext","useDataTableContent","spacerWidth","enableColumnResizing","isClickable","handleClick","event","target","selector","handleKeyDown","jsxs","TableRow","mergeClasses","overflow","align","isPinned","pinnedOffset","getPinnedColumnOffset","isLastLeft","isLastLeftPinnedColumn","isFirstRight","isFirstRightPinnedColumn","jsx","TableCell","DataTableRow","React"],"mappings":"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"}