dce-reactkit 5.0.6 → 5.0.8

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

@@ -800,6 +800,8 @@ 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
  */
 const visitServerEndpoint = (opts) => __awaiter(void 0, void 0, void 0, function* () {
@@ -849,6 +851,7 @@ const visitServerEndpoint = (opts) => __awaiter(void 0, void 0, void 0, function
         path: opts.path,
         method: (_c = opts.method) !== null && _c !== void 0 ? _c : 'GET',
         params,
+        headers: opts.headers,
     });
     // Check for failure
     if (!response || !response.body) {
@@ -2642,6 +2645,81 @@ 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;
+            // 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, {
+                title: text,
+                placement: 'top',
+                trigger: 'hover',
+            });
+        }))();
+        // Clean up tooltip
+        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 */
+            }
+        };
+    }, [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 +2757,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 +2851,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 +2870,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 +2898,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 +2955,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 +13532,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