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

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/index.d.ts

@@ -21,7 +21,6 @@ import Tooltip from './components/Tooltip';
 import ToggleSwitch from './components/ToggleSwitch';
 import AutoscrollToBottomContainer from './components/AutoscrollToBottomContainer';
 import MultiSwitch from './components/MultiSwitch';
-import Dropdown from './components/Dropdown';
 import ErrorWithCode from './errors/ErrorWithCode';
 import MINUTE_IN_MS from './constants/MINUTE_IN_MS';
 import HOUR_IN_MS from './constants/HOUR_IN_MS';
@@ -93,9 +92,8 @@ import LogBuiltInMetadata from './types/LogBuiltInMetadata';
 import LogMetadataType from './types/LogMetadataType';
 import LogFunction from './types/LogFunction';
 import IntelliTableColumn from './types/IntelliTableColumn';
-import DropdownItemType from './types/DropdownItemType';
 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, confirm, showFatalError, ErrorWithCode, MINUTE_IN_MS, HOUR_IN_MS, DAY_IN_MS, 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, initServer, genRouteHandler, handleError, handleSuccess, initLogCollection, addDBEditorEndpoints, ModalButtonType, ModalSize, ModalType, ReactKitErrorCode, Variant, DayOfWeek, Log, LogType, LogSource, LogAction, LogBuiltInMetadata, LogMetadataType, LogFunction, IntelliTableColumn, DropdownItemType, PickableItem, DBEntry, DBEntryField, DBEntryFieldType, ParamType, };
+export { AppWrapper, LoadingSpinner, ErrorBox, Modal, TabBox, RadioButton, CheckboxButton, ButtonInputGroup, SimpleDateChooser, Drawer, PopSuccessMark, PopFailureMark, PopPendingMark, CopiableBox, ItemPicker, LogReviewer, IntelliTable, CSVDownloadButton, DBEntryManagerPanel, Tooltip, ToggleSwitch, AutoscrollToBottomContainer, MultiSwitch, alert, confirm, showFatalError, ErrorWithCode, MINUTE_IN_MS, HOUR_IN_MS, DAY_IN_MS, 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, initServer, genRouteHandler, handleError, handleSuccess, initLogCollection, addDBEditorEndpoints, ModalButtonType, ModalSize, ModalType, ReactKitErrorCode, Variant, DayOfWeek, Log, LogType, LogSource, LogAction, LogBuiltInMetadata, LogMetadataType, LogFunction, IntelliTableColumn, PickableItem, DBEntry, DBEntryField, DBEntryFieldType, ParamType, };

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

@@ -15,9 +15,6 @@ declare enum ReactKitErrorCode {
     NotAdmin = "DRK10",
     NotAllowedToReviewLogs = "DRK11",
     ThemeCheckedBeforeReactKitReady = "DRK12",
-    SessionExpiredMessageGottenBeforeReactKitReady = "DRK13",
-    NotConnected = "DRK14",
-    SelfSigned = "DRK15",
-    ResponseParseError = "DRK16"
+    SessionExpiredMessageGottenBeforeReactKitReady = "DRK13"
 }
 export default ReactKitErrorCode;

package/dist/index.d.ts

@@ -24,7 +24,7 @@ declare enum Variant {
  * @author Gabe Abrams
  */
 
-type Props$l = {
+type Props$k = {
     children: React$1.ReactNode;
 };
 /**
@@ -75,7 +75,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$k>;
 
 /**
  * Loading spinner/indicator
@@ -88,14 +88,14 @@ declare const LoadingSpinner: () => JSX.Element;
  * @author Gabe Abrams
  */
 
-type Props$k = {
+type Props$j = {
     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$j>;
 
 /**
  * Types of buttons in the modal
@@ -176,6 +176,8 @@ type ModalProps = {
     confirmLabel?: string;
     confirmVariant?: Variant;
     onTopOfOtherModals?: boolean;
+    isLoading?: boolean;
+    isLoadingCancelable?: boolean;
 };
 
 /**
@@ -191,20 +193,20 @@ declare const Modal: React$1.FC<ModalProps>;
  * @author Gabe Abrams
  */
 
-type Props$j = {
+type Props$i = {
     title: React$1.ReactNode;
     children: React$1.ReactNode;
     noBottomMargin?: boolean;
     noBottomPadding?: boolean;
 };
-declare const TabBox: React$1.FC<Props$j>;
+declare const TabBox: React$1.FC<Props$i>;
 
 /**
  * A radio selection button
  * @author Gabe Abrams
  */
 
-type Props$i = {
+type Props$h = {
     text: React$1.ReactNode;
     onSelected: () => void;
     ariaLabel: string;
@@ -216,14 +218,14 @@ type Props$i = {
     unselectedVariant?: Variant;
     small?: boolean;
 };
-declare const RadioButton: React$1.FC<Props$i>;
+declare const RadioButton: React$1.FC<Props$h>;
 
 /**
  * A checkbox button
  * @author Gabe Abrams
  */
 
-type Props$h = {
+type Props$g = {
     text: React$1.ReactNode;
     onChanged: (checked: boolean) => void;
     ariaLabel: string;
@@ -237,14 +239,14 @@ type Props$h = {
     small?: boolean;
     dashed?: boolean;
 };
-declare const CheckboxButton: React$1.FC<Props$h>;
+declare const CheckboxButton: React$1.FC<Props$g>;
 
 /**
  * Input group with a title and space for buttons
  * @author Gabe Abrams
  */
 
-type Props$g = {
+type Props$f = {
     label: React$1.ReactNode;
     minLabelWidth?: string;
     children: React$1.ReactNode;
@@ -253,14 +255,14 @@ type Props$g = {
     isAdminFeature?: boolean;
     noMarginOnBottom?: boolean;
 };
-declare const ButtonInputGroup: React$1.FC<Props$g>;
+declare const ButtonInputGroup: React$1.FC<Props$f>;
 
 /**
  * A very simple, lightweight date chooser
  * @author Gabe Abrams
  */
 
-type Props$f = {
+type Props$e = {
     ariaLabel: string;
     name: string;
     month: number;
@@ -276,62 +278,62 @@ type Props$f = {
     numMonthsToShow?: number;
     chooseFromPast?: boolean;
 };
-declare const SimpleDateChooser: React$1.FC<Props$f>;
+declare const SimpleDateChooser: React$1.FC<Props$e>;
 
 /**
  * Drawer container
  * @author Gabe Abrams
  */
 
-type Props$e = {
+type Props$d = {
     grayBackground?: boolean;
     customBackgroundColor?: string;
     children: React$1.ReactNode;
 };
-declare const Drawer: React$1.FC<Props$e>;
+declare const Drawer: React$1.FC<Props$d>;
 
 /**
  * Success checkmark that pops into view
  * @author Gabe Abrams
  */
 
-type Props$d = {
+type Props$c = {
     sizeRem?: number;
     circleVariant?: string;
     checkVariant?: string;
 };
-declare const PopSuccessMark: React$1.FC<Props$d>;
+declare const PopSuccessMark: React$1.FC<Props$c>;
 
 /**
  * Failure x mark that pops into view
  * @author Gabe Abrams
  */
 
-type Props$c = {
+type Props$b = {
     sizeRem?: number;
     circleVariant?: string;
     xVariant?: string;
 };
-declare const PopFailureMark: React$1.FC<Props$c>;
+declare const PopFailureMark: React$1.FC<Props$b>;
 
 /**
  * Failure pending that pops into view
  * @author Gabe Abrams
  */
 
-type Props$b = {
+type Props$a = {
     sizeRem?: number;
     circleVariant?: string;
     hourglassVariant?: string;
 };
-declare const PopPendingMark: React$1.FC<Props$b>;
+declare const PopPendingMark: React$1.FC<Props$a>;
 
 /**
  * Copiable text box
  * @author Gabe Abrams
  */
 
-type Props$a = {
+type Props$9 = {
     text: string;
     maxTextWidthRem?: number;
     label?: string;
@@ -343,7 +345,7 @@ type Props$a = {
     textAreaId?: string;
     copyButtonId?: string;
 };
-declare const CopiableBox: React$1.FC<Props$a>;
+declare const CopiableBox: React$1.FC<Props$9>;
 
 /**
  * An item that can be chosen (for use within ItemPicker)
@@ -366,7 +368,7 @@ type PickableItem = ({
  * @author Yuen Ler Chow
  */
 
-type Props$9 = {
+type Props$8 = {
     title: string;
     items: PickableItem[];
     /**
@@ -377,7 +379,7 @@ type Props$9 = {
     onChanged: (updatedItems: PickableItem[]) => void;
     noBottomMargin?: boolean;
 };
-declare const ItemPicker: React$1.FC<Props$9>;
+declare const ItemPicker: React$1.FC<Props$8>;
 
 /**
  * Type of the context map in a LogMetadata file
@@ -422,11 +424,11 @@ type LogMetadataType = {
  * @author Gabe Abrams
  */
 
-type Props$8 = {
+type Props$7 = {
     LogMetadata: LogMetadataType;
     onClose: () => void;
 };
-declare const LogReviewer: React$1.FC<Props$8>;
+declare const LogReviewer: React$1.FC<Props$7>;
 
 /**
  * Server-side API param types
@@ -461,7 +463,7 @@ type IntelliTableColumn = {
  * @author Gabe Abrams
  */
 
-type Props$7 = {
+type Props$6 = {
     title: string;
     id: string;
     data: {
@@ -471,14 +473,14 @@ type Props$7 = {
     columns: IntelliTableColumn[];
     csvName?: string;
 };
-declare const IntelliTable: React$1.FC<Props$7>;
+declare const IntelliTable: React$1.FC<Props$6>;
 
 /**
  * Button for downloading a csv file
  * @author Gabe Abrams
  */
 
-type Props$6 = {
+type Props$5 = {
     filename: string;
     csv: string;
     id?: string;
@@ -490,7 +492,7 @@ type Props$6 = {
     onClick?: () => void;
     children?: React$1.ReactNode;
 };
-declare const CSVDownloadButton: React$1.FC<Props$6>;
+declare const CSVDownloadButton: React$1.FC<Props$5>;
 
 /**
  * Generic type for an object
@@ -566,7 +568,7 @@ type DBEntryField = ({
  * @author Gabe Abrams
  */
 
-type Props$5 = {
+type Props$4 = {
     entryFields: DBEntryField[];
     idPropName: string;
     titlePropName: string;
@@ -592,18 +594,18 @@ type Props$5 = {
         [k: string]: any;
     };
 };
-declare const DBEntryManagerPanel: React$1.FC<Props$5>;
+declare const DBEntryManagerPanel: React$1.FC<Props$4>;
 
 /**
  * Simple tooltip component
  * @author Gabe Abrams
  */
 
-type Props$4 = {
+type Props$3 = {
     text: string;
     children: JSX.Element;
 };
-declare const Tooltip: React$1.FC<Props$4>;
+declare const Tooltip: React$1.FC<Props$3>;
 
 /**
  * A toggle switch that toggles on or off
@@ -611,7 +613,7 @@ declare const Tooltip: React$1.FC<Props$4>;
  * @author Gabe Abrams
  */
 
-type Props$3 = {
+type Props$2 = {
     isOn: boolean;
     /**
      * A handler to call when the switch is toggled
@@ -623,7 +625,7 @@ type Props$3 = {
     description: string;
     backgroundVariantWhenOn?: Variant;
 };
-declare const ToggleSwitch: React$1.FC<Props$3>;
+declare const ToggleSwitch: React$1.FC<Props$2>;
 
 /**
  * Container that automatically scrolls when new items are added,
@@ -634,7 +636,7 @@ declare const ToggleSwitch: React$1.FC<Props$3>;
  * @author Gabe Abrams
  */
 
-type Props$2 = {
+type Props$1 = {
     itemsName?: string;
     items: AutoScrollItem[];
     jumpToBottomButtonVariant?: Variant;
@@ -645,7 +647,7 @@ type AutoScrollItem = {
     id: string | number;
     item: React$1.ReactNode;
 };
-declare const AutoscrollToBottomContainer: React$1.FC<Props$2>;
+declare const AutoscrollToBottomContainer: React$1.FC<Props$1>;
 
 /**
  * A switch with multiple options for selection
@@ -654,7 +656,7 @@ declare const AutoscrollToBottomContainer: React$1.FC<Props$2>;
  * @author Austen Money
  */
 
-type Props$1 = {
+type Props = {
     options: Option[];
     selectedOptionId: string;
     /**
@@ -669,43 +671,7 @@ type Option = {
     icon: IconProp;
     id: string;
 };
-declare const MultiSwitch: React$1.FC<Props$1>;
-
-declare enum DropdownItemType {
-    Header = "Header",
-    Divider = "Divider",
-    Item = "Item"
-}
-
-/**
- * A simple dropdown menu
- * @author Alessandra De Lucas
- * @author Yuen Ler Chow
- * @author Gabe Abrams
- */
-
-type Props = {
-    items: DropdownItem[];
-    dropdownButton: {
-        ariaLabel: string;
-        id: string;
-        content?: React$1.ReactNode;
-        variant?: Variant;
-    };
-};
-type DropdownItem = ({
-    type: DropdownItemType.Header;
-    content: React$1.ReactNode;
-} | {
-    type: DropdownItemType.Divider;
-} | {
-    type: DropdownItemType.Item;
-    content: React$1.ReactNode;
-    ariaLabel: string;
-    id: string;
-    onClick: () => void;
-});
-declare const Dropdown: React$1.FC<Props>;
+declare const MultiSwitch: React$1.FC<Props>;
 
 /**
  * An error with a code
@@ -1620,10 +1586,7 @@ declare enum ReactKitErrorCode {
     NotAdmin = "DRK10",
     NotAllowedToReviewLogs = "DRK11",
     ThemeCheckedBeforeReactKitReady = "DRK12",
-    SessionExpiredMessageGottenBeforeReactKitReady = "DRK13",
-    NotConnected = "DRK14",
-    SelfSigned = "DRK15",
-    ResponseParseError = "DRK16"
+    SessionExpiredMessageGottenBeforeReactKitReady = "DRK13"
 }
 
 /**
@@ -1656,4 +1619,4 @@ declare const LogBuiltInMetadata: {
     };
 };
 
-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, LoadingSpinner, Log, LogAction, LogBuiltInMetadata, LogFunction, LogMetadataType, LogReviewer, LogSource, LogType, MINUTE_IN_MS, Modal, ModalButtonType, ModalSize, ModalType, MultiSwitch, ParamType, PickableItem, PopFailureMark, PopPendingMark, PopSuccessMark, RadioButton, ReactKitErrorCode, SimpleDateChooser, TabBox, ToggleSwitch, Tooltip, 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, DBEntry, DBEntryField, DBEntryFieldType, DBEntryManagerPanel, DayOfWeek, Drawer, DynamicWord, ErrorBox, ErrorWithCode, HOUR_IN_MS, IntelliTable, IntelliTableColumn, ItemPicker, LoadingSpinner, Log, LogAction, LogBuiltInMetadata, LogFunction, LogMetadataType, LogReviewer, LogSource, LogType, MINUTE_IN_MS, Modal, ModalButtonType, ModalSize, ModalType, MultiSwitch, ParamType, PickableItem, PopFailureMark, PopPendingMark, PopSuccessMark, RadioButton, ReactKitErrorCode, SimpleDateChooser, TabBox, ToggleSwitch, Tooltip, 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 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dce-reactkit",
-  "version": "3.8.7",
+  "version": "3.9.0-beta-loading-modal.1",
   "description": "Shared components for Harvard DCE apps",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
@@ -24,7 +24,6 @@
   },
   "homepage": "https://github.com/harvard-edtech/dce-reactkit#readme",
   "dependencies": {
-    "qs": "^6.x.x",
     "react-select": "^5.7.3"
   },
   "peerDependencies": {

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: {
@@ -253,6 +257,8 @@ const Modal: React.FC<ModalProps> = (props) => {
     dontAllowBackdropExit,
     dontShowXButton,
     onTopOfOtherModals,
+    isLoading,
+    isLoadingCancelable,
   } = props;
 
   // Determine if no header either
@@ -263,6 +269,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 -------------- */
 
@@ -295,6 +302,13 @@ 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);
+          setShowModal(true);
+        } else {
+          setShowModal(true);
+        }
       })();
 
       return () => {
@@ -397,6 +411,10 @@ 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 = onClose && !dontShowXButton && !(isLoading && !isLoadingCancelable);
+
   // Render the modal
   const contentToRender = (
     <div
@@ -433,6 +451,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={{
@@ -440,7 +460,7 @@ const Modal: React.FC<ModalProps> = (props) => {
           // Override sizes for even larger for XL
           width: (
             size === ModalSize.ExtraLarge
-              ? 'calc(100vw - 1rem)'
+              ? 'calc(100vw - 3rem)'
               : undefined
           ),
           maxWidth: (
@@ -495,7 +515,7 @@ const Modal: React.FC<ModalProps> = (props) => {
                 {title}
               </h5>
 
-              {(onClose && !dontShowXButton) && (
+              {showCloseButton && (
                 <button
                   type="button"
                   className="Modal-x-button btn-close"
@@ -515,25 +535,32 @@ 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 && !children ? (
+              <>
+                <LoadingSpinner />
+                <span className="sr-only">Content loading</span>
+              </>
+            ) : (
+              children
+            )}
+          </div>
+
           {footer && (
             <div
               className="modal-footer pt-1 pb-1"
@@ -560,6 +587,7 @@ const Modal: React.FC<ModalProps> = (props) => {
           )}
         </div>
       </div>
+      )}
     </div>
   );
 

package/src/components/MultiSwitch.tsx

@@ -153,7 +153,7 @@ const MultiSwitch: React.FC<Props> = (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;

package/src/index.ts

@@ -28,7 +28,6 @@ import Tooltip from './components/Tooltip';
 import ToggleSwitch from './components/ToggleSwitch';
 import AutoscrollToBottomContainer from './components/AutoscrollToBottomContainer';
 import MultiSwitch from './components/MultiSwitch';
-import Dropdown from './components/Dropdown';
 
 // Import errors
 import ErrorWithCode from './errors/ErrorWithCode';
@@ -110,7 +109,6 @@ import LogBuiltInMetadata from './types/LogBuiltInMetadata';
 import LogMetadataType from './types/LogMetadataType';
 import LogFunction from './types/LogFunction';
 import IntelliTableColumn from './types/IntelliTableColumn';
-import DropdownItemType from './types/DropdownItemType';
 
 // Component-specific-types
 import PickableItem from './components/ItemPicker/types/PickableItem';
@@ -144,7 +142,6 @@ export {
   ToggleSwitch,
   AutoscrollToBottomContainer,
   MultiSwitch,
-  Dropdown,
   // Global functions
   alert,
   confirm,
@@ -229,7 +226,6 @@ export {
   LogMetadataType,
   LogFunction,
   IntelliTableColumn,
-  DropdownItemType,
   // Component-specific-types
   PickableItem,
   DBEntry,

package/src/types/ReactKitErrorCode.tsx

@@ -1,4 +1,4 @@
-// Highest error code = DRK16
+// Highest error code = DRK13
 
 /**
  * List of error codes built into the react kit
@@ -18,11 +18,6 @@ enum ReactKitErrorCode {
   NotAllowedToReviewLogs = 'DRK11',
   ThemeCheckedBeforeReactKitReady = 'DRK12',
   SessionExpiredMessageGottenBeforeReactKitReady = 'DRK13',
-
-  // Server-to-server requests
-  NotConnected = 'DRK14',
-  SelfSigned = 'DRK15',
-  ResponseParseError = 'DRK16',
 }
 
 export default ReactKitErrorCode;