dce-reactkit 5.0.5 → 5.0.7

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

@@ -18,6 +18,7 @@ type Props = {
     small?: boolean;
     dashed?: boolean;
     useComplexFormatting?: boolean;
+    minSizeToShowLabel?: 'sm' | 'md' | 'lg' | 'xl';
 };
 declare const CheckboxButton: React.FC<Props>;
 export default CheckboxButton;

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

@@ -278,6 +278,7 @@ type Props$l = {
     small?: boolean;
     dashed?: boolean;
     useComplexFormatting?: boolean;
+    minSizeToShowLabel?: 'sm' | 'md' | 'lg' | 'xl';
 };
 declare const CheckboxButton: React$1.FC<Props$l>;
 
@@ -441,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;
@@ -467,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.5",
+  "version": "5.0.7",
   "description": "Shared components for Harvard DCE apps",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

package/src/components/CheckboxButton.tsx

@@ -48,6 +48,8 @@ type Props = {
   dashed?: boolean,
   // If true, use complex formatting (tabs, newlines) in the text
   useComplexFormatting?: boolean,
+  // Min bootstrap size to show the label
+  minSizeToShowLabel?: 'sm' | 'md' | 'lg' | 'xl',
 };
 
 /*------------------------------------------------------------------------*/
@@ -83,6 +85,7 @@ const CheckboxButton: React.FC<Props> = (props) => {
     small,
     dashed,
     useComplexFormatting,
+    minSizeToShowLabel,
   } = props;
 
   /*------------------------------------------------------------------------*/
@@ -118,30 +121,32 @@ const CheckboxButton: React.FC<Props> = (props) => {
       }}
     >
       <div className="d-flex align-items-center">
-        <div className="me-1">
+        <div>
           <FontAwesomeIcon
             icon={icon}
           />
         </div>
-        {
-          useComplexFormatting
-            ? (
-              <pre
-                className="ps-1 text-start text-break m-0"
-                style={{
-                  whiteSpace: 'pre-wrap',
-                  tabSize: 2,
-                }}
-              >
-                {text}
-              </pre>
-            )
-            : (
-              <div className="flex-grow-1 text-start text-break">
-                {text}
-              </div>
-            )
-        }
+        <div className={`text-start flex-grow-1 ms-1 ${minSizeToShowLabel ? `d-none d-${minSizeToShowLabel}-block` : ''}`}>
+          {
+            useComplexFormatting
+              ? (
+                <pre
+                  className="ps-1 text-break m-0"
+                  style={{
+                    whiteSpace: 'pre-wrap',
+                    tabSize: 2,
+                  }}
+                >
+                  {text}
+                </pre>
+              )
+              : (
+                <div className="text-break">
+                  {text}
+                </div>
+              )
+          }
+        </div>
       </div>
     </button>
   );

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,
   }
   & (
     | {