dce-reactkit 3.8.7 → 3.9.0-beta-loading-modal.2

package/dist/esm/index.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import React__default, { useState, useRef, useEffect, useReducer, forwardRef, useContext, useLayoutEffect, createContext, useMemo, useCallback, Component, Fragment } from 'react';
-import { faExclamationTriangle, faHourglassEnd, faCircle, faDotCircle, faCheckSquare, faHourglass, faClipboard, faChevronDown, faChevronRight, faCloudDownloadAlt, faMinus, faCheckCircle, faXmarkCircle, faSort, faSortDown, faSortUp, faCalendar, faTag, faHammer, faList, faTimes, faSave, faTrash, faCog, faPlus } from '@fortawesome/free-solid-svg-icons';
+import { faExclamationTriangle, faCircle, faHourglassEnd, faDotCircle, faCheckSquare, faHourglass, faClipboard, faChevronDown, faChevronRight, faCloudDownloadAlt, faMinus, faCheckCircle, faXmarkCircle, faSort, faSortDown, faSortUp, faCalendar, faTag, faHammer, faList, faTimes, faSave, faTrash, faCog, faPlus } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import ReactDOM, { createPortal } from 'react-dom';
 import { faCircle as faCircle$1, faSquareMinus, faSquare } from '@fortawesome/free-regular-svg-icons';
@@ -30,7 +30,7 @@ function __awaiter(thisArg, _arguments, P, generator) {
     });
 }
 
-// Highest error code = DRK16
+// Highest error code = DRK13
 /**
  * List of error codes built into the react kit
  * @author Gabe Abrams
@@ -50,10 +50,6 @@ var ReactKitErrorCode;
     ReactKitErrorCode["NotAllowedToReviewLogs"] = "DRK11";
     ReactKitErrorCode["ThemeCheckedBeforeReactKitReady"] = "DRK12";
     ReactKitErrorCode["SessionExpiredMessageGottenBeforeReactKitReady"] = "DRK13";
-    // Server-to-server requests
-    ReactKitErrorCode["NotConnected"] = "DRK14";
-    ReactKitErrorCode["SelfSigned"] = "DRK15";
-    ReactKitErrorCode["ResponseParseError"] = "DRK16";
 })(ReactKitErrorCode || (ReactKitErrorCode = {}));
 var ReactKitErrorCode$1 = ReactKitErrorCode;
 
@@ -184,6 +180,98 @@ const LogBuiltInMetadata = {
     },
 };
 
+/**
+ * Loading spinner/indicator
+ * @author Gabe Abrams
+ */
+/*------------------------------------------------------------------------*/
+/* -------------------------------- Style ------------------------------- */
+/*------------------------------------------------------------------------*/
+const style$a = `
+/* Container fades in */
+.LoadingSpinner-container {
+  animation-name: LoadingSpinner-container-fade-in;
+  animation-duration: 0.3s;
+  animation-delay: 0.4s;
+  animation-fill-mode: both;
+  animation-timing-function: ease-out;
+}
+@keyframes LoadingSpinner-container-fade-in {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+/* Blips */
+.LoadingSpinner-blip-1,
+.LoadingSpinner-blip-2,
+.LoadingSpinner-blip-3,
+.LoadingSpinner-blip-4 {
+  font-size: 1.8rem;
+  opacity: 0.6;
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+}
+
+/* First Blip */
+.LoadingSpinner-blip-1 {
+  animation: LoadingSpinner-pop-animation 2s infinite;
+}
+
+/* Second Blip */
+.LoadingSpinner-blip-2 {
+  animation: LoadingSpinner-pop-animation 2s infinite;
+  -webkit-animation-delay: 0.1s;
+  animation-delay: 0.1s;
+}
+
+/* Third Blip */
+.LoadingSpinner-blip-3 {
+  animation: LoadingSpinner-pop-animation 2s infinite;
+  animation-delay: 0.2s;
+}
+
+/* Fourth Blip */
+.LoadingSpinner-blip-4 {
+  animation: LoadingSpinner-pop-animation 2s infinite;
+  animation-delay: 0.3s;
+}
+
+/* Pop Animation for Each Blip */
+@keyframes LoadingSpinner-pop-animation {
+  0%  {
+    transform: scale(1.0);
+  }
+  10% {
+    transform: scale(1.5);
+  }
+  30% {
+    transform: scale(1.0);
+  }
+  100% {
+    transform: scale(1.0);
+  }
+}
+`;
+/*------------------------------------------------------------------------*/
+/* ------------------------------ Component ----------------------------- */
+/*------------------------------------------------------------------------*/
+const LoadingSpinner = () => {
+    /*------------------------------------------------------------------------*/
+    /* ------------------------------- Render ------------------------------- */
+    /*------------------------------------------------------------------------*/
+    // Add all four blips to a container
+    return (React__default.createElement("div", { className: "text-center LoadingSpinner LoadingSpinner-container" },
+        React__default.createElement("style", null, style$a),
+        React__default.createElement(FontAwesomeIcon, { icon: faCircle, className: "LoadingSpinner-blip-1 me-1" }),
+        React__default.createElement(FontAwesomeIcon, { icon: faCircle, className: "LoadingSpinner-blip-2 me-1" }),
+        React__default.createElement(FontAwesomeIcon, { icon: faCircle, className: "LoadingSpinner-blip-3 me-1" }),
+        React__default.createElement(FontAwesomeIcon, { icon: faCircle, className: "LoadingSpinner-blip-4" })));
+};
+
 /**
  * Wait for a certain number of ms
  * @author Gabe Abrams
@@ -304,6 +392,7 @@ const BASE_Z_INDEX = 1000000000;
 const BASE_Z_INDEX_ON_TOP = 2000000000;
 // Constants
 const MS_TO_ANIMATE = 200; // Animation duration
+const MS_TO_WAIT_BEFORE_SHOWING_LOADING_INDICATOR = 1000;
 // Modal type to list of buttons
 const modalTypeToModalButtonTypes = {
     [ModalType$1.Okay]: [
@@ -414,7 +503,7 @@ const getNextUniqueId = () => {
 /*------------------------------------------------------------------------*/
 /* -------------------------------- Style ------------------------------- */
 /*------------------------------------------------------------------------*/
-const style$a = `
+const style$9 = `
   .Modal-backdrop {
     position: fixed;
     top: 0;
@@ -486,13 +575,14 @@ const Modal = (props) => {
     /*------------------------------------------------------------------------*/
     var _a;
     /* -------------- Props ------------- */
-    const { type = ModalType$1.NoButtons, size = ModalSize$1.Large, title, largeTitle, children, onClose, dontAllowBackdropExit, dontShowXButton, onTopOfOtherModals, } = props;
+    const { type = ModalType$1.NoButtons, size = ModalSize$1.Large, title, largeTitle, children, onClose, dontAllowBackdropExit, dontShowXButton, onTopOfOtherModals, isLoading, isLoadingCancelable, } = props;
     // Determine if no header either
     const noHeader = (!title && type === ModalType$1.NoButtons);
     /* -------------- State ------------- */
     // True if animation is in use
     const [animatingIn, setAnimatingIn] = useState(true);
     const [animatingPop, setAnimatingPop] = useState(false);
+    const [showModal, setShowModal] = useState(false);
     /* -------------- Refs -------------- */
     // Keep track of whether modal is still mounted
     const mounted = useRef(false);
@@ -519,6 +609,14 @@ const Modal = (props) => {
             if (mounted.current) {
                 setAnimatingIn(false);
             }
+            if (isLoading) {
+                // wait before showing modal
+                yield waitMs(MS_TO_WAIT_BEFORE_SHOWING_LOADING_INDICATOR);
+                setShowModal(true);
+            }
+            else {
+                setShowModal(true);
+            }
         }))();
         return () => {
             mounted.current = false;
@@ -585,6 +683,9 @@ const Modal = (props) => {
     else if (animatingPop) {
         animationClass = 'Modal-animating-pop';
     }
+    // default to show close button when not loading and not show close button when loading
+    // unless downShowXButton or isLoadingCancelable
+    const showCloseButton = onClose && !dontShowXButton && !(isLoading && !isLoadingCancelable);
     // Render the modal
     const contentToRender = (React__default.createElement("div", { className: "modal show", tabIndex: -1, style: {
             zIndex: baseZIndex,
@@ -593,7 +694,7 @@ const Modal = (props) => {
             left: 0,
             right: 0,
         } },
-        React__default.createElement("style", null, style$a),
+        React__default.createElement("style", null, style$9),
         React__default.createElement("div", { className: `Modal-backdrop ${backdropAnimationClass}`, style: {
                 zIndex: baseZIndex + 1,
             }, onClick: () => __awaiter(void 0, void 0, void 0, function* () {
@@ -611,11 +712,11 @@ const Modal = (props) => {
                 // Handle close
                 handleClose(ModalButtonType$1.Cancel);
             }) }),
-        React__default.createElement("div", { className: `modal-dialog modal-${size} ${animationClass} modal-dialog-scrollable modal-dialog-centered`, style: {
+        showModal && (React__default.createElement("div", { className: `modal-dialog modal-${size} ${animationClass} modal-dialog-scrollable modal-dialog-centered`, style: {
                 zIndex: baseZIndex + 2,
                 // Override sizes for even larger for XL
                 width: (size === ModalSize$1.ExtraLarge
-                    ? 'calc(100vw - 1rem)'
+                    ? 'calc(100vw - 3rem)'
                     : undefined),
                 maxWidth: (size === ModalSize$1.ExtraLarge
                     ? '80rem'
@@ -643,7 +744,7 @@ const Modal = (props) => {
                                 ? '1.6rem'
                                 : undefined),
                         } }, title),
-                    (onClose && !dontShowXButton) && (React__default.createElement("button", { type: "button", className: "Modal-x-button btn-close", "aria-label": "Close", style: {
+                    showCloseButton && (React__default.createElement("button", { type: "button", className: "Modal-x-button btn-close", "aria-label": "Close", style: {
                             backgroundColor: (isDarkModeOn()
                                 ? 'white'
                                 : undefined),
@@ -651,14 +752,16 @@ const Modal = (props) => {
                             // Handle close
                             handleClose(ModalButtonType$1.Cancel);
                         } })))),
-                children && (React__default.createElement("div", { className: "modal-body", style: {
+                React__default.createElement("div", { className: "modal-body", style: {
                         color: (isDarkModeOn()
                             ? 'white'
                             : undefined),
                         backgroundColor: (isDarkModeOn()
                             ? '#444'
                             : undefined),
-                    } }, children)),
+                    } }, isLoading ? (React__default.createElement(React__default.Fragment, null,
+                    React__default.createElement(LoadingSpinner, null),
+                    React__default.createElement("span", { className: "sr-only" }, "Content loading"))) : (children)),
                 footer && (React__default.createElement("div", { className: "modal-footer pt-1 pb-1", style: {
                         color: (isDarkModeOn()
                             ? 'white'
@@ -669,7 +772,7 @@ const Modal = (props) => {
                         borderTop: (isDarkModeOn()
                             ? '0.1rem solid gray'
                             : undefined),
-                    } }, footer))))));
+                    } }, footer)))))));
     // Determine which portal to use
     const portalNumber = id.current % NUM_MODAL_PORTALS;
     // Render in a portal
@@ -1149,7 +1252,7 @@ const showSessionExpiredMessage = () => __awaiter(void 0, void 0, void 0, functi
 /*------------------------------------------------------------------------*/
 /* -------------------------------- Style ------------------------------- */
 /*------------------------------------------------------------------------*/
-const style$9 = `
+const style$8 = `
   .AppWrapper-leave-to-url-notice {
     opacity: 0;
 
@@ -1324,105 +1427,13 @@ const AppWrapper = (props) => {
     /* --------------- Main UI -------------- */
     /*----------------------------------------*/
     return (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement("style", null, style$9),
+        React__default.createElement("style", null, style$8),
         React__default.createElement("style", null, tooltipStyle),
         modal,
         customModalPortals,
         body));
 };
 
-/**
- * Loading spinner/indicator
- * @author Gabe Abrams
- */
-/*------------------------------------------------------------------------*/
-/* -------------------------------- Style ------------------------------- */
-/*------------------------------------------------------------------------*/
-const style$8 = `
-/* Container fades in */
-.LoadingSpinner-container {
-  animation-name: LoadingSpinner-container-fade-in;
-  animation-duration: 0.3s;
-  animation-delay: 0.4s;
-  animation-fill-mode: both;
-  animation-timing-function: ease-out;
-}
-@keyframes LoadingSpinner-container-fade-in {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-
-/* Blips */
-.LoadingSpinner-blip-1,
-.LoadingSpinner-blip-2,
-.LoadingSpinner-blip-3,
-.LoadingSpinner-blip-4 {
-  font-size: 1.8rem;
-  opacity: 0.6;
-  margin-top: 1rem;
-  margin-bottom: 1rem;
-}
-
-/* First Blip */
-.LoadingSpinner-blip-1 {
-  animation: LoadingSpinner-pop-animation 2s infinite;
-}
-
-/* Second Blip */
-.LoadingSpinner-blip-2 {
-  animation: LoadingSpinner-pop-animation 2s infinite;
-  -webkit-animation-delay: 0.1s;
-  animation-delay: 0.1s;
-}
-
-/* Third Blip */
-.LoadingSpinner-blip-3 {
-  animation: LoadingSpinner-pop-animation 2s infinite;
-  animation-delay: 0.2s;
-}
-
-/* Fourth Blip */
-.LoadingSpinner-blip-4 {
-  animation: LoadingSpinner-pop-animation 2s infinite;
-  animation-delay: 0.3s;
-}
-
-/* Pop Animation for Each Blip */
-@keyframes LoadingSpinner-pop-animation {
-  0%  {
-    transform: scale(1.0);
-  }
-  10% {
-    transform: scale(1.5);
-  }
-  30% {
-    transform: scale(1.0);
-  }
-  100% {
-    transform: scale(1.0);
-  }
-}
-`;
-/*------------------------------------------------------------------------*/
-/* ------------------------------ Component ----------------------------- */
-/*------------------------------------------------------------------------*/
-const LoadingSpinner = () => {
-    /*------------------------------------------------------------------------*/
-    /* ------------------------------- Render ------------------------------- */
-    /*------------------------------------------------------------------------*/
-    // Add all four blips to a container
-    return (React__default.createElement("div", { className: "text-center LoadingSpinner LoadingSpinner-container" },
-        React__default.createElement("style", null, style$8),
-        React__default.createElement(FontAwesomeIcon, { icon: faCircle, className: "LoadingSpinner-blip-1 me-1" }),
-        React__default.createElement(FontAwesomeIcon, { icon: faCircle, className: "LoadingSpinner-blip-2 me-1" }),
-        React__default.createElement(FontAwesomeIcon, { icon: faCircle, className: "LoadingSpinner-blip-3 me-1" }),
-        React__default.createElement(FontAwesomeIcon, { icon: faCircle, className: "LoadingSpinner-blip-4" })));
-};
-
 /**
  * A box with a tab on the top that holds buttons and other content
  * @author Gabe Abrams
@@ -2214,27 +2225,27 @@ const PopPendingMark = (props) => {
  */
 /* ------------- Actions ------------ */
 // Types of actions
-var ActionType$9;
+var ActionType$8;
 (function (ActionType) {
     // Indicate that the text was recently copied
     ActionType["IndicateRecentlyCopied"] = "indicate-recently-copied";
     // Clear the status
     ActionType["ClearRecentlyCopiedStatus"] = "clear-recently-copied-status";
-})(ActionType$9 || (ActionType$9 = {}));
+})(ActionType$8 || (ActionType$8 = {}));
 /**
  * Reducer that executes actions
  * @author Gabe Abrams
  * @param state current state
  * @param action action to execute
  */
-const reducer$a = (state, action) => {
+const reducer$9 = (state, action) => {
     switch (action.type) {
-        case ActionType$9.IndicateRecentlyCopied: {
+        case ActionType$8.IndicateRecentlyCopied: {
             return {
                 recentlyCopied: true,
             };
         }
-        case ActionType$9.ClearRecentlyCopiedStatus: {
+        case ActionType$8.ClearRecentlyCopiedStatus: {
             return {
                 recentlyCopied: false,
             };
@@ -2260,7 +2271,7 @@ const CopiableBox = (props) => {
         recentlyCopied: false,
     };
     // Initialize state
-    const [state, dispatch] = useReducer(reducer$a, initialState);
+    const [state, dispatch] = useReducer(reducer$9, initialState);
     // Destructure common state
     const { recentlyCopied, } = state;
     /*------------------------------------------------------------------------*/
@@ -2280,13 +2291,13 @@ const CopiableBox = (props) => {
         }
         // Show copied notice
         dispatch({
-            type: ActionType$9.IndicateRecentlyCopied,
+            type: ActionType$8.IndicateRecentlyCopied,
         });
         // Wait a moment
         yield waitMs(4000);
         // Hide copied notice
         dispatch({
-            type: ActionType$9.ClearRecentlyCopiedStatus,
+            type: ActionType$8.ClearRecentlyCopiedStatus,
         });
     });
     /*------------------------------------------------------------------------*/
@@ -2342,20 +2353,20 @@ const CopiableBox = (props) => {
  */
 /* ------------- Actions ------------ */
 // Types of actions
-var ActionType$8;
+var ActionType$7;
 (function (ActionType) {
     // Toggle whether a child are being shown
     ActionType["ToggleChild"] = "toggle-child";
-})(ActionType$8 || (ActionType$8 = {}));
+})(ActionType$7 || (ActionType$7 = {}));
 /**
  * Reducer that executes actions
  * @author Gabe Abrams
  * @param state current state
  * @param action action to execute
  */
-const reducer$9 = (state, action) => {
+const reducer$8 = (state, action) => {
     switch (action.type) {
-        case ActionType$8.ToggleChild: {
+        case ActionType$7.ToggleChild: {
             return Object.assign(Object.assign({}, state), { childExpanded: Object.assign(Object.assign({}, state.childExpanded), { [String(action.id)]: !state.childExpanded[String(action.id)] }) });
         }
         default: {
@@ -2384,7 +2395,7 @@ const NestableItemList = (props) => {
         childExpanded: initChildExpanded,
     };
     // Initialize state
-    const [state, dispatch] = useReducer(reducer$9, initialState);
+    const [state, dispatch] = useReducer(reducer$8, initialState);
     // Destructure common state
     const { childExpanded, } = state;
     /*------------------------------------------------------------------------*/
@@ -2474,7 +2485,7 @@ const NestableItemList = (props) => {
                     backgroundColor: 'transparent',
                 }, type: "button", onClick: () => {
                     dispatch({
-                        type: ActionType$8.ToggleChild,
+                        type: ActionType$7.ToggleChild,
                         id: item.id,
                     });
                 }, "aria-label": `${childExpanded[item.id] ? 'Hide' : 'Show'} items in ${item.name}` },
@@ -2758,7 +2769,7 @@ var SortType;
 })(SortType || (SortType = {}));
 /* ------------- Actions ------------ */
 // Types of actions
-var ActionType$7;
+var ActionType$6;
 (function (ActionType) {
     // Toggle sort column param
     ActionType["ToggleSortColumn"] = "toggle-sort-column";
@@ -2770,16 +2781,16 @@ var ActionType$7;
     ActionType["ShowAllColumns"] = "show-all-columns";
     // Hide all columns
     ActionType["HideAllColumns"] = "hide-all-columns";
-})(ActionType$7 || (ActionType$7 = {}));
+})(ActionType$6 || (ActionType$6 = {}));
 /**
  * Reducer that executes actions
  * @author Gabe Abrams
  * @param state current state
  * @param action action to execute
  */
-const reducer$8 = (state, action) => {
+const reducer$7 = (state, action) => {
     switch (action.type) {
-        case ActionType$7.ToggleSortColumn: {
+        case ActionType$6.ToggleSortColumn: {
             if (action.param !== state.sortColumnParam) {
                 // Different column param
                 return Object.assign(Object.assign({}, state), { sortColumnParam: action.param, sortType: SortType.Ascending });
@@ -2791,22 +2802,22 @@ const reducer$8 = (state, action) => {
             // Stop sorting by column
             return Object.assign(Object.assign({}, state), { sortColumnParam: undefined, sortType: SortType.Ascending });
         }
-        case ActionType$7.UpdateColumnVisibility: {
+        case ActionType$6.UpdateColumnVisibility: {
             const { columnVisibilityMap } = state;
             columnVisibilityMap[action.param] = action.visible;
             return Object.assign(Object.assign({}, state), { columnVisibilityMap });
         }
-        case ActionType$7.ToggleColVisCusModalVisibility: {
+        case ActionType$6.ToggleColVisCusModalVisibility: {
             return Object.assign(Object.assign({}, state), { columnVisibilityCustomizationModalVisible: !state.columnVisibilityCustomizationModalVisible });
         }
-        case ActionType$7.ShowAllColumns: {
+        case ActionType$6.ShowAllColumns: {
             const { columnVisibilityMap } = state;
             Object.keys(columnVisibilityMap).forEach((param) => {
                 columnVisibilityMap[param] = true;
             });
             return Object.assign(Object.assign({}, state), { columnVisibilityMap });
         }
-        case ActionType$7.HideAllColumns: {
+        case ActionType$6.HideAllColumns: {
             const { columnVisibilityMap } = state;
             Object.keys(columnVisibilityMap).forEach((param) => {
                 columnVisibilityMap[param] = false;
@@ -2853,7 +2864,7 @@ const IntelliTable = (props) => {
         columnVisibilityCustomizationModalVisible: false,
     };
     // Initialize state
-    const [state, dispatch] = useReducer(reducer$8, initialState);
+    const [state, dispatch] = useReducer(reducer$7, initialState);
     // Destructure common state
     const { sortColumnParam, sortType, columnVisibilityMap, columnVisibilityCustomizationModalVisible, } = state;
     /*------------------------------------------------------------------------*/
@@ -2876,13 +2887,13 @@ const IntelliTable = (props) => {
                     return alert('Choose at least one column', 'To continue, you have to choose at least one column to show');
                 }
                 dispatch({
-                    type: ActionType$7.ToggleColVisCusModalVisibility,
+                    type: ActionType$6.ToggleColVisCusModalVisibility,
                 });
             }, okayVariant: Variant$1.Light },
             columns.map((column) => {
                 return (React__default.createElement(CheckboxButton, { key: column.param, id: `IntelliTable-${id}-toggle-visibility-${column.param}`, className: "mb-2", text: column.title, onChanged: (checked) => {
                         dispatch({
-                            type: ActionType$7.UpdateColumnVisibility,
+                            type: ActionType$6.UpdateColumnVisibility,
                             param: column.param,
                             visible: checked,
                         });
@@ -2891,12 +2902,12 @@ const IntelliTable = (props) => {
             React__default.createElement("div", { className: "mt-3" }, "Or you can:"),
             React__default.createElement("button", { type: "button", id: `IntelliTable-${id}-select-all-columns`, className: "btn btn-secondary me-2", "aria-label": `show all columns in the ${title} table`, onClick: () => {
                     dispatch({
-                        type: ActionType$7.ShowAllColumns,
+                        type: ActionType$6.ShowAllColumns,
                     });
                 } }, "Select All"),
             React__default.createElement("button", { type: "button", id: `IntelliTable-${id}-select-none-columns`, className: "btn btn-secondary", "aria-label": `hide all columns in the ${title} table`, onClick: () => {
                     dispatch({
-                        type: ActionType$7.HideAllColumns,
+                        type: ActionType$6.HideAllColumns,
                     });
                 } }, "Deselect All")));
     }
@@ -2947,7 +2958,7 @@ const IntelliTable = (props) => {
                 React__default.createElement("div", null,
                     React__default.createElement("button", { type: "button", id: `IntelliTable-${id}-sort-by-${column.param}-button`, className: `btn btn-${sortingByThisColumn ? 'light' : 'secondary'} btn-sm ms-1 ps-1 pe-1 pt-0 pb-0`, "aria-label": sortButtonAriaLabel, onClick: () => {
                             dispatch({
-                                type: ActionType$7.ToggleSortColumn,
+                                type: ActionType$6.ToggleSortColumn,
                                 param: column.param,
                             });
                         } },
@@ -3136,7 +3147,7 @@ const IntelliTable = (props) => {
                 React__default.createElement(CSVDownloadButton, { "aria-label": `download data as csv for ${title}`, id: `IntelliTable-${id}-download-as-csv`, filename: filename, csv: csv }),
                 React__default.createElement("button", { type: "button", className: "btn btn-secondary ms-2", "aria-label": `show panel for customizing which columns show in table ${title}`, id: `IntelliTable-${id}-show-column-customization-modal`, onClick: () => {
                         dispatch({
-                            type: ActionType$7.ToggleColVisCusModalVisibility,
+                            type: ActionType$6.ToggleColVisCusModalVisibility,
                         });
                     } },
                     "Show/Hide Cols",
@@ -3502,7 +3513,7 @@ const genHumanReadableName = (machineReadableName) => {
 };
 /* ------------- Actions ------------ */
 // Types of actions
-var ActionType$6;
+var ActionType$5;
 (function (ActionType) {
     // Show the loading bar
     ActionType["StartLoading"] = "start-loading";
@@ -3524,45 +3535,45 @@ var ActionType$6;
     ActionType["UpdateActionErrorFilterState"] = "update-action-error-filter-state";
     // Update the advanced filter state
     ActionType["UpdateAdvancedFilterState"] = "update-advanced-filter-state";
-})(ActionType$6 || (ActionType$6 = {}));
+})(ActionType$5 || (ActionType$5 = {}));
 /**
  * Reducer that executes actions
  * @author Gabe Abrams
  * @param state current state
  * @param action action to execute
  */
-const reducer$7 = (state, action) => {
+const reducer$6 = (state, action) => {
     switch (action.type) {
-        case ActionType$6.StartLoading: {
+        case ActionType$5.StartLoading: {
             return Object.assign(Object.assign({}, state), { loading: true });
         }
-        case ActionType$6.FinishLoading: {
+        case ActionType$5.FinishLoading: {
             return Object.assign(Object.assign({}, state), { loading: false, logMap: action.logMap });
         }
-        case ActionType$6.ToggleFilterDrawer: {
+        case ActionType$5.ToggleFilterDrawer: {
             return Object.assign(Object.assign({}, state), { expandedFilterDrawer: (state.expandedFilterDrawer === action.filterDrawer
                     ? undefined // hide
                     : action.filterDrawer) });
         }
-        case ActionType$6.HideFilterDrawer: {
+        case ActionType$5.HideFilterDrawer: {
             return Object.assign(Object.assign({}, state), { expandedFilterDrawer: undefined });
         }
-        case ActionType$6.ResetFilters: {
+        case ActionType$5.ResetFilters: {
             return Object.assign(Object.assign({}, state), { dateFilterState: action.initDateFilterState, contextFilterState: action.initContextFilterState, tagFilterState: action.initTagFilterState, actionErrorFilterState: action.initActionErrorFilterState, advancedFilterState: action.initAdvancedFilterState });
         }
-        case ActionType$6.UpdateDateFilterState: {
+        case ActionType$5.UpdateDateFilterState: {
             return Object.assign(Object.assign({}, state), { dateFilterState: action.dateFilterState });
         }
-        case ActionType$6.UpdateContextFilterState: {
+        case ActionType$5.UpdateContextFilterState: {
             return Object.assign(Object.assign({}, state), { contextFilterState: action.contextFilterState });
         }
-        case ActionType$6.UpdateTagFilterState: {
+        case ActionType$5.UpdateTagFilterState: {
             return Object.assign(Object.assign({}, state), { tagFilterState: action.tagFilterState });
         }
-        case ActionType$6.UpdateActionErrorFilterState: {
+        case ActionType$5.UpdateActionErrorFilterState: {
             return Object.assign(Object.assign({}, state), { actionErrorFilterState: action.actionErrorFilterState });
         }
-        case ActionType$6.UpdateAdvancedFilterState: {
+        case ActionType$5.UpdateAdvancedFilterState: {
             return Object.assign(Object.assign({}, state), { advancedFilterState: action.advancedFilterState });
         }
         default: {
@@ -3691,7 +3702,7 @@ const LogReviewer = (props) => {
         advancedFilterState: initAdvancedFilterState,
     };
     // Initialize state
-    const [state, dispatch] = useReducer(reducer$7, initialState);
+    const [state, dispatch] = useReducer(reducer$6, initialState);
     // Destructure common state
     const { loading, logMap, expandedFilterDrawer, dateFilterState, contextFilterState, tagFilterState, actionErrorFilterState, advancedFilterState, } = state;
     /*------------------------------------------------------------------------*/
@@ -3741,7 +3752,7 @@ const LogReviewer = (props) => {
     const handleDateRangeUpdated = (newDateFilterState) => __awaiter(void 0, void 0, void 0, function* () {
         // Update state
         dispatch({
-            type: ActionType$6.UpdateDateFilterState,
+            type: ActionType$5.UpdateDateFilterState,
             dateFilterState: newDateFilterState,
         });
         // Check which year/month combos we need to load
@@ -3752,7 +3763,7 @@ const LogReviewer = (props) => {
         }
         // Start loading
         dispatch({
-            type: ActionType$6.StartLoading,
+            type: ActionType$5.StartLoading,
         });
         // Load required months
         try {
@@ -3776,7 +3787,7 @@ const LogReviewer = (props) => {
         }
         // Finish loading
         dispatch({
-            type: ActionType$6.FinishLoading,
+            type: ActionType$5.FinishLoading,
             logMap,
         });
     });
@@ -3815,7 +3826,7 @@ const LogReviewer = (props) => {
             React__default.createElement("div", { className: "LogReviewer-filter-toggle-buttons alert alert-secondary p-2 m-0" },
                 React__default.createElement("button", { type: "button", id: "LogReviewer-toggle-date-filter-drawer", className: `btn btn-${FilterDrawer.Date === expandedFilterDrawer ? 'warning' : 'light'} me-2`, "aria-label": "toggle date filter drawer", onClick: () => {
                         dispatch({
-                            type: ActionType$6.ToggleFilterDrawer,
+                            type: ActionType$5.ToggleFilterDrawer,
                             filterDrawer: FilterDrawer.Date,
                         });
                     } },
@@ -3823,7 +3834,7 @@ const LogReviewer = (props) => {
                     "Date"),
                 React__default.createElement("button", { type: "button", id: "LogReviewer-toggle-context-filter-drawer", className: `btn btn-${FilterDrawer.Context === expandedFilterDrawer ? 'warning' : 'light'} me-2`, "aria-label": "toggle context filter drawer", onClick: () => {
                         dispatch({
-                            type: ActionType$6.ToggleFilterDrawer,
+                            type: ActionType$5.ToggleFilterDrawer,
                             filterDrawer: FilterDrawer.Context,
                         });
                     } },
@@ -3831,7 +3842,7 @@ const LogReviewer = (props) => {
                     "Context"),
                 (LogMetadata.Tag && Object.keys(LogMetadata.Tag).length > 0) && (React__default.createElement("button", { type: "button", id: "LogReviewer-toggle-tag-filter-drawer", className: `btn btn-${FilterDrawer.Tag === expandedFilterDrawer ? 'warning' : 'light'} me-2`, "aria-label": "toggle tag filter drawer", onClick: () => {
                         dispatch({
-                            type: ActionType$6.ToggleFilterDrawer,
+                            type: ActionType$5.ToggleFilterDrawer,
                             filterDrawer: FilterDrawer.Tag,
                         });
                     } },
@@ -3839,7 +3850,7 @@ const LogReviewer = (props) => {
                     "Tag")),
                 React__default.createElement("button", { type: "button", id: "LogReviewer-toggle-action-filter-drawer", className: `btn btn-${FilterDrawer.Action === expandedFilterDrawer ? 'warning' : 'light'} me-2`, "aria-label": "toggle action and error filter drawer", onClick: () => {
                         dispatch({
-                            type: ActionType$6.ToggleFilterDrawer,
+                            type: ActionType$5.ToggleFilterDrawer,
                             filterDrawer: FilterDrawer.Action,
                         });
                     } },
@@ -3847,7 +3858,7 @@ const LogReviewer = (props) => {
                     "Action"),
                 React__default.createElement("button", { type: "button", id: "LogReviewer-toggle-advanced-filter-drawer", className: `btn btn-${FilterDrawer.Advanced === expandedFilterDrawer ? 'warning' : 'light'} me-2`, "aria-label": "toggle advanced filter drawer", onClick: () => {
                         dispatch({
-                            type: ActionType$6.ToggleFilterDrawer,
+                            type: ActionType$5.ToggleFilterDrawer,
                             filterDrawer: FilterDrawer.Advanced,
                         });
                     } },
@@ -3855,7 +3866,7 @@ const LogReviewer = (props) => {
                     "Advanced"),
                 React__default.createElement("button", { type: "button", id: "LogReviewer-reset-filters-button", className: "btn btn-light", "aria-label": "reset filters", onClick: () => {
                         dispatch({
-                            type: ActionType$6.ResetFilters,
+                            type: ActionType$5.ResetFilters,
                             initActionErrorFilterState,
                             initAdvancedFilterState,
                             initContextFilterState,
@@ -3977,7 +3988,7 @@ const LogReviewer = (props) => {
                             }
                         });
                         dispatch({
-                            type: ActionType$6.UpdateContextFilterState,
+                            type: ActionType$5.UpdateContextFilterState,
                             contextFilterState,
                         });
                     } }));
@@ -3992,7 +4003,7 @@ const LogReviewer = (props) => {
                         return (React__default.createElement(CheckboxButton, { key: tag, id: `LogReviewer-tag-${tag}-checkbox`, text: description, ariaLabel: `require that logs be tagged with "${description}" or any other selected tag`, checked: tagFilterState[tag], onChanged: (checked) => {
                                 tagFilterState[tag] = checked;
                                 dispatch({
-                                    type: ActionType$6.UpdateTagFilterState,
+                                    type: ActionType$5.UpdateTagFilterState,
                                     tagFilterState,
                                 });
                             } }));
@@ -4005,21 +4016,21 @@ const LogReviewer = (props) => {
                         React__default.createElement(RadioButton, { id: "LogReviewer-type-all", text: "All Logs", onSelected: () => {
                                 actionErrorFilterState.type = undefined;
                                 dispatch({
-                                    type: ActionType$6.UpdateActionErrorFilterState,
+                                    type: ActionType$5.UpdateActionErrorFilterState,
                                     actionErrorFilterState,
                                 });
                             }, ariaLabel: "show logs of all types", selected: actionErrorFilterState.type === undefined }),
                         React__default.createElement(RadioButton, { id: "LogReviewer-type-action-only", text: "Action Logs Only", onSelected: () => {
                                 actionErrorFilterState.type = LogType$1.Action;
                                 dispatch({
-                                    type: ActionType$6.UpdateActionErrorFilterState,
+                                    type: ActionType$5.UpdateActionErrorFilterState,
                                     actionErrorFilterState,
                                 });
                             }, ariaLabel: "only show action logs", selected: actionErrorFilterState.type === LogType$1.Action }),
                         React__default.createElement(RadioButton, { id: "LogReviewer-type-error-only", text: "Action Error Only", onSelected: () => {
                                 actionErrorFilterState.type = LogType$1.Error;
                                 dispatch({
-                                    type: ActionType$6.UpdateActionErrorFilterState,
+                                    type: ActionType$5.UpdateActionErrorFilterState,
                                     actionErrorFilterState,
                                 });
                             }, ariaLabel: "only show error logs", selected: actionErrorFilterState.type === LogType$1.Error, noMarginOnRight: true })),
@@ -4031,7 +4042,7 @@ const LogReviewer = (props) => {
                             return (React__default.createElement(CheckboxButton, { key: action, id: `LogReviewer-action-${action}-checkbox`, text: description, ariaLabel: `include logs with action type "${description}" in results`, noMarginOnRight: true, checked: actionErrorFilterState.action[action], onChanged: (checked) => {
                                     actionErrorFilterState.action[action] = checked;
                                     dispatch({
-                                        type: ActionType$6.UpdateActionErrorFilterState,
+                                        type: ActionType$5.UpdateActionErrorFilterState,
                                         actionErrorFilterState,
                                     });
                                 } }));
@@ -4042,7 +4053,7 @@ const LogReviewer = (props) => {
                             return (React__default.createElement(CheckboxButton, { key: target, id: `LogReviewer-target-${target}-checkbox`, text: description, ariaLabel: `include logs with target "${description}" in results`, checked: actionErrorFilterState.target[target], noMarginOnRight: true, onChanged: (checked) => {
                                     actionErrorFilterState.target[target] = checked;
                                     dispatch({
-                                        type: ActionType$6.UpdateActionErrorFilterState,
+                                        type: ActionType$5.UpdateActionErrorFilterState,
                                         actionErrorFilterState,
                                     });
                                 } }));
@@ -4054,7 +4065,7 @@ const LogReviewer = (props) => {
                             React__default.createElement("input", { type: "text", className: "form-control", "aria-label": "query for error message", value: actionErrorFilterState.errorMessage, placeholder: "e.g. undefined is not a function", onChange: (e) => {
                                     actionErrorFilterState.errorMessage = e.target.value;
                                     dispatch({
-                                        type: ActionType$6.UpdateActionErrorFilterState,
+                                        type: ActionType$5.UpdateActionErrorFilterState,
                                         actionErrorFilterState,
                                     });
                                 } })),
@@ -4065,7 +4076,7 @@ const LogReviewer = (props) => {
                                         .trim()
                                         .toUpperCase());
                                     dispatch({
-                                        type: ActionType$6.UpdateActionErrorFilterState,
+                                        type: ActionType$5.UpdateActionErrorFilterState,
                                         actionErrorFilterState,
                                     });
                                 } }))))));
@@ -4079,7 +4090,7 @@ const LogReviewer = (props) => {
                             React__default.createElement("input", { type: "text", className: "form-control", "aria-label": "query for user first name", value: advancedFilterState.userFirstName, placeholder: "e.g. Divardo", onChange: (e) => {
                                     advancedFilterState.userFirstName = e.target.value;
                                     dispatch({
-                                        type: ActionType$6.UpdateAdvancedFilterState,
+                                        type: ActionType$5.UpdateAdvancedFilterState,
                                         advancedFilterState,
                                     });
                                 } })),
@@ -4088,7 +4099,7 @@ const LogReviewer = (props) => {
                             React__default.createElement("input", { type: "text", className: "form-control", "aria-label": "query for user last name", value: advancedFilterState.userLastName, placeholder: "e.g. Calicci", onChange: (e) => {
                                     advancedFilterState.userLastName = e.target.value;
                                     dispatch({
-                                        type: ActionType$6.UpdateAdvancedFilterState,
+                                        type: ActionType$5.UpdateAdvancedFilterState,
                                         advancedFilterState,
                                     });
                                 } })),
@@ -4098,7 +4109,7 @@ const LogReviewer = (props) => {
                                     advancedFilterState.userEmail = ((e.target.value)
                                         .trim());
                                     dispatch({
-                                        type: ActionType$6.UpdateAdvancedFilterState,
+                                        type: ActionType$5.UpdateAdvancedFilterState,
                                         advancedFilterState,
                                     });
                                 } })),
@@ -4112,7 +4123,7 @@ const LogReviewer = (props) => {
                                             .trim());
                                     }
                                     dispatch({
-                                        type: ActionType$6.UpdateAdvancedFilterState,
+                                        type: ActionType$5.UpdateAdvancedFilterState,
                                         advancedFilterState,
                                     });
                                 } })),
@@ -4120,21 +4131,21 @@ const LogReviewer = (props) => {
                             React__default.createElement(CheckboxButton, { text: "Students", onChanged: (checked) => {
                                     advancedFilterState.includeLearners = checked;
                                     dispatch({
-                                        type: ActionType$6.UpdateAdvancedFilterState,
+                                        type: ActionType$5.UpdateAdvancedFilterState,
                                         advancedFilterState,
                                     });
                                 }, checked: advancedFilterState.includeLearners, ariaLabel: "show logs from students" }),
                             React__default.createElement(CheckboxButton, { text: "Teaching Team Members", onChanged: (checked) => {
                                     advancedFilterState.includeTTMs = checked;
                                     dispatch({
-                                        type: ActionType$6.UpdateAdvancedFilterState,
+                                        type: ActionType$5.UpdateAdvancedFilterState,
                                         advancedFilterState,
                                     });
                                 }, checked: advancedFilterState.includeTTMs, ariaLabel: "show logs from teaching team members" }),
                             React__default.createElement(CheckboxButton, { text: "Admins", onChanged: (checked) => {
                                     advancedFilterState.includeAdmins = checked;
                                     dispatch({
-                                        type: ActionType$6.UpdateAdvancedFilterState,
+                                        type: ActionType$5.UpdateAdvancedFilterState,
                                         advancedFilterState,
                                     });
                                 }, checked: advancedFilterState.includeAdmins, ariaLabel: "show logs from admins" }))),
@@ -4144,7 +4155,7 @@ const LogReviewer = (props) => {
                             React__default.createElement("input", { type: "text", className: "form-control", "aria-label": "query for course name", value: advancedFilterState.courseName, placeholder: "e.g. GLC 200", onChange: (e) => {
                                     advancedFilterState.courseName = e.target.value;
                                     dispatch({
-                                        type: ActionType$6.UpdateAdvancedFilterState,
+                                        type: ActionType$5.UpdateAdvancedFilterState,
                                         advancedFilterState,
                                     });
                                 } })),
@@ -4158,7 +4169,7 @@ const LogReviewer = (props) => {
                                             .trim());
                                     }
                                     dispatch({
-                                        type: ActionType$6.UpdateAdvancedFilterState,
+                                        type: ActionType$5.UpdateAdvancedFilterState,
                                         advancedFilterState,
                                     });
                                 } }))),
@@ -4167,21 +4178,21 @@ const LogReviewer = (props) => {
                             React__default.createElement(RadioButton, { text: "All Devices", ariaLabel: "show logs from all devices", selected: advancedFilterState.isMobile === undefined, onSelected: () => {
                                     advancedFilterState.isMobile = undefined;
                                     dispatch({
-                                        type: ActionType$6.UpdateAdvancedFilterState,
+                                        type: ActionType$5.UpdateAdvancedFilterState,
                                         advancedFilterState,
                                     });
                                 } }),
                             React__default.createElement(RadioButton, { text: "Mobile Only", ariaLabel: "show logs from mobile devices", selected: advancedFilterState.isMobile === true, onSelected: () => {
                                     advancedFilterState.isMobile = true;
                                     dispatch({
-                                        type: ActionType$6.UpdateAdvancedFilterState,
+                                        type: ActionType$5.UpdateAdvancedFilterState,
                                         advancedFilterState,
                                     });
                                 } }),
                             React__default.createElement(RadioButton, { text: "Desktop Only", ariaLabel: "show logs from desktop devices", selected: advancedFilterState.isMobile === false, onSelected: () => {
                                     advancedFilterState.isMobile = false;
                                     dispatch({
-                                        type: ActionType$6.UpdateAdvancedFilterState,
+                                        type: ActionType$5.UpdateAdvancedFilterState,
                                         advancedFilterState,
                                     });
                                 }, noMarginOnRight: true }))),
@@ -4190,21 +4201,21 @@ const LogReviewer = (props) => {
                             React__default.createElement(RadioButton, { text: "Both", ariaLabel: "show logs from all sources", selected: advancedFilterState.source === undefined, onSelected: () => {
                                     advancedFilterState.source = undefined;
                                     dispatch({
-                                        type: ActionType$6.UpdateAdvancedFilterState,
+                                        type: ActionType$5.UpdateAdvancedFilterState,
                                         advancedFilterState,
                                     });
                                 } }),
                             React__default.createElement(RadioButton, { text: "Client Only", ariaLabel: "show logs from client source", selected: advancedFilterState.source === LogSource$1.Client, onSelected: () => {
                                     advancedFilterState.source = LogSource$1.Client;
                                     dispatch({
-                                        type: ActionType$6.UpdateAdvancedFilterState,
+                                        type: ActionType$5.UpdateAdvancedFilterState,
                                         advancedFilterState,
                                     });
                                 } }),
                             React__default.createElement(RadioButton, { text: "Server Only", ariaLabel: "show logs from server source", selected: advancedFilterState.source === LogSource$1.Server, onSelected: () => {
                                     advancedFilterState.source = LogSource$1.Server;
                                     dispatch({
-                                        type: ActionType$6.UpdateAdvancedFilterState,
+                                        type: ActionType$5.UpdateAdvancedFilterState,
                                         advancedFilterState,
                                     });
                                 }, noMarginOnRight: true })),
@@ -4215,7 +4226,7 @@ const LogReviewer = (props) => {
                                         advancedFilterState.courseName = ((e.target.value)
                                             .trim());
                                         dispatch({
-                                            type: ActionType$6.UpdateAdvancedFilterState,
+                                            type: ActionType$5.UpdateAdvancedFilterState,
                                             advancedFilterState,
                                         });
                                     } })),
@@ -4225,7 +4236,7 @@ const LogReviewer = (props) => {
                                         advancedFilterState.courseName = ((e.target.value)
                                             .trim());
                                         dispatch({
-                                            type: ActionType$6.UpdateAdvancedFilterState,
+                                            type: ActionType$5.UpdateAdvancedFilterState,
                                             advancedFilterState,
                                         });
                                     } })))))));
@@ -12045,11 +12056,11 @@ var CreatableSelect$1 = CreatableSelect;
  */
 /* ------------- Actions ------------ */
 // Types of actions
-var ActionType$5;
+var ActionType$4;
 (function (ActionType) {
     // Update the input value
     ActionType["SetInputValue"] = "SetInputValue";
-})(ActionType$5 || (ActionType$5 = {}));
+})(ActionType$4 || (ActionType$4 = {}));
 /**
  * Reducer that executes actions
  * @author Yuen Ler Chow
@@ -12057,9 +12068,9 @@ var ActionType$5;
  * @param action action to execute
  * @returns updated state
  */
-const reducer$6 = (state, action) => {
+const reducer$5 = (state, action) => {
     switch (action.type) {
-        case ActionType$5.SetInputValue: {
+        case ActionType$4.SetInputValue: {
             return Object.assign(Object.assign({}, state), { inputValue: action.value });
         }
         default: {
@@ -12079,7 +12090,7 @@ const CreatableMultiselect = (props) => {
         inputValue: '',
     };
     // Initialize state
-    const [state, dispatch] = useReducer(reducer$6, initialState);
+    const [state, dispatch] = useReducer(reducer$5, initialState);
     // Destructure common state
     const { inputValue } = state;
     /*------------------------------------------------------------------------*/
@@ -12156,7 +12167,7 @@ const CreatableMultiselect = (props) => {
         }
         // Reset text field to empty because the values have been added
         dispatch({
-            type: ActionType$5.SetInputValue,
+            type: ActionType$4.SetInputValue,
             value: '',
         });
     };
@@ -12195,7 +12206,7 @@ const CreatableMultiselect = (props) => {
         else {
             // simply update the input value to the new input value
             dispatch({
-                type: ActionType$5.SetInputValue,
+                type: ActionType$4.SetInputValue,
                 value: newValue,
             });
         }
@@ -12247,13 +12258,13 @@ const style$1 = `
 `;
 /* ------------- Actions ------------ */
 // Types of actions
-var ActionType$4;
+var ActionType$3;
 (function (ActionType) {
     // Update the DBEntry
     ActionType["UpdateDBEntry"] = "UpdateDBEntry";
     // Start the save spinner
     ActionType["StartSave"] = "StartSave";
-})(ActionType$4 || (ActionType$4 = {}));
+})(ActionType$3 || (ActionType$3 = {}));
 /**
  * Reducer that executes actions
  * @author Yuen Ler Chow
@@ -12261,12 +12272,12 @@ var ActionType$4;
  * @param action action to execute
  * @returns updated state
  */
-const reducer$5 = (state, action) => {
+const reducer$4 = (state, action) => {
     switch (action.type) {
-        case ActionType$4.UpdateDBEntry: {
+        case ActionType$3.UpdateDBEntry: {
             return Object.assign(Object.assign({}, state), { entry: action.dbEntry });
         }
-        case ActionType$4.StartSave: {
+        case ActionType$3.StartSave: {
             return Object.assign(Object.assign({}, state), { saving: true });
         }
         default: {
@@ -12291,7 +12302,7 @@ const AddOrEditDBEntry = (props) => {
         saving: false,
     };
     // Initialize state
-    const [state, dispatch] = useReducer(reducer$5, initialState);
+    const [state, dispatch] = useReducer(reducer$4, initialState);
     // Destructure common state
     const { entry, saving, } = state;
     /*------------------------------------------------------------------------*/
@@ -12303,7 +12314,7 @@ const AddOrEditDBEntry = (props) => {
      */
     const save = () => __awaiter(void 0, void 0, void 0, function* () {
         // Start the save loading indicator
-        dispatch({ type: ActionType$4.StartSave });
+        dispatch({ type: ActionType$3.StartSave });
         // add all default values to the entry
         entryFields.forEach((field) => {
             if (field.defaultValue && !entry[field.objectKey]) {
@@ -12486,7 +12497,7 @@ const AddOrEditDBEntry = (props) => {
                                 return (React__default.createElement(RadioButton, { key: choice.value, text: choice.title, selected: entry[field.objectKey] === choice.value, onSelected: () => {
                                         entry[field.objectKey] = choice.value;
                                         dispatch({
-                                            type: ActionType$4.UpdateDBEntry,
+                                            type: ActionType$3.UpdateDBEntry,
                                             dbEntry: entry,
                                         });
                                     }, ariaLabel: choice.title }));
@@ -12498,7 +12509,7 @@ const AddOrEditDBEntry = (props) => {
                         React__default.createElement("input", { disabled: disabled, type: "text", className: "form-control", placeholder: field.placeholder, "aria-describedby": "AddOrEditDBEntry-form-name-label", value: entry[field.objectKey] || '', onChange: (e) => {
                                 entry[field.objectKey] = (e.target.value);
                                 dispatch({
-                                    type: ActionType$4.UpdateDBEntry,
+                                    type: ActionType$3.UpdateDBEntry,
                                     dbEntry: entry,
                                 });
                             } }))));
@@ -12511,7 +12522,7 @@ const AddOrEditDBEntry = (props) => {
                                 entry[field.objectKey] = (e.target.value
                                     .replace(/[^0-9]/g, ''));
                                 dispatch({
-                                    type: ActionType$4.UpdateDBEntry,
+                                    type: ActionType$3.UpdateDBEntry,
                                     dbEntry: entry,
                                 });
                             } }))));
@@ -12541,7 +12552,7 @@ const AddOrEditDBEntry = (props) => {
                                         }
                                         // Save
                                         dispatch({
-                                            type: ActionType$4.UpdateDBEntry,
+                                            type: ActionType$3.UpdateDBEntry,
                                             dbEntry: entry,
                                         });
                                     }, ariaLabel: choice.title }));
@@ -12556,7 +12567,7 @@ const AddOrEditDBEntry = (props) => {
                                     // Update entry and save
                                     entry[field.objectKey] = values;
                                     dispatch({
-                                        type: ActionType$4.UpdateDBEntry,
+                                        type: ActionType$3.UpdateDBEntry,
                                         dbEntry: entry,
                                     });
                                 } })))));
@@ -12569,7 +12580,7 @@ const AddOrEditDBEntry = (props) => {
                             React__default.createElement(CreatableMultiselect, { disabled: disabled, type: DBEntryFieldType$1.NumberArray, values: entry[field.objectKey] || [], onChange: (values) => {
                                     entry[field.objectKey] = values;
                                     dispatch({
-                                        type: ActionType$4.UpdateDBEntry,
+                                        type: ActionType$3.UpdateDBEntry,
                                         dbEntry: entry,
                                     });
                                 } })))));
@@ -12643,7 +12654,7 @@ const generateEndpointPath = (collectionName, adminsOnly) => {
  */
 /* ------------- Actions ------------ */
 // Types of actions
-var ActionType$3;
+var ActionType$2;
 (function (ActionType) {
     // Show adder
     ActionType["ShowAdder"] = "ShowAdder";
@@ -12657,7 +12668,7 @@ var ActionType$3;
     ActionType["StartDelete"] = "StartDelete";
     // Finish deletion process
     ActionType["FinishDelete"] = "FinishDelete";
-})(ActionType$3 || (ActionType$3 = {}));
+})(ActionType$2 || (ActionType$2 = {}));
 /**
  * Reducer that executes actions
  * @author Yuen Ler Chow
@@ -12665,18 +12676,18 @@ var ActionType$3;
  * @param action action to execute
  * @returns updated state
  */
-const reducer$4 = (state, action) => {
+const reducer$3 = (state, action) => {
     switch (action.type) {
-        case ActionType$3.FinishLoading: {
+        case ActionType$2.FinishLoading: {
             return Object.assign(Object.assign({}, state), { loading: false, dbEntries: action.dbEntries });
         }
-        case ActionType$3.ShowAdder: {
+        case ActionType$2.ShowAdder: {
             return Object.assign(Object.assign({}, state), { adding: true, dbEntryToEdit: undefined });
         }
-        case ActionType$3.ShowEditor: {
+        case ActionType$2.ShowEditor: {
             return Object.assign(Object.assign({}, state), { adding: false, dbEntryToEdit: action.dbEntry });
         }
-        case ActionType$3.FinishAdd: {
+        case ActionType$2.FinishAdd: {
             // Handle cancel
             const finishedEntry = action.dbEntry;
             if (!finishedEntry) {
@@ -12700,10 +12711,10 @@ const reducer$4 = (state, action) => {
             // Update the state
             return Object.assign(Object.assign({}, state), { adding: false, dbEntryToEdit: undefined, dbEntries: updatedDbEntries });
         }
-        case ActionType$3.StartDelete: {
+        case ActionType$2.StartDelete: {
             return Object.assign(Object.assign({}, state), { loading: true });
         }
-        case ActionType$3.FinishDelete: {
+        case ActionType$2.FinishDelete: {
             return Object.assign(Object.assign({}, state), { loading: false, 
                 // Remove the deleted entry from the list
                 dbEntries: state.dbEntries.filter((entry) => {
@@ -12729,7 +12740,7 @@ const DBEntryManagerPanel = (props) => {
         loading: true,
     };
     // Initialize state
-    const [state, dispatch] = useReducer(reducer$4, initialState);
+    const [state, dispatch] = useReducer(reducer$3, initialState);
     // Destructure common state
     const { adding, dbEntryToEdit, dbEntries, loading, } = state;
     /*------------------------------------------------------------------------*/
@@ -12755,7 +12766,7 @@ const DBEntryManagerPanel = (props) => {
         try {
             // Start loader
             dispatch({
-                type: ActionType$3.StartDelete,
+                type: ActionType$2.StartDelete,
             });
             // Perform deletion
             yield visitServerEndpoint({
@@ -12764,7 +12775,7 @@ const DBEntryManagerPanel = (props) => {
             });
             // Finish loader
             dispatch({
-                type: ActionType$3.FinishDelete,
+                type: ActionType$2.FinishDelete,
                 dbEntry: entry,
                 idPropName,
             });
@@ -12793,7 +12804,7 @@ const DBEntryManagerPanel = (props) => {
                 });
                 // Save loaded data
                 dispatch({
-                    type: ActionType$3.FinishLoading,
+                    type: ActionType$2.FinishLoading,
                     dbEntries: data,
                 });
             }
@@ -12836,7 +12847,7 @@ const DBEntryManagerPanel = (props) => {
                                 React__default.createElement("span", { className: "d-none d-md-inline ms-1" }, "Remove")),
                             !disableEdit && (React__default.createElement("button", { type: "button", id: `DBEntryManagerPanel-edit-with-id-${entry[idPropName]}`, className: "btn btn-primary", "aria-label": `edit db entry: ${entry[titlePropName]}`, onClick: () => {
                                     dispatch({
-                                        type: ActionType$3.ShowEditor,
+                                        type: ActionType$2.ShowEditor,
                                         dbEntry: entry,
                                     });
                                 } },
@@ -12846,7 +12857,7 @@ const DBEntryManagerPanel = (props) => {
                 React__default.createElement("div", { className: "d-grid" },
                     React__default.createElement("button", { type: "button", id: "DBEntryManagerPanel-add-entry", className: "btn btn-lg btn-primary", "aria-label": `add a new ${itemName} entry to the list of entries`, onClick: () => {
                             dispatch({
-                                type: ActionType$3.ShowAdder,
+                                type: ActionType$2.ShowAdder,
                             });
                         } },
                         React__default.createElement(FontAwesomeIcon, { icon: faPlus, className: "me-2" }),
@@ -12858,7 +12869,7 @@ const DBEntryManagerPanel = (props) => {
     if (!loading && (adding || dbEntryToEdit)) {
         body = (React__default.createElement(AddOrEditDBEntry, { saveEndpointPath: endpoint, validateEntry: validateEntry, modifyEntry: modifyEntry, entryFields: entryFields, dbEntryToEdit: dbEntryToEdit, idPropName: idPropName, entries: dbEntries, itemName: itemName, onFinished: (entry) => {
                 dispatch({
-                    type: ActionType$3.FinishAdd,
+                    type: ActionType$2.FinishAdd,
                     dbEntry: entry,
                     idPropName,
                 });
@@ -13055,25 +13066,25 @@ const getItemIds = (items) => {
 };
 /* ------------- Actions ------------ */
 // Types of actions
-var ActionType$2;
+var ActionType$1;
 (function (ActionType) {
     // Hide the "jump to bottom" button
     ActionType["HideJumpToBottomButton"] = "HideJumpToBottomButton";
     // Show the "jump to bottom" button
     ActionType["ShowJumpToBottomButton"] = "ShowJumpToBottomButton";
-})(ActionType$2 || (ActionType$2 = {}));
+})(ActionType$1 || (ActionType$1 = {}));
 /**
  * Reducer that executes actions
  * @author Gabe Abrams
  * @param state current state
  * @param action action to execute
  */
-const reducer$3 = (state, action) => {
+const reducer$2 = (state, action) => {
     switch (action.type) {
-        case ActionType$2.HideJumpToBottomButton: {
+        case ActionType$1.HideJumpToBottomButton: {
             return Object.assign(Object.assign({}, state), { jumpToBottomButtonVisible: false });
         }
-        case ActionType$2.ShowJumpToBottomButton: {
+        case ActionType$1.ShowJumpToBottomButton: {
             return Object.assign(Object.assign({}, state), { jumpToBottomButtonVisible: true });
         }
         default: {
@@ -13097,7 +13108,7 @@ const AutoscrollToBottomContainer = (props) => {
         jumpToBottomButtonVisible: false,
     };
     // Initialize state
-    const [state, dispatch] = useReducer(reducer$3, initialState);
+    const [state, dispatch] = useReducer(reducer$2, initialState);
     // Destructure common state
     const { jumpToBottomButtonVisible, } = state;
     /* -------------- Refs -------------- */
@@ -13143,7 +13154,7 @@ const AutoscrollToBottomContainer = (props) => {
         }
         // Update state
         dispatch({
-            type: ActionType$2.HideJumpToBottomButton,
+            type: ActionType$1.HideJumpToBottomButton,
         });
         // Scroll to bottom
         container.current.scrollTop = (container.current.scrollHeight
@@ -13167,7 +13178,7 @@ const AutoscrollToBottomContainer = (props) => {
         if (isScrolledToBottom()) {
             // Hide button
             dispatch({
-                type: ActionType$2.HideJumpToBottomButton,
+                type: ActionType$1.HideJumpToBottomButton,
             });
         }
     };
@@ -13209,7 +13220,7 @@ const AutoscrollToBottomContainer = (props) => {
         else {
             // Not scrolled to bottom. Show "jump to bottom" button.
             dispatch({
-                type: ActionType$2.ShowJumpToBottomButton,
+                type: ActionType$1.ShowJumpToBottomButton,
             });
         }
     }, [items]);
@@ -13279,25 +13290,25 @@ const combineClassNames = (classNames) => {
  */
 /* ------------- Actions ------------ */
 // Types of actions
-var ActionType$1;
+var ActionType;
 (function (ActionType) {
     // Start hovering on an option
     ActionType["StartHover"] = "StartHover";
     // Stop hovering on an option
     ActionType["StopHover"] = "StopHover";
-})(ActionType$1 || (ActionType$1 = {}));
+})(ActionType || (ActionType = {}));
 /**
  * Reducer that executes actions
  * @author Gabe Abrams
  * @param state current state
  * @param action action to execute
  */
-const reducer$2 = (state, action) => {
+const reducer$1 = (state, action) => {
     switch (action.type) {
-        case ActionType$1.StartHover: {
+        case ActionType.StartHover: {
             return Object.assign(Object.assign({}, state), { hoveredOptionId: action.hoveredOptionId });
         }
-        case ActionType$1.StopHover: {
+        case ActionType.StopHover: {
             return Object.assign(Object.assign({}, state), { hoveredOptionId: undefined });
         }
         default: {
@@ -13321,7 +13332,7 @@ const MultiSwitch = (props) => {
         hoveredOptionId: undefined,
     };
     // Initialize state
-    const [state, dispatch] = useReducer(reducer$2, initialState);
+    const [state, dispatch] = useReducer(reducer$1, initialState);
     // Destructure common state
     const { hoveredOptionId, } = state;
     /*------------------------------------------------------------------------*/
@@ -13333,7 +13344,7 @@ const MultiSwitch = (props) => {
     });
     // Constants
     const gutterRems = heightRem * 0.1;
-    const itemWidthRems = heightRem * 2.2;
+    const itemWidthRems = heightRem * 1.3;
     const textFontSize = heightRem / 3.5;
     const iconFontSize = heightRem / 2;
     const borderWidthRems = 0.05;
@@ -13453,27 +13464,27 @@ const MultiSwitch = (props) => {
                 : `click to select option "${option.label}"`), onClick: () => {
                 // Remove hover
                 dispatch({
-                    type: ActionType$1.StopHover,
+                    type: ActionType.StopHover,
                 });
                 // Notify parent
                 onChange(option.id);
             }, onMouseEnter: () => {
                 dispatch({
-                    type: ActionType$1.StartHover,
+                    type: ActionType.StartHover,
                     hoveredOptionId: option.id,
                 });
             }, onMouseLeave: () => {
                 dispatch({
-                    type: ActionType$1.StopHover,
+                    type: ActionType.StopHover,
                 });
             }, onFocus: () => {
                 dispatch({
-                    type: ActionType$1.StartHover,
+                    type: ActionType.StartHover,
                     hoveredOptionId: option.id,
                 });
             }, onBlur: () => {
                 dispatch({
-                    type: ActionType$1.StopHover,
+                    type: ActionType.StopHover,
                 });
             }, style: {
                 pointerEvents: ((option.id === selectedOptionId)
@@ -13492,147 +13503,6 @@ const MultiSwitch = (props) => {
         React__default.createElement("div", { className: "MultiSwitch-highlight-container" }, highlight)));
 };
 
-// Types of dropdown items
-var DropdownItemType;
-(function (DropdownItemType) {
-    // Dropdown header
-    DropdownItemType["Header"] = "Header";
-    // Dropdown divider
-    DropdownItemType["Divider"] = "Divider";
-    // Dropdown item
-    DropdownItemType["Item"] = "Item";
-})(DropdownItemType || (DropdownItemType = {}));
-var DropdownItemType$1 = DropdownItemType;
-
-/**
- * A simple dropdown menu
- * @author Alessandra De Lucas
- * @author Yuen Ler Chow
- * @author Gabe Abrams
- */
-/* ------------- Actions ------------ */
-// Types of actions
-var ActionType;
-(function (ActionType) {
-    // Toggle opening the dropdown menu
-    ActionType["ToggleDropdown"] = "ToggleDropdown";
-    // Close the dropdown menu
-    ActionType["CloseDropdown"] = "CloseDropdown";
-})(ActionType || (ActionType = {}));
-/**
- * Reducer that executes actions
- * @author Alessandra De Lucas
- * @author Yuen Ler Chow
- * @param state current state
- * @param action action to execute
- */
-const reducer$1 = (state, action) => {
-    switch (action.type) {
-        case ActionType.ToggleDropdown: {
-            return Object.assign(Object.assign({}, state), { isDropdownOpen: !state.isDropdownOpen });
-        }
-        case ActionType.CloseDropdown: {
-            return Object.assign(Object.assign({}, state), { isDropdownOpen: false });
-        }
-        default: {
-            return state;
-        }
-    }
-};
-/*------------------------------------------------------------------------*/
-/* ------------------------------ Component ----------------------------- */
-/*------------------------------------------------------------------------*/
-const Dropdown = (props) => {
-    /*------------------------------------------------------------------------*/
-    /* -------------------------------- Setup ------------------------------- */
-    /*------------------------------------------------------------------------*/
-    /* -------------- Props ------------- */
-    // Destructure all props
-    const { dropdownButton, items, } = props;
-    /* -------------- State ------------- */
-    // Initial state
-    const initialState = {
-        isDropdownOpen: false,
-    };
-    // Initialize state
-    const [state, dispatch] = useReducer(reducer$1, initialState);
-    // Destructure common state
-    const { isDropdownOpen, } = state;
-    /* -------------- Refs -------------- */
-    // Initialize refs
-    const dropdownRef = useRef(null);
-    /*------------------------------------------------------------------------*/
-    /* ------------------------- Component Functions ------------------------ */
-    /*------------------------------------------------------------------------*/
-    /**
-     * Handle clicking outside of the dropdown menu to close it
-     * @author Yuen Ler Chow
-     * @param event the mouse event
-     */
-    const handleClickOutside = (event) => {
-        if (
-        // Dropdown has been rendered
-        dropdownRef.current
-            // Click occurred outside the dropdown
-            && !dropdownRef.current.contains(event.target)) {
-            dispatch({ type: ActionType.CloseDropdown });
-        }
-    };
-    /*------------------------------------------------------------------------*/
-    /* ------------------------- Lifecycle Functions ------------------------ */
-    /*------------------------------------------------------------------------*/
-    /**
-     * Mount
-     * @author Yuen Ler Chow
-     */
-    useEffect(() => {
-        // Add event listener to close dropdown when clicking outside
-        document.addEventListener('mousedown', handleClickOutside);
-        // Cleanup
-        return () => {
-            document.removeEventListener('mousedown', handleClickOutside);
-        };
-    }, []);
-    /*----------------------------------------*/
-    /* --------------- Main UI -------------- */
-    /*----------------------------------------*/
-    return (React__default.createElement("div", { className: "dropdown", ref: dropdownRef, "data-bs-theme": isDarkModeOn() ? 'dark' : undefined },
-        React__default.createElement("button", { className: combineClassNames([
-                'btn dropdown-toggle border',
-                isDropdownOpen && 'show',
-                `btn-${dropdownButton.variant}`,
-                dropdownButton.variant === Variant$1.Light && 'text-dark',
-            ]), type: "button", id: dropdownButton.id, "aria-expanded": isDropdownOpen, "aria-label": dropdownButton.ariaLabel, onClick: () => {
-                dispatch({
-                    type: ActionType.ToggleDropdown,
-                });
-            } }, dropdownButton.content),
-        React__default.createElement("ul", { className: combineClassNames([
-                'dropdown-menu',
-                isDarkModeOn() && 'dropdown-menu-dark',
-                isDropdownOpen && 'show',
-            ]) }, Object.values(items).map((item) => {
-            if (item.type === DropdownItemType$1.Header) {
-                return (
-                // TODO: Implement header
-                React__default.createElement("span", null));
-            }
-            if (item.type === DropdownItemType$1.Divider) {
-                return (
-                // TODO: Implement divider
-                React__default.createElement("span", null));
-            }
-            return (React__default.createElement("li", { key: item.id },
-                React__default.createElement("button", { type: "button", "aria-label": item.ariaLabel, className: "dropdown-item", onClick: (e) => {
-                        e.preventDefault();
-                        dispatch({
-                            type: ActionType.CloseDropdown,
-                        });
-                        item.onClick();
-                    } }, item.content)));
-        }))));
-};
-
 /**
  * One minute in ms
  * @author Gabe Abrams
@@ -15958,5 +15828,5 @@ var DayOfWeek;
 })(DayOfWeek || (DayOfWeek = {}));
 var DayOfWeek$1 = DayOfWeek;
 
-export { AppWrapper, AutoscrollToBottomContainer, ButtonInputGroup, CSVDownloadButton, CheckboxButton, CopiableBox, DAY_IN_MS, DBEntryFieldType$1 as DBEntryFieldType, DBEntryManagerPanel, DayOfWeek$1 as DayOfWeek, Drawer, Dropdown, DropdownItemType$1 as DropdownItemType, DynamicWord, ErrorBox, ErrorWithCode, HOUR_IN_MS, IntelliTable, ItemPicker, LoadingSpinner, LogAction$1 as LogAction, LogBuiltInMetadata, LogReviewer, LogSource$1 as LogSource, LogType$1 as LogType, MINUTE_IN_MS, Modal, ModalButtonType$1 as ModalButtonType, ModalSize$1 as ModalSize, ModalType$1 as ModalType, MultiSwitch, ParamType$1 as ParamType, PopFailureMark, PopPendingMark, PopSuccessMark, RadioButton, ReactKitErrorCode$1 as ReactKitErrorCode, SimpleDateChooser, TabBox, ToggleSwitch, Tooltip, Variant$1 as Variant, abbreviate, addDBEditorEndpoints, addFatalErrorHandler, alert, avg, canReviewLogs, capitalize, ceilToNumDecimals, combineClassNames, compareArraysByProp, confirm, everyAsync, extractProp, filterAsync, floorToNumDecimals, forEachAsync, forceNumIntoBounds, genCSV, genCommaList, genRouteHandler, getHumanReadableDate, getLocalTimeInfo, getMonthName, getOrdinal, getPartOfDay, getTimeInfoInET, handleError, handleSuccess, idify, initClient, initLogCollection, initServer, isMobileOrTablet, leaveToURL, logClientEvent, makeLinksClickable, mapAsync, onlyKeepLetters, padDecimalZeros, padZerosLeft, parallelLimit, prefixWithAOrAn, roundToNumDecimals, setClientEventMetadataPopulator, showFatalError, shuffleArray, someAsync, startMinWait, stringsToHumanReadableList, stubServerEndpoint, sum, useForceRender, validateEmail, validatePhoneNumber, validateString, visitServerEndpoint, waitMs };
+export { AppWrapper, AutoscrollToBottomContainer, ButtonInputGroup, CSVDownloadButton, CheckboxButton, CopiableBox, DAY_IN_MS, DBEntryFieldType$1 as DBEntryFieldType, DBEntryManagerPanel, DayOfWeek$1 as DayOfWeek, Drawer, DynamicWord, ErrorBox, ErrorWithCode, HOUR_IN_MS, IntelliTable, ItemPicker, LoadingSpinner, LogAction$1 as LogAction, LogBuiltInMetadata, LogReviewer, LogSource$1 as LogSource, LogType$1 as LogType, MINUTE_IN_MS, Modal, ModalButtonType$1 as ModalButtonType, ModalSize$1 as ModalSize, ModalType$1 as ModalType, MultiSwitch, ParamType$1 as ParamType, PopFailureMark, PopPendingMark, PopSuccessMark, RadioButton, ReactKitErrorCode$1 as ReactKitErrorCode, SimpleDateChooser, TabBox, ToggleSwitch, Tooltip, Variant$1 as Variant, abbreviate, addDBEditorEndpoints, addFatalErrorHandler, alert, avg, canReviewLogs, capitalize, ceilToNumDecimals, combineClassNames, compareArraysByProp, confirm, everyAsync, extractProp, filterAsync, floorToNumDecimals, forEachAsync, forceNumIntoBounds, genCSV, genCommaList, genRouteHandler, getHumanReadableDate, getLocalTimeInfo, getMonthName, getOrdinal, getPartOfDay, getTimeInfoInET, handleError, handleSuccess, idify, initClient, initLogCollection, initServer, isMobileOrTablet, leaveToURL, logClientEvent, makeLinksClickable, mapAsync, onlyKeepLetters, padDecimalZeros, padZerosLeft, parallelLimit, prefixWithAOrAn, roundToNumDecimals, setClientEventMetadataPopulator, showFatalError, shuffleArray, someAsync, startMinWait, stringsToHumanReadableList, stubServerEndpoint, sum, useForceRender, validateEmail, validatePhoneNumber, validateString, visitServerEndpoint, waitMs };
 //# sourceMappingURL=index.js.map