mui-universal-table 2.1.17 → 2.1.19

package/dist/index.cjs

@@ -6,138 +6,38 @@ var React = require('react');
 var PropTypes = require('prop-types');
 var Paper = require('@mui/material/Paper');
 var material = require('@mui/material');
-var jsxRuntime = require('react/jsx-runtime');
+var jsxDevRuntime = require('react/jsx-dev-runtime');
 var styles = require('@mui/material/styles');
 var iconsMaterial = require('@mui/icons-material');
 var RefreshIcon = require('@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 _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__*/jsxRuntime.jsx(material.Collapse, {
-    "in": show,
+const LazyLoadingIndicator = ({
+  show,
+  currentPage,
+  totalPages
+}) => {
+  return /*#__PURE__*/jsxDevRuntime.jsxDEV(material.Collapse, {
+    in: show,
     timeout: "auto",
     unmountOnExit: true,
-    children: /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
+    children: /*#__PURE__*/jsxDevRuntime.jsxDEV(material.Box, {
       sx: {
         width: "100%",
         p: 2
       },
-      children: [/*#__PURE__*/jsxRuntime.jsxs(material.Typography, {
+      children: [/*#__PURE__*/jsxDevRuntime.jsxDEV(material.Typography, {
         variant: "body2",
         color: "text.secondary",
         sx: {
           mb: 1
         },
         children: ["Loading page ", currentPage, " of ", totalPages, "..."]
-      }), /*#__PURE__*/jsxRuntime.jsx(material.LinearProgress, {
+      }, void 0, true), /*#__PURE__*/jsxDevRuntime.jsxDEV(material.LinearProgress, {
         variant: "determinate",
         value: currentPage / totalPages * 100
-      })]
-    })
-  });
+      }, void 0, false)]
+    }, void 0, true)
+  }, void 0, false);
 };
 LazyLoadingIndicator.propTypes = {
   show: PropTypes.bool.isRequired,
@@ -150,7 +50,7 @@ LazyLoadingIndicator.propTypes = {
  * but invisible on screen. Defined locally to avoid importing from
  * @mui/utils which is not a declared peer dependency.
  */
-var visuallyHidden = {
+const visuallyHidden = {
   border: 0,
   clip: "rect(0 0 0 0)",
   height: "1px",
@@ -165,22 +65,14 @@ 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;
-  });
+  return headers.filter(column => column.searchable).map(column => 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);
-    });
-  });
+  const term = searchTerm.toLocaleLowerCase();
+  return data.filter(row => filterOptions.some(filterOption => String(row[filterOption]).toLocaleLowerCase().includes(term)));
 }
 function getPageOptions(rowCount) {
   if (rowCount <= 5) return [5];
@@ -191,7 +83,7 @@ function getPageOptions(rowCount) {
   return [5, 10, 25, 50, 100, rowCount];
 }
 function splitHeaders(headers) {
-  return headers.reduce(function (groups, header) {
+  return headers.reduce((groups, header) => {
     if (header.subRow) {
       groups.subTables.push(header);
     } else {
@@ -213,13 +105,9 @@ function descendingComparator(a, b, orderBy) {
   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);
-  };
+  return order === "desc" ? (a, b) => descendingComparator(a, b, orderBy) : (a, b) => -descendingComparator(a, b, orderBy);
 }
-var browserDateTimeFormatter = new Intl.DateTimeFormat(undefined, {
+const browserDateTimeFormatter = new Intl.DateTimeFormat(undefined, {
   year: "numeric",
   month: "short",
   day: "numeric",
@@ -238,7 +126,7 @@ var browserDateTimeFormatter = new Intl.DateTimeFormat(undefined, {
  * formats that Date.parse may reject.
  */
 function formatCellValue(header, rowValues) {
-  var raw = rowValues[header.id];
+  const raw = rowValues[header.id];
   if (!header.date) {
     return raw;
   }
@@ -247,32 +135,28 @@ function formatCellValue(header, rowValues) {
   if (raw === null || raw === undefined) {
     return raw;
   }
-  var d = new Date(raw);
+  const d = new Date(raw);
   if (Number.isNaN(d.getTime())) {
     return raw;
   }
   return browserDateTimeFormatter.format(d);
 }
 function stableSort(array, comparator, headers, orderBy) {
-  var dateColumns = new Set(headers.filter(function (object) {
-    return object.date;
-  }).map(function (value) {
-    return value.id;
-  }));
-  var findHeader = headers.find(function (header) {
-    return header.id === orderBy;
-  });
+  const dateColumns = new Set(headers.filter(object => object.date).map(value => value.id));
+  const findHeader = headers.find(header => header.id === orderBy);
 
   // 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) {
+  const stabilizedThis = array.map((el, index) => {
+    const sortKey = {
+      ...el
+    };
+    for (const property in sortKey) {
       if (dateColumns.has(property)) {
-        var parsed = Number(new Date(sortKey[property]));
+        const 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)) {
@@ -282,107 +166,87 @@ function stableSort(array, comparator, headers, orderBy) {
     }
     return [el, sortKey, index];
   });
-  if ((findHeader === null || findHeader === void 0 ? void 0 : findHeader.sortable) === undefined || (findHeader === null || findHeader === void 0 ? void 0 : findHeader.sortable) === false) {
-    stabilizedThis.sort(function (a, b) {
-      var order = comparator(a[1], b[1]);
+  if (findHeader?.sortable === undefined || findHeader?.sortable === false) {
+    stabilizedThis.sort((a, b) => {
+      const order = comparator(a[1], b[1]);
       if (order !== 0) return order;
       return a[2] - b[2];
     });
   }
-  return stabilizedThis.map(function (el) {
-    return el[0];
-  });
+  return stabilizedThis.map(el => el[0]);
 }
 
 function useSearchableRows(data, headers, async) {
-  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 async ? data : filterRows(data, searchTerm, filterOptions);
-  }, [async, data, filterOptions, searchTerm]);
+  const [searchTerm, setSearchTerm] = React.useState("");
+  const filterOptions = React.useMemo(() => getSearchableColumnIds(headers), [headers]);
+  const rows = React.useMemo(() => async ? data : filterRows(data, searchTerm, filterOptions), [async, data, filterOptions, searchTerm]);
   return {
-    rows: rows,
-    searchTerm: searchTerm,
-    setSearchTerm: setSearchTerm
+    rows,
+    searchTerm,
+    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 () {
+function useSelectableRows({
+  rows,
+  selectRows,
+  selectID
+}) {
+  const [selected, setSelected] = React.useState([]);
+  const clearSelection = React.useCallback(() => {
     setSelected([]);
   }, []);
-  var handleSelectAllClick = React.useCallback(function (event) {
+  const handleSelectAllClick = React.useCallback(event => {
     if (!event.target.checked) {
       setSelected([]);
       return;
     }
-    var newSelected = rows.map(function (row, index) {
-      return getSelectableRowId(row, index, selectID);
-    });
+    const newSelected = rows.map((row, index) => getSelectableRowId(row, index, selectID));
     setSelected(newSelected);
   }, [rows, selectID]);
-  var handleClick = React.useCallback(function (event, id) {
+  const handleClick = React.useCallback((event, id) => {
     if (!selectRows) {
       return;
     }
-    setSelected(function (previous) {
-      return previous.includes(id) ? previous.filter(function (selectedId) {
-        return selectedId !== id;
-      }) : [].concat(_toConsumableArray(previous), [id]);
-    });
+    setSelected(previous => previous.includes(id) ? previous.filter(selectedId => selectedId !== id) : [...previous, id]);
   }, [selectRows]);
   return {
-    selected: selected,
-    clearSelection: clearSelection,
-    handleSelectAllClick: handleSelectAllClick,
-    handleClick: handleClick
+    selected,
+    clearSelection,
+    handleSelectAllClick,
+    handleClick
   };
 }
 
-function TableSelectionBanner(_ref) {
-  var selected = _ref.selected,
-    onSelection = _ref.onSelection,
-    selectIcon = _ref.selectIcon;
-  return /*#__PURE__*/jsxRuntime.jsx(material.Collapse, {
-    "in": selected.length > 0,
+function TableSelectionBanner({
+  selected,
+  onSelection,
+  selectIcon
+}) {
+  return /*#__PURE__*/jsxDevRuntime.jsxDEV(material.Collapse, {
+    in: selected.length > 0,
     unmountOnExit: true,
-    children: /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
+    children: /*#__PURE__*/jsxDevRuntime.jsxDEV(material.Box, {
       sx: {
         p: 2,
         display: "flex",
         justifyContent: "space-between",
-        bgcolor: function bgcolor(theme) {
-          return styles.alpha(theme.palette.primary.main, theme.palette.action.activatedOpacity);
-        },
+        bgcolor: theme => styles.alpha(theme.palette.primary.main, theme.palette.action.activatedOpacity),
         borderRadius: 1,
         borderBottomLeftRadius: 0,
         borderBottomRightRadius: 0
       },
-      children: [/*#__PURE__*/jsxRuntime.jsxs(material.Typography, {
+      children: [/*#__PURE__*/jsxDevRuntime.jsxDEV(material.Typography, {
         variant: "h6",
         id: "tableTitle",
         component: "div",
         children: [selected.length, " selected"]
-      }), /*#__PURE__*/jsxRuntime.jsx(material.IconButton, {
-        onClick: function onClick() {
-          return onSelection(selected);
-        },
-        children: selectIcon || /*#__PURE__*/jsxRuntime.jsx(iconsMaterial.Task, {})
-      })]
-    })
-  });
+      }, void 0, true), /*#__PURE__*/jsxDevRuntime.jsxDEV(material.IconButton, {
+        onClick: () => onSelection(selected),
+        children: selectIcon || /*#__PURE__*/jsxDevRuntime.jsxDEV(iconsMaterial.Task, {}, void 0, false)
+      }, void 0, false)]
+    }, void 0, true)
+  }, void 0, false);
 }
 TableSelectionBanner.propTypes = {
   selected: PropTypes.array.isRequired,
@@ -390,45 +254,47 @@ TableSelectionBanner.propTypes = {
   selectIcon: PropTypes.element
 };
 
-function TableTitle(_ref) {
-  var name = _ref.name,
-    subTable = _ref.subTable;
-  return /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
+function TableTitle({
+  name,
+  subTable
+}) {
+  return /*#__PURE__*/jsxDevRuntime.jsxDEV(material.Typography, {
     variant: subTable ? "h6" : "h5",
     color: subTable ? "secondary" : "primary",
     sx: {
       p: 2
     },
     children: name
-  });
+  }, void 0, false);
 }
 TableTitle.propTypes = {
   name: PropTypes.string,
   subTable: PropTypes.bool
 };
 
-function ReloadBtn(_ref) {
-  var loading = _ref.loading,
-    onReload = _ref.onReload;
-  var canReload = typeof onReload === "function";
+function ReloadBtn({
+  loading,
+  onReload
+}) {
+  const canReload = typeof onReload === "function";
   if (!canReload) {
     return null;
   }
-  var handleClick = function handleClick() {
+  const handleClick = () => {
     if (typeof onReload === "function") {
       onReload();
     }
   };
-  return /*#__PURE__*/jsxRuntime.jsx(material.Tooltip, {
+  return /*#__PURE__*/jsxDevRuntime.jsxDEV(material.Tooltip, {
     title: "Reload",
-    children: /*#__PURE__*/jsxRuntime.jsx(material.Button, {
+    children: /*#__PURE__*/jsxDevRuntime.jsxDEV(material.Button, {
       variant: "contained",
       color: "primary",
       onClick: handleClick,
       disabled: loading,
-      children: /*#__PURE__*/jsxRuntime.jsx(RefreshIcon, {})
-    })
-  });
+      children: /*#__PURE__*/jsxDevRuntime.jsxDEV(RefreshIcon, {}, void 0, false)
+    }, void 0, false)
+  }, void 0, false);
 }
 ReloadBtn.propTypes = {
   loading: PropTypes.bool,
@@ -436,29 +302,27 @@ ReloadBtn.propTypes = {
   onReload: PropTypes.func
 };
 
-function FancySearch(_ref) {
-  var value = _ref.value,
-    onSubmit = _ref.onSubmit;
-  var _React$useState = React.useState(Boolean(value)),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    hover = _React$useState2[0],
-    setHover = _React$useState2[1];
-  var expanded = hover || Boolean(value);
-  var handleSubmit = function handleSubmit(e) {
+function FancySearch({
+  value,
+  onSubmit
+}) {
+  const [hover, setHover] = React.useState(Boolean(value));
+  const expanded = hover || Boolean(value);
+  const handleSubmit = e => {
     e.preventDefault();
     onSubmit(value);
   };
-  var handleEndHover = function handleEndHover() {
+  const 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 isUserTypingRef = React.useRef(false);
-  return /*#__PURE__*/jsxRuntime.jsx("form", {
+  const isUserTypingRef = React.useRef(false);
+  return /*#__PURE__*/jsxDevRuntime.jsxDEV("form", {
     onSubmit: handleSubmit,
-    children: /*#__PURE__*/jsxRuntime.jsxs(material.Paper, {
+    children: /*#__PURE__*/jsxDevRuntime.jsxDEV(material.Paper, {
       elevation: 0,
       sx: {
         borderRadius: expanded ? "24px" : "50px",
@@ -467,63 +331,58 @@ function FancySearch(_ref) {
         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);
-        },
+        border: theme => `1px solid ${theme.palette.divider}`,
         mb: 1
       },
-      onMouseEnter: function onMouseEnter() {
-        return setHover(true);
-      },
+      onMouseEnter: () => setHover(true),
       onMouseLeave: handleEndHover,
-      onKeyDown: function onKeyDown(e) {
-        return e.key === "Enter" && handleSubmit(e);
-      },
-      children: [/*#__PURE__*/jsxRuntime.jsx(material.InputBase, {
+      onKeyDown: e => e.key === "Enter" && handleSubmit(e),
+      children: [/*#__PURE__*/jsxDevRuntime.jsxDEV(material.InputBase, {
         placeholder: "Search",
         value: value,
-        onChange: function onChange(e) {
+        onChange: e => {
           isUserTypingRef.current = true;
           onSubmit(e.target.value);
         },
-        sx: _objectSpread2({
+        sx: {
           ml: 1,
           width: expanded ? "100%" : 0,
-          transition: "width 0.5s ease-in-out"
-        }, expanded ? {} : {
-          margin: 0
-        }),
+          transition: "width 0.5s ease-in-out",
+          ...(expanded ? {} : {
+            margin: 0
+          })
+        },
         onBlur: handleEndHover
-      }), /*#__PURE__*/jsxRuntime.jsx(material.Collapse, {
-        "in": Boolean(value),
+      }, void 0, false), /*#__PURE__*/jsxDevRuntime.jsxDEV(material.Collapse, {
+        in: Boolean(value),
         orientation: "horizontal",
         unmountOnExit: true,
-        children: /*#__PURE__*/jsxRuntime.jsxs(material.Stack, {
+        children: /*#__PURE__*/jsxDevRuntime.jsxDEV(material.Stack, {
           direction: "row",
           spacing: 0,
           sx: {
             mr: 3,
             alignItems: "center"
           },
-          children: [/*#__PURE__*/jsxRuntime.jsx(material.IconButton, {
-            onClick: function onClick() {
+          children: [/*#__PURE__*/jsxDevRuntime.jsxDEV(material.IconButton, {
+            onClick: () => {
               isUserTypingRef.current = false;
               // Immediately clear instead of waiting for the debounce
               onSubmit("");
             },
-            children: /*#__PURE__*/jsxRuntime.jsx(iconsMaterial.Clear, {})
-          }), /*#__PURE__*/jsxRuntime.jsx(material.Divider, {
+            children: /*#__PURE__*/jsxDevRuntime.jsxDEV(iconsMaterial.Clear, {}, void 0, false)
+          }, void 0, false), /*#__PURE__*/jsxDevRuntime.jsxDEV(material.Divider, {
             orientation: "vertical",
             flexItem: true
-          })]
-        })
-      }), /*#__PURE__*/jsxRuntime.jsx(material.IconButton, {
+          }, void 0, false)]
+        }, void 0, true)
+      }, void 0, false), /*#__PURE__*/jsxDevRuntime.jsxDEV(material.IconButton, {
         onClick: handleSubmit,
         type: "submit",
-        children: /*#__PURE__*/jsxRuntime.jsx(iconsMaterial.Search, {})
-      })]
-    })
-  });
+        children: /*#__PURE__*/jsxDevRuntime.jsxDEV(iconsMaterial.Search, {}, void 0, false)
+      }, void 0, false)]
+    }, void 0, true)
+  }, void 0, false);
 }
 FancySearch.propTypes = {
   value: PropTypes.string,
@@ -531,24 +390,25 @@ FancySearch.propTypes = {
 };
 
 function SearchArea(props) {
-  var current = props.current,
-    setFinalVal = props.setFinalVal,
-    searchName = props.searchName,
-    persistSearch = props.persistSearch;
-  var searchVal = React.useMemo(function () {
+  const {
+    current,
+    setFinalVal,
+    searchName,
+    persistSearch
+  } = props;
+  const searchVal = React.useMemo(() => {
     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 sessionStorage.getItem(`searchVal:${searchName}`) ?? "";
     }
     return "";
   }, [current, persistSearch, searchName]);
-  return /*#__PURE__*/jsxRuntime.jsx("div", {
-    children: /*#__PURE__*/jsxRuntime.jsx(FancySearch, {
+  return /*#__PURE__*/jsxDevRuntime.jsxDEV("div", {
+    children: /*#__PURE__*/jsxDevRuntime.jsxDEV(FancySearch, {
       value: searchVal,
       onSubmit: setFinalVal
-    })
-  }, "SearchArea");
+    }, void 0, false)
+  }, "SearchArea", false);
 }
 SearchArea.propTypes = {
   current: PropTypes.string,
@@ -558,14 +418,15 @@ SearchArea.propTypes = {
   persistSearch: PropTypes.bool
 };
 
-function TableToolbarContent(_ref) {
-  var onReload = _ref.onReload,
-    reloadBtnLoading = _ref.reloadBtnLoading,
-    searchTerm = _ref.searchTerm,
-    onSearchChange = _ref.onSearchChange,
-    name = _ref.name,
-    persistSearch = _ref.persistSearch;
-  return /*#__PURE__*/jsxRuntime.jsx(material.Toolbar, {
+function TableToolbarContent({
+  onReload,
+  reloadBtnLoading,
+  searchTerm,
+  onSearchChange,
+  name,
+  persistSearch
+}) {
+  return /*#__PURE__*/jsxDevRuntime.jsxDEV(material.Toolbar, {
     sx: {
       pl: {
         sm: 2
@@ -576,7 +437,7 @@ function TableToolbarContent(_ref) {
       },
       pt: 2
     },
-    children: /*#__PURE__*/jsxRuntime.jsxs(material.Stack, {
+    children: /*#__PURE__*/jsxDevRuntime.jsxDEV(material.Stack, {
       spacing: 2,
       direction: {
         xs: "column",
@@ -589,23 +450,23 @@ function TableToolbarContent(_ref) {
           md: "center"
         }
       },
-      children: [/*#__PURE__*/jsxRuntime.jsx(material.Box, {
+      children: [/*#__PURE__*/jsxDevRuntime.jsxDEV(material.Box, {
         sx: {
           flex: "1 1 100%"
         },
         id: "tableTitle",
-        children: /*#__PURE__*/jsxRuntime.jsx(ReloadBtn, {
+        children: /*#__PURE__*/jsxDevRuntime.jsxDEV(ReloadBtn, {
           onReload: onReload,
           loading: reloadBtnLoading
-        })
-      }), /*#__PURE__*/jsxRuntime.jsx(SearchArea, {
+        }, void 0, false)
+      }, void 0, false), /*#__PURE__*/jsxDevRuntime.jsxDEV(SearchArea, {
         current: searchTerm,
         setFinalVal: onSearchChange,
         searchName: name,
         persistSearch: persistSearch
-      })]
-    })
-  });
+      }, void 0, false)]
+    }, void 0, true)
+  }, void 0, false);
 }
 TableToolbarContent.propTypes = {
   onReload: PropTypes.func,
@@ -616,86 +477,82 @@ TableToolbarContent.propTypes = {
   persistSearch: PropTypes.bool
 };
 
-function getInitialRowsPerPage(_ref) {
-  var rows = _ref.rows,
-    subTable = _ref.subTable,
-    pageSizeOptions = _ref.pageSizeOptions;
+function getInitialRowsPerPage({
+  rows,
+  subTable,
+  pageSizeOptions
+}) {
   if (subTable) return rows.length;
   if (Array.isArray(pageSizeOptions) && pageSizeOptions.length > 0) {
     return pageSizeOptions[0];
   }
   return 5;
 }
-function useEnhancedTableState(_ref2) {
-  var rows = _ref2.rows,
-    subTable = _ref2.subTable,
-    pageSizeOptions = _ref2.pageSizeOptions,
-    resetFlag = _ref2.resetFlag,
-    apiCall = _ref2.apiCall,
-    searchTerm = _ref2.searchTerm,
-    setOrder = _ref2.setOrder,
-    setOrderBy = _ref2.setOrderBy,
-    order = _ref2.order,
-    orderBy = _ref2.orderBy,
-    asyncPages = _ref2.asyncPages;
-  var _React$useState = React.useState(function () {
-      return {
-        page: 0,
-        rowsPerPage: getInitialRowsPerPage({
-          rows: rows,
-          subTable: subTable,
-          pageSizeOptions: pageSizeOptions
-        }),
-        resetFlag: resetFlag
-      };
+function useEnhancedTableState({
+  rows,
+  subTable,
+  pageSizeOptions,
+  resetFlag,
+  apiCall,
+  searchTerm,
+  setOrder,
+  setOrderBy,
+  order,
+  orderBy,
+  asyncPages
+}) {
+  const [pagination, setPagination] = React.useState(() => ({
+    page: 0,
+    rowsPerPage: getInitialRowsPerPage({
+      rows,
+      subTable,
+      pageSizeOptions
     }),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    pagination = _React$useState2[0],
-    setPagination = _React$useState2[1];
-  React.useEffect(function () {
+    resetFlag
+  }));
+  React.useEffect(() => {
     // Resetting derived pagination state here intentionally preserves the
     // current rows-per-page choice while jumping back to the first page.
     // eslint-disable-next-line @eslint-react/set-state-in-effect
-    setPagination(function (previous) {
+    setPagination(previous => {
       if (previous.resetFlag === resetFlag) {
         return previous;
       }
-      return _objectSpread2(_objectSpread2({}, previous), {}, {
+      return {
+        ...previous,
         page: 0,
-        resetFlag: resetFlag
-      });
+        resetFlag
+      };
     });
   }, [resetFlag]);
-  var page = pagination.page;
-  var rowsPerPage = subTable ? rows.length : pagination.rowsPerPage;
-  var handleRequestSort = React.useCallback(function (property) {
-    var isAsc = orderBy === property && order === "asc";
+  const page = pagination.page;
+  const rowsPerPage = subTable ? rows.length : pagination.rowsPerPage;
+  const handleRequestSort = React.useCallback(property => {
+    const isAsc = orderBy === property && order === "asc";
     setOrder(isAsc ? "desc" : "asc");
     setOrderBy(property);
   }, [order, orderBy, setOrder, setOrderBy]);
-  var handleChangePage = React.useCallback(function (event, newPage) {
-    setPagination(function (previous) {
-      return _objectSpread2(_objectSpread2({}, previous), {}, {
-        page: newPage
-      });
-    });
+  const handleChangePage = React.useCallback((event, newPage) => {
+    setPagination(previous => ({
+      ...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)
-      });
-    });
+  const handleChangeRowsPerPage = React.useCallback(event => {
+    setPagination(previous => ({
+      ...previous,
+      page: 0,
+      rowsPerPage: Number.parseInt(event.target.value, 10)
+    }));
   }, []);
-  var handleSort = function handleSort(column, apiSortable) {
+  const handleSort = (column, apiSortable) => {
     if (apiSortable) {
-      var direction = order === "asc" ? "desc" : "asc";
+      const direction = order === "asc" ? "desc" : "asc";
       apiCall({
-        searchTerm: searchTerm,
-        column: column,
-        direction: direction,
-        pages: asyncPages !== null && asyncPages !== void 0 ? asyncPages : 1
+        searchTerm,
+        column,
+        direction,
+        pages: asyncPages ?? 1
       });
       setOrder(direction);
       setOrderBy(column);
@@ -704,57 +561,55 @@ function useEnhancedTableState(_ref2) {
     handleRequestSort(column);
   };
   return {
-    order: order,
-    orderBy: orderBy,
-    page: page,
-    rowsPerPage: rowsPerPage,
-    handleChangePage: handleChangePage,
-    handleChangeRowsPerPage: handleChangeRowsPerPage,
-    handleSort: handleSort
+    order,
+    orderBy,
+    page,
+    rowsPerPage,
+    handleChangePage,
+    handleChangeRowsPerPage,
+    handleSort
   };
 }
 
 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,
-    async = props.async;
-  return /*#__PURE__*/jsxRuntime.jsx(material.TableHead, {
-    children: /*#__PURE__*/jsxRuntime.jsxs(material.TableRow, {
-      children: [selectRows && /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
+  const {
+    order,
+    orderBy,
+    onRequestSort,
+    selectRows,
+    numSelected,
+    rowCount,
+    onSelectAllClick,
+    async
+  } = props;
+  return /*#__PURE__*/jsxDevRuntime.jsxDEV(material.TableHead, {
+    children: /*#__PURE__*/jsxDevRuntime.jsxDEV(material.TableRow, {
+      children: [selectRows && /*#__PURE__*/jsxDevRuntime.jsxDEV(material.TableCell, {
         padding: "checkbox",
-        children: /*#__PURE__*/jsxRuntime.jsx(material.Checkbox, {
+        children: /*#__PURE__*/jsxDevRuntime.jsxDEV(material.Checkbox, {
           color: "primary",
           indeterminate: numSelected > 0 && numSelected < rowCount,
           checked: rowCount > 0 && numSelected === rowCount,
           onChange: onSelectAllClick
-        })
-      }), props.headings.map(function (headCell) {
-        return /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
-          align: headCell.numeric ? "right" : "left",
-          padding: "normal",
-          sortDirection: orderBy === headCell.id ? order : false,
-          children: /*#__PURE__*/jsxRuntime.jsxs(material.TableSortLabel, {
-            active: orderBy === headCell.id,
-            direction: orderBy === headCell.id ? order : "asc",
-            onClick: function onClick() {
-              return onRequestSort(headCell.id, headCell.sortable && async);
-            },
-            disabled: headCell.subRow,
-            children: [headCell.label, orderBy === headCell.id ? /*#__PURE__*/jsxRuntime.jsx(material.Box, {
-              component: "span",
-              sx: visuallyHidden,
-              children: order === "desc" ? "sorted descending" : "sorted ascending"
-            }) : undefined]
-          })
-        }, headCell.id);
-      })]
-    })
-  });
+        }, void 0, false)
+      }, void 0, false), props.headings.map(headCell => /*#__PURE__*/jsxDevRuntime.jsxDEV(material.TableCell, {
+        align: headCell.numeric ? "right" : "left",
+        padding: "normal",
+        sortDirection: orderBy === headCell.id ? order : false,
+        children: /*#__PURE__*/jsxDevRuntime.jsxDEV(material.TableSortLabel, {
+          active: orderBy === headCell.id,
+          direction: orderBy === headCell.id ? order : "asc",
+          onClick: () => onRequestSort(headCell.id, headCell.sortable && async),
+          disabled: headCell.subRow,
+          children: [headCell.label, orderBy === headCell.id ? /*#__PURE__*/jsxDevRuntime.jsxDEV(material.Box, {
+            component: "span",
+            sx: visuallyHidden,
+            children: order === "desc" ? "sorted descending" : "sorted ascending"
+          }, void 0, false) : undefined]
+        }, void 0, true)
+      }, headCell.id, false))]
+    }, void 0, true)
+  }, void 0, false);
 }
 EnhancedTableHead.propTypes = {
   onRequestSort: PropTypes.func.isRequired,
@@ -768,32 +623,31 @@ EnhancedTableHead.propTypes = {
   async: PropTypes.bool
 };
 
-var UniversalTable$2 = /*#__PURE__*/React.lazy(function () {
-  return Promise.resolve().then(function () { return UniversalTable$1; });
-});
+const UniversalTable$2 = /*#__PURE__*/React.lazy(() => 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__*/jsxRuntime.jsx(material.TableCell, {
-    children: /*#__PURE__*/jsxRuntime.jsx(material.Tooltip, {
-      title: isOpen ? "Hide ".concat(header.id) : "Show ".concat(header.id),
-      children: /*#__PURE__*/jsxRuntime.jsx(material.Box, {
-        children: /*#__PURE__*/jsxRuntime.jsx(material.IconButton, {
-          onClick: function onClick(event) {
+function SubRowToggleCell({
+  header,
+  isOpen,
+  onToggle,
+  rowValues,
+  hideBadge
+}) {
+  return /*#__PURE__*/jsxDevRuntime.jsxDEV(material.TableCell, {
+    children: /*#__PURE__*/jsxDevRuntime.jsxDEV(material.Tooltip, {
+      title: isOpen ? `Hide ${header.id}` : `Show ${header.id}`,
+      children: /*#__PURE__*/jsxDevRuntime.jsxDEV(material.Box, {
+        children: /*#__PURE__*/jsxDevRuntime.jsxDEV(material.IconButton, {
+          onClick: event => {
             event.stopPropagation();
             onToggle();
           },
           disabled: rowValues[header.id].length === 0,
           color: header.iconColor || "secondary",
-          children: /*#__PURE__*/jsxRuntime.jsx(material.Badge, {
+          children: /*#__PURE__*/jsxDevRuntime.jsxDEV(material.Badge, {
             badgeContent: rowValues[header.id].length,
             invisible: hideBadge,
             anchorOrigin: {
@@ -802,17 +656,15 @@ function SubRowToggleCell(_ref) {
             },
             sx: {
               "& .MuiBadge-badge": {
-                color: function color(theme) {
-                  return theme.palette.text.primary;
-                }
+                color: theme => theme.palette.text.primary
               }
             },
-            children: isOpen ? (header === null || header === void 0 ? void 0 : header.closeIcon) || /*#__PURE__*/jsxRuntime.jsx(iconsMaterial.RemoveCircle, {}) : (header === null || header === void 0 ? void 0 : header.openIcon) || /*#__PURE__*/jsxRuntime.jsx(iconsMaterial.AddCircle, {})
-          })
-        })
-      })
-    })
-  });
+            children: isOpen ? header?.closeIcon || /*#__PURE__*/jsxDevRuntime.jsxDEV(iconsMaterial.RemoveCircle, {}, void 0, false) : header?.openIcon || /*#__PURE__*/jsxDevRuntime.jsxDEV(iconsMaterial.AddCircle, {}, void 0, false)
+          }, void 0, false)
+        }, void 0, false)
+      }, void 0, false)
+    }, void 0, false)
+  }, void 0, false);
 }
 SubRowToggleCell.propTypes = {
   header: PropTypes.object.isRequired,
@@ -826,25 +678,26 @@ SubRowToggleCell.propTypes = {
 // SubTableRow
 // ---------------------------------------------------------------------------
 
-function SubTableRow(_ref2) {
-  var table = _ref2.table,
-    isOpen = _ref2.isOpen,
-    rowValues = _ref2.rowValues,
-    colSpan = _ref2.colSpan;
-  return /*#__PURE__*/jsxRuntime.jsx(material.TableRow, {
-    children: /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
+function SubTableRow({
+  table,
+  isOpen,
+  rowValues,
+  colSpan
+}) {
+  return /*#__PURE__*/jsxDevRuntime.jsxDEV(material.TableRow, {
+    children: /*#__PURE__*/jsxDevRuntime.jsxDEV(material.TableCell, {
       colSpan: colSpan,
       style: {
         paddingBottom: 0,
         paddingTop: 0
       },
-      children: /*#__PURE__*/jsxRuntime.jsx(material.Collapse, {
-        "in": isOpen,
+      children: /*#__PURE__*/jsxDevRuntime.jsxDEV(material.Collapse, {
+        in: isOpen,
         timeout: "auto",
         unmountOnExit: true,
-        children: /*#__PURE__*/jsxRuntime.jsx(React.Suspense, {
+        children: /*#__PURE__*/jsxDevRuntime.jsxDEV(React.Suspense, {
           fallback: null,
-          children: /*#__PURE__*/jsxRuntime.jsx(UniversalTable$2, {
+          children: /*#__PURE__*/jsxDevRuntime.jsxDEV(UniversalTable$2, {
             loading: table.loading,
             setLoading: table.setLoading,
             onReload: table.onReload,
@@ -852,11 +705,11 @@ function SubTableRow(_ref2) {
             headers: table.headers,
             name: table.subTitle,
             subTable: true
-          })
-        })
-      })
-    })
-  });
+          }, void 0, false)
+        }, void 0, false)
+      }, void 0, false)
+    }, void 0, false)
+  }, void 0, false);
 }
 SubTableRow.propTypes = {
   table: PropTypes.object.isRequired,
@@ -866,84 +719,70 @@ SubTableRow.propTypes = {
 };
 
 function renderDataCells(headers, rowValues) {
-  return headers.map(function (header) {
-    var _header$id;
-    return /*#__PURE__*/jsxRuntime.jsx(material.TableCell, _objectSpread2(_objectSpread2({}, header.cellProps), {}, {
-      children: header.component ? header.component(rowValues) : formatCellValue(header, rowValues)
-    }), (_header$id = header.id) !== null && _header$id !== void 0 ? _header$id : header.label);
-  });
+  return headers.map(header => /*#__PURE__*/jsxDevRuntime.jsxDEV(material.TableCell, {
+    ...header.cellProps,
+    children: header.component ? header.component(rowValues) : formatCellValue(header, rowValues)
+  }, header.id ?? header.label, false));
 }
-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);
+const DataRow = /*#__PURE__*/React.memo(function DataRow(props) {
+  const {
+    rowValues,
+    headers,
+    selectRows,
+    isSelected,
+    handleClick
+  } = props;
+  const {
+    subTables,
+    columns
+  } = React.useMemo(() => splitHeaders(headers), [headers]);
+  const hideBadge = props.hideBadge || false;
+  const isItemSelected = isSelected(props.rowID);
+  const [reveal, setReveal] = React.useState(Array.from({
+    length: subTables.length
+  }).fill(false));
+  const toggleSubRow = React.useCallback(index => {
+    setReveal(previous => {
+      const next = [...previous];
       next[index] = !next[index];
       return next;
     });
   }, []);
-  var handleRowKeyDown = React.useCallback(function (event) {
+  const handleRowKeyDown = React.useCallback(event => {
     if (selectRows && (event.key === " " || event.key === "Enter")) {
       event.preventDefault();
       handleClick(event, props.rowID);
     }
   }, [selectRows, handleClick, props.rowID]);
-  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/jsxRuntime.jsxs(material.TableRow, {
+  return /*#__PURE__*/jsxDevRuntime.jsxDEV(jsxDevRuntime.Fragment, {
+    children: [/*#__PURE__*/jsxDevRuntime.jsxDEV(material.TableRow, {
       tabIndex: selectRows ? 0 : -1,
       hover: selectRows,
       role: selectRows ? "checkbox" : "row",
       selected: isItemSelected,
       "aria-checked": isItemSelected,
       onKeyDown: handleRowKeyDown,
-      children: [selectRows && /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
+      children: [selectRows && /*#__PURE__*/jsxDevRuntime.jsxDEV(material.TableCell, {
         padding: "checkbox",
-        children: /*#__PURE__*/jsxRuntime.jsx(material.Checkbox, {
+        children: /*#__PURE__*/jsxDevRuntime.jsxDEV(material.Checkbox, {
           color: "primary",
           checked: isItemSelected,
-          onClick: function onClick(event) {
-            return handleClick(event, props.rowID);
-          }
-        })
-      }), subTables.map(function (header, index) {
-        var _header$id2;
-        return /*#__PURE__*/jsxRuntime.jsx(SubRowToggleCell, {
-          header: header,
-          isOpen: reveal[index],
-          onToggle: function onToggle() {
-            return toggleSubRow(index);
-          },
-          rowValues: rowValues,
-          hideBadge: hideBadge
-        }, (_header$id2 = header.id) !== null && _header$id2 !== void 0 ? _header$id2 : header.label);
-      }), renderDataCells(columns, rowValues)]
-    }), subTables.map(function (table, index) {
-      var _table$id;
-      return /*#__PURE__*/jsxRuntime.jsx(SubTableRow, {
-        table: table,
+          onClick: event => handleClick(event, props.rowID)
+        }, void 0, false)
+      }, void 0, false), subTables.map((header, index) => /*#__PURE__*/jsxDevRuntime.jsxDEV(SubRowToggleCell, {
+        header: header,
         isOpen: reveal[index],
+        onToggle: () => toggleSubRow(index),
         rowValues: rowValues,
-        colSpan: props.headers.length + 1
-      }, (_table$id = table.id) !== null && _table$id !== void 0 ? _table$id : table.label);
-    })]
-  });
+        hideBadge: hideBadge
+      }, header.id ?? header.label, false)), renderDataCells(columns, rowValues)]
+    }, void 0, true), subTables.map((table, index) => /*#__PURE__*/jsxDevRuntime.jsxDEV(SubTableRow, {
+      table: table,
+      isOpen: reveal[index],
+      rowValues: rowValues,
+      colSpan: props.headers.length + 1
+    }, table.id ?? table.label, false))]
+  }, void 0, true);
 });
 DataRow.propTypes = {
   rowValues: PropTypes.object.isRequired,
@@ -955,75 +794,72 @@ DataRow.propTypes = {
   rowID: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired
 };
 
-var skeletonRows = ["row-1", "row-2", "row-3", "row-4", "row-5"];
-var skeletonCells = ["cell-1", "cell-2", "cell-3", "cell-4"];
-var TableLoader = function TableLoader() {
-  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/jsxRuntime.jsx(material.TableHead, {}), /*#__PURE__*/jsxRuntime.jsx(material.TableBody, {
-      children: skeletonRows.map(function (rowKey) {
-        return /*#__PURE__*/jsxRuntime.jsx(material.TableRow, {
-          children: skeletonCells.map(function (cellKey) {
-            return /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
-              children: /*#__PURE__*/jsxRuntime.jsx(material.Skeleton, {
-                height: 30
-              })
-            }, cellKey);
-          })
-        }, rowKey);
-      })
-    })]
-  });
+const skeletonRows = ["row-1", "row-2", "row-3", "row-4", "row-5"];
+const skeletonCells = ["cell-1", "cell-2", "cell-3", "cell-4"];
+const TableLoader = () => {
+  return /*#__PURE__*/jsxDevRuntime.jsxDEV(jsxDevRuntime.Fragment, {
+    children: [/*#__PURE__*/jsxDevRuntime.jsxDEV(material.TableHead, {}, void 0, false), /*#__PURE__*/jsxDevRuntime.jsxDEV(material.TableBody, {
+      children: skeletonRows.map(rowKey => /*#__PURE__*/jsxDevRuntime.jsxDEV(material.TableRow, {
+        children: skeletonCells.map(cellKey => /*#__PURE__*/jsxDevRuntime.jsxDEV(material.TableCell, {
+          children: /*#__PURE__*/jsxDevRuntime.jsxDEV(material.Skeleton, {
+            height: 30
+          }, void 0, false)
+        }, cellKey, false))
+      }, rowKey, false))
+    }, void 0, false)]
+  }, void 0, true);
 };
 
 function EnhancedTable(props) {
-  var headers = props.headers,
-    rows = props.rows,
-    subTable = props.subTable,
-    selected = props.selected,
-    selectID = props.selectID,
-    setLoading = props.setLoading,
-    searchTerm = props.searchTerm,
-    setOrder = props.setOrder,
-    setOrderBy = props.setOrderBy,
-    order = props.order,
-    orderBy = props.orderBy,
-    async = props.async,
-    asyncPages = props.asyncPages;
-  var _useEnhancedTableStat = useEnhancedTableState({
-      rows: rows,
-      subTable: subTable,
-      pageSizeOptions: props.pageSizeOptions,
-      resetFlag: props.resetFlag,
-      apiCall: setLoading,
-      searchTerm: searchTerm,
-      setOrder: setOrder,
-      setOrderBy: setOrderBy,
-      order: order,
-      orderBy: orderBy,
-      asyncPages: asyncPages
-    }),
-    page = _useEnhancedTableStat.page,
-    rowsPerPage = _useEnhancedTableStat.rowsPerPage,
-    handleSort = _useEnhancedTableStat.handleSort,
-    handleChangePage = _useEnhancedTableStat.handleChangePage,
-    handleChangeRowsPerPage = _useEnhancedTableStat.handleChangeRowsPerPage;
-  var effectiveRowsPerPage = rowsPerPage === -1 ? rows.length : rowsPerPage;
-  var emptyRows = Math.max(0, effectiveRowsPerPage - Math.min(effectiveRowsPerPage, rows.length - page * effectiveRowsPerPage));
-  var isSelected = React.useCallback(function (id) {
-    return selected.includes(id);
-  }, [selected]);
-  var visibleRows = React.useMemo(function () {
+  const {
+    headers,
+    rows,
+    subTable,
+    selected,
+    selectID,
+    setLoading,
+    searchTerm,
+    setOrder,
+    setOrderBy,
+    order,
+    orderBy,
+    async,
+    asyncPages
+  } = props;
+  const {
+    page,
+    rowsPerPage,
+    handleSort,
+    handleChangePage,
+    handleChangeRowsPerPage
+  } = useEnhancedTableState({
+    rows,
+    subTable,
+    pageSizeOptions: props.pageSizeOptions,
+    resetFlag: props.resetFlag,
+    apiCall: setLoading,
+    searchTerm,
+    setOrder,
+    setOrderBy,
+    order,
+    orderBy,
+    asyncPages
+  });
+  const effectiveRowsPerPage = rowsPerPage === -1 ? rows.length : rowsPerPage;
+  const emptyRows = Math.max(0, effectiveRowsPerPage - Math.min(effectiveRowsPerPage, rows.length - page * effectiveRowsPerPage));
+  const isSelected = React.useCallback(id => selected.includes(id), [selected]);
+  const visibleRows = React.useMemo(() => {
     return stableSort(rows, getComparator(order, orderBy), headers, orderBy).slice(page * effectiveRowsPerPage, page * effectiveRowsPerPage + effectiveRowsPerPage);
   }, [effectiveRowsPerPage, headers, order, orderBy, page, rows]);
-  return /*#__PURE__*/jsxRuntime.jsxs(material.TableContainer, {
-    children: [/*#__PURE__*/jsxRuntime.jsx(material.Table, {
+  return /*#__PURE__*/jsxDevRuntime.jsxDEV(material.TableContainer, {
+    children: [/*#__PURE__*/jsxDevRuntime.jsxDEV(material.Table, {
       sx: {
         minWidth: 750
       },
       size: "small" ,
       "aria-label": props.name || "data table",
-      children: props.loading ? /*#__PURE__*/jsxRuntime.jsx(TableLoader, {}) : /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-        children: [/*#__PURE__*/jsxRuntime.jsx(EnhancedTableHead, {
+      children: props.loading ? /*#__PURE__*/jsxDevRuntime.jsxDEV(TableLoader, {}, void 0, false) : /*#__PURE__*/jsxDevRuntime.jsxDEV(jsxDevRuntime.Fragment, {
+        children: [/*#__PURE__*/jsxDevRuntime.jsxDEV(EnhancedTableHead, {
           order: order,
           orderBy: orderBy,
           onRequestSort: handleSort,
@@ -1033,11 +869,11 @@ function EnhancedTable(props) {
           rowCount: rows.length,
           onSelectAllClick: props.handleSelectAllClick,
           async: async
-        }), /*#__PURE__*/jsxRuntime.jsxs(material.TableBody, {
-          children: [visibleRows.map(function (row, index) {
-            var rowKey = selectID ? row[selectID] : "row-".concat(page * effectiveRowsPerPage + index);
-            var rowID = getSelectableRowId(row, index, selectID);
-            return /*#__PURE__*/jsxRuntime.jsx(DataRow, {
+        }, void 0, false), /*#__PURE__*/jsxDevRuntime.jsxDEV(material.TableBody, {
+          children: [visibleRows.map((row, index) => {
+            const rowKey = selectID ? row[selectID] : `row-${page * effectiveRowsPerPage + index}`;
+            const rowID = getSelectableRowId(row, index, selectID);
+            return /*#__PURE__*/jsxDevRuntime.jsxDEV(DataRow, {
               rowID: rowID,
               headers: headers,
               rowValues: row,
@@ -1045,22 +881,22 @@ function EnhancedTable(props) {
               selectRows: props.selectRows,
               handleClick: props.handleClick,
               isSelected: isSelected
-            }, rowKey);
-          }), !subTable && emptyRows > 0 && /*#__PURE__*/jsxRuntime.jsx(material.TableRow, {
+            }, rowKey, false);
+          }), !subTable && emptyRows > 0 && /*#__PURE__*/jsxDevRuntime.jsxDEV(material.TableRow, {
             style: {
               height: (33 ) * emptyRows
             },
-            children: /*#__PURE__*/jsxRuntime.jsx(material.TableCell, {
+            children: /*#__PURE__*/jsxDevRuntime.jsxDEV(material.TableCell, {
               colSpan: headers.length
-            })
-          })]
-        })]
-      })
-    }), subTable ? /*#__PURE__*/jsxRuntime.jsx(material.Box, {
+            }, void 0, false)
+          }, void 0, false)]
+        }, void 0, true)]
+      }, void 0, true)
+    }, void 0, false), subTable ? /*#__PURE__*/jsxDevRuntime.jsxDEV(material.Box, {
       sx: {
         mb: 3
       }
-    }) : /*#__PURE__*/jsxRuntime.jsx(material.TablePagination, {
+    }, void 0, false) : /*#__PURE__*/jsxDevRuntime.jsxDEV(material.TablePagination, {
       rowsPerPageOptions: props.pageSizeOptions || getPageOptions(rows.length),
       component: "div",
       count: rows.length,
@@ -1073,8 +909,8 @@ function EnhancedTable(props) {
       },
       showFirstButton: true,
       showLastButton: true
-    })]
-  });
+    }, void 0, false)]
+  }, void 0, true);
 }
 EnhancedTable.propTypes = {
   headers: PropTypes.array.isRequired,
@@ -1100,77 +936,68 @@ EnhancedTable.propTypes = {
   asyncPages: PropTypes.number
 };
 
-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,
-    asyncPages = _ref.asyncPages;
-  var debounceRef = React.useRef(null);
-  var hasLoadedInitialAsyncPageRef = React.useRef(false);
-  var async = typeof asyncPages === "number" && asyncPages > 0;
-  var head = headers || [];
-  var _useSearchableRows = useSearchableRows(data, head, async),
-    rows = _useSearchableRows.rows,
-    searchTerm = _useSearchableRows.searchTerm,
-    setSearchTerm = _useSearchableRows.setSearchTerm;
-  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 _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) {
+function UniversalTable({
+  loading,
+  setLoading,
+  onReload,
+  lazyloading = false,
+  currentPage,
+  totalPages,
+  data,
+  headers,
+  name,
+  reloadBtnLoading,
+  subTable = false,
+  hideBadge = false,
+  selectRows = false,
+  selectID,
+  selectIcon,
+  onSelection,
+  pageSizeOptions,
+  persistSearch,
+  asyncPages
+}) {
+  const debounceRef = React.useRef(null);
+  const hasLoadedInitialAsyncPageRef = React.useRef(false);
+  const async = typeof asyncPages === "number" && asyncPages > 0;
+  const head = headers || [];
+  const {
+    rows,
+    searchTerm,
+    setSearchTerm
+  } = useSearchableRows(data, head, async);
+  const [order, setOrder] = React.useState("asc");
+  const [orderBy, setOrderBy] = React.useState("");
+  const {
+    selected,
+    clearSelection,
+    handleSelectAllClick,
+    handleClick
+  } = useSelectableRows({
+    rows,
+    selectRows,
+    selectID
+  });
+  const handleSearchChange = React.useCallback(value => {
     clearSelection();
     setSearchTerm(value);
   }, [clearSelection, setSearchTerm]);
-  var handleSelection = React.useCallback(function (selectedIds) {
+  const handleSelection = React.useCallback(selectedIds => {
     if (typeof onSelection !== "function") {
       return;
     }
-    var result = onSelection(selectedIds);
+    const result = onSelection(selectedIds);
     if (result instanceof Promise) {
-      result.then(function () {
-        return clearSelection();
-      });
+      result.then(() => clearSelection());
       return;
     }
     clearSelection();
   }, [onSelection, clearSelection]);
-  var handleSearch = function handleSearch(searchValue) {
+  const handleSearch = searchValue => {
     if (async) {
       setSearchTerm(searchValue);
       clearTimeout(debounceRef.current);
-      debounceRef.current = setTimeout(function () {
+      debounceRef.current = setTimeout(() => {
         setLoading({
           searchTerm: searchValue,
           direction: order,
@@ -1182,61 +1009,61 @@ function UniversalTable(_ref) {
       handleSearchChange(searchValue);
     }
   };
-  React.useEffect(function () {
-    return function () {
-      return clearTimeout(debounceRef.current);
-    };
+  React.useEffect(() => {
+    return () => clearTimeout(debounceRef.current);
   }, []);
-  React.useEffect(function () {
+  React.useEffect(() => {
     if (!async || hasLoadedInitialAsyncPageRef.current) {
       return;
     }
     hasLoadedInitialAsyncPageRef.current = true;
     setLoading({
-      searchTerm: searchTerm,
+      searchTerm,
       direction: order,
       column: orderBy,
       pages: asyncPages
     });
   }, [async, asyncPages, order, orderBy, searchTerm, setLoading]);
-  var handleReload = React.useCallback(function () {
+  const handleReload = React.useCallback(() => {
     if (typeof onReload === "function") {
       onReload();
       return;
     }
     if (typeof setLoading === "function") {
       setLoading(async ? {
-        searchTerm: searchTerm,
+        searchTerm,
         direction: order,
         column: orderBy,
         pages: asyncPages
       } : true);
     }
   }, [async, onReload, setLoading, searchTerm, order, orderBy, asyncPages]);
-  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/jsxRuntime.jsx(LazyLoadingIndicator, {
+  return /*#__PURE__*/jsxDevRuntime.jsxDEV(jsxDevRuntime.Fragment, {
+    children: [/*#__PURE__*/jsxDevRuntime.jsxDEV(LazyLoadingIndicator, {
       show: lazyloading,
       currentPage: currentPage,
       totalPages: totalPages
-    }), /*#__PURE__*/jsxRuntime.jsxs(Paper, {
-      sx: _objectSpread2({}, subTable && {
-        boxShadow: "none"
-      }),
-      children: [/*#__PURE__*/jsxRuntime.jsx(TableSelectionBanner, {
+    }, void 0, false), /*#__PURE__*/jsxDevRuntime.jsxDEV(Paper, {
+      sx: {
+        ...(subTable && {
+          boxShadow: "none"
+        })
+      },
+      children: [/*#__PURE__*/jsxDevRuntime.jsxDEV(TableSelectionBanner, {
         selected: selected,
         onSelection: handleSelection,
         selectIcon: selectIcon
-      }), /*#__PURE__*/jsxRuntime.jsx(TableTitle, {
+      }, void 0, false), /*#__PURE__*/jsxDevRuntime.jsxDEV(TableTitle, {
         name: name,
         subTable: subTable
-      }), !subTable && /*#__PURE__*/jsxRuntime.jsx(TableToolbarContent, {
+      }, void 0, false), !subTable && /*#__PURE__*/jsxDevRuntime.jsxDEV(TableToolbarContent, {
         onReload: typeof onReload === "function" || typeof setLoading === "function" ? handleReload : undefined,
         reloadBtnLoading: reloadBtnLoading,
         searchTerm: searchTerm,
         onSearchChange: handleSearch,
         name: name,
         persistSearch: persistSearch
-      }), /*#__PURE__*/jsxRuntime.jsx(EnhancedTable, {
+      }, void 0, false), /*#__PURE__*/jsxDevRuntime.jsxDEV(EnhancedTable, {
         headers: head,
         rows: rows,
         resetFlag: searchTerm,
@@ -1258,9 +1085,9 @@ function UniversalTable(_ref) {
         setOrderBy: setOrderBy,
         asyncPages: asyncPages,
         async: async
-      })]
-    })]
-  });
+      }, void 0, false)]
+    }, void 0, true)]
+  }, void 0, true);
 }
 UniversalTable.propTypes = {
   loading: PropTypes.bool,