@epilot/zenith-react 0.1.0-next.0 → 0.1.0

package/dist/components/data-table/data-table-column-order.js

@@ -0,0 +1,277 @@
+import { jsxs as b, jsx as e } from "react/jsx-runtime";
+import * as A from "react";
+import { useCallback as N } from "react";
+import { useSensors as M, useSensor as O, DndContext as E, closestCenter as L, KeyboardSensor as R, PointerSensor as k } from "../../vendor/.bun/@dnd-kit_core@6.3.1_6f4b9a1cfb20c0ae/vendor/@dnd-kit/core/dist/core.esm.js";
+import { arrayMove as B, SortableContext as _, verticalListSortingStrategy as G, sortableKeyboardCoordinates as z, useSortable as Z } from "../../vendor/.bun/@dnd-kit_sortable@10.0.0_1d291640e1250bbe/vendor/@dnd-kit/sortable/dist/sortable.esm.js";
+import { CSS as j } from "../../vendor/.bun/@dnd-kit_utilities@3.2.2_62547eec5a2188e3/vendor/@dnd-kit/utilities/dist/utilities.esm.js";
+import { SLOT_ATTR as x, shorthands as d, mergeClasses as F } from "@epilot/zenith-runtime/v1";
+import { makeZenithStyles as K } from "../../styles/make-styles.js";
+import { accentA8 as V, grayA12 as W, grayA8 as X, grayA3 as H, leadingSm as P, textSm as $, spacingElement2 as C, radiusSm as q } from "../../tokens/index.js";
+import { Button as J } from "../button/button.js";
+import { DropdownMenu as Q, DropdownMenuTrigger as U, DropdownMenuContent as Y, DropdownMenuLabel as ee, DropdownMenuSeparator as te } from "../dropdown-menu/dropdown-menu.js";
+import { useDataTable as re } from "./hooks/use-data-table.js";
+const ne = (t) => /* @__PURE__ */ e(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "20",
+    height: "20",
+    viewBox: "0 -960 960 960",
+    fill: "currentColor",
+    ...t,
+    children: /* @__PURE__ */ e("path", { d: "M320-440v-287l-76 76-44-44 150-150 150 150-44 44-76-76v287h-60ZM560-155 410-305l44-44 76 76v-287h60v287l76-76 44 44L560-155Z" })
+  }
+), oe = (t) => /* @__PURE__ */ b(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "16",
+    height: "16",
+    viewBox: "0 0 24 24",
+    fill: "currentColor",
+    ...t,
+    children: [
+      /* @__PURE__ */ e("circle", { cx: "9", cy: "5", r: "1.5" }),
+      /* @__PURE__ */ e("circle", { cx: "15", cy: "5", r: "1.5" }),
+      /* @__PURE__ */ e("circle", { cx: "9", cy: "12", r: "1.5" }),
+      /* @__PURE__ */ e("circle", { cx: "15", cy: "12", r: "1.5" }),
+      /* @__PURE__ */ e("circle", { cx: "9", cy: "19", r: "1.5" }),
+      /* @__PURE__ */ e("circle", { cx: "15", cy: "19", r: "1.5" })
+    ]
+  }
+), T = K({
+  icon: {
+    width: "1rem",
+    height: "1rem"
+  },
+  gripIcon: {
+    width: "14px",
+    height: "14px"
+  },
+  srOnly: {
+    position: "absolute",
+    width: "1px",
+    height: "1px",
+    ...d.padding(0),
+    ...d.margin("-1px"),
+    ...d.overflow("hidden"),
+    clip: "rect(0, 0, 0, 0)",
+    whiteSpace: "nowrap"
+  },
+  item: {
+    display: "flex",
+    alignItems: "center",
+    ...d.gap(C),
+    ...d.borderRadius(q),
+    paddingLeft: C,
+    paddingRight: C,
+    paddingTop: "6px",
+    paddingBottom: "6px",
+    fontSize: $,
+    lineHeight: P
+  },
+  itemDragging: {
+    zIndex: 50,
+    backgroundColor: H,
+    opacity: 0.8
+  },
+  dragHandle: {
+    display: "inline-flex",
+    flexShrink: 0,
+    cursor: "grab",
+    touchAction: "none",
+    alignItems: "center",
+    color: X,
+    backgroundColor: "transparent",
+    ...d.borderWidth(0),
+    ...d.padding(0),
+    "&:hover": {
+      color: W
+    },
+    "&:focus-visible": {
+      outlineWidth: "2px",
+      outlineStyle: "solid",
+      outlineOffset: "2px",
+      outlineColor: V
+    },
+    "&:active": {
+      cursor: "grabbing"
+    }
+  },
+  itemLabel: {
+    userSelect: "none"
+  }
+});
+function ae({
+  column: t,
+  dragHandleLabel: r
+}) {
+  const n = T(), {
+    attributes: c,
+    listeners: u,
+    setNodeRef: g,
+    transform: p,
+    transition: f,
+    isDragging: o
+  } = Z({ id: t.id }), i = t.columnDef.meta, a = (i == null ? void 0 : i.visibilityLabel) ?? (typeof t.columnDef.header == "string" ? t.columnDef.header : t.id), s = r ? typeof r == "function" ? r(a) : r : `Drag to reorder ${a}`;
+  return /* @__PURE__ */ b(
+    "div",
+    {
+      ref: g,
+      style: {
+        transform: j.Transform.toString(p),
+        transition: f
+      },
+      className: F(n.item, o && n.itemDragging),
+      "data-slot": "data-table-column-order-item",
+      [x]: "data-table-column-order-item",
+      "data-fs-element": "DataTable-ColumnOrder-Item",
+      children: [
+        /* @__PURE__ */ e(
+          "button",
+          {
+            type: "button",
+            className: n.dragHandle,
+            "data-slot": "data-table-column-order-drag-handle",
+            [x]: "data-table-column-order-drag-handle",
+            "aria-label": s,
+            ...c,
+            ...u,
+            children: /* @__PURE__ */ e(oe, { className: n.gripIcon })
+          }
+        ),
+        /* @__PURE__ */ e(
+          "span",
+          {
+            className: n.itemLabel,
+            "data-slot": "data-table-column-order-item-label",
+            [x]: "data-table-column-order-item-label",
+            children: a
+          }
+        )
+      ]
+    }
+  );
+}
+function ie({
+  columns: t,
+  currentOrder: r,
+  table: n,
+  dragHandleLabel: c,
+  announcements: u,
+  screenReaderInstructions: g
+}) {
+  const p = M(
+    O(k, {
+      activationConstraint: { distance: 3 }
+    }),
+    O(R, {
+      coordinateGetter: z
+    })
+  ), f = N(
+    (o) => {
+      const { active: i, over: a } = o;
+      if (!a || i.id === a.id) return;
+      const s = r.indexOf(i.id), l = r.indexOf(a.id);
+      if (s === -1 || l === -1) return;
+      const y = B(r, s, l);
+      n.setColumnOrder(y);
+    },
+    [r, n]
+  );
+  return /* @__PURE__ */ e(
+    E,
+    {
+      sensors: p,
+      collisionDetection: L,
+      onDragEnd: f,
+      accessibility: {
+        announcements: u,
+        screenReaderInstructions: g
+      },
+      children: /* @__PURE__ */ e(
+        _,
+        {
+          items: t.map((o) => o.id),
+          strategy: G,
+          children: t.map((o) => /* @__PURE__ */ e(
+            ae,
+            {
+              column: o,
+              dragHandleLabel: c
+            },
+            o.id
+          ))
+        }
+      )
+    }
+  );
+}
+const xe = A.forwardRef(function({
+  icon: r,
+  trigger: n,
+  label: c,
+  dragHandleLabel: u,
+  announcements: g,
+  screenReaderInstructions: p,
+  contentClassName: f,
+  align: o = "end",
+  ...i
+}, a) {
+  const s = T(), { table: l } = re(), y = l.getAllLeafColumns(), w = y.filter((m) => {
+    if (m.id === "select") return !1;
+    const h = m.columnDef.meta;
+    return (h == null ? void 0 : h.enableOrdering) !== !1;
+  });
+  if (w.length === 0)
+    return null;
+  const S = l.getState().columnOrder && l.getState().columnOrder.length > 0 ? l.getState().columnOrder : y.map((m) => m.id), I = [...w].sort((m, h) => {
+    const D = S.indexOf(m.id), v = S.indexOf(h.id);
+    return (D === -1 ? Number.MAX_SAFE_INTEGER : D) - (v === -1 ? Number.MAX_SAFE_INTEGER : v);
+  });
+  return /* @__PURE__ */ b(Q, { ref: a, ...i, children: [
+    /* @__PURE__ */ e(U, { asChild: !0, children: n ?? /* @__PURE__ */ b(
+      J,
+      {
+        variant: "tertiary",
+        size: "sm",
+        "data-slot": "data-table-column-order-trigger",
+        [x]: "data-table-column-order-trigger",
+        "data-fs-element": "DataTable-ColumnOrder-Trigger",
+        children: [
+          r ?? /* @__PURE__ */ e(ne, { className: s.icon }),
+          /* @__PURE__ */ e("span", { className: s.srOnly, children: c })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ b(
+      Y,
+      {
+        align: o,
+        className: f,
+        "data-slot": "data-table-column-order-content",
+        [x]: "data-table-column-order-content",
+        "data-fs-element": "DataTable-ColumnOrder-Content",
+        children: [
+          /* @__PURE__ */ e(ee, { children: c }),
+          /* @__PURE__ */ e(te, {}),
+          /* @__PURE__ */ e(
+            ie,
+            {
+              columns: I,
+              currentOrder: S,
+              table: l,
+              dragHandleLabel: u,
+              announcements: g,
+              screenReaderInstructions: p
+            }
+          )
+        ]
+      }
+    )
+  ] });
+});
+export {
+  xe as DataTableColumnOrder
+};
+//# sourceMappingURL=data-table-column-order.js.map

package/dist/components/data-table/data-table-column-order.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-column-order.js","sources":["../../../src/components/data-table/data-table-column-order.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { useCallback } from \"react\"\nimport type { ComponentProps, ReactNode, SVGProps } from \"react\"\nimport { type Column } from \"@tanstack/react-table\"\nimport {\n  DndContext,\n  closestCenter,\n  KeyboardSensor,\n  PointerSensor,\n  useSensor,\n  useSensors,\n  type Announcements,\n  type DragEndEvent,\n  type ScreenReaderInstructions,\n} from \"@dnd-kit/core\"\nimport {\n  SortableContext,\n  verticalListSortingStrategy,\n  arrayMove,\n  useSortable,\n  sortableKeyboardCoordinates,\n} from \"@dnd-kit/sortable\"\nimport { CSS } from \"@dnd-kit/utilities\"\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 { Button } from \"../button/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"../dropdown-menu/dropdown-menu\"\nimport { useDataTable } from \"./hooks/use-data-table\"\n\n// Swap vertical icon (default trigger icon)\nconst IconSwapVertical = (props: SVGProps<SVGSVGElement>) => (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"20\"\n    height=\"20\"\n    viewBox=\"0 -960 960 960\"\n    fill=\"currentColor\"\n    {...props}\n  >\n    <path d=\"M320-440v-287l-76 76-44-44 150-150 150 150-44 44-76-76v287h-60ZM560-155 410-305l44-44 76 76v-287h60v287l76-76 44 44L560-155Z\" />\n  </svg>\n)\n\n// Grip vertical icon (drag handle)\nconst IconGripVertical = (props: SVGProps<SVGSVGElement>) => (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"16\"\n    height=\"16\"\n    viewBox=\"0 0 24 24\"\n    fill=\"currentColor\"\n    {...props}\n  >\n    <circle cx=\"9\" cy=\"5\" r=\"1.5\" />\n    <circle cx=\"15\" cy=\"5\" r=\"1.5\" />\n    <circle cx=\"9\" cy=\"12\" r=\"1.5\" />\n    <circle cx=\"15\" cy=\"12\" r=\"1.5\" />\n    <circle cx=\"9\" cy=\"19\" r=\"1.5\" />\n    <circle cx=\"15\" cy=\"19\" r=\"1.5\" />\n  </svg>\n)\n\nconst useStyles = makeZenithStyles({\n  icon: {\n    width: \"1rem\",\n    height: \"1rem\",\n  },\n  gripIcon: {\n    width: \"14px\",\n    height: \"14px\",\n  },\n  srOnly: {\n    position: \"absolute\",\n    width: \"1px\",\n    height: \"1px\",\n    ...shorthands.padding(0),\n    ...shorthands.margin(\"-1px\"),\n    ...shorthands.overflow(\"hidden\"),\n    clip: \"rect(0, 0, 0, 0)\",\n    whiteSpace: \"nowrap\",\n  },\n  item: {\n    display: \"flex\",\n    alignItems: \"center\",\n    ...shorthands.gap(tokens.spacingElement2),\n    ...shorthands.borderRadius(tokens.radiusSm),\n    paddingLeft: tokens.spacingElement2,\n    paddingRight: tokens.spacingElement2,\n    paddingTop: \"6px\",\n    paddingBottom: \"6px\",\n    fontSize: tokens.textSm,\n    lineHeight: tokens.leadingSm,\n  },\n  itemDragging: {\n    zIndex: 50,\n    backgroundColor: tokens.grayA3,\n    opacity: 0.8,\n  },\n  dragHandle: {\n    display: \"inline-flex\",\n    flexShrink: 0,\n    cursor: \"grab\",\n    touchAction: \"none\",\n    alignItems: \"center\",\n    color: tokens.grayA8,\n    backgroundColor: \"transparent\",\n    ...shorthands.borderWidth(0),\n    ...shorthands.padding(0),\n    \"&:hover\": {\n      color: tokens.grayA12,\n    },\n    \"&:focus-visible\": {\n      outlineWidth: \"2px\",\n      outlineStyle: \"solid\",\n      outlineOffset: \"2px\",\n      outlineColor: tokens.accentA8,\n    },\n    \"&:active\": {\n      cursor: \"grabbing\",\n    },\n  },\n  itemLabel: {\n    userSelect: \"none\",\n  },\n})\n\nexport type DataTableColumnOrderProps = {\n  /** Custom icon for the default trigger button. Falls back to swap-vertical icon. */\n  icon?: ReactNode\n  /** Custom trigger element. Defaults to an icon button. */\n  trigger?: ReactNode\n  /** Label shown at top of dropdown and as screen reader text for default trigger. Required for i18n. */\n  label: string\n  /** Accessible label for the drag handle buttons. Recommended for i18n and accessibility. Receives column label as parameter. */\n  dragHandleLabel?: string | ((columnLabel: string) => string)\n  /** Custom screen reader announcements for drag-and-drop operations. */\n  announcements?: Announcements\n  /** Custom screen reader instructions for draggable items. */\n  screenReaderInstructions?: ScreenReaderInstructions\n  /** Additional class name for the dropdown content */\n  contentClassName?: string\n  /** Alignment of dropdown relative to trigger. Default: \"end\" */\n  align?: \"start\" | \"center\" | \"end\"\n} & Omit<ComponentProps<typeof DropdownMenu>, \"children\">\n\n/** Sortable item inside the column order dropdown */\nfunction DataTableColumnOrderItem({\n  column,\n  dragHandleLabel,\n}: {\n  column: Column<unknown, unknown>\n  dragHandleLabel?: string | ((columnLabel: string) => string)\n}) {\n  const styles = useStyles()\n  const {\n    attributes,\n    listeners,\n    setNodeRef,\n    transform,\n    transition,\n    isDragging,\n  } = useSortable({ id: column.id })\n\n  const meta = column.columnDef.meta as { visibilityLabel?: string } | undefined\n  const label =\n    meta?.visibilityLabel ??\n    (typeof column.columnDef.header === \"string\"\n      ? column.columnDef.header\n      : column.id)\n\n  const resolvedDragHandleLabel = dragHandleLabel\n    ? typeof dragHandleLabel === \"function\"\n      ? dragHandleLabel(label)\n      : dragHandleLabel\n    : `Drag to reorder ${label}`\n\n  return (\n    <div\n      ref={setNodeRef}\n      style={{\n        transform: CSS.Transform.toString(transform),\n        transition,\n      }}\n      className={mergeClasses(styles.item, isDragging && styles.itemDragging)}\n      data-slot=\"data-table-column-order-item\"\n      {...{ [SLOT_ATTR]: \"data-table-column-order-item\" }}\n      data-fs-element=\"DataTable-ColumnOrder-Item\"\n    >\n      <button\n        type=\"button\"\n        className={styles.dragHandle}\n        data-slot=\"data-table-column-order-drag-handle\"\n        {...{ [SLOT_ATTR]: \"data-table-column-order-drag-handle\" }}\n        aria-label={resolvedDragHandleLabel}\n        {...attributes}\n        {...listeners}\n      >\n        <IconGripVertical className={styles.gripIcon} />\n      </button>\n      <span\n        className={styles.itemLabel}\n        data-slot=\"data-table-column-order-item-label\"\n        {...{ [SLOT_ATTR]: \"data-table-column-order-item-label\" }}\n      >\n        {label}\n      </span>\n    </div>\n  )\n}\n\n/**\n * Inner list component that provides the DnD context.\n * Separated to avoid hook rules issues with early returns.\n */\nfunction DataTableColumnOrderList({\n  columns,\n  currentOrder,\n  table,\n  dragHandleLabel,\n  announcements,\n  screenReaderInstructions,\n}: {\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  columns: Column<any, unknown>[]\n  currentOrder: string[]\n  table: { setColumnOrder: (order: string[]) => void }\n  dragHandleLabel?: string | ((columnLabel: string) => string)\n  announcements?: Announcements\n  screenReaderInstructions?: ScreenReaderInstructions\n}) {\n  const sensors = useSensors(\n    useSensor(PointerSensor, {\n      activationConstraint: { distance: 3 },\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 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    [currentOrder, table]\n  )\n\n  return (\n    <DndContext\n      sensors={sensors}\n      collisionDetection={closestCenter}\n      onDragEnd={handleDragEnd}\n      accessibility={{\n        announcements,\n        screenReaderInstructions,\n      }}\n    >\n      <SortableContext\n        items={columns.map((c) => c.id)}\n        strategy={verticalListSortingStrategy}\n      >\n        {columns.map((col) => (\n          <DataTableColumnOrderItem\n            key={col.id}\n            column={col}\n            dragHandleLabel={dragHandleLabel}\n          />\n        ))}\n      </SortableContext>\n    </DndContext>\n  )\n}\n\n/**\n * A dropdown menu for reordering columns in DataTable via drag-and-drop.\n * Shows a draggable list of columns that can be rearranged.\n * Place in DataTableToolbar for consistent layout.\n */\nexport const DataTableColumnOrder = React.forwardRef<\n  HTMLElement,\n  DataTableColumnOrderProps\n>(function DataTableColumnOrder(\n  {\n    icon,\n    trigger,\n    label,\n    dragHandleLabel,\n    announcements,\n    screenReaderInstructions,\n    contentClassName,\n    align = \"end\",\n    ...props\n  },\n  ref\n) {\n  const styles = useStyles()\n  const { table } = useDataTable()\n\n  // Get reorderable columns (exclude selection column, respect meta.enableOrdering)\n  const allColumns = table.getAllLeafColumns()\n  const reorderableColumns = allColumns.filter((col) => {\n    if (col.id === \"select\") return false\n    const meta = col.columnDef.meta as { enableOrdering?: boolean } | undefined\n    return meta?.enableOrdering !== false\n  })\n\n  // If no reorderable columns, don't render\n  if (reorderableColumns.length === 0) {\n    return null\n  }\n\n  // Current order (derive from columns if columnOrder state is empty)\n  const currentOrder =\n    table.getState().columnOrder && table.getState().columnOrder.length > 0\n      ? table.getState().columnOrder\n      : allColumns.map((c) => c.id)\n\n  // Sort reorderable columns by their position in currentOrder\n  const orderedColumns = [...reorderableColumns].sort((a, b) => {\n    const indexA = currentOrder.indexOf(a.id)\n    const indexB = currentOrder.indexOf(b.id)\n    return (\n      (indexA === -1 ? Number.MAX_SAFE_INTEGER : indexA) -\n      (indexB === -1 ? Number.MAX_SAFE_INTEGER : indexB)\n    )\n  })\n\n  return (\n    <DropdownMenu ref={ref} {...props}>\n      <DropdownMenuTrigger asChild>\n        {trigger ?? (\n          <Button\n            variant=\"tertiary\"\n            size=\"sm\"\n            data-slot=\"data-table-column-order-trigger\"\n            {...{ [SLOT_ATTR]: \"data-table-column-order-trigger\" }}\n            data-fs-element=\"DataTable-ColumnOrder-Trigger\"\n          >\n            {icon ?? <IconSwapVertical className={styles.icon} />}\n            <span className={styles.srOnly}>{label}</span>\n          </Button>\n        )}\n      </DropdownMenuTrigger>\n      <DropdownMenuContent\n        align={align}\n        className={contentClassName}\n        data-slot=\"data-table-column-order-content\"\n        {...{ [SLOT_ATTR]: \"data-table-column-order-content\" }}\n        data-fs-element=\"DataTable-ColumnOrder-Content\"\n      >\n        <DropdownMenuLabel>{label}</DropdownMenuLabel>\n        <DropdownMenuSeparator />\n        <DataTableColumnOrderList\n          columns={orderedColumns}\n          currentOrder={currentOrder}\n          table={table}\n          dragHandleLabel={dragHandleLabel}\n          announcements={announcements}\n          screenReaderInstructions={screenReaderInstructions}\n        />\n      </DropdownMenuContent>\n    </DropdownMenu>\n  )\n})\n"],"names":["IconSwapVertical","props","jsx","IconGripVertical","jsxs","useStyles","makeZenithStyles","shorthands","tokens.spacingElement2","tokens.radiusSm","tokens.textSm","tokens.leadingSm","tokens.grayA3","tokens.grayA8","tokens.grayA12","tokens.accentA8","DataTableColumnOrderItem","column","dragHandleLabel","styles","attributes","listeners","setNodeRef","transform","transition","isDragging","useSortable","meta","label","resolvedDragHandleLabel","CSS","mergeClasses","SLOT_ATTR","DataTableColumnOrderList","columns","currentOrder","table","announcements","screenReaderInstructions","sensors","useSensors","useSensor","PointerSensor","KeyboardSensor","sortableKeyboardCoordinates","handleDragEnd","useCallback","event","active","over","oldIndex","newIndex","newOrder","arrayMove","DndContext","closestCenter","SortableContext","c","verticalListSortingStrategy","col","DataTableColumnOrder","React","icon","trigger","contentClassName","align","ref","useDataTable","allColumns","reorderableColumns","orderedColumns","a","b","indexA","indexB","DropdownMenu","DropdownMenuTrigger","Button","DropdownMenuContent","DropdownMenuLabel","DropdownMenuSeparator"],"mappings":"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"}

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

@@ -1,19 +1,20 @@
-import { jsx as r, jsxs as O, Fragment as _ } from "react/jsx-runtime";
-import * as A from "react";
-import { useRef as S, useState as z, useCallback as R, useEffect as I, useMemo as l } from "react";
-import { flushSync as N } from "react-dom";
-import { SLOT_ATTR as y, mergeClasses as U, shorthands as $ } from "@epilot/zenith-runtime/v1";
-import { makeZenithStyles as j } from "../../styles/make-styles.js";
-import { leadingSm as k, textSm as q } from "../../tokens/index.js";
-import { DataTableContentContext as P } from "./data-table-context.js";
-import { DataTableHeader as Z } from "./data-table-header.js";
-import { DataTableBody as G } from "./data-table-body.js";
-import { useDataTable as J } from "./hooks/use-data-table.js";
-const K = 150, Q = j({
+import { jsx as a, jsxs as $, Fragment as j } from "react/jsx-runtime";
+import * as k from "react";
+import { useRef as T, useState as v, useCallback as y, useEffect as P, useMemo as u } from "react";
+import { flushSync as q } from "react-dom";
+import { useVirtualizer as G } from "../../vendor/.bun/@tanstack_react-virtual@3.11.2_6f4b9a1cfb20c0ae/vendor/@tanstack/react-virtual/dist/esm/index.js";
+import { SLOT_ATTR as x, mergeClasses as Z, shorthands as J } from "@epilot/zenith-runtime/v1";
+import { makeZenithStyles as K } from "../../styles/make-styles.js";
+import { leadingSm as Q, textSm as X } from "../../tokens/index.js";
+import { DEFAULT_OVERSCAN as Y, DataTableContentContext as ee, DataTableVirtualizerContext as te, DEFAULT_ROW_HEIGHT as ne } from "./data-table-context.js";
+import { DataTableHeader as oe } from "./data-table-header.js";
+import { DataTableBody as ie } from "./data-table-body.js";
+import { useDataTable as re } from "./hooks/use-data-table.js";
+const ae = 150, se = K({
   container: {
     position: "relative",
     width: "100%",
-    ...$.overflow("auto")
+    ...J.overflow("auto")
   },
   resizing: {
     cursor: "col-resize",
@@ -23,76 +24,89 @@ const K = 150, Q = j({
     tableLayout: "fixed",
     borderCollapse: "separate",
     borderSpacing: 0,
-    fontSize: q,
-    lineHeight: k
+    fontSize: X,
+    lineHeight: Q
   }
-}), ue = A.forwardRef(function({ children: T, className: x }, s) {
-  var p;
-  const c = Q(), { table: t, disableColumnResizing: W } = J(), D = !W && ((p = t.getState().columnSizingInfo) == null ? void 0 : p.isResizingColumn), f = S(null), u = S(null), [o, v] = z(!1), [m, w] = z(0), L = R(
-    (e) => {
-      f.current = e, typeof s == "function" ? s(e) : s && (s.current = e);
+}), Re = k.forwardRef(function({ children: D, className: w, style: W }, s) {
+  var z;
+  const d = se(), { table: n, config: e, disableColumnResizing: V } = re(), E = !V && ((z = n.getState().columnSizingInfo) == null ? void 0 : z.isResizingColumn), m = T(null), h = T(null), [i, H] = v(!1), [f, L] = v(0), _ = n.getRowModel().rows, A = y(
+    (t) => {
+      m.current = t, typeof s == "function" ? s(t) : s && (s.current = t);
     },
     [s]
   );
-  I(() => {
-    const e = f.current;
-    if (!e || typeof ResizeObserver > "u") return;
-    const n = new ResizeObserver((i) => {
-      w(i[0].contentRect.width);
+  P(() => {
+    const t = m.current;
+    if (!t || typeof ResizeObserver > "u") return;
+    const o = new ResizeObserver((r) => {
+      L(r[0].contentRect.width);
     });
-    return n.observe(e), () => n.disconnect();
+    return o.observe(t), () => o.disconnect();
   }, []);
-  const b = R(() => {
-    if (u.current && !o) {
-      const e = u.current.querySelectorAll(
+  const C = y(() => {
+    if (h.current && !i) {
+      const t = h.current.querySelectorAll(
         "th:not([data-spacer])"
-      ), n = t.getVisibleLeafColumns();
-      if (e.length === n.length) {
-        const i = {};
-        e.forEach((d, M) => {
-          const C = n[M];
-          C && (i[C.id] = Math.round(
-            d.getBoundingClientRect().width
+      ), o = n.getVisibleLeafColumns();
+      if (t.length === o.length) {
+        const r = {};
+        t.forEach((b, N) => {
+          const R = o[N];
+          R && (r[R.id] = Math.round(
+            b.getBoundingClientRect().width
           ));
-        }), N(() => {
-          v(!0), t.setColumnSizing((d) => ({ ...d, ...i }));
+        }), q(() => {
+          H(!0), n.setColumnSizing((b) => ({ ...b, ...r }));
         });
       }
     }
-  }, [t, o]), H = t.getState().columnSizing, V = t.getState().columnVisibility, a = l(() => t.getVisibleLeafColumns().reduce((n, i) => n + (i.getSize() ?? K), 0), [t, H, V]), h = 4, B = l(() => o ? a ? `${a}px` : `calc(100% - ${h}px)` : `calc(100% - ${h}px)`, [o, a]), g = l(() => !o || !m ? 0 : Math.max(0, m - a), [o, m, a]), E = T ?? /* @__PURE__ */ O(_, { children: [
-    /* @__PURE__ */ r(Z, {}),
-    /* @__PURE__ */ r(G, {})
-  ] }), F = l(
-    () => ({ syncColumnWidthsBeforeResize: b, spacerWidth: g }),
-    [b, g]
+  }, [n, i]), l = !!(e != null && e.enableVirtualization), g = G({
+    count: l ? _.length : 0,
+    getScrollElement: () => m.current,
+    estimateSize: () => (e == null ? void 0 : e.estimateRowHeight) ?? ne,
+    overscan: (e == null ? void 0 : e.overscan) ?? Y,
+    enabled: l
+  }), F = n.getState().columnSizing, O = n.getState().columnVisibility, c = u(() => n.getVisibleLeafColumns().reduce((o, r) => o + (r.getSize() ?? ae), 0), [n, F, O]), S = 4, B = u(() => i ? c ? `${c}px` : `calc(100% - ${S}px)` : `calc(100% - ${S}px)`, [i, c]), p = u(() => !i || !f ? 0 : Math.max(0, f - c), [i, f, c]), M = D ?? /* @__PURE__ */ $(j, { children: [
+    /* @__PURE__ */ a(oe, {}),
+    /* @__PURE__ */ a(ie, {})
+  ] }), U = u(
+    () => ({ syncColumnWidthsBeforeResize: C, spacerWidth: p }),
+    [C, p]
+  ), I = u(
+    () => l ? { virtualizer: g, scrollContainerRef: m } : null,
+    [l, g]
   );
-  return /* @__PURE__ */ r(P.Provider, { value: F, children: /* @__PURE__ */ r(
+  return /* @__PURE__ */ a(ee.Provider, { value: U, children: /* @__PURE__ */ a(te.Provider, { value: I, children: /* @__PURE__ */ a(
     "div",
     {
-      ref: L,
+      ref: A,
       "data-slot": "data-table-content",
-      [y]: "data-table-content",
+      [x]: "data-table-content",
       "data-fs-element": "DataTable-Content",
-      className: U(
-        c.container,
-        D && c.resizing,
-        x
+      className: Z(
+        d.container,
+        E && d.resizing,
+        w
       ),
-      children: /* @__PURE__ */ r(
+      style: {
+        height: l ? e == null ? void 0 : e.containerHeight : void 0,
+        ...W
+      },
+      children: /* @__PURE__ */ a(
         "table",
         {
-          ref: u,
+          ref: h,
           "data-slot": "table",
-          [y]: "table",
-          className: c.table,
+          [x]: "table",
+          className: d.table,
           style: { width: B },
-          children: E
+          children: M
         }
       )
     }
-  ) });
+  ) }) });
 });
 export {
-  ue as DataTableContent
+  Re as DataTableContent
 };
 //# sourceMappingURL=data-table-content.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"data-table-content.js","sources":["../../../src/components/data-table/data-table-content.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { useRef, useMemo, useCallback, useState, useEffect } from \"react\"\nimport { flushSync } from \"react-dom\"\nimport type { ReactNode } from \"react\"\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 { useDataTable } from \"./hooks\"\nimport { DataTableContentContext } from \"./data-table-context\"\nimport { DataTableHeader } from \"./data-table-header\"\nimport { DataTableBody } from \"./data-table-body\"\n\n// TanStack Table's default column width\nconst DEFAULT_COLUMN_WIDTH = 150\n\nconst useStyles = makeZenithStyles({\n  container: {\n    position: \"relative\",\n    width: \"100%\",\n    ...shorthands.overflow(\"auto\"),\n  },\n  resizing: {\n    cursor: \"col-resize\",\n    userSelect: \"none\",\n  },\n  table: {\n    tableLayout: \"fixed\",\n    borderCollapse: \"separate\",\n    borderSpacing: 0,\n    fontSize: tokens.textSm,\n    lineHeight: tokens.leadingSm,\n  },\n})\n\nexport type DataTableContentProps = {\n  /** Children to render inside the table (DataTableHeader, DataTableBody) */\n  children?: ReactNode\n  /** Additional class name */\n  className?: string\n}\n\n/**\n * Container component for DataTable that handles the table structure.\n * If no children are provided, renders DataTableHeader and DataTableBody by default.\n */\nexport const DataTableContent = React.forwardRef<\n  HTMLDivElement,\n  DataTableContentProps\n>(function DataTableContent({ children, className }, ref) {\n  const styles = useStyles()\n  const { table, disableColumnResizing } = useDataTable()\n  const enableColumnResizing = !disableColumnResizing\n\n  const isResizing =\n    enableColumnResizing && table.getState().columnSizingInfo?.isResizingColumn\n  const internalContainerRef = useRef<HTMLDivElement>(null!)\n  const tableRef = useRef<HTMLTableElement>(null)\n  const [hasSyncedWidths, setHasSyncedWidths] = useState(false)\n  const [containerWidth, setContainerWidth] = useState(0)\n\n  // Attach ref to internal ref or forwarded ref\n  const handleRef = useCallback(\n    (node: HTMLDivElement | null) => {\n      internalContainerRef.current = node!\n      if (typeof ref === \"function\") {\n        ref(node)\n      } else if (ref) {\n        ;(ref as React.MutableRefObject<HTMLDivElement | null>).current = node\n      }\n    },\n    [ref]\n  )\n\n  // Track container width for spacer calculation\n  useEffect(() => {\n    const container = internalContainerRef.current\n    if (!container || typeof ResizeObserver === \"undefined\") return\n\n    const observer = new ResizeObserver((entries) => {\n      setContainerWidth(entries[0].contentRect.width)\n    })\n    observer.observe(container)\n    return () => observer.disconnect()\n  }, [])\n\n  // Sync visual column widths to stored widths BEFORE resize starts\n  const syncColumnWidthsBeforeResize = useCallback(() => {\n    if (tableRef.current && !hasSyncedWidths) {\n      const headerCells = tableRef.current.querySelectorAll(\n        \"th:not([data-spacer])\"\n      )\n      const columns = table.getVisibleLeafColumns()\n\n      if (headerCells.length === columns.length) {\n        const newSizing: Record<string, number> = {}\n\n        headerCells.forEach((cell, index) => {\n          const column = columns[index]\n          if (column) {\n            newSizing[column.id] = Math.round(\n              cell.getBoundingClientRect().width\n            )\n          }\n        })\n\n        flushSync(() => {\n          setHasSyncedWidths(true)\n          table.setColumnSizing((prev) => ({ ...prev, ...newSizing }))\n        })\n      }\n    }\n  }, [table, hasSyncedWidths])\n\n  // Get column sizing and visibility state to trigger recalculation\n  const columnSizing = table.getState().columnSizing\n  const columnVisibility = table.getState().columnVisibility\n\n  // Calculate total column width from visible columns\n  const calculatedColumnSum = useMemo(() => {\n    const totalWidth = table.getVisibleLeafColumns().reduce((sum, col) => {\n      return sum + (col.getSize() ?? DEFAULT_COLUMN_WIDTH)\n    }, 0)\n    return totalWidth\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [table, columnSizing, columnVisibility])\n\n  const WIDTH_BUFFER = 4\n  const tableWidth = useMemo(() => {\n    if (!hasSyncedWidths) {\n      return `calc(100% - ${WIDTH_BUFFER}px)`\n    }\n    return calculatedColumnSum\n      ? `${calculatedColumnSum}px`\n      : `calc(100% - ${WIDTH_BUFFER}px)`\n  }, [hasSyncedWidths, calculatedColumnSum])\n\n  // Calculate spacer width to fill remaining container space after resize\n  const spacerWidth = useMemo(() => {\n    if (!hasSyncedWidths || !containerWidth) return 0\n    return Math.max(0, containerWidth - calculatedColumnSum)\n  }, [hasSyncedWidths, containerWidth, calculatedColumnSum])\n\n  // If no children, render default header + body\n  const content = children ?? (\n    <>\n      <DataTableHeader />\n      <DataTableBody />\n    </>\n  )\n\n  const contentContextValue = useMemo(\n    () => ({ syncColumnWidthsBeforeResize, spacerWidth }),\n    [syncColumnWidthsBeforeResize, spacerWidth]\n  )\n\n  return (\n    <DataTableContentContext.Provider value={contentContextValue}>\n      <div\n        ref={handleRef}\n        data-slot=\"data-table-content\"\n        {...{ [SLOT_ATTR]: \"data-table-content\" }}\n        data-fs-element=\"DataTable-Content\"\n        className={mergeClasses(\n          styles.container,\n          isResizing && styles.resizing,\n          className\n        )}\n      >\n        <table\n          ref={tableRef}\n          data-slot=\"table\"\n          {...{ [SLOT_ATTR]: \"table\" }}\n          className={styles.table}\n          style={{ width: tableWidth }}\n        >\n          {content}\n        </table>\n      </div>\n    </DataTableContentContext.Provider>\n  )\n})\n"],"names":["DEFAULT_COLUMN_WIDTH","useStyles","makeZenithStyles","shorthands","tokens.textSm","tokens.leadingSm","DataTableContent","React","children","className","ref","styles","table","disableColumnResizing","useDataTable","isResizing","_a","internalContainerRef","useRef","tableRef","hasSyncedWidths","setHasSyncedWidths","useState","containerWidth","setContainerWidth","handleRef","useCallback","node","useEffect","container","observer","entries","syncColumnWidthsBeforeResize","headerCells","columns","newSizing","cell","index","column","flushSync","prev","columnSizing","columnVisibility","calculatedColumnSum","useMemo","sum","col","WIDTH_BUFFER","tableWidth","spacerWidth","content","jsxs","Fragment","jsx","DataTableHeader","DataTableBody","contentContextValue","DataTableContentContext","SLOT_ATTR","mergeClasses"],"mappings":"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"}
+{"version":3,"file":"data-table-content.js","sources":["../../../src/components/data-table/data-table-content.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { useRef, useMemo, useCallback, useState, useEffect } from \"react\"\nimport { flushSync } from \"react-dom\"\nimport type { ReactNode } from \"react\"\nimport { useVirtualizer } from \"@tanstack/react-virtual\"\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 { useDataTable } from \"./hooks\"\nimport {\n  DataTableContentContext,\n  DataTableVirtualizerContext,\n  DEFAULT_ROW_HEIGHT,\n  DEFAULT_OVERSCAN,\n} from \"./data-table-context\"\nimport { DataTableHeader } from \"./data-table-header\"\nimport { DataTableBody } from \"./data-table-body\"\n\n// TanStack Table's default column width\nconst DEFAULT_COLUMN_WIDTH = 150\n\nconst useStyles = makeZenithStyles({\n  container: {\n    position: \"relative\",\n    width: \"100%\",\n    ...shorthands.overflow(\"auto\"),\n  },\n  resizing: {\n    cursor: \"col-resize\",\n    userSelect: \"none\",\n  },\n  table: {\n    tableLayout: \"fixed\",\n    borderCollapse: \"separate\",\n    borderSpacing: 0,\n    fontSize: tokens.textSm,\n    lineHeight: tokens.leadingSm,\n  },\n})\n\nexport type DataTableContentProps = {\n  /** Children to render inside the table (DataTableHeader, DataTableBody) */\n  children?: ReactNode\n  /** Additional class name */\n  className?: string\n  /** Additional style */\n  style?: React.CSSProperties\n}\n\n/**\n * Container component for DataTable that handles the table structure and virtualization.\n * When virtualization is enabled, this component manages the scroll container.\n *\n * If no children are provided, renders DataTableHeader and DataTableBody by default.\n */\nexport const DataTableContent = React.forwardRef<\n  HTMLDivElement,\n  DataTableContentProps\n>(function DataTableContent({ children, className, style }, ref) {\n  const styles = useStyles()\n  const { table, config, disableColumnResizing } = useDataTable()\n  const enableColumnResizing = !disableColumnResizing\n\n  const isResizing =\n    enableColumnResizing && table.getState().columnSizingInfo?.isResizingColumn\n  const internalContainerRef = useRef<HTMLDivElement>(null!)\n  const tableRef = useRef<HTMLTableElement>(null)\n  const [hasSyncedWidths, setHasSyncedWidths] = useState(false)\n  const [containerWidth, setContainerWidth] = useState(0)\n  const rows = table.getRowModel().rows\n\n  // Attach ref to internal ref or forwarded ref\n  const handleRef = useCallback(\n    (node: HTMLDivElement | null) => {\n      internalContainerRef.current = node!\n      if (typeof ref === \"function\") {\n        ref(node)\n      } else if (ref) {\n        ;(ref as React.MutableRefObject<HTMLDivElement | null>).current = node\n      }\n    },\n    [ref]\n  )\n\n  // Track container width for spacer calculation\n  useEffect(() => {\n    const container = internalContainerRef.current\n    if (!container || typeof ResizeObserver === \"undefined\") return\n\n    const observer = new ResizeObserver((entries) => {\n      setContainerWidth(entries[0].contentRect.width)\n    })\n    observer.observe(container)\n    return () => observer.disconnect()\n  }, [])\n\n  // Sync visual column widths to stored widths BEFORE resize starts\n  const syncColumnWidthsBeforeResize = useCallback(() => {\n    if (tableRef.current && !hasSyncedWidths) {\n      const headerCells = tableRef.current.querySelectorAll(\n        \"th:not([data-spacer])\"\n      )\n      const columns = table.getVisibleLeafColumns()\n\n      if (headerCells.length === columns.length) {\n        const newSizing: Record<string, number> = {}\n\n        headerCells.forEach((cell, index) => {\n          const column = columns[index]\n          if (column) {\n            newSizing[column.id] = Math.round(\n              cell.getBoundingClientRect().width\n            )\n          }\n        })\n\n        flushSync(() => {\n          setHasSyncedWidths(true)\n          table.setColumnSizing((prev) => ({ ...prev, ...newSizing }))\n        })\n      }\n    }\n  }, [table, hasSyncedWidths])\n\n  const isVirtual = Boolean(config?.enableVirtualization)\n\n  // Always call useVirtualizer to follow React hooks rules\n  // When virtualization is disabled, count=0 makes it effectively a no-op\n  const virtualizer = useVirtualizer({\n    count: isVirtual ? rows.length : 0,\n    getScrollElement: () => internalContainerRef.current,\n    estimateSize: () => config?.estimateRowHeight ?? DEFAULT_ROW_HEIGHT,\n    overscan: config?.overscan ?? DEFAULT_OVERSCAN,\n    enabled: isVirtual,\n  })\n\n  // Get column sizing and visibility state to trigger recalculation\n  const columnSizing = table.getState().columnSizing\n  const columnVisibility = table.getState().columnVisibility\n\n  // Calculate total column width from visible columns\n  const calculatedColumnSum = useMemo(() => {\n    const totalWidth = table.getVisibleLeafColumns().reduce((sum, col) => {\n      return sum + (col.getSize() ?? DEFAULT_COLUMN_WIDTH)\n    }, 0)\n    return totalWidth\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [table, columnSizing, columnVisibility])\n\n  const WIDTH_BUFFER = 4\n  const tableWidth = useMemo(() => {\n    if (!hasSyncedWidths) {\n      return `calc(100% - ${WIDTH_BUFFER}px)`\n    }\n    return calculatedColumnSum\n      ? `${calculatedColumnSum}px`\n      : `calc(100% - ${WIDTH_BUFFER}px)`\n  }, [hasSyncedWidths, calculatedColumnSum])\n\n  // Calculate spacer width to fill remaining container space after resize\n  const spacerWidth = useMemo(() => {\n    if (!hasSyncedWidths || !containerWidth) return 0\n    return Math.max(0, containerWidth - calculatedColumnSum)\n  }, [hasSyncedWidths, containerWidth, calculatedColumnSum])\n\n  // If no children, render default header + body\n  const content = children ?? (\n    <>\n      <DataTableHeader />\n      <DataTableBody />\n    </>\n  )\n\n  const contentContextValue = useMemo(\n    () => ({ syncColumnWidthsBeforeResize, spacerWidth }),\n    [syncColumnWidthsBeforeResize, spacerWidth]\n  )\n\n  const virtualizerContextValue = useMemo(\n    () =>\n      isVirtual\n        ? { virtualizer, scrollContainerRef: internalContainerRef }\n        : null,\n    [isVirtual, virtualizer]\n  )\n\n  return (\n    <DataTableContentContext.Provider value={contentContextValue}>\n      <DataTableVirtualizerContext.Provider value={virtualizerContextValue}>\n        <div\n          ref={handleRef}\n          data-slot=\"data-table-content\"\n          {...{ [SLOT_ATTR]: \"data-table-content\" }}\n          data-fs-element=\"DataTable-Content\"\n          className={mergeClasses(\n            styles.container,\n            isResizing && styles.resizing,\n            className\n          )}\n          style={{\n            height: isVirtual ? config?.containerHeight : undefined,\n            ...style,\n          }}\n        >\n          <table\n            ref={tableRef}\n            data-slot=\"table\"\n            {...{ [SLOT_ATTR]: \"table\" }}\n            className={styles.table}\n            style={{ width: tableWidth }}\n          >\n            {content}\n          </table>\n        </div>\n      </DataTableVirtualizerContext.Provider>\n    </DataTableContentContext.Provider>\n  )\n})\n"],"names":["DEFAULT_COLUMN_WIDTH","useStyles","makeZenithStyles","shorthands","tokens.textSm","tokens.leadingSm","DataTableContent","React","children","className","style","ref","styles","table","config","disableColumnResizing","useDataTable","isResizing","_a","internalContainerRef","useRef","tableRef","hasSyncedWidths","setHasSyncedWidths","useState","containerWidth","setContainerWidth","rows","handleRef","useCallback","node","useEffect","container","observer","entries","syncColumnWidthsBeforeResize","headerCells","columns","newSizing","cell","index","column","flushSync","prev","isVirtual","virtualizer","useVirtualizer","DEFAULT_ROW_HEIGHT","DEFAULT_OVERSCAN","columnSizing","columnVisibility","calculatedColumnSum","useMemo","sum","col","WIDTH_BUFFER","tableWidth","spacerWidth","content","jsxs","Fragment","jsx","DataTableHeader","DataTableBody","contentContextValue","virtualizerContextValue","DataTableContentContext","DataTableVirtualizerContext","SLOT_ATTR","mergeClasses"],"mappings":"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"}

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

@@ -1,10 +1,14 @@
 import { createContext as t } from "react";
-const n = (
+const o = 48, e = 10, a = 600, l = (
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   t(null)
-), o = t(null);
+), T = t(null), c = t(null);
 export {
-  o as DataTableContentContext,
-  n as DataTableContext
+  a as DEFAULT_CONTAINER_HEIGHT,
+  e as DEFAULT_OVERSCAN,
+  o as DEFAULT_ROW_HEIGHT,
+  c as DataTableContentContext,
+  l as DataTableContext,
+  T as DataTableVirtualizerContext
 };
 //# sourceMappingURL=data-table-context.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"data-table-context.js","sources":["../../../src/components/data-table/data-table-context.tsx"],"sourcesContent":["import { createContext } from \"react\"\nimport type { MouseEvent } from \"react\"\nimport type {\n  Table as TanstackTable,\n  PaginationState,\n  Row,\n} from \"@tanstack/react-table\"\n\n// =============================================================================\n// Configuration Constants\n// =============================================================================\n\n/**\n * @no-host-element Constant configuration value.\n */\nexport const DEFAULT_ROW_HEIGHT = 48\n\n/**\n * @no-host-element Constant configuration value.\n */\nexport const DEFAULT_OVERSCAN = 10\n\n/**\n * @no-host-element Constant configuration value.\n */\nexport const DEFAULT_CONTAINER_HEIGHT = 600\n\n/** Controls how cell content handles overflow */\nexport type DataTableCellOverflow = \"grow\" | \"wrap\" | \"truncate\"\n\n// =============================================================================\n// Types\n// =============================================================================\n\nexport type DataTablePaginationConfig = {\n  /** Controlled page index (0-indexed) */\n  pageIndex?: number\n  /** Page size (items per page). Default: 10 */\n  pageSize?: number\n  /** Available page size options. Default: [10, 25, 50, 100] */\n  pageSizeOptions?: number[]\n  /** Total items count for server-side pagination */\n  totalItems?: number\n  /** Total page count for server-side pagination (optional if totalItems provided) */\n  pageCount?: number\n  /** Callback for pagination state changes */\n  onPaginationChange?: (state: PaginationState) => void\n}\n\nexport type DataTableContextValue<TData> = {\n  table: TanstackTable<TData>\n  pagination?: DataTablePaginationConfig\n  /** Handler called when a row is clicked. Enables clickable row mode. */\n  onRowClick?: (row: Row<TData>, event: MouseEvent<HTMLTableRowElement>) => void\n  /** Custom hover class for clickable rows. Default: 'hover:bg-accent-a3' */\n  clickableRowClassName?: string\n  /** Custom class for selected rows. Default: 'data-[state=selected]:bg-accent-a3' */\n  selectedRowClassName?: string\n  /** Controls how cell content handles overflow. 'grow' expands cells (default), 'wrap' wraps text, 'truncate' shows ellipsis. */\n  cellOverflow?: DataTableCellOverflow\n  /** Whether column resizing is disabled (enabled by default) */\n  disableColumnResizing?: boolean\n  /** Show bottom border on header row. Default: true */\n  showHeaderBorder?: boolean\n  /** Show bottom borders on data rows. Default: true */\n  showRowBorders?: boolean\n  /** Ensure columns have minimum width to fit header content (prevents hover clipping on sortable headers) */\n  fitHeaderWidth?: boolean\n}\n\nexport type DataTableContentContextValue = {\n  /** Sync column widths to visual values before resize starts (prevents snap/jump) */\n  syncColumnWidthsBeforeResize: () => void\n  /** Width of the spacer column to fill remaining container space (0 if columns fill or exceed container) */\n  spacerWidth: number\n} | null\n\n// =============================================================================\n// Context\n// =============================================================================\n\n/**\n * Context for accessing table instance in compound components\n * @no-host-element Context object, renders no DOM element.\n */\nexport const DataTableContext =\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  createContext<DataTableContextValue<any> | null>(null)\n\n/**\n * Context for content-level functions (sync widths before resize)\n * @no-host-element Context object, renders no DOM element.\n */\nexport const DataTableContentContext =\n  createContext<DataTableContentContextValue>(null)\n"],"names":["DataTableContext","createContext","DataTableContentContext"],"mappings":";AAqFO,MAAMA;AAAA;AAAA,EAEXC,EAAiD,IAAI;AAAA,GAM1CC,IACXD,EAA4C,IAAI;"}
+{"version":3,"file":"data-table-context.js","sources":["../../../src/components/data-table/data-table-context.tsx"],"sourcesContent":["import { createContext } from \"react\"\nimport type { MouseEvent, RefObject } from \"react\"\nimport type {\n  Table as TanstackTable,\n  PaginationState,\n  Row,\n  ColumnSizingState,\n  ColumnOrderState,\n} from \"@tanstack/react-table\"\nimport type { Virtualizer } from \"@tanstack/react-virtual\"\n\n// =============================================================================\n// Configuration Constants\n// =============================================================================\n\n/**\n * @no-host-element Constant configuration value.\n */\nexport const DEFAULT_ROW_HEIGHT = 48\n\n/**\n * @no-host-element Constant configuration value.\n */\nexport const DEFAULT_OVERSCAN = 10\n\n/**\n * @no-host-element Constant configuration value.\n */\nexport const DEFAULT_CONTAINER_HEIGHT = 600\n\n/** Controls how cell content handles overflow */\nexport type DataTableCellOverflow = \"grow\" | \"wrap\" | \"truncate\"\n\n// =============================================================================\n// Types\n// =============================================================================\n\nexport type DataTablePaginationConfig = {\n  /** Controlled page index (0-indexed) */\n  pageIndex?: number\n  /** Page size (items per page). Default: 10 */\n  pageSize?: number\n  /** Available page size options. Default: [10, 25, 50, 100] */\n  pageSizeOptions?: number[]\n  /** Total items count for server-side pagination */\n  totalItems?: number\n  /** Total page count for server-side pagination (optional if totalItems provided) */\n  pageCount?: number\n  /** Callback for pagination state changes */\n  onPaginationChange?: (state: PaginationState) => void\n}\n\nexport type DataTableVirtualizationConfig = {\n  /** Enable virtualization */\n  enabled: boolean\n  /** Estimated row height in pixels. Default: 48 */\n  estimateRowHeight?: number\n  /** Number of items to render outside visible area. Default: 10 */\n  overscan?: number\n  /** Scroll container height. Default: 600 */\n  containerHeight?: number | string\n}\n\nexport type DataTableContextValue<TData> = {\n  table: TanstackTable<TData>\n  pagination?: DataTablePaginationConfig\n  config?: {\n    enableVirtualization: boolean\n    estimateRowHeight: number\n    overscan: number\n    containerHeight: number | string\n  }\n  /** Handler called when a row is clicked. Enables clickable row mode. */\n  onRowClick?: (row: Row<TData>, event: MouseEvent<HTMLTableRowElement>) => void\n  /** Custom hover class for clickable rows. Default: 'hover:bg-accent-a3' */\n  clickableRowClassName?: string\n  /** Custom class for selected rows. Default: 'data-[state=selected]:bg-accent-a3' */\n  selectedRowClassName?: string\n  /** Controls how cell content handles overflow. 'grow' expands cells (default), 'wrap' wraps text, 'truncate' shows ellipsis. */\n  cellOverflow?: DataTableCellOverflow\n  /** Whether column resizing is disabled (enabled by default) */\n  disableColumnResizing?: boolean\n  /** Show bottom border on header row. Default: true */\n  showHeaderBorder?: boolean\n  /** Show bottom borders on data rows. Default: true */\n  showRowBorders?: boolean\n  /** Controls when resize handles are visible. 'always' shows handles persistently, 'onHeaderHover' only shows on header row hover. Default: 'onHeaderHover' */\n  resizeHandleVisibility?: \"always\" | \"onHeaderHover\"\n  /** Ensure columns have minimum width to fit header content (prevents hover clipping on sortable headers) */\n  fitHeaderWidth?: boolean\n  /** Current column sizing state */\n  columnSizing?: ColumnSizingState\n  /** Whether drag-and-drop column reordering is enabled via header drag handles */\n  enableColumnOrdering?: boolean\n  /** Current column order state */\n  columnOrder?: ColumnOrderState\n}\n\nexport type DataTableVirtualizerContextValue = {\n  virtualizer: Virtualizer<HTMLDivElement, Element>\n  scrollContainerRef: RefObject<HTMLDivElement | null>\n} | null\n\nexport type DataTableContentContextValue = {\n  /** Sync column widths to visual values before resize starts (prevents snap/jump) */\n  syncColumnWidthsBeforeResize: () => void\n  /** Width of the spacer column to fill remaining container space (0 if columns fill or exceed container) */\n  spacerWidth: number\n} | null\n\n// =============================================================================\n// Context\n// =============================================================================\n\n/**\n * Context for accessing table instance in compound components\n * @no-host-element Context object, renders no DOM element.\n */\nexport const DataTableContext =\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  createContext<DataTableContextValue<any> | null>(null)\n\n/**\n * Context for virtualizer (set by DataTableContent)\n * @no-host-element Context object, renders no DOM element.\n * @public-api Context for accessing the virtualizer instance and container in compound components.\n */\nexport const DataTableVirtualizerContext =\n  createContext<DataTableVirtualizerContextValue>(null)\n\n/**\n * Context for content-level functions (sync widths before resize)\n * @no-host-element Context object, renders no DOM element.\n */\nexport const DataTableContentContext =\n  createContext<DataTableContentContextValue>(null)\n"],"names":["DEFAULT_ROW_HEIGHT","DEFAULT_OVERSCAN","DEFAULT_CONTAINER_HEIGHT","DataTableContext","createContext","DataTableVirtualizerContext","DataTableContentContext"],"mappings":";AAkBO,MAAMA,IAAqB,IAKrBC,IAAmB,IAKnBC,IAA2B,KA0F3BC;AAAA;AAAA,EAEXC,EAAiD,IAAI;AAAA,GAO1CC,IACXD,EAAgD,IAAI,GAMzCE,IACXF,EAA4C,IAAI;"}

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

@@ -0,0 +1,31 @@
+import { jsx as s } from "react/jsx-runtime";
+import * as l from "react";
+import { mergeClasses as m, SLOT_ATTR as n, shorthands as i } from "@epilot/zenith-runtime/v1";
+import { makeZenithStyles as f } from "../../styles/make-styles.js";
+import { spacingGroup2 as p, spacingElement3 as c } from "../../tokens/index.js";
+const d = f({
+  root: {
+    display: "flex",
+    alignItems: "center",
+    gap: p,
+    ...i.paddingBlock(c)
+  }
+}), h = l.forwardRef(function({ className: t, children: o, ...a }, e) {
+  const r = d();
+  return /* @__PURE__ */ s(
+    "div",
+    {
+      ref: e,
+      "data-slot": "data-table-footer",
+      [n]: "data-table-footer",
+      "data-fs-element": "DataTable-Footer",
+      className: m(r.root, t),
+      ...a,
+      children: o
+    }
+  );
+});
+export {
+  h as DataTableFooter
+};
+//# sourceMappingURL=data-table-footer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-footer.js","sources":["../../../src/components/data-table/data-table-footer.tsx"],"sourcesContent":["import * as React from \"react\"\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\"\n\nconst useStyles = makeZenithStyles({\n  root: {\n    display: \"flex\",\n    alignItems: \"center\",\n    gap: tokens.spacingGroup2,\n    ...shorthands.paddingBlock(tokens.spacingElement3),\n  },\n})\n\nexport type DataTableFooterProps = React.ComponentProps<\"div\">\n\n/**\n * A footer wrapper for DataTable that sits between the table content and pagination.\n * Use for custom actions like \"Show more\" links or summary information.\n */\nexport const DataTableFooter = React.forwardRef<\n  HTMLDivElement,\n  DataTableFooterProps\n>(function DataTableFooter({ className, children, ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <div\n      ref={ref}\n      data-slot=\"data-table-footer\"\n      {...{ [SLOT_ATTR]: \"data-table-footer\" }}\n      data-fs-element=\"DataTable-Footer\"\n      className={mergeClasses(styles.root, className)}\n      {...props}\n    >\n      {children}\n    </div>\n  )\n})\n"],"names":["useStyles","makeZenithStyles","tokens.spacingGroup2","shorthands","tokens.spacingElement3","DataTableFooter","React","className","children","props","ref","styles","jsx","SLOT_ATTR","mergeClasses"],"mappings":";;;;;AAOA,MAAMA,IAAYC,EAAiB;AAAA,EACjC,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,KAAKC;AAAAA,IACL,GAAGC,EAAW,aAAaC,CAAsB;AAAA,EAAA;AAErD,CAAC,GAQYC,IAAkBC,EAAM,WAGnC,SAAyB,EAAE,WAAAC,GAAW,UAAAC,GAAU,GAAGC,EAAA,GAASC,GAAK;AACjE,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;"}