schummar-table 0.5.0-beta-1 → 0.5.0-beta-4

package/dist/cjs/index.js

@@ -0,0 +1,2275 @@
+"use strict";
+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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports[Symbol.toStringTag] = "Module";
+var react = require("react");
+var dayzed = require("dayzed");
+var tableTheme = require("./tableTheme.js");
+var jsxRuntime = require("@emotion/react/jsx-runtime");
+var immer = require("immer");
+var react$1 = require("schummar-state/react");
+require("@emotion/react");
+require("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 weekDays = [0, 1, 2, 3, 4, 5, 6];
+const months = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
+const startOfDay = (d) => new Date(d.getFullYear(), d.getMonth(), d.getDate());
+const endOfDay = (d) => new Date(d.getFullYear(), d.getMonth(), d.getDate() + 1, 0, 0, 0, -1);
+const today = () => {
+  const today2 = startOfDay(new Date());
+  return {
+    min: today2,
+    max: today2
+  };
+};
+function dateIntersect(a, b) {
+  if (a instanceof Date) {
+    a = {
+      min: a,
+      max: a
+    };
+  }
+  if (b instanceof Date) {
+    b = {
+      min: b,
+      max: b
+    };
+  }
+  if (!(a == null ? void 0 : a.min) || !a.max || !(b == null ? void 0 : b.min) || !b.max) {
+    return false;
+  }
+  return !(endOfDay(a.max) < startOfDay(b.min) || startOfDay(a.min) > endOfDay(b.max));
+}
+function DatePicker({
+  value,
+  onChange,
+  rangeSelect,
+  locale,
+  firstDayOfWeek = 0
+}) {
+  const {
+    components: {
+      IconButton
+    },
+    icons: {
+      ChevronRight
+    }
+  } = useTheme();
+  const [baseDate] = react.useState(new Date());
+  const [dateInView, setDateInView] = react.useState(baseDate);
+  const [currentMin, setCurrentMin] = react.useState();
+  const [hovered, setHovered] = react.useState();
+  const min = currentMin != null ? currentMin : value instanceof Date ? value : value == null ? void 0 : value.min;
+  const max = currentMin ? void 0 : value instanceof Date ? value : value == null ? void 0 : value.max;
+  const {
+    calendars,
+    getBackProps,
+    getForwardProps,
+    getDateProps
+  } = dayzed.useDayzed({
+    onDateSelected: () => void 0,
+    firstDayOfWeek,
+    showOutsideDays: true,
+    date: dateInView,
+    onOffsetChanged: (offset) => setDateInView(new Date(dateInView.getFullYear(), dateInView.getMonth() + offset)),
+    offset: 0
+  });
+  const formatWeekday = react.useMemo(() => {
+    const {
+      format
+    } = new Intl.DateTimeFormat(locale, {
+      weekday: "short"
+    });
+    return (weekDay) => format(new Date(Date.UTC(2021, 5, weekDay)));
+  }, [locale]);
+  react.useEffect(() => setDateInView(value === null ? new Date() : value instanceof Date ? value : value.max), [value]);
+  return jsxRuntime.jsx("div", {
+    children: calendars.map(({
+      month,
+      year,
+      weeks
+    }) => jsxRuntime.jsxs("div", {
+      children: [jsxRuntime.jsxs("div", {
+        css: {
+          margin: "calc(var(--spacing) * 4) 0",
+          display: "grid",
+          gridAutoFlow: "column",
+          justifyContent: "space-between",
+          alignItems: "center"
+        },
+        children: [jsxRuntime.jsx(IconButton, __spreadProps(__spreadValues({}, getBackProps({
+          calendars
+        })), {
+          children: jsxRuntime.jsx(ChevronRight, {
+            css: {
+              transform: "rotate3d(0, 0, 1, 180deg)"
+            }
+          })
+        })), jsxRuntime.jsxs("div", {
+          css: {
+            display: "flex"
+          },
+          children: [jsxRuntime.jsx(MonthSelector, {
+            value: month,
+            onChange: (month2) => setDateInView(new Date(year, month2)),
+            locale
+          }), jsxRuntime.jsx(YearSelector, {
+            value: year,
+            onChange: (year2) => setDateInView(new Date(year2, month))
+          })]
+        }), jsxRuntime.jsx(IconButton, __spreadProps(__spreadValues({}, getForwardProps({
+          calendars
+        })), {
+          children: jsxRuntime.jsx(ChevronRight, {})
+        }))]
+      }), jsxRuntime.jsxs("div", {
+        css: {
+          display: "grid",
+          gridTemplateColumns: "repeat(7, max-content)",
+          fontWeight: "bold"
+        },
+        children: [weekDays.map((_v, weekDay) => jsxRuntime.jsx("div", {
+          css: {
+            justifySelf: "center",
+            marginBottom: "var(--spacing)"
+          },
+          children: formatWeekday(weekDay)
+        }, weekDay)), weeks.map((week, index) => week.map((dateObj, dayIndex) => {
+          if (!dateObj) {
+            return jsxRuntime.jsx("div", {});
+          }
+          const {
+            prevMonth,
+            nextMonth,
+            date,
+            today: today2
+          } = dateObj;
+          const selected = date.getTime() === (min == null ? void 0 : min.getTime()) || min && max && dateIntersect(date, {
+            min,
+            max
+          });
+          const preSelected = !selected && (date.getTime() === (hovered == null ? void 0 : hovered.getTime()) || min && !max && hovered && dateIntersect(date, min <= hovered ? {
+            min,
+            max: hovered
+          } : {
+            min: hovered,
+            max: min
+          }));
+          return jsxRuntime.jsx("button", __spreadProps(__spreadValues({
+            css: [{
+              padding: 10,
+              border: "1px solid transparent",
+              background: "transparent",
+              cursor: "pointer"
+            }, (prevMonth || nextMonth) && {
+              color: tableTheme.gray
+            }, today2 && {
+              border: "1px solid var(--secondaryMain)"
+            }, selected && {
+              background: "var(--primaryMain)",
+              color: "var(--primaryContrastText)"
+            }, preSelected && {
+              background: "var(--primaryLight)",
+              color: "var(--primaryContrastText)"
+            }]
+          }, getDateProps({
+            dateObj
+          })), {
+            onClick: () => {
+              if (!rangeSelect) {
+                setCurrentMin(void 0);
+                onChange(date);
+              } else if (min && !max) {
+                setCurrentMin(void 0);
+                if (date > min) {
+                  onChange({
+                    min,
+                    max: date
+                  });
+                } else {
+                  onChange({
+                    min: date,
+                    max: min
+                  });
+                }
+              } else {
+                setCurrentMin(date);
+              }
+            },
+            onPointerOver: () => setHovered(date),
+            onPointerOut: () => setHovered(void 0),
+            children: date.getDate()
+          }), `${index}-${dayIndex}`);
+        }))]
+      })]
+    }, `${month}${year}`))
+  });
+}
+function MonthSelector({
+  value,
+  onChange,
+  locale
+}) {
+  const {
+    components: {
+      Popover
+    }
+  } = useTheme();
+  const cssVariables = useCssVariables();
+  const [anchor, setAnchor] = react.useState();
+  const formatMonth = react.useMemo(() => {
+    const {
+      format
+    } = new Intl.DateTimeFormat(locale, {
+      month: "long"
+    });
+    return (month) => format(new Date(2021, month));
+  }, [locale]);
+  return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [jsxRuntime.jsx("button", {
+      css: {
+        border: "none",
+        background: "transparent",
+        fontSize: "inherit",
+        cursor: "pointer"
+      },
+      onClick: (e) => setAnchor(e.currentTarget),
+      children: formatMonth(value)
+    }), jsxRuntime.jsx(Popover, {
+      open: !!anchor,
+      anchorEl: anchor != null ? anchor : null,
+      onClose: () => setAnchor(void 0),
+      align: "center",
+      css: cssVariables,
+      children: jsxRuntime.jsx("div", {
+        css: {
+          display: "grid"
+        },
+        children: months.map((month) => jsxRuntime.jsx("button", {
+          css: [{
+            padding: "var(--spacing)",
+            border: "none",
+            background: "transparent",
+            "&:hover": {
+              background: "var(--primaryLight)"
+            }
+          }, month === value && {
+            background: "var(--primaryMain)"
+          }],
+          onClick: () => onChange(month),
+          children: formatMonth(month)
+        }, month))
+      })
+    })]
+  });
+}
+function YearSelector({
+  value,
+  onChange,
+  locale
+}) {
+  const [input, setInput] = react.useState();
+  function apply() {
+    onChange(Number(input));
+    setInput(void 0);
+  }
+  const formatYear = react.useMemo(() => {
+    const {
+      format
+    } = new Intl.DateTimeFormat(locale, {
+      year: "numeric"
+    });
+    return (year) => format(new Date(year, 0, 1));
+  }, [locale]);
+  if (input === void 0) {
+    return jsxRuntime.jsx("div", {
+      onClick: () => setInput(String(value)),
+      children: formatYear(value)
+    });
+  }
+  return jsxRuntime.jsx("input", {
+    css: {
+      width: "4ch"
+    },
+    value: input,
+    onChange: (e) => {
+      if (e.target.value.match(/^\d{0,4}$/)) {
+        setInput(e.target.value);
+      }
+    },
+    onBlur: apply,
+    onKeyPress: (e) => e.key === "Enter" && apply()
+  });
+}
+function convertDate(x) {
+  if (x instanceof Date)
+    return x;
+  if (typeof x === "number" || typeof x === "string")
+    return new Date(x);
+  return null;
+}
+function convertDateOrRange(x) {
+  if (x instanceof Object && "min" in x && "max" in x) {
+    const range = {
+      min: convertDate(x.min),
+      max: convertDate(x.max)
+    };
+    return range.min && range.max ? range : null;
+  }
+  return convertDate(x);
+}
+function convertDateOrArray(x) {
+  if (x instanceof Array)
+    return x.map(convertDateOrRange).filter(Boolean);
+  return convertDateOrRange(x);
+}
+function DateFilter(_a) {
+  var _b = _a, {
+    locale,
+    firstDayOfWeek,
+    singleSelect,
+    filterBy = convertDateOrArray
+  } = _b, props = __objRest(_b, [
+    "locale",
+    "firstDayOfWeek",
+    "singleSelect",
+    "filterBy"
+  ]);
+  const {
+    components: {
+      Button
+    },
+    text
+  } = useTheme();
+  const {
+    value = null,
+    onChange
+  } = useFilter(__spreadProps(__spreadValues({}, props), {
+    filterBy,
+    id: "dateFilter",
+    isActive(filterValue) {
+      return !!filterValue;
+    },
+    test(filterValue, value2) {
+      return dateIntersect(filterValue, value2);
+    }
+  }));
+  const formatDate = react.useMemo(() => {
+    const {
+      format
+    } = new Intl.DateTimeFormat(locale, {
+      dateStyle: "medium"
+    });
+    return format;
+  }, [locale]);
+  return jsxRuntime.jsxs("div", {
+    css: {
+      padding: "calc(var(--spacing) * 2)",
+      display: "grid",
+      gap: "var(--spacing)",
+      justifyItems: "center"
+    },
+    children: [jsxRuntime.jsxs("div", {
+      css: {
+        marginBottom: "var(--spacing)",
+        display: "grid",
+        gridAutoFlow: "column",
+        gap: "calc(var(--spacing) * 4)",
+        justifyContent: "space-between",
+        alignItems: "center"
+      },
+      children: [jsxRuntime.jsx("div", {
+        css: {
+          minWidth: "22ch"
+        },
+        children: !value ? text.dateFilter : value instanceof Date ? formatDate(value) : [formatDate(value.min), formatDate(value.max)].join(" - ")
+      }), jsxRuntime.jsxs("div", {
+        css: {
+          display: "grid",
+          gridAutoFlow: "column",
+          gap: "var(--spacing)"
+        },
+        children: [jsxRuntime.jsx(Button, {
+          variant: "contained",
+          onClick: () => onChange(today()),
+          children: text.today
+        }), jsxRuntime.jsx(Button, {
+          variant: "contained",
+          onClick: () => onChange(null),
+          children: text.reset
+        })]
+      })]
+    }), jsxRuntime.jsx(DatePicker, {
+      rangeSelect: !singleSelect,
+      value,
+      onChange,
+      locale,
+      firstDayOfWeek
+    })]
+  });
+}
+const flatMap = (arr, flatMap2) => {
+  return [...arr].reduce((out, cur) => out.concat(flatMap2(cur)), []);
+};
+const orderBy = (arr, selectors = [], direction = []) => {
+  if (selectors.length === 0)
+    selectors = [(t) => t];
+  return [...arr].sort((a, b) => {
+    var _a, _b;
+    for (let i = 0; i < selectors.length; i++) {
+      const _a2 = (_a = selectors[i]) == null ? void 0 : _a.call(selectors, a);
+      const _b2 = (_b = selectors[i]) == null ? void 0 : _b.call(selectors, b);
+      const dir = direction[i] === "desc" ? -1 : 1;
+      if (_a2 > _b2)
+        return dir;
+      if (_a2 < _b2)
+        return -dir;
+    }
+    return 0;
+  });
+};
+const uniq = (arr) => {
+  const set = /* @__PURE__ */ new Set();
+  for (const t of arr)
+    set.add(t);
+  return Array.from(set);
+};
+const intersect = (a, b) => {
+  const result = /* @__PURE__ */ new Set();
+  for (const x of a)
+    if (b.has(x))
+      result.add(x);
+  return result;
+};
+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;
+};
+const asString = (x) => {
+  if (x instanceof Array)
+    return x.map(asString).join(", ");
+  if (x instanceof Object)
+    return JSON.stringify(x);
+  return String(x != null ? x : "");
+};
+const asStringOrArray = (x) => {
+  if (x instanceof Array)
+    return x.map(asString);
+  return asString(x);
+};
+const castArray = (a) => a instanceof Array ? a : [a];
+const cx = (...classNames) => classNames.flatMap((entry) => {
+  if (!entry)
+    return [];
+  if (typeof entry === "string")
+    return [entry];
+  return Object.entries(entry).filter(([, predicate]) => predicate).map(([className]) => className);
+}).join(" ");
+function FormControlLabel({
+  control,
+  label
+}) {
+  return jsxRuntime.jsxs("label", {
+    css: {
+      display: "flex",
+      alignItems: "center",
+      cursor: "pointer",
+      userSelect: "none",
+      "& > *": {
+        cursor: "pointer"
+      }
+    },
+    children: [control, jsxRuntime.jsx("span", {
+      css: {
+        marginLeft: "var(--spacing)"
+      },
+      children: label
+    })]
+  });
+}
+class Queue {
+  constructor() {
+    this.q = new Array();
+    this.isRunning = false;
+  }
+  run(job, replace) {
+    return new Promise((resolve, reject) => {
+      if (replace) {
+        this.q = [];
+      }
+      this.q.push({ job, resolve, reject });
+      if (!this.isRunning)
+        this.start();
+    });
+  }
+  async start() {
+    this.isRunning = true;
+    let next;
+    while (next = this.q.shift()) {
+      try {
+        const result = await next.job();
+        next.resolve(result);
+      } catch (e) {
+        next.reject(e);
+      }
+    }
+    this.isRunning = false;
+  }
+}
+const KEYS = ["sort", "selection", "expanded", "hiddenColumns", "filterValues", "columnWidths", "columnOrder"];
+function stringify(value) {
+  function prepare(value2) {
+    if (value2 instanceof Date) {
+      return { __date: value2.toJSON() };
+    }
+    if (value2 instanceof Set) {
+      return { __set: Array.from(value2).map(prepare) };
+    }
+    if (value2 instanceof Map) {
+      return { __map: Array.from(value2.entries()).map((entry) => entry.map(prepare)) };
+    }
+    if (value2 instanceof Array) {
+      return value2.map(prepare);
+    }
+    if (value2 instanceof Object) {
+      return Object.fromEntries(Object.entries(value2).map(([k, v]) => [k, prepare(v)]));
+    }
+    return value2;
+  }
+  return JSON.stringify(prepare(value));
+}
+function parse(value) {
+  return JSON.parse(value, (_key, value2) => {
+    if (value2 instanceof Object && "__date" in value2) {
+      return new Date(value2.__date);
+    }
+    if (value2 instanceof Object && "__set" in value2) {
+      return new Set(value2.__set);
+    }
+    if (value2 instanceof Object && "__map" in value2) {
+      return new Map(value2.__map);
+    }
+    return value2;
+  });
+}
+function useTableStateStorage() {
+  const table = useTableContext();
+  const [isHydrated, setIsHydrated] = react.useState(false);
+  react.useEffect(() => {
+    const { persist } = table.getState().props;
+    if (!persist) {
+      setIsHydrated(true);
+      return;
+    }
+    let isCanceled = false;
+    (async () => {
+      var _a, _b;
+      try {
+        const { storage, id = "table", include, exclude } = persist;
+        const json = await storage.getItem(`${id}_state`);
+        if (isCanceled || !json)
+          return;
+        const data = parse(json);
+        (_b = (_a = table.getState().props).debug) == null ? void 0 : _b.call(_a, "load", json, data);
+        table.update((state) => {
+          var _a2, _b2, _c, _d;
+          for (const key of KEYS) {
+            if ((!include || include.includes(key)) && !(exclude == null ? void 0 : exclude.includes(key)) && key in data) {
+              if (key === "filterValues") {
+                for (const [id2, value] of data[key]) {
+                  if ((_b2 = (_a2 = state.filters.get(id2)) == null ? void 0 : _a2.persist) != null ? _b2 : true) {
+                    state.filterValues.set(id2, value);
+                  }
+                }
+              } else {
+                state[key] = data[key];
+                if (key === "expanded" || key === "hiddenColumns" || key === "selection" || key === "sort") {
+                  (_d = (_c = state.props)[`on${key.slice(0, 1).toUpperCase() + key.slice(1)}Change`]) == null ? void 0 : _d.call(_c, data[key]);
+                }
+              }
+            }
+          }
+        });
+      } catch (e) {
+        console.error("Failed to load table state:", e);
+      } finally {
+        setIsHydrated(true);
+      }
+    })();
+    return () => {
+      isCanceled = true;
+    };
+  }, []);
+  react.useEffect(() => {
+    if (!isHydrated)
+      return;
+    const q = new Queue();
+    return table.subscribe((state) => {
+      var _a, _b;
+      if (!state.props.persist)
+        return;
+      const { storage, id = "table", include, exclude } = state.props.persist;
+      const data = {};
+      for (const key of KEYS) {
+        if ((!include || include.includes(key)) && !(exclude == null ? void 0 : exclude.includes(key))) {
+          if (key === "filterValues") {
+            data[key] = /* @__PURE__ */ new Map();
+            for (const [id2, value] of state.filterValues) {
+              if ((_b = (_a = state.filters.get(id2)) == null ? void 0 : _a.persist) != null ? _b : true) {
+                data.filterValues.set(id2, value);
+              }
+            }
+          } else {
+            data[key] = state[key];
+          }
+        }
+      }
+      return { storage, id, data };
+    }, (props) => {
+      var _a, _b;
+      if (!props)
+        return;
+      const { storage, id, data } = props;
+      (_b = (_a = table.getState().props).debug) == null ? void 0 : _b.call(_a, "save", data, stringify(data));
+      q.run(async () => {
+        await storage.setItem(`${id}_state`, stringify(data));
+      }, true);
+    }, { throttle: 1e3 });
+  }, [isHydrated]);
+  return isHydrated;
+}
+function calcItems(state) {
+  react.useEffect(() => state.addReaction((state2) => [
+    state2.props.items,
+    state2.props.id,
+    state2.props.parentId,
+    state2.props.revealFiltered,
+    state2.sort,
+    state2.filters,
+    state2.filterValues,
+    state2.activeColumns,
+    state2.expanded
+  ], ([items = [], id, parentId, revealFiltered, sort, filters, filterValues, activeColumns], draft) => {
+    const tableItems = items.map((item) => __spreadProps(__spreadValues({}, item), {
+      id: id(item),
+      parentId: parentId == null ? void 0 : parentId(item),
+      children: []
+    }));
+    let sorted;
+    if (sort.length === 0) {
+      sorted = tableItems;
+    } else {
+      const selectors = flatMap(sort, (sort2) => {
+        const column = activeColumns.find((column2) => column2.id === sort2.columnId);
+        if (!column)
+          return [];
+        const sortBy = column.sortBy instanceof Array ? column.sortBy : [column.sortBy];
+        return sortBy.map((sortBy2) => ({ selector: (item) => sortBy2(column.value(item), item), direction: sort2.direction }));
+      }).filter(Boolean);
+      sorted = orderBy(tableItems, selectors.map((x) => x.selector), selectors.map((x) => x.direction));
+    }
+    const lookup = /* @__PURE__ */ new Map();
+    for (const item of sorted) {
+      lookup.set(item.id, item);
+    }
+    for (const item of sorted) {
+      const parent = item.parentId !== void 0 ? lookup.get(item.parentId) : void 0;
+      parent == null ? void 0 : parent.children.push(item);
+    }
+    const allItems = new Array();
+    const allItemsById = /* @__PURE__ */ new Map();
+    const traverse = (items2) => {
+      for (const item of items2) {
+        allItems.push(item);
+        allItemsById.set(item.id, item);
+        traverse(item.children);
+      }
+    };
+    traverse(sorted.filter((item) => item.parentId === void 0));
+    let expandedChanged = false;
+    const activeItemsById = /* @__PURE__ */ new Map();
+    const activeSet = /* @__PURE__ */ new Set();
+    const activeItems = [...allItems].reverse().filter((item) => {
+      let isActive = activeSet.has(item.id);
+      isActive || (isActive = activeColumns.every((column) => {
+        var _a;
+        const filter = filters.get(column.id);
+        if (!filter)
+          return true;
+        const filterValue = filterValues.get(column.id);
+        if (filterValue === void 0 || !filter.isActive(filterValue))
+          return true;
+        const filterBy = (_a = filter.filterBy) != null ? _a : (x) => x;
+        const value = filterBy(column.value(item), item);
+        return castArray(value).some((value2) => filter.test(filterValue, value2));
+      }));
+      if (isActive && item.parentId !== void 0) {
+        if (revealFiltered && Array.from(filters.entries()).some(([id2, filter]) => {
+          const filterValue = filterValues.get(id2);
+          return !!filter && filterValue !== void 0 && filter.isActive(filterValue);
+        })) {
+          expandedChanged || (expandedChanged = !draft.expanded.has(item.parentId));
+          draft.expanded.add(item.parentId);
+        } else if (!draft.expanded.has(item.parentId)) {
+          isActive = false;
+        }
+      }
+      if (isActive && item.parentId !== void 0) {
+        activeSet.add(item.parentId);
+      }
+      if (isActive) {
+        activeItemsById.set(item.id, item);
+      }
+      return isActive;
+    }).reverse();
+    draft.items = immer.castDraft(allItems);
+    draft.itemsById = immer.castDraft(allItemsById);
+    draft.activeItems = immer.castDraft(activeItems);
+    draft.activeItemsById = immer.castDraft(activeItemsById);
+    if (expandedChanged) {
+      setTimeout(() => {
+        var _a, _b;
+        (_b = (_a = state.getState().props).onExpandedChange) == null ? void 0 : _b.call(_a, state.getState().expanded);
+      });
+    }
+  }, { runNow: true }), [state]);
+}
+const noopParentId = () => void 0;
+function calcProps(props) {
+  const columnCache = react.useRef(/* @__PURE__ */ new Map());
+  return react.useMemo(() => {
+    var _c, _d, _e, _f, _g, _h;
+    let id;
+    if (props.id instanceof Function) {
+      id = props.id;
+    } else {
+      id = (item) => item[props.id];
+    }
+    let parentId;
+    if (props.parentId instanceof Function) {
+      parentId = props.parentId;
+    } else if (typeof props.parentId === "string") {
+      parentId = (item) => item[props.parentId];
+    } else {
+      parentId = noopParentId;
+    }
+    let inputColumns;
+    if (props.columns instanceof Function) {
+      inputColumns = props.columns((value, column) => __spreadProps(__spreadValues({}, column), { value }));
+    } else {
+      inputColumns = props.columns.map((column) => __spreadProps(__spreadValues({}, column), { dependecies: void 0 }));
+    }
+    const newColumnCache = /* @__PURE__ */ new Map();
+    const columns = inputColumns.map(function(_a, index) {
+      var _b = _a, {
+        id: id2,
+        header = null,
+        renderCell = asString,
+        exportCell = asString,
+        sortBy = (v) => typeof v === "number" || v instanceof Date ? v : String(v),
+        dependencies = []
+      } = _b, props2 = __objRest(_b, [
+        "id",
+        "header",
+        "renderCell",
+        "exportCell",
+        "sortBy",
+        "dependencies"
+      ]);
+      var _a2;
+      const [depsInCache, columnInCache] = (_a2 = columnCache.current.get(id2 != null ? id2 : index)) != null ? _a2 : [];
+      let column;
+      if (depsInCache && columnInCache && depsInCache.length === dependencies.length && depsInCache.every((x, i) => dependencies[i] === x)) {
+        column = columnInCache;
+      } else {
+        column = __spreadValues({
+          id: id2 != null ? id2 : index,
+          header,
+          renderCell,
+          exportCell,
+          sortBy,
+          dependencies
+        }, props2);
+      }
+      newColumnCache.set(id2 != null ? id2 : index, [dependencies, column]);
+      return column;
+    });
+    columnCache.current = newColumnCache;
+    let copy;
+    if (props.enableExport === true || props.enableExport instanceof Object && props.enableExport.copy === true) {
+      copy = { separator: "	" };
+    } else if (props.enableExport && props.enableExport.copy instanceof Object) {
+      copy = props.enableExport.copy;
+    }
+    let download;
+    if (props.enableExport === true || props.enableExport instanceof Object && props.enableExport.download === true) {
+      download = { sepPrefix: true };
+    } else if (props.enableExport && props.enableExport.download instanceof Object) {
+      download = props.enableExport.download;
+    }
+    const enableExport = { copy, download };
+    return __spreadProps(__spreadValues({}, props), {
+      id,
+      parentId,
+      columns,
+      enableSelection: (_c = props.enableSelection) != null ? _c : true,
+      selectSyncChildren: (_d = props.selectSyncChildren) != null ? _d : true,
+      stickyHeader: (_e = props.stickyHeader) != null ? _e : true,
+      enableExport,
+      enableColumnSelection: (_f = props.enableColumnSelection) != null ? _f : true,
+      enableColumnResize: (_g = props.enableColumnResize) != null ? _g : true,
+      enableColumnReorder: (_h = props.enableColumnReorder) != null ? _h : true
+    });
+  }, [props]);
+}
+function cleanupState(state) {
+  react.useEffect(() => state.addReaction((state2) => [state2.props.columns, state2.itemsById, state2.activeItemsById, state2.activeColumns], ([columns, itemsById, activeItemsById, activeColumns], draft) => {
+    var _a, _b, _c, _d, _e, _f;
+    const columnIds = new Set(columns.map((column) => column.id));
+    const activeColumnIds = new Set(activeColumns.map((column) => column.id));
+    const newSort = draft.sort.filter((s) => activeColumnIds.has(s.columnId));
+    if (newSort.length < draft.sort.length) {
+      draft.sort = newSort;
+      (_b = (_a = draft.props).onSortChange) == null ? void 0 : _b.call(_a, newSort);
+    }
+    for (const id of draft.filters.keys()) {
+      if (!activeColumnIds.has(id))
+        draft.filters.delete(id);
+    }
+    for (const id of draft.filterValues.keys()) {
+      if (!activeColumnIds.has(id))
+        draft.filterValues.delete(id);
+    }
+    for (const id of draft.hiddenColumns.keys()) {
+      if (!columnIds.has(id))
+        draft.hiddenColumns.delete(id);
+    }
+    for (const id of draft.columnWidths.keys()) {
+      if (!columnIds.has(id))
+        draft.columnWidths.delete(id);
+    }
+    for (const id of draft.columnOrder) {
+      if (!columnIds.has(id))
+        draft.columnOrder = draft.columnOrder.filter((x) => x !== id);
+    }
+    if (draft.props.items) {
+      const newSelection = intersect(draft.selection, activeItemsById);
+      if (newSelection.size !== draft.selection.size) {
+        draft.selection = newSelection;
+        (_d = (_c = draft.props).onSelectionChange) == null ? void 0 : _d.call(_c, newSelection);
+      }
+      const newExpanded = intersect(draft.expanded, itemsById);
+      if (newExpanded.size < draft.expanded.size) {
+        draft.expanded = newExpanded;
+        (_f = (_e = draft.props).onExpandedChange) == null ? void 0 : _f.call(_e, newExpanded);
+      }
+    }
+  }, { runNow: true }), [state]);
+}
+function filterColumns(state) {
+  react.useEffect(() => state.addReaction((state2) => [state2.props.columns, state2.hiddenColumns, state2.columnOrder], ([columns, hiddenColumns, columnOrder], draft) => {
+    draft.activeColumns = orderBy(columns.filter((column) => !hiddenColumns.has(column.id)), [(column) => columnOrder.indexOf(column.id)]);
+  }, { runNow: true }), [state]);
+}
+function syncSelections(state) {
+  react.useEffect(() => state.addReaction((state2) => [state2.props.selectSyncChildren, state2.selection, state2.activeItems], ([selectSyncChildren, selection, activeItems], state2) => {
+    var _a, _b;
+    if (!selectSyncChildren)
+      return;
+    const newSelection = new Set(selection);
+    for (const item of activeItems) {
+      if (item.parentId !== void 0 && newSelection.has(item.parentId)) {
+        newSelection.add(item.id);
+      }
+    }
+    if (newSelection.size !== selection.size) {
+      state2.selection = newSelection;
+      (_b = (_a = state2.props).onSelectionChange) == null ? void 0 : _b.call(_a, newSelection);
+    }
+  }, { runNow: true }), [state]);
+}
+function useTableState(_props) {
+  const props = calcProps(_props);
+  const theme = tableTheme.useTableTheme(props);
+  const state = react.useMemo(() => {
+    var _a, _b, _c, _d;
+    return new react$1.Store({
+      props,
+      theme,
+      sort: (_a = props.defaultSort) != null ? _a : [],
+      selection: (_b = props.defaultSelection) != null ? _b : /* @__PURE__ */ new Set(),
+      expanded: (_c = props.defaultExpanded) != null ? _c : /* @__PURE__ */ new Set(),
+      rowHeights: /* @__PURE__ */ new Map(),
+      filters: /* @__PURE__ */ new Map(),
+      filterValues: /* @__PURE__ */ new Map(),
+      hiddenColumns: (_d = props.defaultHiddenColumns) != null ? _d : /* @__PURE__ */ new Set(),
+      columnWidths: /* @__PURE__ */ new Map(),
+      columnOrder: props.columns.map((column) => column.id),
+      columnStyleOverride: /* @__PURE__ */ new Map(),
+      activeColumns: [],
+      items: [],
+      itemsById: /* @__PURE__ */ new Map(),
+      activeItems: [],
+      activeItemsById: /* @__PURE__ */ new Map(),
+      lastSelectedId: void 0
+    });
+  }, []);
+  filterColumns(state);
+  calcItems(state);
+  syncSelections(state);
+  cleanupState(state);
+  react.useEffect(() => {
+    state.update((state2) => {
+      state2.props = immer.castDraft(props);
+      if (props.sort)
+        state2.sort = props.sort;
+      if (props.selection)
+        state2.selection = props.selection;
+      if (props.expanded)
+        state2.expanded = props.expanded;
+      if (props.hiddenColumns)
+        state2.hiddenColumns = props.hiddenColumns;
+      for (const column of props.columns) {
+        if (!state2.columnOrder.includes(column.id)) {
+          const index = props.columns.indexOf(column);
+          state2.columnOrder.splice(index, 0, column.id);
+        }
+      }
+      state2.theme = theme;
+    });
+  }, [state, props]);
+  return state;
+}
+const ColumnHeaderContext = new react$1.StoreScope({
+  items: /* @__PURE__ */ new Map()
+});
+function ColumnHeader(props) {
+  const ref = react.useRef(null);
+  const columnId = useColumnContext();
+  const table = useTableContext();
+  const enabled = table.useState("props.enableColumnReorder");
+  const store = ColumnHeaderContext.useStore();
+  const draggingStart = react.useRef();
+  const clone = react.useRef();
+  react.useEffect(() => {
+    const div = ref.current;
+    if (!div)
+      return;
+    store.update((state) => {
+      state.items.set(columnId, immer.castDraft(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 jsxRuntime.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] = react.useState(null);
+  const toggle2 = (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 jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [jsxRuntime.jsx(IconButton, {
+      onClick: (e) => setAnchorEl(anchorEl ? null : e.currentTarget),
+      children: jsxRuntime.jsx(Settings, {})
+    }), jsxRuntime.jsx(Popover, {
+      anchorEl,
+      open: !!anchorEl,
+      onClose: () => setAnchorEl(null),
+      css: cssVariables,
+      children: jsxRuntime.jsxs("div", {
+        css: {
+          padding: `calc(var(--spacing) * 2)`,
+          display: "grid"
+        },
+        children: [jsxRuntime.jsx("div", {
+          css: {
+            marginBottom: "var(--spacing)"
+          },
+          children: text.selectColumns
+        }), columns.map((column) => jsxRuntime.jsx(FormControlLabel, {
+          control: jsxRuntime.jsx(Checkbox, {
+            checked: !hiddenColumns.has(column.id),
+            onChange: () => toggle2(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] = react.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 jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [jsxRuntime.jsx(IconButton, {
+      onClick: (e) => setAnchor(anchor ? null : e.currentTarget),
+      children: jsxRuntime.jsx(Export2, {})
+    }), jsxRuntime.jsx(Popover, {
+      open: !!anchor,
+      onClose: () => setAnchor(null),
+      anchorEl: anchor,
+      css: cssVariables,
+      children: jsxRuntime.jsxs("div", {
+        css: {
+          padding: `calc(var(--spacing) * 2)`,
+          display: "grid",
+          justifyItems: "stretch",
+          gap: "var(--spacing)",
+          "& > *": {
+            justifyContent: "start"
+          }
+        },
+        children: [jsxRuntime.jsx("div", {
+          css: {
+            marginBottom: "var(--spacing)"
+          },
+          children: text.exportTitle
+        }), jsxRuntime.jsx(Button, {
+          startIcon: jsxRuntime.jsx(Clipboard, {}),
+          onClick: copy,
+          children: text.exportCopy
+        }), jsxRuntime.jsx(Button, {
+          startIcon: jsxRuntime.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] = react.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 jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [jsxRuntime.jsx(IconButton, {
+      onClick: (e) => setAnchor(e.currentTarget),
+      css: [isActive && {
+        color: "white !important",
+        backgroundColor: "var(--primaryMain) !important"
+      }],
+      children: isActive ? jsxRuntime.jsx(FilterList, {}) : jsxRuntime.jsx(ArrowDropDown, {})
+    }), jsxRuntime.jsx("div", {
+      onPointerDown: (e) => {
+        e.stopPropagation();
+      },
+      onPointerMove: (e) => {
+        e.stopPropagation();
+      },
+      children: jsxRuntime.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 jsxRuntime.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 = react.memo(function Cell2({
+  itemId,
+  rowIndex
+}) {
+  var _a, _b;
+  const table = useTableContext();
+  const columnId = useColumnContext();
+  const {
+    classes
+  } = 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(classes, item, rowIndex), ...calcClassNames(column == null ? void 0 : column.classes, item, rowIndex)];
+  const content = column.renderCell(column.value(item), item);
+  return jsxRuntime.jsx("div", {
+    className: cx(...classNames),
+    css: [tableTheme.defaultClasses.cell, classNames, columnStyleOverride],
+    children: typeof content === "string" ? jsxRuntime.jsx("span", {
+      css: tableTheme.defaultClasses.text,
+      title: content,
+      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 toggle2() {
+    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 jsxRuntime.jsx(Spinner, {
+      css: {
+        margin: "0 var(--spacing)"
+      }
+    });
+  }
+  return jsxRuntime.jsx(IconButton, {
+    onClick: toggle2,
+    children: jsxRuntime.jsx("span", {
+      css: {
+        display: "inline-flex",
+        transition: "all 300ms",
+        transform: isExpanded ? "rotate3d(0, 0, 1, 90deg)" : "rotate3d(0, 0, 1, 0deg)"
+      },
+      children: jsxRuntime.jsx(ChevronRight, {})
+    })
+  });
+}
+function SelectComponent({
+  itemId
+}) {
+  const table = useTableContext();
+  const {
+    components: {
+      Checkbox
+    }
+  } = useTheme();
+  const isSelected = table.useState((state) => {
+    const itemIds = itemId ? [itemId] : Array.from(state.activeItemsById.keys());
+    return state.activeItemsById.size > 0 && itemIds.every((itemId2) => state.selection.has(itemId2));
+  });
+  function toggle2(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 jsxRuntime.jsx(Checkbox, {
+    css: {
+      justifySelf: "start",
+      color: "inherit"
+    },
+    checked: isSelected,
+    onChange: toggle2
+  });
+}
+function calcClassNames(classes, item, index) {
+  return [(classes == null ? void 0 : classes.cell) instanceof Function ? classes.cell(item, index) : classes == null ? void 0 : classes.cell, index % 2 === 0 && (classes == null ? void 0 : classes.evenCell), index % 2 === 1 && (classes == null ? void 0 : classes.oddCell)];
+}
+const Row = react.memo(function Row2({
+  itemId,
+  rowIndex
+}) {
+  var _a, _b;
+  const table = useTableContext();
+  const divRef = react.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: cx(...calcClassNames(state.props.classes, 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
+    };
+  });
+  react.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 jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [jsxRuntime.jsx("div", {
+      className,
+      css: [tableTheme.defaultClasses.cellFill],
+      ref: divRef
+    }), jsxRuntime.jsxs("div", {
+      className,
+      css: [tableTheme.defaultClasses.cell, tableTheme.defaultClasses.firstCell],
+      children: [jsxRuntime.jsx("div", {
+        css: {
+          width: indent * 20
+        }
+      }), enableSelection && jsxRuntime.jsx(SelectComponent, {
+        itemId
+      }), (hasChildren || hasDeferredChildren) && jsxRuntime.jsx(ExpandControl, {
+        itemId,
+        hasDeferredChildren
+      }), rowAction]
+    }), columnIds.map((columnId) => jsxRuntime.jsx(ColumnContext.Provider, {
+      value: columnId,
+      children: jsxRuntime.jsx(Cell, {
+        itemId,
+        rowIndex
+      })
+    }, columnId)), jsxRuntime.jsx("div", {
+      className,
+      css: [tableTheme.defaultClasses.cellFill]
+    })]
+  });
+});
+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 toggle2(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 jsxRuntime.jsxs("div", {
+    css: {
+      userSelect: "none",
+      display: "grid",
+      gridTemplateColumns: "minmax(0, 1fr) max-content",
+      alignItems: "center",
+      cursor: "pointer",
+      "& > div": {
+        overflow: "hidden",
+        textOverflow: "ellipsis"
+      }
+    },
+    onClick: toggle2,
+    children: [jsxRuntime.jsx("div", {
+      children
+    }), jsxRuntime.jsx(Badge, {
+      badgeContent: index,
+      children: jsxRuntime.jsx("span", {
+        css: [{
+          transition: "all 300ms",
+          fontSize: "0.8em"
+        }, !direction && {
+          opacity: 0
+        }, direction === "desc" && {
+          transform: "rotate3d(0, 0, 1, 180deg)"
+        }],
+        children: jsxRuntime.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(_c) {
+  var _d = _c, {
+    header,
+    children
+  } = _d, props = __objRest(_d, [
+    "header",
+    "children"
+  ]);
+  var _a, _b, _c2, _d2;
+  const table = useTableContext();
+  const virtual = table.useState("props.virtual");
+  const probeRef = react.useRef(null);
+  const [, setCounter] = react.useState(0);
+  const {
+    itemIds = [],
+    from = 0,
+    to,
+    before = 0,
+    after = 0
+  } = table.useState((state) => {
+    var _a2;
+    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
+    } = (_a2 = state.props.virtual instanceof Object ? state.props.virtual : void 0) != null ? _a2 : {};
+    let totalHeight = 0;
+    const rowHeights = itemIds2.map((itemId, index) => {
+      var _a3, _b2;
+      const h = (_b2 = (_a3 = rowHeight != null ? rowHeight : state.rowHeights.get(itemId)) != null ? _a3 : initalRowHeight) != null ? _b2 : 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 = (_b = (_a = typeof virtual === "boolean" ? void 0 : virtual) == null ? void 0 : _a.throttleScroll) != null ? _b : 500;
+  const incCounter = react.useMemo(() => throttle(() => setCounter((c) => c + 1), throttleScroll), [throttleScroll]);
+  react.useEffect(() => {
+    if (!virtual || !probeRef.current)
+      return;
+    return onAncestorScroll(probeRef.current, incCounter);
+  }, [probeRef.current, incCounter]);
+  (_d2 = (_c2 = table.getState().props).debugRender) == null ? void 0 : _d2.call(_c2, `Virtualalized render ${from} to ${to}`);
+  return jsxRuntime.jsxs("div", __spreadProps(__spreadValues({}, props), {
+    children: [header, virtual && jsxRuntime.jsx("div", {
+      style: {
+        gridColumn: "1 / -1",
+        height: before
+      },
+      ref: probeRef
+    }), children(itemIds, from), virtual && jsxRuntime.jsx("div", {
+      style: {
+        gridColumn: "1 / -1",
+        height: after
+      }
+    })]
+  }));
+}
+const TableContext = react.createContext(null);
+const ColumnContext = react.createContext(null);
+function useTableContext() {
+  const value = react.useContext(TableContext);
+  if (!value)
+    throw Error("No table context available");
+  return value;
+}
+function useColumnContext() {
+  const value = react.useContext(ColumnContext);
+  if (value === null)
+    throw Error("No column context available");
+  return value;
+}
+function Table(props) {
+  var _a, _b;
+  const table = useTableState(props);
+  (_b = (_a = table.getState().props).debugRender) == null ? void 0 : _b.call(_a, "render table");
+  return jsxRuntime.jsx(TableContext.Provider, {
+    value: table,
+    children: jsxRuntime.jsx(TableLoadingState, {})
+  });
+}
+function TableLoadingState() {
+  const {
+    text
+  } = useTheme();
+  const isHydrated = useTableStateStorage();
+  const [showLoading, setShowLoading] = react.useState(false);
+  react.useEffect(() => {
+    const handle = setTimeout(() => setShowLoading(true), 500);
+    return () => clearTimeout(handle);
+  });
+  return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [!isHydrated && showLoading && jsxRuntime.jsx("div", {
+      children: text.loading
+    }), jsxRuntime.jsx(TableInner, {
+      hidden: !isHydrated
+    })]
+  });
+}
+const TableInner = react.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,
+    classes: column.classes,
+    header: column.header
+  })));
+  const columnWidths = table.useState("columnWidths", {
+    throttle: 16
+  });
+  const columnStyleOverride = table.useState("columnStyleOverride", {
+    throttle: 16
+  });
+  const defaultWidth = table.useState("props.defaultWidth");
+  const classes = table.useState("props.classes");
+  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 jsxRuntime.jsx(Virtualized, {
+    className: `${classes == null ? void 0 : classes.table}`,
+    css: [cssVariables, tableTheme.defaultClasses.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: jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [jsxRuntime.jsx("div", {
+        className: classes == null ? void 0 : classes.headerCell,
+        css: [tableTheme.defaultClasses.headerFill, stickyHeader && tableTheme.defaultClasses.sticky]
+      }), jsxRuntime.jsxs("div", {
+        className: classes == null ? void 0 : classes.headerCell,
+        css: [tableTheme.defaultClasses.headerCell, stickyHeader && tableTheme.defaultClasses.sticky],
+        children: [enableSelection && jsxRuntime.jsx(SelectComponent, {}), enableColumnSelection && jsxRuntime.jsx(ColumnSelection, {}), enableExport && jsxRuntime.jsx(Export, {})]
+      }), jsxRuntime.jsx(ColumnHeaderContext.Provider, {
+        children: activeColumns.map((column) => {
+          var _a2;
+          return jsxRuntime.jsx(ColumnContext.Provider, {
+            value: column.id,
+            children: jsxRuntime.jsxs(ColumnHeader, {
+              className: cx(classes == null ? void 0 : classes.headerCell, (_a2 = column.classes) == null ? void 0 : _a2.headerCell),
+              css: [tableTheme.defaultClasses.headerCell, columnStyleOverride.get(column.id), stickyHeader && tableTheme.defaultClasses.sticky],
+              children: [jsxRuntime.jsx(FilterControl, {}), jsxRuntime.jsx(SortComponent, {
+                children: column.header
+              }), jsxRuntime.jsx("div", {
+                css: {
+                  flex: 1
+                }
+              }), jsxRuntime.jsx(ResizeHandle, {})]
+            }, column.id)
+          }, column.id);
+        })
+      }), jsxRuntime.jsx("div", {
+        className: classes == null ? void 0 : classes.headerCell,
+        css: [tableTheme.defaultClasses.headerFill, stickyHeader && tableTheme.defaultClasses.sticky]
+      })]
+    }),
+    children: (itemIds, startIndex) => itemIds.map((itemId, index) => jsxRuntime.jsx(Row, {
+      itemId,
+      rowIndex: startIndex + index
+    }, itemId))
+  });
+});
+function toggle(set, value, singleSelect) {
+  const newSet = new Set(singleSelect ? [] : set);
+  if (set.has(value)) {
+    newSet.delete(value);
+  } else {
+    newSet.add(value);
+  }
+  return newSet;
+}
+function SelectFilter(_e) {
+  var _f = _e, {
+    options: providedOptions,
+    stringValue = asString,
+    render = stringValue,
+    singleSelect
+  } = _f, props = __objRest(_f, [
+    "options",
+    "stringValue",
+    "render",
+    "singleSelect"
+  ]);
+  const {
+    components: {
+      TextField,
+      Button,
+      IconButton,
+      Checkbox
+    },
+    icons: {
+      Search,
+      Clear
+    },
+    text
+  } = useTheme();
+  const table = useTableContext();
+  const columnId = useColumnContext();
+  const options = table.useState((state) => {
+    var _a;
+    if (providedOptions)
+      return uniq(providedOptions);
+    const column = state.activeColumns.find((column2) => column2.id === columnId);
+    if (!column)
+      return [];
+    const filterBy = (_a = props.filterBy) != null ? _a : (x) => x;
+    return uniq(flatMap(state.items, (item) => castArray(filterBy(column.value(item), item))));
+  });
+  const [query, setQuery] = react.useState("");
+  const filtered = options.filter((option) => !query || stringValue(option).toLowerCase().includes(query.toLowerCase()));
+  const {
+    value = /* @__PURE__ */ new Set(),
+    onChange
+  } = useFilter(__spreadProps(__spreadValues({}, props), {
+    id: "selectFilter",
+    isActive(filterValue) {
+      return filterValue.size > 0;
+    },
+    test(filterValue, value2) {
+      return filterValue.has(value2);
+    }
+  }));
+  return jsxRuntime.jsxs("div", {
+    css: {
+      padding: "calc(var(--spacing) * 2)",
+      display: "grid",
+      gap: "var(--spacing)"
+    },
+    children: [jsxRuntime.jsxs("div", {
+      css: {
+        marginBottom: "var(--spacing)",
+        display: "grid",
+        gridAutoFlow: "column",
+        gap: "var(--spacing)",
+        justifyContent: "space-between",
+        alignItems: "center"
+      },
+      children: [jsxRuntime.jsx("div", {
+        children: text.selectFilter
+      }), jsxRuntime.jsx(Button, {
+        variant: "contained",
+        onClick: () => onChange(/* @__PURE__ */ new Set()),
+        disabled: value.size === 0,
+        children: text.reset
+      })]
+    }), jsxRuntime.jsx(TextField, {
+      value: query,
+      onChange: (e) => setQuery(e.target.value),
+      endIcon: jsxRuntime.jsx(IconButton, {
+        onClick: () => setQuery(""),
+        children: !query ? jsxRuntime.jsx(Search, {}) : jsxRuntime.jsx(Clear, {})
+      }),
+      css: {
+        marginBottom: "var(--spacing)"
+      }
+    }), jsxRuntime.jsx("div", {
+      css: {
+        maxHeight: "20em",
+        overflowY: "auto"
+      },
+      children: filtered.map((option, index) => jsxRuntime.jsx(FormControlLabel, {
+        control: jsxRuntime.jsx(Checkbox, {
+          checked: value.has(option),
+          onChange: () => onChange(toggle(value, option, singleSelect))
+        }),
+        label: render(option)
+      }, index))
+    }), filtered.length === 0 && jsxRuntime.jsx("span", {
+      css: {
+        textAlign: "center"
+      },
+      children: text.noResults
+    })]
+  });
+}
+function debounce(fn, ms) {
+  let lastArgs;
+  let timeout;
+  function run() {
+    const args = lastArgs;
+    lastArgs = void 0;
+    timeout = void 0;
+    fn(...args);
+  }
+  return Object.assign(function(...args) {
+    lastArgs = args;
+    if (timeout) {
+      clearTimeout(timeout);
+    }
+    timeout = setTimeout(run, ms);
+  }, {
+    flush() {
+      if (timeout) {
+        clearTimeout(timeout);
+        run();
+      }
+    }
+  });
+}
+function useFilter(impl) {
+  var _a;
+  const table = useTableContext();
+  const columnId = useColumnContext();
+  react.useEffect(() => {
+    table.update((state) => {
+      if (impl.defaultValue !== void 0) {
+        state.filterValues.set(columnId, impl.defaultValue);
+      }
+    });
+  }, []);
+  react.useEffect(() => {
+    table.update((state) => {
+      state.filters.set(columnId, immer.castDraft(impl));
+      if (impl.value !== void 0) {
+        state.filterValues.set(columnId, impl.value);
+      }
+    });
+    return () => {
+      table.update((state) => {
+        state.filters.delete(columnId);
+      });
+    };
+  }, [table, columnId, ...(_a = impl.dependencies) != null ? _a : [impl]]);
+  const value = table.useState((state) => state.filterValues.get(columnId));
+  const [dirtyValue, setDirtyValue] = react.useState();
+  const implRef = react.useRef(impl);
+  react.useLayoutEffect(() => {
+    implRef.current = impl;
+  });
+  const delayedUpdate = react.useMemo(() => debounce((value2) => {
+    const { value: controlledValue, onChange: onChange2 } = implRef.current;
+    if (controlledValue === void 0) {
+      table.update((state) => {
+        state.filterValues.set(columnId, value2);
+      });
+    }
+    onChange2 == null ? void 0 : onChange2(value2);
+  }, 500), [table]);
+  function onChange(value2) {
+    setDirtyValue(value2);
+    delayedUpdate(value2);
+  }
+  react.useEffect(() => delayedUpdate.flush(), [delayedUpdate]);
+  return {
+    value: dirtyValue != null ? dirtyValue : value,
+    onChange
+  };
+}
+const textMatch = (text, query) => {
+  text = text.toLowerCase();
+  query = query.toLowerCase();
+  return query.split(/\s+/).every((part) => termMatch(text, part));
+};
+const termMatch = (text, query) => {
+  let i = 0;
+  outer:
+    for (const char of query) {
+      for (; i < text.length; i++) {
+        if (text[i] === char) {
+          i++;
+          continue outer;
+        }
+      }
+      return false;
+    }
+  return true;
+};
+function TextFilter(_g) {
+  var _h = _g, {
+    compare = textMatch,
+    filterBy = asStringOrArray
+  } = _h, props = __objRest(_h, [
+    "compare",
+    "filterBy"
+  ]);
+  const {
+    components: {
+      TextField,
+      IconButton,
+      Button
+    },
+    icons: {
+      Search,
+      Clear
+    },
+    text
+  } = useTheme();
+  const {
+    value = "",
+    onChange
+  } = useFilter(__spreadProps(__spreadValues({}, props), {
+    filterBy,
+    id: "textFilter",
+    isActive(filterValue) {
+      return !!filterValue;
+    },
+    test(filterValue, value2) {
+      return compare(value2, filterValue);
+    }
+  }));
+  return jsxRuntime.jsxs("div", {
+    css: {
+      padding: `calc(var(--spacing) * 2)`,
+      display: "grid",
+      gap: "var(--spacing)"
+    },
+    children: [jsxRuntime.jsxs("div", {
+      css: {
+        marginBottom: "var(--spacing)",
+        display: "grid",
+        gridAutoFlow: "column",
+        gap: "var(--spacing)",
+        justifyContent: "space-between",
+        alignItems: "center"
+      },
+      children: [jsxRuntime.jsx("div", {
+        children: text.textFilter
+      }), jsxRuntime.jsx(Button, {
+        variant: "contained",
+        onClick: () => onChange(""),
+        disabled: !value,
+        children: text.reset
+      })]
+    }), jsxRuntime.jsx(TextField, {
+      value,
+      onChange: (e) => onChange(e.target.value),
+      endIcon: jsxRuntime.jsx(IconButton, {
+        onClick: () => onChange(""),
+        children: !value ? jsxRuntime.jsx(Search, {}) : jsxRuntime.jsx(Clear, {})
+      })
+    })]
+  });
+}
+exports.TableThemeContext = tableTheme.TableThemeContext;
+exports.TableThemeProvider = tableTheme.TableThemeProvider;
+exports.configureTableTheme = tableTheme.configureTableTheme;
+exports.mergeThemes = tableTheme.mergeThemes;
+exports.ColumnContext = ColumnContext;
+exports.DateFilter = DateFilter;
+exports.SelectFilter = SelectFilter;
+exports.Table = Table;
+exports.TableContext = TableContext;
+exports.TextFilter = TextFilter;
+exports.termMatch = termMatch;
+exports.textMatch = textMatch;
+exports.useColumnContext = useColumnContext;
+exports.useFilter = useFilter;
+exports.useTableContext = useTableContext;
+exports.useTheme = useTheme;
+//# sourceMappingURL=index.js.map