@homebound/beam 2.309.1 → 2.309.3

package/dist/hooks/useComputed.js

@@ -26,21 +26,23 @@ function useComputed(fn, deps) {
         // If deps has changed, we're already re-running, so don't trigger a 2nd one
         current.hasRan = false;
         current.runner = (0, mobx_1.autorun)(() => {
-            const { value: oldValue, hasRan: oldHasRun } = current;
+            const { value: oldValue, hasRan } = current;
             // Always eval fn() (even on 1st render) to register our observable.
             const newValue = fn(oldValue);
+            // If we've already run and the value hasn't changed, don't trigger a re-render
+            //
+            // Also, we avoid a deep equality, b/c if a `useComputed` is returning something complicated/cyclic,
+            // like ReactElement, deep equality will crawl into the guts of React/ReactFiber and cycle/infinite loop.
+            if (hasRan && (0, shallowEqual_1.shallowEqual)(newValue, oldValue))
+                return;
+            // Only change the identity of `current.value` after we've checked that it's not shallow equal
             current.value = newValue;
             current.hasRan = true;
             // Only trigger a re-render if this is not the 1st autorun. Note
             // that if deps has changed, we're inherently in a re-render so also
             // don't need to trigger an additional re-render.
-            //
-            // Also, we avoid a deep equality, b/c if a `useComputed` is returning something
-            // complicated/cyclic, like ReactElement, deep equality will crawl into the guts
-            // of React/ReactFiber and cycle/infinite loop.
-            if (oldHasRun && !(0, shallowEqual_1.shallowEqual)(newValue, oldValue)) {
+            if (hasRan)
                 setTick((tick) => tick + 1);
-            }
         });
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, deps);

package/dist/utils/rtl.d.ts

@@ -32,8 +32,11 @@ export declare function rowAnd(r: RenderResult, rowNum: number, testId: string):
 export declare function tableSnapshot(r: RenderResult): string;
 /** RTL wrapper for Beam's SuperDrawer/Modal context. */
 export declare const withBeamRTL: Wrapper;
-/** Selects an option from the Beam SelectField, MultiSelectField, and TreeSelectField components
+/**
+ * Selects an option from the Beam SelectField, MultiSelectField, and TreeSelectField components.
+ *
  * For select fields that support multiple selections, subsequent calls to this function will toggle the selection state of an option.
+ *
  * @param value The value or label of the option.
  * */
 export declare function select(element: HTMLElement, value: string | string[]): void;

package/dist/utils/rtl.js

@@ -135,44 +135,50 @@ function getTextFromTableCellNode(node) {
 exports.withBeamRTL = {
     wrap: (c) => (0, jsx_runtime_1.jsx)(components_1.BeamProvider, { children: c }),
 };
-/** Selects an option from the Beam SelectField, MultiSelectField, and TreeSelectField components
+/**
+ * Selects an option from the Beam SelectField, MultiSelectField, and TreeSelectField components.
+ *
  * For select fields that support multiple selections, subsequent calls to this function will toggle the selection state of an option.
+ *
  * @param value The value or label of the option.
  * */
 function select(element, value) {
     const select = resolveIfNeeded(element);
-    if (isSelectElement(select)) {
-        throw new Error("Beam select helper does not support <select> elements.");
-    }
-    if (!isInputElement(select)) {
-        throw new Error(`Expected element to be INPUT, but got ${select.nodeName}. This field may be read-only.`);
-    }
-    function maybeOpenAndSelect(optionValue) {
-        const expanded = select.getAttribute("aria-expanded") === "true";
-        if (!expanded) {
-            (0, rtl_utils_1.click)(select);
-        }
-        const body = select.closest("body");
-        const listboxId = select.getAttribute("aria-controls");
-        const listbox = body.querySelector(`#${listboxId}`);
-        const options = listbox.querySelectorAll("[role=option]");
-        // Allow searching for options by their data-key (value) or textContent (label)
-        const optionToSelect = Array.from(options).find((o) => o.dataset.key === optionValue || o.dataset.label === optionValue);
-        if (!optionToSelect) {
-            throw new Error(`Could not find option with value or text content of ${optionValue}`);
-        }
-        (0, rtl_utils_1.click)(optionToSelect);
-    }
+    assertListBoxInput(select);
+    ensureListBoxOpen(select);
     const optionValues = Array.isArray(value) ? value : [value];
-    optionValues.forEach((optionValue) => {
-        maybeOpenAndSelect(optionValue);
-    });
+    optionValues.forEach((optionValue) => selectOption(select, optionValue));
 }
 exports.select = select;
-function selectAndWait(input, value) {
-    return (0, rtl_utils_1.allowAndWaitForAsyncBehavior)(() => select(input, value));
+async function selectAndWait(input, value) {
+    const select = resolveIfNeeded(input);
+    // To work with React 18, we need to execute these as separate steps, otherwise
+    // the `ensureListBoxOpen` async render won't flush, and the `selectOption` will fail.
+    await (0, rtl_utils_1.allowAndWaitForAsyncBehavior)(() => ensureListBoxOpen(select));
+    return (0, rtl_utils_1.allowAndWaitForAsyncBehavior)(() => {
+        const optionValues = Array.isArray(value) ? value : [value];
+        optionValues.forEach((optionValue) => selectOption(select, optionValue));
+    });
 }
 exports.selectAndWait = selectAndWait;
+function ensureListBoxOpen(select) {
+    const expanded = select.getAttribute("aria-expanded") === "true";
+    if (!expanded) {
+        (0, rtl_utils_1.click)(select);
+    }
+}
+function selectOption(select, optionValue) {
+    const body = select.closest("body");
+    const listboxId = select.getAttribute("aria-controls");
+    const listbox = body.querySelector(`#${listboxId}`);
+    const options = listbox.querySelectorAll("[role=option]");
+    // Allow searching for options by their data-key (value) or textContent (label)
+    const optionToSelect = Array.from(options).find((o) => o.dataset.key === optionValue || o.dataset.label === optionValue);
+    if (!optionToSelect) {
+        throw new Error(`Could not find option with value or text content of ${optionValue}`);
+    }
+    (0, rtl_utils_1.click)(optionToSelect);
+}
 function getSelected(element) {
     var _a;
     const select = resolveIfNeeded(element);
@@ -183,10 +189,7 @@ function getSelected(element) {
         // For read-only fields that render as a 'div'
         return (_a = select.textContent) !== null && _a !== void 0 ? _a : undefined;
     }
-    const expanded = select.getAttribute("aria-expanded") === "true";
-    if (!expanded) {
-        (0, rtl_utils_1.click)(select);
-    }
+    ensureListBoxOpen(select);
     const body = select.closest("body");
     const listboxId = select.getAttribute("aria-controls");
     const listbox = body.querySelector(`#${listboxId}`);
@@ -201,16 +204,8 @@ function getSelected(element) {
 exports.getSelected = getSelected;
 function getOptions(element) {
     const select = resolveIfNeeded(element);
-    if (isSelectElement(select)) {
-        throw new Error("Beam getOptions helper does not support <select> elements");
-    }
-    if (!isInputElement(select)) {
-        throw new Error(`Expected element to be INPUT, but got ${select.nodeName}. This field may be read-only. In that case we cannot get the list of options`);
-    }
-    const expanded = select.getAttribute("aria-expanded") === "true";
-    if (!expanded) {
-        (0, rtl_utils_1.click)(select);
-    }
+    assertListBoxInput(select);
+    ensureListBoxOpen(select);
     const body = select.closest("body");
     const listboxId = select.getAttribute("aria-controls");
     const listbox = body.querySelector(`#${listboxId}`);
@@ -220,6 +215,15 @@ function getOptions(element) {
         .filter((o) => !!o);
 }
 exports.getOptions = getOptions;
+function assertListBoxInput(select) {
+    if (isSelectElement(select)) {
+        throw new Error("Beam getOptions helper does not support <select> elements");
+    }
+    if (!isInputElement(select)) {
+        throw new Error(`Expected element to be INPUT, but got ${select.nodeName}. This field may be read-only. In that case we cannot get the list of options`);
+    }
+    return true;
+}
 function resolveIfNeeded(element) {
     const maybeProxy = element;
     return maybeProxy instanceof Function ? maybeProxy() : element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homebound/beam",
-  "version": "2.309.1",
+  "version": "2.309.3",
   "author": "Homebound",
   "license": "MIT",
   "main": "dist/index.js",
@@ -76,7 +76,7 @@
     "@emotion/react": "^11.10.6",
     "@homebound/eslint-config": "1.6.1",
     "@homebound/rtl-react-router-utils": "1.0.3",
-    "@homebound/rtl-utils": "^2.61.1",
+    "@homebound/rtl-utils": "^2.63.1",
     "@homebound/truss": "^1.129.0",
     "@homebound/tsconfig": "^1.0.3",
     "@semantic-release/exec": "^6.0.3",