@homebound/beam 2.309.0 → 2.309.2

package/dist/hooks/useComputed.js

@@ -1,12 +1,9 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useComputed = void 0;
-const fast_deep_equal_1 = __importDefault(require("fast-deep-equal"));
 const mobx_1 = require("mobx");
 const react_1 = require("react");
+const shallowEqual_1 = require("../utils/shallowEqual");
 /** Evaluates a computed function `fn` to a regular value and triggers a re-render whenever it changes. */
 function useComputed(fn, deps) {
     // We always return the useRef value, and use this just to trigger re-renders
@@ -37,7 +34,11 @@ function useComputed(fn, deps) {
             // 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.
-            if (oldHasRun && !(0, fast_deep_equal_1.default)(newValue, oldValue)) {
+            //
+            // 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)) {
                 setTick((tick) => tick + 1);
             }
         });

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.0",
+  "version": "2.309.2",
   "author": "Homebound",
   "license": "MIT",
   "main": "dist/index.js",
@@ -76,21 +76,21 @@
     "@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",
     "@semantic-release/git": "^10.0.1",
-    "@storybook/addon-docs": "^7.0.26",
-    "@storybook/addon-essentials": "^7.0.26",
-    "@storybook/addon-interactions": "^7.0.26",
-    "@storybook/addon-links": "^7.0.26",
-    "@storybook/addon-mdx-gfm": "^7.0.26",
-    "@storybook/addons": "^7.0.26",
-    "@storybook/manager-api": "^7.0.26",
-    "@storybook/mdx2-csf": "1.1.0",
-    "@storybook/react": "^7.0.26",
-    "@storybook/react-vite": "^7.0.26",
+    "@storybook/addon-docs": "^7.3.0",
+    "@storybook/addon-essentials": "^7.3.0",
+    "@storybook/addon-interactions": "^7.3.0",
+    "@storybook/addon-links": "^7.3.0",
+    "@storybook/addon-mdx-gfm": "^7.3.0",
+    "@storybook/addons": "^7.3.0",
+    "@storybook/manager-api": "^7.3.0",
+    "@storybook/mdx2-csf": "^1.1.0",
+    "@storybook/react": "^7.3.0",
+    "@storybook/react-vite": "^7.3.0",
     "@storybook/testing-library": "^0.2.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@tsconfig/recommended": "^1.0.2",
@@ -107,7 +107,7 @@
     "chromatic": "^6.17.0",
     "conventional-changelog-conventionalcommits": "^5.0.0",
     "eslint": "^8.12.0",
-    "eslint-plugin-storybook": "^0.6.12",
+    "eslint-plugin-storybook": "^0.6.13",
     "husky": "^5.1.1",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.4.3",
@@ -121,7 +121,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "semantic-release": "^20.1.0",
-    "storybook": "^7.0.26",
+    "storybook": "^7.3.0",
     "storybook-addon-designs": "beta",
     "ts-jest": "^29.0.5",
     "ts-node": "^10.9.1",