dce-reactkit 3.0.0-beta.9 → 3.0.2

package/dist/cjs/index.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var reactFontawesome = require('@fortawesome/react-fontawesome');
 var freeSolidSvgIcons = require('@fortawesome/free-solid-svg-icons');
+var freeRegularSvgIcons = require('@fortawesome/free-regular-svg-icons');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -35,7 +36,7 @@ function __awaiter(thisArg, _arguments, P, generator) {
     });
 }
 
-// Highest error code = DRK2
+// Highest error code = DRK8
 /**
  * List of error codes built into the react kit
  * @author Gabe Abrams
@@ -48,6 +49,8 @@ var ReactKitErrorCode;
     ReactKitErrorCode["MissingParameter"] = "DRK4";
     ReactKitErrorCode["InvalidParameter"] = "DRK5";
     ReactKitErrorCode["WrongCourse"] = "DRK6";
+    ReactKitErrorCode["NoCACCLSendRequestFunction"] = "DRK7";
+    ReactKitErrorCode["NoCACCLGetLaunchInfoFunction"] = "DRK8";
 })(ReactKitErrorCode || (ReactKitErrorCode = {}));
 var ReactKitErrorCode$1 = ReactKitErrorCode;
 
@@ -79,9 +82,9 @@ const ErrorBox = (props) => {
             ' ',
             React__default["default"].createElement("span", { style: {
                     backgroundColor: 'white',
-                    borderRadius: '5px',
-                    paddingLeft: '3px',
-                    paddingRight: '3px',
+                    borderRadius: '0.3rem',
+                    paddingLeft: '0.2rem',
+                    paddingRight: '0.2rem',
                     color: '#DC4150',
                     fontVariant: 'small-caps',
                     fontSize: '80%',
@@ -93,7 +96,7 @@ const ErrorBox = (props) => {
     }
     // Main UI
     return (React__default["default"].createElement("div", { className: "alert alert-danger text-center", style: {
-            maxWidth: '650px',
+            maxWidth: '40rem',
             margin: 'auto',
         } },
         React__default["default"].createElement("h4", { className: "mb-1" },
@@ -192,9 +195,7 @@ var ModalSize$1 = ModalSize;
 /*                                Constants                               */
 /*------------------------------------------------------------------------*/
 // Constants
-const MS_TO_ANIMATE = 400; // Time to animate in/out (defined by bootstrap)
-const MS_ANIMATE_IN_DELAY = 10;
-// Time to wait before animating in (must be >0 or animation won't trigger)
+const MS_TO_ANIMATE = 200; // Animation duration
 // Modal type to list of buttons
 const modalTypeToModalButtonTypes = {
     [ModalType$1.Okay]: [
@@ -274,6 +275,114 @@ const ModalButtonTypeToLabelAndVariant = {
     },
 };
 /*------------------------------------------------------------------------*/
+/*                                  Style                                 */
+/*------------------------------------------------------------------------*/
+const style$2 = `
+  .Modal-backdrop {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vw;
+    background-color: rgba(0, 0, 0, 0.7);
+  }
+
+  .Modal-fading-in {
+    animation-name: Modal-fading-in;
+    animation-duration: ${Math.floor(MS_TO_ANIMATE * 2)}ms;
+    animation-iteration-count: 1;
+    animation-fill-mode: both;
+    animation-timing-function: ease-out;
+  }
+
+  @keyframes Modal-fading-in {
+    0% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+
+  .Modal-fading-out {
+    animation-name: Modal-fading-out;
+    animation-duration: ${MS_TO_ANIMATE}ms;
+    animation-iteration-count: 1;
+    animation-fill-mode: both;
+    animation-timing-function: ease-in;
+  }
+
+  @keyframes Modal-fading-out {
+    0% {
+      opacity: 1;
+    }
+    100% {
+      opacity: 0;
+    }
+  }
+
+  .Modal-animating-in {
+    animation-name: Modal-animating-in;
+    animation-duration: ${MS_TO_ANIMATE}ms;
+    animation-iteration-count: 1;
+    animation-fill-mode: both;
+    animation-timing-function: ease-out;
+  }
+
+  @keyframes Modal-animating-in {
+    0% {
+      transform: scale(1.05) translate(0, -1.5rem);
+      opacity: 0;
+    }
+    100% {
+      transform: scale(1) translate(0, 0);
+      opacity: 1;
+    }
+  }
+
+  .Modal-animating-pop {
+    animation-name: Modal-animating-pop;
+    animation-duration: ${MS_TO_ANIMATE}ms;
+    animation-iteration-count: 1;
+    animation-fill-mode: both;
+    animation-timing-function: ease-in-out;
+  }
+
+  @keyframes Modal-animating-pop {
+    0% {
+      transform: scale(1);
+      opacity: 1;
+    }
+    50% {
+      transform: scale(1.05);
+      opacity: 0.9;
+    }
+    100% {
+      transform: scale(1);
+      opacity: 1;
+    }
+  }
+
+  .Modal-animating-out {
+    animation-name: Modal-animating-out;
+    animation-duration: ${MS_TO_ANIMATE}ms;
+    animation-iteration-count: 1;
+    animation-fill-mode: both;
+    animation-timing-function: ease-in;
+  }
+
+  @keyframes Modal-animating-out {
+    0% {
+      transform: scale(1) translate(0, 0);
+      opacity: 1;
+    }
+    100% {
+      transform: scale(1.05) translate(0, -1.5rem);
+      opacity: 0;
+    }
+  }
+`;
+/*------------------------------------------------------------------------*/
 /*                                Component                               */
 /*------------------------------------------------------------------------*/
 const Modal = (props) => {
@@ -284,10 +393,15 @@ const Modal = (props) => {
     /* -------------- Props ------------- */
     const { type = ModalType$1.NoButtons, size = ModalSize$1.Large, title, children, onClose, dontAllowBackdropExit, onTopOfOtherModals, } = props;
     /* -------------- State ------------- */
+    // If true, the modal is completely gone
+    // (not just invisible, also removed from the dom)
+    const [gone, setGone] = React.useState(false);
     // If true, the modal is shown
     const [visible, setVisible] = React.useState(false);
-    // True if currently animating in
-    const [animatingIn, setAnimatingIn] = React.useState(false);
+    // True if animation is in use
+    const [animatingIn, setAnimatingIn] = React.useState(true);
+    const [animatingPop, setAnimatingPop] = React.useState(false);
+    const [animatingOut, setAnimatingOut] = React.useState(false);
     /*------------------------------------------------------------------------*/
     /*                           Lifecycle Functions                          */
     /*------------------------------------------------------------------------*/
@@ -297,12 +411,10 @@ const Modal = (props) => {
      */
     React.useEffect(() => {
         (() => __awaiter(void 0, void 0, void 0, function* () {
-            // Start the component animating in
-            yield waitMs(MS_ANIMATE_IN_DELAY);
-            setAnimatingIn(true);
             // Wait and then set visible to true
             yield waitMs(MS_TO_ANIMATE);
             setVisible(true);
+            setAnimatingIn(false);
         }))();
     }, []);
     /*------------------------------------------------------------------------*/
@@ -329,13 +441,19 @@ const Modal = (props) => {
         }
         // Update the state
         setVisible(false);
+        setAnimatingOut(true);
         // Call the handler after the modal has animated out
         yield waitMs(MS_TO_ANIMATE);
         onClose(ModalButtonType);
+        setGone(true);
     });
     /*------------------------------------------------------------------------*/
     /*                                 Render                                 */
     /*------------------------------------------------------------------------*/
+    // Return nothing if gone
+    if (gone) {
+        return null;
+    }
     /*----------------------------------------*/
     /*                 Footer                 */
     /*----------------------------------------*/
@@ -357,7 +475,7 @@ const Modal = (props) => {
         // Check if this button is last
         const last = (i === ModalButtonTypes.length - 1);
         // Create the button
-        return (React__default["default"].createElement("button", { type: "button", className: `Modal-${ModalButtonType}-button btn btn-${variant} ${last ? '' : 'mr-1'}`, onClick: () => {
+        return (React__default["default"].createElement("button", { key: ModalButtonType, type: "button", className: `Modal-${ModalButtonType}-button btn btn-${variant} ${last ? '' : 'me-1'}`, onClick: () => {
                 handleClose(ModalButtonType);
             } }, label));
     });
@@ -365,22 +483,62 @@ const Modal = (props) => {
     const footer = ((buttons && buttons.length)
         ? (React__default["default"].createElement("div", null, buttons))
         : undefined);
+    // Choose an animation
+    let animationClass = '';
+    let backdropAnimationClass = '';
+    if (animatingIn) {
+        animationClass = 'Modal-animating-in';
+        backdropAnimationClass = 'Modal-fading-in';
+    }
+    else if (animatingOut) {
+        animationClass = 'Modal-animating-out';
+        backdropAnimationClass = 'Modal-fading-out';
+    }
+    else if (animatingPop) {
+        animationClass = 'Modal-animating-pop';
+    }
     // Render the modal
-    return (React__default["default"].createElement("div", { className: `modal fade show modal-dialog-scrollable modal-${size}`, tabIndex: -1, style: {
+    return (React__default["default"].createElement("div", { className: `modal show modal-dialog-scrollable modal-dialog-centered modal-${size}`, tabIndex: -1, style: {
             zIndex: (onTopOfOtherModals
-                ? 6000000000
+                ? 5000000001
                 : 5000000000),
             display: 'block',
+            margin: 'auto',
+            left: 0,
+            right: 0,
         } },
-        React__default["default"].createElement("div", { className: "modal-dialog" },
+        React__default["default"].createElement("style", null, style$2),
+        React__default["default"].createElement("div", { className: `Modal-backdrop ${backdropAnimationClass}`, style: {
+                zIndex: 5000000003,
+            }, onClick: () => __awaiter(void 0, void 0, void 0, function* () {
+                // Skip if exit via backdrop not allowed
+                if (dontAllowBackdropExit || !onClose) {
+                    // Show pop animation
+                    if (!animatingPop) {
+                        setAnimatingPop(true);
+                        // Wait then stop pop animation
+                        yield waitMs(MS_TO_ANIMATE);
+                        setAnimatingPop(false);
+                    }
+                    return;
+                }
+                // Handle close
+                handleClose(ModalButtonType$1.Cancel);
+            }) }),
+        React__default["default"].createElement("div", { className: `modal-dialog ${animationClass}`, style: {
+                zIndex: 5000000002,
+            } },
             React__default["default"].createElement("div", { className: "modal-content" },
                 React__default["default"].createElement("div", { className: "modal-header" },
-                    React__default["default"].createElement("h5", { className: "modal-title" }, title),
-                    onClose && (React__default["default"].createElement("button", { type: "button", className: "btn-close", "data-bs-dismiss": "modal", "aria-label": "Close", onClick: () => {
+                    React__default["default"].createElement("h5", { className: "modal-title", style: {
+                            fontWeight: 'bold',
+                        } }, title),
+                    onClose && (React__default["default"].createElement("button", { type: "button", className: "btn-close", "aria-label": "Close", onClick: () => {
+                            // Handle close
                             handleClose(ModalButtonType$1.Cancel);
                         } }))),
                 children && (React__default["default"].createElement("div", { className: "modal-body" }, children)),
-                footer && (React__default["default"].createElement("div", { className: "modal-footer" }, footer))))));
+                footer && (React__default["default"].createElement("div", { className: "modal-footer pt-1 pb-1" }, footer))))));
 };
 
 /**
@@ -404,6 +562,24 @@ class ErrorWithCode extends Error {
 /*                             Static Helpers                             */
 /*------------------------------------------------------------------------*/
 /*----------------------------------------*/
+/*              Send Request              */
+/*----------------------------------------*/
+// Store copy of caccl send request
+let _cacclSendRequest;
+/**
+ * Send a request using caccl's send request feature
+ * @author Gabe Abrams
+ * @param opts send request options
+ * @returns send request response
+ */
+const cacclSendRequest = (opts) => __awaiter(void 0, void 0, void 0, function* () {
+    // Make sure send request has been passed in
+    if (!_cacclSendRequest) {
+        throw new ErrorWithCode('The request could not be sent because the AppWrapper component does not have a copy of sendRequest from CACCL.', ReactKitErrorCode$1.NoCACCLSendRequestFunction);
+    }
+    return _cacclSendRequest(opts);
+});
+/*----------------------------------------*/
 /*                  Alert                 */
 /*----------------------------------------*/
 // Stored copies of setters
@@ -415,7 +591,7 @@ let onAlertClosed;
  * @param title the title text to display at the top of the alert
  * @param text the text to display in the alert
  */
-const alert = (title, text) => __awaiter(void 0, void 0, void 0, function* () {
+const alert$1 = (title, text) => __awaiter(void 0, void 0, void 0, function* () {
     // Fallback if alert not available
     if (!setAlertInfo) {
         window.alert(`${title}\n\n${text}`);
@@ -489,7 +665,7 @@ const showFatalError = (error, errorTitle = 'An Error Occurred') => {
         : String((_b = error.code) !== null && _b !== void 0 ? _b : ReactKitErrorCode$1.NoCode));
     // Handle case where app hasn't loaded
     if (!setFatalErrorMessage || !setFatalErrorCode) {
-        alert(errorTitle, `${message} (code: ${code}). Please contact support.`);
+        alert$1(errorTitle, `${message} (code: ${code}). Please contact support.`);
         return undefined;
     }
     // Use setters
@@ -506,7 +682,9 @@ const AppWrapper = (props) => {
     /*                                  Setup                                 */
     /*------------------------------------------------------------------------*/
     /* -------------- Props ------------- */
-    const { children, dark, sessionExpiredMessage = 'Your session has expired. Please go back to Canvas and start over.', } = props;
+    const { children, sendRequest, dark, sessionExpiredMessage = 'Your session has expired. Please go back to Canvas and start over.', } = props;
+    // Store copy of send request
+    _cacclSendRequest = sendRequest;
     /* -------------- State ------------- */
     // Fatal error
     const [fatalErrorMessage, setFatalErrorMessageInner,] = React.useState();
@@ -516,10 +694,10 @@ const AppWrapper = (props) => {
     const [fatalErrorTitle, setFatalErrorTitleInner,] = React.useState();
     setFatalErrorTitle = setFatalErrorTitleInner;
     // Alert
-    const [alertInfo, setAlertInfoInner,] = React.useState();
+    const [alertInfo, setAlertInfoInner,] = React.useState(undefined);
     setAlertInfo = setAlertInfoInner;
     // Confirm
-    const [confirmInfo, setConfirmInfoInner,] = React.useState();
+    const [confirmInfo, setConfirmInfoInner,] = React.useState(undefined);
     setConfirmInfo = setConfirmInfoInner;
     // Session expired
     const [sessionHasExpired, setSessionHasExpiredInner,] = React.useState(false);
@@ -533,8 +711,9 @@ const AppWrapper = (props) => {
     let modal;
     /* -------------- Alert ------------- */
     if (alertInfo) {
-        modal = (React__default["default"].createElement(Modal, { title: alertInfo.title, type: ModalType$1.Okay, onClose: () => {
+        modal = (React__default["default"].createElement(Modal, { key: `alert-${alertInfo.title}-${alertInfo.text}`, title: alertInfo.title, type: ModalType$1.Okay, onClose: () => {
                 // Alert closed
+                setAlertInfo(undefined);
                 if (onAlertClosed) {
                     onAlertClosed();
                 }
@@ -542,11 +721,12 @@ const AppWrapper = (props) => {
     }
     /* ------------- Confirm ------------ */
     if (confirmInfo) {
-        modal = (React__default["default"].createElement(Modal, { title: confirmInfo.title, type: ModalType$1.OkayCancel, onClose: (buttonType) => {
+        modal = (React__default["default"].createElement(Modal, { key: `confirm-${confirmInfo.title}-${confirmInfo.text}`, title: confirmInfo.title, type: ModalType$1.OkayCancel, onClose: (buttonType) => {
+                setConfirmInfo(undefined);
                 if (onConfirmClosed) {
                     onConfirmClosed(buttonType === ModalButtonType$1.Okay);
                 }
-            }, dontAllowBackdropExit: true }));
+            }, dontAllowBackdropExit: true }, confirmInfo.text));
     }
     /*----------------------------------------*/
     /*                  Views                 */
@@ -598,10 +778,10 @@ const style$1 = `
 .LoadingSpinner-blip-2,
 .LoadingSpinner-blip-3,
 .LoadingSpinner-blip-4 {
-  font-size: 25px;
+  font-size: 1.8rem;
   opacity: 0.6;
-  margin-top: 20px;
-  margin-bottom: 20px;
+  margin-top: 1rem;
+  margin-bottom: 1rem;
 }
 
 /* First Blip */
@@ -668,63 +848,67 @@ const LoadingSpinner = () => {
 /*                                  Style                                 */
 /*------------------------------------------------------------------------*/
 const style = `
-/* Tab Box */
-.TabBox-box {
-  /* Light Border */
-  border: 2px solid #dedede;
-  
-  /* Rounded Corners (except top-left) */
-  border-bottom-right-radius: 5px;
-  border-bottom-left-radius: 5px;
-  border-top-right-radius: 5px;
-
-  /* Very Light Gray Border */
-  background: #fdfdfd;
-
-  /* Align Contents on Left */
-  text-align: left;
-}
+  /* Tab Box */
+  .TabBox-box {
+    /* Light Border */
+    border: 0.15rem solid #dedede;
+    
+    /* Rounded Corners (except top-left) */
+    border-bottom-right-radius: 0.3rem;
+    border-bottom-left-radius: 0.3rem;
+    border-top-right-radius: 0.3rem;
 
-/* Container for Title */
-.TabBox-title-container {
-  /* Place on Left */
-  position: relative;
-  left: 0;
-  text-align: left;
-}
+    /* Very Light Gray Border */
+    background: #fdfdfd;
 
-/* Tab-style Title */
-.TabBox-title {
-  /* Place so it Barely Overlaps the Box Border */
-  display: inline-block;
-  position: relative;
-  top: 2px; /* Gives Illusion that Border Doesn't Exist Below Tab */
+    /* Align Contents on Left */
+    text-align: left;
 
-  /* Title-sized Font */
-  font-size: 25px;
+    /* Add Text Padding */
+    padding-left: 0.3rem;
+    padding-right: 0.3rem;
+  }
 
-  /* Add Border on Top and Sides */
-  border-top: 2px solid #dedede;
-  border-left: 2px solid #dedede;
-  border-right: 2px solid #dedede;
+  /* Container for Title */
+  .TabBox-title-container {
+    /* Place on Left */
+    position: relative;
+    left: 0;
+    text-align: left;
+  }
 
-  /* Round the Top Corners */
-  border-top-left-radius: 5px;
-  border-top-right-radius: 5px;
+  /* Tab-style Title */
+  .TabBox-title {
+    /* Place so it Barely Overlaps the Box Border */
+    display: inline-block;
+    position: relative;
+    top: 0.15rem; /* Gives Illusion that Border Doesn't Exist Below Tab */
 
-  /* Add Text Padding */
-  padding-left: 12px;
-  padding-right: 12px;
+    /* Title-sized Font */
+    font-size: 1.5rem;
 
-  /* Match Background Color of Box */
-  background: #fdfdfd;
-}
+    /* Add Border on Top and Sides */
+    border-top: 0.15rem solid #dedede;
+    border-left: 0.15rem solid #dedede;
+    border-right: 0.15rem solid #dedede;
 
-/* Make the TabBox's Children Appear Above Title if Overlap Occurs */
-.TabBox-children {
-  position: relative;
-  z-index: 1;
-}
+    /* Round the Top Corners */
+    border-top-left-radius: 0.3rem;
+    border-top-right-radius: 0.3rem;
+
+    /* Add Text Padding */
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+
+    /* Match Background Color of Box */
+    background: #fdfdfd;
+  }
+
+  /* Make the TabBox's Children Appear Above Title if Overlap Occurs */
+  .TabBox-children {
+    position: relative;
+    z-index: 1;
+  }
 `;
 /*------------------------------------------------------------------------*/
 /*                                Component                               */
@@ -734,7 +918,7 @@ const TabBox = (props) => {
     /*                                  Setup                                 */
     /*------------------------------------------------------------------------*/
     /* -------------- Props ------------- */
-    const { title, children, } = props;
+    const { title, children, noBottomPadding, } = props;
     /*------------------------------------------------------------------------*/
     /*                                 Render                                 */
     /*------------------------------------------------------------------------*/
@@ -742,7 +926,7 @@ const TabBox = (props) => {
     /*                 Main UI                */
     /*----------------------------------------*/
     // Full UI
-    return (React__default["default"].createElement("div", null,
+    return (React__default["default"].createElement("div", { className: `TabBox-container ${noBottomPadding ? '' : 'mb-2'}` },
         React__default["default"].createElement("style", null, style),
         React__default["default"].createElement("div", { className: "TabBox-title-container" },
             React__default["default"].createElement("div", { className: "TabBox-title" }, title)),
@@ -750,6 +934,252 @@ const TabBox = (props) => {
             React__default["default"].createElement("div", { className: "TabBox-children" }, children))));
 };
 
+/**
+ * A radio selection button
+ * @author Gabe Abrams
+ */
+/*------------------------------------------------------------------------*/
+/*                                Component                               */
+/*------------------------------------------------------------------------*/
+const RadioButton = (props) => {
+    /*------------------------------------------------------------------------*/
+    /*                                  Setup                                 */
+    /*------------------------------------------------------------------------*/
+    /* -------------- Props ------------- */
+    const { text, onSelected, ariaLabel, title, selected, id, noMarginOnRight, selectedVariant = Variant$1.Secondary, unselectedVariant = Variant$1.Light, small, } = props;
+    /*------------------------------------------------------------------------*/
+    /*                                 Render                                 */
+    /*------------------------------------------------------------------------*/
+    /*----------------------------------------*/
+    /*                Main UI                 */
+    /*----------------------------------------*/
+    return (React__default["default"].createElement("button", { type: "button", id: id, title: title, className: `btn btn-${selected ? selectedVariant : unselectedVariant}${selected ? ' selected' : ''}${small ? ' btn-sm' : ''} m-0${noMarginOnRight ? '' : ' me-1'}`, "aria-label": `${ariaLabel}${selected ? ': currently selected' : ''}`, onClick: () => {
+            if (!selected) {
+                onSelected();
+            }
+        } },
+        React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, { icon: selected ? freeSolidSvgIcons.faDotCircle : freeRegularSvgIcons.faCircle, className: "me-1" }),
+        text));
+};
+
+/**
+ * A checkbox button
+ * @author Gabe Abrams
+ */
+/*------------------------------------------------------------------------*/
+/*                                Component                               */
+/*------------------------------------------------------------------------*/
+const CheckboxButton = (props) => {
+    /*------------------------------------------------------------------------*/
+    /*                                  Setup                                 */
+    /*------------------------------------------------------------------------*/
+    /* -------------- Props ------------- */
+    const { text, onChanged, ariaLabel, title, checked, id, noMarginOnRight, checkedVariant = Variant$1.Secondary, uncheckedVariant = Variant$1.Light, small, } = props;
+    /*------------------------------------------------------------------------*/
+    /*                                 Render                                 */
+    /*------------------------------------------------------------------------*/
+    /*----------------------------------------*/
+    /*                Main UI                 */
+    /*----------------------------------------*/
+    return (React__default["default"].createElement("button", { type: "button", id: id, title: title, className: `btn btn-${checked ? checkedVariant : uncheckedVariant}${checked ? ' selected' : ''}${small ? ' btn-sm' : ''} m-0${noMarginOnRight ? '' : ' me-1'}`, "aria-label": `${ariaLabel}${checked ? ': currently checked' : ''}`, onClick: () => {
+            onChanged(!checked);
+        } },
+        React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, { icon: checked ? freeSolidSvgIcons.faCheckSquare : freeRegularSvgIcons.faSquare, className: "me-1" }),
+        text));
+};
+
+/**
+ * Input group with a title and space for buttons
+ * @author Gabe Abrams
+ */
+/*------------------------------------------------------------------------*/
+/*                                Component                               */
+/*------------------------------------------------------------------------*/
+const ButtonInputGroup = (props) => {
+    /*------------------------------------------------------------------------*/
+    /*                                  Setup                                 */
+    /*------------------------------------------------------------------------*/
+    /* -------------- Props ------------- */
+    // Destructure all props
+    const { label, minLabelWidth, children, } = props;
+    /*------------------------------------------------------------------------*/
+    /*                                 Render                                 */
+    /*------------------------------------------------------------------------*/
+    /*----------------------------------------*/
+    /*                 Main UI                */
+    /*----------------------------------------*/
+    return (React__default["default"].createElement("div", { className: "input-group" },
+        React__default["default"].createElement("div", { className: "input-group-prepend d-flex w-100" },
+            React__default["default"].createElement("span", { className: "input-group-text", style: {
+                    minWidth: (minLabelWidth !== null && minLabelWidth !== void 0 ? minLabelWidth : undefined),
+                    borderTopRightRadius: 0,
+                    borderBottomRightRadius: 0,
+                } }, label),
+            React__default["default"].createElement("span", { className: "input-group-text flex-grow-1 rounded-right", style: {
+                    backgroundColor: 'white',
+                    borderTopLeftRadius: 0,
+                    borderBottomLeftRadius: 0,
+                    borderLeftWidth: 0,
+                } }, children))));
+};
+
+const ORDINALS = ['th', 'st', 'nd', 'rd'];
+/**
+ * Get a number's ordinal
+ * @author Gabe Abrams
+ * @param num the number being analyzed
+ * @returns ordinal
+ */
+const getOrdinal = (num) => {
+    var _a, _b;
+    return ((_b = (_a = ORDINALS[(num - 20) % 10]) !== null && _a !== void 0 ? _a : ORDINALS[num]) !== null && _b !== void 0 ? _b : ORDINALS[0]);
+};
+
+/**
+ * Get current time info in US Boston Eastern Time, independent of machine
+ *   timezone
+ * @author Gabe Abrams
+ * @param {Date} [date=now] the date to get info on
+ * @returns object with timestamp (ms since epoch) and numbers
+ *   corresponding to ET time values for year, month, day, hour, minute
+ */
+const getTimeInfoInET = (date) => {
+    // Create a time string
+    const d = (date || new Date());
+    const str = d.toLocaleString('en-US', // Using US encoding (it's the only one installed on containers)
+    { timeZone: 'America/New_York' } // Force EST timezone
+    );
+    // Parse the string for the date/time info
+    const [dateStr, timeStr] = str.split(', '); // Format: MM/DD/YYYY, HH:MM:SS AM
+    const [monthStr, dayStr, yearStr] = dateStr.split('/'); // Format: MM/DD/YYYY
+    const [hourStr, minStr, ending] = timeStr.split(':'); // Format: HH:MM:SS AM
+    // Create all time numbers
+    const timestamp = d.getTime();
+    const year = Number.parseInt(yearStr, 10);
+    const month = Number.parseInt(monthStr, 10);
+    const day = Number.parseInt(dayStr, 10);
+    const minute = Number.parseInt(minStr, 10);
+    let hour = Number.parseInt(hourStr, 10);
+    // Convert from am/pm to 24hr
+    const isAM = ending.toLowerCase().includes('am');
+    const isPM = !isAM;
+    if (isPM && hour !== 12) {
+        hour += 12;
+    }
+    else if (isAM && hour === 12) {
+        hour = 0;
+    }
+    // Return
+    return {
+        timestamp,
+        year,
+        month,
+        day,
+        hour,
+        minute,
+    };
+};
+
+/**
+ * A very simple, lightweight date chooser
+ * @author Gabe Abrams
+ */
+/*------------------------------------------------------------------------*/
+/*                                Constants                               */
+/*------------------------------------------------------------------------*/
+// Constants
+const MONTH_NAMES = [
+    'January',
+    'February',
+    'March',
+    'April',
+    'May',
+    'June',
+    'July',
+    'August',
+    'September',
+    'October',
+    'November',
+    'December',
+];
+/*------------------------------------------------------------------------*/
+/*                                Component                               */
+/*------------------------------------------------------------------------*/
+const SimpleDateChooser = (props) => {
+    /*------------------------------------------------------------------------*/
+    /*                                  Setup                                 */
+    /*------------------------------------------------------------------------*/
+    var _a;
+    /* -------------- Props ------------- */
+    const { ariaLabel, name, month, day, year, onChange, } = props;
+    const numMonthsToShow = Math.min((_a = props.numMonthsToShow) !== null && _a !== void 0 ? _a : 6, 12);
+    /*------------------------------------------------------------------------*/
+    /*                                 Render                                 */
+    /*------------------------------------------------------------------------*/
+    /*----------------------------------------*/
+    /*                Main UI                 */
+    /*----------------------------------------*/
+    // Determine the set of choices allowed
+    const today = getTimeInfoInET();
+    const choices = [];
+    for (let i = 0; i < numMonthsToShow; i++) {
+        // Get month and year info
+        const unmoddedMonth = (today.month + i);
+        const month = (unmoddedMonth > 12
+            ? unmoddedMonth - 12
+            : unmoddedMonth);
+        const monthName = MONTH_NAMES[month - 1];
+        const year = (unmoddedMonth > 12
+            ? today.year + 1
+            : today.year);
+        // Figure out which days are allowed
+        const days = [];
+        const numDaysInMonth = (new Date(year, month, 0)).getDate();
+        const firstDay = (month === today.month
+            ? today.day // Current month: start at current date
+            : 1 // Future month: start at beginning of month
+        );
+        for (let day = firstDay; day <= numDaysInMonth; day++) {
+            days.push(day);
+        }
+        choices.push({
+            choiceName: `${monthName} ${year}`,
+            month,
+            year,
+            days,
+        });
+    }
+    // Create choice options
+    const monthOptions = [];
+    const dayOptions = [];
+    choices.forEach((choice) => {
+        // Create month option
+        monthOptions.push(React__default["default"].createElement("option", { key: choice.month, value: choice.month, "aria-label": `choose ${choice.choiceName}`, onSelect: () => {
+                onChange(choice.month, choice.days[0], choice.year);
+            } }, choice.choiceName));
+        if (month === choice.month) {
+            // This is the currently selected month
+            // Create day options
+            choice.days.forEach((dayChoice) => {
+                const ordinal = getOrdinal(dayChoice);
+                dayOptions.push(React__default["default"].createElement("option", { key: dayChoice, value: dayChoice, "aria-label": `choose date ${dayChoice}` },
+                    dayChoice,
+                    ordinal));
+            });
+        }
+    });
+    return (React__default["default"].createElement("div", { className: "SimpleDateChooser d-inline-block", "aria-label": `date chooser with selected date: ${month} ${day}, ${year}` },
+        React__default["default"].createElement("select", { "aria-label": `month for ${ariaLabel}`, className: "custom-select d-inline-block mr-1", style: { width: 'auto' }, id: `SimpleDateChooser-${name}-month`, value: month, onChange: (e) => {
+                const choice = choices[e.target.selectedIndex];
+                // Change day, month, and year
+                onChange(choice.month, choice.days[0], choice.year);
+            } }, monthOptions),
+        React__default["default"].createElement("select", { "aria-label": `day for ${ariaLabel}`, className: "custom-select d-inline-block", style: { width: 'auto' }, id: `SimpleDateChooser-${name}-day`, value: day, onChange: (e) => {
+                // Only change the day
+                onChange(month, Number.parseInt(e.target.value, 10), year);
+            } }, dayOptions)));
+};
+
 /**
  * Shorten text so it fits into a certain number of chars
  * @author Gabe Abrams
@@ -893,7 +1323,429 @@ const roundToNumDecimals = (num, numDecimals) => {
     return (Math.round(num * rounder) / rounder);
 };
 
+// Keep track of whether or not session expiry has already been handled
+let sessionAlreadyExpired = false;
+/*------------------------------------------------------------------------*/
+/*                                  Main                                  */
+/*------------------------------------------------------------------------*/
+/**
+ * Visit an endpoint on the server [for client only]
+ * @author Gabe Abrams
+ * @param opts object containing all arguments
+ * @param opts.path - the path of the server endpoint
+ * @param [opts.method=GET] - the method of the endpoint
+ * @param [opts.params] - query/body parameters to include
+ * @returns response from server
+ */
+const visitServerEndpoint = (opts) => __awaiter(void 0, void 0, void 0, function* () {
+    var _a;
+    // Send the request
+    const response = yield cacclSendRequest({
+        path: opts.path,
+        method: (_a = opts.method) !== null && _a !== void 0 ? _a : 'GET',
+        params: opts.params,
+    });
+    // Check for failure
+    if (!response || !response.body) {
+        throw new ErrorWithCode('We didn\'t get a response from the server. Please check your internet connection.', ReactKitErrorCode$1.NoResponse);
+    }
+    if (!response.body.success) {
+        // Session expired
+        if (response.body.code === ReactKitErrorCode$1.SessionExpired) {
+            // Skip notice if session was already expired
+            if (sessionAlreadyExpired) {
+                // Never return (browser is already reloading)
+                yield new Promise(() => {
+                    // Promise that never returns
+                });
+            }
+            sessionAlreadyExpired = true;
+            // Show session expiration message
+            {
+                // Fallback to alert
+                // eslint-disable-next-line no-alert
+                alert('Your session has expired. Please start over.');
+            }
+            // Never return (don't continue execution)
+            yield new Promise(() => {
+                // Promise that never returns
+            });
+        }
+        // Other errors
+        throw new ErrorWithCode((response.body.message
+            || 'An unknown error occurred. Please contact an admin.'), (response.body.code
+            || ReactKitErrorCode$1.NoCode));
+    }
+    // Success! Extract the body
+    const { body } = response.body;
+    // Return
+    return body;
+});
+
+// Import custom error
+// Stored copy of caccl functions
+let _cacclGetLaunchInfo;
+/*------------------------------------------------------------------------*/
+/*                                 Helpers                                */
+/*------------------------------------------------------------------------*/
+/**
+ * Get launch info via CACCL
+ * @author Gabe Abrams
+ * @param req express request object
+ * @returns object { launched, launchInfo }
+ */
+const cacclGetLaunchInfo = (req) => {
+    if (!_cacclGetLaunchInfo) {
+        throw new ErrorWithCode('Could not get launch info because server was not initialized with dce-reactkit\'s initServer function', ReactKitErrorCode$1.NoCACCLGetLaunchInfoFunction);
+    }
+    return _cacclGetLaunchInfo(req);
+};
+/*------------------------------------------------------------------------*/
+/*                                  Main                                  */
+/*------------------------------------------------------------------------*/
+/**
+ * Prepare dce-reactkit to run on the server
+ * @author Gabe Abrams
+ * @param opts object containing all arguments
+ * @param opts.getLaunchInfo CACCL LTI's get launch info function
+ */
+const initServer = (opts) => {
+    _cacclGetLaunchInfo = opts.getLaunchInfo;
+};
+
+/**
+ * Server-side API param types
+ * @author Gabe Abrams
+ */
+var ParamType;
+(function (ParamType) {
+    ParamType["Boolean"] = "boolean";
+    ParamType["BooleanOptional"] = "boolean-optional";
+    ParamType["Float"] = "float";
+    ParamType["FloatOptional"] = "float-optional";
+    ParamType["Int"] = "int";
+    ParamType["IntOptional"] = "int-optional";
+    ParamType["JSON"] = "json";
+    ParamType["JSONOptional"] = "json-optional";
+    ParamType["String"] = "string";
+    ParamType["StringOptional"] = "string-optional";
+})(ParamType || (ParamType = {}));
+var ParamType$1 = ParamType;
+
+// Import shared types
+/**
+ * Handle an error and respond to the client
+ * @author Gabe Abrams
+ * @param res express response
+ * @param error error info
+ * @param opts.err the error to send to the client
+ *   or the error message
+ * @param [opts.code] an error code (only used if err.code is not
+ *   included)
+ * @param [opts.status=500] the https status code to use
+ *   defined)
+ */
+const handleError = (res, error) => {
+    // Get the error message
+    let message;
+    if (error && error.message) {
+        message = (error.message || 'An unknown error occurred.');
+    }
+    else if (typeof error === 'string') {
+        message = (error.trim().length > 0
+            ? error
+            : 'An unknown error occurred.');
+    }
+    else {
+        message = 'An unknown error occurred.';
+    }
+    // Get the error code
+    const code = (error.code || ReactKitErrorCode$1.NoCode);
+    // Get the status code
+    const status = (error.status || 500);
+    // Respond to user
+    res
+        // Set the http status code
+        .status(status)
+        // Send a JSON response
+        .json({
+        // Error message
+        message,
+        // Error code
+        code,
+        // Success = false flag so client can detect server-side errors
+        success: false,
+    });
+    return undefined;
+};
+
+/**
+ * Send successful API response
+ * @author Gabe Abrams
+ * @param res express response
+ * @param body the body of the response to send to the client
+ */
+const handleSuccess = (res, body) => {
+    // Send a http 200 json response
+    res.json({
+        // Include the body as a parameter
+        body,
+        // Success = true flag so client can detect successful responses
+        success: true,
+    });
+    return undefined;
+};
+
+/**
+ * Generate an express API route handler
+ * @author Gabe Abrams
+ * @param opts object containing all arguments
+ * @param opts.paramTypes map containing the types for each parameter that is
+ *   included in the request (map: param name => type)
+ * @param opts.handler function that processes the request
+ * @returns express route handler that takes the following arguments:
+ *   params (map: param name => value), handleSuccess (function for handling
+ *   successful requests), handleError (function for handling failed requests),
+ *   req (express request object), res (express response object),
+ *   next (express next function)
+ */
+const genRouteHandler = (opts) => {
+    // Return a route handler
+    return (req, res, next) => __awaiter(void 0, void 0, void 0, function* () {
+        var _a;
+        // Output params
+        const output = {};
+        /*----------------------------------------*/
+        /*              Parse Params              */
+        /*----------------------------------------*/
+        // Process items one by one
+        const paramList = Object.entries((_a = opts.paramTypes) !== null && _a !== void 0 ? _a : {});
+        for (let i = 0; i < paramList.length; i++) {
+            const [name, type] = paramList[i];
+            // Find the value as a string
+            const value = (req.params[name]
+                || req.query[name]
+                || req.body[name]);
+            // Parse
+            if (type === ParamType$1.Boolean || type === ParamType$1.BooleanOptional) {
+                // Boolean
+                // Handle case where value doesn't exist
+                if (value === undefined) {
+                    if (type === ParamType$1.BooleanOptional) {
+                        output[name] = undefined;
+                    }
+                    else {
+                        return handleError(res, {
+                            message: `Parameter ${name} is required, but it was not included.`,
+                            code: ReactKitErrorCode$1.MissingParameter,
+                            status: 422,
+                        });
+                    }
+                }
+                else {
+                    // Value exists
+                    // Simplify value
+                    const simpleVal = (String(value)
+                        .trim()
+                        .toLowerCase());
+                    // Parse
+                    output[name] = ([
+                        'true',
+                        'yes',
+                        'y',
+                        '1',
+                        't',
+                    ].indexOf(simpleVal) >= 0);
+                }
+            }
+            else if (type === ParamType$1.Float || type === ParamType$1.FloatOptional) {
+                // Float
+                // Handle case where value doesn't exist
+                if (value === undefined) {
+                    if (type === ParamType$1.FloatOptional) {
+                        output[name] = undefined;
+                    }
+                    else {
+                        return handleError(res, {
+                            message: `Parameter ${name} is required, but it was not included.`,
+                            code: ReactKitErrorCode$1.MissingParameter,
+                            status: 422,
+                        });
+                    }
+                }
+                else if (!Number.isNaN(Number.parseFloat(String(value)))) {
+                    // Value is a number
+                    output[name] = Number.parseFloat(String(value));
+                }
+                else {
+                    // Issue!
+                    return handleError(res, {
+                        message: `Request data was malformed: ${name} was not a valid float.`,
+                        code: ReactKitErrorCode$1.InvalidParameter,
+                        status: 422,
+                    });
+                }
+            }
+            else if (type === ParamType$1.Int || type === ParamType$1.IntOptional) {
+                // Int
+                // Handle case where value doesn't exist
+                if (value === undefined) {
+                    if (type === ParamType$1.IntOptional) {
+                        output[name] = undefined;
+                    }
+                    else {
+                        return handleError(res, {
+                            message: `Parameter ${name} is required, but it was not included.`,
+                            code: ReactKitErrorCode$1.MissingParameter,
+                            status: 422,
+                        });
+                    }
+                }
+                else if (!Number.isNaN(Number.parseInt(String(value), 10))) {
+                    // Value is a number
+                    output[name] = Number.parseInt(String(value), 10);
+                }
+                else {
+                    // Issue!
+                    return handleError(res, {
+                        message: `Request data was malformed: ${name} was not a valid int.`,
+                        code: ReactKitErrorCode$1.InvalidParameter,
+                        status: 422,
+                    });
+                }
+            }
+            else if (type === ParamType$1.JSON || type === ParamType$1.JSONOptional) {
+                // Stringified JSON
+                // Handle case where value doesn't exist
+                if (value === undefined) {
+                    if (type === ParamType$1.JSONOptional) {
+                        output[name] = undefined;
+                    }
+                    else {
+                        return handleError(res, {
+                            message: `Parameter ${name} is required, but it was not included.`,
+                            code: ReactKitErrorCode$1.MissingParameter,
+                            status: 422,
+                        });
+                    }
+                }
+                else {
+                    // Value exists
+                    // Parse
+                    try {
+                        output[name] = JSON.parse(String(value));
+                    }
+                    catch (err) {
+                        return handleError(res, {
+                            message: `Request data was malformed: ${name} was not a valid JSON payload.`,
+                            code: ReactKitErrorCode$1.InvalidParameter,
+                            status: 422,
+                        });
+                    }
+                }
+            }
+            else if (type === ParamType$1.String || type === ParamType$1.StringOptional) {
+                // String
+                // Handle case where value doesn't exist
+                if (value === undefined) {
+                    if (type === ParamType$1.StringOptional) {
+                        output[name] = undefined;
+                    }
+                    else {
+                        return handleError(res, {
+                            message: `Parameter ${name} is required, but it was not included.`,
+                            code: ReactKitErrorCode$1.MissingParameter,
+                            status: 422,
+                        });
+                    }
+                }
+                else {
+                    // Value exists
+                    // Leave as is
+                    output[name] = value;
+                }
+            }
+            else {
+                // No valid data type
+                return handleError(res, {
+                    message: `An internal error occurred: we could not determine the type of ${name}.`,
+                    code: ReactKitErrorCode$1.InvalidParameter,
+                    status: 422,
+                });
+            }
+        }
+        /*----------------------------------------*/
+        /*               Launch Info              */
+        /*----------------------------------------*/
+        // Get launch info
+        const { launched, launchInfo } = cacclGetLaunchInfo(req);
+        if (!launched || !launchInfo) {
+            return handleError(res, {
+                message: 'Your session has expired. Please refresh the page and try again.',
+                code: ReactKitErrorCode$1.SessionExpired,
+                status: 440,
+            });
+        }
+        // Error if user info cannot be found
+        if (!launchInfo.userId
+            || !launchInfo.userFirstName
+            || !launchInfo.userLastName
+            || (launchInfo.notInCourse
+                && !launchInfo.isAdmin)
+            || (!launchInfo.isTTM
+                && !launchInfo.isLearner
+                && !launchInfo.isAdmin)) {
+            return handleError(res, {
+                message: 'Your session was invalid. Please refresh the page and try again.',
+                code: ReactKitErrorCode$1.SessionExpired,
+                status: 440,
+            });
+        }
+        // Add launch info to output
+        output.userId = launchInfo.userId;
+        output.userFirstName = launchInfo.userFirstName;
+        output.userLastName = launchInfo.userLastName;
+        output.isLearner = !!launchInfo.isLearner;
+        output.isTTM = !!launchInfo.isTTM;
+        output.isAdmin = !!launchInfo.isAdmin;
+        output.isWatchingInPrivate = !!(req.session.isWatchingInPrivate);
+        /*----------------------------------------*/
+        /*       Require Course Consistency       */
+        /*----------------------------------------*/
+        // Make sure the user actually launched from the appropriate course
+        if (output.courseId
+            && launchInfo.courseId
+            && output.courseId !== launchInfo.courseId
+            && !output.isTTM
+            && !output.isAdmin) {
+            // Course of interest is not the launch course
+            return handleError(res, {
+                message: 'You switched sessions by opening Immersive Classroom in another tab. Please refresh the page and try again.',
+                code: ReactKitErrorCode$1.WrongCourse,
+                status: 401,
+            });
+        }
+        /*------------------------------------------------------------------------*/
+        /*                              Call handler                              */
+        /*------------------------------------------------------------------------*/
+        opts.handler({
+            params: output,
+            handleSuccess: (body) => {
+                return handleSuccess(res, body);
+            },
+            handleError: (error) => {
+                return handleError(res, error);
+            },
+            req,
+            res,
+            next,
+        });
+    });
+};
+
 exports.AppWrapper = AppWrapper;
+exports.ButtonInputGroup = ButtonInputGroup;
+exports.CheckboxButton = CheckboxButton;
 exports.ErrorBox = ErrorBox;
 exports.ErrorWithCode = ErrorWithCode;
 exports.LoadingSpinner = LoadingSpinner;
@@ -901,20 +1753,30 @@ exports.Modal = Modal;
 exports.ModalButtonType = ModalButtonType$1;
 exports.ModalSize = ModalSize$1;
 exports.ModalType = ModalType$1;
+exports.ParamType = ParamType$1;
+exports.RadioButton = RadioButton;
 exports.ReactKitErrorCode = ReactKitErrorCode$1;
+exports.SimpleDateChooser = SimpleDateChooser;
 exports.TabBox = TabBox;
 exports.Variant = Variant$1;
 exports.abbreviate = abbreviate;
-exports.alert = alert;
+exports.alert = alert$1;
 exports.avg = avg;
 exports.ceilToNumDecimals = ceilToNumDecimals;
 exports.confirm = confirm;
 exports.floorToNumDecimals = floorToNumDecimals;
 exports.forceNumIntoBounds = forceNumIntoBounds;
+exports.genRouteHandler = genRouteHandler;
+exports.getOrdinal = getOrdinal;
+exports.getTimeInfoInET = getTimeInfoInET;
+exports.handleError = handleError;
+exports.handleSuccess = handleSuccess;
+exports.initServer = initServer;
 exports.padDecimalZeros = padDecimalZeros;
 exports.padZerosLeft = padZerosLeft;
 exports.roundToNumDecimals = roundToNumDecimals;
 exports.showFatalError = showFatalError;
 exports.sum = sum;
+exports.visitServerEndpoint = visitServerEndpoint;
 exports.waitMs = waitMs;
 //# sourceMappingURL=index.js.map