dce-reactkit 4.0.0-beta.3 → 4.0.1

package/dist/esm/types/components/ItemPicker/index.d.ts

@@ -14,6 +14,7 @@ type Props = {
      */
     onChanged: (updatedItems: PickableItem[]) => void;
     noBottomMargin?: boolean;
+    hideSelectAllOrNoneButtons?: boolean;
 };
 declare const ItemPicker: React.FC<Props>;
 export default ItemPicker;

package/dist/esm/types/components/Modal/ModalProps.d.ts

@@ -38,5 +38,7 @@ type ModalProps = {
     confirmLabel?: string;
     confirmVariant?: Variant;
     onTopOfOtherModals?: boolean;
+    isLoading?: boolean;
+    isLoadingCancelable?: boolean;
 };
 export default ModalProps;

package/dist/esm/types/components/SimpleDateChooser.d.ts

@@ -1,6 +1,7 @@
 /**
  * A very simple, lightweight date chooser
  * @author Gabe Abrams
+ * @author Gardenia Liu
  */
 import React from 'react';
 type Props = {
@@ -17,7 +18,8 @@ type Props = {
      */
     onChange: (month: number, day: number, year: number) => void;
     numMonthsToShow?: number;
-    chooseFromPast?: boolean;
+    dontAllowPast?: boolean;
+    dontAllowFuture?: boolean;
 };
 declare const SimpleDateChooser: React.FC<Props>;
 export default SimpleDateChooser;

package/dist/esm/types/components/SimpleTimeChooser.d.ts

@@ -0,0 +1,20 @@
+/**
+ * A very simple, lightweight time chooser
+ * @author Gardenia Liu
+ */
+import React from 'react';
+type Props = {
+    ariaLabel: string;
+    name: string;
+    hour: number;
+    minute: number;
+    /**
+     * Handler for when time changes
+     * @param hour new 24hr hour number
+     * @param minute new minute number
+     */
+    onChange: (hour: number, minute: number) => void;
+    intervalMin?: number;
+};
+declare const SimpleTimeChooser: React.FC<Props>;
+export default SimpleTimeChooser;

package/dist/esm/types/components/TabBox.d.ts

@@ -6,6 +6,7 @@ import React from 'react';
 type Props = {
     title: React.ReactNode;
     children: React.ReactNode;
+    topRightChildren?: React.ReactNode;
     noBottomMargin?: boolean;
     noBottomPadding?: boolean;
 };

package/dist/esm/types/helpers/getWordCount.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Get number of words in string
+ * @author Gardenia Liu
+ * @author Allison Zhang
+ * @author Gabe Abrams
+ * @param text the string to check
+ * @returns number of words in the string
+ */
+declare const getWordCount: (text: string) => number;
+export default getWordCount;

package/dist/esm/types/index.d.ts

@@ -7,6 +7,7 @@ import RadioButton from './components/RadioButton';
 import CheckboxButton from './components/CheckboxButton';
 import ButtonInputGroup from './components/ButtonInputGroup';
 import SimpleDateChooser from './components/SimpleDateChooser';
+import SimpleTimeChooser from './components/SimpleTimeChooser';
 import Drawer from './components/Drawer';
 import PopSuccessMark from './components/PopSuccessMark';
 import PopFailureMark from './components/PopFailureMark';
@@ -75,6 +76,7 @@ import mapAsync from './helpers/asyncArrayFunctions/mapAsync';
 import someAsync from './helpers/asyncArrayFunctions/someAsync';
 import capitalize from './helpers/capitalize';
 import shuffleArray from './helpers/shuffleArray';
+import getWordCount from './helpers/getWordCount';
 import ParamType from './types/ParamType';
 import ModalButtonType from './types/ModalButtonType';
 import ModalSize from './types/ModalSize';
@@ -99,4 +101,4 @@ import PickableItem from './components/ItemPicker/types/PickableItem';
 import DBEntry from './components/DBEntryManagerPanel/types/DBEntry';
 import DBEntryField from './components/DBEntryManagerPanel/types/DBEntryField';
 import DBEntryFieldType from './components/DBEntryManagerPanel/types/DBEntryFieldType';
-export { AppWrapper, LoadingSpinner, ErrorBox, Modal, TabBox, RadioButton, CheckboxButton, ButtonInputGroup, SimpleDateChooser, Drawer, PopSuccessMark, PopFailureMark, PopPendingMark, CopiableBox, ItemPicker, LogReviewer, IntelliTable, CSVDownloadButton, DBEntryManagerPanel, Tooltip, ToggleSwitch, AutoscrollToBottomContainer, MultiSwitch, Dropdown, alert, prompt, confirm, showFatalError, ErrorWithCode, MINUTE_IN_MS, HOUR_IN_MS, DAY_IN_MS, LOG_REVIEW_ROUTE_PATH_PREFIX, LOG_ROUTE_PATH, LOG_REVIEW_STATUS_ROUTE, DynamicWord, abbreviate, avg, ceilToNumDecimals, floorToNumDecimals, forceNumIntoBounds, padDecimalZeros, padZerosLeft, roundToNumDecimals, sum, waitMs, getOrdinal, getTimeInfoInET, stubServerEndpoint, startMinWait, getHumanReadableDate, getPartOfDay, stringsToHumanReadableList, onlyKeepLetters, parallelLimit, getMonthName, genCSV, canReviewLogs, isMobileOrTablet, extractProp, compareArraysByProp, genCommaList, validateEmail, validatePhoneNumber, validateString, getLocalTimeInfo, idify, makeLinksClickable, prefixWithAOrAn, everyAsync, filterAsync, forEachAsync, mapAsync, someAsync, capitalize, shuffleArray, initClient, visitServerEndpoint, logClientEvent, addFatalErrorHandler, leaveToURL, combineClassNames, useForceRender, setClientEventMetadataPopulator, ParamType, ModalButtonType, ModalSize, ModalType, ReactKitErrorCode, Variant, DayOfWeek, Log, LogType, LogSource, LogAction, LogBuiltInMetadata, LogMetadataType, LogFunction, LogTypeSpecificInfo, LogMainInfo, LogSourceSpecificInfo, LogLevel, IntelliTableColumn, DropdownItemType, PickableItem, DBEntry, DBEntryField, DBEntryFieldType, };
+export { AppWrapper, LoadingSpinner, ErrorBox, Modal, TabBox, RadioButton, CheckboxButton, ButtonInputGroup, SimpleDateChooser, SimpleTimeChooser, Drawer, PopSuccessMark, PopFailureMark, PopPendingMark, CopiableBox, ItemPicker, LogReviewer, IntelliTable, CSVDownloadButton, DBEntryManagerPanel, Tooltip, ToggleSwitch, AutoscrollToBottomContainer, MultiSwitch, Dropdown, alert, prompt, confirm, showFatalError, ErrorWithCode, MINUTE_IN_MS, HOUR_IN_MS, DAY_IN_MS, LOG_REVIEW_ROUTE_PATH_PREFIX, LOG_ROUTE_PATH, LOG_REVIEW_STATUS_ROUTE, DynamicWord, abbreviate, avg, ceilToNumDecimals, floorToNumDecimals, forceNumIntoBounds, padDecimalZeros, padZerosLeft, roundToNumDecimals, sum, waitMs, getOrdinal, getTimeInfoInET, stubServerEndpoint, startMinWait, getHumanReadableDate, getPartOfDay, stringsToHumanReadableList, onlyKeepLetters, parallelLimit, getMonthName, genCSV, canReviewLogs, isMobileOrTablet, extractProp, compareArraysByProp, genCommaList, validateEmail, validatePhoneNumber, validateString, getLocalTimeInfo, idify, makeLinksClickable, prefixWithAOrAn, everyAsync, filterAsync, forEachAsync, mapAsync, someAsync, capitalize, shuffleArray, getWordCount, initClient, visitServerEndpoint, logClientEvent, addFatalErrorHandler, leaveToURL, combineClassNames, useForceRender, setClientEventMetadataPopulator, ParamType, ModalButtonType, ModalSize, ModalType, ReactKitErrorCode, Variant, DayOfWeek, Log, LogType, LogSource, LogAction, LogBuiltInMetadata, LogMetadataType, LogFunction, LogTypeSpecificInfo, LogMainInfo, LogSourceSpecificInfo, LogLevel, IntelliTableColumn, DropdownItemType, PickableItem, DBEntry, DBEntryField, DBEntryFieldType, };

package/dist/esm/types/types/ReactKitErrorCode.d.ts

@@ -6,6 +6,8 @@ declare enum ReactKitErrorCode {
     NoResponse = "DRK1",
     NoCode = "DRK2",
     SessionExpired = "DRK3",
-    NoCACCLSendRequestFunction = "DRK7"
+    NoCACCLSendRequestFunction = "DRK7",
+    SimpleDateChooserInvalidDateRange = "DRK35",
+    SimpleDateChooserInvalidNumMonths = "DRK36"
 }
 export default ReactKitErrorCode;

package/dist/index.d.ts

@@ -23,7 +23,7 @@ declare enum Variant {
  * @author Gabe Abrams
  */
 
-type Props$l = {
+type Props$m = {
     children: React$1.ReactNode;
 };
 /**
@@ -106,7 +106,7 @@ declare const showFatalError: (error: any, errorTitle?: string) => Promise<void>
  * @author Gabe Abrams
  */
 declare const addFatalErrorHandler: (handler: () => void) => void;
-declare const AppWrapper: React$1.FC<Props$l>;
+declare const AppWrapper: React$1.FC<Props$m>;
 
 /**
  * Loading spinner/indicator
@@ -120,14 +120,14 @@ declare const LoadingSpinner: () => React$1.JSX.Element;
  * @author Gabe Abrams
  */
 
-type Props$k = {
+type Props$l = {
     error: any;
     title?: string;
     onClose?: () => void;
     variant?: Variant;
     icon?: IconProp;
 };
-declare const ErrorBox: React$1.FC<Props$k>;
+declare const ErrorBox: React$1.FC<Props$l>;
 
 /**
  * Types of buttons in the modal
@@ -209,6 +209,8 @@ type ModalProps = {
     confirmLabel?: string;
     confirmVariant?: Variant;
     onTopOfOtherModals?: boolean;
+    isLoading?: boolean;
+    isLoadingCancelable?: boolean;
 };
 
 /**
@@ -224,20 +226,21 @@ declare const Modal: React$1.FC<ModalProps>;
  * @author Gabe Abrams
  */
 
-type Props$j = {
+type Props$k = {
     title: React$1.ReactNode;
     children: React$1.ReactNode;
+    topRightChildren?: React$1.ReactNode;
     noBottomMargin?: boolean;
     noBottomPadding?: boolean;
 };
-declare const TabBox: React$1.FC<Props$j>;
+declare const TabBox: React$1.FC<Props$k>;
 
 /**
  * A radio selection button
  * @author Gabe Abrams
  */
 
-type Props$i = {
+type Props$j = {
     text: React$1.ReactNode;
     onSelected: () => void;
     ariaLabel: string;
@@ -251,14 +254,14 @@ type Props$i = {
     small?: boolean;
     useComplexFormatting?: boolean;
 };
-declare const RadioButton: React$1.FC<Props$i>;
+declare const RadioButton: React$1.FC<Props$j>;
 
 /**
  * A checkbox button
  * @author Gabe Abrams
  */
 
-type Props$h = {
+type Props$i = {
     text: React$1.ReactNode;
     onChanged: (checked: boolean) => void;
     ariaLabel: string;
@@ -273,14 +276,14 @@ type Props$h = {
     dashed?: boolean;
     useComplexFormatting?: boolean;
 };
-declare const CheckboxButton: React$1.FC<Props$h>;
+declare const CheckboxButton: React$1.FC<Props$i>;
 
 /**
  * Input group with a title and space for buttons
  * @author Gabe Abrams
  */
 
-type Props$g = {
+type Props$h = {
     label: React$1.ReactNode;
     minLabelWidth?: string;
     children: React$1.ReactNode;
@@ -289,14 +292,15 @@ type Props$g = {
     isAdminFeature?: boolean;
     noMarginOnBottom?: boolean;
 };
-declare const ButtonInputGroup: React$1.FC<Props$g>;
+declare const ButtonInputGroup: React$1.FC<Props$h>;
 
 /**
  * A very simple, lightweight date chooser
  * @author Gabe Abrams
+ * @author Gardenia Liu
  */
 
-type Props$f = {
+type Props$g = {
     ariaLabel: string;
     name: string;
     month: number;
@@ -310,9 +314,30 @@ type Props$f = {
      */
     onChange: (month: number, day: number, year: number) => void;
     numMonthsToShow?: number;
-    chooseFromPast?: boolean;
+    dontAllowPast?: boolean;
+    dontAllowFuture?: boolean;
 };
-declare const SimpleDateChooser: React$1.FC<Props$f>;
+declare const SimpleDateChooser: React$1.FC<Props$g>;
+
+/**
+ * A very simple, lightweight time chooser
+ * @author Gardenia Liu
+ */
+
+type Props$f = {
+    ariaLabel: string;
+    name: string;
+    hour: number;
+    minute: number;
+    /**
+     * Handler for when time changes
+     * @param hour new 24hr hour number
+     * @param minute new minute number
+     */
+    onChange: (hour: number, minute: number) => void;
+    intervalMin?: number;
+};
+declare const SimpleTimeChooser: React$1.FC<Props$f>;
 
 /**
  * Drawer container
@@ -412,6 +437,7 @@ type Props$9 = {
      */
     onChanged: (updatedItems: PickableItem[]) => void;
     noBottomMargin?: boolean;
+    hideSelectAllOrNoneButtons?: boolean;
 };
 declare const ItemPicker: React$1.FC<Props$9>;
 
@@ -1498,6 +1524,16 @@ declare const capitalize: (str: string) => string;
  */
 declare const shuffleArray: <T>(arr: T[]) => T[];
 
+/**
+ * Get number of words in string
+ * @author Gardenia Liu
+ * @author Allison Zhang
+ * @author Gabe Abrams
+ * @param text the string to check
+ * @returns number of words in the string
+ */
+declare const getWordCount: (text: string) => number;
+
 /**
  * Days of the week
  * @author Gabe Abrams
@@ -1536,7 +1572,9 @@ declare enum ReactKitErrorCode {
     NoResponse = "DRK1",
     NoCode = "DRK2",
     SessionExpired = "DRK3",
-    NoCACCLSendRequestFunction = "DRK7"
+    NoCACCLSendRequestFunction = "DRK7",
+    SimpleDateChooserInvalidDateRange = "DRK35",
+    SimpleDateChooserInvalidNumMonths = "DRK36"
 }
 
-export { AppWrapper, AutoscrollToBottomContainer, ButtonInputGroup, CSVDownloadButton, CheckboxButton, CopiableBox, DAY_IN_MS, DBEntry, DBEntryField, DBEntryFieldType, DBEntryManagerPanel, DayOfWeek, Drawer, Dropdown, DropdownItemType, DynamicWord, ErrorBox, ErrorWithCode, HOUR_IN_MS, IntelliTable, IntelliTableColumn, ItemPicker, LOG_REVIEW_ROUTE_PATH_PREFIX, LOG_REVIEW_STATUS_ROUTE, LOG_ROUTE_PATH, LoadingSpinner, Log, LogAction, LogBuiltInMetadata, LogFunction, LogLevel, LogMainInfo, LogMetadataType, LogReviewer, LogSource, LogSourceSpecificInfo, LogType, LogTypeSpecificInfo, MINUTE_IN_MS, Modal, ModalButtonType, ModalSize, ModalType, MultiSwitch, ParamType, PickableItem, PopFailureMark, PopPendingMark, PopSuccessMark, RadioButton, ReactKitErrorCode, SimpleDateChooser, TabBox, ToggleSwitch, Tooltip, Variant, abbreviate, addFatalErrorHandler, alert, avg, canReviewLogs, capitalize, ceilToNumDecimals, combineClassNames, compareArraysByProp, confirm, everyAsync, extractProp, filterAsync, floorToNumDecimals, forEachAsync, forceNumIntoBounds, genCSV, genCommaList, getHumanReadableDate, getLocalTimeInfo, getMonthName, getOrdinal, getPartOfDay, getTimeInfoInET, idify, initClient, isMobileOrTablet, leaveToURL, logClientEvent, makeLinksClickable, mapAsync, onlyKeepLetters, padDecimalZeros, padZerosLeft, parallelLimit, prefixWithAOrAn, prompt, 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, DBEntry, DBEntryField, DBEntryFieldType, DBEntryManagerPanel, DayOfWeek, Drawer, Dropdown, DropdownItemType, DynamicWord, ErrorBox, ErrorWithCode, HOUR_IN_MS, IntelliTable, IntelliTableColumn, ItemPicker, LOG_REVIEW_ROUTE_PATH_PREFIX, LOG_REVIEW_STATUS_ROUTE, LOG_ROUTE_PATH, LoadingSpinner, Log, LogAction, LogBuiltInMetadata, LogFunction, LogLevel, LogMainInfo, LogMetadataType, LogReviewer, LogSource, LogSourceSpecificInfo, LogType, LogTypeSpecificInfo, MINUTE_IN_MS, Modal, ModalButtonType, ModalSize, ModalType, MultiSwitch, ParamType, PickableItem, PopFailureMark, PopPendingMark, PopSuccessMark, RadioButton, ReactKitErrorCode, SimpleDateChooser, SimpleTimeChooser, TabBox, ToggleSwitch, Tooltip, Variant, abbreviate, addFatalErrorHandler, alert, avg, canReviewLogs, capitalize, ceilToNumDecimals, combineClassNames, compareArraysByProp, confirm, everyAsync, extractProp, filterAsync, floorToNumDecimals, forEachAsync, forceNumIntoBounds, genCSV, genCommaList, getHumanReadableDate, getLocalTimeInfo, getMonthName, getOrdinal, getPartOfDay, getTimeInfoInET, getWordCount, idify, initClient, isMobileOrTablet, leaveToURL, logClientEvent, makeLinksClickable, mapAsync, onlyKeepLetters, padDecimalZeros, padZerosLeft, parallelLimit, prefixWithAOrAn, prompt, roundToNumDecimals, setClientEventMetadataPopulator, showFatalError, shuffleArray, someAsync, startMinWait, stringsToHumanReadableList, stubServerEndpoint, sum, useForceRender, validateEmail, validatePhoneNumber, validateString, visitServerEndpoint, waitMs };

package/package.json

@@ -1,14 +1,13 @@
 {
   "name": "dce-reactkit",
-  "version": "4.0.0-beta.3",
+  "version": "4.0.1",
   "description": "Shared components for Harvard DCE apps",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/index.d.ts",
   "scripts": {
     "build": "rm -rf dist && rollup -c",
-    "test": "jest --runInBand",
-    "gen-reactkit-cross-server-secret": "npx tsx genEncodedSecret.ts"
+    "test": "jest --runInBand"
   },
   "jest": {
     "preset": "ts-jest",

package/rollup.config.js

@@ -27,7 +27,6 @@ export default [
       typescript({ tsconfig: "./tsconfig.json" }),
       sourcemaps(),
     ],
-    inlineDynamicImports: true,
     external: [
       ...Object.keys(packageJson.dependencies || {}),
       ...Object.keys(packageJson.peerDependencies || {}),
@@ -37,7 +36,6 @@ export default [
     input: "dist/esm/types/index.d.ts",
     output: [{ file: "dist/index.d.ts", format: "esm" }],
     plugins: [dts()],
-    inlineDynamicImports: true,
     external: [
       ...Object.keys(packageJson.dependencies || {}),
       ...Object.keys(packageJson.peerDependencies || {}),

package/src/components/IntelliTable.tsx

@@ -315,7 +315,7 @@ const IntelliTable: React.FC<Props> = (props) => {
                 checked={columnVisibilityMap[column.param]}
                 ariaLabel={`show "${column.title}" column in the ${title} table`}
                 checkedVariant={Variant.Light}
-                uncheckedVariant={Variant.Secondary}
+                uncheckedVariant={Variant.Light}
               />
             );
           })

package/src/components/ItemPicker/NestableItemList.tsx

@@ -272,6 +272,7 @@ const NestableItemList: React.FC<Props> = (props) => {
                 }}
                 ariaLabel={`Select ${item.name}`}
                 checkedVariant={Variant.Light}
+                uncheckedVariant={Variant.Light}
               />
 
               {/* Children */}

package/src/components/ItemPicker/index.tsx

@@ -33,6 +33,8 @@ type Props = {
   onChanged: (updatedItems: PickableItem[]) => void,
   // If true, don't add margin to bottom of item picker
   noBottomMargin?: boolean,
+  // If true, hide select all or none buttons
+  hideSelectAllOrNoneButtons?: boolean,
 };
 
 /*------------------------------------------------------------------------*/
@@ -52,12 +54,61 @@ const ItemPicker: React.FC<Props> = (props) => {
     items,
     onChanged,
     noBottomMargin,
+    hideSelectAllOrNoneButtons,
   } = props;
 
   /*------------------------------------------------------------------------*/
   /* ------------------------- Component Functions ------------------------ */
   /*------------------------------------------------------------------------*/
 
+  /**
+   * Updates the checked state of an item (including all children)
+   * @author Yuen Ler Chow
+   * @param item the item to update
+   * @param checked the new checked state
+   * @returns the updated item
+   */
+  const updateItemChecked = (
+    item: PickableItem,
+    checked: boolean,
+  ): PickableItem => {
+    if (item.isGroup) {
+      return {
+        ...item,
+        children: item.children.map((child) => {
+          return updateItemChecked(child, checked);
+        }),
+      };
+    }
+    return { ...item, checked };
+  };
+
+  /**
+   * Selects all items in the list
+   * @author Yuen Ler Chow
+   */
+  const handleSelectAll = () => {
+    const updatedItems = items.map(
+      (item) => {
+        return updateItemChecked(item, true);
+      },
+    );
+    onChanged(updatedItems);
+  };
+
+  /**
+   * Deselects all items in the list
+   * @author Yuen Ler Chow
+   */
+  const handleDeselectAll = () => {
+    const updatedItems = items.map(
+      (item) => {
+        return updateItemChecked(item, false);
+      },
+    );
+    onChanged(updatedItems);
+  };
+
   /*------------------------------------------------------------------------*/
   /* ------------------------------- Render ------------------------------- */
   /*------------------------------------------------------------------------*/
@@ -66,10 +117,55 @@ const ItemPicker: React.FC<Props> = (props) => {
   /* --------------- Main UI -------------- */
   /*----------------------------------------*/
 
+  // Select all/none
+  const selectAllOrNone = (
+    !hideSelectAllOrNoneButtons
+      ? (
+        <div
+          className="d-flex h-100 align-items-end flex-row"
+        >
+          <div className="d-flex justify-content-end">
+            {/* Label */}
+            <div
+              className="me-2"
+              style={{ fontSize: '1.2rem' }}
+            >
+              Select
+            </div>
+            {/* Buttons */}
+            <div className="btn-group" role="group">
+              {/* All */}
+              <button
+                type="button"
+                style={{ borderRight: '0.1rem solid white' }}
+                aria-label="Select all contexts"
+                className="btn btn-secondary py-0"
+                onClick={handleSelectAll}
+              >
+                All
+              </button>
+              {/* None */}
+              <button
+                type="button"
+                aria-label="Deselect all contexts"
+                className="btn btn-secondary py-0"
+                onClick={handleDeselectAll}
+              >
+                None
+              </button>
+            </div>
+          </div>
+        </div>
+      )
+      : undefined
+  );
+
+  // Main UI
   return (
     <TabBox
       title={title}
       noBottomMargin={noBottomMargin}
+      topRightChildren={selectAllOrNone}
     >
       <div style={{ overflowX: 'auto' }}>
         <NestableItemList

package/src/components/LogReviewer.tsx

@@ -1182,7 +1182,7 @@ const LogReviewer: React.FC<Props> = (props) => {
               year={dateFilterState.startDate.year}
               month={dateFilterState.startDate.month}
               day={dateFilterState.startDate.day}
-              chooseFromPast
+              dontAllowFuture
               numMonthsToShow={36}
               onChange={(month, day, year) => {
                 dateFilterState.startDate = { month, day, year };
@@ -1198,7 +1198,7 @@ const LogReviewer: React.FC<Props> = (props) => {
               year={dateFilterState.endDate.year}
               month={dateFilterState.endDate.month}
               day={dateFilterState.endDate.day}
-              chooseFromPast
+              dontAllowFuture
               numMonthsToShow={12}
               onChange={(month, day, year) => {
                 if (

package/src/components/Modal/ModalProps.ts

@@ -69,6 +69,10 @@ type ModalProps = {
   confirmVariant?: Variant,
   // True if modal should be on top of other modals
   onTopOfOtherModals?: boolean,
+  // If true, the modal is loading
+  isLoading?: boolean,
+  // If true, the loading is cancelable
+  isLoadingCancelable?: boolean,
 };
 
 export default ModalProps;

package/src/components/Modal/index.tsx

@@ -14,6 +14,9 @@ import React, { useState, useEffect, useRef } from 'react';
 import ReactDOM from 'react-dom';
 
 // Import other components
+import LoadingSpinner from '../LoadingSpinner';
+
+// Import helpers
 import waitMs from '../../helpers/waitMs';
 
 // Import types
@@ -41,6 +44,7 @@ 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: {
@@ -256,6 +260,8 @@ const Modal: React.FC<ModalProps> = (props) => {
     dontAllowBackdropExit,
     dontShowXButton,
     onTopOfOtherModals,
+    isLoading,
+    isLoadingCancelable,
   } = props;
 
   // Determine if no header either
@@ -266,6 +272,7 @@ const Modal: React.FC<ModalProps> = (props) => {
   // True if animation is in use
   const [animatingIn, setAnimatingIn] = useState(true);
   const [animatingPop, setAnimatingPop] = useState(false);
+  const [showModal, setShowModal] = useState(false);
 
   /* -------------- Refs -------------- */
 
@@ -298,6 +305,15 @@ const Modal: React.FC<ModalProps> = (props) => {
         if (mounted.current) {
           setAnimatingIn(false);
         }
+        if (isLoading) {
+          // wait before showing modal
+          await waitMs(MS_TO_WAIT_BEFORE_SHOWING_LOADING_INDICATOR);
+          if (mounted.current) {
+            setShowModal(true);
+          }
+        } else {
+          setShowModal(true);
+        }
       })();
 
       return () => {
@@ -400,6 +416,17 @@ const Modal: React.FC<ModalProps> = (props) => {
     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 = (
+    // The modal must have an onClose function
+    onClose
+    // ...and the close button is allowed to be visible
+    && !dontShowXButton
+    // ...and should not be shown if the modal is loading and not cancelable
+    && !(isLoading && !isLoadingCancelable)
+  );
+
   // Render the modal
   const contentToRender = (
     <div
@@ -436,6 +463,8 @@ const Modal: React.FC<ModalProps> = (props) => {
           handleClose(ModalButtonType.Cancel);
         }}
       />
+
+      {showModal && (
       <div
         className={`modal-dialog modal-${size} ${animationClass} modal-dialog-scrollable modal-dialog-centered`}
         style={{
@@ -498,7 +527,7 @@ const Modal: React.FC<ModalProps> = (props) => {
                 {title}
               </h5>
 
-              {(onClose && !dontShowXButton) && (
+              {showCloseButton && (
                 <button
                   type="button"
                   className="Modal-x-button btn-close"
@@ -518,25 +547,34 @@ const Modal: React.FC<ModalProps> = (props) => {
               )}
             </div>
           )}
-          {children && (
-            <div
-              className="modal-body"
-              style={{
-                color: (
-                  isDarkModeOn()
-                    ? 'white'
-                    : undefined
-                ),
-                backgroundColor: (
-                  isDarkModeOn()
-                    ? '#444'
-                    : undefined
-                ),
-              }}
-            >
-              {children}
-            </div>
-          )}
+
+          <div
+            className="modal-body"
+            style={{
+              color: (
+                isDarkModeOn()
+                  ? 'white'
+                  : undefined
+              ),
+              backgroundColor: (
+                isDarkModeOn()
+                  ? '#444'
+                  : undefined
+              ),
+            }}
+          >
+            {
+              isLoading
+                ? (
+                  <>
+                    <LoadingSpinner />
+                    <span className="sr-only">Content loading</span>
+                  </>
+                )
+                : children
+            }
+          </div>
+
           {footer && (
             <div
               className="modal-footer pt-1 pb-1"
@@ -563,6 +601,7 @@ const Modal: React.FC<ModalProps> = (props) => {
           )}
         </div>
       </div>
+      )}
     </div>
   );