boneless-table 0.1.0

package/dist/index.js

@@ -0,0 +1,982 @@
+"use strict";
+"use client";
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  BonelessTable: () => BonelessTable,
+  ColumnFilter: () => ColumnFilter,
+  ColumnMenu: () => ColumnMenu,
+  TableSkeleton: () => TableSkeleton,
+  compactValue: () => compactValue,
+  createColumnHelper: () => import_react_table2.createColumnHelper,
+  defaultBonelessTableSettings: () => defaultBonelessTableSettings,
+  defineColumns: () => defineColumns,
+  flexRender: () => import_react_table2.flexRender,
+  getColumnIds: () => getColumnIds,
+  getCoreRowModel: () => import_react_table2.getCoreRowModel,
+  getExpandedRowModel: () => import_react_table2.getExpandedRowModel,
+  getFilteredRowModel: () => import_react_table2.getFilteredRowModel,
+  getSortedRowModel: () => import_react_table2.getSortedRowModel,
+  mergeBonelessTableSettings: () => mergeBonelessTableSettings,
+  resolveColumnSettings: () => resolveColumnSettings,
+  resolveColumns: () => resolveColumns,
+  resolveRowHref: () => resolveRowHref,
+  resolveRowLinkLabel: () => resolveRowLinkLabel,
+  useReactTable: () => import_react_table2.useReactTable,
+  withDefaultCells: () => withDefaultCells
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/boneless-table.tsx
+var import_react_table = require("@tanstack/react-table");
+var import_react_virtual = require("@tanstack/react-virtual");
+var import_react3 = require("react");
+
+// src/column-filter.tsx
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+function ColumnFilter({
+  column,
+  settings,
+  className,
+  icon,
+  debounceMs = 0
+}) {
+  var _a, _b;
+  const value = String((_a = column.getFilterValue()) != null ? _a : "");
+  const [inputValue, setInputValue] = (0, import_react.useState)(value);
+  (0, import_react.useEffect)(() => {
+    setInputValue(value);
+  }, [value]);
+  (0, import_react.useEffect)(() => {
+    if (settings.type !== "text" || inputValue === value) return;
+    if (debounceMs <= 0) {
+      column.setFilterValue(inputValue || void 0);
+      return;
+    }
+    const timer = window.setTimeout(
+      () => column.setFilterValue(inputValue || void 0),
+      debounceMs
+    );
+    return () => window.clearTimeout(timer);
+  }, [column, debounceMs, inputValue, settings.type, value]);
+  if (settings.type === "select") {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "select",
+      {
+        className,
+        "data-slot": "filter-select",
+        "aria-label": `Filter ${column.id}`,
+        value,
+        onChange: (event) => column.setFilterValue(event.target.value || void 0),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: "", children: "All" }),
+          (_b = settings.options) == null ? void 0 : _b.map((option) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: option, children: option }, option))
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { className, "data-slot": "filter-text", children: [
+    icon,
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "input",
+      {
+        "data-slot": "filter-input",
+        "aria-label": `Filter ${column.id}`,
+        value: inputValue,
+        placeholder: "Filter",
+        onChange: (event) => setInputValue(event.target.value)
+      }
+    )
+  ] });
+}
+
+// src/column-menu.tsx
+var import_react2 = require("react");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function ColumnMenu({
+  table,
+  onClose,
+  onMoveColumn,
+  className,
+  icons,
+  id = "boneless-table-column-menu",
+  triggerRef
+}) {
+  var _a;
+  const menuRef = (0, import_react2.useRef)(null);
+  const closeButtonRef = (0, import_react2.useRef)(null);
+  (0, import_react2.useEffect)(() => {
+    var _a2;
+    (_a2 = closeButtonRef.current) == null ? void 0 : _a2.focus();
+    function dismissOnOutsideClick(event) {
+      var _a3, _b;
+      const target = event.target;
+      if (!((_a3 = menuRef.current) == null ? void 0 : _a3.contains(target)) && !((_b = triggerRef == null ? void 0 : triggerRef.current) == null ? void 0 : _b.contains(target))) onClose();
+    }
+    document.addEventListener("mousedown", dismissOnOutsideClick);
+    return () => document.removeEventListener("mousedown", dismissOnOutsideClick);
+  }, [onClose]);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    "div",
+    {
+      className,
+      "data-slot": "column-menu",
+      ref: menuRef,
+      id,
+      role: "dialog",
+      "aria-modal": "false",
+      "aria-labelledby": `${id}-title`,
+      onKeyDown: (event) => {
+        if (event.key === "Escape") {
+          event.preventDefault();
+          onClose();
+        }
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { "data-slot": "column-menu-header", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { id: `${id}-title`, children: "Configure columns" }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            "button",
+            {
+              "data-slot": "column-menu-close",
+              onClick: onClose,
+              "aria-label": "Close column settings",
+              ref: closeButtonRef,
+              children: (_a = icons == null ? void 0 : icons.close) != null ? _a : "Close"
+            }
+          )
+        ] }),
+        table.getAllLeafColumns().map((column) => {
+          var _a2, _b, _c, _d;
+          return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { "data-slot": "column-menu-item", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("label", { "data-slot": "column-menu-label", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                "input",
+                {
+                  type: "checkbox",
+                  checked: column.getIsVisible(),
+                  onChange: column.getToggleVisibilityHandler()
+                }
+              ),
+              (_b = (_a2 = column.columnDef.meta) == null ? void 0 : _a2.columnLabel) != null ? _b : typeof column.columnDef.header === "string" || typeof column.columnDef.header === "number" ? String(column.columnDef.header) : column.id
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { "data-slot": "column-menu-actions", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                "button",
+                {
+                  "data-slot": "column-menu-move-earlier",
+                  onClick: () => onMoveColumn(column.id, -1),
+                  title: "Move column earlier",
+                  children: (_c = icons == null ? void 0 : icons.moveEarlier) != null ? _c : "Earlier"
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                "button",
+                {
+                  "data-slot": "column-menu-move-later",
+                  onClick: () => onMoveColumn(column.id, 1),
+                  title: "Move column later",
+                  children: (_d = icons == null ? void 0 : icons.moveLater) != null ? _d : "Later"
+                }
+              )
+            ] })
+          ] }, column.id);
+        })
+      ]
+    }
+  );
+}
+
+// src/class-names.ts
+function cn(...classNames) {
+  return classNames.filter(Boolean).join(" ");
+}
+
+// src/settings.ts
+var defaultBonelessTableSettings = {
+  columnDefaults: {
+    sizing: { minPx: 120, flex: 1 },
+    align: "left",
+    borders: "none",
+    sorting: { enabled: true, reveal: "hover" }
+  },
+  interactions: { filterReveal: "hover", horizontalOverflow: "auto" }
+};
+function mergeBonelessTableSettings(override, base = defaultBonelessTableSettings) {
+  var _a, _b, _c, _d, _e, _f;
+  if (!override) return base;
+  return {
+    columnDefaults: {
+      sizing: __spreadValues(__spreadValues({}, base.columnDefaults.sizing), (_a = override.columnDefaults) == null ? void 0 : _a.sizing),
+      align: (_c = (_b = override.columnDefaults) == null ? void 0 : _b.align) != null ? _c : base.columnDefaults.align,
+      borders: (_e = (_d = override.columnDefaults) == null ? void 0 : _d.borders) != null ? _e : base.columnDefaults.borders,
+      sorting: __spreadValues(__spreadValues({}, base.columnDefaults.sorting), (_f = override.columnDefaults) == null ? void 0 : _f.sorting)
+    },
+    interactions: __spreadValues(__spreadValues({}, base.interactions), override.interactions)
+  };
+}
+function resolveColumnSettings(settings, column) {
+  var _a, _b, _c;
+  const configured = (_a = column.columnDef.meta) == null ? void 0 : _a.bonelessTable;
+  const configuredSizing = configured == null ? void 0 : configured.sizing;
+  return {
+    sizing: configuredSizing && "widthPx" in configuredSizing ? { widthPx: configuredSizing.widthPx } : __spreadValues(__spreadValues({}, settings.columnDefaults.sizing), configuredSizing),
+    align: (_b = configured == null ? void 0 : configured.align) != null ? _b : settings.columnDefaults.align,
+    borders: (_c = configured == null ? void 0 : configured.borders) != null ? _c : settings.columnDefaults.borders,
+    sorting: __spreadValues(__spreadValues({}, settings.columnDefaults.sorting), configured == null ? void 0 : configured.sorting),
+    filtering: configured == null ? void 0 : configured.filtering,
+    valueDisplay: configured == null ? void 0 : configured.valueDisplay
+  };
+}
+function compactValue(value, settings) {
+  var _a;
+  const text = value == null ? "" : String(value);
+  const display = settings == null ? void 0 : settings.valueDisplay;
+  if (!display || text.length <= display.truncateAt) return text;
+  return `${text.slice(0, display.truncateAt).trimEnd()}${(_a = display.suffix) != null ? _a : "..."}`;
+}
+
+// src/columns.ts
+function defineColumns(columns) {
+  return columns;
+}
+function resolveColumns(columns) {
+  return columns.map((column) => {
+    if ("key" in column && column.key) {
+      const _a = column, { key } = _a, definition = __objRest(_a, ["key"]);
+      return __spreadProps(__spreadValues({}, definition), { accessorKey: key });
+    }
+    return column;
+  });
+}
+function withDefaultCells(columns) {
+  return columns.map((column) => {
+    if (column.cell) return column;
+    return __spreadProps(__spreadValues({}, column), {
+      cell: ({ getValue, column: tableColumn }) => {
+        var _a;
+        const text = compactValue(getValue(), (_a = tableColumn.columnDef.meta) == null ? void 0 : _a.bonelessTable);
+        return text;
+      }
+    });
+  });
+}
+function getColumnIds(columns) {
+  return columns.map((column, index) => {
+    if ("id" in column && column.id) return column.id;
+    if ("key" in column && column.key != null) return String(column.key);
+    if ("accessorKey" in column && column.accessorKey != null) {
+      return String(column.accessorKey);
+    }
+    return String(index);
+  });
+}
+
+// src/table-skeleton.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function TableSkeleton({
+  columnCount,
+  rows,
+  label = "Loading rows",
+  classNames = {}
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { "data-slot": "skeleton", className: classNames.skeleton, "aria-busy": "true", children: Array.from({ length: rows }, (_, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "div",
+    {
+      className: classNames.row,
+      "data-slot": "skeleton-row",
+      role: "status",
+      "aria-label": label,
+      style: { display: "grid", gridTemplateColumns: "var(--boneless-table-grid)" },
+      children: Array.from({ length: columnCount }, (_2, columnIndex) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: cn(classNames.cell), "data-slot": "skeleton-cell", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { "data-slot": "skeleton-line" }) }, columnIndex))
+    },
+    rowIndex
+  )) });
+}
+
+// src/row-link.ts
+function readPath(row, path) {
+  return path.split(".").reduce((value, key) => {
+    if (value === null || typeof value !== "object") return void 0;
+    return value[key];
+  }, row);
+}
+function resolveRowHref(link, row) {
+  if (typeof link.href === "function") return link.href(row);
+  let hasMissingValue = false;
+  const href = link.href.replace(/\{(?:row\.)?([\w.]+)\}/g, (token, path) => {
+    const value = readPath(row, path);
+    if (value === void 0 || value === null) {
+      hasMissingValue = true;
+      return token;
+    }
+    return encodeURIComponent(String(value));
+  });
+  return hasMissingValue ? void 0 : href;
+}
+function resolveRowLinkLabel(link, row) {
+  return typeof link.label === "function" ? link.label(row) : link.label;
+}
+
+// src/boneless-table.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function moveItem(order, id, direction) {
+  const index = order.indexOf(id);
+  const target = index + direction;
+  if (index < 0 || target < 0 || target >= order.length) return order;
+  const next = [...order];
+  [next[index], next[target]] = [next[target], next[index]];
+  return next;
+}
+function renderSlot(slot, table, fallback) {
+  if (slot === false) return null;
+  if (typeof slot === "function") return slot(table);
+  if (slot && slot !== true) return slot;
+  return fallback;
+}
+function BonelessTable(_a) {
+  var _b = _a, {
+    data,
+    columns,
+    settings: settingsOverride,
+    className,
+    classNames = {},
+    icons,
+    tree: treeOption,
+    isLoading = false,
+    isFetchingMore = false,
+    skeletonRows = 8,
+    skeletonLabel = "Loading rows",
+    onNearEnd,
+    canLoadMore = true,
+    nearEndOffset = 220,
+    filterDebounceMs = 150,
+    scroller = "auto",
+    toolbar = true,
+    toolbarLayout,
+    footer = true,
+    totalCount,
+    resultLabel = "rows",
+    resultHint,
+    onReset,
+    onRowClick,
+    scrollToTopOn,
+    rowLink,
+    emptyState,
+    virtualization = {}
+  } = _b, tableOptions = __objRest(_b, [
+    "data",
+    "columns",
+    "settings",
+    "className",
+    "classNames",
+    "icons",
+    "tree",
+    "isLoading",
+    "isFetchingMore",
+    "skeletonRows",
+    "skeletonLabel",
+    "onNearEnd",
+    "canLoadMore",
+    "nearEndOffset",
+    "filterDebounceMs",
+    "scroller",
+    "toolbar",
+    "toolbarLayout",
+    "footer",
+    "totalCount",
+    "resultLabel",
+    "resultHint",
+    "onReset",
+    "onRowClick",
+    "scrollToTopOn",
+    "rowLink",
+    "emptyState",
+    "virtualization"
+  ]);
+  var _a2, _b2, _c, _d, _e, _f, _g, _h, _i, _j, _l, _m, _n, _o, _p, _q, _r, _s;
+  const settings = (0, import_react3.useMemo)(() => mergeBonelessTableSettings(settingsOverride), [settingsOverride]);
+  const resolvedColumns = (0, import_react3.useMemo)(() => withDefaultCells(resolveColumns(columns)), [columns]);
+  const defaultOrder = (0, import_react3.useMemo)(() => getColumnIds(resolvedColumns), [resolvedColumns]);
+  const scrollerRef = (0, import_react3.useRef)(null);
+  const headerScrollerRef = (0, import_react3.useRef)(null);
+  const columnsButtonRef = (0, import_react3.useRef)(null);
+  const nearEndTriggeredRef = (0, import_react3.useRef)(false);
+  const columnMenuId = (0, import_react3.useId)();
+  const [showColumns, setShowColumns] = (0, import_react3.useState)(false);
+  const [headerScrollbarGutter, setHeaderScrollbarGutter] = (0, import_react3.useState)(0);
+  const [sorting, setSorting] = (0, import_react3.useState)((_b2 = (_a2 = tableOptions.initialState) == null ? void 0 : _a2.sorting) != null ? _b2 : []);
+  const [columnFilters, setColumnFilters] = (0, import_react3.useState)(
+    (_d = (_c = tableOptions.initialState) == null ? void 0 : _c.columnFilters) != null ? _d : []
+  );
+  const [columnVisibility, setColumnVisibility] = (0, import_react3.useState)(
+    (_f = (_e = tableOptions.initialState) == null ? void 0 : _e.columnVisibility) != null ? _f : {}
+  );
+  const [columnOrder, setColumnOrder] = (0, import_react3.useState)(
+    (_h = (_g = tableOptions.initialState) == null ? void 0 : _g.columnOrder) != null ? _h : defaultOrder
+  );
+  const [expanded, setExpanded] = (0, import_react3.useState)((_j = (_i = tableOptions.initialState) == null ? void 0 : _i.expanded) != null ? _j : {});
+  const _k = tableOptions, {
+    state: controlledState,
+    onSortingChange,
+    onColumnFiltersChange,
+    onColumnVisibilityChange,
+    onColumnOrderChange,
+    onExpandedChange,
+    getCoreRowModel: getCoreRowModelOption,
+    getSortedRowModel: getSortedRowModelOption,
+    getFilteredRowModel: getFilteredRowModelOption,
+    getSubRows,
+    manualSorting,
+    manualFiltering,
+    initialState
+  } = _k, restTableOptions = __objRest(_k, [
+    "state",
+    "onSortingChange",
+    "onColumnFiltersChange",
+    "onColumnVisibilityChange",
+    "onColumnOrderChange",
+    "onExpandedChange",
+    "getCoreRowModel",
+    "getSortedRowModel",
+    "getFilteredRowModel",
+    "getSubRows",
+    "manualSorting",
+    "manualFiltering",
+    "initialState"
+  ]);
+  (0, import_react3.useEffect)(() => {
+    var _a3;
+    if (scrollToTopOn !== void 0) (_a3 = scrollerRef.current) == null ? void 0 : _a3.scrollTo({ top: 0 });
+  }, [scrollToTopOn]);
+  (0, import_react3.useEffect)(() => {
+    const scroller2 = scrollerRef.current;
+    if (!scroller2) return;
+    const syncHeaderScrollbarGutter = () => {
+      setHeaderScrollbarGutter(Math.max(0, scroller2.offsetWidth - scroller2.clientWidth));
+    };
+    syncHeaderScrollbarGutter();
+    if (typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(syncHeaderScrollbarGutter);
+    observer.observe(scroller2);
+    return () => observer.disconnect();
+  }, []);
+  const table = (0, import_react_table.useReactTable)(__spreadProps(__spreadValues({}, restTableOptions), {
+    data,
+    columns: resolvedColumns,
+    initialState,
+    state: __spreadValues({
+      sorting,
+      columnFilters,
+      columnVisibility,
+      columnOrder,
+      expanded
+    }, controlledState),
+    onSortingChange: onSortingChange != null ? onSortingChange : setSorting,
+    onColumnFiltersChange: onColumnFiltersChange != null ? onColumnFiltersChange : setColumnFilters,
+    onColumnVisibilityChange: onColumnVisibilityChange != null ? onColumnVisibilityChange : setColumnVisibility,
+    onColumnOrderChange: onColumnOrderChange != null ? onColumnOrderChange : setColumnOrder,
+    onExpandedChange: onExpandedChange != null ? onExpandedChange : setExpanded,
+    getCoreRowModel: getCoreRowModelOption != null ? getCoreRowModelOption : (0, import_react_table.getCoreRowModel)(),
+    getSortedRowModel: getSortedRowModelOption != null ? getSortedRowModelOption : manualSorting ? void 0 : (0, import_react_table.getSortedRowModel)(),
+    getFilteredRowModel: getFilteredRowModelOption != null ? getFilteredRowModelOption : manualFiltering ? void 0 : (0, import_react_table.getFilteredRowModel)(),
+    getExpandedRowModel: treeOption ? (0, import_react_table.getExpandedRowModel)() : void 0,
+    getSubRows,
+    manualSorting,
+    manualFiltering
+  }));
+  const visibleColumns = table.getVisibleLeafColumns();
+  const allColumns = table.getAllFlatColumns();
+  const columnSettingsById = (0, import_react3.useMemo)(
+    () => new Map(allColumns.map((column) => [column.id, resolveColumnSettings(settings, column)])),
+    [allColumns, settings]
+  );
+  const getColumnSettings = (column) => {
+    var _a3;
+    return (_a3 = columnSettingsById.get(column.id)) != null ? _a3 : resolveColumnSettings(settings, column);
+  };
+  const grid = visibleColumns.map((column) => {
+    const columnSettings = getColumnSettings(column);
+    if ("widthPx" in columnSettings.sizing) return `${columnSettings.sizing.widthPx}px`;
+    return `minmax(${columnSettings.sizing.minPx}px, ${columnSettings.sizing.flex}fr)`;
+  }).join(" ");
+  const minWidth = visibleColumns.reduce((width, column) => {
+    const { sizing } = getColumnSettings(column);
+    return width + ("widthPx" in sizing ? sizing.widthPx : sizing.minPx);
+  }, 0);
+  const gridStyle = {
+    "--boneless-table-grid": grid,
+    minWidth: `${minWidth}px`
+  };
+  const tree = treeOption === true ? {} : treeOption === false ? void 0 : treeOption;
+  const treeColumnId = (_m = tree == null ? void 0 : tree.columnId) != null ? _m : (_l = visibleColumns[0]) == null ? void 0 : _l.id;
+  const treeIndentPx = (_n = tree == null ? void 0 : tree.indentPx) != null ? _n : 16;
+  const preExpandedRowModel = tree ? table.getPreExpandedRowModel() : void 0;
+  const expandableRows = (0, import_react3.useMemo)(
+    () => {
+      var _a3;
+      return (_a3 = preExpandedRowModel == null ? void 0 : preExpandedRowModel.flatRows.filter((row) => row.getCanExpand())) != null ? _a3 : [];
+    },
+    [preExpandedRowModel]
+  );
+  const allTreeRowsExpanded = (0, import_react3.useMemo)(
+    () => expandableRows.length > 0 && expandableRows.every((row) => row.getIsExpanded()),
+    [expandableRows, expanded]
+  );
+  (0, import_react3.useEffect)(() => {
+    if (!isFetchingMore || !canLoadMore) nearEndTriggeredRef.current = false;
+  }, [canLoadMore, isFetchingMore]);
+  function handleScroll() {
+    const element = scrollerRef.current;
+    if (!element) return;
+    if (headerScrollerRef.current) headerScrollerRef.current.scrollLeft = element.scrollLeft;
+    const isNearEnd = element.scrollHeight - element.scrollTop - element.clientHeight < nearEndOffset;
+    if (!isNearEnd) {
+      nearEndTriggeredRef.current = false;
+      return;
+    }
+    if (!onNearEnd || !canLoadMore || isFetchingMore || nearEndTriggeredRef.current) return;
+    nearEndTriggeredRef.current = true;
+    onNearEnd();
+  }
+  function resetTable() {
+    if (onReset) return onReset();
+    table.resetSorting();
+    table.resetColumnFilters();
+    table.resetColumnVisibility();
+    table.setColumnOrder(defaultOrder);
+    table.resetExpanded();
+  }
+  function moveColumn(id, direction) {
+    const current = table.getState().columnOrder;
+    table.setColumnOrder(moveItem(current.length ? current : defaultOrder, id, direction));
+  }
+  const shown = table.getRowModel().rows.length;
+  const total = totalCount != null ? totalCount : shown;
+  const rows = table.getRowModel().rows;
+  const isVirtualized = scroller === "fill" && virtualization !== false;
+  const rowVirtualizer = (0, import_react_virtual.useVirtualizer)({
+    count: rows.length,
+    getScrollElement: () => scrollerRef.current,
+    estimateSize: () => {
+      var _a3;
+      return virtualization === false ? 58 : (_a3 = virtualization.estimateSize) != null ? _a3 : 58;
+    },
+    overscan: isVirtualized ? (_o = virtualization.overscan) != null ? _o : 5 : 0,
+    enabled: isVirtualized,
+    initialRect: { width: 0, height: 600 }
+  });
+  const estimatedRowSize = virtualization === false ? 58 : (_p = virtualization.estimateSize) != null ? _p : 58;
+  const virtualRows = !isVirtualized ? rows.map((row, index) => ({ index, start: index * 58, key: row.id })) : rowVirtualizer.getVirtualItems().length > 0 ? rowVirtualizer.getVirtualItems() : rows.slice(0, Math.ceil(600 / estimatedRowSize) + ((_q = virtualization.overscan) != null ? _q : 5)).map((row, index) => ({
+    index,
+    start: index * estimatedRowSize,
+    key: row.id
+  }));
+  function closeColumnMenu() {
+    var _a3;
+    setShowColumns(false);
+    (_a3 = columnsButtonRef.current) == null ? void 0 : _a3.focus();
+  }
+  const toolbarSummary = /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: classNames.toolbarSummary, "data-slot": "toolbar-summary", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("strong", { children: total.toLocaleString() }),
+    " ",
+    resultLabel,
+    resultHint ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: classNames.toolbarHint, "data-slot": "toolbar-hint", children: resultHint }) : null
+  ] });
+  const toolbarActions = /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: classNames.toolbarActions, "data-slot": "toolbar-actions", children: [
+    tree && expandableRows.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+      "button",
+      {
+        "data-slot": "tree-toggle-all",
+        onClick: () => table.toggleAllRowsExpanded(!allTreeRowsExpanded),
+        children: [
+          allTreeRowsExpanded ? icons == null ? void 0 : icons.collapse : icons == null ? void 0 : icons.expand,
+          allTreeRowsExpanded ? (_r = tree.collapseAllLabel) != null ? _r : "Collapse all" : (_s = tree.expandAllLabel) != null ? _s : "Expand all"
+        ]
+      }
+    ) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("button", { "data-slot": "reset", onClick: resetTable, title: "Reset table settings", children: [
+      icons == null ? void 0 : icons.reset,
+      "Reset"
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { "data-slot": "column-settings", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+        "button",
+        {
+          "data-slot": "columns-button",
+          onClick: () => setShowColumns((value) => !value),
+          "aria-expanded": showColumns,
+          "aria-haspopup": "dialog",
+          "aria-controls": columnMenuId,
+          ref: columnsButtonRef,
+          children: [
+            icons == null ? void 0 : icons.columns,
+            "Columns"
+          ]
+        }
+      ),
+      showColumns ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        ColumnMenu,
+        {
+          table,
+          onClose: closeColumnMenu,
+          onMoveColumn: moveColumn,
+          className: classNames.columnMenu,
+          icons,
+          id: columnMenuId,
+          triggerRef: columnsButtonRef
+        }
+      ) : null
+    ] })
+  ] });
+  const defaultToolbar = toolbarLayout ? toolbarLayout({ table, summary: toolbarSummary, actions: toolbarActions }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: classNames.toolbar, "data-slot": "toolbar", children: [
+    toolbarSummary,
+    toolbarActions
+  ] });
+  const defaultFooter = /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("footer", { className: classNames.footer, "data-slot": "footer", children: [
+    "Showing ",
+    shown.toLocaleString(),
+    " of ",
+    total.toLocaleString(),
+    " ",
+    resultLabel
+  ] });
+  const rootStyle = scroller === "fill" ? { display: "flex", flexDirection: "column", minHeight: 0 } : void 0;
+  const scrollerStyle = __spreadValues({
+    overflowX: settings.interactions.horizontalOverflow
+  }, scroller === "fill" ? { flex: "1 1 auto", minHeight: 0, overflowY: "auto" } : {});
+  const tableStyle = __spreadValues({
+    "--boneless-table-grid": grid
+  }, scroller === "fill" ? { display: "flex", flexDirection: "column", flex: "1 1 auto", minHeight: 0 } : {});
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: cn(className, classNames.root), "data-slot": "root", style: rootStyle, children: [
+    renderSlot(toolbar, table, defaultToolbar),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+      "div",
+      {
+        className: classNames.table,
+        "data-slot": "table",
+        style: tableStyle,
+        "aria-busy": isLoading || isFetchingMore,
+        role: "table",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            "div",
+            {
+              "data-slot": "header-scroller",
+              ref: headerScrollerRef,
+              style: {
+                flex: "0 0 auto",
+                minWidth: 0,
+                overflow: "hidden",
+                paddingInlineEnd: headerScrollbarGutter || void 0
+              },
+              children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                "div",
+                {
+                  className: classNames.headerGroup,
+                  "data-slot": "header-group",
+                  role: "rowgroup",
+                  style: gridStyle,
+                  children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                    "div",
+                    {
+                      className: classNames.headerRow,
+                      "data-slot": "header-row",
+                      role: "row",
+                      style: { display: "grid", gridTemplateColumns: "var(--boneless-table-grid)" },
+                      children: headerGroup.headers.map((header) => {
+                        var _a3;
+                        const columnSettings = getColumnSettings(header.column);
+                        const direction = header.column.getIsSorted();
+                        const isSortable = !header.isPlaceholder && header.column.getCanSort() && columnSettings.sorting.enabled;
+                        return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+                          "div",
+                          {
+                            className: classNames.header,
+                            "data-slot": "header",
+                            "data-align": columnSettings.align,
+                            "data-borders": columnSettings.borders,
+                            role: "columnheader",
+                            "aria-colspan": header.colSpan > 1 ? header.colSpan : void 0,
+                            "aria-sort": direction === "asc" ? "ascending" : direction === "desc" ? "descending" : isSortable ? "none" : void 0,
+                            style: { gridColumn: `span ${header.colSpan}` },
+                            children: [
+                              header.isPlaceholder ? null : isSortable ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+                                "button",
+                                {
+                                  className: classNames.headerButton,
+                                  "data-align": columnSettings.align,
+                                  "data-slot": "header-button",
+                                  onClick: header.column.getToggleSortingHandler(),
+                                  children: [
+                                    (0, import_react_table.flexRender)(header.column.columnDef.header, header.getContext()),
+                                    (icons == null ? void 0 : icons.sort) ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                                      "span",
+                                      {
+                                        className: classNames.sortIndicator,
+                                        "data-align": columnSettings.align,
+                                        "data-slot": "sort-indicator",
+                                        "data-reveal": columnSettings.sorting.reveal,
+                                        children: icons.sort(direction)
+                                      }
+                                    ) : null
+                                  ]
+                                }
+                              ) : (0, import_react_table.flexRender)(header.column.columnDef.header, header.getContext()),
+                              !header.isPlaceholder && columnSettings.filtering ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                                "div",
+                                {
+                                  className: classNames.filter,
+                                  "data-slot": "filter",
+                                  "data-reveal": (_a3 = columnSettings.filtering.reveal) != null ? _a3 : settings.interactions.filterReveal,
+                                  children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                                    ColumnFilter,
+                                    {
+                                      column: header.column,
+                                      settings: columnSettings.filtering,
+                                      icon: icons == null ? void 0 : icons.search,
+                                      debounceMs: filterDebounceMs
+                                    }
+                                  )
+                                }
+                              ) : null
+                            ]
+                          },
+                          header.id
+                        );
+                      })
+                    },
+                    headerGroup.id
+                  ))
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+            "div",
+            {
+              className: classNames.scroller,
+              "data-slot": "scroller",
+              ref: scrollerRef,
+              onScroll: handleScroll,
+              style: scrollerStyle,
+              children: [
+                isLoading ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                  TableSkeleton,
+                  {
+                    columnCount: visibleColumns.length,
+                    rows: skeletonRows,
+                    label: skeletonLabel,
+                    classNames
+                  }
+                ) : rows.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: classNames.emptyState, "data-slot": "empty-state", role: "status", children: emptyState ? typeof emptyState === "function" ? emptyState(table) : emptyState : table.getState().columnFilters.length > 0 ? "No rows match the current filters." : "No rows to display." }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                  "div",
+                  {
+                    className: classNames.rowGroup,
+                    "data-slot": "row-group",
+                    style: __spreadProps(__spreadValues({}, gridStyle), {
+                      height: `${isVirtualized ? rowVirtualizer.getTotalSize() : "auto"}`,
+                      position: "relative"
+                    }),
+                    role: "rowgroup",
+                    children: virtualRows.map((virtualRow) => {
+                      var _a3;
+                      const row = rows[virtualRow.index];
+                      const href = rowLink ? resolveRowHref(rowLink, row.original) : void 0;
+                      const RowLink = rowLink == null ? void 0 : rowLink.component;
+                      const rowContent = /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                        "div",
+                        {
+                          className: classNames.row,
+                          "data-slot": "row",
+                          role: "row",
+                          style: { display: "grid", gridTemplateColumns: "var(--boneless-table-grid)" },
+                          tabIndex: onRowClick && !href ? 0 : void 0,
+                          onClick: (event) => onRowClick == null ? void 0 : onRowClick(row.original, event),
+                          onKeyDown: (event) => {
+                            if (!onRowClick || href || event.key !== "Enter" && event.key !== " ")
+                              return;
+                            event.preventDefault();
+                            onRowClick(row.original, event);
+                          },
+                          children: row.getVisibleCells().map((cell) => {
+                            var _a4, _b3, _c2;
+                            const columnSettings = getColumnSettings(cell.column);
+                            const title = columnSettings.valueDisplay != null ? String((_a4 = cell.getValue()) != null ? _a4 : "") : void 0;
+                            const isTreeCell = Boolean(tree && cell.column.id === treeColumnId);
+                            const canExpand = row.getCanExpand();
+                            const cellContent = (0, import_react_table.flexRender)(cell.column.columnDef.cell, cell.getContext());
+                            return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                              "div",
+                              {
+                                className: classNames.cell,
+                                "data-slot": "cell",
+                                "data-align": columnSettings.align,
+                                "data-borders": columnSettings.borders,
+                                role: "cell",
+                                title,
+                                children: isTreeCell ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+                                  "div",
+                                  {
+                                    "data-slot": "tree-content",
+                                    style: { paddingInlineStart: `${row.depth * treeIndentPx}px` },
+                                    children: [
+                                      canExpand ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                                        "button",
+                                        {
+                                          "data-slot": "tree-row-toggle",
+                                          type: "button",
+                                          "aria-expanded": row.getIsExpanded(),
+                                          "aria-label": `${row.getIsExpanded() ? "Collapse" : "Expand"} row`,
+                                          onClick: (event) => {
+                                            event.stopPropagation();
+                                            row.toggleExpanded();
+                                          },
+                                          children: row.getIsExpanded() ? (_b3 = icons == null ? void 0 : icons.collapse) != null ? _b3 : "\u2212" : (_c2 = icons == null ? void 0 : icons.expand) != null ? _c2 : "+"
+                                        }
+                                      ) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { "data-slot": "tree-row-toggle-spacer", "aria-hidden": "true" }),
+                                      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { "data-slot": "tree-value", children: cellContent })
+                                    ]
+                                  }
+                                ) : cellContent
+                              },
+                              cell.id
+                            );
+                          })
+                        }
+                      );
+                      const rowStyle = !isVirtualized ? void 0 : {
+                        position: "absolute",
+                        top: 0,
+                        left: 0,
+                        width: "100%",
+                        transform: `translateY(${virtualRow.start}px)`
+                      };
+                      if (!href || !rowLink || !RowLink || tree && row.getCanExpand())
+                        return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                          "div",
+                          {
+                            "data-index": isVirtualized ? virtualRow.index : void 0,
+                            ref: isVirtualized ? rowVirtualizer.measureElement : void 0,
+                            style: rowStyle,
+                            children: rowContent
+                          },
+                          row.id
+                        );
+                      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                        "div",
+                        {
+                          "data-index": isVirtualized ? virtualRow.index : void 0,
+                          ref: isVirtualized ? rowVirtualizer.measureElement : void 0,
+                          style: rowStyle,
+                          children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                            RowLink,
+                            {
+                              className: (_a3 = classNames.rowLink) != null ? _a3 : "",
+                              href,
+                              "aria-label": resolveRowLinkLabel(rowLink, row.original),
+                              target: rowLink.target,
+                              rel: rowLink.rel,
+                              children: rowContent
+                            }
+                          )
+                        },
+                        row.id
+                      );
+                    })
+                  }
+                ),
+                isFetchingMore ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                  TableSkeleton,
+                  {
+                    columnCount: visibleColumns.length,
+                    rows: 3,
+                    label: skeletonLabel,
+                    classNames
+                  }
+                ) : null
+              ]
+            }
+          )
+        ]
+      }
+    ),
+    renderSlot(footer, table, defaultFooter)
+  ] });
+}
+
+// src/index.ts
+var import_react_table2 = require("@tanstack/react-table");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  BonelessTable,
+  ColumnFilter,
+  ColumnMenu,
+  TableSkeleton,
+  compactValue,
+  createColumnHelper,
+  defaultBonelessTableSettings,
+  defineColumns,
+  flexRender,
+  getColumnIds,
+  getCoreRowModel,
+  getExpandedRowModel,
+  getFilteredRowModel,
+  getSortedRowModel,
+  mergeBonelessTableSettings,
+  resolveColumnSettings,
+  resolveColumns,
+  resolveRowHref,
+  resolveRowLinkLabel,
+  useReactTable,
+  withDefaultCells
+});
+//# sourceMappingURL=index.js.map