@epilot/volt-ui-experimental-griffel 0.2.3 → 0.3.0

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

@@ -1,24 +1,24 @@
-import { jsxs as W, jsx as p } from "react/jsx-runtime";
-import * as A from "react";
-import { flexRender as B } from "../../vendor/@tanstack/react-table/build/lib/index.js";
-import { shorthands as b } from "../../packages/volt-runtime/dist/vendor/@griffel/core/src/index.js";
+import { j as u } from "../../vendor/react/jsx-dev-runtime.js";
+import * as L from "react";
+import { flexRender as W } from "../../vendor/@tanstack/react-table/build/lib/index.js";
+import { shorthands as w } from "../../packages/volt-runtime/dist/vendor/@griffel/core/src/index.js";
 import { SLOT_ATTR as f } from "../../packages/volt-runtime/dist/renderer/contract.js";
 import { mergeClasses as h } from "../../packages/volt-runtime/dist/vendor/@griffel/core/src/mergeClasses.js";
-import { makeVoltStyles as N } from "../../styles/make-styles.js";
-import { grayA6 as P, accentA3 as g } from "../../tokens/index.js";
-import { TableRow as $, TableCell as x } from "../table/table.js";
-import { getPinnedColumnOffset as z, isLastLeftPinnedColumn as V, isFirstRightPinnedColumn as j } from "./data-table-pinning-utils.js";
-import { useDataTable as F } from "./hooks/use-data-table.js";
-import { useDataTableContent as K } from "./hooks/use-data-table-content.js";
-function _(t, a) {
-  const n = t.column.columnDef.meta;
-  return (n == null ? void 0 : n.cellOverflow) ?? a;
+import { makeVoltStyles as V } from "../../styles/make-styles.js";
+import { grayA6 as j, accentA3 as g } from "../../tokens/index.js";
+import { TableRow as A, TableCell as x } from "../table/table.js";
+import { getPinnedColumnOffset as B, isLastLeftPinnedColumn as P, isFirstRightPinnedColumn as $ } from "./data-table-pinning-utils.js";
+import { useDataTable as z } from "./hooks/use-data-table.js";
+import { useDataTableContent as U } from "./hooks/use-data-table-content.js";
+function F(t, a) {
+  const i = t.column.columnDef.meta;
+  return (i == null ? void 0 : i.cellOverflow) ?? a;
 }
-function Q(t) {
+function K(t) {
   const a = t.column.columnDef.meta;
   return a == null ? void 0 : a.align;
 }
-const C = [
+const v = [
   "button",
   "a",
   "input",
@@ -38,7 +38,7 @@ const C = [
   '[role="tab"]',
   "[data-radix-collection-item]",
   `[${f}="checkbox"]`
-], q = N({
+], _ = V({
   rowClickable: {
     cursor: "pointer",
     ":hover": {
@@ -49,20 +49,20 @@ const C = [
     backgroundColor: g
   },
   rowBorder: {
-    boxShadow: `inset 0 -1px 0 0 ${P}`,
+    boxShadow: `inset 0 -1px 0 0 ${j}`,
     "&:last-child": {
       boxShadow: "none"
     }
   },
   cellTruncate: {
     maxWidth: 0,
-    ...b.overflow("hidden"),
+    ...w.overflow("hidden"),
     textOverflow: "ellipsis",
     whiteSpace: "nowrap"
   },
   cellWrap: {
     maxWidth: 0,
-    ...b.overflow("hidden"),
+    ...w.overflow("hidden"),
     overflowWrap: "break-word",
     wordBreak: "break-word"
   },
@@ -73,35 +73,35 @@ const C = [
     boxShadow: "-2px 0 5px -2px rgba(0,0,0,0.1)"
   }
 });
-function G({ row: t, style: a, className: n }, k) {
-  const r = q(), {
+function Q({ row: t, style: a, className: i }, C) {
+  const l = _(), {
     table: c,
-    onRowClick: i,
-    clickableRowClassName: v,
+    onRowClick: n,
+    clickableRowClassName: k,
     selectedRowClassName: R,
-    cellOverflow: T = "truncate",
-    showRowBorders: S,
-    disableColumnResizing: D
-  } = F(), d = K(), u = (d == null ? void 0 : d.spacerWidth) ?? 0, y = !D, s = !!i, I = (e) => {
-    if (!i) return;
-    const l = e.target;
-    C.some(
-      (o) => l.closest(o)
-    ) || i(t, e);
-  }, E = (e) => {
-    if (i && (e.key === "Enter" || e.key === " ")) {
-      const l = e.target;
-      if (C.some(
-        (o) => l.closest(o)
+    cellOverflow: D = "truncate",
+    showRowBorders: T,
+    disableColumnResizing: S
+  } = z(), d = U(), p = (d == null ? void 0 : d.spacerWidth) ?? 0, N = !S, s = !!n, E = (e) => {
+    if (!n) return;
+    const r = e.target;
+    v.some(
+      (o) => r.closest(o)
+    ) || n(t, e);
+  }, y = (e) => {
+    if (n && (e.key === "Enter" || e.key === " ")) {
+      const r = e.target;
+      if (v.some(
+        (o) => r.closest(o)
       ))
         return;
-      e.preventDefault(), i(t, e);
+      e.preventDefault(), n(t, e);
     }
   };
-  return /* @__PURE__ */ W(
-    $,
+  return /* @__PURE__ */ u.jsxDEV(
+    A,
     {
-      ref: k,
+      ref: C,
       "data-slot": "data-table-row",
       [f]: "data-table-row",
       "data-fs-element": "DataTable-Row",
@@ -109,18 +109,18 @@ function G({ row: t, style: a, className: n }, k) {
       "data-clickable": s ? "true" : void 0,
       style: a,
       className: h(
-        S !== !1 && r.rowBorder,
-        s && (v ?? r.rowClickable),
-        t.getIsSelected() && (R ?? r.rowSelected),
-        n
+        T !== !1 && l.rowBorder,
+        s && (k ?? l.rowClickable),
+        t.getIsSelected() && (R ?? l.rowSelected),
+        i
       ),
-      onClick: s ? I : void 0,
+      onClick: s ? E : void 0,
       tabIndex: s ? 0 : void 0,
-      onKeyDown: s ? E : void 0,
+      onKeyDown: s ? y : void 0,
       children: [
         t.getVisibleCells().map((e) => {
-          const l = _(e, T), m = Q(e), o = e.column.getIsPinned(), w = o ? z(e.column, c) : void 0, O = V(e.column, c), L = j(e.column, c);
-          return /* @__PURE__ */ p(
+          const r = F(e, D), m = K(e), o = e.column.getIsPinned(), b = o ? B(e.column, c) : void 0, I = P(e.column, c), O = $(e.column, c);
+          return /* @__PURE__ */ u.jsxDEV(
             x,
             {
               "data-slot": "data-table-cell",
@@ -129,35 +129,58 @@ function G({ row: t, style: a, className: n }, k) {
               "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: N || o ? e.column.getSize() : void 0,
+                left: o === "left" ? `${b}px` : void 0,
+                right: o === "right" ? `${b}px` : void 0
               },
               className: h(
-                l === "truncate" && r.cellTruncate,
-                l === "wrap" && r.cellWrap,
-                O && r.shadowLeft,
-                L && r.shadowRight
+                r === "truncate" && l.cellTruncate,
+                r === "wrap" && l.cellWrap,
+                I && l.shadowLeft,
+                O && l.shadowRight
               ),
-              children: B(e.column.columnDef.cell, e.getContext())
+              children: W(e.column.columnDef.cell, e.getContext())
             },
-            e.id
+            e.id,
+            !1,
+            {
+              fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/data-table/data-table-row.tsx",
+              lineNumber: 203,
+              columnNumber: 11
+            },
+            this
           );
         }),
-        u > 0 && /* @__PURE__ */ p(
+        p > 0 && /* @__PURE__ */ u.jsxDEV(
           x,
           {
             "data-spacer": !0,
             "aria-hidden": "true",
-            style: { width: u, padding: 0 }
-          }
+            style: { width: p, padding: 0 }
+          },
+          void 0,
+          !1,
+          {
+            fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/data-table/data-table-row.tsx",
+            lineNumber: 231,
+            columnNumber: 9
+          },
+          this
         )
       ]
-    }
+    },
+    void 0,
+    !0,
+    {
+      fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/data-table/data-table-row.tsx",
+      lineNumber: 174,
+      columnNumber: 5
+    },
+    this
   );
 }
-const re = A.forwardRef(G);
+const ae = L.forwardRef(Q);
 export {
-  re as DataTableRow
+  ae as DataTableRow
 };
 //# sourceMappingURL=data-table-row.js.map

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/volt-ui-runtime\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeVoltStyles } from \"../../styles/make-styles\"\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 }\n    | 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 }\n    | 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 = makeVoltStyles({\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    maxWidth: 0,\n    ...shorthands.overflow(\"hidden\"),\n    textOverflow: \"ellipsis\",\n    whiteSpace: \"nowrap\",\n  },\n  cellWrap: {\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","makeVoltStyles","tokens.accentA3","tokens.grayA6","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/volt-ui-runtime\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeVoltStyles } from \"../../styles/make-styles\"\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 }\n    | 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 }\n    | 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 = makeVoltStyles({\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    maxWidth: 0,\n    ...shorthands.overflow(\"hidden\"),\n    textOverflow: \"ellipsis\",\n    whiteSpace: \"nowrap\",\n  },\n  cellWrap: {\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","makeVoltStyles","tokens.accentA3","tokens.grayA6","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","jsxDEV","TableRow","mergeClasses","overflow","align","isPinned","pinnedOffset","getPinnedColumnOffset","isLastLeft","isLastLeftPinnedColumn","isFirstRight","isFirstRightPinnedColumn","TableCell","DataTableRow","React"],"mappings":"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"}

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

@@ -1,35 +1,43 @@
-import { jsx as m } from "react/jsx-runtime";
-import * as n from "react";
+import { j as i } from "../../vendor/react/jsx-dev-runtime.js";
+import * as m from "react";
 import { shorthands as a } from "../../packages/volt-runtime/dist/vendor/@griffel/core/src/index.js";
-import { SLOT_ATTR as i } from "../../packages/volt-runtime/dist/renderer/contract.js";
+import { SLOT_ATTR as n } from "../../packages/volt-runtime/dist/renderer/contract.js";
 import { mergeClasses as p } from "../../packages/volt-runtime/dist/vendor/@griffel/core/src/mergeClasses.js";
 import { makeVoltStyles as f } from "../../styles/make-styles.js";
-import { spacingGroup1 as t, spacingElement1 as d } from "../../tokens/index.js";
-const b = f({
+import { spacingGroup1 as e, spacingElement1 as b } from "../../tokens/index.js";
+const c = f({
   root: {
     display: "flex",
     alignItems: "center",
     justifyContent: "space-between",
-    gap: t,
-    ...a.paddingInline(d),
-    ...a.paddingBlock(t)
+    gap: e,
+    ...a.paddingInline(b),
+    ...a.paddingBlock(e)
   }
-}), R = n.forwardRef(function({ className: o, children: e, ...r }, s) {
-  const l = b();
-  return /* @__PURE__ */ m(
+}), j = m.forwardRef(function({ className: t, children: o, ...r }, s) {
+  const l = c();
+  return /* @__PURE__ */ i.jsxDEV(
     "div",
     {
       ref: s,
       "data-slot": "data-table-toolbar",
-      [i]: "data-table-toolbar",
+      [n]: "data-table-toolbar",
       "data-fs-element": "DataTable-Toolbar",
-      className: p(l.root, o),
+      className: p(l.root, t),
       ...r,
-      children: e
-    }
+      children: o
+    },
+    void 0,
+    !1,
+    {
+      fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/data-table/data-table-toolbar.tsx",
+      lineNumber: 32,
+      columnNumber: 5
+    },
+    this
   );
 });
 export {
-  R as DataTableToolbar
+  j as DataTableToolbar
 };
 //# sourceMappingURL=data-table-toolbar.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"data-table-toolbar.js","sources":["../../../src/components/data-table/data-table-toolbar.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { mergeClasses, shorthands } from \"@epilot/volt-ui-runtime\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeVoltStyles } from \"../../styles/make-styles\"\nimport * as tokens from \"../../tokens\"\n\nconst useStyles = makeVoltStyles({\n  root: {\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"space-between\",\n    gap: tokens.spacingGroup1,\n    ...shorthands.paddingInline(tokens.spacingElement1),\n    ...shorthands.paddingBlock(tokens.spacingGroup1),\n  },\n})\n\nexport type DataTableToolbarProps = React.ComponentProps<\"div\">\n\n/**\n * A toolbar wrapper for DataTable that contains filters, search, and actions.\n * Place above the table for consistent layout.\n */\nexport const DataTableToolbar = React.forwardRef<\n  HTMLDivElement,\n  DataTableToolbarProps\n>(function DataTableToolbar({ className, children, ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <div\n      ref={ref}\n      data-slot=\"data-table-toolbar\"\n      {...{ [SLOT_ATTR]: \"data-table-toolbar\" }}\n      data-fs-element=\"DataTable-Toolbar\"\n      className={mergeClasses(styles.root, className)}\n      {...props}\n    >\n      {children}\n    </div>\n  )\n})\n"],"names":["useStyles","makeVoltStyles","tokens.spacingGroup1","shorthands","tokens.spacingElement1","DataTableToolbar","React","className","children","props","ref","styles","jsx","SLOT_ATTR","mergeClasses"],"mappings":";;;;;;;AAOA,MAAMA,IAAYC,EAAe;AAAA,EAC/B,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,KAAKC;AAAAA,IACL,GAAGC,EAAW,cAAcC,CAAsB;AAAA,IAClD,GAAGD,EAAW,aAAaD,CAAoB;AAAA,EAAA;AAEnD,CAAC,GAQYG,IAAmBC,EAAM,WAGpC,SAA0B,EAAE,WAAAC,GAAW,UAAAC,GAAU,GAAGC,EAAA,GAASC,GAAK;AAClE,QAAMC,IAASX,EAAA;AAEf,SACE,gBAAAY;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAF;AAAA,MACA,aAAU;AAAA,MACJ,CAACG,CAAS,GAAG;AAAA,MACnB,mBAAgB;AAAA,MAChB,WAAWC,EAAaH,EAAO,MAAMJ,CAAS;AAAA,MAC7C,GAAGE;AAAA,MAEH,UAAAD;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}
+{"version":3,"file":"data-table-toolbar.js","sources":["../../../src/components/data-table/data-table-toolbar.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { mergeClasses, shorthands } from \"@epilot/volt-ui-runtime\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeVoltStyles } from \"../../styles/make-styles\"\nimport * as tokens from \"../../tokens\"\n\nconst useStyles = makeVoltStyles({\n  root: {\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"space-between\",\n    gap: tokens.spacingGroup1,\n    ...shorthands.paddingInline(tokens.spacingElement1),\n    ...shorthands.paddingBlock(tokens.spacingGroup1),\n  },\n})\n\nexport type DataTableToolbarProps = React.ComponentProps<\"div\">\n\n/**\n * A toolbar wrapper for DataTable that contains filters, search, and actions.\n * Place above the table for consistent layout.\n */\nexport const DataTableToolbar = React.forwardRef<\n  HTMLDivElement,\n  DataTableToolbarProps\n>(function DataTableToolbar({ className, children, ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <div\n      ref={ref}\n      data-slot=\"data-table-toolbar\"\n      {...{ [SLOT_ATTR]: \"data-table-toolbar\" }}\n      data-fs-element=\"DataTable-Toolbar\"\n      className={mergeClasses(styles.root, className)}\n      {...props}\n    >\n      {children}\n    </div>\n  )\n})\n"],"names":["useStyles","makeVoltStyles","tokens.spacingGroup1","shorthands","tokens.spacingElement1","DataTableToolbar","React","className","children","props","ref","styles","jsxDEV","SLOT_ATTR","mergeClasses"],"mappings":";;;;;;;AAOA,MAAMA,IAAYC,EAAe;AAAA,EAC/B,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,KAAKC;AAAAA,IACL,GAAGC,EAAW,cAAcC,CAAsB;AAAA,IAClD,GAAGD,EAAW,aAAaD,CAAoB;AAAA,EAAA;AAEnD,CAAC,GAQYG,IAAmBC,EAAM,WAGpC,SAA0B,EAAE,WAAAC,GAAW,UAAAC,GAAU,GAAGC,EAAA,GAASC,GAAK;AAClE,QAAMC,IAASX,EAAA;AAEf,SACEY,gBAAAA,EAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAF;AAAA,MACA,aAAU;AAAA,MACJ,CAACG,CAAS,GAAG;AAAA,MACnB,mBAAgB;AAAA,MAChB,WAAWC,EAAaH,EAAO,MAAMJ,CAAS;AAAA,MAC7C,GAAGE;AAAA,MAEH,UAAAD;AAAA,IAAA;AAAA,IARH;AAAA,IAAA;AAAA,IAAA;AAAA,MAAA,UAAA;AAAA,MAAA,YAAA;AAAA,MAAA,cAAA;AAAA,IAAA;AAAA,IAAA;AAAA,EAAA;AAWJ,CAAC;"}