dce-reactkit 5.0.6 → 5.0.7

package/dist/cjs/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/cjs/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/cjs/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/index.js

@@ -2642,6 +2642,65 @@ const CopiableBox = (props) => {
                 "Copy")))));
 };
 
+/**
+ * Simple tooltip component
+ * @author Gabe Abrams
+ */
+/*------------------------------------------------------------------------*/
+/* ------------------------------ Component ----------------------------- */
+/*------------------------------------------------------------------------*/
+const Tooltip = (props) => {
+    /*------------------------------------------------------------------------*/
+    /* -------------------------------- Setup ------------------------------- */
+    /*------------------------------------------------------------------------*/
+    /* -------------- Props ------------- */
+    // Destructure all props
+    const { text, children, } = props;
+    /* -------------- Refs -------------- */
+    // Child ref
+    const childRef = useRef(undefined);
+    /*------------------------------------------------------------------------*/
+    /* ------------------------- Lifecycle Functions ------------------------ */
+    /*------------------------------------------------------------------------*/
+    /**
+     * Update (also called on mount)
+     * @author Gabe Abrams
+     */
+    useEffect(() => {
+        // Skip if no child
+        if (!childRef.current) {
+            return;
+        }
+        // Store copy of tooltip
+        let t;
+        // Initialize tooltip
+        (() => __awaiter(void 0, void 0, void 0, function* () {
+            // Import bootstrap tooltip
+            const BSTooltip = (yield import('bootstrap')).Tooltip;
+            // Initialize
+            t = new BSTooltip(childRef.current, {
+                title: text,
+                placement: 'top',
+                trigger: 'hover',
+            });
+        }))();
+        // Clean up tooltip
+        return () => {
+            if (t) {
+                t.dispose();
+            }
+        };
+    }, [text]);
+    /*------------------------------------------------------------------------*/
+    /* ------------------------------- Render ------------------------------- */
+    /*------------------------------------------------------------------------*/
+    /*----------------------------------------*/
+    /* --------------- Main UI -------------- */
+    /*----------------------------------------*/
+    // Clone child and add ref
+    return React__default.cloneElement(children, { ref: childRef });
+};
+
 /**
  * Reusable nested item picker
  * @author Yuen Ler Chow
@@ -2679,12 +2738,12 @@ const NestableItemList = (props) => {
     /*------------------------------------------------------------------------*/
     /* -------------- Props ------------- */
     // Destructure all props
-    const { items, onChanged, } = props;
+    const { items, onChanged, startWithGroupsExpanded, } = props;
     /* -------------- State ------------- */
     // Create initial map of child expanded booleans
     const initChildExpanded = {};
     items.forEach((item) => {
-        initChildExpanded[String(item.id)] = false;
+        initChildExpanded[String(item.id)] = !!startWithGroupsExpanded;
     });
     // Initial state
     const initialState = {
@@ -2773,6 +2832,14 @@ const NestableItemList = (props) => {
     /* ------------------------------- Render ------------------------------- */
     /*------------------------------------------------------------------------*/
     return (React__default.createElement("div", null, items.map((item) => {
+        var _a;
+        // Human-readable label for accessibility. Prefer the explicit
+        // ariaLabel, then fall back to the name if it is a plain string
+        const accessibleName = ((_a = item.ariaLabel) !== null && _a !== void 0 ? _a : (typeof item.name === 'string' ? item.name : ''));
+        // Checkbox and Text
+        const checkbox = (React__default.createElement(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$1.Light, uncheckedVariant: Variant$1.Light }));
         return (React__default.createElement("div", { key: item.id },
             React__default.createElement("span", { className: "NestableItemList-dropdown-button-container d-inline-block", style: {
                     minWidth: '2rem',
@@ -2784,17 +2851,18 @@ const NestableItemList = (props) => {
                         type: ActionType$9.ToggleChild,
                         id: item.id,
                     });
-                }, "aria-label": `${childExpanded[item.id] ? 'Hide' : 'Show'} items in ${item.name}` },
+                }, "aria-label": `${childExpanded[item.id] ? 'Hide' : 'Show'} items in ${accessibleName}` },
                 React__default.createElement(FontAwesomeIcon, { icon: childExpanded[item.id] ? faChevronDown : faChevronRight })))),
-            React__default.createElement(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$1.Light, uncheckedVariant: Variant$1.Light }),
+            item.tooltip
+                ? (React__default.createElement(Tooltip, { text: item.tooltip },
+                    React__default.createElement("span", { className: "d-inline-block" }, checkbox)))
+                : checkbox,
             (item.isGroup && childExpanded[item.id]) && (React__default.createElement("div", { className: "NestableItemList-children-container", style: {
                     paddingLeft: '2.2rem',
                 } },
                 React__default.createElement(NestableItemList, { items: item.children, onChanged: (updatedItems) => {
                         onChanged(changeItems(item.id, updatedItems));
-                    } })))));
+                    }, startWithGroupsExpanded: startWithGroupsExpanded })))));
     })));
 };
 
@@ -2811,7 +2879,7 @@ const ItemPicker = (props) => {
     /*------------------------------------------------------------------------*/
     /* -------------- Props ------------- */
     // Destructure all props
-    const { title, items, onChanged, noBottomMargin, hideSelectAllOrNoneButtons, } = props;
+    const { title, items, onChanged, noBottomMargin, hideSelectAllOrNoneButtons, startWithGroupsExpanded, } = props;
     /*------------------------------------------------------------------------*/
     /* ------------------------- Component Functions ------------------------ */
     /*------------------------------------------------------------------------*/
@@ -2868,7 +2936,7 @@ const ItemPicker = (props) => {
     // Main UI
     return (React__default.createElement(TabBox, { title: title, noBottomMargin: noBottomMargin, topRightChildren: selectAllOrNone },
         React__default.createElement("div", { style: { overflowX: 'auto' } },
-            React__default.createElement(NestableItemList, { items: items, onChanged: onChanged }))));
+            React__default.createElement(NestableItemList, { items: items, onChanged: onChanged, startWithGroupsExpanded: startWithGroupsExpanded }))));
 };
 
 /**
@@ -13445,65 +13513,6 @@ const DBEntryManagerPanel = (props) => {
     return (React__default.createElement("div", null, body));
 };
 
-/**
- * Simple tooltip component
- * @author Gabe Abrams
- */
-/*------------------------------------------------------------------------*/
-/* ------------------------------ Component ----------------------------- */
-/*------------------------------------------------------------------------*/
-const Tooltip = (props) => {
-    /*------------------------------------------------------------------------*/
-    /* -------------------------------- Setup ------------------------------- */
-    /*------------------------------------------------------------------------*/
-    /* -------------- Props ------------- */
-    // Destructure all props
-    const { text, children, } = props;
-    /* -------------- Refs -------------- */
-    // Child ref
-    const childRef = useRef(undefined);
-    /*------------------------------------------------------------------------*/
-    /* ------------------------- Lifecycle Functions ------------------------ */
-    /*------------------------------------------------------------------------*/
-    /**
-     * Update (also called on mount)
-     * @author Gabe Abrams
-     */
-    useEffect(() => {
-        // Skip if no child
-        if (!childRef.current) {
-            return;
-        }
-        // Store copy of tooltip
-        let t;
-        // Initialize tooltip
-        (() => __awaiter(void 0, void 0, void 0, function* () {
-            // Import bootstrap tooltip
-            const BSTooltip = (yield import('bootstrap')).Tooltip;
-            // Initialize
-            t = new BSTooltip(childRef.current, {
-                title: text,
-                placement: 'top',
-                trigger: 'hover',
-            });
-        }))();
-        // Clean up tooltip
-        return () => {
-            if (t) {
-                t.dispose();
-            }
-        };
-    }, [text]);
-    /*------------------------------------------------------------------------*/
-    /* ------------------------------- Render ------------------------------- */
-    /*------------------------------------------------------------------------*/
-    /*----------------------------------------*/
-    /* --------------- Main UI -------------- */
-    /*----------------------------------------*/
-    // Clone child and add ref
-    return React__default.cloneElement(children, { ref: childRef });
-};
-
 /**
  * A toggle switch that toggles on or off
  * @author Alessandra De Lucas