dce-reactkit 3.2.2-beta.3 → 3.2.2-beta.30

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

@@ -25,7 +25,7 @@ export declare const internalGetLogCollection: () => any;
  * @param opts.getLaunchInfo CACCL LTI's get launch info function
  * @param [opts.logCollection] mongo collection from dce-mango to use for
  *   storing logs. If none is included, logs are written to the console
- * @param [opts.logReviewAdmins=all admins] info on which admins can review
+ * @param [opts.logReviewAdmins=all] info on which admins can review
  *   logs from the client. If not included, all Canvas admins are allowed to
  *   review logs. If null, no Canvas admins are allowed to review logs.
  *   If an array of Canvas userIds (numbers), only Canvas admins with those

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>;
 
@@ -363,6 +364,7 @@ declare type Props$3 = {
      *   values updated
      */
     onChanged: (updatedItems: PickableItem[]) => void;
+    noBottomMargin?: boolean;
 };
 declare const ItemPicker: React.FC<Props$3>;
 
@@ -822,7 +824,7 @@ declare type GetLaunchInfoFunction = (req: any) => {
  * @param opts.getLaunchInfo CACCL LTI's get launch info function
  * @param [opts.logCollection] mongo collection from dce-mango to use for
  *   storing logs. If none is included, logs are written to the console
- * @param [opts.logReviewAdmins=all admins] info on which admins can review
+ * @param [opts.logReviewAdmins=all] info on which admins can review
  *   logs from the client. If not included, all Canvas admins are allowed to
  *   review logs. If null, no Canvas admins are allowed to review logs.
  *   If an array of Canvas userIds (numbers), only Canvas admins with those
@@ -1026,7 +1028,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.3",
+  "version": "3.2.2-beta.30",
   "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

package/src/components/IntelliTable.tsx

@@ -302,14 +302,14 @@ const IntelliTable: React.FC<Props> = (props) => {
           >
             <div className="d-flex align-items-center justify-content-center 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"
+                  className="btn btn-light btn-sm ms-1"
                   aria-label={sortButtonAriaLabel}
                   onClick={() => {
                     dispatch({
@@ -567,7 +567,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={() => {

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