mui-universal-table 1.0.1

package/dist/index.esm.js

@@ -0,0 +1,1134 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Paper$1 from '@mui/material/Paper';
+import { Collapse, Box, Typography, LinearProgress, IconButton, Tooltip, Button, Paper, InputBase, Stack, Divider, Toolbar, TableHead, TableRow, TableCell, Checkbox, TableSortLabel, Badge, TableBody, Skeleton, TableContainer, Table, TablePagination } from '@mui/material';
+import { alpha } from '@mui/material/styles';
+import { Task, Clear, Search, RemoveCircle, AddCircle } from '@mui/icons-material';
+import RefreshIcon from '@mui/icons-material/Refresh';
+
+function _arrayLikeToArray(r, a) {
+  (null == a || a > r.length) && (a = r.length);
+  for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
+  return n;
+}
+function _arrayWithHoles(r) {
+  if (Array.isArray(r)) return r;
+}
+function _arrayWithoutHoles(r) {
+  if (Array.isArray(r)) return _arrayLikeToArray(r);
+}
+function _defineProperty(e, r, t) {
+  return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
+    value: t,
+    enumerable: true,
+    configurable: true,
+    writable: true
+  }) : e[r] = t, e;
+}
+function _extends() {
+  return _extends = Object.assign ? Object.assign.bind() : function (n) {
+    for (var e = 1; e < arguments.length; e++) {
+      var t = arguments[e];
+      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
+    }
+    return n;
+  }, _extends.apply(null, arguments);
+}
+function _iterableToArray(r) {
+  if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r);
+}
+function _iterableToArrayLimit(r, l) {
+  var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
+  if (null != t) {
+    var e,
+      n,
+      i,
+      u,
+      a = [],
+      f = true,
+      o = false;
+    try {
+      if (i = (t = t.call(r)).next, 0 === l) ; else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
+    } catch (r) {
+      o = true, n = r;
+    } finally {
+      try {
+        if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return;
+      } finally {
+        if (o) throw n;
+      }
+    }
+    return a;
+  }
+}
+function _nonIterableRest() {
+  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _nonIterableSpread() {
+  throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function ownKeys(e, r) {
+  var t = Object.keys(e);
+  if (Object.getOwnPropertySymbols) {
+    var o = Object.getOwnPropertySymbols(e);
+    r && (o = o.filter(function (r) {
+      return Object.getOwnPropertyDescriptor(e, r).enumerable;
+    })), t.push.apply(t, o);
+  }
+  return t;
+}
+function _objectSpread2(e) {
+  for (var r = 1; r < arguments.length; r++) {
+    var t = null != arguments[r] ? arguments[r] : {};
+    r % 2 ? ownKeys(Object(t), true).forEach(function (r) {
+      _defineProperty(e, r, t[r]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) {
+      Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
+    });
+  }
+  return e;
+}
+function _slicedToArray(r, e) {
+  return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest();
+}
+function _toConsumableArray(r) {
+  return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread();
+}
+function _toPrimitive(t, r) {
+  if ("object" != typeof t || !t) return t;
+  var e = t[Symbol.toPrimitive];
+  if (void 0 !== e) {
+    var i = e.call(t, r);
+    if ("object" != typeof i) return i;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return ("string" === r ? String : Number)(t);
+}
+function _toPropertyKey(t) {
+  var i = _toPrimitive(t, "string");
+  return "symbol" == typeof i ? i : i + "";
+}
+function _unsupportedIterableToArray(r, a) {
+  if (r) {
+    if ("string" == typeof r) return _arrayLikeToArray(r, a);
+    var t = {}.toString.call(r).slice(8, -1);
+    return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
+  }
+}
+
+var LazyLoadingIndicator = function LazyLoadingIndicator(_ref) {
+  var show = _ref.show,
+    currentPage = _ref.currentPage,
+    totalPages = _ref.totalPages;
+  return /*#__PURE__*/React.createElement(Collapse, {
+    "in": show,
+    timeout: "auto",
+    unmountOnExit: true
+  }, /*#__PURE__*/React.createElement(Box, {
+    sx: {
+      width: "100%",
+      p: 2
+    }
+  }, /*#__PURE__*/React.createElement(Typography, {
+    variant: "body2",
+    color: "text.secondary",
+    sx: {
+      mb: 1
+    }
+  }, "Loading page ", currentPage, " of ", totalPages, "..."), /*#__PURE__*/React.createElement(LinearProgress, {
+    variant: "determinate",
+    value: currentPage / totalPages * 100
+  })));
+};
+LazyLoadingIndicator.propTypes = {
+  show: PropTypes.bool.isRequired,
+  currentPage: PropTypes.number,
+  totalPages: PropTypes.number
+};
+
+/**
+ * Standard visually-hidden style: content is accessible to screen readers
+ * but invisible on screen. Defined locally to avoid importing from
+ * @mui/utils which is not a declared peer dependency.
+ */
+var visuallyHidden = {
+  border: 0,
+  clip: "rect(0 0 0 0)",
+  height: "1px",
+  margin: -1,
+  overflow: "hidden",
+  padding: 0,
+  position: "absolute",
+  whiteSpace: "nowrap",
+  width: "1px"
+};
+function getSelectableRowId(row, index, selectID) {
+  return selectID ? row[selectID] : index;
+}
+function getSearchableColumnIds(headers) {
+  return headers.filter(function (column) {
+    return column.searchable;
+  }).map(function (column) {
+    return column.id;
+  });
+}
+function filterRows(data, searchTerm, filterOptions) {
+  if (!searchTerm) {
+    return data;
+  }
+  var term = searchTerm.toLocaleLowerCase();
+  return data.filter(function (row) {
+    return filterOptions.some(function (filterOption) {
+      return String(row[filterOption]).toLocaleLowerCase().includes(term);
+    });
+  });
+}
+function getPageOptions(rowCount) {
+  if (rowCount <= 5) return [5];
+  if (rowCount <= 10) return [5, rowCount];
+  if (rowCount <= 25) return [5, 10, rowCount];
+  if (rowCount < 50) return [5, 10, 25, rowCount];
+  if (rowCount < 100) return [5, 10, 25, 50, rowCount];
+  return [5, 10, 25, 50, 100, rowCount];
+}
+function splitHeaders(headers) {
+  return headers.reduce(function (groups, header) {
+    if (header.subRow) {
+      groups.subTables.push(header);
+    } else {
+      groups.columns.push(header);
+    }
+    return groups;
+  }, {
+    subTables: [],
+    columns: []
+  });
+}
+function descendingComparator(a, b, orderBy) {
+  if (b[orderBy] < a[orderBy]) {
+    return -1;
+  }
+  if (b[orderBy] > a[orderBy]) {
+    return 1;
+  }
+  return 0;
+}
+function getComparator(order, orderBy) {
+  return order === "desc" ? function (a, b) {
+    return descendingComparator(a, b, orderBy);
+  } : function (a, b) {
+    return -descendingComparator(a, b, orderBy);
+  };
+}
+
+/**
+ * Format a cell value for display. Handles dates safely:
+ * returns the raw value for non-date headers, and a formatted
+ * date string for date headers (guards against invalid dates).
+ *
+ * Uses `new Date(raw)` directly rather than `Date.parse(raw)` to
+ * handle epoch-millisecond numbers, Date objects, and string
+ * formats that Date.parse may reject.
+ */
+function formatCellValue(header, rowValues) {
+  var raw = rowValues[header.id];
+  if (!header.date) {
+    return raw;
+  }
+
+  // null and undefined produce a valid epoch-0 Date, not Invalid Date
+  if (raw === null || raw === undefined) {
+    return raw;
+  }
+  var d = new Date(raw);
+  if (Number.isNaN(d.getTime())) {
+    return raw;
+  }
+  return d.toDateString() + " " + d.toLocaleTimeString("en-US", {
+    hour: "numeric",
+    minute: "2-digit",
+    hour12: true
+  });
+}
+function stableSort(array, comparator, headers) {
+  var dateColumns = new Set(headers.filter(function (object) {
+    return object.date;
+  }).map(function (value) {
+    return value.id;
+  }));
+
+  // Build stable entries — compare pre-computed sort keys so we never
+  // mutate the original data or its shallow copies.
+  // Each entry is [originalRow, sortKey, index] so that the comparator
+  // works on numeric-converted date values while the original rows are
+  // returned unchanged (preserving the data seen by header.component).
+  var stabilizedThis = array.map(function (el, index) {
+    var sortKey = _objectSpread2({}, el);
+    for (var property in sortKey) {
+      if (dateColumns.has(property)) {
+        var parsed = Number(new Date(sortKey[property]));
+        // Preserve the original value for invalid dates so formatCellValue
+        // can display the fallback instead of passing NaN to React children.
+        if (!Number.isNaN(parsed)) {
+          sortKey[property] = parsed;
+        }
+      }
+    }
+    return [el, sortKey, index];
+  });
+  stabilizedThis.sort(function (a, b) {
+    var order = comparator(a[1], b[1]);
+    if (order !== 0) return order;
+    return a[2] - b[2];
+  });
+  return stabilizedThis.map(function (el) {
+    return el[0];
+  });
+}
+
+function useSearchableRows(data, headers) {
+  var _React$useState = React.useState(""),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    searchTerm = _React$useState2[0],
+    setSearchTerm = _React$useState2[1];
+  var filterOptions = React.useMemo(function () {
+    return getSearchableColumnIds(headers);
+  }, [headers]);
+  var rows = React.useMemo(function () {
+    return filterRows(data, searchTerm, filterOptions);
+  }, [data, filterOptions, searchTerm]);
+  return {
+    rows: rows,
+    searchTerm: searchTerm,
+    setSearchTerm: setSearchTerm
+  };
+}
+
+function useSelectableRows(_ref) {
+  var rows = _ref.rows,
+    selectRows = _ref.selectRows,
+    selectID = _ref.selectID;
+  var _React$useState = React.useState([]),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    selected = _React$useState2[0],
+    setSelected = _React$useState2[1];
+  var clearSelection = React.useCallback(function () {
+    setSelected([]);
+  }, []);
+  var handleSelectAllClick = React.useCallback(function (event) {
+    if (!event.target.checked) {
+      setSelected([]);
+      return;
+    }
+    var newSelected = rows.map(function (row, index) {
+      return getSelectableRowId(row, index, selectID);
+    });
+    setSelected(newSelected);
+  }, [rows, selectID]);
+  var handleClick = React.useCallback(function (event, id) {
+    if (!selectRows) {
+      return;
+    }
+    setSelected(function (previous) {
+      return previous.includes(id) ? previous.filter(function (selectedId) {
+        return selectedId !== id;
+      }) : [].concat(_toConsumableArray(previous), [id]);
+    });
+  }, [selectRows]);
+  return {
+    selected: selected,
+    clearSelection: clearSelection,
+    handleSelectAllClick: handleSelectAllClick,
+    handleClick: handleClick
+  };
+}
+
+function TableSelectionBanner(_ref) {
+  var selected = _ref.selected,
+    onSelection = _ref.onSelection,
+    selectIcon = _ref.selectIcon;
+  return /*#__PURE__*/React.createElement(Collapse, {
+    "in": selected.length > 0,
+    unmountOnExit: true
+  }, /*#__PURE__*/React.createElement(Box, {
+    sx: {
+      p: 2,
+      display: "flex",
+      justifyContent: "space-between",
+      bgcolor: function bgcolor(theme) {
+        return alpha(theme.palette.primary.main, theme.palette.action.activatedOpacity);
+      },
+      borderRadius: 1,
+      borderBottomLeftRadius: 0,
+      borderBottomRightRadius: 0
+    }
+  }, /*#__PURE__*/React.createElement(Typography, {
+    variant: "h6",
+    id: "tableTitle",
+    component: "div"
+  }, selected.length, " selected"), /*#__PURE__*/React.createElement(IconButton, {
+    onClick: function onClick() {
+      return onSelection(selected);
+    }
+  }, selectIcon || /*#__PURE__*/React.createElement(Task, null))));
+}
+TableSelectionBanner.propTypes = {
+  selected: PropTypes.array.isRequired,
+  onSelection: PropTypes.func,
+  selectIcon: PropTypes.element
+};
+
+function TableTitle(_ref) {
+  var name = _ref.name,
+    subTable = _ref.subTable;
+  return /*#__PURE__*/React.createElement(Typography, {
+    variant: subTable ? "h6" : "h5",
+    color: subTable ? "secondary" : "primary",
+    sx: {
+      p: 2
+    }
+  }, name);
+}
+TableTitle.propTypes = {
+  name: PropTypes.string,
+  subTable: PropTypes.bool
+};
+
+function ReloadBtn(_ref) {
+  var setLoading = _ref.setLoading,
+    loading = _ref.loading,
+    onReload = _ref.onReload;
+  var canReload = typeof onReload === "function" || typeof setLoading === "function";
+  if (!canReload) {
+    return null;
+  }
+  var handleClick = function handleClick() {
+    if (typeof onReload === "function") {
+      onReload();
+    } else if (typeof setLoading === "function") {
+      setLoading(true);
+    }
+  };
+  return /*#__PURE__*/React.createElement(Tooltip, {
+    title: "Reload"
+  }, /*#__PURE__*/React.createElement(Button, {
+    variant: "contained",
+    color: "primary",
+    onClick: handleClick,
+    disabled: loading
+  }, /*#__PURE__*/React.createElement(RefreshIcon, null)));
+}
+ReloadBtn.propTypes = {
+  setLoading: PropTypes.func,
+  loading: PropTypes.bool,
+  /** Preferred callback — fires when the user clicks reload. */
+  onReload: PropTypes.func
+};
+
+function FancySearch(_ref) {
+  var value = _ref.value,
+    onSubmit = _ref.onSubmit;
+  var _React$useState = React.useState(value),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    search = _React$useState2[0],
+    setSearch = _React$useState2[1];
+  var _React$useState3 = React.useState(Boolean(search)),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    hover = _React$useState4[0],
+    setHover = _React$useState4[1];
+  var expanded = hover || Boolean(search);
+  var handleSubmit = function handleSubmit(e) {
+    e.preventDefault();
+    onSubmit(search);
+  };
+  var handleEndHover = function handleEndHover() {
+    setHover(false);
+  };
+
+  // Sync internal state when the parent clears/changes the search term.
+  // A ref tracks whether this sync came from the user typing or from a parent
+  // update, so the debounce only fires for genuine user input.
+  var isUserType = React.useRef(false);
+  React.useEffect(function () {
+    if (isUserType.current) {
+      // User is typing — debounce as normal
+      isUserType.current = false;
+      var timer = setTimeout(function () {
+        onSubmit(search);
+      }, 700);
+      return function () {
+        return clearTimeout(timer);
+      };
+    }
+    // External value change (parent reset, clear from clearSelection, etc.)
+    // — sync state and do NOT fire a stale debounce.
+    setSearch(value);
+    return undefined;
+  }, [search, value, onSubmit]);
+  return /*#__PURE__*/React.createElement("form", {
+    onSubmit: handleSubmit
+  }, /*#__PURE__*/React.createElement(Paper, {
+    elevation: 0,
+    sx: {
+      borderRadius: expanded ? "24px" : "50px",
+      display: "flex",
+      alignItems: "center",
+      transition: "all 0.5s ease-in-out",
+      p: expanded ? 1 : 0.5,
+      width: "fit-content",
+      border: function border(theme) {
+        return "1px solid ".concat(theme.palette.divider);
+      },
+      mb: 1
+    },
+    onMouseEnter: function onMouseEnter() {
+      return setHover(true);
+    },
+    onMouseLeave: handleEndHover,
+    onKeyDown: function onKeyDown(e) {
+      return e.key === "Enter" && handleSubmit(e);
+    }
+  }, /*#__PURE__*/React.createElement(InputBase, {
+    placeholder: "Search",
+    value: search,
+    onChange: function onChange(e) {
+      isUserType.current = true;
+      setSearch(e.target.value);
+    },
+    sx: _objectSpread2({
+      ml: 1,
+      width: expanded ? "100%" : 0,
+      transition: "width 0.5s ease-in-out"
+    }, expanded ? {} : {
+      margin: 0
+    }),
+    onBlur: handleEndHover
+  }), /*#__PURE__*/React.createElement(Collapse, {
+    "in": Boolean(search),
+    orientation: "horizontal",
+    unmountOnExit: true
+  }, /*#__PURE__*/React.createElement(Stack, {
+    direction: "row",
+    alignItems: "center",
+    spacing: 0,
+    sx: {
+      mr: 3
+    }
+  }, /*#__PURE__*/React.createElement(IconButton, {
+    onClick: function onClick() {
+      isUserType.current = false;
+      setSearch("");
+      // Immediately clear instead of waiting for the debounce
+      onSubmit("");
+    }
+  }, /*#__PURE__*/React.createElement(Clear, null)), /*#__PURE__*/React.createElement(Divider, {
+    orientation: "vertical",
+    flexItem: true
+  }))), /*#__PURE__*/React.createElement(IconButton, {
+    onClick: handleSubmit,
+    type: "submit"
+  }, /*#__PURE__*/React.createElement(Search, null))));
+}
+FancySearch.propTypes = {
+  value: PropTypes.string,
+  onSubmit: PropTypes.func.isRequired
+};
+
+function SearchArea(props) {
+  var current = props.current,
+    setFinalVal = props.setFinalVal,
+    searchName = props.searchName,
+    persistSearch = props.persistSearch;
+  var searchVal = React.useMemo(function () {
+    if (current !== undefined && current !== null) return current;
+    if (persistSearch && searchName) {
+      var _sessionStorage$getIt;
+      return (_sessionStorage$getIt = sessionStorage.getItem("searchVal:".concat(searchName))) !== null && _sessionStorage$getIt !== void 0 ? _sessionStorage$getIt : "";
+    }
+    return "";
+  }, [current, persistSearch, searchName]);
+  return /*#__PURE__*/React.createElement("div", {
+    key: "SearchArea"
+  }, /*#__PURE__*/React.createElement(FancySearch, {
+    value: searchVal,
+    onSubmit: setFinalVal
+  }));
+}
+SearchArea.propTypes = {
+  current: PropTypes.string,
+  setFinalVal: PropTypes.func.isRequired,
+  searchName: PropTypes.string,
+  /** Persist search term to sessionStorage (requires searchName). Default: false */
+  persistSearch: PropTypes.bool
+};
+
+function TableToolbarContent(_ref) {
+  var setLoading = _ref.setLoading,
+    onReload = _ref.onReload,
+    reloadBtnLoading = _ref.reloadBtnLoading,
+    searchTerm = _ref.searchTerm,
+    onSearchChange = _ref.onSearchChange,
+    name = _ref.name,
+    persistSearch = _ref.persistSearch;
+  return /*#__PURE__*/React.createElement(Toolbar, {
+    sx: {
+      pl: {
+        sm: 2
+      },
+      pr: {
+        xs: 1,
+        sm: 1
+      },
+      pt: 2
+    }
+  }, /*#__PURE__*/React.createElement(Stack, {
+    spacing: 2,
+    direction: {
+      xs: "column",
+      md: "row"
+    },
+    sx: {
+      width: "100%",
+      alignItems: {
+        xs: "flex-start",
+        md: "center"
+      }
+    }
+  }, /*#__PURE__*/React.createElement(Box, {
+    sx: {
+      flex: "1 1 100%"
+    },
+    id: "tableTitle"
+  }, /*#__PURE__*/React.createElement(ReloadBtn, {
+    setLoading: setLoading,
+    onReload: onReload,
+    loading: reloadBtnLoading
+  })), /*#__PURE__*/React.createElement(SearchArea, {
+    current: searchTerm,
+    setFinalVal: onSearchChange,
+    searchName: name,
+    persistSearch: persistSearch
+  })));
+}
+TableToolbarContent.propTypes = {
+  setLoading: PropTypes.func,
+  onReload: PropTypes.func,
+  reloadBtnLoading: PropTypes.bool,
+  searchTerm: PropTypes.string,
+  onSearchChange: PropTypes.func.isRequired,
+  name: PropTypes.string,
+  persistSearch: PropTypes.bool
+};
+
+function useEnhancedTableState(_ref) {
+  var rows = _ref.rows,
+    subTable = _ref.subTable,
+    resetFlag = _ref.resetFlag;
+  var _React$useState = React.useState("asc"),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    order = _React$useState2[0],
+    setOrder = _React$useState2[1];
+  var _React$useState3 = React.useState(""),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    orderBy = _React$useState4[0],
+    setOrderBy = _React$useState4[1];
+  var _React$useState5 = React.useState(function () {
+      return {
+        page: 0,
+        rowsPerPage: subTable ? rows.length : 5,
+        resetFlag: resetFlag
+      };
+    }),
+    _React$useState6 = _slicedToArray(_React$useState5, 2),
+    pagination = _React$useState6[0],
+    setPagination = _React$useState6[1];
+  React.useEffect(function () {
+    // eslint-disable-next-line react-hooks/set-state-in-effect
+    setPagination(function (previous) {
+      if (previous.resetFlag === resetFlag) {
+        return previous;
+      }
+      return _objectSpread2(_objectSpread2({}, previous), {}, {
+        page: 0,
+        resetFlag: resetFlag
+      });
+    });
+  }, [resetFlag]);
+  var page = pagination.page;
+  var rowsPerPage = subTable ? rows.length : pagination.rowsPerPage;
+  var handleRequestSort = React.useCallback(function (event, property) {
+    var isAsc = orderBy === property && order === "asc";
+    setOrder(isAsc ? "desc" : "asc");
+    setOrderBy(property);
+  }, [order, orderBy]);
+  var handleChangePage = React.useCallback(function (event, newPage) {
+    setPagination(function (previous) {
+      return _objectSpread2(_objectSpread2({}, previous), {}, {
+        page: newPage
+      });
+    });
+  }, []);
+  var handleChangeRowsPerPage = React.useCallback(function (event) {
+    setPagination(function (previous) {
+      return _objectSpread2(_objectSpread2({}, previous), {}, {
+        page: 0,
+        rowsPerPage: Number.parseInt(event.target.value, 10)
+      });
+    });
+  }, []);
+  return {
+    order: order,
+    orderBy: orderBy,
+    page: page,
+    rowsPerPage: rowsPerPage,
+    handleRequestSort: handleRequestSort,
+    handleChangePage: handleChangePage,
+    handleChangeRowsPerPage: handleChangeRowsPerPage
+  };
+}
+
+function EnhancedTableHead(props) {
+  var order = props.order,
+    orderBy = props.orderBy,
+    onRequestSort = props.onRequestSort,
+    selectRows = props.selectRows,
+    numSelected = props.numSelected,
+    rowCount = props.rowCount,
+    onSelectAllClick = props.onSelectAllClick;
+  var createSortHandler = function createSortHandler(property) {
+    return function (event) {
+      onRequestSort(event, property);
+    };
+  };
+  return /*#__PURE__*/React.createElement(TableHead, null, /*#__PURE__*/React.createElement(TableRow, null, selectRows && /*#__PURE__*/React.createElement(TableCell, {
+    padding: "checkbox"
+  }, /*#__PURE__*/React.createElement(Checkbox, {
+    color: "primary",
+    indeterminate: numSelected > 0 && numSelected < rowCount,
+    checked: rowCount > 0 && numSelected === rowCount,
+    onChange: onSelectAllClick
+  })), props.headings.map(function (headCell) {
+    return /*#__PURE__*/React.createElement(TableCell, {
+      key: headCell.id,
+      align: headCell.numeric ? "right" : "left",
+      padding: "normal",
+      sortDirection: orderBy === headCell.id ? order : false
+    }, /*#__PURE__*/React.createElement(TableSortLabel, {
+      active: orderBy === headCell.id,
+      direction: orderBy === headCell.id ? order : "asc",
+      onClick: createSortHandler(headCell.id)
+    }, headCell.label, orderBy === headCell.id ? /*#__PURE__*/React.createElement(Box, {
+      component: "span",
+      sx: visuallyHidden
+    }, order === "desc" ? "sorted descending" : "sorted ascending") : undefined));
+  })));
+}
+EnhancedTableHead.propTypes = {
+  onRequestSort: PropTypes.func.isRequired,
+  order: PropTypes.oneOf(["asc", "desc"]).isRequired,
+  orderBy: PropTypes.string.isRequired,
+  headings: PropTypes.array.isRequired,
+  selectRows: PropTypes.bool,
+  numSelected: PropTypes.number,
+  rowCount: PropTypes.number,
+  onSelectAllClick: PropTypes.func
+};
+
+/**
+ * Lazily import UniversalTable to statically break the circular dependency:
+ *   UniversalTable → EnhancedTable → DataRow → SubTableRow → UniversalTable
+ * React.lazy resolves the import at render time, so the module graph stays acyclic.
+ */
+var UniversalTable$2 = /*#__PURE__*/React.lazy(function () {
+  return Promise.resolve().then(function () { return UniversalTable$1; });
+});
+
+// ---------------------------------------------------------------------------
+// SubRowToggleCell
+// ---------------------------------------------------------------------------
+
+function SubRowToggleCell(_ref) {
+  var header = _ref.header,
+    isOpen = _ref.isOpen,
+    onToggle = _ref.onToggle,
+    rowValues = _ref.rowValues,
+    hideBadge = _ref.hideBadge;
+  return /*#__PURE__*/React.createElement(TableCell, null, /*#__PURE__*/React.createElement(Tooltip, {
+    title: isOpen ? "Hide ".concat(header.id) : "Show ".concat(header.id)
+  }, /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(IconButton, {
+    onClick: function onClick(event) {
+      event.stopPropagation();
+      onToggle();
+    },
+    disabled: rowValues[header.id].length === 0,
+    color: header.iconColor || "secondary"
+  }, /*#__PURE__*/React.createElement(Badge, {
+    badgeContent: rowValues[header.id].length,
+    invisible: hideBadge,
+    anchorOrigin: {
+      vertical: "bottom",
+      horizontal: "right"
+    },
+    sx: {
+      "& .MuiBadge-badge": {
+        color: function color(theme) {
+          return theme.palette.text.primary;
+        }
+      }
+    }
+  }, isOpen ? (header === null || header === void 0 ? void 0 : header.closeIcon) || /*#__PURE__*/React.createElement(RemoveCircle, null) : (header === null || header === void 0 ? void 0 : header.openIcon) || /*#__PURE__*/React.createElement(AddCircle, null))))));
+}
+SubRowToggleCell.propTypes = {
+  header: PropTypes.object.isRequired,
+  isOpen: PropTypes.bool.isRequired,
+  onToggle: PropTypes.func.isRequired,
+  rowValues: PropTypes.object.isRequired,
+  hideBadge: PropTypes.bool
+};
+
+// ---------------------------------------------------------------------------
+// SubTableRow
+// ---------------------------------------------------------------------------
+
+function SubTableRow(_ref2) {
+  var table = _ref2.table,
+    isOpen = _ref2.isOpen,
+    rowValues = _ref2.rowValues,
+    colSpan = _ref2.colSpan;
+  return /*#__PURE__*/React.createElement(TableRow, null, /*#__PURE__*/React.createElement(TableCell, {
+    colSpan: colSpan,
+    style: {
+      paddingBottom: 0,
+      paddingTop: 0
+    }
+  }, /*#__PURE__*/React.createElement(Collapse, {
+    "in": isOpen,
+    timeout: "auto",
+    unmountOnExit: true
+  }, /*#__PURE__*/React.createElement(React.Suspense, {
+    fallback: null
+  }, /*#__PURE__*/React.createElement(UniversalTable$2, {
+    loading: table.loading,
+    setLoading: table.setLoading,
+    onReload: table.onReload,
+    data: rowValues[table.id],
+    headers: table.headers,
+    name: table.subTitle,
+    subTable: true
+  })))));
+}
+SubTableRow.propTypes = {
+  table: PropTypes.object.isRequired,
+  isOpen: PropTypes.bool.isRequired,
+  rowValues: PropTypes.object.isRequired,
+  colSpan: PropTypes.number.isRequired
+};
+
+function renderDataCells(headers, rowValues) {
+  return headers.map(function (header, index) {
+    return /*#__PURE__*/React.createElement(TableCell, _extends({
+      key: header.id || index
+    }, header.cellProps), header.component ? header.component(rowValues) : formatCellValue(header, rowValues));
+  });
+}
+var DataRow = /*#__PURE__*/React.memo(function DataRow(props) {
+  var rowValues = props.rowValues,
+    headers = props.headers,
+    selectRows = props.selectRows,
+    isSelected = props.isSelected,
+    handleClick = props.handleClick;
+  var _React$useMemo = React.useMemo(function () {
+      return splitHeaders(headers);
+    }, [headers]),
+    subTables = _React$useMemo.subTables,
+    columns = _React$useMemo.columns;
+  var hideBadge = props.hideBadge || false;
+  var isItemSelected = isSelected(props.rowID);
+  var _React$useState = React.useState(Array.from({
+      length: subTables.length
+    }).fill(false)),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    reveal = _React$useState2[0],
+    setReveal = _React$useState2[1];
+  var toggleSubRow = React.useCallback(function (index) {
+    setReveal(function (previous) {
+      var next = _toConsumableArray(previous);
+      next[index] = !next[index];
+      return next;
+    });
+  }, []);
+  var handleRowKeyDown = React.useCallback(function (event) {
+    if (selectRows && (event.key === " " || event.key === "Enter")) {
+      event.preventDefault();
+      handleClick(event, props.rowID);
+    }
+  }, [selectRows, handleClick, props.rowID]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TableRow, {
+    tabIndex: selectRows ? 0 : -1,
+    hover: selectRows,
+    role: selectRows ? "checkbox" : "row",
+    selected: isItemSelected,
+    "aria-checked": isItemSelected,
+    onKeyDown: handleRowKeyDown
+  }, selectRows && /*#__PURE__*/React.createElement(TableCell, {
+    padding: "checkbox"
+  }, /*#__PURE__*/React.createElement(Checkbox, {
+    color: "primary",
+    checked: isItemSelected,
+    onClick: function onClick(event) {
+      return handleClick(event, props.rowID);
+    }
+  })), subTables.map(function (header, index) {
+    return /*#__PURE__*/React.createElement(SubRowToggleCell, {
+      key: header.id || index,
+      header: header,
+      isOpen: reveal[index],
+      onToggle: function onToggle() {
+        return toggleSubRow(index);
+      },
+      rowValues: rowValues,
+      hideBadge: hideBadge
+    });
+  }), renderDataCells(columns, rowValues)), subTables.map(function (table, index) {
+    return /*#__PURE__*/React.createElement(SubTableRow, {
+      key: table.id || index,
+      table: table,
+      isOpen: reveal[index],
+      rowValues: rowValues,
+      colSpan: props.headers.length + 1
+    });
+  }));
+});
+DataRow.propTypes = {
+  rowValues: PropTypes.object.isRequired,
+  headers: PropTypes.array.isRequired,
+  selectRows: PropTypes.bool,
+  isSelected: PropTypes.func.isRequired,
+  handleClick: PropTypes.func,
+  hideBadge: PropTypes.bool,
+  rowID: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired
+};
+
+var TableLoader = function TableLoader() {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TableHead, null), /*#__PURE__*/React.createElement(TableBody, null, Array.from({
+    length: 5
+  }).map(function (_, index) {
+    return /*#__PURE__*/React.createElement(TableRow, {
+      key: index
+    }, Array.from({
+      length: 4
+    }).map(function (_, cellIndex) {
+      return /*#__PURE__*/React.createElement(TableCell, {
+        key: cellIndex
+      }, /*#__PURE__*/React.createElement(Skeleton, {
+        height: 30
+      }));
+    }));
+  })));
+};
+
+function EnhancedTable(props) {
+  var headers = props.headers,
+    rows = props.rows,
+    subTable = props.subTable,
+    selected = props.selected,
+    selectID = props.selectID;
+  var _useEnhancedTableStat = useEnhancedTableState({
+      rows: rows,
+      subTable: subTable,
+      resetFlag: props.resetFlag
+    }),
+    order = _useEnhancedTableStat.order,
+    orderBy = _useEnhancedTableStat.orderBy,
+    page = _useEnhancedTableStat.page,
+    rowsPerPage = _useEnhancedTableStat.rowsPerPage,
+    handleRequestSort = _useEnhancedTableStat.handleRequestSort,
+    handleChangePage = _useEnhancedTableStat.handleChangePage,
+    handleChangeRowsPerPage = _useEnhancedTableStat.handleChangeRowsPerPage;
+  var emptyRows = Math.max(0, rowsPerPage - Math.min(rowsPerPage, rows.length - page * rowsPerPage));
+  var isSelected = React.useCallback(function (id) {
+    return selected.includes(id);
+  }, [selected]);
+  var visibleRows = React.useMemo(function () {
+    return stableSort(rows, getComparator(order, orderBy), headers).slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage);
+  }, [headers, order, orderBy, page, rows, rowsPerPage]);
+  return /*#__PURE__*/React.createElement(TableContainer, null, /*#__PURE__*/React.createElement(Table, {
+    sx: {
+      minWidth: 750
+    },
+    size: "small" ,
+    "aria-label": props.name || "data table"
+  }, props.loading ? /*#__PURE__*/React.createElement(TableLoader, null) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(EnhancedTableHead, {
+    order: order,
+    orderBy: orderBy,
+    onRequestSort: handleRequestSort,
+    headings: headers,
+    selectRows: props.selectRows,
+    numSelected: selected.length,
+    rowCount: rows.length,
+    onSelectAllClick: props.handleSelectAllClick
+  }), /*#__PURE__*/React.createElement(TableBody, null, visibleRows.map(function (row, index) {
+    var rowKey = selectID ? row[selectID] : "row-".concat(page * rowsPerPage + index);
+    var rowID = getSelectableRowId(row, index, selectID);
+    return /*#__PURE__*/React.createElement(DataRow, {
+      key: rowKey,
+      rowID: rowID,
+      headers: headers,
+      rowValues: row,
+      hideBadge: props.hideBadge,
+      selectRows: props.selectRows,
+      handleClick: props.handleClick,
+      isSelected: isSelected
+    });
+  }), !subTable && emptyRows > 0 && /*#__PURE__*/React.createElement(TableRow, {
+    style: {
+      height: (33 ) * emptyRows
+    }
+  }, /*#__PURE__*/React.createElement(TableCell, {
+    colSpan: headers.length
+  }))))), subTable ? /*#__PURE__*/React.createElement(Box, {
+    sx: {
+      mb: 3
+    }
+  }) : /*#__PURE__*/React.createElement(TablePagination, {
+    rowsPerPageOptions: props.pageSizeOptions || getPageOptions(rows.length),
+    component: "div",
+    count: rows.length,
+    rowsPerPage: rowsPerPage,
+    page: page,
+    onPageChange: handleChangePage,
+    onRowsPerPageChange: handleChangeRowsPerPage,
+    sx: {
+      overflow: "visible"
+    },
+    showFirstButton: true,
+    showLastButton: true
+  }));
+}
+EnhancedTable.propTypes = {
+  headers: PropTypes.array.isRequired,
+  rows: PropTypes.array.isRequired,
+  subTable: PropTypes.bool,
+  hideBadge: PropTypes.bool,
+  loading: PropTypes.bool,
+  selectRows: PropTypes.bool,
+  handleSelectAllClick: PropTypes.func,
+  handleClick: PropTypes.func,
+  selected: PropTypes.array,
+  selectID: PropTypes.string,
+  resetFlag: PropTypes.string,
+  pageSizeOptions: PropTypes.arrayOf(PropTypes.number),
+  name: PropTypes.string
+};
+
+function UniversalTable(_ref) {
+  var loading = _ref.loading,
+    setLoading = _ref.setLoading,
+    onReload = _ref.onReload,
+    _ref$lazyloading = _ref.lazyloading,
+    lazyloading = _ref$lazyloading === void 0 ? false : _ref$lazyloading,
+    currentPage = _ref.currentPage,
+    totalPages = _ref.totalPages,
+    data = _ref.data,
+    headers = _ref.headers,
+    name = _ref.name,
+    reloadBtnLoading = _ref.reloadBtnLoading,
+    _ref$subTable = _ref.subTable,
+    subTable = _ref$subTable === void 0 ? false : _ref$subTable,
+    _ref$hideBadge = _ref.hideBadge,
+    hideBadge = _ref$hideBadge === void 0 ? false : _ref$hideBadge,
+    _ref$selectRows = _ref.selectRows,
+    selectRows = _ref$selectRows === void 0 ? false : _ref$selectRows,
+    selectID = _ref.selectID,
+    selectIcon = _ref.selectIcon,
+    onSelection = _ref.onSelection,
+    pageSizeOptions = _ref.pageSizeOptions,
+    persistSearch = _ref.persistSearch;
+  var head = headers || [];
+  var _useSearchableRows = useSearchableRows(data, head),
+    rows = _useSearchableRows.rows,
+    searchTerm = _useSearchableRows.searchTerm,
+    setSearchTerm = _useSearchableRows.setSearchTerm;
+  var _useSelectableRows = useSelectableRows({
+      rows: rows,
+      selectRows: selectRows,
+      selectID: selectID
+    }),
+    selected = _useSelectableRows.selected,
+    clearSelection = _useSelectableRows.clearSelection,
+    handleSelectAllClick = _useSelectableRows.handleSelectAllClick,
+    handleClick = _useSelectableRows.handleClick;
+  var handleSearchChange = React.useCallback(function (value) {
+    clearSelection();
+    setSearchTerm(value);
+  }, [clearSelection, setSearchTerm]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(LazyLoadingIndicator, {
+    show: lazyloading,
+    currentPage: currentPage,
+    totalPages: totalPages
+  }), /*#__PURE__*/React.createElement(Paper$1, {
+    sx: _objectSpread2({}, subTable && {
+      boxShadow: "none"
+    })
+  }, /*#__PURE__*/React.createElement(TableSelectionBanner, {
+    selected: selected,
+    onSelection: onSelection,
+    selectIcon: selectIcon
+  }), /*#__PURE__*/React.createElement(TableTitle, {
+    name: name,
+    subTable: subTable
+  }), !subTable && /*#__PURE__*/React.createElement(TableToolbarContent, {
+    setLoading: setLoading,
+    onReload: onReload,
+    reloadBtnLoading: reloadBtnLoading,
+    searchTerm: searchTerm,
+    onSearchChange: handleSearchChange,
+    name: name,
+    persistSearch: persistSearch
+  }), /*#__PURE__*/React.createElement(EnhancedTable, {
+    headers: head,
+    rows: rows,
+    resetFlag: searchTerm,
+    subTable: subTable,
+    hideBadge: hideBadge,
+    loading: loading,
+    selectRows: selectRows,
+    handleSelectAllClick: handleSelectAllClick,
+    handleClick: handleClick,
+    selected: selected,
+    selectID: selectID,
+    pageSizeOptions: pageSizeOptions,
+    name: name
+  })));
+}
+UniversalTable.propTypes = {
+  loading: PropTypes.bool,
+  setLoading: PropTypes.func,
+  /** Preferred callback — fires when the user clicks reload. */
+  onReload: PropTypes.func,
+  lazyloading: PropTypes.bool,
+  currentPage: PropTypes.number,
+  totalPages: PropTypes.number,
+  data: PropTypes.array.isRequired,
+  headers: PropTypes.array.isRequired,
+  name: PropTypes.string,
+  reloadBtnLoading: PropTypes.bool,
+  subTable: PropTypes.bool,
+  hideBadge: PropTypes.bool,
+  selectRows: PropTypes.bool,
+  selectID: PropTypes.string,
+  selectIcon: PropTypes.element,
+  onSelection: PropTypes.func,
+  /** Override default page size options (e.g. [10, 25, 50]). Default auto-computed. */
+  pageSizeOptions: PropTypes.arrayOf(PropTypes.number),
+  /** Persist search term to sessionStorage (requires name prop). Default: false */
+  persistSearch: PropTypes.bool
+};
+
+var UniversalTable$1 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  default: UniversalTable
+});
+
+export { UniversalTable, UniversalTable as default };
+//# sourceMappingURL=index.esm.js.map