dce-reactkit 5.0.6 → 5.0.8

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

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

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

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

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

@@ -1,11 +1,14 @@
+/// <reference types="react" />
 /**
  * An item that can be chosen (for use within ItemPicker)
  * @author Gabe Abrams
  */
 type PickableItem = ({
     id: number | string;
-    name: string;
+    name: React.ReactNode;
+    ariaLabel?: string;
     link?: string;
+    tooltip?: string;
 } & ({
     isGroup: false;
     checked: boolean;

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

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

package/dist/index.d.ts

@@ -442,8 +442,10 @@ declare const CopiableBox: React$1.FC<Props$c>;
  */
 type PickableItem = ({
     id: number | string;
-    name: string;
+    name: React.ReactNode;
+    ariaLabel?: string;
     link?: string;
+    tooltip?: string;
 } & ({
     isGroup: false;
     checked: boolean;
@@ -468,6 +470,7 @@ type Props$b = {
     onChanged: (updatedItems: PickableItem[]) => void;
     noBottomMargin?: boolean;
     hideSelectAllOrNoneButtons?: boolean;
+    startWithGroupsExpanded?: boolean;
 };
 declare const ItemPicker: React$1.FC<Props$b>;
 
@@ -862,6 +865,8 @@ declare const initClient: (opts: ({
  * @param opts.path - the path of the server endpoint
  * @param [opts.method=GET] - the method of the endpoint
  * @param [opts.params] - query/body parameters to include
+ * @param [opts.headers] - custom headers to include; values must already be
+ *    string to avoid issue with header serialization
  * @returns response from server
  */
 declare const visitServerEndpoint: (opts: {
@@ -870,6 +875,9 @@ declare const visitServerEndpoint: (opts: {
     params?: {
         [x: string]: any;
     } | undefined;
+    headers?: {
+        [x: string]: string;
+    } | undefined;
 }) => Promise<any>;
 
 /**

package/package.json

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

package/src/components/ItemPicker/NestableItemList.tsx

@@ -16,6 +16,7 @@ import {
 
 // Import shared components
 import CheckboxButton from '../CheckboxButton';
+import Tooltip from '../Tooltip';
 import Variant from '../../types/Variant';
 
 // Import types
@@ -35,6 +36,8 @@ type Props = {
    *   values updated
    */
   onChanged: (updatedItems: PickableItem[]) => void,
+  // If true, groups start expanded instead of collapsed
+  startWithGroupsExpanded?: boolean,
 };
 
 /*------------------------------------------------------------------------*/
@@ -106,6 +109,7 @@ const NestableItemList: React.FC<Props> = (props) => {
   const {
     items,
     onChanged,
+    startWithGroupsExpanded,
   } = props;
 
   /* -------------- State ------------- */
@@ -113,7 +117,7 @@ const NestableItemList: React.FC<Props> = (props) => {
   // Create initial map of child expanded booleans
   const initChildExpanded: { [k: string]: boolean } = {};
   items.forEach((item) => {
-    initChildExpanded[String(item.id)] = false;
+    initChildExpanded[String(item.id)] = !!startWithGroupsExpanded;
   });
 
   // Initial state
@@ -229,6 +233,29 @@ const NestableItemList: React.FC<Props> = (props) => {
     <div>
       {
         items.map((item) => {
+          // Human-readable label for accessibility. Prefer the explicit
+          // ariaLabel, then fall back to the name if it is a plain string
+          const accessibleName = (
+            item.ariaLabel
+            ?? (typeof item.name === 'string' ? item.name : '')
+          );
+
+          // Checkbox and Text
+          const checkbox = (
+            <CheckboxButton
+              className={`NestableItemList-CheckboxButton-${item.id}`}
+              text={item.name}
+              checked={item.isGroup ? allChecked(item.children) : item.checked}
+              dashed={item.isGroup ? !noneChecked(item.children) : false}
+              onChanged={(checked) => {
+                onChanged(changeChecked(item.id, checked, items));
+              }}
+              ariaLabel={`Select ${accessibleName}`}
+              checkedVariant={Variant.Light}
+              uncheckedVariant={Variant.Light}
+            />
+          );
+
           return (
             <div key={item.id}>
               {/* Dropdown Button */}
@@ -252,7 +279,7 @@ const NestableItemList: React.FC<Props> = (props) => {
                         id: item.id,
                       });
                     }}
-                    aria-label={`${childExpanded[item.id] ? 'Hide' : 'Show'} items in ${item.name}`}
+                    aria-label={`${childExpanded[item.id] ? 'Hide' : 'Show'} items in ${accessibleName}`}
                   >
                     <FontAwesomeIcon
                       icon={childExpanded[item.id] ? faChevronDown : faChevronRight}
@@ -261,19 +288,18 @@ const NestableItemList: React.FC<Props> = (props) => {
                 )}
               </span>
 
-              {/* Checkbox and Text */}
-              <CheckboxButton
-                className={`NestableItemList-CheckboxButton-${item.id}`}
-                text={item.name}
-                checked={item.isGroup ? allChecked(item.children) : item.checked}
-                dashed={item.isGroup ? !noneChecked(item.children) : false}
-                onChanged={(checked) => {
-                  onChanged(changeChecked(item.id, checked, items));
-                }}
-                ariaLabel={`Select ${item.name}`}
-                checkedVariant={Variant.Light}
-                uncheckedVariant={Variant.Light}
-              />
+              {/* Checkbox and Text (optionally wrapped in a tooltip) */}
+              {
+                item.tooltip
+                  ? (
+                    <Tooltip text={item.tooltip}>
+                      <span className="d-inline-block">
+                        {checkbox}
+                      </span>
+                    </Tooltip>
+                  )
+                  : checkbox
+              }
 
               {/* Children */}
               {(item.isGroup && childExpanded[item.id]) && (
@@ -288,6 +314,7 @@ const NestableItemList: React.FC<Props> = (props) => {
                     onChanged={(updatedItems) => {
                       onChanged(changeItems(item.id, updatedItems));
                     }}
+                    startWithGroupsExpanded={startWithGroupsExpanded}
                   />
                 </div>
               )}

package/src/components/ItemPicker/index.tsx

@@ -35,6 +35,8 @@ type Props = {
   noBottomMargin?: boolean,
   // If true, hide select all or none buttons
   hideSelectAllOrNoneButtons?: boolean,
+  // If true, groups start expanded instead of collapsed
+  startWithGroupsExpanded?: boolean,
 };
 
 /*------------------------------------------------------------------------*/
@@ -55,6 +57,7 @@ const ItemPicker: React.FC<Props> = (props) => {
     onChanged,
     noBottomMargin,
     hideSelectAllOrNoneButtons,
+    startWithGroupsExpanded,
   } = props;
 
   /*------------------------------------------------------------------------*/
@@ -171,6 +174,7 @@ const ItemPicker: React.FC<Props> = (props) => {
         <NestableItemList
           items={items}
           onChanged={onChanged}
+          startWithGroupsExpanded={startWithGroupsExpanded}
         />
       </div>
     </TabBox>

package/src/components/ItemPicker/types/PickableItem.tsx

@@ -7,9 +7,15 @@ type PickableItem = (
     // Unique id of the item
     id: number | string,
     // Name of the item (human readable)
-    name: string,
+    name: React.ReactNode,
+    // Accessible label for the item, used for screen readers. Required when
+    // "name" is not a plain string (e.g. a custom ReactNode); when "name" is
+    // a string, it is used as the label if this is not provided
+    ariaLabel?: string,
     // Link to view the item in the browser
     link?: string,
+    // If included, show this text in a tooltip when hovering over the item
+    tooltip?: string,
   }
   & (
     | {

package/src/components/Tooltip.tsx

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

package/src/helpers/visitServerEndpoint.tsx

@@ -96,6 +96,8 @@ export const _setStubResponse = (
  * @param opts.path - the path of the server endpoint
  * @param [opts.method=GET] - the method of the endpoint
  * @param [opts.params] - query/body parameters to include
+ * @param [opts.headers] - custom headers to include; values must already be
+ *    string to avoid issue with header serialization
  * @returns response from server
  */
 const visitServerEndpoint = async (
@@ -103,6 +105,8 @@ const visitServerEndpoint = async (
     path: string,
     method?: ('GET' | 'POST' | 'DELETE' | 'PUT'),
     params?: { [key in string]: any },
+    // Headers have no serialization layer, so use string
+    headers?: { [key in string]: string },
   },
 ): Promise<any> => {
   // Set default method
@@ -159,6 +163,7 @@ const visitServerEndpoint = async (
     path: opts.path,
     method: opts.method ?? 'GET',
     params,
+    headers: opts.headers,
   });
 
   // Check for failure