dce-reactkit 3.2.2-beta.4 → 3.2.2-beta.41

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

@@ -7,6 +7,7 @@ declare type Props = {
     label: string;
     minLabelWidth?: string;
     children: React.ReactNode;
+    className?: string;
 };
 declare const ButtonInputGroup: React.FC<Props>;
 export default ButtonInputGroup;

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

@@ -4,6 +4,7 @@
  */
 import React from 'react';
 declare type Props = {
+    customBackgroundColor?: string;
     children: React.ReactNode;
 };
 declare const Drawer: React.FC<Props>;

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

@@ -1,6 +1,7 @@
 /**
  * Reusable nested item picker
  * @author Yuen Ler Chow
+ * @author Gabe Abrams
  */
 import React from 'react';
 import PickableItem from './types/PickableItem';

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

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

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

@@ -3,21 +3,21 @@
  * @author Gabe Abrams
  */
 declare enum LogAction {
-    Open = "open",
-    Close = "close",
-    Cancel = "cancel",
-    Expand = "expand",
-    Collapse = "collapse",
-    View = "view",
-    Interrupt = "interrupt",
-    Create = "create",
-    Edit = "edit",
-    Delete = "delete",
-    Add = "add",
-    Remove = "remove",
-    Activate = "activate",
-    Deactivate = "deactivate",
-    Peek = "peek",
-    Unknown = "unknown"
+    Open = "Open",
+    Close = "Close",
+    Cancel = "Cancel",
+    Expand = "Expand",
+    Collapse = "Collapse",
+    View = "View",
+    Interrupt = "Interrupt",
+    Create = "Create",
+    Edit = "Edit",
+    Delete = "Delete",
+    Add = "Add",
+    Remove = "Remove",
+    Activate = "Activate",
+    Deactivate = "Deactivate",
+    Peek = "Peek",
+    Unknown = "Unknown"
 }
 export default LogAction;

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

@@ -10,7 +10,7 @@ declare const LogBuiltInMetadata: {
         ClientFatalError: string;
     };
     Target: {
-        NoSpecificTarget: string;
+        NoTarget: string;
     };
 };
 export default LogBuiltInMetadata;

package/dist/index.d.ts

@@ -242,6 +242,7 @@ declare type Props$a = {
     label: string;
     minLabelWidth?: string;
     children: React.ReactNode;
+    className?: string;
 };
 declare const ButtonInputGroup: React.FC<Props$a>;
 
@@ -274,6 +275,7 @@ declare const SimpleDateChooser: React.FC<Props$9>;
  */
 
 declare type Props$8 = {
+    customBackgroundColor?: string;
     children: React.ReactNode;
 };
 declare const Drawer: React.FC<Props$8>;
@@ -363,6 +365,7 @@ declare type Props$3 = {
      *   values updated
      */
     onChanged: (updatedItems: PickableItem[]) => void;
+    noBottomMargin?: boolean;
 };
 declare const ItemPicker: React.FC<Props$3>;
 
@@ -667,22 +670,22 @@ declare type LogSourceSpecificInfo = ({
  * @author Gabe Abrams
  */
 declare enum LogAction {
-    Open = "open",
-    Close = "close",
-    Cancel = "cancel",
-    Expand = "expand",
-    Collapse = "collapse",
-    View = "view",
-    Interrupt = "interrupt",
-    Create = "create",
-    Edit = "edit",
-    Delete = "delete",
-    Add = "add",
-    Remove = "remove",
-    Activate = "activate",
-    Deactivate = "deactivate",
-    Peek = "peek",
-    Unknown = "unknown"
+    Open = "Open",
+    Close = "Close",
+    Cancel = "Cancel",
+    Expand = "Expand",
+    Collapse = "Collapse",
+    View = "View",
+    Interrupt = "Interrupt",
+    Create = "Create",
+    Edit = "Edit",
+    Delete = "Delete",
+    Add = "Add",
+    Remove = "Remove",
+    Activate = "Activate",
+    Deactivate = "Deactivate",
+    Peek = "Peek",
+    Unknown = "Unknown"
 }
 
 /**
@@ -1026,7 +1029,7 @@ declare const LogBuiltInMetadata: {
         ClientFatalError: string;
     };
     Target: {
-        NoSpecificTarget: string;
+        NoTarget: string;
     };
 };
 

package/package.json

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

package/src/components/ButtonInputGroup.tsx

@@ -18,6 +18,8 @@ type Props = {
   minLabelWidth?: string,
   // Buttons
   children: React.ReactNode,
+  // Additional class names to add to the outer container
+  className?: string,
 };
 
 /*------------------------------------------------------------------------*/
@@ -36,6 +38,7 @@ const ButtonInputGroup: React.FC<Props> = (props) => {
     label,
     minLabelWidth,
     children,
+    className,
   } = props;
 
   /*------------------------------------------------------------------------*/
@@ -47,7 +50,7 @@ const ButtonInputGroup: React.FC<Props> = (props) => {
   /*----------------------------------------*/
 
   return (
-    <div className="input-group">
+    <div className={`input-group ${className ?? ''}`}>
       <div className="input-group-prepend d-flex w-100">
         {/* Label */}
         <span
@@ -66,7 +69,7 @@ const ButtonInputGroup: React.FC<Props> = (props) => {
 
         {/* Contents */}
         <span
-          className="input-group-text flex-grow-1 rounded-right"
+          className="input-group-text flex-grow-1 rounded-right d-flex flex-wrap"
           style={{
             backgroundColor: 'white',
             borderTopLeftRadius: 0,

package/src/components/CSVDownloadButton.tsx

@@ -84,8 +84,8 @@ const CSVDownloadButton: React.FC<Props> = (props) => {
         <>
           <FontAwesomeIcon
             icon={faCloudDownloadAlt}
-            className="mr-2"
           />
+          {' '}
           Download CSV
         </>
       )}

package/src/components/Drawer.tsx

@@ -12,6 +12,8 @@ import React from 'react';
 
 // Props definition
 type Props = {
+  // Custom background color
+  customBackgroundColor?: string,
   // Children to display
   children: React.ReactNode,
 };
@@ -49,6 +51,7 @@ const Drawer: React.FC<Props> = (props) => {
 
   // Destructure all props
   const {
+    customBackgroundColor,
     children,
   } = props;
 
@@ -61,7 +64,12 @@ const Drawer: React.FC<Props> = (props) => {
   /*----------------------------------------*/
 
   return (
-    <div className="Drawer-container">
+    <div
+      className="Drawer-container"
+      style={{
+        backgroundColor: (customBackgroundColor ?? undefined),
+      }}
+    >
       <style>{style}</style>
       {children}
     </div>

package/src/components/IntelliTable.tsx

@@ -30,6 +30,7 @@ import Modal from './Modal';
 import ModalType from '../types/ModalType';
 import CheckboxButton from './CheckboxButton';
 import CSVDownloadButton from './CSVDownloadButton';
+import Variant from '../types/Variant';
 
 /*------------------------------------------------------------------------*/
 /*                                  Types                                 */
@@ -86,7 +87,7 @@ enum ActionType {
   // Toggle sort column param
   ToggleSortColumn = 'toggle-sort-column',
   // Toggle the visibility of a column
-  ToggleColumnVisibility = 'toggle-column-visibility',
+  UpdateColumnVisibility = 'update-column-visibility',
   // Toggle the column visibility customization modal
   ToggleColVisCusModalVisibility = 'toggle-col-vis-cus-modal-visibility',
 }
@@ -101,9 +102,11 @@ type Action = (
   }
   | {
     // Action type
-    type: ActionType.ToggleColumnVisibility,
-    // Param for the column to toggle
+    type: ActionType.UpdateColumnVisibility,
+    // Param for the column to update
     param: string,
+    // If true, make the column visible
+    visible: boolean,
   }
   | {
     // Action type
@@ -144,9 +147,9 @@ const reducer = (state: State, action: Action): State => {
         sortType: SortType.Ascending,
       };
     }
-    case ActionType.ToggleColumnVisibility: {
+    case ActionType.UpdateColumnVisibility: {
       const { columnVisibilityMap } = state;
-      columnVisibilityMap[action.param] = !columnVisibilityMap[action.param];
+      columnVisibilityMap[action.param] = action.visible;
       return {
         ...state,
         columnVisibilityMap,
@@ -179,10 +182,16 @@ const IntelliTable: React.FC<Props> = (props) => {
   const {
     title,
     id,
-    data,
     columns,
   } = props;
 
+  // Get data, show empty row if none
+  const data = (
+    (props.data && props.data.length > 0)
+      ? props.data
+      : [{ id: 'empty-row' }]
+  );
+
   /* -------------- State ------------- */
 
   // Initial state
@@ -234,6 +243,7 @@ const IntelliTable: React.FC<Props> = (props) => {
             type: ActionType.ToggleColVisCusModalVisibility,
           });
         }}
+        okayVariant={Variant.Light}
       >
         {
           columns.map((column) => {
@@ -241,15 +251,19 @@ const IntelliTable: React.FC<Props> = (props) => {
               <CheckboxButton
                 key={column.param}
                 id={`IntelliTable-${id}-toggle-visibility-${column.param}`}
+                className="mb-2"
                 text={column.title}
-                onChanged={() => {
+                onChanged={(checked) => {
                   dispatch({
-                    type: ActionType.ToggleColumnVisibility,
+                    type: ActionType.UpdateColumnVisibility,
                     param: column.param,
+                    visible: checked,
                   });
                 }}
                 checked={columnVisibilityMap[column.param]}
                 ariaLabel={`show "${column.title}" column`}
+                checkedVariant={Variant.Light}
+                uncheckedVariant={Variant.Secondary}
               />
             );
           })
@@ -272,12 +286,14 @@ const IntelliTable: React.FC<Props> = (props) => {
         // Custom info based on current sort type
         let sortButtonAriaLabel;
         let sortIcon = faSort;
+        let sortingByThisColumn = false;
         if (!sortColumnParam) {
           // Not being sorted yet
           sortButtonAriaLabel = `sort ascending by ${column.title}`;
           sortIcon = faSort;
         } else if (column.param === sortColumnParam) {
           // Already sorted by this column
+          sortingByThisColumn = true;
           if (sortType === SortType.Ascending) {
             // Sorted ascending
             sortButtonAriaLabel = `sort descending by ${column.title}`;
@@ -299,17 +315,23 @@ const IntelliTable: React.FC<Props> = (props) => {
             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',
+            }}
           >
-            <div className="d-flex align-items-center justify-content-center flex-row h-100">
+            <div className="d-flex align-items-center justify-content-start flex-row h-100">
               {/* Title */}
-              <h4 className="m-0">
+              <span className="text-nowrap">
                 {column.title}
-              </h4>
+              </span>
               {/* Buttons */}
               <div>
                 <button
                   type="button"
-                  className="btn btn-light"
+                  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={() => {
                     dispatch({
@@ -347,6 +369,33 @@ const IntelliTable: React.FC<Props> = (props) => {
       const aVal = a[sortColumnParam];
       const bVal = b[sortColumnParam];
 
+      // Tiebreaker sort by timestamp, most recent first (used if tied)
+      const tiebreaker = (
+        (b.timestamp ?? 0)
+        - (a.timestamp ?? 0)
+      );
+
+      // 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 tiebreaker;
+        }
+        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.Boolean) {
@@ -356,7 +405,7 @@ const IntelliTable: React.FC<Props> = (props) => {
         if (!aVal && bVal) {
           return (descending ? 1 : -1);
         }
-        return 0;
+        return tiebreaker;
       }
       // > Number
       if (
@@ -372,12 +421,12 @@ const IntelliTable: React.FC<Props> = (props) => {
       // > String
       if (paramType === ParamType.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;
+        return tiebreaker;
       }
       // > JSON
       if (paramType === ParamType.JSON) {
@@ -399,7 +448,7 @@ const IntelliTable: React.FC<Props> = (props) => {
       }
 
       // No sort
-      return 0;
+      return tiebreaker;
     });
   }
 
@@ -431,16 +480,19 @@ const IntelliTable: React.FC<Props> = (props) => {
             noValue
               ? (
                 <FontAwesomeIcon
-                  icon={faCheckCircle}
+                  icon={faMinus}
                 />
               )
               : (
                 <FontAwesomeIcon
-                  icon={faXmarkCircle}
+                  icon={fullValue ? faCheckCircle : faXmarkCircle}
                 />
               )
           );
           title = (fullValue ? 'True' : 'False');
+          if (noValue) {
+            title = 'Empty Cell';
+          }
         } else if (column.type === ParamType.Int) {
           fullValue = Number.parseInt(value, 10);
           const noValue = Number.isNaN(fullValue);
@@ -454,6 +506,9 @@ const IntelliTable: React.FC<Props> = (props) => {
               : fullValue
           );
           title = String(fullValue);
+          if (noValue) {
+            title = 'Empty Cell';
+          }
         } else if (column.type === ParamType.Float) {
           fullValue = Number.parseFloat(value);
           const noValue = Number.isNaN(fullValue);
@@ -467,9 +522,16 @@ const IntelliTable: React.FC<Props> = (props) => {
               : roundToNumDecimals(fullValue as number, 2)
           );
           title = String(fullValue);
+          if (noValue) {
+            title = 'Empty Cell';
+          }
         } else if (column.type === ParamType.String) {
           fullValue = String(value).trim();
-          const noValue = (value.trim().length) === 0;
+          const noValue = (
+            value === undefined
+            || value === null
+            || String(fullValue).trim().length === 0
+          );
           visibleValue = (
             noValue
               ? (
@@ -480,6 +542,9 @@ const IntelliTable: React.FC<Props> = (props) => {
               : fullValue
           );
           title = `"${value}"`;
+          if (noValue) {
+            title = 'Empty Cell';
+          }
         } else if (column.type === ParamType.JSON) {
           fullValue = JSON.stringify(value);
           const noValue = (
@@ -496,6 +561,7 @@ const IntelliTable: React.FC<Props> = (props) => {
               )
               : fullValue
           );
+          title="JSON Object"
         }
 
         // Create UI
@@ -503,6 +569,10 @@ const IntelliTable: React.FC<Props> = (props) => {
           <td
             key={`${datum.id}-${column.param}`}
             title={title}
+            style={{
+              borderRight: '0.05rem solid #555',
+              borderLeft: '0.05rem solid #555',
+            }}
           >
             {visibleValue}
           </td>
@@ -549,8 +619,10 @@ const IntelliTable: React.FC<Props> = (props) => {
   // Build main UI
   return (
     <div className={`IntelliTable-container-${id}`}>
+      {/* Modal */}
+      {modal}
       {/* Header */}
-      <div className="d-flex align-items-center justify-content-center">
+      <div className="d-flex align-items-center justify-content-start">
         {/* Title */}
         <h3 className="m-0">
           {title}
@@ -567,7 +639,7 @@ const IntelliTable: React.FC<Props> = (props) => {
           {/* Show/Hide Columns */}
           <button
             type="button"
-            className="btn btn-secondary"
+            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={() => {
@@ -591,7 +663,7 @@ const IntelliTable: React.FC<Props> = (props) => {
       </div>
       {/* Table */}
       <div
-        className={`IntelliTable-table-${id}`}
+        className={`IntelliTable-table-${id} mt-2`}
         style={{
           overflowX: 'auto',
         }}

package/src/components/ItemPicker/NestableItemList.tsx

@@ -1,6 +1,7 @@
 /**
  * Reusable nested item picker
  * @author Yuen Ler Chow
+ * @author Gabe Abrams
  */
 
 // Import React
@@ -43,36 +44,46 @@ type Props = {
 /* -------- State Definition -------- */
 
 type State = {
-  // True if children are being shown
-  isShowingItems: boolean,
+  // Map of children that are expanded
+  childExpanded: {
+    [k: string]: boolean
+  },
 };
 
 /* ------------- Actions ------------ */
 
 // Types of actions
 enum ActionType {
-  // Toggle whether the children are being shown
-  ToggleItems = 'toggle-items',
+  // Toggle whether a child are being shown
+  ToggleChild = 'toggle-child',
 }
 
 // Action definitions
 type Action = (
   | {
     // Action type
-    type: ActionType.ToggleItems,
+    type: ActionType.ToggleChild,
+    // Id of the child to show
+    id: (string | number),
   }
 );
 
 /**
  * Reducer that executes actions
- * @author Yuen Ler Chow
+ * @author Gabe Abrams
  * @param state current state
  * @param action action to execute
  */
 const reducer = (state: State, action: Action): State => {
   switch (action.type) {
-    case ActionType.ToggleItems: {
-      return { isShowingItems: !state.isShowingItems };
+    case ActionType.ToggleChild: {
+      return {
+        ...state,
+        childExpanded: {
+          ...state.childExpanded,
+          [String(action.id)]: !state.childExpanded[String(action.id)],
+        },
+      };
     }
     default: {
       return state;
@@ -99,9 +110,15 @@ const NestableItemList: React.FC<Props> = (props) => {
 
   /* -------------- State ------------- */
 
+  // Create initial map of child expanded booleans
+  const initChildExpanded: { [k: string]: boolean } = {};
+  items.forEach((item) => {
+    initChildExpanded[String(item.id)] = false;
+  });
+
   // Initial state
   const initialState: State = {
-    isShowingItems: false,
+    childExpanded: initChildExpanded,
   };
 
   // Initialize state
@@ -109,7 +126,7 @@ const NestableItemList: React.FC<Props> = (props) => {
 
   // Destructure common state
   const {
-    isShowingItems,
+    childExpanded,
   } = state;
 
   /*------------------------------------------------------------------------*/
@@ -231,13 +248,14 @@ const NestableItemList: React.FC<Props> = (props) => {
                     type="button"
                     onClick={() => {
                       dispatch({
-                        type: ActionType.ToggleItems,
+                        type: ActionType.ToggleChild,
+                        id: item.id,
                       });
                     }}
-                    aria-label={`${isShowingItems ? 'Hide' : 'Show'} items in ${item.name}`}
+                    aria-label={`${childExpanded[item.id] ? 'Hide' : 'Show'} items in ${item.name}`}
                   >
                     <FontAwesomeIcon
-                      icon={isShowingItems ? faChevronDown : faChevronRight}
+                      icon={childExpanded[item.id] ? faChevronDown : faChevronRight}
                     />
                   </button>
                 )}
@@ -257,7 +275,7 @@ const NestableItemList: React.FC<Props> = (props) => {
               />
 
               {/* Children */}
-              {item.isGroup && isShowingItems && (
+              {(item.isGroup && childExpanded[item.id]) && (
                 <div
                   className="NestableItemList-children-container"
                   style={{

package/src/components/ItemPicker/index.tsx

@@ -31,6 +31,8 @@ type Props = {
    *   values updated
    */
   onChanged: (updatedItems: PickableItem[]) => void,
+  // If true, don't add margin to bottom of item picker
+  noBottomMargin?: boolean,
 };
 
 /*------------------------------------------------------------------------*/
@@ -49,6 +51,7 @@ const ItemPicker: React.FC<Props> = (props) => {
     title,
     items,
     onChanged,
+    noBottomMargin,
   } = props;
 
   /*------------------------------------------------------------------------*/
@@ -66,6 +69,7 @@ const ItemPicker: React.FC<Props> = (props) => {
   return (
     <TabBox
       title={title}
+      noBottomMargin={noBottomMargin}
     >
       <div style={{ overflowX: 'auto' }}>
         <NestableItemList