dce-reactkit 5.0.7 → 5.0.9

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

@@ -0,0 +1,20 @@
+import BackButtonController from '../types/BackButtonController';
+/**
+ * Controller for driving back navigation from anywhere in the app. Requires
+ *   useBackButton to have been called in the top-level app
+ * @author Yuen Ler Chow
+ */
+export declare const backButtonController: BackButtonController;
+/**
+ * Hook that makes the browser's back button navigate within the app instead of
+ *   leaving it. Call this once in your top-level app, then use
+ *   backButtonController to enter subpanels and describe their state.
+ *
+ * Assumes a single level of navigation: one home screen plus subpanels that the
+ *   user returns home from.
+ * @author Yuen Ler Chow
+ * @param handleGoHomeFunc handler that performs the app state changes required
+ *   to return to the home screen
+ */
+declare const useBackButton: (handleGoHomeFunc: () => void) => void;
+export default useBackButton;

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

@@ -22,6 +22,8 @@ export declare const _setStubResponse: (opts: {
  * @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
+ * @param [opts.headers] - custom headers to include; values must already be
+ *    string to avoid issue with header serialization
  * @returns response from server
  */
 declare const visitServerEndpoint: (opts: {
@@ -30,5 +32,8 @@ declare const visitServerEndpoint: (opts: {
     params?: {
         [x: string]: any;
     } | undefined;
+    headers?: {
+        [x: string]: string;
+    } | undefined;
 }) => Promise<any>;
 export default visitServerEndpoint;

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

@@ -37,6 +37,7 @@ import isMobileOrTablet from './helpers/isMobileOrTablet';
 import makeLinksClickable from './helpers/makeLinksClickable';
 import combineClassNames from './helpers/combineClassNames';
 import useForceRender from './helpers/useForceRender';
+import useBackButton, { backButtonController } from './helpers/useBackButton';
 import isSelectAdmin from './helpers/isSelectAdmin';
 import ModalButtonType from './types/ModalButtonType';
 import ModalSize from './types/ModalSize';
@@ -45,8 +46,10 @@ import Variant from './types/Variant';
 import IntelliTableColumn from './types/IntelliTableColumn';
 import DropdownItemType from './types/DropdownItemType';
 import ProgressBarSize from './types/ProgressBarSize';
+import BackState from './types/BackState';
+import BackButtonController from './types/BackButtonController';
 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, SimpleMonthChooser, SimpleTimeChooser, Drawer, PopSuccessMark, PopFailureMark, PopPendingMark, CopiableBox, ItemPicker, LogReviewer, IntelliTable, CSVDownloadButton, DBEntryManagerPanel, Tooltip, ToggleSwitch, AutoscrollToBottomContainer, MultiSwitch, Dropdown, ProgressBar, FakeProgressBar, alert, prompt, confirm, showFatalError, DynamicWord, stubServerEndpoint, canReviewLogs, isMobileOrTablet, makeLinksClickable, isSelectAdmin, initClient, visitServerEndpoint, logClientEvent, addFatalErrorHandler, leaveToURL, combineClassNames, useForceRender, setClientEventMetadataPopulator, ModalButtonType, ModalSize, ModalType, Variant, IntelliTableColumn, DropdownItemType, LogReviewerFilterState, ProgressBarSize, PickableItem, DBEntry, DBEntryField, DBEntryFieldType, ErrorWithCode, MINUTE_IN_MS, HOUR_IN_MS, DAY_IN_MS, LOG_REVIEW_ROUTE_PATH_PREFIX, LOG_ROUTE_PATH, LOG_REVIEW_STATUS_ROUTE, LOG_REVIEW_GET_LOGS_ROUTE, SELECT_ADMIN_CHECK_ROUTE, abbreviate, avg, ceilToNumDecimals, floorToNumDecimals, forceNumIntoBounds, padDecimalZeros, padZerosLeft, roundToNumDecimals, sum, waitMs, getOrdinal, getTimeInfoInET, getMondayOfTimestamp, startMinWait, getHumanReadableDate, getPartOfDay, stringsToHumanReadableList, onlyKeepLetters, parallelLimit, getMonthName, genCSV, extractProp, compareArraysByProp, getLocalTimeInfo, genCommaList, validateEmail, validatePhoneNumber, validateString, idify, prefixWithAOrAn, everyAsync, filterAsync, forEachAsync, mapAsync, someAsync, capitalize, shuffleArray, getWordCount, cloneDeep, getTimestampFromTimeInfoInET, spaceAtCapitals, ParamType, DayOfWeek, Log, LogType, LogSource, LogAction, LogBuiltInMetadata, LogMetadataType, LogFunction, LogTypeSpecificInfo, LogMainInfo, LogSourceSpecificInfo, LogLevel, CommonKitErrorCode, };
+export { AppWrapper, LoadingSpinner, ErrorBox, Modal, TabBox, RadioButton, CheckboxButton, ButtonInputGroup, SimpleDateChooser, SimpleMonthChooser, SimpleTimeChooser, Drawer, PopSuccessMark, PopFailureMark, PopPendingMark, CopiableBox, ItemPicker, LogReviewer, IntelliTable, CSVDownloadButton, DBEntryManagerPanel, Tooltip, ToggleSwitch, AutoscrollToBottomContainer, MultiSwitch, Dropdown, ProgressBar, FakeProgressBar, alert, prompt, confirm, showFatalError, DynamicWord, stubServerEndpoint, canReviewLogs, isMobileOrTablet, makeLinksClickable, isSelectAdmin, initClient, visitServerEndpoint, logClientEvent, addFatalErrorHandler, leaveToURL, combineClassNames, useForceRender, useBackButton, backButtonController, setClientEventMetadataPopulator, ModalButtonType, ModalSize, ModalType, Variant, IntelliTableColumn, DropdownItemType, LogReviewerFilterState, ProgressBarSize, BackState, BackButtonController, PickableItem, DBEntry, DBEntryField, DBEntryFieldType, ErrorWithCode, MINUTE_IN_MS, HOUR_IN_MS, DAY_IN_MS, LOG_REVIEW_ROUTE_PATH_PREFIX, LOG_ROUTE_PATH, LOG_REVIEW_STATUS_ROUTE, LOG_REVIEW_GET_LOGS_ROUTE, SELECT_ADMIN_CHECK_ROUTE, abbreviate, avg, ceilToNumDecimals, floorToNumDecimals, forceNumIntoBounds, padDecimalZeros, padZerosLeft, roundToNumDecimals, sum, waitMs, getOrdinal, getTimeInfoInET, getMondayOfTimestamp, startMinWait, getHumanReadableDate, getPartOfDay, stringsToHumanReadableList, onlyKeepLetters, parallelLimit, getMonthName, genCSV, extractProp, compareArraysByProp, getLocalTimeInfo, genCommaList, validateEmail, validatePhoneNumber, validateString, idify, prefixWithAOrAn, everyAsync, filterAsync, forEachAsync, mapAsync, someAsync, capitalize, shuffleArray, getWordCount, cloneDeep, getTimestampFromTimeInfoInET, spaceAtCapitals, ParamType, DayOfWeek, Log, LogType, LogSource, LogAction, LogBuiltInMetadata, LogMetadataType, LogFunction, LogTypeSpecificInfo, LogMainInfo, LogSourceSpecificInfo, LogLevel, CommonKitErrorCode, };

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

@@ -0,0 +1,40 @@
+import BackState from './BackState';
+/**
+ * Controller for the back button, used to drive back navigation from anywhere
+ *   in the app. Pass this to subpanels so they can describe their state and
+ *   send the user home.
+ * @author Yuen Ler Chow
+ */
+type BackButtonController = {
+    /**
+     * Call this when the user navigates to a child of the home screen (something
+     *   they can come back from)
+     */
+    onSubpanelEntered: () => void;
+    /**
+     * Send the user back to the home screen
+     * @param [force] if true, go home immediately without checking the subpanel
+     *   state (no confirmation, not blocked). If falsy, nothing happens when
+     *   blocked and confirmation is required when there are unsaved changes
+     */
+    goHome: (force?: boolean) => Promise<void>;
+    /**
+     * Set the state of the current subpanel, which determines what happens when
+     *   the user tries to go back
+     * @param newSubpanelState the new state of the subpanel
+     */
+    setSubpanelState: (newSubpanelState: BackState) => void;
+    /**
+     * Set the confirmation message shown if the user tries to go back while there
+     *   are unsaved changes (cleared upon returning to the home screen)
+     * @param message the message to show
+     */
+    setCustomUnsavedChangesMessage: (message: string) => void;
+    /**
+     * Set the message shown if the user tries to go back while blocked (cleared
+     *   upon returning to the home screen)
+     * @param message the message to show
+     */
+    setCustomBlockedMessage: (message: string) => void;
+};
+export default BackButtonController;

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

@@ -0,0 +1,11 @@
+/**
+ * State of the current subpanel, determining what happens when the user tries
+ *   to go back to the home screen
+ * @author Yuen Ler Chow
+ */
+declare enum BackState {
+    Normal = "Normal",
+    UnsavedChanges = "UnsavedChanges",
+    Blocked = "Blocked"
+}
+export default BackState;

package/dist/index.d.ts

@@ -865,6 +865,8 @@ declare const initClient: (opts: ({
  * @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
+ * @param [opts.headers] - custom headers to include; values must already be
+ *    string to avoid issue with header serialization
  * @returns response from server
  */
 declare const visitServerEndpoint: (opts: {
@@ -873,6 +875,9 @@ declare const visitServerEndpoint: (opts: {
     params?: {
         [x: string]: any;
     } | undefined;
+    headers?: {
+        [x: string]: string;
+    } | undefined;
 }) => Promise<any>;
 
 /**
@@ -962,6 +967,75 @@ declare const combineClassNames: (classNames: (string | undefined | null | false
  */
 declare const useForceRender: (useReducer: any) => () => void;
 
+/**
+ * State of the current subpanel, determining what happens when the user tries
+ *   to go back to the home screen
+ * @author Yuen Ler Chow
+ */
+declare enum BackState {
+    Normal = "Normal",
+    UnsavedChanges = "UnsavedChanges",
+    Blocked = "Blocked"
+}
+
+/**
+ * Controller for the back button, used to drive back navigation from anywhere
+ *   in the app. Pass this to subpanels so they can describe their state and
+ *   send the user home.
+ * @author Yuen Ler Chow
+ */
+type BackButtonController = {
+    /**
+     * Call this when the user navigates to a child of the home screen (something
+     *   they can come back from)
+     */
+    onSubpanelEntered: () => void;
+    /**
+     * Send the user back to the home screen
+     * @param [force] if true, go home immediately without checking the subpanel
+     *   state (no confirmation, not blocked). If falsy, nothing happens when
+     *   blocked and confirmation is required when there are unsaved changes
+     */
+    goHome: (force?: boolean) => Promise<void>;
+    /**
+     * Set the state of the current subpanel, which determines what happens when
+     *   the user tries to go back
+     * @param newSubpanelState the new state of the subpanel
+     */
+    setSubpanelState: (newSubpanelState: BackState) => void;
+    /**
+     * Set the confirmation message shown if the user tries to go back while there
+     *   are unsaved changes (cleared upon returning to the home screen)
+     * @param message the message to show
+     */
+    setCustomUnsavedChangesMessage: (message: string) => void;
+    /**
+     * Set the message shown if the user tries to go back while blocked (cleared
+     *   upon returning to the home screen)
+     * @param message the message to show
+     */
+    setCustomBlockedMessage: (message: string) => void;
+};
+
+/**
+ * Controller for driving back navigation from anywhere in the app. Requires
+ *   useBackButton to have been called in the top-level app
+ * @author Yuen Ler Chow
+ */
+declare const backButtonController: BackButtonController;
+/**
+ * Hook that makes the browser's back button navigate within the app instead of
+ *   leaving it. Call this once in your top-level app, then use
+ *   backButtonController to enter subpanels and describe their state.
+ *
+ * Assumes a single level of navigation: one home screen plus subpanels that the
+ *   user returns home from.
+ * @author Yuen Ler Chow
+ * @param handleGoHomeFunc handler that performs the app state changes required
+ *   to return to the home screen
+ */
+declare const useBackButton: (handleGoHomeFunc: () => void) => void;
+
 /**
  * Checks if the current user is a select admin
  * @author Gardenia Liu
@@ -969,4 +1043,4 @@ declare const useForceRender: (useReducer: any) => () => void;
  */
 declare const isSelectAdmin: () => Promise<boolean>;
 
-export { AppWrapper, AutoscrollToBottomContainer, ButtonInputGroup, CSVDownloadButton, CheckboxButton, CopiableBox, DBEntry, DBEntryField, DBEntryFieldType, DBEntryManagerPanel, Drawer, Dropdown, DropdownItemType, DynamicWord, ErrorBox, FakeProgressBar, IntelliTable, IntelliTableColumn, ItemPicker, LoadingSpinner, LogReviewer, Modal, ModalButtonType, ModalSize, ModalType, MultiSwitch, PickableItem, PopFailureMark, PopPendingMark, PopSuccessMark, ProgressBar, ProgressBarSize, RadioButton, SimpleDateChooser, SimpleMonthChooser, SimpleTimeChooser, TabBox, ToggleSwitch, Tooltip, Variant, addFatalErrorHandler, alert, canReviewLogs, combineClassNames, confirm, initClient, isMobileOrTablet, isSelectAdmin, leaveToURL, logClientEvent, makeLinksClickable, prompt, setClientEventMetadataPopulator, showFatalError, stubServerEndpoint, useForceRender, visitServerEndpoint };
+export { AppWrapper, AutoscrollToBottomContainer, BackButtonController, BackState, ButtonInputGroup, CSVDownloadButton, CheckboxButton, CopiableBox, DBEntry, DBEntryField, DBEntryFieldType, DBEntryManagerPanel, Drawer, Dropdown, DropdownItemType, DynamicWord, ErrorBox, FakeProgressBar, IntelliTable, IntelliTableColumn, ItemPicker, LoadingSpinner, LogReviewer, Modal, ModalButtonType, ModalSize, ModalType, MultiSwitch, PickableItem, PopFailureMark, PopPendingMark, PopSuccessMark, ProgressBar, ProgressBarSize, RadioButton, SimpleDateChooser, SimpleMonthChooser, SimpleTimeChooser, TabBox, ToggleSwitch, Tooltip, Variant, addFatalErrorHandler, alert, backButtonController, canReviewLogs, combineClassNames, confirm, initClient, isMobileOrTablet, isSelectAdmin, leaveToURL, logClientEvent, makeLinksClickable, prompt, setClientEventMetadataPopulator, showFatalError, stubServerEndpoint, useBackButton, useForceRender, visitServerEndpoint };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dce-reactkit",
-  "version": "5.0.7",
+  "version": "5.0.9",
   "description": "Shared components for Harvard DCE apps",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

package/src/components/ItemPicker/NestableItemList.tsx

@@ -258,48 +258,50 @@ const NestableItemList: React.FC<Props> = (props) => {
 
           return (
             <div key={item.id}>
-              {/* Dropdown Button */}
-              <span
-                className="NestableItemList-dropdown-button-container d-inline-block"
-                style={{
-                  minWidth: '2rem',
-                }}
-              >
-                {item.isGroup && (
-                  <button
-                    className={`NestableItemList-dropdown-button NestableItemList-dropdown-button-${item.id}`}
-                    style={{
-                      border: 0,
-                      backgroundColor: 'transparent',
-                    }}
-                    type="button"
-                    onClick={() => {
-                      dispatch({
-                        type: ActionType.ToggleChild,
-                        id: item.id,
-                      });
-                    }}
-                    aria-label={`${childExpanded[item.id] ? 'Hide' : 'Show'} items in ${accessibleName}`}
-                  >
-                    <FontAwesomeIcon
-                      icon={childExpanded[item.id] ? faChevronDown : faChevronRight}
-                    />
-                  </button>
-                )}
-              </span>
-
-              {/* Checkbox and Text (optionally wrapped in a tooltip) */}
-              {
-                item.tooltip
-                  ? (
-                    <Tooltip text={item.tooltip}>
-                      <span className="d-inline-block">
-                        {checkbox}
-                      </span>
-                    </Tooltip>
-                  )
-                  : checkbox
-              }
+              <div className="NestableItemList-item d-flex align-items-center">
+                {/* Dropdown Button */}
+                <span
+                  className="NestableItemList-dropdown-button-container"
+                  style={{
+                    minWidth: '2rem',
+                  }}
+                >
+                  {item.isGroup && (
+                    <button
+                      className={`NestableItemList-dropdown-button NestableItemList-dropdown-button-${item.id}`}
+                      style={{
+                        border: 0,
+                        backgroundColor: 'transparent',
+                      }}
+                      type="button"
+                      onClick={() => {
+                        dispatch({
+                          type: ActionType.ToggleChild,
+                          id: item.id,
+                        });
+                      }}
+                      aria-label={`${childExpanded[item.id] ? 'Hide' : 'Show'} items in ${accessibleName}`}
+                    >
+                      <FontAwesomeIcon
+                        icon={childExpanded[item.id] ? faChevronDown : faChevronRight}
+                      />
+                    </button>
+                  )}
+                </span>
+
+                {/* Checkbox and Text (optionally wrapped in a tooltip) */}
+                {
+                  item.tooltip
+                    ? (
+                      <Tooltip text={item.tooltip}>
+                        <span className="d-inline-block">
+                          {checkbox}
+                        </span>
+                      </Tooltip>
+                    )
+                    : checkbox
+                }
+              </div>
 
               {/* Children */}
               {(item.isGroup && childExpanded[item.id]) && (

package/src/components/Tooltip.tsx

@@ -63,6 +63,14 @@ const Tooltip: React.FC<Props> = (props) => {
         // Import bootstrap tooltip
         const BSTooltip = (await import('bootstrap')).Tooltip;
 
+        // The child may have unmounted while the dynamic import above was
+        // resolving (React nulls the ref on unmount). Constructing a
+        // Bootstrap tooltip with a null element causes an error,
+        // so bail out instead
+        if (!childRef.current) {
+          return;
+        }
+
         // Initialize
         t = new BSTooltip(
           childRef.current,
@@ -78,6 +86,15 @@ const Tooltip: React.FC<Props> = (props) => {
       return () => {
         if (t) {
           t.dispose();
+          // Bootstrap's hide() queues a transition-end callback that can
+          // fire AFTER dispose and touch the (now null) trigger map and
+          // element (twbs/bootstrap issue #37474). Point those private
+          // fields at harmless stand-ins so the late callback is a no-op
+          // instead of a crash.
+          /* eslint-disable no-underscore-dangle */
+          t._activeTrigger = {};
+          t._element = document.createElement('noscript');
+          /* eslint-enable no-underscore-dangle */
         }
       };
     },