@homebound/beam 2.316.0 → 2.317.0

package/dist/components/Layout/RightPaneLayout/RightPaneContext.js

@@ -41,7 +41,7 @@ function RightPaneProvider({ children }) {
         setRightPaneContent(opts === null || opts === void 0 ? void 0 : opts.content);
         setIsRightPaneOpen(true);
     }, [setRightPaneContent]);
-    const closePane = (0, react_1.useCallback)(() => setIsRightPaneOpen(false), [setRightPaneContent]);
+    const closePane = (0, react_1.useCallback)(() => setIsRightPaneOpen(false), []);
     const clearPane = (0, react_1.useCallback)(() => setRightPaneContent(undefined), [setRightPaneContent]);
     const context = (0, react_1.useMemo)(() => ({ openInPane, closePane, clearPane, rightPaneContent, isRightPaneOpen }), [openInPane, closePane, rightPaneContent, clearPane, isRightPaneOpen]);
     return (0, jsx_runtime_1.jsx)(exports.RightPaneContext.Provider, { value: context, children: children });

package/dist/components/Layout/RightPaneLayout/RightPaneLayout.d.ts

@@ -1,6 +1,6 @@
 import { ReactElement } from "react";
 import { Palette } from "../../../Css";
-export declare function RightPaneLayout({ children, paneBgColor, paneWidth, defaultPaneContent, }: {
+export declare function RightPaneLayout(props: {
     children: ReactElement;
     paneBgColor?: Palette;
     paneWidth?: number;

package/dist/components/Layout/RightPaneLayout/RightPaneLayout.js

@@ -6,23 +6,19 @@ const framer_motion_1 = require("framer-motion");
 const react_1 = require("react");
 const Css_1 = require("../../../Css");
 const RightPaneContext_1 = require("./RightPaneContext");
-function RightPaneLayout({ children, paneBgColor = Css_1.Palette.White, paneWidth = 450, defaultPaneContent, }) {
+function RightPaneLayout(props) {
+    const { children, paneBgColor = Css_1.Palette.White, paneWidth = 450, defaultPaneContent } = props;
     const { isRightPaneOpen, rightPaneContent, clearPane, closePane } = (0, RightPaneContext_1.useRightPaneContext)();
     // Close pane on page unmount because otherwise the next page that has a right pane will show our stale content
-    (0, react_1.useEffect)(() => {
-        return () => {
-            closePane();
-        };
-    }, []);
+    (0, react_1.useEffect)(() => closePane, [closePane]);
     return ((0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.h100.df.overflowXHidden.$, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { css: {
                         ...Css_1.Css.w(`calc(100% - ${paneWidth + 24}px)`).add("transition", "width .2s linear").h100.mr3.overflowXAuto.$,
                         ...Css_1.Css.if(!isRightPaneOpen).w100.mr0.$,
                         ...Css_1.Css.if(!!defaultPaneContent).w(`calc(100% - ${paneWidth + 24}px)`).mr3.$,
-                    }, children: children }), (0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.position("relative").if(!!defaultPaneContent).wPx(paneWidth).$, children: [defaultPaneContent && ((0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.h100
+                    }, children: children }), (0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.relative.if(!!defaultPaneContent).wPx(paneWidth).$, children: [defaultPaneContent && ((0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.h100
                                 .wPx(paneWidth)
                                 .left(0)
-                                .position("absolute")
-                                .add("transition", "all .3s ease-in-out")
+                                .absolute.add("transition", "all .3s ease-in-out")
                                 .if(isRightPaneOpen)
                                 .add("opacity", 0)
                                 .left(100).$, children: defaultPaneContent })), (0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, { children: isRightPaneOpen && ((0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { layout: "position", "data-testid": "rightPaneContent", css: Css_1.Css.bgColor(paneBgColor).h100.wPx(paneWidth).$, 

package/dist/components/Table/utils/RowState.js

@@ -150,10 +150,10 @@ class RowState {
         if (this.row.selectable !== false) {
             this.selected = selected;
         }
-        // We don't check inferSelectedState here, b/c even if the parent is considered selectable
-        // on its own, we still push down selected-ness to our visible children.
-        for (const child of this.visibleChildren) {
-            child.select(selected);
+        if (this.inferSelectedState) {
+            for (const child of this.visibleChildren) {
+                child.select(selected);
+            }
         }
     }
     /** Marks the row as removed from `props.rows`, to potentially become kept. */

package/dist/hooks/useComputed.js

@@ -41,8 +41,13 @@ 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 (hasRan)
+            if (hasRan) {
+                // This can cause 'Cannot update a component while rendering a different component'
+                // if one component (the mutator) is updating observable from directly
+                // within it's render method. Usually this is rare and can be avoided by
+                // only updating observables from within useEffect.
                 setTick((tick) => tick + 1);
+            }
         });
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, deps);

package/dist/utils/defaultTestId.d.ts

@@ -3,6 +3,8 @@
  * returns `homeownerContract`.
  *
  * This is useful for our (non-bound) form fields that will probably have a label,
- * but may not have an data-testid set by the encompassing page.
+ * but may not have a `data-testid` set by the encompassing page.
+ *
+ * (Bound form fields typically set their test id from their form-state field's key.)
  */
 export declare function defaultTestId(label: string): string;

package/dist/utils/defaultTestId.js

@@ -7,9 +7,13 @@ const change_case_1 = require("change-case");
  * returns `homeownerContract`.
  *
  * This is useful for our (non-bound) form fields that will probably have a label,
- * but may not have an data-testid set by the encompassing page.
+ * but may not have a `data-testid` set by the encompassing page.
+ *
+ * (Bound form fields typically set their test id from their form-state field's key.)
  */
 function defaultTestId(label) {
-    return (0, change_case_1.camelCase)(label);
+    // Strip `m:4` to `m4` to prevent it from becoming `m_4` which our rtl-utils assumes
+    // means "the 4th element with a data-testid value of 'm'".
+    return (0, change_case_1.camelCase)(label.replace(":", ""));
 }
 exports.defaultTestId = defaultTestId;

package/dist/utils/rtl.d.ts

@@ -1,7 +1,7 @@
 import { newLocation as _newLocation, withRouter as _withRouter } from "@homebound/rtl-react-router-utils";
-import { blur as _blur, change as _change, click as _click, focus as _focus, getOptions as _getOptions, input as _input, RenderResult, select as _select, type as _type, typeAndWait as _typeAndWait, wait as _wait, Wrapper } from "@homebound/rtl-utils";
+import { blur as _blur, change as _change, click as _click, clickAndWait as _clickAndWait, focus as _focus, getOptions as _getOptions, input as _input, RenderResult, select as _select, type as _type, typeAndWait as _typeAndWait, wait as _wait, Wrapper } from "@homebound/rtl-utils";
 import { ReactElement } from "react";
-export { _blur as blur, _change as change, _click as click, _focus as focus, _getOptions as rtlUtilGetOptions, _input as input, _select as rtlUtilSelect, _type as type, _typeAndWait as typeAndWait, _wait as wait, };
+export { _blur as blur, _change as change, _click as click, _clickAndWait as clickAndWait, _focus as focus, _getOptions as rtlUtilGetOptions, _input as input, _select as rtlUtilSelect, _type as type, _typeAndWait as typeAndWait, _wait as wait, };
 export { _newLocation as newLocation, _withRouter as withRouter };
 interface RenderOpts {
     at?: {
@@ -10,8 +10,8 @@ interface RenderOpts {
     };
     omitBeamContext?: boolean;
 }
-export declare function render(component: ReactElement, withoutBeamProvider: RenderOpts, ...otherWrappers: Wrapper[]): Promise<RenderResult & Record<string, HTMLElement & Function>>;
-export declare function render(component: ReactElement, ...otherWrappers: Wrapper[]): Promise<RenderResult & Record<string, HTMLElement & Function>>;
+export declare function render(component: ReactElement, withoutBeamProvider: RenderOpts, ...otherWrappers: Wrapper[]): Promise<RenderResult & Record<string, HTMLElement>>;
+export declare function render(component: ReactElement, ...otherWrappers: Wrapper[]): Promise<RenderResult & Record<string, HTMLElement>>;
 export declare function cell(r: RenderResult, row: number, column: number): HTMLElement;
 export declare function cellOf(r: RenderResult, tableTestId: string, rowNum: number, column: number): HTMLElement;
 export declare function cellAnd(r: RenderResult, row: number, column: number, testId: string): HTMLElement;
@@ -39,7 +39,7 @@ export declare const withBeamRTL: Wrapper;
  *
  * @param value The value or label of the option.
  * */
-export declare function select(element: HTMLElement, value: string | string[]): void;
-export declare function selectAndWait(input: HTMLElement, value: string | string[]): Promise<void>;
-export declare function getSelected(element: HTMLElement): string[] | string | undefined;
-export declare function getOptions(element: HTMLElement): string[];
+export declare function select(select: HTMLElement, value: string | string[]): void;
+export declare function selectAndWait(select: HTMLElement, value: string | string[]): Promise<void>;
+export declare function getSelected(select: HTMLElement): string[] | string | undefined;
+export declare function getOptions(select: HTMLElement): string[];

package/dist/utils/rtl.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getOptions = exports.getSelected = exports.selectAndWait = exports.select = exports.withBeamRTL = exports.tableSnapshot = exports.rowAnd = exports.row = exports.cellAnd = exports.cellOf = exports.cell = exports.render = exports.withRouter = exports.newLocation = exports.wait = exports.typeAndWait = exports.type = exports.rtlUtilSelect = exports.input = exports.rtlUtilGetOptions = exports.focus = exports.click = exports.change = exports.blur = void 0;
+exports.getOptions = exports.getSelected = exports.selectAndWait = exports.select = exports.withBeamRTL = exports.tableSnapshot = exports.rowAnd = exports.row = exports.cellAnd = exports.cellOf = exports.cell = exports.render = exports.withRouter = exports.newLocation = exports.wait = exports.typeAndWait = exports.type = exports.rtlUtilSelect = exports.input = exports.rtlUtilGetOptions = exports.focus = exports.clickAndWait = exports.click = exports.change = exports.blur = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const rtl_react_router_utils_1 = require("@homebound/rtl-react-router-utils");
 Object.defineProperty(exports, "newLocation", { enumerable: true, get: function () { return rtl_react_router_utils_1.newLocation; } });
@@ -9,6 +9,7 @@ const rtl_utils_1 = require("@homebound/rtl-utils");
 Object.defineProperty(exports, "blur", { enumerable: true, get: function () { return rtl_utils_1.blur; } });
 Object.defineProperty(exports, "change", { enumerable: true, get: function () { return rtl_utils_1.change; } });
 Object.defineProperty(exports, "click", { enumerable: true, get: function () { return rtl_utils_1.click; } });
+Object.defineProperty(exports, "clickAndWait", { enumerable: true, get: function () { return rtl_utils_1.clickAndWait; } });
 Object.defineProperty(exports, "focus", { enumerable: true, get: function () { return rtl_utils_1.focus; } });
 Object.defineProperty(exports, "rtlUtilGetOptions", { enumerable: true, get: function () { return rtl_utils_1.getOptions; } });
 Object.defineProperty(exports, "input", { enumerable: true, get: function () { return rtl_utils_1.input; } });
@@ -143,16 +144,14 @@ exports.withBeamRTL = {
  *
  * @param value The value or label of the option.
  * */
-function select(element, value) {
-    const select = resolveIfNeeded(element);
+function select(select, value) {
     assertListBoxInput(select);
     ensureListBoxOpen(select);
     const optionValues = Array.isArray(value) ? value : [value];
     optionValues.forEach((optionValue) => selectOption(select, optionValue));
 }
 exports.select = select;
-async function selectAndWait(input, value) {
-    const select = resolveIfNeeded(input);
+async function selectAndWait(select, value) {
     // 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));
@@ -178,9 +177,8 @@ function selectOption(select, optionValue) {
     }
     (0, rtl_utils_1.click)(optionToSelect);
 }
-function getSelected(element) {
+function getSelected(select) {
     var _a;
-    const select = resolveIfNeeded(element);
     if (isSelectElement(select)) {
         throw new Error("Beam getSelected helper does not support <select> elements");
     }
@@ -199,8 +197,7 @@ function getSelected(element) {
     return selections.length > 0 ? (selections.length > 1 ? selections : selections[0]) : undefined;
 }
 exports.getSelected = getSelected;
-function getOptions(element) {
-    const select = resolveIfNeeded(element);
+function getOptions(select) {
     assertListBoxInput(select);
     ensureListBoxOpen(select);
     const listbox = findListBox(select);
@@ -223,10 +220,6 @@ function assertListBoxInput(select) {
     }
     return true;
 }
-function resolveIfNeeded(element) {
-    const maybeProxy = element;
-    return maybeProxy instanceof Function ? maybeProxy() : element;
-}
 function isSelectElement(element) {
     return element.nodeName === "SELECT";
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homebound/beam",
-  "version": "2.316.0",
+  "version": "2.317.0",
   "author": "Homebound",
   "license": "MIT",
   "main": "dist/index.js",
@@ -77,7 +77,7 @@
     "@emotion/react": "^11.10.6",
     "@homebound/eslint-config": "1.6.1",
     "@homebound/rtl-react-router-utils": "1.0.3",
-    "@homebound/rtl-utils": "^2.63.1",
+    "@homebound/rtl-utils": "^2.65.0",
     "@homebound/truss": "^1.131.0",
     "@homebound/tsconfig": "^1.0.3",
     "@semantic-release/exec": "^6.0.3",
@@ -93,7 +93,8 @@
     "@storybook/react": "^7.3.0",
     "@storybook/react-vite": "^7.3.0",
     "@storybook/testing-library": "^0.2.0",
-    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/jest-dom": "^6.1.2",
+    "@testing-library/react": "^14.0.0",
     "@tsconfig/recommended": "^1.0.2",
     "@types/dompurify": "^2.2.3",
     "@types/jest": "^29.4.0",