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

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

@@ -1,12 +1,12 @@
-import { jsx as t, jsxs as g, Fragment as p } from "react/jsx-runtime";
-import * as d from "react";
-import { shorthands as e } from "../../packages/volt-runtime/dist/vendor/@griffel/core/src/index.js";
-import { SLOT_ATTR as T } 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 q } from "../../styles/make-styles.js";
-import { spacingGroup1 as f, grayA11 as x, leadingSm as y, textSm as u, grayA12 as w, fontWeightMedium as v, leadingBase as S, textBase as B, spacingElement2 as A, errorA11 as E, spacingElement1 as N, spacingLayout2 as Z } from "../../tokens/index.js";
-import { Button as b } from "../button/button.js";
-const C = (o) => /* @__PURE__ */ t(
+import { j as e } from "../../vendor/react/jsx-dev-runtime.js";
+import * as p from "react";
+import { shorthands as a } from "../../packages/volt-runtime/dist/vendor/@griffel/core/src/index.js";
+import { SLOT_ATTR as u } from "../../packages/volt-runtime/dist/renderer/contract.js";
+import { mergeClasses as d } from "../../packages/volt-runtime/dist/vendor/@griffel/core/src/mergeClasses.js";
+import { makeVoltStyles as f } from "../../styles/make-styles.js";
+import { spacingLayout2 as g, spacingGroup1 as x, grayA11 as b, leadingSm as N, textSm as h, grayA12 as v, fontWeightMedium as T, leadingBase as q, textBase as w, spacingElement2 as E, errorA11 as D, spacingElement1 as j } from "../../tokens/index.js";
+import { Button as k } from "../button/button.js";
+const y = (t) => /* @__PURE__ */ e.jsxDEV(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -14,71 +14,115 @@ const C = (o) => /* @__PURE__ */ t(
     viewBox: "0 -960 960 960",
     width: "24px",
     fill: "currentColor",
-    ...o,
-    children: /* @__PURE__ */ t("path", { d: "M480-280q17 0 28.5-11.5T520-320q0-17-11.5-28.5T480-360q-17 0-28.5 11.5T440-320q0 17 11.5 28.5T480-280Zm0-160q17 0 28.5-11.5T520-480v-160q0-17-11.5-28.5T480-680q-17 0-28.5 11.5T440-640v160q0 17 11.5 28.5T480-440Zm0 360q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z" })
-  }
-), j = q({
+    ...t,
+    children: /* @__PURE__ */ e.jsxDEV("path", { d: "M480-280q17 0 28.5-11.5T520-320q0-17-11.5-28.5T480-360q-17 0-28.5 11.5T440-320q0 17 11.5 28.5T480-280Zm0-160q17 0 28.5-11.5T520-480v-160q0-17-11.5-28.5T480-680q-17 0-28.5 11.5T440-640v160q0 17 11.5 28.5T480-440Zm0 360q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z" }, void 0, !1, {
+      fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/data-table/data-table-error.tsx",
+      lineNumber: 19,
+      columnNumber: 5
+    }, void 0)
+  },
+  void 0,
+  !1,
+  {
+    fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/data-table/data-table-error.tsx",
+    lineNumber: 11,
+    columnNumber: 3
+  },
+  void 0
+), V = f({
   root: {
     display: "flex",
     flexDirection: "column",
     alignItems: "center",
     justifyContent: "center",
-    gap: N,
-    ...e.paddingBlock(Z),
+    gap: j,
+    ...a.paddingBlock(g),
     textAlign: "center"
   },
   icon: {
     width: "2.5rem",
     height: "2.5rem",
-    color: E,
-    marginBottom: A
+    color: D,
+    marginBottom: E
   },
   title: {
-    fontSize: B,
-    lineHeight: S,
-    fontWeight: v,
-    color: w,
-    ...e.margin(0)
+    fontSize: w,
+    lineHeight: q,
+    fontWeight: T,
+    color: v,
+    ...a.margin(0)
   },
   description: {
-    fontSize: u,
-    lineHeight: y,
-    color: x,
+    fontSize: h,
+    lineHeight: N,
+    color: b,
     maxWidth: "28rem",
-    ...e.margin(0)
+    ...a.margin(0)
   },
   retry: {
-    marginTop: f
+    marginTop: x
   }
-}), M = d.forwardRef(function({ title: n, description: a, retryLabel: s, onRetry: i, className: l, children: m }, c) {
-  const r = j();
-  return /* @__PURE__ */ t(
+}), R = p.forwardRef(function({ title: o, description: l, retryLabel: s, onRetry: i, className: n, children: m }, c) {
+  const r = V();
+  return /* @__PURE__ */ e.jsxDEV(
     "div",
     {
       ref: c,
       "data-slot": "data-table-error",
-      [T]: "data-table-error",
+      [u]: "data-table-error",
       role: "alert",
-      className: h(r.root, l),
-      children: m ?? /* @__PURE__ */ g(p, { children: [
-        /* @__PURE__ */ t(C, { className: r.icon }),
-        /* @__PURE__ */ t("p", { className: r.title, children: n }),
-        a && /* @__PURE__ */ t("p", { className: r.description, children: a }),
-        i && /* @__PURE__ */ t(
-          b,
+      className: d(r.root, n),
+      children: m ?? /* @__PURE__ */ e.jsxDEV(e.Fragment, { children: [
+        /* @__PURE__ */ e.jsxDEV(y, { className: r.icon }, void 0, !1, {
+          fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/data-table/data-table-error.tsx",
+          lineNumber: 96,
+          columnNumber: 11
+        }, this),
+        /* @__PURE__ */ e.jsxDEV("p", { className: r.title, children: o }, void 0, !1, {
+          fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/data-table/data-table-error.tsx",
+          lineNumber: 97,
+          columnNumber: 11
+        }, this),
+        l && /* @__PURE__ */ e.jsxDEV("p", { className: r.description, children: l }, void 0, !1, {
+          fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/data-table/data-table-error.tsx",
+          lineNumber: 98,
+          columnNumber: 27
+        }, this),
+        i && /* @__PURE__ */ e.jsxDEV(
+          k,
           {
             variant: "secondary",
             size: "sm",
             onClick: i,
             className: r.retry,
             children: s
-          }
+          },
+          void 0,
+          !1,
+          {
+            fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/data-table/data-table-error.tsx",
+            lineNumber: 100,
+            columnNumber: 13
+          },
+          this
         )
-      ] })
-    }
+      ] }, void 0, !0, {
+        fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/data-table/data-table-error.tsx",
+        lineNumber: 95,
+        columnNumber: 9
+      }, this)
+    },
+    void 0,
+    !1,
+    {
+      fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/data-table/data-table-error.tsx",
+      lineNumber: 87,
+      columnNumber: 5
+    },
+    this
   );
 });
 export {
-  M as DataTableError
+  R as DataTableError
 };
 //# sourceMappingURL=data-table-error.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"data-table-error.js","sources":["../../../src/components/data-table/data-table-error.tsx"],"sourcesContent":["import * as React from \"react\"\nimport type { ReactNode } 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\"\nimport { Button } from \"../button/button\"\n\nconst ErrorIcon = (props: React.SVGProps<SVGSVGElement>) => (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    height=\"24px\"\n    viewBox=\"0 -960 960 960\"\n    width=\"24px\"\n    fill=\"currentColor\"\n    {...props}\n  >\n    <path d=\"M480-280q17 0 28.5-11.5T520-320q0-17-11.5-28.5T480-360q-17 0-28.5 11.5T440-320q0 17 11.5 28.5T480-280Zm0-160q17 0 28.5-11.5T520-480v-160q0-17-11.5-28.5T480-680q-17 0-28.5 11.5T440-640v160q0 17 11.5 28.5T480-440Zm0 360q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z\" />\n  </svg>\n)\n\nconst useStyles = makeVoltStyles({\n  root: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    gap: tokens.spacingElement1,\n    ...shorthands.paddingBlock(tokens.spacingLayout2),\n    textAlign: \"center\",\n  },\n  icon: {\n    width: \"2.5rem\",\n    height: \"2.5rem\",\n    color: tokens.errorA11,\n    marginBottom: tokens.spacingElement2,\n  },\n  title: {\n    fontSize: tokens.textBase,\n    lineHeight: tokens.leadingBase,\n    fontWeight: tokens.fontWeightMedium,\n    color: tokens.grayA12,\n    ...shorthands.margin(0),\n  },\n  description: {\n    fontSize: tokens.textSm,\n    lineHeight: tokens.leadingSm,\n    color: tokens.grayA11,\n    maxWidth: \"28rem\",\n    ...shorthands.margin(0),\n  },\n  retry: {\n    marginTop: tokens.spacingGroup1,\n  },\n})\n\nexport type DataTableErrorProps = {\n  /** Error title text */\n  title?: string\n  /** Error description/message */\n  description?: ReactNode\n  /** Retry button text */\n  retryLabel?: string\n  /** Callback when retry is clicked */\n  onRetry?: () => void\n  /** Additional class name */\n  className?: string\n  /** Custom error content (overrides default error display) */\n  children?: ReactNode\n}\n\n/**\n * Error state display for DataTable.\n * Shows an error icon, message, and optional retry button.\n */\nexport const DataTableError = React.forwardRef<\n  HTMLDivElement,\n  DataTableErrorProps\n>(function DataTableError(\n  { title, description, retryLabel, onRetry, className, children },\n  ref\n) {\n  const styles = useStyles()\n\n  return (\n    <div\n      ref={ref}\n      data-slot=\"data-table-error\"\n      {...{ [SLOT_ATTR]: \"data-table-error\" }}\n      role=\"alert\"\n      className={mergeClasses(styles.root, className)}\n    >\n      {children ?? (\n        <>\n          <ErrorIcon className={styles.icon} />\n          <p className={styles.title}>{title}</p>\n          {description && <p className={styles.description}>{description}</p>}\n          {onRetry && (\n            <Button\n              variant=\"secondary\"\n              size=\"sm\"\n              onClick={onRetry}\n              className={styles.retry}\n            >\n              {retryLabel}\n            </Button>\n          )}\n        </>\n      )}\n    </div>\n  )\n})\n"],"names":["ErrorIcon","props","jsx","useStyles","makeVoltStyles","tokens.spacingElement1","shorthands","tokens.spacingLayout2","tokens.errorA11","tokens.spacingElement2","tokens.textBase","tokens.leadingBase","tokens.fontWeightMedium","tokens.grayA12","tokens.textSm","tokens.leadingSm","tokens.grayA11","tokens.spacingGroup1","DataTableError","React","title","description","retryLabel","onRetry","className","children","ref","styles","SLOT_ATTR","mergeClasses","jsxs","Fragment","Button"],"mappings":";;;;;;;;AASA,MAAMA,IAAY,CAACC,MACjB,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,OAAM;AAAA,IACN,QAAO;AAAA,IACP,SAAQ;AAAA,IACR,OAAM;AAAA,IACN,MAAK;AAAA,IACJ,GAAGD;AAAA,IAEJ,UAAA,gBAAAC,EAAC,QAAA,EAAK,GAAE,kfAAA,CAAkf;AAAA,EAAA;AAC5f,GAGIC,IAAYC,EAAe;AAAA,EAC/B,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,eAAe;AAAA,IACf,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,KAAKC;AAAAA,IACL,GAAGC,EAAW,aAAaC,CAAqB;AAAA,IAChD,WAAW;AAAA,EAAA;AAAA,EAEb,MAAM;AAAA,IACJ,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,OAAOC;AAAAA,IACP,cAAcC;AAAAA,EAAO;AAAA,EAEvB,OAAO;AAAA,IACL,UAAUC;AAAAA,IACV,YAAYC;AAAAA,IACZ,YAAYC;AAAAA,IACZ,OAAOC;AAAAA,IACP,GAAGP,EAAW,OAAO,CAAC;AAAA,EAAA;AAAA,EAExB,aAAa;AAAA,IACX,UAAUQ;AAAAA,IACV,YAAYC;AAAAA,IACZ,OAAOC;AAAAA,IACP,UAAU;AAAA,IACV,GAAGV,EAAW,OAAO,CAAC;AAAA,EAAA;AAAA,EAExB,OAAO;AAAA,IACL,WAAWW;AAAAA,EAAO;AAEtB,CAAC,GAqBYC,IAAiBC,EAAM,WAGlC,SACA,EAAE,OAAAC,GAAO,aAAAC,GAAa,YAAAC,GAAY,SAAAC,GAAS,WAAAC,GAAW,UAAAC,EAAA,GACtDC,GACA;AACA,QAAMC,IAASxB,EAAA;AAEf,SACE,gBAAAD;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAwB;AAAA,MACA,aAAU;AAAA,MACJ,CAACE,CAAS,GAAG;AAAA,MACnB,MAAK;AAAA,MACL,WAAWC,EAAaF,EAAO,MAAMH,CAAS;AAAA,MAE7C,eACC,gBAAAM,EAAAC,GAAA,EACE,UAAA;AAAA,QAAA,gBAAA7B,EAACF,GAAA,EAAU,WAAW2B,EAAO,KAAA,CAAM;AAAA,QACnC,gBAAAzB,EAAC,KAAA,EAAE,WAAWyB,EAAO,OAAQ,UAAAP,GAAM;AAAA,QAClCC,KAAe,gBAAAnB,EAAC,KAAA,EAAE,WAAWyB,EAAO,aAAc,UAAAN,GAAY;AAAA,QAC9DE,KACC,gBAAArB;AAAA,UAAC8B;AAAA,UAAA;AAAA,YACC,SAAQ;AAAA,YACR,MAAK;AAAA,YACL,SAAST;AAAA,YACT,WAAWI,EAAO;AAAA,YAEjB,UAAAL;AAAA,UAAA;AAAA,QAAA;AAAA,MACH,EAAA,CAEJ;AAAA,IAAA;AAAA,EAAA;AAIR,CAAC;"}
+{"version":3,"file":"data-table-error.js","sources":["../../../src/components/data-table/data-table-error.tsx"],"sourcesContent":["import * as React from \"react\"\nimport type { ReactNode } 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\"\nimport { Button } from \"../button/button\"\n\nconst ErrorIcon = (props: React.SVGProps<SVGSVGElement>) => (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    height=\"24px\"\n    viewBox=\"0 -960 960 960\"\n    width=\"24px\"\n    fill=\"currentColor\"\n    {...props}\n  >\n    <path d=\"M480-280q17 0 28.5-11.5T520-320q0-17-11.5-28.5T480-360q-17 0-28.5 11.5T440-320q0 17 11.5 28.5T480-280Zm0-160q17 0 28.5-11.5T520-480v-160q0-17-11.5-28.5T480-680q-17 0-28.5 11.5T440-640v160q0 17 11.5 28.5T480-440Zm0 360q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z\" />\n  </svg>\n)\n\nconst useStyles = makeVoltStyles({\n  root: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    gap: tokens.spacingElement1,\n    ...shorthands.paddingBlock(tokens.spacingLayout2),\n    textAlign: \"center\",\n  },\n  icon: {\n    width: \"2.5rem\",\n    height: \"2.5rem\",\n    color: tokens.errorA11,\n    marginBottom: tokens.spacingElement2,\n  },\n  title: {\n    fontSize: tokens.textBase,\n    lineHeight: tokens.leadingBase,\n    fontWeight: tokens.fontWeightMedium,\n    color: tokens.grayA12,\n    ...shorthands.margin(0),\n  },\n  description: {\n    fontSize: tokens.textSm,\n    lineHeight: tokens.leadingSm,\n    color: tokens.grayA11,\n    maxWidth: \"28rem\",\n    ...shorthands.margin(0),\n  },\n  retry: {\n    marginTop: tokens.spacingGroup1,\n  },\n})\n\nexport type DataTableErrorProps = {\n  /** Error title text */\n  title?: string\n  /** Error description/message */\n  description?: ReactNode\n  /** Retry button text */\n  retryLabel?: string\n  /** Callback when retry is clicked */\n  onRetry?: () => void\n  /** Additional class name */\n  className?: string\n  /** Custom error content (overrides default error display) */\n  children?: ReactNode\n}\n\n/**\n * Error state display for DataTable.\n * Shows an error icon, message, and optional retry button.\n */\nexport const DataTableError = React.forwardRef<\n  HTMLDivElement,\n  DataTableErrorProps\n>(function DataTableError(\n  { title, description, retryLabel, onRetry, className, children },\n  ref\n) {\n  const styles = useStyles()\n\n  return (\n    <div\n      ref={ref}\n      data-slot=\"data-table-error\"\n      {...{ [SLOT_ATTR]: \"data-table-error\" }}\n      role=\"alert\"\n      className={mergeClasses(styles.root, className)}\n    >\n      {children ?? (\n        <>\n          <ErrorIcon className={styles.icon} />\n          <p className={styles.title}>{title}</p>\n          {description && <p className={styles.description}>{description}</p>}\n          {onRetry && (\n            <Button\n              variant=\"secondary\"\n              size=\"sm\"\n              onClick={onRetry}\n              className={styles.retry}\n            >\n              {retryLabel}\n            </Button>\n          )}\n        </>\n      )}\n    </div>\n  )\n})\n"],"names":["ErrorIcon","props","jsxDEV","this","useStyles","makeVoltStyles","tokens.spacingElement1","shorthands","tokens.spacingLayout2","tokens.errorA11","tokens.spacingElement2","tokens.textBase","tokens.leadingBase","tokens.fontWeightMedium","tokens.grayA12","tokens.textSm","tokens.leadingSm","tokens.grayA11","tokens.spacingGroup1","DataTableError","React","title","description","retryLabel","onRetry","className","children","ref","styles","SLOT_ATTR","mergeClasses","Fragment","Button"],"mappings":"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"}

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

@@ -1,21 +1,21 @@
-import { jsx as a, jsxs as L } from "react/jsx-runtime";
-import * as P from "react";
-import { flexRender as W } from "../../vendor/@tanstack/react-table/build/lib/index.js";
-import { shorthands as z } 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 { mergeClasses as k } from "../../packages/volt-runtime/dist/vendor/@griffel/core/src/mergeClasses.js";
-import { makeVoltStyles as O } from "../../styles/make-styles.js";
-import { grayA6 as _, gray2 as A, fontWeightSemibold as F } from "../../tokens/index.js";
-import { TableHeader as N, TableRow as $, TableHead as g } from "../table/table.js";
-import { getPinnedColumnOffset as j, isLastLeftPinnedColumn as U, isFirstRightPinnedColumn as E } from "./data-table-pinning-utils.js";
-import { useDataTable as Q } from "./hooks/use-data-table.js";
-import { useDataTableContent as V } from "./hooks/use-data-table-content.js";
-const q = 150, B = O({
+import { j as i } from "../../vendor/react/jsx-dev-runtime.js";
+import * as H from "react";
+import { flexRender as k } from "../../vendor/@tanstack/react-table/build/lib/index.js";
+import { shorthands as L } from "../../packages/volt-runtime/dist/vendor/@griffel/core/src/index.js";
+import { SLOT_ATTR as P } from "../../packages/volt-runtime/dist/renderer/contract.js";
+import { mergeClasses as W } from "../../packages/volt-runtime/dist/vendor/@griffel/core/src/mergeClasses.js";
+import { makeVoltStyles as j } from "../../styles/make-styles.js";
+import { grayA6 as z, gray2 as E, fontWeightSemibold as U } from "../../tokens/index.js";
+import { TableHeader as I, TableRow as V, TableHead as f } from "../table/table.js";
+import { getPinnedColumnOffset as O, isLastLeftPinnedColumn as _, isFirstRightPinnedColumn as A } from "./data-table-pinning-utils.js";
+import { useDataTable as F } from "./hooks/use-data-table.js";
+import { useDataTableContent as $ } from "./hooks/use-data-table-content.js";
+const Q = 150, q = j({
   headerTitle: {
     display: "block",
-    ...z.overflow("hidden"),
+    ...L.overflow("hidden"),
     whiteSpace: "nowrap",
-    fontWeight: F
+    fontWeight: U
   },
   shadowLeft: {
     boxShadow: "2px 0 5px -2px rgba(0,0,0,0.1)"
@@ -23,78 +23,112 @@ const q = 150, B = O({
   shadowRight: {
     boxShadow: "-2px 0 5px -2px rgba(0,0,0,0.1)"
   }
-}), ao = P.forwardRef(function({ className: u, sticky: h = !1, stickyBackground: c = A }, b) {
-  const d = B(), { table: i, disableColumnResizing: x, showHeaderBorder: S, fitHeaderWidth: v } = Q(), m = !x, r = V(), p = (r == null ? void 0 : r.spacerWidth) ?? 0, t = h, w = (s) => s.map((o) => {
-    const e = o.column.getIsPinned(), f = e ? j(o.column, i) : void 0, T = U(o.column, i), y = E(o.column, i), l = o.column.columnDef.meta, R = l == null ? void 0 : l.align, C = {
-      width: m || o.getSize() !== q ? o.getSize() : void 0,
-      minWidth: v ? "max-content" : void 0,
-      backgroundColor: t || e ? c : void 0,
-      position: t || e ? "sticky" : m ? "relative" : void 0,
+}), se = H.forwardRef(function({ className: g, sticky: b = !1, stickyBackground: m = E }, h) {
+  const n = q(), { table: s, disableColumnResizing: x, showHeaderBorder: v, fitHeaderWidth: w } = F(), c = !x, r = $(), u = (r == null ? void 0 : r.spacerWidth) ?? 0, t = b, N = (l) => l.map((e) => {
+    const o = e.column.getIsPinned(), p = o ? O(e.column, s) : void 0, S = _(e.column, s), D = A(e.column, s), d = e.column.columnDef.meta, R = d == null ? void 0 : d.align, T = {
+      width: c || e.getSize() !== Q ? e.getSize() : void 0,
+      minWidth: w ? "max-content" : void 0,
+      backgroundColor: t || o ? m : void 0,
+      position: t || o ? "sticky" : c ? "relative" : void 0,
       top: t ? 0 : void 0,
-      left: e === "left" ? `${f}px` : void 0,
-      right: e === "right" ? `${f}px` : void 0,
-      zIndex: e ? 30 : t ? 10 : void 0,
+      left: o === "left" ? `${p}px` : void 0,
+      right: o === "right" ? `${p}px` : void 0,
+      zIndex: o ? 30 : t ? 10 : void 0,
       // Reduce padding for sortable headers
       ...(() => {
-        const n = o.column.columnDef.meta;
-        return (n == null ? void 0 : n._sortableHeaderWrapped) || o.column.getCanSort() && typeof o.column.columnDef.header == "function" ? (n == null ? void 0 : n.align) === "right" ? { paddingRight: 8 } : { paddingLeft: 8 } : {};
+        const a = e.column.columnDef.meta;
+        return (a == null ? void 0 : a._sortableHeaderWrapped) || e.column.getCanSort() && typeof e.column.columnDef.header == "function" ? (a == null ? void 0 : a.align) === "right" ? { paddingRight: 8 } : { paddingLeft: 8 } : {};
       })()
-    }, H = o.column.getIsSorted() === "asc" ? "ascending" : o.column.getIsSorted() === "desc" ? "descending" : o.column.getCanSort() ? "none" : void 0, D = /* @__PURE__ */ a("span", { className: d.headerTitle, children: o.isPlaceholder ? null : W(o.column.columnDef.header, o.getContext()) });
-    return /* @__PURE__ */ a(
-      g,
+    }, y = e.column.getIsSorted() === "asc" ? "ascending" : e.column.getIsSorted() === "desc" ? "descending" : e.column.getCanSort() ? "none" : void 0, C = /* @__PURE__ */ i.jsxDEV("span", { className: n.headerTitle, children: e.isPlaceholder ? null : k(e.column.columnDef.header, e.getContext()) }, void 0, !1, {
+      fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/data-table/data-table-header.tsx",
+      lineNumber: 124,
+      columnNumber: 9
+    }, this);
+    return /* @__PURE__ */ i.jsxDEV(
+      f,
       {
         align: R,
-        "aria-sort": H,
-        style: C,
-        className: k(
-          T && d.shadowLeft,
-          y && d.shadowRight
+        "aria-sort": y,
+        style: T,
+        className: W(
+          S && n.shadowLeft,
+          D && n.shadowRight
         ),
-        children: D
+        children: C
       },
-      o.id
+      e.id,
+      !1,
+      {
+        fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/data-table/data-table-header.tsx",
+        lineNumber: 132,
+        columnNumber: 9
+      },
+      this
     );
   });
-  return /* @__PURE__ */ a(
-    N,
+  return /* @__PURE__ */ i.jsxDEV(
+    I,
     {
-      ref: b,
+      ref: h,
       "data-slot": "data-table-header",
-      [I]: "data-table-header",
+      [P]: "data-table-header",
       "data-fs-element": "DataTable-Header",
-      className: u,
-      children: i.getHeaderGroups().map((s) => /* @__PURE__ */ L(
-        $,
+      className: g,
+      children: s.getHeaderGroups().map((l) => /* @__PURE__ */ i.jsxDEV(
+        V,
         {
           noHover: !0,
           style: {
-            boxShadow: S !== !1 ? `inset 0 -1px 0 0 ${_}` : "none"
+            boxShadow: v !== !1 ? `inset 0 -1px 0 0 ${z}` : "none"
           },
           children: [
-            w(s.headers),
-            p > 0 && /* @__PURE__ */ a(
-              g,
+            N(l.headers),
+            u > 0 && /* @__PURE__ */ i.jsxDEV(
+              f,
               {
                 "data-spacer": !0,
                 "aria-hidden": "true",
                 style: {
-                  width: p,
+                  width: u,
                   padding: 0,
-                  backgroundColor: t ? c : void 0,
+                  backgroundColor: t ? m : void 0,
                   position: t ? "sticky" : void 0,
                   top: t ? 0 : void 0,
                   zIndex: t ? 5 : void 0
                 }
-              }
+              },
+              void 0,
+              !1,
+              {
+                fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/data-table/data-table-header.tsx",
+                lineNumber: 169,
+                columnNumber: 13
+              },
+              this
             )
           ]
         },
-        s.id
+        l.id,
+        !0,
+        {
+          fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/data-table/data-table-header.tsx",
+          lineNumber: 156,
+          columnNumber: 9
+        },
+        this
       ))
-    }
+    },
+    void 0,
+    !1,
+    {
+      fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/data-table/data-table-header.tsx",
+      lineNumber: 148,
+      columnNumber: 5
+    },
+    this
   );
 });
 export {
-  ao as DataTableHeader
+  se as DataTableHeader
 };
 //# sourceMappingURL=data-table-header.js.map

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 { flexRender, type Header } 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 { TableHeader, TableRow, TableHead } from \"../table/table\"\nimport { useDataTable, useDataTableContent } from \"./hooks\"\nimport {\n  getPinnedColumnOffset,\n  isLastLeftPinnedColumn,\n  isFirstRightPinnedColumn,\n} from \"./data-table-pinning-utils\"\n\n// TanStack Table's default column width\nconst DEFAULT_COLUMN_WIDTH = 150\n\nconst useStyles = makeVoltStyles({\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 = false, stickyBackground = tokens.gray2 },\n  ref\n) {\n  const styles = useStyles()\n  const { table, disableColumnResizing, showHeaderBorder, fitHeaderWidth } =\n    useDataTable()\n  const enableColumnResizing = !disableColumnResizing\n  const contentContext = useDataTableContent()\n  const spacerWidth = contentContext?.spacerWidth ?? 0\n\n  const isSticky = sticky\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\" }\n        | 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 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      return (\n        <TableHead\n          key={header.id}\n          align={align}\n          aria-sort={ariaSort}\n          style={cellStyle}\n          className={mergeClasses(\n            isLastLeft && styles.shadowLeft,\n            isFirstRight && styles.shadowRight\n          )}\n        >\n          {headerContent}\n        </TableHead>\n      )\n    })\n\n  return (\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          {renderHeaders(headerGroup.headers)}\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"],"names":["DEFAULT_COLUMN_WIDTH","useStyles","makeVoltStyles","shorthands","tokens.fontWeightSemibold","DataTableHeader","React","className","sticky","stickyBackground","tokens.gray2","ref","styles","table","disableColumnResizing","showHeaderBorder","fitHeaderWidth","useDataTable","enableColumnResizing","contentContext","useDataTableContent","spacerWidth","isSticky","renderHeaders","headers","header","isPinned","pinnedOffset","getPinnedColumnOffset","isLastLeft","isLastLeftPinnedColumn","isFirstRight","isFirstRightPinnedColumn","columnMeta","align","cellStyle","meta","ariaSort","headerContent","jsx","flexRender","TableHead","mergeClasses","TableHeader","SLOT_ATTR","headerGroup","jsxs","TableRow","tokens.grayA6"],"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 { flexRender, type Header } 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 { TableHeader, TableRow, TableHead } from \"../table/table\"\nimport { useDataTable, useDataTableContent } from \"./hooks\"\nimport {\n  getPinnedColumnOffset,\n  isLastLeftPinnedColumn,\n  isFirstRightPinnedColumn,\n} from \"./data-table-pinning-utils\"\n\n// TanStack Table's default column width\nconst DEFAULT_COLUMN_WIDTH = 150\n\nconst useStyles = makeVoltStyles({\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 = false, stickyBackground = tokens.gray2 },\n  ref\n) {\n  const styles = useStyles()\n  const { table, disableColumnResizing, showHeaderBorder, fitHeaderWidth } =\n    useDataTable()\n  const enableColumnResizing = !disableColumnResizing\n  const contentContext = useDataTableContent()\n  const spacerWidth = contentContext?.spacerWidth ?? 0\n\n  const isSticky = sticky\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\" }\n        | 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 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      return (\n        <TableHead\n          key={header.id}\n          align={align}\n          aria-sort={ariaSort}\n          style={cellStyle}\n          className={mergeClasses(\n            isLastLeft && styles.shadowLeft,\n            isFirstRight && styles.shadowRight\n          )}\n        >\n          {headerContent}\n        </TableHead>\n      )\n    })\n\n  return (\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          {renderHeaders(headerGroup.headers)}\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"],"names":["DEFAULT_COLUMN_WIDTH","useStyles","makeVoltStyles","shorthands","tokens.fontWeightSemibold","DataTableHeader","React","className","sticky","stickyBackground","tokens.gray2","ref","styles","table","disableColumnResizing","showHeaderBorder","fitHeaderWidth","useDataTable","enableColumnResizing","contentContext","useDataTableContent","spacerWidth","isSticky","renderHeaders","headers","header","isPinned","pinnedOffset","getPinnedColumnOffset","isLastLeft","isLastLeftPinnedColumn","isFirstRight","isFirstRightPinnedColumn","columnMeta","align","cellStyle","meta","ariaSort","headerContent","jsxDEV","flexRender","TableHead","mergeClasses","TableHeader","SLOT_ATTR","headerGroup","TableRow","tokens.grayA6"],"mappings":"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"}

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

@@ -1,39 +1,51 @@
-import { jsx as a } from "react/jsx-runtime";
+import { j as a } from "../../vendor/react/jsx-dev-runtime.js";
 import * as s from "react";
-import { shorthands as n } 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 { mergeClasses as m } from "../../packages/volt-runtime/dist/vendor/@griffel/core/src/mergeClasses.js";
-import { makeVoltStyles as l } from "../../styles/make-styles.js";
-import { grayA11 as p, spacingElement2 as c, spacingLayout2 as d } from "../../tokens/index.js";
+import { shorthands as i } from "../../packages/volt-runtime/dist/vendor/@griffel/core/src/index.js";
+import { SLOT_ATTR as l } from "../../packages/volt-runtime/dist/renderer/contract.js";
+import { mergeClasses as n } from "../../packages/volt-runtime/dist/vendor/@griffel/core/src/mergeClasses.js";
+import { makeVoltStyles as m } from "../../styles/make-styles.js";
+import { spacingLayout2 as p, grayA11 as c, spacingElement2 as d } from "../../tokens/index.js";
 import { Spinner as f } from "../spinner/spinner.js";
-const g = l({
+const g = m({
   root: {
     display: "flex",
     flexDirection: "column",
     alignItems: "center",
     justifyContent: "center",
-    gap: c,
-    ...n.paddingBlock(d)
+    gap: d,
+    ...i.paddingBlock(p)
   },
   spinner: {
     width: "2.5rem",
     height: "2.5rem",
-    color: p
+    color: c
   }
-}), D = s.forwardRef(function({ className: o, children: e }, r) {
-  const t = g();
-  return /* @__PURE__ */ a(
+}), j = s.forwardRef(function({ className: t, children: o }, r) {
+  const e = g();
+  return /* @__PURE__ */ a.jsxDEV(
     "div",
     {
       ref: r,
       "data-slot": "data-table-loading",
-      [i]: "data-table-loading",
-      className: m(t.root, o),
-      children: e ?? /* @__PURE__ */ a(f, { className: t.spinner })
-    }
+      [l]: "data-table-loading",
+      className: n(e.root, t),
+      children: o ?? /* @__PURE__ */ a.jsxDEV(f, { className: e.spinner }, void 0, !1, {
+        fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/data-table/data-table-loading.tsx",
+        lineNumber: 50,
+        columnNumber: 20
+      }, this)
+    },
+    void 0,
+    !1,
+    {
+      fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/data-table/data-table-loading.tsx",
+      lineNumber: 44,
+      columnNumber: 5
+    },
+    this
   );
 });
 export {
-  D as DataTableLoading
+  j as DataTableLoading
 };
 //# sourceMappingURL=data-table-loading.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"data-table-loading.js","sources":["../../../src/components/data-table/data-table-loading.tsx"],"sourcesContent":["import * as React from \"react\"\nimport type { ReactNode } 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\"\nimport { Spinner } from \"../spinner/spinner\"\n\nconst useStyles = makeVoltStyles({\n  root: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    gap: tokens.spacingElement2,\n    ...shorthands.paddingBlock(tokens.spacingLayout2),\n  },\n  spinner: {\n    width: \"2.5rem\",\n    height: \"2.5rem\",\n    color: tokens.grayA11,\n  },\n})\n\nexport type DataTableLoadingProps = {\n  /** Additional class name */\n  className?: string\n  /** Custom loading content (overrides default spinner) */\n  children?: ReactNode\n}\n\n/**\n * Loading state display for DataTable.\n * Renders a centered spinner by default, or custom content when children are provided.\n */\nexport const DataTableLoading = React.forwardRef<\n  HTMLDivElement,\n  DataTableLoadingProps\n>(function DataTableLoading({ className, children }, ref) {\n  const styles = useStyles()\n\n  return (\n    <div\n      ref={ref}\n      data-slot=\"data-table-loading\"\n      {...{ [SLOT_ATTR]: \"data-table-loading\" }}\n      className={mergeClasses(styles.root, className)}\n    >\n      {children ?? <Spinner className={styles.spinner} />}\n    </div>\n  )\n})\n"],"names":["useStyles","makeVoltStyles","tokens.spacingElement2","shorthands","tokens.spacingLayout2","tokens.grayA11","DataTableLoading","React","className","children","ref","styles","jsx","SLOT_ATTR","mergeClasses","Spinner"],"mappings":";;;;;;;;AASA,MAAMA,IAAYC,EAAe;AAAA,EAC/B,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,eAAe;AAAA,IACf,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,KAAKC;AAAAA,IACL,GAAGC,EAAW,aAAaC,CAAqB;AAAA,EAAA;AAAA,EAElD,SAAS;AAAA,IACP,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,OAAOC;AAAAA,EAAO;AAElB,CAAC,GAaYC,IAAmBC,EAAM,WAGpC,SAA0B,EAAE,WAAAC,GAAW,UAAAC,EAAA,GAAYC,GAAK;AACxD,QAAMC,IAASX,EAAA;AAEf,SACE,gBAAAY;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAF;AAAA,MACA,aAAU;AAAA,MACJ,CAACG,CAAS,GAAG;AAAA,MACnB,WAAWC,EAAaH,EAAO,MAAMH,CAAS;AAAA,MAE7C,UAAAC,KAAY,gBAAAG,EAACG,GAAA,EAAQ,WAAWJ,EAAO,QAAA,CAAS;AAAA,IAAA;AAAA,EAAA;AAGvD,CAAC;"}
+{"version":3,"file":"data-table-loading.js","sources":["../../../src/components/data-table/data-table-loading.tsx"],"sourcesContent":["import * as React from \"react\"\nimport type { ReactNode } 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\"\nimport { Spinner } from \"../spinner/spinner\"\n\nconst useStyles = makeVoltStyles({\n  root: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    gap: tokens.spacingElement2,\n    ...shorthands.paddingBlock(tokens.spacingLayout2),\n  },\n  spinner: {\n    width: \"2.5rem\",\n    height: \"2.5rem\",\n    color: tokens.grayA11,\n  },\n})\n\nexport type DataTableLoadingProps = {\n  /** Additional class name */\n  className?: string\n  /** Custom loading content (overrides default spinner) */\n  children?: ReactNode\n}\n\n/**\n * Loading state display for DataTable.\n * Renders a centered spinner by default, or custom content when children are provided.\n */\nexport const DataTableLoading = React.forwardRef<\n  HTMLDivElement,\n  DataTableLoadingProps\n>(function DataTableLoading({ className, children }, ref) {\n  const styles = useStyles()\n\n  return (\n    <div\n      ref={ref}\n      data-slot=\"data-table-loading\"\n      {...{ [SLOT_ATTR]: \"data-table-loading\" }}\n      className={mergeClasses(styles.root, className)}\n    >\n      {children ?? <Spinner className={styles.spinner} />}\n    </div>\n  )\n})\n"],"names":["useStyles","makeVoltStyles","tokens.spacingElement2","shorthands","tokens.spacingLayout2","tokens.grayA11","DataTableLoading","React","className","children","ref","styles","jsxDEV","SLOT_ATTR","mergeClasses","Spinner"],"mappings":";;;;;;;;AASA,MAAMA,IAAYC,EAAe;AAAA,EAC/B,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,eAAe;AAAA,IACf,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,KAAKC;AAAAA,IACL,GAAGC,EAAW,aAAaC,CAAqB;AAAA,EAAA;AAAA,EAElD,SAAS;AAAA,IACP,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,OAAOC;AAAAA,EAAO;AAElB,CAAC,GAaYC,IAAmBC,EAAM,WAGpC,SAA0B,EAAE,WAAAC,GAAW,UAAAC,EAAA,GAAYC,GAAK;AACxD,QAAMC,IAASX,EAAA;AAEf,SACEY,gBAAAA,EAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAF;AAAA,MACA,aAAU;AAAA,MACJ,CAACG,CAAS,GAAG;AAAA,MACnB,WAAWC,EAAaH,EAAO,MAAMH,CAAS;AAAA,MAE7C,UAAAC,KAAYG,gBAAAA,EAAAA,OAACG,GAAA,EAAQ,WAAWJ,EAAO,QAAA,GAA3B,QAAA,IAAA;AAAA,QAAA,UAAA;AAAA,QAAA,YAAA;AAAA,QAAA,cAAA;AAAA,MAAA,GAAA,IAAoC;AAAA,IAAA;AAAA,IANnD;AAAA,IAAA;AAAA,IAAA;AAAA,MAAA,UAAA;AAAA,MAAA,YAAA;AAAA,MAAA,cAAA;AAAA,IAAA;AAAA,IAAA;AAAA,EAAA;AASJ,CAAC;"}

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

@@ -1,30 +1,38 @@
-import { jsx as d } from "react/jsx-runtime";
-import * as m from "react";
-import { TablePagination as S } from "../table/table-pagination.js";
-import { useDataTable as c } from "./hooks/use-data-table.js";
-const f = [10, 25, 50, 100], z = m.forwardRef(function({ pageSizeOptions: n, siblingCount: s, labels: g, className: i }, l) {
-  const { table: t, pagination: e } = c(), r = n ?? (e == null ? void 0 : e.pageSizeOptions) ?? f, { pageIndex: p, pageSize: o } = t.getState().pagination, P = (e == null ? void 0 : e.totalItems) ?? ((e == null ? void 0 : e.pageCount) !== void 0 && e.pageCount >= 0 ? e.pageCount * o : t.getFilteredRowModel().rows.length);
-  return /* @__PURE__ */ d(
-    S,
+import { j as d } from "../../vendor/react/jsx-dev-runtime.js";
+import * as c from "react";
+import { TablePagination as f } from "../table/table-pagination.js";
+import { useDataTable as u } from "./hooks/use-data-table.js";
+const P = [10, 25, 50, 100], I = c.forwardRef(function({ pageSizeOptions: n, siblingCount: s, labels: i, className: l }, r) {
+  const { table: a, pagination: e } = u(), g = n ?? (e == null ? void 0 : e.pageSizeOptions) ?? P, { pageIndex: m, pageSize: o } = a.getState().pagination, p = (e == null ? void 0 : e.totalItems) ?? ((e == null ? void 0 : e.pageCount) !== void 0 && e.pageCount >= 0 ? e.pageCount * o : a.getFilteredRowModel().rows.length);
+  return /* @__PURE__ */ d.jsxDEV(
+    f,
     {
-      ref: l,
+      ref: r,
       "data-slot": "data-table-pagination",
       "data-fs-element": "DataTable-Pagination",
-      page: p + 1,
-      totalItems: P,
+      page: m + 1,
+      totalItems: p,
       pageSize: o,
-      onPageChange: (a) => t.setPageIndex(a - 1),
-      onPageSizeChange: (a) => {
-        t.setPageSize(a), t.setPageIndex(0);
+      onPageChange: (t) => a.setPageIndex(t - 1),
+      onPageSizeChange: (t) => {
+        a.setPageSize(t), a.setPageIndex(0);
       },
-      pageSizeOptions: r,
+      pageSizeOptions: g,
       siblingCount: s,
-      labels: g,
-      className: i
-    }
+      labels: i,
+      className: l
+    },
+    void 0,
+    !1,
+    {
+      fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/data-table/data-table-pagination.tsx",
+      lineNumber: 49,
+      columnNumber: 5
+    },
+    this
   );
 });
 export {
-  z as DataTablePagination
+  I as DataTablePagination
 };
 //# sourceMappingURL=data-table-pagination.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"data-table-pagination.js","sources":["../../../src/components/data-table/data-table-pagination.tsx"],"sourcesContent":["import * as React from \"react\"\nimport {\n  TablePagination,\n  type TablePaginationLabels,\n} from \"../table/table-pagination\"\nimport { useDataTable } from \"./hooks\"\n\nconst DEFAULT_PAGE_SIZE_OPTIONS = [10, 25, 50, 100]\n\nexport type DataTablePaginationProps = {\n  /** Available page size options */\n  pageSizeOptions?: number[]\n  /** Number of sibling pages to show on each side of current page */\n  siblingCount?: number\n  /** Labels for i18n. See TablePaginationLabels for available options. */\n  labels?: TablePaginationLabels\n  /** Additional class name */\n  className?: string\n}\n\n/**\n * Pagination component that integrates with DataTable's Tanstack Table instance.\n * Must be used within a DataTable component.\n */\nexport const DataTablePagination = React.forwardRef<\n  HTMLDivElement,\n  DataTablePaginationProps\n>(function DataTablePagination(\n  { pageSizeOptions, siblingCount, labels, className },\n  ref\n) {\n  const { table, pagination } = useDataTable()\n\n  // Prop takes precedence, then pagination config, then default\n  const resolvedPageSizeOptions =\n    pageSizeOptions ?? pagination?.pageSizeOptions ?? DEFAULT_PAGE_SIZE_OPTIONS\n\n  const { pageIndex, pageSize } = table.getState().pagination\n\n  // For server-side pagination, use totalItems from config\n  // For client-side pagination, use filtered row count\n  const totalRows =\n    pagination?.totalItems ??\n    (pagination?.pageCount !== undefined && pagination.pageCount >= 0\n      ? pagination.pageCount * pageSize\n      : table.getFilteredRowModel().rows.length)\n\n  return (\n    <TablePagination\n      ref={ref}\n      data-slot=\"data-table-pagination\"\n      data-fs-element=\"DataTable-Pagination\"\n      page={pageIndex + 1} // Convert to 1-indexed\n      totalItems={totalRows}\n      pageSize={pageSize}\n      onPageChange={(page) => table.setPageIndex(page - 1)} // Convert back to 0-indexed\n      onPageSizeChange={(size) => {\n        table.setPageSize(size)\n        table.setPageIndex(0) // Reset to first page\n      }}\n      pageSizeOptions={resolvedPageSizeOptions}\n      siblingCount={siblingCount}\n      labels={labels}\n      className={className}\n    />\n  )\n})\n"],"names":["DEFAULT_PAGE_SIZE_OPTIONS","DataTablePagination","React","pageSizeOptions","siblingCount","labels","className","ref","table","pagination","useDataTable","resolvedPageSizeOptions","pageIndex","pageSize","totalRows","jsx","TablePagination","page","size"],"mappings":";;;;AAOA,MAAMA,IAA4B,CAAC,IAAI,IAAI,IAAI,GAAG,GAiBrCC,IAAsBC,EAAM,WAGvC,SACA,EAAE,iBAAAC,GAAiB,cAAAC,GAAc,QAAAC,GAAQ,WAAAC,EAAA,GACzCC,GACA;AACA,QAAM,EAAE,OAAAC,GAAO,YAAAC,EAAA,IAAeC,EAAA,GAGxBC,IACJR,MAAmBM,KAAA,gBAAAA,EAAY,oBAAmBT,GAE9C,EAAE,WAAAY,GAAW,UAAAC,EAAA,IAAaL,EAAM,WAAW,YAI3CM,KACJL,KAAA,gBAAAA,EAAY,iBACXA,KAAA,gBAAAA,EAAY,eAAc,UAAaA,EAAW,aAAa,IAC5DA,EAAW,YAAYI,IACvBL,EAAM,oBAAA,EAAsB,KAAK;AAEvC,SACE,gBAAAO;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,KAAAT;AAAA,MACA,aAAU;AAAA,MACV,mBAAgB;AAAA,MAChB,MAAMK,IAAY;AAAA,MAClB,YAAYE;AAAA,MACZ,UAAAD;AAAA,MACA,cAAc,CAACI,MAAST,EAAM,aAAaS,IAAO,CAAC;AAAA,MACnD,kBAAkB,CAACC,MAAS;AAC1B,QAAAV,EAAM,YAAYU,CAAI,GACtBV,EAAM,aAAa,CAAC;AAAA,MACtB;AAAA,MACA,iBAAiBG;AAAA,MACjB,cAAAP;AAAA,MACA,QAAAC;AAAA,MACA,WAAAC;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC;"}
+{"version":3,"file":"data-table-pagination.js","sources":["../../../src/components/data-table/data-table-pagination.tsx"],"sourcesContent":["import * as React from \"react\"\nimport {\n  TablePagination,\n  type TablePaginationLabels,\n} from \"../table/table-pagination\"\nimport { useDataTable } from \"./hooks\"\n\nconst DEFAULT_PAGE_SIZE_OPTIONS = [10, 25, 50, 100]\n\nexport type DataTablePaginationProps = {\n  /** Available page size options */\n  pageSizeOptions?: number[]\n  /** Number of sibling pages to show on each side of current page */\n  siblingCount?: number\n  /** Labels for i18n. See TablePaginationLabels for available options. */\n  labels?: TablePaginationLabels\n  /** Additional class name */\n  className?: string\n}\n\n/**\n * Pagination component that integrates with DataTable's Tanstack Table instance.\n * Must be used within a DataTable component.\n */\nexport const DataTablePagination = React.forwardRef<\n  HTMLDivElement,\n  DataTablePaginationProps\n>(function DataTablePagination(\n  { pageSizeOptions, siblingCount, labels, className },\n  ref\n) {\n  const { table, pagination } = useDataTable()\n\n  // Prop takes precedence, then pagination config, then default\n  const resolvedPageSizeOptions =\n    pageSizeOptions ?? pagination?.pageSizeOptions ?? DEFAULT_PAGE_SIZE_OPTIONS\n\n  const { pageIndex, pageSize } = table.getState().pagination\n\n  // For server-side pagination, use totalItems from config\n  // For client-side pagination, use filtered row count\n  const totalRows =\n    pagination?.totalItems ??\n    (pagination?.pageCount !== undefined && pagination.pageCount >= 0\n      ? pagination.pageCount * pageSize\n      : table.getFilteredRowModel().rows.length)\n\n  return (\n    <TablePagination\n      ref={ref}\n      data-slot=\"data-table-pagination\"\n      data-fs-element=\"DataTable-Pagination\"\n      page={pageIndex + 1} // Convert to 1-indexed\n      totalItems={totalRows}\n      pageSize={pageSize}\n      onPageChange={(page) => table.setPageIndex(page - 1)} // Convert back to 0-indexed\n      onPageSizeChange={(size) => {\n        table.setPageSize(size)\n        table.setPageIndex(0) // Reset to first page\n      }}\n      pageSizeOptions={resolvedPageSizeOptions}\n      siblingCount={siblingCount}\n      labels={labels}\n      className={className}\n    />\n  )\n})\n"],"names":["DEFAULT_PAGE_SIZE_OPTIONS","DataTablePagination","React","pageSizeOptions","siblingCount","labels","className","ref","table","pagination","useDataTable","resolvedPageSizeOptions","pageIndex","pageSize","totalRows","jsxDEV","TablePagination","page","size"],"mappings":";;;;AAOA,MAAMA,IAA4B,CAAC,IAAI,IAAI,IAAI,GAAG,GAiBrCC,IAAsBC,EAAM,WAGvC,SACA,EAAE,iBAAAC,GAAiB,cAAAC,GAAc,QAAAC,GAAQ,WAAAC,EAAA,GACzCC,GACA;AACA,QAAM,EAAE,OAAAC,GAAO,YAAAC,EAAA,IAAeC,EAAA,GAGxBC,IACJR,MAAmBM,KAAA,gBAAAA,EAAY,oBAAmBT,GAE9C,EAAE,WAAAY,GAAW,UAAAC,EAAA,IAAaL,EAAM,WAAW,YAI3CM,KACJL,KAAA,gBAAAA,EAAY,iBACXA,KAAA,gBAAAA,EAAY,eAAc,UAAaA,EAAW,aAAa,IAC5DA,EAAW,YAAYI,IACvBL,EAAM,oBAAA,EAAsB,KAAK;AAEvC,SACEO,gBAAAA,EAAAA;AAAAA,IAACC;AAAA,IAAA;AAAA,MACC,KAAAT;AAAA,MACA,aAAU;AAAA,MACV,mBAAgB;AAAA,MAChB,MAAMK,IAAY;AAAA,MAClB,YAAYE;AAAA,MACZ,UAAAD;AAAA,MACA,cAAc,CAACI,MAAST,EAAM,aAAaS,IAAO,CAAC;AAAA,MACnD,kBAAkB,CAACC,MAAS;AAC1B,QAAAV,EAAM,YAAYU,CAAI,GACtBV,EAAM,aAAa,CAAC;AAAA,MACtB;AAAA,MACA,iBAAiBG;AAAA,MACjB,cAAAP;AAAA,MACA,QAAAC;AAAA,MACA,WAAAC;AAAA,IAAA;AAAA,IAfF;AAAA,IAAA;AAAA,IAAA;AAAA,MAAA,UAAA;AAAA,MAAA,YAAA;AAAA,MAAA,cAAA;AAAA,IAAA;AAAA,IAAA;AAAA,EAAA;AAkBJ,CAAC;"}