dce-reactkit 3.6.28 → 3.7.1-beta.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/dist/cjs/index.js +179 -466
  2. package/dist/cjs/index.js.map +1 -1
  3. package/dist/cjs/types/components/Tooltip.d.ts +1 -6
  4. package/dist/esm/index.js +180 -467
  5. package/dist/esm/index.js.map +1 -1
  6. package/dist/esm/types/components/Tooltip.d.ts +1 -6
  7. package/dist/index.d.ts +1 -5
  8. package/package.json +2 -1
  9. package/src/components/AppWrapper.tsx +38 -0
  10. package/src/components/Tooltip.tsx +28 -498
package/dist/cjs/index.js CHANGED
@@ -6,6 +6,7 @@ var React = require('react');
6
6
  var freeSolidSvgIcons = require('@fortawesome/free-solid-svg-icons');
7
7
  var reactFontawesome = require('@fortawesome/react-fontawesome');
8
8
  var freeRegularSvgIcons = require('@fortawesome/free-regular-svg-icons');
9
+ var bootstrap = require('bootstrap');
9
10
 
10
11
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
11
12
 
@@ -412,7 +413,7 @@ const getModalButtonTypeToLabelAndVariant = () => {
412
413
  /*------------------------------------------------------------------------*/
413
414
  /* -------------------------------- Style ------------------------------- */
414
415
  /*------------------------------------------------------------------------*/
415
- const style$b = `
416
+ const style$a = `
416
417
  .Modal-backdrop {
417
418
  position: fixed;
418
419
  top: 0;
@@ -581,7 +582,7 @@ const Modal = (props) => {
581
582
  left: 0,
582
583
  right: 0,
583
584
  } },
584
- React__default["default"].createElement("style", null, style$b),
585
+ React__default["default"].createElement("style", null, style$a),
585
586
  React__default["default"].createElement("div", { className: `Modal-backdrop ${backdropAnimationClass}`, style: {
586
587
  zIndex: 5000000003,
587
588
  }, onClick: () => __awaiter(void 0, void 0, void 0, function* () {
@@ -1081,7 +1082,7 @@ const showSessionExpiredMessage = () => __awaiter(void 0, void 0, void 0, functi
1081
1082
  /*------------------------------------------------------------------------*/
1082
1083
  /* -------------------------------- Style ------------------------------- */
1083
1084
  /*------------------------------------------------------------------------*/
1084
- const style$a = `
1085
+ const style$9 = `
1085
1086
  .AppWrapper-leave-to-url-notice {
1086
1087
  opacity: 0;
1087
1088
 
@@ -1215,11 +1216,36 @@ const AppWrapper = (props) => {
1215
1216
  if (!body) {
1216
1217
  body = children;
1217
1218
  }
1219
+ /* ------------- Tooltip ------------ */
1220
+ const tooltipStyle = (isDarkModeOn()
1221
+ ? `
1222
+ .tooltip-inner {
1223
+ background-color: white;
1224
+ color: black;
1225
+ border: 0.1rem solid black;
1226
+ }
1227
+ div[data-popper-placement="top"] .tooltip-arrow::before {
1228
+ border-top-color: white !important;
1229
+ transform: translate(0, -0.05rem);
1230
+ }
1231
+ `
1232
+ : `
1233
+ .tooltip-inner {
1234
+ background-color: black;
1235
+ color: black;
1236
+ border: 0.1rem solid white;
1237
+ }
1238
+ div[data-popper-placement="top"] .tooltip-arrow::before {
1239
+ border-top-color: black !important;
1240
+ transform: translate(0, -0.05rem);
1241
+ }
1242
+ `);
1218
1243
  /*----------------------------------------*/
1219
1244
  /* --------------- Main UI -------------- */
1220
1245
  /*----------------------------------------*/
1221
1246
  return (React__default["default"].createElement(React__default["default"].Fragment, null,
1222
- React__default["default"].createElement("style", null, style$a),
1247
+ React__default["default"].createElement("style", null, style$9),
1248
+ React__default["default"].createElement("style", null, tooltipStyle),
1223
1249
  modal,
1224
1250
  body));
1225
1251
  };
@@ -1231,7 +1257,7 @@ const AppWrapper = (props) => {
1231
1257
  /*------------------------------------------------------------------------*/
1232
1258
  /* -------------------------------- Style ------------------------------- */
1233
1259
  /*------------------------------------------------------------------------*/
1234
- const style$9 = `
1260
+ const style$8 = `
1235
1261
  /* Container fades in */
1236
1262
  .LoadingSpinner-container {
1237
1263
  animation-name: LoadingSpinner-container-fade-in;
@@ -1309,7 +1335,7 @@ const LoadingSpinner = () => {
1309
1335
  /*------------------------------------------------------------------------*/
1310
1336
  // Add all four blips to a container
1311
1337
  return (React__default["default"].createElement("div", { className: "text-center LoadingSpinner LoadingSpinner-container" },
1312
- React__default["default"].createElement("style", null, style$9),
1338
+ React__default["default"].createElement("style", null, style$8),
1313
1339
  React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, { icon: freeSolidSvgIcons.faCircle, className: "LoadingSpinner-blip-1 me-1" }),
1314
1340
  React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, { icon: freeSolidSvgIcons.faCircle, className: "LoadingSpinner-blip-2 me-1" }),
1315
1341
  React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, { icon: freeSolidSvgIcons.faCircle, className: "LoadingSpinner-blip-3 me-1" }),
@@ -1323,7 +1349,7 @@ const LoadingSpinner = () => {
1323
1349
  /*------------------------------------------------------------------------*/
1324
1350
  /* -------------------------------- Style ------------------------------- */
1325
1351
  /*------------------------------------------------------------------------*/
1326
- const style$8 = `
1352
+ const style$7 = `
1327
1353
  /* Tab Box */
1328
1354
  .TabBox-box {
1329
1355
  /* Light Border */
@@ -1403,7 +1429,7 @@ const TabBox = (props) => {
1403
1429
  /*----------------------------------------*/
1404
1430
  // Full UI
1405
1431
  return (React__default["default"].createElement("div", { className: `TabBox-container ${noBottomMargin ? '' : 'mb-2'}` },
1406
- React__default["default"].createElement("style", null, style$8),
1432
+ React__default["default"].createElement("style", null, style$7),
1407
1433
  React__default["default"].createElement("div", { className: "TabBox-title-container" },
1408
1434
  React__default["default"].createElement("div", { className: "TabBox-title" }, title)),
1409
1435
  React__default["default"].createElement("div", { className: `TabBox-box ps-2 pt-2 pe-2 ${noBottomPadding ? '' : 'pb-2'}` },
@@ -1732,7 +1758,7 @@ const SimpleDateChooser = (props) => {
1732
1758
  /*------------------------------------------------------------------------*/
1733
1759
  /* -------------------------------- Style ------------------------------- */
1734
1760
  /*------------------------------------------------------------------------*/
1735
- const style$7 = `
1761
+ const style$6 = `
1736
1762
  .Drawer-container {
1737
1763
  margin-left: 1rem;
1738
1764
  margin-right: 1rem;
@@ -1766,7 +1792,7 @@ const Drawer = (props) => {
1766
1792
  return (React__default["default"].createElement("div", { className: "Drawer-container", style: {
1767
1793
  backgroundColor: (customBackgroundColor !== null && customBackgroundColor !== void 0 ? customBackgroundColor : undefined),
1768
1794
  } },
1769
- React__default["default"].createElement("style", null, style$7),
1795
+ React__default["default"].createElement("style", null, style$6),
1770
1796
  children));
1771
1797
  };
1772
1798
 
@@ -1777,7 +1803,7 @@ const Drawer = (props) => {
1777
1803
  /*------------------------------------------------------------------------*/
1778
1804
  /* -------------------------------- Style ------------------------------- */
1779
1805
  /*------------------------------------------------------------------------*/
1780
- const style$6 = `
1806
+ const style$5 = `
1781
1807
  .PopSuccessMark-outer-container {
1782
1808
  position: relative;
1783
1809
  display: inline-block;
@@ -1882,7 +1908,7 @@ const PopSuccessMark = (props) => {
1882
1908
  width: `${sizeRem}rem`,
1883
1909
  height: `${sizeRem}rem`,
1884
1910
  }, "aria-label": "checkmark indicating success" },
1885
- React__default["default"].createElement("style", null, style$6),
1911
+ React__default["default"].createElement("style", null, style$5),
1886
1912
  React__default["default"].createElement("div", { className: `PopSuccessMark-check-stroke-1 bg-${checkVariant}`, style: {
1887
1913
  borderRadius: `${sizeRem / 5}rem`,
1888
1914
  } }),
@@ -1898,7 +1924,7 @@ const PopSuccessMark = (props) => {
1898
1924
  /*------------------------------------------------------------------------*/
1899
1925
  /* -------------------------------- Style ------------------------------- */
1900
1926
  /*------------------------------------------------------------------------*/
1901
- const style$5 = `
1927
+ const style$4 = `
1902
1928
  .PopFailureMark-outer-container {
1903
1929
  position: relative;
1904
1930
  display: inline-block;
@@ -2002,7 +2028,7 @@ const PopFailureMark = (props) => {
2002
2028
  width: `${sizeRem}rem`,
2003
2029
  height: `${sizeRem}rem`,
2004
2030
  }, "aria-label": "mark indicating failure" },
2005
- React__default["default"].createElement("style", null, style$5),
2031
+ React__default["default"].createElement("style", null, style$4),
2006
2032
  React__default["default"].createElement("div", { className: `PopFailureMark-x-stroke-1 bg-${xVariant}`, style: {
2007
2033
  borderRadius: `${sizeRem / 5}rem`,
2008
2034
  } }),
@@ -2018,7 +2044,7 @@ const PopFailureMark = (props) => {
2018
2044
  /*------------------------------------------------------------------------*/
2019
2045
  /* -------------------------------- Style ------------------------------- */
2020
2046
  /*------------------------------------------------------------------------*/
2021
- const style$4 = `
2047
+ const style$3 = `
2022
2048
  .PopPendingMark-outer-container {
2023
2049
  position: relative;
2024
2050
  display: inline-block;
@@ -2091,7 +2117,7 @@ const PopPendingMark = (props) => {
2091
2117
  width: `${sizeRem}rem`,
2092
2118
  height: `${sizeRem}rem`,
2093
2119
  }, "aria-label": "mark indicating that the item is pending" },
2094
- React__default["default"].createElement("style", null, style$4),
2120
+ React__default["default"].createElement("style", null, style$3),
2095
2121
  React__default["default"].createElement("div", null,
2096
2122
  React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, { icon: freeSolidSvgIcons.faHourglass, className: `PopPendingMark-hourglass text-${hourglassVariant}`, style: {
2097
2123
  fontSize: `${sizeRem * 0.6}rem`,
@@ -2104,27 +2130,27 @@ const PopPendingMark = (props) => {
2104
2130
  */
2105
2131
  /* ------------- Actions ------------ */
2106
2132
  // Types of actions
2107
- var ActionType$9;
2133
+ var ActionType$8;
2108
2134
  (function (ActionType) {
2109
2135
  // Indicate that the text was recently copied
2110
2136
  ActionType["IndicateRecentlyCopied"] = "indicate-recently-copied";
2111
2137
  // Clear the status
2112
2138
  ActionType["ClearRecentlyCopiedStatus"] = "clear-recently-copied-status";
2113
- })(ActionType$9 || (ActionType$9 = {}));
2139
+ })(ActionType$8 || (ActionType$8 = {}));
2114
2140
  /**
2115
2141
  * Reducer that executes actions
2116
2142
  * @author Gabe Abrams
2117
2143
  * @param state current state
2118
2144
  * @param action action to execute
2119
2145
  */
2120
- const reducer$a = (state, action) => {
2146
+ const reducer$9 = (state, action) => {
2121
2147
  switch (action.type) {
2122
- case ActionType$9.IndicateRecentlyCopied: {
2148
+ case ActionType$8.IndicateRecentlyCopied: {
2123
2149
  return {
2124
2150
  recentlyCopied: true,
2125
2151
  };
2126
2152
  }
2127
- case ActionType$9.ClearRecentlyCopiedStatus: {
2153
+ case ActionType$8.ClearRecentlyCopiedStatus: {
2128
2154
  return {
2129
2155
  recentlyCopied: false,
2130
2156
  };
@@ -2150,7 +2176,7 @@ const CopiableBox = (props) => {
2150
2176
  recentlyCopied: false,
2151
2177
  };
2152
2178
  // Initialize state
2153
- const [state, dispatch] = React.useReducer(reducer$a, initialState);
2179
+ const [state, dispatch] = React.useReducer(reducer$9, initialState);
2154
2180
  // Destructure common state
2155
2181
  const { recentlyCopied, } = state;
2156
2182
  /*------------------------------------------------------------------------*/
@@ -2170,13 +2196,13 @@ const CopiableBox = (props) => {
2170
2196
  }
2171
2197
  // Show copied notice
2172
2198
  dispatch({
2173
- type: ActionType$9.IndicateRecentlyCopied,
2199
+ type: ActionType$8.IndicateRecentlyCopied,
2174
2200
  });
2175
2201
  // Wait a moment
2176
2202
  yield waitMs(4000);
2177
2203
  // Hide copied notice
2178
2204
  dispatch({
2179
- type: ActionType$9.ClearRecentlyCopiedStatus,
2205
+ type: ActionType$8.ClearRecentlyCopiedStatus,
2180
2206
  });
2181
2207
  });
2182
2208
  /*------------------------------------------------------------------------*/
@@ -2232,20 +2258,20 @@ const CopiableBox = (props) => {
2232
2258
  */
2233
2259
  /* ------------- Actions ------------ */
2234
2260
  // Types of actions
2235
- var ActionType$8;
2261
+ var ActionType$7;
2236
2262
  (function (ActionType) {
2237
2263
  // Toggle whether a child are being shown
2238
2264
  ActionType["ToggleChild"] = "toggle-child";
2239
- })(ActionType$8 || (ActionType$8 = {}));
2265
+ })(ActionType$7 || (ActionType$7 = {}));
2240
2266
  /**
2241
2267
  * Reducer that executes actions
2242
2268
  * @author Gabe Abrams
2243
2269
  * @param state current state
2244
2270
  * @param action action to execute
2245
2271
  */
2246
- const reducer$9 = (state, action) => {
2272
+ const reducer$8 = (state, action) => {
2247
2273
  switch (action.type) {
2248
- case ActionType$8.ToggleChild: {
2274
+ case ActionType$7.ToggleChild: {
2249
2275
  return Object.assign(Object.assign({}, state), { childExpanded: Object.assign(Object.assign({}, state.childExpanded), { [String(action.id)]: !state.childExpanded[String(action.id)] }) });
2250
2276
  }
2251
2277
  default: {
@@ -2274,7 +2300,7 @@ const NestableItemList = (props) => {
2274
2300
  childExpanded: initChildExpanded,
2275
2301
  };
2276
2302
  // Initialize state
2277
- const [state, dispatch] = React.useReducer(reducer$9, initialState);
2303
+ const [state, dispatch] = React.useReducer(reducer$8, initialState);
2278
2304
  // Destructure common state
2279
2305
  const { childExpanded, } = state;
2280
2306
  /*------------------------------------------------------------------------*/
@@ -2364,7 +2390,7 @@ const NestableItemList = (props) => {
2364
2390
  backgroundColor: 'transparent',
2365
2391
  }, type: "button", onClick: () => {
2366
2392
  dispatch({
2367
- type: ActionType$8.ToggleChild,
2393
+ type: ActionType$7.ToggleChild,
2368
2394
  id: item.id,
2369
2395
  });
2370
2396
  }, "aria-label": `${childExpanded[item.id] ? 'Hide' : 'Show'} items in ${item.name}` },
@@ -2648,7 +2674,7 @@ var SortType;
2648
2674
  })(SortType || (SortType = {}));
2649
2675
  /* ------------- Actions ------------ */
2650
2676
  // Types of actions
2651
- var ActionType$7;
2677
+ var ActionType$6;
2652
2678
  (function (ActionType) {
2653
2679
  // Toggle sort column param
2654
2680
  ActionType["ToggleSortColumn"] = "toggle-sort-column";
@@ -2660,16 +2686,16 @@ var ActionType$7;
2660
2686
  ActionType["ShowAllColumns"] = "show-all-columns";
2661
2687
  // Hide all columns
2662
2688
  ActionType["HideAllColumns"] = "hide-all-columns";
2663
- })(ActionType$7 || (ActionType$7 = {}));
2689
+ })(ActionType$6 || (ActionType$6 = {}));
2664
2690
  /**
2665
2691
  * Reducer that executes actions
2666
2692
  * @author Gabe Abrams
2667
2693
  * @param state current state
2668
2694
  * @param action action to execute
2669
2695
  */
2670
- const reducer$8 = (state, action) => {
2696
+ const reducer$7 = (state, action) => {
2671
2697
  switch (action.type) {
2672
- case ActionType$7.ToggleSortColumn: {
2698
+ case ActionType$6.ToggleSortColumn: {
2673
2699
  if (action.param !== state.sortColumnParam) {
2674
2700
  // Different column param
2675
2701
  return Object.assign(Object.assign({}, state), { sortColumnParam: action.param, sortType: SortType.Ascending });
@@ -2681,22 +2707,22 @@ const reducer$8 = (state, action) => {
2681
2707
  // Stop sorting by column
2682
2708
  return Object.assign(Object.assign({}, state), { sortColumnParam: undefined, sortType: SortType.Ascending });
2683
2709
  }
2684
- case ActionType$7.UpdateColumnVisibility: {
2710
+ case ActionType$6.UpdateColumnVisibility: {
2685
2711
  const { columnVisibilityMap } = state;
2686
2712
  columnVisibilityMap[action.param] = action.visible;
2687
2713
  return Object.assign(Object.assign({}, state), { columnVisibilityMap });
2688
2714
  }
2689
- case ActionType$7.ToggleColVisCusModalVisibility: {
2715
+ case ActionType$6.ToggleColVisCusModalVisibility: {
2690
2716
  return Object.assign(Object.assign({}, state), { columnVisibilityCustomizationModalVisible: !state.columnVisibilityCustomizationModalVisible });
2691
2717
  }
2692
- case ActionType$7.ShowAllColumns: {
2718
+ case ActionType$6.ShowAllColumns: {
2693
2719
  const { columnVisibilityMap } = state;
2694
2720
  Object.keys(columnVisibilityMap).forEach((param) => {
2695
2721
  columnVisibilityMap[param] = true;
2696
2722
  });
2697
2723
  return Object.assign(Object.assign({}, state), { columnVisibilityMap });
2698
2724
  }
2699
- case ActionType$7.HideAllColumns: {
2725
+ case ActionType$6.HideAllColumns: {
2700
2726
  const { columnVisibilityMap } = state;
2701
2727
  Object.keys(columnVisibilityMap).forEach((param) => {
2702
2728
  columnVisibilityMap[param] = false;
@@ -2743,7 +2769,7 @@ const IntelliTable = (props) => {
2743
2769
  columnVisibilityCustomizationModalVisible: false,
2744
2770
  };
2745
2771
  // Initialize state
2746
- const [state, dispatch] = React.useReducer(reducer$8, initialState);
2772
+ const [state, dispatch] = React.useReducer(reducer$7, initialState);
2747
2773
  // Destructure common state
2748
2774
  const { sortColumnParam, sortType, columnVisibilityMap, columnVisibilityCustomizationModalVisible, } = state;
2749
2775
  /*------------------------------------------------------------------------*/
@@ -2766,13 +2792,13 @@ const IntelliTable = (props) => {
2766
2792
  return alert('Choose at least one column', 'To continue, you have to choose at least one column to show');
2767
2793
  }
2768
2794
  dispatch({
2769
- type: ActionType$7.ToggleColVisCusModalVisibility,
2795
+ type: ActionType$6.ToggleColVisCusModalVisibility,
2770
2796
  });
2771
2797
  }, okayVariant: Variant$1.Light },
2772
2798
  columns.map((column) => {
2773
2799
  return (React__default["default"].createElement(CheckboxButton, { key: column.param, id: `IntelliTable-${id}-toggle-visibility-${column.param}`, className: "mb-2", text: column.title, onChanged: (checked) => {
2774
2800
  dispatch({
2775
- type: ActionType$7.UpdateColumnVisibility,
2801
+ type: ActionType$6.UpdateColumnVisibility,
2776
2802
  param: column.param,
2777
2803
  visible: checked,
2778
2804
  });
@@ -2781,12 +2807,12 @@ const IntelliTable = (props) => {
2781
2807
  React__default["default"].createElement("div", { className: "mt-3" }, "Or you can:"),
2782
2808
  React__default["default"].createElement("button", { type: "button", id: `IntelliTable-${id}-select-all-columns`, className: "btn btn-secondary me-2", "aria-label": `show all columns in the ${title} table`, onClick: () => {
2783
2809
  dispatch({
2784
- type: ActionType$7.ShowAllColumns,
2810
+ type: ActionType$6.ShowAllColumns,
2785
2811
  });
2786
2812
  } }, "Select All"),
2787
2813
  React__default["default"].createElement("button", { type: "button", id: `IntelliTable-${id}-select-none-columns`, className: "btn btn-secondary", "aria-label": `hide all columns in the ${title} table`, onClick: () => {
2788
2814
  dispatch({
2789
- type: ActionType$7.HideAllColumns,
2815
+ type: ActionType$6.HideAllColumns,
2790
2816
  });
2791
2817
  } }, "Deselect All")));
2792
2818
  }
@@ -2837,7 +2863,7 @@ const IntelliTable = (props) => {
2837
2863
  React__default["default"].createElement("div", null,
2838
2864
  React__default["default"].createElement("button", { type: "button", id: `IntelliTable-${id}-sort-by-${column.param}-button`, className: `btn btn-${sortingByThisColumn ? 'light' : 'secondary'} btn-sm ms-1 ps-1 pe-1 pt-0 pb-0`, "aria-label": sortButtonAriaLabel, onClick: () => {
2839
2865
  dispatch({
2840
- type: ActionType$7.ToggleSortColumn,
2866
+ type: ActionType$6.ToggleSortColumn,
2841
2867
  param: column.param,
2842
2868
  });
2843
2869
  } },
@@ -3026,7 +3052,7 @@ const IntelliTable = (props) => {
3026
3052
  React__default["default"].createElement(CSVDownloadButton, { "aria-label": `download data as csv for ${title}`, id: `IntelliTable-${id}-download-as-csv`, filename: filename, csv: csv }),
3027
3053
  React__default["default"].createElement("button", { type: "button", className: "btn btn-secondary ms-2", "aria-label": `show panel for customizing which columns show in table ${title}`, id: `IntelliTable-${id}-show-column-customization-modal`, onClick: () => {
3028
3054
  dispatch({
3029
- type: ActionType$7.ToggleColVisCusModalVisibility,
3055
+ type: ActionType$6.ToggleColVisCusModalVisibility,
3030
3056
  });
3031
3057
  } },
3032
3058
  "Show/Hide Cols",
@@ -3058,7 +3084,7 @@ var FilterDrawer;
3058
3084
  /*------------------------------------------------------------------------*/
3059
3085
  /* -------------------------------- Style ------------------------------- */
3060
3086
  /*------------------------------------------------------------------------*/
3061
- const style$3 = `
3087
+ const style$2 = `
3062
3088
  .LogReviewer-outer-container {
3063
3089
  /* Full Screen */
3064
3090
  display: inline-block;
@@ -3392,7 +3418,7 @@ const genHumanReadableName = (machineReadableName) => {
3392
3418
  };
3393
3419
  /* ------------- Actions ------------ */
3394
3420
  // Types of actions
3395
- var ActionType$6;
3421
+ var ActionType$5;
3396
3422
  (function (ActionType) {
3397
3423
  // Show the loading bar
3398
3424
  ActionType["StartLoading"] = "start-loading";
@@ -3414,45 +3440,45 @@ var ActionType$6;
3414
3440
  ActionType["UpdateActionErrorFilterState"] = "update-action-error-filter-state";
3415
3441
  // Update the advanced filter state
3416
3442
  ActionType["UpdateAdvancedFilterState"] = "update-advanced-filter-state";
3417
- })(ActionType$6 || (ActionType$6 = {}));
3443
+ })(ActionType$5 || (ActionType$5 = {}));
3418
3444
  /**
3419
3445
  * Reducer that executes actions
3420
3446
  * @author Gabe Abrams
3421
3447
  * @param state current state
3422
3448
  * @param action action to execute
3423
3449
  */
3424
- const reducer$7 = (state, action) => {
3450
+ const reducer$6 = (state, action) => {
3425
3451
  switch (action.type) {
3426
- case ActionType$6.StartLoading: {
3452
+ case ActionType$5.StartLoading: {
3427
3453
  return Object.assign(Object.assign({}, state), { loading: true });
3428
3454
  }
3429
- case ActionType$6.FinishLoading: {
3455
+ case ActionType$5.FinishLoading: {
3430
3456
  return Object.assign(Object.assign({}, state), { loading: false, logMap: action.logMap });
3431
3457
  }
3432
- case ActionType$6.ToggleFilterDrawer: {
3458
+ case ActionType$5.ToggleFilterDrawer: {
3433
3459
  return Object.assign(Object.assign({}, state), { expandedFilterDrawer: (state.expandedFilterDrawer === action.filterDrawer
3434
3460
  ? undefined // hide
3435
3461
  : action.filterDrawer) });
3436
3462
  }
3437
- case ActionType$6.HideFilterDrawer: {
3463
+ case ActionType$5.HideFilterDrawer: {
3438
3464
  return Object.assign(Object.assign({}, state), { expandedFilterDrawer: undefined });
3439
3465
  }
3440
- case ActionType$6.ResetFilters: {
3466
+ case ActionType$5.ResetFilters: {
3441
3467
  return Object.assign(Object.assign({}, state), { dateFilterState: action.initDateFilterState, contextFilterState: action.initContextFilterState, tagFilterState: action.initTagFilterState, actionErrorFilterState: action.initActionErrorFilterState, advancedFilterState: action.initAdvancedFilterState });
3442
3468
  }
3443
- case ActionType$6.UpdateDateFilterState: {
3469
+ case ActionType$5.UpdateDateFilterState: {
3444
3470
  return Object.assign(Object.assign({}, state), { dateFilterState: action.dateFilterState });
3445
3471
  }
3446
- case ActionType$6.UpdateContextFilterState: {
3472
+ case ActionType$5.UpdateContextFilterState: {
3447
3473
  return Object.assign(Object.assign({}, state), { contextFilterState: action.contextFilterState });
3448
3474
  }
3449
- case ActionType$6.UpdateTagFilterState: {
3475
+ case ActionType$5.UpdateTagFilterState: {
3450
3476
  return Object.assign(Object.assign({}, state), { tagFilterState: action.tagFilterState });
3451
3477
  }
3452
- case ActionType$6.UpdateActionErrorFilterState: {
3478
+ case ActionType$5.UpdateActionErrorFilterState: {
3453
3479
  return Object.assign(Object.assign({}, state), { actionErrorFilterState: action.actionErrorFilterState });
3454
3480
  }
3455
- case ActionType$6.UpdateAdvancedFilterState: {
3481
+ case ActionType$5.UpdateAdvancedFilterState: {
3456
3482
  return Object.assign(Object.assign({}, state), { advancedFilterState: action.advancedFilterState });
3457
3483
  }
3458
3484
  default: {
@@ -3581,7 +3607,7 @@ const LogReviewer = (props) => {
3581
3607
  advancedFilterState: initAdvancedFilterState,
3582
3608
  };
3583
3609
  // Initialize state
3584
- const [state, dispatch] = React.useReducer(reducer$7, initialState);
3610
+ const [state, dispatch] = React.useReducer(reducer$6, initialState);
3585
3611
  // Destructure common state
3586
3612
  const { loading, logMap, expandedFilterDrawer, dateFilterState, contextFilterState, tagFilterState, actionErrorFilterState, advancedFilterState, } = state;
3587
3613
  /*------------------------------------------------------------------------*/
@@ -3631,7 +3657,7 @@ const LogReviewer = (props) => {
3631
3657
  const handleDateRangeUpdated = (newDateFilterState) => __awaiter(void 0, void 0, void 0, function* () {
3632
3658
  // Update state
3633
3659
  dispatch({
3634
- type: ActionType$6.UpdateDateFilterState,
3660
+ type: ActionType$5.UpdateDateFilterState,
3635
3661
  dateFilterState: newDateFilterState,
3636
3662
  });
3637
3663
  // Check which year/month combos we need to load
@@ -3642,7 +3668,7 @@ const LogReviewer = (props) => {
3642
3668
  }
3643
3669
  // Start loading
3644
3670
  dispatch({
3645
- type: ActionType$6.StartLoading,
3671
+ type: ActionType$5.StartLoading,
3646
3672
  });
3647
3673
  // Load required months
3648
3674
  try {
@@ -3666,7 +3692,7 @@ const LogReviewer = (props) => {
3666
3692
  }
3667
3693
  // Finish loading
3668
3694
  dispatch({
3669
- type: ActionType$6.FinishLoading,
3695
+ type: ActionType$5.FinishLoading,
3670
3696
  logMap,
3671
3697
  });
3672
3698
  });
@@ -3705,7 +3731,7 @@ const LogReviewer = (props) => {
3705
3731
  React__default["default"].createElement("div", { className: "LogReviewer-filter-toggle-buttons alert alert-secondary p-2 m-0" },
3706
3732
  React__default["default"].createElement("button", { type: "button", id: "LogReviewer-toggle-date-filter-drawer", className: `btn btn-${FilterDrawer.Date === expandedFilterDrawer ? 'warning' : 'light'} me-2`, "aria-label": "toggle date filter drawer", onClick: () => {
3707
3733
  dispatch({
3708
- type: ActionType$6.ToggleFilterDrawer,
3734
+ type: ActionType$5.ToggleFilterDrawer,
3709
3735
  filterDrawer: FilterDrawer.Date,
3710
3736
  });
3711
3737
  } },
@@ -3713,7 +3739,7 @@ const LogReviewer = (props) => {
3713
3739
  "Date"),
3714
3740
  React__default["default"].createElement("button", { type: "button", id: "LogReviewer-toggle-context-filter-drawer", className: `btn btn-${FilterDrawer.Context === expandedFilterDrawer ? 'warning' : 'light'} me-2`, "aria-label": "toggle context filter drawer", onClick: () => {
3715
3741
  dispatch({
3716
- type: ActionType$6.ToggleFilterDrawer,
3742
+ type: ActionType$5.ToggleFilterDrawer,
3717
3743
  filterDrawer: FilterDrawer.Context,
3718
3744
  });
3719
3745
  } },
@@ -3721,7 +3747,7 @@ const LogReviewer = (props) => {
3721
3747
  "Context"),
3722
3748
  (LogMetadata.Tag && Object.keys(LogMetadata.Tag).length > 0) && (React__default["default"].createElement("button", { type: "button", id: "LogReviewer-toggle-tag-filter-drawer", className: `btn btn-${FilterDrawer.Tag === expandedFilterDrawer ? 'warning' : 'light'} me-2`, "aria-label": "toggle tag filter drawer", onClick: () => {
3723
3749
  dispatch({
3724
- type: ActionType$6.ToggleFilterDrawer,
3750
+ type: ActionType$5.ToggleFilterDrawer,
3725
3751
  filterDrawer: FilterDrawer.Tag,
3726
3752
  });
3727
3753
  } },
@@ -3729,7 +3755,7 @@ const LogReviewer = (props) => {
3729
3755
  "Tag")),
3730
3756
  React__default["default"].createElement("button", { type: "button", id: "LogReviewer-toggle-action-filter-drawer", className: `btn btn-${FilterDrawer.Action === expandedFilterDrawer ? 'warning' : 'light'} me-2`, "aria-label": "toggle action and error filter drawer", onClick: () => {
3731
3757
  dispatch({
3732
- type: ActionType$6.ToggleFilterDrawer,
3758
+ type: ActionType$5.ToggleFilterDrawer,
3733
3759
  filterDrawer: FilterDrawer.Action,
3734
3760
  });
3735
3761
  } },
@@ -3737,7 +3763,7 @@ const LogReviewer = (props) => {
3737
3763
  "Action"),
3738
3764
  React__default["default"].createElement("button", { type: "button", id: "LogReviewer-toggle-advanced-filter-drawer", className: `btn btn-${FilterDrawer.Advanced === expandedFilterDrawer ? 'warning' : 'light'} me-2`, "aria-label": "toggle advanced filter drawer", onClick: () => {
3739
3765
  dispatch({
3740
- type: ActionType$6.ToggleFilterDrawer,
3766
+ type: ActionType$5.ToggleFilterDrawer,
3741
3767
  filterDrawer: FilterDrawer.Advanced,
3742
3768
  });
3743
3769
  } },
@@ -3745,7 +3771,7 @@ const LogReviewer = (props) => {
3745
3771
  "Advanced"),
3746
3772
  React__default["default"].createElement("button", { type: "button", id: "LogReviewer-reset-filters-button", className: "btn btn-light", "aria-label": "reset filters", onClick: () => {
3747
3773
  dispatch({
3748
- type: ActionType$6.ResetFilters,
3774
+ type: ActionType$5.ResetFilters,
3749
3775
  initActionErrorFilterState,
3750
3776
  initAdvancedFilterState,
3751
3777
  initContextFilterState,
@@ -3867,7 +3893,7 @@ const LogReviewer = (props) => {
3867
3893
  }
3868
3894
  });
3869
3895
  dispatch({
3870
- type: ActionType$6.UpdateContextFilterState,
3896
+ type: ActionType$5.UpdateContextFilterState,
3871
3897
  contextFilterState,
3872
3898
  });
3873
3899
  } }));
@@ -3882,7 +3908,7 @@ const LogReviewer = (props) => {
3882
3908
  return (React__default["default"].createElement(CheckboxButton, { key: tag, id: `LogReviewer-tag-${tag}-checkbox`, text: description, ariaLabel: `require that logs be tagged with "${description}" or any other selected tag`, checked: tagFilterState[tag], onChanged: (checked) => {
3883
3909
  tagFilterState[tag] = checked;
3884
3910
  dispatch({
3885
- type: ActionType$6.UpdateTagFilterState,
3911
+ type: ActionType$5.UpdateTagFilterState,
3886
3912
  tagFilterState,
3887
3913
  });
3888
3914
  } }));
@@ -3895,21 +3921,21 @@ const LogReviewer = (props) => {
3895
3921
  React__default["default"].createElement(RadioButton, { id: "LogReviewer-type-all", text: "All Logs", onSelected: () => {
3896
3922
  actionErrorFilterState.type = undefined;
3897
3923
  dispatch({
3898
- type: ActionType$6.UpdateActionErrorFilterState,
3924
+ type: ActionType$5.UpdateActionErrorFilterState,
3899
3925
  actionErrorFilterState,
3900
3926
  });
3901
3927
  }, ariaLabel: "show logs of all types", selected: actionErrorFilterState.type === undefined }),
3902
3928
  React__default["default"].createElement(RadioButton, { id: "LogReviewer-type-action-only", text: "Action Logs Only", onSelected: () => {
3903
3929
  actionErrorFilterState.type = LogType$1.Action;
3904
3930
  dispatch({
3905
- type: ActionType$6.UpdateActionErrorFilterState,
3931
+ type: ActionType$5.UpdateActionErrorFilterState,
3906
3932
  actionErrorFilterState,
3907
3933
  });
3908
3934
  }, ariaLabel: "only show action logs", selected: actionErrorFilterState.type === LogType$1.Action }),
3909
3935
  React__default["default"].createElement(RadioButton, { id: "LogReviewer-type-error-only", text: "Action Error Only", onSelected: () => {
3910
3936
  actionErrorFilterState.type = LogType$1.Error;
3911
3937
  dispatch({
3912
- type: ActionType$6.UpdateActionErrorFilterState,
3938
+ type: ActionType$5.UpdateActionErrorFilterState,
3913
3939
  actionErrorFilterState,
3914
3940
  });
3915
3941
  }, ariaLabel: "only show error logs", selected: actionErrorFilterState.type === LogType$1.Error, noMarginOnRight: true })),
@@ -3921,7 +3947,7 @@ const LogReviewer = (props) => {
3921
3947
  return (React__default["default"].createElement(CheckboxButton, { key: action, id: `LogReviewer-action-${action}-checkbox`, text: description, ariaLabel: `include logs with action type "${description}" in results`, noMarginOnRight: true, checked: actionErrorFilterState.action[action], onChanged: (checked) => {
3922
3948
  actionErrorFilterState.action[action] = checked;
3923
3949
  dispatch({
3924
- type: ActionType$6.UpdateActionErrorFilterState,
3950
+ type: ActionType$5.UpdateActionErrorFilterState,
3925
3951
  actionErrorFilterState,
3926
3952
  });
3927
3953
  } }));
@@ -3932,7 +3958,7 @@ const LogReviewer = (props) => {
3932
3958
  return (React__default["default"].createElement(CheckboxButton, { key: target, id: `LogReviewer-target-${target}-checkbox`, text: description, ariaLabel: `include logs with target "${description}" in results`, checked: actionErrorFilterState.target[target], noMarginOnRight: true, onChanged: (checked) => {
3933
3959
  actionErrorFilterState.target[target] = checked;
3934
3960
  dispatch({
3935
- type: ActionType$6.UpdateActionErrorFilterState,
3961
+ type: ActionType$5.UpdateActionErrorFilterState,
3936
3962
  actionErrorFilterState,
3937
3963
  });
3938
3964
  } }));
@@ -3944,7 +3970,7 @@ const LogReviewer = (props) => {
3944
3970
  React__default["default"].createElement("input", { type: "text", className: "form-control", "aria-label": "query for error message", value: actionErrorFilterState.errorMessage, placeholder: "e.g. undefined is not a function", onChange: (e) => {
3945
3971
  actionErrorFilterState.errorMessage = e.target.value;
3946
3972
  dispatch({
3947
- type: ActionType$6.UpdateActionErrorFilterState,
3973
+ type: ActionType$5.UpdateActionErrorFilterState,
3948
3974
  actionErrorFilterState,
3949
3975
  });
3950
3976
  } })),
@@ -3955,7 +3981,7 @@ const LogReviewer = (props) => {
3955
3981
  .trim()
3956
3982
  .toUpperCase());
3957
3983
  dispatch({
3958
- type: ActionType$6.UpdateActionErrorFilterState,
3984
+ type: ActionType$5.UpdateActionErrorFilterState,
3959
3985
  actionErrorFilterState,
3960
3986
  });
3961
3987
  } }))))));
@@ -3969,7 +3995,7 @@ const LogReviewer = (props) => {
3969
3995
  React__default["default"].createElement("input", { type: "text", className: "form-control", "aria-label": "query for user first name", value: advancedFilterState.userFirstName, placeholder: "e.g. Divardo", onChange: (e) => {
3970
3996
  advancedFilterState.userFirstName = e.target.value;
3971
3997
  dispatch({
3972
- type: ActionType$6.UpdateAdvancedFilterState,
3998
+ type: ActionType$5.UpdateAdvancedFilterState,
3973
3999
  advancedFilterState,
3974
4000
  });
3975
4001
  } })),
@@ -3978,7 +4004,7 @@ const LogReviewer = (props) => {
3978
4004
  React__default["default"].createElement("input", { type: "text", className: "form-control", "aria-label": "query for user last name", value: advancedFilterState.userLastName, placeholder: "e.g. Calicci", onChange: (e) => {
3979
4005
  advancedFilterState.userLastName = e.target.value;
3980
4006
  dispatch({
3981
- type: ActionType$6.UpdateAdvancedFilterState,
4007
+ type: ActionType$5.UpdateAdvancedFilterState,
3982
4008
  advancedFilterState,
3983
4009
  });
3984
4010
  } })),
@@ -3988,7 +4014,7 @@ const LogReviewer = (props) => {
3988
4014
  advancedFilterState.userEmail = ((e.target.value)
3989
4015
  .trim());
3990
4016
  dispatch({
3991
- type: ActionType$6.UpdateAdvancedFilterState,
4017
+ type: ActionType$5.UpdateAdvancedFilterState,
3992
4018
  advancedFilterState,
3993
4019
  });
3994
4020
  } })),
@@ -4002,7 +4028,7 @@ const LogReviewer = (props) => {
4002
4028
  .trim());
4003
4029
  }
4004
4030
  dispatch({
4005
- type: ActionType$6.UpdateAdvancedFilterState,
4031
+ type: ActionType$5.UpdateAdvancedFilterState,
4006
4032
  advancedFilterState,
4007
4033
  });
4008
4034
  } })),
@@ -4010,21 +4036,21 @@ const LogReviewer = (props) => {
4010
4036
  React__default["default"].createElement(CheckboxButton, { text: "Students", onChanged: (checked) => {
4011
4037
  advancedFilterState.includeLearners = checked;
4012
4038
  dispatch({
4013
- type: ActionType$6.UpdateAdvancedFilterState,
4039
+ type: ActionType$5.UpdateAdvancedFilterState,
4014
4040
  advancedFilterState,
4015
4041
  });
4016
4042
  }, checked: advancedFilterState.includeLearners, ariaLabel: "show logs from students" }),
4017
4043
  React__default["default"].createElement(CheckboxButton, { text: "Teaching Team Members", onChanged: (checked) => {
4018
4044
  advancedFilterState.includeTTMs = checked;
4019
4045
  dispatch({
4020
- type: ActionType$6.UpdateAdvancedFilterState,
4046
+ type: ActionType$5.UpdateAdvancedFilterState,
4021
4047
  advancedFilterState,
4022
4048
  });
4023
4049
  }, checked: advancedFilterState.includeTTMs, ariaLabel: "show logs from teaching team members" }),
4024
4050
  React__default["default"].createElement(CheckboxButton, { text: "Admins", onChanged: (checked) => {
4025
4051
  advancedFilterState.includeAdmins = checked;
4026
4052
  dispatch({
4027
- type: ActionType$6.UpdateAdvancedFilterState,
4053
+ type: ActionType$5.UpdateAdvancedFilterState,
4028
4054
  advancedFilterState,
4029
4055
  });
4030
4056
  }, checked: advancedFilterState.includeAdmins, ariaLabel: "show logs from admins" }))),
@@ -4034,7 +4060,7 @@ const LogReviewer = (props) => {
4034
4060
  React__default["default"].createElement("input", { type: "text", className: "form-control", "aria-label": "query for course name", value: advancedFilterState.courseName, placeholder: "e.g. GLC 200", onChange: (e) => {
4035
4061
  advancedFilterState.courseName = e.target.value;
4036
4062
  dispatch({
4037
- type: ActionType$6.UpdateAdvancedFilterState,
4063
+ type: ActionType$5.UpdateAdvancedFilterState,
4038
4064
  advancedFilterState,
4039
4065
  });
4040
4066
  } })),
@@ -4048,7 +4074,7 @@ const LogReviewer = (props) => {
4048
4074
  .trim());
4049
4075
  }
4050
4076
  dispatch({
4051
- type: ActionType$6.UpdateAdvancedFilterState,
4077
+ type: ActionType$5.UpdateAdvancedFilterState,
4052
4078
  advancedFilterState,
4053
4079
  });
4054
4080
  } }))),
@@ -4057,21 +4083,21 @@ const LogReviewer = (props) => {
4057
4083
  React__default["default"].createElement(RadioButton, { text: "All Devices", ariaLabel: "show logs from all devices", selected: advancedFilterState.isMobile === undefined, onSelected: () => {
4058
4084
  advancedFilterState.isMobile = undefined;
4059
4085
  dispatch({
4060
- type: ActionType$6.UpdateAdvancedFilterState,
4086
+ type: ActionType$5.UpdateAdvancedFilterState,
4061
4087
  advancedFilterState,
4062
4088
  });
4063
4089
  } }),
4064
4090
  React__default["default"].createElement(RadioButton, { text: "Mobile Only", ariaLabel: "show logs from mobile devices", selected: advancedFilterState.isMobile === true, onSelected: () => {
4065
4091
  advancedFilterState.isMobile = true;
4066
4092
  dispatch({
4067
- type: ActionType$6.UpdateAdvancedFilterState,
4093
+ type: ActionType$5.UpdateAdvancedFilterState,
4068
4094
  advancedFilterState,
4069
4095
  });
4070
4096
  } }),
4071
4097
  React__default["default"].createElement(RadioButton, { text: "Desktop Only", ariaLabel: "show logs from desktop devices", selected: advancedFilterState.isMobile === false, onSelected: () => {
4072
4098
  advancedFilterState.isMobile = false;
4073
4099
  dispatch({
4074
- type: ActionType$6.UpdateAdvancedFilterState,
4100
+ type: ActionType$5.UpdateAdvancedFilterState,
4075
4101
  advancedFilterState,
4076
4102
  });
4077
4103
  }, noMarginOnRight: true }))),
@@ -4080,21 +4106,21 @@ const LogReviewer = (props) => {
4080
4106
  React__default["default"].createElement(RadioButton, { text: "Both", ariaLabel: "show logs from all sources", selected: advancedFilterState.source === undefined, onSelected: () => {
4081
4107
  advancedFilterState.source = undefined;
4082
4108
  dispatch({
4083
- type: ActionType$6.UpdateAdvancedFilterState,
4109
+ type: ActionType$5.UpdateAdvancedFilterState,
4084
4110
  advancedFilterState,
4085
4111
  });
4086
4112
  } }),
4087
4113
  React__default["default"].createElement(RadioButton, { text: "Client Only", ariaLabel: "show logs from client source", selected: advancedFilterState.source === LogSource$1.Client, onSelected: () => {
4088
4114
  advancedFilterState.source = LogSource$1.Client;
4089
4115
  dispatch({
4090
- type: ActionType$6.UpdateAdvancedFilterState,
4116
+ type: ActionType$5.UpdateAdvancedFilterState,
4091
4117
  advancedFilterState,
4092
4118
  });
4093
4119
  } }),
4094
4120
  React__default["default"].createElement(RadioButton, { text: "Server Only", ariaLabel: "show logs from server source", selected: advancedFilterState.source === LogSource$1.Server, onSelected: () => {
4095
4121
  advancedFilterState.source = LogSource$1.Server;
4096
4122
  dispatch({
4097
- type: ActionType$6.UpdateAdvancedFilterState,
4123
+ type: ActionType$5.UpdateAdvancedFilterState,
4098
4124
  advancedFilterState,
4099
4125
  });
4100
4126
  }, noMarginOnRight: true })),
@@ -4105,7 +4131,7 @@ const LogReviewer = (props) => {
4105
4131
  advancedFilterState.courseName = ((e.target.value)
4106
4132
  .trim());
4107
4133
  dispatch({
4108
- type: ActionType$6.UpdateAdvancedFilterState,
4134
+ type: ActionType$5.UpdateAdvancedFilterState,
4109
4135
  advancedFilterState,
4110
4136
  });
4111
4137
  } })),
@@ -4115,7 +4141,7 @@ const LogReviewer = (props) => {
4115
4141
  advancedFilterState.courseName = ((e.target.value)
4116
4142
  .trim());
4117
4143
  dispatch({
4118
- type: ActionType$6.UpdateAdvancedFilterState,
4144
+ type: ActionType$5.UpdateAdvancedFilterState,
4119
4145
  advancedFilterState,
4120
4146
  });
4121
4147
  } })))))));
@@ -4394,7 +4420,7 @@ const LogReviewer = (props) => {
4394
4420
  }
4395
4421
  /* ---------- Wrap in Modal --------- */
4396
4422
  return (React__default["default"].createElement("div", { className: "LogReviewer-outer-container" },
4397
- React__default["default"].createElement("style", null, style$3),
4423
+ React__default["default"].createElement("style", null, style$2),
4398
4424
  React__default["default"].createElement("div", { className: "LogReviewer-inner-container" },
4399
4425
  React__default["default"].createElement("div", { className: "LogReviewer-header" },
4400
4426
  React__default["default"].createElement("div", { className: "LogReviewer-header-title" },
@@ -39720,11 +39746,11 @@ var CreatableSelect$1 = CreatableSelect;
39720
39746
  */
39721
39747
  /* ------------- Actions ------------ */
39722
39748
  // Types of actions
39723
- var ActionType$5;
39749
+ var ActionType$4;
39724
39750
  (function (ActionType) {
39725
39751
  // Update the input value
39726
39752
  ActionType["SetInputValue"] = "SetInputValue";
39727
- })(ActionType$5 || (ActionType$5 = {}));
39753
+ })(ActionType$4 || (ActionType$4 = {}));
39728
39754
  /**
39729
39755
  * Reducer that executes actions
39730
39756
  * @author Yuen Ler Chow
@@ -39732,9 +39758,9 @@ var ActionType$5;
39732
39758
  * @param action action to execute
39733
39759
  * @returns updated state
39734
39760
  */
39735
- const reducer$6 = (state, action) => {
39761
+ const reducer$5 = (state, action) => {
39736
39762
  switch (action.type) {
39737
- case ActionType$5.SetInputValue: {
39763
+ case ActionType$4.SetInputValue: {
39738
39764
  return Object.assign(Object.assign({}, state), { inputValue: action.value });
39739
39765
  }
39740
39766
  default: {
@@ -39754,7 +39780,7 @@ const CreatableMultiselect = (props) => {
39754
39780
  inputValue: '',
39755
39781
  };
39756
39782
  // Initialize state
39757
- const [state, dispatch] = React.useReducer(reducer$6, initialState);
39783
+ const [state, dispatch] = React.useReducer(reducer$5, initialState);
39758
39784
  // Destructure common state
39759
39785
  const { inputValue } = state;
39760
39786
  /*------------------------------------------------------------------------*/
@@ -39831,7 +39857,7 @@ const CreatableMultiselect = (props) => {
39831
39857
  }
39832
39858
  // Reset text field to empty because the values have been added
39833
39859
  dispatch({
39834
- type: ActionType$5.SetInputValue,
39860
+ type: ActionType$4.SetInputValue,
39835
39861
  value: '',
39836
39862
  });
39837
39863
  };
@@ -39870,7 +39896,7 @@ const CreatableMultiselect = (props) => {
39870
39896
  else {
39871
39897
  // simply update the input value to the new input value
39872
39898
  dispatch({
39873
- type: ActionType$5.SetInputValue,
39899
+ type: ActionType$4.SetInputValue,
39874
39900
  value: newValue,
39875
39901
  });
39876
39902
  }
@@ -39915,20 +39941,20 @@ const CreatableMultiselect = (props) => {
39915
39941
  /*------------------------------------------------------------------------*/
39916
39942
  /* -------------------------------- Style ------------------------------- */
39917
39943
  /*------------------------------------------------------------------------*/
39918
- const style$2 = `
39944
+ const style$1 = `
39919
39945
  .AddOrEditDBEntry-input-label {
39920
39946
  min-width: 7rem;
39921
39947
  }
39922
39948
  `;
39923
39949
  /* ------------- Actions ------------ */
39924
39950
  // Types of actions
39925
- var ActionType$4;
39951
+ var ActionType$3;
39926
39952
  (function (ActionType) {
39927
39953
  // Update the DBEntry
39928
39954
  ActionType["UpdateDBEntry"] = "UpdateDBEntry";
39929
39955
  // Start the save spinner
39930
39956
  ActionType["StartSave"] = "StartSave";
39931
- })(ActionType$4 || (ActionType$4 = {}));
39957
+ })(ActionType$3 || (ActionType$3 = {}));
39932
39958
  /**
39933
39959
  * Reducer that executes actions
39934
39960
  * @author Yuen Ler Chow
@@ -39936,12 +39962,12 @@ var ActionType$4;
39936
39962
  * @param action action to execute
39937
39963
  * @returns updated state
39938
39964
  */
39939
- const reducer$5 = (state, action) => {
39965
+ const reducer$4 = (state, action) => {
39940
39966
  switch (action.type) {
39941
- case ActionType$4.UpdateDBEntry: {
39967
+ case ActionType$3.UpdateDBEntry: {
39942
39968
  return Object.assign(Object.assign({}, state), { entry: action.dbEntry });
39943
39969
  }
39944
- case ActionType$4.StartSave: {
39970
+ case ActionType$3.StartSave: {
39945
39971
  return Object.assign(Object.assign({}, state), { saving: true });
39946
39972
  }
39947
39973
  default: {
@@ -39966,7 +39992,7 @@ const AddOrEditDBEntry = (props) => {
39966
39992
  saving: false,
39967
39993
  };
39968
39994
  // Initialize state
39969
- const [state, dispatch] = React.useReducer(reducer$5, initialState);
39995
+ const [state, dispatch] = React.useReducer(reducer$4, initialState);
39970
39996
  // Destructure common state
39971
39997
  const { entry, saving, } = state;
39972
39998
  /*------------------------------------------------------------------------*/
@@ -39978,7 +40004,7 @@ const AddOrEditDBEntry = (props) => {
39978
40004
  */
39979
40005
  const save = () => __awaiter(void 0, void 0, void 0, function* () {
39980
40006
  // Start the save loading indicator
39981
- dispatch({ type: ActionType$4.StartSave });
40007
+ dispatch({ type: ActionType$3.StartSave });
39982
40008
  // add all default values to the entry
39983
40009
  entryFields.forEach((field) => {
39984
40010
  if (field.defaultValue && !entry[field.objectKey]) {
@@ -40161,7 +40187,7 @@ const AddOrEditDBEntry = (props) => {
40161
40187
  return (React__default["default"].createElement(RadioButton, { key: choice.value, text: choice.title, selected: entry[field.objectKey] === choice.value, onSelected: () => {
40162
40188
  entry[field.objectKey] = choice.value;
40163
40189
  dispatch({
40164
- type: ActionType$4.UpdateDBEntry,
40190
+ type: ActionType$3.UpdateDBEntry,
40165
40191
  dbEntry: entry,
40166
40192
  });
40167
40193
  }, ariaLabel: choice.title }));
@@ -40173,7 +40199,7 @@ const AddOrEditDBEntry = (props) => {
40173
40199
  React__default["default"].createElement("input", { disabled: disabled, type: "text", className: "form-control", placeholder: field.placeholder, "aria-describedby": "AddOrEditDBEntry-form-name-label", value: entry[field.objectKey] || '', onChange: (e) => {
40174
40200
  entry[field.objectKey] = (e.target.value);
40175
40201
  dispatch({
40176
- type: ActionType$4.UpdateDBEntry,
40202
+ type: ActionType$3.UpdateDBEntry,
40177
40203
  dbEntry: entry,
40178
40204
  });
40179
40205
  } }))));
@@ -40186,7 +40212,7 @@ const AddOrEditDBEntry = (props) => {
40186
40212
  entry[field.objectKey] = (e.target.value
40187
40213
  .replace(/[^0-9]/g, ''));
40188
40214
  dispatch({
40189
- type: ActionType$4.UpdateDBEntry,
40215
+ type: ActionType$3.UpdateDBEntry,
40190
40216
  dbEntry: entry,
40191
40217
  });
40192
40218
  } }))));
@@ -40216,7 +40242,7 @@ const AddOrEditDBEntry = (props) => {
40216
40242
  }
40217
40243
  // Save
40218
40244
  dispatch({
40219
- type: ActionType$4.UpdateDBEntry,
40245
+ type: ActionType$3.UpdateDBEntry,
40220
40246
  dbEntry: entry,
40221
40247
  });
40222
40248
  }, ariaLabel: choice.title }));
@@ -40231,7 +40257,7 @@ const AddOrEditDBEntry = (props) => {
40231
40257
  // Update entry and save
40232
40258
  entry[field.objectKey] = values;
40233
40259
  dispatch({
40234
- type: ActionType$4.UpdateDBEntry,
40260
+ type: ActionType$3.UpdateDBEntry,
40235
40261
  dbEntry: entry,
40236
40262
  });
40237
40263
  } })))));
@@ -40244,7 +40270,7 @@ const AddOrEditDBEntry = (props) => {
40244
40270
  React__default["default"].createElement(CreatableMultiselect, { disabled: disabled, type: DBEntryFieldType$1.NumberArray, values: entry[field.objectKey] || [], onChange: (values) => {
40245
40271
  entry[field.objectKey] = values;
40246
40272
  dispatch({
40247
- type: ActionType$4.UpdateDBEntry,
40273
+ type: ActionType$3.UpdateDBEntry,
40248
40274
  dbEntry: entry,
40249
40275
  });
40250
40276
  } })))));
@@ -40293,7 +40319,7 @@ const AddOrEditDBEntry = (props) => {
40293
40319
  /* --------------- Main UI -------------- */
40294
40320
  /*----------------------------------------*/
40295
40321
  return (React__default["default"].createElement("div", { className: "alert alert-light text-black" },
40296
- React__default["default"].createElement("style", null, style$2),
40322
+ React__default["default"].createElement("style", null, style$1),
40297
40323
  body));
40298
40324
  };
40299
40325
 
@@ -40318,7 +40344,7 @@ const generateEndpointPath = (collectionName, adminsOnly) => {
40318
40344
  */
40319
40345
  /* ------------- Actions ------------ */
40320
40346
  // Types of actions
40321
- var ActionType$3;
40347
+ var ActionType$2;
40322
40348
  (function (ActionType) {
40323
40349
  // Show adder
40324
40350
  ActionType["ShowAdder"] = "ShowAdder";
@@ -40332,7 +40358,7 @@ var ActionType$3;
40332
40358
  ActionType["StartDelete"] = "StartDelete";
40333
40359
  // Finish deletion process
40334
40360
  ActionType["FinishDelete"] = "FinishDelete";
40335
- })(ActionType$3 || (ActionType$3 = {}));
40361
+ })(ActionType$2 || (ActionType$2 = {}));
40336
40362
  /**
40337
40363
  * Reducer that executes actions
40338
40364
  * @author Yuen Ler Chow
@@ -40340,18 +40366,18 @@ var ActionType$3;
40340
40366
  * @param action action to execute
40341
40367
  * @returns updated state
40342
40368
  */
40343
- const reducer$4 = (state, action) => {
40369
+ const reducer$3 = (state, action) => {
40344
40370
  switch (action.type) {
40345
- case ActionType$3.FinishLoading: {
40371
+ case ActionType$2.FinishLoading: {
40346
40372
  return Object.assign(Object.assign({}, state), { loading: false, dbEntries: action.dbEntries });
40347
40373
  }
40348
- case ActionType$3.ShowAdder: {
40374
+ case ActionType$2.ShowAdder: {
40349
40375
  return Object.assign(Object.assign({}, state), { adding: true, dbEntryToEdit: undefined });
40350
40376
  }
40351
- case ActionType$3.ShowEditor: {
40377
+ case ActionType$2.ShowEditor: {
40352
40378
  return Object.assign(Object.assign({}, state), { adding: false, dbEntryToEdit: action.dbEntry });
40353
40379
  }
40354
- case ActionType$3.FinishAdd: {
40380
+ case ActionType$2.FinishAdd: {
40355
40381
  // Handle cancel
40356
40382
  const finishedEntry = action.dbEntry;
40357
40383
  if (!finishedEntry) {
@@ -40375,10 +40401,10 @@ const reducer$4 = (state, action) => {
40375
40401
  // Update the state
40376
40402
  return Object.assign(Object.assign({}, state), { adding: false, dbEntryToEdit: undefined, dbEntries: updatedDbEntries });
40377
40403
  }
40378
- case ActionType$3.StartDelete: {
40404
+ case ActionType$2.StartDelete: {
40379
40405
  return Object.assign(Object.assign({}, state), { loading: true });
40380
40406
  }
40381
- case ActionType$3.FinishDelete: {
40407
+ case ActionType$2.FinishDelete: {
40382
40408
  return Object.assign(Object.assign({}, state), { loading: false,
40383
40409
  // Remove the deleted entry from the list
40384
40410
  dbEntries: state.dbEntries.filter((entry) => {
@@ -40404,7 +40430,7 @@ const DBEntryManagerPanel = (props) => {
40404
40430
  loading: true,
40405
40431
  };
40406
40432
  // Initialize state
40407
- const [state, dispatch] = React.useReducer(reducer$4, initialState);
40433
+ const [state, dispatch] = React.useReducer(reducer$3, initialState);
40408
40434
  // Destructure common state
40409
40435
  const { adding, dbEntryToEdit, dbEntries, loading, } = state;
40410
40436
  /*------------------------------------------------------------------------*/
@@ -40430,7 +40456,7 @@ const DBEntryManagerPanel = (props) => {
40430
40456
  try {
40431
40457
  // Start loader
40432
40458
  dispatch({
40433
- type: ActionType$3.StartDelete,
40459
+ type: ActionType$2.StartDelete,
40434
40460
  });
40435
40461
  // Perform deletion
40436
40462
  yield visitServerEndpoint({
@@ -40439,7 +40465,7 @@ const DBEntryManagerPanel = (props) => {
40439
40465
  });
40440
40466
  // Finish loader
40441
40467
  dispatch({
40442
- type: ActionType$3.FinishDelete,
40468
+ type: ActionType$2.FinishDelete,
40443
40469
  dbEntry: entry,
40444
40470
  idPropName,
40445
40471
  });
@@ -40468,7 +40494,7 @@ const DBEntryManagerPanel = (props) => {
40468
40494
  });
40469
40495
  // Save loaded data
40470
40496
  dispatch({
40471
- type: ActionType$3.FinishLoading,
40497
+ type: ActionType$2.FinishLoading,
40472
40498
  dbEntries: data,
40473
40499
  });
40474
40500
  }
@@ -40511,7 +40537,7 @@ const DBEntryManagerPanel = (props) => {
40511
40537
  React__default["default"].createElement("span", { className: "d-none d-md-inline ms-1" }, "Remove")),
40512
40538
  !disableEdit && (React__default["default"].createElement("button", { type: "button", id: `DBEntryManagerPanel-edit-with-id-${entry[idPropName]}`, className: "btn btn-primary", "aria-label": `edit db entry: ${entry[titlePropName]}`, onClick: () => {
40513
40539
  dispatch({
40514
- type: ActionType$3.ShowEditor,
40540
+ type: ActionType$2.ShowEditor,
40515
40541
  dbEntry: entry,
40516
40542
  });
40517
40543
  } },
@@ -40521,7 +40547,7 @@ const DBEntryManagerPanel = (props) => {
40521
40547
  React__default["default"].createElement("div", { className: "d-grid" },
40522
40548
  React__default["default"].createElement("button", { type: "button", id: "DBEntryManagerPanel-add-entry", className: "btn btn-lg btn-primary", "aria-label": `add a new ${itemName} entry to the list of entries`, onClick: () => {
40523
40549
  dispatch({
40524
- type: ActionType$3.ShowAdder,
40550
+ type: ActionType$2.ShowAdder,
40525
40551
  });
40526
40552
  } },
40527
40553
  React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, { icon: freeSolidSvgIcons.faPlus, className: "me-2" }),
@@ -40533,7 +40559,7 @@ const DBEntryManagerPanel = (props) => {
40533
40559
  if (!loading && (adding || dbEntryToEdit)) {
40534
40560
  body = (React__default["default"].createElement(AddOrEditDBEntry, { saveEndpointPath: endpoint, validateEntry: validateEntry, modifyEntry: modifyEntry, entryFields: entryFields, dbEntryToEdit: dbEntryToEdit, idPropName: idPropName, entries: dbEntries, itemName: itemName, onFinished: (entry) => {
40535
40561
  dispatch({
40536
- type: ActionType$3.FinishAdd,
40562
+ type: ActionType$2.FinishAdd,
40537
40563
  dbEntry: entry,
40538
40564
  idPropName,
40539
40565
  });
@@ -40550,228 +40576,6 @@ const DBEntryManagerPanel = (props) => {
40550
40576
  * @author Gabe Abrams
40551
40577
  */
40552
40578
  /*------------------------------------------------------------------------*/
40553
- /* ------------------------------ Constants ----------------------------- */
40554
- /*------------------------------------------------------------------------*/
40555
- // Tooltip widths
40556
- const TOOLTIP_WIDTH_THIN_REM = 5;
40557
- const TOOLTIP_WIDTH_NORMAL_REM = 7;
40558
- const TOOLTIP_WIDTH_WIDE_REM = 10;
40559
- // Tooltip border radius
40560
- const TOOLTIP_BORDER_RADIUS_REM = 0.3;
40561
- /*------------------------------------------------------------------------*/
40562
- /* -------------------------------- Style ------------------------------- */
40563
- /*------------------------------------------------------------------------*/
40564
- const style$1 = `
40565
- /* Container for contents and tooltip */
40566
- .Tooltip-outer-container {
40567
- position: relative;
40568
- }
40569
-
40570
- /* Container for just tooltip */
40571
- .Tooltip-tooltip-container {
40572
- /* Position in middle but take no space */
40573
- /* (so layout of page is unaffected) */
40574
- position: absolute;
40575
- display: inline-block;
40576
- top: 0;
40577
- left: 50%;
40578
- height: 0;
40579
- width: 0;
40580
- overflow: visible;
40581
- }
40582
-
40583
- /* Tooltip */
40584
- .Tooltip-tooltip {
40585
- /* Position above item */
40586
- display: inline-block;
40587
- position: absolute;
40588
- top: -2.3rem;
40589
- height: 1.8rem;
40590
- z-index: 1;
40591
-
40592
- /* Use standard black font */
40593
- font-size: 1rem;
40594
- color: black;
40595
-
40596
- /* Non-interactive */
40597
- pointer-events: none;
40598
- }
40599
-
40600
- /* Tooltip box (the rectangle surrounding the text) */
40601
- .Tooltip-box,
40602
- .Tooltip-box-shadow,
40603
- .Tooltip-box-highlight {
40604
- /* Fill all space with rectangle */
40605
- position: absolute;
40606
- left: 0;
40607
- top: 0;
40608
- display: inline-block;
40609
- width: 100%;
40610
- height: 100%;
40611
-
40612
- /* Rounded border */
40613
- border: 0.15rem solid black;
40614
- border-radius: ${TOOLTIP_BORDER_RADIUS_REM}rem;
40615
- }
40616
-
40617
- /* Tooltip highlight (the bright background to the text) */
40618
- .Tooltip-box-highlight {
40619
- /* Bootstrap warning variant background */
40620
- background-color: rgb(255, 193, 7);
40621
- border-radius: ${TOOLTIP_BORDER_RADIUS_REM}rem;
40622
-
40623
- /* Place on top */
40624
- z-index: -1;
40625
- }
40626
-
40627
- /* Tooltip box (the black rectangle) */
40628
- .Tooltip-box {
40629
- /* Plain black background */
40630
- background-color: black;
40631
-
40632
- /* Place in middle */
40633
- z-index: -2;
40634
- }
40635
-
40636
- /* Tooltip box shadow (the white shadow beneath the box) */
40637
- .Tooltip-box-shadow {
40638
- /* White shadow */
40639
- box-shadow: 0 0 0.3rem white;
40640
-
40641
- /* Place beneath */
40642
- z-index: -3;
40643
- }
40644
-
40645
- /* Tooltip contents (the text and icon) */
40646
- .Tooltip-contents {
40647
- /* Center text, don't allow overflow */
40648
- white-space: nowrap;
40649
- overflow: hidden;
40650
- text-align: center;
40651
- text-overflow: ellipsis;
40652
- display: flex;
40653
- align-items: center;
40654
- justify-content: center;
40655
-
40656
- /* Space within parent */
40657
- z-index: 1;
40658
- padding-left: 0.2rem;
40659
- padding-right: 0.2rem;
40660
- height: 100%;
40661
- }
40662
-
40663
- /* Tooltip text */
40664
- .Tooltip-text {
40665
- /* Center text, add ellipsis */
40666
- overflow: hidden;
40667
- text-align: center;
40668
- text-overflow: ellipsis;
40669
- }
40670
-
40671
- /* Classes to switch between tooltip visible/hidden */
40672
- .Tooltip-tooltip-visible-true {
40673
- opacity: 1;
40674
- }
40675
- .Tooltip-tooltip-visible-false {
40676
- opacity: 0;
40677
- }
40678
-
40679
- /* Classes to switch between tooltip sizes */
40680
- .Tooltip-size-thin {
40681
- width: ${TOOLTIP_WIDTH_THIN_REM}rem;
40682
- left: calc(50% - ${TOOLTIP_WIDTH_THIN_REM / 2}rem);
40683
- }
40684
- .Tooltip-size-normal {
40685
- width: ${TOOLTIP_WIDTH_NORMAL_REM}rem;
40686
- left: calc(50% - ${TOOLTIP_WIDTH_NORMAL_REM / 2}rem);
40687
- }
40688
- .Tooltip-size-wide {
40689
- width: ${TOOLTIP_WIDTH_WIDE_REM}rem;
40690
- left: calc(50% - ${TOOLTIP_WIDTH_WIDE_REM / 2}rem);
40691
- }
40692
-
40693
- /* Arrow (beneath tooltip) */
40694
- .Tooltip-arrow,
40695
- .Tooltip-arrow-shadow {
40696
- /* Position beneath tooltip */
40697
- position: absolute;
40698
- top: -1.5rem;
40699
- font-size: 1.5rem;
40700
- left: calc(50% - 0.5rem);
40701
- width: 0;
40702
- display: inline-block;
40703
-
40704
- /* Non-interactive */
40705
- pointer-events: none;
40706
- }
40707
-
40708
- /* Arrow itself */
40709
- .Tooltip-arrow {
40710
- color: black;
40711
- z-index: 4;
40712
- }
40713
-
40714
- /* Arrow shadow */
40715
- .Tooltip-arrow-shadow {
40716
- z-index: -1;
40717
-
40718
- /* Blur a white version of the caret as a shadow */
40719
- color: white;
40720
- filter: blur(0.2rem);
40721
- }
40722
-
40723
- /* Classes to switch between arrow visible/hidden */
40724
- .Tooltip-arrow-visible-true {
40725
- opacity: 1;
40726
- }
40727
- .Tooltip-arrow-visible-false {
40728
- opacity: 0;
40729
- }
40730
- `;
40731
- /* ------------- Actions ------------ */
40732
- // Types of actions
40733
- var ActionType$2;
40734
- (function (ActionType) {
40735
- // Make the tooltip visible
40736
- ActionType["Show"] = "Show";
40737
- // Make the tooltip invisible
40738
- ActionType["Hide"] = "Hide";
40739
- // Set nudge pixels
40740
- ActionType["SetNudgePx"] = "SetNudgePx";
40741
- // Set whether bottom left corner should be square
40742
- ActionType["SetSquareBottomLeft"] = "SetSquareBottomLeft";
40743
- // Set whether bottom right corner should be square
40744
- ActionType["SetSquareBottomRight"] = "SetSquareBottomRight";
40745
- })(ActionType$2 || (ActionType$2 = {}));
40746
- /**
40747
- * Reducer that executes actions
40748
- * @author Gabe Abrams
40749
- * @param state current state
40750
- * @param action action to execute
40751
- */
40752
- const reducer$3 = (state, action) => {
40753
- switch (action.type) {
40754
- case ActionType$2.Show: {
40755
- return Object.assign(Object.assign({}, state), { isVisible: true });
40756
- }
40757
- case ActionType$2.Hide: {
40758
- return Object.assign(Object.assign({}, state), { isVisible: false, nudgePx: 0 });
40759
- }
40760
- case ActionType$2.SetNudgePx: {
40761
- return Object.assign(Object.assign({}, state), { nudgePx: action.nudgePx });
40762
- }
40763
- case ActionType$2.SetSquareBottomLeft: {
40764
- return Object.assign(Object.assign({}, state), { squareBottomLeft: action.squareBottomLeft });
40765
- }
40766
- case ActionType$2.SetSquareBottomRight: {
40767
- return Object.assign(Object.assign({}, state), { squareBottomRight: action.squareBottomRight });
40768
- }
40769
- default: {
40770
- return state;
40771
- }
40772
- }
40773
- };
40774
- /*------------------------------------------------------------------------*/
40775
40579
  /* ------------------------------ Component ----------------------------- */
40776
40580
  /*------------------------------------------------------------------------*/
40777
40581
  const Tooltip = (props) => {
@@ -40780,21 +40584,10 @@ const Tooltip = (props) => {
40780
40584
  /*------------------------------------------------------------------------*/
40781
40585
  /* -------------- Props ------------- */
40782
40586
  // Destructure all props
40783
- const { icon, text, children, wide, thin, containerIsDisplayBlock, } = props;
40784
- /* -------------- State ------------- */
40785
- // Initial state
40786
- const initialState = {
40787
- isVisible: false,
40788
- nudgePx: 0,
40789
- };
40790
- // Initialize state
40791
- const [state, dispatch] = React.useReducer(reducer$3, initialState);
40792
- // Destructure common state
40793
- const { isVisible, nudgePx, squareBottomLeft, squareBottomRight, } = state;
40587
+ const { text, children, } = props;
40794
40588
  /* -------------- Refs -------------- */
40795
- // Initialize refs
40796
- const tooltipContainer = React.useRef(null);
40797
- const arrowElement = React.useRef(null);
40589
+ // Child ref
40590
+ const childRef = React.useRef(undefined);
40798
40591
  /*------------------------------------------------------------------------*/
40799
40592
  /* ------------------------- Lifecycle Functions ------------------------ */
40800
40593
  /*------------------------------------------------------------------------*/
@@ -40803,109 +40596,29 @@ const Tooltip = (props) => {
40803
40596
  * @author Gabe Abrams
40804
40597
  */
40805
40598
  React.useEffect(() => {
40806
- // Update tooltip container position
40807
- if (tooltipContainer.current && isVisible) {
40808
- // Get the tooltip container location
40809
- const tooltipContainerRect = (tooltipContainer
40810
- .current
40811
- .getBoundingClientRect());
40812
- // Get the window width
40813
- const windowWidth = window.innerWidth;
40814
- // Calculate new nudge value
40815
- let newNudgePx;
40816
- if (tooltipContainerRect.left < 0) {
40817
- // Tooltip is off the left side of the screen
40818
- newNudgePx = -1 * tooltipContainerRect.left;
40819
- }
40820
- else if (tooltipContainerRect.right > windowWidth) {
40821
- // Tooltip is off the right side of the screen
40822
- newNudgePx = -1 * (tooltipContainerRect.right - windowWidth);
40823
- }
40824
- else {
40825
- // Tooltip is in the middle of the screen
40826
- newNudgePx = 0;
40827
- }
40828
- // Update state
40829
- dispatch({
40830
- type: ActionType$2.SetNudgePx,
40831
- nudgePx: newNudgePx,
40832
- });
40833
- }
40834
- // Update border rounding
40835
- if (arrowElement.current && isVisible) {
40836
- // Get the arrow location
40837
- const arrowRect = (arrowElement
40838
- .current
40839
- .getBoundingClientRect());
40840
- // REM in pixels given font size
40841
- const remInPixels = Number.parseInt(getComputedStyle(document.documentElement).fontSize, 10);
40842
- // Set bottom left corner rounding
40843
- dispatch({
40844
- type: ActionType$2.SetSquareBottomLeft,
40845
- squareBottomLeft: (arrowRect.left < (TOOLTIP_BORDER_RADIUS_REM * remInPixels)),
40846
- });
40847
- // Set bottom right corner rounding
40848
- dispatch({
40849
- type: ActionType$2.SetSquareBottomRight,
40850
- squareBottomRight: (arrowRect.right
40851
- > window.innerWidth - (TOOLTIP_BORDER_RADIUS_REM * remInPixels)),
40852
- });
40599
+ // Skip if no child
40600
+ if (!childRef.current) {
40601
+ return;
40853
40602
  }
40854
- }, [isVisible]);
40603
+ // Initialize tooltip
40604
+ const t = new bootstrap.Tooltip(childRef.current, {
40605
+ title: text,
40606
+ placement: 'top',
40607
+ trigger: 'hover',
40608
+ });
40609
+ // Clean up tooltip
40610
+ return () => {
40611
+ t.dispose();
40612
+ };
40613
+ }, [text]);
40855
40614
  /*------------------------------------------------------------------------*/
40856
40615
  /* ------------------------------- Render ------------------------------- */
40857
40616
  /*------------------------------------------------------------------------*/
40858
40617
  /*----------------------------------------*/
40859
40618
  /* --------------- Main UI -------------- */
40860
40619
  /*----------------------------------------*/
40861
- // Determine size
40862
- let size = 'normal';
40863
- if (wide) {
40864
- size = 'wide';
40865
- }
40866
- else if (thin) {
40867
- size = 'thin';
40868
- }
40869
- // Render
40870
- return (React__default["default"].createElement("div", { className: `Tooltip-outer-container ${containerIsDisplayBlock ? 'd-block' : 'd-inline-block'}}`, "aria-label": text, onMouseEnter: () => {
40871
- dispatch({
40872
- type: ActionType$2.Show,
40873
- });
40874
- }, onMouseLeave: () => {
40875
- dispatch({
40876
- type: ActionType$2.Hide,
40877
- });
40878
- }, onFocus: () => {
40879
- dispatch({
40880
- type: ActionType$2.Show,
40881
- });
40882
- }, onBlur: () => {
40883
- dispatch({
40884
- type: ActionType$2.Hide,
40885
- });
40886
- } },
40887
- React__default["default"].createElement("style", null, style$1),
40888
- children,
40889
- React__default["default"].createElement("div", { className: `Tooltip-arrow Tooltip-arrow-visible-${isVisible ? 'true' : 'false'}`, ref: arrowElement },
40890
- React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, { icon: freeSolidSvgIcons.faCaretDown })),
40891
- React__default["default"].createElement("div", { className: `Tooltip-arrow-shadow Tooltip-arrow-visible-${isVisible ? 'true' : 'false'}` },
40892
- React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, { icon: freeSolidSvgIcons.faCaretDown })),
40893
- React__default["default"].createElement("div", { className: "Tooltip-tooltip-container" },
40894
- React__default["default"].createElement("div", { className: `Tooltip-tooltip Tooltip-tooltip-visible-${isVisible ? 'true' : 'false'} Tooltip-size-${size}`, role: "tooltip", ref: tooltipContainer, style: {
40895
- transform: `translateX(${nudgePx}px)`,
40896
- } },
40897
- React__default["default"].createElement("div", { className: "Tooltip-box-highlight" }),
40898
- React__default["default"].createElement("div", { className: "Tooltip-box", style: {
40899
- borderBottomLeftRadius: squareBottomLeft ? 0 : undefined,
40900
- borderBottomRightRadius: squareBottomRight ? 0 : undefined,
40901
- } }),
40902
- React__default["default"].createElement("div", { className: "Tooltip-box-shadow", style: {
40903
- borderBottomLeftRadius: squareBottomLeft ? 0 : undefined,
40904
- borderBottomRightRadius: squareBottomRight ? 0 : undefined,
40905
- } }),
40906
- React__default["default"].createElement("div", { className: "Tooltip-contents" },
40907
- icon && (React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, { icon: icon, className: "me-1" })),
40908
- React__default["default"].createElement("span", { className: "Tooltip-text" }, text))))));
40620
+ // Clone child and add ref
40621
+ return React__default["default"].cloneElement(children, { ref: childRef });
40909
40622
  };
40910
40623
 
40911
40624
  /**