dce-reactkit 3.2.2-beta.33 → 3.2.2-beta.35

package/dist/esm/index.js

@@ -2283,7 +2283,8 @@ const CSVDownloadButton = (props) => {
             ? `Click to download ${filename}`
             : ariaLabel), style: style, onClick: onClick },
         !children && (React.createElement(React.Fragment, null,
-            React.createElement(FontAwesomeIcon, { icon: faCloudDownloadAlt, className: "mr-2" }),
+            React.createElement(FontAwesomeIcon, { icon: faCloudDownloadAlt }),
+            ' ',
             "Download CSV")),
         children));
 };
@@ -2371,20 +2372,28 @@ const IntelliTable = (props) => {
     const [state, dispatch] = useReducer(reducer$1, initialState);
     // Destructure common state
     const { sortColumnParam, sortType, columnVisibilityMap, columnVisibilityCustomizationModalVisible, } = state;
+    /*------------------------------------------------------------------------*/
+    /*                                 Render                                 */
+    /*------------------------------------------------------------------------*/
+    /*----------------------------------------*/
+    /*                  Modal                 */
+    /*----------------------------------------*/
+    // Modal that may be defined
+    let modal;
     /* ------- Col Vis Customization Modal ------ */
     if (columnVisibilityCustomizationModalVisible) {
         // Create modal
-        (React.createElement(Modal, { type: ModalType$1.Okay, title: "Choose columns to show:", onClose: () => {
+        modal = (React.createElement(Modal, { type: ModalType$1.Okay, title: "Choose columns to show:", onClose: () => {
                 dispatch({
                     type: ActionType$1.ToggleColVisCusModalVisibility,
                 });
-            } }, columns.map((column) => {
-            return (React.createElement(CheckboxButton, { key: column.param, id: `IntelliTable-${id}-toggle-visibility-${column.param}`, text: column.title, onChanged: () => {
+            }, okayVariant: Variant$1.Light }, columns.map((column) => {
+            return (React.createElement(CheckboxButton, { key: column.param, id: `IntelliTable-${id}-toggle-visibility-${column.param}`, className: "mb-2", text: column.title, onChanged: () => {
                     dispatch({
                         type: ActionType$1.ToggleColumnVisibility,
                         param: column.param,
                     });
-                }, checked: columnVisibilityMap[column.param], ariaLabel: `show "${column.title}" column` }));
+                }, checked: columnVisibilityMap[column.param], ariaLabel: `show "${column.title}" column`, checkedVariant: Variant$1.Light, uncheckedVariant: Variant$1.Secondary }));
         })));
     }
     /*----------------------------------------*/
@@ -2425,8 +2434,11 @@ const IntelliTable = (props) => {
             sortIcon = faSort;
         }
         // Create the cell UI
-        return (React.createElement("th", { key: column.param, scope: "col", id: `IntelliTable-${id}-header-${column.param}`, className: "text-start" },
-            React.createElement("div", { className: "d-flex align-items-center justify-content-center flex-row h-100" },
+        return (React.createElement("th", { key: column.param, scope: "col", id: `IntelliTable-${id}-header-${column.param}`, className: "text-start", style: {
+                borderRight: '0.05rem solid #555',
+                borderLeft: '0.05rem solid #555',
+            } },
+            React.createElement("div", { className: "d-flex align-items-center justify-content-start flex-row h-100" },
                 React.createElement("span", { className: "text-nowrap" }, column.title),
                 React.createElement("div", null,
                     React.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: () => {
@@ -2449,6 +2461,22 @@ const IntelliTable = (props) => {
         sortedData.sort((a, b) => {
             const aVal = a[sortColumnParam];
             const bVal = b[sortColumnParam];
+            // Auto-sort undefined and null to end of list
+            if ((aVal === undefined || aVal === null)
+                || (bVal === undefined || bVal === null)) {
+                // At least one was undefined
+                if ((aVal === undefined || aVal === null)
+                    && (bVal === undefined || bVal === null)) {
+                    // Both undefined
+                    return 0;
+                }
+                if (aVal === undefined || aVal === null) {
+                    // First was undefined
+                    return 1;
+                }
+                // Second was undefined
+                return -1;
+            }
             // Sort differently based on the data type
             // > Boolean
             if (paramType === ParamType$1.Boolean) {
@@ -2470,10 +2498,10 @@ const IntelliTable = (props) => {
             // > String
             if (paramType === ParamType$1.String) {
                 if (aVal < bVal) {
-                    return (descending ? -1 : 1);
+                    return (descending ? 1 : -1);
                 }
                 if (aVal > bVal) {
-                    return (descending ? 1 : -1);
+                    return (descending ? -1 : 1);
                 }
                 return 0;
             }
@@ -2537,7 +2565,9 @@ const IntelliTable = (props) => {
             }
             else if (column.type === ParamType$1.String) {
                 fullValue = String(value).trim();
-                const noValue = (String(fullValue).trim().length === 0);
+                const noValue = (value === undefined
+                    || value === null
+                    || String(fullValue).trim().length === 0);
                 visibleValue = (noValue
                     ? (React.createElement(FontAwesomeIcon, { icon: faMinus }))
                     : fullValue);
@@ -2553,7 +2583,10 @@ const IntelliTable = (props) => {
                     : fullValue);
             }
             // Create UI
-            return (React.createElement("td", { key: `${datum.id}-${column.param}`, title: title }, visibleValue));
+            return (React.createElement("td", { key: `${datum.id}-${column.param}`, title: title, style: {
+                    borderRight: '0.05rem solid #555',
+                    borderLeft: '0.05rem solid #555',
+                } }, visibleValue));
         }));
         // Add cells to a row
         return (React.createElement("tr", { key: datum.id }, cells));
@@ -2573,7 +2606,8 @@ const IntelliTable = (props) => {
     const csv = genCSV(data, columns);
     // Build main UI
     return (React.createElement("div", { className: `IntelliTable-container-${id}` },
-        React.createElement("div", { className: "d-flex align-items-center justify-content-center" },
+        modal,
+        React.createElement("div", { className: "d-flex align-items-center justify-content-start" },
             React.createElement("h3", { className: "m-0" }, title),
             React.createElement("div", { className: "flex-grow-1 text-end" },
                 React.createElement(CSVDownloadButton, { "aria-label": `download data as csv for ${title}`, id: `IntelliTable-${id}-download-as-csv`, filename: `${title}.csv`, csv: csv }),
@@ -2589,7 +2623,7 @@ const IntelliTable = (props) => {
                         numHiddenCols,
                         ' ',
                         "hidden)"))))),
-        React.createElement("div", { className: `IntelliTable-table-${id}`, style: {
+        React.createElement("div", { className: `IntelliTable-table-${id} mt-2`, style: {
                 overflowX: 'auto',
             } }, table)));
 };
@@ -2806,7 +2840,7 @@ const LogReviewer = (props) => {
     /*------------------------------------------------------------------------*/
     /*                                  Setup                                 */
     /*------------------------------------------------------------------------*/
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
     /* -------------- Props ------------- */
     // Destructure props
     const { LogMetadata, onClose, } = props;
@@ -2876,8 +2910,8 @@ const LogReviewer = (props) => {
     });
     // Create initial tag filter state
     const initTagFilterState = {};
-    Object.values((_e = LogMetadata.Tag) !== null && _e !== void 0 ? _e : {}).forEach((tagValue) => {
-        initTagFilterState[tagValue] = false;
+    Object.keys((_e = LogMetadata.Tag) !== null && _e !== void 0 ? _e : {}).forEach((tag) => {
+        initTagFilterState[tag] = false;
     });
     // Create advanced filter state
     const initAdvancedFilterState = {
@@ -3176,7 +3210,7 @@ const LogReviewer = (props) => {
             }
             else if (expandedFilterDrawer === FilterDrawer.Tag) {
                 // Create filter UI
-                filterDrawer = (React.createElement(TabBox, { title: "Tags" }, Object.keys(tagFilterState)
+                filterDrawer = (React.createElement(TabBox, { title: "Tags" }, Object.keys((_h = LogMetadata.Tag) !== null && _h !== void 0 ? _h : {})
                     .map((tag, i) => {
                     const description = genHumanReadableName(tag);
                     return (React.createElement(CheckboxButton, { id: `LogReviewer-tag-${tag}-checkbox`, text: description, ariaLabel: `require that logs be tagged with "${description}" or any other selected tag`, noMarginOnRight: i === Object.keys(tagFilterState).length - 1, checked: tagFilterState[tag], onChanged: (checked) => {
@@ -3223,8 +3257,8 @@ const LogReviewer = (props) => {
                                 } }));
                         })),
                         React.createElement(ButtonInputGroup, { label: "Target" },
-                            (Object.keys((_h = LogMetadata.Target) !== null && _h !== void 0 ? _h : {}).length === 0) && (React.createElement("div", null, "This app does not have any targets yet.")),
-                            Object.keys((_j = LogMetadata.Target) !== null && _j !== void 0 ? _j : {})
+                            (Object.keys((_j = LogMetadata.Target) !== null && _j !== void 0 ? _j : {}).length === 0) && (React.createElement("div", null, "This app does not have any targets yet.")),
+                            Object.keys((_k = LogMetadata.Target) !== null && _k !== void 0 ? _k : {})
                                 .map((target, i) => {
                                 var _a;
                                 const description = genHumanReadableName(target);
@@ -3730,13 +3764,13 @@ const LogReviewer = (props) => {
                 type: ParamType$1.Boolean,
             },
             {
-                title: 'Teaching Staff',
+                title: 'Teaching Staff?',
                 param: 'isTTM',
                 type: ParamType$1.Boolean,
                 startsHidden: true,
             },
             {
-                title: 'Admin',
+                title: 'Admin?',
                 param: 'isAdmin',
                 type: ParamType$1.Boolean,
                 startsHidden: true,
@@ -3771,7 +3805,7 @@ const LogReviewer = (props) => {
                 startsHidden: true,
             },
             {
-                title: 'Mobile',
+                title: 'Mobile?',
                 param: 'device.isMobile',
                 type: ParamType$1.Boolean,
                 startsHidden: true,