@homebound/beam 2.123.1 → 2.123.4

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

@@ -1,6 +1,6 @@
 import { ReactNode, ReactPortal } from "react";
-/** Helper component for placing scrollable content within a `NestedScrollProvider`. */
-export declare function ScrollableContent({ children, virtualized, }: {
+/** Helper component for placing scrollable content within a `ScrollableParent`. */
+export declare function ScrollableContent(props: {
     children: ReactNode;
     virtualized?: boolean;
 }): ReactPortal | JSX.Element;

package/dist/components/Layout/ScrollableContent.js

@@ -7,8 +7,9 @@ const react_dom_1 = require("react-dom");
 const FullBleed_1 = require("./FullBleed");
 const ScrollableParent_1 = require("./ScrollableParent");
 const Css_1 = require("../../Css");
-/** Helper component for placing scrollable content within a `NestedScrollProvider`. */
-function ScrollableContent({ children, virtualized = false, }) {
+/** Helper component for placing scrollable content within a `ScrollableParent`. */
+function ScrollableContent(props) {
+    const { children, virtualized = false } = props;
     const { scrollableEl, setPortalTick, pl } = (0, ScrollableParent_1.useScrollableParent)();
     (0, react_1.useEffect)(() => {
         // The below `tick` logic is a way to detect whether the ScrollableContent is being used.

package/dist/components/Table/GridTable.js

@@ -43,6 +43,7 @@ const useSortState_1 = require("./useSortState");
 const Css_1 = require("../../Css");
 const hooks_1 = require("../../hooks");
 const useRenderCount_1 = require("../../hooks/useRenderCount");
+const shallowEqual_1 = require("../../utils/shallowEqual");
 const _1 = require(".");
 exports.ASC = "ASC";
 exports.DESC = "DESC";
@@ -592,8 +593,23 @@ function GridRow(props) {
         }) }), void 0));
     return openCardStyles && openCardStyles.length > 0 ? (0, nestedCards_1.wrapCard)(openCardStyles, rowNode) : rowNode;
 }
-// Fix to work with generics, see https://github.com/DefinitelyTyped/DefinitelyTyped/issues/37087#issuecomment-656596623
-const MemoizedGridRow = react_1.default.memo(GridRow);
+/**
+ * Memoizes GridRows so that re-rendering the table doesn't re-render every single row.
+ *
+ * We use a custom `propsAreEqual` for the `GridRowProps.row` property, which we memoize
+ * based on the `GridDataRow.data` prop, such that if a table re-renders (i.e. for a cache
+ * updated) and technically creates new row instances, but a row's `row.data` points to the
+ * same/unchanged Apollo cache fragment, then we won't re-render that row.
+ *
+ * Note that if you're using virtualization, it can be surprising how unnoticeable broken row
+ * memoization is.
+ */
+// Declared as a const + `as typeof GridRow` to work with generics, see https://github.com/DefinitelyTyped/DefinitelyTyped/issues/37087#issuecomment-656596623
+const MemoizedGridRow = react_1.default.memo(GridRow, (one, two) => {
+    const { row: row1, ...others1 } = one;
+    const { row: row2, ...others2 } = two;
+    return (0, shallowEqual_1.shallowEqual)(row1, row2) && (0, shallowEqual_1.shallowEqual)(others1, others2);
+});
 /** Wraps a mobx Observer around the row's rendering/evaluation, so that it will be reactive. */
 const ObservedGridRow = react_1.default.memo((props) => ((0, jsx_runtime_1.jsx)(mobx_react_1.Observer, { children: () => {
         // Invoke this just as a regular function so that Observer sees the proxy access's

package/dist/components/Table/styles.js

@@ -65,7 +65,7 @@ exports.beamTotalsFixedStyle = {
 };
 exports.beamFlexibleStyle = {
     ...exports.beamFixedStyle,
-    cellCss: Css_1.Css.xs.bgWhite.aic.p2.boxShadow(`inset 0 -1px 0 ${Css_1.Palette.Gray100}`).$,
+    cellCss: Css_1.Css.xs.bgWhite.aic.py2.pxPx(12).boxShadow(`inset 0 -1px 0 ${Css_1.Palette.Gray100}`).$,
     presentationSettings: { borderless: true, typeScale: "xs", wrap: true },
 };
 exports.beamNestedFlexibleStyle = {

package/dist/components/Tooltip.js

@@ -35,7 +35,12 @@ function Tooltip(props) {
     const { triggerProps, tooltipProps: _tooltipProps } = (0, react_aria_1.useTooltipTrigger)({ isDisabled: disabled }, state, triggerRef);
     const { tooltipProps } = (0, react_aria_1.useTooltip)(_tooltipProps, state);
     const tid = (0, utils_1.useTestIds)(props, "tooltip");
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ ref: triggerRef }, triggerProps, (!state.isOpen && typeof title === "string" ? { title } : {}), tid, { children: children }), void 0), state.isOpen && ((0, jsx_runtime_1.jsx)(Popper, Object.assign({}, (0, react_aria_1.mergeProps)(_tooltipProps, tooltipProps), { triggerRef: triggerRef, content: title, placement: placement }), void 0))] }, void 0));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ ref: triggerRef }, triggerProps, (!state.isOpen && typeof title === "string" ? { title } : {}), tid, { 
+                // Adding `draggable` as a hack to allow focus to continue through this element and into its children.
+                // This is due to some code in React-Aria that prevents default due ot mobile browser inconsistencies,
+                // and the only way they don't prevent default is if the element is draggable.
+                // See https://github.com/adobe/react-spectrum/discussions/3058 for discussion related to this issue.
+                draggable: true, onDragStart: (e) => e.preventDefault() }, { children: children }), void 0), state.isOpen && ((0, jsx_runtime_1.jsx)(Popper, Object.assign({}, (0, react_aria_1.mergeProps)(_tooltipProps, tooltipProps), { triggerRef: triggerRef, content: title, placement: placement }), void 0))] }, void 0));
 }
 exports.Tooltip = Tooltip;
 function Popper({ triggerRef, content, placement = "auto" }) {

package/dist/inputs/ChipSelectField.js

@@ -100,11 +100,11 @@ function ChipSelectField(props) {
         items: listData.items,
         children: selectChildren,
         autoFocus: true,
+        disallowEmptySelection: false,
     };
     const state = (0, react_stately_1.useSelectState)({
         ...selectHookProps,
         selectedKey: (0, Value_1.valueToKey)(value),
-        disallowEmptySelection: false,
         onSelectionChange: (key) => {
             if (key === createNewOpt.id) {
                 setShowInput(true);

package/dist/utils/rtl.js

@@ -17,20 +17,24 @@ Object.defineProperty(exports, "wait", { enumerable: true, get: function () { re
 const react_1 = require("@testing-library/react");
 const components_1 = require("../components");
 function render(component, wrapperOrOpts, ...otherWrappers) {
+    let wrappers;
     if (wrapperOrOpts && "wrap" in wrapperOrOpts) {
         // They passed at least single wrapper + maybe more.
         // We put `withBeamRTL` first so that any `withApollo`s wrap outside of beam, so in-drawer/in-modal content has apollo
-        return (0, rtl_utils_1.render)(component, ...[exports.withBeamRTL, wrapperOrOpts, ...otherWrappers]);
+        wrappers = [exports.withBeamRTL, wrapperOrOpts, ...otherWrappers];
     }
     else if (wrapperOrOpts) {
         const { omitBeamContext, at } = wrapperOrOpts;
-        return (0, rtl_utils_1.render)(component, ...[
+        wrappers = [
             ...otherWrappers,
             ...(!omitBeamContext ? [exports.withBeamRTL] : []),
             ...(at ? [(0, rtl_react_router_utils_1.withRouter)(at.url, at.route)] : [(0, rtl_react_router_utils_1.withRouter)()]),
-        ]);
+        ];
     }
-    return (0, rtl_utils_1.render)(component, exports.withBeamRTL);
+    else {
+        wrappers = [exports.withBeamRTL];
+    }
+    return (0, rtl_utils_1.render)(component, { wrappers, wait: true });
 }
 exports.render = render;
 function cell(r, row, column) {

package/dist/utils/shallowEqual.d.ts

@@ -0,0 +1,4 @@
+/**
+ * An inlined version of shallowEach, see https://github.com/facebook/react/issues/16919
+ */
+export declare function shallowEqual(objA: any, objB: any): boolean;

package/dist/utils/shallowEqual.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.shallowEqual = void 0;
+/**
+ * An inlined version of shallowEach, see https://github.com/facebook/react/issues/16919
+ */
+function shallowEqual(objA, objB) {
+    if (Object.is(objA, objB)) {
+        return true;
+    }
+    if (typeof objA !== "object" || objA === null || typeof objB !== "object" || objB === null) {
+        return false;
+    }
+    const keysA = Object.keys(objA);
+    const keysB = Object.keys(objB);
+    if (keysA.length !== keysB.length) {
+        return false;
+    }
+    // Test for A's keys different from B.
+    for (let i = 0; i < keysA.length; i++) {
+        const currentKey = keysA[i];
+        if (!objB.hasOwnProperty(currentKey) || !Object.is(objA[currentKey], objB[currentKey])) {
+            return false;
+        }
+    }
+    return true;
+}
+exports.shallowEqual = shallowEqual;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homebound/beam",
-  "version": "2.123.1",
+  "version": "2.123.4",
   "author": "Homebound",
   "license": "MIT",
   "main": "dist/index.js",
@@ -34,7 +34,7 @@
   "dependencies": {
     "@homebound/form-state": "2.13.0",
     "@internationalized/number": "^3.0.3",
-    "@react-aria/utils": "^3.9.0",
+    "@react-aria/utils": "^3.11.3",
     "@react-hook/resize-observer": "^1.2.2",
     "change-case": "^4.1.2",
     "date-fns": "^2.21.3",
@@ -42,12 +42,12 @@
     "fast-deep-equal": "^3.1.3",
     "framer-motion": "^4.1.11",
     "memoize-one": "^5.2.1",
-    "react-aria": "^3.10.0",
+    "react-aria": "^3.14.1",
     "react-day-picker": "^7.4.10",
     "react-popper": "^2.2.5",
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",
-    "react-stately": "^3.9.0",
+    "react-stately": "^3.12.2",
     "react-virtuoso": "^2.4.0",
     "tributejs": "^5.1.3",
     "trix": "^1.3.1",
@@ -77,7 +77,7 @@
     "@emotion/jest": "^11.3.0",
     "@emotion/react": "^11.1.5",
     "@homebound/rtl-react-router-utils": "^1.0.3",
-    "@homebound/rtl-utils": "^2.51.0",
+    "@homebound/rtl-utils": "^2.59.3",
     "@homebound/truss": "^1.111.3",
     "@homebound/tsconfig": "^1.0.3",
     "@semantic-release/exec": "^6.0.3",