@adapttable/mui 0.1.0

package/dist/index.js

@@ -0,0 +1,1884 @@
+import { rowClickProps, resolveDisabledReason, runRowAction, useSavedViews, useTableChrome, useFilterTriggerToggle, useChromeScrollReset, useChromeBodyData, useTableData, isDeclarativeFilters, resolveLabels, ACTIONS_COLUMN_KEY, useColumnDragState, columnMenuRows, GripIcon, columnReorderKeyProps, nextPinSide, pinActionLabel, resolveVirtualRows, tableRenderModel, headerGroupRow, useHorizontalOverflow, PIN_Z, pinnedCellStyle, tableMinWidth, columnResizeHandleProps, pageSizeOptions, useBulkActionRunner, EyeIcon, PinIcon, edgePinStyle, pinnedColumnWidth, RANGE_SUFFIXES, RANGE_OP_LABEL_KEYS, readRangeWidget, filterLabel, RANGE_OPS, useFilterOptions, writeRangeWidget } from '@adapttable/core';
+export { createHistoryAdapter, createMemoryAdapter, defaultConfirm, defaultLabels, deriveSortByOptions, getHistoryAdapter, useBackendData, useDataTable, useFrontendData, useSavedViews, useTableUrlState } from '@adapttable/core';
+import { TableRow, TableCell, Checkbox, IconButton, Stack, Tooltip, Typography, Box, Button, Popover, Divider, TextField, Paper, LinearProgress, Skeleton, Card, CardContent, Table, TableHead, TableSortLabel, TableBody, TableFooter, Badge, InputAdornment, MenuItem, Chip, Alert, Pagination, Drawer, Popper, ClickAwayListener, FormControl, FormLabel, FormGroup, CircularProgress, FormControlLabel } from '@mui/material';
+import { memo, useState, useRef, useMemo, useCallback, useEffect } from 'react';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+
+// src/components/SavedViewsMenu.tsx
+function SavedViewsMenu({
+  options,
+  labels
+}) {
+  const { views, save, apply, remove } = useSavedViews(options);
+  const [anchor, setAnchor] = useState(null);
+  const [name, setName] = useState("");
+  const trimmed = name.trim();
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        size: "small",
+        variant: "outlined",
+        "aria-expanded": anchor !== null,
+        "aria-haspopup": "true",
+        onClick: (e) => setAnchor(e.currentTarget),
+        children: labels.savedViews
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Popover,
+      {
+        anchorEl: anchor,
+        open: anchor !== null,
+        onClose: () => setAnchor(null),
+        anchorOrigin: { vertical: "bottom", horizontal: "left" },
+        children: /* @__PURE__ */ jsxs(Box, { sx: { p: 0.75, minWidth: 250 }, children: [
+          views.map((view) => /* @__PURE__ */ jsxs(
+            Stack,
+            {
+              direction: "row",
+              alignItems: "center",
+              spacing: 0.5,
+              children: [
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    size: "small",
+                    fullWidth: true,
+                    sx: { justifyContent: "flex-start" },
+                    onClick: () => {
+                      apply(view.name);
+                      setAnchor(null);
+                    },
+                    children: view.name
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  IconButton,
+                  {
+                    size: "small",
+                    "aria-label": `${labels.deleteView}: ${view.name}`,
+                    onClick: () => remove(view.name),
+                    children: "\xD7"
+                  }
+                )
+              ]
+            },
+            view.name
+          )),
+          /* @__PURE__ */ jsx(Divider, { sx: { my: 0.5 } }),
+          /* @__PURE__ */ jsxs(Stack, { direction: "row", alignItems: "center", spacing: 0.5, children: [
+            /* @__PURE__ */ jsx(
+              TextField,
+              {
+                size: "small",
+                value: name,
+                placeholder: labels.viewName,
+                slotProps: { htmlInput: { "aria-label": labels.viewName } },
+                onChange: (e) => setName(e.target.value)
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                size: "small",
+                variant: "contained",
+                disabled: trimmed === "",
+                onClick: () => {
+                  save(trimmed);
+                  setName("");
+                },
+                children: labels.saveView
+              }
+            )
+          ] })
+        ] })
+      }
+    )
+  ] });
+}
+function scalarText(value) {
+  return typeof value === "string" || typeof value === "number" ? String(value) : "";
+}
+function selectedList(value) {
+  return Array.isArray(value) ? value : [];
+}
+function TextFilter({ def, source }) {
+  return /* @__PURE__ */ jsx(
+    TextField,
+    {
+      size: "small",
+      label: filterLabel(def),
+      placeholder: def.placeholder,
+      value: scalarText(source.extra[def.key]),
+      onChange: (e) => source.setExtra(def.key, e.target.value)
+    }
+  );
+}
+function SelectFilter({ def, source }) {
+  const { options, loading } = useFilterOptions(def);
+  return /* @__PURE__ */ jsxs(
+    TextField,
+    {
+      select: true,
+      size: "small",
+      label: filterLabel(def),
+      value: scalarText(source.extra[def.key]),
+      onChange: (e) => source.setExtra(def.key, e.target.value),
+      slotProps: {
+        select: { native: true },
+        inputLabel: { shrink: true }
+      },
+      children: [
+        /* @__PURE__ */ jsx("option", { value: "", children: "All" }),
+        loading && /* @__PURE__ */ jsx("option", { value: "", disabled: true, children: "\u2026" }),
+        options.map((option) => /* @__PURE__ */ jsx("option", { value: option.value, children: option.label }, option.value))
+      ]
+    }
+  );
+}
+function MultiSelectFilter({ def, source }) {
+  const { options, loading } = useFilterOptions(def);
+  const checked = selectedList(source.extra[def.key]);
+  const toggle = (value, on) => {
+    const next = on ? [...checked, value] : checked.filter((v) => v !== value);
+    source.setExtra(def.key, next);
+  };
+  return /* @__PURE__ */ jsxs(FormControl, { component: "fieldset", variant: "standard", children: [
+    /* @__PURE__ */ jsx(FormLabel, { component: "legend", children: filterLabel(def) }),
+    /* @__PURE__ */ jsx(FormGroup, { row: true, sx: { columnGap: 1.5 }, children: loading ? /* @__PURE__ */ jsx(CircularProgress, { size: 16 }) : options.map((option) => /* @__PURE__ */ jsx(
+      FormControlLabel,
+      {
+        label: option.label,
+        control: /* @__PURE__ */ jsx(
+          Checkbox,
+          {
+            size: "small",
+            checked: checked.includes(option.value),
+            onChange: (_, on) => toggle(option.value, on)
+          }
+        )
+      },
+      option.value
+    )) })
+  ] });
+}
+function RangeFilter({
+  def,
+  type,
+  source,
+  labels
+}) {
+  const suffixes = RANGE_SUFFIXES[type];
+  const lowKey = def.key + suffixes.start;
+  const highKey = def.key + suffixes.end;
+  const opLabelKeys = RANGE_OP_LABEL_KEYS[type === "dateRange" ? "date" : "number"];
+  const state = readRangeWidget(source.extra, lowKey, highKey);
+  const [op, setOp] = useState(state.op);
+  const single = op === "lte" ? state.b : state.a;
+  const commit = (next, a, b) => source.setExtras(writeRangeWidget(next, a, b, lowKey, highKey));
+  const changeOp = (raw) => {
+    const next = RANGE_OPS.find((candidate) => candidate === raw);
+    setOp(next);
+    commit(next, single, op === "between" ? state.b : "");
+  };
+  const input = (label, value, write) => /* @__PURE__ */ jsx(
+    TextField,
+    {
+      size: "small",
+      sx: { flex: "1 1 7rem", minWidth: "7rem" },
+      type: type === "dateRange" ? "date" : "number",
+      label,
+      value,
+      onChange: (e) => write(e.target.value),
+      slotProps: { inputLabel: { shrink: true } }
+    }
+  );
+  let bounds = null;
+  if (op === "between") {
+    bounds = /* @__PURE__ */ jsxs(Fragment, { children: [
+      input(labels.from, state.a, (raw) => commit("between", raw, state.b)),
+      input(labels.to, state.b, (raw) => commit("between", state.a, raw))
+    ] });
+  } else if (op !== void 0) {
+    bounds = input(labels.value, single, (raw) => commit(op, raw, ""));
+  }
+  return /* @__PURE__ */ jsxs(FormControl, { component: "fieldset", variant: "standard", sx: { width: "100%" }, children: [
+    /* @__PURE__ */ jsx(FormLabel, { component: "legend", sx: { mb: 0.75 }, children: filterLabel(def) }),
+    /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 1, useFlexGap: true, flexWrap: "wrap", children: [
+      /* @__PURE__ */ jsxs(
+        TextField,
+        {
+          select: true,
+          size: "small",
+          label: labels.operator,
+          value: op ?? "",
+          onChange: (e) => changeOp(e.target.value),
+          slotProps: {
+            select: { native: true },
+            inputLabel: { shrink: true }
+          },
+          sx: { flex: "0 0 8.5rem", width: "8.5rem" },
+          children: [
+            /* @__PURE__ */ jsx("option", { value: "" }),
+            RANGE_OPS.map((candidate) => /* @__PURE__ */ jsx("option", { value: candidate, children: labels[opLabelKeys[candidate]] }, candidate))
+          ]
+        }
+      ),
+      bounds
+    ] })
+  ] });
+}
+function FilterField({
+  def,
+  source,
+  labels
+}) {
+  switch (def.type) {
+    case "text":
+      return /* @__PURE__ */ jsx(TextFilter, { def, source });
+    case "select":
+      return /* @__PURE__ */ jsx(SelectFilter, { def, source });
+    case "multiSelect":
+      return /* @__PURE__ */ jsx(MultiSelectFilter, { def, source });
+    case "dateRange":
+    case "numberRange":
+      return /* @__PURE__ */ jsx(
+        RangeFilter,
+        {
+          def,
+          type: def.type,
+          source,
+          labels
+        }
+      );
+  }
+}
+function AutoFilterForm({
+  defs,
+  source,
+  labels
+}) {
+  return /* @__PURE__ */ jsx(Stack, { spacing: 1.5, children: defs.map((def) => /* @__PURE__ */ jsx(FilterField, { def, source, labels }, def.key)) });
+}
+function FilterPopover({
+  open,
+  onClose,
+  anchorEl,
+  filters,
+  activeFilterCount,
+  onClearFilters,
+  labels,
+  dir = "ltr"
+}) {
+  useEffect(() => {
+    if (!open) return;
+    const onKeyDown = (event) => {
+      if (event.key === "Escape") onClose();
+    };
+    document.addEventListener("keydown", onKeyDown);
+    return () => document.removeEventListener("keydown", onKeyDown);
+  }, [open, onClose]);
+  return /* @__PURE__ */ jsx(
+    Popper,
+    {
+      open: open && anchorEl !== null,
+      anchorEl,
+      placement: dir === "rtl" ? "bottom-start" : "bottom-end",
+      modifiers: [{ name: "offset", options: { offset: [0, 4] } }],
+      style: { zIndex: 1300 },
+      children: /* @__PURE__ */ jsx(ClickAwayListener, { mouseEvent: "onMouseDown", onClickAway: onClose, children: /* @__PURE__ */ jsx(
+        Paper,
+        {
+          elevation: 8,
+          sx: {
+            width: 360,
+            maxWidth: "calc(100vw - 32px)",
+            borderRadius: 2
+          },
+          children: /* @__PURE__ */ jsxs(Box, { sx: { p: 2, display: "flex", flexDirection: "column", gap: 2 }, children: [
+            /* @__PURE__ */ jsxs(
+              Stack,
+              {
+                direction: "row",
+                justifyContent: "space-between",
+                alignItems: "center",
+                children: [
+                  /* @__PURE__ */ jsx(Typography, { variant: "subtitle1", fontWeight: 600, children: labels.filters }),
+                  /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      size: "small",
+                      onClick: onClearFilters,
+                      disabled: activeFilterCount === 0,
+                      children: labels.clearAll
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx(Box, { sx: { display: "flex", flexDirection: "column", gap: 2 }, children: filters })
+          ] })
+        }
+      ) })
+    }
+  );
+}
+function FiltersIcon() {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width: "16",
+      height: "16",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.8",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx("path", { d: "M3 5h18l-7 8v5l-4 2v-7L3 5Z" })
+    }
+  );
+}
+function SearchIcon() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: "18",
+      height: "18",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.8",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsx("circle", { cx: "11", cy: "11", r: "7" }),
+        /* @__PURE__ */ jsx("path", { d: "m21 21-4.3-4.3" })
+      ]
+    }
+  );
+}
+var srOnly = {
+  position: "absolute",
+  width: 1,
+  height: 1,
+  padding: 0,
+  margin: -1,
+  overflow: "hidden",
+  clip: "rect(0 0 0 0)",
+  whiteSpace: "nowrap",
+  border: 0
+};
+function Toolbar({
+  table,
+  hideSearch,
+  searchPlaceholder,
+  sortByOptions,
+  customToolbar,
+  hasFilters,
+  activeFilterCount,
+  showRowsPerPage,
+  filtersMode,
+  filters,
+  filtersOpen,
+  onToggleFilters,
+  onFiltersTriggerPointerDown,
+  onCloseFilters,
+  onClearFilters,
+  dir,
+  columnMenu
+}) {
+  const { labels, source } = table;
+  const sortOptions = sortByOptions ?? (table.isMobile ? table.sortByOptions : void 0);
+  const searchProps = table.getSearchInputProps(
+    searchPlaceholder ? { placeholder: searchPlaceholder } : void 0
+  );
+  const filtersAnchorRef = useRef(null);
+  const filtersButton = hasFilters ? /* @__PURE__ */ jsx(Badge, { color: "primary", badgeContent: activeFilterCount, children: /* @__PURE__ */ jsx(
+    Button,
+    {
+      ref: filtersAnchorRef,
+      variant: "outlined",
+      size: "small",
+      startIcon: /* @__PURE__ */ jsx(FiltersIcon, {}),
+      "aria-expanded": filtersMode === "popover" ? filtersOpen : void 0,
+      onPointerDown: onFiltersTriggerPointerDown,
+      onClick: onToggleFilters,
+      children: labels.filters
+    }
+  ) }) : null;
+  return /* @__PURE__ */ jsxs(
+    Stack,
+    {
+      direction: "row",
+      spacing: 1,
+      flexWrap: "wrap",
+      useFlexGap: true,
+      alignItems: "center",
+      justifyContent: "space-between",
+      children: [
+        !hideSearch && /* @__PURE__ */ jsx(
+          TextField,
+          {
+            size: "small",
+            value: searchProps.value,
+            placeholder: searchProps.placeholder,
+            slotProps: {
+              htmlInput: { "aria-label": labels.search, type: "search" },
+              input: {
+                startAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "start", children: /* @__PURE__ */ jsx(SearchIcon, {}) })
+              }
+            },
+            onChange: searchProps.onChange,
+            sx: { flex: 1, minWidth: 160, maxWidth: 360 }
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          Stack,
+          {
+            direction: "row",
+            spacing: 1,
+            alignItems: "center",
+            flexWrap: "wrap",
+            useFlexGap: true,
+            children: [
+              sortOptions && sortOptions.length > 0 && /* @__PURE__ */ jsxs(
+                TextField,
+                {
+                  select: true,
+                  size: "small",
+                  label: labels.sortBy,
+                  value: source.sortBy ?? "",
+                  onChange: (e) => source.setSort(
+                    e.target.value || void 0,
+                    source.sortDir ?? "asc"
+                  ),
+                  sx: { minWidth: 160 },
+                  children: [
+                    /* @__PURE__ */ jsx(MenuItem, { value: "", children: "\u2014" }),
+                    sortOptions.map((o) => /* @__PURE__ */ jsx(MenuItem, { value: o.value, children: o.label }, o.value))
+                  ]
+                }
+              ),
+              customToolbar,
+              filtersButton,
+              hasFilters && filtersMode === "popover" && /* @__PURE__ */ jsx(
+                FilterPopover,
+                {
+                  open: filtersOpen,
+                  onClose: onCloseFilters,
+                  anchorEl: filtersAnchorRef.current,
+                  filters,
+                  activeFilterCount,
+                  onClearFilters,
+                  labels,
+                  dir
+                }
+              ),
+              columnMenu,
+              showRowsPerPage && /* @__PURE__ */ jsx(
+                TextField,
+                {
+                  select: true,
+                  size: "small",
+                  label: labels.rowsPerPage,
+                  value: source.limit,
+                  onChange: (e) => source.setLimit(Number(e.target.value)),
+                  sx: { minWidth: 110 },
+                  children: pageSizeOptions(source.limit).map((n) => /* @__PURE__ */ jsx(MenuItem, { value: n, children: n }, n))
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function Chips({
+  chips,
+  onClearAll,
+  labels
+}) {
+  if (chips.length === 0) return null;
+  return /* @__PURE__ */ jsxs(
+    Stack,
+    {
+      direction: "row",
+      spacing: 0.5,
+      flexWrap: "wrap",
+      useFlexGap: true,
+      component: "ul",
+      sx: { listStyle: "none", p: 0, m: 0 },
+      "aria-label": labels.filters,
+      children: [
+        chips.map((chip) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+          Chip,
+          {
+            label: chip.label,
+            size: "small",
+            onDelete: chip.onRemove,
+            deleteIcon: /* @__PURE__ */ jsx("span", { "aria-label": `${labels.clearAll}: ${chip.label}`, children: "\xD7" })
+          }
+        ) }, chip.key)),
+        /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(Button, { size: "small", onClick: onClearAll, children: labels.clearAll }) })
+      ]
+    }
+  );
+}
+function BulkBar({
+  selection,
+  total,
+  bulkActions,
+  confirm,
+  labels
+}) {
+  const {
+    selectedIds,
+    selectedCount,
+    headerState,
+    visibleIds,
+    allMatching,
+    selectAllMatching,
+    clear
+  } = selection;
+  const { pending, run } = useBulkActionRunner({
+    confirm,
+    cancelLabel: labels.cancel,
+    onComplete: clear
+  });
+  if (selectedCount === 0) return null;
+  const ids = [...selectedIds];
+  const showBanner = headerState === "all" && total > visibleIds.length;
+  return /* @__PURE__ */ jsxs(
+    Stack,
+    {
+      direction: "row",
+      spacing: 1,
+      alignItems: "center",
+      justifyContent: "space-between",
+      flexWrap: "wrap",
+      useFlexGap: true,
+      children: [
+        /* @__PURE__ */ jsxs(
+          Stack,
+          {
+            direction: "row",
+            spacing: 1,
+            alignItems: "center",
+            flexWrap: "wrap",
+            useFlexGap: true,
+            children: [
+              /* @__PURE__ */ jsx(Typography, { variant: "body2", children: labels.selectedCount(selectedCount) }),
+              showBanner && (allMatching ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", children: labels.allMatchingSelected(total) }),
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    size: "small",
+                    variant: "text",
+                    onClick: clear,
+                    disabled: pending !== null,
+                    children: labels.clearAll
+                  }
+                )
+              ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", children: labels.pageSelected(visibleIds.length) }),
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    size: "small",
+                    variant: "text",
+                    onClick: selectAllMatching,
+                    disabled: pending !== null,
+                    children: labels.selectAllMatching(total)
+                  }
+                )
+              ] }))
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 1, flexWrap: "wrap", useFlexGap: true, children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              size: "small",
+              variant: "text",
+              onClick: clear,
+              disabled: pending !== null,
+              children: labels.clearAll
+            }
+          ),
+          bulkActions.map((action) => {
+            const reason = resolveDisabledReason(action.disabledReason?.(ids));
+            return /* @__PURE__ */ jsx(Tooltip, { title: reason ?? "", children: /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(
+              Button,
+              {
+                size: "small",
+                variant: "contained",
+                color: action.color,
+                startIcon: action.icon,
+                disabled: reason !== void 0 || pending !== null,
+                onClick: () => run(
+                  action,
+                  ids,
+                  allMatching ? { allMatching: true, total } : void 0
+                ),
+                children: action.label
+              }
+            ) }) }, action.key);
+          })
+        ] })
+      ]
+    }
+  );
+}
+function Footer({
+  pagination,
+  total,
+  limit,
+  setPage,
+  setLimit,
+  labels
+}) {
+  return /* @__PURE__ */ jsxs(
+    Stack,
+    {
+      direction: "row",
+      spacing: 2,
+      alignItems: "center",
+      justifyContent: "space-between",
+      flexWrap: "wrap",
+      useFlexGap: true,
+      children: [
+        /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 1.5, alignItems: "center", useFlexGap: true, children: [
+          /* @__PURE__ */ jsx(
+            TextField,
+            {
+              select: true,
+              size: "small",
+              label: labels.rowsPerPage,
+              value: String(limit),
+              onChange: (e) => setLimit(Number(e.target.value)),
+              sx: { minWidth: 100 },
+              children: pageSizeOptions(limit).map((n) => /* @__PURE__ */ jsx(MenuItem, { value: String(n), children: n }, n))
+            }
+          ),
+          total > 0 && /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.secondary", children: labels.showing({
+            from: pagination.fromIndex,
+            to: pagination.toIndex,
+            total
+          }) })
+        ] }),
+        /* @__PURE__ */ jsx(
+          Pagination,
+          {
+            count: pagination.totalPages,
+            page: pagination.safePage,
+            onChange: (_, page) => setPage(page),
+            size: "small",
+            getItemAriaLabel: (type, page) => {
+              if (type === "page") return labels.goToPage(page);
+              return type === "previous" ? labels.previousPage : labels.nextPage;
+            }
+          }
+        )
+      ]
+    }
+  );
+}
+function ErrorState({
+  error,
+  labels,
+  onRetry
+}) {
+  return /* @__PURE__ */ jsxs(
+    Alert,
+    {
+      severity: "error",
+      action: onRetry ? /* @__PURE__ */ jsx(Button, { color: "inherit", size: "small", onClick: onRetry, children: labels.retry }) : void 0,
+      children: [
+        /* @__PURE__ */ jsx("strong", { children: labels.errorTitle }),
+        " \u2014 ",
+        error.message
+      ]
+    }
+  );
+}
+function LoadingState({
+  rows,
+  columns,
+  loadingLabel
+}) {
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      role: "status",
+      "aria-busy": "true",
+      "aria-live": "polite",
+      "data-testid": "adapttable-loading",
+      children: [
+        Array.from({ length: rows }, (_, r) => /* @__PURE__ */ jsx(Stack, { direction: "row", spacing: 2, sx: { py: 1 }, children: Array.from({ length: Math.max(columns, 1) }, (_2, c) => /* @__PURE__ */ jsx(Skeleton, { variant: "text", width: c === 0 ? "30%" : "20%" }, c)) }, r)),
+        loadingLabel ? /* @__PURE__ */ jsx(Box, { component: "span", sx: srOnly, children: loadingLabel }) : null
+      ]
+    }
+  );
+}
+function FilterDrawer({
+  open,
+  onClose,
+  filters,
+  activeFilterCount,
+  onClearFilters,
+  labels,
+  dir = "ltr"
+}) {
+  return /* @__PURE__ */ jsx(
+    Drawer,
+    {
+      anchor: dir === "rtl" ? "left" : "right",
+      open,
+      onClose,
+      children: /* @__PURE__ */ jsxs(
+        Box,
+        {
+          sx: {
+            width: 360,
+            p: 2,
+            display: "flex",
+            flexDirection: "column",
+            gap: 2,
+            height: "100%"
+          },
+          children: [
+            /* @__PURE__ */ jsx(Typography, { variant: "h6", children: labels.filters }),
+            /* @__PURE__ */ jsx(Box, { sx: { flex: 1, display: "flex", flexDirection: "column", gap: 2 }, children: filters }),
+            /* @__PURE__ */ jsxs(Stack, { direction: "row", justifyContent: "space-between", children: [
+              /* @__PURE__ */ jsx(Button, { onClick: onClearFilters, disabled: activeFilterCount === 0, children: labels.clearAll }),
+              /* @__PURE__ */ jsx(Button, { variant: "contained", onClick: onClose, children: labels.applyFilters })
+            ] })
+          ]
+        }
+      )
+    }
+  );
+}
+function VisibilityToggle({
+  hidden,
+  name,
+  labels,
+  onToggle
+}) {
+  return /* @__PURE__ */ jsx(
+    IconButton,
+    {
+      size: "small",
+      "aria-label": `${hidden ? labels.showColumn : labels.hideColumn}: ${name}`,
+      "aria-pressed": !hidden,
+      color: hidden ? "default" : "primary",
+      onClick: onToggle,
+      children: /* @__PURE__ */ jsx(EyeIcon, { off: hidden })
+    }
+  );
+}
+function RowName({
+  hidden,
+  name
+}) {
+  return /* @__PURE__ */ jsx(
+    Typography,
+    {
+      variant: "body2",
+      sx: {
+        flex: 1,
+        color: hidden ? "text.disabled" : "text.primary",
+        textDecoration: hidden ? "line-through" : "none"
+      },
+      children: name
+    }
+  );
+}
+function PinToggle({
+  active,
+  label,
+  onClick
+}) {
+  return /* @__PURE__ */ jsx(
+    IconButton,
+    {
+      size: "small",
+      color: active ? "primary" : "default",
+      "aria-label": label,
+      onClick,
+      children: /* @__PURE__ */ jsx(PinIcon, {})
+    }
+  );
+}
+function ActionsRow({
+  layout,
+  labels
+}) {
+  const hidden = layout.isHidden(ACTIONS_COLUMN_KEY);
+  const pinned = layout.state.pinned[ACTIONS_COLUMN_KEY] === "right";
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Divider, { sx: { my: 0.5 } }),
+    /* @__PURE__ */ jsxs(
+      Stack,
+      {
+        direction: "row",
+        alignItems: "center",
+        spacing: 0.5,
+        sx: { px: 0.5, py: 0.25 },
+        children: [
+          /* @__PURE__ */ jsx(Box, { "aria-hidden": true, sx: { width: 24 } }),
+          /* @__PURE__ */ jsx(
+            VisibilityToggle,
+            {
+              hidden,
+              name: labels.actions,
+              labels,
+              onToggle: () => layout.toggleVisible(ACTIONS_COLUMN_KEY)
+            }
+          ),
+          /* @__PURE__ */ jsx(RowName, { hidden, name: labels.actions }),
+          /* @__PURE__ */ jsx(
+            PinToggle,
+            {
+              active: pinned,
+              label: `${pinned ? labels.unpin : labels.pinRight}: ${labels.actions}`,
+              onClick: () => layout.setPinned(ACTIONS_COLUMN_KEY, pinned ? void 0 : "right")
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+function ColumnMenu({
+  allColumns,
+  layout,
+  labels,
+  hasRowActions
+}) {
+  const drag = useColumnDragState();
+  const [anchor, setAnchor] = useState(null);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        size: "small",
+        variant: "outlined",
+        "aria-expanded": anchor !== null,
+        "aria-haspopup": "true",
+        onClick: (e) => setAnchor(e.currentTarget),
+        children: labels.columns
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Popover,
+      {
+        anchorEl: anchor,
+        open: anchor !== null,
+        onClose: () => setAnchor(null),
+        anchorOrigin: { vertical: "bottom", horizontal: "left" },
+        children: /* @__PURE__ */ jsxs(Box, { sx: { p: 0.75, minWidth: 250 }, children: [
+          /* @__PURE__ */ jsx(
+            Typography,
+            {
+              variant: "caption",
+              sx: {
+                display: "block",
+                px: 1,
+                pb: 0.5,
+                fontWeight: 600,
+                textTransform: "uppercase",
+                letterSpacing: "0.06em",
+                color: "text.secondary"
+              },
+              children: labels.columns
+            }
+          ),
+          columnMenuRows(allColumns, layout).map((r) => {
+            const indicator = drag.rowAttrs(r.key, r.index);
+            const edge = indicator["data-drop"];
+            const edgeOffset = edge === "before" ? "2px" : "-2px";
+            return /* @__PURE__ */ jsxs(
+              Stack,
+              {
+                direction: "row",
+                alignItems: "center",
+                spacing: 0.5,
+                sx: {
+                  px: 0.5,
+                  py: 0.25,
+                  cursor: "grab",
+                  opacity: "data-dragging" in indicator ? 0.4 : void 0,
+                  boxShadow: edge ? (theme) => `inset 0 ${edgeOffset} 0 0 ${theme.palette.primary.main}` : void 0
+                },
+                ...drag.rowDragProps(r.key, r.index),
+                ...drag.dropProps(r.index, layout.move),
+                ...indicator,
+                children: [
+                  /* @__PURE__ */ jsx(
+                    IconButton,
+                    {
+                      size: "small",
+                      sx: { cursor: "grab", color: "text.disabled" },
+                      ...columnReorderKeyProps(
+                        r.key,
+                        r.index,
+                        layout.move,
+                        `${labels.moveLeft} / ${labels.moveRight}: ${r.name}`
+                      ),
+                      children: /* @__PURE__ */ jsx(GripIcon, {})
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    VisibilityToggle,
+                    {
+                      hidden: r.hidden,
+                      name: r.name,
+                      labels,
+                      onToggle: () => layout.toggleVisible(r.key)
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(RowName, { hidden: r.hidden, name: r.name }),
+                  /* @__PURE__ */ jsx(
+                    PinToggle,
+                    {
+                      active: r.pinned !== void 0,
+                      label: `${pinActionLabel(r.pinned, labels)}: ${r.name}`,
+                      onClick: () => layout.setPinned(r.key, nextPinSide(r.pinned))
+                    }
+                  )
+                ]
+              },
+              r.key
+            );
+          }),
+          hasRowActions && /* @__PURE__ */ jsx(ActionsRow, { layout, labels }),
+          /* @__PURE__ */ jsx(Divider, { sx: { my: 0.5 } }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              size: "small",
+              fullWidth: true,
+              sx: { justifyContent: "flex-start" },
+              onClick: () => layout.reset(),
+              children: labels.resetColumns
+            }
+          )
+        ] })
+      }
+    )
+  ] });
+}
+var RESIZE_HANDLE_SX = {
+  position: "absolute",
+  insetInlineEnd: 0,
+  top: 0,
+  height: "100%",
+  width: 8,
+  cursor: "col-resize",
+  touchAction: "none",
+  userSelect: "none"
+};
+function muiColor(color) {
+  return color === "danger" || color === "red" || color === "error" ? "error" : "default";
+}
+var EXPAND_WIDTH = 48;
+function useStableToggle(target) {
+  const ref = useRef(target);
+  ref.current = target;
+  return useCallback((id) => ref.current?.toggle(id), []);
+}
+function ExpandChevron({
+  expanded,
+  dir
+}) {
+  let transform;
+  if (expanded) transform = "rotate(90deg)";
+  else if (dir === "rtl") transform = "rotate(180deg)";
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      component: "span",
+      "aria-hidden": true,
+      sx: { display: "inline-flex", transition: "transform 150ms", transform },
+      children: /* @__PURE__ */ jsx(
+        "svg",
+        {
+          width: "1em",
+          height: "1em",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "2",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          children: /* @__PURE__ */ jsx("path", { d: "M9 6l6 6-6 6" })
+        }
+      )
+    }
+  );
+}
+function ExpandToggle({
+  id,
+  expanded,
+  onToggle,
+  dir,
+  expandLabel,
+  collapseLabel
+}) {
+  return /* @__PURE__ */ jsx(
+    IconButton,
+    {
+      size: "small",
+      "aria-expanded": expanded,
+      "aria-label": expanded ? collapseLabel : expandLabel,
+      onClick: () => onToggle(id),
+      children: /* @__PURE__ */ jsx(ExpandChevron, { expanded, dir })
+    }
+  );
+}
+function muiAlign(align) {
+  if (align === "center") return "center";
+  if (align === "end") return "end";
+  return "start";
+}
+function RowActionButtons({
+  row,
+  actions,
+  confirm,
+  cancelLabel
+}) {
+  return /* @__PURE__ */ jsx(Stack, { direction: "row", spacing: 0.5, justifyContent: "flex-end", children: actions.map((action) => {
+    if (action.isHidden?.(row)) return null;
+    const reason = resolveDisabledReason(action.disabledReason?.(row));
+    const disabled = reason !== void 0 || (action.isDisabled?.(row) ?? false);
+    return /* @__PURE__ */ jsx(Tooltip, { title: reason ?? action.label, children: /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        size: "small",
+        color: muiColor(action.color),
+        disabled,
+        "aria-label": action.label,
+        onClick: (
+          // The disabled attribute already blocks activation, so
+          // attach the handler only when the action can run.
+          disabled ? void 0 : (e) => {
+            e.stopPropagation();
+            runRowAction(action, row, confirm, cancelLabel);
+          }
+        ),
+        children: action.icon ?? /* @__PURE__ */ jsx(Typography, { variant: "caption", children: action.label })
+      }
+    ) }) }, action.key);
+  }) });
+}
+var DESKTOP_ROW_COMPARED = [
+  "row",
+  "index",
+  "selected",
+  "expanded",
+  "columns",
+  "sx",
+  "columnSpan",
+  "size",
+  "dir",
+  "className",
+  "hasSelection",
+  "hasExpansion",
+  "showActions",
+  "selectRowLabel",
+  "cancelLabel",
+  "expandLabel",
+  "collapseLabel"
+];
+function desktopRowPropsAreEqual(prev, next) {
+  return DESKTOP_ROW_COMPARED.every((key) => prev[key] === next[key]);
+}
+function DesktopRowImpl({
+  row,
+  index,
+  selected,
+  expanded,
+  columns,
+  sx,
+  columnSpan,
+  dir,
+  className,
+  hasSelection,
+  hasExpansion,
+  showActions,
+  selectRowLabel,
+  cancelLabel,
+  expandLabel,
+  collapseLabel,
+  id,
+  rowActions,
+  confirm,
+  renderRowDetail,
+  onToggleSelect,
+  onToggleExpand,
+  onRowClick,
+  prefetch,
+  measureElement
+}) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      TableRow,
+      {
+        ...rowClickProps(row, onRowClick),
+        className,
+        ref: measureElement,
+        "data-index": index,
+        hover: true,
+        selected,
+        onMouseEnter: prefetch ? () => prefetch(row) : void 0,
+        children: [
+          hasExpansion && /* @__PURE__ */ jsx(TableCell, { padding: "checkbox", sx: sx.expand, children: /* @__PURE__ */ jsx(
+            ExpandToggle,
+            {
+              id,
+              expanded,
+              onToggle: onToggleExpand,
+              dir,
+              expandLabel,
+              collapseLabel
+            }
+          ) }),
+          hasSelection && /* @__PURE__ */ jsx(TableCell, { padding: "checkbox", sx: sx.selection, children: /* @__PURE__ */ jsx(
+            Checkbox,
+            {
+              slotProps: { input: { "aria-label": selectRowLabel } },
+              checked: selected,
+              onChange: () => onToggleSelect(id)
+            }
+          ) }),
+          columns.map((column) => /* @__PURE__ */ jsx(TableCell, { sx: sx.cells[column.key], children: column.Cell ? /* @__PURE__ */ jsx(column.Cell, { row, rowIndex: index }) : column.accessor?.(row) }, column.key)),
+          showActions && /* @__PURE__ */ jsx(TableCell, { sx: sx.actions, children: /* @__PURE__ */ jsx(
+            RowActionButtons,
+            {
+              row,
+              actions: rowActions,
+              confirm,
+              cancelLabel
+            }
+          ) })
+        ]
+      }
+    ),
+    expanded && /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, { colSpan: columnSpan, children: renderRowDetail(row) }) })
+  ] });
+}
+var DesktopRow = memo(
+  DesktopRowImpl,
+  desktopRowPropsAreEqual
+);
+function DesktopTable({
+  table,
+  rows,
+  rowActions,
+  confirm,
+  getRowId,
+  size,
+  dir,
+  prefetch,
+  onRowClick,
+  rowClassName,
+  renderRowDetail,
+  summaryRow,
+  expansion,
+  rowEntries,
+  paddingTop = 0,
+  paddingBottom = 0,
+  measureElement,
+  stickyHeader = false,
+  stickyTop = 0,
+  pinOffset,
+  maxHeight,
+  virtualScrollRef,
+  setWidth,
+  columnWidths,
+  resizeLabel = "Resize column",
+  actionsPinned = false
+}) {
+  const { columns, selection, labels, showActions, entries, columnSpan } = tableRenderModel({
+    table,
+    rows,
+    rowActions,
+    getRowId,
+    rowEntries,
+    renderRowDetail,
+    expansion
+  });
+  const groupRow = headerGroupRow(columns);
+  const summaryCells = summaryRow?.(rows);
+  const isExpanded = expansion && renderRowDetail ? expansion.isExpanded : void 0;
+  const expandActive = isExpanded !== void 0;
+  const onToggleSelect = useStableToggle(selection);
+  const onToggleExpand = useStableToggle(expansion);
+  const hasPinned = actionsPinned || table.columns.some((c) => pinOffset?.(c.key) != null);
+  const overflow = useHorizontalOverflow();
+  const inScrollBox = maxHeight != null || hasPinned || overflow.overflowing;
+  const headSx = stickyHeader ? {
+    position: "sticky",
+    top: inScrollBox ? 0 : stickyTop,
+    zIndex: PIN_Z.header,
+    bgcolor: "background.paper"
+  } : void 0;
+  const selectionWidth = 48;
+  const actionsWidth = 120;
+  const leadLeft = (expandActive ? EXPAND_WIDTH : 0) + (selection ? selectionWidth : 0);
+  const leadRight = showActions ? actionsWidth : 0;
+  const leads = { left: leadLeft, right: leadRight };
+  const selectionLead = expandActive ? EXPAND_WIDTH : 0;
+  const hasLeftPin = table.columns.some(
+    (c) => pinOffset?.(c.key)?.side === "left"
+  );
+  const hasRightPin = table.columns.some(
+    (c) => pinOffset?.(c.key)?.side === "right"
+  );
+  const stickActions = hasRightPin || actionsPinned;
+  const headCellSx = (column) => {
+    const pin = pinnedCellStyle(
+      pinOffset?.(column.key),
+      PIN_Z.headerPinned,
+      leads
+    );
+    const width = pin ? pinnedColumnWidth(column, columnWidths) : columnWidths?.[column.key] ?? column.width;
+    const needsRelative = Boolean(setWidth) && !headSx && !pin;
+    return {
+      ...headSx,
+      ...pin && { ...pin, bgcolor: "background.paper" },
+      ...needsRelative && { position: "relative" },
+      textAlign: muiAlign(column.align),
+      ...width != null && { width }
+    };
+  };
+  const edgeHeadSx = (side, active, lead = 0) => {
+    const pin = edgePinStyle(side, active, PIN_Z.headerPinned);
+    return {
+      ...headSx,
+      ...pin && { ...pin, bgcolor: "background.paper" },
+      ...pin && lead > 0 && { insetInlineStart: lead }
+    };
+  };
+  const rowSx = useMemo(() => {
+    const edge = (side, active, lead = 0) => {
+      const pin = edgePinStyle(side, active, PIN_Z.body);
+      if (!pin) return void 0;
+      return {
+        ...pin,
+        ...lead > 0 && { insetInlineStart: lead },
+        bgcolor: "background.paper"
+      };
+    };
+    const cells = {};
+    for (const column of columns) {
+      const pin = pinnedCellStyle(pinOffset?.(column.key), PIN_Z.body, {
+        left: leadLeft,
+        right: leadRight
+      });
+      cells[column.key] = {
+        ...pin && { ...pin, bgcolor: "background.paper" },
+        textAlign: muiAlign(column.align)
+      };
+    }
+    return {
+      cells,
+      expand: edge("left", hasLeftPin),
+      selection: edge("left", hasLeftPin, selectionLead),
+      actions: { ...edge("right", stickActions), textAlign: "end" }
+    };
+  }, [
+    columns,
+    pinOffset,
+    leadLeft,
+    leadRight,
+    hasLeftPin,
+    stickActions,
+    selectionLead
+  ]);
+  let boxSx;
+  if (maxHeight != null) {
+    boxSx = { maxHeight, overflow: "auto" };
+  } else if (hasPinned || overflow.overflowing) {
+    boxSx = { overflowX: "auto" };
+  }
+  const minWidth = tableMinWidth(columns, {
+    widths: columnWidths,
+    extra: leadLeft + leadRight
+  });
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      ref: (node) => {
+        overflow.ref(node);
+        virtualScrollRef?.(node);
+      },
+      sx: boxSx,
+      children: /* @__PURE__ */ jsxs(
+        Table,
+        {
+          size,
+          "aria-label": table.getTableProps()["aria-label"],
+          sx: minWidth > 0 ? { minWidth } : void 0,
+          children: [
+            /* @__PURE__ */ jsxs(TableHead, { children: [
+              groupRow && // Decorative group row. It deliberately skips the sticky `headSx`
+              // treatment: sticking both header rows at the same `top` would
+              // overlap them, so only the sortable header row pins.
+              /* @__PURE__ */ jsxs(TableRow, { children: [
+                expandActive && /* @__PURE__ */ jsx(TableCell, { padding: "checkbox" }),
+                selection && /* @__PURE__ */ jsx(TableCell, { padding: "checkbox" }),
+                groupRow.map((cell) => /* @__PURE__ */ jsx(
+                  TableCell,
+                  {
+                    colSpan: cell.span,
+                    sx: { textAlign: "center", fontWeight: 600 },
+                    children: cell.label
+                  },
+                  cell.key
+                )),
+                showActions && /* @__PURE__ */ jsx(TableCell, {})
+              ] }),
+              /* @__PURE__ */ jsxs(TableRow, { children: [
+                expandActive && /* @__PURE__ */ jsx(
+                  TableCell,
+                  {
+                    padding: "checkbox",
+                    sx: edgeHeadSx("left", hasLeftPin)
+                  }
+                ),
+                selection && /* @__PURE__ */ jsx(
+                  TableCell,
+                  {
+                    padding: "checkbox",
+                    sx: edgeHeadSx("left", hasLeftPin, selectionLead),
+                    children: /* @__PURE__ */ jsx(
+                      Checkbox,
+                      {
+                        slotProps: { input: { "aria-label": labels.selectAll } },
+                        checked: selection.headerState === "all",
+                        indeterminate: selection.headerState === "some",
+                        onChange: selection.toggleAll
+                      }
+                    )
+                  }
+                ),
+                columns.map((column) => {
+                  const headerCellProps = table.getHeaderCellProps(column);
+                  const ariaSort = headerCellProps["aria-sort"];
+                  const active = ariaSort === "ascending" || ariaSort === "descending";
+                  const sortIndex = headerCellProps["data-sort-index"];
+                  return /* @__PURE__ */ jsxs(
+                    TableCell,
+                    {
+                      "aria-sort": ariaSort,
+                      "data-sort-index": sortIndex,
+                      sx: headCellSx(column),
+                      children: [
+                        column.sortable ? /* @__PURE__ */ jsxs(
+                          TableSortLabel,
+                          {
+                            active,
+                            direction: ariaSort === "descending" ? "desc" : "asc",
+                            onClick: table.getSortButtonProps(column).onClick,
+                            children: [
+                              column.header,
+                              sortIndex !== void 0 && /* @__PURE__ */ jsx(Box, { component: "span", sx: { fontSize: 10, ml: 0.5 }, children: sortIndex })
+                            ]
+                          }
+                        ) : column.header,
+                        setWidth && /* @__PURE__ */ jsx(
+                          Box,
+                          {
+                            component: "span",
+                            sx: RESIZE_HANDLE_SX,
+                            ...columnResizeHandleProps(
+                              column.key,
+                              setWidth,
+                              `${resizeLabel}: ${typeof column.header === "string" ? column.header : column.key}`
+                            )
+                          }
+                        )
+                      ]
+                    },
+                    column.key
+                  );
+                }),
+                showActions && /* @__PURE__ */ jsx(
+                  TableCell,
+                  {
+                    sx: { ...edgeHeadSx("right", stickActions), textAlign: "end" },
+                    children: labels.actions
+                  }
+                )
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs(TableBody, { children: [
+              paddingTop > 0 && /* @__PURE__ */ jsx(TableRow, { "aria-hidden": true, children: /* @__PURE__ */ jsx(
+                TableCell,
+                {
+                  colSpan: columnSpan,
+                  sx: { height: paddingTop, p: 0 }
+                }
+              ) }),
+              entries.map(({ row, index, key }) => {
+                const id = getRowId(row);
+                return /* @__PURE__ */ jsx(
+                  DesktopRow,
+                  {
+                    row,
+                    index,
+                    selected: selection?.isSelected(id) ?? false,
+                    expanded: isExpanded ? isExpanded(id) : false,
+                    columns,
+                    sx: rowSx,
+                    columnSpan,
+                    size,
+                    dir,
+                    className: rowClassName?.(row, index),
+                    hasSelection: Boolean(selection),
+                    hasExpansion: expandActive,
+                    showActions,
+                    selectRowLabel: labels.selectRow,
+                    cancelLabel: labels.cancel,
+                    expandLabel: labels.expandRow,
+                    collapseLabel: labels.collapseRow,
+                    id,
+                    rowActions,
+                    confirm,
+                    renderRowDetail,
+                    onToggleSelect,
+                    onToggleExpand,
+                    onRowClick,
+                    prefetch,
+                    measureElement
+                  },
+                  key
+                );
+              }),
+              paddingBottom > 0 && /* @__PURE__ */ jsx(TableRow, { "aria-hidden": true, children: /* @__PURE__ */ jsx(
+                TableCell,
+                {
+                  colSpan: columnSpan,
+                  sx: { height: paddingBottom, p: 0 }
+                }
+              ) })
+            ] }),
+            summaryCells && /* @__PURE__ */ jsx(TableFooter, { children: /* @__PURE__ */ jsxs(TableRow, { children: [
+              expandActive && /* @__PURE__ */ jsx(TableCell, { padding: "checkbox" }),
+              selection && /* @__PURE__ */ jsx(TableCell, { padding: "checkbox" }),
+              columns.map((column) => (
+                // One cell per column keeps the summary aligned under its
+                // column; keys absent from the result render empty cells.
+                /* @__PURE__ */ jsx(
+                  TableCell,
+                  {
+                    sx: { textAlign: muiAlign(column.align) },
+                    children: summaryCells[column.key]
+                  },
+                  column.key
+                )
+              )),
+              showActions && /* @__PURE__ */ jsx(TableCell, {})
+            ] }) })
+          ]
+        }
+      )
+    }
+  );
+}
+function mobileLabel(column) {
+  return column.mobileLabel ?? (typeof column.header === "string" ? column.header : column.key);
+}
+function MobileCards({
+  table,
+  rows,
+  rowActions,
+  confirm,
+  getRowId,
+  size,
+  dir,
+  onRowClick,
+  rowClassName,
+  renderRowDetail,
+  summaryRow,
+  expansion,
+  rowEntries,
+  paddingTop = 0,
+  paddingBottom = 0,
+  measureElement
+}) {
+  const { columns, selection, labels } = table;
+  const entries = resolveVirtualRows(rows, getRowId, rowEntries);
+  const compact = size === "small";
+  const expand = expansion && renderRowDetail ? expansion : void 0;
+  const summaryCells = summaryRow?.(rows);
+  return /* @__PURE__ */ jsxs(
+    Stack,
+    {
+      spacing: compact ? 1 : 1.5,
+      role: "list",
+      "aria-label": table.getTableProps()["aria-label"],
+      children: [
+        paddingTop > 0 && /* @__PURE__ */ jsx(Box, { "aria-hidden": true, sx: { height: paddingTop } }),
+        entries.map(({ row, index, key }) => {
+          const id = getRowId(row);
+          return /* @__PURE__ */ jsx(
+            Card,
+            {
+              ref: measureElement,
+              "data-index": index,
+              variant: "outlined",
+              role: "listitem",
+              className: rowClassName?.(row, index),
+              ...rowClickProps(row, onRowClick),
+              children: /* @__PURE__ */ jsxs(
+                CardContent,
+                {
+                  sx: compact ? { p: 1.25, "&:last-child": { pb: 1.25 } } : void 0,
+                  children: [
+                    selection && /* @__PURE__ */ jsx(
+                      Checkbox,
+                      {
+                        slotProps: { input: { "aria-label": labels.selectRow } },
+                        checked: selection.isSelected(id),
+                        onChange: () => selection.toggle(id)
+                      }
+                    ),
+                    expand && /* @__PURE__ */ jsx(
+                      ExpandToggle,
+                      {
+                        id,
+                        expanded: expand.isExpanded(id),
+                        onToggle: expand.toggle,
+                        dir,
+                        expandLabel: labels.expandRow,
+                        collapseLabel: labels.collapseRow
+                      }
+                    ),
+                    columns.map((column) => /* @__PURE__ */ jsxs(Box, { sx: { mb: compact ? 0.5 : 1 }, children: [
+                      /* @__PURE__ */ jsx(
+                        Typography,
+                        {
+                          variant: "caption",
+                          color: "text.secondary",
+                          display: "block",
+                          children: mobileLabel(column)
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(Typography, { component: "div", variant: "body2", children: column.Cell ? /* @__PURE__ */ jsx(column.Cell, { row, rowIndex: index }) : column.accessor?.(row) })
+                    ] }, column.key)),
+                    rowActions && rowActions.length > 0 && /* @__PURE__ */ jsx(
+                      RowActionButtons,
+                      {
+                        row,
+                        actions: rowActions,
+                        confirm,
+                        cancelLabel: labels.cancel
+                      }
+                    ),
+                    expand?.isExpanded(id) && // Inside the card — and therefore inside the measured
+                    // element — so virtualization keeps accurate card heights.
+                    /* @__PURE__ */ jsx(Box, { sx: { mt: 1 }, children: renderRowDetail(row) })
+                  ]
+                }
+              )
+            },
+            key
+          );
+        }),
+        summaryCells && /* @__PURE__ */ jsx(Card, { variant: "outlined", role: "listitem", children: /* @__PURE__ */ jsx(
+          CardContent,
+          {
+            sx: compact ? { p: 1.25, "&:last-child": { pb: 1.25 } } : void 0,
+            children: columns.map((column) => {
+              const value = summaryCells[column.key];
+              if (value === void 0) return null;
+              return /* @__PURE__ */ jsxs(Box, { sx: { mb: compact ? 0.5 : 1 }, children: [
+                /* @__PURE__ */ jsx(
+                  Typography,
+                  {
+                    variant: "caption",
+                    color: "text.secondary",
+                    display: "block",
+                    children: mobileLabel(column)
+                  }
+                ),
+                /* @__PURE__ */ jsx(Typography, { component: "div", variant: "body2", children: value })
+              ] }, column.key);
+            })
+          }
+        ) }),
+        paddingBottom > 0 && /* @__PURE__ */ jsx(Box, { "aria-hidden": true, sx: { height: paddingBottom } })
+      ]
+    }
+  );
+}
+function tableSize(size, density) {
+  if (size) return size;
+  return density === "compact" ? "small" : "medium";
+}
+function resizeSetter(enabled, setWidth) {
+  return enabled ? setWidth : void 0;
+}
+function resolveActionsColumn(declared, layout) {
+  const hasRowActions = (declared?.length ?? 0) > 0;
+  const rowActions = hasRowActions && !layout.isHidden(ACTIONS_COLUMN_KEY) ? declared : void 0;
+  const actionsPinned = rowActions !== void 0 && layout.state.pinned[ACTIONS_COLUMN_KEY] === "right";
+  return { hasRowActions, rowActions, actionsPinned };
+}
+function useChromeProps(props) {
+  const { source, runtime } = useTableData({
+    locale: props.locale,
+    source: props.source,
+    data: props.data,
+    total: props.total,
+    loading: props.loading,
+    onQueryChange: props.onQueryChange,
+    columns: props.columns,
+    filters: props.filters,
+    adapter: props.urlSync === false ? void 0 : props.urlAdapter,
+    enabled: props.urlSync,
+    urlKey: props.urlKey
+  });
+  let filtersNode;
+  if (isDeclarativeFilters(props.filters) || props.filters === void 0) {
+    filtersNode = runtime.defs.length > 0 ? /* @__PURE__ */ jsx(
+      AutoFilterForm,
+      {
+        defs: runtime.defs,
+        source,
+        labels: resolveLabels(props.labels)
+      }
+    ) : void 0;
+  } else {
+    filtersNode = props.filters;
+  }
+  return {
+    ...props,
+    source,
+    filters: filtersNode,
+    filterLabels: { ...runtime.filterLabels, ...props.filterLabels }
+  };
+}
+function DataTable(props) {
+  const { slots, className } = props;
+  const size = tableSize(props.size, props.density);
+  const { filtersMode = "popover" } = props;
+  const chromeProps = useChromeProps(props);
+  const { source, filters: filtersNode } = chromeProps;
+  const c = useTableChrome(chromeProps);
+  const { table, confirm, getRowId } = c;
+  const { labels } = table;
+  const [filtersOpen, setFiltersOpen] = useState(false);
+  const filtersTrigger = useFilterTriggerToggle(filtersOpen, setFiltersOpen);
+  const rootRef = useRef(null);
+  useChromeScrollReset(rootRef, c, chromeProps);
+  const { virtualization, loadMoreRef, canLoadMore, virtualScrollRef } = useChromeBodyData(c, chromeProps);
+  const { hasRowActions, rowActions, actionsPinned } = resolveActionsColumn(
+    props.rowActions,
+    c.columnLayout
+  );
+  const columnMenu = props.enableColumnMenu && !c.isMobile && /* @__PURE__ */ jsx(
+    ColumnMenu,
+    {
+      allColumns: c.allColumns,
+      layout: c.columnLayout,
+      labels,
+      hasRowActions
+    }
+  );
+  const savedViewsMenu = props.savedViews && /* @__PURE__ */ jsx(
+    SavedViewsMenu,
+    {
+      options: {
+        adapter: props.urlAdapter,
+        urlKey: props.urlKey,
+        ...props.savedViews
+      },
+      labels
+    }
+  );
+  let body;
+  if (c.body === "skeleton") {
+    body = slots?.skeleton ?? /* @__PURE__ */ jsx(
+      LoadingState,
+      {
+        rows: props.skeletonRows ?? source.limit,
+        columns: table.columns.length,
+        loadingLabel: labels.loading
+      }
+    );
+  } else if (c.body === "empty") {
+    body = slots?.empty ?? /* @__PURE__ */ jsxs(Stack, { role: "status", spacing: 1.5, alignItems: "center", sx: { py: 6 }, children: [
+      /* @__PURE__ */ jsx(Typography, { color: "text.secondary", align: "center", children: c.emptyVariant === "noResults" ? labels.noResults : labels.noData }),
+      c.emptyVariant === "noResults" && /* @__PURE__ */ jsx(Button, { variant: "outlined", size: "small", onClick: c.clearFilters, children: labels.clearAll })
+    ] });
+  } else if (c.body === "mobile") {
+    body = /* @__PURE__ */ jsx(
+      MobileCards,
+      {
+        table,
+        rows: source.rows,
+        rowActions,
+        confirm,
+        getRowId,
+        size,
+        dir: props.dir,
+        onRowClick: props.onRowClick,
+        rowClassName: props.rowClassName,
+        renderRowDetail: props.renderRowDetail,
+        summaryRow: props.summaryRow,
+        expansion: c.detail?.expansion,
+        rowEntries: virtualization.enabled ? virtualization.rows : void 0,
+        paddingTop: virtualization.paddingTop,
+        paddingBottom: virtualization.paddingBottom,
+        measureElement: virtualization.measureElement
+      }
+    );
+  } else {
+    body = /* @__PURE__ */ jsx(
+      DesktopTable,
+      {
+        table,
+        rows: source.rows,
+        rowActions,
+        actionsPinned,
+        confirm,
+        getRowId,
+        size,
+        dir: props.dir,
+        prefetch: props.prefetch,
+        onRowClick: props.onRowClick,
+        rowClassName: props.rowClassName,
+        renderRowDetail: props.renderRowDetail,
+        summaryRow: props.summaryRow,
+        expansion: c.detail?.expansion,
+        rowEntries: virtualization.enabled ? virtualization.rows : void 0,
+        paddingTop: virtualization.paddingTop,
+        paddingBottom: virtualization.paddingBottom,
+        measureElement: virtualization.measureElement,
+        stickyHeader: props.stickyHeader,
+        stickyTop: props.stickyTop,
+        pinOffset: c.columnLayout.pinOffset,
+        maxHeight: props.maxHeight,
+        virtualScrollRef,
+        setWidth: resizeSetter(props.resizableColumns, c.columnLayout.setWidth),
+        columnWidths: c.columnLayout.state.widths,
+        resizeLabel: labels.resizeColumn
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    Paper,
+    {
+      ref: rootRef,
+      variant: "outlined",
+      dir: props.dir,
+      className,
+      "aria-busy": c.isRefreshing || void 0,
+      sx: { p: 1.5 },
+      children: [
+        /* @__PURE__ */ jsxs(Stack, { spacing: 1.5, children: [
+          /* @__PURE__ */ jsx(
+            Toolbar,
+            {
+              table,
+              hideSearch: props.hideSearch,
+              searchPlaceholder: props.searchPlaceholder,
+              sortByOptions: props.sortByOptions,
+              customToolbar: /* @__PURE__ */ jsxs(Fragment, { children: [
+                savedViewsMenu,
+                props.toolbar
+              ] }),
+              hasFilters: Boolean(filtersNode),
+              activeFilterCount: c.activeFilterCount,
+              showRowsPerPage: canLoadMore,
+              filtersMode,
+              filters: filtersNode,
+              filtersOpen,
+              onToggleFilters: filtersTrigger.onClick,
+              onFiltersTriggerPointerDown: filtersTrigger.onPointerDown,
+              onCloseFilters: () => setFiltersOpen(false),
+              onClearFilters: c.clearFilters,
+              dir: props.dir,
+              columnMenu
+            }
+          ),
+          c.isRefreshing && /* @__PURE__ */ jsx(LinearProgress, { "aria-label": labels.loading }),
+          /* @__PURE__ */ jsx(
+            Chips,
+            {
+              chips: c.mergedChips,
+              onClearAll: c.clearFilters,
+              labels
+            }
+          ),
+          table.selection && props.bulkActions && /* @__PURE__ */ jsx(
+            BulkBar,
+            {
+              selection: table.selection,
+              total: source.total,
+              bulkActions: props.bulkActions,
+              confirm,
+              labels
+            }
+          ),
+          source.error ? /* @__PURE__ */ jsx(
+            ErrorState,
+            {
+              error: source.error,
+              labels,
+              onRetry: source.refetch ? () => void source.refetch?.() : void 0
+            }
+          ) : body,
+          canLoadMore && source.hasNextPage && /* @__PURE__ */ jsx(Box, { ref: loadMoreRef, display: "flex", justifyContent: "center", py: 1, children: /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "outlined",
+              size: "small",
+              disabled: source.isFetchingNextPage,
+              onClick: () => source.fetchNextPage(),
+              children: labels.loadMore
+            }
+          ) }),
+          c.showFooter && /* @__PURE__ */ jsx(
+            Footer,
+            {
+              pagination: table.pagination,
+              total: source.total,
+              limit: source.limit,
+              setPage: source.setPage,
+              setLimit: source.setLimit,
+              labels
+            }
+          )
+        ] }),
+        filtersNode && filtersMode === "drawer" && /* @__PURE__ */ jsx(
+          FilterDrawer,
+          {
+            open: filtersOpen,
+            onClose: () => setFiltersOpen(false),
+            filters: filtersNode,
+            activeFilterCount: c.activeFilterCount,
+            onClearFilters: c.clearFilters,
+            labels,
+            dir: props.dir
+          }
+        )
+      ]
+    }
+  );
+}
+
+export { DataTable, SavedViewsMenu };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map