schummar-table 0.3.2 → 0.5.0-beta-1

package/dist/esm/schummar-table.js

@@ -0,0 +1,1041 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+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;
+};
+import { useRef, useEffect, useState, memo, useMemo, createContext, useContext } from "react";
+import { j as jsxs, a as jsx, S as StoreScope, K, F as Fragment } from "../assets/vendor.c9c3328b.js";
+import { d as defaultClasses } from "../assets/tableTheme.65fea986.js";
+import "react-dom";
+function useCssVariables() {
+  const table = useTableContext();
+  return table.useState((state) => ({
+    "--spacing": state.theme.spacing,
+    "--primaryMain": state.theme.colors.primary.main,
+    "--primaryLight": state.theme.colors.primary.light,
+    "--primaryContrastText": state.theme.colors.primary.contrastText,
+    "--secondaryMain": state.theme.colors.secondary.main,
+    "--secondaryLight": state.theme.colors.secondary.light,
+    "--secondaryContrastText": state.theme.colors.secondary.contrastText
+  }));
+}
+const getAncestors = (activeItemsById, ...items) => {
+  const result = /* @__PURE__ */ new Set();
+  const find = ({ parentId }) => {
+    const parent = parentId ? activeItemsById.get(parentId) : void 0;
+    if (parent && !result.has(parent.id)) {
+      result.add(parent.id);
+      find(parent);
+    }
+  };
+  items.forEach(find);
+  return result;
+};
+const getDescendants = (...items) => {
+  const result = /* @__PURE__ */ new Set();
+  const find = (item) => {
+    for (const child of item.children) {
+      if (!result.has(child.id)) {
+        result.add(child.id);
+        find(child);
+      }
+    }
+  };
+  items.forEach(find);
+  return result;
+};
+function FormControlLabel({
+  control,
+  label
+}) {
+  return jsxs("label", {
+    css: {
+      display: "flex",
+      alignItems: "center",
+      cursor: "pointer",
+      userSelect: "none",
+      "& > *": {
+        cursor: "pointer"
+      }
+    },
+    children: [control, jsx("span", {
+      css: {
+        marginLeft: "var(--spacing)"
+      },
+      children: label
+    })]
+  });
+}
+const ColumnHeaderContext = new StoreScope({
+  items: /* @__PURE__ */ new Map()
+});
+function ColumnHeader(props) {
+  const ref = useRef(null);
+  const columnId = useColumnContext();
+  const table = useTableContext();
+  const enabled = table.useState("props.enableColumnReorder");
+  const store = ColumnHeaderContext.useStore();
+  const draggingStart = useRef();
+  const clone = useRef();
+  useEffect(() => {
+    const div = ref.current;
+    if (!div)
+      return;
+    store.update((state) => {
+      state.items.set(columnId, K(div));
+    });
+    return () => {
+      store.update((state) => {
+        state.items.delete(columnId);
+      });
+    };
+  }, [ref.current, store, columnId]);
+  function calcTargetIndex(offsetLeft) {
+    var _a, _b, _c;
+    const cols = table.getState().columnOrder.map((id) => ({
+      id,
+      div: store.getState().items.get(id)
+    }));
+    const otherCols = cols.filter((col) => col.id !== columnId);
+    const firstOffsetleft = (_c = (_b = (_a = cols.find((col) => col.div)) == null ? void 0 : _a.div) == null ? void 0 : _b.offsetLeft) != null ? _c : 0;
+    let sum = 0;
+    const targetIndex = otherCols.findIndex((col) => {
+      var _a2, _b2;
+      const width = (_b2 = (_a2 = col.div) == null ? void 0 : _a2.offsetWidth) != null ? _b2 : 0;
+      if (sum + width / 2 > offsetLeft - firstOffsetleft)
+        return true;
+      sum += width;
+      return false;
+    });
+    return targetIndex === -1 ? otherCols.length : targetIndex;
+  }
+  function onPointerDown(e) {
+    const div = ref.current;
+    if (!div)
+      return;
+    draggingStart.current = {
+      mouseX: e.clientX,
+      bounds: div.getBoundingClientRect()
+    };
+  }
+  function onPointerMove(e) {
+    table.update((state) => {
+      const div = ref.current;
+      if (!div || draggingStart.current === void 0 || Math.abs(e.clientX - draggingStart.current.mouseX) < 5)
+        return;
+      e.stopPropagation();
+      div.setPointerCapture(e.pointerId);
+      if (!clone.current) {
+        clone.current = div.cloneNode(true);
+        document.body.append(clone.current);
+        for (const [key, value] of Object.entries(getComputedStyle(div))) {
+          try {
+            clone.current.style[key] = value;
+          } catch {
+          }
+        }
+        Object.assign(clone.current.style, {
+          pointerEvents: "none",
+          position: "fixed",
+          boxShadow: "0px 5px 5px -3px rgb(0 0 0 / 20%), 0px 8px 10px 1px rgb(0 0 0 / 14%), 0px 3px 14px 2px rgb(0 0 0 / 12%)",
+          left: `${draggingStart.current.bounds.left}px`,
+          top: `${draggingStart.current.bounds.top}px`
+        });
+        div.style.color = "rgba(0, 0, 0, 0.2)";
+      }
+      clone.current.style.left = `${draggingStart.current.bounds.left + e.clientX - draggingStart.current.mouseX}px`;
+      const index = state.columnOrder.indexOf(columnId);
+      const targetIndex = calcTargetIndex(div.offsetLeft + e.clientX - draggingStart.current.mouseX);
+      const columns = table.getState().columnOrder.map((id, index2) => {
+        var _a, _b;
+        return {
+          id,
+          index: index2,
+          width: (_b = (_a = store.getState().items.get(id)) == null ? void 0 : _a.offsetWidth) != null ? _b : 0
+        };
+      });
+      state.columnOrder.forEach((id, i) => {
+        let offset = 0;
+        if (i === index) {
+          if (targetIndex > index) {
+            offset = columns.slice(index + 1, targetIndex + 1).reduce((sum, col) => sum + col.width, 0);
+          } else if (targetIndex < index) {
+            offset = -columns.slice(targetIndex, index).reduce((sum, col) => sum + col.width, 0);
+          }
+        } else if (i >= targetIndex && i < index) {
+          offset = div.offsetWidth;
+        } else if (i > index && i <= targetIndex) {
+          offset = -div.offsetWidth;
+        }
+        state.columnStyleOverride.set(id, {
+          transition: "transform 500ms",
+          transform: `translate3d(${offset}px, 0, 0)`,
+          zIndex: i === index ? 1 : void 0
+        });
+      });
+    });
+  }
+  function onPointerUp(e) {
+    table.update((state) => {
+      var _a;
+      const div = ref.current;
+      if (!div || draggingStart.current === void 0)
+        return;
+      const index = state.columnOrder.indexOf(columnId);
+      const targetIndex = calcTargetIndex(div.offsetLeft + e.clientX - draggingStart.current.mouseX);
+      state.columnOrder.splice(index, 1);
+      state.columnOrder.splice(targetIndex, 0, columnId);
+      (_a = clone.current) == null ? void 0 : _a.remove();
+      div.style.color = "";
+      state.columnStyleOverride.clear();
+      draggingStart.current = void 0;
+      clone.current = void 0;
+    });
+  }
+  return jsx("div", __spreadProps(__spreadValues({}, props), {
+    css: {
+      position: "relative",
+      userSelect: "none"
+    },
+    ref,
+    onPointerDown: enabled ? onPointerDown : void 0,
+    onPointerMove: enabled ? onPointerMove : void 0,
+    onPointerUp: enabled ? onPointerUp : void 0,
+    children: props.children
+  }));
+}
+function ColumnSelection() {
+  const {
+    components: {
+      IconButton,
+      Popover,
+      Checkbox
+    },
+    icons: {
+      Settings
+    },
+    text
+  } = useTheme();
+  const cssVariables = useCssVariables();
+  const table = useTableContext();
+  const columns = table.useState("props.columns");
+  const hiddenColumns = table.useState("hiddenColumns");
+  const [anchorEl, setAnchorEl] = useState(null);
+  const toggle = (column) => {
+    const {
+      props: {
+        hiddenColumns: controlledHiddenColumns,
+        onHiddenColumnsChange
+      }
+    } = table.getState();
+    const newValue = new Set(hiddenColumns);
+    if (hiddenColumns.has(column.id))
+      newValue.delete(column.id);
+    else
+      newValue.add(column.id);
+    if (!controlledHiddenColumns) {
+      table.update((state) => {
+        state.hiddenColumns = newValue;
+      });
+    }
+    onHiddenColumnsChange == null ? void 0 : onHiddenColumnsChange(newValue);
+  };
+  return jsxs(Fragment, {
+    children: [jsx(IconButton, {
+      onClick: (e) => setAnchorEl(anchorEl ? null : e.currentTarget),
+      children: jsx(Settings, {})
+    }), jsx(Popover, {
+      anchorEl,
+      open: !!anchorEl,
+      onClose: () => setAnchorEl(null),
+      css: cssVariables,
+      children: jsxs("div", {
+        css: {
+          padding: `calc(var(--spacing) * 2)`,
+          display: "grid"
+        },
+        children: [jsx("div", {
+          css: {
+            marginBottom: "var(--spacing)"
+          },
+          children: text.selectColumns
+        }), columns.map((column) => jsx(FormControlLabel, {
+          control: jsx(Checkbox, {
+            checked: !hiddenColumns.has(column.id),
+            onChange: () => toggle(column),
+            disabled: column.cannotHide
+          }),
+          label: column.header
+        }, column.id))]
+      })
+    })]
+  });
+}
+function csvExport(data, { sepPrefix, separator = ",", quote = '"', eol = "\n" } = {}) {
+  const cells = data.map((line) => line.map((value) => {
+    if (typeof value === "number")
+      return String(value);
+    if (![separator, quote, eol].some((c) => value.includes(c)))
+      return value;
+    const clean = value.replace(new RegExp(quote, "g"), `${quote}${quote}`);
+    return `${quote}${clean}${quote}`;
+  }));
+  return (sepPrefix ? `SEP=${separator}
+` : "") + cells.map((line) => line.join(separator)).join(eol);
+}
+function Export() {
+  const table = useTableContext();
+  const {
+    components: {
+      Button,
+      IconButton,
+      Popover
+    },
+    icons: {
+      Export: Export2,
+      Clipboard
+    },
+    text
+  } = useTheme();
+  const cssVariables = useCssVariables();
+  const [anchor, setAnchor] = useState(null);
+  const generate = (options) => {
+    const {
+      activeColumns,
+      activeItems
+    } = table.getState();
+    const data = [activeColumns.map((column) => String(column.id)), ...activeItems.map((item) => activeColumns.map((column) => column.exportCell(column.value(item), item)))];
+    return csvExport(data, options);
+  };
+  const copy = () => {
+    navigator.clipboard.writeText(generate(table.getState().props.enableExport.copy));
+  };
+  const download = () => {
+    const a = document.createElement("a");
+    a.href = "data:text/csv;charset=utf-8," + encodeURIComponent(generate(table.getState().props.enableExport.download));
+    a.download = "export.csv";
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+  };
+  return jsxs(Fragment, {
+    children: [jsx(IconButton, {
+      onClick: (e) => setAnchor(anchor ? null : e.currentTarget),
+      children: jsx(Export2, {})
+    }), jsx(Popover, {
+      open: !!anchor,
+      onClose: () => setAnchor(null),
+      anchorEl: anchor,
+      css: cssVariables,
+      children: jsxs("div", {
+        css: {
+          padding: `calc(var(--spacing) * 2)`,
+          display: "grid",
+          justifyItems: "stretch",
+          gap: "var(--spacing)",
+          "& > *": {
+            justifyContent: "start"
+          }
+        },
+        children: [jsx("div", {
+          css: {
+            marginBottom: "var(--spacing)"
+          },
+          children: text.exportTitle
+        }), jsx(Button, {
+          startIcon: jsx(Clipboard, {}),
+          onClick: copy,
+          children: text.exportCopy
+        }), jsx(Button, {
+          startIcon: jsx(Export2, {}),
+          onClick: download,
+          children: text.exportDownload
+        })]
+      })
+    })]
+  });
+}
+function useTheme() {
+  const table = useTableContext();
+  return table.useState("theme");
+}
+function FilterControl() {
+  const table = useTableContext();
+  const columnId = useColumnContext();
+  const {
+    components: {
+      IconButton,
+      Popover
+    },
+    icons: {
+      FilterList,
+      ArrowDropDown
+    }
+  } = useTheme();
+  const cssVariables = useCssVariables();
+  const [anchor, setAnchor] = useState(null);
+  const isActive = table.useState((state) => {
+    const filter2 = state.filters.get(columnId);
+    const filterValue = state.filterValues.get(columnId);
+    return filter2 !== void 0 && filterValue !== void 0 && filter2.isActive(filterValue);
+  });
+  const filter = table.useState((state) => {
+    var _a;
+    return (_a = state.activeColumns.find((column) => column.id === columnId)) == null ? void 0 : _a.filter;
+  });
+  if (!filter)
+    return null;
+  return jsxs(Fragment, {
+    children: [jsx(IconButton, {
+      onClick: (e) => setAnchor(e.currentTarget),
+      css: [isActive && {
+        color: "white !important",
+        backgroundColor: "var(--primaryMain) !important"
+      }],
+      children: isActive ? jsx(FilterList, {}) : jsx(ArrowDropDown, {})
+    }), jsx("div", {
+      onPointerDown: (e) => {
+        e.stopPropagation();
+      },
+      onPointerMove: (e) => {
+        e.stopPropagation();
+      },
+      children: jsx(Popover, {
+        open: true,
+        hidden: !anchor,
+        onClose: () => setAnchor(null),
+        anchorEl: anchor != null ? anchor : document.body,
+        css: cssVariables,
+        children: filter
+      })
+    })]
+  });
+}
+function ResizeHandle() {
+  const table = useTableContext();
+  const columnId = useColumnContext();
+  const enabled = table.useState("props.enableColumnResize");
+  function onPointerDown(e) {
+    e.stopPropagation();
+    const div = e.target;
+    div.setPointerCapture(e.pointerId);
+  }
+  function onPointerMove(e) {
+    e.stopPropagation();
+    const div = e.target;
+    if (!div.hasPointerCapture(e.pointerId))
+      return;
+    const parent = div.parentElement;
+    const width = Math.max(e.clientX - parent.getBoundingClientRect().left + 5, 50);
+    table.update((state) => {
+      state.columnWidths.set(columnId, `${width}px`);
+    });
+  }
+  function onPointerUp(e) {
+    e.stopPropagation();
+    const div = e.target;
+    div.releasePointerCapture(e.pointerId);
+  }
+  function onDoubleClick(e) {
+    table.update((state) => {
+      if (e.getModifierState("Control")) {
+        state.columnWidths.delete(columnId);
+      } else {
+        state.columnWidths.set(columnId, "max-content");
+      }
+    });
+  }
+  return jsx("div", {
+    css: {
+      alignSelf: "stretch",
+      padding: "0 5px",
+      cursor: enabled ? "col-resize" : "initial",
+      display: "flex",
+      alignItems: "center",
+      "&:after": {
+        content: '""',
+        width: 1,
+        height: "1.2em",
+        background: "currentColor",
+        transition: "transform 300ms"
+      }
+    },
+    onPointerDown: enabled ? onPointerDown : void 0,
+    onPointerMove: enabled ? onPointerMove : void 0,
+    onPointerUp: enabled ? onPointerUp : void 0,
+    onDoubleClick: enabled ? onDoubleClick : void 0
+  });
+}
+const Cell = memo(function Cell2({
+  itemId,
+  rowIndex
+}) {
+  var _a, _b;
+  const table = useTableContext();
+  const columnId = useColumnContext();
+  const {
+    css
+  } = useTheme();
+  const column = table.useState((state) => state.activeColumns.find((column2) => column2.id === columnId));
+  const item = table.useState((state) => state.activeItemsById.get(itemId));
+  const columnStyleOverride = table.useState((state) => state.columnStyleOverride.get(columnId), {
+    throttle: 16
+  });
+  if (!column || !item)
+    return null;
+  (_b = (_a = table.getState().props).debugRender) == null ? void 0 : _b.call(_a, "render cell", itemId, columnId);
+  const classNames = [...calcClassNames(css, item, rowIndex), ...calcClassNames(column == null ? void 0 : column.css, item, rowIndex)];
+  const content = column.renderCell(column.value(item), item);
+  return jsx("div", {
+    css: [defaultClasses.cell, classNames, columnStyleOverride],
+    children: typeof content === "string" ? jsx("span", {
+      css: defaultClasses.text,
+      children: content
+    }) : content
+  });
+});
+function ExpandControl({
+  itemId,
+  hasDeferredChildren
+}) {
+  const {
+    components: {
+      IconButton,
+      Spinner
+    },
+    icons: {
+      ChevronRight
+    }
+  } = useTheme();
+  const table = useTableContext();
+  const isExpanded = table.useState((state) => state.expanded.has(itemId));
+  const hasChildren = table.useState((state) => {
+    var _a;
+    return !!((_a = state.activeItemsById.get(itemId)) == null ? void 0 : _a.children.length);
+  });
+  function toggle() {
+    const {
+      props: {
+        expanded: controlledExpanded,
+        expandOnlyOne,
+        onExpandedChange
+      },
+      expanded,
+      activeItemsById
+    } = table.getState();
+    const newExpanded = new Set(expanded);
+    if (expandOnlyOne)
+      newExpanded.clear();
+    if (isExpanded)
+      newExpanded.delete(itemId);
+    else {
+      newExpanded.add(itemId);
+      const item = activeItemsById.get(itemId);
+      for (const ancestor of item ? getAncestors(activeItemsById, item) : []) {
+        newExpanded.add(ancestor);
+      }
+    }
+    onExpandedChange == null ? void 0 : onExpandedChange(newExpanded);
+    if (!controlledExpanded) {
+      table.update((state) => {
+        state.expanded = newExpanded;
+      });
+    }
+  }
+  if (isExpanded && hasDeferredChildren && !hasChildren) {
+    return jsx(Spinner, {
+      css: {
+        margin: "0 var(--spacing)"
+      }
+    });
+  }
+  return jsx(IconButton, {
+    onClick: toggle,
+    children: jsx("span", {
+      css: {
+        display: "inline-flex",
+        transition: "all 300ms",
+        transform: isExpanded ? "rotate3d(0, 0, 1, 90deg)" : "rotate3d(0, 0, 1, 0deg)"
+      },
+      children: jsx(ChevronRight, {})
+    })
+  });
+}
+function SelectComponent({
+  itemId
+}) {
+  const table = useTableContext();
+  const {
+    components: {
+      Checkbox
+    }
+  } = useTheme();
+  const isSelected = table.useState((state) => {
+    const itemIds = itemId ? [itemId] : [...state.activeItemsById.keys()];
+    return state.activeItemsById.size > 0 && itemIds.every((itemId2) => state.selection.has(itemId2));
+  });
+  function toggle(e) {
+    const mouseEvent = e.nativeEvent;
+    const {
+      activeItems,
+      activeItemsById,
+      lastSelectedId,
+      selection,
+      props: {
+        selectSyncChildren,
+        selection: controlledSelection,
+        onSelectionChange
+      }
+    } = table.getState();
+    let range;
+    if (mouseEvent.shiftKey && itemId) {
+      const a = lastSelectedId ? activeItems.findIndex((i) => lastSelectedId === i.id) : 0;
+      const b = activeItems.findIndex((item) => item.id === itemId);
+      range = activeItems.slice(Math.min(a, b), Math.max(a, b) + 1);
+    } else {
+      const item = itemId ? activeItemsById.get(itemId) : void 0;
+      range = item ? [item] : activeItems;
+    }
+    const newSelection = new Set(selection);
+    for (const item of range) {
+      if (isSelected)
+        newSelection.delete(item.id);
+      else
+        newSelection.add(item.id);
+    }
+    if (selectSyncChildren && isSelected) {
+      for (const ancestor of getAncestors(activeItemsById, ...range)) {
+        newSelection.delete(ancestor);
+      }
+      for (const descendant of getDescendants(...range)) {
+        newSelection.delete(descendant);
+      }
+    }
+    onSelectionChange == null ? void 0 : onSelectionChange(newSelection);
+    if (!controlledSelection) {
+      table.update((state) => {
+        state.selection = newSelection;
+      });
+    }
+    table.update((state) => {
+      state.lastSelectedId = itemId;
+    });
+  }
+  return jsx(Checkbox, {
+    css: {
+      justifySelf: "start",
+      color: "inherit"
+    },
+    checked: isSelected,
+    onChange: toggle
+  });
+}
+function calcClassNames(css, item, index) {
+  return [(css == null ? void 0 : css.cell) instanceof Function ? css.cell(item, index) : css == null ? void 0 : css.cell, index % 2 === 0 && (css == null ? void 0 : css.evenCell), index % 2 === 1 && (css == null ? void 0 : css.oddCell)];
+}
+const Row = memo(function Row2({
+  itemId,
+  rowIndex
+}) {
+  var _a, _b;
+  const table = useTableContext();
+  const divRef = useRef(null);
+  const {
+    className,
+    indent,
+    hasChildren,
+    hasDeferredChildren,
+    columnIds,
+    enableSelection,
+    rowAction
+  } = table.useState((state) => {
+    var _a2, _b2;
+    const item = state.activeItemsById.get(itemId);
+    const index = !item ? -1 : state.activeItems.indexOf(item);
+    return {
+      className: calcClassNames(state.props.css, item, index),
+      indent: item ? getAncestors(state.activeItemsById, item).size : 0,
+      hasChildren: !!(item == null ? void 0 : item.children.length),
+      hasDeferredChildren: item && ((_b2 = (_a2 = state.props).hasDeferredChildren) == null ? void 0 : _b2.call(_a2, item)),
+      columnIds: state.activeColumns.map((column) => column.id),
+      enableSelection: state.props.enableSelection,
+      rowAction: state.props.rowAction instanceof Function ? item ? state.props.rowAction(item, index) : null : state.props.rowAction
+    };
+  });
+  useEffect(() => {
+    const div = divRef.current;
+    if (!div)
+      return;
+    const o = new ResizeObserver(() => {
+      if (!document.contains(div))
+        return;
+      table.update((state) => {
+        state.rowHeights.set(itemId, div.offsetHeight);
+      });
+    });
+    o.observe(div);
+    return () => o.disconnect();
+  }, [divRef.current]);
+  (_b = (_a = table.getState().props).debugRender) == null ? void 0 : _b.call(_a, "render row", itemId);
+  return jsxs(Fragment, {
+    children: [jsx("div", {
+      css: [defaultClasses.cellFill, className],
+      ref: divRef
+    }), jsxs("div", {
+      css: [defaultClasses.cell, defaultClasses.firstCell, className],
+      children: [jsx("div", {
+        css: {
+          width: indent * 20
+        }
+      }), enableSelection && jsx(SelectComponent, {
+        itemId
+      }), (hasChildren || hasDeferredChildren) && jsx(ExpandControl, {
+        itemId,
+        hasDeferredChildren
+      }), rowAction]
+    }), columnIds.map((columnId) => jsx(ColumnContext.Provider, {
+      value: columnId,
+      children: jsx(Cell, {
+        itemId,
+        rowIndex
+      })
+    }, columnId)), jsx("div", {
+      css: [defaultClasses.cellFill, className]
+    })]
+  });
+});
+function SortComponent({
+  children
+}) {
+  const table = useTableContext();
+  const columnId = useColumnContext();
+  const {
+    components: {
+      Badge
+    },
+    icons: {
+      ArrowUpward
+    }
+  } = useTheme();
+  const {
+    direction,
+    index
+  } = table.useState((state) => {
+    var _a, _b;
+    const index2 = (_a = state.sort.findIndex((s) => s.columnId === columnId)) != null ? _a : -1;
+    return {
+      direction: (_b = state.sort[index2]) == null ? void 0 : _b.direction,
+      index: index2 >= 0 && state.sort.length > 1 ? index2 + 1 : void 0
+    };
+  });
+  function toggle(e) {
+    const {
+      props: {
+        sort: controlledSort,
+        onSortChange
+      }
+    } = table.getState();
+    const newDirection = direction === "asc" ? "desc" : "asc";
+    const newSort = (e.getModifierState("Control") ? table.getState().sort.filter((s) => s.columnId !== columnId) : []).concat({
+      columnId,
+      direction: newDirection
+    });
+    onSortChange == null ? void 0 : onSortChange(newSort);
+    if (!controlledSort) {
+      table.update((state) => {
+        state.sort = newSort;
+      });
+    }
+  }
+  return jsxs("div", {
+    css: {
+      userSelect: "none",
+      display: "grid",
+      gridTemplateColumns: "minmax(0, 1fr) max-content",
+      alignItems: "center",
+      cursor: "pointer",
+      "& > div": {
+        overflow: "hidden",
+        textOverflow: "ellipsis"
+      }
+    },
+    onClick: toggle,
+    children: [jsx("div", {
+      children
+    }), jsx(Badge, {
+      badgeContent: index,
+      children: jsx("span", {
+        css: [{
+          transition: "all 300ms",
+          fontSize: "0.8em"
+        }, !direction && {
+          opacity: 0
+        }, direction === "desc" && {
+          transform: "rotate3d(0, 0, 1, 180deg)"
+        }],
+        children: jsx(ArrowUpward, {})
+      })
+    })]
+  });
+}
+function throttle(fn, ms) {
+  let last = 0;
+  let lastArgs;
+  let timeout;
+  function run() {
+    const args = lastArgs;
+    last = Date.now();
+    lastArgs = void 0;
+    timeout = void 0;
+    fn(...args);
+  }
+  return Object.assign(function(...args) {
+    const now = Date.now();
+    lastArgs = args;
+    if (timeout)
+      ;
+    else if (now < last + ms) {
+      timeout = setTimeout(run, last + ms - now);
+    } else {
+      run();
+    }
+  }, {
+    flush() {
+      if (lastArgs) {
+        run();
+      }
+    }
+  });
+}
+const onAncestorScroll = (x, onScroll) => {
+  const find = (x2) => x2.parentElement ? [x2.parentElement, ...find(x2.parentElement)] : [document];
+  const ancestors = find(x);
+  for (const ancestor of ancestors) {
+    ancestor.addEventListener("scroll", onScroll);
+  }
+  return () => {
+    for (const ancestor of ancestors) {
+      ancestor.removeEventListener("scroll", onScroll);
+    }
+  };
+};
+const findScrollRoot = (x) => {
+  const parent = x.parentElement;
+  if (!parent)
+    return document.documentElement;
+  if (parent.scrollHeight > parent.clientHeight)
+    return parent;
+  return findScrollRoot(parent);
+};
+const relativeOffset = (x, y) => {
+  if (x.offsetParent === y.offsetParent || !x.offsetParent)
+    return x.offsetTop - y.offsetTop;
+  if (x.offsetParent instanceof HTMLElement)
+    return relativeOffset(x.offsetParent, y) + x.offsetTop;
+  return 0;
+};
+function Virtualized(_a) {
+  var _b = _a, {
+    header,
+    children
+  } = _b, props = __objRest(_b, [
+    "header",
+    "children"
+  ]);
+  var _a2, _b2, _c, _d;
+  const table = useTableContext();
+  const virtual = table.useState("props.virtual");
+  const probeRef = useRef(null);
+  const [, setCounter] = useState(0);
+  const {
+    itemIds = [],
+    from = 0,
+    to,
+    before = 0,
+    after = 0
+  } = table.useState((state) => {
+    var _a3;
+    const itemIds2 = state.activeItems.map((item) => item.id);
+    const root = probeRef.current && findScrollRoot(probeRef.current);
+    if (!state.props.virtual)
+      return {
+        itemIds: itemIds2
+      };
+    if (!probeRef.current || !root || !document.contains(root))
+      return {};
+    const {
+      rowHeight,
+      initalRowHeight,
+      overscan = 200,
+      overscanTop,
+      overscanBottom
+    } = (_a3 = state.props.virtual instanceof Object ? state.props.virtual : void 0) != null ? _a3 : {};
+    let totalHeight = 0;
+    const rowHeights = itemIds2.map((itemId, index) => {
+      var _a4, _b3;
+      const h = (_b3 = (_a4 = rowHeight != null ? rowHeight : state.rowHeights.get(itemId)) != null ? _a4 : initalRowHeight) != null ? _b3 : index === 0 ? 100 : totalHeight / index;
+      totalHeight += h;
+      return h;
+    });
+    const probeOffset = relativeOffset(probeRef.current, root);
+    const headerHeight = probeRef.current.offsetTop;
+    const topOfTable = root.scrollTop - probeOffset + headerHeight;
+    const bottomOfTable = topOfTable + root.clientHeight - headerHeight;
+    let from2 = 0, to2 = itemIds2.length, before2 = 0, after2 = 0;
+    for (const h of rowHeights) {
+      if (before2 + h > topOfTable - (overscanTop != null ? overscanTop : overscan))
+        break;
+      from2++;
+      before2 += h;
+    }
+    for (const h of rowHeights.reverse()) {
+      if (after2 + h > totalHeight - bottomOfTable - (overscanBottom != null ? overscanBottom : overscan))
+        break;
+      to2--;
+      after2 += h;
+    }
+    return {
+      itemIds: itemIds2.slice(from2, to2),
+      from: from2,
+      to: to2,
+      before: before2,
+      after: after2
+    };
+  });
+  const throttleScroll = (_b2 = (_a2 = typeof virtual === "boolean" ? void 0 : virtual) == null ? void 0 : _a2.throttleScroll) != null ? _b2 : 500;
+  const incCounter = useMemo(() => throttle(() => setCounter((c) => c + 1), throttleScroll), [throttleScroll]);
+  useEffect(() => {
+    if (!virtual || !probeRef.current)
+      return;
+    return onAncestorScroll(probeRef.current, incCounter);
+  }, [probeRef.current, incCounter]);
+  (_d = (_c = table.getState().props).debugRender) == null ? void 0 : _d.call(_c, `Virtualalized render ${from} to ${to}`);
+  return jsxs("div", __spreadProps(__spreadValues({}, props), {
+    children: [header, virtual && jsx("div", {
+      style: {
+        gridColumn: "1 / -1",
+        height: before
+      },
+      ref: probeRef
+    }), children(itemIds, from), virtual && jsx("div", {
+      style: {
+        gridColumn: "1 / -1",
+        height: after
+      }
+    })]
+  }));
+}
+const TableContext = createContext(null);
+const ColumnContext = createContext(null);
+function useTableContext() {
+  const value = useContext(TableContext);
+  if (!value)
+    throw Error("No table context available");
+  return value;
+}
+function useColumnContext() {
+  const value = useContext(ColumnContext);
+  if (value === null)
+    throw Error("No column context available");
+  return value;
+}
+memo(function TableInner2({
+  hidden
+}) {
+  var _a, _b;
+  const table = useTableContext();
+  const fullWidth = table.useState("props.fullWidth");
+  const activeColumns = table.useState((state) => state.activeColumns.map((column) => ({
+    id: column.id,
+    width: column.width,
+    css: column.css,
+    header: column.header
+  })));
+  const columnWidths = table.useState("columnWidths", {
+    throttle: 16
+  });
+  const columnStyleOverride = table.useState("columnStyleOverride", {
+    throttle: 16
+  });
+  const defaultWidth = table.useState("props.defaultWidth");
+  const css = table.useState("props.css");
+  const stickyHeader = table.useState("props.stickyHeader");
+  const enableSelection = table.useState("props.enableSelection");
+  const enableColumnSelection = table.useState("props.enableColumnSelection");
+  const enableExport = table.useState((state) => !!state.props.enableExport.copy || !!state.props.enableExport.download);
+  const cssVariables = useCssVariables();
+  (_b = (_a = table.getState().props).debugRender) == null ? void 0 : _b.call(_a, "render table inner");
+  return jsx(Virtualized, {
+    css: [cssVariables, defaultClasses.table, css == null ? void 0 : css.table, {
+      gridTemplateColumns: [
+        fullWidth === "right" || fullWidth === true ? "auto" : "0",
+        "max-content",
+        ...activeColumns.map((column) => {
+          var _a2, _b2, _c;
+          return (_c = (_b2 = (_a2 = columnWidths.get(column.id)) != null ? _a2 : column.width) != null ? _b2 : defaultWidth) != null ? _c : "max-content";
+        }),
+        fullWidth === "left" || fullWidth === true ? "auto" : "0"
+      ].join(" ")
+    }, hidden && {
+      visibility: "hidden"
+    }],
+    header: jsxs(Fragment, {
+      children: [jsx("div", {
+        css: [defaultClasses.headerFill, stickyHeader && defaultClasses.sticky, css == null ? void 0 : css.headerCell]
+      }), jsxs("div", {
+        css: [defaultClasses.headerCell, stickyHeader && defaultClasses.sticky, css == null ? void 0 : css.headerCell],
+        children: [enableSelection && jsx(SelectComponent, {}), enableColumnSelection && jsx(ColumnSelection, {}), enableExport && jsx(Export, {})]
+      }), jsx(ColumnHeaderContext.Provider, {
+        children: activeColumns.map((column) => {
+          var _a2;
+          return jsx(ColumnContext.Provider, {
+            value: column.id,
+            children: jsxs(ColumnHeader, {
+              css: [defaultClasses.headerCell, css == null ? void 0 : css.headerCell, (_a2 = column.css) == null ? void 0 : _a2.headerCell, columnStyleOverride.get(column.id), stickyHeader && defaultClasses.sticky],
+              children: [jsx(FilterControl, {}), jsx(SortComponent, {
+                children: column.header
+              }), jsx("div", {
+                css: {
+                  flex: 1
+                }
+              }), jsx(ResizeHandle, {})]
+            }, column.id)
+          }, column.id);
+        })
+      }), jsx("div", {
+        css: [defaultClasses.headerFill, stickyHeader && defaultClasses.sticky, css == null ? void 0 : css.headerCell]
+      })]
+    }),
+    children: (itemIds, startIndex) => itemIds.map((itemId, index) => jsx(Row, {
+      itemId,
+      rowIndex: startIndex + index
+    }, itemId))
+  });
+});
+//# sourceMappingURL=schummar-table.js.map