dce-reactkit 5.0.6 → 5.0.7

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/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>;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dce-reactkit",
-  "version": "5.0.6",
+  "version": "5.0.7",
   "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,
   }
   & (
     | {